New's News

將資料與 HTML 之間的整合放在伺服器做還是瀏覽器做。 目前 Single Page Application 架構下的前端在討論 CSR/SSR 時只著重在首屏載入的部分， 因為依目前盛行的 Single Page Application…

Server 端要存資料在瀏覽器端的三種方式。 Cookie Server 在 response 中利用 存在瀏覽器上，可以同時設定失效時間 瀏覽器會在接下來每一次送 request 到相同 domain name 時自動帶上 Cookie…

HTTP 是無狀態的 對 server 而言， 每一次收到的 request 都是不相關的。 不同 request 之間關係的狀態管理機制就稱為 Session 。 Session 實作方式 利用網址的 query string： user 原本在 購物， 對 apple…

Example Component: Counter 常見的範例 React Component: Counter 每次點下 按鈕， 的 都會更新， 整個 會進行 re-render。 連帶會使沒有任何改變的 也進行 re-render。 keep_re…

編碼的作用？ 用數字代表某一個文字 ASCII 編碼 Char 代表文字符號, Dec 代表相對應的十進位數字 Unicode 使用十六進制的方式來表示一個數值 把數字和全世界文字符號間做一對一的轉換 進位制 JavaScript 中： 二進制數字，需在數字的最前面加上 0b…

有序的元素集合 不同於陣列，鏈結串列中的元素在記憶體中並不是連續（Sequential）放置的 每個節點（Node）元素由一個存放元素本身資料（Data）和一個指向下一個元素的指標鏈結（Next Pointer）組成 如同火車一般的結構 與陣列 (Array…

call stack Any time a function is invoked it's placed(pushed) on the top of the call stack. When seeing the keyword or when the function…

Test method return Match Literal Strings Ignore case use : Extract Matches get found matches find more than the first match use : Match…

避免每次 props/state 更新都 re-render React.Component 裡， 如果 props/state 發生改變即會觸發重新渲染 (re-render) ， parent component 重新渲染時會觸發重新渲染 child components…

Page Objects Pattern 通常會攥寫兩類檔案： page.js: 將一些供整個專案使用的底層 API 在此封裝，各個 xx.page.js 會繼承該 page.js xx.page.js: 特定頁面，定義該頁的屬性（頁面上元素）與方法 Example…

Concept…

Digestion from Writing Resilient Components from Writing Resilient Components — Overreacted There are 4 helpful principles. Don't Stop the…

Template Helpers Express/Response Properties: This property is useful for exposing request-level information such as the request path name…

Concept 輸入一個數 num， 找出所有小於 num 的質數(prime) 質數 Prime 質數 (prime number): 指在大於 1 的自然數中，除了 1 和該數自身外，無法被其他自然數整除的數。 合數 (composite number)：指在大於…

concept 輸入句中的單字順序不變， 但倒反每一個單字英文字母順序。 不可以使用 example code Code from References https://www.wikiwand.com/zh-tw/%E5%87%B1%E6%92%92%E5%AF%86%E…

Concept 不建立新的 arr， 直接將輸入的 arr 改變順序 不可以使用 Solution Code Code from References https://www.udemy.com/learning-algorithms-in-javascript-from…

Concept 計算輸入 arr 的平均數, 中位數, 眾數 Solution Code Code from References https://www.udemy.com/learning-algorithms-in-javascript-from-scratch…

Concept 輸入一個陣列， 代表股票一天個時間點的價錢， 求最高利潤， 利潤 < 0 的話，一律給 -1 Solution Code Code from

concept 判斷字串是否為 Palindrome， Palindrome 例子： race car Madam, I'm Adam example code

concept 判斷 magazineText 中是否有足夠單詞供 noteText 使用。 example code Time Complexity => => 有兩個 Linear 迴圈， 但是彼此沒有嵌套關係。 實務上，我們最終會把這種函數的時間複雜度寫成 O(n)

concept 給定一個數字 num， 輸出 1~ num， 但是遇到 3 的倍數時輸出 ， 遇到 5 的倍數時輸出 ， 遇到紀事 3 又是 5 的倍數時輸出 modulus operator example code

Concept Fibonacci Sequence: 1, 1, 2, 3, 5, 8, 13 ... 輸入一個位置， return 對應 Fibonacci Sequence 該位置的數字 Solution Code Code from Fibonacci with…

Concept 給一字串與偏移量， 會返回經過偏移的新字串。（string 有大小寫， num 有正負數） Caesar Cipher example Bee, 3 => Ehh B 向後三位變 E e 向後三位變 h 以此類推... 圖片來源：https://www…

Concept 輸入一個排序好的陣列， 找出裡面是否還有 key Solution Code Code from References https://www.udemy.com/learning-algorithms-in-javascript-from-scratch…

同樣的需求， 可能可以寫出很多種不同的 function 來解決， 那我們如何判斷哪一種解法比較好呢？ , 便是用來衡量 function 運行效率的兩種指標，我們通常根據 來作為衡量效率的標準 Big O Notation 代表演算法時間函式的上限（Upper bound…

雖然 NaN 本身名字為非數字, 但是利用 typeof 來判斷 NaN 的時候, 卻會返回 number. 產生 NaN 的時機 1. 計算失敗時 錯誤計算 對於未定義的運算 (Infinity…

簡述 Singleton 單例 一個 class 只能有一個 instance， 就算多次 new 該 class， 也只會 return 第一次 new 出來的 instance from "Learning JavaScript Design Patterns…

滿足平時快速開發所需，用 Gulp 滿足 SCSS 編譯、檔案壓縮與 LiveReload 需求。 簡單的 Gulp 配置，可快速架設開發靜態網頁所需的環境。詳情請查看 StaticPagesDevSet 本環境可以幫你做的事 本環境滿足之需求為以下 3 項： SCSS…

最近在嘗試配置自己的Gulp流程，方便日後有需要的時候可以直接拿出來使用。但卻發現寫好的 gulp.task竟然沒有按照希望的順序執行，後來發現是因為我忽略了 Node.js有非同步執行的特性。也就是說假設我今天按順序寫好了task1和task2，但真正執行程式的時候 task…

GitHub Repo頁面右上角有3個我們可以使用的操作，分別是 Watch、Star和Fork。不過，他們的使用時機與差異在哪裡呢？ 說實在的，我剛開使用Github的時候有好一陣子也不是很清楚，看了不少文章之後才有比較了解他們的差別。 Watch 有三種狀態，預設為 Not…

似乎是因為套件相依性的關係，當我在使用npm下載套件或是要刪除套件時，接連發生過好幾次"資料夾名稱太長"導致windows無法新增刪除的狀況... 經過google一些資料後，確認這是npm在Windows平台上的天生缺陷，因為 Windows…

meta tag 是html中用來描述額外資訊的tag，它可以告訴瀏覽器很多關於我們這個網頁的相關訊息，幫助瀏覽器正確且順利的解讀我們辛苦寫出來的網頁。 擺放位置 一般放在 之間。 相關屬性 可以直接參考(HTML Tag)[http://www.w3schools.com…

最近開始研究客製化自己用hexo架設在github上的blog，要打造具備個人魅力的網站，第一步我想從favicon…

主要包含 box-sizing與 position， CSS排版就是魔鬼藏在細節裡， 一個小地方沒有弄好就可以讓你瞬間跑版... box-sizing:border-box content padding border margin V V V 有 V表示為 width…

gulp是一個自動化工具，可以用來輔助開發流程，功用據說與grunt大同小異，但比較好理解，不過我之前也沒有用過grunt，所以無從比較起...但是以目前的討論熱度而言，gulp明顯熱門得多。這裡主要紀錄一下粗略的gulp安裝與使用方式。 初步設置： 安裝node.js…

This is a custom description for SEO and Open Graph purposes, rather than the default generated excerpt. Simply add a description field to the frontmatter.

利用SSH key進行deploy，除了安全性的優點之外，我自己覺得最方便的地方在於我要上傳東西到github的時候可以不用再手動輸入帳號密碼，雖然這不過是1分鐘就可以完成的事情，但可以讓事情更自動化，我們又何樂而不為呢！ 設置ssh key 先看是否有已經存在的ssh key…