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

與其說是考題不如說是一些我覺得還蠻重要的觀念 :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. 你平常透過哪些管道學習新的技術?

讓 Youtube 影片符合螢幕寬度縮放 (RWD)

老掉牙的問題了，但每次都忘記，直接把 code 貼過來。

iframe, object, embed 前面最好都加上『上一層』的 selector。

iframe,
object,
embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

DEMO: JS Bin

前端工作流程筆記

最近剛好在看一些前端工作流程 (Frontend Workflow) 的文章或是 slide，說到前端的工作流程，不外乎就是想要做到自動化，要『省時, 省力, 省麻煩...』，不過以我自己的認知，一個團隊，有人是負責 follow 這些流程的人，當然也有制定流程跟規則的人，不知道為什麼，以最近接觸 Grunt 的程度來說，我覺得一個團隊負責處理這些自動化流程的人真是挺不簡單，以 Grunt 來說，有這麼多 plugin，身為制定自動化流程的人，或許要很熟悉什麼套件做什麼事情，才會更適合某個專案使用。算了，其實我現在也沒到這個等級 ，這邊就不多談了xdd

以下是筆記的部分：
關於自動化工作流程，幾乎網路上的文章，都會提到 Bower, Grunt, Yeoman。

Grunt 與 Bower

• Bower 是 Twitter 開發的前端套件管理工具 (Frontend Package Manager)。
• Bower 需要 node.js 環境以及 npm。
• 安裝: npm install -g bower。
• bower.json 可以先設定一些預設的相依性套件 ( bower 在 0.9.0 以前是使用 component.json ， 0.9.0 之後使用 bower.json )
  (這個跟 npm install 時要用的 package.json 很像)。
• 如果編輯完 bower.json 之後還有其他相依性套件 (dependencies) 要使用，可以重新下指令：bower install 或是使用 bower install packagename --save。
• Grunt，一個可以處自動化工作流程的工具，如同 bower 一樣需要 node.js 環境以及使用 npm。
• Gruntfile.js 通常會放在你的根目錄下。
• 這時候我有點疑惑...，有點分不清楚 Grunt 跟  Bower 的差別，上網找了一下解答 

[媽！我上台了] 從 PHPConf 2013 Lighting Talk 學到的事

今年 PHPConf 2013 ，很高興被大大們推坑xd，講了一場 Lighting Talk，本來覺得自己有點害羞，一直不知道該講什麼，想了好一陣子，最後還是不好意思拒絕，於是也就答應了。

其實難的不是主題，因為只要能跟 PHP 有關係，什麼主題都能講，而是我不知道怎麼講，怎麼把情境帶到我最後想要表達的事情，跟以前大學在報告專題是完全不一樣的方式。

經過這次的 Lighting Talk，發覺以前在學校的自己根本沒什麼改進。

• 先有企劃書，然後才有 PowerPoint，這個步驟好奇怪...。
• 就算上台報告了，竟然是 PowerPoint 帶領自己要講什麼，主角變成了 PPT ，而不是講者自己內心想講的事情，我發覺我以前講話好像都沒有先釐清自己要講什麼...。

最後的結論就是，為了五分鐘的 Lighting Talk，花了好多時間在家學講話，實在很搞笑，但也很真實，這就是需要訓練表達能力的開始...。

雖然我不能說自己講的不錯，不過我也盡力了，希望大家有機會也可以多嘗試這樣上台說說話的機會，當你從一個  Listener 到  sharer ，我不敢說會讓你大開眼界，但絕對有另外一層體會。

接著我朋友在youtube發現有人錄下了Lighting Talk，真是太好了，雖然我完全沒有勇氣聽自己的聲音...（影片來源網址：https://www.youtube.com/watch?v=pQFIvqknnrY ｜ 作者： locy69）

當網站的畫面有跑版或其他前端相關的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

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

[閒聊] 回憶去年的我，是怎麼當上前端的...

如題，只是閒聊一下而已...
由於最近，又開始找房間租了，讓我想到去年這時的我，找工作的心情真是七上八下。

我想每個想要找工作的新鮮人，心情都是緊張的，既期待又怕受傷害不是嗎?
每個人畢業就像一張白紙，已經清楚自己要走什麼路的人，都會希望找到心儀的工作，

