网页设计和开发中,关于字体的常识

本文作者@千古壹号。

前言

我周围的码农当中,有很多是技术大神,却常常被字体这种简单的东西所困扰。

这篇文章,我们来讲一讲关于字体的常识。这些常识所涉及到的问题,有很强的可操作性,都是在实际业务中真实遇到的,都是需要开发同学和产品经理、设计师不断重复沟通的。

字体真的只是“系统默认,无从解释”这么简单吗?是产品被忽悠?还是开发在敷衍?二者之间的博弈究竟谁能胜出?学会本文,你就能胜出。

写一个四则运算表达式转换成AST的方法

作者:吴冠禧

0 前言

晓强哥在他的上篇文章里介绍了 Javascript 抽象语法树里面「提到获得抽象语法树的过程为:代码 => 词法分析 => 语法分析 => AST」,抱着深究技术细节的目的,我决定研究这里的词法分析和语法分析,写一个简单的四则运算表达式转换成AST的方法,于是就有了下面的内容。

1 人类和计算机对于表达式的看法是不同的

人类习惯 a + b 这种表达叫做「中序表达式」,优点是比较简单直观,缺点是要用一堆括号来确定优先级 (a + b) * (c + d)

这里说简单直观是相对人类的思维结构来说的,对计算机而言中序表达式是非常复杂的结构。

为了计算机计算方便,我们需要将中序表达式转换成树形结构,也就是「抽象语法树AST」。

手把手教你写一个AST解析器

作者:深山蚂蚁

AST 解析器工作中经常用到,Vue.js中的VNode就是如此!
其实如果有需要将 非结构化数据转 换成 结构化对象用 来分析、处理、渲染的场景,我们都可以用此思想做转换。

如何解析成 AST ?

我们知道 HTML 源码只是一个文本数据,尽管它里面包含复杂的含义和嵌套节点逻辑,但是对于浏览器,Babel 或者 Vue 来说,输入的就是一个长字符串,显然,纯粹的一个字符串是表示不出来啥含义,那么就需要转换成结构化的数据,能够清晰的表达每一节点是干嘛的。字符串的处理,自然而然就是强大的正则表达式了。

【译】Interection Observer如何观察变化

原文地址:https://css-tricks.com/an-explanation-of-how-the-intersection-observer-watches/
原文作者:Travis Almand
翻译:刘辉

有几篇精彩的文章探讨了如何使用Intersection Observer API,包括Phil Hawksworth,Preethi和Mateusz Rybczonek等。 我这篇文章将讲一些不一样的东西。 我在今年早些时候有幸向达拉斯VueJS聚会介绍了VueJS过渡组件,我在CSS-Tricks的第一篇文章就是以此为基础的。 在演讲的问答环节中,有人问我基于滚动事件触发过渡怎么样 - 我说当然可以,但是一些听众建议我了解一下Intersection Observer

这让我开始思考。我对Intersection Observer有基本的了解,并且能够用其完成简单的示例。 我是否知道它的工作原理而不仅仅是使用它?它到底为我们开发人员提供了什么? 作为一个资深开发者,我如何向新手甚至不知道它存在的开发者解释它的工作原理?

浏览器层合成与页面渲染优化

作者:黄浩群

一个 CSS 属性引发的血案

Web 页面性能是前端开发特别需要关注的重点,评判前端 Web 页面性能的指标有很多,页面的流畅度是其中的一种,如何让页面变得 “柔顺丝滑”,要讨论起来可就是个相当有料的话题了。之前开发移动端 H5 页面的时候,就遇到过一个有趣的性能问题 —— 某个卖场页面在 IOS 手机上出现了严重的卡顿,但在安卓机型下却表现得十分流畅。归纳一下在 iPhoneX 上测试的具体表现:

  • 页面加载时存在明显的延迟,但通过代理抓到的网络请求耗时并不比 Android 的高;

  • 页面滚动时会出现短暂的局部白屏,即丢帧。

Vue.js 3.0编译器compiler-core源码解析

作者:深山蚂蚁

Vue.js 3.0的源代码正在国庆假期就这么突然放出来了,假期还没结束,陆陆续续看到努力的码农就在各种分析了。

目前还是 pre Alpha,乐观估计还有 Alpha,Beta版本,最后才是正式版。

话不多说,看 Pre-Alpha。 瞧 compiler-core

热门的 reactivity 被大佬翻来覆去再研究了,我就和大伙一起来解读一下 ”冷门“ 的 compiler 吧!😄😄😄😄

换种方式读源码:如何实现一个简易版的Mocha

作者:黄浩群

前言

Mocha 是目前最流行的 JavaScript 测试框架,理解 Mocha 的内部实现原理有助于我们更深入地了解和学习自动化测试。然而阅读源码一直是个让人望而生畏的过程,大量的高级写法经常是晦涩难懂,大量的边缘情况的处理也十分影响对核心代码的理解,以至于写一篇源码解析过后往往是连自己都看不懂。所以,这次我们不生啃 Mocha 源码,换个方式,从零开始一步步实现一个简易版的 Mocha。

我们将实现什么?

  • 实现 Mocha 框架的 BDD 风格测试,能通过 describe/it 函数定义一组或单个的测试用例;
  • 实现 Mocha 框架的 Hook 机制,包括 before、after、beforeEach、afterEach;
  • 实现简单格式的测试报告输出。

TypeScript安利指南

作者:李逸君

骚年,你感受过debug一年找不到问题,最后发现是变量名写错时的绝望吗?
骚年,你感受过生产线上代码出现Uncaught TypeError时的恐惧吗?
骚年,你感受过写代码找一万个文件还找不到方法定义时委屈吗?

拿起键盘,让我们对谋害生命的代码拖进垃圾箱!(划掉)

前言

据了解,目前有相当一部分同学不想去学习ts,毕竟没(xue)时(bu)间(dong)。很不幸两个月前我也是其中的一员。在看到尤大大都用ts写vue3了,蠢蠢欲动的我小心翼翼的踏入了这个深坑。在经历了长达一天的摸爬滚打之后,领悟到了真谛

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×