《软技能——代码之外的生存指南》笔记

职业发展的驱动力一定是来自个体本身。记住:工作是属于公司的,而职业生涯却是属于你自己的。
—— 厄尔·南丁格尔

Read More

Share

MySQL 基本操作笔记

简单记录一下 MySQL 的最基本的操作命令。

Read More

Share

About Web SPA Data Flow

web应用数据流的类型

什么场景下需要关心数据的变动?

单向数据流

Observable & RxJS

Observable 是 TC39 提给 ECMAScript 的一个标准库提议,目前仍处于 Stage-1 草案阶段。根据 tc39/proposal-observable 的说明,RxJS 是当前对于 Observable 草案的一个实现。

RxJS 的入门级教程

让我们一起来学习 RxJS | 饿了么

参考阅读

Share

Webpack 指南(1. 入门篇)

webpack 基本概念

webpack 是目前非常流行的前端资源(JS/CSS/IMG/…)打包解决方案。它默认按照 ES2015 定义的模块机制来查找、打包文件,即对 importexport 声明进行相应的模块封装,而对于其他代码,则不做任何改动。如果想使用其他的 ES6 特性,现阶段需要借助于 Babel 这样的编译工具。

Read More

Share

Play Music with SoX on MacOS

基本使用

今日突发奇想,想在命令行下播放音乐。找到了一个现成的程序,SoX(Sound eXchange)。

Mac 下面执行下面的命令即可安装:

1
brew install sox

安装好之后,可以通过 play 命令来播放音乐(这首歌是在我博客另一篇博文HTML5 audio 实验里面用的音乐):

1
$ play ~/Downloads/naruto_xia_ri_xing.mp3

效果如下:

单曲循环

1
play ~/Downloads/naruto_xia_ri_xing.mp3 repeat 0

repeat 后面加上希望循环的次数,0表示无限循环。任何时候想要停止,按下 ctrl c 即可。

参考阅读

Share

Koa Running On HTTP/2

HTTP2 概述

翻译自 Hypertext Transfer Protocol Version 2 (HTTP/2) 的简介:

HTTP/2 enables a more efficient use of network resources and a reduced perception of latency by introducing header field compression and allowing multiple concurrent exchanges on the same connection. It also introduces unsolicited push of representations from servers to clients.

HTTP/2 可以提升对网络资源的使用效率,并且通过压缩头部、在同一个连接里多路复用,来减少网络等待时间。HTTP/2 还引入了服务器推送的技术。

Read More

Share

关于MacOS文件系统的文件名大小写问题

背景

注意到这个事情,是因为今天在工作中发现了由此导致的一个构建问题。我在某个项目A上进行开发,该项目依赖了一个公共组件C。C是由其他同学负责维护,里面的JS源码、以及由 ES6 编译为 ES5 之后的部分文件名,是大写开头的(当然了,我个人是习惯于总是小写命名文件,用连字符处理长文件名情形),但是有个文件在创建的时候,用了小写开头的:pick.js,但是在引用的时候,是这样的:

1
import * from './Picker.js';

由于我们所有的开发人员都是配 Mac,因此在开发环境中,并没能发现这个隐藏的错误。只是在 A 项目中,发现这个文件是找不到的(我们使用了 webpack 进行构建):

1
Module not found: Error: Can't resolve './Picker' in 'some-file'

最后,通过修改文件名,就解决了这个问题。

Read More

Share

《JavaScript面向对象精要》笔记

一切皆对象

其他编程语言用栈储存原始类型,用堆储存引用类型,JavaScript 则完全不同:它是以一个变量对象追踪变量的生存期。原始值被直接保存在变量对象内,而引用值则作为一个指针保存在变量对象内,该指针指向实际对象在内存中的存储位置。
page 2

例如,所有的 JavaScript 对象都有一个方法 Object.prototype.valueOf(),该方法返回指定对象的原始值。如果我们一个简单的赋值语句:

1
var a = 1;

那么我们会发现变量 a 上面其实有很多方法(当然,大部分都是来自于其原型)。这就是因为该变量是通过变量对象进行追踪的,并不仅仅只有一个值(这也涉及一个概念,“原始封装类型”)。这也是 JavaScript “一切皆为对象”的理念。

Read More

Share

Linux常用命令笔记(二:变量)

变量

基本使用

Bash 里,每个变量的值都是字符串。变量名是区分大小写的。要输出变量值,可以用下面方法中的任意一个:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var="some test string."
# 方法①
# 美元符号 $ 用于提取变量值
echo $var
# 方法②
echo ${var}
# 方法③
echo "$var"
# 方法④
# 这种语法,非常像 ES6 里面的模板字符串
echo "${var}"

上面说到变量值都是字符串,那么如果想知道字符串的长度,可以通过 # 符号来获取:

1
2
var="some test string."
echo $#var # 输出 17

Read More

Share

PNG 图片压缩及若干工具对比

原始图片的体积是433KB,格式为 PNG,尺寸为 2560×920。【待补充图片测试用例】

这里共使用了5种工具:

  • 有损压缩工具 ImageOptim
  • GUI 工具 ImageOptim
  • Zopfli
  • OptiPNG
  • pngcrush

Read More

Share