归档

花有重开日,人无再少年

2022
  • 学习项目管理-项目的生命周期

    什么是项目周期 任何项目都会有自己的生命周期,可能有人会说,项目都是一次性的,为什么还存在“项目周期”呢?的确,单从一个项目来看,是不应该用周期来描述的。不过…

  • 学习项目管理-项目管理的定义

    什么是项目管理 项目管理是“对项目进行管理”。包含两方面的内涵,一个是项目管理属于管理的范畴,另一个是项目管理的对象是项目。 我们所讲的项目管理一般都是指为达…

  • 使用 SVG 建立图标系统

    背景 前段时间Iconfont关闭了服务,影响到了项目的正常开发和迭代。Iconfont服务恢复之后,对上传的图标增加了审核流程。每次新增图标都需要等待流程通…

  • Style Dictionary 和 Design Token 的实战

    在使用 Style Dictionary 管理 Design Token中简单介绍了Style Dictionary及其使用,本文将介绍Style Dicti…

  • 使用 Style Dictionary 管理 Design Token

    在之前的文章中,我介绍了Design Token 相关的基本概念。本文将介绍如何使用现有的工具来管理 Design Token。 什么是Style Dicti…

  • Storybook 使用手册——自定义主题

    虽然Storybook 提供的默认的样式已经挺漂亮的,但是当在落地自己的设计系统时,还是希望能够在整体风格上做出属于自己的定制。Storybook 提供了主题…

  • 浅谈 Design Token

    我认为,在聊 Design Token之前,必须先理解什么设计系统(Design System)和 原子设计理论(Atomic Design)。 什么是设计系…

  • Storybook 使用手册——组织你的Storybook

    在前面的文章中,通过个人博客的案例,展示了如何在现有项目中集成Storybook。但是,实际情况是,随着项目的迭代和组件数量的增加,组织的复杂性也在增加。 …

  • Storybook 使用手册——实战演练

    在Storybook使用手册系列文章中,介绍了Storybook的基本概念和文档编写方式。在这篇文章中,将在一个现有项目中实操 Storybook 的接入过程…

  • 「译」衡量Web性能,多快才算快?

    原作者:  Medhat Dawoud 原文链接:https://medhatdawoud.net/blog/measuring-web-performanc…

  • Storybook 使用手册——MDX 和 Doc Blocks

    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 …

  • Storybook 使用手册——编写组件文档

    其实在使用手册的前两篇中,已经实现了组件文档的编写。开发过程中编写Story的同时,创建了基本的文档。 此外,Storybook还提供了一些工具,可以用内容和…

  • Storybook 使用手册——组件命名和结构层次

    上一篇中介绍了什么是Storybook,以及基本的使用方法。本文将介绍在Storybook中组件组织和结构划分的一些技巧,内容来自官方推荐。 在侧边栏展示导出…

  • Node.js 将要内置测试模块

    前两天上网冲浪时,在Node的Github仓库中,有这么一个Pull Request test: add initial test module #42325…

  • Storybook 使用手册——基本概念

    什么是Storybook Storybook 是一个用于UI开发的开源工具,通过隔离组件,使开发更快、更容易。它提供了一套完整的开发流程,你可以不用配置一个复…

  • 《架构师修炼之道》摘录13-鼓励团队参与架构设计

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 《架构师修炼之道》摘录12-架构评估

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 《架构师修炼之道》摘录11-描述架构

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 《架构师修炼之道》摘录10-展示设计决策

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 使用SQLite做为Rust项目的数据库

    在使用 Rust 开发应用时,需要用到 SQLite 做为应用的本地数据库。在目前Rust的生态中,SQLite相关的 Crate 还是挺多的。我选择了 Di…

  • 《架构师修炼之道》摘录09-召开架构设计研讨会

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 《架构师修炼之道》摘录08-建立模型,化繁为简

    再成功的软件系统也难免走向复杂。用户数量的增加将给系统的可能性、可伸缩性、性能表现施加前所未有地压力。新功能不断加入,补丁越来越多,让软件越来越笨重。拓展系统…

  • 《架构师修炼之道》摘录07-架构模式

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 使用CSS追踪用户信息-CSS Fingerpoint

    今天网上冲浪时看到这个网站 https://csstracking.dev/ ,提到一种使用CSS技术实现用户信息追踪的方案,挺有意思的。作者 OliverB…

  • 《架构师修炼之道》摘录06-主动选择架构

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 《架构师修炼之道》摘录05-挖掘关键架构需求

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

