响应式 Web 设计旨在为各种设备（从台式机显示器到手机）提供最佳的浏览体验。本文汇总了一些优秀的响应式 Web 设计 HTML 和 CSS 框架。这些框架都是开源的并免费的。

方法链是一种流行的编程方法，可以帮助你写出更简洁易读的代码。在本文中我们一起学习 JavaScript 中的方法链是什么，以及它是怎样工作的。另外我们还会探讨如何使用方法链接来提高代码的质量和可读性。

在2019年3月，受到 NearForm 和 Protocol Labs 的支持，我开始为 Node.js 实现 QUIC 协议 支持。这个基于 UDP 的新传输协议旨在最终替代所有使用 TCP 的 HTTP 通信。

作者：Axel Rauschmayer翻译：疯狂的技术宅[链接]本文比较并总结遍历数组的四种方式：for 循环： {代码...} for-in 循环： {代码...} 数组方法 .forEach()： {代码...} for-of 循环： {代码...} for-of 通常是最佳选择。我们会明白原因。for 循环 [ES1]JavaScript 中的 for 循环很古老，它在 ECMAScript 1 中就已经存在...

除了普通对象之外，数组是 JavaScript 中使用最广泛的数据结构。数组上最常使用的操作是按索引访问元素。本文介绍新的数组方法 array.at（index）。新方法最主要好处是可以用负索引从数组末尾访问元素，而平时使用的方括号语法 array[index] 则没有办法做到。方括号语法的局限性通常按索引访问数组元素的方法是使用方括...

我们可以凭借 FFmpeg 的 WebAssembly 版直接在浏览器中运行这个能强大的视频处理工具。在本文中，我们来探索一下 FFmpeg.wasm，并写一个简单的代码转换器，把数据流传输到视频元素中并播放出来。

文档对象模型（DOM）是将 HTML 或 XML 文档视为树结构的接口，其中每个节点（node）都是文档的对象。 DOM 还提供了一组用于查询树、修改结构和样式的方法。

先看下面这道面试题： {代码...} 你认为 counter 的值是什么？什么是 promise ？这是否意味着“稍后再做”？实际上应该把 promise 看成是一个状态机。promise 以“pending”状态开始它的生命周期。如果你要在这个状态下查询结果，则必须排队。根据 ECMAScript 标准文档中的描述（[链接]），上面 Promise 构造函数会立即调用...

打开执行并检查控制台。您会看到日志先打印了 'Resolved!' ，然后打印了 'Timeout completed!'。立即解决的承诺比立即超时处理得更快。

在本文中我们将用 Vue.js 构建一个简单的看板应用。看板是一种项目管理工具，使用户可以从头到尾直观地管理项目。 Trello、Pivotal Tracker 和 Jira 等工具都属于看板应用。

每次 Apple 的新品发布活动都吸引了很多目光，但是 2020 MacBook Air，MacBook Pro 和 Mac Mini 的发布不仅仅是新功能和时尚的工业设计。重大新闻隐藏在了新 MacBook 的阳极氧化铝机箱中的 M1 片上系统（SoC）中，它取代了 13 寸 MacBook 和 Mac Mini 中的英特尔处理器。

回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念，同时帮你区分两种回调：同步和异步。回调函数首先写一个向人打招呼的函数。只需要创建一个接受 name 参数的函数 greet(name)。这个函数应返回打招呼的消息： {代码...} 如果向很多人打招...

随着对 JavaScript 框架和库的依赖越来越深，很多人对 HTML 的重视程度降低了。这就导致了我们无法充分利用 HTML 的很多功能，这些功能可以大大的增强网站功能。另外通过编写语义化 HTML 可以在网站内容中添加正确的上下文，从而显着改善用户体验。

代码中的 IntersectionType ”组合了两种类型： LeftType 和 RightType，并使用 & 符号来构造交 intersection 类型。

vinyl 是 gulp 所使用的虚拟的文件格式，在它的自述文件是这么说的：“当提到文件时你首先想到的是什么？肯定是路径和内容吧”，它主要记录的信息有：

