本文主要面對前端初級新手，是我從事前端專案外包這一年多時間裡積累的經驗，提供一系列的工具和資料來幫助新手更高效的從事前端開發。但是由於本人水平有限，所以只能寫一些初級的方法和工具。沒有新增諸如grunt這類的更高階的工具，因為我對這塊目前還沒有很多實戰經驗。這裡說的是我一開始前端相關工作時的最原始的工作流程，有部分可能你也在經歷，有部分你經歷過去了。
首先拿到設計稿或者是與客戶溝通好設計需求。然後開始新建資料夾，將設計稿放好，新建index.html、style.css等等必要的資源檔案。通常先找找之前的專案，複製類似的檔案。然後開始按照設計稿寫html結構和css**，並且在需要的地方，切換到 photoshop 去切圖。寫完一次，摁下儲存，然後切換到瀏覽器，摁下f5或者是ctrl+f5強刷，看到效果是否滿意。如果不滿意，摁下f12呼出控制台，檢視對應的 html 結構，在除錯工具中修改引數值達到設計稿的需求，然後切換回去繼續在編輯器中編寫**，反覆到完成為止。
這個流程主要有一下幾個問題：
每次都要重複的建立初始專案結構和檔案，往往複製大量相同**。
用不好的編輯器寫html結構和css**，效率比較低下。
不停地切換瀏覽器、編輯器和 photoshop 等視窗，並且調整重新整理。
不停地重複上面第三步。
下面就來逐步優化這個工作流程。這裡的專案框架，並不是指bootstrap這類的，而是一整套專案結構。包括常用的html、css、js 元件和一些檔案目錄。在一些大公司中，往往會有這一整套打包好的框架，如果有相關專案，執行一條初始化命令，就給你複製下來乙份。對於小公司或者個人來說，這類的專案框架就需要自己來總結了。
ysass 主要基於 sass 和 sofish 的開源專案 typo。靈感是來自我們 deepdevelop 內部的前端框架，但是團隊內部的框架是面向國外**的，所以我重新整理了一下。typo為中文排版做了很多優化，經驗豐富的 sofish 前輩考慮的也非常全面成熟，於是就拿過來用了。
這個專案框架的使用也非常簡單，你只需要按照下面幾步就可以：
將設計稿扔進 psd 資料夾中，** psd 確定不需要的元件或功能，在相應資料夾中刪掉無用檔案。
開啟style.scss檔案，配置頭部專案資訊。
雙擊convert.bat檔案，開始監聽 scss 檔案變動並編譯。
開啟index.html，修改頭部資訊，刪掉或增加你的 js 元件，開始書寫你的語義化的 html 結構。
開啟scss\_var.scss檔案，新增專案常用變數。
開啟scss\_utils.scss檔案，新增你常用的 scss 函式。
開啟scss\_custom.scss檔案，編寫專案主要 css **。
開啟scss\_media-queries.scss檔案，編寫響應式相關功能。
別告訴我你沒用接觸過 sass，你難道不知道在 sass 中直接寫 css 也是可以的麼？再有，有阮一峰老師那半天就可以速成的 sass 教程，就不會拿出點時間提高一下開發效率？好的開發工具是一定要學習和使用的，不要禁錮自己的思想，說自己是 xx粉。很久之前我就聽說過神器sublime text，但是感覺用notepad++已經足夠了，於是仍然繼續使用notepad++，認為自己是 npp 粉。後來，又看到一大波sublime text讚潮，很多大神也在用，於是就拿了半天在網上找了一篇文章照著用了一下。結果從此改用sublime text，因為配合外掛程式，實在是比之前的編碼效率提公升 30% 以上。
所以，如果你用的不是sublime text，抓緊來用一下，或許它不是最適合你的，但它絕對值得你去嘗試一下！
使用sublime text除了本身好看之外，還有乙個重要的原因就在於外掛程式多、功能擴充套件強大。例如：
還有很多外掛程式，比如高亮**、**補充等等，這些需要你自己搜尋，但是上面兩個是前端必備的。emmet幫助你解決醜陋低效 html 問題，sass幫你提高 css 的編碼效率，前兩個問題基本解決了。既然是前端工程師，又是偏向頁面重構的，注定與瀏覽器脫不了干係。需要安裝各種瀏覽器來除錯或者做相容性測試，一般要安裝的瀏覽器和工具如下：
一般的相容性測試要求如下：
1，普通專案或者個人專案，要求 ie8+ 以上相容性，允許 css3 實現的效果優雅降級，整體不錯位即可。
相容到 ie8 是比較合理和輕鬆的，因為從 ie8 開始，ie 瀏覽器算是基本正常的瀏覽器了，大部分基礎的 w3c 標準都正確實現了，不再需要想辦法觸發 haslayout 這類東西來表現正常效果等。而且，ie6 和 ie7 的市場份額也在不斷減少，你那小破**會有幾個用 ie6、7 訪問的？這裡只需要用 ie10 或 ie11 的開發者工具大體切換一下就 ok 了。
2，要求更加嚴格的相容性測試，你需要使用 ietester 和虛擬機器進行測試。
這點是比較麻煩的，因為 ietester 經常崩潰，有時候根本打不開。而 ie 內建的開發者工具，雖然可以渲染不同版本 ie，但實際上有部分元素被改動過了，所以測試出來的結果，並不一定是真正早期版本瀏覽器的效果。通常來說 ietester 測試的結果要準確一些。
需要注意，瀏覽器在不同作業系統中也有一些差異，之前遇到過相關專案，客戶老是反饋在 ie8 上有 bug，我用 ietester 和 ie10 開發者工具都沒有問題，後來用了 xp 系統的虛擬機器一看，果真是有問題。所以，測試相容性最好的方法，就是用虛擬機器安裝各個系統，然後用原生系統+原生瀏覽器來做測試。雖然麻煩，但是在要求非常高的情況下，會更全面一些，一般要安裝下面幾個虛擬機器：
3，至於 chrome 和 firefox 的相容性，一般是沒有問題的，用這些瀏覽器的人也一般比較高階，會經常公升級，所以測試最新版就好了。最初我是 firefox 粉，特別熱愛 firebug 這個開發除錯外掛程式，但是 firefox 實在是令人失望，貌似至今沒有解決 flash 的崩潰問題，開啟速度很慢，相比 chrome 的秒開實在是有一定的差距，特別是安裝很多外掛程式之後更明顯。後來不得已轉用 chrome 作為主要除錯工具。下面說一下兩款瀏覽器比較好用的外掛程式和技巧。
firefox
1，firebug 必備的除錯神器，大家都知道，不再贅述。
2，響應式設計檢視，這是內建在 firefox web 開發者工具裡面的乙個工具，是我目前用過的最好的用來除錯響應式的工具（沒有之一）。開啟右上角firefox -> web 開發者 -> 響應式設計檢視或者直接摁下shift + ctrl + m。具體效果看下圖：
chrome
chrome 是當之無愧的最好的前端開發者瀏覽器，雖然介面和互動不如 firebug，但是功能異常強大而且更新很快，帶來很多創新性的功能。
1，將開發者工具放在側邊，用來快速看到響應式變化效果。不過不要使用這個來除錯，因為它的頁面寬度增加了滾動條的寬度，而且解析度一閃而過，不如 firefox 的響應式設計檢視更加準確。
2，livereload 外掛程式，幫助你無重新整理的檢視頁面效果。
3，emmet livestyle 外掛程式，幫助你實時看到修改的變化，而且支援將除錯工具中變化的值儲存到對應檔案中。
chrome 神奇的開發外掛程式還有很多很多，上面兩個算是對我來說幫助非常大的。雖然看上去emmet livestyle更加強大，已經包含了livereload外掛程式的功能，但實際開發上，需要視情況配合使用。emmet livestyle在開發者工具中除錯，會修改到對應的 css 檔案中，而不會修改 sass 或者 less 原始檔，這種情況就需要livereload外掛程式來實現無重新整理了。
這樣，對於有雙屏或者乙個23寸及以上的大顯示器的你，根本不需要切換介面以及摁下好多遍儲存鍵了。介紹完了這些工具和方法，下面再來回顧一下改進版的開發流程：
使用準備好的框架模板做初始化，直接複製過來，**並思考 psd ，抽出可復用模組，馬上開始寫**。
使用 emmet 和 sass 等工具，讓編碼效率和質量大幅度提公升。
使用 chrome 的 livereload 和 emmet livestyle 外掛程式，配合雙屏或者大屏顯示器，實現無切換無重新整理實時看到效果。
恩，配合多種工具的改進版的開發流程，提公升了不少的效率和編碼質量吧？
1 qt開發環境搭建 初級
qt開發環境搭建 一.qt介紹.qt 是乙個跨平台的 c 圖形使用者介面庫，由挪威 trolltech 公司於1995年底出品。2008年1月31日，nokia公司宣布通過公開競購的方式收購trolltech公司，旗下包括qt在內的技術都歸入nokia旗下。並且nokia針對自己的移動裝置平台規劃的...
Redis服務端的搭建（初級）
前方低能，僅適合入門級菜鳥閱讀，大神大牛通通閃開！前言 redis經常被用來做快取 原因自行科普 基於學習的需要自己搭建了乙個redis伺服器，考慮到專案的分布式部署，所以前期開始的時候，redis直接就部署在服務端了 如果專案沒有分布式部署，那麼redis和站點在同一主機上效能更好哦 伺服器環境 ...
前端學習 css 初級
web開發中，html的每個元素都是盒子，盒子可以裝內容 content 可以有填充物 padding 有外殼 border 和 外保護層 margin 下圖為控制台中的盒子詳解 瀏覽器的控制台是我們了解乙個元素最好的乙個工具，下圖可以清晰的看出乙個盒子所擁有的屬性。元素的實際寬高 上圖可清晰的看出...