2019-12-07
JavaScript 的 if 條件式
JavaScript的 if 條件式介紹，在正式介紹 if 條件式寫法之前，先來介紹比較運算子與邏輯運算子，因為 if 條件式內的條件會經由運算子來進行比較與運算，接著再說明 if 的寫法以及 switch 之間的寫法，兩者之間有甚麼差異。
2019-12-04
2019-12-03
2019-12-03
JavaScript reduce 在做什麼？
陣列方法有很多種，包括 forEach、map、filter 等等，其中 reduce算是比較複雜且容易讓人感到困惑的一種方法，因此這篇文章會介紹 JavaScript reduce 的功能與基本應用。
2019-11-28
2019-11-26
2019-11-26
2019-11-26
2019-11-26
十分鐘建立雲端 Firestore 資料庫
身為前端工程師的我，其實都對 NoSQL 比較拿手，例如 MongoDB、Firebase 的 Realtime Database。但由於 W3Hexschool 的網站是用 Firestore 開發的，也讓我對它產生十足的好奇，也因此有這篇教學文。
2019-11-25
如何最佳化網站的圖片效能？
圖片是網站很重要的視覺元素，無論是 Banner、Icon、Logo、各種圖表等等，佔據了網站絕大多數的可視空間，因此如何優化圖片就成了前端工程師一門重要的學問。本文主要是針對引入正確的圖片類型，並正確呈現圖片尺寸與像素在不同裝置上來談談圖片的最佳化過程。
2019-11-22
2019-11-21
2019-11-21
2019-11-20
有點長的淺談 JavaScript function 函式
昨天在六角學院做了線上直播的介紹，過程真的是緊張到爆炸，我知道自己其實滿容易健忘的，所以不寫文章筆記心裡有點過意不去，因此這一篇 「有點長的淺談 JavaScript function 函式」就誕生了。
2019-11-19
2019-11-19
2019-11-18
2019-11-18
2019-11-18
2019-11-16
2019-11-14
2019-11-12
2019-11-11
2019-11-11
2019-11-10
2019-11-09
2019-11-09
2019-11-08
初探前端三劍客之一 - JavaScript 大神(變數、console.log() 與 textContent)
介紹如何宣告變數 (var)、console.log() 與 textContent 的功能
2019-11-06
2019-11-06
Homebrew 教學 - 以安裝 git 為例
我的背景是前端工程師，本身是使用 Mac，以往我在安裝軟體時，都是直接下載安裝檔 .pkg，所以都會下意識忽略 Homebrew 的安裝方式。但因為前幾天在安裝 mongo 時，發現他除了 Homebrew 外，其他安裝都很麻煩，也促使我想好好把這個安裝方式學 ...
2019-11-06
2019-11-05
2019-11-05
2019-11-04
2019-11-04
點擊網址自動開啟 Desktop、Mobile APP
會激發我寫這篇文的原因，是因為我很常使用 ZOOM 會議軟體，它的使用者體驗很棒，只要給參與者一個網址，點擊後就可以開啟 Desktop、Mobile APP，也讓我很好奇這段原理是怎麼做的，所以也讓我想展開一場研究之旅。
2019-11-03
2019-11-01
2019-11-01
初探前端 Unit Test
隨著專案當規模變大時，在產品上線前都會進行多次人工的測試，或是進行程式碼的重構，這都是常見的現象。但也經常因為重構或是測試後進行調整時出現改 A 壞 B 的情況，又或者花在人工測試的時間太多，因此這時就可以試著導入單元測試來輔助開發過程。
2019-10-31
如何優雅撰寫 Git Commit 訊息
撰寫好的 commit 訊息，可以幫助你日後回顧時，可以更精準方便回顧，更重要的是讓你的夥伴方便閱讀。早在 2014 年 Chris Beams 就寫過一篇 How to Write a Git Commit Message，如果裡面有提及重要的七大點。
2019-10-31
2019-10-29
2019-10-29
軟體工程師必學的文字對話藝術
不論是在工作、生活，我們都會使用 LINE、Message、Skype、Slack 等聊天溝通工具來做交流，現實生活上面對面溝通時上有所謂的 **說話藝術**，但是在這些聊天工具上使用「說話藝術」這項技能就顯得很難活用，其最主要原因是文字是沒有感情表現的一種工 ...
2019-10-28
2019-10-28
2019-10-28
淺談 BEM CSS - CSS 設計模式與架構
BEM是 Block Element Modifier 的縮寫， BEM 是一種為了讓 CSS Class 更好維護的命名方式，藉由不同組件的命名 讓程式碼易懂、可重用，進而有效率地開發和維護。
2019-10-27
2019-10-27
2019-10-24
Google reCaptcha v3 - 用 AI 辨識你是不是機器人
這其實是 Google 所推出的服務，名字叫做 Google reCaptcha，好處就是會由它來幫你驗證對方是不是機器人，避免有人惡意攻擊你的網站。 不過多少會影響使用者體驗，畢竟你流程跑到一半，還要跑驗證實在很麻煩，Google 可能也獲得了許多回饋，也 ...
2019-10-24
Day2-PWA 初體驗 - PWA 特色
在前一篇講了一大推東西，雖然也有一些範例，但是你可能會想問到底 PWA 的特色是什麼?相信在前面你應該已經有所感受到部分，所以我就列出 PWA 主要特色吧~
2019-10-24
2019-10-23
2019-10-22
2019-10-22
2019-10-22
2019-10-22
2019-10-22
CSS Masks 圖片遮罩效果
上回 CSS 文字鏤空與遮罩效果文章中，介紹了使用 background-clip 對文字進行鏤空或遮罩的效果，此次我們要來介紹另一個 CSS 樣式 mask ，透過 mask 屬性可以針對 PNG 或 SVG 設計遮罩的效果。
2019-10-22
2019-10-21
使用 padding-top/bottom 實現等比例響應式背景圖
一般處理響應式圖片時，最簡易的處理方式是將 <img> 圖片標籤寬度設置最大寬度百分比值使其高度會隨著寬度的變化自適應調整，並維持原圖片的寬高比。 若想在一區塊裡添加響應式背景圖，且維持固定的寬高比時，可使用 padding-top 或 padding-bot ...
2019-10-20
2019-10-19
2019-10-19
2019-10-19
初心者的 Ruby 從 0 開始到 Hello World
身為一個汽車維修員，阿不是，是身為一個前端工程師，應該或多或少都有聽過 Ruby on Rails 的大名吧？ 什麼！沒聽過？好吧，就跟我這個菜菜的初心者一起從 0 開始吧！
2019-10-19
2019-10-18
2019-10-18
2019-10-18
JavaScript ES6 語法糖 - 解構賦值介紹
解構賦值是 ES6 才出現的語法糖，它可以幫助我們把陣列與物件的值取出成一個獨立變數。學會這個語法糖，不僅可以幫助我們程式碼更加簡潔、開發上也會更有效率喔～
2019-10-18
寫給前端的 Chrome extension 教學
extension 的開發有蠻大一部分都與前端所需技能相符，希望透過這篇文章讓大家認識 chrome extension 並嘗試製作自己的插件工具，若是有開發出好玩的 extension 歡迎大家跟我分享！
2019-10-18
在 Nuxt.js 加入 Google Tag Manager(GTM) 及開啟頁面追蹤
分享在 Nuxt.js 加入 Google Tag Manager(GTM) 的方式，及在開啟頁面追蹤時採到的雷
2019-10-17
2019-10-17
CSS 文字鏤空與遮罩效果
最近看了一部日劇「我要準時下班」，主角東山結衣是在 WEB 製作公司上班的女性，雖然劇中的主軸並非在開發網頁上，但是仍然有不少可以讓前端開發者感同身受的橋段，整體來說算是一部蠻推薦且輕鬆的日劇…
2019-10-17
端端們該學的 Docker 筆記
Docker 是一棟虛擬的盒子 但裡面可以裝下許多你的鬼主意的盒子 是一個準備為你夢想的家建立的模擬盒子 是一個可以讓你隨時重生的盒子 是一個怎麼破壞一切還是可以重來的盒子 而它將會陪伴著你(妳)的開發人生 看到這裡是不是很興奮呢!!!? 那該怎麼開始呢? ...
2019-10-17
2019-10-17
2019-10-16
2019-10-15
2019-10-14
透過購物車來了解 Cookie 的運作方式
在電子商務網站中一定會有購物車這個功能，讓你能夠將喜歡的東西放在裡面，最後再一次結帳，這篇文章將簡單講解為什麼需要有 Cookie 以及前端技術上使用 Cookie 的方法。
2019-10-14
Cheatsheet for Array Methods - JavaScript 陣列方法大全
本篇文章適合大致了解陣列的意義及基本操作，但不熟悉陣列有哪些處理方法的人閱讀。或是平常很愛閱讀文件的人也很適合。
2019-10-12
Mkcert - 在 localhost 掛 HTTPS 神器
目前許多網站都逐漸從 HTTP 轉到 HTTPS，但是在開發環境上，又很難去測試一些必須用 HTTPS 才能測的功能。 所以這裡來介紹 mkcert 這套神器，輸入完指令就有現成憑證可以用啦~
2019-10-07