第 51 期 - 聽說貓亢要舉辦了，是不是要貓一下

Created on 2020-10-20

本週專欄

IT邦幫忙鐵人賽懶人包 2020 原來鄰居的 wifi 密碼那麼容易取得

這篇文章蒐集了 IT 邦幫忙第 12 屆鐵人賽的好文。習慣性的整理一下今年新的鐵人賽資訊，方便以後查找。今年我覺得資安系列非常精采，許多令人眼睛為之一亮的系列。
今年除了官方網站的排行榜外，也再次感謝熱心的 qrtt1 大大幫大家製作了排行榜，大家可以藉由這個排行榜來得知哪些系列是目前最多人觀看與訂閱的。

前端開發

10年網頁設計流行風格回顧與趨勢分析（2010~2020）

你知道響應式網站的概念從被發表開始，已經過了十年了嗎？文章用許多網頁一一介紹了近十年的網頁設計發展史，並且用心說明在該年代背景中，那些風格會成為主流的原因。

What is Front-End Development? Necessary Web Development Job Skills Explained.

你知道前端工程師最需要的技能是什麼嗎？作者從前端工程師的角色出發，從工作範圍帶出什麼樣的角色才是前端工程師該有的樣子，文章內容非常有趣，沒有技術成分，適合全家大小一起觀賞 🙌。

Typing effect without Javascript

這篇文章的作者在沒有使用 JavaScript 的情況下就做出了打字機的效果，文章範例僅僅只使用不到 30 行的 CSS 設置，就展現了 CSS 的強大之處，而且一樓的留言讓整個文章內容更完美了！

Vue.js

這週來了解 vue 3 改了些什麼東西。1. Composition API。2. 效能提昇：與 Vue 2 相比，初始 Render 速度加快 55%，更新速度加快 133%，記憶體使用減少 54%。Vue 3 全面改用 TypeScript 開發，跟 TypeScript/VSCode 的整合性大增。不過開發者仍可以使用 javascript 開發。官方文件有篇升級指南，Breaking Changes 章節是最權威的參考來源。- 部分內容來自原文

Vue 3.0 升級紀錄

Kuro 大大升級 vue 3.0 的實戰升級過程。Event bus 的寫法需要修改，所以如果之後要使用 event bus 的話乾脆直接使用 vuex 吧。過去我們透過 prop 與 .sync 來同步上下層 component 狀態 (俗稱雙向綁定) 的方式，現在可以改由多組 v-model 來做到了。目前升級 Vue 3.0 的開發體驗相當好，像是大家都很熟悉的 composition api、直接在 component 使用 v-model，以及新增的 async-component 與 <Suspense> 等等，都是非常實用的功能。- 部分內容來自原文

Vue 3.0 来了，我们该做些什么？

Composition API解決了什麼問題？使用傳統的 Vue2.x 配置方法寫組件的時候問題，隨著業務複雜度越來越高，代碼量會不斷的加大。由於相關業務的代碼需要遵循option 的配置寫到特定的區域，導致後續維護非常的複雜，同時代碼可複用性不高，你常常會發現一個頁面組件，寫著寫著就寫到了三四百行去了。而 Composition API 解決了這個令人頭疼的問題。它為我們提供了幾個函數，如下所示：reactive, watchEffect, computed, ref, toRefs, hooks。- 部分內容來自原文

React.js

React Hooks 新手筆記：關於這些時日與 React Hooks 為伍的簡易記錄

React Hook 已經出來好一陣子了，但想必還是有人跟我一樣對他們不太熟悉。而這篇 React Hooks 新手筆記除了講解 Hook 的語法之外，還給了非常多的範例，真的是給新手看的 XD

了解這些，更快掌握 TypeScript 在 React 中的使用

這篇文章主要是給想在 React 專案裡面導入 TypeScript 的人看的，隨著專案越來越龐大，太過自由的 JS 語法可能會使得程式碼越來越難維護，這時候也許就可以導入 TypeScript，透過型別以及 interface 的限制，讓彼此的合作更順暢

初探 Server-Side-Rendering 與 Next.js

