Chrome 開發人員工具 console 的一些快速選擇的用法

開發工具一直都是前端人員的求生工具之一，相信大家在使用瀏覽器 Debug 時通常也都會開啟 F12 的開發人員工具，最近我從書上學到一些快速 & 覺得實用的 selector (也許是老掉牙的知識了?!)，紀錄一下:


(1) $0 選取目前被鎖定的元素
假如你已經在頁面上選擇某個元素了，那可以直接利用 $0 去選擇到你選到的 DOM。另外若你有載入 jQuery 的話，就可以直接利用 $($0) (或是 jQuery($0))去操作它。

其實 $( ) 代表的是 document.getElementById，但如果你裝的 library 也有 $( ) 這個 function，就會被你裝的 library 給取代。不過還好用 jQuery 感覺是沒差。

利用選取工具，去選擇你要的 DOM。

直接使用 $0:

而且 chrome 會記錄歷程，假設你選取過四個不同的 element，可以利用 $0, $1, $2, $3，而 $0 是拿最近一次選取的元素，最多，記錄到 $4 這樣。

如果是想要用 CSS 選取元素，可以用 $$()，相當於 document.querySelectAll()。比方說取得所有的 img，可以用 $$(img)。

(2) $x('XPATH') 使用 XPath 選到符合的元素
使用 $x() 這個函示可以直接把 XPath 的值當作 selector，首先你可以在選取的 selector 按下右鍵，複製 XPath，或是你知道規則，也就不需要複製。

接著利用 $x( ) 將 XPath 當作 selector 進行 Query:

(3) $0 拿最近一次計算的值的結果

除了這些還有 clear() 可以清除 console 的內容。
dir({key: value})，dir ( ) 函示可以放入一個 object，會以可以展開的形式呈現。
table(object)，以 table 的形式列出資料，這個功能我超愛，看起來很有新鮮感 :

Firefox 也有哦

若你有興趣知道更多，其實官方文件都有，建議可以去看看 :) 會有挖到寶的感覺

考取 70-480 Programming in HTML5 with JavaScript and CSS3 證照

微軟的這張 70-480 證照，考得正是前端工程師的必備技能，也就是 HTML, CSS, JavaScript 三種科目的混合考。因為證照在今年 (2016) 七月中過後要漲價，我也是不經意地看到這個消息，就想說去考考看了。

關於買樣板來製作網頁這一件事情

穎（@look_me08）張貼的相片 於 2015 年 9月 月 23 4:38上午 PDT 張貼

(因為不放圖顯得很空洞，所以放一張今天晚上在左道咖啡的照片)

今天買了一套 Admin 介面的樣板，我想起這件事情，還滿值得研究研究談一下想法。事實上我很常買樣板，甚至有些我根本也沒有用到，不過買回去第一件事情，想想別人為什麼可以做樣板做到可以拿來賣錢，一定有它方便於我的地方。

首先，完整性不用講，常常我們腦袋裡想的天馬行空，後台想要多牛B就多牛B，但就是不想動!? 對吧，於是幻想就停留在那一刻，然後刻出來的東西照樣平庸。

接下來是樣板有時候是『學習的樣本』，你可以買到用 Angular 製作的樣板，bootstrap 一樣，很多很多，你可以透過套過樣板知道別人怎麼把這一堆前端的 library, plugins 『兜』在一起，就算手法不是很高明，但也是一種解決方案，千萬不要覺得這些事情很簡單... 前端是很苦工的...。

可以學但不要照單全收，有些樣板不一定是很有組織的程式碼，這樣也是挺合理的... 因為畢竟他可能只是在 demo 某一件事情，通常你買來可能還需要再整理過。

再來是學習使用現有的樣板套用在自己的系統上，不論你的 template engine 是什麼，趁機組織一下頁面可以共用的地方，分出哪些是東西是 layout, partial, widget, 或是 bla~bla~bla~，有助於一點點習慣程式喜歡『re use』的概念。


當然也有人會認為，買樣板沒有樂趣，很有可能撞板或是什麼的... ，我個人是覺得只限於後台或是內部系統會買。前台的話，我還是喜歡有設計過的網頁 :P

只是想起，有一次在做手機版網站，當時還菜，一直不懂為什麼手機上看我的網站，那顆 menu 的按鈕按下去之後，感應很緩慢，不知道有 fastclick 可以幫我解決手機上 click delay 的問題，這點，從樣板學來，所以我知道了有這個工具。

第二個經驗是，樣板使用的 plugin 有時候會讓我驚訝，『原來有這種工具!』的心情。