2020 年的Chrome 开发者峰会和往年有所不同，今年是在线上召开的，每次谈话大约十分钟，讨论规模更大。虽然我没有在第一时间观看会议的直播，但是看回放也不会错过这些亮点。

对于咱们前端打工人来说， git 是工作中常用的一种基本工具，可能有一些人不喜欢用命令行操作 git，总是想要带图形界面的工具，当然能提供深色主题那就更好了。

在前文《babel是怎样工作的》中介绍了 Bable 中的的AST，这次咱们给 bable 写一个插件，文中会覆盖大部份的用法，如果你对某些细节不是很明白，可以去看一下官方的 Babel 手册，中文版在这里：

用 const 或 let 声明自己的 JavaScript 变量。两者之间的主要区别是 const 变量在声明时需要初始化，并且一旦初始化就无法再重新赋值。

不过大多数人都只过 console.log() 在浏览器控制台中进行输出调试。 log 只是 console 对象的一种方法，除了它还有很多非常有用的方法。

黑客的方法论是一种涉及不断改进和迭代的构建方法。黑客们认为总有一天会变得更好，而且没有什么是永远不能够实现的。真正的黑客总是用不同的方式来解决没人关注的问题。下面给出了一些非常强大的 JavaScript 小技巧。1. 全部替换我们都知道 string.Replace() 函数仅能替换掉第一个匹配项。你可以通过在正则表达式的末尾...

Ecma International 负责对 JavaScript 标准化。是他们制定了 ECMAScript 规范。当提到 ECMAScript 时，基本上可以把它看作是 JavaScript 的同义词。从 2015 年开始，开始用年份标记版本，即 ECMAScript 2015 缩写为 ES2015。但是也会使用版本号的计数，所以 ES6 与 ES2015 相同。尚未发布的功能被称为 ESNext。

babel 本质上是个编译器，所以它所做的基本上就是编译器要做的事，为了避免对编译器的某些东西讲的太细，我们重点只要知道 babel 的工作流程就行了。

linter 是一种代码静态分析工具，它可以帮你找到代码中可能存在的错误与 bug，也能找出代码风格的问题，不过因为只是静态分析，对 js 这种动态类型的语言所能做的就比较有限了，毕竟在 js 中，变量的类型如果不执行就不容易知道，有些错误就不那么容易被找出来，虽然如此，能做的检查还是很多了。

这次基于 OSI 和 TCP/IP 这两个模型来介绍可能发生的攻击手段前文：讲给前端的网络安全（1）：浏览器与网络的那些事讲给前端的网络安全（2）： 互联网的构成OSI 和 TCP/IP 模型从上图可以看到，OSI 模型将网络划分成为七层，而TCP / IP模型将其简化成四层。本文会使用 OSI 模型的前三层（1〜3），与 TCP/IP 模型的后两层...

上次讲到了浏览器在网络层面上发生的事，这次对互联网的结构做一些介绍。 讲给前端的网络安全（1）：浏览器与网络的那些事网络资源分配在解互联网之前，要先了解网络资源是怎么分配的。根据 APNIC 的这张图可以看到，分配网络资源的最高机构是 IANA（Internet Assigned Numbers Authority），是总管网络资源的机构，IANA...

本系列将会从互联网的基础即物理层开始，一路到应用层的设计缺陷。由于篇幅的限制，每层都会讲几个代表性的攻击，而且会尽量避开常见的 Web 安全问题

这些函数只能用在 Chrome 的 console 中。当我在第一次看到这些函数时非常兴奋，把它们直接写到了自己的代码中，结果当然是跳出了各种 Uncaught ReferenceError：xxx is not defined 错误。

在互联网的洪荒时代，网站主要用 HTML和 CSS 开发的。如果将 JavaScript 加载到页面中，通常是以小片段的形式提供效果和交互，一般会把所有的 JavaScript 代码全都写在一个文件中，并加载到一个 script 标签中。尽管可以把 JavaScript 拆分为多个文件，但是所有的变量和函数仍然会被添加到全局作用域中。

这个问题在很多文章中都讨论过，在 ESlint 规范中也因为加不加分号而分为两大阵营，到于加不加分号，关键是需要了解分号对于 JavaScript 的影响，开始之前可以先看看下面这道面试题：