🏠 首頁

🏠 首頁

首次嘗試新增 Twill CMS 模組

繼續跑官方教材 https://twillcms.com/guides/page-builder-with-blade/creating-the-page-module.html 執行指令 ``` php artisan twill:make:module pages ``` 會建立 pages 模組 對應的檔案變化可以在這查看 https://github.com/howtomakeaturn/twill-play/commit/d18bd06d566b135353d4230ca8a97efbddaded6f 建立了很多檔案到 app 底下,可見背後的哲學是: > 接下來就當成是一般的 laravel app,自由開發吧! > 只是在建立 app 的時候 可以使用許多 twill 功能輔助開發! --- 然後新增的資料表如下 ``` pages page_revisions page_slugs page_translations ``` 通通都沒有 twill_ 這樣的 prefix,所以「模組」應該視為「專屬於你 app 的內容」 跟前面的「檔案都直接在 app 底下」相呼應 滿合理的設計! 那麼我可以在那個 migration 檔案 `database/migrations/2024_05_22_013232_create_pages_tables.php` 內新增我自己想加的欄位嗎? > This file will create the minimum required tables and columns that Twill uses to provide the CMS functionality. Later in the guide we may add some more fields to the database, but will will do that in a new migration. > Once you are more experienced with Twill, you may want to add fields at this moment, before you run the migrate command. That way, you do not have to immediately add a new migration file. 也就是說 官方歡迎你擴充這幾張 table 然後要新增一筆 migration 或者直接在這修改 都可以! --- 直接打開後台面板 並不會看到 pages 模組,twill 不會自動偵測你建立的模組 要在 `AppServiceProvider` 手動登記 ``` TwillNavigation::addLink( NavigationLink::make()->forModule('pages') ); ``` 接著,就可以在後台建立第一筆資料囉! 建好之後,會發現在四個資料表內,各自多了一筆資料 ``` pages page_revisions page_slugs page_translations ``` --- 我剛建了代號 `my-1st` 的資料,後台顯示一個網址 `http://twill-play.local/en/pages/my-1st` 打開會發現根本沒有頁面! 這表示 twill 目前主要是處理 CMS 與後台面板的東西 沒有前台頁面 那個要另外做! 所以 `app/Http/Controllers/Twill/PageController.php` 檔案是代表後台的模組管理 controller 然後 `routes/twill.php` 裡面登記的 ``` TwillRoutes::module('pages'); ``` 也是代表登記後台的模組管理相關 routes 所以是要你自己在 `routes/web.php` 處理你的前台 routes 吧! 其實,我覺得這樣的設計,真的很清楚很漂亮!只是對新手來說,會覺得工程較複雜、檔案很分散吧! 接著就來建前台頁面吧!

首次嘗試安裝 Twill CMS

在開始研究模組之前 先來安裝 twill 官方有一份簡易教材 https://twillcms.com/guides/page-builder-with-blade/index.html 安裝 twill 可以分成三步驟: - 安裝 laravel - 安裝 twill 套件 - 跑 twill 初始指令 我開了一個 githun repo 可以在前三個 commits 分別看到對應的檔案變化 https://github.com/howtomakeaturn/twill-play/commits/main/ --- 在本機裝好之後 twill admin 面板看到的是 紀錄 `All activity` `My activity` 的面板首頁 以及 `Media Library` 功能 僅此而已 可以說是非常乾淨 也就是在新增模組之前 admin 面板可說是啥都沒有 很好的極簡哲學 資料庫方面 初始會出現的資料表如下 ``` activity_log app_settings failed_jobs migrations password_reset_tokens personal_access_tokens twill_blocks twill_features twill_fileables twill_files twill_mediables twill_medias twill_password_resets twill_related twill_settings twill_setting_translations twill_tagged twill_tags twill_users users ``` 可以看到 twill 開頭的資料表 都是 twill 提供的 cms 功能 其餘都是 laravel 原生提供的功能 這邊我有些不懂的是 activity_log 與 app_settings 也是 twill 提供的 怎麼不加上 twill 開頭呢? 沒關係,瑕不掩瑜! 新增的檔案可以在這邊看到 https://github.com/howtomakeaturn/twill-play/commit/60d420d283aaa37e96ee29c72077292261b1383b 我認為切分得非常漂亮:屬於 twill 的都有獨立路徑 屬於你 app 的就用 laravel 慣例路徑 這樣在替客戶開發網站的時候 非常放心 客戶的 domain 與 twill 的 domain 不會混在一起! 接著來 看看怎麼新增模組吧!

Twill CMS 火力展示與資料模型

首先 來看一下這款 CMS 的現成應用 以及資料模型 Pentagram 真正的官網前台 https://www.pentagram.com/ 以及 CMD 的示範後台 https://demo.twill.io/ --- 稍微逛一下 會看到前台導覽列有 `work` `about` `news` `contact` 然後在示範後台會看到 `Work` `About` `Contact` 我認為就是版本差異而已,也就是 news 模組是後來才加的 所以接案團隊用 twill 建了三個模組 `Work` `About` `Contact` --- 在後台查看這三個模組 會看到都有次級導覽列 `All items` `Mine` `Published` `Draft` `Trash` 所以這些是核心通用功能,也就是資料的發佈狀態 --- 三個模組有差異的導覽列項目為 Work -> `Work` `Disciplines` `Sectors` About -> `People` `Roles` `Overview` Contact -> `Offices` 翻閱文件,會看到所謂的 Nested Modules https://twillcms.com/docs/modules/nested-modules.html 所以除了普通的模組之外,還有兩種巢狀模組可以建造 `self-nested` and `parent-child` 前面提到的三個模組,目前看不出是哪種模組架構,沒關係 反正就是模組可以有水平連結關係、或是垂直連結關係就對了 也許應該說是七個模組吧 `Work` `Disciplines` `Sectors` `People` `Roles` `Overview` `Offices` 光這些模組就能做出 Pentagram 這麼漂亮的官網? 三個大分類只是另外的導覽列功能,要分開研究?還不確定 那就架構大略先研究到這邊,接著來看一下模組到底怎麼建立

20 多個 DOM 專案:您的前端突破!

