Posts

前言 CSS 里面的伪元素其实是非常好用的，但是经常容易被大家忽略，伪元素里面常用到的 content 属性，可能现在很多人仅仅以为 content 属性的值只支持字符串，除了字符串外常用到的还有 uri、counter ，今天所要介绍的就是 conter(计数器)。 先看如下的例子： <div> <h3>桃翁</h3> <h3>介绍</h3> <h3>css 计数器</h3> </div> 根据如上的 HTML 你是否有办法不通过 JavaScript ，仅仅用 CSS 在 title 前面增加 Title number: 呢？ CSS 计数器基本概念 如果仅仅增加一个 Title，大家都知道通过伪元素(:before或者:after)，设置 content 为 Title，但是如何自动根据 h3 出现的顺序来展示自动编号可能很多人就不知道了。 自动编号在 CSS 2.1 中是通过两个属性控制的，‘counter-increment’和‘counter-reset’。通过这些属性定义的计数器用于‘content’属性的 counter() 和 counters() 函数 初始化计数器 在使用计数器的时候需要先初始化这个计数器，并且设置一个计数器的名字(变量)。下面是例子，title 就是名字，conter-reset 就是用来初始化的，这个属性是必须设置的，否则没办法用计数器。 ‘counter-reset’属性也含有一列一个或多个计数器，每个后面可以跟一个可选的整数。该整数给定了每次出现该元素时给计数器设置的值，默认为 0 counter-reset: 计数器名称[, 默认值number]; /* 重置计数器成0 */ 计数器自增 有了一个计数器的变量后，然后可以让这个变量进行自增： ‘counter-increment’属性接受一个或多个计数器名（标识符），每个后面都可以跟一个可选的整数。这个整数表示每次出现该元素时计数器递增几。默认增量是 1，可以接受 0 和负数 counter-increment: 计数器名称[, 增量]; /* 增加计数器值 */ 显示计数器 最后就是现实计数器的值，获取计数器的值有两个函数：counter() 和 counters() ，如上面的例子：...

文章首发于个人博客 前言 2016 年都已经透露出来的概念，这都 9102 年了，我才开始写 Fiber 的文章，表示惭愧呀。不过现在好的是关于 Fiber 的资料已经很丰富了，在写文章的时候参考资料比较多，比较容易深刻的理解。 React 作为我最喜欢的框架，没有之一，我愿意花很多时间来好好的学习他，我发现对于学习一门框架会有四种感受，刚开始没使用过，可能有一种很神奇的感觉；然后接触了，遇到了不熟悉的语法，感觉这是什么垃圾东西，这不是反人类么；然后当你熟悉了之后，真香，设计得挺好的，这个时候它已经改变了你编程的思维方式了；再到后来，看过他的源码，理解他的设计之后，设计得确实好，感觉自己也能写一个的样子。 所以我今年(对，没错，就是一年)就是想完全的学透 React，所以开了一个 Deep In React 的系列，把一些新手在使用 API 的时候不知道为什么的点，以及一些为什么有些东西要这么设计写出来，与大家共同探讨 React 的奥秘。 我的思路是自上而下的介绍，先理解整体的 Fiber 架构，然后再细挖每一个点，所以这篇文章主要是谈 Fiber 架构的。 介绍 在详细介绍 Fiber 之前，先了解一下 Fiber 是什么，以及为什么 React 团队要话两年时间重构协调算法。 React 的核心思想 内存中维护一颗虚拟DOM树，数据变化时（setState），自动更新虚拟 DOM，得到一颗新树，然后 Diff 新老虚拟 DOM 树，找到有变化的部分，得到一个 Change(Patch)，将这个 Patch 加入队列，最终批量更新这些 Patch 到 DOM 中。 React 16 之前的不足 首先我们了解一下 React 的工作过程，当我们通过render() 和 setState() 进行组件渲染和更新的时候，React 主要有两个阶段： 调和阶段(Reconciler)：官方解释。React 会自顶向下通过递归，遍历新数据生成新的 Virtual DOM，然后通过 Diff 算法，找到需要变更的元素(Patch)，放到更新队列里面去。 渲染阶段(Renderer)：遍历更新队列，通过调用宿主环境的API，实际更新渲染对应元素。宿主环境，比如 DOM、Native、WebGL 等。...

