神Q超人 – Medium

Published in

·Aug 7

用 JavaScript 玩轉設計模式 - 你一定用過但可能不知道的 Facade Pattern（外觀模式）

Hi！大家好，我是神 Q 超人！其實從去年開始，就有和一群朋友揪團讀書會在讀設計模式（如果大家有興趣加入的話也可以留言告訴我！），然後苦讀到現在總算是有累積到一些新學習的模式，能夠試著將它們輸出成文章。所以接下來要是沒其他特別想寫的東西，可能都會是設計模式的文章連發了，而且要是趕得上今年鐵人賽前把設計模式系列寫完的話，還可以再複製過去蹭個完賽獎牌。 😂 好！那前言廢話說完，讓我們來認識 Facade Pattern（外觀模式）吧！目的假設你現在在寫關於使用者的訂房網站，且當使用者在訂房時，你需要檢查當前使用者的資料或權限，來決定接下來要做的事情。目前要檢查的項目有這些： 1. 使用者是否登入 2. 是否已經驗證過手機 3. 是否已經驗證過信箱所以會先有個 api query 的方法，以用來取得使用者資料的方法。在這裡會直接用 React Query 的 query hooks 寫法為例子，如果不熟 hooks 的話，在這裡就當它是個會打 api，然後回傳 api 資料的方法：

JavaScript

5 min read

JavaScript

5 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·May 28

開源專案讀起來 | 你看過計算機的裡面嗎？

Hi！大家好，我是神 Q 超人！終於又寫回開源專案讀起來系列啦，上次在寫圈圈叉叉那篇時候的開心感，就讓我很想繼續找些有趣或常見的小程式來讀，然後比較大家寫法間的差異，結果轉眼間一年半過去的現在才有時間繼續寫下去，果然變成大人後的時間總是特別少（其實是自己一直在偷懶 😂）好的！那把話說回來，繼上次的圈圈叉叉後，這次選的主題也是做為練習對象很常見的 …

Starbugs

16 min read

Starbugs

16 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Apr 28

Refactor | 這 3 個重構技巧我很喜歡，推薦給你 feat. JavaScript

Hi！大家好，我是神 Q 超人！其實在去年 2022 我也是看了兩三本書，但是一直瘋狂 input 的同時都沒有在 output，感覺和之前提到的 WDL 有點衝突，這可能也是我覺得在去年一直都沒什麼長進的原因 😂，雖然還是能夠將學習到的新知識使用在工作上，但是當要和同事解釋為什麼要這樣寫的時候，就會變得格外的困難。所以為了不讓思考能力無止盡 …

JavaScript

8 min read

JavaScript

8 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Jan 27

Render | 來試試用來取代 Heroku 的服務吧 - Render 的網路服務部署介紹！

Hi！大家好，我是神 Q 超人！相信有許多人在去年 2022 Heroku 說要取消免費計劃的同時，就開始尋覓下個能夠繼續免費使用的平台 😂。就我來說畢竟也是有一些食之無味，棄之可惜的作品服務在那上面放著，而它們也都在免費計畫結束後就都掛了，像變心的女朋友一樣，不論給什麼 request 永遠等不到 response 回來。而前陣子也比較忙，所 …

Render

7 min read

Render

7 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Jan 27

cyclic | 來試試用來取代 Heroku 的服務吧 - cyclic 的網路服務部署介紹！

Hi！大家好，我是神 Q 超人！沒想到取代 Heroku 的文章會是一個系列吧！會再繼續研究其實也是因為在 Heroku 學到小經驗，知道不能把雞蛋放在同個籃子裡，不然要是某個平台的免費方案又取消，那要找時間復活一些運行中的服務可能又要等下一個年假了。 😂 那廢話不多說，一起看看這篇文章要介紹的 cyclic 吧！ cyclic 從 cyclic 在首頁的上 Me …

Cyclic

7 min read

Cyclic

7 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Oct 18, 2022

