鸡年大吉！继续前行的前端周刊（第十五期）
niexin
8年前
<p>前端周刊是一份专为前端从业人员，以及对前端、设计领域感兴趣的朋友们打造的技术周刊。程小狮会精选出前端、设计领域近期相关的资讯、热点以及技术干货，与大家一同分享。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/4f6c0bb3d7e5e01d0394b1f8fdd803a3.jpg"></p> <p>前端周刊 第十五期</p> <p>前端周刊专注于前端领域技术分享。希望这份周刊能够成为你成长的得力助手与伙伴。</p> <p>猴哥潇洒地走了，迎来了帅气的鸡哥。</p> <p style="text-align: center;"><img src="https://simg.open-open.com/show/b41cc40f79119ba016b91855e602a9b1.jpg"></p> <p>作者：@阿骀</p> <p>年已过，收起心，撸起袖子，加油干。相信，鸡年依然是一个不平凡的奋斗年。程序员们，甘巴蒂！</p> <p>2017 年《前端周刊》第二期正式为大家奉上。</p> <h2>前端技术集——前端干货聚集地</h2> <p>HTML</p> <p>1. ELF - 灵活可扩展的 HTML5 构建工具</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736032866689471" rel="nofollow,noindex">http://t.cn/RMdLZ84</a> </strong></p> <p>作者：Avin</p> <p>详细的了解 HTML5 构建工具：ELF .</p> <p>2. 视频 H5のVideo 标签在微信里的坑和技巧</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736032957188889" rel="nofollow,noindex">http://t.cn/RMCiZU8</a> </strong></p> <p>作者：Avin</p> <p>以视频为主的移动端 HTML5 实践经验分享。</p> <p>CSS</p> <p>1. CSS 书写模式 ——24ways</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033038504991" rel="nofollow,noindex">http://t.cn/RMro46b</a> </strong></p> <p>译者：哈呼哈哈呼</p> <p>了解 CSS 的书写模式规范，以及平面设计的书写模式等内容。</p> <p>2. 让 CSS 更完美：PostCSS-modules</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033119313422" rel="nofollow,noindex">http://t.cn/RMTtrhk</a> </strong></p> <p>译者：GeoffZhu</p> <p>本文作者将带你了解 PostCSS 和 PostCSS-modules 如何使用，并且如何在服务端使用它们。</p> <p>3. 精选！CSS 动画之工具、框架和教程</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033198762638" rel="nofollow,noindex">http://t.cn/RMmx1Gx</a> </strong></p> <p>译者：IT程序狮</p> <p>一篇专注于 CSS 动画的工具、框架以及学习教程的文章。希望能帮你更好的学习 CSS 动画，并节约你搜索资料的时间。</p> <p>4. 拥抱未来的 CSS 布局方式：Flex 与 Grid 布局</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033284582512" rel="nofollow,noindex">http://t.cn/Rxu1MkW</a> </strong></p> <p>作者：xingbofeng</p> <p>一篇针对 CSS3 标准里的 Flex 布局，以及 CSS4 草案中的 Grid 布局方式的一些总结。</p> <p>JavaScript</p> <p>1. JavaScript This 的六道坎</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033372135239" rel="nofollow,noindex">http://t.cn/RxTmdSv</a> </strong></p> <p>作者：盒装柠檬水</p> <p>鉴于 this 风骚的运作方式，对 JavaScript this 的理解是永不过时的话题，本文试图通过将其大卸六块来钉住这个磨人的妖精。</p> <p>2. JavaScript 技术面试时要小心的三个问题</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033453894196" rel="nofollow,noindex">http://t.cn/RxTuBzu</a> </strong></p> <p>译者：Rockjins Blog</p> <p>作者将站在面试官的角度与大家分享 JavaScript 技术面试中，你需要注意的问题。同时，可以了解你对 JavaScript 和 DOM 的了解程度。</p> <p>3. JavaScript 很少为人所知的玩法</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033534305533" rel="nofollow,noindex">http://t.cn/RxmEFlk</a> </strong></p> <p>作者：Zelin</p> <p>一些 JavaScript 很少为人所知的玩法，与你分享。</p> <p>4. 十个由浅入深的 Angular.js 面试问题</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033625749799" rel="nofollow,noindex">http://t.cn/R5TFgtb</a> </strong></p> <p>作者：静逸秋水</p> <p>一些关于 Angular.js 面试的问题，它们覆盖了 Angular 开发的各个方面。有基础的知识点，也有在开发过程中遇见的问题，同时也有较为开放性的问题来辨别面试者的基础水准和项目经验。</p> <p>5. Node.js 异步最佳实践 & 避免回调地狱</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033697180760" rel="nofollow,noindex">http://t.cn/Rx8mJig</a> </strong></p> <p>译者：边城</p> <p>本文涵盖了处理 Node.js 异步操作的一些工具和技术：async.js、Promise、generator 和异步函数。阅读这篇文章之后，你会知道如何避免臭名昭著的回调地狱！</p> <h2>其他推荐</h2> <p>1. 四种方式实现轮播图</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033792459196" rel="nofollow,noindex">http://t.cn/RxmbbN7</a> </strong></p> <p>作者：范小饭_</p> <p>利用不同的工具来实现轮播图的几种方式。</p> <p>2. Webpack 2 快速入门</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033874679632" rel="nofollow,noindex">http://t.cn/RxZPyuf</a> </strong></p> <p>作者：dwqs</p> <p>带你了解如何配置 Webpack 2 以及其在项目中如何应用。</p> <p>3. 一个 React+Redux 工程实例</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736033961358661" rel="nofollow,noindex">http://t.cn/RxPj65L</a> </strong></p> <p>作者：LucasHC</p> <p>通过实例贯穿 React+Redux 的基本思想。</p> <p>4. 详解 Vue & Vuex 实践</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034044154129" rel="nofollow,noindex">http://t.cn/RxkjAcN</a> </strong></p> <p>译者：王下邀月熊</p> <p>Vuex 的基础与实践。</p> <p>5. 微信小程序开源项目库汇总</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034120306644" rel="nofollow,noindex">http://t.cn/RM6CsaM</a> </strong></p> <p>作者：opendigg</p> <p>Awesome 开源微信小程序汇总，收藏吧。</p> <h2>前端新手家园——前端新人好帮手</h2> <p>1. 深入浅出 Node.js 读书笔记</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034197715589" rel="nofollow,noindex">http://t.cn/RAaLSZW</a> </strong></p> <p>作者：Tw93</p> <p>在本文中，作者分享了第二次阅读《深入浅出 Node.js》的一些学习记录，并且通过百度脑图绘制了相应的知识点与大家分享。</p> <p>2. JavaScript 全栈教程</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034300280318" rel="nofollow,noindex">http://t.cn/RxpeQ9f</a> </strong></p> <p>作者：Node 情怀者</p> <p>基于阮一峰的 JavaScript 全栈免费视频版教程。</p> <p>3. 研发团队 Git 开发流程新人学习指南</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034374599285" rel="nofollow,noindex">http://t.cn/RxKq8fW</a> </strong></p> <p>作者：管宜尧</p> <p>本文定位于为使用 GIT 标准分支开发流程的开发团队提供一份新手参考指南。涉及一些开发流程标准以及实践。</p> <p>4. Webpack 优秀中文文章合辑</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034459004410" rel="nofollow,noindex">http://t.cn/RMmfRsf</a> </strong></p> <p>作者：Jingsi Liao</p> <p>优秀的 Webpack 中文文章搜罗。</p> <h2>前端猿与射鸡尸——设计的那些事</h2> <p>1. 扁平化设计最佳实践</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034541232187" rel="nofollow,noindex">http://t.cn/Rxe5zJh</a> </strong></p> <p>译者：IT程序狮</p> <p>了解你能够通过扁平化设计为用户做些什么，以及扁平化设计 2.0的由来。</p> <p>2. 引导设计的最佳实践</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034631537673" rel="nofollow,noindex">http://t.cn/Rx2wFKL</a> </strong></p> <p>译者：jamie7325</p> <p>通过五部分内容，深入了解引导设计。</p> <p>3. 干货！我开发 Android 是如何界面设计的</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034724322500" rel="nofollow,noindex">http://t.cn/RxFmwc5</a> </strong></p> <p>作者：Werb</p> <p>一些开发、设计类网站收集。</p> <h2>程序人生——程序员的成长与故事</h2> <p>1. 萌新的前端之旅</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034795783690" rel="nofollow,noindex">http://t.cn/RxFXvns</a> </strong></p> <p>作者：小羊</p> <p>以一个新人的角度写写作者眼里的前端。</p> <p>2. VR大潮来袭 ---前端开发能做些什么</p> <p>地址： <strong> <a href="/misc/goto?guid=4959736034886987505" rel="nofollow,noindex">http://t.cn/RMmkuJi</a> </strong></p> <p>作者：YorkChan</p> <p>一篇介绍如何开发一个 WebVR 网页的文章。而文章将从 WebVR 体验方式的叙述开始。</p> <p>如果你喜欢本期内容，不妨点个赞，谢谢！ 与你相约，下一期不见不散。</p> <p> </p> <p>来自：http://www.jianshu.com/p/b7f8c5564e78</p> <p> </p>