[Meting] [Music server=“tencent” id=“000AwJtd3Wp27b” type=“song”/] [/Meting] 我在 medium 上看到一篇 3 JavaScript Performance Mistakes You Should Stop Doing 文章(点击阅读全文可以查看原文，需要科学上网)，大概意思就是说有 3 个 JavaScript 性能错误，你不应该再去写了。很多“歪果仁”也是一看到这个标题就开始**“喷”**作者了，下文会详细说。我先介绍下这篇文章的主要内容 文章主要内容： 当 ES5 发布的时候，JavaScript 引入了很多新的数组函数。其中包括 forEach，reduce，map，filter - 它们让我们感觉语言在不断增长，功能越来越强大，编写代码变得更加有趣和流畅，结果更易于阅读和理解。 大约在同一时间，一个新的环境–Node.js，它使我们能够从前端到后端平稳过渡，同时真正重新定义完整的全栈开发。 所以作者就测试了一下新提供的这些方法是否会影响我们程序的性能。他在 macOS 上对Node.js v10.11.0 和 Chrome 浏览器执行了以下测试。 1. 循环数组 他想到的第一次很常见的场景，就是计算一下 10k 项的总和。然后比较了使用 for，for of，while，forEach 和 reduce 的随机 10k 项的总和。运行测试 10,000 次返回以下结果： For Loop, average loop time: ~10 microseconds For-Of, average loop time: ~110 microseconds ForEach, average loop time: ~77 microseconds While, average loop time: ~11 microseconds Reduce, average loop time: ~113 microseconds 在谷歌搜索如何对数组求和时，reduce 是最好的解决方案，但它是最慢的。即使是最新的（ES6）也提供了较差的性能。事实证明，老的 for 循环提供了迄今为止最好的性能 - 超过 10 倍以上！...

简介 推荐一款号称程序员的字体 Fira Code，Fira 是 Mozilla 主推的字体系列，Fira Code 是基于 Fira Mono 等宽字体的一个扩展，主要特点是加入了编程连字特性（ligatures）。 Fira Code 就是利用这个特性对编程中的常用符号进行优化，比如把输入的「!=」直接显示成「≠」或者把「>=」变成「≥ 」等等，以此来提高代码的可读性。 效果如下： 经过我体验一周来看，这款字体还是不错的。 更多请前往GitHub地址查看。 设置步骤 Step 1. 下载 前往 Fira Code 字体的 GitHub 地址，clone 或者 download字体文件，主要有 5 个 .ttf 字体文件，地址https://github.com/tonsky/FiraCode/tree/master/distr/ttf Step 2. 安装 安装刚刚下载的 5 个字体文件：选择文件后点击鼠标右键，点击安装命令即可安装字体。 Step 3. 修改设置 打开 VS Code，如果在安装字体之前已经打开了，**一定要重启 **VS Code，否则识别不到新字体。 打开菜单File > Preferences > Settings，或者点击 File 后使用快捷键 Ctrl+,即可打开，然后打开 settings.json 文件，找到 editor.fontFamily字段，然后再把 Fira Code 添加到第一个，并且加上 "editor.fontLigatures": true 。 "editor.fontFamily": "'Fira Code', Menlo, Monaco, 'Courier New', monospace", "editor....

前言 这个问题是知乎上有人邀我回答的，感觉挺有意思的，所以发出来大家讨论下 1. 语言自身问题 Javascript 之父在花 10 天设计出来的，再牛逼的人，10 天设计出来的肯定会有很多设计不合理的东西，哪些不合理的东西，可以去看《JavaScript语言精粹》，导致这本语言一直是最具争论的一门语言。 但是背负着这么大的舆论，那么多很烂的特性，还要兼容各种浏览器，js 还能发展得这么好，web前端，移动，服务端，桌面端，甚至游戏，物联网，机器学习等，可见那些好的特性还是非常好的，具体可以看我的这篇文章–Javascript 是最好的语言，不服来辩。 2. 开发者水平差距太大 js 这门语言虽然能做的事儿很多，主要还是用在写前端上，对于前端这门职业，相对其他方向比较简单，容易上手，不需要太多计算机基础知识，导致刚培训出来的，或者自学的同学，可能见的世面比较少，学了点 node，会用 express 了，就说自己是全栈，所以就黑前端，前端一想就是 js 不好 3. javascript 相对还是比较简单 有没有发现，越简单的越容易被人黑，比如 vue，vue 被黑的次数比 react 多多了，说 vue 是新手玩的，没水平，就连正妹也说过类似的话，我记得是在哪里看到过他在某个群里说过的，如果是p的就忽略。但是简单就不代表不好，简单能达到同样功能不应该更伟大吗？ 4. 门槛低 社区高水平的不多，或者说门槛太低，什么人都有。 这个我就拿 emacs 社区举例，emacs 社区是真的好，文档质量超高，目前是我见到社区质量最好的，因为门槛高，学 emacs 的大部分都是真正喜欢敲代码的，而不是喜欢撕逼的，跟第二点一样，前端圈水平低的太多，导致 js 被黑。 5. 前端发展太快 前端发展太快， js 框架层出不穷，然后经常会有各种框架之间的撕逼，某某框架好啥啥啥的，才会有大漠老师事件等，这种机会让其他圈看笑话了，说我们前端圈是真的乱，好好敲代码不好嘛，争哪个框架好有啥意义，又不是你写的，争赢了自己脸上又不贴金，在此引用狼叔说的，少抱怨，多做事。有本事自己写一个框架然后说服别人你这框架比尤大的 vue 好。 结束语 最后我觉得 javascript 挺好的，然后希望作为前端的我们，静下心来好好学习，别让其他圈的看我们的笑话，最后还是想说， Javascript 是最好的语言，不服来辩。