如何在 Sass 中方便引用祖先选择器July 14, 2020

Sass 提供了双亲选择器 & 用以在嵌套选择器中引用外部的选择器,本文聊聊如何进一步往外引用,为当前选择器添加祖先选择器。

#Sass#CSS

Web Extension Live ReloadingJuly 08, 2020

When developing Chrome extensions or Firefox addons it can be daunting having to keep clicking reload manually. Here is a step-by-step guide on how to implement extension live reloading in the browser.

#Extension

如何测试 React 并发模式安全June 30, 2020

本文聊聊作为库作者如何测试你的库在 React 并发模式下安全。

#React

自定义 Webpack TargetMarch 29, 2020

本文聊聊如何为特殊的环境自定义 Webpack Target 以生成合适的代码。

#Webpack#WebExtension

RxJS Hooks and Suspense: The Ultimate GuideFebruary 25, 2020

In witch I suggested a simple, flexible, testable and performant solution to use RxJS Observable with React hooks and Suspense.

#RxJS#JavaScript#React

TypeScript 集合转换为交集January 16, 2020

本文深入聊聊 TypeScript 的一些高级特性,以实现集合转换为交集为主线。

#TypeScript

TypeScript 函数泛型部分赋值January 11, 2020

本文聊聊如何用柯里化解决 TypeScript 函数泛型部分赋值的问题。

#TypeScript

修复 Deepin Wine 迅雷崩溃November 07, 2019

最近一次 Manjaro 滚动更新后终于第一次踩到坑,Deepin Wine 迅雷突然崩溃了。先给维护者反个馈,几天没有回应后决定自己看看。

#Linux

实现一个有趣的 RxJS OperatorOctober 21, 2019

本文聊聊如何实现一个按 id 切换的 switchMap 。

利用 Webpack API 获取资源清单October 09, 2019

本文聊聊如何利用 Webpack API 获取打包后的资源清单,从而用到进一步的自动化流程中。

#Webpack

配置 SplitChunksPlugin 减少 Webpack 打包体积September 30, 2019

本文聊聊如何根据项目对 SplitChunksPlugin 进行细调从而减少 Webpack 打包体积。

#Webpack

真·复用组件 - React hooks 结合 RxJS 封装异步逻辑September 22, 2019

本文聊聊 React hooks 如何改变旧有的开发思路,以及如何利用 hooks 结合 RxJS 将异步逻辑封装到组件中,从而轻松复用功能更复杂的组件。

#React#RxJS#Hooks

Arch Linux 使用 iptables 管理网络June 30, 2019

出门在外,有时需要流量上网,本文聊聊如何使用 iptables 只允许特定的程序连接网络。

#Linux

轻松写测试:编写 JSX 直接生成 DOM 元素June 24, 2019

在编写测试时有时候我们需要生成大量不同 DOM 元素来进行测试。本文将聊聊几种生成 DOM 元素的方式以及它们的优劣势。

#Testing

搭建 Karma+Mocha+Chai 测试 TypeScript 项目June 18, 2019

测试是软件开发中重要的一环,有了测试项目开发起来大脑负担减少,心里踏实,许多没想到的边界条件也能一一揪出。Karma+Mocha+Chai 是经过时间考验的经典测试组合,具有较高的灵活性,非常值得研究学习。本文将从零开始搭建,同时配合 TypeScript 进行测试。

#Testing#Karma

JavaScript 音频变速保持音调June 06, 2019

在上篇文章中我们提到如何结合 React 为音频显示波形与区间循环播放,但有时候音频说话太快了,我们需要放慢下来听,所以本文我们来看看如何实现音频的变速,以及如何处理变速时声调出现的奇怪变化。

#React#Audio#Waveform#Wavesurfer#SoundTouch#Pitch Stretch

React 音频显示波形与区间循环播放June 01, 2019

最近跟一位台湾的日语老师交流一番后,决定给 Saladict 增加音频控制功能,可以显示发音的波形,支持区间选择、 AB 循环和变速。这里把实现的原理以及踩过的坑分享一下。

#React#Audio#Waveform#Wavesurfer

搭建 Gatsby 博客五:实现草稿模式和上下篇May 13, 2019

本文通过实现草稿模式和上下篇来进一步了解 Gatsby 的 Node APIs。

#Gatsby#Blog

搭建 Gatsby 博客四:兼容 Jekyll 式路径May 05, 2019

