Yang Yang

組合和繼承的概念時常讓大家混淆，都是獲得一樣的功能，為什麼又要分成兩種呢？這次將要帶大家用前端框架來看常見的組合與繼承。 先來看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給變數我們無法馬上得知變數是否已經更動，但是我們卻可以馬上知道這個 ...

自從讀了研究所之後，就很少有機會可以到海線去回味了，這個月難得回母校參與講座，TED系列演講以前學生時期影響過我不少人生觀，知道母校最近有TEDx之後蠻開心，我還記得當時是幾年之前，那時候好像還在籌備中，後來開始舉辦了第一場TEDx演講，只可惜那時候我和預定的活動撞到，無法順利騰出時間出來聽，今年得知有新的主題之後，當然心想，我這次一定要請假參加！ 演講主題這次演講主題是起義 - Uprising，以下看官方的解釋： 122020年TEDxProvidenceUniversity以「起義」（Uprising）為年會主題與關鍵願景，「起義」是變革與更新的行動實踐，是這個不夠完美世界中的浪漫詩篇，總是可以為人們帶來正向的力量與堅持的勇氣。 其實參加完這個活動，我覺得起義會因為每個人的不同而有各自的解讀方式，我個人認為起義最好的解讀方式就是“全新的開始”。怎麼說呢？每個人的經歷都有好有壞。儘管很多人喜歡在大眾面前打扮得光鮮亮麗，但是只有自己最清楚那個多麽脆弱甚至遍體鱗傷的自己。每個人生活的經歷都不是那麼的完美，但是卻也創造與眾不同的自己。 議程 印象深刻的講者上半場講者 - 雷娜最有印象的 ...

在設計程式的時候，相信各位或多或少會突然寫出一些有點髒的程式碼，有時候是不經意的，有時候是一時想不出方法，不得已寫出的程式碼，這篇文章將會介紹兩個簡單的開發準則，讓各位在開發的時候可以避免寫出一些日後不易閱讀的程式碼。 認識DRY讓我們先來了解什麼是DRY，DRY分別是三個英文字的縮寫：Don’t Repeat Yourself 原因為什麼要避免重複的程式碼出現呢？ 重複的程式碼會讓整個scope變得很龐大 撰寫重複的程式碼，會消耗工程師較多的時間（時間成本） 重複量大的程式不易於日後閱讀與維護 優點 節省時間與精力 日後易於維護 減少Bug發生的可能性 認識KISS原則KISS原則代表的意思為：Keep It Simple and Stupid基本上的意思為，讓程式碼簡單, 清楚與容易理解。這個原則有點開發者體驗導向(Development Experience)，你可以想像一般人的記憶可能不會花太多時間在一坨程式碼上，而且人是有點惰性的生物，面對不易閱讀的東西，當然會懶得去看。 原則 每一個功能盡量不要撰寫過多的行數 每個方法只能解決一個小功能（Divide and Conq ...