My Work Station Setup

This is my wok station, aka, business computer, setup (for front-end development productivity enhancement).

  1. OS (Operating System): Windows 10 Pro
  2. Dependencies
    1. Chocolatey (a Windows Package Manager)
      // essential commands
      $ choco install googlechrome jre8 firefox 7zip autohotkey nodejs git.install putty filezilla dotnet4.5 teamviewer sublimetext3 wireshark foxitreader keepass googleearth cmder opera greenshot googledrive speccy sumatrapdf unetbootin sysinternals -y
      
    2. Node.js via Window NVM (Node.js Version Manager)
    3. Python 2.x and 3.x
    4. Ruby (for Sass mainly)
    5. Git (for Version Managing)
    6. XAMPP (for local PHP dev environment)
    7. Composer (for PHP package managing)
  3. Global CLI Tools
    1. jpeg optimizing: jpegtran & cjpeg
    2. SASS
  4. Global GUI Tools
    1. Text Editor: Sublime Text 3
    2. Quick Access: Caplocks+
    3. Proxy: Shadowsocks
    4. Proxy Manager: Proxifier
    5. Mouse Gesture: WGesture
    6. Screen Temperature Auto-Adjustment: f.lux
    7. Screenshot: ShareX
    8. Color Picking: Instant Eyedropper
    9. Plain Text Copy: PureText
    10. .jpeg optimization: JPEGmini Pro

前端Chrome扩展(Extensions)

不要依赖于工具。:-)

  1. 审计
    1. Web Developer
    2. Web Developer Checklist
    3. WAVE Evaluation Tool
  2. 审计:ARIA
    1. Accessibility Developer Tools
    2. Chrome Accessibility Collection
    3. aXe
    4. tenon.io(非插件)
  3.  网络
    1. 代理管理:SwitchyOmega
    2. UA欺诈:User-Agent Switcher for Chrome
    3. 本地API:Postman
    4. 请求头欺诈:Referer Control
  4. 渗透
    1. 技术栈分析:whatruns || Wappalyzer
    2. 地理位置等:Shodan
  5. 注入(非渗透)
    1. JavaScript:TamperMonkey || Violentmonkey
    2. CSS:Stylish
  6. 其他:
    1. 代码美化:JavaScript and CSS Code Beautifier
    2. URL简化:Bitly
    3. 图片转Data URI:Image to Data URI
    4. QR Code读取:right-click QRcode reader
    5. 字体查询(基于图片):WhatFontis.com right click shortcut
    6. 字体查询:WhatFont
    7. 标签静音:Mute Tab Shortcuts
    8. Cookies管理:Swap My Cookies
  7. 框架:
    1. Vue.js devtools
    2. React Developer Tools

JavaScript / ECMAScript工具之Chrome Dev Tools备忘

本文只考虑最新版的Google Chrome浏览器的情况

  1.  快捷入口:
    1. 键盘流
      启动Element Inspector:<Ctrl> + <Shift> + <I>
      启动Console:<Ctrl> + <Shift> + <J>
      更多请见:Settings (of Dev Tools) > Shortcuts
    2. 鼠标流
      启动Element Inspector:鼠标悬停在想Inspect的元素上右键,然后点击弹出菜单最下面的“Inspect”
  2. 容易被忽略的一些好功能
    1. Elements > Event Listeners
    2. Console > Console Settings > Preserve log & Show timestamps
    3. Sources > Snippets
    4. Network > Capture screenshots (toggle)
    5. Settings (of Dev Tools) > Preferences > Appearance > Theme: Dark
    6. Settings (of Dev Tools) > Preferences > Elements > Show rulers

前端Windows 10效率软件

  1. 全局:
    1. Snippets
      1. 个人免费:PhraseExpress
    2.  快捷键
      1. 免费:Preme for Windows
    3. 纯文本复制:
      1. PureText
    4. 鼠标手势
      1. 开源:WGestures
    5. 取色
      1. 免费:Instant Eyedropper
    6. 翻译
      1. 开源:Capslock+
    7. 快捷查询
      1. 开源:Capslock+
    8. 快捷计算
      1. 开源:Capslock+
  2. 采样
    1. 截图
      1. 开源:ShareX
    2. 录屏
      1. 付费:TechSmith Snagit
  3. 监控
    1. 网速
      1. 付费:NetWorx
    2. 用时
      1. 付费:ManicTime
    3. CPU
      1. 免费:Compact Tray Meter
    4. 硬盘读写
      1. 免费:Compact Tray Meter
    5. 内存
      1. MemInfo
  4. 宏(自动化)
    1. IFTTT类
      1. 免费:Ellp
    2. 屏幕色温
      1. 免费:f.lux
    3. 休息提醒
      1. SmartBreak
  5. 桌面
    1. 谷歌日历
      1. 付费:VueMinder
    2. 天气预报
      1. 付费:EarthView
    3. 时区
      1. 付费:EarthView
  6. CLI
    1. 窗口管理
      1. 开源:cmder
    2. 软件管理
      1. 免费:chocolatey

PS:找Windows 10软件,不妨:

Lenovo/联想ThinkPad无线蓝牙键盘0B47189/KT-1255测评

我从第一份工作开始,就一直跟ThinkPad的X1 Carbon打交道。X1 Carbon的键盘是我知道的最能解决我需求的。最近可能要因公使用台式电脑,因此我入手了键面跟X1 Carbon一样的0B47189。

