iT邦幫忙

前端三分鐘相關文章
共有 91 則文章
鐵人賽 Software Development DAY 1

技術 可以簡單就不要複雜的程式碼與人生

開始之前,先來談談工程師的日常 程式碼因為需求一直亂加,本來的水果刀被改成瑞士刀。 傳承的祖產本體難以更動,導致疊床架屋違建加蓋再加蓋,一個判斷不夠那就補兩個...

鐵人賽 Modern Web DAY 30

技術 用 JavaScript 測試你的網站 (30)

測試這件事情是為了一致性,為了不讓伴侶不信任,在男女之間交往一致性也是很重要的一環。 在日常的對話和相處過程中,彼此都會透過些方法來確認, John Rempe...

鐵人賽 Modern Web DAY 29

技術 Hack 網頁從按鈕開始!HTML/CSS/JS Debug 技巧 (29)

從搶票按鈕談怎麼使用開發人員工具來 Debug/Hack 你的網頁,並且介紹網頁開發中 HTML/CSS/JavaScript/API Debug 技巧與方法。...

鐵人賽 Modern Web DAY 28

技術 CI/CD X Jenkins、CircleCI、Github Action (28)

偷吃完都有記得擦嘴嗎?! 背地裡在檯面下做了一些事情又不想被發現或影響另一半怎麼辦?! 有沒有辦法自動化的把相關痕跡去除或隱藏?! 當然正常情況下是要盡量避免做...

鐵人賽 Modern Web DAY 27

技術 8 個寫 JavaScript 前該懂的問題 (27)

經過了一陣子的學習,小編認為有 8 個寫 JavaScript 前可以思考的問題,這就好像談戀愛前,我們必須 ? 理解自己是什麼特質的人? 懂得發揮自己的特長和...

鐵人賽 Modern Web DAY 26

技術 前端函式庫與框架 X 框架御三家怎麼選 (26)

前端的框架跟函式庫百百種,究竟該怎麼選? 其實這跟伴侶的選擇有點像,要選當下適合我們的而非一昧的追求最好,當需求與供給沒辦法對應時,勉強別人接受並不公平,勉強自...

鐵人賽 Modern Web DAY 25

技術 前端模組化與打包工具 X Webpack、Rollup、Parcel (25)

模組可以理解是在情場小白在跟女孩相處的過程中卻意外擁有把妹高手前同事提供的 "教戰守則",同事總會在一些時間、情境時告訴你一些小撇步讓男女之...

鐵人賽 Modern Web DAY 24

技術 Monorepo 和 Polyrepo (24)

在版本控制系統中 Monorepo 和 Polyrepo 分別是兩種用來管理模組化程式碼的軟體開發策略。 以男女之間來說,就像是金錢是要分開管理 (Poly)...

鐵人賽 Modern Web DAY 23

技術 前後端分離或在一起 X CSR 與 SSR (23)

前後端分離或是在一起間接影響網頁渲染的方式,常見的渲染形式會有用戶端渲染 (CSR) 和伺服器端渲染 (SSR) 兩種。 這就好像男女朋友是否同居一樣,會大大影...

鐵人賽 Modern Web DAY 22

技術 前任物品斷捨離 X 專案資料夾架構與收納 (22)

專案資料夾架構 今天談談專案資料夾的結構,在還沒開始寫任何程式前,可以思考的是檔案要怎麼收納。 不知道各位情場高手都怎麼收納前男友或前女友們的禮物呢? 是按照物...

鐵人賽 Modern Web DAY 21

技術 Git 時光機 X 專案協作與開發指南 (21)

Git 版本控制 Git 本身是一個分散式 (一個遠端和很多本地端) 的版本控制工具,會把每次提交的內容 (commit) 用快照透過校驗碼標示並儲存起來,校驗...

鐵人賽 Modern Web DAY 20

技術 語意化版本透露什麼訊息 (20)

當我們使用 JavaScript 開發時,常常會需要使用 npm 進行 node_modules 的安裝,相關的使用說明可以參考前一篇寫的 NPM 常用指令教學...

鐵人賽 Modern Web DAY 19

技術 npm 入門到進階常用指令與版本規則教學 (19)

npm 介紹 什麼是 npm? npm 是 Node Package Manager 的縮寫,是 Node.js 預設的 node 套件管理平台,npm 本機端...

鐵人賽 Modern Web DAY 18

技術 定義屬於你的風格 X VS Code Extensions X ESLint X Prettier (18)

VS Code Extensions VSCode 的市集提供了相當多的 Extensions 能增進工程師的開發效能,Extensions 就像把妹神器,會幫...

鐵人賽 Modern Web DAY 17

技術 用 HTTP Cookies 記住你的曾經 (17)

為什麼需要 Cookie 在前兩篇文章小編介紹了非同步 AJAX和網頁即時通訊技術,可以發現前後端 API 的溝通只關注在 "傳入" 和 &...

