PTT新貼文提醒、單字蒐集 Chrome 擴充套件？一同窺探有哪些強大的 API 可以使用

大家是否有在使用瀏覽器『擴充套件』呢？筆者已經使用 uBlock 這款開源的廣告阻擋器多年囉，但是一直以來都不知道瀏覽器擴充套件是如何製作以及其可取用的 API 為何，前陣子花了點時間研究一下，才發現在 Chrome/Chromium 上開發擴充套件竟然是如此的簡單，而且可取用的 API 跟在...

(Photo by Markus Winkler on Unsplash) Google 在今年5月28日發表了一篇關於提升網站使用體驗為的部落格文章，公布新的搜尋引擎排名指標 Core Web Vitals，以三個使用者體驗導向的指標所組成，分別為： Largest Contentful...

(Photo by Apa yu) 前言 隨著網路技術的發展，前端應用已經是網頁開發不可或缺的一塊，隨手打開一個網站，隨處都可以看到互動元素，從大至首頁炫炮華麗的 JavaScript 特效，小到輸入資料出現的驗證訊息，甚至是早些年代最愛用的跑馬燈(不要問我什麼是跑馬燈)，或是近幾年熱門的...

(Photo by Clio Labs on Medium) 本篇文章主要是在說明如何在 Rails 中 使用 Arel 來做資料查詢, 以及解釋為何要使用 Arel 來操作的原因 使用的開發環境設置如下: Rails: 6.0.3 Ruby: 2.7.1 Arel sql Arel

前言 在軟體工作中，經常要對文字做處理，例如資料的搜尋、擷取並重組文字、驗證使用者輸入等等，遇到這類與字串有關的問題，依情況使用正規表達式可以免去很多處理上的麻煩，使程式碼更簡單好懂。 這篇文章將帶你用 15 分鐘的時間，透過 MDN文檔 與幾個常見的例子，帶你初步認識並使用這門技術，我們話...

(Photo by Louis Reed on Unsplash) 目錄 前言 5款 Chrome 擴充功能 1. SEO Peek 2. Structured data testing tool 3. Lighthouse 4. AMP Validator 5. Web Vitals

React 是 Facebook 2013 年推出的 Javascript 的框架，這篇文章是針對 React component 的重構，對 React 就不多做介紹。Tailwind 是 2017 年正式發佈的 CSS 框架，提供一堆超基本的 class，例如：font-bold、text...

(Photo by Prateek Katyal on Unsplash) Build a URL Shortener from scratch? 大家應該都曾經因為分享方便、想要追蹤點擊等目的使用過 Bit.ly 或是已關閉的 Goo.gl 網址服務。 自行打造 URL 縮網址小工具，...

什麼是「技術債」? 什麼是「遺留的程式碼」? 技術債 (Technical Debt) 是指在某些情況或是因素，不得已只好暫時以堪用的方式撰寫的程式碼，而技術債常會與俗稱「遺留的程式碼」 (Legacy Code) 一同被提起。 技術債容易發生在專案功能開發時會造成的狀況： 為了時程上...

(Photo Credit: “Person Standing on Train Rail” by Clayton Cardinalli on Unsplash) 目錄 前言 使用 reload! 來重新讀取更改過後的 Code 呼叫 Helper Methods 與發送 HTTP Request...