前端是一個做久了有時候會很沉悶的工作，但偶爾發現一些驚喜，內心還是會很澎湃的，也許有這樣的心情的時候，才發現自己已經是個有點懶散的老鳥了...，因為懶，所以我寧可刷個幾百塊錢買樣板，企圖得到一個系統看起來很完整，能 work，眼睛順眼的結果。

我也來出一份自己的前端面試考題 (會一直更新...)

與其說是考題不如說是一些我覺得還蠻重要的觀念 :P
如果都會那應該能力真的不差 XD 說不定比我厲害很多 :D (我是小弱弱..)
持續整理中...

HTML 篇
1. 什麼是 html5shiv.js?
2. <label> 的何種屬性可以用來對應相對的 input?
3. [是非] jQuery 2.x.x 的版本是否支援 IE6, 7, 8?
4. <img> 標籤的 alt 跟 title 的差別是什麼?
5. absolute 跟 relative 的差別是?
6. 你都是如何清除浮動的?
7. 你如何讓行內元素變成塊級元素?
8. 你發現你寫的 media query 沒有 work，你會檢查哪些項目?
9. POST 跟 GET 差別?
10. 使用 input file 時要在相對應的 form 上加上何種屬性才有真正可以上傳檔案的作用?
11. input 的 placeholder 並沒有被所有的瀏覽器支援，你該怎麼解決這個問題？
12. input 的 readonly 跟 disabled 屬性對於後端接收資料的人來說有什麼差別?



CSS 篇 
1. CSS 的三種引入方式有哪些?
2. 什麼是 CDN? 使用 CDN 載入 js/css 的優缺是什麼?
3. 什麼是 CSS Sprites? 解釋用它的好處?
4. 如何利用 CSS 讓單行文字超出該元素的寬度後，字尾以 『...』 結尾?
5. 如果要將 body 預設字體大小為 10px，要如何用 % 表示 font-size?
6. 如何讓 <img> 符合 RWD (跟著螢幕的寬度調整其大小)
7. 你用過 compass, stylus 之類的 css preprocessor 嗎?
8. 把 outline 設定為 0 雖然可以移除奇怪的藍色邊框，可是會造成什麼缺點?



JavaScript 篇
1. Javascript 的變數有哪些形態?
2. 說明 apply() 跟 call() 的差別? (經典考題 ...)
3. 簡述一下你知道 .bind() 的作用是什麼？
4. 立即函式 IIFE (Immediately Invoked Function Expression) 可以怎麼表示? (只要有舉例就可以)
5. 承上題，什麼情境下你會選擇使用立即函式?
6. 以下這四種工具 Bower,  Browserify, Component 和 Duo，你使用過哪一個?  說明使用心得。
7. npm install package 時，如果加了 --save 表示什麼？ -g 表示什麼?
8. Template Engine 你用過哪些?



Git 篇
1. 你誤加入了一個檔案進到 git，要如何從 git 中移除他? 而不是只是從本機把檔案刪除。
2. 如何列出有 conflict 的檔案?
3. 請說明你所知道的 .gitignore 跟 .gitkeep 的用途是什麼?
4. 你在 commit 的時候打錯字了，要怎麼修正 commit 的內容為正確的內容?
5. [是非] 一個 git repo 可以有多個 remote?





加分篇(不回答無所謂)
1. 什麼是 Single Page Application?
2. 客戶要求你在他們的管理介面加一個編輯器，你都用何種編輯器?
3. 你用前端的 Framework 嗎？ 舉例習慣用哪些。如果你能多說明他們使用上的優缺更好。
4. 你會怎麼跟你的設計師解釋什麼是 Fluid Layouts?
5. 你平常透過哪些管道學習新的技術?

前端之路

＊如果你想學得快，就去看書，書有很多前人的經驗，看書可以知道別人解決問題的方法，一本書不過幾百塊錢，去圖書館借都有，這是省錢的方法。如果你不想看書，那就花錢上課，現在坊間的課很多，不用擔心沒得上。錢能解決的問題都是小事，如果你連最後一道防線，連錢都不願意付出，那就免談了，是你不想。你想要什麼你就會去追。 任何東西都是換來的。

Grunt FTP Deploy，一行 command line 就上 code!

我還記得以前在還在接案公司的時候，那時候程式沒有很好，(當然現在也沒有到多好...)，以前要更新程式碼到 server，都還是用 FIleZIlla，當然我不是瞧不起 FIleZilla...，而是檔案散佈很多不同資料夾，或只需要更新特定檔案時，找來找去實在很麻煩。

