2017下半年优质文章合集：前端篇

2017年马上就要结束了，拖延症绝不拖到明年！这就给大家整理出来——2017下半年优质小报合集。

CSS／页面布局

border属性的多方位应用和实现自适应三角形

BEM实战之扒一扒淘票票页面

一劳永逸的搞定 flex 布局

20个CSS高级技巧汇总

从a标签为什么不能包含div标签-了解HTML5元素分类与内容模型

聊聊为什么淘宝要提出「双飞翼」布局

前端切图 | 百度EUX

CSS盒模型详解

前端最佳实践（一）——DOM操作

Rem布局的原理解析

扫描二维码关注公众号，回复： 2421413 查看本文章

移动端字体放大问题的研究

我不知道你知不知道的伪元素小技巧

个人总结（css3新特性）

10 个独特的 CSS 背景视觉效果

我只是想在页面上加个链接

2.5分钟学会 CSS Grid 布局

编写自己的代码库(css3常用动画的实现)

一步步打造自己的纯CSS单标签图标库

Web自适应布局你需要知道的所有事儿

BFC模型浅识

JavaScript

这些JavaScript编程黑科技，装逼指南，高逼格代码，让你惊叹不已

Promise 必知必会（十道题）

带你理解 JS 容易出错的坑和细节

实例感受-es6的常用语法和优越性

从一个 JSON.parse 错误深入研究 JavaScript 的转义字符

谈谈 js 去重方法的那点事

Js 的多宿主时代

JavaScript 闭包

25行代码实现Promise函数

高效使用 JavaScript 闭包

如何用 3KB 不到的 JavaScript 实现微机模拟器

如何无痛降低 if else 面条代码复杂度

JavaScript设计模式-用组合模式写出复杂组件

JavaScript 性能优化

JS弹幕实现

归并排序与快速排序的简明实现及对比

编写自己的代码库（javascript常用实例的实现与封装）

【译】JavaScript权威面试指南

这一次，彻底弄懂javascript执行机制关于JavaScript对象，你所不知道的事（一）- 先谈对象

JavaScript 工作原理：内存管理 + 处理常见的4种内存泄漏

javascript项目开发规范实例

JavaScript 实用技巧和写法建议

你需要知道的算法之基础篇

JavaScript异步编程大冒险: Async/Await

忍者级别的JavaScript函数操作

ES6 Promise 用法

你所不知道的 Typescript 与 Redux 类型优化

JavaScript 开发人员需要知道的简写技巧

14个你可能不知道的JavaScript调试技巧

打造自己的JavaScript武器库

全面梳理JS对象的访问控制及代理反射

当使用数组splice删除元素时，你应该知道这个小坑

深入到不能再深入之JS大法系列 -- 作用域链

前端全（无）埋点之JS异常上报

【译】JavaScript 如何工作的: 事件循环和异步编程的崛起 + 5 个关于如何使用 async/await 编写更好的技巧

ES6 中的元编程：第一部分 —— Symbol，了不起的 Symbol

两句话理解js中的this

为什么(2.55).toFixed(1)等于2.5？

JS中可能用得到的全部的排序算法

反击爬虫，前端工程师的脑洞可以有多大？

前端框架

React

让 Vue 和 React 无缝融合

从Preact了解一个类React的框架是怎么实现的(三): 组件

1分钟读完《我希望在深入 React 之前知道这些》React Render Array 性能大乱斗

Preact：一个备胎的自我修养

我为什么从Redux迁移到了Mobx

重构与模式系列（一）简化函数

Typescript+React+Redux-Observable脚手架

React 服务端渲染实现 Gank 移动端

我为什么从Redux迁移到了Mobx

React 服务端渲染实现 Gank 移动端

Vue.js

vue router 如何使用params query传参，以及有什么区别

State of Vue.js report 2017 中文版

vue快速入门的三个小实例

VUE组件间的数据传递

Vue 脱坑记 - 查漏补缺(汇总下群里高频询问的xxx及给出不靠谱的解决方案)

用vue做一个酷炫的menu

Vue.js 升级踩坑小记

vue移动助手实践（一）——基于vue的换肤功能

nuxt(vue) + koa + mongo 写blog的一次小结

聊聊Vue.js的template编译

Vue 生产项目链接 -- 上线项目大集合

如何用 Vue.js 实现一个建站应用

Vuex2.0源码解析

