Yang Yang

當我們設計Component一段時間之後，Component會隨著時間不斷的壯大，到最後就會面臨效能的議題，如果使用者在使用部分Component的時候，需要花過多的時間載入，一定會影響到使用者對產品的喜好程度。因此以下討論優化Component的思路。 React.memo在學習useMemo與useCallback之前，讓我們先來認識什麼是React.memo。官方的介紹為：React.memo 是一個 higher order component。如果你的 function component 每次得到相同 prop 的時候都會 render 相同結果，你可以將其包在 React.memo 之中，透過快取 render 結果來在某些情況下加速。這表示 React 會跳過 render 這個 component，並直接重用上次的 render 結果。 簡單來說，你可以把React.memo想像成是一個cache，只有偵測到props改變才會render。 如果你在child Component寫一個log測試render的次數，你可能會發現光是一個click事件就render了好幾 ...

以下將會以前端開發作為例子，讓大家更了解耦合與內聚的概念是什麼。 耦合（Coupling）簡單來說就是相依性，如果討論的對象，彼此的相依性越強烈，那麼我們就可以說彼此的耦合性越大。 代表人物如果要拿來擬人的話，最具代表性的人，大概就是國文課本的賣油翁了。大家最熟悉的課文：康肅問曰：「汝亦知射乎？吾射不亦精乎？」翁曰：「無他，但手熟爾。」康肅忿然曰：「爾安敢輕吾射！」翁曰：「以我酌油知之。」乃取一葫蘆置於地，以錢覆其口，徐以杓酌油瀝之，自錢孔入而錢不濕。因曰：「我亦無他，惟手熟爾。」 賣油翁雖然其他的事並不會，但是他只負責賣油這個任務，而且很專精。 共用元件耦合性可以讓同樣頁面擁有的Component, function…，重複被使用，因為我們在開發程式的時候，一定會時常遇到類似的情境需要用到類似的功能，因此會把這些東西便成為共用元件。例如以下的例子： config.js12345export const categories = [ {label: '全部', value: 0}, {label: '未滿一年&# ...

組合和繼承的概念時常讓大家混淆，都是獲得一樣的功能，為什麼又要分成兩種呢？這次將要帶大家用前端框架來看常見的組合與繼承。 先來看React官方的說法React has a powerful composition model, and we recommend using composition instead of inheritance to reuse code between components. 設計樣式的組合與繼承雖然討論到設計樣式就會想到OOP，可是我們可以從OOP上的心得，將部分的精髓應用在前端上。下面先來分別討論組合與繼承。 組合(Composite Design)其實當你在組合V-DOM的Component的同時，你可能就已經使用過組合了，以下來看例子。假設今天設計了一張GiftCard如下： 12345678910const GiftCard = () => { return ( <div className="card-warp card-warp-primary"> <h2 classN ...

當我們在使用一套框架或是架構的時候，多少都會好奇為什麼當初要這樣設計？以下將帶大家以React的視角，從MVC討論到MVVM。 關於React首先必須要知道的是，React嚴格上來說，並非是一個完整的Framework，只能稱得上是Library。像是Vue, React這種前端框架，就是種Library，和Angular提供的Solution不太一樣，主要原因是因為他們並沒有提供完整的解決方案來設計網頁，很多功能還是需要相依外部很多套件才能設計出玩網頁。 MVC架構 Model 資料型態與處理 View 畫面呈現 Controller 主要處理Model與View之間的邏輯 讓我們先撇開前端框架討論何謂MVC，如果要比照程式的話，大概就是： Model: Data View: HTML Controller: JavaScript 簡單來說就是，使用者瀏覽View來使用Controller更新Model。這在早期的網頁架構其實很夠用了，從網頁操作到更新資料，最後再回去View更新顯示的資料。流程看起來很合理也很正常，但是隨著網頁發展不斷的進步，大家開始發現一些問題 ...

報名原因其實關注網頁切版直播班也有一段時間了，從開始正式開班的第一屆就有開始在關注，發現學生和助教的發文頻率比以往開設影片教學多很多，報名也能拿到很多份多頁式RWD設計稿，我和同學認為進去應該會蠻充實的，因此最近和同學一起報名了六角學院開的切版直播班。雖然我們都已經是前端工程師了，也能具有在時限內完成需求的能力，但是我們希望能夠更專精切版的部分，因此報名切版直播班每週督促自己學習。 為什麼要選擇直播班現在很流行影片教學，而教學主要分直播和紀錄片，紀錄片對我來說就像是字典，我如果遇到問題，我會從我已經買的課程去看別人的思路與解法，因此我買的紀錄片並不會全部100%標示看完。而直播班是一種有目標的routine，大家有明確的目標做一件事情，並且還能從中得到回饋與建議，這是紀錄片不太容易得到的資源。 為什麼選六角學院我會報名六角學院開設的直播班也是因為我蠻認同他們的一些理念，尤其是共學與互助。有很多人因為問題過於簡單就不敢發問，擔心可能會在網路社群上給大家看笑話，但其實不問才是不好的，不管是簡單的或是難的問題，問題終究是問題。六角學院營造出的氛圍就是鼓勵大家多發問，問題總是要解決的，放著只 ...

在開發程式的時候，有時候我們會寫出一些連自己都不知道在寫什麼的程式，特別是如果自己都不知道自己在寫什麼的話，更不用說和你一起協作開發的夥伴了，因此下面將會帶大家了解Side-effects與非預期的Side-effects是什麼。 Pure functionPure function就像他本身的意思一樣，表示乾淨的函數。你可以很清楚且直覺地知道這個function做什麼事情，通常Pure function的輸入和輸出的參數都會是一致的，並且可以預期輸出的結果會長什麼樣子。 舉例以下的函數可以視為Pure function，用來產生身分證字好的function： 123456generateId = (id) => { // 初次換發 const idStamp = '01'; const formattedId = `TW-${id}-${idStamp}`; return formattedId;} 但是以下並非是Pure function，你知道為什麼嗎？ 123456g ...

你懂製程嗎？不不不…我懂CSS啦！！寫網頁的人，怎麼可以不懂CSS呢？什麼？你不懂CSS？下面一位～（Ｘ這次來跟大家分享的是，CSS從古至今的演化，儘管很多近代大家常用的技術，在早期其實很多人都已經提出來了。但是有價值的技術需要在適當的時機才能發揮它最大的價值。以下就來帶大家介紹分享一些CSS的知識吧！ 石器時期的CSS CSS reset在早期的CSS2.0的時期，Eric Meyer釋出了一個CSS Reset解決了不同瀏覽器擁有各自預設CSS樣式的問題。這是一個很簡短的CSS，但是初始化了大部分開發常用的tags。 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain)*/html, body, div, span, applet, object, iframe,h1, h2 ...

最近拿Pixel手機去便利商店使用google pay之後，就發生開機鍵有事沒事就被按的狀況，之後一直瘋狂的重開機，去網路上查發現似乎很多人都有這樣的問題，最後找到方法解決了！ 我試過的方法發生事情後，我去網路上查資料，發現目前現有的資料都無法解決我的問題，包含進去安全模式, 手動關機, 手動重開機……。目前只要是中文的文章都無法解決，原本想說等電池用完再說，但是真的要很久的時候，於是繼續查資料。最後我是在國外的論壇查到別人分享的方法。 解決方法你只需要使用開機鍵，而且需要有節奏的按按鈕。請記住這個節奏： 按～ 按～ 等一下… 按～ 按～ 等一下… ……一直這樣無限循環的按，最後你會發現螢幕不會重開機了，停留在一開始的開機畫面等待輸入PIN。終於修好了～原本想說是不是要買新手機了，根本就還沒備份就遇到這種事 來看外國人怎麼說在此分享別人的分析，如果你想知道原因的話：Long story short, if your Pixel is stuck in a constant reboot then it looks like a possible cause is the pin on ...

可能很多人都會有過努力做一件事情的經歷，努力拼命去做一件事情絕對會有收穫的，但是為什麼同樣跟別人一樣努力，卻會得到不一樣的結果呢？以下就來跟大家談一下吧 努力並沒有錯大家時常會聽到努力是很重要的，但是並不是每個人努力過後，都能得到滿意的結果。你是否曾經這樣呢？甚至是努力到最後還是看不到結果，於是放棄了。努力並沒有錯，而是你所使用的方法不適合你。 過程的重要性大於結果有時候你看到身邊的人，怎麼幾乎不用做什麼事情就馬上一點就會了，可是自己再怎麼看就是不會。儘管你去請教了你認為厲害的人問題，但是對自己卻沒什麼幫助，因為你只是知道答案（結果），而不是方法（過程）為什麼有些人在成績上總是特別突出，但是在實際應用上卻總是無法突顯自己的能力？這就是重視結果大於過程的side effects。 情境故事舉例大家常態認為拿高薪才是人生勝利組。咖啡剛畢業進了百萬年薪的企業賺錢，但是做幾年後發現沒興趣想轉換跑道。奶茶年薪普普，知道自己未來就是想當一位設計師而努力充實自己。幾年過後，奶茶的作品出名且不斷的有很多通告。咖啡後來才發現，你努力擠進大企業不是自己真正的人生目標，人生還有更多值得去探索的，錢再多也換不 ...

大家在設計網頁的時候，時常會遇到一些時常忽略的問題，例如明明更新了值，網頁的畫面卻沒有改變。如果你遇到了這個問題，那麼你可能忽略了Immutable的重要性了。 認識ImmutableImmutable在OOP的design pattern中，時不時會提出來講，儘管嚴格來說，Immutable不算是設計樣式的一種，但是設計程式的好壞，往往影響程式涉及很廣的層面，以下就來認識吧。 為什麼需要它Immutable的設計概念，可以讓開發者更容易掌握資料。有時候程式語言的特性和蜜糖，讓開發者太仰賴其中的滋味，而讓程式碼變得越來越髒。例如：call by reference可以讓開發者經由傳遞指定的位置，直接修改內容。但是問題來了，你要怎麼掌握你的資料是舊的還是新的，已經更新過了呢？ 迷：資料再拿出來看就好了呀！ 可以這樣做沒錯，可是你要怎麼確定，就是這筆？時間點？ 迷：放個戳記就好了呀！ 每個Object都要放？不是瘋了嗎？ 因此，Immutable就出來了 特點在記憶體中，變數宣告之後，會賦予一個空間reference給變數我們無法馬上得知變數是否已經更動，但是我們卻可以馬上知道這個 ...