前面已经让博客顺利运行起来,接下来就是实现一些个性化的功能。本文通过实现兼容 Jekyll 式路径来了解 Gatsby 的 Node APIs。

#Gatsby#Blog#Jekyll

搭建 Gatsby 博客三:使用 Netlify CMS 管理文章April 26, 2019

一个博客如果不能方便地编写文章将非常打击作文欲望。本文将谈谈如何在 Gatsby 中配置 Netlify CMS 管理文章。

#Gatsby#Blog#Netlify

搭建 Gatsby 博客二:使用 GraphQL 管理资源April 22, 2019

Gatsby 默认使用了 GraphQL 来管理资源。本文将谈谈这么做的优点以及当中的一些坑。

#Gatsby#Blog#GraphQL

搭建 Gatsby 博客一:为什么选 GatsbyApril 18, 2019

Gatsby 是一个 React 建站框架。在使用 Gatsby 搭建了一个小博客后,非常喜欢其管理数据的方式。然而,尽管上手可以非常快,对于刚开始用 Gatsby 的人来说,理解其基本思想是个小门槛。官方提供了非常详细的教程,甚至有点过于基础了,本文面向有 React 基础,没有使用过 Gatsby 和 GraphQL 的读者分享一份笔记。

#Gatsby#Blog

V8 中的快属性November 25, 2018

