css中使用 object-fit 来控制可替换元素的样式
偷懒很久了，昨天好不容易花点时间做了一下 css 的一些测验，发现自己居然连 object-fit 都不会用，连 replaced element 都没听过，居然也能测出 expert 水平…但有进步总是比什么都不做强一些。 object-fit 是用于控制可替换元素(replaced element )在容器中如何显示的属性 可替换元素 replaced element…
Posted onstarcss selector 选择器
写了快两年 styled-components 的本宝宝，压根就用不到什么选择器了。可想而知那帮搞出 css-in-js 的工程师肯定都是不喜欢没逻辑的 css。 我来复习复习，css 选择器是面试大概率会问的问题吧 😝 基本选择器 类型 选择器 例子 element element e.g. div id # class . e.g. .btn…
Posted onstargit重写历史
前几天在家写公司的代码，自己电脑上 git 全局设置用的是私人邮箱，太懒了懒得改，直接 commit 以后被公司的 bot check 到是非公司邮箱提交的代码，PR 都不让开，真是很严格呢，气人 😤 以前只知道怎么修改单个 commit 的信息，而且只知道用 git commit --amend 修改最新提交的 commit。学习了一下怎么修改多个 commit…
Posted onstar- star
css长度单位及font-size
长度单位 字体相对长度 em - 通常 1em = 16px；但如果父元素设置了 font-size，则 1em=1 倍父元素的字体大小 rem - 根元素的 font-size，根元素通常为 <html> ch - 0 字的宽度 ex - x 小写字母的高度 viewport 百分比长度 vh 1%的视窗高度 vw 1%的视窗宽度 vmax - vm 和 vh 中较大值 vmin - vm…
Posted onstargit bisect 二分法查找问题commit
前几天刚看到一个 git command: git bisect ，万万没想到居然这么快就用上了，真是尴尬。更尴尬的是，debug 了半天最后发现是自己的 commit 出问题 😆 在软件开发的过程中，由于测试覆盖率低，没时间回归测试等等原因，经常会遇到一种情况就是，某个 feature 明明前几天还好好的，不知道从什么时候开始就出 Bug 了……然后 hmm…
Posted onstar取模(mod)和取余(rem) 在数学和计算机中的不同
(前几天心情差到爆:(，今天终于心情明媚可以填坑了) 我第一次知道不同语言对于 mod 的不同实现会导致结果不同，真是黑人问号…然后又了解到，在计算机界，取模和取余大都是混为一谈的… 了解取模和取余问题的起因是，想要实现类似循环链表中 tail.next === head , head.prev === tail 的类似功能，由于平时都会用一些 ramda, lodash 之类的 util…
Posted onstar关于eventListener的那些事
If multiple identical EventListeners are registered on the same EventTarget with the same parameters, the duplicate instances are discarded. They do not cause the EventListener to be called…
Posted onstar如何延迟加载script(defer, async)
<script> 的下载和执行都会阻塞页面渲染，因此大多数情况下，我们都把 <script> 放在 <body> 的底部，渲染完前面的 html 内容之后才加载和执行 JS。 然而有时由于某些限制，只把某些 <script> 放在 <head> 里，但又不希望页面渲染被阻塞，这种情况下，可以使用 async 或 defer 属性来延迟加载、渲染。 一张图胜过千言万语 <script…
Posted onstar使用fixup和auto squash修改git commit
在写程序的过程中，经常遇到一些刚提交了 commit 就发现有个错别字这种尴尬的情况，我以前的做法是 git reset HEAD~1 将 HEAD 指向提交之前的一个 commit 然后改完再重新提交 🤦 除此之外，如果是最新的 commit 中的错误需要修改，其实还可以直接修改，之后使用 git add FILE_TO_CHANGE git comit --amend…
Posted onstar开发时如何使用本地npm包作为依赖
这个问题我已经遇到两次了。 第一次是我发布了 react-aplayer （第一次发布 npm 包，好紧张）,然后有人提 issue 说 npm install 后用不了。我自己在本地开发 demo 的时候是直接引用 ./src ，没有试过真的当做一个 package 来使用，所以我用的时候是没问题的 😅 第二次就是我们有一个把所有 API 包起来的 package…
Posted onstarObject.is()
前几天写测试的时候，有个地方需要检查 Object 的 reference 是否改变，jest 中的 toEqual(value) 是 deep compare，不适用于 reference，于是查看了一下应该使用 toBe(value) 。 toBe just checks that a value is what you expect. It uses Object.is to…
Posted onstarglobal .gitignore
为什么需要全局 .gitignore 通常来说，在 repo 中提交跟 IDE 相关的文件并非最佳实践，所以大多数时候会在 .gitignore 中加入 IDE 相关的文件 pattern，然而市面上的 IDE 很多，不同程序员对 IDE 也有着自己的偏好，似乎不太可能把市面上所有的 IDE 都列出来。 除此之外，可能还有一些其他情况下，希望在本地 ignore…
Posted onstarWebStorm的一些小技巧
从我最开始学 js，就一直用的是 webstorm，因为很穷，一直都是用 lanyu 的盗版……我也很想买正版啊，但真的是太贵了。去年年底终于用上了正版了（用学校的邮箱注册的学生版）🤦♀️ 因为比较懒，一直不想背各种快捷键，所以一直忍受着 IDE 的蜗牛速度，也没有换 sublime vsc…
Posted onstar以太坊智能合约应用初体验
我刚来香港那年（2012 年）上了 Pf.Lau 的 enterpreneur 课知道了比特币，那个时候好像才 CNY700 多块钱一枚，13 年的炒的最火的时候大概涨到了 6000，如今五年多过去，比特币最高已经十几万人民币一枚了，反正我是没挣到钱:( ， 1…
Posted onstarHTML DOM Element - image
忘了是去年还是前年写了一个 urbtix 抢演唱会票的 chrome 小插件 https://github.com/sabrinaluo/urbtix-helper （每次都进不去网站，一次都没抢到 😂），逻辑其实很简单，就是当用户设置了 event_id perfomence_id seat_type ticket_amount…
Posted onstar神奇的toLocaleString, Intl.NumberFormat
一如之前提到的，由于我的工作中会接触到很多 internationalization 的内容，对于货币、数字等的 foatmatting 需要特别注意。在我看到这条问题 之前，并不知道 toLocaleString 的用法和作用。我们自己的 codebase 中，关于国际化的部分是写了自己的 service 来实现不同国家的货币格式，经常都有各种 Bug…
Posted onstarangular指令什么情况下只能有一个根元素(root element)
好久么有记录什么有用的知识了，总是猴子掰玉米似的学点忘点:( 问题 在写自定义指令(custom directive)的时候，经常遇到下面这个错误： 但有时候又发现别人写的指令超过一个根元素，却并没有报错，真是非常的 confusing🤔 文档 官访文档在 directive 一节是找不到任何和 replace 有关的东西，后来是在\$compile…
Posted onstarAngular directive指令相关的scope问题(= @ & ?)
老生常谈之 isolated scope 每次说到 directive, isolated scope 总是要被提起的…官方的例子已经很好的说明了为什么我们需要 isolated scope。当没有 isolated scope 的时候，directive 依赖于 controller 的 scope，这样每次使用 directive，都需要创建新的 controller。 Isolated…
Posted onstar用webpack打包react组件
吐槽 好多人都吐槽 Webpack 配置太复杂了，然而 1.x 我都还没学会现在都已经 3.x 了，前段圈真的好难混啊，真是必须活到老学到老啊… 前段时间闲得无聊看到个播放器叫 APlayer ，就想着包起来做个 Vue 或者 React 能用的吧，练练手……然后由于我的拖延症，写了好久，就在我写完 Vue 版本的第二天，还没 push，就发现 MD…
Posted onstar尾逗号(Trailing Comma)的意义
以前在网上看别人写的代码，有时候会看到这样，数组的最后一个元素后面多一个逗号： 作为一个懒癌晚期患者，觉得要多加一个逗号，真是好麻烦！那是 naive 的我，当然还不知道有版本控制 diff 这种高级工具，还停留在复制粘贴文件夹的人工版本控制低级阶段… 后来看到几家大厂的代码规范 , 中都有相应的规范。Airbnb 的 JS 代码规范是非常火的，然而最开始的时候我个人比较喜欢的是 Google…
Posted onstar关于本地化的一些技巧
在香港工作总是能接触到各种“本地化”的需求，大多数网站至少都会有中英文两个版本，有的还会分简体中文和繁体中文。而在实现本地化的过程中，由于英文与中文的文法、语序等差异，会有很多情况需要处理。 i18n & i10n 一直以来我都混淆使用这两个 term，其中 i18n 是国际化，主要用于世界通用内容的翻译， 使产品无需做大的改变就能够适应不同的语言和地区的需要 ，包括时间、日期、货币等；而 i…
Posted onstar一点感悟
不知道为什么，我是比较喜欢 JS 这种脑残语言的，并且也不想将其他语言用在工作中，比如 PHP、PYTHON、JAVA 之类的。 其实到最后肯定所有语言都是相通的，比如每种语言都会有自己的 lodash 、 npm 、 package.json ，所以当精通一种语言之后是能对其他语言的人指点江山的。我之前的一个同事新手写 python，库也不会用也不知道去哪里下载，我对 Python…
Posted onstaropenvpn在mac下的一点问题
今天才发现自从买了新 Mac 之后根本没有用新电脑写过什么东西，导致我今天居然还要 npm install 才能跑起来 HEXO，真是不知道有多懒。 作为一个在墙外居住了好几年的人，只知道用 Unblock youku 翻墙进墙内去看视频，根本不知道在墙内怎么翻出来。早些年的时候，翻到墙外是很简单的，免费的软件也很多，好像也不用 VPN 啥，host 文件里加几个 IP 啥的就能上 Google…
Posted onstar一些js小技巧
一直以为这篇已经发过了，结果前两天搜的时候发现搜不到。一直扔在草稿里，今天整理一下之前和最近学到的一些 JS 小技巧 利用位运算取整 利用位运算，与、或、异或、左右移位， & | ^ >> >>> << ，舍去小数点后的数字 ， jsPerf 按位 非非 运算也是可以的，所以你也可以用 呻吟号 把代码写成这样 ~~a…
Posted onstarCSS的几个小技巧：pointer-events, transform垂直居中,nth-child
千万不要用没有自动保存功能的编辑器！千万不要用没有自动保存功能的编辑器！千万不要用没有自动保存功能的编辑器！:( 好久没有写什么东西了，可能是因为最近一直做的事情都是在重复搬砖，没有什么新鲜的东西…更可能是因为太懒了… 总结一下前段时间学到的几个 css 小技巧，以免过几天又忘记了 CSS 控制超链接是否可点击：pointer-event 一开始我听说 CSS 可以 disable…
Posted onstarJenkins集成github pull request插件
前不久给 bootstrap 提了个 issue ，然后被他们的高科技自动回复机器人吓萌比了。 有印象之前给，某些 repo 提 PR 的时候，如果是用的 Travis CI，也会有相应的提示该 PR 是否 pass 了所有 test case。 如果使用 cloud based CI，很多功能都已经整合了，所以可以很方便的使用。如上 travis 的例子，只要在 travis…
Posted onstar微博开放平台的Basic Auth和OAuth2.0认证
这篇文章不是讲各种认证方式是怎么实现的，只是简单的介绍如何与微博进行整合。 微博开放平台允许使用 api 来开发一些与微博相关的应用，微博提供 Basic Auth 和 OAuth2.0 两种认证方式，其中 Basic Auth 只能用于测试环境。 Basic Auth 跟名字一样，就是很基本很简单。其本质是使用 username:password 进行 base64 加密之后得到一个 token…
Posted onstar利用travis进行heroku部署
好久么有写东西了，总感觉一直忙的跟狗一样，身心俱疲，但是又不知道到底在忙什么。 最近实践了一下利用 travis 部署到 heroku 的流程，又莫名其妙的尝试了新的编辑器 atom，安装了 markdown-preview-plus 插件，当然要来写点东西试一试， 也不知道英文的 linux 下到底是什么问题，webstorm 和 sublime…
Posted onstar- star
如何通过Git钩子自动部署(Push to Deploy)
看了好多讲通过 git 钩子自动部署的，大多讲的绕来绕去乱七八糟思路一点也不清晰… 做了一晚上实验之后大概明白了是怎么工作的。 裸仓库（bare） 裸仓库跟我们平时 git clone 得到的仓库不太一样，裸仓库其实相当于通过克隆来的仓库里的 .git 文件夹，整个裸仓库中只有 git 索引（index）， 并没有任何代码相关的东西 。要实现 Push to Deploy…
Posted onstar结合使用Babel Mocha Istanbul进行ES6代码测试和覆盖率测试
题外话： 一直以为 mocha 读作“抹茶”并且一直这么读了很久，直到最近看了一个 mocha 的教学视频，才知道这是摩卡咖啡的摩卡…而抹茶的抹茶应该是 matcha… 在还没有 babel 的时候，一切都很简单，基础的问题就先不讨论了，这里主要记录一下 Babel 转码和 Istanbul 测覆盖率的一些坑。 基本设置 通常我们会有好几个文件夹，例如 src 用来存放源文件，也就是包含 es…
Posted onstar箭头函数的作用域和this
JS 里的作用域和 this 一直是一件令人头疼的事情，以前接触的不太多，毕竟面向过程编程的我基本上都不会使用“类”这个概念。 自从开始学习 ES6，很长一段时间都认为箭头函数(Arrow Function) 就是给懒人用的 简写的匿名函数 而已。后来看到有人挑战阮一峰老师 《ECMAScript 6 入门》 中关于箭头函数 this…
Posted onstarAWS EC2 SSH访问 & mongodb 安装
环境：Ubuntu SSH 连接 EC2 windows 下通常用 putty ubuntu 下先打个命令 ssh 看看能否识别命令，如果能就方便很多 要连接 EC2 通常都会有一个 .pem 的 私钥 文件，另外还会有一个 Public IP 首先设置权限（并不知道这个有什么用，chmod 400 使得文件只能被该文件的拥有者读取） 其中 username 默认如下： OS username…
Posted onstarAWS API Gateway Mapping Template 获取IP, header等
API Gateway 暂时没有详细的中文文档，翻译无能的我实在不知道 Mapping Template 应该翻译成什么比较好。 适用场景 在配合 API Gateway 和 Lambda 来搭建 RESTful API 时，Lambda 获取的 payload 并非通常服务器端获取的一个 request 对象，lambda 获取到的 payload 并 不包含 request header…
Posted onstarCookie在前端和后端的设置
http 协议什么的，不知道跟通信有没有关系…作为一个通信科班出身的硬 汉 妹，对各种协议基本上只能说出名字，别的一窍不通=，= 所以当我知道 cookie 原来是在 header 里的时候，当时我就震惊了… 在服务器端，各种框架都已经包装好了方便设置 cookie 的方法，比如 nodejs 的 express，php 的 codeignitor、laravel（我居然都被迫写过 php…
Posted onstarjQuery中利用JSONP进行跨域GET请求
每次遇到跨域的问题真是！@#￥% 我对 JSONP 的一些浅显的理解就是，有时候会看到类似 http://xxx.xx.com/?callback=xxx 这样的请求（ callback= 也可能是 jsonp= 也可能是 jsonpcallback= ，这个取决于服务器端是怎么实现 jsonp…
Posted onstar谷歌地图 Google Map API 初体验
一直都想把自己去过的地方做个地图标记，然而现在能找到的各种现成的地图产品都不太喜欢，所以就用谷歌地图自己写了一个。 总结以下常见的问题和坑： 自动缩放(auto zoom) 使用场景大多数时候是有很多 marker，想要全部显示这些 marker，同时 zoom 当然越大越清晰。 首先需要一个 marker 的位置列表 markerList ，单个元素长这样 {lat:xxx,lng:xxx…
Posted onstargit如何ignore已经track的文件
我也不想中英文混杂的取标题……但我实在翻译无能… _ (:з」∠) _ 基本知识 在 git 中文件有两类，共三种状态： untracked tracked changes not staged for commit changes to be committed 我们都知道，在 .gitignore 文件里添加相应的文件夹或文件就能忽略掉不想被 track 的文件。 但是， .gitignore…
Posted onstarPromise的顺序执行和并行执行
并行和顺序执行的前提当然是，有一堆 promise 等着你去执行…… 通常我们把这“一堆”promise 对象放到一个数组里， [promise1, promise2, promise3, ...] 我们都知道想要让 promise 按顺序执行，那就是一个接一个的 then。然而手写很多 then 太累了，而嵌套的 promise…
Posted onstar对浏览器跨域问题的一些理解
问题宝宝 1 移动应用开发 之前用 Ionic 写 mobile app，移动 app 自然是少不了调用 RESTful API 的数据。 开发的时候用浏览器进行调试，然后 console 里不停的出现下面的提示( Access-Control-Allow-Origin )： 而我当时的解决方法是，在 chrome 装了一个叫 Allow-Control-Allow-Origin…
Posted onstar递归实现按顺序执行Promise
2016-01-24 更新 我还是觉得嵌套多层的 promise 是反模式，不推荐使用，机智的我学会了另一种不嵌套不递归的方法，请看这里： Promise 的顺序执行和并行执行 以下为原文： 之前我一直有个疑问，当我有一堆 promise 的时候，怎么按顺序执行它们呢？ 网上搜到的大多数教程都是建一个数组 array ，把 promise 对象放到数组里，然后数组中的 promise…
Posted onstar对generator和yield的一些理解
于是也是入了 ES6 的坑，为什么只有 babel 这种 ES6 转 ES5 的工具，而没有 ES5 转 ES6 的工具呢？可能有，但是我不知道。如果有的话，就能把 5 转成 6，起码看起来逼格高了一大截，也能让我这种还不习惯 ES6 的小白假装会写 ES6… 简单的看了一下相关的概念，觉得还不太理解…就好像最开始看 原型链 一样，花了一年多才慢慢理解继承啊什么的，但 constructor…
Posted onstar对JS类和继承的一些理解
本文只总结最常用的实现方法，不具体讨论各种实现方法的优缺点（这些具体可以看 《JavaScript 高级程序设计》 ）。 直到 ES5，JS 也还是一个没有类的语言，虽然 ES6 中可以使用 class 关键字，但据说也只是语法糖。(不知道好不好吃 ԅ(¯﹃¯ԅ)) 类的实现 类的两个基本元素就是 属性 和 方法 。 JS…
Posted onstar利用travis自动部署hexo搭建在github的博客
这篇应该属于不务正业系列… 自从知道了持续集成（Continuous Integration）这个概念之后感觉开启了新世界的大门。 Travis 是一套持续集成的服务器解决方案，也就是等于把 jenkins 能够实现的都放在了云端，不用自己搭服务器安装了，懒人的福音～ 最初知道 travis 是因为总在 github 商看到这种小图标，虽然不知道是什么东东，但是觉得逼格特别高… 关于 Hexo…
Posted onstargit merge commits 如何合并多个提交为一个
因为我是那种经常改一个错别字就忙着要提交一次的人…所以总是会产生很多无意义的提交，于是合并多个提交为一个就成了我的刚性需求。 关于合并多个提交，主要是要搞清楚 rebase 的用法。 查看提交历史，git log 首先你要知道自己想合并的是哪几个提交，可以使用 git log 命令来查看提交历史，假如最近 4 条历史如下： 历史记录是按照时间排序的，时间近的排在前面。 git rebase…
Posted onstargit merge repo 如何合并两个仓库
为什么我每天都会有一些奇奇怪怪的需求… 我之前在 github 上用 hexo 搭了一个静态博客，每次 hexo deploy 的时候，就会在 gh-pages 分支提交一个 commit。但是由于 hexo-deployer-git 本身的逻辑是，每次都是强推 push -f ，于是每当我换电脑（比如从家里换到公司里）的时候，我的 commit…
Posted onstar对Promise中的resolve，reject，catch的理解
对 promise 这个概念之前已经有了一些浅显的理解， 相关文章->戳这里 ，最近又有了一些新的理解。 .then()的时候到底是在 then 什么… 首先要理解…Promise 是一个对象，有 then()方法的对象 then()的入参是一个函数，通常在 promise 链中，入参是 一个返回 promise 的函数 ，这句话好像有点拗口，就是说入参是一个函数，这个函数会 return…
Posted onstarJS变量提升(Hoisting)
写了无数 JS 也依旧没听过变量提升… 变量提升(Hoisting)这个概念，我第一次见到是在万人膜拜的 Airbnb JS 代码风格 中见到。看完这一节大概明白是在说什么，然后觉得非常奇怪，这个概念平时写代码什么情况下用的到呢？ 我写了这么久 JS，从来也不会先用变量后定义的呀，而且别的语言好像根本没有这个概念，难怪我从来没有遇到相关问题，难怪我没听过这个概念。难怪写强类型语言的各大神都是 JS…
Posted onstar对JS闭包(Closure)的一些理解
昨天无聊在 github 上看代码，看到如下片段，反正看不太懂这是在干啥，但这就是传说中的闭包了… 以上来自目测是个阿里女神的 repo: utilx 很久之前就听过 闭包 这个概念，看了一些相关的资料，依旧无法明白到底是个什么东东。各种作用域 scope，看得我头都大了。 _ (:з」∠)…
Posted onstar对module.exports和exports的一些理解
可能是有史以来最简单通俗易懂的有关 Module.exports 和 exports 区别的文章了。 module.exports 和 exports 的区别就是 var a={}; var b=a; ，a 和 b 的区别 看起来木有什么太大区别，但实际用起来的时候却又有区别，这是为啥呢，请听我细细道来 关于 Module.exports 和 exports…
Posted onstarAWS API Gateway与AWS Lambda的整合及开发/测试/生产环境的设置
本文 不是 介绍 AWS API Gateway 和 AWS Lambda 的基本用法的…=(:з」∠) _ 简单的来说，有了 AWS 的 API Gateway 和 Lambda 这两样东东，再加一个数据库（ 最好当然是用 AWS DynamoDB 啦，或者 AWS EC2 上装 mysql，不用 AWS 也可以，但是访问速度可能会有一定影响，毕竟如果都用 AWS…
Posted onstarAWS DynamoDB的本地安装及环境配置
DynamoDB 是亚马逊 AWS 云服务提供的一个 NoSQL 的数据库… 在这里我必须安利一下 Amazon 家的服务真是业界良心：前不久，可能是因为我自己蠢，英文不好没看懂免费用一年的各种限制，也不知道写了什么奇怪的东东用自己的账号测试 dynamoDB…
Posted onstarJS注释中的感叹号是干什么用的/*! */
前几天看了一个帖子 我招不到想要的程序员 ，里面有一点是说 非极端情况下，一本以下的不要 。本来学历这种事情大家都无所谓，毕竟我所认识的大多数都是 985、211 的本硕博。只有当进入了另一个不同的世界，才觉得学历还挺重要的… 我的 JS 基本都是靠自学，我的大神同学们都是搞后端强类型语言的，所以我只能上网搜搜，买点书看看，加几个参差不齐的 QQ…
Posted onstarGitHub Page如何绑定域名
本文假设你已经在 github 建立了一个 yourname.github.io 的网站，为了看起来逼格更高，更好记，更 professional，所以要绑定域名？！ 我本来的 github page 是 sabrinaluo.github.io ，花了一百多大洋把这个域名变成 sabrinaluo.com ，github.io 到.com，为了省 6 个字符，居然要花一百多大洋 QAQ…
Posted onstarX-WSSE验证中关于SHA1编码方式的一些坑
不知道为什么，关于 X-WSSE 验证的中文资料很少，英文资料也不是很多，能搜到的资料年代都非常久远，最早可追溯到 2003 年 ，可能这种验证方式太古老而且存在什么弊端，所以在随后的很多年里人们发现、发明了其他更常用的验证方式？ 关于 HTTP 的各种验证方式我其实一种都不知道…X-WSSE 这一种奇怪的方式是我在整合 Emarsys 的 API 时了解到的。由于自身比较懒，就到 Github…
Posted onstar版本控制及git常用基本命令
（此文章适合听说过 git，大概知道 git 是什么东东，但是又不会 git 命令的童鞋阅读。 时间充裕的童鞋可以到 codecademy 跟着教程一步步走） Git 是一个分布式的版本管理( Version Control…
Posted onstar我所理解的Promise
异步模式 （嫌我话多的可以直接看分割线之后的部分…） 以前高中的时候自己捣腾博客，一直也就只会用 JQuery 写点按钮事件什么的，连表单提交都没写过，后来误打误撞做了前端码农旧觉得 JS 的异步模式实在是太坑爹，当你搞清楚异步回调的时候，又会发现 回调地狱(Callback Hell…
Posted onstar