2021
  • 将阿拉伯数字转换成大写中文

    今天同事分享了一个有意思的算法题,感觉挺有意思的。题目来自浙大PAT考试 A1082 Read Number in Chinese。以下是原题: Given …

  • 《架构师修炼之道》摘录04-换位思考

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • JavaScript深拷贝的新方法-structureClone

    对象拷贝这个话题算是老生常谈了,从浅拷贝到深拷贝,从最简单的JSON.stringfy()到递归遍历赋值,作为面试八股文的常客,字节的朋友甚至写出了惊艳面试官…

  • 【译】防御性CSS

    原文:https://ishadeed.com/article/defensive-css/ 有时候,我们希望有一种方式来避免遇到某种CSS的问题或者行为。要…

  • 《架构修炼师之道》摘录03-制定设计策略

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 《架构修炼师之道》摘录02-设计思维基础

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • 博客又搬家了

    不知不觉,从14年到现在,自己的博客已经维护了8年了。虽然文章写的不多,质量也参差不齐,但是热情还是在的。 之前因为Hexo构建速度慢的问题,我将构建工具迁移…

  • 《架构修炼师之道》摘录01-成为软件架构师

    本系列内容来自《架构师修炼之道》。在自己的笔记中以半摘录的方式,用 blockquote 穿插自己的思考和感悟,以加深对内容的理解和消化。 全书整体分为三个部…

  • ParseInt()的迷幻行为

    最近看到一片文章 Solving a Mystery Behavior of parseInt() in JavaScript,讲的是JavaScript中的…

  • 劝架CommonJS和ESModule

    今天在开发过程中遇到一个报错 糟糕,遇到CommonJS和ESModule两兄弟打架了😢 错误信息简单翻译一下就是: 我项目中使用require()加载了一个…

2020
  • 关于JavaScript的随机数

    最近正在实现一个动画特效,有一个非常简单的需求 请求获取到一个数组A之后,将数组的内容以动画弹窗的方式展示给用户,要求: 每次弹窗出现的时间间隔是随机 弹窗的…

  • 如何在项目中接入single-spa

    之前的文章single-spa源码解析-registerApplication和start中,对single-spa提供的两个关键方法的源码进行了简单分析。今…

  • single-spa源码解析-registerApplication和start

    首先将问题简化,假定主应用和子应用都已经准备好的情况下,针对应用的注册和启动这两个关键操作进行分析。 在主应用中只需要调用registerApplicatio…

  • 使用 single-spa 实现微前端

    背景 随着组织架构调整,目前来车服租车团队已经有一段时间了。虽然主要业务工作还是B端系统的开发,但是租车业务因其业务特点以及一些历史原因,我面对的是两个“巨无…

  • 在滴滴的这几年:基于Git的平台文档解决方案

    背景 所在团队承接了架构部所有的底层服务的用户系统的建设,包括面向业务方的自助服务系统和面向运维同学的后台系统。随着各系统的不断迭代,系统提供的自助化能力越来…

  • Zen Reborn 计划

    背景 作为业务组件库,zen在多个租车B端系统中被广泛使用。 zen在提高租车B端的研发效率的同时,保证B端系统的UI和交互的一致性。 但是当初的维护人员已离…

  • 在滴滴的这几年:基于 Node.js 的私有云 Web 管控系统

    在大概18年上半年,有幸被抽调到一个FT,参与云平台私有云项目的开发中。这个项目是一个产品化的IaaS解决方案,为企业提供管理包括计算,网络,存储在内的数据中…

  • 在滴滴的这几年:组件库的设计和开发

    入职的时候团队加上老板就三个人,需要对接5+个公共服务团队,为公共服务开发控制台,每个团队两个控制台系统。在之前,有一些团队有一些正在运行的系统,技术栈有Re…

  • 使用 CSS variables 实现主题色切换

    最近在写自己的小项目时,想试试 CSS variables,于是便有了此文。 之前也使用过 Sass,Less 之类的预处理器。因为 node-sass 的安…

  • 为Promise增加abort方法

    对于Promise而言只有三个状态: Pending, Resolve 和 Reject。在任意时刻,一个Promise只能是处于这三个状态中的任意一个,且一…

