关于前端开发的20篇文档与指南

约定不等于承诺〃 2022-08-07 03:52 181阅读 0赞

相信在2015年很多这个行业的人都会有这样的两种感受：

真的不知所措，这个行业到底有多少东西需要去[学习][Link 1]；

渴望更多，并迫不及待的为接下来的学习寻求一些思想方向。

第一个来自于我们的个人感受，而第二个则是纯粹的必要性了。所以本文整理一些有用的信息，希望可以帮助相关领域的前端开发人员。

[1. I want to use][]

基于Can I use的数据和功能，这款[应用][Link 2]给予你选择一组前端开发特性的能力，并会读取出一个全球性用户能够使用它的百分比。

[![143525w98dthtm98ze89cc.png][]][143525w98dthtm98ze89cc.png]

[2. Regulex][]

JavaScript正则表达式的可视化工具，在线输入表达式后，动态生成表达式图片。非常不错的一个可视化Web在线正则表达式设计工具。

[![143555zo3pfutztt8img8b.png][]][143555zo3pfutztt8img8b.png]

[3. Mastering the :nth-child][3. Mastering the _nth-child]

一个单页网站，帮助你理解如何去使用各种有用但又复杂的基于选择器组合的nth-child。

[![1436219zi5jwjiget6o86e.png][]][1436219zi5jwjiget6o86e.png]

[4. HTML 5 视频事件和API][4. HTML 5 _API]

这个页面展示了新的HTML 5视频元素、媒体API和媒体事件。播放、暂停、搜索整个视频、改变音量、静音、改变播放速度（包括进入负值），查看视频和潜在事件与属性上的效果。

[![14372482x5erbnqnnqdt7v.png][]][14372482x5erbnqnnqdt7v.png]

[5. Excess XSS][]

这可能是所有开发者都应该熟悉的一个话题，并且这可能是一个很好的着手点。它是一个跨站点脚本编制综合教程。

[![144801c213ei2ce3394ge9.png][]][144801c213ei2ce3394ge9.png]

[6. RSCSS][]

意思为“Reasonable Standard for CSS Stylesheet Structure（CSS样式表结构合理的标准）”，记录一些针对大项目的Sass/CSS编写技巧和技术。

[![144739zn6fak7tkx33bsk6.png][]][144739zn6fak7tkx33bsk6.png]

[7. CodeFightClub][]

一个由Andrew Hathaway建立的项目，目的是帮助其他开发者学习如何用最好、最有效以及首选的方法编写代码。

[![144657zt69cr962scu2zzu.png][]][144657zt69cr962scu2zzu.png]

[8. Sass Guidelines][]

Hugo Giraudel写的Sass Guidelines目前已经被翻译成其他六种语言。

[![144634ce2bpzbe92vs6bv2.png][]][144634ce2bpzbe92vs6bv2.png]

[9. Flexbugs][]

如果你的目的是使用flexbox构建一个网站，而事情却并没有像你所期望的那样进行，你可以在这里找到解决方案。

[![144611tvm2u4u2k8vmmlg8.png][]][144611tvm2u4u2k8vmmlg8.png]

[10. A Front End Engineer’s Manifesto（一个前端工程师的宣言）][10. A Front End Engineer_s Manifesto]

没什么深入的东西，只是一些简单的事情提示，所有的前端开发者应该考虑将其结合到开发过程和工作流中。

[![1445343wghj4lfz6bf6jiw.png][]][1445343wghj4lfz6bf6jiw.png]

[11. ES5中的ECMAScript 6等价物][11. ES5_ECMAScript 6]

ES6特性转换到ES5-compatible代码的一个很好的参考。

[![144421d5m1gd747vv4b7wv.png][]][144421d5m1gd747vv4b7wv.png]

[12. Flexbox Adventures][]

来自开发者Chris Wright对Flexbox深入、实际看法。

[![144359wq4107r4zww6oiww.png][]][144359wq4107r4zww6oiww.png]

[13. BEM][]

一个全面推广和培养BEM CSS使用方法的网站。

[![144334y66znnynip2iid62.jpg][]][144334y66znnynip2iid62.jpg]

[14. Sass Compatibility][]

记录不同Sass引擎之间的不兼容性问题。

[![144305tiisrvqrt0tr3ijy.png][]][144305tiisrvqrt0tr3ijy.png]

[15. HTMLelement.info][]

一个整洁、逻辑、易使用的指南规范，在不同的HTML元素上获得信息。

[![144245dz38bl7b3ogyf620.png][]][144245dz38bl7b3ogyf620.png]

[16. JSLint Error Explanations][]

你可能跟随过很多JavaScript最佳实践，却并不明白所有这些技术背后的原因。本站旨在揭露JSLint、JSHint、和ESLint工具里错误和警告。

