风萧萧梦潇-CSDN博客

翻译除了自动化访问性测试，我还对构建的页面做的六件事

本文翻译自《Beyond automatic accessibility testing: 6 things I check on every website I build》。如有翻译不当之处，请不吝指正。我刚对客户端完成一次可访问性审核（accessibility audit），然后我决定将我在审核和构建站点过程中执行的各种测试分享给大家。你可以立即应用到项目中，而无需学习一种工具或软件。Step 0：Automatic tests 自动化测试我进行可访问性检测的第一件事就是使用LightHous

2020-06-28 13:14:33 244

原创遇见你，很幸运——初识 Web Audio

注：本文使用的Web Audio API遵循W3C在18年9月发布的候选推荐版本，本文代码在Chrome76中测试通过，请注意代码兼容性。如有错误，请不吝指正。引言每段缘起始都很简单，或是擦肩而过的那阵清风，或是四目相对的那缕温情，亦是共经患难的那份情谊……初春的一天，在我被工作中出现的问题折磨的不堪之际，经朋友引荐，她出现在我的视野中。我忘不了她解决问题时的煞爽英姿，那干练的身影在我脑海中...

2019-11-01 14:57:54 1504 2

原创给你的git commit加点料

git commit的意义及目的为了对每次提交进行提交说明，方便之后回溯和团队协作，Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。提供更多的历史信息，方便快速浏览。可读性可以过滤某些commit（比如文档改动），便于快速查找信息。可回溯性可以直接从commit生成Change log。可自动化生成文档鉴于此，我们需要写出清晰规范的git c...

2019-05-26 13:15:33 536

原创 DeepinOS安装部分软件工具总结

前言：昨天安装win10把电脑装崩了，幸亏U盘里还有deepinos的安装包，索性装了deepin单系统。linux系统装软件工具等和windows很不相同，其中有一些软件是可以从应用商店中找到的，直接进行安装就可以，还有一些可以从官网下载到deb包进行安装，那么除此之外怎么办呢？之前我是通过各种网上搜索教程，现在总结这些软件和工具的安装教程，避免下次还是需要重新火急火燎的搜索安装。Deepin...

2019-01-27 22:51:15 6402

原创 Node爬虫神器Puppeteer安装记（Windows）

对于爬虫，相信大家并不陌生。当希望得到一些网站的数据并做一些有趣的事时，必不可少要爬取网页，用到爬虫。而目前网络上也有很多爬虫的教程资料，不过又尤以python语言居多。想来自己是做web的，就希望以js的方式解决问题，于是希望利用nodejs。今天介绍一款node的爬虫利器：Puppeteer。Puppeteer正如其名“木偶”，它允许我们像牵线木偶一样操纵它。它是一个建立在DevTools...

2018-04-29 11:23:09 11720 1

翻译 CSS网格布局（Grid）完全教程

本文译自《A Complete Guide to Grid》。CSS网格布局是目前CSS中可用的最强大的布局系统。它是二维系统，即可以处理行和列，不像flexbox只是一维系统。我们通过为父元素（变为grid container）和子元素（变为grid items）应用CSS规则来使用Grid布局。本文将讲述网格布局的基本概念和网格容器和其项目的全部属性及取值。

2017-10-10 17:59:38 10525 2

翻译 JavaScript框架对比

如今JavaScript框架三分天下，该学哪些和如何学呢？要知道这些问题，必须要将其进行对比。本文介绍了一种比较方式。本文翻译自Change And Its Detection In JavaScript Frameworks。PS：因为原文写于2015年，有些地方在如今看来有些过时或者改变，但原文思考框架的角度仍然使我感到受益。

2017-10-07 10:53:16 324

翻译浅析React中的受控组件和非受控组件

本文翻译自Controlled and uncontrolled form inputs in React don’t have to be complicated。如有错误，请不吝指正。React中的受控和非受控表单并不复杂你可能看到过很多文章，说不应该使用setState，refs不好……这是自相矛盾的。很难理解怎样是对的，甚至连选择的规则都不清楚。那我们应该怎么解决表单这个棘手的问题呢？

2017-09-28 21:31:18 2663

原创 2018秋招前端面试回顾（阿里、百度、网易、迅雷、美团等）

今年秋招对我是个打击，不过也让我认清了现实。借用鲁迅先生的一句话，真正的勇士敢于直面惨淡的人生，敢于正视失败的面试。面试失败不可怕，可怕的是不能吸取教训。在吸取教训上我做的不好，不然也不会有些面试问题记不住了。回顾几次面试失败经历，我总结了一下各家公司问的问题，为未来作打算，也为师弟师妹们做个参考。总结了一下，发现实习经历真的很重要，而且项目经验也要重点突出一些东西，展现自己的技术特点。。。

2017-09-28 21:15:45 12464 1

原创 2018年搜狗秋招前端笔试题：字符串删除

