十分鐘、五步驟,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...

Leetcode 刷題 pattern - Sliding Window

前言身在大 CS 時代,有越來越多人投入刷題的行列,在眼花撩亂的題海中,要想有效率地刷題,掌握並通達題目解法背後,可以不斷被拿來使用的觀念,才能做到以簡禦繁。 繼上次的 Two Pointer,今天要來跟大家介紹另一種演算法的 pattern - Sliding Window。 Sliding Window 的第一個範例 - Leetcode #209 - Minimum Size Subarray Sum題目我們先看一下題目的敘述:

Read More...

如何使用 Python Tkinter 製作 GUI 應用程式入門教學

前言除了 Web 和 Mobile App 之外,桌面應用程式(Desktop Application)也是使用者常使用的應用程式圖形化使用者介面(GUI)。透過 GUI 可以讓一般使用者透過比較直覺的方式來和程式互動(畢竟要讓一般的使用者使用 Command Line 來操作程式是挺難的),也可以讓整個使用者行為更為簡便。許多程式語言都有提供 GUI 的函式庫,讓開發者可以透過常見的元件,例如:按鈕、文字方塊、下拉式選單等方式來設計

Read More...

從製作 visfest 2019 badge 認識 ObservableHQ

前言軟體工程師應該很少沒參加過 Conference 吧,不管是社群或是學術性的,只要是與會者都會拿到一面主辦方製作的名牌,上面除了印著你的大名外,大多就剩下 Conference 名稱與 Logo 了,然而,由灣區的資料視覺化社群所舉辦的年度聚會 - visfest unconf 很是特別,他們提供與會者一個製作自己 badge 的機會,讓大家自行發揮創意,特別之餘也很符合整個會議的調性。今年八月是他們舉辦的第五屆 visfest

Read More...