2019
  • 浅谈TreeShaking在前端中的应用 - Rollup VS Webpack

    前言 Tree Shaking是一种死码清除(dead code elimination)技术,通常用于在ECMAScript方言比如Dart,JavaScr…

  • JavaScript异步编程方案回顾

    如标题所述,本文主要是重新梳理JavaScript的异步编程方案,部分内容来自网络 同步 在开始之前,先简单说说JavaScript中的同步。先来个两个简单的…

  • 再谈EventLoop

    首先明确一点,事件循环这个概念并非JavaScript语言中的。在计算机科学中,事件循环作为编程结构或者设计模式,在程序中等待和发送消息或者事件。 Event…

  • IntersectionObserver、MutationObserver和ResizeObserver

    在之前的从getboundingclientrect到intersection-observer中提到了Intersection Observer API,今…

  • 从getBoundingClientRect到Intersection Observer

    平时在写页面交互的时候经常使用兼容性不错的 getBoundindClientReact 方法,以快速获取元素大小和元素位置。最近无意中看到getBoundi…

  • 浅谈 HTTP 缓存

    说到缓存大家可能觉得很简单。“不就是检查资源是否有缓存,如果有就加以利用”,“可以节约服务器资源呗”。如果再深入一点,有的cache-control, las…

  • 巧用 webpack loader 实现项目的定制化

    背景 有这样的需求:项目交付的版本要求支持针对客户定制产品的LOGO、登录界面的背景。 简单分析 手动替换文件再编译这种蠢到极点的方法肯定是无法接受的。如果你…

2018
2017
  • 最近几次面试的小总结

    前几天离职了,离职前几天开始物色合适的下家。在疯狂的简历投递之后,陆续接到了几个面试邀请,已经面了四家。这四次面试风格迥异,期间遇到了一些比较有意思的问题,在…

  • 整理Object的一些方法

    ES5 和 ES6 中 Object 添加了很多新的方法,现在很多开源代码中有用到了这些,今天来整理一番。 Object.assign() 这是ES6新添加的…

  • JavaScrip模块系统详解

    在这几天的工作中,我需要调用同事编写的兼容jQuery和React的通用组件。他为了兼容jQuery风格的调用和React的组件化,分别export了一个de…

  • 深入理解 ES6 的解构赋值

    解构赋值(destructuring assignment)语法是一个Javascript表达式,这种语法能够更方便的提取出 Object 或者 Array …

2016
  • 使用Firebase构建云端应用-数据库的管理

    上回讲到Firebase 的创建项目和用户管理。今天来说说 Firebase 的数据库的使用。 Firebase Realtime Database 是一种云…

  • 使用Firebase构建云端应用:创建项目和用户管理

    在构建自己的在线云工具应用时,我使用 Firebase 为自己的“无后端项目”提供服务,把在开发期间接触到的一些内容整理在一起,制成系列笔记。这个过程有两个好…

  • 【译】CSS Grid, Flexbox 和 Box Alignment:网页布局的新系统

    原文标题:CSS Grid, Flexbox And Box Alignment: Our New System For Web Layout 原文链接:ht…

  • 使用 React-Router 创建单页应用

    最近业余时间在学习 React,配合 Redux 和 React-Router 正在不紧不慢地开发一个小工具moviemaster,用于管理硬盘中的电影剧集。…

  • 实现一个稍微复杂的simplelist

    使用过一些清单类的应用程序,像 WunderList, Google Keep等,用来记录一些计划和安排,也试着将自己的计划安排同笔记一起整理在 Everno…

  • 输入框插入表情的实现

    在普通的 textarea 中,只能显示普通的文本。如果简单的输入文本,textarea 便足以胜任。但是实际情况往往要复杂得多。 简单版本的插入表情 常见的…

  • Electron 开发的 gulp 配置

    源自 Atom-shell 的 Electron 目前是一个很火的项目。已经有很多开发者基于 Electron 开发出了各种各样的桌面程序。在我看来,对于广大…

  • 真的是好久没写博客了

    记录可查,自从毕业之后就没怎么写过博客。期间写了翻译了两篇老外的文章,不过好像似乎也是烂尾了。 仔细想想,没有坚持下去的原因有很多,但是无论有多少原因,归根到…

  • Chrome内存分析工具概述

    原文标题:4 Types of Memory Leaks in JavaScript and How to Get Rid Of Them 原文链接:http…

