网络埋伏纪事 发布于 06月19, 2017

CSS 中不为人知的部分

原文地址:https://madebymike.com.au/writing/the-invisible-parts-of-CSS/

如果你在日常工作中使用 CSS,你的主要目标可能会重点围绕着使事情“看起来正确”。如何实现这一点经常是远不如最终结果那么重要。这意味着比起正确的语法和视觉结果来说,我们更少关心 CSS 的工作原理。

CSS 的视觉结果通常是操作隐藏属性的间接后果,你可能还没有意识到这一点。某些 CSS 属性(比如 background-color)与你看到的内容有直接而明显的关系。同时,其它像 display 这样的属性对于我们很多人来说仍然是模棱两可的,因为结果似乎与上下文环境有很大关系。

我怀疑很多开发人员都不能用简单的术语描述设置 display: block 实际上是在做什么,顶多可能对这种属性如何工作有一些直观的了解。没关系,你可以在不了解底层原理的情况下,就能 CSS 瞎嚷嚷。不过,那也是只知其一,不知其二。

如果这就是在说你,没关系。我也是在学会如何使用 CSS 很久以后,才理解 CSS 的工作原理。我猜这并不能让你好受点,不过至少你并不是一个人在战斗!

CSS 的底层特性是复杂而有意抽象的,但我们也不能完全不了解它们。对于我们很多人来说,或多或少都会熟悉像盒模型、层叠和特殊性这些概念。虽然它们经常被曲解,但是懂点这些概念的工作原理有助于我们编写更好的 CSS。

对于 CSS 的很多其它隐藏部分也可以这样说。问题是更好地理解这些部分的门槛更高。经常会感觉好像没有什么能孤立地解释。需要先了解所有内容,然后才能理解流程的最小部分。

因此,我想尝试揭示一些 CSS 不为人知的部分,仅触及你需要知道的内容,并希望以逻辑顺序解释该过程,以便更好地理解 CSS 的实际工作原理。

这是一篇很长的文章,所以如果你想跳过这些部分之一,我完全可以理解。

阅读全文 »

网络埋伏纪事 发布于 06月16, 2017

JavaScript: 为初学者介绍 new 运算符

原文:https://hackernoon.com/javascript-for-beginners-the-new-operator-cee35beb669e

alt

四条规则

理解 new 运算符的最简单的方式就是去理解它做什么。当我们用 new 时,发生了四件事:

  1. 创建了一个新的空对象。
  2. this 绑定到新创建的对象。
  3. 给新创建的对象添加了一个名为 __proto__ 的属性,该属性指向构造器函数的原型对象。
  4. 给函数末尾添加一条 return this 语句,这样被创建的对象就被从函数返回。

阅读全文 »

网络埋伏纪事 发布于 06月16, 2017

JavaScript: 为初学者介绍 this 关键字

原文:https://hackernoon.com/javascript-the-keyword-this-for-beginners-fb5238d99f85

alt

理解 JavaScript 中的关键字 this,以及它指向什么,有时候可能是有点复杂。幸好有五个通用规则可以用来确定 this 绑定到什么。虽然这些规则在某些情况下并不适用,不过绝大多数情况应该能帮你搞定。所以,下面我们开始吧!

  1. this 的值通常是由一个函数的执行上下文决定的。所谓执行上下文就是指一个函数如何被调用。
  2. 必须要知道的是,每次函数被调用时,this 都有可能是不同的(即指向不同的东西)。
  3. 如果依然搞不清楚第一条和第二条的含义,没有关系,本文结尾的时候会搞清楚的。

阅读全文 »

网络埋伏纪事 发布于 06月16, 2017

JavaScript: 为初学者介绍正则表达式

原文:https://hackernoon.com/javascript-learn-regular-expressions-for-beginners-bb6107015d91

alt

不久前,正规表达式对我来说是挺可怕的 - 对我未经训练的眼睛来说,它们只不过是一堆乱七八糟的字符串。不幸的是,我让那些“乱七八糟”的字符串吓倒我太久了。当我终于决定冒险学习正则表达式时,我很惊讶要学习的基本概念有多简单。

不要犯同样的错误。是的,正则表达式可能非常复杂,但实际上学习基础知识很容易。下面我一起学习基本的正则表达式吧...

阅读全文 »

网络埋伏纪事 发布于 06月15, 2017

【译】如何用Mocha测试JavaScript - 第2部分

原文:http://www.zcfy.cc/article/3190

昨天我们学习了Mocha的基础知识。今天,我们会把Mocha整合到一个项目中,这样就可以看到它是如何实际工作的。

这个教程要讲什么?

本教程将提供如何使用Mocha进行测试的小型真实示例。到教程结束时,我们将成功使用Mocha测试现有的JS文件。在读本教程之前,应该先了解Mocha是什么,如何分组测试以及如何使用断言库。如果需要复习,请参阅我的第一篇Mocha教程

阅读全文 »

网络埋伏纪事 发布于 05月26, 2017

在 Nginx 中开启 GZip 压缩,加快博客加载速度

本博客使用 Nginx 反向代理 Node,正好玩玩 GZip 压缩。

概述

简单点讲,GZip 就是一种压缩技术。经过 GZip 压缩后的资源文件(比如网页中的HTML、XML、CSS、JavaScript、JSON、图片文件等等),大小可以变为原来的 30%以上。

在网站和 Web 应用中,如果 Web 服务器端能自动把用户请求的资源文件用 GZip 压缩,然后再发送给客户端,而浏览器端又中能自动解压或者解析经 GZip 压缩过后的资源文件,那么就可以有效减少网络带宽的消耗,提升传输速度,用户浏览网页的速度就会快很多。

好消息是,现代浏览器都支持对 GZip 压缩过的资源的自动解压解析。而流行的 Web 服务器也都带有支持 GZip 压缩的模块。比如,Nginx 上就带有支持 GZip 压缩 的 ngx_http_gzip_module 模块,只要在 Nginx 的配置文件中配置开启 GZip 压缩,并设置一定参数就可以搞定。

启用 GZip 压缩是网站 和 Web 应用性能优化的手段之一。Steve Souders 在《高性能网站建设指南》《高性能网站建设进阶指南》这两本书里,已经详细描述了 GZip 压缩的原理。有兴趣的可以去看看这两本书。

阅读全文 »

网络埋伏纪事 发布于 05月26, 2017

【译】组合软件:0. 简介

原文:http://www.zcfy.cc/article/2855

注意:这是从头开始在 JavaScript ES6+ 中学习函数式编程和组合软件技术的“组合软件”系列的介绍。敬请关注。还有更多!

目录:

阅读全文 »