幾年後出現了 Grunt 這樣子的前端自動化工具之後，減少了不需要安裝 FileZilla 的麻煩，當然 Gulp 也有類似的工具。(我個人比較習慣 Grunt，所以 Gulp 就不多做介紹了..)

好處是因為 Grunt 已經幫我處理掉很多前端的事情了，像是 CSS, JavaScript 檔案壓縮，語法檢查等等，那麼如果連 FTP 都可以透過 Grunt 做掉，也是蠻方便的，現在我用的套件是這個:  zonak/grunt-ftp-deploy。

npm 套件的安裝清一色幾乎都是一樣的流程。必要條件是你必須要安裝:
＊Node.js
＊npm
而因為我們用的是 Grunt 的工具，因此也要裝 Grunt:
＊Grunt

必要的項目的裝完了之後，在自己的資料夾下安裝  Grunt ftp deploy
npm install grunt-ftp-deploy --save-dev

同樣的，你也必須有一個 Gruntfile.js，官網有非常詳細的 example，你可以從那裡 copy，接著看 github 上的說明或範例，直接拷貝。

目錄底下的 package.json 起碼會有這些東西: (如果你不知道什麼是 package.json，那請你在你網站的根目錄底下下 npm i 指令，一直按 enter，就會建立一個預設的 package.json)
＊"grunt": "^0.4.5",
＊"grunt-ftp-deploy": "^0.1.10"


接著這是我的 Gruntfile.js，這只是個 sample，給你參考用，其實跟官網的差不多...：
因為 FTP 連線需要帳號密碼，你要在目錄下也建立一個 .ftpconfig (Auth 的 .ftpconfig) 填入你的帳號密碼，然後在 Gruntfile.js 說明是用哪一組 Key 去登入 (Auth 的 authKey)。

然後我在 registerTask 指定當 Grunt 接收到 push 指令的時候，就幫我執行 ftp-deploy 的行為，把 src 目錄下的東西拷貝到 dest 目錄下的地方。

其實有些時候 FTP 也蠻管用的，只是我現在很少用到就是了...
非不得已的情況下，比方說 server 不允許 ssh 之類的，那就可以考慮看看用 Grunt 嘍!

Hack inline-block Element Spacing

今天在教我朋友寫前端的時後發現我們在 <ul> 底下所有的 <li> 做 inline-block 的時候會有奇怪的間距 (因為也不知道問題是 margin 還是 padding 還是 font-size 之類的...，但清掉還是一樣)。

問題是都已經 inline-block 而且寬度也除到剛好的百分比了，怎麼會有這種怪事...。

demo Source:
http://jsbin.com/juloyekinu/1/watch?html,css,output
http://jsbin.com/juloyekinu/1/

但我又不想用 float 解決，這樣還要用 clearfix 也不是方便哪裡去。後來找到了這篇
Fighting the Space Between Inline Block Elements Published April 21, 2012 by Chris Coyier ，當作解法，解法有幾種，我都不很喜歡... 最後還是挑了 Negative margin，當做最後的方法。

不知道大家有沒有什麼好建議，歡迎留言給我~ 謝謝!

更新:
後來找到一篇討論:
How to get rid of space between divs when display inline-block and stacked horizontally?
除了子層加 margin-left: -4px; 之外，可以用把父層的 font-size 設為 0 也可以。
哦.. 好不科學哦... css你... ><

AngularJS and jQuery 近期專案開發心得

最近好久沒寫文章了，因為這陣子遇到的事情太多太雜...，但是學到很多...，可是我沒有辦法一一記錄下來，...一時也提不起勁啊，這篇只好用一種當作日記的心情來寫寫了，請大家看看就好，不用太認真 xd，真的。

還有我不想跟大家筆戰，我只是分享一個專案同時使用 AngularJS 跟 jQuery 的感覺是什麼，是『AngularJS and jQuery』，而不是『AngularJS v.s jQuery』，更何況每個專案的體質本來就不同。

AngularJS  (logo來源)
前陣子社群非常活躍的一套 JavaScript Framework，我一直很想嘗試看看使用 AngularJS 是什麼感覺，但是我想一路走來的人都能理解，有時候寫玩具跟真正用在專案上是真的不太一樣的感覺 (當然自己的玩具也叫做專案xd)，只是有客戶的苛求，比較能夠往更多地方鑽研，如果什麼事情都照著工程師的想法做，那當然做什麼都比較順，因為我們都知道，『怎麼做對自己比較方便，而且可以達到一樣的功能』，恩...有點離題了。

