要如何寫出更好的程式呢?怎樣才能夠成為一個「優秀」的新手工程師呢?事實上,寫出會動的程式不難,但想寫出好的程式其實是需要刻意練習的。透過「Code Review」是推薦新手的方法,經由反饋與討論來找出程式中可優化的空間。
說到學習切版,學習的資源和方法何其的多。每位學習者適合的學習方式不同。因此,以下會根據不同類型的學習方式,各自分享我個人使用的學習資源。
網頁設計在進入工程的範疇時,通常最常聽到的名詞就是 HTML/CSS!其實它們兩者在技術上都代表著不同的電腦語言工具,用來分別處理「網頁呈現」上的不同事情,這篇文章帶大家認識網頁設計的基礎跟前端工程師的關係。
在 React Hooks 的加持之下,Modern React Web App 有了不一樣的氣象,對於新入手的開發者來說,可以從最熟悉的 function 開始學起 React;對於熟悉 React 的開發者而言,則可以練習不受舊有思維的影響,感受 Hooks 帶來的簡潔與便利性。
Cookie 和 Session 這兩個名詞,相信大部分的開發者都不會太陌生,特別是 Cookie,從社群網站、電商平台、Google Analytics 分析等地方,無處不見它的應用;但從本質上,Cookie & Session 究竟是什麼呢?這就要從 HTTP 的特性說起。
DOM (Document Object Model)是瀏覽器所產生出來的資料結構,一方面表現出 HTML 的內容與架構,另一方面讓開發者有機會使用 JavaScript 透過 DOM 來操作頁面。
內容主要圍繞在前端相關的 Debug 偵錯技巧,只要你有網頁開發經驗,尤其: 每天都會開啟瀏覽器的 Devtools,常常需要刻 UI,以及撰寫許多 HTML、CSS ,以 JavaScript 維生,需要進行前端效能、SEO 優化。都非常推薦閱讀
當好的工程師職缺出現在求職市場時,眾多求職者將湧入其中爭取面試機會,企業使用履歷進行篩選之外,會考驗應徵者的基本開發能力以及專案經歷。前者常見的測試方式為白板題與線上題庫測驗;後者則看求職者的作品集來了解。而 LeetCode 便是常見了解題目的手段,其記錄各式各樣的題目好讓求職者有個底。
當我們把關注點分離的概念落實到軟體架構 (architectural pattern) 時,最常見的分工是把「管理資料的功能」和「呈現視覺的功能」分離。很常用的設計模式叫作 MVC 設計模式,在這個架構裡,會把軟體分成 Model、View、Controller 三大功能層。每一次 request/response 週期的背後,都由這三大功能層來合作完成
佈署 (Deploy)通常代表了一系列動作,包含在線上環境中架設主機、安裝環境、上傳並啟動專案。這篇介紹硬體軟體兼具的 PaaS(Platform as a Service,平台即服務)雲端服務 Heroku,我們只要把寫好的專案「推」到平台上,網站就能開始運作了
Webpack 是什麼?Webpack 是一個「模組打包工具」(module bundler)。你可能又會接著問,那什麼是模組?什麼是打包?這篇文章我們會由淺入深地理解這些問題,並了解 Webpack 的用途及它的基本觀念。
Postman 是測試 API 必備神器,本篇是給Postman新手入門使用,讓你在10分鐘快速上手基本 Postman用法,從基本GET API ,到需要驗證的 POST API,包含基本觀念像是請求四大方法CRUD(Create/Read/Update/Delete),Header 參數簡介,並使用Postman上傳/下載檔案
這篇文章將介紹 MySQL 的基本運作,MySQL 是如何處理來自使用者或應用程式的請求、如何處理資料修改、不同的 isolation,以及他們與資料庫 ACID (Atomicity, Consistency, Isolation, Durability) 特性之間的關係。不懂 SQL 語法也是完全沒有問題。
Ajax 是 Asynchronous JavaScript and XML 的縮寫,這篇帶你了解Ajax是什麼,幫助你釐清非同步請求的概念,同時看完後能學會使用 axios 向第三方請求資料。
REST 是 Representational State Transfer 的縮寫。REST 是一種軟體架構風格(並非標準),目的是幫助在世界各地不同軟體、程式在網際網路中能夠互相傳遞訊息。運用 HTTP 來表達語義的路由設計風格稱為 RESTful API。
Wireframe (線框稿)主要目的是溝通網頁的架構、內容、功能、行為、資訊階層,會用非常簡單的灰階顏色、線條、符號或框線,來表達網頁的排版架構。本文帶你學習以 wireframe 這個 UI/UX 呈現方式,研究如何透過 wireframe,傳達各種不同的使用者介面UI與體驗組件,比如資訊架構和排版。
演算法 (Algorithm)是一系列有條理的步驟,能用於計算、解決問題、做出決定。 運算思維(Computational Thinking)是一個思考的程序。它的目的是闡明問題,並呈現其解決方案,因而讓「運算器」(包括機器與人) 能夠有效率地執行。這篇文章就用實際的範例,帶你了解演算法和運算思維是什麼?以及學習他們的重要性。
Docker是一個開源專案,讓你能快速建立、測試、部署應用程式的軟體平台。這篇文章帶你基礎認識Docker是什麼,以及實戰下載Docker Hub image 並執行容器。
HTML 是 Hypertext Markup Language 的縮寫,也就是「超文本標記語言」(請注意他是標記語言,不是程式語言)。HTML5是HTML的最新修訂版本,本文帶你了解HTML是什麼,以及快速攻略 HTML標籤。
學習資料庫時,MySQL 與 MongoDB 是我們常會先碰到的資料庫 。「該用 MySQL,還是用 MongoDB 好呢?」兩者的背後,分別代表著不同的資料庫設計方式,各有各自的優缺點,用來解決不同的問題。這篇文章帶你了解RDBMS和NoSQL的差異,釐清挑選最適合的資料庫,你該了解的事,來幫助你完成任務。
API 是 Application Programming Interface 的縮寫,API中文是「應用程式介面」。這篇帶你認識 Web API 和 HTTP 的關係,從客戶端和伺服器端來瞭解網路 API 的角色。以及在使用 Web API 交換資料時,常見的 JSON 資料交換格式。
CSS 語言是專為定義網頁的版面設計(layout)而發明的,你可以透過它指定文件中各項 HTML 元件的視覺樣式。CSS 的全名是 Cascading Style Sheets,階層樣式表。而所謂的「階層式 (cascading)」,指的是我們可以在同一個元件上套用不同樣式,樣式與樣式之間則存在相對的階層關係。
應用程式是原文是 application,也簡稱 App。「應用程式」因為明確的任務而存在,讓終端使用者可以執行特定任務的軟體。能夠直接在網路上執行的軟體被稱為「網路應用程式」(Web application, web apps)。有些應用程式在「本地」(locally) 執行,也就是說它們會安裝到你的電腦上,這種稱為原生應用程式 (native applications, native apps)。
Stack Overflow 是一個程式設計領域最熱門的工程師技術問答論壇網站。無論程式新手還是老手,都可在論壇內提出和回答問題,進而獲得一些在 Stack Overflow 上的聲望值。工程師遇到程式問題,也常依賴Stack Overflow找答案。這篇文章給入門者介紹Stack Overflow,並提供如何使用這個工程師社區的基本指南。
jQuery是一個簡化瀏覽器 API 的JavaScript函式庫。jQuery之所以受歡迎,是因為他提供了一系列簡單方便,而且兼容的操作,省去開發人員的部份煩惱。本篇帶你看jQuery前世今生,了解jQuery到底是什麼、以及他在網頁技術演進的地位、影響與未來。
SQL (Structured Query Language 結構化查詢語言) 是一種專門用來管理與查詢關聯式資料庫RDBMS的程式語言。NoSQL資料庫的意思是 "Not Only SQL",也就是不限定為「關聯式資料庫」的資料庫管理系統的統稱。在這篇文章,會入門介紹「關聯式資料庫」與「NoSQL資料庫」這兩種常見的資料庫管理系統(database management system,簡稱 DBMS)。
Bootstrap 是一個由 HTML、CSS 和 JavaScript 寫成的前端框架,核心的設計目標是達成RWD響應式與行動優先,也就是讓你的網站排版可以自動適應螢幕大小。它預先做好一套網站的基礎建設,讓你能在框架的基礎上進行開發,不需要再去煩惱瑣碎的設定。本篇介紹怎麼把 Bootstrap 4框架整合到你的網站裡,並介紹使用 Bootstrap 的官方文件。
Git 和 GitHub 是什麼?軟體開發常聽到的這兩個名詞有什麼關係?這篇Git和GitHub教學,將介紹工程師必備技能「版本控制系統」Git,還有以 Git 為核心技術基礎的「雲端版本控制服務平台」GitHub 該如何使用。認識軟體工程師的在軟體開發流程的頭號課題:如何管理程式碼。
如何製作 Chrome 擴充功能外掛?ALPHA Camp 全端開發課程的學生番茄湯,分享他如何發想、製作、到上架他的 Chrome Extension「Find Sci paper」,還成功獲得了超過萬人下載的佳績。
Visual Studio Code (簡稱VSCode)是一個支援多平台的開放原始碼免費程式碼編輯器,在2019 Stackoverflow的調查中,也是Web開發者最熱門的程式編輯器。這篇基本的VSCode安裝使用教學,帶你快速上手設定本地開發環境,並推薦常用的VSCode外掛套件(Extensions)。
現今較為主流的 CSS 預處理器有三種,分別是 Sass/SCSS、Less、Stylus,其中的 Sass/SCSS 是目前最多人使用也相對較成熟的選擇。CSS preprocessor(CSS 預處理器)可以說是 CSS 語法的擴充,CSS 預處理器中新增了變數、混入、繼承、嵌套等寫法,讓開發者可以更有結構地撰寫簡潔、清晰且好維護的 CSS 程式碼。
Node.js 是一個能執行 JavaScript 的環境,以Google Chrome V8 引擎為核心,加上一系列 C/C++ 的套件,讓 Server 端也可以執行 JavaScript。這篇文章從最基本的介紹出發,並提到 Node.js 的語言特性在高併發情況的優勢,最後重點理解 JavaScript 的重要特色:事件迴圈,背後是如何在伺服器端執行。
HTTPS 全名 超文本傳輸安全協定,那個 S 就是 Secure 的意思;HTTPS 透過 HTTP 進行通訊,但通訊過程使用 SSL/TLS 進行加密,藉由類似於前述的加密方式,在 HTTP 之上定義了相對安全的資料傳輸方法。
npm 即為 Node Package Manager 的縮寫,開發者可以透過 Node 隨附的 npm cli,進行套件的安裝及管理。
現今前端的 JavaScript「框架」其實就是一種提升開發效率、降低維護難度的開發架構。主流的框架如 React、Vue 等,大都擁有這些特性。搜尋前端相關職缺,幾乎每間公司的職缺都會在求職條件或加分項目中提到目前的三大框架:React、Vue、Angular。這篇帶大家了解到底為什麼好像全世界都在用「框架」呢?
學習如何創建一台虛擬主機(Virtual Machine,簡稱 VM)並在主機上部署專案。為此我們會租用一台虛擬主機,設定虛擬主機上專案部署的環境,本篇將介紹提供 VM 的兩種雲端服務——Virtual Private Server(VPS)和 Cloud Computing。
RWD(Responsive Web Design)中文翻作「響應式網站設計」,是一種為了讓網頁在各種尺寸的裝置下,畫面都能呈現合適比例的設計原則。本文將嘗試用簡單的方式,由淺入深來介紹 RWD。並介紹RWD實作工具像是Flexbox、Grid、或使用 CSS 框架實作 RWD,例如 Bootstrap。
上一篇文章介紹了TDD,這篇則說明BDD與TDD有何不同,講解BDD觀念,並用實際範例和工具Cucumber 示範如何進行BDD開發。BDD 的重要精神在於能更有效地發現問題、方便協作和示範。
本文將介紹如何進行 TDD(Test-Driven Development),並以一個簡單的題目,盡量用具體且易懂的方式,來示範傳統開發模式和 TDD 開發模式在流程和思維上的差異。
在後端效能優化中,快取(Cache)是常用的作法。透過快取來優化效能有多種實作技術,本文將介紹其中一種作法—用記憶體幫你快取—Memory Cache,並透過一個實際專案來示範,使用 Node.js 實作 memcached 快取
沒有最佳化的經驗,那碰到網站、App 流量大增怎麼辦?通常有點規模的新創公司會請所謂的 DevOps 工程師 (Development Operations Engineer),而 DevOps 的工作就是在於配置和建置公司的軟體架構。而在大型公司中,DevOps 通常又會再將資料庫管理、作業系統管理、程式碼管理等職務再細分。別慌,其實網路軟體架構最佳化基本功並不難上手,讓我們來聊聊。