Node.js Promise 化回调式函数 Node.js 8 提供了新的工具函数：util.promisify，用于把形如 (err, value) => ... 的回调式函数转换为 Promise 版本。 基本使用 const util = require('util'); const fs = require('...
JavaScript 解构赋值默认值误区 问题还原 这是最近 CR 的时候在业务代码中发现了一个问题，先来看一下问题代码： // data 为接口返回的数据 const { bizObject = {}, total = 0 } = data.result || {}; const list = bizObject.lis...
DOM DOM Composition 事件 做实时的表单表单校验时，如果输入的是非拉丁语言，那你可能会遇到下面的问题： 如上图所示，文本框不允许输入 ' 之类的特殊字符，当用户在敲击拼音、还未最终输入时就已经触发了校验，提示输入不合法，有点尴尬。通常我们都是监听 input 或者 change 事件来校验用户输入，也就是...
JavaScript ECMAScript 2016、2017、2018 新 API 回顾一下 ECMAScript 的发展历程： 1997 年 6 月，ES1 发布 1998 年 6 月，ES2 发布 1999 年 12 月，ES3 发布 然后，ES4 胎死腹中 2009 年 12 月，ES5 发布 2015 年 6 月，ES6（ES2015）发布 ES2016...
React React setState React 的理念是数据驱动 UI，state 是 React 里面管理数据的重要概念。本文梳理一下操作组件内部 state 的重要 API setState 的用法。 基本使用 每个「会用」React 的开发者都知道更新组件内部的状态时，应该使用 setState，不过，笔者确实...
macOS 從 macOS 中提取 SF Mono 字體 San Francisco 系列字體 是蘋果在 WWDC 2016 上推出的系統 UI 字體（中文为「蘋方」）。SF Mono 便是其中用於代碼顯示的等寬字體，但是，macOS 只在 Xcode 和 Terminal 中內置了 SF Mono，並未將其安裝在系統字體中，也不包含的下載...
Babel Babel 6 松散模式 想必每个写 JavaScript 的都或多或少了解过 ES5 引入的严格模式，Babel 6 在把 ES6+ 代码转换为 ES5 时，也提供了「松散模式」（loose mode）的选项。Babel 的松散模式和 ES5 没有任何关系，这里提 ES5 严格模式只是在概念上作一个比对，方...
JavaScript Babel 配置技巧 当下，每个写 JavaScript 的猿可能都在或多或少地使用 Babel。借助 Babel，我们可以使用最新的 ECMAScript 特性，而不用太关注浏览器支持。Babel 在背后进行了许多复杂的转换，我们要做的，就是写配置文件，告诉 Babel 我们想要什么。下面就来看看一些配...
CSS 在 Web 内容中使用系统字体 某天（2016.07.12）发现 GitHub 的字体比原来宽了一些，打开开发者工具一看，字体设置中多了两个奇怪的玩意： body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", R...
JavaScript 纯粹的 JavaScript 对象 最近在 EventEmitter3 源码 中看到了 Object.create(null)，做一下考证。 传统的 JavaScript 对象 在 JavaScript 中，通常使用对象字面量语法来创建空对象。 var foo = {}; // create...
mobile 移动 Web 开发之浏览器 「移动 Web 开发」系列文章为 PPK 所著的 The Mobile Web Handbook 读书笔记。除书中内容，还补充了部分中国的实际情况，以及个人的经验、观点。 本文乃此系列的浏览器篇。 移动浏览器类型 移动浏览器可以分为四种： 内置浏览器 用户安装浏览器 WebVi...
performance 前端性能优化最佳实践 本文主要考量客户端性能、服务器端和网络性能，内容框架来自 Yahoo Developer Network，包含 7 个类别共 35 条前端性能优化最佳实践，在此基础上补充了一些相关或者更符合主流技术的内容。 同时，建议关注及时更新的 Google 性能优化指南。 目录： 页面内...
React 理解 React 生命周期 React「just the UI」，相比 Angular、Ember 等完整的解决方案，上手相对容易。不过，React 生命周期还是会让新手迷惑，而掌握每个生命周期方法扮演的角色和执行时间又是至关重要的： 什么时候进行事件绑定、数据请求、解除绑定等操作？ 如何减少不必要的重渲染，...
React 使用 ES2015 重构 React 组件 React 组件 ES2015 Class 改写细节 createClass 工厂函数转换为 ES2015 Class ES5: var MyComponent = React.createClass({ // ... }); ES2015: class MyComponen...
CSS 等宽列背后的表格布局算法 引子 网页开发中，经常需要实现等宽列效果，比如 Web App 中的 TabBar、Slider 底部的等宽指示条，而且往往元素的个数是不确定的，无法设定固定的百分比宽度。 虽然借助 flexbox 可以轻松实现： .container { display: flex; }...
React Native 禁用 iOS9 App Transport Security iOS 9 和 OS X 10.11 默认启用了「应用传输安全策略」(App Transport Security)，导致在调试 React Native 应用时抛出以下错误： The resource could not be loaded because the App Tra...
accessibility alt 值换行导致的用户体验问题 HTML 中 alt 属性用于为屏幕阅读器、搜索引擎等提供元素描述信息。在编写 HTML 过程中，出于控制单行代码长度考虑，有时我们会将 alt 属性的值换行。这对普通用户毫无影响，但对于屏幕阅读器用户却会产生一些用户体验问题： alt 文本阅读在一行结束的时候停止； 按「继续阅读...
gulp 在 Gulp 中使用 ES2015 Gulp 3.9.0 新增了 babel 支持，可以在配置文件 gulpfile.js 中使用 ES2015。 确认 gulp 版本 在命令行中输入： gulp -v 应该返回： CLI version 3.9.0 Local version 3.9.0 如果返回的 gulp...
Browser 修复被禁用的剪切、拷贝、粘贴功能 function fixCCP() { var elems = document.getElementsByTagName('*'); var attrs = ['onpaste', 'oncopy', 'oncut']; for (i = 0; i < elems...
IDE Mac OS X WebStorm 使用小结 本文记录问题在 Mac OS X 10.10 上验证，其他 *nix 用户可作参考，Mac OS X 平台上的 JetBrains 其它产品（如 PHPStorm、IntelliJ IDEA）亦可参考。Windows 用户可能不存在这些问题。 文字输入、显示问题 WebStorm...
Node.js Node.js 基础设计模式 设计模式是对普遍存在问题提出的常规的、可复用的解决方案。 单例 单例模式确保一个类只有一个实例。 因为 require 机制，Node.js 中创建单例很方便。 //area.js var PI = Math.PI; function circle (radius) {...
html 禁止 Chrome 显示翻译工具条 当网页语言与系统语言不一致时，Chrome 会自作多情地弹出翻译工具条，虽然一般情况无伤大雅，但有的时候却会破坏网页设计的氛围。 <meta name="google" value="notranslate"> via Googl...
CSS Flexbox 完全指南 背景 CSS Flexbox Layout（Flexible Box）模块（目前为 W3C 最终草案2016.03.01 更新为 CR —— 候选推荐规范）致力于提供一种更高效的布局方式，即便子项尺寸未知（或动态）的情况下，对齐、分布容器子项之间的空间，因此谓之「flex」。 弹性...
career 「罗辑思维」摘录 罗辑思维 119：谁杀死了秦帝国 理想和现实利益之间的关系，大概有两种: 善意的关系：你有你的理想，我有我的理想，我们相互尊重。如果你想把我理想纳入到你的理想体系当中来，可以，请用利益来说话，请用利益的方式来尊重他人的理想。 恶性的理想主义：用自己的理想绑架他人。我喜欢狗狗，你就不...
gulp Gulp 错误管理 Gulp 目前的错误处理方式有点操蛋，一旦发生错误进程就挂了，得手动去重启。虽然开发者预期在 gulp 4 中解决此问题，但 gulp 4 什么时候发布并没有明确时间表，在此之前，还是很有必要了解一下更优雅的错误处理方式，除非你钟情于反复在命令行里输入 gulp 然后回车。 使用...