所以這次用在工作的專案上，因為專案的需求，會使用到較多的 Ajax 的 Request，來替換頁面上的內容，因為 AngularJS 順暢的 Data Binding 的特性，以及 View Template，因此感覺蠻適合使用 AngularJS 作為這次專案想用的 Framework，從學習怎麼用 $http 到串到專案的功能，大約不會超過4天。 （我必須說明這次真的有太多的時間花在學習 AngularJS 的架構)。

說實在的，如果我今天很熟練 AngularJS，我想時間開支不會超過4天，以開發速度來說，AngualarJS 真的是不錯的選擇，再加上我第一次認真用過MV* 架構的 Framework，寫起來程式碼真的有架構許多，說實在的，如果還有機會，我是一定會再使用 AngularJS，或是學習其他 Framework，工具雖然學不完，但是這些架構跟 Framework 的設計真的蠻值得學習。

不過從 jQuery 寫到 Angular，一定要完全忘記 DOM 這件事情，剛開始用 Angular 有點不習慣，動不動我就想要用 selector，但是... 真的，要學會『綁手綁腳』的使用 Angular，我現在也正在努力適應這件事。:)



jQuery
jQuery 算是我比較熟的，從大學在程式設計公司打工時就是寫 jQuery，中間從來沒換過，至於他的優，我就不再多介紹了，但是就以這次專案遇到的功能，我真的是蠻想捨棄 jQuery 的...，(因為覺得 AngularJS 的 Temlate 太好用了...)，可是最後我還是把整個 AngularJS 改成 jQuery code 了，原因詳見下方轉折點。




轉折點
因為整個專案並不是公司自己開發的產品，因此要考慮到客戶想支援的瀏覽器程度，最後還是改用 jQuery 了，說實話心裡覺得有點杯具，3天內把整個之前用 Angular 寫好的功能改成用 jQuery 寫，還包含要不斷的測試。

• 最大的問題是 IE 瀏覽器版本的支援

為了符合客戶的 IE 瀏覽器的支援性，我自己測試是 AngularJS 在 IE7 完全沒辦法(我怎麼找都沒找到解法，如果有歡迎告訴我，謝謝～)，所有的表達式 {{expression }} 都會暴露在畫面上，並且也抓不到 Ajax 吐回來的資料，IE8 是有解法，就像官方網站上寫的那幾招。

還有一些 Angular 本來就很方便的功能，像是 $filter, $watch ...，使用 jQuery 全部要自己來，而且瀏覽器反應的速度真的有差。

遺憾的是，因為趕時程的關係，好像留下不少程式負債，總覺得不知道 jQuery 到底要怎麼寫，才會比較有架構，比較好讓人維護，這次很汗顏沒有寫的很好，而且我覺得我的 code 真的有夠『得體』(Dirty)。

好玩的是，平常沒有這麼多閒功夫，因為這次的教訓，一樣的功能用 jQuery 跟 AngularJS 各寫一次，真的很有感覺...。也算是長知識了。能夠靠專案學到這些，感覺也是挺過癮的。

當網站的畫面有跑版或其他前端相關的bug,該如何處理?

做前端如果一直遇到莫名bug,會是一件很麻煩的事情.
可以的話就要盡量debug,問題出在哪都還不確定,盡量別推說是瀏覽器的錯:P
所以當網站的畫面有跑版或其他前端相關的bug,該如何處理?

我這裡提供一些我自己的方法：

• 若是跑版問題,是否該檢查一下html結構是符合邏輯的(ex: 行內元素v.s塊級元素; tag沒包好...etc),會不會當初為了趕出prototype而做出來所以沒搞好架構。
• 瞭解你下過的css以及從別的地方copy過來的css,有時候可以注意 :hover 跟 :active 或 :focus 是不是下過了什麼css,這種事情還蠻容易被忽略。
• z-index; 浮動(float); clearfix; position:absolute v.s relative等等之類的問題。
• 你的css所使用的單位,不要沒下:active時是用px, :active時卻是em，單位要多注意。
• 是不是在其他地方使用了important或是再之後載入的css把它override了？ (使用開發人員工具多檢測)
• 每個瀏覽器都可能有自己的預設的html tag樣式,你是否已經reset了。
• 瞭解你的程式碼...
• 注意是否有用jQuery的selector去控制某Dom的css,以及其執行的時間點。
• 是不是使用其他JavaScript Framework或是library有影響畫面的？
• 上社群問人。
• 找stackoverflow(推！)。
• 問同事。
• 上線前還有機會debug,（如果你還有精神加班的話）別太快放棄。

感謝Caesar分享他的經驗，特此補上幾點:)

• check js error is or not ( chrome developer tool)
• clear cookie and session and local strorage
• open incognito window
• switch another browser

目前就這些了

有想到我在補上來:P

也歡迎大家提供自己的想法.