全新552B架构全面超越V4 Pro,闲时缓存命中价降至每百万0.02元。 [..]
Read MoreVue 官网过渡动画里有一段很炫的效果。乍一看手写逻辑会很复杂,文档里出现了 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 在变…