曾經我還以為大四那年在新一代的時候可以藉由畢業展得到一些工作機會，
現在回想起來覺得自己真傻，這個社會沒這麼單純:P
與其等工作機會，不如就直接出去面試吧，是的...，
我就是利用新一代那幾天自己沒有排班的時間溜出去面試工作的，呵呵。

當時我的背景 :

• 某國立大學剛畢業，有大約一年科技公司工讀經歷，當過一個學期多的網頁設計課助教。
• 念的是傳統工藝。
• 大三開始接觸網頁，所以也是從大三開始努力榨乾圖書館所有跟css/html/js/PHP有關的資源，看多少算多少。
• 大學的時候實習過很多2~3個地方，最後確定自己最喜歡的是web，喜歡什麼試過就知道了。
• 有曾經想要跨修資管或資工的課，可惜的是想修都跟自己系上的必修課衝突
• 對於畢業的起薪沒有任何概念，(這件事情有好有壞)，因為我不是本科，所以我沒有預設，只希望求得相關工作。
• 大四心無旁鶩，沒有打算準備研究所，只想做好畢業製作然後順利畢業，工讀等等。
• 五月準備履歷，開104跟518，五月中前接到的面試通知大約有8~9間，但有興趣的公司只有兩間，因此就只面試兩間(都在台北)
• 兩間面試都很緊張，因為很少面試經驗...
• 兩間面試後都在隔2~3天後拿到offer，後來選擇了某家。
• 畢業後一周馬上就要報到，找房子找的很急...
• 我非常愛看工具書，這點我到是還蠻推薦的，畢竟課堂上學到的東西有限，有時候借幾本PHP回家看看也好，重點是不要發懶，該動手實作的時候就是要，如果說前面幾章節那種基本的事情都不願意做了，後面我想應該也很難看下去了吧?! 除非是已經很熟悉了。

心得:

• 達到夢想的感覺簡直像做夢，開心的不得了! 要感謝公司願意給我機會
• 當時找工作完全不考慮南部，個人是覺得台北的機會多，願意給新人的機會也多，聚會多，資源多，conference多，當時的前端職缺也是北部大於南部。
• 我想兩間的面試會過有很大的原因是剛畢業的我有相關的工讀經驗，其中一家有看大學成績，兩間的筆試應該都沒有太差吧?!(可是我都不知道成績xd)，考的都是基本的網頁設計概念題，以及基本的程式邏輯; 另外有可能是因為我的志向很堅定吧?! 我不會為了找到工作而把自己的履歷寫的我什麼都會。
• 新鮮人的履歷寫起來真的很複雜，因為大學什麼都教，不過還是要取捨，不然就是要分好幾份履歷寫?!。
• 大學所學跟社會要的，的確很有差別，所以能夠想辦法在大學實習的時候就實習吧，我是從實習當中，發現自己最喜歡A，然後也會恍然大悟，原來我沒有這麼喜歡B之類的感覺。
• 老實講大三大四我過得還蠻辛苦的，當時很緊張地想要把程式的基礎學起來，更希望自己有實戰經驗...，還有自己課內的事情要處理，不過也是能學多少算多少，最糟的情況也不過就是失業幾個月好好找工作之類的，但是該學的還是要學，當時是希望自己可以達到資管系的水準...。
• 學歷跟科系，的確有點影響，因為有些前端職缺我根本沒辦法丟，已經標榜要資訊相關科系了，這點至今仍然是吃虧的Orz..，老實說，籌碼太少了，當時學歷不高也沒經歷。
• 不要捨不得花錢，該投資自己的時候，就是該花錢...

(以上僅供參考...)

每個人要的不同，很多事情，不能一下子就想要得到，還沒學會好好走路的時候，別想著飛，到現在我還有很多地方要學，我有時候也覺得很受挫，並不是找到工作了就輕鬆了，還是要一步一步來..。

本文純粹心情抒發，><

JavaScript-同源策略

同源策略又稱同源準則(same-origin policy)
(通常看書應該是不知道在說些什麼，遇到了才知道xd，我覺得這是需要經驗才知道的事...)
它的定義大概是，不同來源的script不能讀寫對方的script，(除非有明確的授權，ex:Access-Control-Allow-Origin)
這裡只寫script是因為client-side的語言不只JavaScript，還有可能有ActionScript, ECMAScript。

怎樣算是同源?
就是這樣...