[![144220byg2ii2vbgry22wh.png][]][144220byg2ii2vbgry22wh.png]

[17. Animations—— Web基础][17. Animations_ Web]

在Google Web基础文档中有很多有用的信息，而Animations对前端开发者尤为突出。

[![144150j89obm6oom2j1smz.png][]][144150j89obm6oom2j1smz.png]

[18. Favicon Cheat Sheet][]

对很多不同的讨论桌面和移动上图标来龙去脉的文章进行了整理。

[![144115av4j25dua9qvuv55.png][]][144115av4j25dua9qvuv55.png]

[19. The CSS at…][19. The CSS at]

[![144045hw22w2spb22md2b2.png][]][144045hw22w2spb22md2b2.png]

[20. Dash][]

Dash是一个API文档浏览器和代码片段管理者。（编译：陈明）

[![144022rd9qrcvvd9pcgmmt.png][]][144022rd9qrcvvd9pcgmmt.png]

[Link 1]: http://www.html5cn.org/portal.php?mod=list&catid=13
[1. I want to use]: http://www.iwanttouse.com/
[Link 2]: http://www.html5cn.org/portal.php?mod=list&catid=20
[143525w98dthtm98ze89cc.png]: http://www.html5cn.org/data/attachment/portal/201503/03/143525w98dthtm98ze89cc.png
[2. Regulex]: http://jex.im/regulex/
[143555zo3pfutztt8img8b.png]: http://www.html5cn.org/data/attachment/portal/201503/03/143555zo3pfutztt8img8b.png
[3. Mastering the _nth-child]: http://nthmaster.com/
[1436219zi5jwjiget6o86e.png]: http://www.html5cn.org/data/attachment/portal/201503/03/1436219zi5jwjiget6o86e.png
[4. HTML 5 _API]: http://www.w3.org/2010/05/video/mediaevents.html
[14372482x5erbnqnnqdt7v.png]: http://www.html5cn.org/data/attachment/portal/201503/03/14372482x5erbnqnnqdt7v.png
[5. Excess XSS]: http://excess-xss.com/
[144801c213ei2ce3394ge9.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144801c213ei2ce3394ge9.png
[6. RSCSS]: https://github.com/rstacruz/rscss
[144739zn6fak7tkx33bsk6.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144739zn6fak7tkx33bsk6.png
[7. CodeFightClub]: http://code-fight.club/
[144657zt69cr962scu2zzu.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144657zt69cr962scu2zzu.png
[8. Sass Guidelines]: http://sass-guidelin.es/
[144634ce2bpzbe92vs6bv2.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144634ce2bpzbe92vs6bv2.png
[9. Flexbugs]: https://github.com/philipwalton/flexbugs
[144611tvm2u4u2k8vmmlg8.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144611tvm2u4u2k8vmmlg8.png
[10. A Front End Engineer_s Manifesto]: http://f2em.com/
[1445343wghj4lfz6bf6jiw.png]: http://www.html5cn.org/data/attachment/portal/201503/03/1445343wghj4lfz6bf6jiw.png
[11. ES5_ECMAScript 6]: https://github.com/addyosmani/es6-equivalents-in-es5
[144421d5m1gd747vv4b7wv.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144421d5m1gd747vv4b7wv.png
[12. Flexbox Adventures]: http://chriswrightdesign.com/experiments/flexbox-adventures/
[144359wq4107r4zww6oiww.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144359wq4107r4zww6oiww.png
[13. BEM]: http://getbem.com/
[144334y66znnynip2iid62.jpg]: http://www.html5cn.org/data/attachment/portal/201503/03/144334y66znnynip2iid62.jpg
[14. Sass Compatibility]: https://sass-compatibility.github.io/
[144305tiisrvqrt0tr3ijy.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144305tiisrvqrt0tr3ijy.png
[15. HTMLelement.info]: http://htmlelement.info/
[144245dz38bl7b3ogyf620.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144245dz38bl7b3ogyf620.png
[16. JSLint Error Explanations]: http://jslinterrors.com/
[144220byg2ii2vbgry22wh.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144220byg2ii2vbgry22wh.png
[17. Animations_ Web]: https://developers.google.com/web/fundamentals/look-and-feel/animations/
[144150j89obm6oom2j1smz.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144150j89obm6oom2j1smz.png
[18. Favicon Cheat Sheet]: https://github.com/audreyr/favicon-cheat-sheet
[144115av4j25dua9qvuv55.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144115av4j25dua9qvuv55.png
[19. The CSS at]: http://css-tricks.com/css/
[144045hw22w2spb22md2b2.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144045hw22w2spb22md2b2.png
[20. Dash]: http://kapeli.com/dash
[144022rd9qrcvvd9pcgmmt.png]: http://www.html5cn.org/data/attachment/portal/201503/03/144022rd9qrcvvd9pcgmmt.png