从template到DOM(Vue.js源码角度看内部运行机制)

另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

Vue.js新手教学|如何写一个Checklist组件

vue+webpack 升级后在原有项目上的适配问题

Vue 聊天组件

Vue2 源码漫游（二）

前端表单进阶之路：通过 Vue.js 实现表单可配置化

聊聊Vue.js组件间通信的几种姿势

Vue + TypeScript 新项目起手式

一起来拥抱强大的TypeScript吧--Ts+Vue完全教程（附Demo项目）

Vue2 原理浅谈

vue-calendar 基于 vue 2.0 开发的轻量，高性能日历组件

Vue-cli 使用json server在本地模拟请求数据

认识Skeleton Screen【屏幕加载骨架】

我们为什么以及是如何从 Angular.js 迁移到 Vue.js？

《京保养》基于Vue+Vuex的单页面应用实践

Vue2学习小记-给Vue2路由导航钩子和axios拦截器做个封装

手摸手，带你用vue撸后台 系列一（基础篇）

简单例子学习Vue.js单元测试

【译】vue 自定义指令的魅力

适用于 Vue 2.0 的功能强大的 ContextMenu 组件

尚妆达人店 UI 组件化 工程实践（weex vue）

基于vue配置axios

用vue做一个酷炫的menu

AngularJS

Angular 5 开发一个有道翻译

其它

「大前端」weex里native主动发送事件到JS的方案实现

Weex 开发小游戏是件很 high 的事

记一次 Weex 的 iPhone X 适配

2017 年比较 Angular、React、Vue 三剑客

Fly.js 拦截全局 Ajax 请求

以同构之名，再谈 Redux/Vuex 的必要性

打包工具

Webpack 打包器面板进阶

webpack 为什么这么难用？

Webpack3.0小案例躺坑css处理与ES6编译

Parceljs和Webpack在React项目上打包速度对比

webpack中小型多页面应用整合webpack终极方案

基于gulp+webpack 快速搭建的前端自动化脚手架

妈妈再也不用担心我不会webpack了

PWA

一份来自 Treebo 的 React 与 Preact PWA 性能分析报告改造你的网站，变身 PWA

图像／图表

有意思的clip-path

软软的 Echarts

Android/iOS/Web开发中的动效设计与实现 —— 贝塞尔曲线动画的插值法

10 个 CSS、SVG 和 Canvas 蒙版（mask）精彩实例译用 WebGL 探索动画和交互技术（一个学习案例）

前端架构

如何管理好10万行代码的前端单页面应用微前端 - 将微服务理念延伸到前端开发中

70%以上业务由H5开发，手机QQ Hybrid 的架构如何优化演进？

面试／个人成长

张克军：写给初学前端工程师的一封信

vue面试题总汇

流形：我是如何面试一位前端工程师

找不到工作的我，只好研究自动投递简历了

前端入行两年--教会了我这些道理

前端面试总结（at, md）

小程序

微信小程序如何像webview一样加载html5网页

微信小程序无埋点数据采集方案

在婚礼上搞点事情如何

微信小程序中使用Fly

微信小程序音频功能开发实(cai)践(keng)

手把手教你实现微信小程序中的自定义组件

分享微信小程序中实现sticky效果的列表页

微信小程序开发完工+问题汇总

本地存储相关

谈谈cookie

localStorage 还能这么用

浏览器的渲染：过程与原理

ajax & !async & cookie 是一个冷门的坑

Redux 异步数据流方案对比

大杀器Bodymovin和Lottie：把AE动画转换成HTML5/Android/iOS原生动画

工具资源

便于 Code review 的 Git 流程方案

无头浏览器 Puppeteer 初探

前端中的 Pipeline

前端开发中经常使用到的20个正则表达式

web开发者为什么选择Electron去开发跨平台的桌面客户端

滴滴 Web 移动端组件库 cube-ui 开源

打造丝般顺滑的 H5 翻页库

【轮子】Element UI 的Form, Table, Pagination组件封装来一波

性能优化相关

性能指标都是些什么鬼? 前端开发工程师必须关注的几个性能指标

javascript函数式编程系列 ① call 和 apply

其他

iPhone X 网页设计

LINE漫画：通过Page Stack实现流畅的页面切换

美团：前端线上故障响应方法

字符串模板浅析

axios的一些常见用法

浅谈前端和移动端的事件机制

