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

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

CSS／页面布局

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

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

一劳永逸的搞定 flex 布局

20个CSS高级技巧汇总

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

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

前端切图 | 百度EUX

CSS盒模型详解

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

Rem布局的原理解析

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

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

个人总结（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
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。