昨天做了搜狗前端笔试题，其中有一道题目是为字符串添加一个删除方法，给定一个参数n，求从该字符串删除n个字符组成的不同子串个数。题目看起来很简单，但是并不好编写。如果字符串字符各不相同还好说，直接可以使用排列组合公式来得到最终的个数；否则的话就得考虑删除后可能会产生相同的子串了。这样的话就得做一个Set来保存所有的字符串了。

2017-09-09 19:59:55 944

原创前端面试题：如何使字符串可执行

这是一道今年腾讯春招的面试题。字符串可执行的意思是将字符串转为立即执行的代码，如字符串var a=23;，使其经过某种操作后确实有个值为23的a变量。面试过后我就想总结一下这个问题，于是拖延了几个月后终于写了这篇文章。

2017-09-03 20:17:33 555

原创 JavaScript中的冷知识（持续更新中……）

本文将记录一些JavaScript中容易出错的点，由于本人知识有限，所以文章将采取持续更新的方式。本文的JavaScript会涉及浏览器端和服务器端的Node.js。可能有点混杂，等文章丰富了再整理吧。您也可以补充一些自己容易犯的错误。如有错误，请不吝指正。

2017-08-31 22:28:05 338

原创 JavaScript集合对象遍历方法总结

在JavaScript中能表示集合的数据结构是对象，如数组、普通对象和ES2015中新增的Set和Map等。当然不同对象的表现形式和功能不一样。新增的数据结构和新增的方法也使得集合的遍历变得很容易。针对这样的对象，我们经常使用的操作就是遍历，本文将总结集合对象遍历的几种方式。

2017-08-30 16:34:37 5282

原创阿里前端2018秋招笔试题：判断JSON对象是否有环

前几天做了阿里前端秋招笔试题，感觉受打击很深，找工作很难呀。不过考试完还是要复盘一下。记得有一道题目是判断JSON对象是否有环。因为当使用JSON.stringify()方法格式化一个JSON对象时，如果该对象有环路，就会抛出异常：Uncaught TypeError: Converting circular structure to JSON。

2017-08-24 22:44:59 1597

原创 JS实现HTML实体与字符的相互转换（二）

本系列的前一篇文章讲述了HTML实体编码（10进制、16进制）与字符的相互转换，本文将讲述HTML命名实体与字符的相互转换，如<转义成'<'。

2017-08-19 18:44:26 18262 3

原创从一道编程题看JS字符串连接性能

马上就要秋招了，又进入了刷题的季节。在刷题中进步，在刷题中成长。今天就讲一道刷题的趣事。文章结尾给出一些用JS做编程题的小技巧。在讲之前呢，先说一些题外话。之前感觉主流算法编程语言是C、C++、Java，作为前端是很不服气的。但最近题做多了，发现这样不是没有道理的……

2017-08-17 11:32:24 328

原创 React组件生命周期一览

React组件生命周期有三个阶段：加载、更新和卸载。每个阶段有多个方法来调用实现某些功能。这些方法名字也很有意思，带will前缀表示在该阶段发生之前调用，did表示在该阶段发生之后调用。本文将介绍这些方法。本文翻译自React官网文档，如有翻译不当，请不吝指正。

2017-08-16 18:05:12 2351

原创 nodejieba安装记（Windows）

导语：最近想分析一下自己在学校论坛bt的下载行为，又想耍帅，所以准备整个词云。而词云的数据来源必然是下载种子的名称、类型等。所以不可避免要针对所有下载种子做关键词检索，因此需要用到中文分词工具。因为我利用nodejs，所以在网上查找了很多资料，发现nodejie是个不错的选择。好吧，说实话主要是看了月影大大的“使用 Node.js 对文本内容分词和关键词抽取”这篇文章做出的选择。

2017-08-10 21:39:59 5564 3

原创 Ajax获取图片的两种方式

在Web项目中，我们可能遇到需要利用Ajax来获取图片的情况。因为客户端处理的是图片文件的二进制流，所以可利用Blob和File API来将图片转为URL，赋值给img的src属性来解决这个问题。本文总结Ajax获取图片的两种方式，即针对XMLHttpRequest Level 1和Level 2给出解决方案。

2017-08-10 21:00:24 10584

翻译自己动手搭建React开发环境之五Conclusion

导读：React作为近年来大红大紫的view层框架，以其高效、灵活性、强大的社区环境而受到广泛关注。但react也不是直接就能拿来使用的，它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App，但有时候也想知道到底它是怎么配置的，所以自己动手搭建React环境也是很必要的学习过程。本系列分为5章，翻译自codecademy关于Reac

2017-07-20 10:11:04 545

翻译自己动手搭建React开发环境之四HTMLWebpackPlugin