响应式脑电波—如何使用 RxJS、Angular、Web 蓝牙以及脑电波头戴设备来让我们的大脑做一些更酷的事

fly.js—Node下增强的API

趁着双11，写个京东商品自动下单

「前端那些事儿」② 优化策略-自查表

前端需要了解的 SSO 与 CAS 知识

如何在SSR架构中实现离线可用？

用 Electron 打造 Win/Mac 应用，从「代码」到可下载的「安装包」，可能比你想得麻烦一点

让我为你介绍一个神器：Chimee，一套可扩展的 H5 视频播放器解决方案

用TypeScript编写发布函数库

iPhone X 适配 手Q H5页面通用解决方案

Three.js 初探 - 微场景制作

搭建 vue2 vue-router2 webpack3 多入口工程

你见过用命令行写的简历吗？

全面梳理JS对象的访问控制及代理反射

MacOS : 前端必备姿势(工作环境)

一只node爬虫的升级打怪之路

微信小程序：完成一个tabbar+下拉刷新组件，需要经历什么坑

初识Http缓存君

underscore 系列之如何写自己的 underscore

ThinkJS 3.0 如何实现对 TypeScript 的支持

git merge使用不当引发的代码丢失血案

译 怎么做 Web API 版本控制？

如何编写通用的 Helper Class

53合1:Node.js 最佳实践大合集

【开源】canvas图像裁剪、压缩、旋转

2017 年比较 Angular、React、Vue 三剑客

如何自定义自己的vue-cli模板

使用fjpublish发布前端项目（安全篇）

Miox带你走进动态路由的世界

服务端渲染 vs 客户端渲染

浅谈前端线上部署与运维

优雅的使用 element-ui 中的 table 组件

IMVC（同构 MVC）的前端实践

基于 Docker 打造前端持续集成开发环境

蚂蚁金服开源：数据驱动的高交互可视化图形语法G2解锁Charles的姿势

Spirit: Web动画制作工具

来聊一聊浏览器渲染

前端如何处理emoji表情

HTML5原生拖拽/拖放 Drag & Drop 详解

前端本地文件操作与上传

一次 H5 「保存页面为图片」 的踩坑之旅

iOS开发者的大前端感悟：向前端说对不起

koa 实现 jwt 认证

Q：你了解异步编程、进程、单线程、多线程吗？

实践中的前后端分离

手摸手，带你优雅的使用 icon

在没有DOM操作的日子里，我是怎么熬过来的（上）

一起炫起来 -- 3D粒子动画篇

给女票写的一个简书爬虫

node.js使用Nodemailer发送邮件

如果有人问你爬虫抓取技术的门道，请叫他来看这篇文章

内存寻梦环游记：一个变量的三重死亡

用canvas实现视频播放与弹幕功能

为你的网站带上帽子 — 使用 helmet 保护 Express 应用

Nuxt.js服务端渲染实践，从开发到部署

7 款前端开发者重制的经典游戏 总有一款能让你回味童年时光

如何在一周之内获得GitHub stars 3500+

你不知道的前端SDK开发技巧

具有代表性的 HTTP 14 个状态码

基于 Electron 的前端文件处理工具

用不到20行代码写一个freestyle外挂后台

HTTP----HTTP缓存机制

import、require、export、module.exports 混合使用详解

网页中文本朗读功能开发实现分享

基于 eros 改编的网易严选 app

带你开发一个日历控件

免SDK实现微信／支付宝转账打赏功能

vv-ui 骨架屏实践

移动端如何强制页面横屏

【翻译】fancyBox3 中文文档

前端代码异常监控实战

Git提交历史的修改删除合并

WEEX-EROS | 或许不用 RN 我们也能开发一个 APP

带你开发一个二维周视图日历

从时间旅行的乌托邦，看状态管理的设计误区

前端小项目之在线便利贴

写一个chrome插件来实现网站的自动登录

前端跨域常用方法小结

基于 Electron 的前端文件处理工具

最后：

由于文章确实量很多所以没有再进行细分了，大家可以Mark起来～不过呢小饼还是建议大家到微信群里看每日小报，毕竟每天消化一两篇会更加有用，日积月累就会有很大的收益。反而积攒到一起的话要么就是「债多了不愁。。」再也不会打开（比如我TAT）；要么就是看得很累，要花很多时间来补。

作者：赵小饼
链接：https://juejin.im/post/5a3b56b4518825089e501fe1
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。