Web 技術生存手冊

# Web 技術生存手冊 # 套件 - [前端武器庫](/s/HkjqkTQbZ) ## 每日面試題挑戰 - [Web 每日挑戰賽](/W26JLpODQL6SZNvkaMDerA) - [Web 每日挑戰賽題庫](https://docs.google.com/spreadsheets/d/1hI-3Ao7hFCbveRe7Jrs7T26U6im7MWRA05lMmpGTJvw/edit#gid=0) ## Design Guide - [Mailchimp Pattern Library](https://ux.mailchimp.com/patterns/color) ## DevTool - [Vue2 CDN 線上沙盒 (歡迎 fork)](https://stackblitz.com/edit/vue2-cdn-ex) [target=_blank] - [Chrome 網頁除錯功能大解密](https://www.udemy.com/course/chrome-devtools/) [target=_blank] - [10 Console tricks, to debug like a Pro.](https://itnext.io/10-console-tricks-to-debug-like-a-pro-66ee2225ec57) [target=_blank] - [DevTools tips — day 1: the console dollars](https://medium.com/@tomsu/devtools-tips-day-1-the-console-dollars-3aa0d93e923c) [target=_blank] # 學習資源 - 練打字 - [英打 keybr](https://www.keybr.com/) [target=_blank] - [ratatype](https://www.ratatype.com/) [target=_blank] - [edclub](https://www.edclub.com/) [target=_blank] - HTML - [Use HTML to solve common problems - MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto) [target=_blank] - [HTML forms guide - MDN](https://developer.mozilla.org/zh-TW/docs/Learn/HTML/Forms) [target=_blank] - CSS - [CSS Spec Version list - w3.org](https://www.w3.org/Style/CSS/current-work) [target=_blank] - [CSS](/s/BycRYlaMf) - [Introduction to CSS layout - MDN](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Introduction) - [CSS - MDN](https://developer.mozilla.org/zh-CN/docs/Learn/CSS) [target=_blank] - 框架 - [Vue](/@Chris/BJ6Mely8L) - [Intro to Vue.js - VueMaster](https://www.vuemastery.com/courses/intro-to-vue-js/vue-instance) - [Angular](/s/Bk-irnWVM) - 雜談 - [陳鍾誠](https://gitlab.com/ccckmit/course/-/wikis/home) [target=_blank] - [Web 開發者指南 - MDN](https://developer.mozilla.org/zh-CN/docs/Web/Guide) [target=_blank] - [🌳🚀 CS Visualized: Useful Git Commands](https://dev.to/lydiahallie/cs-visualized-useful-git-commands-37p1) [target=_blank] - [演算法-視覺化介紹](https://visualgo.net/en) ## 玩遊戲學 CSS - [CSS Diner](https://flukeout.github.io/) - [CSSBattle](https://cssbattle.dev/) - [CSSBattle 介紹影片](https://www.youtube.com/watch?v=XA5m-iiTru0) - [FLEXBOX FROGGY (繁中)](https://flexboxfroggy.com/#zh-tw) - [Flexbox-pirate (繁中)](https://hexschool.github.io/flexbox-pirate/index.html?fbclid=IwAR3Z-nxAz52hVD-DD3N6B_A_ktUAznwGWs3CFqToFArh9KK1slRR_5U1Qeo#/) - [Flexbox Defense](http://www.flexboxdefense.com/) - [flexbox-zombies](https://mastery.games/p/flexbox-zombies) - [Grid Garden](http://cssgridgarden.com/#zh-tw) - [CSS 各種小遊戲 (css選擇器, flex, grid)](https://hackmd.io/@Not/SkuwAWUr8) ## JavaScript 非同步 - [JavaScript](/s/B1wl8VlfG) - 非同步特性 - [所以說 event loop 到底是什麼玩意兒？| Philip Roberts | JSConf EU](https://www.youtube.com/watch?v=8aGhZQkoFbQ ) [target=_blank] - [Event loop 視覺工具 Loupe - Philip Roberts](http://latentflip.com/loupe/) [target=_blank] - [Jake Archibald: In The Loop - JSConf.Asia](https://www.youtube.com/watch?v=cCOL7MC4Pl0&t=161s) [target=_blank] - [JavaScript Promises: an Introduction](https://developers.google.com/web/fundamentals/primers/promises#promise-terminology) [target=_blank] ## JavaScript 測驗題 - [JavaScript Pop Quiz](https://js-pop-quiz.now.sh/#/) - [JS 百題斬 - 六角](https://docs.google.com/forms/d/e/1FAIpQLSeBrQ9NspE3_6MCk2Fi0rMfu3baVcnNrPIEhvKz5ZsB3pwnNw/viewform?c=0&w=1) ## JavaScript 精選文 - [覺得 JavaScript function 很有趣的我是不是很奇怪](https://blog.huli.tw/2020/04/18/javascript-function-is-awesome/) - [理解 JavaScript 中物件的比大小行為](https://blog.techbridge.cc/2019/06/16/javascript-obj-compare/) - [我知道你懂 hoisting，可是你了解到多深？](https://blog.techbridge.cc/2018/11/10/javascript-hoisting/) - [深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？](https://blog.techbridge.cc/2018/06/23/javascript-call-by-value-or-reference/) - [淺談 JavaScript 頭號難題 this：絕對不完整，但保證好懂](https://blog.techbridge.cc/2019/02/23/javascript-this/) - [所有的函式都是閉包：談 JS 中的作用域與 Closure](https://blog.techbridge.cc/2018/12/08/javascript-closure/) - [JavaScript 中的同步與非同步（上）：先成為 callback 大師吧！](https://blog.techbridge.cc/2019/10/05/javascript-async-sync-and-callback/) - [webpack 新手教學之淺談模組化與 snowpack](https://blog.techbridge.cc/2020/01/22/webpack-%E6%96%B0%E6%89%8B%E6%95%99%E5%AD%B8%E4%B9%8B%E6%B7%BA%E8%AB%87%E6%A8%A1%E7%B5%84%E5%8C%96%E8%88%87-snowpack/) - [該來理解 JavaScript 的原型鍊了](https://blog.techbridge.cc/2017/04/22/javascript-prototype/) - [一起來了解 Javascript 中的 Proxy 與 Reflect](https://blog.techbridge.cc/2018/05/27/js-proxy-reflect/) ## Vue - [Next generation frontend tooling with ViteJS - Open Source Friday](https://www.youtube.com/watch?v=UJypSr8IhKY) [target=_blank] - [【譯】下一代前端構建工具ViteJS 中英雙語字幕｜技術點評](https://juejin.cn/post/6937176680251424775) [target=_blank] - [vuejs.tw FB](https://www.facebook.com/groups/vuejs.tw/permalink/4150195088393525) [target=_blank] - [imutable - React](https://zh-hant.reactjs.org/tutorial/tutorial.html#why-immutability-is-important) - [前端框架各種寫法比較](https://component-party.jason-liang.com/) ## Git - [看圖學 git](https://learngitbranching.js.org/?locale=zh_TW) [target=_blank] # 文章精選 - 從瀏覽器輸入網址後，發生什麼事？ - [下面兩篇文章，引用流程圖的原始出處](https://medium.com/@bfortuner/how-web-applications-work-4424c6fb175a) [target=_blank] - [六角](https://w3c.hexschool.com/blog/8d691e4f) [target=_blank] - [it鐵人](https://ithelp.ithome.com.tw/articles/10228442) [target=_blank] - [will 保哥分享](https://www.facebook.com/119279178101235/posts/5477204855641947/)[target=_blank] - [一知半解的感覺真差——談追根究底的理由](https://medium.com/@hulitw/epistemology-8845a97e846c) - [提問的智慧 - github](https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way) - [紮實的網頁前端學習路線與資源推薦](https://medium.com/@hulitw/front-end-learning-path-55201571ecfe) ## Web - [前後端分離與 SPA](https://blog.techbridge.cc/2017/09/16/frontend-backend-mvc/) - [Web Accessibility 的重要性](https://blog.techbridge.cc/2019/10/13/web-accessibility-intro/) - [DOM 的事件傳遞機制：捕獲與冒泡](https://blog.techbridge.cc/2017/07/15/javascript-event-propagation/) ## Unit test - [Jest (unit test)](https://jestjs.io/) - [Testing-Library (unit test)](https://testing-library.com/) - [探討單元測試和整合測試的涵蓋範圍](https://ithelp.ithome.com.tw/articles/10229734) ## BDD - [BDD Testing & Collaboration Tools for Teams | Cucumber](https://cucumber.io/) ## E2E Test - [JavaScript End to End Testing Framework | cypress.io](https://www.cypress.io/) - Chrome, Firefox only - x ## 其它 - [好想工作室朝聖之旅：相信分享與交流可以讓世界更美好](https://medium.com/@hulitw/goodideas-studio-98dbafb99abf) - [淺談 Session 與 Cookie：一起來讀 RFC](https://blog.techbridge.cc/2019/08/10/session-and-cookie-rfc/) - [白話 Session 與 Cookie：從經營雜貨店開始](https://medium.com/@hulitw/session-and-cookie-15e47ed838bc) - [讓我們來談談 CSRF](https://blog.techbridge.cc/2017/02/25/csrf-introduction/) - [原來 CORS 沒有我想像中的簡單](https://blog.techbridge.cc/2018/08/18/cors-issue/) - [簡明 Linux Shell Script 入門教學](https://blog.techbridge.cc/2019/11/15/linux-shell-script-tutorial/) - [Linux Curl Command 指令與基本操作入門教學](https://blog.techbridge.cc/2019/02/01/linux-curl-command-tutorial/) - [從拉麵店的販賣機理解什麼是 API](https://medium.com/@hulitw/ramen-and-api-6238437dc544) - [JavaScript 史書](https://zhuanlan.zhihu.com/p/113079856) - [搞笑談軟工: 毛書一刀未剪大公開](https://teddy-chen-tw.blogspot.com/2020/04/blog-post_20.html)

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.