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

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处理相对和绝对字体大小的方法。

原文发布于微信公众号 - 交互设计前端开发与后端程序设计(interaction_Designer)

原文发表时间:2017-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏编程微刊

仿百度排列图片预览插件-Simple Lightbox

很久以前遇到过这样的一个面试题,要求手写代码,实现百度图片的排列预览,并且可以左右点击查看下一张照片,当时没有做出来,这个问题也就一直放在了脑后,工作之后,遇到...

2212
来自专栏wOw的Android小站

[iOS]创建界面方法的讨论

以前在入门的时候,找的入门书籍上编写的 demo 都是基于 Storyboards 拖界面的。后来接触公司项目,发现界面都是用纯代码去写复杂的 autoLayo...

1211
来自专栏BestSDK

20个对前端开发人员有用的文档和指南

是时候来更新一下我们需要选择的工具或技术了。请欣赏我们的文档和指南系列的第五部,别忘了让我们知道任何其他我们尚未列入该系列的其他文档或指南。 1.SitePoi...

2527
来自专栏phodal

如何创建一个兼容「微信小程序」的Web框架:WIN

在「微信小程序」带领Web走向封闭之前,让我们创造一个Neo的种子。如果有可能的话,那么有一天,它终将成为Neo。 ? 从微信小程序开始内测时,很多人(也包括...

2705
来自专栏更流畅、简洁的软件开发方式

帮助文档的数据库结构

  自然框架一直没有完整的帮助文档,只是有几个简单的示例。这个就是差距呀,那么帮助文档要怎么写呢?有工具可以自动生成,但是总感觉自动生成的一点都不好用,自己都看...

2189
来自专栏微信终端开发团队的专栏

Android微信上的SVG

资源矢量化 “清晰”和“体积”的矛盾与麻烦 面对android的各种dpi某事,想要所有设备上的图片都能有最清晰的效果,就意味着每种dpi模式都必须提供一份对应...

4265
来自专栏iOS技术

iOS图片浏览器(功能强大/性能优越)

支持 cocopods,功能完善,性能不错,代码质量尚可,喜欢的朋友可以给个小星星?。

5617
来自专栏阮一峰的网络日志

React 技术栈系列教程

上周中秋节,我待在家里,写完了 Redux 教程。 至此,《React 技术栈系列教程》算是比较完整了。 ? ES6 语法:教程 Babel:教程 Reac...

3775
来自专栏Material Design组件

Human Interface Guidelines —— Alerts

3748
来自专栏腾讯社交用户体验设计

Demoo使用秘籍,比好用更好用 - 腾讯ISUX

1814

扫码关注云+社区

领取腾讯云代金券