译自:Fast properties in V8(2017-08-30) 本文我们将解释 V8 内部如何处理 JavaScript 属性(properties)。从 JavaScript 的角度来看属性只有少数的区别。JavaScript 对象通常跟字典(dictionaris…

#Translation#JavaScript

如何文明提交代码September 24, 2018

程序员最烦的几件事:写测试,变量命名,还有填代码提交信息(commit message)。翻几个开源项目遍马上可以回味那作文凑字数的青春时光。 其实 commit message 的作用远不止如此,经过简单的配置便可无痛成为代码提交的文明公民。 Commit Message…

#Git

React 黑魔法之 Portal + SyntheticEvent + iframeJuly 15, 2018

在实现划词扩展的时候,查词面板等模块需要植入到源网页,为了更方便地隔离样式污染,植入的模块均使用了 <iframe> 包装。在前一个 Vue 实现的版本 Saladict 5 中,有几个不太舒服的小小小小地方: <iframe> 内外事件不通。 <iframe> 内外环境不一样,变量不能共用,需要 postMessage 交流。 Vue 组件必须要有一个根元素,且 v-if…

#JavaScript#React

选中鼠标附近的文字June 22, 2018

最近终于抽空给 Saladict 实现了鼠标悬浮取词功能,使用了较为简洁的实现方式,这里分享一下原理以及坑的处理。 初尝试 这个需求其实很早就被人提 issue 了,当时做了一番搜索,最后尝试了 document.caretPositionFromPoint / document.caretRangeFromPoint ,效果不太理想。 如果看 mdn…

#JavaScript#Recommended

深入 React Render Props 模式April 03, 2018

随着 React 的新 Context API 出来,render props 模式再次发挥重要作用。本文将尝试深入理解 render props 的利弊,并结合高阶组件寻找合适的处理方式。 基础 先看官方给出的简单例子: 加个 DataProvider 的简单实现, 这里是将一个返回 React 元素的函数传给 DataProvider 的 props.render,DataProvider…

#React#JavaScript

理解 RxJS :四次元编程February 16, 2018

学习 RxJS 最大的问题是官方造了很多概念,但文档又解释得不太全面和易懂,需要结合阅读各种文章(特别是 Ben Lesh 的,包括视频)。本文试图整体梳理一遍再用另外的角度来介绍,希望能帮助初学者或者对 RxJS 的一些概念比较含糊的使用者。 为什么需要 RxJS RxJS…

#RxJS#JavaScript#Functional

Web 可访问性整理December 08, 2017

定义 可访问性 Accessibility 为障碍用户提供同等用户体验。使障碍用户能对产品感知、理解、定位和交互,并能平等地参与贡献。 可用性 Usability 可用性和用户体验设计(User Experience Design)是为了让目标用户使用产品高效、满意地达到特定目标。 包容性 Inclusion 包容性设计(Inclusive Design)、通用设计(Universal…

#可访问性#Accessibility#语义化

获取选择文本所在的段落和句子December 02, 2017

本文聊聊如何获取选词的上下文。

#JavaScript#Selection

React Native 搭配 MobX 使用心得November 13, 2017

MobX 是一款十分优秀的状态管理库,不但书写简洁还非常高效。当然这是我在使用之后才体会到的,当初试水上车的主要原因是响应式,考虑到可能会更符合 Vue 过来的思考方式。然而其实两者除了响应式以外并没有什么相似之处:joy:。 在使用过程中走了不少弯路,一部分是因为当时扫两眼文档就动手,对 MobX 机制理解得不够;其它原因是 MobX 终究只是一个库,会受限于 React…

#React#React Native#JavaScript#MobX

检测 DOM 结点插入September 20, 2017

闲逛 Github 时碰见一个叫 SentinelJS 的库,声称能检测 DOM 结点的插入,顿时引起了好奇。因为以前无聊时也想过一下,没什么头绪,便不了了之。当时第一反应是该不会用轮询吧(比这粗暴的实现也不是没见过)。但看到 682 bytes (minified + gzipped…

#闲读源码

prototype 与 __proto__ 的爱恨情仇August 12, 2017

经历了上次的《JavaScript This 的六道坎》 发现编故事有点上瘾,而且记忆效果也不错哈哈,今天继续唠叨一下 prototype 与 __proto__ 的爱恨情仇。 先理解两者的一个本质区别,prototype 是函数独有的,是人为设定的;__proto__ 是所有对象都有的,是继承的。 然后来看一个两个神的故事: 首先在 ECMAScript 星球,万物起源于 the…

#Recommended#Understanding JavaScript#闲读规范

巧妙监测元素尺寸变化July 15, 2017

在往下读之前不妨先想一下,你会怎么实现?如何知道元素的尺寸发生变化了? 相信很多人第一反应是 resize 事件,但这个只是 document view 变化才会触发。 然后就是轮询,反复查询值变化了没有。开销不是一般的大,但像这样的库(比如这个七年前的)现在还有人用。 最后便是这个,号称 event based…

#Recommended#Resize#闲读源码#闲读规范

Manacher 马拉车算法July 06, 2017

马拉车算法可以在线性时间复杂度内求出一个字符串的最长回文字串。其核心思想跟 KMP 相似,即反复利用已掌握的情况。 视频推荐看这个,觉得是最清晰易懂的: 整体思路 这个算法的主要思路是维护一个跟原串 str 一样长的数组 lens。lensi 表示以 stri…

#Manacher#算法#Algorithms#回文#Palindrome#字符串#String#Recommended

CSS 属性值计算July 03, 2017

属性值的计算可谓是 CSS 101 。然而入门资料从来都是良莠不齐的,当初从畅销书上得来的一些误解,如今整理笔记的时候才发现。这里就结合规范梳理一遍。 一个属性的值在计算时会经过 4 个阶段 Specified values Computed values Used values Actual values Specified values 这里有 3 种可能,满足一种就可以 计算 cascade…

#CSS#Box Model#Visual Formatting Model#闲读规范

CSS VFM 中易混淆的名词概念May 29, 2017

:warning:第一遍看 CSS2.1 VFM(Visual Formatting Model)是看别人整理的笔记,辅助理解很不错,但是在名词概念上作者跳过了一些或者打乱了顺序,所以现在看回文档时发现当初有一些理解不太正确。于是在这篇文章将这些概念系统整理了一遍。 Element 与 Box 第一个概念是 Element (元素)与 Box (盒子)。用 Element…

#CSS#Box Model#Visual Formatting Model#闲读规范

纯 CSS 实现浮动介绍April 29, 2017

把扩展上传到 Chrome 商店需要在开发者后台填写一系列表单,非常喜欢它对详细介绍的处理,就想着偷师一下。 先上效果,下面是模仿的样子。由于详细介绍一般比设置本身要长,它使用了隐藏、按需显示的方式减少了高度。 看了开发者后台的代码,它是使用 JavaScript 响应鼠标事件并计算高度和显示。作为 CSS 洁癖,我第一反应当然是先考虑用 CSS…

#CSS

定位与拖动 iframeApril 06, 2017

定位 iframe 在写一个划词翻译扩展 Saladict 时,有一个需求:用户选择一段文本之后,会在鼠标附近显示一些元素。 这个初看很简单,监听一个 mouseup 事件,获取 clientX 和 clientY 就行。这也是 Saladict 前几版用的方法。 但这个方法有个缺陷:iframe 里的鼠标事件不会传到父窗口上。 解决方法也很简单,就难在把它们都联系起来。 iframe…

#Recommended#iframe#JavaScript#postMessage#Drag#Extension

Position and Drag iframeApril 06, 2017

Position in iframes I wrote a Chrome extension Saladict, an inline translator, which involved such requirement: When user makes a text selection, something will pop up nearby the cursor. It looks…

#Recommended#iframe#JavaScript#postMessage#Drag#Extension

Get All Images in DOM (including background)March 09, 2017

Quite useful if you are writing an browser extension or something. To get all the images in DOM there are actually three places we are going to look at: <img> element, background-image CSS property…

#Recommended#Image#JavaScript#DOM

获取 DOM 里所有图片(包括背景和iframe)March 09, 2017

在写浏览器扩展什么的时候可能会用上。 获取 DOM 里的图片主要是在这几个地方里面找: <img> 元素, background-image CSS 属性和 <iframe>。 img 如果只想获取 <img> 的图片,有两种方式: 直接获取所有 img 标签: 还可以用 document.images: background-image 获得背景图片需要查看所有 DOM…

#Recommended#Image#JavaScript#DOM

倒腾 Vue Webpack2 单元测试February 19, 2017

vue-cli 提供的官方模板确实好用。但一直用下来手贱毛病又犯了,像穿了别人的内衣,总感觉不舒服。 所以有机会就瞎倒腾了一遍,总算把各个流程摸了一把。这里分享一下配置带覆盖率的单元测试。 文件结构 基本的文件结构。 依赖 根据需要增删 入口 先从 package.json 开始。跟官方的一致。设置 BABEL_ENV 可以在测试的时候才让 Babel 引入 istanbul…

#Vue#Webpack#Testing#JavaScript

深入 ES2015 默认参数January 22, 2017

ES2015 为函数加入了方便的默认参数语法。 很方便是吧,但每件新东西总有坑。 TDZ 这个是最早见的坑,已经有不少文章指出了是个 TDZ (Temporal Dead Zone) 的问题。我找了大量资料,大部分文章基本是参考自这篇,它指出了 TDZ…

#TDZ#Understanding JavaScript#Function#Parameters#Arguments#Recommended

新年新博客!January 01, 2017

新博客终于写完啦!给心血们搬了个漂漂亮亮的新家。 关于这个博客 :point_left:。

Progressive background-image With EaseDecember 26, 2016

Everyone likes smooth loading. Lately I tried to make the background-image of the menu to load progressively(also to the cover if you view the blog on mobile). If you take a look at how Medium does…

#CSS#Image#Progressive Image#GraphicsMagick#Recommended

在 Hexo 博客上使用 EmojiDecember 23, 2016

(🚨 本博客已换用其它技术栈,Github Emoji 在 Hexo 上的效果见 2018 版) Emoji 都要出电影了,博客怎么能不用。奇怪的是 hexo 上只有一个插件,要在文中添加 tag,还不支持 hexo3 。我不太喜欢在 markdown 里加各种 tag,所以就打算自己再写个插件。 Github 对 emoji…

#Image#Emoji#Hexo#Recommended

SVG Symbol 和 Sprite 的好处和坑November 28, 2016

SVG Symbol 用 Symbol 来把 SVG 合并到一个文件几乎是现在最流行的用法。 Symbol 好处 方便 利用 ID 来取图案,所以不用各种计算,可以随便放。 反复利用 这应该是一个不太容易发现的好处,你可以在文件内部继续用<use>来做图案的各种版本。这样 SVG 的优势更加明显,节省了好多空间。 比如这个博客里用到的社交图案,原本的是只有图案本身。例如这是 Codepen…

#Image#SVG#Sprite#Recommended

CSS 过渡未知高度November 12, 2016

有时候往 dom 里插入一些元素,会希望 dom 慢慢腾开空间,再把插入的元素呈现出来。 但对于过渡 height 未知的元素,暂时没有完美的方法,浏览器还不支持 height 过渡到 auto。而且这种方式也会造成这个元素后面的所有元素一并重绘,蛮耗资源的。 以下是利用 max-height 来过渡,适合已知元素高度的范围。但也不是完美方法,max-height…

#CSS#Transition

Photoshop Pen ToolSeptember 25, 2016

https://design.tutsplus.com/tutorials/photoshops-pen-tool-the-comprehensive-guide--psd-718 这篇文章非常好的总结了 PS 钢笔工具的用法,其中的练习 PSD 特别好用,照着画一遍基本就懂得怎么操作锚点。

#Photoshop

自适应背景图片September 11, 2016

很多时候我们希望背景图片能够在元素不同大小的情况下都能够显示出主体。 居中是最常见的方式,但如果主体不在中间这个效果就大打折扣了。 这个对我来说一开始仅仅是一个念头,也没太注意。直到一次在 podcast 上听到有位嘉宾做了一个 jQuery 插件 https://github.com/wentin/ResponsifyJS…

#CSS#Background#Responsive#Recommended

Gulp 使用命令行参数August 07, 2016

命令行参数的好处就是方便控制,引用 Stack Overflow 的一个回答: The environment setting is available during all subtasks. So I can use this flag on the watch task too. 通过 require('gulp-util').env 获得参数: 就可以这么用:

#Gulp

Sublime Text Title Case 快捷键May 27, 2016

Preferences -> Key Bindings 添加: 然后就可以用 Ctrl+k 再按下 Ctrl+t 使用 Title Case。 Package Control 上有个很老的 Package,Smart Title Case。能识别更复杂的情况,但是有 bug,核心代码已经修复 https://github.com/ppannuto/python-titlecase…

#Sublime Text

JavaScript this 的六道坎May 12, 2016

鉴于this风骚的运作方式,对this的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

#Understanding JavaScript#This#Recommended

闲读源码:ScrollingElement PolyfillApril 18, 2016

今天看了这篇文章,讲到 WebKit document.body.scrollTop 的问题。还有这里 Dev.Opera Blog : Fixing the scrollTop bug。 scrollTop, scrollLeft, scrollWidth, scrollHeight 都是跟滚动相关的属性。设置 scrollTop 和 scrollLeft…

#闲读源码#JavaScript#Browser#Polyfill#闲读规范

理解 Anki 基础概念March 20, 2016

在尝试了 Anki 、 SuperMemo 、 Quizlet 和 Memrise 之后,最后选用了 Anki。 Anki 是一个卡片记忆系统,基于 SuperMemo 老版的 SM2 算法,在实用性和有效性方面做了很好的平衡。简洁的界面,全平台免费同步,用 HTML 和 CSS 做模板,导入导出非常灵活,很适合程序员使用。 Anki…

#Anki#GTD#Time Management#Todo List#Recommended

路由器时间同步服务器February 13, 2016

最近路由器重启了之后时间总是卡在 1970 年不能自动同步。还以为是路由器哪里设置错了,后来发现应该是同步服务器连不上,换了新的服务器好了,摘下一些常用的列表: ntp.sjtu.edu.cn 202.120.2.101 (上海交通大学网络中心NTP服务器地址) s1a.time.edu.cn 北京邮电大学 s1b.time.edu.cn 清华大学 s1c.time.edu.cn 北京大学 s1d…

#Time#Router

理解 PrototypeMay 14, 2015

Prototype 初看很好理解,实际上很容易混淆。而且因为不影响平时使用,一直没用动力去了解,长时间都是在一知半解的状态。 混淆 混淆主要是因为 [[prototype]] 和 prototype 名字长得太像。看回以前总结的模拟继承笔记,基本就是照搬书,压根没搞清楚。 首先是 [[prototype]], 每个对象都会有 [[prototype…

#Understanding JavaScript#Prototype#Recommended

JavaScript 有必要缓存 for 循环中的 Array.length 吗?April 21, 2015

问题 缓存 Array.length 是老生常谈的小优化。 但笔者对这种破碎的写法感到不适,也对这种写法的实际优化效果产生疑问。 且推崇这种写法的朋友似乎很多也是“前辈这么说+自己想了一下觉得有道理”。 由于 for 循环搭配 Array.length 是极度常用的 JavasScript 代码,所以非常必要搞清楚。 结论 先上笔者得到的结论:缓存 Array.lengh…

#Recommended#Understanding JavaScript#JavaScript#Array

V8 是如何实现 JavaScript Hoist 的March 29, 2015

首先 今天在知乎上看到一个问题“JavaScript有预编译吗?”,题主实际上是对 JavaScript 变量提升(hoist)机制的实现过程有疑惑。我刚知道 hoist 时也好奇过浏览器是怎么实现的,就跑去看了一下 V8 引擎的源码,做了一些笔记,现在正好趁机整理出来。 Hoist var 和 function 的 hoist 是老生常谈的问题,网上有大量资料,JavaScript 秘密花园 V…

#Recommended#Understanding JavaScript#JavaScript#闲读源码

ES6 随笔:函数与块级作用域March 09, 2015

阅读 Kyle Simpson 《You don't JS: Scope and Closures》第三章过程中的一些随笔

#Understanding JavaScript#JavaScript#Scope#闲读规范

CSS 自适应正方形February 28, 2015

padding 使用百分数值时是根据其包含块的 width 值计算的。 With respect to the width of the containing block. 所以可以利用 height = 0; 并用 padding-bottom = 100%; 撑起一个正方形: 参考资料 CSSだけで正方形を作る padding-CSS MDN

#CSS#Responsive#Square

多说评论邮件提醒February 27, 2015

多说只有被人回复评论时才会有邮件提醒,博主是默认不造的(怪不得一直没有收到邮件提醒 T_T)。 dig 了一下,这里有讲到用 data-author-key 可以设置提醒。 作者在本站中的id。对于 wordpress 插件,文章如果填写该 id,可以识别作者,在收到评论时,会对该作者发出邮件提醒。通用代码用户及其他插件,如果需要通过这种方式获取邮件,请通过 http://dev.duoshuo…

#Jekyll#多说

JavaScript 函数名里面有什么?December 10, 2014

原文:What's in a Function Name?(2014-11-25) 每次为 JSHint 提交代码我都会学到一些 JavaScript 的新东西。最近的一次知识之旅中我接触到了函数对象的 name 属性。 JSHint 有一个很有意思但很少人知道的功能:代码分析报告。当以编程方式使用时,JSHint…

#Understanding JavaScript#Translation#Function#闲读规范

Stream-Adventure HTML-Stream 中对 trumpet 的理解November 08, 2014

玩了 John Resig 提到的 Stream-Adventure ,在 HTML-Stream 关卡中,根据题目提示写出了代码 虽然写出来了,但其实我还是混淆着 tr 和 steam 流。 最后在 nodeschool 的讨论中得到了比较好启发。 试着整理一下自己的表述: 这里很明显是有两条流 tr 和 steam ,之前混淆他们的关系,所以一直不能理解。 tr 是主流,输入流入 tr…

#Node#JavaScript#Stream

Sublime Text 2 Emmet 快捷键整理October 18, 2014

前面总结的 Sublime Text 2 快捷键已经用上手了,最近又发现 Sublime Text 2 的 Emmet 插件不仅仅可以扩展表达式,还有许多相当 handy 的快捷键,写起 HTML 如虎添翼。 选择 Ctrl+, 选择整个标签的内容(向外) Ctrl+Shift+. 按标签-属性-值方式选择 跳转 Ctrl+Alt+J 跳转匹配标签 Ctrl+Alt…

#Sublime Text#Tips

Sublime Text 2 快捷键整理October 08, 2014

基本涵盖绝大部分情况了,鼠标跳跃多选可以利用标签代替,或者用回鼠标(毕竟一般使用频率不高)。 选择 Ctrl+D 选词 (按住-继续选择下个相同的字符串) Alt+F3 选词,选全部 Ctrl+K, Ctrl+D 选词跳过这个单词 Ctrl+U 软撤销(光标位置也算一步, Ctrl+Z 只撤销编辑) Ctrl+L 选择一整行 Ctrl+Shift+L…

#Sublime Text 2#Tips

Low Poly 初体验September 02, 2014

今天膜拜了一些 low poly 风格的作品,找张图试着临摹了一个中午,眼睛要瞎了。摸索了一些经验: 先描好线再连三角形 不一定是三角形 细节需要更多图案,大块的不妨用大三角形 原图饱和度可以提高一些 记得中途休息,扭扭手腕(血的教训) 瞎扯完了,洗洗睡。

#Design#Photoshop#Illustrator

Handlebars.js 脑图August 30, 2014

可以放大图片看,或者[这里]。总结了 Handlebars.js 的一些基本概念,时间不紧的话还要写个入门什么的一起加深理解。Handlebars 很容易上手,但其灵活性才是亮点,也是难点。 handlebarsjs

#JavaScript#Handlebars

关于 YUI 的重要公告August 30, 2014

原文:Important Announcement Regarding YUI(2014-8-30) 雅虎 UI 库(YUI)从 2005 年就开始在雅虎使用,并在 2006 年 2 月 13 日宣布公开。虽然对比现在变化了不少,但 YUI 一直都是致力于提供一个全面的工具集,让开发人员轻松地创建 web 富应用程序。同样的,YUI 在 Yahoo 历史中占有重要的地位:成千上万行依赖于 YUI…

#Translation#JavaScript

CSS Font 单位August 16, 2014

了解 CSS font 各个单位的意义,搜了一些资料。 [1] 绝对单位 cm (centimeter 厘米) mm (millimeter 毫米) in (inch 英寸) pt (point 点) pc (pica 派卡) 相对单位 em (em = 目标元素像素值 / 父元素 font-size 的像素值) [3] ex (约为小写字母 a, c, m, o 之类的高度) [1] px…

#CSS#Font#闲读规范

Git 分支模式笔记August 11, 2014

正想了解 Git 开发流程方面的资料,就碰上了这篇 2010 年的好文。没有时间翻译,就做一下笔记。 主要内容 可以看到,该模型分支的组成主要有 5 种类型: master develop release feature hotfix 开发主要在 develop 上做,稳定版本释放由 develop 派生 release 分支。发布一段时间确定可以后,就合并回 develop 和 master…

#Git

深入理解 JavaScript 模块模式August 05, 2014

拜读 2010 年神文,原文:JavaScript Module Pattern: In-Depth(2010-03-12) 模块模式(module pattern)是一种常见的 JavaScript…

#Understanding JavaScript#JavaScript#Translation

JavaScript 继承总结July 27, 2014

先用一个简单的 Person 类作为文章其它例子的前提。 原型链 JavaScript…

#Understanding JavaScript#JavaScript#Inheritance

JavaScript 创建对象总结July 25, 2014

JavaScript 是一门灵活的语言,就创建对象而言就有各种各样的方法。本文是《JavaScript高级程序设计》(第3版)的笔记,主要是针对各种创建对象方法之间的关系、优缺点进行梳理。每种方法相关的其它细节不是本文重点,我会标记页码。 创建单个对象 1、object 构造函数:调用 Object 的构造函数。person 的 constructor 值是 Object。…

#Understanding JavaScript#JavaScript#Object

阅读 jQuery 源码的18个惊喜July 23, 2014

原文:18 Surprises From Reading jQuery's Source Code(2014-7-23) 我热爱 jQuery,且尽管我认为自己算是一名高级 JavaScript 开发者,我从来没有试过由头到尾把 jQuery 的源码看一遍,直到现在。这里分享一些我一路下来学到的东西: 注意:我使用 $.fn.method() 语法来表示调用一组匹配元素的方法。比如当我说 $.fn…

#Translation#JavaScript#jQuery

Google Chrome 霸权主义July 17, 2014

原文:Google Chrome Hegemony Google Chrome 是当今互联网中最大的玩家之一。它快速、可靠、功能丰富;特别对 web 开发者来说非常好用。Chrome 也允许安装第三方扩展;Google 团队做得很不错,这些扩展只需 HTML、CSS 和 JavaScript 即可搭建。本文将介绍几个能帮助我们开发的 Chrome 利器。 本文的源码在[这里]。 开发响应式 Web…

#Translation#Google#Chrome#JavaScript#Node

使用 Express 与 AbsurdJS 构建 Node.js 应用July 07, 2014

原文:Node.js application made with Express and AbsurdJS(2014-7-7) 当今有许多新技术吸引着越来越多的开发者,Node.js 便是其中之一。主要因为它是 JavaScript 驱动的,许多人都很感兴趣。在本教程中,我将会教你结合 Express 去使用 AbsurdJS。Express 是流行的 Node.js 框架,而 AbsurdJS…

#Translation#JavaScript#Node#Express

Qt Quick 笔记 - AnchorsJune 13, 2014

看到许多 Qt Quick 样例中都会用到 Anchors,在官网这里找到了资料。还有这里也有详细的说明。 除了Grid, Row, and Column,Anchors 也可以用来布局。 注意只能对兄弟或父母 item 使用 anchors Anchors 是 Item 中的属性,所以大多数类型都可以使用 Anchors…

#Qt#Quick

265行代码实现第一人称引擎June 11, 2014

原文:A first-person engine in 265 lines(2014-6-11) 今天,让我们进入一个可以伸手触摸的世界吧。在这篇文章里,我们将从零开始快速完成一次第一人称探索。本文没有涉及复杂的数学计算,只用到了光线投射技术。你可能已经见识过这种技术了,比如《上古卷轴2 : 匕首雨》、《毁灭公爵3D》还有 Notch Persson 最近在 ludum dare…

#Translation#JavaScript#Game

不侧漏精通 Node.jsMay 22, 2014

原文:Learn Node.js Completely and with Confidence(2013-2-4) 学习时长:约2周 学习前提:JavaScript 知识掌握 5/10 要成为 JavaScript 开发者现在是最好的时机了,而且会越来越好。主要是因为 HTML5 的来临, Flash 的逝去,移动设备的普及,以及最重要的 Node.js…

#Translation#JavaScript#Node

如何正确学习 JavaScriptMay 15, 2014

正确学习 JavaScript(写给非 JavaScript 程序员和编程新手) 原文:How to Learn JavaScript Properly(2014-2-7) 学习时长:6~8周 学习前提:中学水平,无需编程经验 更新(2014-1-7) 在 Reddit 上创建了一个学习小组 January 2014, “Learn JavaScript” Study Group on…

#Translation#Understanding JavaScript#学习路线#Recommended

解决 Ubuntu 笔记本发热问题May 01, 2014

笔记本发热绝大多数情况是因为CPU和双显卡。 先排除双显卡问题 ubuntu自带双显卡控制,该功能还在debug状态,但是在13.10上已经比较稳定了。 13.10之前的需要先加载进来 查看显卡情况 可以看到 IGD就是集成显卡,DIS是独立显卡。 Pwr为通电的显卡,off为关掉的显卡。 加号为正在使用的显卡。 以下操作需要在 root…

#Ubuntu#发热#笔记本#双显卡#散热

Damson演示:用于大数据分析的差分隐私April 28, 2014

原文:Demonstration of Damson: Differential Privacy for Analysis of Large Data 摘要—— Damson为生物医学研究的结果提供较强的隐私保护,是一种强大的新型工具。Damson基于差分隐私算法,即使攻击者掌握了大量的背景知识,也无法从公开的结果中推断出某个个体是否存在。Damson…

#Translation#机器学习#数据挖掘#差分隐私

脆弱的力量April 06, 2014

今天看到了个TED Talk “Brené Brown: The power of vulnerability”,讲者讲诉了自身的经历后得出结论要接受脆弱: Let ourselves be seen, deeply seen, vulnerably seen. Love with our whole hearts, even though there is no guarantee…

#TED

为mp3更新高清封面March 29, 2014

我是个受不了安静的人,干活的时候没有音乐不行。我也是欧美音乐fans,多年来积累了不少或热门或冷门的音乐。无奈这些音乐大多没有封面,或者供应商为了节约流量用了压缩的小图,于是在移动设备上显示得惨不忍睹。忍了一段时间后终于忍不住了,亲自改一下。 遍历mp3 开始的时候当然是要先找到mp3文件了。使用os.walk递归的查找mp3,把文件名和路径存下来: 测试一下,放一些mp3文件在test…

#Python#MP3#爬虫#豆瓣

lcc内存对齐代码March 21, 2014

今天看lcc源码内存对齐时看到一个roundup(x,n)宏 从字面意思看这个宏应该是用来向上取整的。但是(x+n-1)&(~(n-1))的确让人一时傻眼了。 这里要从头说起,首先roundup(x,n)的作用就是向上取整,即求出最小的a * n,使得a*n >= x,即 这里就要引入小学时的余数概念了: 即对于任意两个正整数x和n,总存在整数a和b,使得: 在C语言中求a和b…

#lcc#编译器#内存对齐

Jekyll-bootstrap Not Updating Problem FixedMarch 20, 2014

I had a jekyll blog on the github and changed it to Jekyll-bootstrap yesterday. I tested it locally, everything was ok. Pushed successfully. But my github pages didn't change. After debugging, I…

#Jekyll

NFA与DFA的转换与优化March 16, 2014

上一节《编译原理》课讲到了NFA(不确定的有穷自动机)向DFA(确定的有穷自动机)转换。考试要考,所以要手写变换过程,很繁琐,也很有趣。所以周末用python给实现了,并利用动态规划进行优化。 转换方法 这里主要涉及到对状态集合I的两个操作: 求ε-闭包。表示为ε-closure(I),是指I中的任何状态S经过任意条ε弧能到达的状态的集合。 求I的α弧转换。表示为move(I,α),是指I…

#编译原理#自动机#动态规划

编译原理与计算器March 15, 2014

上次交流会师弟演讲了栈式计算器,这在《数据结构》里也有提到,当时是用C实现了。而这学期学《编译原理》,里面也涉及到数学表达式。两者对比用栈更快,但是使用中间代码可以使到条理更清晰,还可以做很多有趣的扩展。所以这次交流会的内容有着落了。

#编译原理#Compiler

eat();

sleep();

code();

repeat();