前端周刊是一份专为前端从业人员，以及对前端、设计领域感兴趣的朋友们打造的技术周刊。程小狮会精选出前端、设计领域近期相关的资讯、热点以及技术干货，与大家一同分享。
前端周刊专注于前端领域技术分享。希望这份周刊能够成为你成长的得力助手与伙伴。
实用全面！前端周刊厚积薄发。
前端技术集——前端干货聚集地
HTML
1. H5 前端性能测试快速入门
地址：http://t.cn/Rt7HJSn
说到 H5 测试，对于做 WEB 测试的同学来说再熟悉不过了。在本文中我们将探讨 H5 前端性能测试的方法面面，希望通过阅读本文后大家能够知道：H5 前端性能测试什么？如何发现问题以及相应的优化规则。
2. Canvas 画图-鼠标涂鸦
地址：http://t.cn/Rtw8cpi
在本文中，作者将带大家利用鼠标在 Canvas 上涂鸦，以及保存涂鸦为图片。学习 Canvas 的朋友，来看看咯。
3. Canvas 入门－利用 Canvas 绘制好玩的电子时钟
地址：http://t.cn/RtAN3RG
实战 Canvas 画图。本文中，我们将随作者利用 Canvas 绘制好玩的电子时钟。前端er，Have a try!
4. 多屏互动——H5 中级进阶
地址：http://t.cn/Rtw1G0h
随着智能硬件的普及，手机，平板，PC甚至路边的电子广告牌，现代浏览器已经无处不在。在浏览器里编织出我们自己的一片天地已经轻车熟路，但是这还不够，H5 赋予了浏览器太多的新特性，等待我们去使用。这篇文章介绍利用手机浏览器的罗盘 API，在PC的浏览器实时地绘制一个 3D 盒模型。前端er不要错过。
CSS
1. 接受前端挑战：用 CSS 实现 3D 立方体
地址：http://t.cn/RtAskPh
你喜欢挑战么？你愿意承担一项以前从没遇到过的任务并且按时完成么？在本文中，作者分享了第一次用于实际项目中使用 CSS 3D 效果的经历，以此来激励你接受挑战。
2. Facebook 是怎么保证 CSS 代码质量的
地址：http://t.cn/RtwRT0i
在 Facebook 里，上千名工程师工作在不同的产品线上，为全世界的用户提供可靠优质的服务，而我们在代码质量管理方面也面临着独一无二的挑战。对于 CSS 而言，虽然我们所做的，基本上已经满足了任务目标，但依然存在很多的问题。在本文中，我们将与大家关于如何保障 CSS 代码质量进行一些探讨。
3. CSS 的 clip-path
地址：http://t.cn/RtZXARP
在本文中，我们将从 CSS 中的 clip-path 的基本介绍开始，逐步了解旧 clip 属性，学习 clip-path 的语法，并掌握其在实战中如何应用。
4. 26个令人印象深刻的纯 CSS 构建的 Web 项目
地址：http://t.cn/RtZyIF9
在本文中，我们将分享26个纯 CSS 构建地开源 Web 项目。这些项目将向你证明，纯 CSS3 就足以实现如此多炫酷的效果。一起来 Enjoy 吧！
Javascript
1. JS 开发者必须知道的十个 ES6 新特性
地址：http://t.cn/RtZ6qD5
在本文中，作者将介绍 ES6 中最棒的十个特性。前端er，关于ES6 ，你对它了解有多少呢？
2. 聊聊 JavaScript 中的二进制数
地址：http://t.cn/RtZestY
一行代码引出对二进制思考的文章。文中，你将随作者了解二进制数的表示、JS 中的二进制数整数以及 JS 中的位运算。
3. 前端 JSer 装逼手册
地址：http://t.cn/RthnzRu
在装逼成本越来越高的 JS 圈，是时候充值一下了..
4. 编写自文档化 JavaScript 的15种方法
地址：http://t.cn/R5DdWOe
翻译自《15 Ways to Write Self-documenting JavaScript》的一篇文章，作者将带大家了解自文档化代码，并告诉大家如何使用这个方法来写代码。
5. JavaScript 中‘this’关键词的优雅解释
地址：http://t.cn/Rt2oCYW
一篇非常全面的 JavaScript ‘this’关键词详解。这篇文章将会着重于对函数调用的解释、函数调用如何影响 this 以及展示确定上下文时常见的陷阱。推荐前端er一读！
6. ES6 你可能不知道的事 - 基础篇
地址：http://t.cn/Rt2VmPi
在本文中，作者将与大家聊聊针对 ES6 中的新特性你可能不知道的事。希望能为各位同学正确使用 ES6，提供一些指导。
其他推荐
1. 工具武装的前端开发工程师
地址：http://t.cn/RtzzxW9
这个仓库主要是收集非常好用的 Mac 应用程序、软件以及工具，主要面向开发者和设计师，希望你能找到适合自己的工具，从而提升工作效率。
2. 聊一聊移动调试那些事儿
地址：http://t.cn/R5siDMP
随着移动端的不断推进，移动调试也成为了前端同学们面临的一个新的课题，在 PC 时代，我们直接打开 Chrome 的检查元素面板。就可以解决大部分事情了。但是到了移动端，明明在电脑上模拟好的元素，在手机上就会乱掉。今天我们就来一起聊一聊移动前端调试的那些事儿。
3. 最佳 WEB 字体排版实践的简明指导手册
地址：http://t.cn/R5RQkCG
字体排版绝不仅仅是使用字体那么简单，它包括了关于文字“看上去会是怎么样？”的所有事情。本文站在一个网页设计师的角度，所写的最佳字体排版实践的手册。一起来学习吧。
4. 前端开发中的一些黑魔法Pt2
地址：http://t.cn/RtvlnNC
在第三期前端周刊中，我们已经分享了《前端开发中的一些黑魔法Pt1》的前半部分的内容，涉及九个前端黑魔法。在本期中，我们将分享其后半部分的内容，相信你依然可以学习到一些新的技巧和方法。
5.《深入 React：探索UI开发》免费电子书（英文）
地址：http://t.cn/RqEKp9J
这是一本深入 React 内部探索 UI 开发的免费电子书。作者记录了对 React 研究过程中的经验分享。你将深入 React 内部，了解如何自底而上的创建应用程序。
6.100+ Web 开发者大会视频分享（英文）
地址：http://t.cn/RqwSCrj
本文整合了100+ Web 开发者大会结束后的现场视频，供你了解与学习。你不仅将了解到最新的 Web 发展动向，而且参会的开发者也会带给你关于 Web 开发的新见解，并现场传授自己的知识。
前端新手家园——前端新人好帮手
1. 一个初级的前端工程师需要知道些什么？
地址：http://t.cn/RtwHYdr
最近有很多学弟学妹问我前端应该如何去学习，需要学习哪些东西？我在这里把我自己这几年的体会和感悟写一下，希望能对看到此篇文章的童鞋有些帮助吧。
2. Baidu FEX Team 出品的 JavaScript 编码规范
地址：http://t.cn/RqK6A3V
由百度 FEX Team 出品的 JavaScript 编码规范，本文档旨在使 JavaScript 代码风格保持一致，容易被理解和被维护。前端er，可以参考收藏咯。
3. 学编程没人带？推荐10个免费学编程的最佳网站给你
地址：http://t.cn/RtUQTNP
本文译自《10 Best Websites to Learn Coding For Free》，作者分享了国外10个有助你学编程的最佳网站。当然，或许你已经在它们上面开始了编程之路。
4. 20 张 Cheat Sheet，让前端开发与设计效率x2
地址：http://t.cn/R551R9C
在发展迅猛的前端领域，为了提高工作效率，一些优秀的 Cheat Sheet 是前端人员所必备的。在本文中，作者分享了在工作中整理的，对于设计师和前端开发都非常有用的一些速查表。朋友们，速速收藏吧！
5. 前端工程师应该了解的 CSS 进化史
地址：http://t.cn/RtZaOjy
本文中，作者将带你了解迄今为止 CSS 的发展历程。一起来看看吧！
前端猿与射鸡尸——设计的那些事
1. 超赞！2016年7月新鲜出炉的设计圈实用干货大合集
地址：http://t.cn/RtAOzyR
本文整合了2016年7月新鲜出炉的实用工具。囊括了笔记类工具，营销工具，生产力工具，CSS 框架，UIKit，远程协作工具，配色工具，以及免费的字体。虽然这些干货拼配庞杂，但是都是精品，其中总会有你想要的。
2. 交互新人容易犯的几个错误
地址：http://t.cn/R5R1G5U
不知不觉，我已经正式在交互设计的路上越走越远，了解得越多，就觉得交互设计需要学习和掌握的知识越多。本文中，作者根据自身的经验，总结出了交互新人容易犯的一些错误，以及关于错误的一些思考。
3. 谷歌内部方法！快速做创新设计并验证的 DESIGN SPRINT
地址：http://t.cn/Rtwa8F4
Design Sprint 是目前在湾区比较流行的一种设计方法。它是由Google内部梳理的一套如何带领团队快速做创新设计并验证设计的基本流程。我翻译整理了以下这两个文档《New Form Factors Sprint Playbook》《Product Design Sprint Playbook》，总结了 Design Sprint 操作执行的要点和中间过程可用的方法。
4. 新手教程-六步透视网易设计规范
地址：http://t.cn/Rt7Qzin
由网易 UEDC 出品的一篇新手教程。这篇文章会从新人的角度出发，总结一些设计规范要点。
5. 文字 LOGO 的7种动效设计方法（新手版+进阶版）
地址：http://t.cn/RtZiYYk
一个简单的文字 LOGO 能有多少种动效展示方法？今天这篇好文以一个简单的文字 LOGO 为例，做出了高达14个酷炫的动效设计（新手版+进阶版），无论拿来临摹还是汲取灵感都非常实用，强烈建议阅读。
程序人生——程序员的成长与故事
1. 成为一名自由程序员
地址：http://t.cn/Rt24GJI
越来越多的程序员已经或希望加入到自由职业者的行列，你是否也是其中的一员呢？在这篇文章里我将尝试结合自身的一些经验，来告诉你成为自由程序员能够获得的那些益处，以及为了取得成功所需要面临的挑战。
2. 浅谈程序员的英语学习
地址：http://t.cn/RtZTyFL
作为在中国工作的程序员，不懂得英语似乎也不妨碍找到好工作，升职加薪。但程序员这个工种则稍有不同，因为程序，尤其是高级语言，基本上都是由英语和数字表达式构成的。在本文中，我就根据自己的经验来说说英语的学习方法。
3. 说说 IT 技术人的职业规划
地址：http://t.cn/RtZiV9S
StormZhang 谈谈 IT 技术人的职业规划。
4. 那些年我总结的 Web 开发者成长路线
地址：http://t.cn/RtPML1L
一份 Web 开发者学习路线，成长路线等的总结。前端er，可以有所借鉴。
5. 程序员前程之说：30岁后程序员应该进行怎样的职业转型？
地址：http://t.cn/RtzS6My
“三十而立”，然而对于程序员来说，30岁是个尴尬的年龄。除了将面临职业上的瓶颈，还需要思考如何面对未来的程序人生。在本文中，作者分享了技术人员转型为管理人员的一些建议，希望对你们有所启发。
如果你觉得内容不错，欢迎多多点赞，分享哦！
专注前端开发 欢迎关注