CSS | 不曉得能不能像洋蔥一層一層的 Cascade Layers - 基本用法

Hi！大家好，我是神 Q 超人！不曉得大家有沒有用繪圖軟體畫畫過，像是我有時候會使用 Procreate 在 iPad 隨性圖上幾筆，但 Procreate 和 iPad 都不是重點，主要是在類似的繪圖軟體中，都會提供「圖層」的功能。你可以在第一個圖層中打上草稿，第二個圖層描線，第三個圖層上色等等，這些圖層間所畫的東西都互不影響，且在顯示上排序越靠上 …

Front End Development

5 min read

CSS | 不曉得能不能像洋蔥一層一層的 Cascade layers - 基本用法

Front End Development

5 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Oct 4, 2022

用 JavaScript 玩轉設計模式 | 如果你用了 Tree 結構，就不能錯過 Composite Pattern（組合模式）

Hi！大家好，我是神 Q 超人！最近生活實在是太忙了，因此都沒有時間好好學習被排在待學清單裡的那些酷東西，但如果再繼續耍廢下去，又會感到魔名的恐慌 😂，所以就決定來寫篇文章來強迫自己學習，繼續之前沒有讀完的設計模式！而在這篇文章中登板的是設計模式中的 Composite Pattern（組合模式）！目的當你的需求要求你將資料組成一個類似 tree 的結構時，即使你或是 tree 中的任一個節點都不理解自己以下的結構到底長什麼樣子，也還是能直接透過 tree 的 root 來操作或取得整體的行為或資料。舉例來說，如果今天需要實作計算包裝及商品價格的程式，那可能會需要用來包裝的盒子和商品的 class，然後包裝和計算的過程大概像這樣子：目前透過一個簡單的 Array.prototype.reduce() 就能取得盒子的包材費用，以及裡面的商品總價，這樣看起來一切都非常好。但通常在你認為一切都很好的時候，就會有需求產生了。

JavaScript

5 min read

JavaScript

5 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Sep 6, 2022

在 React Native 中以指定父元素絕對定位子元素，打破 View 的 Position 限制

Hi！大家好，我是神Q超人！最近因為工作的關係，又重回 React Native 的懷抱 😂，雖然 React Native 主打可以用貼近開發 Web 的語法去寫手機 APP，但其實真正開發起來面臨到的坑還是挺多的。這篇文章要分享的絕對定位就是在 React Native 內排版時，遇到的狀況，感覺網路上資源不多，就寫下文章來記錄一下處理的過 …

Web Development

9 min read

在 React Native 中以指定父元素絕對定位子元素，打破 View 的 Position 限制

Web Development

9 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·Jun 26, 2022

來征服資料結構與演算法吧 | 連 Google 面試都在考的 Binary Tree

Hi！大家好，我是神 Q 超人！在這篇文章裡，會先介紹 binary tree 的資料結構，與如何使用 JavaScript 實作，最後一樣會挑幾題演算法來練練手，學習一下和 Tree 結構形影不離的深度搜尋法（DFS，Depth-first Search）與廣度搜尋法（BFS，Breadth-first Search），希望可以讓大家熟悉 bi …

JavaScript

11 min read

來征服資料結構與演算法吧 | 連 Google 面試都在考的 Binary Tree

JavaScript

11 min read

Published in

Starbugs Weekly 星巴哥技術專欄

·May 24, 2022

執行 JavaScript 的 V8 引擎做了什麼？

Hi！大家好，我是神 Q 超人！我想點進來的大家應該都聽過，也在瀏覽器或 Node.js 上執行過 JavaScript，但你們有想過 JavaScript 是如何執行的嗎？這背後的功臣就是 JavaScript 引擎，而標題提到的 V8 引擎也是其中之一喲！ V8 引擎是由 Google 用 C++ 開源的 JavaScript 與 WebAsse …

JavaScript

8 min read

JavaScript

8 min read