Allen
# 04. Counting the Values (Part 1) ## The JavaScript Simulation Sentient beings called “humans” use special machines called “computers” to simulate my JavaScript universe.  This means there are...
# 01. Mental Models ## What’s a Mental Model? ``` let a = 10; let b = a; a = 0; ``` The answer is a being 0 and b...
# 背景 最近写项目的时候，需要将webpack打包后的静态文件压缩发送给后端传到服务器上，由于每次打包压缩比较机械，所以想到写个shell脚本来自动化。 ## 问题 但是在写shell脚本时遇到一个问题：需要判断目录下是否存在.zip文件？ ## 方法一（无效）： 刚开始我查资料，使用了if [ -f *.zip ]，用-f和通配符来判断是否有.zip的文件存在，然而运行结果一直报错“unexpected operator”，因此在-f下，后面是不能使用通配符的。 ## 方法二（无效）： 后来，我又想了一个办法，if [ -n “‘ls *.zip'” ]，这句话的意思是，如果ls命令执行后有得到内容，则是真，其中-n表示后面的内容不是空值时为真。这句话是可以用，可以判断文件存在在目录下，但是，这是出现了个问题，如果目录下没有.zip的文件，就会报错“No such file or directory”，于是我放弃了这个方法。 ## 方法三（管用！）： 最后一个看了一个[博客](http://www.tonitech.com/71.html)里方法，使用 if...
 # 背景 最近项目结束，准备优化一下webpack，公司内部将打包工具单独抽出来作为npm包引入，既然要优化打包，必然涉及到要本地化调试npm包，下面介绍一下正确的✅调试姿势。 # 解决方案 假设有一个已经编写好的本地node包test-npm-util包（github上的包同理）和一个测试该包的项目my-project在同一个文件夹下project下，有以下两种方式可以在my-project项目中测试本地的allen-npm-util包 ``` |-- project |-- my-project | -- package.json |-- test-npm-util ``` ## 使用相对路径安装test-npm-util测试 进入项目目录，按照相对路径找到test-npm-util包，npm install直接安装。 ``` cd my-project npm install ../test-npm-util ``` 然后进入my-project中的node_modules文件夹检查是否安装成功，一般情况下只要路径正确，node包编写正确，都会安装成功，这样就可以在my-project中使用test-npm-util。...
 # 背景 之前做了个在线的分享平台，但是使用的过程有些繁琐，故想起使用shell脚本将整个过程进行自动化，因为是第一次写shell脚本，所以在做的过程中遇到了一些问题，并且这些问题只是在MacOS下才有，shell脚本原生的Linux环境并没有这么多问题，如果有同学在Mac下写shell脚本遇到了和我同样的问题，可以参考一下。 # 问题一：-i参数的问题 问题描述：sed编辑命令：`sed -i 's/a/b/g' test.txt` 报错：`sed: 1: "test.txt": undefined label 'est.txt'` 解决方案：`sed -i '' 's/a/b/g' test.txt` 在`-i`后面加上一对`''` 原因：-i参数是强制替换原有文件，但是mac强制要求备份，否则报错，这个在Mac上系统会有问题，否则-i参数无法使用，请注意。 # 问题二：匹配a追加内容问题 问题描述：sed追加命令:`sed -i '' "/a/a\xxx" test.txt`匹配到a字符后追加xxx内容...
 # 背景 无意中看到一篇讲JavaScript中super关键字不错的文章，对文章进行翻译，仅供学习。 **注：本人翻译水平有限，如果有错误，欢迎指正。** 原文地址:[What is super() in JavaScript?](https://css-tricks.com/what-is-super-in-javascript/) 原文作者:[Bailey Jones](https://css-tricks.com/author/baileyjones/) 译文作者:[Allen Gong](https://allengkc.github.io/) # JavaScript中的super()是什么含义？（译文） 当你看到一些JavaScript代码在调用`super()`时，其中到底发生了什么？在子类中，你通过使用`super()`来调用父类的构造函数,调用`super.`来访问父类的方法。这篇文章假设你至少对构造函数，子类父类这些概念有了基本的认识，如果你没有的话，你可能需要先阅读一下Mozilla的[适合初学者的JavaScript面向对象](https://developer.mozilla.org/zh-CN/docs/Learn/JavaScript/Objects/Object-oriented_JS)文章。 Super不是JavaScript所特有的——很多编程语言，包括Java和Python，都有`super()`的关键字，它可以提供对父类的引用。与Java和Python不用，JavaScript不是以class模型构建的，取而代之的它是沿用JavaScript的原型继承模型的方式去实现与class模型相一致的行为特征。 让我们多了解一点并且看一些例子。 首先，以下对classes的定义，引用自Mozilla的官方文档： > ECMAScript 2015 中引入的 JavaScript 类实质上是 JavaScript 现有的基于原型的继承的语法糖。类语法不会为JavaScript引入新的面向对象的继承模型。 下面是一个简单的子类继承父类的例子用来说明上面的引用的具体含义: [Example...
 改编自《成都》 让我掉下眼泪的 不止UI的要求 让我夜夜加班的 还有交互的愁 代码还要写多久 地铁还有没有 让我感到为难的 是产品的需求 时间总是很紧凑 会议还要开多久 旧的问题还没修 又来了新的需求 在每个上线的夜晚里 我从未忘记你 Bug 修不掉的 只有你 和我在代码的世界走一走 直到所有的Bug修掉了也不停留 既要完成业务要求 还要努力成为大牛 码农的路要走多久 何时才能走到尽头
 # 背景 一直以来，我主要的业务线都是活动相关，因此活动页做的相对比较多，大家都知道活动页的特点是以图为主，按钮文字为辅，由于都是在移动端H5页面，而我经常碰到的问题就是整个页面都是图片，几乎没有文字，因此如何将图片压缩到最小，提升页面速度，节省带宽是至关重要的。带着这个疑问，无意中搜到一篇关于图片压缩的文章，其中提到之前没有接触过的一种图片格式——webP。这让我提起了兴趣，该文章讲到这是google提出的一种新的图片格式，能大幅度降低图片的大小，抱着试一试的态度，我决定研究一下这个神秘的webP究竟为何方神圣。 # what is webP？ [webP](https://zh.wikipedia.org/zh-cn/WebP)（发音weppy），根据维基百科的结果，是一种同时提供了有损压缩与无损压缩（可逆压缩）的图片文件格式，派生自视频编码格式VP8，被认为是WebM多媒体格式的姊妹项目，是由Google在购买On2 Technologies后发展出来，以BSD授权条款发布。根据Google较早的测试，WebP的无损压缩比网络上找到的PNG档少了45％的文件大小，即使这些PNG档在使用pngcrush和PNGOUT处理过，WebP还是可以减少28％的文件大小。 以上是官方对webP的介绍，详情可以参考[webP官方主页](https://developers.google.com/speed/webp/)。但这样的介绍未免枯燥乏味，根据我自己的理解，简单概括webP：一个体积小，但是还不损失精度的图片文件格式，和它的兄弟png，jpg相比，体积小很多哦~并且还能支持无损压缩和有损压缩，在这样的情况下，还能保持原先高精度，实乃绝佳的图片压缩解决方案。 So, why shall we use it？ # why webP？ 通过以上对webP的简单介绍，我们发现了原来除了jpg，png还有一个如此有优势叫webP的小婊砸，那我们为什么要使用webP? ### webP的优势   这里列举一个简单的测试：对比 PNG 原图、PNG 无损压缩、PNG 转...
 # 背景 一直对webpack的打包流程很感兴趣，但是无奈官网文档实在太多，搜出来的大部分文章要么偏理论要么纯粹讲过程不讲原理，最近终于找到一篇入门文章，文章对于初学者讲的很清晰，但是由于是英文的，而且我没有找到这篇文章对应的中文翻译版，所以本文主要是对那篇文章进行翻译，介绍一下webpack2的入门知识。 **注：本人翻译水平有限，如果有错误，欢迎指正。** 原文地址:[A Beginner’s Guide to Webpack 2 and Module Bundling](https://www.sitepoint.com/beginners-guide-to-webpack-2-and-module-bundling/) 原文作者:[Mark Brown](https://www.sitepoint.com/author/mbrown/) 译文作者:[Allen Gong](https://allengkc.github.io/) # webpack2入门手册（译文） > Webpack是一个模块打包机 [Webpack](https://webpack.js.org/)已然成为当前web开发最重要的工具之一。首先它是一个Javascript的打包工具，但同时他也能打包包括HTML，CSS，甚至是图片等形式的资源。它能更好的控制你正在编写的App的HTTP请求，并且允许你去使用更多的资源（如Jade，Sass以及ES6）。Webpack同时允许你更容易的从npm获取安装包。 这篇文章主要面向那些对于webpack完全陌生的同学，内容将包括初始安装和配置，模块，模块加载器，插件，代码拆分以及模块热替换(HMR,hot module replacement)。如果你觉得入门视频比较有用的话，我推荐Glen Maddern的[Webpack初体验](https://www.youtube.com/watch?v=WQue1AN93YU)作为开始学习的起点，会让你理解为什么webpack如此特殊。 为了更加后续的阅读，请确保先安装了Node.js，安装可以参考[Node.js安装教程](https://www.sitepoint.com/quick-tip-multiple-versions-node-nvm/)。你也在Github上下载到对应的[Demo](https://github.com/sitepoint-editors/webpack-demo)。 ## 安装...
 # 背景 前段时间做了个小活动的页面，页面很简单，很快也做完了，当然不知道那天脑子是不是抽了，一个浮动的元素让我很费解，其实之前做业务也遇到过浮动元素，当然清除浮动的方法有很多，什么overflow:hidden啊，clearfix啊都可以，但是突然我意识到，一直用这些属性，可是为什么设置了这些属性，它就能清除浮动呢？带着这个疑问，我决定搞清楚这个里面的门道。 # overflow 关于[overflow](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow?v=example)，MDN的定义是： - The overflow property specifies whether to clip content, render scrollbars, or display overflowing content when it is too large for its block-level...