2015
2014
  • 规范之路-line-height的工作原理

    有人问我,“line-height到底是怎么一回事?”,“元素高度到底是怎么计算出来的?”。我说不出个所以然…… 故有此文 首先有一点我们需要明白的是:在标准…

  • 定时将图片保存在SAE的Storage中

    前几天一直在看Node相关的书,做了一些笔记,挂在自己的博客上。挺累的,毕竟看的是两本英文的书。而且疲了,一时间学的太猛,以至于晕头转向的。Node中我觉得有…

  • Node学习笔记-Wrangling the File System

    在开发过程中,有时候会需要访问一些本地的文件,对文件进行一些操作。现在来对这方面的问题展开学习。下面是几个简单的例子,包括监听文件的变化和读取命令行中的参数 …

  • Node学习笔记-Data Sources and Flow Control

    额在之前的笔记中,提到了使用middleware,设置路由,发送数据,处理请求,渲染模板等。但是这些都不足以完成一个Web应用程序,动态数据交互需要和数据库联…

  • Node学习笔记-Server-Side Templates

    因为各种版本的更新,文中的例子可能失效无法运行。毕竟Node for Front-End Developer这本书已经出现很久了。 Creating a Dy…

  • Node学习笔记-Serving the content

    Node中的MiddleWare In the context of a web server, middleware is a layer between …

  • 规范之路-重新认识了Float

    总是喜欢在阴雨绵绵的时候收拾自己的小窝,无论是在家还是在学校。也不知道这个癖好是怎么形成的,还是不错的。这几天一直在搞一个新的hexo的主题,暂时没什么进展了…

  • 我的响应式web开发实践笔记-Media Queries 初探

    很久以前就接触到了响应式Web开发这回事,自己也玩弄过一阵。当时没有整理成笔记,现在在重构自己的在线简历以及hexo主题制作过程中涉及到,就顺手整理成一个系列…

  • 使用python抓取知乎日报的API数据

    使用 urllib2 抓取数据时,最简单的方法是: 使用urllib2.urlopen打开参数中给出的url,返回一个 instance(匿名的object)…

  • CSS的盒模型-过去和将来

    CSS 诞生已经二十年了,我接触 CSS 才两年。不说多么的精通,但是自信对基本的常用的 CSS 很熟悉。然而,一直往前赶却忽略了事情的本质。昨天有人问我盒模…

  • 规范之路-Normal Flow

    ##Normal Flow 在正常流中的盒子们都是一个格式化上下文(formatting context)中的成员,可以表现成一个block或者inline,…

  • CSS元素居中对齐大法

    原文标题:Centering in CSS: A Complete Guide 原文链接:http://css-tricks.com/centering-cs…

  • CSS 中的权重问题

    自己对以后的方向很明确,但是却一直做不到。接连的 rejected 多少对自己有影响。不是自己不去争取,而是真的已经疲了,或者说自己也怂了。面试的时候已经不知…

  • Git 使用笔记(三)-分支的使用

    简单介绍 之前说过,每次修改之后,Git 并不是保存这些修改之后的差异变化,实际上就像一个照相机一样,将修改后的文件拍下作为文件快照,记录在一个微型的文件系统…

  • 规范之路-CSS中的定位简介

    在 CSS2.1 中,一个盒子会根据下面三种定位方案进行排列: 标准流(Normal flow):在 CSS2.1 中包括 块级盒子形成的块级格式化上下文(b…

  • 如何将页面的footer保持在页面的底部一

    我敢说这一定是很常见的问题,因为到处都是页面不够长而上吊的footer,而。比如这里: 或者这里( ̄◇ ̄;): 这是随手找到,没别的意思。只是想说明一下这个问…

  • 规范之路-visual formatting model 概述

    视觉格式化模型 CSS 视觉格式化模型(visual formatting model)是一种用来处理文档,将其呈现在可视化媒体中的算法。这是 CSS 中的一…

  • 踩坑日记-IE中的 hasLayout 属性

    原文链接:http://www.sitepoint.com/web-foundations/internet-explorer-haslayout-prope…

  • Grunt的简单配置和使用

    Grunt 和 Grunt 的插件都是通过 Node.js 的包管理器 npm 来安装和管理的。为了方便使用 Grunt ,你应该在全局范围内安装 Grunt…

  • git 使用笔记(二)-撤销操作

    在最近使用 git 的过程中,有时候遇到这样的一个问题:习惯性的 “add -A”,这会将所有的修改都添加到暂存区,可是有两个文件的修改暂时不想添加的呀,这该…

  • 踩坑日记-IE下 A 标签的虚线框和必须要会用的 CSS 选择器

    IE 下 a标签的虚线框 在 IE 中,点击 a 标签时, a 标签会被加上一个虚线框,很丑!!!!! 不同版本的IE解决方案不同:IE8 下只需为 a 标签…

  • Git 使用笔记(一)-入门级的操作

    一般处理 初始化: 这样就会在当前目录创建版本库. 常用指令: 添加文件: 删除文件索引,并且删除文件: 重命名: 提交更新,全部: 查看日志. 查看指定版本…

  • 利用pip安装Django

    ###pip的安装 先下载一个 python 文件 : get-pip.py。 然后运行下面这条命令(可能需要管理员权限): 如果 setuptools 还…

  • (译)阻止事件传播的危害

    原文标题:The Dangers of Stopping Event Propagation 原文链接:http://css-tricks.com/dange…

  • Node学习笔记—Node.js核心API之Util

    最近正在学习Node,在图书馆借了基本关于Node的书,同时在网上查阅资料,颇有收获,但是整体感觉对Node的理解还是停留在一个很模棱两可的状态。比如Node…

  • Node学习笔记-Node.js中的核心API之HTTP

    最近正在学习Node,在图书馆借了基本关于Node的书,同时在网上查阅资料,颇有收获,但是整体感觉对Node的理解还是停留在一个很模棱两可的状态。比如Node…

  • Node学习笔记-Nodejs中的核心API之Events

    最近正在学习Node,在图书馆借了基本关于Node的书,同时在网上查阅资料,颇有收获,但是整体感觉对Node的理解还是停留在一个很模棱两可的状态。比如Node…

  • 学习sass时了解到的一些好玩特性

    很久很久以前,我根据网上的博文总结写了一篇博客《sass基本语法》。在那之后平时虽然不太用到sass(因为没项目做,只能自己写着玩玩),但是也还一直在试着使用…

  • 【译】Node.js的 EventEmitter 教程

    原文标题:Node.js EventEmitter Tutorial 原文链接:http://www.hacksparrow.com/node-js-even…

  • 【译】Node.js的全局变量

    原文标题:Global Variables in Node.js 原文链接:http://www.hacksparrow.com/global-variabl…

  • 【译】Node.js的模块-exports和module.exports

    原文标题:Node.js Module – exports vs module.exports 原文链接:http://www.hacksparrow.com…

  • Node学习笔记-Node.js中的模块

    之前简单的了解了 Node.js 。对 Node.js 有一个简单的认识。接下来查看了 API 文档中模块有关的知识点,参照《Node.js 开发指南》,并…

  • Node.js入门-Node.js 介绍

    Node.js学习入门 ##Node.js 是什么 Node.js 不是一种独立的语言,与 PHP,Python 等”既是语言优势平台“不同,它也不是一个 …

  • 高性能网站优化-确保异步加载脚本时保持执行顺序

    《高性能网站建设进阶指南》 脚本如果按照常规方式加载,不仅会阻塞页面中其他内容的下载,还会阻塞脚本后面所有元素的渲染。异步加载脚本可以避免这种阻塞现象,从而提…

  • Hello hexo

    敬以此文纪念成功折腾出自己的github page 之前用 jeykll 折腾自己的 github 博客,看中的是 jeykll 提供的华丽主题。但是 win…

  • JavaScript中的事件处理程序

    JavaScript和HTML之间的交互是通过事件实现的。事件,就是文档或者浏览器窗口中发生的一些特定的交互瞬间。可以使用事件处理程序来预订事件,以便在事件发…

  • 高性能网站优化-无阻塞加载脚本

    《高性能网站建设进阶指南》 按理来说,JavaScript在浏览器中的性能问题是开发人员面对的最重要的可用性问题。但由于JavaScript天生的阻塞性质,问…

  • 高性能网站优化-创建快速响应的Web

    《高性能网站建设进阶指南》 ##优化原则 优化的目的是希望降低程序的整体开销。 ###减少开销 通常认为开销就是程序的执行时间。而在进行优化工作时,应该…

  • Sass基本语法

    sass是一种基于ruby语言开发的CSS预处理器。它可以使用变量,嵌套,混入,继承,运算,函数等编程语言具有的特性进行CSS的开发,使得CSS的开发变得简单…