Link to https://shinychang.net/blog/%E6%B7%BA%E8%AB%87%E6%95%8F%E6%84%9F%E8%B3%87%E6%96%99%E7%9A%84%E5%84%B2%E5%AD%98/ 敏感資料的儲存一直以來都是個問題，儲存的資料又分為只需要驗證是否一致（hash）或是需要可以反解回來（crypto），前者對應的通常是使用者的密碼，只需要驗證輸入是否一致即可。後者比較像是使用者的身分證字號或是信用卡卡號之類的。 關於密碼，以前常見的儲存方式會是使用雜湊來儲存，譬如說： SHA1(password) = hash 透過這樣的方式儲存，可以在不知道使用者的密碼的情況下驗證密碼的正確性，假設資料庫儲存的密碼真的洩漏出去了，也沒辦法反推原始的密碼，感覺起來很完美！ 但是如果你看到 7c222fb2927d828af22f592134e8932480637c0d 然後再去 Google 搜尋，你就會發現他其實是 12345678 的 SHA1 結果

Link to https://shinychang.net/blog/dns-redirect-on-aws-route53/ First, you have to create an s3 bucket which name is your old domain (e.g. old.example.com)and enter bucket and choose “Properties” > “Static website hosting” Then, enter your old domain (e.g. old.example.com) and protocol correctly. Enter the route53 service and modify old domain recordset and make sure your alias is yes and select the target to s3 which you just created as below image shows.

Link to https://shinychang.net/blog/two-ways-to-measure-your-assets-loading-speed/ Many of you may know how to measure your site loading speed. For example, you can use chrome devtools' performance, lighthouse or GTmetrix. What if you have to measure some specified resources loading speed, what will you do? First, you can use chrome devtools and choose “Network”…

Link to https://shinychang.net/blog/the-better-javascript-syntax-highlight-in-sublime-text/ The most famous syntax highlight package for ECMAScript is babel and the last modified date is 2 Jan 2016…but now is 2019 🤦‍♂. It’s time to find the new package for modern ECMAScript. Today, I will introduce Sublime-JS-Custom, you can install via Package Control and searchJSCustom and…

Link to https://shinychang.net/blog/speed-up-eslint-performance-3-times-in-ide/ Most of the front-end engineers will extend Airbnb’s eslint-config-airbnb rules of their ESLint configuration. It’s a nice choice at the beginning, but you may have some performance issue when your project grows up. You can export TIMING=1 and execute ESLint to get per-rule performance report. As below…

Link to https://shinychang.net/blog/webpack-%E6%9C%80%E4%BD%B3%E5%8C%96-cache-loader/ 繼上一篇 thread-loader 可以減少 build time 27% 之後，繼續來講 build time 最佳化的部分，說到 cache，在 web 的世界真的是百百種…這邊就不多說了，還是回到主題 webpack 上面。這次的 cache-loader 可以減少最多 75% 的時間。 今天要講的主角 cache-loader 跟 thread-loader 一樣都是好棒棒的 loader，都只需要一行就可以幫你加速，如同官方的說明，只需要放在 babel-loader 的前面就可以了。 完成後在執行 webpack build 以後會發現在根目錄下會多出 .cache-loader 這個資料夾，這就是 cache-loader 的 cache 存放的地方，記得要加入 .gitignore 中。

I have been used Sublime Text in MacOS and Windows for over 6 years, which still is a fantastic editor even in 2019. In the past years, I tried lots of famous IDEs (Atom, VSCode, and WebStorm), none of suitable with me. I will introduce some advanced skills of Sublime Text and why I choose it in this post. — Link to https://shinychang.net/blog/why-i-still-using-sublime-text-in-2019/ Pro Tips Goto Definition… (F12)

Link to https://shinychang.net/blog/webpack-%E6%9C%80%E4%BD%B3%E5%8C%96-thread-loader/ 近期一直在與 webpack 打交道，原因不外乎是為了更好的開發體驗與使用者體驗。webpack 設定之複雜實在是為人之所詬病，不過在 parcel 出現後所帶動的 zero config 風潮，webpack 在 v4 也大幅的改進這一部分。但是 zero config 終究只是個入門選項，當要開始各種最佳化或是引入 loaders/plugins 的時候，自己撰寫 webpack.config.js 將會是必須的。 thread-loader 是一個可以大幅減少 build time 的一個 loader，實際上使用也非常的簡單，最基本的設定如下： 只需要在 heavy-loader 之前放上 thread-loader 就可以了，怎樣算是 heavy-loader 呢？可以使用 Speed Measure Plugin 來看到底哪個 loader 花了你最多時間。不意外的話會是 babel-loader 和 css-loader 兩個！那麼可以用一樣的方式，在 css-loader 前面放上 thread-loader

Link to https://shinychang.net/blog/%E5%9C%A8-localhost-%E7%94%A8-https-%E9%96%8B%E7%99%BC%E5%90%A7/ 在前一篇文章寫了一些 app 相關的內容，該回到本業（Web）了，現在有許多的 Web APIs（Geolocation, Fullscreen, Service Worker, etc） 都需要在 HTTPS 的情況下才可以使用，為了讓開發更貼近最後上線的結果，在 localhost 使用 HTTPS 是一個好的選擇。 mkcert 是一個很好的選擇，他可以幫助我們產生 HTTPS 必要的憑證（root CA, local CA 等），只需要以下三行指令就可以完成 root CA 的產生 接著再輸入需要上 HTTPS 的 domain 名稱即可產生 local CA 最後再建立 server.js