0B47189比起X1 Carbon的键盘:

  1. 在键盘材质上,
    1. 造价感觉比较低
    2. 弹性比较好(换言之,不如X1 Carbon的硬朗)
    3. 采用的磨砂面,而不是X1 Carbon的光滑面
  2. 造工上,缝隙明显,总体无法给人上等品的感觉,也许是为了防泼溅功能的排水吧
  3. 键盘的
    1. 键程较长(X1 Carbon的比较浅)
    2. 按键声音比较大(X1 Carbon的很安静)
  4. 没有:
    1. 背光
    2. Fn(功能)按键指示灯
    3. 触摸板
    4. 指纹识别模块
  5. 有:
    1. 蓝牙模块,可以给手机平板用,暂时未发现这个键盘的蓝牙跟我的其他无线设备有冲突
    2. NFC模块,迅速连接(部分)安卓手机
    3. 一样的键盘布局。键盘布局中规中矩,可惜home跟end键的位置不像有些X1 Carbon一样,不在左手尾指可及之处,既然有多余的CapsLock键,不妨用CapsLock+
    4. 展开后让键盘前倾几度的键盘脚
    5. 触摸杆跟鼠标左右键
    6. 内置电池
  6. 可以:
    1. 边充边用
    2. 放泼溅

X1 Carbon的键盘是出了名的好的。个人观点,总体上,这是蓝牙键盘是个很不错的程序员键盘,如果你习惯X1 Carbon的键盘布局,这个是你的不二选择。

我最喜欢把这个键盘放到大腿上,翘着二郎腿,背靠椅背敲代码了。

让JavaScript在V8引擎上跑得更快的技巧

  1. 对象属性们的顺序尽可能保持一致
  2. 在构造函数(constructor)里使动态属性(dynamic properties),而不要在对象实例(instantiation )后才给对象手动添加属性
  3. 提高函数的可复用性,减少函数的量
  4. 避免使用稀疏数组(spare array,例如”let array = []; array[2] = 3;”,array[0]与array[1]的值都是undefined,array是一个稀疏数组)
  5. 避免使用超过31 bits大小的数值(十进制就是2147483648

via How JavaScript works: inside the V8 engine + 5 tips on how to write optimized code

nvm-windows,Windows系统也能随心切换Node.js版本

需求来源:
Node.js官方没有nvm,换句话说,一台电脑只能装一个版本的Node,但是:
1)有的Node.js Package(Node.js包)需要非LTS(Long Term Support,即稳定版)版本的Node.js的支持,比如yun-playlist-downloader(网易云音乐 – 歌单 – 下载器);
2)不同的项目,往往也要求使用指定版本的Node.js;
3)Python都有installer,Node.js怎么可以没有呢!

解决方案:
开源软件nvm-windows(Node Version Manager (nvm) for Windows),能让你便捷地切换你Windows电脑上的Node.js的版本。
注意:软件运行需要管理员权限。

快速入门:

  1. 这里下载nvm-setup.zip
  2. 解压nvm-setup.zip,安装“nvm-setup.exe”
  3. 寻求帮助:
    $ nvm
  4. 安装不同版本的Node.js,比如:
    $ nvm install 6.11.2
    $ nvm install 8.4.0
  5. 切换不同版本的Node.js,比如:
    $ nvm use 6.11.2
    $ node -v

借助App “Remote Keyboard”通过电脑键盘控制安卓手机输入

  1. 请把你的安卓手机跟电脑连接到同一个Wi-Fi下
  2. 安卓手机,请安装“Remote Keyboard (by Onyxbits)”,打开App,并记住上面提及的安卓手机在你局域网下的IP,这个IP一般以“192.168.”开头,下文称之为“<安卓IP>”
  3. Windows电脑,请确保这个功能已打开:“Turn Windows features on or off > Telnet Client”
  4. Windows电脑,打开CMD (Command Prompt),运行以下指令就可以了:
    telnet <安卓IP> 2323
    直接连上了?你还是赶紧设置一个密码:“Remote Keyboard > Settings > Password Protection”。
    如果你设置了密码的话,手机会跟你要密码。命令行软件有个习惯,出于安全的考虑,不显示你输入的密码的长度。请输入密码后按回车就可以了。

如何在Windows的CMD里面通过“subl”来使用Sublime Text 3

Github的Atom允许你在安装了它之后,就可以直接在命令行里通过“atom .”来打开当前文件夹。Sublime Text 3怎么才可以也这样呢?

答案:修改系统环境变量。举例,Windows 10:

1.  哪里设置?
按下<Win>键,输入“system env”,点选“edit system environment variables”
点“Environment Variables…”,在“User variable for [yourUserName]”下的Variable一栏找到“PATH”或者“Path”这个变量,双击它或者点击“Edit”按钮。

2. 怎么设置
请点击“New”,然后添加你Sublime Text 3所在的路径。比如安装版默认的“C:\Program Files\Sublime Text 3”。
这样过后,你当前的用户就可以在命令行(比如Command Prompt或者PowerShell)工具里,无论你当前文件夹是哪个,都可以直接调用Sublime Text 3安装文件夹下的“subl.exe”这个程序了。
一般大家习惯在“environment variable”的最后一行留给当前文件夹,也就是“.”,建议你也这样做。

3. 试一试
用Sublime编辑当前文件夹:“subl .”
获取帮助:“subl –help”或者“subl -h”

🙂