boxuegu

20个为前端开发者准备的文档和指南(4)

本文由码农网 – 唐李川原创翻译,转载请看清文末的转载要求,欢迎参与我们的付费投稿计划

是时候接着学习了!在这个行业里,我认为学习会是不断的。这是我收集的发布的第四个这样的帖子了,而且这个也许是最好的一个。

它们是最近几个月,我偶然发现并收集的很多不同的指南和学习资源,并且这些都是最新的部分。请尽情享受!

1. Loupe

它是“一个小型可视化工具,可以帮助你理解JavaScript如何相互调用 stack(栈)/event loop(循环事件)/callback queue(回调函数队列)。”它是交互式的,允许你输入你自己编写的代码,然后运行这些代码,并且在同一个主题下还有一个视频的演示。

2. First Aid Git

它是“一个可搜索的集合了很多经常被问到的Git问题”的站点。它对有一定的Git使用技巧水平的人或者没有Git使用技巧水平的人来说都有用。目前该站点被分成了38个主题,而且你可以通过在页面上的搜索过滤器来找到你需要的内容。

3. Periodic Table of ARIA 1.0 Roles Attributes(ARIA1.0角色和属性周期表)

它被分成了两页——我原本设想把它作为这个列表的第21个——文档上详细的记载了ARIA角色和属性的信息。

只需要点击一个角色或者属性,然后就会有一个窗口覆盖在网页上,从参考手册上显示关于该功能的详细信息。

4. Is Service Worker Ready?

Service Worker介绍链接地址: https://developer.mozilla.org/zh-CN/docs/Web/API/Service_Worker_API/Using_Service_Workers

Service Workers参考手册是一个有前途的(没有其他意思)新标准,它还不适合产品,因为它缺乏浏览器的支持,而且它一直都没有稳定下来。这个小站点对参考手册上的功能有描述,以及这些功能是如何在不同的浏览器上采取措施获得不同浏览器支持的。

5. Browser support for broken/missing images(浏览器对损坏或丢失图片的支持)

很多时候,这可能是我们认为理所当然的事情。它是由Bart Veneman基于CodePen网站项目制作的离线文档,该文档介绍了不同的浏览器或者操作系统是如何处理损坏的图片的(使用palceholder属性,提示文本,border等等。).

6. 2014 Responsive Report(2014年度回访报告)

这是由Gridset上的人发起的一个年度回访调查。在本次调查中有超过1000的参与者,提供了他们在RWD(响应性网页设计)工作流程中所面临的挑战的信息,他们面临的困难涉及到客户端,测试等等。该调查也着眼于乐观的态度(或者缺少乐观的态度),行业趋势和在RWD(响应性网页设计)里使用的工具。

Gridset介绍链接地址: https://gridsetapp.com/

7. Typography Cheatsheet(字符排版手册)

“它是一份综合性的指南,指导使用适当的排版字符,包括正确语法的使用。”它也可以作为只有一页的PDF文档打印下来,文档里的内容包括为Mac系统和Windows系统通过键盘快捷键产生的不同的字符,很方便。

8. ARIA Examples(ARIA实例)

由Heydon Pickering使用不同的示例为ARIA各个功能编译的HTML示例演示。演示和代码分为9个不同的示例。它对每一个想要实现高级ARIA功能的人来说是一个很好的出发点。

9. ES5 Mobile Compatibility Table(ES5手机操作系统兼容表)

这是一个有点不同,而且更加具体的手机操作系统兼容表格。它的主旨是把所有的JavaScript的功能引入ES5,而且使它们能兼容不同的手机浏览器。

10. iOS Fonts(IOS字体)

“每一个IOS版本都有一个对应的字体集。”当和手机进行具体的通话时,这里有一张筛选后的列表,在列表上列出了在不同的iOS设备包括Apple Watch手表上所能使用的字体集。

11. CSS Filters Playground(CSS Filters(滤镜)集中营)

一个混合了CSS滤镜不同方面的接口。它也是有用的,因为你可以选择一个常用的URL,甚至可以用一个iframe框架或者视频尝试一下。

12. Git Cheatsheet(Git参考手册)

一个为Git命令设计的交互式可点击的参考手册。不同的区域也有深层的链接,它是用来分享的额外奖赏。

13. Keycodes(键盘键值)

一个可以快速访问的小型信息站点,它可以让你获取到在HTML、CSS或者JavaScript里使用的键盘的键值、字符编码和URL编码字符。

14. Regular Expressions 101

一个做得很漂亮的app,可以帮助你测试和学习正则表达式。我喜欢它显示的“解释”和“匹配信息”,而且它给你提供三种不同的正则表达式供你选择。

15. CIUM

它是一个手机app,它的功能是“为HTML5的功能、CSS3的功能、JS API的功能、SVG的功能和其他即将到来的web技术提供兼容图表。”它的名字被人认为是“Can I Use Mobile”的简称,但是他们的用词却并不准确,也许是为了避免版权问题,总之我不知道。

16. DevTools Snippets(开发者代码片段工具)

“它是一个有用代码片段的结合,可以在浏览器开发工具里使用。”能看到的大约是它们中的20个,而且你可以贡献你自己的。

17. Codrops CSS Reference(Codrops网站的 CSS参考手册)

为了防止你错过了这个Codrops网站,在Sara Soueidan的帮助下,精心设计制作了他们自己的内容全面的CSS参考手册。

18. Screen Sizes(屏幕尺寸)

一个包含了大量手机设备和电脑分别拥有的屏幕尺寸的列表。这些设备甚至可以链接到它们在Amazon网站上的产品销售页面。

19. Frontend Guidelines(前端指南)

某个开发者为在HTML或者CSS或者JavaScript各个方面写作的代码样式忠告。这里有很过好的忠告。

20. CSS Ruler

一个简单的交互式的小工具,可以帮你理解CSS处理相对和绝对字体大小的方法。

结论

如果你有其他建议的某个学习资源,可以把它放到评论区让我们知道。与此同时,当你从上到下看完本帖时,你可以点击下面的链接,查看之前的帖子。

20个为前端开发者准备的文档和指南(1)

20个为前端开发者准备的文档和指南(2)

20个为前端开发者准备的文档和指南(3)

译文链接:http://www.codeceo.com/article/20-docs-guides-for-web-dev-4.html
英文原文:20 Docs and Guides for Front-End Developers (No. 4)
翻译作者:码农网 – 唐李川
转载必须在正文中标注并保留原文链接、译文链接和译者等信息。]

发表我的评论

取消评论
表情 插代码

Hi,您需要填写昵称和邮箱!

  • 必填项
  • 必填项