FLIP 技巧總複習

前言在前端的世界中,如何優化 performance 一直都是很重要的議題,也常常被拿來當作評斷前端工程師能力的一個依據。效能調教有許多方面可以探討,但最主要的重點就是希望使用者在操作網站時,不會感受到頁面跳動,尤其是當網站有動畫效果時,些微的跳動就會引起使用者注意。 大概在去年的時候,同事為了解決 CSS Animation 在頁面上的不順暢,研究了不少 hack 技巧,其中一個讓我覺得很特別的就是今天的主角:FLIP。 FLIP 技

Read More...

PWA 實戰經驗分享

前言前些日子在忙公司的產品改版,從原本的 PHP 換成後端 Go + 前端 React SPA,分成桌面版跟手機版兩個不同的 Project,而既然都改版了,自然要把最新最潮的 PWA 也放在目標裡面,之前耳聞 PWA 很久但卻沒有實作過的我也有了機會來嘗試這個東西。 如今產品已經改版完畢且上線了兩三個月,慢慢穩定下來,在優化 PWA 的過程中也讓我有了一些心得可以讓大家分享。 在舉一些實際案例之前,先讓我們來談談到底怎樣才算是 PWA

Read More...

如何使用 Python 程式操作 Excel 試算表

前言Excel 幾乎是所有職場工作者最常使用的 Office 軟體工具,小至同事間訂便當、飲料,大到進出貨訂單管理,應收應付賬款的財務報表等都有它的身影。在一般工作上,你可能常常需要在不同表單中複製貼上許多的欄位,或是從幾百個列表中挑選幾列依照某些條件來更新試算表內容等。事實上,這些工作很花時間,但實際上卻沒什麼技術含量。你是否曾想過但使用程式語言來加快你的工作效率,減輕瑣碎的重複性無聊工作但又不知道如何開始? 別擔心,這邊我們就要使

Read More...

一起來看 Joshua B. Tenenbaum 教授有趣的認知科學研究 - Building Machines that Learn and Think Like People

前言Joshua B. Tenenbaum 教授的研究很有趣,他從小嬰兒的行為出發,研究人們是如何透過無數次跟世界的互動,建立起簡單的物理概念(e.g. 物質不滅、物質不會浮在半空中、物體會撞到彼此等等)、還有簡單的心理學(e.g. 看到別人去抓門把,就可以猜到那個人想要開門)。 今天就想要來介紹一下他的研究和未來的藍圖,讓有興趣鑽研人工智慧的讀者一起看看認知科學跟人工智慧的最前端研究。 我們是從什麼基礎開始建構起一切的能力?這個問題,

Read More...

透過製作 Babel-plugin 初訪 AST

前言最近公司同事組了 Design pattern 的讀書會,剛好這週研讀到 Visitor Pattern 時,同事介紹說我們每天在用的工具 Babel 就是採用 Vistor Pattern,透過 visitor 拜訪 AST (Abstract Syntax Tree),進而將程式碼進行對應轉換。 這除了勾起我前陣子想要了解 AST 的想法外,也再度提醒我對於 Babel Plugin 背後的實作方式不太了解,只知道像是 ESLi

Read More...

AWS Lambda + GitHub API + Google Sheet = 自動化簽到系統

前言這一年間我利用閒暇之餘嘗試進行了幾場教學實驗,希望能透過持續的教學改進自己的教材,從學生的反饋當中得到一些心得。 而在進行這些教學實驗的時候,我常常在想可以透過哪些現成的服務減少我的負擔,畢竟身為工程師嘛,很想把一些瑣碎的事務自動化,長期下來可以節省的時間是很可觀的。 半年前有了第一次嘗試,也在這邊分享了心得:利用 Github Classroom 加 Travis CI 打造改作業系統,有了自動改作業系統以後,確實省下不少麻煩。

Read More...

Docker Compose 建置 Web service 起步走入門教學

前言身為一個開發者最惱人的莫過於環境建置和部屬應用程式。隨著 Docker 容器和虛擬化技術進步以及 DevOps、Infrastructure as Code 文化的推廣,讓我們可以更容易在不同環境開發部屬並調度(Orchestration)我們的專案應用程式。在 Docker 中,除了 Docker 指令和 Docker Engine 背後的技術外,最重要的莫過於 Docker Machine、Docker Compose 和 D

Read More...

如何充滿熱情地學習 - 以資料結構為例

前言最近不管是工作、還是自己額外的學習,都感受到擁有熱情是很重要的,有熱情,才更想投入心力,把技能磨練到頂尖,也在過程中獲得更多樂趣! 最近大家都喊著要學程式設計,因為有超級爆炸多的未來應用,例如虛擬實境、擴增實境、人工智慧、機器人、區塊鍊等等東西都需要大量的程式設計師。 但是,要把程式寫好,良好的資料結構與演算法基礎是不可少,網路上也已經有好多好多的學習資源了。可是,在透過這些資源學習的時候,常常感受到的都是「題目好難」、「好多東西要

Read More...

使用 AntV 製作資料圖表-台灣老年人口與長照機構供需比

前言隨著年齡增長,多少開始會遇到家人或親戚需要長期照護,入住療養院或醫院的狀況,接者就會發現許多照護中心可是一位難求,院中的照服人員或是醫護人員也得以一擋百,讓我很想知道目前台灣整體來說,老年人口、長照機構與照服人員的比例失衡有多嚴重。而剛好在前陣子 @huli 大大介紹了Ant design,讓我再次注意到同樣為螞蟻金服出品的 AntV,稍微研究之下發現它使用起來非常簡單快速,並且一樣有 React、Angular 與 Vue 的版本

Read More...

原來 CORS 沒有我想像中的簡單

前言CORS(Cross-Origin Resource Sharing,跨來源資源共享)在前端一直是個很經典的問題,簡單來說就是因為瀏覽器的一些安全考量,你在載入其他網域的資源時會受到一些限制,解決方法也很簡單,就是在 Server 那邊加上一些 response header 例如說 Access-Control-Allow-Origin,有了這個 header 之後瀏覽器就會認為你是有經過驗證的,就沒什麼問題了。 針對這個問題,我

Read More...