Yang Yang

越是簡單的東西，有時候越是我們時常忽略需要注意的部分，這篇文章將會介紹setInterval與setTimeout一些小觀念卻重要的部分。 基本介紹setTimeout與setInterval都是始於web api提供的方法，可以透過window來查看。 setTimeout：只會執行一次 setInterval：輪詢執行多次 常見的使用範例如果將setTimeout放到迴圈內會發生什麼事情： 12345for(let i=0; i<10; i++){ setTimeout(function(){ console.log(i); },100);} 你猜到答案了嗎？輸出的i全部都會是10。 如果是這樣呢？ 1234567for(let i=0; i<10; i++){ (function(i){ setTimeout(function(){ console.log(i); },100); })(i); ...

之前曾經在不管是國內還是國外的社團都看過有人在討論這個話題，自己同時也對這塊較為疑惑，因此把自己研究的心得寫下來，也順便讓以選要的人參考看看這個觀點。 讓我們先思考一個問題，你認為token該放Cookie還是localstorage比較好呢？ 先說結論這是一個假議題，好，你可以關掉了（Ｘ 前情提要我們通常會從後端拿到token作為登入用的身份憑證，如果把token存起來，我就可以不用每次使用功能都要進行登入。 關於localstoragelocalstorage是一個web API，可以讓你簡單存取key-value。通常是用來存取簡單的資料，而不是文件或是龐大的object。 使用localstorage存取token在講token放哪的議題之前，先來簡單介紹產生方式。一般下面的步驟稱為：先授權，再驗證。 先進行authentication，從server取得token 12345678async function authenticate(email, password) { const response = await fetch('https://e ...

頁面的更新談渲染效能的時候，很多人會想到reflow和repaint，不過這次要來討論的是瀏覽器渲染畫面所要進行的lifecycle。從lifecycle的top-down視角看reflow和repaint，個人認為會比較有感覺。 渲染過程瀏覽器在渲染畫面的時候，會由搭配DOM與CSSOM渲染合成render Tree，可參考這個影片。 渲染時間大部分的裝置更新畫面頻率是60fps，如果畫面有執行animation, transition或是滾動畫面時，畫面會持續的更新。60fps的更新頻率大概是16ms（1 second / 60 = 16.66ms）所以你可以大膽的假設，只要畫面處理的程式縮減到10ms以下，就可以讓頁面使用起來很流暢。反之如果程式執行時間超過17ms以上，會讓畫面的使用體驗變得卡卡的。 關於渲染以下是Google developer網站提供的pipeline，主要顯示出五個步驟這裡寫了關於渲染的流程，以下抓一些比較重要的整理出來分享 基本上分成： JS/CSS：透過JS或CSS執行Visual changes。 Style：瀏覽器重新計算每個元素改變的styl ...

Figma結合了很多實用的特性，成為了最近熱議的共編協作設計神器，下面將會介紹Figma與一些實用的資訊。不管你是前端還是設計師，都該來好好認識這個強大的平台。 最早得知Figma的時間我最早聽到Figma這個詞是去參加英文口說團認識的一位離職的UI設計師聽到的，之後我又從一位矽谷新創的(x Figma傳教士)UI設計師交流得知，他近期也在台灣推廣Figma這套神器，確實在台灣還未很多人知道，不過仔細去研究之後，果然不得了！！要說是前端和設計師之間溝通的神器，真的不誇張。 蠻有趣的一點是，最近在跟新創的UI設計師交流的時候，有時候會被問：你知道Figma嗎？看完這篇文章之後，你就可以大聲的跟他說：我知道！！！！ 它的誕生Dylan在實習的時候，他認為Adobe Fireworks他是有夠難用的！！！！為什麼設計師設計出來的東西不能像雲端編輯器那樣即時更新？之後他在大學的時候認識一位熟悉WebGL的同事，開始一起研究Figma的道路了。不過過程中卻很艱辛，畢竟要做到像是Adobe那樣功能的產品是不容易的，因此他們花了大概三年的時間製作。Adobe雖然掛上Cloud這個詞，卻並不Cloud ...

隨著產品不斷地變大，在開發程式的時候多少會遇到上線的結果和預期中的樣子不太一樣，如果我們把一個大問題切割成很多個小問題去處理檢視，那麼就能降低測試上的負擔。今天要來帶大家經由撰寫簡單的單元測試來了解測試的原理是什麼。 為什麼要寫測試你可能會想說，前端主要都是以畫面視覺為主呀？使用者也都是再用前端介面呀，為什麼還需要寫測試？隨著modern web的發展，前端技術的含金量也越來越高，而且有些情境其實也很難保證一定寫對的。如果你團隊的成員都能回答以下的答案，那麼再考慮不要在前端寫測試這件事情： 附上當你發現JS到底是什麼鬼東西時的表情：⠄⠄⠄⠄⠄⠄⠄⠈⠉⠁⠈⠉⠉⠙⠿⣿⣿⣿⣿⣿這⠄⠄⠄⠄⠄⠄⠄⠄⣀⣀⣀⠄⠄⠄⠄⠄⠹⣿⣿⣿什⠄⠄⠄⠄⠄⢐⣲⣿⣿⣯⠭⠉⠙⠲⣄⡀⠄⠈⢿⣿麼⠐⠄⠄⠰⠒⠚⢩⣉⠼⡟⠙⠛⠿⡟⣤⡳⡀⠄⠄⢻到⠄⠄⢀⣀⣀⣢⣶⣿⣦⣭⣤⣭⣵⣶⣿⣿⣏⠄⠄⣿底⠄⣼⣿⣿⣿⡉⣿⣀⣽⣸⣿⣿⣿⣿⣿⣿⣿⡆⣀⣿什⢠⣿⣿⣿⠿⠟⠛⠻⢿⠿⣿⣿⣿⣿⣿⣿⣿⣿⣶⣼麼⠄⣿⣿⣿⡆⠄⠄⠄⠄⠳⡈⣿⣿⣿⣿⣿⣿⣿⣿⣿輸⠄⢹⣿⣿⡇⠄⠄⠄⠄⢀⣿⣿⣿⣿⣿⣿⣿⣿⣿⣿出⠄⠄⢿⣿⣷⣨⣽⣭⢁⣡⣿⣿⠟⣩⣿⣿⣿⠿⠿⠟哦⠄⠄⠈⡍⠻⣿⣿⣿⣿⠟⠋⢁⣼⠿⠋⠉⠄⠄⠄⠄齁 ...

目前主流的redux開發有redux-thunk, redux-saga與redux-observable，到底該使用哪個middleware呢？他們又各自解決了以前哪些開發上的問題呢？就讓我們一起來看看吧！ redux加入非同步的目的 copyright by Akshatha 當我們在討論為什麼需要在redux處理非同步這個議題的時候，我們要先討論為什麼我們需要在redux用非同步Redux主要解決了以下的問題： 將邏輯處理抽離出Component 需要共用部分資料 方便追蹤除錯問題 然而，其他middleware的出現也想試圖解決其他問題，讓我們繼續看吧！ redux-thunkredux-thunk是目前最易上手的redux套件，很多初學redux的同學們應該都碰過這個套件。所以一開始redux的使用方式，我會先以redux-thunk當作範例來示範給大家看。這邊也提供一個簡易的redux範例提供給大家看： 未使用redux-thunk之前如果你需要使用套件做非同步的話，需要從外部丟dispatch進去到redux裡面去使用如此才可以控制什麼時候該執行什麼運算： 1 ...

當我們需要設計會員登入機制的時候，很常會面臨到該如何選擇最適合的技術在網站上？這裡將會整理出設計驗證機制的重點。 前情提要驗證 Authentication簡單來說就是驗證使用者的身份。 授權 Authorization使別人有權限做事情，例如給予第三方應用程式可以用哪些服務。 憑證 Credentials要實行驗證和授權之前，需要有東西可以證明這些事情，而這個東西就叫憑證，可以想像是你的身分證。例如你要在凌晨的時候進去網咖或是酒吧，必須要有東西證明你是成年的。 認證機制種類最常見的認證機制為以下三種： Cookie Session JSON Web Token Cookie以key-value的方式儲存在瀏覽器內。 無狀態的協議無狀態表示對處理過的事件並沒有記憶性，每個請求都是獨立的，因此也無法辨識這次的請求和上次的請求是否為同一個人。為了要確認是否是同一個瀏覽器執行請求，因此需要額外處理這些判斷，可以透過Session來判別。 儲存在ClientServer會發送一些資料到Client儲存，下次Client發送請求的時候會送給Server。因為儲存在Client，資料可能會被用 ...

當我們在開發React的時候，多少會遇到一些Warning，例如：map需要加上key的訊息，但是有時候卻會忽略裡面所要傳達的意思，或是很少花時間去研究需要那樣做的原因為何，這次就來重新認識他們吧！ keys的Warning相信很多人開發React都會看過一種warningWarning: Each child in an array or iterator should have a unique “key” prop. Check the render method of EventsTable. See fb.me/react-warning-keys for more information. 這個時候你會做什麼動作？A. Google我來了！B. stackoverflow開起來C. 仔細查看Warning 如果連log的資訊都沒仔細看，直接丟到Google去搜尋問題就會看到需要在map的時候加上key。但是為什麼要加上key這件事情可能還是一知半解，甚至連stackoverflow這種文章也很常看到。如果仔細查看訊息，你會發現他有提供一個網址：fb.me/react-war ...

React提供了lazy與Suspense改善程式碼分割的方式讓專案能夠決定是否需要載入，但是可能有些人發現到討論度相較其他功能來得低不少，這邊將會介紹功能與討論實用性的問題。 React lazy與React suspense的出現可參考官方網站的code-splitting文章當我們在開發程式的時候，我們希望避免引入多過的程式碼或是開發套件，所以React提供了一些方法來讓開發者可以進行程式碼分割。 使用介紹假設你有一個Component叫Form 1import Form from './Form'; React lazy使用的時候，需要搭配import使用，裡面回傳的型別是一個Promise。 1const Form = React.lazy(() => import('./Form')); 再來使用Suspense包裹lazy component，裡面可以放置多個。在載入的過程中，會顯示fallback內的內容，這裡用文字loading表示，可以替換成其他內容，例如：載入中的圖片。 12345678910111213impor ...

在設計元件的時候，有時候因應專案的需求要不斷的增加新功能，隨著功能的增加，該如何一邊增加功能一邊增強元件的維護性呢？一起來看看吧！ 設計元件一開始開發專案的時候，我們可能會先設計一個元件： 123456789const Button = ({ children, onClick, disabled }) => { return ( <button className="btn" onClick={onClick} disabled={disabled} >{children}</button> );} 但是後來又其他需求，所以又要多加一些新的功能在同個元件上： 123456789101112131415161718const handleWarning = (onWarning, onClick, type, target) =&g ...