CDS2019 Next-generation web styling 整理介紹

前言一陣子沒有關注 CSS 的最新發展,最近趁著年假補帶 2019 Google Chrome Summit 時,看到這場 talk - Next-generation web styling,裡面提到不少有趣的新屬性,透過這篇文章整理一下內容,分享給各位與未來的我。註:官方在 12 月初也發佈了文字版本,習慣閱讀原文的讀者可以參考看看。 新世代的…CSS scroll-snap - native scroll inertia and

Read More...

From Nand To Tetris:想理解電腦運作,就先做出一台吧!

前言

一直以來我都很推薦一門課叫做 CS50,原因是又深又廣,而且教得深入淺出,作業又紮實,是很棒的一堂課。

而今天要介紹的這門課,我會形容它是「電腦底層版的 CS50」。

From Nand to Tetris 由兩位教授 Shimon Schocken 與 Noam Nisan 開設,與 CS50 一樣,一開始都是大學的課程,後來才轉為線上課程,在官網上這堂課還有一個副標題:「Building a Modern Computer From First Principles」,沒錯,要建一台電腦出來。

這堂課分為兩個部分,Part1 是 From Nand To HACK,Nand 是一個邏輯閘的名稱,就像 Or、And、Xor 這些也都是邏輯閘。而 HACK 是在 Part1 最後會建造出來的電腦。因此 Part1 就是帶你從最基本的邏輯閘開始,一步步把一台電腦建立出來,所以是很偏向硬體的部分。

Part2 則是 From HACK To Tetris,以電腦為基礎往軟體去延伸,會介紹到 Compiler 與作業系統等等的軟體。

Read More...

Leetcode 刷題 pattern - Breadth-First Search

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

Read More...

簡明 APCS 大學程式設計先修檢測入門教學

前言APCS(Advanced Placement Computer Science,大學程式設計先修檢測入門教學)是教育部所推動的資訊能力檢測,希望藉由舉辦具公信力之「程式設計檢測」,讓具備程式設計能力之高中職學生,能夠檢驗學習成果,並供作大學選才的參考依據(可以想成是類似程式設計版本的全民英檢)。即便引起許多討論和爭議(軟體開發重點在於透過程式語言這項工具解決生活上的問題,過分強調程式解題有可能會抹煞學生學習程式設計的熱情或是城鄉師

Read More...

GraphQL Summit 2019 與會分享

前言記得剛上研究所的時候參加了第一屆的 WebConf,沒記錯的話是 WebConf Taiwan 2013。當時兩天的議程下來,接收到的知識與衝擊讓我精疲力盡,但心中是滿溢的富足感,自此之後,只要有機會我就會去參加各種 Conference。 然而或許隨著經驗增長,平常獲取知識的管道變多,能從演講者的演說內容吸取到的新知越來越少,對於參與會議變得興致缺缺,直到我理解到在會議現場與人互動交流其實才是 Conference 的一個主要功能

Read More...

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...