Family.scss-轻松搞定CSS伪类 :nth-child

很多前端开发工程师都知道 CSS伪类 :nth-child 非常有用,特别是在选择一些规则比较复杂的元素时。我承认我只会一些最简单的 :nth-child 伪类用法,在选择一些规则比较复杂的元素时,尝尝会感到束手无策。直到今天发现Family.scss开源项目位置。

Family.scss 是一套 Sass mixin ,它将帮助您以一种简单的方式来实现 :nth-child 伪类复杂用法。 继续阅读

前端开发相关速查表(Cheatsheets)整理集合

对于前端开发工程师来说需要花大量的时间去阅读我们所使用的语言或相关类库、框架的 API 文档。当自己写出函式库时也会为自己的函式库加上适当的文档说明,这是一个避免不了的过程。毕竟前端开发工程师必须把脑力花在逻辑思考上,而不是记忆这些 API 文档。当然写多了以后自然而然的查 API 文档的次数就会越来越少。但是当刚进一个领域再回来后发现自己又是什么都不懂。

聪明的前端开发工程在乎的是写程式的思维,而不API文档。因为记住所有API几乎是不可能的。速查表(Cheatsheets)里头存放着浓缩过后的精华,当你是个有经验的人,使用 速查表(Cheatsheets)能够帮自己快速的复习,并且用最短的时间让自己恢复到开发状态,因此常常会去搜集各个前端开发相关速查表(Cheatsheets)有利于我们快速开发,节省一些不必要的时间浪费。

今天看到 Medium 上前端开发相关速查表(Cheatsheets)整理集合,参考了一部分,并且增加了一些平时我自己再用的几个速查表。 继续阅读

Airbnb JavaScript 编码风格指南(涵盖 ECMAScript 6+)

一份最合理的 JavasScript 风格指南。 翻译自:https://github.com/airbnb/javascript

注意:本指南假定您使用的是Babel,并要求您使用 babel-preset-airbnb 或相当的预设插件。它还假定您正在您的应用程序中安装 shims/polyfills,实用airbnb-browser-shims或相当的插件。

继续阅读

JavaScript术语:shim 和 polyfill

在学习和使用 JavaScript 的时候,我们会经常碰到两个术语:shim 和 polyfill。它们有许多定义和解释,意思相近又有差异。

Shim

Shim 指的是在一个旧的环境中模拟出一个新 API ,而且仅靠旧环境中已有的手段实现,以便所有的浏览器具有相同的行为。主要特征: 继续阅读

Min – 小程序组件化解决方案

项目开源地址:

MinUI:https://github.com/meili/minui
Min Cli:https://github.com/meili/min-cli

是的,我们撸了一个新轮子。

在这个前端高速发展的时代,撸轮子并不是目的,而是解决问题的手段。我们希望通过这个轮子,帮助像我们这样的小程序开发者,优雅高效的搞定小程序中自定义组件的 开发使用 这 2 个环节,为开发者 赋能

缘起

一切的初衷,都始于我们希望像下面这样,优雅的定义和使用组件:

继续阅读

JavaScript 中的对象拷贝

对象是 JavaScript 的基本块。对象是属性的集合,属性是键值对。JavaScript 中的几乎所有对象都是位于原型链顶部 Object 的实例。

介绍

如你所知,赋值运算符不会创建一个对象的副本,它只分配一个引用,我们来看下面的代码:

let obj = {
  a: 1,
  b: 2,
};
let copy = obj;

obj.a = 5;
console.log(copy.a);
// 结果 
// copy.a = 5;

—> Edit on JS Bin

obj 变量是一个新对象初始化的容器。copy 变量指向同一个对象,是对该对象的引用。所以现在有两种方式可以访问这个 { a: 1, b: 2, } 对象。你必须通过 obj 变量或 copy 变量,无论你是通过何种方式对这个对象进行的任何操作都会影响该对象。 继续阅读

理解 JavaScript 中的 for…of 循环

什么是 for…of 循环

for...of 语句创建一个循环来迭代可迭代的对象。在 ES6 中引入的 for...of 循环,以替代 for...inforEach() ,并支持新的迭代协议。for...of 允许你遍历 Arrays(数组), Strings(字符串), Maps(映射), Sets(集合)等可迭代的数据结构等。 继续阅读

2017年最佳 VS Code 主题

我不知道你怎么样,但我喜欢在一个具有视觉吸引力的环境中编写代码。除了虚荣装逼之外,一个好的主题(和好的字体,因为好的主题应该带有好的字体)可以使你的代码看起来不那么无聊。有些主题甚至用配色方案指出代码中的类型。

一个好的主题可以使你的工作变得更容易,更有趣和令人兴奋。

在这里,我将列出几个强大的Visual Studio Code 主题。 截至2017年9月25日的选择标准: 继续阅读

使用 CSS 实现图片的滤镜效果

它如何工作的

使用一个或多个较新的CSS属性(background-blend-mode, mix-blend-mode, 或者 filter)可以让我们惊艳地处理单个图片效果。 继续阅读

现代 JavaScript 参考

feiwen8772 / modern-js-reference

一份现代 JavaScript 参考,你在现代项目中会经常遇到,以及最新的代码示例

http://www.css88.com/archives/8244

简介

初心

本文档是一份 JavaScript 速查表,你在现代项目中会经常遇到,以及最新的代码示例。

本指南不是为了教你从头开始学习 JavaScript ,而是为了帮助那些可能不熟悉当前代码库(例如 React)所用到 JavaScript 概念的开发人员。

此外,我有时还会提供一些个人的建议,这些建议可能是有争议的,但我也会注意到,当我这么做的时候,这是我个人的建议。 继续阅读