花有重开日，人无再少年
什么是项目周期 任何项目都会有自己的生命周期，可能有人会说，项目都是一次性的，为什么还存在“项目周期”呢?的确，单从一个项目来看，是不应该用周期来描述的。不过…
什么是项目管理 项目管理是“对项目进行管理”。包含两方面的内涵，一个是项目管理属于管理的范畴，另一个是项目管理的对象是项目。 我们所讲的项目管理一般都是指为达…
背景 前段时间Iconfont关闭了服务，影响到了项目的正常开发和迭代。Iconfont服务恢复之后，对上传的图标增加了审核流程。每次新增图标都需要等待流程通…
在使用 Style Dictionary 管理 Design Token中简单介绍了Style Dictionary及其使用，本文将介绍Style Dicti…
在之前的文章中，我介绍了Design Token 相关的基本概念。本文将介绍如何使用现有的工具来管理 Design Token。 什么是Style Dicti…
虽然Storybook 提供的默认的样式已经挺漂亮的，但是当在落地自己的设计系统时，还是希望能够在整体风格上做出属于自己的定制。Storybook 提供了主题…
我认为，在聊 Design Token之前，必须先理解什么设计系统（Design System）和 原子设计理论（Atomic Design)。 什么是设计系…
在前面的文章中，通过个人博客的案例，展示了如何在现有项目中集成Storybook。但是，实际情况是，随着项目的迭代和组件数量的增加，组织的复杂性也在增加。 …
在Storybook使用手册系列文章中，介绍了Storybook的基本概念和文档编写方式。在这篇文章中，将在一个现有项目中实操 Storybook 的接入过程…
原作者: Medhat Dawoud 原文链接：https://medhatdawoud.net/blog/measuring-web-performanc…
MDX MDX是一种标准的文件格式，由Markdown和JSX组合而成，文件后缀是.mdx。也就是说你可以在MDX中使用Markdown的语法编写内容，同时还…
原作者: Medhat Dawoud 原文链接：https://medhatdawoud.net/blog/why-performance-matters …
原作者: Medhat Dawoud 原文链接：https://medhatdawoud.net/blog/what-makes-the-web-slow …
其实在使用手册的前两篇中，已经实现了组件文档的编写。开发过程中编写Story的同时，创建了基本的文档。 此外，Storybook还提供了一些工具，可以用内容和…
上一篇中介绍了什么是Storybook，以及基本的使用方法。本文将介绍在Storybook中组件组织和结构划分的一些技巧，内容来自官方推荐。 在侧边栏展示导出…
前两天上网冲浪时，在Node的Github仓库中，有这么一个Pull Request test: add initial test module #42325…
什么是Storybook Storybook 是一个用于UI开发的开源工具，通过隔离组件，使开发更快、更容易。它提供了一套完整的开发流程，你可以不用配置一个复…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
在使用 Rust 开发应用时，需要用到 SQLite 做为应用的本地数据库。在目前Rust的生态中，SQLite相关的 Crate 还是挺多的。我选择了 Di…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
再成功的软件系统也难免走向复杂。用户数量的增加将给系统的可能性、可伸缩性、性能表现施加前所未有地压力。新功能不断加入，补丁越来越多，让软件越来越笨重。拓展系统…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
今天网上冲浪时看到这个网站 https://csstracking.dev/ ，提到一种使用CSS技术实现用户信息追踪的方案，挺有意思的。作者 OliverB…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
今天同事分享了一个有意思的算法题，感觉挺有意思的。题目来自浙大PAT考试 A1082 Read Number in Chinese。以下是原题： Given …
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
对象拷贝这个话题算是老生常谈了，从浅拷贝到深拷贝，从最简单的JSON.stringfy()到递归遍历赋值，作为面试八股文的常客，字节的朋友甚至写出了惊艳面试官…
原文：https://ishadeed.com/article/defensive-css/ 有时候，我们希望有一种方式来避免遇到某种CSS的问题或者行为。要…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
不知不觉，从14年到现在，自己的博客已经维护了8年了。虽然文章写的不多，质量也参差不齐，但是热情还是在的。 之前因为Hexo构建速度慢的问题，我将构建工具迁移…
本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式，用 blockquote 穿插自己的思考和感悟，以加深对内容的理解和消化。 全书整体分为三个部…
最近看到一片文章 Solving a Mystery Behavior of parseInt() in JavaScript，讲的是JavaScript中的…
今天在开发过程中遇到一个报错 糟糕，遇到CommonJS和ESModule两兄弟打架了😢 错误信息简单翻译一下就是: 我项目中使用require()加载了一个…
最近正在实现一个动画特效，有一个非常简单的需求 请求获取到一个数组A之后，将数组的内容以动画弹窗的方式展示给用户，要求： 每次弹窗出现的时间间隔是随机 弹窗的…
之前的文章single-spa源码解析-registerApplication和start中，对single-spa提供的两个关键方法的源码进行了简单分析。今…
首先将问题简化，假定主应用和子应用都已经准备好的情况下，针对应用的注册和启动这两个关键操作进行分析。 在主应用中只需要调用registerApplicatio…
背景 随着组织架构调整，目前来车服租车团队已经有一段时间了。虽然主要业务工作还是B端系统的开发，但是租车业务因其业务特点以及一些历史原因，我面对的是两个“巨无…
背景 所在团队承接了架构部所有的底层服务的用户系统的建设，包括面向业务方的自助服务系统和面向运维同学的后台系统。随着各系统的不断迭代，系统提供的自助化能力越来…
背景 作为业务组件库，zen在多个租车B端系统中被广泛使用。 zen在提高租车B端的研发效率的同时，保证B端系统的UI和交互的一致性。 但是当初的维护人员已离…
在大概18年上半年，有幸被抽调到一个FT，参与云平台私有云项目的开发中。这个项目是一个产品化的IaaS解决方案，为企业提供管理包括计算，网络，存储在内的数据中…
入职的时候团队加上老板就三个人，需要对接5+个公共服务团队，为公共服务开发控制台，每个团队两个控制台系统。在之前，有一些团队有一些正在运行的系统，技术栈有Re…
最近在写自己的小项目时，想试试 CSS variables，于是便有了此文。 之前也使用过 Sass，Less 之类的预处理器。因为 node-sass 的安…
对于Promise而言只有三个状态： Pending， Resolve 和 Reject。在任意时刻，一个Promise只能是处于这三个状态中的任意一个，且一…
前言 Tree Shaking是一种死码清除(dead code elimination)技术，通常用于在ECMAScript方言比如Dart，JavaScr…
如标题所述，本文主要是重新梳理JavaScript的异步编程方案，部分内容来自网络 同步 在开始之前，先简单说说JavaScript中的同步。先来个两个简单的…
首先明确一点，事件循环这个概念并非JavaScript语言中的。在计算机科学中，事件循环作为编程结构或者设计模式，在程序中等待和发送消息或者事件。 Event…
在之前的从getboundingclientrect到intersection-observer中提到了Intersection Observer API，今…
平时在写页面交互的时候经常使用兼容性不错的 getBoundindClientReact 方法，以快速获取元素大小和元素位置。最近无意中看到getBoundi…
说到缓存大家可能觉得很简单。“不就是检查资源是否有缓存，如果有就加以利用”，“可以节约服务器资源呗”。如果再深入一点，有的cache-control, las…
背景 有这样的需求：项目交付的版本要求支持针对客户定制产品的LOGO、登录界面的背景。 简单分析 手动替换文件再编译这种蠢到极点的方法肯定是无法接受的。如果你…
前言 之前在腾讯云的云主机中，部署了一个pyspider爬虫项目，专门爬链家上的二手房信息。前段时间云主机被我玩坏了，重装了一次，需要重新在部署一次。之前没有…
上篇说到TypeScript简单的基本知识，包括什么是TypeScript、TypeScript的安装以及TypeScript中的基本类型。今天来了解一下如何…
TypeScript 是由微软推出的开源编程语言，官网的定义如下： TypeScript is a typed superset of JavaScript …
买了一个服务器，系统是CentOS7.2 .做了一番基础设置，在此记录一下。 更新 yum 源仓库 安装 Git yum 源仓库里最新版本的 Git 是 1.…
前几天离职了，离职前几天开始物色合适的下家。在疯狂的简历投递之后，陆续接到了几个面试邀请，已经面了四家。这四次面试风格迥异，期间遇到了一些比较有意思的问题，在…
ES5 和 ES6 中 Object 添加了很多新的方法，现在很多开源代码中有用到了这些，今天来整理一番。 Object.assign() 这是ES6新添加的…
在这几天的工作中，我需要调用同事编写的兼容jQuery和React的通用组件。他为了兼容jQuery风格的调用和React的组件化，分别export了一个de…
解构赋值（destructuring assignment）语法是一个Javascript表达式，这种语法能够更方便的提取出 Object 或者 Array …
上回讲到Firebase 的创建项目和用户管理。今天来说说 Firebase 的数据库的使用。 Firebase Realtime Database 是一种云…
在构建自己的在线云工具应用时，我使用 Firebase 为自己的“无后端项目”提供服务，把在开发期间接触到的一些内容整理在一起，制成系列笔记。这个过程有两个好…
原文标题：CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 原文链接：ht…
最近业余时间在学习 React，配合 Redux 和 React-Router 正在不紧不慢地开发一个小工具moviemaster，用于管理硬盘中的电影剧集。…
使用过一些清单类的应用程序，像 WunderList, Google Keep等，用来记录一些计划和安排，也试着将自己的计划安排同笔记一起整理在 Everno…
在普通的 textarea 中，只能显示普通的文本。如果简单的输入文本，textarea 便足以胜任。但是实际情况往往要复杂得多。 简单版本的插入表情 常见的…
源自 Atom-shell 的 Electron 目前是一个很火的项目。已经有很多开发者基于 Electron 开发出了各种各样的桌面程序。在我看来，对于广大…
记录可查，自从毕业之后就没怎么写过博客。期间写了翻译了两篇老外的文章，不过好像似乎也是烂尾了。 仔细想想，没有坚持下去的原因有很多，但是无论有多少原因，归根到…
原文标题：4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 原文链接：http…
原文链接： The future of layout with CSS: Grid Layouts The future of layout with CSS…
在JavaScript 中，调用构造函数的方法很简单。 但是，要知道: new关键词的使用与否，产生的效果是不一样的。输出p1和p2可以很清楚的看到， p1…
有人问我，“line-height到底是怎么一回事？”，“元素高度到底是怎么计算出来的？”。我说不出个所以然…… 故有此文 首先有一点我们需要明白的是：在标准…
前几天一直在看Node相关的书，做了一些笔记，挂在自己的博客上。挺累的，毕竟看的是两本英文的书。而且疲了，一时间学的太猛，以至于晕头转向的。Node中我觉得有…
在开发过程中，有时候会需要访问一些本地的文件，对文件进行一些操作。现在来对这方面的问题展开学习。下面是几个简单的例子，包括监听文件的变化和读取命令行中的参数 …
额在之前的笔记中，提到了使用middleware，设置路由，发送数据，处理请求，渲染模板等。但是这些都不足以完成一个Web应用程序，动态数据交互需要和数据库联…
因为各种版本的更新，文中的例子可能失效无法运行。毕竟Node for Front-End Developer这本书已经出现很久了。 Creating a Dy…
Node中的MiddleWare In the context of a web server, middleware is a layer between …
总是喜欢在阴雨绵绵的时候收拾自己的小窝，无论是在家还是在学校。也不知道这个癖好是怎么形成的，还是不错的。这几天一直在搞一个新的hexo的主题，暂时没什么进展了…
很久以前就接触到了响应式Web开发这回事，自己也玩弄过一阵。当时没有整理成笔记，现在在重构自己的在线简历以及hexo主题制作过程中涉及到，就顺手整理成一个系列…
使用 urllib2 抓取数据时，最简单的方法是： 使用urllib2.urlopen打开参数中给出的url，返回一个 instance（匿名的object）…
CSS 诞生已经二十年了，我接触 CSS 才两年。不说多么的精通，但是自信对基本的常用的 CSS 很熟悉。然而，一直往前赶却忽略了事情的本质。昨天有人问我盒模…
##Normal Flow 在正常流中的盒子们都是一个格式化上下文（formatting context）中的成员，可以表现成一个block或者inline，…
原文标题：Centering in CSS: A Complete Guide 原文链接：http://css-tricks.com/centering-cs…
自己对以后的方向很明确，但是却一直做不到。接连的 rejected 多少对自己有影响。不是自己不去争取，而是真的已经疲了，或者说自己也怂了。面试的时候已经不知…
简单介绍 之前说过，每次修改之后，Git 并不是保存这些修改之后的差异变化，实际上就像一个照相机一样，将修改后的文件拍下作为文件快照，记录在一个微型的文件系统…
在 CSS2.1 中，一个盒子会根据下面三种定位方案进行排列： 标准流（Normal flow）：在 CSS2.1 中包括 块级盒子形成的块级格式化上下文（b…
我敢说这一定是很常见的问题，因为到处都是页面不够长而上吊的footer，而。比如这里： 或者这里(￣◇￣;)： 这是随手找到，没别的意思。只是想说明一下这个问…
视觉格式化模型 CSS 视觉格式化模型（visual formatting model）是一种用来处理文档，将其呈现在可视化媒体中的算法。这是 CSS 中的一…
原文链接：http://www.sitepoint.com/web-foundations/internet-explorer-haslayout-prope…
Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的。为了方便使用 Grunt ，你应该在全局范围内安装 Grunt…
在最近使用 git 的过程中，有时候遇到这样的一个问题：习惯性的 “add -A”，这会将所有的修改都添加到暂存区，可是有两个文件的修改暂时不想添加的呀，这该…
IE 下 a标签的虚线框 在 IE 中，点击 a 标签时， a 标签会被加上一个虚线框，很丑！！！！！ 不同版本的IE解决方案不同：IE8 下只需为 a 标签…
一般处理 初始化: 这样就会在当前目录创建版本库. 常用指令: 添加文件： 删除文件索引,并且删除文件： 重命名： 提交更新,全部： 查看日志. 查看指定版本…
###pip的安装 先下载一个 python 文件 : get-pip.py。 然后运行下面这条命令（可能需要管理员权限）： 如果 setuptools 还…
原文标题：The Dangers of Stopping Event Propagation 原文链接：http://css-tricks.com/dange…
最近正在学习Node，在图书馆借了基本关于Node的书，同时在网上查阅资料，颇有收获，但是整体感觉对Node的理解还是停留在一个很模棱两可的状态。比如Node…
最近正在学习Node，在图书馆借了基本关于Node的书，同时在网上查阅资料，颇有收获，但是整体感觉对Node的理解还是停留在一个很模棱两可的状态。比如Node…
最近正在学习Node，在图书馆借了基本关于Node的书，同时在网上查阅资料，颇有收获，但是整体感觉对Node的理解还是停留在一个很模棱两可的状态。比如Node…
很久很久以前，我根据网上的博文总结写了一篇博客《sass基本语法》。在那之后平时虽然不太用到sass（因为没项目做，只能自己写着玩玩），但是也还一直在试着使用…
原文标题：Node.js EventEmitter Tutorial 原文链接：http://www.hacksparrow.com/node-js-even…
原文标题：Global Variables in Node.js 原文链接：http://www.hacksparrow.com/global-variabl…
原文标题：Node.js Module – exports vs module.exports 原文链接：http://www.hacksparrow.com…
之前简单的了解了 Node.js 。对 Node.js 有一个简单的认识。接下来查看了 API 文档中模块有关的知识点，参照《Node.js 开发指南》，并…
Node.js学习入门 ##Node.js 是什么 Node.js 不是一种独立的语言，与 PHP，Python 等”既是语言优势平台“不同，它也不是一个 …
《高性能网站建设进阶指南》 脚本如果按照常规方式加载，不仅会阻塞页面中其他内容的下载，还会阻塞脚本后面所有元素的渲染。异步加载脚本可以避免这种阻塞现象，从而提…
敬以此文纪念成功折腾出自己的github page 之前用 jeykll 折腾自己的 github 博客，看中的是 jeykll 提供的华丽主题。但是 win…
JavaScript和HTML之间的交互是通过事件实现的。事件，就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用事件处理程序来预订事件，以便在事件发…
《高性能网站建设进阶指南》 按理来说，JavaScript在浏览器中的性能问题是开发人员面对的最重要的可用性问题。但由于JavaScript天生的阻塞性质，问…
《高性能网站建设进阶指南》 ##优化原则 优化的目的是希望降低程序的整体开销。 ###减少开销 通常认为开销就是程序的执行时间。而在进行优化工作时，应该…
sass是一种基于ruby语言开发的CSS预处理器。它可以使用变量，嵌套，混入，继承，运算，函数等编程语言具有的特性进行CSS的开发，使得CSS的开发变得简单…