Yang Yang

這樣要來介紹的是開關原則，其實以字面上來說會有點讓人誤解其中的意思，個人認為有點像是積木或是拼圖疊加的概念，但是概念上也是很簡單，只要熟悉觀念即可變成自己的設計心法，讓我們來看看吧。 開關原則在OOP的設計中，開關原則需要保持開放程式的擴充性質，並且關閉程式的修改。聽起來好像很奇怪？那麼我們來舉例吧！如果今天你是設計汽車的工程師，當有人拿車子要給你修理輪胎的時候，你一定只會把輪胎更換而已，並不會動到其他東西，例如：引擎, 座椅……。只需要把指定的元件更換，而不需要動到過多的東西。 換句話說以OOP的設計原則來說，開關原則可以讓程式保持DRY（Don’t Repeat Yourself） 實例展示讓我們來看以下的例子，我有一個訂單，裡面包含了飲品： 1234567891011App = () => { const drink = { name: 'milk', size: 1000, } return ( <div className="App"> <Order ...

不管是人還是程式，都避免不了做過多事情而造成的一些額外負擔，例如一次管太多事情會讓你忘記，日後不易記得，這裡就來介紹實用的概念吧。 Single responsibility principle - 單一職責原則這邊舉以下的範例程式作為例子： 123456789101112131415161718192021222324const onLoadUserList = (setUsers) => { axios .get("https://ex.tw/") .then(response => setUsers(response.data)) .catch(err => console.log(err));}const UserListPage = () => { const [users, setUsers] = useState([]); useEffect(() => { onLoadUserList(setUsers) ...

有時候在開發的時候，會聽到有些人說SOLID原則可以有助於提升後續維護與擴充，那麼以下就來帶大家一起了解吧。 認識SOLID原則SOLID分別代表五個專有名詞，以下先大概簡單介紹一下。在介紹之前，如果你已經對SOLID有初步的了解，可以直接到以下的範例查看：📌 S 前端開發的SOLID - 單一職責原則📌 O 前端開發的SOLID - 開關原則📌 L 前端開發的SOLID - Liskov替換原則📌 I 前端開發的SOLID - 介面隔離原則📌 D 前端開發的SOLID - 依賴反轉原則 Single responsibility principle - 單一功能原則每一個class或function都應該僅具有單一功能為主 Open–closed principle - 開關原則這裡指的開與關，事實上就是指我們常聽見的擴充與修改。 Open設計程式應該保持適當的開放性以便後續擴充。 Close設計程式需要注意耦合性的問題，每個class或是function之間，應該儘可能的獨立開來。 看完上面還不太懂的話，你可以想像一下你今天有一台汽車，你開著開著好幾天， ...

自從開始上班之後，開始會聽到很多認識的人或是同事開始談論自身的健康遇到什麼狀況，有些人感覺沒什麼異狀，有些人可能開始體力大不如前，甚至開始被醫生給予警訊要多補充一些營養，這邊就來分享自身經驗。 我的辦公室營養品菜單 魚油 補充魚油的好處多，除了可以改善與預防心血管疾病之外，也很常被健身的人拿來作用營養補充品。 可參考這篇 蝦紅素 蝦紅素的好處蠻多的，也因此市售價格通常會比較高一點。 主要被大家知道的是，可以改善身體的老化問題, 眼睛, 糖尿病, 血脂…… 可參考這篇 藍莓碇 相信很多人都知道DHC系列，很常在日本藥妝店看到，算是親民的視力保養品。 葉黃素/玉米黃質 改善年紀大的黃斑, 改善暗處的適應能力, 降低白內障, 視覺疲勞… 通常被視為眼睛的保養品 可參考 維他命D3 關於維他命D的介紹，統一寫在下面的大標題 我習慣每天補充2000UI，看個人的習慣與需求 綜合維他命 我反而不太會刻意補充維他命B，因為綜合維他命大部分都能補充到每日建議攝取的量了，除非真的需要補充，我才會另外再去吃維他命B，綜合維他命也算是懶人補充，也適合當天飲食不正常的人補充，當然也有人認 ...

相信有些人會很好奇網站的組成，但是可能又沒有學過程式開發，無法簡單判斷一個網站使用了什麼工具。或是開發者想要輕鬆的無痛分析一個網站，又懶得打開程式結構去分析。以下將教大家一個簡單的方式。 實用工具介紹這次要介紹的工具叫做 wappalyzer 下載連結 Google chrome extension載點 以下是官網的敘述： 123Technology driven lead generationSell and market more effectively with technographic insights. We track over a thousand technologies accross websites of millions of companies to help you to identify new prospects and increase your addressable market. 簡單來說，這個就是一個套件，只需要安裝在瀏覽器上，當你在瀏覽某網站的時候，即可分析這個網站有包含哪些技術。 套件特色入我們來看看套件的特色： Find out ...

我在參加六角學院舉辦的鼠年鐵人賽寫了一系列的SEO文章有需要的人可以多參考這些文章，不管你是有沒有寫過程式的人都歡迎多參考了解SEO的各種相關經驗哦如果有什麼建議或是想了解的部分，也歡迎提供： SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇

上一篇教各位如何將前端配合同構達成如SSR的效果，但是其實那種寫法是有一些資安隱憂需要注意的。原本是CSR變成SSR的話，就需要考量到Server注入的資料是否有問題，因此有可能會發生XSS的問題。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 認識Cross-Site ScriptingCross-Site Scripting又稱為XSS，中文稱作跨網站指令碼，透過程式碼注入的方式，將程式把注入到網頁上面並且執行，而影響到網站的正常運作，XSS變化的方式不少，時常搭配HTML的斷句或是大小寫等…避開一些程式規則。 什麼狀況會發生XSSXSS有很多案例，以下列出幾個比較重要且經典的 Reflected XSS - 即時反映的script有任何可輸入的欄位，都必須小心發生XSS通常惡意者會利用回吐的error，從中拿取資料 1234<form> <in ...

相信很多人看到上一篇文章大概都嚇壞，甚至打退堂鼓了心裡開始想：什麼？難道要做SSR是這麼複雜的事情？其實任何的方式都可以簡單也可以複雜，只是你有沒有選擇對的工具和方法之前已經有很多人注意到了這點，所以框架的框架也誕生了 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 什麼是框架的框架大家熟知的框架當然就是React和Vue我們都知道這兩個都是開發前端網頁很有名的框架但是有團隊非常熱心的開發了框架的框架，加速和解決大家開發程式所遇到的問題因此之後就有了Nextjs與Nuxtjs，以下帶大家了解 為什麼需要Nextjs讓我們來看看官方的這段話 1Next.js gives you the best developer experience with all the features you need for production: hybrid static & serv ...

在上一篇了解為什麼很多開發者希望把CSR做到如SSR的效果，這篇就來介紹如何做到Isomorphic的效果。以下將會介紹如何讓SPA程式做到類似SSR的效果。補充：不管你是開發Vue或是React，Server端的程式都是Node.js，因此開發任何框架的開發者都可以觀看這篇參考。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 認識IsomorphicIsomorphic的翻譯為同構，你可以理解成，建構出相同程式的概念，有些人又稱它叫做pre-render。一般傳統的SSR會把所有的程式產生出完整的HTML再丟到Client，但是同構的方式跟SSR不一樣。同構所做的事情是，他只會把產生出部分的HTML給Client，剩下半殘的未產生的HTML繼續交給Client產生。 關於調整以下的調整將會分F2E與Node（中間層或API server）的部分改寫調整的部分其實比較麻煩的 ...

這篇文章將會進一步的講述上次所提到的SSR與CSR，並且進一步的分析如何讓CSR也能達到如SSR的效果。 SEO全系列文章📌 如何加強網站的SEO - 基礎篇📌 如何加強網站的SEO - 進階篇📌 如何加強網站的SEO - SSR與CSR篇📌 如何加強網站的SEO - 同構篇📌 如何加強網站的SEO - 框架篇📌 如何加強網站的SEO - 資安篇 SSR與CSR比較 Server-Side Rendering 傳統網頁渲染的方式，從Server產生HTML後，再傳送到Client。 需要等待Server產生好HTML，Client才會收到畫面，因此可能會有等待過久的狀況。 Client-Side Rendering Modern web的網頁開發框架主要是以CSR為主，通常是SPA的網頁開發框架。 程式傳送到Client才產生HTML，所以一開始Client收到的HTML，幾乎是一張白紙，只有進入點（root）。 SPA藉由先傳送程式碼到Client，來增加Client瀏覽網站的流暢度，在某些情境可以加速載入。 CSR的疑問你可能看完上面的比較，會覺得CSR ...