导读：React作为近年来大红大紫的view层框架，以其高效、灵活性、强大的社区环境而受到广泛关注。但react也不是直接就能拿来使用的，它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App，但有时候也想知道到底它是怎么配置的，所以自己动手搭建React环境也是很必要的学习过程。本系列分为5章，翻译自codecademy关于Reac

2017-07-20 09:07:13 2092

翻译自己动手搭建React开发环境之三Webpack

导读：React作为近年来大红大紫的view层框架，以其高效、灵活性、强大的社区环境而受到广泛关注。但react也不是直接就能拿来使用的，它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App ，但有时候也想知道到底它是怎么配置的，所以自己动手搭建React环境也是很必要的学习过程。本系列分为5章，翻译自codecademy关于Rea

2017-07-19 09:30:09 884

翻译自己动手搭建React开发环境之二Babel

导读：React作为近年来大红大紫的view层框架，以其高效、灵活性、强大的社区环境而受到广泛关注。但React也不是直接就能拿来使用的，它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App ，但有时候也想知道到底它是怎么配置的，所以自己动手搭建React环境也是很必要的学习过程。本系列分为5章，本文章为第二篇……

2017-07-17 20:29:15 662

翻译自己动手搭建React开发环境之一React和ReactDOM

导读：React作为近年来大红大紫的view层框架，以其高效、灵活性、强大的社区环境而受到广泛关注。但React也不是直接就能拿来使用的，它必须通过配置相应环境才能更好的开发项目。虽然你可以使用官方推荐的构建React环境方式Create React App ，但有时候也想知道到底它是怎么配置的，所以自己动手搭建React环境也是很到的学习过程。本系列分为5篇，本文是第一篇。

2017-07-17 12:25:46 5887

转载 Promise使用手册

本篇以Promise为核心, 逐步展开, 最终分析process.nextTick , promise.then , setTimeout , setImmediate 它们的异步机制.导读Promise问世已久, 其科普类文章亦不计其数. 遂本篇初衷不为科普, 只为能够温故而知新.比如说, catch能捕获所有的错误吗? 为什么有些时候会抛出”Uncaught

2017-07-15 10:00:53 878

原创 CSS朝花夕拾之块级格式上下文BFC

块级格式上下文（blocking format context，缩写为BFC）是个老生常谈的话题，前端面试时十有八九会问到。以前并不了解它，后来看了一些文章稍微理解了，但是随后就忘了，所以最近又重新看这个东西，把它记录在博客里加深记忆。本文依托W3C文档，讲解了块级格式上下文的原理、布局规则和应用，推荐了几篇关于此的文章，希望对大家有所帮助。

2017-07-02 21:46:51 368

原创 CSS朝花夕拾之两栏和三栏布局

Web前端面试中遇到CSS的问题，难免会提到两栏或三栏布局，之前这是笔者的痛处，看过很多关于布局的文章，但总感觉不得其精要，现在秋招来临，不管怎么样，都要把之前遗留下的问题解决一下，于是有了这篇文章，与君共勉。两栏布局和三栏布局最常见的就是左边或右边或两边都是固定的宽度，而中间栏自适应，下面就着重讲这方面的布局。

2017-07-02 12:53:27 487

原创 JS实现HTML实体与字符的相互转换（一）

最近在用Node.js获取网页时发现返回的网页中有一些实体字符，比如中文应该是“用户名”，结果返回的是用户名，读起来相当不爽，于是网上查询能将html实体字符转化为相应字符的方法，找了一些感觉不对症（不知道我是不是没找对地方）。不多幸好知道了实体字符也是相应Unicode字符的再包装，于是自己写了js代码来完成二者之间的相互转换。不过还是要澄清一下，本文主要

2017-06-02 22:58:06 19131 1

原创表单文本域<textarea>Tab键不能缩进文字的解决方案

textarea文本域可以实现多行输入。但在实际敲文本想缩进时，使用Tab键得不到想要的缩进效果。Tab键默认的功能是切换控件，但此时我们不需要。用户想要的功能不能实现，这样的用户体验是不能接受的，这也是我们不能容忍的。所以，我针对这一问题提出一个简单的解决方法。

2017-05-22 21:12:32 5744

原创 Node.js http.request()返回响应出现乱码的解决方案

Node.js http.request() 响应乱码

2017-05-22 20:05:11 13288 3

原创 mysql出现中文乱码或不能输入中文问题的Windows或Linux系统解决方法

相信MySQL新手在刚接触MySQL时总会遇到中文乱码的问题，如ERROR 1366 (HY000): Incorrect string value。作为新手，我也遇到过。不过以前没系统地找过解决方法，最近因为Linux要安装MySQL，我遇到了在MySQL命令行中中文不能输入和中文乱码的问题，就查找解决方法解决，顺带把windows系统中文乱码的问题给解决了。下面我将分别介绍如何在Windows

2016-08-27 21:07:57 7713

风萧萧梦潇的博客