透過 DOM 專案提升您的前端技能:新手開發人員的遊樂場 ---------------------------- 透過[DOM 專案改變您的學習體驗!](https://github.com/jisan-mia/dom-projects/)深入研究 20 多個使用 HTML、CSS 和 JavaScript 建構的實用專案。非常適合新手和經驗豐富的開發人員,您會發現一些可以挑戰和激勵您的東西。 以下是 DOM 專案的與眾不同之處: - **邊做邊學:** DOM 專案直接深入前端開發的實際面向。您將透過建立實際專案來學習,鞏固對核心概念的理解。 - **漸進式學習:** DOM 專案提供了按難度分類的精選專案。從適合初學者的專案開始,例如“計數器”或“滾動動畫”,並逐漸進展到更高級的專案,例如“高級待辦事項”或“REST 用戶端”。 - **[開源與協作:](https://github.com/jisan-mia/dom-projects/)** DOM 專案的美妙之處在於其開源特性。您不僅可以從現有專案中學習,還可以將您的創作貢獻給該平台,從而培養一個充滿活力的學習者和開發者社群。 - **輕鬆設定:**設定 DOM 專案輕而易舉。不涉及複雜的安裝過程。只需分叉存儲庫,將其克隆到本地計算機,然後在瀏覽器中打開 index.html 文件。您已準備好開始您的程式設計冒險! ### 深入研究專案: [DOM Projects](https://www.jisan.io/dom-projects/)擁有**20 多個專案**,每個專案都針對特定技能和概念精心設計。以下是一些激發您興趣的詳細範例: ### [計數器](https://www.jisan.io/dom-projects/projects/counter/) ![櫃檯](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/egsodt4dyfekiwp8ln4q.png) **描述**:一個簡單的計數器專案,允許使用者增加和減少螢幕上顯示的數字。它還包括一個用於將計數器重置為零的按鈕。 **學習理念:** - DOM 操作:了解如何使用 JavaScript 存取和修改 HTML 元素。 - 事件處理:了解如何擷取使用者互動(在本例中為點擊)並使用 JavaScript 觸發特定操作。 - 基本 JavaScript 函數:探索如何寫函數來執行遞增、遞減和重置計數器值等任務。 ### [爸爸笑話](https://www.jisan.io/dom-projects/projects/dad-jokes/) ![爸爸笑話](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z09wwb70arrb5ccjhl87.png) **描述**:該專案使用 JavaScript 中的非同步技術從外部 API 獲取隨機爸爸笑話。一旦檢索到,笑話就會顯示在網頁上供您娛樂。 **學習理念:** - 非同步程式設計:了解如何處理需要時間才能完成的操作(例如從 API 取得資料)而不阻塞 JavaScript 中的主執行緒。 - Fetch API:了解如何使用內建瀏覽器功能向 API 發出 HTTP 請求並擷取資料。 - 使用 API:探索如何與外部 API 互動以存取這些服務提供的資料或功能。 ### [表單驗證](https://www.jisan.io/dom-projects/projects/form-validation/) ![表單驗證](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7b7mbyvuwxdwkzv2eidr.png) **描述**:此專案示範了使用 JavaScript 進行客戶端表單驗證。它在提交之前驗證表單中的使用者輸入。此外,驗證成功後,它會顯示成功訊息並允許使用者以唯讀格式預覽提交的資料。 **學習理念:** - 表單驗證:了解如何使用 JavaScript 在提交之前驗證表單中的使用者輸入。這有助於確保資料完整性並防止處理無效資料。 - DOM 操作:了解如何根據驗證結果存取和修改表單元素(例如顯示錯誤訊息或停用輸入欄位)。 - 事件處理:使用 JavaScript 擷取表單提交事件並觸發驗證邏輯。 ### [隨機用戶](https://www.jisan.io/dom-projects/projects/random-user/) ![隨機用戶](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jlfog2j2okpgtx01eyso.png) **描述**:此專案利用 API 產生隨機使用者資訊。它會取得姓名、電子郵件、頭像等資料,並將其顯示在網頁上,模擬隨機使用者設定檔。 **學習理念:** - 非同步程式設計:與專案 2 (DadJokes) 類似,此專案強化了 JavaScript 中的非同步操作。 - Fetch API:繼續練習使用工具向 API 發出 HTTP 請求並檢索資料。 - 使用 API:進一步探索與外部 API 互動以存取特定功能或資料。 ### [摩斯電碼翻譯器](https://www.jisan.io/dom-projects/projects/morse-translator/) ![摩斯電碼翻譯器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/il6si3v62r76udcis9lq.png) **描述**:此專案允許使用者在摩斯電碼和文字之間進行翻譯。使用者可以鍵入文字並查看對應的摩斯電碼,也可以輸入摩斯電碼並查看翻譯後的文字。 **學習理念**: - 字串操作:了解如何在 JavaScript 中使用字串,包括拆分、連接和字元操作的函數,這對於摩斯電碼翻譯至關重要。 - 條件語句:學習如何在 JavaScript 中使用條件語句(if/else)來實現基於使用者輸入(文字或摩斯電碼)的翻譯邏輯。 ### [基本計算機](https://www.jisan.io/dom-projects/projects/basic-calculator/) ![基本計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/riz357iso4aux1an08sx.png) **描述**:該專案使用 JavaScript 建立一個最基本的計算器應用程式。它允許使用者執行基本算術運算,例如加法、減法、乘法和除法。使用者可以輸入數字並使用螢幕上的按鈕選擇所需的操作。計算器顯示計算結果。 **學習理念**: - 事件處理:與先前的專案類似,此專案練習捕捉使用者對計算器按鈕的點擊並觸發操作(更新計算和結果)。 - DOM 操作:示範如何使用 JavaScript 更新計算器介面中顯示的數字和結果。 - JavaScript 中的基本數學運算:探索使用 JavaScript 內建的數學運算子和函數來執行加法、減法、乘法和除法等計算。 ### [普通計算機](https://www.jisan.io/dom-projects/projects/normal-calculator/) ![普通計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qpgq9hnt59vlcaz8r0zx.png) **描述**:該專案建立在基本計算器的基礎上,為標準數學計算提供更全面的使用者體驗。它適合熟悉基本計算器功能的使用者。 **學習理念:** - 基於現有專案:示範對基本計算器概念的擴展,以建立更用戶友好且功能豐富的計算器。 - 增強的使用者互動:引入改進使用者與計算器互動的技術,例如處理小數輸入或合併記憶體功能。 ### [科學計算機](https://www.jisan.io/dom-projects/projects/scientific-calculator/) ![科學計算機](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4taeew6vv1ublamhbyod.png) **描述**:此專案透過提供三角函數(正弦、餘弦、正切)、對數和指數等科學函數,將計算器功能提升到一個新的水平。它迎合需要高級數學計算的用戶。 **學習理念:** - 建立複雜的應用程式:示範如何建立具有先進科學功能的更複雜的應用程式。 - JavaScript 中的數學函數:介紹使用 JavaScript 內建的數學函數進行高階計算 ### [簡單的一切應用程式](https://www.jisan.io/dom-projects/projects/js-todo/) ![簡單的一切應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/55d842o20i8j528q2maz.png) **描述**:該專案是一個基本的待辦事項清單應用程式。使用者可以新增任務、將其標記為已完成以及從清單中刪除它們。它演示了管理和追蹤任務。 \*\*學習理念: - DOM 操作:此專案強化了使用 JavaScript 動態新增、刪除和修改 HTML 中的清單專案的實務。 - 陣列:它演示了在 JavaScript 中使用陣列儲存和管理任務資料。 - 使用者介面更新:探索如何根據使用者互動更新待辦事項清單的視覺表示(新增、完成、刪除任務)。 ### [個人資料表和卡片](https://www.jisan.io/dom-projects/projects/profile-form/) ![個人資料表和卡片](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/13yidfqfe156556rky87.png) **描述**:此專案允許使用者使用表單建立動態個人資料卡。用戶可以輸入他們的訊息,提交後,將建立一個新的個人資料卡並顯示在頁面上。它還包括刪除現有個人資料卡的功能。 **學習理念:** - 表單處理:該專案基於表單驗證(專案 3)的概念,重點關注捕獲表單資料並將其用於進一步的操作。 - DOM 建立和操作:它超越了基本的 DOM 操作,根據使用者輸入動態建立新的 HTML 元素(個人資料卡)。 - 事件處理:繼續練習捕獲使用者與表單和刪除按鈕的互動並觸發適當的操作。 ### [PC元件過濾](https://www.jisan.io/dom-projects/projects/pc-component-filter/) ![PC元件過濾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/txtgpqu4t0zbi2mcovbo.png) **描述**:該專案允許使用者根據他們的選擇過濾電腦部件。使用者可以從各種選項中進行選擇,例如 CPU 品牌、RAM 大小、顯示卡類型等,顯示的元件清單將動態更新以反映所選的篩選器。 **學習理念:** - DOM 操作:與先前的專案類似,此專案實踐根據使用者選擇動態更新顯示的元件清單。 - 陣列和資料過濾:探索使用陣列來存儲計算機部件資料,並在 JavaScript 中實現過濾邏輯以匹配用戶選擇。 - 使用者介面更新:重點是根據應用的過濾器更新元件列表的視覺表示。 ### [天氣應用程式](https://www.jisan.io/dom-projects/projects/weather-app/) ![天氣應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l4tjhdmz5xlpxia218lp.png) **描述**:該專案是一個天氣應用程式,允許用戶透過城市名稱搜尋當前的天氣資訊。它利用外部天氣 API 來獲取資料並在螢幕上顯示溫度、濕度和天氣狀況等詳細資訊。 **學習理念:** - 非同步程式設計:與 DadJokes(專案 2)等專案類似,此專案強化了處理非同步操作以獲取天氣資料的概念。 - Fetch API:繼續練習使用工具向 API 發出 HTTP 請求並檢索天氣資料。 - 使用 API:進一步探索與外部 API 互動以存取天氣資訊。 ### [感言滑塊](https://www.jisan.io/dom-projects/projects/testimonial-slider/) ![感言滑塊](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sroguxb8914j1dv65fpw.png) **描述**:此專案建立一個具有滑桿功能的推薦部分。它顯示使用者的引言或推薦,使用者可以使用滑桿控制來瀏覽它們。 **學習理念:** - DOM 操作:示範如何根據滑桿位置操作建議元素的可見性。 - 事件處理:捕捉使用者與滑桿控制項的互動並觸發滑動動畫。 ### [滾動動畫](https://www.jisan.io/dom-projects/projects/animation-on-scroll/) ![滾動動畫](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3o5psut9f3d5cmns3ld3.png) **描述**:此專案包含向下捲動頁面時觸發的動畫。當使用者滾動時,網頁上的不同元素會變成動畫,增加視覺趣味和互動性。 ### 學習理念: - CSS 動畫:探索使用 CSS 動畫來建立根據滾動位置啟動的視覺效果。 - 用於捲動事件的 JavaScript:介紹使用 JavaScript 來偵測滾動事件並相應地觸發動畫。 ### [搜尋字段顯示](https://www.jisan.io/dom-projects/projects/search-field-reveal/) ![搜尋字段顯示](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/awycht9282x9n35gyy5j.png) **描述**:此專案利用動畫來增強使用者體驗。它會建立一個搜尋字段,在使用者互動(例如,點擊按鈕)時透過動畫顯示自身。 **學習理念:** - CSS 動畫:介紹使用 CSS 動畫為搜尋欄位顯示建立動態視覺效果。 - 事件處理:涵蓋捕獲使用者互動(例如按鈕單擊)並使用 JavaScript 觸發動畫。 ### [問題清單及進展](https://www.jisan.io/dom-projects/projects/question-list-progress/) ![問題清單及進展](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p6unngf1az0084i3tnb.png) **描述**:此專案示範了 JavaScript 中常見的 DOM 操作技術。它具有問題清單和進度指示器,進度指示器會隨著使用者回答問題而更新。 **學習理念:** - DOM 操作:此專案強調根據使用者與問題的互動來操作進度指示器等元素。 - 事件處理:捕捉使用者與問題元素的互動並觸發更新進度指示器等操作。 ### [莫代爾](https://www.jisan.io/dom-projects/projects/modal/) ![莫代爾](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q0b06e0fi84z7wqsjev4.png) **描述**:該專案會建立一個模式窗口,它是一個覆蓋頁面主要內容的彈出元素。它通常用於登入表單、註冊提示或警報訊息等內容。 **學習理念:** - DOM 操作:重點是根據使用者互動顯示和隱藏模式視窗元素。 - 事件處理:捕捉觸發元素和模式的關閉按鈕上的點擊以控制其可見性。 ### [高級待辦事項](https://www.jisan.io/dom-projects/projects/advanced-todo/) ![高級待辦事項](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8baq9a3n6qdwlookd338.png) **描述**:該專案基於簡單的待辦事項應用程式(專案 8)建置,提供過濾、編輯和刪除任務等高級功能。使用者可以對任務進行分類、編輯現有任務以及從清單中刪除不需要的任務。 **學習理念:** - 基於現有專案:與科學計算器(專案 7)類似,該專案演示了對基本概念(待辦事項清單)的擴展以建立更高級的應用程式。 - 使用者介面更新:擴展了更新待辦事項清單的概念,包括過濾、編輯任務內容和刪除任務等功能。 ### [復古計算器](https://www.jisan.io/dom-projects/projects/retro-calculator/) ![復古計算器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/thdpc8rzcppjfhlw8aru.png) **描述**:該專案實現了經典的計算器設計,並支援實體鍵盤輸入。它允許用戶使用類似於傳統計算器的佈局輸入數字並執行計算。 **學習理念:** - 事件處理:與其他專案類似,該專案側重於捕獲用戶交互,但在本例中,它包括處理計算器按鈕上的點擊和鍵盤上的按鍵。 - DOM 操作:根據使用者輸入和計算結果更新計算器顯示。 - 物件導向程式設計:此專案引入了 JavaScript 中物件導向程式設計 (OOP) 的概念,用於建立更模組化且可重複使用的計算器功能。 ### [簡單的測驗應用程式](https://www.jisan.io/dom-projects/projects/simple-quiz-app/) ![簡單的測驗應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/khvz1xnzfvusxb8hvwrh.png) **描述**:該專案建立一個簡單的測驗應用程式,用戶可以在其中回答問題並查看結果。它包括每個問題的計時器,以加入時間壓力元素。 **學習理念:** - DOM 操作:更新測驗介面以顯示問題、處理答案選擇並顯示最終結果 ### [進階測驗應用程式](https://www.jisan.io/dom-projects/projects/advanced-quiz-app/) ![進階測驗應用程式](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/98kzkz9jyfl6vjkau9z1.png) **描述**:該專案建立在簡單的測驗應用程式的基礎上,提供更多自訂選項。使用者可以在開始測驗之前設定問題數量、選擇主題並定義難度等級。 **學習理念:** - 基於現有專案:與其他專案(科學計算器、高級待辦事項清單)類似,該專案演示了透過附加功能擴展基本概念。 - 使用者輸入驗證:它引入了驗證自訂選項的使用者輸入的概念(例如,確保選擇有效數量的問題)。 - 條件語句:在此專案中發揮更重要的作用,因為 JavaScript 邏輯需要根據使用者定義的參數來調整測驗。 ### 採取下一步: 準備好開始您的前端開發之旅了嗎?以下是如何開始使用 DOM 專案: 1. 造訪 GitHub 上的 DOM 專案儲存庫: <https://github.com/Jisan-mia/dom-projects> 2. 瀏覽專案清單並選擇一個符合您的技能水平和興趣的專案。 3. 請按照設定[說明](https://github.com/Jisan-mia/dom-projects?tab=readme-ov-file#how-to-set-up-dom-projects-for-development)進行操作並在瀏覽器中開啟專案。 4. 深入研究程式碼、實驗並學習! DOM 專案中的每個專案都可以讓您練習編碼技能,並幫助您理解前端開發中的關鍵概念。無論您是剛起步的初學者,還是希望提高技能的經驗豐富的開發人員,DOM 專案都能滿足每個人的需求。 請記住,最好的學習方法是實踐。所以,捲起袖子,選擇一個專案,然後開始編碼吧!快樂學習! --- 原文出處:https://dev.to/jisan/20-dom-projects-your-frontend-breakthrough-1h8a

50 個最佳免費 HTML 範本網站

您可以在其中找到和下載使用普通 CSS 以及每個主要框架建立的免費 HTML 模板。這些高品質的專案將為您的網站、登陸頁面、部落格、作品集、電子商務和儀表板專案提供支援。 在線空間中有許多模板建立者。以下是使下面提到的那些脫穎而出的原因。 - 模板免費提供給個人和商業用途 - 專案看起來很現代,並提供強制性的即時預覽 - 您只需提供電子郵件地址或註冊即可下載 本文分為兩部分。第一個展示了網站和登陸頁面模板提供者。第二部分重點介紹儀表板和 UI 套件建立者。 HTML 修訂版 -------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/08tufzx4fdyi5drm42i8.jpg)](https://htmlrev.com/) [HTMLrev](https://htmlrev.com/)展示免費的 HTML vanilla CSS、Bootstrap、Tailwind、Bulma、Angular、React、Vue、Nextjs、Nuxt、Svelte、Astro、Laravel、Django、Gatsby、Hugo、Jekyll 和 BCMS 模板。可以肯定地說,它是面向 Web 開發人員的最大的免費 HTML 模板庫。您會發現來自世界各地頂級製造商的最佳商品。 **特徵** - 為 Web 開發人員提供的最大的免費範本庫 - 展示頂級創客的最佳作品 - 不斷更新 --- HTML5 升級 -------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k82m0f3tk6f6tduc3vfk.jpg)](https://html5up.net/) [HTML5 UP](https://html5up.net/)提供免費的 HTML vanilla CSS 模板。可能是同一製造商建立的最大的精心設計的 HTML 模板集合。這意味著所有專案的程式碼品質和設計風格都是一致的。讓設計脫穎而出的是影像背景、漸層疊加、彩色部分和流暢佈局之間的組合。 **特徵** - 由設計驅動的開發人員提供的大量收藏 - 獨特的風格和大量的性格 - 無需註冊即可輕鬆下載 --- 風格吶喊 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ttal7mqy1owbufmdr54j.jpg)](https://styleshout.com/) [StyleShout](https://styleshout.com/)提供免費的 HTML 普通 CSS 範本。這些物品美麗、多樣、精美,無需電子郵件或註冊即可下載。所有模板的風格都遵循相同的線條,但絕不感覺重複或無聊。正確的字詞是一致且原創的。主題涵蓋 SaaS、行動應用程式、部落格、即將推出、投資組合和代理商。 **特徵** - 美麗優雅的模板 - 廣泛的用例 - 無需註冊即可輕鬆下載 --- 一頁的愛 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kgdw49kyxcr48nsi4p68.jpg)](https://onepagelove.com/) [One Page Love](https://onepagelove.com/)提供免費+付費的 HTML vanilla CSS 範本。除了他們自己的專案之外,OPL 還具有許多來自其他製造商的針對不同技術的模板 Bootstrap、Nextjs、Tailwind、Carrd、Framer。該演示網站看起來像一個藝術畫廊,使用起來很愉快。您在用例方面的選擇太多了。 **特徵** - 精心製作、專業打磨的模板 - 無需註冊即可輕鬆下載 --- 克魯普 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kxxvy0xwzzp4znvlv749.jpg)](https://cruip.com/free-templates/) [Cruip](https://cruip.com/free-templates/)提供免費 + 付費的 Tailwind、React、Vue、Nextjs 和 Laravel 範本。它們的獨特之處在於設計的獨創性和對細節的關注。他們提高了標準,我在瀏覽其他商品時經常發現自己在想「這看起來像克魯普風格」。這就是它們的獨特之處。 **特徵** - 獨特而有個性的設計 - 無需註冊即可輕鬆下載 --- 範本 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dc4kepier5gix9yznevt.jpg)](https://templatemo.com/) [Templatemo](https://templatemo.com/)提供免費的 Bootstrap 模板。商品數量之多令人驚嘆,而且品質也很棒。在列出的專案中很難不為您的專案找到堅實的基礎。除了看起來不錯之外,模板還以行銷為導向。 **特徵** - 豐富的海量模板集合 - 無需註冊即可輕鬆下載 --- 創意提姆 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2750dlh3rzf6y20v7clk.jpg)](https://www.creative-tim.com) [Creative Tim](https://www.creative-tim.com)提供免費+付費的 Bootstrap、Tailwind、Angular、React、Vue、Nextjs、Nuxt、Svelte、Laravel、Django 和 Astro 專案。絕對是模板和 UI 套件的強大工具。它受到開發人員的喜愛,因為免費專案與高級專案相當。設計精良、打磨光滑、文件齊全。 **特徵** - 設計精美且一致 - 具有進階功能的元件 - 文件自成一體 --- 泰梅斯貝格 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zmhosp1knzec5aql5n4y.jpg)](https://themesberg.com/) [Themesberg](https://themesberg.com/)提供免費+付費的 Bootstrap、Tailwind、React、Laravel、Django 和 Astro 模板。這些資源包括儀表板、登陸頁面、設計系統和 UI 套件。設計品質和精緻程度處於行業領先水平。除了看起來令人驚嘆之外,這些專案的結構和文件都很好。 **特徵** - 很棒的儀表板模板和 UI 套件 - 用於複雜功能的高階元件 --- 模板甲板 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2obnfisjfwrfz42fmqt.jpg)](https://templatedeck.com/) [TemplateDeck](https://templatedeck.com/)提供免費的 Bootstrap 模板。這是一個很棒的資源,提供少量但高品質的物品。描述它們的正確詞彙是極簡主義、創造性和令人印象深刻。公司、個人和創業網站模板均按照最高設計和程式碼標準精心製作。 **特徵** - 示範網站很漂亮且易於瀏覽 - 模板皆經過專業設計與編碼 --- 嘲笑使用者介面 ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g1h7s8vfp33yquuw49k2.jpg)](https://floatui.com/) [Float UI](https://floatui.com/)提供免費的 Nextjs 範本。它實際上是一個 Tailwind 元件庫,還提供完整的網站模板。用例多種多樣,佈局看起來非常好。它們製作精良,甚至具有微妙的滾動動畫。 **特徵** - SaaS、新創公司、數位產品、課程模板 - 精心設計,具有令人印象深刻的黑暗主題 - 無需註冊即可輕鬆下載 --- 麥可·安德烈扎 ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ezbwmkeodvaglh4dx7h.jpg)](https://www.michaelandreuzza.com/resources/) [Michael Andreuzza](https://www.michaelandreuzza.com/resources/)提供免費的 Astro 範本。他是一位極具創意的模板製作者,在他的[列剋星敦主題](https://lexingtonthemes.com/)網站上提供了一系列令人印象深刻的優質專案。他個人網站上列出的免費 Astro 模板因其簡約而時尚的設計而脫穎而出。 **特徵** - 獨特且令人難忘的設計 - 大量的部分和元素 --- 剛剛好的使用者介面 --------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kyif9plag7l51csjxc3c.jpg)](https://justgoodui.com/) [Just Good UI](https://justgoodui.com/)提供免費 + 付費的 Astro 模板。這是一個有前途的模板建立者,提出了新的願景和設計。網站上提供的免費專案是為部落格和作品集製作的。很高興看到軟體包包含多個頁面和額外元素來盡可能地支援開發人員。 **特徵** - 美麗的簡約設計 - 多個頁面和部分 --- 創業登陸 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yvrn4qbh1z1natjqg07r.jpg)](https://startuplanding.redq.io/) [Startup Landing](https://startuplanding.redq.io/)提供免費的 Nextjs 和 Gatsby 模板。它可能是您能找到的最好的完全免費登陸頁面集合。在撰寫本文時,有 18 個可用。設計現代且引人注目。它們混合了圖像背景和精美的彩色插圖。 **特徵** - 設計適用於創意和商業專案 - 廣泛的用例可供選擇 --- Web3模板 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpz7x6tln49s3jm2ewrt.jpg)](https://web3templates.com/) [Web3Templates](https://web3templates.com/)提供免費 + 付費的 Tailwind、Astro 和 Nextjs 範本。建立者對細節投入了大量精力,為網頁開發人員建立真正有用的資源。設計美觀、富有創意,並且針對轉換進行了最佳化。為您的專案奠定堅實的現成基礎。 **特徵** - 基於插圖的精美創意設計 - 程式碼結構良好,易於定制 --- 蘭化 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w1on9qnjq84pi8bi2uvl.jpg)](https://www.landify.design) [Landify](https://www.landify.design)提供免費 + 付費的 Gatsby 模板。他們是漂亮的 UI 套件、元件和模板的後起之秀的創造者。他們的免費套裝是為成功的登陸頁面精心製作的。這些設計對於每個用例來說都是現代且一致的。 **特徵** - 令人驚嘆的美麗模板 - 為您的專案奠定良好的基礎 --- Nextjs 模板 --------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7y3kucjtz6k6elb2qzq9.jpg)](https://nextjstemplates.com/) [Nextjs Templates](https://nextjstemplates.com/)提供免費+付費的 Nextjs 範本。這是一個模板庫,展示了他們自己的和其他製造商的專案。他們自己的免費 Nextjs 範本是綜合包,包含多個頁面、部分和元件,適用於各種用例。設計簡潔、現代且一致。 **特徵** - SaaS、新創公司、商業、軟體、部落格用例 - 令人印象深刻的設計提供多個頁面 - 無需註冊即可輕鬆下載 --- 佈局流程 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sudi6m8q7bnbukyyou8q.jpg)](https://layoutflow.com/) [LayoutFlow](https://layoutflow.com/)提供免費+付費的 HTML vanilla CSS 範本。它們經過專業設計,將為您節省大量創意精力。讓它們脫穎而出的是對負空間和大於平均字體大小的明智使用。代理商、投資組合和服務網站的絕佳資源。 **特徵** - 來自優質製造商的精美模板 - 尖銳的邊緣設計和大膽的排版 --- 模板基礎 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/48vqy3i8juxhzcp3y6s3.jpg)](https://www.templatefoundation.com/) [Template Foundation](https://www.templatefoundation.com/)提供免費的 HTML vanilla CSS 範本。物品在佈局、顏色和排版方面都非常現代。他們更關注令人回味的圖像而不是向量插圖。如果您選擇這些範本之一作為您的專案的基礎,您就不會出錯。 **特徵** - 現代時尚的設計引人注目 - 面向作品集和個人網站 - 無需註冊即可輕鬆下載 --- 模板化 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u6iv9mgzuiq4ppbyy79p.jpg)](https://templated.co/) [Templated](https://templated.co/)提供免費的 HTML vanilla CSS 和 Bootstrap 模板。設計精良、一致且永恆。我認為即使再過幾年它們也不會顯得過時。有很多可用的用例。從企業和新創公司到部落格和投資組合。 **特徵** - 學科範圍廣泛 - 美觀永恆的設計 - 無需註冊即可輕鬆下載 --- 免費贈品bug ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r5lbexk8rad43ikp84o.jpg)](https://freebiesbug.com/) [Freebiesbug](https://freebiesbug.com/)提供免費的 HTML vanilla CSS Bootstrap、Tailwind 和 React 模板。高品質的設計注重細節。除了 Cruip 團隊自己的作品外,他們還展示了其他頂級製造商製作的現成包裝。 **特徵** - 精美的營銷優化佈局 - 自己的專案,還有範本庫 - 無需註冊即可輕鬆下載 --- 啟動引導程式 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra8bxapn981gmumstqdx.jpg)](https://startbootstrap.com/) [Start Bootstrap](https://startbootstrap.com/)提供免費+付費的Bootstrap模板。它是新創公司、代理商、投資組合、個人和部落格的優質專案的既定來源。它甚至提供功能豐富的管理儀表板模板。它們的建置標準非常高,人們甚至可以向它們學習 Web 開發。 **特徵** - 令人難以置信的精心建置和多樣化的模板 - 設計遵循形式遵循功能原則 - 無需註冊即可輕鬆下載 --- 怪物一號 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/676v0czfivfinfvbobux.jpg)](https://monsterone.com/html-templates/free-website-templates/) [MonsterOne](https://monsterone.com/html-templates/free-website-templates/)提供免費+付費的 HTML vanilla CSS 和 Bootstrap 模板。它實際上是 Template Monster 的基於訂閱的模板庫。如果您註冊免費帳戶,您無需支付訂閱費用即可存取免費物品。它們的品質很高,但您需要手動檢查哪些是普通 CSS,哪些是 Bootstrap。 **特徵** - 具有多個頁面的現代模板 - 由於製造商眾多,品質參差不齊 --- 範本叢林 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1mvfietep6jonyv9bidn.jpg)](https://templatesjungle.com/) [TemplatesJungle](https://templatesjungle.com/)提供免費+付費的 HTML vanilla CSS 和 Bootstrap 模板。設計很棒,以行銷為導向,涵蓋多種用例。商業、代理商、服務、投資組合、電子商務。您會找到適合您能想像到的幾乎任何主題的模板。 **特徵** - 大量精心設計的模板可供選擇 - 設計令人印象深刻,讓您的專案脫穎而出 --- 第三波媒體 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/le1r0xzgu167v6ggdq9q.jpg)](https://themes.3rdwavemedia.com/freebies/) [3rd Wave Media](https://themes.3rdwavemedia.com/freebies/)提供免費+付費的 Bootstrap 模板。它們是清單中對開發人員最友善的資源之一。它是由開發者為開發者製作的,體現在設計效率和程式碼結構上。模板結構良好且以結果為導向。您會找到適合各種主題的專案。 **特徵** - 有大量用例可供選擇 - 無需註冊即可輕鬆下載 --- 車頂板 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rz09nou89dnn3cutgzbf.jpg)](https://www.tooplate.com/) [Tooplate](https://www.tooplate.com/)提供免費的 Bootstrap 模板。它是一個巨大的精心設計的 Bootstrap 模板庫。設計現代且精美。每個模板都經過精心設計,可在所有裝置上呈現良好效果。廣告有時可能會造成乾擾,但好的一面是下載不受限制且不需要註冊。 **特徵** - 各種 Bootstrap 模板的大集合 - 高級產品專用的高級元件 - 無需註冊即可輕鬆下載 --- 像素火箭 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ubqga6p7ox5innn3532.jpg)](https://pixelrocket.store/free-templates) [Pixel Rocket](https://pixelrocket.store/free-templates)提供免費的 Bootstrap 和 Tailwind 範本。這個小系列的現代配色看起來令人驚嘆。每個專案都包含許多基本和高級部分和元件。涵蓋的用例包括電子商務、儀表板、作品集和商業網站。 **特徵** - 高品質模板小集合 - 無需註冊即可輕鬆下載 --- HTML 法典 ------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axduylz8rghwm6umiztd.jpg)](https://htmlcodex.com/) [HTML Codex](https://htmlcodex.com/)提供免費+付費的 Bootstrap 模板。這些專案看起來不錯,並且可以不受任何限制地下載。多個用例之間存在巨大差異。業務、課程、產品、代理商、服務、作品集、履歷等等。適合每個人的東西。 **特徵** - 針對各種用例的以結果為導向的設計 - 基於微妙滾動的動畫,帶來更好的使用者體驗 - 無需註冊即可輕鬆下載 --- W3佈局 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x85jgxjgly0zj8nn53gm.jpg)](https://w3layouts.com/) [W3Layouts](https://w3layouts.com/)提供免費+付費的 Bootstrap 模板。基本上他們網站上的所有模板都是免費提供的,但為了刪除歸屬連結,您必須支付少量費用。要免費取得它們,只需檢查試玩版下方的「免費下載」按鈕即可。有點難發現。 **特徵** - 大量的商業風格模板 - 涵蓋廣泛的用例 --- 引導帶 --- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d5f28ecptq06wr0ihvc7.jpg)](https://bootstrapious.com/) [Bootstrapious](https://bootstrapious.com/)提供免費+付費的 Bootstrap 模板。 Web 開發人員可以從各種現成的程式碼和設計套件中進行選擇。設計看起來不錯,有些免費物品包含高級元件。唯一的小缺點是您需要提供電子郵件地址才能下載專案。 **特徵** - 各種主題的大量免費物品 - 有些設計特別好 --- 溫樹 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ysunwzk28eg703cwxki8.jpg)](https://untree.co/) [Untree](https://untree.co/)提供免費的 Bootstrap 模板。它們幫助開發人員節省時間和金錢。物品設計精美,非常注重細節。模板具有許多特色,並帶有多個頁面和高級元件。下拉導覽、滑桿和微妙的動畫等功能將使您的工作更加輕鬆。 **特徵** - 設計有個性,不重複 - 無需註冊即可輕鬆下載 --- 順風工具箱 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1gnbs90ot43hn96ekkk.jpg)](https://www.tailwindtoolbox.com/) [Tailwind Toolbox](https://www.tailwindtoolbox.com/)提供免費 + 付費的 Tailwind 範本。專案是他們自己的,並由其他頂級模板製作者展示。設計結構良好,涵蓋最受歡迎的用例,如新創公司、SaaS、行動應用程式、部落格和管理儀表板。 **特徵** - 漂亮的專案,結構良好,程式碼乾淨 - 專案涵蓋廣泛的用例 - 無需註冊即可輕鬆下載 --- 像素洞穴 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1qg3tmq1f2xbbihol89c.jpg)](https://pixelcave.com/) [Pixelcave](https://pixelcave.com/)提供免費 + 付費的 Tailwind 模板。軟體包專用於建立網站和管理介面。免費的網站和儀表板模板具有現代的配色方案和以結果為導向的佈局。由於它們是由同一作者製作的,所以一致性很普遍。 **特徵** - 獨特的設計可幫助您的專案脫穎而出 - 乾淨的展示網站,沒有廣告 - 無需註冊即可輕鬆下載 --- 主題漁夫 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dl89v5po9st2ad83io98.jpg)](https://themefisher.com/) [Themefisher](https://themefisher.com/)提供免費 + 付費的 Nextjs 和 Astro 模板。它基本上是一個模板市場,為 Web 開發人員提供基於各種框架類別建構的套件。專案經過創意設計,並為商業、SaaS 和部落格網站提供多個頁面。 **特徵** - 精心設計的多頁面模板 - 易於瀏覽的示範網站 --- 尾火 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9dduazx5klc5wibm5fkt.jpg)](https://tailspark.co/) [Tailspark](https://tailspark.co/)提供免費 + 付費的 Tailwind 模板。即使它們的專案編號不足,它們也可以透過提供的元件來彌補。這些模板是該系列中最複雜、功能最豐富的資源之一。您將獲得許多採用華麗設計的元件、部分和頁面。 **特徵** - SaaS 網站和登陸頁面的最佳選擇 - 幾個巨大的、功能豐富的模板 --- 紅色像素主題 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg2xmdb5jhouypat66ul.jpg)](https://redpixelthemes.com/) [紅色像素主題](https://redpixelthemes.com/)提供免費+付費的Tailwind模板。開發者專注於簡化 Web 開發工作。設計很棒,佈局包含大量有用的元件。基本上有 2 個模板,一個用於作品集,另一個用於部落格。為您的專案提供良好的起點。 **特徵** - 幾個好看的免費模板 - 部落格和作品集用例 --- 阿里·布丁 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zmmt2ppmz1qoje0r35b.jpg)](https://aribudin.gumroad.com/) [Ari Budin](https://aribudin.gumroad.com/)提供免費 + 付費的 Tailwind 模板。免費物品集合雖小但很有用。設計獨特,將幫助您的專案脫穎而出。主題涵蓋代理商、作品集、雜誌和設計系統。作品集模板具有豐富的特色,一定會帶給您啟發。 **特徵** - 精選免費優質物品 - 投資組合和代理模板脫穎而出 --- 特雷克特 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8dzak35uivlm48ps8nol.jpg)](https://treact.owaiskhan.me/) [Treact](https://treact.owaiskhan.me/)提供免費的 React 模板。它擁有令人印象深刻的網站和登陸頁面模板集合。這個圖書館雖小但內容豐富,為新創公司、SaaS 和服務提供設計精美的現成物品。配色方案使用了許多現代技術佈局特有的藍色調。 **特徵** - 帶有額外頁面的登陸頁面模板 - 易於自訂的元件塊 --- 程式碼設計 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jgm9wwgaxrvgeiz11a2p.jpg)](https://designtocodes.com/) [DesignToCodes](https://designtocodes.com/)提供免費+付費的 Bootstrap 和 Tailwind 範本。涵蓋的用例包括新創公司、代理商和投資組合網站。您也可以找到結構良好的管理儀表板範本。設計經過精心設計和建置,並牢記行銷目標。 **特徵** - 很棒的網站和儀表板模板 - 針對行銷結果優化佈局 --- 使用者介面庫 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2i1gk5ui7b3o1f02yf3y.jpg)](https://ui-lib.com/) [UI Lib](https://ui-lib.com/)提供免費 + 付費的 Bootstrap、Tailwind、Angular、React 和 Vue 模板。它涵蓋了從即將推出的專案和登陸頁面到管理儀表板和 UI 工具包的整個範圍。專案設計精良,易於自訂,包裝中附有用的文件。 **特徵** - 模板涵蓋多種用例 - 有些帶有有用的高級元件 --- 管理市場 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s2yhvhu68eoj080wwivc.jpg)](https://adminmart.com/) [AdminMart](https://adminmart.com/)提供免費+付費的 Bootstrap、Tailwind、Angular、React、Vue、Nextjs 和 Nuxt 模板。使用案例涵蓋 SaaS 登陸頁面、教育、課程、代理商、服務網站和管理儀表板。物品經過專業設計,並配有許多部分和元件。 **特徵** - 多個框架的多個用例 - 物品可用於商業專案 --- 包裹像素 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kwvjgp027tiqije3fiu.jpg)](https://www.wrappixel.com/) [WrapPixel](https://www.wrappixel.com/)提供免費 + 付費的 Bootstrap、Tailwind、Angular、React、Vue、Nextjs 和 Nuxt 模板。它們的與眾不同之處在於對儀表板和 UI 套件的一貫關注。在設計和結構方面有很多選擇。您可以選擇經典佈局或更富有創意的佈局。 **特徵** - 儀表板模板和 UI 套件的可靠集合 - 不同的設計和配色可供選擇 --- 桌子 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qjlhiy7n7tyoxp2gjjqv.jpg)](https://tabler.io/) [Tabler](https://tabler.io/)提供免費的 Bootstrap 模板。專注於儀表板,因為 Tabler 本身是專門用於建立 Web 應用程式的管理儀表板 UI 套件。如此大而精美的軟體包竟然可以免費取得,真是令人難以置信。設計很棒,文件很全面,程式碼結構很好。這個資源是寶石。 **特徵** - 專注於儀表板的引導模板 - 頂級的設計和程式碼品質 - 許多優質的先進元件 --- 敏銳的主題 ----- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/a1hauyits355t5dw5ied.jpg)](https://keenthemes.com/) [KeenThemes](https://keenthemes.com/)提供免費 + 付費的 Bootstrap、React 和 Vue 模板。該建立者專門研究儀表板模板。每個包都配有多個採用現代設計的節省時間的元件。有不同的風格可供選擇,適應多種可能的場景。 **特徵** - 在網頁應用程式管理儀表板上佔有一席之地 - 乾淨的網站,沒有廣告或其他煩惱 --- BootstrapDash ------------- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl1ymof4pdxzmangcy4v.jpg)](https://www.bootstrapdash.com/) [BootstrapDash](https://www.bootstrapdash.com/)提供免費+付費的 Bootstrap 模板。有用的集合集中在管理儀表板上。軟體包包含的頁面和元件非常豐富。設計始終保持現代感,並針對效果進行了最佳化。網站沒有廣告,瀏覽起來很愉快。 **特徵** - 很棒的儀表板模板 - 廣泛的設計風格 --- 編碼主題 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i3u1oseo5vj4g5mnnn6q.jpg)](https://codedthemes.com/) [CodedThemes](https://codedthemes.com/)提供免費+付費的 Bootstrap、Angular、React 和 Vue 模板。製造商專注於管理儀表板和完整的 UI 套件。他們的工藝水平透過產品品質而閃耀。包裝經過精心組裝,採用精美的設計,給人一種準備就緒的感覺。 **特徵** - 設計精美的物品具有先進的元件 - 網站瀏覽很愉快,沒有煩人的廣告 --- 丹參套件 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tpy8f28sb9gbkw9kz5ol.jpg)](https://www.salvia-kit.com) [Salvia Kit](https://www.salvia-kit.com)提供免費的 Angular、React、Vue、Nuxt 和 Svelte 範本。它是您可以免費下載的最好的管理儀表板集合之一。套件使用戶能夠為各種 Web 應用程式建立美觀且高效的介面。有不同的視覺風格和多個元件可用。 **特徵** - 高度關注管理儀表板模板 - 同一開發商打造的品質一致 --- 煮沸 -- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dl17974czs5ru0eg2s2.jpg)](https://justboil.me/) [JustBoil](https://justboil.me/)提供免費 + 付費的 Tailwind、React、Vue、Nextjs、Nuxt 和 Laravel 模板。在這裡,您將找到一些用於建立出色的 Web 應用程式介面的最佳儀表板範本。佈局是為了可用性而精心設計的,設計是以效率為導向的。 **特徵** - 不斷更新的專業模板 - 以結果為導向的高效佈局 --- 主題選擇 ---- [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0tiizky4chnasi713lck.jpg)](https://themeselection.com/) [ThemeSelection](https://themeselection.com/)提供免費 + 付費的 Vue、Nextjs、Nuxt 和 Laravel 模板。製造商專注於管理儀表板和 UI 套件。免費物品設計精良,與優質物品不相上下。很棒的現成包可幫助開發人員更快地啟動專案。 **特徵** - 結構良好的美麗物品 - 模組化且易於定製程式碼 --- 愛康尼克設計 ------ [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vngpaoo80t2gcaysk7uh.jpg)](https://iqonic.design/) [Iqonic Design](https://iqonic.design/)提供免費 + 付費的 React 和 Vue 模板。儘管製造商在 HTML 專案方面建立了 Flutter 和 WordPress 主題,但他們專注於管理儀表板。有一些免費的軟體包可以幫助網頁開發人員建立現代介面。 **特徵** - 精心設計的儀表板模板 --- 為了整理這篇綜述,我瀏覽了所有可以想像的可以找到模板的線上資源。我希望它能讓你的工作更輕鬆。 --- 原文出處:https://dev.to/devluc/50-best-websites-for-free-html-templates-1i2l

簡化程式碼:20 多個方便的 JavaScript 函數

JavaScript 是一種函數式程式語言,函數扮演著至關重要的角色。它們允許您封裝可重複使用程式碼並執行特定任務。以下是一些可以讓您的生活更輕鬆的功能的快速範例: ### 常規功能 ``` function sum(a, b) { return a + b; } ``` ### 函數表達式 ``` const sum = function (a, b) { return a + b; }; ``` ### 箭頭功能 ``` const sum = (a, b) => { return a + b; }; // OR const sum = (a, b) => a + b; ``` ### 發電機功能 ``` function* indexGenerator() { let index = 0; while (true) { yield index++; } } const g = indexGenerator(); console.log(g.next().value); // => 0 console.log(g.next().value); // => 1 ``` ### 建立一個從 1 到 n 的數字陣列 ``` const range = (n) => Array.from({ length: n }, (_, i) => i + 1); console.log(range(10)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10] ``` ### 使用步驟建立一個從 1 到 n 的數字陣列 ``` const range = (n, step = 1) => Array.from({ length: n }, (_, i) => i * step); console.log(range(10, 2)); // [1, 3, 5, 7, 9] ``` ### 建立一個陣列並用一個值填充它 ``` const fill = (len, value) => Array(len).fill(value); console.log(fill(3, 0)); // [0, 0, 0] ``` ### 打亂陣列 ``` const shuffleArray = (arr) => arr.sort(() => 0.5 - Math.random()); console.log(shuffleArray([1, 2, 3, 4])); // [3, 2, 1, 4] ``` ### 從陣列中刪除重複項 ``` const removeDuplicated = (arr) => [...new Set(arr)]; console.log(removeDuplicated([1, 2, 3, 3, 4, 4, 5, 5, 6])); // Result: [ 1, 2, 3, 4, 5, 6 ] const removeDuplicate = (arr) => Object.values(arr.reduce((a, b) => (a[b] ? a : { ...a, [b]: b }), {})); console.log(removeDuplicate([1, 2, 3, 3])); // Result: [ 1, 2, 3, ] ``` ### 產生隨機數 ``` const random = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min; console.log(random(1, 10)); // Result: 1 ~ 10 ``` ### 找到最大的數字 ``` const findLargest = (arr) => arr.map((subArr) => Math.max(...subArr)); console.log( findLargest([ [4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1], ]) ); // [5, 27, 39, 1001] ``` ### 找出最小的數字 ``` const findSmallest = (arr) => arr.map((subArr) => Math.min(...subArr)); console.log( findSmallest([ [4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1], ]) ); // [1, 18, 32, 857] ``` ### 從陣列中選擇一個隨機元素 ``` const pick = (arr) => arr[Math.floor(Math.random() * arr.length)]; console.log(pick([1, 2, 3, 4])); // 2 ``` ### 將陣列轉換為物件 ``` const toObject = (arr) => ({ ...arr }); console.log(toObject(["a", "b"])); // { 0: 'a', 1: 'b' } ``` ### 找出兩個陣列的交集 ``` const intersection = (arr1, arr2) => { const set = new Set(arr1); return arr2.filter((x) => set.has(x)); }; console.log(intersection([1, 2, 3], [2, 3, 4])); // [2, 3] ``` ### 從陣列中刪除虛假值 ``` const compact = (arr) => arr.filter(Boolean); console.log(compact([0, 1, false, 2, "", 3, "a", "e" * 23, NaN, "s", 34])); // [1, 2, 3, 'a', 's', 34] ``` ### 反轉字串 ``` const reverseString = (str) => str.split("").reverse().join(""); console.log(reverseString("hello")); // olleh ``` ### 字串是回文嗎 ``` const isPalindrome = (str) => str === str.split("").reverse().join(""); console.log(isPalindrome("madam")); // true ``` ### 檢查物件是否為空 ``` const isEmpty = (obj) => Object.keys(obj).length === 0; console.log(isEmpty({})); // true ``` ### 找出一個月中的天數 ``` const getDaysInMonth = (date) => new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate(); console.log(getDaysInMonth(new Date())); // 31 ``` ### 產生隨機顏色 ``` const getRandomColor = () => `#${Math.floor(Math.random() * 16777215).toString(16)}`; console.log(getRandomColor()); // #f0f0f0 const randomHex = () => `#${Math.floor(Math.random() * 0xffffff) .toString(16) .padEnd(6, "0")}`; console.log(randomHex()); // #f0f0f0 ``` --- ##### 必須閱讀(如果還沒有) https://dev.to/devsmitra/how-to-create-the-app-using-jsx-without-react-k08 https://dev.to/devsmitra/reactjs-signal-for-state-mangement-21pf https://dev.to/devsmitra/simplify-javascripts-async-concepts-with-one-gif-3c6a --- ###### 更多內容請造訪[Dev.to](https://dev.to/devsmitra "拉胡爾·夏爾馬(DevsMitra)") 。 --- 原文出處:https://dev.to/devsmitra/20-handy-javascript-functions-to-simplify-your-code-javascript-tutorial-i0e

歡迎串 Part.17 👋👋👋

歡迎最近新註冊的用戶 @gbwhatsapp12 @alienmarsxdev @snaptubeapp7 @Yacinetv092 @linxiying1204 @dongdongyang @freedolm @HDStreamz1 @pikashowapp3 @abei0614 @charley @kir4che @chieh0666 @vidmateapk55 @niyou0509 @amyamr @421515jl @Cosmos18338 @jyd95939 @jessehao28 @tubemateapk5 @PikashowApps1 @BbsonLin @amiimmne1230 @grandsonWu @cc6901 @y603329 @tommy6838 @lukehsiao @instagrampro4 @bj697733 @inattv69 @agrohimgmp @bjbj5206 @agrohimmvt @agrohimpws @barrychen1104 @Yacinetv01 @pces8729 @inatboxapk @zaq2666 @emily40830 @TubeMate02 @nelson @vidmateapp5 @TheStanOrz @ttvojed3 @Marinafpn @hak53189 @Marinacyl @zjessica0405 @Bogdanueh @minecraftapks @vidmatecash @C110151138 @visitnow3 @yuiyokna @Yin1022 @fouroneeight @Michailtev @sujeetrepp1 @line624bb @PetroPjax @jjq94677 @bj3211 @youtubevanceds1 @zy7686 @tonyy007 @YacineTv @snaptubeapk4 @vidmateapps1 @amy40433 @69038 @zoetangtty @arielhsin @alightmotionapk @tema-liu @dddaa @instaproapks1 @snaptubesapp @angie2255 @nomadbard916 @unitave @nosc996 @047668 @vidamteapp55 @wmw588663dd @baiman5678 @line04325 @87kk52544 @gomovies @sisteretore @vidmateapks @vidmatesapk @TGtea530 @alexandalen @SpotifyMod1 @fishgreen0415 @LINE87417 歡迎在留言處簡單自介一下~ 可以說一下從哪邊發現這論壇的~最近在學什麼東西~或者是關於你的一件小趣事~ 也請大家多多回覆別人的留言,問別人小問題,或者回個「嗨嗨 👋」都很好~ **歡迎各位加入這個技術成長社群!**

📕 新創企業 vs 大公司:您需要知道的最佳要點 📊

我仍然記得我第一天與數百名其他員工一起參加公司會議。經過幾個月成功的自由工作後,我終於能夠加入一家大公司,焦慮和興奮的混合是真實的。現在的挑戰不同了,風險更高了,環境也勢不可擋。 但這並不是唯一讓我感到壓力的情況。我還清楚記得有一天,在一家小型新創公司工作時,我向整個公司展示了我們將要使用的新前端架構的一部分。我們規模很小,會議上的每個人都在專心聽我說的話。 從在新創公司中發揮重要作用,到成為公司中更大群體中的一小部分,每一次經驗都有自己的一套學習經驗。 當然,情況並非總是如此。我們都知道存在沒有做好準備的公司,這就是建立本文的原因。在這裡,我們將探討**我在新創公司和大公司工作時獲得的一些**關鍵經驗和收穫,這樣你就可以從你目前工作的公司中學習到這些知識,甚至可以自己決定你下一步的職業步驟,看看哪一個更適合您。 流程和文化 ----- ![流程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0exqcm882w9gvs11u3go.png) 讓我們從流程開始,因為它們是第一個非常明顯的差異。在新創公司工作時,大多數流程仍在實施中,您工作的很大一部分實際上可能涉及**嘗試和試驗**這些任務的不同流程。 文化也可能處於創造階段,因此,定義公司及其員工的共同價值觀,或「在這裡做事的方式」。可以改變很多而且很快! 當然,這使得體驗方式更加混亂,但也更加靈活。兼顧多重角色和責任並不罕見,這可能是在不同方面學習和成長的絕佳機會,例如創造新的良好文化模式。 另一方面,在更企業化的環境中,流程更加結構化和明確,這可以提供穩定性和明確的期望,但也會帶來官僚主義的缺點,需要很長時間才能真正通過多個管道和渠道。 這裡的關鍵要點是**平衡**。流程的稀缺會讓整個生態系統變得混亂,這讓人不舒服,但流程太多,你就什麼都做不了。平衡缺勤和超額的權重將為每個人創造一個更好的環境。 敏捷性和適應性 ------- ![敏捷](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yasslnhkhhhx9oycybps.png) 在新創公司工作通常需要身兼數職,並隨時適應變化。在快節奏的新創環境中,敏捷性和適應性是關鍵。你必須準備好轉變,這可以讓你成長很多,不要太執著於自己的想法。您還必須準備好調整您的策略並接受新技術和方法(如果它們看起來合適)。 這可能是一次令人興奮的經歷,可以促進創造力和創新,但從長遠來看,也可能導致分散且充滿壓力的環境(公司的各個方面都採用不同的技術,讓所有混亂的工作變得**困難**)。 相較之下,大公司擁有豐富的時間和資源,可以進行更徹底的規劃和執行。此外,大公司傾向於依賴他們已經信任的東西,並且通常不太願意接受新事物。 雖然這不如動態的創業環境那麼令人興奮,但它提供了不同類型的學習體驗。在這裡,您可以加深對策略規劃、專案管理和業務營運其他方面的理解。 這裡的關鍵要點是學會**在需要時**變得敏捷、多才多藝和適應能力強。如果您不想相信我的話,我建議您閱讀[這篇關於無聊技術的文章](https://mcfunley.com/choose-boring-technology)。這是令人驚訝的洞察力和偉大的閱讀! --- 哦!在我忘記之前,這篇文章之所以成為可能,是因為[Wasp](https://wasp-lang.dev/) ,他們正在建立一個非常酷的全端 React + NodeJS 框架,如果您能透過[在 GitHub 上為我們的儲存庫加註星標](https://www.github.com/wasp-lang/wasp)來幫助我們,那將意義重大。 透過這樣做,您將幫助我們繼續使網頁開發更快、更輕鬆,並每週為您帶來這樣的內容! 🚀 ![](https://media2.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWFnZzJ5dGV2cXduOGluaTgyaTdvbnJ4c3ZvZGxuY3V3czQxZmZzNSZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/ZfK4cXKJTTay1Ava29/giphy.gif) https://www.github.com/wasp-lang/wasp ⭐️ 在 GitHub 上給我們一個 star 🙏 --- 社交機會 ---- ![聯網](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/flkmybnqw8ocfj0jd1bn.png) 新創公司和大公司之間的另一個主要區別是它們提供的網路機會。大公司通常擁有廣泛的員工、客戶、供應商和合作夥伴網路。在這樣的環境中工作可以提供大量建立人際網絡和建立有價值的專業關係的機會。這些聯繫對於您的職業發展非常有益。 另一方面,新創公司由於規模較小,提供了更親密的社交機會。您可能會與團隊的每個成員密切合作,讓您有機會建立更牢固的關係並直接向同事和上級學習。 這裡的關鍵要點是擁抱每一個聯繫,並**嘗試在任何地方創造一個良好的工作環境**。這將使您更輕鬆地度過困難時期,並且您一定會在一生中結交一些友誼😃 影響 -- ![影響](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t1hn0o5x8olm7sw7i21c.png) 現在,我們來談談影響。在較大的公司中,您的程式碼庫可能會被數千(更可能是數百萬人)人存取。這意味著做一個小的改變可以改變很多人對應用程式的看法,並且看到你的工作被這麼多人使用是非常令人滿意的。不幸的是,第一次必須為數百萬用戶存取的程式碼庫部署一個小的程式碼變更絕對是令人傷腦筋的——儘管這對於增加您的經驗和彈性是必要的。 在新創公司中,您可能會看到有數百人(相信有數千人)造訪的程式碼庫。這意味著,你的工作將被更少的人看到,但是,由於你可以創造更多,你可能會創造出更多的東西,而不僅僅是一個小小的改變。頁面、使用者旅程和所有內容都可以在您的範圍內單獨或與您的團隊一起進行。但它並非沒有缺點。由於流程更加稀缺,因此回滾和恢復變更有時可能是一個困難的過程(甚至更糟的是,沒有記錄)。 這裡的關鍵要點是了解您的角色以及您在不同環境中帶來的價值的重要性。無論您是在一家新創公司,您的工作直接推動公司的成功,還是在一家大公司,您的行為有助於更廣泛的目標,**您的工作都很重要,您應該為此感到自豪。** 舉個例子,我為在一個巨大的電子商務網站上製作一個簡單的產品過濾器(他們一直使用到今天)感到非常自豪,並且我也為積極實施/參與至少 2 個專案的實施感到自豪/3是我曾經合作過的新創公司的設計師所提出的新設計系統的每個元件的/3。**好的工作不會讓別人貶低。** 結論 -- ![所有的主題都變成了插圖](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3ev801q6beoct1a0ijfa.png) 如果這段穿越新創公司和企業領域的旅程為您帶來了啟發,為什麼不支持[Wasp](https://wasp-lang.dev/)呢?我們正在精心打造工具和內容,為像您這樣的開發人員提供協助,無論您是獨自編碼還是克服企業挑戰。 如果您想看到更多這樣的內容,您可以[在 GitHub 上給我們一個星星,非常輕鬆地幫助我們!](https://www.github.com/wasp-lang/wasp) ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) https://www.github.com/wasp-lang/wasp ⭐️ GitHub 上的 Star Wasp 🙏 新創企業和大公司都提供寶貴的經驗。在新創公司,你可以做不同的任務,嘗試新事物,並直接影響公司的未來。這是一種親身實踐的學習經驗。 在大公司中,您可以存取許多資源和結構化環境。您可以與多元化專家團隊合作,這有助於您學習和成長。既定的流程、穩定性和可預測性可以幫助提高您的技能並塑造您的職業生涯。 但是,這並不是要選擇其中之一。這是關於學習在兩種環境中都表現出色。汲取兩者中最好的部分,並隨時隨地使用它們。保持敏捷、適應力強、樂於接受新體驗。這兩種經歷對你的職業生涯都很重要。 總之,每種環境都有其獨特的挑戰與機會。擁抱差異,從經驗中學習,並利用它們為你帶來優勢。畢竟,正是這些多樣化的經驗可以幫助您實現個人和職業成長。因此,無論您是在新創公司還是大公司,請始終記住 - 您的工作很重要,並有助於實現更大的目標。 您對新創公司和大公司之間的比較有何看法?我們很想聽聽您的經驗和收穫。請在下面的評論中分享您的想法! --- 原文出處:https://dev.to/wasp/start-ups-vs-big-companies-the-best-takeaways-for-you-to-know-28n5

Array.reduce() 已被山羊化 🐐✨

標題說明了一切🐐。我想談談我一直以來最喜歡的 JavaScript 陣列方法: **Array.reduce()** 。我知道有很多競爭者,但請聽我說完。 reduce() 不只是一個方法;這是一種生活方式✨。 我不想撒謊,當我第一次開始並發現reduce 時,它有點令人生畏。我花了一段時間才在程式碼中自信地使用它。但當我這麼做的時候,遊戲規則就改變了。突然間,我可以輕鬆地對陣列執行複雜的操作,將它們轉換為我需要的任何內容。我的程式碼變得更快更乾淨。 但不要只相信我的話。讓我向您展示使用reduce() 可以實現的一些功能。是時候深入研究 Array.reduce() 並發現為什麼它絕對是山羊了! 🐐 Array.reduce() 的 9 個用例 🐐 ------------------------ ### 用例 1:對數字求和 reduce() 最直接的用例之一是對一堆數字求和。假設您有一個整數陣列,並且您想要找到總和。 ``` const numbers: number[] = [1, 2, 3, 4, 5]; const sum: number = numbers.reduce((acc, curr) => acc + curr, 0); console.log(sum); // Output: 15 ``` 繁榮!只需一行程式碼,您就可以計算出陣列中所有元素的總和。累加器的初始值設為 0,並且在每次迭代中,我們將當前元素新增至累加器。 \*\* 獎勵:如果您選擇忽略起始值,reduce 將只使用陣列中的第一項。不過我傾向於總是包含一個初始值,這樣比較容易閱讀。 ### 用例 2:展平陣列 您是否曾經發現自己有一個陣列陣列並想:“我希望我可以將其扁平化為一個陣列”? ``` const nestedArray: number[][] = [[1, 2], [3, 4], [5, 6]]; const flattenedArray: number[] = nestedArray.reduce((acc, curr) => acc.concat(curr), []); console.log(flattenedArray); // Output: [1, 2, 3, 4, 5, 6] ``` 在此範例中,我們從一個空陣列開始作為初始累加器值。然後,在每次迭代中,我們使用 concat() 方法將目前子陣列連接到累加器。最後,我們就有了一個完美的扁平化陣列。 我知道您也可以使用`Array.flat()`來做到這一點。然而,了解如何使用reduce 很重要,以防您想對每個專案執行額外的操作。 ### 用例 3:對物件進行分組 假設您有一個物件陣列,並且您希望根據特定屬性對它們進行分組。 reduce() 是完成這項工作的完美工具。 ``` interface Person { name: string; age: number; } const people: Person[] = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }, { name: 'Dave', age: 30 } ]; const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => { if (!acc[curr.age]) { acc[curr.age] = []; } acc[curr.age].push(curr); return acc; }, {}); console.log(groupedByAge); /* Output: { '25': [{ name: 'Alice', age: 25 }, { name: 'Charlie', age: 25 }], '30': [{ name: 'Bob', age: 30 }, { name: 'Dave', age: 30 }] } */ ``` 在本例中,我們使用一個物件作為初始累加器值。我們檢查累加器是否已經具有當前年齡的屬性。如果沒有,我們為該年齡建立一個空陣列。然後,我們將目前物件推入對應的年齡陣列中。最後,我們得到一個物件,其中鍵是年齡,值是該年齡的人的陣列。 現在您也可以使用更新的`groupBy`方法,但是,理解這個久經考驗的真正經典方法很重要。 ### 用例 4:建立查找圖 我個人最喜歡的是使用reduce()從陣列建立查找映射。在效能和程式碼可讀性方面,它改變了遊戲規則。停止使用那些緩慢的 find() 或 filter() 呼叫。 ``` interface Product { id: number; name: string; price: number; } const products: Product[] = [ { id: 1, name: 'Laptop', price: 999 }, { id: 2, name: 'Phone', price: 699 }, { id: 3, name: 'Tablet', price: 499 }, ]; const productMap: { [key: number]: Product } = products.reduce((acc, curr) => { acc[curr.id] = curr; return acc; }, {}); console.log(productMap); /* Output: { '1': { id: 1, name: 'Laptop', price: 999 }, '2': { id: 2, name: 'Phone', price: 699 }, '3': { id: 3, name: 'Tablet', price: 499 } } */ // Accessing a product by ID const laptop: Product = productMap[1]; console.log(laptop); // Output: { id: 1, name: 'Laptop', price: 999 } ``` 透過使用reduce()建立查找映射,您可以以恆定的時間複雜度透過元素的唯一辨識碼來存取元素。不再需要循環遍歷陣列來尋找特定專案。 ### 用例 5:計算出現次數 曾經需要計算陣列中元素的出現次數嗎? reduce() 已經幫你解決了。 ``` const fruits: string[] = ['apple', 'banana', 'apple', 'orange', 'banana', 'apple']; const fruitCounts: { [key: string]: number } = fruits.reduce((acc, curr) => { acc[curr] = (acc[curr] || 0) + 1; return acc; }, {}); console.log(fruitCounts); /* Output: { 'apple': 3, 'banana': 2, 'orange': 1 } */ ``` 在這個例子中,我們初始化一個空物件作為累加器。對於陣列中的每個水果,我們檢查它是否已作為累加器物件中的屬性存在。如果是,我們將其計數加 1;否則,我們將其初始化為 1。 ### 用例 6:組合函數 函數式程式設計愛好者一定會喜歡這個。 reduce() 是一個強大的函陣列合工具。您可以使用它來建立逐步轉換資料的函數管道。 ``` const add5 = (x: number): number => x + 5; const multiply3 = (x: number): number => x * 3; const subtract2 = (x: number): number => x - 2; const composedFunctions: ((x: number) => number)[] = [add5, multiply3, subtract2]; const result: number = composedFunctions.reduce((acc, curr) => curr(acc), 10); console.log(result); // Output: 43 ``` 在這個範例中,我們有一個函數陣列,我們希望將其按順序應用到初始值 10。最終結果是按組合順序應用所有函數的結果。 ### 用例 7:實作簡單的類似 Redux 的狀態管理 如果您使用過 Redux,您就會知道它在管理應用程式中的狀態方面有多強大。你猜怎麼了?你可以使用reduce()來實作一個簡單的類似Redux的狀態管理系統。 ``` interface State { count: number; todos: string[]; } interface Action { type: string; payload?: any; } const initialState: State = { count: 0, todos: [], }; const actions: Action[] = [ { type: 'INCREMENT_COUNT' }, { type: 'ADD_TODO', payload: 'Learn Array.reduce()' }, { type: 'INCREMENT_COUNT' }, { type: 'ADD_TODO', payload: 'Master TypeScript' }, ]; const reducer = (state: State, action: Action): State => { switch (action.type) { case 'INCREMENT_COUNT': return { ...state, count: state.count + 1 }; case 'ADD_TODO': return { ...state, todos: [...state.todos, action.payload] }; default: return state; } }; const finalState: State = actions.reduce(reducer, initialState); console.log(finalState); /* Output: { count: 2, todos: ['Learn Array.reduce()', 'Master TypeScript'] } */ ``` 在此範例中,我們有一個初始狀態物件和一組操作。我們定義一個reducer函數,它接受當前狀態和一個動作,並根據動作類型返回一個新狀態。透過使用reduce(),我們可以將每個動作依序應用於狀態,從而得到最終狀態。這就像擁有一個迷你 Redux。 ### 用例 8:產生唯一值 有時,您可能有一個包含重複值的陣列,並且您需要僅提取唯一的值。 reduce() 可以幫助您輕鬆實現這一點。 ``` const numbers: number[] = [1, 2, 3, 2, 4, 3, 5, 1, 6]; const uniqueNumbers: number[] = numbers.reduce((acc, curr) => { if (!acc.includes(curr)) { acc.push(curr); } return acc; }, []); console.log(uniqueNumbers); // Output: [1, 2, 3, 4, 5, 6] ``` 在這裡,我們初始化一個空陣列作為累加器。對於原始陣列中的每個數字,我們使用includes()方法檢查它是否已存在於累加器中。如果沒有,我們將其推入累加器陣列。最終結果是一個僅包含原始陣列中唯一值的陣列。 ### 用例 9:計算平均值 想要計算一組數字的平均值? reduce() 為您提供支援! ``` const grades: number[] = [85, 90, 92, 88, 95]; const average: number = grades.reduce((acc, curr, index, array) => { acc += curr; if (index === array.length - 1) { return acc / array.length; } return acc; }, 0); console.log(average); // Output: 90 ``` 在此範例中,我們將累加器初始化為 0。當我們到達最後一個元素時(使用索引和 array.length 檢查),我們將累加器除以成績總數來計算平均值。 性能考量🏎️ ------ 雖然 Array.reduce() 非常強大且用途廣泛,但了解潛在的效能缺陷非常重要,尤其是在處理大型陣列或複雜操作時。一個常見的陷阱是在每次reduce()迭代中建立新的物件或陣列,這可能會導致過多的記憶體分配並影響效能。 例如,考慮以下程式碼: ``` const numbers: number[] = [1, 2, 3, 4, 5]; const doubledNumbers: number[] = numbers.reduce((acc, curr) => { return [...acc, curr * 2]; }, []); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] ``` 在本例中,我們使用展開運算子 (...) 在每次迭代中建立一個新陣列,這可能會效率低下。相反,我們可以透過直接改變累加器陣列來優化程式碼: ``` const numbers: number[] = [1, 2, 3, 4, 5]; const doubledNumbers: number[] = numbers.reduce((acc, curr) => { acc.push(curr * 2); return acc; }, []); console.log(doubledNumbers); // Output: [2, 4, 6, 8, 10] ``` 透過使用 push() 來改變累加器陣列,我們可以避免在每次迭代中建立新陣列,從而獲得更好的效能。 類似地,在處理物件時,直接改變累加器物件比使用擴充運算子建立新物件更有效: ``` const people: Person[] = [ { name: 'Alice', age: 25 }, { name: 'Bob', age: 30 }, { name: 'Charlie', age: 25 }, { name: 'Dave', age: 30 } ]; const groupedByAge: { [key: number]: Person[] } = people.reduce((acc, curr) => { if (!acc[curr.age]) { acc[curr.age] = []; } acc[curr.age].push(curr); return acc; }, {}); ``` 透過直接改變累加器物件,我們優化了reduce()操作的效能。 然而,值得注意的是,在某些情況下,在每次迭代中建立新的物件或陣列可能是必要的或更具可讀性。根據您的具體用例和您正在使用的資料大小,在效能和程式碼清晰度之間取得平衡非常重要。 結論 -- 你有它。九個令人難以置信的用例展示了 Array.reduce() 的強大功能和多功能性。從將數字求和到展平陣列、對物件進行分組到建立查找映射、對出現次數進行計數到組合函數,甚至實現狀態管理和計算平均值, `Array.reduce()`被證明是js 工具包中的強大工具。 你怎麼認為?您最喜歡的陣列方法是什麼? 感謝您的閱讀,願 reduce() 的力量與您同在。 ✨🐐✨ --- 原文出處:https://dev.to/mattlewandowski93/arrayreduce-is-goated-1f1j

每個前端開發人員都應該了解的軟體工程原理

作為前端開發人員,我們通常專注於建立漂亮的使用者介面。然而,重要的是要記住,美麗也在於內部,像素完美的方法也應該轉化為我們的程式碼組織和結構。在本文中,我們將探討每個前端開發人員都應該了解並在其專案中應用的一些基本軟體工程原理。 1. DRY(不要重複) ------------ DRY 原則強調程式碼可重複使用性和維護的重要性。透過將通用功能提取到可重複使用元件、函數或模組中來避免重複程式碼。透過堅持 DRY 原則,您可以減少程式碼重複,提高可維護性,並使您的程式碼庫更加模組化。 React 鼓勵元件驅動的架構,其中職責被隔離,以便於未來的開發和可擴展性。 我們以一個簡單的電子商務應用程式中的產品頁面為例。我們希望看到待售產品清單。我們可以將頁面分解為更小的、可重複使用的元件。 成分: 1. 產品卡:顯示單一產品及其名稱、價格和描述。 2. 產品清單:顯示產品清單。 ``` // ProductCard.js import React from 'react'; const ProductCard = ({ product }) => { return ( <div> <h2>{product.name}</h2> <p>Price: ${product.price}</p> <p>Description: {product.description}</p> </div> ); }; export default ProductCard; ``` ``` // ProductList.js import React, { useState } from 'react'; import ProductCard from './ProductCard'; const ProductList = () => { const [products, setProducts] = useState([ { id: 1, name: 'Product 1', price: 9.99, description: 'Description 1' }, { id: 2, name: 'Product 2', price: 19.99, description: 'Description 2' }, // ... ]); return ( <div> {products.map((product) => ( <ProductCard key={product.id} product={product} /> ))} </div> ); }; export default ProductList; ``` 在此範例中,我們看到,透過將與產品相關的邏輯分離到`ProductCard`元件中,我們可以在`ProductList`元件的`map`功能中重複使用它,並避免清單頁面中每個產品專案的重複程式碼。 2. SOLID 原則 -------- SOLID 是一個縮寫詞,代表物件導向設計的五個關鍵原則: - **單一**責任原則 (SRP):每個模組或類別應該只有一個更改理由。 - **開放**/封閉原則(OCP):軟體實體應該對擴展開放,對修改關閉。 - **李斯科夫**替換原則(LSP):子類型應該可以替換其基本類型,而不改變程式的正確性。 - **介面**隔離原則 (ISP):不應強迫客戶端依賴他們不使用的介面。 - **依賴**倒置原則(DIP):高層模組不應該依賴低層模組。兩者都應該依賴抽象。 讓我們來看看如何在 React TypeScript 元件中應用里氏替換原則 (LSP): ``` // Vehicle.ts interface Vehicle { drive(): void; name: string; } // Car.ts class Car implements Vehicle { constructor(private name: string) { this.name = name; } drive(): void { console.log(`Driving a ${this.name}`); } } // Motorcycle.ts class Motorcycle implements Vehicle { constructor(private name: string) { this.name = name; } drive(): void { console.log(`Riding a ${this.name}`); } } // App.tsx import React from 'react'; import { Vehicle } from './Vehicle'; import Car from './Car'; import Motorcycle from './Motorcycle'; function VehicleComponent(props: { vehicle: Vehicle }) { props.vehicle.drive(); return <div>Driving a {props.vehicle.name}</div>; } const App = () => { const car = new Car(); const motorcycle = new Motorcycle(); return ( <div> <VehicleComponent vehicle={car} /> <VehicleComponent vehicle={motorcycle} /> </div> ); }; export default App; ``` 在此範例中,我們有一個`Vehicle`接口,它定義了`name`屬性和`drive`方法。然後我們有兩個具體的實作: `Car`和`Motorcycle` ,它們都實作了`Vehicle`介面。 在 App 元件中,我們建立`Car`和`Motorcycle`的實例並將它們傳遞給 VehicleComponent。 `VehicleComponent`對傳入的車輛物件呼叫驅動方法。 LSP 確保我們可以用`Car`或`Motorcycle`代替`Vehicle`接口,而不改變程序的正確性。 `VehicleComponent`可與`Car`和`Motorcycle`實例無縫協作,展示子類型對其基本類型的可替換性。 3. KISS(保持簡單,愚蠢) ---------------- KISS 原則提倡設計和實現的簡單性。編寫易於理解、簡單且能做好一件事的程式碼。避免不必要的複雜性和過度設計,因為從長遠來看,這可能會導致混亂和維護挑戰。 讓我們來看看`Counter`元件的 2 個實作。 ``` // Complex Counter import React, { useState, useEffect } from 'react'; import { debounce } from 'lodash'; const ComplexCounter = () => { const [count, setCount] = useState(0); const [clicked, setClicked] = useState(false); const [error, setError] = useState(null); useEffect(() => { if (clicked) { setCount(prev => prev + 1) setClicked(false) } }, [clicked, setClicked]); const handleClick = (clicked: boolean) => { setClicked(!clicked); }; return ( <div> <p>Count: {count}</p> <button onClick={() => handleClick(clicked)}>Increment</button> </div> ); }; export default ComplexCounter; ``` ``` // Simple Counter import React, { useState } from 'react'; const SimpleCounter = () => { const [count, setCount] = useState(0); const handleClick = () => { setCount(count + 1); }; return ( <div> <p>Count: {count}</p> <button onClick={handleClick}>Increment</button> </div> ); }; export default SimpleCounter; ``` 我們發現`ComplexCounter`實作更難理解和維護,而且更容易出錯。 它引入了一個不必要的`clicked`狀態變數和一個`useEffect`掛鉤。 這是一個如何不實作 React 元件的範例。 4. YAGNI(你不需要它) --------------- YAGNI 提醒我們避免基於推測的未來需求過早加入功能。相反,應專注於正確實現當前所需的功能。當您建立一個非常以用戶為中心的產品時,這一點變得非常重要。最好不要根據您認為用戶可能想要的假設來引入新功能。使用適當的使用者研究框架和原型設計方法。 遵循 YAGNI,您可以防止不必要的複雜性、減少開發時間並維護精簡的程式碼庫。 5. 乾淨的程式碼 --------- 乾淨的程式碼是可讀的、可理解的、可維護的。遵循編碼約定和最佳實踐,使用有意義的變數名稱,並編寫不言自明的程式碼。保持函數和類別小而集中,堅持一致的格式,並努力使程式碼庫清晰。 讓我們來看一個簡單的實用函數,用於出於資料安全目的隱藏部分使用者的私人資訊。 ``` const hashUsersPrivateInformation = (privateInformation: string): string => { // Calculate the length of the private info to determine how many characters to mask const maxLength = privateInformation.length > 4 ? privateInformation.length - 4 : privateInformation.length; // Create a regular expression pattern to match the desired number of characters const regexPattern = `.{1,${maxLength}}`; const regex = new RegExp(regexPattern); return privateInformation.replace(regex, (match) => '*'.repeat(match.length)); }; ``` 我們看到: 1. 函數的名稱是自我描述的 2. 它包含可以幫助其他開發人員的有用註釋。 3. 它有一個可以理解的主要目的。 我們應該以類似的方式建立我們的程式碼。 結論 -- 將這些軟體工程原理融入您的前端開發工作流程中,您可以編寫更高品質的程式碼,改善與團隊成員的協作,並建立強大且可擴展的應用程式。軟體工程不僅僅是編寫程式碼;還涉及編寫程式碼。它是為複雜問題建立可靠、可維護且優雅的解決方案。 --- 原文出處:https://dev.to/gboladetrue/software-engineering-principles-every-frontend-developer-should-know-1ej7

掌握 SQL:結構化查詢語言綜合指南

介紹 -- 在上一篇部落格文章中,我們共同探討了以下內容的綜合指南: https://dev.to/louaiboumediene/mastering-relational-database-design-a-compressive-guide-3jh8 在本文中,我們將在較高層次上發現實際用於實現資料庫模式設計的語言的語法和核心功能... SQL。 那麼...讓我們深入探討吧! ![讓我們深入了解圖像](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cvmr1vh4frdyjfmzf5sh.gif) --- 什麼是 SQL ------- SQL,即結構化查詢語言,是用於與所有**RDMS**對話的外觀語言,但是大多數時候,作為後端工程師(我們不是資料庫工程師),我們不直接使用 SQL,而是使用物件關係映射器**ORM**它在原始SQL 之上提供了一個更好、更可靠的接口,以便用我們首選的程式語言與資料庫進行通信,但是我們仍然需要SQL 的基本知識,以便快速、簡單地操作以及與資料庫互動。 ![如果我告訴你表情包怎麼辦](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fvpr0nujx4fed7e4xvh3.png) --- 基本 SQL 查詢 --------- 基本 SQL 查詢涉及使用 SELECT、DISTINCT、WHERE、LIMIT 和 OFFSET 等命令從資料庫表中選擇特定資料。 ``` -- Selecting all columns from a table SELECT * FROM employees; -- Selecting specific columns SELECT first_name, last_name FROM employees; -- Using DISTINCT to get unique values SELECT DISTINCT department_id FROM employees; -- Using WHERE to filter results SELECT * FROM employees WHERE department_id = 10; -- Using LIMIT to limit the number of results SELECT * FROM employees LIMIT 5; -- Using OFFSET to skip certain rows SELECT * FROM employees OFFSET 5; ``` --- 過濾資料 ---- 在 SQL 中篩選資料可讓您根據某些條件從表格中擷取特定記錄,例如使用 >、<、= 等比較運算子以及 AND、OR 和 NOT 等邏輯運算子。 ``` -- Using comparison operators SELECT * FROM employees WHERE salary > 50000; -- Using logical operators SELECT * FROM employees WHERE department_id = 10 AND salary > 50000; -- Using IN and NOT IN SELECT * FROM employees WHERE department_id IN (10, 20); -- Using BETWEEN SELECT * FROM employees WHERE salary BETWEEN 40000 AND 60000; -- Using LIKE for pattern matching SELECT * FROM employees WHERE last_name LIKE 'S%'; ``` --- 資料排序 ---- SQL 中的資料排序是使用 ORDER BY 子句根據指定列以升序或降序排列檢索到的記錄。 ``` -- Sorting data in ascending order SELECT * FROM employees ORDER BY salary; -- Sorting data in descending order SELECT * FROM employees ORDER BY salary DESC; -- Sorting by multiple columns SELECT * FROM employees ORDER BY department_id, salary DESC; ``` --- 聚合函數 ---- SQL 中的聚合函數對一組值執行計算並傳回單一值。常見的聚合函數包括 COUNT、SUM、AVG、MIN 和 MAX。 ``` -- Counting the number of rows SELECT COUNT(*) FROM employees; -- Calculating total salary SELECT SUM(salary) FROM employees; -- Finding average salary SELECT AVG(salary) FROM employees; -- Finding minimum salary SELECT MIN(salary) FROM employees; -- Finding maximum salary SELECT MAX(salary) FROM employees; ``` --- 資料分組 ---- 在 SQL 中將資料分組可讓您使用 GROUP BY 子句(通常與聚合函數結合使用)對指定列中具有相同值的行進行分組。 ``` -- Grouping data by department SELECT department_id, COUNT(*) FROM employees GROUP BY department_id; -- Using HAVING to filter grouped data SELECT department_id, COUNT(*) FROM employees GROUP BY department_id HAVING COUNT(*) > 5; ``` --- 加入 -- SQL 中的聯結會根據相關資料列組合來自多個資料表的資料,以擷取跨這些資料表的資料。 ``` -- Inner Join SELECT * FROM employees INNER JOIN departments ON employees.department_id = departments.department_id; -- Left Join SELECT * FROM employees LEFT JOIN departments ON employees.department_id = departments.department_id; -- Right Join SELECT * FROM employees RIGHT JOIN departments ON employees.department_id = departments.department_id; -- Full Outer Join SELECT * FROM employees FULL OUTER JOIN departments ON employees.department_id = departments.department_id; ``` --- 子查詢 --- SQL 中的子查詢是另一個查詢中的巢狀查詢,用於檢索依賴另一個查詢結果的資料。 ``` -- Subquery example SELECT * FROM employees WHERE department_id IN (SELECT department_id FROM departments WHERE location_id = 1700); -- Correlated subquery example SELECT * FROM employees e WHERE salary > (SELECT AVG(salary) FROM employees WHERE department_id = e.department_id); ``` --- 意見 -- SQL 中的檢視是根據查詢結果產生的虛擬表,提供了一種簡化複雜查詢並限制對某些資料的存取的方法。 ``` -- Creating a view CREATE VIEW high_paid_employees AS SELECT * FROM employees WHERE salary > 80000; -- Updating a view CREATE OR REPLACE VIEW high_paid_employees AS SELECT * FROM employees WHERE salary > 90000; -- Dropping a view DROP VIEW IF EXISTS high_paid_employees; ``` --- 索引 -- SQL 中的索引透過在列上建立索引來提高查詢效能,從而實現更快的資料檢索。 ``` -- Creating an index CREATE INDEX idx_lastname ON employees(last_name); -- Dropping an index DROP INDEX idx_lastname; ``` --- 交易 -- SQL 中的交易透過將 SQL 語句分組為原子單元來確保資料完整性,從而確保所有語句都成功執行或全部都不執行。 ``` -- Beginning a transaction BEGIN TRANSACTION; -- Committing a transaction COMMIT; -- Rolling back a transaction ROLLBACK; ``` --- 儲存過程 ---- SQL中的預存程序是儲存在資料庫中的預編譯的SQL程式碼,可以透過單一命令執行,通常用於封裝頻繁執行的任務 ``` -- Creating a stored procedure CREATE PROCEDURE get_employee (IN employee_id INT) BEGIN SELECT * FROM employees WHERE employee_id = employee_id; END; -- Executing a stored procedure CALL get_employee(100); -- Modifying a stored procedure ALTER PROCEDURE get_employee (IN employee_id INT) BEGIN SELECT employee_id, first_name, last_name FROM employees WHERE employee_id = employee_id; END; -- Dropping a stored procedure DROP PROCEDURE IF EXISTS get_employee; ``` --- 備份與復原 ----- SQL 中的備份和復原涉及建立資料庫備份以防止資料遺失,並在資料庫發生故障或損壞時還原它們。 ``` -- Creating a full backup BACKUP DATABASE dbname TO disk = 'path_to_backup'; -- Creating a differential backup BACKUP DATABASE dbname TO disk = 'path_to_backup' WITH DIFFERENTIAL; -- Creating a transaction log backup BACKUP LOG dbname TO disk = 'path_to_backup'; -- Restoring from a backup RESTORE DATABASE dbname FROM disk = 'path_to_backup'; ``` --- SQL 方言和特定於供應商的擴展 ---------------- 雖然 SQL 是一種標準化語言,但不同的資料庫供應商已經實作了自己的擴充和方言,導致不同 RDBMS 之間 SQL 的編寫和執行方式略有不同。這些變更可能會影響使用特定資料庫系統的開發人員可用的語法、函數和特性。 例如,以下是特定於供應商的 SQL 方言和擴展的一些範例: **甲骨文SQL** : - Oracle SQL 包括專有擴展,例如分層查詢、分析函數和用於資料建模的 MODEL 子句。 - 範例: `SELECT CUBE(product, region) FROM sales;` (CUBE 是 Oracle 特定的用於產生小計的擴充) **SQL Server(微軟)** : - SQL Server 包含 T-SQL (Transact-SQL),它透過串流控制語言建構、錯誤處理和流程程式設計建構等功能擴展了標準 SQL。 - 範例: `SELECT ISNULL(column_name, 'default_value') FROM table_name;` (ISNULL 是一個 T-SQL 函數) **MySQL** : - MySQL 包括空間資料類型和函數、視窗函數以及用於正規表示式匹配的 REGEX 運算子等擴充。 - 範例: `SELECT column_name REGEXP '^pattern' FROM table_name;` (REGEXP 是 MySQL 特定的運算子) **PostgreSQL** : - PostgreSQL 包括陣列、JSON 支援、全文搜尋和範圍資料類型等擴充。 - 範例: `SELECT column_name || 'suffix' FROM table_name;` (|| 是 PostgreSQL 特定的字串連接運算子) ![RDBMS 之間的差異](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z7m0q9jdx3opw29zja6j.png) 所以最合乎邏輯的方法是: 1. **基礎知識**:了解關聯式資料庫設計的基礎:實體、鍵、關係…。 。 2. **SQL** :學習 SQL 作為獨立語言的基礎知識。 3. **選擇 RDBM** :選擇最適合您的 RDBMS,然後按照其所有特殊語法和結構來使用它。 結論 -- SQL 本身就是一個廣闊的領域,包含許多我們沒有涉及的概念。事務、備份和文件管理只是更廣泛範圍的幾個範例。然而,對於像我們這樣的後端工程師來說,我們所介紹的基礎知識足以作為 SQL 的基礎概述。 --- 原文出處:https://dev.to/louaiboumediene/mastering-sql-comprehensive-guide-to-structured-query-language-4gh

我在 20 年內創辦了 30 家新創公司

我在 20 年內創辦了 30 家新創公司。 創投支援、引導、應用程式、SaaS、B2B、B2C。 我後悔犯過的所有錯誤: 1. 做消費者應用程式。 ============ 這裡的失敗率是 B2B 失敗率的 100 倍,幾乎是中樂透。 2. 籌集創投資金。 ========== 當我們籌集第一輪資金時,我感覺就像馬克祖克柏一樣。所有採訪我們的記者。感覺就像一場夢。 最終,大多數這些新創公司都因過早獲得資金而失敗。 3. 招聘太早。 ======== 此前,新創公司對大型團隊感到自豪——這是當時成長的關鍵指標。 創辦人應該完成 PMF 之前的大部分工作。 員工和承包商不會對您的專案有足夠的熱愛和熱情。 4.忽略搜尋引擎優化。 =========== 我的網路中沒有人做過搜尋引擎優化。我們都認為這已經太晚了,所以我們一直推遲它。 5.忽視內容行銷。 ========= 從來沒有認真對待過部落格。大錯。 6.社群媒體行銷。 ========= 這是我最大的遺憾。我一年前開始使用推特。現在已經有2萬粉絲了。如果我從20年前開始會怎樣?現在我可以有 100 萬粉絲嗎?我想是這樣。 7. 跳過創意驗證。 ========== 我總是為觀眾假設。預測他們需要什麼。這幾乎從未被證明是真的。 我最好的專案是那些我認為會失敗的專案,而失敗的專案一開始就是我最大的希望。 8. 招募經理。 ======== 我還沒有在新創公司中見過任何有用的經理。 他們可能對公司有用,但對新創公司來說,我應該只僱用實干家。 9. 追逐投資者。 ========= 對於每家新創公司,我會花 40% 的時間進行融資。 在大多數情況下我都會成功,但代價是什麼? 我已經兩年沒有與投資者進行過一次接觸了,但是風投們來敲我的門,因為我有很好的吸引力,他們每天都在尋找這樣的專案。 10.聘請專業開發人員。 ============ 對於新創公司來說,沒有什麼比專業開發團隊更有效率的了。 如今,我的 1 位全端開發人員在專案上取得的進展比當時 12 人團隊多了 5 倍。 不惜一切代價避免「團隊」。 11. 僱用我不想擁抱的人。 ============== 我的共同創辦人、一位丹麥老人在 2015 年對我說過這句話。 12. 押注於合作夥伴。 ============ 我曾多次與價值數十億美元的大型公司和不同的新創公司合作。 他們承諾提供巨大的東西,數以百萬計的用戶,但最終只是浪費你的時間,破壞焦點,轉移優先級,讓你花費無數的錢來提高安全性和合規性,最終沒有帶來任何使用者/金錢。 13. 閃亮的物體。 ========== 我被 crypt0 的炒作所迷惑。變得超級富有,然後失去了一切。 浪費了很多年。看到人類是多麼的欺騙和貪婪,甚至是我自己的伴侶,我幾乎感到沮喪。 14. 堅持一個糟糕的專案太久。 ================ 在多年沒有吸引力後,我仍然相信專案。 我以為有一天,會發生一些神奇的事情,一切都會好轉。這只是浪費時間。 15. 參加技術會議。 =========== 這完全是浪費時間。 那裡的大多數人都是公司的「好」員工,他們被派到那裡作為對公司忠誠的額外福利。 16. Scrum 是一個騙局。 ================ 如果我的團隊每天早上都必須像幼兒園的孩子一樣被問題困擾,那麼事情最終會失敗。我能做的唯一一件好事是和那些成年人、可以自己管理自己的事情的人在一起。我們只需透過聊天就目標和計劃同步完成所有事情。 17. 外包開發和行銷。 ============ 賣家的態度很好,但結果卻不好。 新創公司是如此困難,以至於外部人幾乎沒有機會為他們做好工作。 18. 從 B2B 領域的免費方案開始。 ==================== 免費專案吸引了完全錯誤的人群,他們提供的回饋只是為了取悅其他「免費」人群。然而,「付費」用戶卻截然不同,並且有不同的需求。 有幾次,我一開始沒有免費版本,沒有銷售,所以後來我加入了免費版本。但這也是一個錯誤。如果沒有人願意為我的產品付費,我就必須修復它或為它尋找其他受眾。 19. 從頭開始編寫程式碼。 ============== 我的團隊將在前 3 個月內編寫基本的內容,例如身份驗證、管理面板、cruds 等。 這是對時間的巨大浪費。 當我開始使用樣板時,速度提高了 10 倍。 20. 與家人和朋友相處的時間很少。 ================== 我工作太多了。根本沒有放假。 這對我的創造力非常有破壞性。一旦我開始休息,我就變得更有創造力。 質>數量。 就是這樣。 我每天都在[twitter.com/johnrushx](https://twitter.com/johnrushx)分享我的經驗 [在這裡查看我的所有專案](https://johnrush.me/) --- 原文出處:https://dev.to/johnrushx/i-built-30-startups-in-20-years-3j41

17 個值得嘗試的最佳開發人員生產力工具

效率和生產力不僅是開發人員的目標,也是必需品。我們製作了大量的工具並編寫了日常任務的腳本,所有這些都是為了騰出時間來處理真正重要的事情。在當今龐大的開發者生態系中,一系列[生產力工具](https://www.devzero.io/blog/ai-tools-for-software-developers-in-2023-to-boost-dev-productivity)隨時可以簡化我們的工作流程。 生產力工具的作用不僅僅是減少重複性任務的[時間](https://www.devzero.io/blog/time-management-tools-and-tips-boosting-productivity-for-software-developers)。它們在管理程式碼和促進團隊協作方面至關重要。借助正確的工具包,開發人員可以將注意力從平凡轉向創新,以新的自由度來應對創意挑戰。讓我們深入了解頂級開發者生產力工具,以在 2024 年提升您的遊戲水平。 衡量開發人員的生產力 ---------- 首先,讓我們解決一個基本問題:我們如何衡量開發人員的生產力?開發人員的日常生活不僅包括編寫程式碼,因此衡量生產力需要廣泛審視整個軟體開發過程的效率和有效性。 我們可以追蹤熟悉的指標,例如程式碼行數、開發的功能、修復的錯誤和交付時間表。然而,真正理解生產力需要一種整體方法,一種權衡軟體開發的有形和無形方面的方法。因此,考慮品質、影響和協作也很重要。 了解生產力工具 ------- 接下來,我們來詳細分析開發人員可以使用的不同類型的生產力工具: - IDE、程式碼編輯器和助手是任何開發人員武器庫的基石,為編碼、編輯、測試和除錯提供整合平台。 - 開發環境確保開發人員可以專注於編寫程式碼,而不是管理基礎架構。 - 專案管理和協作工具對於組織任務、追蹤進度和確保團隊溝通順暢至關重要。 - 設計和原型工具使開發人員能夠製作引人注目的視覺設計並改進其應用程式的 UI/UX。 - 偵錯工具對於快速辨識和修復錯誤和其他程式碼問題至關重要。 - 框架和抽象可以幫助開發人員透過重複使用通用元件更快地交付程式碼。 - 部署應用程式是最後一步,但確保效能和穩定性是關鍵。 從編碼的基礎工作到使用者介面和團隊協作的微調,每個類別在提高生產力方面都發揮著至關重要的作用。 IDE、程式碼編輯器和助手 ------------- 讓我們來看看 2024 年一些流行的 IDE 和程式碼編輯器。 1. IntelliJ IDEA --------- [IntelliJ IDEA](https://www.jetbrains.com/idea/)是 Java 和 Kotlin 開發人員的首選 IDE,提供的綜合[開發環境](https://www.devzero.io/blog/why-software-development-environments-are-important-and-how-to-manage-them-effectively)遠遠超出 Atom 等簡單程式碼編輯器所提供的功能。此 IDE 具有出色的高級功能,例如深入程式碼理解以實現卓越的導航和重構。與基本編輯器不同,IntelliJ 整合了資料庫和版本控制的基本工具,透過讓您所需的一切觸手可及來簡化您的工作流程。 IntelliJ 社群版免費提供,並提供對其功能的廣泛探索,但存取權限僅限於學生、BootCamp 成員和特定焦點小組。對於其他人來說,專業版的價格約為每月 20 美元,並且可以完全存取 IntelliJ 強大的工具套件。 2. Visual Studio Code -------------------- Microsoft 的[Visual Studio Code](https://code.visualstudio.com/)是跨所有框架、語言和程式庫的開發人員的首選程式碼編輯器。其突出的特點是一個龐大的擴展庫,旨在提高生產力。想像一下,利用 TabNine 進行 AI 驅動的程式碼補全,或整合 GitHub Copilot,利用其 AI 輔助功能將編碼速度提高十倍。除此之外,Visual Studio Code 還提供內建的 Git 控制、用於 shell 命令的整合終端以及用於無縫程式碼分析的專用偵錯器。 最重要的是,它完全免費,並且與 Windows、Mac 和 Linux 平台普遍相容。 3. AppMap ------- [AppMap](https://www.appmap.io/)是一種視覺化工具,可提供應用程式程式碼庫內互動的詳細概述。它為開發人員提供了整個應用程式中資料流和控制的圖形表示,幫助他們更直觀地理解複雜的系統。透過 AppMap,開發人員可以輕鬆瀏覽不同的元件,了解模組之間的依賴關係,並確定潛在的最佳化或重構領域。透過直觀地繪製應用程式的內部工作原理,AppMap 增強了開發團隊之間的協作,並有助於在開發過程中做出更好的決策。 Appmap 最近推出了 Navie。 Navie 是一種生成編碼 AI,具有 API 和資料庫感知能力,因此它可以為整個程式碼庫中的複雜變更提供程式碼建議。 Navies 回答並建議針對開發人員問題進行程式碼更改,例如「我的資料庫查詢效能很慢。我如何解決它?或“我需要更改令牌系統以提高身份驗證安全性,我該如何進行?” ‍ 海軍的建議針對每位開發人員及其正在開發的軟體進行高度個人化,同時確保您的 IP 安全。 4.Copilot ----- 向無可爭議的版本控制統治者屈服:GitHub。憑藉其一系列強大的功能,包括透過 GitHub 工作流程進行自動化部署、 [GitHub Copilot](https://github.com/features/copilot)的人工智慧驅動協助以及 Dependabot 的主動安全修補,GitHub 處於開發創新的前沿。就像 Visual Studio Code 是編碼的首選一樣,GitHub 是開發人員進行版本控制的首選平台。 GitHub 的免費套餐包含豐富的產品,非常適合小型團隊、獨立開發人員、自由工作者和新創公司。但對於大型組織和企業來說,Teams 計劃(每位使用者每月3.67 美元)和Enterprise 計劃(每位使用者每月19.25 美元)解鎖了一系列高級功能,例如GitHub Codespaces,這是與GitHub 無縫整合的虛擬IDE,可直接在平台內進行編碼。此外,付費方案還提供增強的協作功能,例如能夠任命多個拉取請求審閱者和指定程式碼擁有者,從而簡化開發流程並確保程式碼品質。 ‍ 此類別中出現的另外兩個工具是[SuperMaven](https://supermaven.com/)和[TabbyML](https://github.com/TabbyML/tabby) ,兩者都使用快速且安全的 LLM 來完成程式碼完成和建議。 開發環境 ---- 在當今的微服務和複雜的基於雲端的服務和第三方庫的世界中,本地主機無法提供所需的適當環境。這會導致整個 SLDC 不斷重構並減慢部署週期。 5.DevZero --------- [DevZero](https://www.devzero.io/)是一個為開發人員在雲端提供一致的、類似生產的開發環境的平台。開發人員可以在他或她的本機電腦上工作,但仍然體驗生產環境的所有細微差別,例如資料庫、雲端原生服務等。到生產都是一致的。新開發人員只需幾分鐘即可入職,而不是幾天。這使工程組織具有一致性和易於管理。不再除錯本機。 DevZero 的一個顯著優勢是縮短了 CI 時間。開發人員可以節省重構和編譯基礎架構處理所花費的寶貴時間,因為現在他們可以立即在生產環境中執行本機程式碼。這也提高了整體發布頻率並消除了在不同環境中進行測試的障礙。 協作和專案管理 ------- 開發人員經常處理無數的選項卡,並且可能會跨多個顯示器進行操作,但切換平台以進行協作和任務管理的想法可能是一個真正的痛點。讓我們深入研究一些旨在提高開發人員生產力和促進無縫團隊協作的關鍵工具。 6. Slack ----- Slack 徹底改變了遠端協作,使公司能夠即時通訊和共享文件。對於開發人員來說,它是協作的動力源泉,可與 GitHub 等工具無縫集成,以即時更新程式碼推送或部署。這種整合確保每個人都能及時了解專案狀態,而無需不斷地來回訊息。您可以透過 Slack 的整合使用任何專案管理工具,例如 Trello、JIRA 等。 Slack 透過可自訂的工作流程和應用程式進一步發展,讓平台內任務和問題管理。雖然免費計劃支援基本通訊和最多十個集成,但要擴展到自訂自動化及其他功能,需要升級到專業計劃(每人每月 8.25 歐元)或商業計劃(每人每月 14.10 歐元)。這種靈活性使 Slack 成為追求效率和簡化工作流程的開發團隊不可或缺的工具。 7. Height ----- 在管理專案和維持組織性方面,擁有可靠的工作追蹤工具至關重要。 [Height](http://height.app/)是一款功能強大的專案管理工具,提供廣泛的功能,旨在簡化協作並最大限度地提高效率。借助 Height,開發人員可以輕鬆分配任務、設定截止日期、追蹤進度並監控團隊績效。其直覺的收件匣式介面和強大的分析功能使其成為希望掌控工作量並按時交付專案的團隊的首選。 8. Linear ----- [Linear.app](https://linear.app/)是一個專案管理和問題追蹤工具,旨在幫助團隊更有效地協作和管理工作。 Linear 提供了一個用於組織任務、追蹤進度和促進團隊成員之間溝通的平台。該工具以其時尚且用戶友好的介面而聞名。 9. Pullflow ----- 審查 PR 很多時候是工程組織的瓶頸。它不像編寫程式碼那樣有回報,並且需要上下文切換。 [Pullflow](https://pullflow.com/)旨在透過其人工智慧增強的程式碼審查協作功能來減少上下文切換並改善溝通和公關管理。 Pullflow 整合了 VSCode、Github 和 Slack 之間的 PR 通信,因此開發人員無需進行上下文切換。 設計和原型製作工具 --------- 開發人員從頭開始精心設計設計並仔細考慮每個佈局、顏色和字體選擇的時代已經演變。今天的 UI/UX 開發人員享受 Figma 等工具的重大飛躍,其中設計與程式碼相結合。讓我們詳細探討一下。 10. Figma ------- [Figma](https://www.figma.com/)透過提供可無縫整合到專案中的現成程式碼片段,徹底改變了設計到開發流程。在過去的一年裡,Figma 推出了許多插件,為 React、Vue 甚至 HTML 等流行框架提供樣板元件,並支援 Figma 設計直接轉換為 Webflow。 FigJam 是一項出色的功能,事實證明,它對於規劃和確定建造和發布的範圍、衝刺規劃和製作架構圖非常有價值。它在協作和策略規劃階段的效用怎麼強調都不為過。 由於其基於網路的特性,Figma 提供了無與倫比的易用性,並輔以適用於 Windows 和 macOS 的專用桌面應用程式。您需要加入其中一項付費方案才能使用開發模式並存取所有設計元素的程式碼。如果您使用組織計劃,您甚至可以使用私人插件。 11.Whimsical和Excalidraw ------------------ 在解釋複雜概念或設計系統架構時,圖表和視覺化通常是必不可少的。 [Excalidraw](https://excalidraw.com/)和[Whimsical](https://whimsical.com/)是兩種流行的快速繪圖工具,可讓開發人員輕鬆建立圖表。憑藉其簡單而強大的介面,開發人員可以立即建立線框、流程圖和其他視覺表示。這些工具非常適合集思廣益並向利害關係人展示概念,使它們成為開發人員工具包的寶貴補充。 偵錯工具 ---- 除錯是軟體開發生命週期中最具挑戰性和最耗時的部分之一。然而,正確的警報和監控系統可以節省無數時間。讓我們深入研究可以顯著簡化除錯過程、提高效率並減少開發工作流程中的停機時間的基本工具。 12.Postman ----- [Postman](https://www.postman.com/)已成為測試和記錄 API 的基礎 API 開發工具,因其在除錯生產和本地 API 方面的強大能力而贏得了開發人員的廣泛認可。它使用戶能夠發送和模擬 HTTP 請求,這項功能對於等待後端 API 準備就緒的前端開發人員特別有利,可確保持續進展。 除了在測試中的實用性之外,Postman 還充當 API 文件的集中儲存庫,促進團隊內的無縫共享和協作。其基本計劃(每個用戶每月 14 美元)對於大多數開發人員來說應該足夠了。 13.Sentry ----- [Sentry](https://sentry.io/)是效能監控和錯誤追蹤領域的強大工具,擅長自動辨識程式碼庫中的錯誤和錯誤。 Sentry 的 SDK 適用於幾乎所有廣泛使用的框架和技術(包括 JavaScript、PHP、Python 和 Ruby),可無縫整合到您的專案中。 檢測到錯誤後,Sentry 會提供全面的見解,例如堆疊追蹤、來源頁面和使用者訊息,這些對於有效診斷和解決問題非常寶貴。此外,程式碼覆蓋率和會話重播等功能被證明是不可或缺的,尤其是在面臨重現難以捉摸的錯誤的艱鉅任務時。 Sentry 的功能確保開發人員可以花更少的時間進行故障排除,而將更多的時間用於開發,從而提高整體生產力和程式碼品質。 您可以嘗試 Sentry 及其免費的單獨開發者計畫。然而,為了充分利用它,我建議嘗試團隊計劃(每月 26 美元),您可以將隊友加入到 Sentry 工作區。您還需要每月支付 29 美元購買程式碼覆蓋率。 框架和抽象 ----- 當今的許多元件在應用程式中都很常見:身份驗證、授權、資料庫存取、UI 元件等。寫內容從頭開始。 14.Vercel ------ 建置和部署 Web 應用程式可能是一項複雜的任務,尤其是當專案規模不斷擴大時。 Web 應用程式部署框架(例如 Vercel)為開發人員提供了簡化且可擴展的解決方案來部署其 Web 應用程式。 [Vercel](https://www.vercel.com/)是一個雲端平台,旨在簡化 Web 應用程式的部署和託管。它以專注於透過提供自動部署、無伺服器功能和全球內容交付等功能為開發人員提供無縫體驗而聞名。 15. Neurelo ------ [Neurelo](https://www.neurelo.com)為您的資料 API 提供了一個與資料庫無關的程式設計介面。 Neurelo 無需學習 MongoDB 或 PostgreSQL 的查詢語言並為它們建立 API,而是在幾分鐘內為您提供優化的自動生成的 API,包括模式建置器,以及使用 Git 管理開發、登台和生產環境的界面類似版本控制來管理追蹤更改。最後,它使用人工智慧提供自動生成的文件以及透過點擊生成和測試複雜查詢的能力。 許多公司最終會產生自己的抽象層來管理開發人員的資料庫存取或使用 SQLAlchemy 或 Hibernate 等物件關係映射器 (ORM)。 Neurelo 建立了一個通用的強大且與資料庫無關的替代方案。 部署應用程式 ------ 16. Fly.io --------- 部署應用程式可能是一個複雜且耗時的過程。應用程式部署工具(例如[Fly.io](http://fly.io/) )旨在透過提供一個用於輕鬆部署和管理應用程式的平台來簡化此流程。 ‍ Fly.io是一個提供全球應用部署網路的平台。它允許開發人員在跨越全球多個地點的分散式基礎設施上部署和執行他們的應用程式。 Fly.io 專注於透過將應用程式執行個體分佈在更靠近最終用戶的位置來優化應用程式效能,減少延遲並改善整體用戶體驗。 ‍ 該平台支援各種程式語言和框架,使開發人員能夠部署各種應用程式,包括Web應用程式、API和微服務。 Fly.io 使用邊緣運算和全球選播網路的組合來最佳化路由並確保使用者要求定向到最近的可用應用程式實例。 17. Tigris ----------- [Tigris](https://www.tigrisdata.com/)是一種與 S3 相容的全球分散式物件儲存服務,它將資料儲存為物件儲存桶中。物件是一個文件和描述該文件的任何元資料。桶子是存放物件的容器。 ‍ 哪個才是最好的開發工具? ------------ 只要您的武器庫中擁有每個類別中的任何一種工具,您就可以開始使用了。但如果我必須為您選擇一種工具,我會選擇 Visual Studio Code。它因其多功能性、對語言和框架的廣泛支援以及強大的擴展生態系統而脫穎而出,使其成為首選。 工程生產力工具 ------- 工程生產力工具支援軟體開發的特定工程方面。這可能包括分析、自動化測試、部署、容器化或靜態程式碼分析。使用這些工具,您可以確保程式碼品質和效能,並在開發週期的早期發現潛在問題。一些常見的工程生產力工具包括Docker、Jenkins、Confluence、JIRA等。 結論 我很想知道 2024 年您會從這個[清單](https://www.devzero.io/blog/how-to-calculate-developer-productivity-metrics-using-mergestat-and-devzero)中選擇哪種工具。從本質上講,GitHub 和 Visual Studio Code 是 2024 年的必備工具。我仍在研究它們,誰知道呢,它們可能會出現在 2025 年的清單中。 本文原刊於 https://www.devzero.io/blog/best-developer-productivity-in-2024 --- 原文出處:https://dev.to/shohams/17-best-developer-productivity-tools-to-try-1a2a

如何使用 Visual Studio Code 自訂新的 Windows 終端

幾天前,微軟發布了新[Windows Terminal](https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701)的早期版本。 Windows 終端是一種新型、現代化、快速、高效、強大且高效的終端應用程式,適用於命令列工具和 shell(例如命令提示字元、PowerShell 和 WSL)的使用者。 其主要功能包括多個選項卡、Unicode 和 UTF-8 字元支援、GPU 加速文字渲染引擎以及自訂主題、樣式和配置。 顯然,這是一個託管在 GitHub 上的開源專案: <https://github.com/microsoft/terminal> 請隨意參與。 目前它有點不穩定,將來會推出更多功能,但我已經使用它幾天了,我喜歡這個想法。 到目前為止,我一直在使用[Cmder](https://cmder.net/) ,但 Windows Terminal 有一些新的有前景的功能。 如何安裝 ---- 您可以直接從 Windows 應用程式商店安裝 Windows 終端,或者如果您想了解它的工作原理,您可以下載原始程式碼、建置它並啟動終端。 ![](https://thepracticaldev.s3.amazonaws.com/i/rb6x6yo858b6ufdt42vw.PNG) 商店版本的連結: <https://www.microsoft.com/en-us/p/windows-terminal-preview/9n0dx20hk701> GitHub 專案的連結: <https://github.com/microsoft/terminal> 原始碼和專案都有很好的文件記錄。 第一次發射 ----- 如果您從“開始”功能表啟動該應用程式,它將如下面的螢幕截圖所示。 ![](https://thepracticaldev.s3.amazonaws.com/i/iut0oi8j4iufgdyi6du6.PNG) 預設終端是 PowerShell。 如果按一下「+」符號,應用程式將在新分頁中啟動另一個終端。 如果您按一下向下箭頭符號 ⬇,您可以從清單中選擇新終端。 清單下方還有另一個有趣的按鈕,就是設定按鈕。 設定 -- 如果按一下向下箭頭,然後按一下「設定」按鈕,此時,設定檔案(它是 JSON 檔案)將在 Visual Studio 的新實例中開啟。 如果您想要直接開啟文件,可以開啟 Visual Studio Code 並直接從下列目錄開啟檔案: **%USERPROFILE%\\AppData\\Local\\Packages\\Microsoft.WindowsTerminal\_8wekyb3d8bbwe\\LocalState** 在此文件中,您可以找到 Windows 終端機的所有設定。 目前,您只能透過該文件與設定進行交互,但將來,將向應用程式加入 UI。 新增的個人資料 ------- 如果要新增新的設定文件,請前往 JSON 設定檔的「設定檔」部分,然後新增新的設定檔部分,如下所示: ``` { ``` ``` "acrylicOpacity" : 0.85, ``` ``` "background" : "#012456", ``` ``` "backgroundImage" : "C:/users/barto/AppData/Local/Packages/Microsoft.WindowsTerminal_8wekyb3d8bbwe/RoamingState/unicorn.gif", ``` ``` "backgroundImageOpacity" : 0.7, ``` ``` "backgroundImageStretchMode" : "uniformToFill", ``` ``` "closeOnExit" : false, ``` ``` "colorScheme" : "Solarized Dark", ``` ``` "commandline" : "powershell.exe", ``` ``` "cursorColor" : "#00FF00", ``` ``` "cursorHeight" : 25, ``` ``` "cursorShape" : "vintage", ``` ``` "fontFace" : "Fira Code", ``` ``` "fontSize" : 12, ``` ``` "guid" : "{79285a8e-036c-446f-8a9c-78994e34bf78}", ``` ``` "historySize" : 9001, ``` ``` "icon" : "ms-appdata:///roaming/pwsh-32.png", ``` ``` "name" : "PowerShell with Unicorn", ``` ``` "padding" : "0, 0, 0, 0", ``` ``` "snapOnInput" : true, ``` ``` "startingDirectory" : "%USERPROFILE%", ``` ``` "useAcrylic" : false ``` ``` } ``` 如果您想從此處複製此部分,請注意指南。 請記住每次貼上文件時都要更改它。 例如,它用於設定預設終端,並且它在檔案中必須是唯一的。 正如您在我的個人資料部分中看到的,您可以加入圖像作為背景、更改字體大小、遊標形狀等等。 例如,我使用 Fira Code 作為字體,因為我也喜歡 Visual Studio Code 中的它。 它在文本中加入了一些很棒的體驗。 您可以從這裡下載: <https://github.com/tonsky/FiraCode> 如果您想在會議上給您的朋友或與會者留下深刻印象,您可以加入 gif 作為背景。 您可以在下圖中看到它的實際效果。 ![](https://thepracticaldev.s3.amazonaws.com/i/uaackzt4yxp854i0l5rl.gif) 配色方案 ---- 在profiles.json 檔案的末尾,您可以找到一個名為「schemes」的部分。 從這裡您可以新增或更改終端的預設顏色。 如果您想在新設定檔中使用它,則必須在屬性「name」和設定檔部分的「colorScheme」屬性中插入相同的方案名稱。 分享您的個人資料 -------- 我在我的個人資料上建立了一個新要點來共享我的個人資料設置,您可以在這裡找到它: <https://gist.github.com/kasuken/076d68b92e2a67dfda591587c77a40c0#file-profiles-json> 。 在評論中分享您的個人資料! 我們一起可以創造一些很棒的東西! ![](https://thepracticaldev.s3.amazonaws.com/i/2k9fw1y21k3sv8q1swr3.gif) ### 我的動圖 有些使用者要求提供 gif 動圖。 我在下面分享它們! ![](https://thepracticaldev.s3.amazonaws.com/i/s8ysw6hfoj1a61ovz0us.gif) ![](https://thepracticaldev.s3.amazonaws.com/i/3u7x3b3otmyh6kytychp.gif) ![](https://thepracticaldev.s3.amazonaws.com/i/asvdrzeanv9a20jekihr.gif) --- 原文出處:https://dev.to/kasuken/how-to-customize-the-new-windows-terminal-with-visual-studio-code-56b1