前端动画必知必会：React 和 Vue 都在用的 FLIP 思想实战。
Vue 官网过渡动画里有一段很炫的效果。乍一看手写逻辑会很复杂，文档里出现了 FLIP。顺着这条线能在 Aerotwist 的 flip-your-animations 上找到思路，再一步步做出类似效果。图片素材引自知乎《有个漂亮女朋友是种怎样的体验？》，侵删。 本文最终效果： 预览：http://…
Vue 官网过渡动画里有一段很炫的效果。乍一看手写逻辑会很复杂，文档里出现了 FLIP。顺着这条线能在 Aerotwist 的 flip-your-animations 上找到思路，再一步步做出类似效果。图片素材引自知乎《有个漂亮女朋友是种怎样的体验？》，侵删。 本文最终效果： 预览：http://…
JavaScript 站稳之后，前端工作往往不再是「再手写一遍」，而是找到能开箱即用的库。 下面 9 个库覆盖地址补全、浏览器里的机器学习、动画、图表、输入格式化、字符串、轮播、实时通信和数学公式，都是作者实际会优先考虑的工具。 英文原文：https://medium.com/better-prog…
电子简历里的「项目经验」卡片，常用一层裁切容器加一层可放大的背景图，再叠标题、说明和图标。 下面这组 CSS3 用 transform、transition 和半透明遮罩，做出鼠标移入后图片放大、文字从中心散开的效果。站点示例文案仍是「雨果学院 / 技术-HTML5-CSS3」。 结构很薄：最外 .…
CSS Grid 是二维布局：父容器 17 个属性、子元素 10 个，加上取值方式，一共 27 项。把它拆成「布局之道 / 构建之法 / 取值之术」更好记。 构建套路是父容器三步（定框架、设间隔、找对齐）加子元素两步（摆位置、找对齐），也就是「32 构建之法」。原文 23 张图和示例代码全部保留。 …
英文 | https://medium.com/better-programming/10-best-practices-for-improving-your-css-84c69aac66e。CSS 看起来很难写错：加几条规则就能改外观。小站点几个文件确实如此；大应用里样式会迅速失控。如何让它可管理…
这是一份移动优先的 前端组件库 清单：从自动化工作流、框架、游戏引擎、UI 组件，到表单、图表、滚动、编辑器和实用工具。 每个库的名字和原链接都保留，方便按需查找。文末有来源地址。 类别 代表 工作流 Yeoman / gulp / grunt / FIS，Bower / RequireJS / S…
这是一个下午写完的纯 JS 中国象棋：用 HTML5 Canvas 画棋盘、棋子和选中动画，主要走子逻辑都在一份脚本里。 棋盘是 10 行 9 列共 90 个坐标；棋子带颜色、走法（马走日、相走田）、选中态和当前坐标。完整代码和效果图都保留。 部分 做什么 棋盘 10 行 9 列、90 个点、点击定…
每个前端开发者都体验过：同一段按钮、同一套布局，要在多个页面里反复写。组件一旦改需求，返工往往从整页铺开。开发者真正想要的是把复杂界面拆成可复用零件，而 React 就是为此而生的 JavaScript 库。 React 由 Facebook 推出，用来构建交互式用户界面。它快、灵活，社区也足够大。…
当微软宣布 Edge 将支持 CSS 变量时，这项能力在主要浏览器里已经齐了。原生 CSS 从此可以声明可复用的自定义属性，再用 var() 读出来。变量名用两根连词线 --，因为 $foo 被 Sass 占用，@foo 被 Less 占用。 CSS 变量又叫 CSS 自定义属性（CSS custo…
长列表和无限下拉是前端老生常谈。本文介绍一种简洁、巧妙、高效的做法：只渲染可视区域附近的 DOM，滚动时主要改外层容器的 padding。两个要素是 Intersection Observer 和 padding。 从图里能看出两点：只渲染可视区域的部分 DOM；滚动过程中外层 padding 在变…
