部落格需要顯示發佈時間，餐廳網站要顯示訂位時間，拍賣網站則是要顯示訂單的各種時間，無論你做什麼，都會碰到「顯示時間」這個很常見的需求。
這問題看似簡單，不就是顯示個時間嗎？但如果牽扯上「時區」的話，問題就會變得再更複雜一些。以時區來說，通常會有這幾個需求：
而這還只是顯示的部分而已，還有另外一個部分是與後端的溝通，這個我們可以待會再提，但總之呢，要正確處理時間跟時區並不是一件簡單的事。
在最近這一兩份工作剛好都有碰過相關的問題，因此對這一塊有點小小心得，就寫了這一篇來跟大家分享一下。
最近公司的同事修了一門資安相關的課，因為我本來就對資安滿有興趣的，所以就會跟同事討論一下，這也導致了我這兩週一直在研究相關的東西，都是一些以前聽過但沒有認真研究過的，例如說 LFI（Local File Inclusion）、REC（Remote code execution）、SSRF（Server-Side Request Forgery）或是各種 PHP 的神奇 filter，也能複習原本就已經相對熟悉的 SQL Injection 跟 XSS。
而 CTF 的題目裡面常常會出現需要繞過各種限制的狀況，而這就是考驗對於特定協定或者是程式語言的理解程度的時機了，要想想看怎麼在既有的限制之下，找出至少一種方法可以成功繞過那些限制。
原本這一週不知道要寫什麼，想寫上面提的那些東西但還沒想好怎麼整理，之前的 I Don’t know React 後續系列又還沒整理完，就想說那來跟大家做個跟「繞過限制」有關的趣味小挑戰好了，那就是標題所說的：
在 JavaScript 當中，你可以做到不用英文字母與數字，就成功執行 console.log(1) 嗎？
換句話說，就是程式碼裡面不能出現任何英文字母（a-zA-Z）與數字（0-9），除此之外（各種符號）都可以。執行程式碼之後，會執行 console.log(1)，然後在 console 印出 1。
如果你有想到以前聽過什麼有趣的服務或是 library 可以做到，先不要。在這之前可以自己先想一下，看有沒有辦法寫出來，然後再去查其他人的解決方法。
若是能從零到有全都自己寫出來，就代表你對 JS 這個程式語言以及各種自動轉型的熟悉程度應該是滿高的。
底下我就提供一下我自己針對這一題的一些想法以及解題過程，有雷，還沒解完不要往下捲動。
==防雷==
==防雷==
==防雷==
==防雷==
==防雷==
附註：目前這個 blog 對於 JSX 的語法支援有問題，所以看程式碼的時候可能沒那麼容易閱讀，我會盡快再找時間修復。
這個標題致敬了有寫 JavaScript 的人就算沒看過也一定聽過的一系列書籍：Kyle Simpson 寫的 You Don’t Know JS（中譯版翻成《你所不知道的 JS》），裡面講了許多很多人不知道的，有關於 JS 的東西。
而 I don’t know React 是我對我自己的一系列紀錄，記錄了一些我所不知道的 React，而這些文章都是由我使用 React 的經驗總結而來。這一些我曾經碰到過的錯誤，有可能很基本很常見（官方文件上面就有寫的那種，只是我沒看清楚所以不知道），也有可能比較少見（我可能在工作上寫三四年才碰到）。
換句話說，寫這系列的精神跟 YDKJS 不一樣，前者是想告訴你一些 JS 當中比較少人知道的東西，是一種「我來教你寫 JS」的感覺，而我寫這系列之所以叫做「I don’t konw」，是因為想用一系列的文章記錄自己寫 React 曾經有過的誤解或者是沒有注意到的地方，以及正確答案到底是什麼。
我也不知道這系列文會有幾篇，大概就是我每犯下一個就會來 po 個文。這系列有一個我覺得滿大的不同點，就是我會在文章開頭盡可能提供當時犯錯的場景重現，讓大家能有機會在看答案之前自己 debug，看看是否能找出錯誤在哪。我覺得這其實是最精華的部分，這不是什麼制式的面試考題，也不是從網路上隨便找來的 React 測驗，而是我在工作上碰到過的真實的狀況。
因為想要讓大家盡可能融入情境，也去思考我曾經碰過的問題，所以會有不少篇幅在於「定義以及重現問題」，如果你對自己尋找答案沒有興趣，也可以直接跳過這個部分去看解答。但我個人建議是自己先嘗試 debug，去發現問題在哪，才來看文章內的解答，才能完整地吸收文章想表達的東西。
總之呢，讓我們先來看看這一篇要講的案例吧！
最近在臉書上的前端社群看到了一篇文章：理解 React useEffect 02，內容是有關於 useEffect 的使用方式，後來在留言串也有了一些討論。
其實當初第一眼看到這篇文章的用法，我也是覺得有些奇怪，不過我其實多少能夠理解為什麼是這樣寫，只是還是覺得怪怪的。原本想留言，但是後來覺得「搞不好奇怪的是我」，就想說再思考一下。仔細思考過後，奇怪的還真的是我。
因此這篇來講一下我的想法，有錯的話歡迎在文章底下留言指正，或是在前端社群跟我討論也可以。在繼續閱讀之前，建議先看過上面那篇原文以及原文底下的討論，才會比較進入狀況。
如果你想把東西存在網頁前端，也就是存在瀏覽器裡面，基本上就是以下這幾個選項：
後兩者應該滿少用到的，而最後一個 Web SQL 也早在幾年前就被宣告已經不再維護了。因此在談到儲存資料的時候，大部分的人提的還是前三種，其中又以前兩種最多人使用。
畢竟在前端儲存資料時，大部分資料都希望能儲存一段時間，而 cookie 跟 localStorage 就是被設計在這種情形下用的，可是 sessionStorage 不是，它只適合儲存非常短期的資料。
不知道大家對 sessionStorage 的理解是不是跟我一樣，先說說我的理解好了：
sessionStorage 跟 localStorage 最大的差別在於前者只會存在於一個分頁當中，你分頁關掉之後資料就清除了，所以新開分頁，就會有新的 sessionStorage，在不同分頁不會共用。但後者如果是相同的網站，可以共用同一個 localStorage
但我想問大家的是：有沒有可能有一種情況，我在分頁 A 的 sessionStorage 存了一些東西，然後有一個新的分頁 B，也可以讀到分頁 A 的 sessionStorage？
你可能以為沒有，我以前也以為沒有，我同事也這樣認為。
但偏偏就是有。
之前在公司裡面做一些效能上的調整時，無意間發現了一個奇怪的現象，繼續往下追查之後才發現是個好像沒有被什麼人發現過的 bug，而且成因我覺得挺有趣的，就想說可以寫一篇跟大家分享一下。
這篇技術含量不高，可以抱持著看故事的心態來看這篇，會比較有趣一點。
故事的起源呢，是之前在公司裡面要做一些網站上的調整，試著增進一下載入的速度。當我們談到性能最佳化這一塊，其實有很多可以做的，例如說跟 Server 那邊比較有關的是：
不過以上都需要後端或是 SRE 的協助，跟前端其實關係不大。跟前端關係比較大的，也可以分成很多面向來看，例如說以「減少資源」的角度來看，可以做的事情有：
如果以「加速載入重要資源」的角度，可以加上 preload 或是 preconnect 這些 hint，來提示瀏覽器哪些東西應該先被載入。
還可以從「減少 JS 執行時間」的角度來看，例如說如果是寫 React，可以用 shouldComponentUpdate、PureComponent 或是 memo 來減少不必要的 re-render。
這一篇既然標題都寫 styled components 了，主題當然就是圍繞在 CSS 這一塊。
要學習一個新的東西，光用看的還真的沒什麼用，直接動手下去做才是比較好的方法。因為上一份工作快離職時 React hook 才剛出來，所以我之前從來沒寫過 hook，只有看過一些基本的教學而已。而前陣子開始工作之後，才終於開始寫 function component + hook。
雖然剛開始還是滿懷念 class 的寫法，但寫久之後覺得 hook 也挺不錯的。在使用 hook 的過程中也有碰到一些剛轉換的人常碰到的問題，仔細研究後發現這篇文章要提的案例還滿不錯的，如果能夠理解這個案例，應該就可以掌握到 class 與 function component 根本上的不同，因此寫了這篇來記錄一下心得。
話說如果你已經寫 function component 一陣子，hook 也用得滿習慣的，而且都有把官方文件還有 dan 哥的文章好好看過，基本上不會從這篇文章獲得任何新知識。這篇適合的對象是剛轉換到 function component，而且不太確定跟 class 的差異是什麼的人。
前陣子看到了這個寫得很棒又很漂亮的教學：Regular Expressions for Regular Folk，再加上之前一直沒有在自己的課程裡面教到 Reglar Expresioon，可是這在開發上又滿常見，於是決定寫一篇文章簡單講一下這個主題。
因此呢，這篇是給完全不懂這是什麼的初學者看的，所以會講得滿淺的，會帶到的例子應該也都是相對簡單的東西，模式也比較固定，需要考慮的邊界條件少很多，學習起來我認為也會比較容易。
好，接下來就開始吧！