身為人氣最高的 React SSR Framework，Next.js 大幅降低了 SSR 的技術門檻。以前開發者要自己維護超複雜的 webpack 設定，而且設定好之後就不太敢更新，怕一動就會把整個編譯的過程弄壞（就是我 XD）。但有了 Next.js 之後終於又可以專心寫扣，不用自己搞那些有的沒的效能調校，就可以生出一個高效能而且支援 SSR 的網站，真的很推

DevOps

Announcing HashiCorp Boundary

Hashicorp Boundary 是一套讓使用者可以透過 Role Base 方式來安全地存取位於公司內部重要系統的工具，之前有介紹過一套以 Zero Trust 為精神開發的類似工具 Teleport，傳統系統管理人員會透過 VPN, Gateway, Bastion 再加上防火牆的設定來管控使用者可以存取到哪些網段的機器；而 Boundary 這類工具則是以使用者認證出發，透過使用者角色來允許可以存取的系統有哪些，不再需要透過設定一堆防火牆規則 (不過自己還是覺得有些還是要設定比較好XD)，很開心這個領域又有新的競爭者加入，不過目前的版本 (0.1) 還不算可以用，或是說主要企業 TA 需要的重要功能我在文件區都沒有看到，例如整合第三方 Identity Provider, Auditing, Recording, Blocking Command…等功能，只有看到他儲存 Key 和 Role Base 的設定方式

Announcing HashiCorp Waypoint

HashiCorp 推出專門用來部署應用服務的 Waypoint ！繼推出跟資安比較相關的 Boundary 之後，今天又推出可以用 HCL 定義 Build, Deploy 跟 Release 流程的 Waypoint！因為 HashiCorp 發現目前要部署個應用程式所需要學會的東西太多太複雜了，而且要使用很多的工具整合達成，所以推出 Waypoint ，讓開發者下個 ~$ waypoint up 就完成所有的事情，主要功能有…

讓開發者使用 HCL 定義好 Build, Deploy 跟 Release 流程，而且可以一鍵發佈
為每一個應用服務的每一個部署產生一個 URL，用來快速驗證部署上去的東西有沒有問題
透過 waypoint exec 可以對應用程式執行特定指令，用來除錯，或是執行資料庫 Migration…等需求
直接使用 waypoint logs 或從 Web UI 查詢應用服務的即時 Log，讓開發者快速處理緊急狀況使用
雖然 CLI 可以自動化很多的事情，但 Waypoint 目前還是提供唯讀的 Web UI 讓使用者可以快速看到應用服務的部署情況
而怎麼讓 Build, Deploy 跟 Release 的這些步驟可以各自支援各種不同的工具或是服務呢？答案是使用 Plugin 來擴展支援不同開發者所需要的不同需求，例如透過 Kubernets Plugin 部署應用服務到 K8S 中

Announcing HashiCorp Terraform 0.14 Beta

感覺當年 Terraform 官方從 0.11 升級到 0.12 費時最久，後續版本的推出相對快很多，例如支援 Module Dependency 的 0.13，以及今天又宣布的準備要朝向 1.0 邁進的 0.14！

StarBugs Weekly

StarBugs Weekly 由一群不寫文章就會想要亂花錢，但是又沒有那麼多錢，只好繼續寫文章的開發者所創立。
內容包含 Web 前端、中端、後端、DevOps、產品開發、精實創業，一切跟產品有關的知識，都是我們的守備範圍！

Curators:

@GQSM - Hi！我是神 Q 超人，一個先衝再說的男人。
@Larry850806 - 我是 Larry，傳說中的 0.1 倍工程師！
@LukaTW - 一名全身都是死角的工程師。
@smalltown - 熱愛鑽研各種可以提升雲端服務品質及增進團隊開發效率的開源技術

Feedback

本週呈現主題方式做了一些改變，希望讓讀者能夠更快速精準的找到自己要的資訊。也加入社群活動這個區塊，每週更新社群活動的資訊。如果有任何建議，歡迎私訊星巴哥技術週刊 FB 粉絲專頁與我們聯繫。