最近写了一个好玩的 Button，它除了是一个 Button 外，还可以当镜子照。 那这个好玩的 Button 是怎么实现的呢？ 很容易想到是用到了摄像头。 没错，这里要使用浏览器的获取媒体设备的 a

本文正在参加「金石计划 . 瓜分6万现金大奖」。 众所周知，函数节流（throttle）是 JS 中一个非常常见的优化手段，可以有效的避免函数过于频繁的执行。 举个例子：一个保存按钮，为了避免重复提交

现如今的页面越来越复杂，一个页面往往承载着大量的元素，最常见的就是一些电商页面，数以万计的商品列表是怎么保证渲染不卡顿的，大家在面对这种长列表渲染的场景下，一般都会采用分页或者虚拟列表来减缓页面一次性

为什么会有Lottie动画呢？在前端程序员根据UI视觉稿实现页面效果时一直存在这样的一种“矛盾” - 动画效果更完美与工期成本的矛盾。

2019年终岁尾，最近对布局相关的内容比较有兴趣，在此整理一下和瀑布流相关的使用场景以及多种实现方案。 瀑布流又称瀑布流式布局，是一种比较流行的页面布局方式，专业的英文名称为[Masonry Layouts]。与传统的分页显示不同，视觉表现为参差不齐的多栏布局，最早是由Pint…

在我们的日常开发工作中，文本溢出截断省略是很常见的一种需考虑的业务场景细节。看上去 “稀松平常” ，但在实现上却有不同的区分，是单行截断还是多行截断？多行的截断判断是基于行数还是基于高度？这些问题之下，都有哪些实现方案？他们之间的差异性和场景适应性又是如何？凡事就怕较真，较真必…

display:-webkit-box;必须结合的属性，将对象作为弹性伸缩盒子模型显示。 -webkit-box-orient;必须结合的属性，设置或检索伸缩盒对象的子元素的排列方式。 text-overflow:ellipsis;可选属性，可以用来多行文本的情况下，用省略号“…

1. 画三角形 然后我们可以通过给任意三边的颜色设置为 transparent 即可分别实现任一方向的三角形。 通过设置某条边的宽度比其它边宽，来调整三角形的高度。 通过设置某条边的宽度比其它边窄，来调整三角形的宽度。 2. 画梯形 梯形也是基于 border 来绘制的，只不过…

效果就更加震撼了，当然canvas实现也有一定的门槛，而且实际使用起来也略微麻烦（所有js实现的通病），这里尝试一下CSS的实现方式。 抛开js方案，还有HTML和CSS实现方式。HTML就不用说了，直接写上大量的标签 那么来看看CSS实现方式，主要也是两种方式，其实就是想一下…