jimmy8646

jimmy8646

因緣際會之下接觸了 Drupal CMS 慢慢學會了寫程式，在參加了一日班之後用 Laravel Framework 找到了工程師的工作，碰上公司改組轉而成為了前端工程師，因為技術線是 Vue 所以我是 Vue 派的ＸＤ 現在公司的技術線是用 Ruby on Rails ，偶而會碰碰行銷案當個切版工。 現在覺得最難的事情是增肌，同時是個重機、滑板的初學者。

📍 Taipei
如何除錯元素 CSS 過寬而造成捲動軸
筆記

如何除錯元素 CSS 過寬而造成捲動軸

相信在寫前端樣式時時常都會遇到一個問題，就是元素過寬造成出現捲動軸或是手機可以拖移至螢幕外諸如此類的問題，最土法煉鋼的除錯方式就是一層一層地慢慢下 display:none 看是哪一個元素太寬造成破版，直到最近發現有一位大神寫了一段簡短的 js code 幫助 debug。 解決方案 [].forEach.call($$("*"),function(a){a.style.outline="1px solid #"+(~~(Math.random()*(1<<24))).toString(16)}) 只要將上面這段 code 貼在你的 console 內就可以看到效果，馬上就可以知道是哪一個元素在搞鬼了。 參考資料 108 byte CSS Layout Debugger [https://gist.github.com/addyosmani/
WordPress Gutenberg 編輯器撰寫 markdown
Gutenberg

WordPress Gutenberg 編輯器撰寫 markdown

身為一名高端的工程師一直追逐著最新的技術，這幾天默默的升級到了 5.0 直到剛剛才發現一件事情，欸我的 markdown 跑哪裡去了，新的編輯器怎麼寫 markdown ? 在網路上搜尋了一下才找到答案。 圖解 我一直都是使用 Jetpack 的 markdown 功能如果你不知道怎麼開啟的話請看下圖，他在 Jetpack 的設定內。 jetpack 啟用 markdown接著進到編輯器的畫面 gutenberg 使用 makrdown試著切換預覽模式看看 預覽切換gutenberg 編輯器算是一個很重大的改變，連我自己都還在習慣當中不過對我這種打打文章的人來說使用 markdown 格式還是最簡單的方式。
JavaScript 非同步大亂鬥
JavaScript

JavaScript 非同步大亂鬥

大家都知道 js 的非同步特性，這是一把雙面刃有時一些奇怪的 bug 也是因為非同步的問題，現在 es6 的語法已經讓我們可以很簡單的去操作避免掉非同步的一些問題，回過頭來還是必須要去深入理解基本功這件事情。 同步與非同步 同步(Synchronous) 與 非同步(Asynchronous) 這兩個名詞大家一定不陌生，以下用自己的認知來闡述這兩件事情，我們以一個餐廳的服務生當做例子。 非同步：餐廳內的一個服務生可以點餐完將菜單交給廚房的廚師，並且接著服務下一桌客人等到廚房將餐點準備好可以出菜時再回來將餐點送到顧客的桌上。 同步：餐廳內的一個服務生點餐完之後將菜單交給廚房，就在廚房等待廚師將餐點準備完畢將菜送到顧客桌上，才會再繼續服務下一桌的客人。 看出來了嗎？兩著的差別在於服務生點餐完之後是否有繼續服務下一桌客人，以 Node 來講就是 Single Thread 可以一次處理多個 Request 不須等待第一個 Request 處理完再去處理下一個 Request。 常遇到的問題範例 再來看看下面這些範例，這些也是面試時很常見到的考古題。 console.log('Be
從零開始的機器學習生活 – TensorFlow.js 學習顏色分類
筆記

從零開始的機器學習生活 – TensorFlow.js 學習顏色分類

在前面幾篇文章補足了一些基本知識之後，接著我們就可以進行一些基本的練習，本次做的是透過機器學習辨識顏色，下面將會附上程式碼以及 github page。如果你是 IOS 12 或是 Android 9 這些較新版本手機使用者，會有無法運算的 BUG 存在，只能靜待修復了。 資料 在寫程式之前，我們先談論關於資料來源這件事情，你可以自己收集資料、根據規則用程式產生資料（ex:衣服尺寸表）或是用 google 的 Dataset Search [https://toolbox.google.com/datasetsearch] 本次的資料來源則用教學 CodingTrain [https://github.com/CodingTrain/website/tree/master/Courses/intelligence_learning/session7/07_12_color_
從零開始的機器學習生活 - Parcel.js 與 TensorFlow.js
筆記

從零開始的機器學習生活 - Parcel.js 與 TensorFlow.js

看到 js 就知道肯定跟瀏覽器脫離不了關係，在 2018 TenrsorFlow Dev Summit Google 發表了 TenrsorFlow.js 這種黑科技實在是屌的飛起啊，瀏覽器都可以機器學習代表著有更多的應用，有興趣的可以看看以下影片。 Parcel.js 快速打包工具 Parcel.js [https://parceljs.org/] 是一套快速的打包工具，至於有多快速看看他的官方簡介就知道了安裝也只要 npm install -g parcel-bundler 詳細可以觀看 快速开始 [https://parceljs.org/getting_started.html] 有了 Parcel.js 可以讓我們很方便的開發單一頁面的網站如果要開發大型網站還是使用其他工具會比較好。 TensorFlow.js 接著我們就可以安裝 TensorFlow.js [https://js.tensorflow.org/
從零開始的機器學習生活 - 機器學習的種類
筆記

從零開始的機器學習生活 - 機器學習的種類

你是否會有個疑問到底機器學習 (Machine Learning) 到底是怎麼讓電腦學習的？如果籠統地跟你說就是一堆數學、演算法、統計學、向量、微積分諸如此類的東西，如果全都很陌生…沒關係我也不會ＸＤ我也不會跟你說一堆數學公式，如果有興趣可以去看 機器學習你也可以 – 文組帶你手把手實做機器學習聖經 [https://ithelp.ithome.com.tw/users/20107850/ironman/1566] 悔恨當初沒學好數學啊。 機器學習的方式 必須要先知道兩個名詞 * 資料（features） > 身高體重等這種餵給機器學習的資料集 * 標記（label） > 資料的答案 到底機器怎麼學？機器學習的方式約能分為三大類 * 監督式學習(Supervised learning) * 非監督式學習(Unsupervised learning) * 強化式學習(Reinforcement learning) 監督式學習（Supervised learning） 顧名思義，你必須要一樣一樣的告訴他正確
從零開始的機器學習生活 - Anaconda 與 Jupyter Notebook
筆記

從零開始的機器學習生活 - Anaconda 與 Jupyter Notebook

近來 Google 開源了 TensorFlow [https://www.tensorflow.org/] (今後簡稱 tf) 使得機器學習又邁向了另一個巔峰，儼然機器學習已經成為了時下最火紅的技術，身為一名工程師怎麼能不好好地跟上這波潮流呢？這次就先讓我們來處理開發環境。 開發環境 Anaconda tf 是使用 Python 語言所撰寫的，python 在函式庫的版本貌似很多地雷所以很多人都推薦使用 Anaconda [https://www.anaconda.com/download] 來作為環境平台以下是一個安裝的筆記，我個人會選用 Python 3 的版本來安裝 安裝過程就不詳細講解了安裝起來應該沒有太大的難度才對 當你安裝完如果你是 macOS 或 Linux 如果想要使用指令要記得在 .bash_profile 或是 .zshrc 加入 export PATH="/Users/USER_NAME/
Ansible 部署工具 pull git 專案
筆記

Ansible 部署工具 pull git 專案

俗話說的好：只要有重複做兩次以上的事情，都有自動化的價值。如果你很懶得每次都要連進伺服器做相同的事情，可是你又不會自動化部署等工具那麼你可以試試看 Ansible 什麼是 Ansible？ 簡單的來說你可以把它當作你的腳本工具，只要寫好腳本讓 Ansible 幫我們照著腳本來跑就好。 優點： * 伺服器上不用額外安裝 agent 只需要 python 跟 ssh * 腳本使用 xml 格式 安裝步驟 以下以 Mac 為開發環境 # 安裝 pip 也可跳過 curl https://bootstrap.pypa.io/get-pip.py -o get-pip.py python get-pip.py # pip 安裝 ansible pip install ansible ansible --version
CKEditor 修改 upload request
JavaScript

CKEditor 修改 upload request

CKEditor 相信大家都已經耳熟能詳，功能強大而且插件也多對於所見即所得編輯器是一個很好的選擇，編輯器內可以直接上傳圖檔或檔案的功能也很常見，今天你要在上傳多帶額外的資訊就沒有那麼簡單了，官方文檔你懂的… 前置作業 在這之前你應該已經開啟了上傳功能，如果你還沒開啟可以參考本站文章 Laravel CKEditor 整合 Laravel file manager [https://bonze.tw/laravel-ckeditor-with-laravel-file-manager/] 整合 Laravel file manager 的部分，或是 File Manager Integration [https://ckeditor.com/docs/ckeditor4/latest/guide/dev_file_browse_upload.html] TL;DR 如果你有看過官方文檔 [https://ckeditor.com/docs/ckeditor4/latest/guide/
ES6 學習筆記（二） 箭頭函數的 this
JavaScript

ES6 學習筆記（二） 箭頭函數的 this

那麼在先前已經學習過了箭頭函數的寫法，有沒有又覺得自己又潮了一點，箭頭函數並不只是單純寫法上的改變，另一個好處是箭頭函數的 this 是綁定父級作用域的，這麼說不太清楚不如直接看程式碼比較快。 範例 先來一段常常會見到的錯誤範例 const person = { name: 'jimmy', skills: ['html', 'css', 'php', 'js', 'vue', 'drupal', 'wordpress', 'laravel'], getSkills: function () { this.skills.map(function (skill) { // console.log(this)
Laravel 假資料產生工廠
筆記

Laravel 假資料產生工廠

你知道 Faker [https://github.com/fzaninotto/Faker] 嗎？ 我知道我知道！！ 打 LOL 的那個 Faker 是 PHP 產生假資料的 library 他的功能非常強大，幾乎可以應付你所有的需求，不管是文字、數字、圖片、人名只要你想得到的都可以產生出來，那麼就來看看 Laravel 怎麼產生假資料吧。 資料庫結構 在開始之前，先讓我們來產生一張 Articles 這張表來當作範例。 php artisan make:migration create_articles_table Schema::create('articles', function (Blueprint $table) { $table->increments('
Laravel CKEditor 整合 Laravel file manager
筆記

Laravel CKEditor 整合 Laravel file manager

CKEditor 一直是我很愛用的編輯器，功能強大擴充套件也很多，設定也很詳細，在之前我使用的 CMS 內都已經有整合好 CKEditor 現在到了 Laravel 要接上這個功能還真是花了不少時間。 那麼終於處理好 CKEditor 之後有另一個需求，我該怎麼上傳檔案？不可能寫文章內容都不會有圖片吧，也不可能叫使用者自己去上傳檔案再貼網址到內容，這操作流程對使用者一點也不友善。 流程 * 安裝 CKEditor * 將 CKEditor 套用到我們的 textarea * 設定 CKEditor 上傳使用 Laravel file manager 安裝 CKEditor 如何安裝 CKEditor 網路上已經有很多教學了，我個人是使用 laravel-admin [https://github.com/z-song/laravel-admin] 當作我的管理後台，所以安裝 CKEditor 你也可以去看他的教學，在這邊只提出一些重點。 在之前你要先在你 blade
Laravel Eloquent Date Restrictions 時間限制
筆記

Laravel Eloquent Date Restrictions 時間限制

當我在們撰寫 Laravel Eloquent 經常會遇到一個情境，就是時間 上的對比這件事情，例如：這篇活動公告是否在活動時間內，那麼我們可以預想的到，這個活動可能會有個 起始時間 與 結束時間 剩下就是時間運算的程式撰寫。 實際案例 我有一個活動的首頁輪播，使用者在上架時必須要填寫這張圖片的 起始時間 與 結束時間 如果 現在時間 還未到 起始時間 或是超過 結束時間 就不會顯示出來。 那麼為何有這樣的需求呢？~~因為懶~~ 因為未必會有人想在半夜進到網站後台發表資料，一定會想先一次上好，再來等時間到程式幫我們發佈出來就好。 程式碼撰寫 時間限制 邏輯 在此之前要先 感恩 Eloquent 讚嘆 Eloquent 讓我可以不用寫 SQL 語法就可以搞定事情。 app/Http/Controllers/HomeController.php namespace App\
[工具] MAMP Apache 如何開啟 Virtual Host
筆記

[工具] MAMP Apache 如何開啟 Virtual Host

MAMP 在 Windows 以及 Mac 上是一個非常好用的網頁架站懶人包，既然在本機開發你應該不會一次只有一個網站，可以使用 Virtual Host 建立多個假的網址在本地端開發，是相當實用的一個功能。 設定 以下為Mac為例 在開始之前我們必須先將 MAMP 的 port 號設定為我們常用的 port 如下 如果你沒有更改過安裝目錄的話設定檔路徑為 /Applications/MAMP/conf/apache/httpd.conf 找到設定 # Virtual hosts # Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf 我們將註解拿掉讀取設定 # Virtual hosts Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf
[PHP7] 陣列排序
PHP

[PHP7] 陣列排序

輸出資料給前端前有時必須要資料處理，舉個例子：一份履歷表須列出公司名稱、到職時間、離職時間，必須要照到職時間的先後順序排列，此時就可以使用陣列排序。 範例 $sort_array=array(); // 學校名稱 1 $sort_array['0']['school']=$profile->field_resume_school_name1['und'][0]['value']; // 入學日期與畢業日期 1 $sort_array['0']['time']=$profile->field_school_time_1[
Drupal

[Drupal 8] 實作上下一篇連結區塊功能

在部落格的文章當中，時常會看到上一篇、下一篇的連結功能，這個需求其實也算是很常見，在 Drupal 7 中，常常使用 Flippy [https://www.drupal.org/project/flippy] 這個老牌的模組，可是到了 Drupal 8 這個模組根本就還沒有 8 的版本可以使用，這個時候只能尋找替代方案或是，自己動手作一個來吧。 模組的選擇？ * Entity Pager [https://www.drupal.org/project/entity_pager] 確實很多老模組還沒有升上 8 是讓人很頭疼的事情，可是也因此會找到很多很酷炫的模組，目前找到了一款可以替代 Flippy 的模組，Entity Pager 正是可以完全實現 Flippy 功能的一個模組，這個模組顧名思義，就是使用 views
Drupal 8 麵包屑爬坑紀錄
Drupal

Drupal 8 麵包屑爬坑紀錄

Drupal 8 正式版到現在已經快兩年了，7 常用的模組很多都已經有 8 的版本，甚至是已經直接納入核心之內，到現在就還是沒有 Path Breadcrumbs 8 的版本，實在是讓人很頭大，所以只能尋找其他替代的模組來實做這個功能。 代替模組的選擇 * Easy Breadcrumb [https://www.drupal.org/project/easy_breadcrumb] * Menu Breadcrumb [https://www.drupal.org/project/menu_breadcrumb] * Current Page Crumb [https://www.drupal.org/project/current_page_crumb] * Views breadcrumb [https://www.drupal.
iTerm 2 整合 Touch Bar 潮起來
zsh

iTerm 2 整合 Touch Bar 潮起來

不知道大家有沒有發現，最近一次的更新之後，咱們的 iTerm 2 就支援了 touch bar 上的功能，這對於有 touch bar 的我真是讓人感到興奮（炫耀文？ 不外乎就是換換 theme 啦，切換 tab 啦，指令查詢啦…欸等等這個是什麼？ 阿不就 F1~F20 太愚蠢了吧…欸！？怎麼會有 F20 研究了一下原來是可以自定義 function 的功能。終於啊可以實現我一指 push 的夢想了。 安裝 zsh 在開始之前我們建議一定要安裝一下 oh-my-zsh 這個 shell 個人覺得最好用的地方在於 tab 自動完成上的強化囉，至於安裝方式就請參考官方文件吧 Oh My Zsh [https://github.
PHP 字串替換 str_replace()
PHP

PHP 字串替換 str_replace()

前言 在很多的文字判斷中，我們常常需要進行字串比對的應用，在比對之前我們須確保資料的一致性，免得出現許多無法判斷的例外。 例如說：地址的比對，台北市與臺北市或是數字的1與中文的一，對於程式來說就是不同的東西了，所以在比對之前我們必須將資料給統一格式處理。 使用方法 以下使用皆以字串當作範例，實際上可以使用陣列等資料型別。 str_replace ($search, $replce, $subject, $count) * $search 搜尋的字串 * $replce 替換的字串 * $subject 原始需要被執行的字串 * $count 可被執行的次數 > 要注意這個 function 是會被重複執行替換的！ 範例： “` $text = '請幫我把0123456789換成中文字'; $num = array("0", "1", "2", "3"
分享 - ATOM 套件設定備份與同步
atom

分享 - ATOM 套件設定備份與同步

如果你經常在不同的電腦上使用 ATOM 開發，如果同步環境很困擾你的話，推薦你一定要裝一下 sync-settings [https://atom.io/packages/sync-settings] 他可以幫我們同步與備份編輯器的環境參數以及我們所裝的 Package 。 設定 當我們安裝好之後會看到設定畫面如下圖。 我們會需要 Gist ID 跟 Personal Access Token 這兩樣我們可以在 GitGub [https://github.com/] 上可以取得。 首先我們先到 GitGub 上建立一個 Gist [https://gist.github.com/] 並且設定為 secret 。 接著我們就可以在網址上看到我們的 Gist ID。 然後我們就可以設定 Personal access tokens [https://github.com/settings/tokens/
Ubuntu 16.04 Kernel Panic 解決方法
server

Ubuntu 16.04 Kernel Panic 解決方法

今日遭遇到了 Ubuntu Server 無法開機的情況，只要一進入系統就會看到如下圖的畫面。 我們可以看到最下方有提到 Kernel panic 可以大概知道是與 Kernel 有所關聯，拜一下 Google 大神果不其然的有人跟我有同樣的狀況。 Kernel panic and unable to boot Ubuntu 16.04 after updating [https://askubuntu.com/questions/898449/kernel-panic-and-unable-to-boot-ubuntu-16-04-after-updating] 解決方法 重開機進入選擇作業系統的畫面並且切換核心版本，並且更換預設的開機 Kernel 版本，我們可以先找一下可以使用的 Kernel 版本。 sudo grub-mkconfig | less 找一下可以看到類似 Ubuntu, with Linux 4.4.0-70-generic 我們將它複製起來，