鐵人賽 Modern Web DAY 16

技術 網頁即時通訊實作 X Long-Polling, Server Sent Events, WebSockets (16)

在另外一篇文章小編介紹了透過非同步 AJAX 的方式跟伺服器進行溝通,那需要即時的同步溝通怎麼辦? 這篇文章接著會介紹可以做到網頁即時通訊服務的技術: Lon...

鐵人賽 Modern Web DAY 15

技術 前端 AJAX 全攻略 (15)

layout: posttitle: "前端 AJAX 全攻略"subtitle: "從把妹角度理解前後端如何和平相處&quot...

鐵人賽 Modern Web DAY 14

技術 Web API 實作解析 (JavaScript、Java、Python) (14)

小編在另外兩篇文章分別介紹了什麼是 API和 API 系統設計方法,談了許多 API 概念上的東西。 這篇文章會從實作的角度用 JavaScript、Java、...

鐵人賽 Modern Web DAY 13

技術 API 系統設計方法 X 面試指南 (13)

API 重要的是訊息交換,在意的是傳入和傳出,就像談戀愛的時候,要知道對方問了什麼問題可能是對你有好感,而又該怎麼應對。 API 在系統設計上通常是為了讓團隊合...

鐵人賽 Modern Web DAY 12

技術 什麼是 API? RESTful API 該怎麼理解? (12)

在這系列的前幾篇文章著重在個體,探討了網頁端是怎麼由 HTML 組成以及透過 CSS 長成什麼樣子,這篇文章會來介紹前後端溝通的重要觀念 API。 什麼是 AP...

鐵人賽 Modern Web DAY 11

技術 用 Hexo 和 Github Pages 建立部落格吧 (11)

前幾年在小編當工程師時常常逛 Github,發現有些人會利用這個空間來開部落格,於是稍微研究後就決定動手做一個,也就是大家現在所看到的前端三分鐘。 在另外一篇文...

鐵人賽 Modern Web DAY 10

技術 想架站不會寫網頁,那就用 WordPress 吧 (10)

不會寫程式也可以架設網站甚至賺錢?! 隨著科技的進步,答案是可以的。 近年來各種軟體都轉換成服務的形式 (SaaS),透過網路就可以存取和使用並達到預期結果。...

鐵人賽 Modern Web DAY 9

技術 用 LinkFree 製作一個 Github Pages 取代 LinkTree (9)

什麼是 LinkTree LinkTree 是一頁傳送門,透過 IG 的個人檔案連結來做相關行銷與各平台的串聯。 透過 LinkTree 整合 Facebook...

鐵人賽 Modern Web DAY 8

技術 九種亂寫 CSS 的方法 X 有比亂化妝好嗎 (8)

亂寫 CSS 有比亂化妝好嗎? 如果說 CSS 是主掌網頁外表的一個角色,亂寫 CSS 就相當於亂化妝的概念。 CSS 在撰寫上,整體來說是圍繞在處理特異性 S...

鐵人賽 Modern Web DAY 7

技術 CSS in JS (react) 簡介與優缺點分析 (7)

什麼是 CSS in JS CSS in JS 解決了 CSS 命名的問題。 由於 component-based 的概念興起元件開發成為顯學,CSS in J...

鐵人賽 Modern Web DAY 6

技術 CSS 框架用了什麼設計模式 (6)

小編曾介紹過 CSS 的設計模式,這篇就讓小編開箱那些年小編曾體驗過的 CSS 主流框架: Tailwind CSS PureCSS Bootstrap an...

鐵人賽 Modern Web DAY 5

技術 解密 CSS 處理器 SCSS/PostCSS (5)

隨著 CSS 開始越來越複雜,由於 CSS 語法受限而發展出了 CSS Pre-/Post-processors (預處理和後處理) 來拓展和優化寫法。 什麼是...

鐵人賽 Modern Web DAY 4

技術 透過 BEM、SMACSS、OOCSS、Atomic CSS 簡化樣式開發流程、減少維護成本 (4)

本篇文章將提到怎麼透過 BEM、SMACSS、OOCSS、Atomic CSS 的特性來: 縮短開發時間 減少需維護的程式碼 結構與樣式 CSS 選擇器和規...

鐵人賽 Modern Web DAY 3

技術 CSS 易容術入門 (3)

CSS 層疊樣式表 CSS (Cascading Style Sheets) 層疊樣式表,不像 HTML 一樣是標記語言,也不是標準的程式語言,但在 SCSS、...

鐵人賽 Modern Web DAY 2

技術 HTML DOM、HTML5、HTML Template (2)

什麼是 HTML 底下用三句話來說明什麼是 HTML HTML (HyperText Markup Language) 是一種基礎技術是 “標記” 語言。 H...