阿榮｜方格子 vocus

阿榮

6 位追蹤者

母阿~ 哇阿榮拉。從英文老師轉職前端學習者，分享前端的學習筆記、轉職的心路歷程和那些我如果早點知道就好的事。正在進行 Creative Coding 的每日挑戰，偶爾也會分享練習的作品

阿榮 | 前端 ~ 互動藝術程式

2會員

37內容數

主要放程式學習筆記，分享 Creative Coding 相關內容、作品

由新到舊

[ CSS ] 什麼是 CSS Reset？避免網頁在不同瀏覽器中長不一樣。用 CSS Reset 來「重置」和統一瀏覽器預設樣式。

var、let 與 const 的差異 | JavaScriptvar let const 的差異

型別 - 面試核心 | JavaScript 針對 JavaScript 中的原始型別和隱性轉型進行了詳細的探討

可選串連 ?. | JavaScript可選串聯（?.）運算符用於訪問 object 的屬性或調用函數。如果使用該運算符訪問的object 或調用的函式為 undefined 或 null，則表達式會回傳 undefined，而不是拋出錯誤。

什麼是向量 (vector)？ | p5.js向量 vector: magnitude 量 + direction 方向

點擊圓形隨機變色 | p5.js隨機不重疊的圓形 | p5.js 變化版，dist() 除了用來判斷兩個圓是否重疊，也可以拿來判斷滑鼠在哪個圓內。

立即函式 IIFE 是什麼？優缺點有哪些？| JavaScript立即(調用)函式 (簡稱 IIFE，Immediately Invoked Function Expression) 是種在定義完可以馬上執行的函式表達式。

有效學習的四個步驟 | 思維槓桿今天邊運動邊聽這集 podcast，做一下重點整理，紀錄喜歡的句子跟觀念。學習四步驟：學 ➡️ 說 ➡寫 ➡️ 畫

JavaScript 有哪些資料型別? 怎麼辨別變數的資料型別?JS 資料型別分為兩大類，原始型別 (Primitive values) 和物件型別 (Objects)。

隨機不重疊的圓形 | p5.js來源影片：9.8: Random Circles with No Overlap - p5.js Tutorial 目標：想要畫隨機且不重疊的圓型

2665. Counter II | leetcode2665. Counter II 題目

CSS 選擇器權重CSS 樣式採用規則：先看權重，再看誰後

為什麼要限制作用域暴露 (limit scope exposure)* 避免命名衝突 * 避免非預期行為 * 避免非預期依賴

Creative Coding 作品變化概念Creative Coding 作品變化概念，有或沒有的差別，隨機性，色彩模式的調整...等

Creative Coding 資源彙整Creative Coding 資源彙整

JavaScript Class類別 (class) 是在 ES6 中引入，用來作為建立新物件的模板。它可以將程式碼封裝起來。

Express Web | Node.jsExpress 是一個流行的 web 框架，使用 JavsScript 實現，執行在 node 環境上，主要用來寫後端應用。

npm | Node.jsnpm（全名 Node Package Manager，node套件管理器）

內建模組 path 介紹 | Node.jspath 模組簡介

今晚我想來點【蘑菇濃湯】洗腦兒歌蘑菇濃湯 cover 蘑菇濃湯 cover 配上用 p5.js 做的小動畫點擊連結

核心模組 - http.createServer() | Node.js透過 node 的 http 模組來建立 web 伺服器範例

Global 物件和模組 | Node.jsGlobal 物件和 node 模組特性的介紹

簡單測試 Node.js | Node.js在終端機試玩或 VS Code 執行 JS 檔

安裝 Node.js 流程 | Node.js安裝 Node.js 的流程

Node.js 和 V8 引擎簡介 | Node.jsV8 由 Google 開發的開源 JavaScript 引擎

圖片最佳化 | 前端效能優化幾乎所有的網站都一定會用到圖片和 icon，甚至可能會需要載入大量的圖片，它們也是網站中佔比最多的資源，所以透過優化這些圖片資源，就可能帶來很大的效能提升。

Code Minimize & Uglify | 前端效能優化Code Minimize & Uglify (程式碼最小化和醜化)

使用者體驗指標介紹 | 前端效能優化使用者體驗的三個核心指標 Core Web Vitals：LCP、INP、CLS，以及 RAIL Model 介紹。

網站效能優化工具 | 前端效能優化檢測網站效能的工具介紹

為什麼要優化前端效能? | 前端效能優化拜讀莫力全大大的 Day02 X 為什麼要在前端做效能優化? 重點整理 & 重述 & 加一點點自己的補充

「前端效能優化」前傳 | 前端效能優化為什麼要學前端效能優化?

Less Is More 少即是多Noise 是我從學 p5.js 一開始到現在最喜歡的一個函式，只要加上它，就會有種作品有了自我意識和生命的錯覺

Nuxt 安裝流程Nuxt 的安裝流程，一起來試試看吧

Nuxt | 一個框架的框架對，沒錯。Nuxt 是一個框架 (Vue) 的框架。

你喜歡鐵板燒還是餐廳? (CSR 和 SSR)靈光一閃的比喻

CSR (Client Side Rendering) 客戶端渲染CSR（Client Side Rendering）是一種將渲染資料的過程交由瀏覽器端處理的方法。

SSR (Server Side Rendering) 伺服器端渲染伺服器端渲染（SSR）是一種在伺服器端渲染 HTML 頁面的技術。