本文转载自:众成翻译
译者:网络埋伏纪事
链接:http://www.zcfy.cc/article/2295
原文:https://medium.com/statuscode/the-most-popular-front-end-links-of-2016-35d3142ac398#.xxsmni25q
我们每周会给 70,000 多名前端 Web 开发者发送新闻邮件。
因此,我们认为值得回顾一下 2016 年我们发送的所有期刊,并强调一下我们分享的一些最流行的文章。
如下是 2016 年中前端开发者点击最多的文章:

1: Google 的 HTML & CSS 风格指南
Google | 分享于第 258 期

这篇文章并非是新文章,但是文中的一些建议可能会让你大吃一惊。
Google 的建议既有用又有趣,而且大部分是你会赞同的,从而让这篇文章成为 2016 年点击最高的链接。
原文地址:google.github.io

2: 你知道这八个 HTML5 标记吗?
Simon Codrington | 分享于第 229 期

Simon 分享了一些鲜有人知道的 HTML 标记的细节,带有详细的解释和实例。
包括上下文强调标记 'mark'
、引用标记 'q'
等等。
原文地址:sitepoint.com

3: 前端开发中的一些黑魔法
Vitaly Friedman | 分享于第 232 期

这个幻灯片来自于 Smashing 杂志的拥有者举办的一个研讨会,质量极高,很受欢迎。毋庸置疑你将从中学到不少东西。
原文地址:speakerdeck.com

4: 编写可维护的 CSS 指南

可维护的 CSS 总结了一种编写模块化和可扩展 CSS 的方法,采用这种方法不用担心过度使用样式以及会影响原有的样式。
原文地址:maintainablecss.com

5: Bootstrap 4 — 图解指南

这个图解介绍了流行前端框架 Bootstrap 4 中的新东西 - 包括卡片、字体改变、一个 XL 栅格等级、按钮样式调整,这个指南早在六月份就大受欢迎。
原文地址:medium.com/wdstack

6: 调试 Web

Paul Irish 分享了 Chrome DevTools 中值得了解的是什么,以及它们在调试网站和开展前端工作时有什么用。这里有不少干货。
原文地址:youtube.com

7: 十二种超棒的 Chrome DevTools 技巧

这篇综述突出介绍了几个简单的 Chrome DevTools 技巧 - 你可能会发现几个还没有玩过的功能。
原文地址:hackernoon.com

8: 用 SVG 输出 Octicon

GitHub.com 不再用图标字体来输出其图标,而是换成了 SVG。很多人想看看为什么要用 SVG 以及如何用 SVG。
原文地址:github.com/blog

9: HEAD
Josh Buchea | 分享于第 243 期

可以出现在文档 <head>
部分的所有标记的综合列表。先列出常用的基础标记(title、charset 等),然后逐渐列出超多在各种条件下的 meta 和 link 标记。

10: 一个 HTML5 基础模板

Louis Lazaris 讲解了 HTML 5 模板所需的最少元素,以及这些元素如何组织在一起。最初发布于 2013 年,但是在 2016 年更新了。
原文地址:sitepoint.com

11: 前端性能 — 阴暗面

关注于在对安全敏感的环境下,性能实际上是 bug 而不是特性。
原文地址:dev.opera.com

12: Flexbox 模式

用一些交互示例展示使用 Flexbox 为自己的网站创建 UI 组件的实用方法,带有可以直接用的代码。
原文地址:flexboxpatterns.com

注册到 FrontEnd Focus,每周都可以获取最佳前端 HTML、CSS、WebGL、Canvas、浏览器技术等方向的综合报告。

对其它综合报道有兴趣吗?我们还编辑了这些:
网友评论