Don’t break the Web:以 SmooshGate 以及 keygen 為例

前言

最近 YDKJS(You Don’t Know JS 的縮寫,中譯版翻成:你所不知道的JS)有了第二版,名叫 YDKJSY,Y 是 Yet 的意思(中文版可能可以翻叫:你還是不知道的 JS)。這個第二版還沒全部完成,但在 GitHub 上面已經公開了最前面的一些章節。

搶先讀了一下第一章,在講與 JS 相關的歷史,其中提到一段讓我很感興趣的議題:

As such, sometimes the JS engines will refuse to conform to a specification-dictated change because it would break that web content.

In these cases, often TC39 will backtrack and simply choose to conform the specification to the reality of the web. For example, TC39 planned to add a contains(..) method for Arrays, but it was found that this name conflicted with old JS frameworks still in use on some sites, so they changed the name to a non-conflicting includes(..). The same happened with a comedic/tragic JS community crisis dubbed “smooshgate”, where the planned flatten(..) method was eventually renamed flat(..).

大意是在說有時候 JS 的規格必須跟現實(已經存在的那些舊的實作)妥協。例如說原本 Array 要加上一個叫做 contains 的 method,但因為會有問題所以改叫 includes,flatten 也改名叫做 flat。

還有一個上面特別標起來的詞「smooshgate」,用這個當關鍵字去找才發現是去年三月左右發生的事件,至於發生了什麼,底下會詳述,跟上面提的 flatten 有關。看到有這件事的時候我第一個反應是:「咦,我怎麼什麼都不知道?」,查了一下繁體中文的資料,大概也只有這篇有提到:SmooshGate,以及[筆記] 3 種 JavaScript 物件屬性的特性這篇有擦到邊而已。

在仔細研究了一下事情的來龍去脈之後,覺得是個滿有趣的議題,因此寫了這篇跟大家分享。

Read More...

Leetcode 刷題 pattern - Fast & Slow Pointer

前言身在大 CS 時代,有越來越多人投入刷題的行列,在眼花撩亂的題海中,要想有效率地刷題,掌握並通達題目解法背後,可以不斷被拿來使用的觀念,才能做到以簡禦繁。之前 Huli 寫的 程式解題新手入門注意事項 也講得非常好,寫題目是為了學會解題的思考方法,確保自己掌握重要的資料結構跟演算法。這也是為什麼我想要寫這系列的文章,把多個散落在各處的題目銜接起來,以後看到相似的問題就可以舉一反三,而不是去背各題目的解法。 舉例來說,之前遇過一題電話

Read More...

簡明 Linux Shell Script 入門教學

前言Shell 是一種讓使用者可以和作業系統 Kernel(核心用來控制 CPU、記憶體、硬碟等硬體)互動溝通的橋樑。Shell Script 主要是使用在 Linux 和 MacOS 等 Unix-like 作業系統的自動化操作指令的程式語言。其透過 Unix shell 命令列直譯器來執行(我們這邊主要使用 bash shell,其他的 Unix shell 觀念大致類似),使用方式有點類似直譯式程式語言(不用編譯直接執行)。在

Read More...

十分鐘、五步驟,SVG 動起來!

前言在 Codepen 上常常看到很多會設計又懂寫前端的高手,用 SVG 畫出很漂亮的圖案後,還能讓他們產生可愛的動畫,我一直很好奇他們是怎麼實作的,總覺得很困難,好像得對 SVG 透徹了解,並且自己畫出那些 SVG 圖案,才有辦法實作動畫。但其實不然,今天就來分享一個簡單的小技巧,讓你在短短十分鐘內就能讓一個靜態的 SVG 圖案活躍起來! 簡單看個成品,你可以點選下面範例中的 build 按鈕,可以看到原本靜止的 SVG 房子動了起來

Read More...

程式解題新手入門注意事項

前言

在這兩三年之間,「刷題」似乎成為了一種風潮。本科系要去面試大公司的時候要刷題,非本科系出去面試也要刷題,好像只要沒有刷題就會落後他人,就會被公司刷掉。

