jimmy8646 - 一群棒子 (Page 3)

Chrome Resource Override 插件開發技巧

身為前端工程師通常都習慣在本地開發程式，大多的專案都是 HTML CSS JavaScript 三者成一組，所以在開發上本機還原也是相當簡單的，如果專案是因為環境上的因素無法在本機還原呢？像是程式必須在測試機才看得到效果、又或是使用 JSP 輸出 HTML 模板而你又無法安裝 JAVA 環境，這時在開發上就有點綁手綁腳了。 Resource Override 遇到這種情況我都會使用 chrome 的插件 Resource Override [https://chrome.google.com/webstore/detail/resource-override/pkoacgokdfckfpndoffpifphamojphii] 使用起來也是非常的直觀，在你的開發面板會看到一個新的分頁，Overrides 他可以做到 * URL 對 URL * URL 對程式碼 * 插入程式碼 * 修改請求 Headers 適用情境本地端不想/無法還原，只能在線上端觀看結果組合技

JavaScript

JavaScript 使用 Web Speech Recognition 語音辨識

最近工作上有實作到語音辨識輸入這功能，不過在文件上並不是那麼清楚所以寫一篇筆記來紀錄事件觸發的順序。瀏覽器支援度可以用 Can I use [https://caniuse.com/#search=Speech%20Recognition] 這個網站看看瀏覽器的支援度，恩..基本上只有 Chrome 有辦法使用。手機更不用說了 iOS 全滅只有 Android 手機有辦法使用。判斷是否有支援語音辨識可以用以下程式碼 window.SpeechRecognition = window.webkitSpeechRecognition || window.SpeechRecognition if(!window.SpeechRecognition){ return } const recognition = new SpeechRecognition() 如果你直接 new SpeechRecognition() 就會 Uncaught ReferenceError: SpeechRecognition is not defi

筆記

如何除錯元素 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/

Gutenberg

WordPress Gutenberg 編輯器撰寫 markdown

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

平台

線上測試正則表達式網站

有時候我們需要使用正則表達式來進行一些驗證，這個時候在線上端直接測試就會有效率許多，於是乎就找到了這個網站 regex101 [https://regex101.com/] 藉此分享一下

JavaScript

JavaScript 非同步大亂鬥

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

筆記

從零開始的機器學習生活 – 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

看到 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

近來 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 什麼是 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

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/

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)

JavaScript

ES6 學習筆記（一）箭頭函數

寫碼容易讀碼難，在 JavaScript ES6 中有一個語法叫做箭頭函數（arrow function）他的語法讓程式碼更加的簡短，以下是一段簡單的程式碼範例。範例 const arr = [1,3,5,7,9] const double = arr.map(function(arr){ return arr*2 }) console.log(double) // [2, 6, 10, 14, 18] //箭頭函數 const arr = [1,3,5,7,9] const double = arr.map((arr) => { return

筆記

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

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

筆記

[工具] 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

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

css

CSS 選擇器與正則表示法

當我們在撰寫 CSS 樣式時，通常都是使用 id 或是 class 來當作選擇的選項，些時候以上兩種方式並沒有辦法滿足我們的需求，所以我們可以抓取 HTML attribute，或是使用正則表示法來抓取 HTML 元素。範例 HTML 架構 <div class="wrap"> <a href='/more'>read more</a> <div id="im-item1" class="item">item1<

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.

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.

平台

[工具] - 線上 md5 產生器

md5 加密方法已經被廣泛地使用，我們在串接 API 時經常會使用到它，有些串接的 API 廠商後台會提供可以測試的系統，這時線上產生 md5 就可以派上用場囉使用方法輸入框內輸入想要加密的字串，按下 hash darling, hash! 複製下方的 md5 checksum 即可＃工具＃加密

PHP

PHP 字串替換 str_replace()

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