Yang Yang

上次我們談過 XSS 的資安議題，現在我們再來看一下網站可能還會有什麼資安隱憂的問題吧 Cross-site scripting - XSS 跨站腳本攻擊中文叫跨網站攻擊，攻擊者把程式注入到某個地方（可能是網頁上或是資料庫裡面）讓其他使用者打開網頁時，執行這段程式。因為是執行腳本語言，所以你想像到的任何事情，幾乎都可能會發生。例如：使用者資訊, cookie, sessionID, 攝像頭……。 操作手法腳本語言的斷詞斷句 1https://placeimgxxx.com/320/320/any" onerror="alert('xss injection') 預防方式沒有 100%預防的最佳解，但是至少常見的資安議題要做到確實的預防 OWASPOWASP 有列出幾個常見的手段，同時也有提供 JAVA 一些轉譯的範例，都列在這裡了 消毒器（Sanitizer）透過消毒可以盡可能的排除讓比較敏感或是可能影響腳本語言執行與預期不同結果的問題發生。我們可以用別人設計好的套件來使用，或是自己設計一個 escapeHTML 來過濾敏感字元。消毒盡量從源頭 ...

最近身邊的親朋好友甚至是同事，有時候會跟我說壓力很大很難去調適心情，於是我就把我曾經分享過的一些心得打出來，也算是給未來的我們看 換個角度看事件 - 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 ...