几年前，公司出了一个代码量的统计，然后我们就发现，外包同学的代码提交量，比正式员工多多了。平时正式员工开会沟通PPT，基建中台分任务，没有多少时间正经写代码，大部分日常需求代码也都是外包来写了。而且开会沟通，中台基建大部分工作也都是再卷PPT，代码工作...

当你看了很多职场相关的文章，你就会明白，在职场中，要让自己不可替代。这样，你就可以获得稳定的高薪，而且，老板不敢PUA你。 那么，谁能告诉我，怎么才能让自己不可替代呀！！在线等，急！

前端已死！这个声音从年初开始，持续了小半年。紧接着，一堆的前端前辈出来说，前端不会死。哈哈哈，我觉得这个话题很有意思。也来蹭个热点。嗯，现在已经不算热点了，这个话题已经凉了。 最近想法很多，总想写点东西，就拿这个话题开始吧。希望能对大家有帮助。

比如我想让所有能够动画的CSS属性在更改时都有过渡效果，transition可以指定all关键字，animation你要怎么写？

好像知道了一点，transition是过渡，有属性发生变化时，就会发生过渡动画。但是这个结束属性不是固定的。animation是完整的动画，需要指定开始和结束。

之前写过两篇文章，分别讲解了Flex布局和网格布局。然后有很多人反馈说。网格布局没有场景，学会Flex布局就可以了。今天这篇文章就通过一个例子来讲解一下网格布局的优势。并不是说Flex布局无法实现。而是说在某些场景下使用Flex布局逻辑会不清晰，代码会复杂很多。

Grid的内容有点多，这一篇整理了概念和属性，算是“理论”篇，后面会再写一篇Grid的例子，当作“实践”篇。如果觉得学了不知道用在哪里的，可以关注下。

你看到一个效果，是不是会想着自己去实现一下。我就是这样。之前看到过一个视频，一个人拿着火把在一个迷宫里走路，火把只能照亮周围的空间。我在想，如果用前端来实现这个功能，要怎么去实现？一直没有想到合适的思路。 最近看到一个css的属性叫mask。感觉利用这个m...

Flex布局已经很常见了，前端应该都用过。但是Flex布局里面的属性之多，细节之多，时间就了就容易记不清。今天重新把Flex整理了下。复习一下，也方便后面开发查看。文章最后面，说了下怎么记住这几个属性。

先来分析下动画，动画中的每一个字母都会有一个单独的跳动。这个跳动的动画是一样的，只是每一个字母的开始时间不同。可以看出来这个动画里面的动画效果其实是一个。只是不同的元素在指定这个动画的时候，延迟时间有了一个控制。那么我们可以把文字的每一个字母都放...

首先，伪类和伪元素是两个东西，这个从名字也能看出来。那么它们的区别是什么呢？ 准确来说伪类他是不是一个元素，它是属于某一个元素的某一个状态。比如:hover，:active，:first-child。 而伪元素它是更像一个Element，用于在DOM中增加一个特殊的element节点，比如:...

接下来说下实现思路。进度条的思路，基本都是下方一个100%的进度节点，上面叠放一个进度中的进度节点。这里也是一样。我们可以用伪类来作为进度中的变化节点。代码如下：

做前端开发时间长了，还是能遇到一些没学过的知识点，今天分享个最近用到的功能：对文字显示拼音。按照一般思路，就是对中文上方加一个span，然后通过定位等操作移动到文字上方。但是这个操作太麻烦了，代码也多。后来看到，在HTML标签里面，有一个ruby标签，就是用...

按钮阴影前端平时开发页面中，按钮是一个很常见的组件。为了让按钮变的明显，一般会对按钮做一个阴影。这个很简单，代码如下: {代码...} 效果如下：但是，有时候我们会遇到可爱的设计师，让你做一个不规则的按钮。比如下面这样的。不规则的按钮针对这种按钮，我们可...

人生致富需要上杠杆。 这是我看完《纳瓦尔宝典》之后最大的收获。《纳瓦尔宝典》这本书很多人应该都听说过了，我这边就不再介绍了。今天就讲讲我收获了“人生杠杆”的思想之后，引发的一些思考🤔。

看看是不是设置了不同分辨率下的不同样式，一般是meta来设置的，也可能是代码里面判断的。看看是不是有min-width，max-width这些吧，估计也会有影响

常见的烟花都是从一个地方往上发出，到一定高度后，爆炸成一圈光点。高度有不同，圈的大小有不同，光点的颜色也会有不同。所以一个烟花的过程可以划分成2步：1. 从某个位置P0上升到P1；2. 从P1爆炸成一圈光点，光点向外扩散，光点扩散到一定程度，开始渐渐消失。

你学前端的时候，是不是会有一种感觉学会了，又感觉学不会的状态。很大一个原因是CSS属性太多了，很多效果并不能直观的拆解成CSS属性，动画就是其中一项。比如transform、transition、animation这几个，初学者就经常会区分不清楚。简单区分下这几个：