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

深入 Session 與 Cookie:Express、PHP 與 Rails 的實作

前言這是一系列共三篇的文章,我稱之為 Session 與 Cookie 三部曲。系列文的目標是想要由淺入深來談談這個經典議題,從理解概念一直到理解實作方式。這是系列文的最後一篇,三篇的完整連結如下: 白話 Session 與 Cookie:從經營雜貨店開始 淺談 Session 與 Cookie:一起來讀 RFC 深入 Session 與 Cookie:Express、PHP 與 Rails 的實作 第一篇以白話的方式來談 Ses

Read More...

Leetcode 刷題 pattern - Two Pointer

前言身在大 CS 時代,有越來越多人投入刷題的行列,在眼花撩亂的題海中,要想有效率地刷題,掌握並通達題目解法背後,可以不斷被拿來使用的觀念,才能做到以簡禦繁。 今天就要跟大家介紹一種演算法的 pattern - Two Pointer。 Two Pointer 的第一個範例 - Leetcode #167 Two Sum II題目我們先看一下題目的敘述: 輸入是一個 array,裡面是已經排好序的 int,剩下就是要找到加總起來等於

Read More...

使用 Prometheus 和 Grafana 打造 Flask Web App 監控預警系統

前言身為一個開發者,當我們部屬一個 Web service 時,不是射後不理,而是需要透過監控預警系統去 monitor server 的運行狀況,並在緊急狀況即時通知相關人員作對應處理。所以透過好的 monitoring/alert system 了解目前 server 硬體系統使用狀況(CPU/Memory usage)和整個 service 的網路 networking 狀況是非常重要的一件事情。若是有經驗的讀者,可能過去曾經使

Read More...

一起來了解 Web Authentication

前言在今年年初的時候,W3C 正式將 Web Authentication (WebAuthn) 列入正式標準,開發者可以透過 API 啟動 FIDO 2 驗證,讓使用者透過行動裝置、指紋辨識或硬體安全金鑰來登入帳號,不需輸入密碼! 雖然目前支援度還不高,但既然已成為標準,沒理由不來認識一下何謂 Web Authentication,以及我們可以如何使用。今天就一起來了解我們能如何使用 Web Authentication,增加網站安全

Read More...