所謂相同協議就是http://這種。
所謂域名就是(只是舉例) http://www.blogger.com跟http://test.blogger.com ，www跟test屬於不同域。
怎樣算是不同port呢，比方說在做網站開發時你有自己的sandbox，你的網址是http://www.wintest.com:1234而正式的developer環境是http://www.wintest.com:8080，1234跟8080屬於不同port。


舉例來說
你在你的頁面加入了Facebook的按讚功能的iframe，你想要使用google分析偵測使用者有沒有按下那個讚，這是不可能的，因為這個行為並沒有遵守同源準則，這是我以前犯的錯，我並不能存取那個facebook按讚的DOM。

http不能存取https，http跟https這兩個是不同協議。
還有更多的範例請參考wiki ，我發現wiki的例子非常不錯!。

前端工程師阿...

Frontend?
(喃喃自語ing...)
在我大學畢業後的一年來，一直持續關注著人力銀行上的前端職缺，並不是100%想要換工作的心態在做這件事情，而是我想要知道，到底需要什麼技能，好讓我有個方向，不要走歪，才剛踏入這行沒多久而已，至今我還覺得我算是半張白紙，還有好好認真的空間，畢竟我想以前端為職(當然也並沒有特別排斥了解後端的事情，只是更愛前端多一點xd)，殊不知...到現在，我還是覺得好像很多職缺，對前端的定義，並沒有很一致，大致上，分為三種情況 :

• 很偏UI的前端 (心理曾經OS到底是找UI還是找f2e?! xd)
• 很偏後端的前端
• 前端(略懂後端)

看來看去就是這樣情況，總之零零總總，我已經迷糊了。

現在這種地步讓我覺得，只要會用plugin，就好像誰都會寫javascript了 ?!
好像會jQuery，就是會javascript了?!
所以我最近一直在思考這個問題，到底該如何讓自己在眾多前端人員內擁有差異化?
這件事情也讓我困擾很久(<--也有可能是我想太多了...)，我也跟普通人一樣曾經上網爬文過什麼前端該具備的技能阿~，前端工程師該知道的事啊~ 什麼有的沒有超級多文章，我不知道為什麼我突然最近心裡很爆發，我再也不想管這些了，再這樣下去煩惱有的沒有的人生太辛苦了，就這樣吧，好好把握自己擁有的技術，想學甚麼就學，不用管太多了。好好跟自己的內心商量一下，就不會這麼困擾了。

[讀後記] 之 Web前端黑客技術揭秘

這本書其實在上個月已購入，蠻新的一本書，他其實在今年2013一月份就已出版。
然後我一直拖到這幾天才開始看，我覺得還蠻不錯的，因為我平常也很少接觸這樣的議題，也沒有真的被駭過還是怎麼樣的，不過我覺得這本書的確有提到很多前端人員應該知道的一些防範基礎以及網站的弱點，算是值得一看。

關於網站的安全，以前很多人給我的觀念是後端有檔就好，但我當了前端才知道其實前後端都要檔，而且是必定要做的事情(心虛地寫出這句話xd)，不過這本很少提及後端的部分，著重在前端的黑客部分。
如果想知道其他的，可參考OWASP的TOP10
(不過top10只是指出前10名，10名以後的也要關注一下)

這本書所介紹的範圍指 client端，或者瀏覽器端
主要的議題有:

• XSS(Cross site scripting)
• CSRF (Cross  site request forgery) [forgery:偽造的意思] aka 跨站請求偽造
• CSS的風險
• cookie的安全
• 當然也有介紹flash的部分像是crossdomain.xml的部分等等，不過我不懂Flash所以這部份我就沒翻到多少
• 介面操作挾持
• 如何發掘漏洞
• 如何利用漏洞
• HTML5的安全
• 一些案例的介紹

關於這些內容我有機會遇到的話再一一介紹，順帶一提，這本書有介紹的一些案例現在可能也很難發生了(像CSS的expression...)，主要是一些歷史案例，或者是現在的瀏覽器也已經幫忙濾掉了。


後記 :

• 前端有很多的漏洞其實都圍繞在同一件事情那就是瀏覽器的同源策略，下一篇可能會寫這個:P。
• 網路的世界都是Data，有存在server端的, client端的, 正在傳輸的(JSON..),等等，在資料的傳輸之間每個環節都有可能有安全上的漏洞。
• 然後我覺得最可怕的 clickjacking 跟 tapjacking(觸屏挾持) 以及 HTML5 的安全 xd
• XSS雖然名為跨站腳本，這裡的'跨站'指的是突破瀏覽器的同源策略，但重點並不在跨站，而應該是在腳本(script)
• 我覺得要當黑客也不是一件簡單的事....，中間有一段我其實沒看懂，可能資歷不夠深吧Orz..

