Yang Yang

最近身邊的親朋好友甚至是同事，有時候會跟我說壓力很大很難去調適心情，於是我就把我曾經分享過的一些心得打出來，也算是給未來的我們看 換個角度看事件 - method同樣的問題，你去問不同的人，你也會得到不同的答案 我來拿評價很兩極的拿破崙來說好了：如果你去問左派的人，他們會認為他的好戰性差點毀了一個國家，並且是一位打壓女性的主義者，還恢復了奴隸制。但是如果你去問右派的支持者的話，他們會歌功頌德他的豐功偉業，他是如何拯救當時的法國。同時，你去問有在關注時事的巴黎市民，你可能會聽到他形容拿破崙是一位偉大的政治家，同時也是一位獨裁者，但是對國家的影響深遠。 不管是人還是事情，找到對的什麼，絕對是捷徑尤其是方法更是如此，當你不斷嘗試同樣的方法，怎麼嘗試效果都不顯著時，不仿換個方法試試看又或是找一些和你看事情角度不一樣的人討論，也許你會有不一樣的心得 這也是為什麼有些人很常把 換位思考 掛在嘴邊，但是我認為要了解為什麼需要換位思考，才會知道他的重要性不然人是時常追求安逸的生物，聽自己想聽的，待在自己舒服的舒適圈，誰想沒事找苦受呢？對吧 事情總是一體兩面 - Not/opposite 拿上面拿破崙 ...

