20個為前端開發者準備的文件和指南(3)

2016-08-07    分類:WEB開發、程式設計開發、首頁精華0人評論發表於2016-08-07

本文由碼農網 – 唐李川原創翻譯,轉載請看清文末的轉載要求,歡迎參與我們的付費投稿計劃

我們來到了2015年(譯者注:原文撰寫與2015年2月25日),而且我感肯定你現在有下面兩種感覺的其中一種:

1.你對在這個產業中得花費多少來學習有些不堪重負(Really overwhelmed)

2.渴望獲取到更多的知識,但是等不到別人告訴你接下來該學些什麼。

我假設它綜合了這兩種情緒-第一種產生的原因是我們個人的情感,而第二種焦慮產生就有些不必要了。

所以,為了幫你走出困境,我編譯了另外一些有用的文件,資訊站點和涉及到前端開發不同領域的指南的列表。

1.I want to use

基於的資料和功能都在Can I use網站上列出來了,這個app可以給你選擇很多前端開發功能的能力和獲得全世界使用者看到你選擇的功能的人數的百分比。

2. Regulex(JavaScript正規表示式視覺化工具)

它是一個客戶端工具,一個JavaScript正規表示式視覺化工具,該工具有一個精確的錯誤提示器,來告訴你在你的正規表示式裡有某個語法錯誤。它也提供一種選擇,即通過使用一對iframe標籤來把輸出的結果嵌入到你想要嵌入的地方。

3. Mastering the :nth-child(精通:nth-child)

它是隻有一頁的站點,可以幫助你理解如何使用多種多樣有用但是通常又很複雜的基於nth-child的選擇器組合。

4. HTML5 Video Events and API(HTML5 Video(視訊)事件和API)

“這個頁面演示了HTML5 video的新元素,它的多媒體API,以及多媒體事件。播放、暫停和在整個視訊裡搜尋、調節音量、靜音、調節回放速度(包括設定為負值)。在視訊裡看看效果,看看主要事件的效果和屬性值的變化。”

5. Excess XSS(攻克XSS)

XSS介紹連結地址: http://baike.sogou.com/v625072.htm?fromTitle=xss

它大概就是一個所有開發者都應該熟悉的主題,而且對於瞭解XSS,它上面的內容也許是很好的開始。它是跨站指令碼的綜合性的教程,是一份潛在攻擊型別的手冊,並且提供瞭解決方案來預防這些攻擊。

6. RSCSS

它意味著”合理的CSS 樣式表結構標準”,在為很大的專案編寫Sass/CSS時,它還在備檔一些技巧和技術。

Sass介紹連結地址: http://baike.sogou.com/v73912368.htm?fromTitle=SASs

7. CodeFightClub(程式設計競爭俱樂部)

“它是由Andrew Hathaway建立的一個專案,它的目標是幫助同樣的開發者學習如何盡他們所能來以最好、最有效和最優的方式來編寫他們的程式碼。為了能決定誰的程式碼編寫方式是最好的,使用者可以發表評論,並且可以為他們喜歡的競爭者投票來贏得一場競爭。”這個網站根據程式語言分成了很多類別,但是上面似乎沒有那麼多,然而你可以在網站上新增來使它增多,並且也可以發起一些”程式設計競爭賽”。

8. Sass Guidelines(Sas指南)

它來自Sass大師Hugo Giraudel,“一個固執己見的樣式指南,用來編寫合理的,可維持的和可擴充套件的Sass程式碼。”該指南已經被翻譯成了六種其他的語言。

9. Flexbugs

“它是一個社群策劃的flexbox(伸縮佈局盒)問題和為它們準備的跨瀏覽器解決方案。它的目的是,如果你用flexbox構建了一個站點,而它並沒有像你預期的那樣執行工作,你可以在這裡找到解決方案。”當用Flexbox開始構建一個新佈局時,應該為它們確定一個必要的標籤。

10. A Front End Engineer’s Manifesto(一份前端工程師的忠告)

它沒有特別深入的內容,就是一個告示的簡單集合,它提醒所有的前端開發者應該把他們的開發流程和工作流相結合。

11. ECMAScript 6 equivalents in ES5

一份非常好的,可以把ES6功能轉化為ES5相容的程式碼的參考手冊。它很好地考慮到了對ES5的強力支援(ES5 has great support),但是對ES6卻沒有強力的支援(ES6 doesn’t)。

12. Flexbox Adventures

它是來自澳洲的開發者Chris Wright製作的,具有一定的深度和實際效果的Flexbox手冊。他也釋出了標題是Using Flexbox Today的帖子,該帖子有助於幫你以合理實際的方式移到Flexbox開發上來。

Using Flexbox Today的連結地址: https://chriswrightdesign.com/experiments/using-flexbox-today/

13. Get BEM

它是一個綜合的站點,旨在推廣和教導開發者使用流行的BEM CSS方法學。

BEM的連結地址: http://www.w3cplus.com/css/bem-definitions.html

14. Sass Compatibility(Sass 相容性)

“它報告了不同Sass引擎之間的不相容。”

15. HTMLelement.info

一份小巧、合理、使用簡單的指南,它可以從參考手冊上獲取不同的HTML元素資訊。

16. JSLint Error Explanations(JSLint的錯誤提示解釋)

如果你喜歡,你也許會遵循很多的JavaScript的最佳實踐,但是你也許並不一定理解在這些技術下的所有成因。該站點主旨是揭示你在流行的linting工具JSLint、JSHint和ESLint上產生的錯誤和警告的祕密。

17. Animations — Web Fundamentals(動畫-Web的基礎)

在Google的Web Fundamentals documentation(web 基礎文件)裡有很多的有用資訊,但是這個為前端開發者特別提出來,是因為在製作一個動態的UI元素時,有一些重要的好的經驗可以應用到自己的專案上。

18. Favicon Cheat Sheet(網站圖示參考手冊)

Favicon介紹連結地址: http://baike.sogou.com/v8483500.htm?fromTitle=favicon

“一份令人分神吃力的手冊,用來檢視所使用圖示的尺寸或型別。”它是從很多不同流行的文章哪裡編譯的,這些文章討論了從電腦到手機從裡到外的圖示。

19. The CSS at…

如果你想用一些大神製作的CSS樣式指南充實自己,那麼在本站點中,Chris Coyier已經把去年幾個月裡不同的帖子根據統計趨勢排了名,並且把它們的相關資訊和連結都放到了一張表格裡。我確定他還會繼續更新這個的,就如同其他人用他們的CSS方法和經驗來公之於眾一樣。

20. Dash

Dash介紹連結地址: http://scriptfans.iteye.com/blog/1543219

它是一個native(本地)Mac或者iOS應用,“是一個API文件瀏覽騎和程式碼片段管理者。Dash儲存了程式碼片段,並且可以離線即時在超過150篇API文件集合裡搜尋文件。”它很棒,很適合不同型別的開發者。

結論

如果你知道其它沒有在這些帖子裡列出來的,或者你自己構架或者編寫一些類似的東西,請在討論區讓我們知道。

20個為前端開發者準備的文件和指南(1)

20個為前端開發者準備的文件和指南(2)

譯文連結:http://www.codeceo.com/article/20-docs-guides-for-web-dev-3.html
英文原文:Another 20 Docs and Guides for Front-End Developers
翻譯作者:碼農網 – 唐李川
轉載必須在正文中標註並保留原文連結、譯文連結和譯者等資訊。]

相關文章