參考:
Web2.0 Hacking
https://www.owasp.org/index.php/Category:OWASP_Top_Ten_Project
http://vdisk.weibo.com/u/1652595727

[個人資料蒐集] 2012-11月份前端工程師所需技能統計

我不知道為什麼我心血來潮做了這件事情(是不是有點無聊!?)，但是也該做，這本來就是我未來想要做的工作，本來就該了解，自從看了掏寶UED的網站之後，我打算有機會也要統計一下對岸的前端技能要求是如何，不能只看台灣，要看世界。

下面的表格我從人力銀行搜到有的前端工程師，以及front-end職缺的公司，以及該職缺所必須有具有的技能，恩...目前, 有稍微打個馬賽克(對不起...我知道這樣看有點不舒服...)，不太好意思直接公布，感覺不太恰當><

但並不是全台灣所有有前端的公司都在這裡，只是碰巧人力銀行有刊登職缺，才被我搜到，若沒公布職缺的公司，其實我沒刻意去找有哪些。
當然啦，有些公司的前端的技能需求有點偏差甚至是太誇張，根本不像前端再做的事，那一兩家我就沒有算在我的統計選項之一了。

統計數量總共22間 (點圖可放大)

上面的圖比較不重要，直接看圓餅圖 (或雷達圖):

前端技能最大的三個part剛好是 HTML + CSS + Javascript ，恩..不意外，很正常，如果不是這三個我可能會嚇到...xd。  

說實話我還是第一次仔細統計過這件事情，不過很特別的事情是
HTML 跟 Javascript 兩者都是完全100%的必須技能，(恩,好像也沒甚麼好特別的，本來就要會)
但CSS卻不是每家都要這個技能，不知道是忘記寫還是覺得那是基本，所以沒寫，不然就是...我..我看到眼花了@@。

有一家公司很直接的寫需要會MVC，其他家到是挺含蓄的寫如果具有server-side的語言會更好(其中又以php最多)，看在我的眼裡，只要包含 "最好" , "加分項目"，其實都是必須.....。

然後也越來越多公司需要你具有使用 Facebook API 這樣的技能，恩..這個..我還不太會(淚奔)

Ajax是第四名

版本控制Git , svn..等，看起來有慢慢浮出在技能所需的'加分'條件裡了

下次關注這些職缺的時候可能是
明年 年前年後的時後，如果有甚麼特別的發現，會再做紀錄。

[資料蒐集] 台灣有Frontend 職稱的公司

Front-end Web Developer = 前端工程師
以下是我個人的資料蒐集，並不代表全部
台灣有Frontend 職稱的公司 :

• 美商謀智（Mozilla）
• 美商網碩科技
• 春樹科技股份有限公司
• 網勁科技股份有限公司
• 願境網訊股份有限公司(KKBOX)
• 華碩電腦股份有限公司
• 香港商雅虎資訊股份有限公司(Yahoo!奇摩)
• 英屬維京群島商台灣集購城有限公司台灣分公司
• 阿碼科技股份有限公司 
• 口袋資訊股份有限公司
• 紅谷資訊股份有限公司
• 鑫箱創意有限公司
• 雲永科技股份有限公司
• 我在資訊股份有限公司 
• 曼克斯數位娛樂有限公司(籌備處)
• 飛迅設計有限公司

比例上來看，北部有此職稱的工作較多，南部少。
其實這份清單早在我畢業前就準備好了，今天早上整理Google文件時想說來發篇文章好了，順便把放在google的文件給刪了。
在台灣，有這個職稱的公司不多，而在很多其他國家，前端已經殺出成為一個專門的職稱了。一直到我快要畢業，想要開始準備找工作時，才聽過這個職稱，但當時，很多技能，我已經來不及學了，大三到大四兩年的努力，仍然不及資工資管的二分之一吧.....
尤其當我第一次打開人力銀行搜尋"前端"這個職稱的時候，筆數不超過20筆，真是嚇傻了眼...
說實話那時候很擔心找不到工作。現在只一直希望自己可以當個...好厲害的前端 > < ，但路還很長，前端要學的東西，遠遠超乎我的想像。但我不想要自己20出頭"只有這樣"，現在只能努力了