其實我一直不是很喜歡「刷題」這個詞,主要是因為「刷」這個字。不知道大家對這個字的解讀是什麼,但我會認為有種「為了寫題目而寫題目」的感覺,就好像題海戰術那樣。雖然說題海戰術用得好的話成效滿顯著的,但總感覺很多人刷到最後會變成「看過的題目就會,沒看過的就一定不會」,如果是這樣子的話,那我覺得不是一件好事。

之前我有寫了一篇文章:當我們在學程式時,要學的到底是什麼?,稍微談了一下這件事情。

總之呢,比起刷題這個詞,我更喜歡用「程式解題」四個字來表達我想表達的意思。

Read More...

Leetcode 刷題 pattern - Next Greater Element

前言身在大 CS 時代,有越來越多人投入刷題的行列,在眼花撩亂的題海中,要想有效率地刷題,掌握並通達題目解法背後,可以不斷被拿來使用的觀念,才能做到以簡禦繁。 繼之前寫過的 Two Pointer 跟 Sliding Window,今天要來跟大家介紹另一種演算法的 pattern - Next Greater Element。 Next Greater Element 的第一個範例 - Leetcode #496 - Next Grea

Read More...

使用 Python 和 PyGame 遊戲製作入門教學

前言隨著天氣越來越冷,很多人卻納悶蚊子為何不減反增。身為一個工程師若沒辦法成功在現實社會和蚊子好好相處,只好做打蚊子遊戲調劑身心(咦)。本文將透過一個打蚊子遊戲,帶領讀者學習如何使用 Python 的 PyGame 模組製作一個簡單的打蚊子遊戲,在學習遊戲開發的基本觀念的同時,也讓我們在虛擬社會中可以彌補現實社會中的遺憾(喂)。好啦,就讓我們開始 PyGame 遊戲開發之旅吧! PyGame 初體驗PyGame 是一種 Python

Read More...

Web Accessibility 的重要性

前言你是否曾因為網路上被歧視、被霸凌的新聞或影片而憤憤不平?你是否曾因為各種身殘心不殘的勵志故事而感到激勵?如果你有過上述經驗,那當你在製作網站時,是否曾經考量過 Web Accessibility(a11y) 呢? 老實說,我真的很少在實作時認真的驗證自己的網站的可訪性,花在考量是否能支援 IE 9 的時間還比較多一些。(想當年在政府機關服務時,看到局處長很自豪官網拿到無障礙網站評等第一時,還覺得莫名其妙,想說網站這麼醜,到底哪裡無障

Read More...

JavaScript 中的同步與非同步(上):先成為 callback 大師吧!

前言

如果要舉出一個在 JavaScript 裡面很重要也很常用,但新手常常搞混的概念,那「非同步(Asynchronous)」當仁不讓,絕對是第一名。跟其他那些 thisclosureprototype 或是 hoisting 比起來,非同步在實際開發的時候用到的頻率高太多了,而且是初學者常常會踩坑的地方。

非同步真的那麼難嗎?

我相信不是的。只要循著一個正確的脈絡前進,就可以循序漸進理解為什麼需要非同步,也能知道在 JavaScript 裡面是怎麼處理這種操作的。

類似的主題我其實在四年前就寫過,但現在回頭看實在是寫得滿差的,所以四年後重新挑戰這個主題,希望能寫出一篇品質不錯的文章,把非同步這件事情講清楚。

在寫這篇文章之前,參考了 Node.js 的官方文件,發現在非同步的講解上其實做得不錯,因此本文會以類似的切入點開始談這個問題。如果不會 Node.js 也沒關係,我底下會稍微做點介紹。

建議閱讀本文以前需要具備 JavaScript 基礎,知道如何使用 JavaScript 操作 DOM,也知道什麼是 ajax。

接著就讓我們開始吧!

Read More...

2019 Web Backend 面試總結

前言會想分享這篇整理,主要是因為今年是我第一次面試工作,在準備期間我曾無比焦慮,看過一篇又一篇的面經,總覺得怎麼還是這麼多不懂的,而且看了也未必在面試中回答得出來,後來我發現,原來是對於面試會考哪些類別的問題沒有概念,所以才感到焦慮。希望透過這篇後端面試總結,讓即將上路或是正在途中的人,可以有個方向,知道如何準備! 我會將後端面試分為六大類: 演算法(Algorithm) 程式語言(Programming Language) 作業系統

Read More...