之前有寫一篇文章在討論 promise 的使用，所以之前提到的這邊就不多講了，現在將帶大家進一步窺探 promise ～ 實作 Promise.allLet’s step by step！ Promise.all 的運作方式是，全部的 promise 都 resolve 則通過。所以我們可以得出一個簡單的公式： 裡面全部的 promise 都 resolve，則這個 promise 就會 resolve所以我在自己設計的 promiseAll，裡面會 return 一個 promise大概的架構會長這樣： 12345const promiseAll = (promises) => { return new Promise((resolve, reject) => { // ... }} 我需要把所有已經被 resolve 的 response 累積起來，以及計數被 resolve 的 promise，所以會這樣設計： 1234567const promiseAll = (promises) => &# ...

最近買了新電腦 Mac pro M1，真的超級推薦，很順也不會熱和吵，以前用公司的電腦一天要充電好幾次，我以前的 Mac air 一天也要充電個兩次，可是現在出門在外面的咖啡廳用，根本不用充電～在外面曬一整天回家還有個 6x%可以用，真的是太棒了！ 安裝 安裝 Homebrew他可以快速的安裝你所需要的套件～ 安裝 Node.js, yarn brew install nodebrew install yarn 安裝 Git brew install git 設定 GitHub今年開始在本地登入要用 SSH 喔！所以一定要申請 產生 SSH請參考這篇文章產生：https://ithelp.ithome.com.tw/articles/10205988 申請 SSH打開 GitHub 右上角的 setting → SSH and GPG keys → SSH keys在這邊請貼上你申請到的 key 貼到上面 終端機登入使用產生的 key 當作密碼登入SHA256:<這邊> 設定 vscode推薦擴充套件以下列出推薦安裝的幾個套件 Meterial Ico ...

最近回味相簿的時候剛好看到以前曾經幫大家製作的點心，想說可以來點輕鬆點的主題以前學生時期的時候，我就喜歡手作一些小東西，雖然公司沒有烤箱之類的，但是還是可以做一點簡單的東西今天我也來分享一下自己的私藏，讓大家也可以參考一些方法讓同事們適時的放鬆一下 美食照分享上面這張照片是一開始剛到職滿三個月的時候，做給大家吃的，大家非常喜歡呢裡面採用布諾乾酪, 藍莓, 酪梨，最後以番茄做基底，水果的果酸搭配酪梨的天然油脂與乾酪味很搭的一方面是慶祝跟我同期一起進來工作的同事們都通過試用期，另一方面也是激勵同事們的努力不過其實也不用像我這樣大採購，花小錢也是可以做簡單的點心 上面這張圖就是我在大家讀書會的時候做給大家吃的點心這次我只使用簡單的起司, 溏心蛋, 藍莓與蘋果當基底來食用味道也是相當不錯的 這張圖雖然賣相不是很好看（主要是配色和水果氧化的關係）不過吃起來大家也是非常好評，這也是我第一次嘗試使用海鮮搭配水果串 因為上次第一次使用葷食發現蠻多人喜歡的，所以這次就嘗試購買煙燻雞胸肉切片搭配水果串我在最下面也有加一片煙燻香腸，其實我有在猶豫要不要加，因為我做的通常是比較偏健康取向（？剛好也遇到酪梨的盛 ...

我們是2020年在g0v黑客松與g0v零時小學校誕生的自主學習民主社群，希望邀請所有自主學習者解決彼此的學習需求。目前正在用React搭配2021年流行的前端套件開發下一代的新網站，在創造更多價值的同時，我們也希望有新的夥伴加入，把我們的精神更加發揚光大。如果你是位對翻轉教育有理想抱負的夥伴，那你一定要多認識一下我們。 關於我們我們的解決方案不局限於產品，而是在那份價值和精神。在2020年我們參與雜學校的展覽與g0v summit 2020的演講，至今我們仍被很多活動受邀參與活動。 我們有Facebook粉絲專頁, Facebook社團, Instagram在今年年中疫情爆發時，我們在短時間內把社團人數迅速衝到一千多人，每天大家都會持續不斷的互相分享資源給彼此共學，最近也確定我們接下來的核心目標要做什麼了。 簡單介紹我們團隊我們團隊有內容部, 行銷公關部, 管理部, 設計部與IT部，目前比較需要行銷, 管理, 內容的夥伴加入。 如果… 你對GA, GTM, Data studio… 等等的知識或是資源管理有興趣，歡迎找我們聊聊，行銷, 內容, IT部歡迎你。 如果… 你用Figma ...

目前狀態狀態管理的套件五花八門，尤其眾多是基於Redux架構而產出的套件的套件產物，然而隨著hook的流行，也開始出現了更易於使用的套件。以下讓我們來zustand這個神奇的套件吧。 關於zustand官方稱這個套件是可擴張式的狀態管理解決方案，讓你透過hook的方式直覺的採用狀態管理。有趣的是，他們在想要取代Redux的企圖心，相較其他套件是比較強烈的。並且他們也整理出他們認為過往在Redux遇到了哪些問題想要設法改善 其中我覺得閒有餘力的話，可以參考Redux的這篇看看：Stale Props and “Zombie Children”在去年FB前端社團有人分享這篇文章Stale props and zombie children in Redux我覺得很適合讀，會從原始碼開始解析問題點 如何使用在以前我們無論是使用Redux還是Context，都必須要做一些前置設定不過zustand僅需要設計好hook後，即可馬上享用： 設計state hook 12345678import create from "zustand";const useStore = ...

這幾天太多人在玩點貓咪popcat.click了，所以來教大家如何從庶民變成專業點貓咪搞不好以後就會入坑一起加入寫網頁的行業了（？（我在提升大家的競爭力耶 第一步：下載瀏覽器套件：Allow CORS請拉到最下面看到Download下載：https://mybrowseraddon.com/access-control-allow-origin.html支援各種瀏覽器喔，不管你是chrome還是firefox都行 第二步：調整開始Allow CORS的時機建議調整成點擊後才啟用 第三步：打開網頁打開開發者工具，chrome可以按右鍵選擇檢查 第四步：打開Network打開Network選擇 Fetch/XHR（ALL也可以看到，只是東西比較多） 第五步：點幾下貓咪然後等待一段時間，你會看到 pop?pop_count=xxxxx 選擇這個 第六步：網址複製起來等等要用到 第七步：組合語法123456789setInterval(() => { setTimeout(() => { fetch('<網址複製到這邊～> ...

Nextjs提供很多解決方案包含了開發體驗, 打包, SSR……但是還是有不少人認為Next只是為了SEO而出現，沒有其他使用的必要性，因此這邊將會介紹你應該嘗試用用看的Next特色。 Next的貢獻只有SEO？我認為這是一個很大的謬誤，特別是有時候在聊天或是跟業餘的合作夥伴想要起一個小專案的時候，只要討論到Nextjs，就會說：可是我們又沒有要做SEO這時候我就會反問，那你知道除了SEO，Next還有什麼特別的地方嗎？我發現反問的時候，還蠻多人回答不出來的，因為這個原因，讓我想要把一些特點粗略地記錄一下。 Next的賣點官方事實上有列出幾個部分是在我們開發的時候需要考慮的： Code has to be bundled using a bundler like webpack and transformed using a compiler like Babel. You need to do production optimizations such as code splitting. You might want to statically pre-render some p ...

CSS模組化與CSS-in-JS是近年非常熱議且時常被討論的話題，最近特別是emotion被很多人推崇與討論，這邊將會跟大家介紹他主要的特色有哪些。 styled模組化官方有留下一段話：styled was heavily inspired by styled-components and glamorous 使用方式其實跟styled component幾乎一樣的，模組化的特性剛好也很適合配合React的元件化設計並且可以將其他模組化的元件擴充style，這樣的設計是彈性的。 12345678910111213import styled from '@emotion/styled'const ButtonWrapper = styled.button` color: turquoise;`;const Button = ({ text }) => { return ( <ButtonWrapper> {text} </ButtonWr ...

有時候在跟別人聊天的時候，就會聊到redux這個東西到底為什麼需要用到它，不用他的話會如何？因此這篇文章將從Redux改善了什麼以前的問題去做討論。 常討論的問題為什麼要用Redux不用Context？我覺得這個問題也可以問，為什麼要用Redux不用Flux 關於StoreStore這個概念是從Flux開始出現的，由於Component都有各自的State，當要嘗試共用的時候就會衍生出很多問題，例如：原本該放在child的State為了共用，需要搬到parent State，最後設計出來的Parent Component你會發現變成了擁有一堆State的巨大怪物。當然，你說這樣不好嗎？其實倒也未必，這樣看團隊怎麼去定義Component的State怎麼設計，但是對有些團隊來說，他們認為這是一個不太自然的設計，child應該擁有自己的State才可以做到元件獨立化。 為什麼要用Redux而不是Flux讓我們來聽聽作者怎麼說：Redux is not that different from Flux. Overall it has same architecture, but Redux ...