yun_小梦

很早的某一天，我对 Facebook 聊天行为做了一些研究，当时就觉得它对各方面的处理极具美观，比如聊天框、图片的处理、引用的处理、头像、状态的变化等等。这打破了我对“聊天...

简单的一句概括就是： **flexible.js帮我们计算出1rem 等于多少px**。 怎么计算的？ **很简单，就是1rem = 屏幕宽度的1/10**...

flex已经越来越成为前端不可避免的话题。曾经为了搞清flex的原理偶然画了一张图。但后来发现只是冰山一角。 在某些你想实现的交互效果中使用flex后可能会发现并不起作用。...

本文将结合之前的文章用css代替js实现动态“多行溢出省略”效果，并描述由此带来的一些“周边”问题。 首先，在上一篇文章中也提到，很多情况下我们确实要去实现“多行溢出省略”...

如果页面有大量需要跳转的链接怎么办？ 如果跳转过去的页面需要大量数据怎么办？ 如果网速比较慢怎么办？ 提前加载！ 我们必须事先说明一下，这里的“提前加载”Preload可能...

css推出的:where、:has 和 :is 伪类满足了我对“逻辑化CSS”的简单幻想。 简单说下，假如你有这么一个需求：在响应式页面中，你需要判断头部元素中是否具有某一...

前端性能优化相关的“技能点”笔者之前也写过几篇，但是大多都是小打小闹。我重新整理了曾经使用过的性能优化手段。本文介绍三种方案：**页面资源预加载**、**服务请求优化**和...

一直到产品要加一个单独引导页的需求，我才仿佛第一次了解般细想这个功能。因为我发现，对这个“引导页”，我第一时间也是迷茫的，有些按钮询问了产品才知道是干啥用的。 当用户遇到和...

背景 我们通常会遇到这么一个场景：有几个基本功能一样的组件，但是他们之间又存在着足够的差异。这时候你就来到了一个岔路口：我是把他们“按部就班”地写成不同的组件呢？还是保留为...

之前写过一篇文章「小tips：如何摆脱浏览器下12px的限制」，不少人觉得“有点东西”。文中提到的“transform: scale()”方法也是利用了CSS中 trans...

图片让web性能变得复杂，也变得有趣了。 相信初学者一定看到过这样的案例：“当你在HTML中将一张500*500像素的图像缩小，就会带来不必要的下载开销。” 在这个例子中，...

图片上传组件是一个组件库目前来看必不可少的功能了。笔者近日给自己开源的toy工具库也添加了这一功能。相比原生和大部分组件库来说，它不仅支持长按提示删除，还能够支持图片的拖拽...

最近在设计笔者所在组自己的组件库。从设计上看，一个组件库是否“成功”取决于前期的设计 —— 我决定用上ITCSS模型。为这个组件的团队维护、扩展打下坚实的基础。但这还不够，...

目前Chrome浏览器依然没有放开12px的限制，但Chrome仍然是使用人数最多的浏览器。 在笔者开发某个项目时突发奇想：如果实际需要11px的字体大小怎么办？这在Chr...

之前提到“文字溢出”瞬间就能想到 ellipsis。再接触的多了一点会同时想到 display: -webkit-box;（多行溢出）。 你一定欣喜若狂，认为掌握了“宇宙之...