🔍 搜尋結果:謝謝

🔍 搜尋結果:謝謝

我一直在編寫 TypeScript 但不理解它

我承認,我不太懂 TypeScript ------------------- 有一天,我在一些處理樂觀更新的程式碼中遇到了一個錯誤,所以我向我的同事[Filip](https://tenor.com/en-GB/view/the-office-funny-kevin-malone-phillip-i-hate-phillip-gif-16434707)尋求幫助。 TypeScript 精靈 Filip 提到`satisfies`關鍵字將是我正在尋找的解決方案的一部分。 *`Satisfies` ?那是什麼呀?為什麼我以前從未聽說過它?*我的意思是,我已經使用 TypeScript 一段時間了,所以我很驚訝我自己並不了解它。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6kny7wtjnc4168yn2o0.png) 不久之後,我偶然發現了 @yacineMTB 的這條推文,他是[X.com](http://X.com) (又名 Twitter)的多產者和工程師: > 就像,為什麼我不能只*執行***打字稿**檔案?如果我需要初始化整個目錄和專案,那麼腳本語言有什麼意義呢? > 我再次發現自己想知道為什麼我還不了解 TypeScript。*為什麼你不能真正執行 TypeScript 檔案?腳本語言和編譯語言有什麼不同?* [![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dy01hirmxhlwybk6mx9u.png)](https://opensaas.sh) 我突然意識到,我不太了解我幾乎每天使用的語言的一些基本知識,這些語言是我用來建立諸如[Open SaaS](https://opensaas.sh) (一個免費的開源 SaaS 入門工具)之類的東西的。 所以我決定退一步,對這些主題進行一些調查。在這篇文章中,我將與您分享我學到的一些最重要的事情。 TypeScript 是什麼類型的腳本? -------------------- 您可能已經聽說過 TypeScript 是 JavaScript 的「超集」。這意味著它是 JavaScript 之上的一個附加層,在本例中,它允許您向 JavaScript 加入靜態類型。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5595bx8k88hkih2pthh.png) 這有點像 TypeScript 是 JavaScript 的進階版。或者,換句話說,如果 JavaScript 是 Tesla Model 3 的基礎模型,那麼 TypeScript 就是 Model X Plaid。*嗚嗚嗚。* 但因為它是 JavaScript 的*超集*,所以它實際上並不像 JavaScript 本身那樣運作。例如,JavaScript 是一種腳本語言,這意味著程式碼在執行過程中會被逐行解釋。它被設計成可以在不同作業系統和硬體配置的網路瀏覽器中運作。這與 C 等低階語言不同,後者需要先編譯為特定係統的機器碼才能執行。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/iu22drd35u217gatsifn.png) 因此,JavaScript 不必先編譯,而是由 JavaScript 引擎解釋。另一方面,TypeScript 必須先轉換(或「轉編譯」)為 JavaScript,然後才能由瀏覽器中的 JavaScript 引擎(或作為獨立的 NodeJS 應用程式)執行。 所以這個過程看起來有點像這樣: ``` → Write TypeScript Code → “Transcompile” to JavaScript → Interpret JavaScript & Check for Errors → JavaScript Engine Compiles and Executes the Code ``` 很有趣,對吧? 現在我們已經掌握了一些理論知識,接下來讓我們繼續討論一些更實際的東西,例如 TypeScript 的出名之處:它就是*類型!* --- 順便一提… 我們[Wasp](https://wasp-lang.dev/)正在努力建立最好的開源 React/NodeJS 框架,讓您快速行動! 這就是為什麼我們提供了即用型全端應用程式模板,例如帶有 TypeScript 的 ToDo 應用程式。您所要做的就是安裝 Wasp: ``` curl -sSL https://get.wasp-lang.dev/installer.sh | sh ``` 並執行: ``` wasp new -t todo-ts ``` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jj26gymrxyybut4541lg.png) 您將獲得一個開箱即用的具有 Auth 和端到端 TypeSafety 功能的全端 ToDo 應用程式,以幫助您學習 TypeScript,或者只是開始快速安全地建置一些東西:) --- 玩耍`satisfies` ------------- 還記得我如何向我的同事尋求幫助,他的解決方案涉及`satisfies`關鍵字嗎?好吧,為了更好地理解它,我決定打開一個編輯器並嘗試一些基本範例,這是我發現的最有用的東西。 首先,我們以 person 物件為例,將其輸入為`Record` ,該 Record 可以採用一組`PossibleKeys`和一個`string`或`number`作為值。那想看看這個: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { } ``` 我們輸入`person`常數的方式稱為型別註解。它直接位於變數名稱之後。 讓我們開始為此`person`物件新增鍵和值: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person: Record<PossibleKeys, string | number> = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } ``` 看起來很簡單,對吧? 現在,讓我們來看看 TypeScript 如何推斷`person`屬性的類型: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8bd9m3bfy19qep0mvz98.png) 有趣的。當我們將滑鼠懸停在`email`上時,我們看到 TypeScript 告訴我們電子郵件是`string`或`number`的聯合類型,即使我們肯定只將其定義為`string` 。 如果我們嘗試在這種類型上使用一些`string`方法,這將會產生一些意想不到的後果。讓我們嘗試一下`split`方法,例如: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6u4nxa0em6mr0qqghuyp.png) 我們收到一個錯誤,表示此方法不適用於`number`類型。哪個是對的。但這很煩人,因為我們知道`email`是一個字串。 讓`satisfies`透過將類型向下移動到常數定義的末尾來解決這個問題: ``` type PossibleKeys = "id" | "name" | "email" | "age"; const person = { id: 12, name: "Vinny", email: "[email protected]", age: 37, } satisfies Record<PossibleKeys, string | number>; ``` 現在,當將滑鼠懸停在`email`屬性上時,我們將看到它被正確推斷為`string` : ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lxv578os1altgpkgmojo.png) 好的!現在,我們使用`split`將`email`轉換為字串陣列不會遇到任何問題。 這就是`satisfies`真正的閃光點。它讓我們驗證表達式的類型是否與特定類型匹配,同時為我們推斷最窄的可能類型。 多餘的財產檢查 ------- 但當我玩`satisfies`時,我注意到另一個奇怪的事情是,如果我直接在變數上使用它與在中間變數上使用它,它的行為會有所不同,如下所示: ``` // Directly on object literal const person = { } satisfies PersonType; // Using on intermediate variable const personIntermediate = person satisfies PersonType ``` 具體來說,如果我向`person`物件加入類型中不存在的另一個屬性(例如`isAdmin` ,則直接使用時我們會收到錯誤,但使用中間變數時不會收到錯誤: 1. 直接使用`satisfies` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dzqk2ph21jkcbdu4w6oz.png) 2. 使用`satisfies`和中間變數 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/haipxyc4ihxpmezydgto.png) 您可以看到,在範例 2 中,沒有錯誤且 person “滿足” `PersonType` ,但在範例 1 中卻沒有。 這是為什麼? 嗯,這實際上與 JavaScript 的基本工作原理有關,而與`satisfies`關鍵字關係不大。讓我們來看看。 上面範例中發生的過程就是所謂的「多餘屬性檢查」。 過多的屬性檢查實際上是該規則的例外。 TypeScript 使用所謂的「結構類型系統」。這只是一種奇特的方式來表示**如果一個值具有所有預期的屬性,那麼它將被使用。** 因此,使用上面的`personIntermediate`範例,TypeScript 不會抱怨`person`有一個額外的屬性`isAdmin` ,該屬性在`PersonType`中不存在。它具有所有其他必要的屬性,例如`id` 、 `name` 、 `email`和`age` ,因此 TypeScript 接受這種中間形式。 但是,當我們直接在變數上聲明類型時(如範例 1 中所示),我們會收到 TypeScript 錯誤:「'isAdmin' 在類型 'PersonType' 中不存在」。**這是工作中的多餘屬性檢查**,它可以幫助您避免犯下愚蠢的錯誤。 記住這一點是有好處的,因為這將幫助您避免意外的副作用。 例如,假設我們將 person 類型變更為具有可選的`isAdmin`屬性,如下所示: ``` type PersonType = { id: number, name: string, isAdmin?: boolean, // 👈 Optional } ``` 如果我們不小心用`isadmin`屬性而不是`isAdmin`定義了`person`並且沒有直接聲明類型,會發生什麼情況? 我們不會從 TypeScript 中得到任何錯誤,因為`person`實際上滿足所有必要的類型。 `isAdmin`類型是可選的,它不存在於`person`上,但這並不重要。您已經做了一個簡單的 type-o,現在嘗試存取`isAdmin`屬性,但它不起作用: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jxz8zzlxxog0xkdfpvbn.png) 哎呀!讓我們用類型註釋來修復它,我們立即聲明類型: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zer5v40ipp47juw2n50f.png) 好的。因為我們在第 58 行使用了直接類型註釋,所以我們獲得了 TypeScript 多餘屬性檢查的好處。 謝謝,打字稿! 🙏 --- 如果您發現此內容有用,並且想要查看更多類似內容,您可以[在 GitHub 上給 Wasp 一顆星,輕鬆幫助我們!](https://www.github.com/wasp-lang/wasp) 。 ![https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgbmn45pia04bxt6zf83.gif) {% cta <https://www.github.com/wasp-lang/wasp> %} ⭐️ GitHub 上的 Star Wasp 🙏 {% endcta %} --- 待續… --- 感謝您加入我的旅程的第 1 部分,以便更好地了解我們每天使用的工具。 這將是一個持續進行的系列,我將繼續以更具探索性、更少結構化的方式分享我所學到的東西。我希望您發現其中的某些部分有用或有趣。 讓我知道你接下來想看什麼!你喜歡這種風格嗎?你願意改變一些事情嗎?加入或刪除一些東西?或者你對最近學到的東西有什麼看法或類似的故事嗎? 如果是這樣,請在評論中告訴我們,我們下次見:) --- 原文出處:https://dev.to/wasp/ive-been-writing-typescript-without-understanding-it-5ef4

可以節省您時間的 6 個 CSS 速查表

我建立了 6 個 CSS 備忘單,它們非常有用。讓我們來看看他們。 CSS 彈性盒 ------- ![CSS Flexbox 備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/upemhcv181a68r24y9b1.jpg) CSS 網格 ------ ![CSS 網格備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xln52shzdvl60idrbx4j.png) CSS 位置 ------ ![CSS 位置備忘錄](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8wmqk99kbfi2zq4a88cu.png) CSS 顯示值 ------- ![CSS 顯示值備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wjhzpqq9dsx7whf1vp1z.png) CSS 選擇器 ------- ![CSS 選擇器備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/x1j3lpcgvm963pr2mgff.png) CSS :nth-child 選擇器 ------------------ ![CSS:nth-child 選擇器備忘單](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ewhjn0mkxo3822f9fz28.png) **[按此](https://github.com/WebdevShefali/CheatSheets)下載所有高品質的備忘單。** 這就是今天的全部內容。 我希望這有幫助。 謝謝閱讀。 欲了解更多此類內容,[請點擊此處](https://shefali.dev/blog)。 您也可以在[X(Twitter)](https://twitter.com/Shefali__J)上關注我,取得日常 Web 開發技巧。 繼續編碼! [![請我喝杯咖啡](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/devshefali) --- 原文出處:https://dev.to/devshefali/the-top-6-css-cheatsheets-that-will-save-you-hours-2lp1

JavaScript 安全性:保護前端安全的簡單實踐

我不了解你,但我的職業生涯始於在小型機構擔任前端開發人員,那裡沒有人關心安全性。當我轉而在更大的公司從事更大的專案時,我一直不關心安全性,因為沒有人更好地教我,**這給我帶來了麻煩**。 了解如何保護您的 JavaScript 程式碼可以改變這種狀況,並幫助我們保護我們的應用程式和使用者。 --- 本文將探討一些不會傷害 JavaScript 開發人員的安全實踐,只要它們有意義,就可以實施。 --- **上面的一些主題是我在研究該主題時學到的,但是還有更多方法可以使您的程式碼安全。我只是分享一些簡單的方法來幫助您入門。** \*PS 是的,我向人工智慧提出了問題,並要求它幫助我舉例。 PS2 是的,IA 建立了封面圖片,因為我知道自己的弱點 LOL\* --- 1. 保持你的依賴項是最新的 -------------- 過時的庫可能會使您的應用程式面臨安全漏洞。保持所有內容都是最新的可以幫助您避免已經修復的已知問題。 - 使用套件管理器: **npm(節點套件管理器)**是一個很棒的工具,可以幫助您管理和更新庫。 - 定期檢查:執行 npm outdated 以查看哪些軟體包已過時。 - 定期更新:使用 npm update 將軟體套件升級到最新版本。 ``` - Automate Security Updates: Tools like npm audit identify and suggest fixes for security vulnerabilities. ``` --- {% cta https://github.com/webcrumbs-community/webcrumbs %} ⭐ 您可以考慮在 GitHub 上給我們一個 Star 嗎? {% 結束%} --- 2.使用簡單的安全標頭 ----------- 安全標頭告訴瀏覽器在處理網站內容時的行為方式,這有助於防止某些類型的攻擊,例如跨網站腳本和資料注入。 我們可以使用**內容安全策略 (CSP)** ,這是一種安全標頭,有助於阻止未經授權的腳本在您的網站上執行,從而防止許多攻擊。 從簡單開始:新增一個基本的 CSP 標頭,僅允許來自您網站的腳本。 ``` <!-- Add to the <head> section of your HTML --> <meta http-equiv="Content-Security-Policy" content="script-src 'self';"> ``` 此行意味著只能執行屬於您網站的腳本,而不能執行其他地方的腳本。 --- 3. 清理使用者輸入 ---------- 如果處理不當,用戶輸入可能會很危險。惡意使用者可能會嘗試輸入可能損害其他使用者或您的網站的資料。 **我們應該始終將輸入視為不可信的**,清理來自用戶的資料以確保其安全,然後再在應用程式中使用它。 當使用使用者輸入更新網頁時,請使用textContent 而不是innerHTML 以避免執行有害腳本。 ``` const userInput = document.querySelector('#user-input').value; document.getElementById('output').textContent = userInput; // Safely add user content to your page ``` --- 現在我們更安全了朋友們… ------------ 這三個步驟是保護 JavaScript 應用程式的一個很好的起點。 我希望您今天能花點時間回顧一下您的 JavaScript 專案。檢查是否有過時的庫,確保您使用安全標頭,並驗證所有使用者輸入是否已清理。 小步驟可以對您的 Web 應用程式的安全性產生很大影響。 說到前端... ------- 我們正在建立這個超酷的專案,它將改變您進行 Web 開發的方式😯 {% cta https://github.com/webcrumbs-community/webcrumbs %} ⭐ 您可以考慮在 GitHub 上給我們一個 Star 嗎? {% 結束%} **謝謝閱讀,** 帕奇💚 --- 原文出處:https://dev.to/buildwebcrumbs/javascript-security-simple-practices-to-secure-your-frontend-18ii

2024 年程式設計師和開發人員應該學習的 5 項技能

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 開發者們大家好,如果您一直從事程式設計和軟體開發,那麼您就會知道,在我們的領域中只有一個常數,那就是「變化」。 我們總是需要學習新的工具、技術、框架和技能來完成我們的工作,而且永無止境。如果你不學習,你就會和其他人一起落後,這就是為什麼我總是尋找新技能來學習。 在本文中,我將分享程式設計師和開發人員在 2024 年可以學習的 5 項技能,以更好地完成工作並提高效率。 過去,我討論過[API 網關與負載平衡器、](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)[水平與垂直擴展](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的區別,你們非常喜歡,在本文中我將分享最重要的五種開發人員技能2024 年成為舞台中心。 ***PS 繼續閱讀直到最後。我有一份獎金給你。*** 這些技能包括新舊但必不可少的技能,例如快速工程、編碼、雲端運算領域、系統設計和Python,這些技能是任何軟體開發人員都需要的基本技能。 無論您是想要提升自己的經驗豐富的開發人員,還是想要提升自己形象的中級開發人員,這些技能都一定會對您有所幫助。 2024 年軟體工程師應該學習的 5 項技能 ---------------------- 在不斷發展的技術領域,對於尋求在 2024 年及以後蓬勃發展的開發人員來說,保持領先地位至關重要。 當我們探索軟體開發的動態領域時,某些技能已經成為現代開發人員不可或缺的技能,這就是您將在本文中學到的內容。 讓我們深入探討預計在 2024 年產生重大影響的前五項開發人員技能。 ### 1. 系統設計 到 2024 年,開發人員需要超越傳統的程式設計實踐,擁抱現代系統設計原則。這涉及了解分散式系統、微服務架構以及設計可擴展和彈性的應用程式。 能夠應對系統設計複雜性的開發人員能夠更好地建立強大的解決方案,以滿足快速發展的技術環境的需求。 如果您想深入學習系統設計,那麼您也可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd9nfio7kl57gyevndql.jpg)](https://bit.ly/3pMiO8g) 如果您需要更多資源,那麼這裡有[系統設計書籍](https://www.linkedin.com/pulse/8-best-system-design-books-programmers-developers-soma-sharma/)、 [課程](https://www.linkedin.com/pulse/10-best-system-design-courses-beginners-experienced-2023-soma-sharma/)和[網站](https://javarevisited.blogspot.com/2022/08/top-7-websites-to-learn-system-design.html)的列表,供您在 2024 年學習和掌握軟體設計和架構。 --- 2. 快速工程 ------- 在這個人工智慧工具的時代,軟體開發並非一成不變,越來越多的人工智慧工具來幫助您進行編碼、除錯和測試,但您需要及時的工程設計才能有效地利用這些工具。 換句話說,快速工程已成為旨在快速交付高品質產品的開發人員的關鍵技能。 這不僅涉及編寫高效、簡潔的程式碼,還涉及採用敏捷方法和工具來簡化整個開發過程。 精通即時工程的開發人員可以快速回應不斷變化的需求,確保他們的軟體在面對不斷變化的市場需求時保持適應性和彈性。 如果您需要資源來學習 ChatGPT 和提示工程,那麼我建議您查看 Coursera 上的[針對開發人員的 ChatGPT 提示工程](https://datacamp.pxf.io/c/1193463/1012793/13294?u=https%3A%2F%2Fwww.datacamp.com%2Fcourses%2Fchatgpt-prompt-engineering-for-developers)課程。 [![最佳即時工程課程](https://miro.medium.com/v2/resize:fit:609/1*gpcsXMiCmBgVIr_I7RFYGg.jpeg)](https://medium.com/javarevisited/top-5-chatgpt-online-courses-for-2023-e6fc706cc483) 如果您需要更多選項,那麼您也可以查看這些[ChatGPT 和 Prompt Engineering 課程](https://javinpaul.medium.com/top-10-udemy-courses-to-learn-artificial-intelligence-in-2023-85a10ef473ca)以了解更多資訊。 --- 3. 編碼 ----- 雖然編碼似乎是一項顯而易見的技能,但其重要性怎麼強調也不為過。掌握編碼不僅限於編寫功能性程式;它涉及編寫乾淨、可維護和可擴展的程式碼。 開發人員應該專注於提高程式語言的熟練程度、理解演算法和實施最佳實踐。 堅實的編碼基礎是任何開發工作成功的基石。而且,如果您需要資源,可以查看[《2024 年完整 JavaScript 課程:建立真實專案》](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F)作為開始。 [![學習 JavaScript 編碼的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aesrzc6ogw58ktw6nxax.png)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fthe-complete-javascript-course%2F) 如果您需要更多選擇,您也可以查看這些[**程式設計和程式設計課程**](https://medium.com/javarevisited/7-best-coding-course-to-learn-programming-with-zero-experience-in-2020-52f7d0d9cb80) --- 4.雲端運算 ------ 雲端運算已經從一個流行詞變成了開發人員的基本技能。隨著對雲端服務的依賴日益增加,開發人員必須精通在雲端環境中部署、管理和最佳化應用程式。 AWS、Azure 和 Google Cloud 等平台是現代開發不可或缺的一部分,精通雲端運算的開發人員可以建立可擴展且經濟高效的解決方案。 而且,如果您需要資源,可以查看這些文章,您可以在其中找到強烈建議的[**資源來學習雲端運算**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) [![學習AWS的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d4mboj5cv4fufo8om7v0.jpeg)](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Flearn%2Faws-fundamentals) 而且,如果您需要更多選擇,還可以參考這篇文章,您可以在 Coursera 上找到強烈推薦的[AWS 基礎專業課程](https://medium.com/javarevisited/top-10-courses-to-learn-amazon-web-services-aws-cloud-in-2020-best-and-free-317f10d7c21d)。該程式是AWS自己建立的。 --- ### 5.Python [Python](https://www.python.org/)繼續維護其作為多功能且強大的程式語言的主導地位。從 Web 開發到資料科學、機器學習和人工智慧,Python 始終處於創新的前沿。 2024 年的開發人員應該投資掌握 Python,因為它不僅有助於快速開發,而且還提供了通往塑造產業未來的眾多尖端技術的入口網站。 如果你想在 2024 年學習並掌握 Python,你可以從 Python 課程[100 Days of Code: The Complete Python Pro Bootcamp for 2024 開始](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F),我現在也用它來學習 Python。 [![學習Python的最佳課程](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p5wlgc9kzsa03o0agoz3.png)](https://click.linksynergy.com/deeplink?id=JVFxdTr9V80&mid=39197&murl=https%3A%2F%2Fwww.udemy.com%2Fcourse%2F100-days-of-code%2F) 如果您需要更多資源,您也可以查看這些[Python 書籍](https://javarevisited.blogspot.com/2019/07/top-5-books-to-learn-python-in-2019.html)、 [課程](https://betterprogramming.pub/top-5-courses-to-learn-python-in-2018-best-of-lot-26644a99e7ec)和[網站](https://medium.com/javarevisited/10-free-python-tutorials-and-courses-from-google-microsoft-and-coursera-for-beginners-96b9ad20b4e6)來深入學習 Python。 這就是**您在 2024 年可以學習的 5 項最重要的開發人員技能**。總之,2024 年頂尖開發人員技能反映了業界對敏捷性、適應性和卓越技術的需求。 無論您是經驗豐富的開發人員還是剛開始編碼之旅,磨練這些技能無疑將使您成為不斷發展的軟體開發世界中的寶貴資產。 迎接挑戰,保持好奇心,踏上持續學習之旅,在 2024 年及以後的動態格局中蓬勃發展。 ### 獎金 正如所承諾的,這是給您的獎勵,一本免費的書,您可以閱讀它來學習分散式系統設計,您可以下載免費的 PDF 或在 Microsoft 上在線閱讀 --- [https://info. microsoft.com/rs/ 157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![學習分散式系統設計的免費書籍](https://miro.medium.com/v2/resize:fit:276/0*AwK4rZgpbC15wA_b.png) 請在評論中告訴我您 2024 年將學習哪些技能?我總是渴望學習可以提升我作為軟體開發人員的形象的技能。 謝謝 --- 原文出處:https://dev.to/somadevtoo/5-skills-programmers-and-developers-should-learn-in-2024-3bmp

JavaScript 中的三個點 (...)

> 嘿!我是薩加爾。我喜歡編寫教學和文章來幫助開發人員更好地理解 JavaScript 的魔力。如果您對本文有任何疑問,請發表評論,我會回覆您,或在 Twitter [@sagar\_codes](https://twitter.com/sagar_codes)上找到我。 在這篇文章中,我們將討論 ES6 中引入的一個特性,即展開運算子和剩餘運算子。 🔥 🔥 🔥 我已經成為這三個點的忠實粉絲,它們可能會改變您在 JavaScript 中解決問題的風格。我們可以以兩種不同的方式使用三個點作為擴充運算子和剩餘運算子。 休息參數😴 ----- 使用剩餘參數,我們可以將任意數量的參數收集到一個陣列中,並用它們執行我們想要的操作。引入剩餘參數是為了減少由參數引起的樣板程式碼。 🙌 ``` function myFunc(a, b, ...args) { console.log(a); // 22 console.log(b); // 98 console.log(args); // [43, 3, 26] }; myFunc(22, 98, 43, 3, 26); ``` 在 myFunc 的最後一個參數中,前綴為 …,這將導致所有剩餘參數都放置在 javascript 陣列中。 其餘參數收集所有剩餘參數,因此在最後一個參數之前加入其餘參數是沒有意義的。剩餘參數必須是最後一個形參。 ``` function myFunc(arg1, ...rest, arg2) { // arg2 ? } ``` 其餘參數可以解構(僅限陣列),這意味著它們的資料可以解壓縮為不同的變數。 ``` function myFunc(...[x, y, z]) { return x * y* z; } myFunc(1) // NaN myFunc(1, 2, 3) // 6 myFunc(1, 2, 3, 4) // 6 (fourth parameter is not destructured) ``` 傳播運算符✨ ------ 擴展運算子用於將可迭代物件(如陣列)的元素擴展到可以容納多個元素的位置。 ``` function myFunc(x, y, ...params) { // used rest operator here console.log(x); console.log(y); console.log(params); } var inputs = ["a", "b", "c", "d", "e", "f"]; myFunc(...inputs); // used spread operator here // "a" // "b" // ["c", "d", "e", "f"] ``` 組合陣列的方法一直有很多種,但展開運算子提供了一種組合陣列的新方法: ``` const featured = ['Deep Dish', 'Pepperoni', 'Hawaiian']; const specialty = ['Meatzza', 'Spicy Mama', 'Margherita']; const pizzas = [...featured, 'veg pizza', ...specialty]; console.log(pizzas); // 'Deep Dish', 'Pepperoni', 'Hawaiian', 'veg pizza', 'Meatzza', 'Spicy Mama', 'Margherita' ``` 透過擴充運算符,現在可以使用比 Object.assign() 更短的語法來淺複製(不包括原型)或合併物件。 ``` var obj1 = { foo: 'bar', x: 42 }; var obj2 = { foo: 'baz', y: 13 }; var clonedObj = { ...obj1 }; // Object { foo: "bar", x: 42 } var mergedObj = { ...obj1, ...obj2 }; // Object { foo: "baz", x: 42, y: 13 } ``` 👉 結論 ---- 當我們在程式碼中看到三個點(…)時,它要么是剩餘參數,要么是擴展運算子。 有一個簡單的方法可以區分它們: 1. 當三個點 (…) 位於函數參數末尾時,它是“剩餘參數”,並將參數列表的其餘部分收集到一個陣列中。 2. 當三個點 (…) 出現在函數呼叫或類似情況中時,它被稱為“擴展運算符”,並將陣列擴展為列表。 謝謝閱讀。希望您喜歡這篇文章,歡迎按讚、留言或與您的朋友分享這篇文章。 😄 快樂編碼… --- 原文出處:https://dev.to/sagar/three-dots---in-javascript-26ci

2024 年 50 大系統設計面試問題

*揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* [![面試時必須了解的 10 個系統設計概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kfxdldzd09fwws7nve36.png)](https://bit.ly/3cNF0vw) image\_credit -[指數](https://bit.ly/3cNF0vw) 朋友們大家好,如果您正在準備技術面試,那麼您必須準備系統設計問題,因為這是大多數人都遇到困難的地方。 即使經驗豐富的程式設計師也很難解決常見問題,例如如何設計 WhatsApp 或 YouTube,或回答[API 閘道與負載平衡器](https://dev.to/somadevtoo/difference-between-api-gateway-and-load-balancer-in-system-design-54dd)、[水平與垂直擴充](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09)、 [正向代理與反向代理](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5)之間的差異。 在當今日益分散的世界中,建立強大且可擴展的系統的能力是頂級科技公司所追求的基本技能。 系統設計面試已成為評估候選人解決現實挑戰、評估權衡以及設計能夠處理複雜需求的系統的能力的關鍵組成部分。 之前也分享過[資料庫分片](https://medium.com/javarevisited/what-is-database-sharding-scaling-your-data-horizontally-1dc12b33193f)、[系統設計主題](https://dev.to/somadevtoo/10-must-know-system-design-concepts-for-interviews-2fii)、 [微服務架構](https://medium.com/javarevisited/10-microservices-design-principles-every-developer-should-know-44f2f69e960f)、 [系統設計演算法](https://dev.to/somadevtoo/10-distributed-data-structures-and-system-design-algorithms-for-interviews-a4j),今天就分享一下系統設計面試題。 在本文中,我精心設計了*50 多個系統設計面試問題,*以指導應徵者從基本概念到複雜的設計場景。 無論您是旨在掌握要點的初學者,還是尋求提高技能的經驗豐富的工程師,這些問題不僅可以幫助您為面試做好準備,還可以提高您對系統設計和軟體架構的了解。 順便說一句,如果您正在準備系統設計面試並想深入學習系統設計,那麼您還可以查看[**ByteByteGo**](https://bit.ly/3P3eqMN) 、 [**Design Guru**](https://bit.ly/3pMiO8g) 、 [**Exponent**](https://bit.ly/3cNF0vw) 、 [**Educative**](https://bit.ly/3Mnh6UR)和[**Udemy**](https://bit.ly/3vFNPid)等網站,它們有許多很棒的系統設計課程 [![如何回答系統設計問題](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xd9nfio7kl57gyevndql.jpg)](https://bit.ly/3pMiO8g) PS 繼續閱讀直到最後。我有一份免費獎金給你。 --- 2024 年 50 道系統設計面試題 ------------------ 這裡列出了針對初學者和經驗豐富的開發人員的 50 個流行的系統設計面試問題,您可以解決這些問題來開始準備。 在此列表中,我不僅分享了簡單、中等和困難的系統設計問題,還分享了基於概念的問題,例如 API 閘道與負載平衡器或微服務與整體式設計。您可以練習這些系統設計問題和麵試問題。 ### 基於系統設計概念的問題 1\. API網關和負載平衡器有什麼差別? \[ [解決方案](https://javarevisited.substack.com/p/difference-between-api-gateway-and?utm_source=profile&utm_medium=reader2)\] 2\. 反向代理和正向代理有什麼不同? [(回答)](https://dev.to/somadevtoo/difference-between-forward-proxy-and-reverse-proxy-in-system-design-54g5) 3\. 水平縮放和垂直縮放有什麼不同? [(回答)](https://dev.to/somadevtoo/horizontal-scaling-vs-vertical-scaling-in-system-design-3n09) 4\. 微服務和單體架構有什麼差別? [(回答)](https://dev.to/somadevtoo/difference-between-microservices-vs-monolithic-applications-for-system-design-interview-2lb5) 5\. 垂直分區和水平分區有什麼差別? 6.什麼是速率限制器?它是如何運作的? [(回答)](https://javarevisited.substack.com/p/what-is-rate-limiter-how-does-it?utm_source=profile&utm_medium=reader2) 7\. 單一登入 (SSO) 的工作原理是什麼? [(回答)](https://javarevisited.substack.com/p/how-does-sso-single-sign-on-authentication?utm_source=profile&utm_medium=reader2) 8\. Apache Kafka 是如何運作的?為什麼這麼快? [(回答)](https://javarevisited.substack.com/p/how-does-apache-kafka-works?utm_source=profile&utm_medium=reader2) 9\. Kafka、ActiveMQ 和 RabbitMQ 之間的差異? [(回答)](https://javarevisited.substack.com/p/difference-between-kafka-rabbitmq?utm_source=profile&utm_medium=reader2) 10\. JWT、OAuth 和 SAML 之間的差異? [(回答)](https://javarevisited.substack.com/p/difference-between-jwt-oauth-and?utm_source=profile&utm_medium=reader2) 這是來自 DesignGuru.io 的一個很好的圖表,它解釋了垂直和水平資料庫分區之間的區別 [![水平分區和垂直分區的區別](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kosgqvr5d2prlpo61tv7.png)](https://bit.ly/3pMiO8g) --- ### 𝐄𝐚𝐬𝐲 系統設計問題 現在,讓我們開始討論簡單的系統設計問題。這些是常見問題,您需要設計隨處使用的小型實用程序,例如 URL 縮短器: 1\. 如何設計像TinyURL這樣的URL縮短器 \[[解決方案](https://bit.ly/3dZoQ2G)\] 2\. 如何設計像Pastebin這樣的文字儲存服務? \[[解決方案](https://www.youtube.com/watch?v=9wAj-5IMdyU)\] 3\. 設計內容傳遞網路(CDN)? \[[解決方案](https://bit.ly/3dZoQ2G)\] 4\. 設計停車庫【[解決方案](https://bit.ly/3eMUosX)】 5.設計自動販賣機【[解決方案](https://javarevisited.blogspot.com/2016/06/design-vending-machine-in-java.html)】 6\. 如何設計分散式鍵值存儲 7.設計分散式緩存 8.設計分散式作業調度器 9\. 如何設計認證系統 10\. 如何設計統一支付介面(UPI) 並且,以下是來自 Educative.io 的 YouTube 高級設計供您參考: [ ![YouTube 的高層設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/03a26o4bntorhtpngs4v.jpg)](https://bit.ly/3Mnh6UR) --- ### 𝐌𝐞𝐝𝐢𝐮𝐦 系統設計問題 現在,是時候看看中等難度的系統設計問題了。這些問題既不簡單也不太困難,但您需要對各種軟體架構元件和系統設計概念有深入的了解才能回答這些問題。 11.設計Instagram【[解決方案](https://bit.ly/3BqamCL)】 12\. 如何設計 Tinder 13.設計WhatsApp([解決方案](https://bit.ly/3SbA9Eu)) 14\. 如何設計 Facebook 15.設計推特 16.設計Reddit 17.設計Netflix【[解決方案](https://bit.ly/3bbNnAN)】 18.設計Youtube【[解決方案](https://bit.ly/3bbNnAN)】 19\. 設計谷歌搜尋 20.設計像亞馬遜這樣的電子商務商店 21.設計Spotify 22.設計TikTok 23\. 設計 Shopify 24\. 設計愛彼迎 25\. 為搜尋引擎設計自動完成功能 26.設計速率限制器 27.像Kafka一樣設計分散式訊息佇列 28.設計航班預訂系統 29.設計線上程式碼編輯器 30.設計證券交易所繫統 31.設計一個分析平台(指標和日誌記錄) 32.設計通知服務 33.設計支付系統 而且,這是來自 DesignGuru 的 Netflix 高級系統設計,這是我最喜歡的學習系統設計的地方之一 [![Netflix 系統設計架構](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7aj73gezzybzgi8dewp.jpg)](https://bit.ly/3pMiO8g) --- ### 𝐇𝐚𝐫𝐝 系統設計問題 現在,讓我們來看看一些需要你付出更多努力的難題。解決這些問題你可能會感到不舒服,但透過這樣做你會變得更好。 34\. 如何設計像 Yelp 這樣的基於位置的服務 35\. 設計優步 36.設計像 Doordash 這樣的送餐應用程式 37.設計Google文件 38\. 如何設計Google地圖 39\. 設計縮放 40\. 如何設計像 Dropbox 這樣的檔案共用系統 41\. 如何設計像BookMyShow這樣的訂票系統 42.設計分散式網路爬蟲 43.如何設計程式碼部署系統 44.設計像S3這樣的分散式雲端存儲 45\. 如何設計分散式鎖定服務 這是 Educative.io 的 Google 地圖的高級設計 [![Google 地圖的高層設計](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vn97eqxqthqx6714gadl.png)](https://bit.ly/3Mnh6UR) 而且,如果您需要解決方案,則可以在 @ Ashish Pratap Singh 的 GitHub 儲存庫中找到它們:https://github.com/ashishps1/awesome-system-design-resources/blob/main/README.md#system-design-interview-problems 而且,現在可以看到更多有關係統設計面試準備的資源 --- ### 系統設計訪談資源: 而且,這裡列出了最佳系統設計書籍、線上課程和練習網站,您可以查看這些內容,以便更好地為系統設計面試做好準備。這些課程中的大多數也回答了我在這裡分享的問題。 1. [**DesignGuru 的 Grokking 系統設計課程**](https://bit.ly/3pMiO8g):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 2. [**《系統設計面試》作者:Alex Xu**](https://amzn.to/3nU2Mbp) :這本書深入探討了系統設計概念、策略和麵試準備技巧。 3. Martin Kleppmann 的[**「設計資料密集型應用程式」**](https://amzn.to/3nXKaas) :綜合指南,涵蓋了設計可擴展且可靠的系統的原則和實踐。 4. [LeetCode 系統設計 標籤](https://leetcode.com/explore/learn/card/system-design):LeetCode 是一個受歡迎的技術面試準備平台。 LeetCode 上的系統設計標籤包含各種練習問題。 5. GitHub 上的[**「系統設計入門」**](https://bit.ly/3bSaBfC) :精選的資源列表,包括文章、書籍和影片,可幫助您準備系統設計面試。 6. [**Educative 的系統設計課程**](https://bit.ly/3Mnh6UR):一個互動式學習平台,提供實作練習和真實場景,以增強您的系統設計技能。 7. **高可擴展性部落格**:該部落格包含有關高流量網站和可擴展系統架構的文章和案例研究。 8. **[YouTube 頻道](https://medium.com/javarevisited/top-8-youtube-channels-for-system-design-interview-preparation-970d103ea18d)**:請參閱「Gaurav Sen」和「Tech Dummies」等頻道,以取得有關係統設計概念和麵試準備的富有洞察力的影片。 9. [**ByteByteGo**](https://bit.ly/3P3eqMN) :Alex Xu 的一本現場書籍和課程,用於系統設計面試準備。它包含《系統設計訪談》第一捲和第二卷的所有內容,並將隨即將推出的第三卷進行更新。 10. [**Exponent**](https://bit.ly/3cNF0vw) :一個專為面試準備的網站,特別是針對亞馬遜和谷歌等 FAANG 公司,他們還有很棒的系統設計課程和許多其他材料,可以幫助您破解 FAAN 面試。 [![如何為系統設計做準備](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kqv3p46jmw5qc0newuiu.jpg)](https://bit.ly/3P3eqMN) image\_credit - [ByteByteGo](https://bit.ly/3P3eqMN) 請記住透過參與實際專案和參加模擬面試將理論知識與實際應用結合。不斷的練習和學習無疑會提高你在系統設計面試中的熟練程度。 這就是2024 年50 個系統設計面試問題。有線上課程以及我分享過的書籍。 無論您是準備技術面試的候選人,還是希望提高技能的經驗豐富的專業人士,掌握系統設計都是在不斷發展的科技行業中推進職業生涯的關鍵一步,這些問題將對您有所幫助。 。 ### 獎金 正如承諾的,這是給你的獎金,一本免費的書。我剛剛找到一本新的免費書籍來學習分散式系統設計,您也可以在 Microsoft 上閱讀它 --- [https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT -eBook-設計分散式系統.pdf](https://info.microsoft.com/rs/157-GQE-382/images/EN-CNTNT-eBook-DesigningDistributedSystems.pdf) ![](https://miro.medium.com/v2/resize:fit:365/0*99i4bdkoEjeeJio8.png) 謝謝 --- 原文出處:https://dev.to/somadevtoo/top-50-system-design-interview-questions-for-2024-5dbk

🥇第一個讓你視覺化你的 React/NodeJS 應用程式的框架🤯

視覺化獎品 ===== 想像一下,您正在開發全端應用程式,並且想要實作一項新功能。這是一個複雜的過程,因此您拿出筆和紙,或轉到[tldraw](https://www.tldraw.com/) ,並開始繪製應用程式目前的樣子的圖表,從資料庫到伺服器,再到客戶端。 但是,如果您有一個**工具可以為您可視化整個全端應用程式,**那該有多酷?如果該工具有潛力做更偉大的事情,例如立即為您在整個堆疊中加入有用的功能,或者與人工智慧和大型語言模型配合用於程式碼生成,會怎麼樣? 嗯,這個想法已經成為現實,它被稱為`wasp studio` 。在這裡查看: {% 嵌入 https://youtu.be/SIAhAvDEoMw %} 黃蜂工作室是這個名字 ========== 首先, [Wasp 是一個具有超能力的全端 React、NodeJS 和 Prisma 框架](https://github.com/wasp-lang/wasp)。它[在 GitHub 上的星數剛剛突破 10,000 個](https://github.com/wasp-lang/wasp),並已被用來建立超過 50,000 個專案。 為什麼它很特別?它使用設定檔和自己的編譯器來為您管理一系列功能,例如身份驗證、cron 作業、路由和電子郵件發送,為您節省大量時間並讓您專注於有趣的事情。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ugko7ycnjkfwwuool3vj.png) [Wasp 的中央設定檔](https://wasp-lang.dev/docs)(充當應用程式的一組指令)和編譯器的組合還允許 Wasp 透過單行命令為您執行一系列複雜且有趣的任務,例如: - 全端部署 → `wasp deploy` - 使用 Docker 啟動開發資料庫 → `wasp start db` - 建立整個範例應用程式,例如 SaaS 入門 → `wasp new` - 為您提供整個全端應用程式的視覺示意圖 → `wasp studio` 如果你想親自嘗試一下,你所要做的就是: 1. 使用`curl -sSL https://get.wasp-lang.dev/installer.sh | sh`[安裝Wasp](https://wasp-lang.dev/docs/quick-start) https://get.wasp-lang.dev/installer.sh | `curl -sSL https://get.wasp-lang.dev/installer.sh | sh` 2. 使用`wasp new -t todo-ts`在 TypeScript 中建立一個新的待辦事項應用程式 3. 然後要獲得下面螢幕截圖中的視覺化工具,請執行`wasp studio` ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l34peqp9t60ftu3d1g32.png) 讓我們快速分解一下我們在這裡看到的內容: - 中間藍色的主應用程式元件顯示了應用程式的名稱、我們正在使用的資料庫及其身份驗證方法 - 左邊的黃色實體向我們展示了我們定義的資料庫模型 - 最左邊的紅色和綠色的操作和查詢向我們展示了作用於資料庫實體的伺服器操作 - 右側的路由和頁面向我們展示了 React 元件所在的位置以及它們是否需要授權(以 🔒 表示) 如果您想知道更複雜的應用程式會是什麼樣子,以下是在[Open SaaS(我們的免費開源 SaaS 樣板啟動器)](https://OpenSaaS.sh)上執行時的樣子。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/scdj3khkybrk30579hij.png) 這樣做的好處是,我們可以概覽所有資料庫實體以及它們所依賴的伺服器功能(也稱為「操作」)。在上圖的左上角,您甚至會看到一個 cron 作業`dailyStatsJob` ,它每小時執行一次 ( `0 * * * *` )。 例如,這使得開發後端邏輯變得輕而易舉,特別是如果您不是經驗豐富的後端開發人員。考慮一下讓您到達那裡的程式碼就像這樣簡單: ``` job dailyStatsJob { executor: PgBoss, perform: { fn: import { calculateDailyStats } from "@src/calculateDailyStats" }, schedule: { cron: "0 * * * *" }, entities: [User, DailyStats, Logs, PageViewSource] } ``` 是的,這就是您在伺服器上取得非同步作業所需的全部內容。現在你的`calculateDailyStats`函數將每小時執行一次——不需要第三方服務🙂 這是派對把戲嗎! ======== 好的。您可能會想,視覺化工具很酷,但它真的有用途嗎,還是只是一個不錯的「派對把戲」?老實說,*目前*這只是派對上的把戲。 但這是一個具有**很大潛力的**派對技巧。讓我解釋。 ![https://media2.giphy.com/media/WsNIwVzVEZKnhkEBc1/giphy.gif?cid=7941fdc6akodg2p40uvpuw0ocqn3b0ek94bpdjudqn428rc3&ep=v1_gifs_search&ct=gifm&rid;](https://media2.giphy.com/media/WsNIwVzVEZKnhkEBc1/giphy.gif?cid=7941fdc6akodg2p40uvpuw0ocqn3b0ek94bpdjudqn428rc3&ep=v1_gifs_search&rid=giphy.gif&ct=g) 當然,您可以以當前形式使用它來更好地了解您的應用程式,或者計劃一些新功能,但將來您將能夠使用它做更多事情,例如: - 只需點擊幾下即可新增新的身份驗證方法 - 透過伺服器操作快速搭建功能性客戶端元件 - 立即為您的整個應用程式新增新的全端功能,例如 Stripe 支付 - 與大型語言模型 (LLM) 輕鬆協作,即時產生功能! 同樣,這一切都是可能的,因為中央設定檔充當了應用程式的一組「指令」。透過這個文件,Wasp 確實知道您的應用程式是如何建置的,因此它可以輕鬆地以視覺形式向您顯示您的應用程式。它還使您可以更輕鬆地以令人興奮的新方式建立應用程式的新部分。 看看下面 Wasp 設定檔中的另一個片段。這就是為您的網頁應用程式獲得全端身份驗證所需的一切!這是因為 Wasp 編譯器正在為您管理樣板程式碼。 ``` app todoVisualize { title: "todo-visualize", auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, } } entity User {=psl id Int @id @default(autoincrement()) tasks Task[] psl=} ``` 一張圖值一千枚代幣 ========= 現在我們已經了解了 Wasp 的工作原理,接下來讓我們更深入地探討 Wasp 和`wasp studio`與 LLM 結合作為未來用例的潛力。 目前,人工智慧輔助程式碼產生的最大限制之一是上下文。現在,我們都知道LLM喜歡產生幻覺,[但他們的「記憶力」也很差](https://glazkov.com/2023/05/18/ai-developer-experience-asymptotes/)。因此,如果您試圖讓他們為您的應用程式建立功能,以確保新功能適用於您的應用程式,您必須不斷「提醒」他們應用程式的工作方式、結構和依賴項。 但是,透過 Wasp 的設定檔(本質上只是全端應用程式及其功能的更高層次抽象),我們為法學碩士提供了成功為手頭上的應用程式建立新功能所需的上下文。 ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xtk0u2g8cxtymf713om5.png) 這非常有效,因為我們不僅為 LLM 提供了所需的上下文,而且 Wasp 的編譯器還承擔了為我們編寫大部分樣板文件的責任(謝謝,朋友),為 LLM 提供了更簡單的任務的寫作,例如: - 修改Wasp設定檔 - 在伺服器上執行的函數 - 使用 Wasp 程式碼的 React 元件 從這個意義上說,法學碩士必須掌握的上下文要少得多,並且其糟糕的記憶力是可以原諒的,因為黃蜂是確保一切都很好地粘在一起的人! 為了進一步說明這一點,讓我們再看看上面介紹的授權碼: ``` auth: { userEntity: User, methods: { usernameAndPassword: {}, google: {}, }, ``` 請考慮此程式碼在整個堆疊中提供身份驗證。因此,您不僅可以在伺服器上獲得為您產生和管理的所有身份驗證邏輯,還[可以在客戶端上獲得可供您使用的 UI 元件和身份驗證掛鉤](https://wasp-lang.dev/docs/auth/ui)! ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8agd8cch9vtnx9a85xyr.gif) 另一方面,如果沒有 Wasp 給我們的抽象,我們最終只能依靠 LLM,它的記憶力很差,容易產生幻覺,一遍又一遍地為我們編寫一堆樣板文件,如下圖所示的 JWT 中間件: ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1uywfi0ww42r0rntez05.png) 法學碩士非常擅長單獨編寫樣板程式碼、重複性任務。但期望他們將其作為有凝聚力的全端應用程式的一部分來完成,這意味著我們有更多的表面積來暴露可能的錯誤。 另一方面,對於 Wasp,**只需幾行程式碼**。如果人類寫起來很容易,那麼法學碩士也很容易寫。 順便說一句,這不僅為我們省去了很多麻煩,還可以為我們節省很多錢,因為[AI 生成的 Wasp 應用程式使用的令牌(即輸入和輸出文字)比同類工具少約 10-40 倍](https://wasp-lang.dev/blog/2023/07/17/how-we-built-gpt-web-app-generator),因此他們以一小部分的價格產生程式碼。 幫助計算機幫助我們 ========= 隨著技術的不斷改進,專業知識較少的用戶將更容易進行編程,因為更多的專業知識將嵌入我們的工具中。 但這意味著我們需要抽象,使我們人類能夠輕鬆地使用這些工具。 就像上面的 LLM 範例一樣,我們可以建立工具,讓人工智慧一遍又一遍地為我們編寫所有樣板文件,但問題是,當他們*可以*做其他更有用的事情時,我們*是否應該*讓他們這樣做?法學碩士擅長快速產生大量新想法。為什麼不建構讓人工智慧在這方面幫助我們的工具呢? 這正是我們對`wasp studio`未來的規劃。一個視覺化介面,讓您在有或沒有法學碩士的幫助下拼湊應用程式的新功能,然後快速對這些不同的想法進行 A/B 測試。 {% 嵌入 https://www.youtube.com/watch?v=ERwtJtNQL28 %} 不僅如此,我們還可以使用一個抽象來與不太懂科技的使用者輕鬆協作。在這些工具的幫助下,甚至您的產品經理也可以從中獲得樂趣並開始建立新功能以供開發人員簽署。 Wasp 及其功能集的強大之處在於,我們獲得的程式碼對於人和機器來說都**更容易閱讀、除錯和維護**。與視覺化介面相結合,我們將能夠快速迭代整個堆疊中的新功能,將其用作我們自己的規劃和編排工具,或者作為更輕鬆地除錯和監督法學碩士可能為我們所做的工作的一種方式。 這是對 Web 開發未來的令人興奮的展望,這些新工具將帶來許多利用它們的新方法。 您認為像`wasp studio`這樣的工具有哪些使用方法?您能想像人工智慧與人類協作領域即將出現哪些其他發展嗎?請在下面的評論中告訴我們,感謝您的閱讀! --- 原文出處:https://dev.to/wasp/the-first-framework-that-lets-you-visualize-your-reactnodejs-app-1d63

我又建立了另一個 JavaScript 框架

**現在是 2024 年,您又建立了另一個 JavaScript 框架。說真的,夥計!** 當您談論另一個 Javascript 框架時,您可能會笑並認為有大量經過驗證的選項,為什麼還要建立另一個框架? 🤷‍♂️ 讓我與您分享我的個人故事,它導致了新的 Javascript 框架的發展。但如果你不關心我的可悲的故事,這裡是 TLDR: > **TiniJS**是一個元框架,由基於 Google [Lit](https://lit.dev/)庫的**Web 元件**技術提供支援。 > 您可以先下載[入門範本](https://github.com/tinijs/bare-starter)或使用 CLI 初始化應用程式,執行`npx @tinijs/cli@latest new my-app`並按照說明進行操作。 > 有關更多詳細訊息,請參閱下面的**“入門”**部分或存取<https://tinijs.dev/> 。 故事 -- ![Javascript 框架太多](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kwi99az05w9syfgn7833.jpeg) 開個玩笑吧,我不是 Javascript 的專家,但我想稍微介紹一下我的背景,這樣您可能就會知道我關於前端 Web 開發的煩惱故事。我曾經是 Angular 1 版本的開發人員,目前主要使用 Vue,偶爾使用 jQuery。我有這**3 個 PITA** (Pain In The \*beep\*)經歷,這促使我嘗試使用 TiniJS 框架。 > **PITA #1 - 建立良好的 UI/UX 很困難,既乏味又耗時!** 早在 2010 年左右,就有兩種不同類型的網站:一種有大量文本、連結,幾乎沒有一些圖片;另一種有大量文本、連結,幾乎沒有一些圖片。其他的則包含大量的圖形元素,例如 GIF 圖像、Flash 背景、彩虹遊標… 人們往往有**後端難前端容易的**刻板印象。這有點正確,但不完全正確,我的意思是,我該怪誰,對吧?因為只要有一點 HTML 和 CSS 知識,您就可以非常輕鬆地建立靜態網站。但是,為了建立良好的 UI/UX,還有很多事情需要考慮。你必須成為更多事情的大師,而它們一點也不容易! ![前端開發不容易!](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/77sp9asranurm9xcldl5.png) > **PITA #2 - CSS 框架缺乏功能並且自訂它們不是很有效!** 人們意識到前端開發的困難,開始建立CSS框架來幫助解決這個問題。 Bootstrap是這一趨勢的先驅之一,其他流行的有:Foundation、Semantic UI、Bulma、Skeleton、Pure CSS…這些CSS框架很棒,毫無疑問,它們幫助我們建立一個好的UI/使用者體驗更快,但它們也有自己的限制。 首先,儘管所有框架都提供了一定的方式來定制樣式,但總的來說,我覺得這對我來說不是很容易和可重用。 ![客製化CSS框架效率不是很高](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2lhj75s0sy977e8d5e48.jpg) 二是功能缺失。我的意思是,它們主要是 CSS,它們提供一些功能,通常是作為 JQuery 的插件。大多數情況下,您必須編寫自己的 Javascript 才能使功能正常運作。 > **PITA #3 - JavaScript 框架勢不可擋,而且有點多餘!** 進入現代 Web 開發時代,Javascript 框架已成為新趨勢。但問題是我們有太多的選擇,這既是福也是禍。它們提供了很棒的功能,但互通性不太好,您不能只從一個框架中取出一段程式碼並在另一個框架中使用它。特別是,為特定框架建立一個具有單獨套件的 UI 系統是一項非常艱鉅的任務。 ![前端 Web 開發是碎片化的](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4cx44vzf0guksn2horak.png) 每次我開始一個專案或做某種前端工作時,前端web的碎片化對我來說都有些痛苦。這似乎就是生活方式,無可避免,不是嗎?請不要誤會我的意思,我並不反對任何框架,我傾向於選擇解決方案而不是技術,所以如果它適合你,就用它吧。但我想知道有什麼辦法可以以某種方式統一或縮小前端開發經驗的差距嗎? 🤔 介紹 TiniJS --------- 這就是我嘗試**TiniJS 框架**一段時間的原因。它是基於[Lit](https://lit.dev/)庫、使用本機**Web 元件**技術開發 Web/桌面/行動應用程式的工具集合。感謝[Lit](https://lit.dev/)團隊建立了一個出色的工具,幫助我們更輕鬆地使用標準 Web 元件。 它的目標是盡可能**標準化、小型化和多功能化**。與其他框架和元框架沒有真正的可比性,但總體而言,它具有相似的功能,但另一方面也有關鍵的區別。它既是替代選擇,也是對其他框架的補充。您可以使用 TiniJS 建立各種類型的應用程式:**登陸頁面、SPA、PWA、桌面應用程式、行動應用程式**…就功能而言,任何在 Javascript 中工作的內容都應該在 TiniJS 應用程式中正常運作。 整個系統由幾個部分組成,這是一個快速介紹。 > 請注意,**並非所有部件現在都可用**,該專案還處於早期階段,有些是**之前的實驗**,我盡力盡快將它們投入使用。但我的時間和資源有限,所以請耐心等待,如果可能的話請幫助我。 🙇‍♂️ > V1 的計畫及其路線圖可在<https://github.com/tinijs/tinijs>找到 ### 核 **TiniJS 的**核心提供了傳統的專案結構和簡化的開發流程。有**用於組織內容的資料夾**,**用於開發的本機伺服器**,在分發時,您可以選擇 Vite 或 Parcel 或 Webpack 來**建立產品**。 核心還包括:用於在頁面之間導航的**路由器**、用於全域狀態管理的簡單**儲存**、支援**PWA** ,... 您可以嘗試[Try TiniJS 中的範例專案(範例照片庫應用程式)](https://stackblitz.com/edit/try-tinijs?file=app%2Fapp.ts) ### 使用者介面系統 TiniJS 有一個專用的**UI 庫,我的目標是提供每個常用的元件和區塊甚至整個頁面**。元件以特殊的方式建置,它們是自訂元素,不僅可以與 TiniJS 一起使用,還可以與其他框架或不使用框架一起使用。 ![保持UI概念](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rshg9gol388nf0gsw1jt.png) 使用可重複使用元件很容易,通常是以將 props 傳遞給自訂元素標籤的形式。自訂可以透過 props 或 CSS `::part()`或自訂主題系列或完全克隆元件來源來完成,... 元件還能夠以盡可能小的努力適應幾乎所有設計系統。這是透過主題系統實現的,概念是這樣的: - 元件**只寫一次**,它們是**無頭的**(沒有特定的樣式) - 主題被組織成**系列**(又稱設計系統),系列定義自己的基本特徵,例如:Bootstrap、Material、Fluent、Spectrum,... - 根據基本特徵,一個系列有風格變體,稱為**“皮膚”** ,例如,Bootstrap 系列可能有:淺色皮膚、深色皮膚… 考慮到主題概念,任何應用程式都可以具有以下主題功能: - **一個**主題系列 - 可能是當今存在的所有網路應用程式中的 80% 到 90%,只有 1 種特定風格相當於 TiniJS 1 主題系列。 - **一個**主題系列 + 多個皮膚 - 常見的用例是亮/暗模式,相當於 TiniJS 1 主題系列,具有來自同一系列的多個皮膚。 - **多個**主題系列 - 高度個人化的應用程式可能有多個主題系列,每個系列都有一個或多個皮膚,將根據使用者參考應用某個主題。 UI 使用詳細資訊將在[主頁](https://tinijs.dev/ui)上提供,現在您也可以在<https://ui.tinijs.dev/>查看實驗概念,以查看該概念的實際應用。 ### 網頁、PWA、混合桌面/行動設備 預設的 TiniJS 應用程式是**單頁應用程式**,它小而快速,可以直接部署為 Web 應用程式。但是,您也可以將 TiniJS 轉換為以下一種或所有類型的應用程式: - **漸進式 Web 應用程式**(PWA) - 使用單一 CLI 命令實作(即將推出) - 混合**桌面/行動**應用程式 - 使用 Tauri 2.0 或類似工具(todo:編寫指令) ### 靜態和伺服器 TiniJS 應用程式可以作為靜態網路啟動,無論大小,無需伺服器或資料庫。您始終可以使用 SaaS 服務來滿足幾乎任何後端需求。我還在開發`@tinijs/content` - 一個基於文件的內容管理系統,用於輕鬆管理多種類型的內容。靜態站點產生(SSG)或預渲染也在計劃中。 如果您需要處理後端任務並參考從 Node 伺服器而不是靜態主機為 Web 應用程式提供服務,則可選的 Nitro 伺服器用於**伺服器/API 路由**和其他**伺服器內容**。我的開發能力有限,因此第一個版本可能不支援伺服器端渲染(SSR),相反,我計劃使用半SSR,其中伺服器將為用戶提供單頁服務,並向機器人提供最少的伺服器端渲染內容。 ### 功能和模組 在功能方面,由於 TiniJS 應用程式**基於標準 Web 技術**,因此在瀏覽器中工作的任何程式庫和功能都可能在 TiniJS 應用程式中運作。因此,與其他框架相比,您可能**不必擔心功能**。您甚至可以在 TiniJS 應用程式中使用其他框架,例如初始化 Vue 應用程式並將其安裝到 TiniJS 頁面內的元素。 還有一個模組架構師,以便某些模組可以進入 TiniJS 應用程式的工作流程,建立更簡化的開發管道。 ### 工具 官方 CLI 工具提供了一些使用 TiniJS 應用程式的便利命令。 - `dev` - 啟動本機開發伺服器 - `build` - 建構生產分配 - `preview` - 在部署之前預覽生產版本 - `generate` - 生成元件、頁面、實用程式... 此外,CLI**足夠通用,可以在 TiniJS 應用程式以外的任何類型的專案中使用**。它具有可擴展的架構,您可以在其中擴展更多命令以用於其他自動化任務。一些官方擴展,例如`ui`命令(來自`@tinijs/ui` )用於處理 UI 任務或`content`命令(來自`@tinijs/content` )用於處理內容相關任務,...您可以根據自己的目的建立 CLI 擴展包私人或共享。 好了,說得夠多了,讓我看看一些行動吧! 👌 開始使用 ---- **Tini** (越南語中的“ [Tí nị](https://translate.google.com/?sl=vi&tl=en&text=t%C3%AD%20n%E1%BB%8B&op=translate) ”,意思是非常小、可愛的東西)。 為了快速建立**TiniJS**專案,您可以使用[CLI](https://tinijs.dev/cli)來初始化模板。 ``` npx @tinijs/cli@latest new my-app ``` 上面的命令透過下載**Bare**模板來建立一個應用程式。將來,我想提供幾個入門範本。您還可以建立自己的模板並與社區共享或供您自己私人使用。目前,這些模板可用: - [Bare](https://github.com/tinijs/bare-starter) (預設)- TiniJS 應用程式的最小結構。 - [空白](https://github.com/tinijs/blank-starter)(標誌`-t blank` )- 包含路由器、狀態管理、元標記管理和[Bootstrap 主題系列](https://tinijs.dev/ui)。 現在,在專案內部,您可以執行`npm run dev`來啟動開發伺服器。您可以透過編輯檔案`./app/app.ts`來開始開發,該檔案是應用程式的根元件。有關如何使用 Lit 處理自訂元素,請存取[Lit 元件](https://lit.dev/docs/components/overview/), `LitElement`和`TiniComponent`之間存在一些差異,但現在您可以像平常一樣修改`static styles`和`render()` 。 若要建立發行版,請執行`npm run build`並可選擇執行`npm run preview`以預覽生產版本。現在您可以將`.output`資料夾部署到任何靜態主機。 您可能需要查看這些範例以了解 TiniJS 應用程式如何運作的更多細節。 - 首頁 - <https://github.com/tinijs/tinijs/tree/main/apps/tinijs.dev> - 待辦事項應用程式 - <https://github.com/tinijs/tinijs/tree/main/examples/todo> 這就是**TiniJS 框架**的基本介紹。下次我們將探索**TiniJS 應用程式的結構並使用元件**。 欲了解更多訊息,請存取: <https://tinijs.dev> 謝謝您,編碼愉快! 💖 --- 原文出處:https://dev.to/lamnhan/ive-created-yet-another-javascript-framework-5c5o

package-lock.json 到底是什麼?

是的,我要寫一下我們目錄中可能最被忽略的檔案**package-lock.json** ! package-lock.json 是一個極其重要的文件,它可以幫助您避免在儲存庫中出現大量的**「boom pop bam bam 🔥」** 。 因此,在討論 package-lock.json 之前,我們先討論語意版本控制和 package.json。 **1.** 語意版本控制 ============ 語意版本控製或 SemVer 是對套件進行版本控制的理想方式。它們通常寫成`1.4.5` (major.minor.patch) ![替代文字](https://thepracticaldev.s3.amazonaws.com/i/uyw4yois1mkqr967ufb8.png) *1a.*錯誤修復/補丁版本 -------------- 包括錯誤修復/文件拼字錯誤等。 *1b.*次要版本 --------- 包括新增的功能或 API,不會破壞舊版本的任何內容,因此在 v1.1.0 上執行的任何內容也應該在 v1.9.0 上執行。 *1c.*主要版本 --------- 包括破壞東西的版本。它可以包括刪除 API 或更改函數名稱,因此適用於 v1.0.0 的任何內容可能不一定適用於 v2.0.0 **2.** package.json ============ package.json 是一個文件,其中包含有關您的專案的資訊(名稱、版本等),並列出了您的專案所依賴的套件。 ![替代文字](https://thepracticaldev.s3.amazonaws.com/i/btvz35yyxvrj4tsbmpzl.png) 正如您在上圖中看到的,在 package.json 下列出的每個依賴項之後都有一個類似`^2.20.0`的數字,它是該包的版本,但在版本之前有`^` 。所以^這個小傢伙可以成為你專案的徹底破壞者。 版本之前的 ^ 符號告訴 npm,如果有人克隆該專案並在目錄中執行 npm install,則在他的 node\_modules 中安裝該套件的最新次要版本。 假設我在 package.json 中使用了`^2.20.0`的 Express,然後 Express 團隊發布了版本 2.24.0,現在當有人克隆我的存儲庫並在該目錄中執行`npm install`時,他們將獲得版本2.24. 0(您可以也把`~`代替`^`它將更新到最新的補丁版本) 但是,如果套件開發人員破壞了次要版本上的任何功能,這可能是一個大問題,因為它可能會使您的應用程式崩潰。 所以npm後來發布了一個名為package-lock.json的新檔案來避免這種情況 **3.** package-lock.json ============= ![package-lock.json meme](https://thepracticaldev.s3.amazonaws.com/i/do6l6okbr89h5pc666k0.png) package-lock.json 將簡單地避免安裝更新的次要版本的這種一般行為,因此當有人克隆您的儲存庫並在其電腦中執行 npm install 時。 NPM 將查看 package-lock.json 並安裝與所有者安裝的套件完全相同的版本,因此它將忽略 package.json 中的`^`和`~` 。 此外,它還包含一些其他元訊息,可以節省您在安裝 npm 時從 npm 獲取資料的時間。 您可以參考[npm 部落格](https://docs.npmjs.com/files/package-lock.json)以獲取有關 package-lock.json 的更多資訊。 謝謝您閱讀此篇! 我希望這有用 🎉 :) --- 原文出處:https://dev.to/saurabhdaware/but-what-the-hell-is-package-lock-json-b04

您必須了解的 21 個 HTML 技巧

在這篇文章中,我將分享 21 個帶有程式碼片段的 HTML 技巧,可以提高您的編碼技能。 讓我們直接進入正題吧。🚀 建立聯絡連結 ------ 使用 HTML 建立可點擊的電子郵件、電話和簡訊連結: ``` <!-- Email link --> <a href="mailto:[email protected]"> Send Email </a> <!-- Phone call link --> <a href="tel:+1234567890"> Call Us </a> <!-- SMS link --> <a href="sms:+1234567890"> Send SMS </a> ``` 建立可折疊內容 ------- 當您想要在網頁上包含可折疊內容時,可以使用`<details>`和`<summary>`標記。 `<details>`標籤建立隱藏內容的容器,而`<summary>`標籤提供可點擊的標籤來切換該內容的可見性。 ``` <details> <summary>Click to expand</summary> <p>This content can be expanded or collapsed.</p> </details> ``` 利用語意元素 ------ 為您的網站選擇語義元素而不是非語義元素。它們使您的程式碼變得有意義,並改善結構、可存取性和 SEO。 ![HTML 語意與非語意元素](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cqmm5d3vvw5fvrqgz861.jpg) 將表單元素分組 ------- 使用`<fieldset>`標記對表單中的相關元素進行分組,並使用`<legend>`標記和`<fieldset>`來定義`<fieldset>`標記的標題。 這對於建立更有效率、更易於存取的表單非常有用。 ``` <form> <fieldset> <legend>Personal details</legend> <label for="firstname">First name:</label> <input type="text" id="firstname" name="firstname" /> <label for="email">Email:</label> <input type="email" id="email" name="email" /> <label for="contact">Contact:</label> <input type="text" id="contact" name="contact" /> <input type="button" value="Submit" /> </fieldset> </form> ``` 增強下拉式選單 ------- 您可以使用`<optgroup>`標籤對`<select>` HTML 標籤中的相關選項進行分組。 當您使用大型下拉式選單或長選項清單時可以使用此功能。 ``` <select> <optgroup label="Fruits"> <option>Apple</option> <option>Banana</option> <option>Mango</option> </optgroup> <optgroup label="Vegetables"> <option>Tomato</option> <option>Broccoli</option> <option>Carrot</option> </optgroup> </select> ``` 改進視訊演示 ------ `poster`屬性可以與`<video>`元素一起使用來顯示圖像,直到使用者播放影片。 ``` <video controls poster="image.png" width="500"> <source src="video.mp4" type="video/mp4 /> </video> ``` 支援多項選擇 ------ 您可以將`multiple`屬性與`<input>`和`<select>`元素一起使用,以允許使用者一次選擇/輸入`multiple`值。 ``` <input type="file" multiple /> <select multiple> <option value="java">Java</option> <option value="javascript">JavaScript</option> <option value="typescript">TypeScript</option> <option value="rust">Rust</option> </select> ``` 將文字顯示為下標和上標 ----------- `<sub>`和`<sup>`元素可用於分別將文字顯示為下標和上標。 ![HTML <sub> 和 <sup> 元素](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yqk487tb0jufx8jmgpaf.jpg) 建立下載連結 ------ 您可以使用帶有`<a>`元素的`download`屬性來指定當使用者點擊連結時,應下載而不是導航到連結的資源。 ``` <a href="document.pdf" download="document.pdf"> Download PDF </a> ``` 定義相對連結的基本 URL ------------- 您可以使用`<base>`標籤來定義網頁中所有相對 URL 的基本 URL。 當您想要為網頁上的所有相對 URL 建立共用起點時,這會很方便,從而更輕鬆地導航和載入資源。 ``` <head> <base href="https://shefali.dev" target="_blank" /> </head> <body> <a href="/blog">Blogs</a> <a href="/get-in-touch">Contact</a> </body> ``` 控制圖像加載 ------ `<img>`元素的`loading`屬性可用來控制瀏覽器載入圖片的方式。它有三個值:「eager」、「lazy」和「auto」。 ``` <img src="picture.jpg" loading="lazy"> ``` 管理翻譯功能 ------ 您可以使用`translate`屬性來指定元素的內容是否應由瀏覽器的翻譯功能來翻譯。 ``` <p translate="no"> This text should not be translated. </p> ``` 設定最大輸入長度 -------- 透過使用`maxlength`屬性,您可以設定使用者在輸入欄位中輸入的最大字元數。 ``` <input type="text" maxlength="4"> ``` 設定最小輸入長度 -------- 透過使用`minlength`屬性,您可以設定使用者在輸入欄位中輸入的最小字元數。 ``` <input type="text" minlength="3"> ``` 啟用內容編輯 ------ 使用`contenteditable`屬性指定元素的內容是否可編輯。 它允許使用者修改元素內的內容。 ``` <div contenteditable="true"> You can edit this content. </div> ``` 控制拼字檢查 ------ 您可以`spellcheck`屬性與`<input>`元素、內容可編輯元素和`<textarea>`元素結合使用,以啟用或停用瀏覽器的拼字檢查。 ``` <input type="text" spellcheck="true"/> ``` 確保無障礙 ----- `alt`屬性指定圖像無法顯示時的替代文字。 始終包含圖像的描述性 alt 屬性,以提高可存取性和 SEO。 ``` <img src="picture.jpg" alt="Description for the image"> ``` 定義連結的目標行為 --------- 您可以使用`target`屬性來指定您按一下連結資源時將顯示的位置。 ``` <!-- Opens in the same frame --> <a href="https://shefali.dev" target="_self">Open</a> <!-- Opens in a new window or tab --> <a href="https://shefali.dev" target="_blank">Open</a> <!-- Opens in the parent frame --> <a href="https://shefali.dev" target="_parent">Open</a> <!-- Opens in the full body of the window --> <a href="https://shefali.dev" target="_top">Open</a> <!-- Opens in the named frame --> <a href="https://shefali.dev" target="framename">Open</a> ``` 提供附加資訊 ------ `title`屬性可用於在使用者將滑鼠懸停在元素上時提供有關該元素的附加資訊。 ``` <p title="World Health Organization">WHO</p> ``` 接受特定文件類型 -------- 可以使用`accept`屬性指定伺服器接受的檔案類型(僅適用於檔案類型)。這與`<input>`元素一起使用。 ``` <input type="file" accept="image/png, image/jpeg" /> ``` 優化影片載入 ------ 您可以透過使用`<video>`元素的`preload`屬性來加快影片檔案的載入速度,從而實現更流暢的播放。 ``` <video src="video.mp4" preload="auto"> Your browser does not support the video tag. </video> ``` 這就是今天的全部內容。 我希望這有幫助。 謝謝閱讀。 欲了解更多此類內容,[請點擊此處](https://shefali.dev/blog)。 您也可以在[X(Twitter)](https://twitter.com/Shefali__J)上關注我,以獲取有關 Web 開發的每日提示。 繼續編碼! [![請我喝杯咖啡](https://cdn.buymeacoffee.com/buttons/default-orange.png)](https://www.buymeacoffee.com/devshefali) --- 原文出處:https://dev.to/devshefali/21-html-tips-you-must-know-about-55j7

DevOps 基礎知識🚀

背景❔ --- 您是**DevOps**新手還是想學習一些 DevOps 工具?或者您可能已經是**DevOps 工程師,**正在尋找文件和練習技能的空間? 我在**GitHub**上建立了[**devops-basics**](https://github.com/tungbq/devops-basics)儲存庫來幫助您完成這一切! 🥳 簡介:波: ----- [**devops-basics**](https://github.com/tungbq/devops-basics)儲存庫將幫助您增強 DevOps 技能,並作為與 DevOps 相關的文件的書籤。主要特點包括: - **主題廣泛**:探索**20 多個**重要的 DevOps 主題,例如`Docker` 、 `Kubernetes` 、 `Terraform` 、 `Ansible` 、 `Jenkins` 、 `ELK` 、 `Cloud services` 、 `System Architecture` 、 `Monitoring`等。 - **有用的資源**:每個主題都附帶概述、官方文件連結、備忘錄和額外資源,以幫助您了解更多資訊。 - **實踐練習**:取得每個主題的基本範例,以便您可以嘗試所學內容。 - **進階範例**:一旦您掌握了基本概念,探索進階範例將進一步提高您的技能。 在以下部分中,我將引導您了解**devops-basics**儲存庫中的關鍵內容。 開始使用:火箭: -------- ### 什麼是 DevOps? DevOps 將開發 (Dev) 和營運 (Ops) 結合起來,與傳統流程相比,提高軟體開發和交付的效率、速度和安全性。更靈活的軟體開發生命週期可以為企業及其客戶帶來競爭優勢(資料來源:GitLab) ### 入門 - ➡️[入門](https://github.com/tungbq/devops-basics/tree/main/getting-started/) ### 開發營運圖 ![](https://upload.wikimedia.org/wikipedia/commons/0/05/Devops-toolchain.svg) ### 開發營運工具鏈 - ➡️ [DevOps 工具鏈](https://en.wikipedia.org/wiki/DevOps_toolchain) ### 開發營運路線圖 - ➡️ [roadmap.sh/devops](https://roadmap.sh/devops) DevOps 主題 🔥 ----------- 我們的內容庫涵蓋了廣泛的 DevOps 主題,請在[**主題**](https://github.com/tungbq/devops-basics/tree/main/topics/)下探索它們。您也可以參考[**roadmap.sh/devops**](https://roadmap.sh/devops)查看每個主題在工具鏈中的位置 |專案 |內容 |官方文件 |動手實作 | | :-------------- | :------------------------------------------------- --------------- ----------------------------------- --- | :------------------------------------------------- --------------- ----------------------------------- --------------- -------- | :------------------------------------------------- --------------- ----------------------------------- --------------- ----------------------------------- -------- | |安塞布爾 |[安塞布爾](https://github.com/tungbq/devops-basics/tree/main/topics/ansible/)| 📖 [docs.ansible.com](https://docs.ansible.com/) | ✔️ [ansible-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/ansible/basic/helloworld/ansible-helloworld.sh) | |碼頭工人 |[碼頭工人](https://github.com/tungbq/devops-basics/tree/main/topics/docker/)| 📖 [docs.docker.com](https://docs.docker.com/) | ✔️ [docker-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/docker/basic/docker-helloworld.sh) | | Kubernetes (k8s) | [k8s](https://github.com/tungbq/devops-basics/tree/main/topics/k8s/) | 📖 [kubernetes.io/docs](https://kubernetes.io/docs/home/) | ✔️ [k8s-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/k8s/basic/helloworld/k8s-helloworld.sh) | |伊斯蒂奧 |[伊斯蒂奧](https://github.com/tungbq/devops-basics/tree/main/topics/istio/)| 📖 [istio.io/latest/docs](https://istio.io/latest/docs/) | ✔️[入門](https://istio.io/latest/docs/setup/getting-started/)| |哎呀| [AWS](https://github.com/tungbq/devops-basics/tree/main/topics/aws/) | 📖 [docs.aws.amazon.com](https://docs.aws.amazon.com/) | ✔️ [EC2\_GetStarted](https://docs.aws.amazon.com/AWSEC2/latest/UserGuide/EC2_GetStarted.html) | |頭盔|[掌舵](https://github.com/tungbq/devops-basics/tree/main/topics/helm/)| 📖 [helm.sh/docs](https://helm.sh/docs/) | ✔️ [helm-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/helm/basic/helm-helloworld.sh) | |詹金斯 |[詹金斯](https://github.com/tungbq/devops-basics/tree/main/topics/jenkins/)| 📖 [www.jenkins.io/doc](https://www.jenkins.io/doc/) | ✔️ [Jenkins-Hello-World.md](https://github.com/tungbq/devops-basics/tree/main/topics/jenkins/basic/Jenkins-Hello-World.md) | |地形 |[地形](https://github.com/tungbq/devops-basics/tree/main/topics/terraform/)| 📖 [terraform/文件](https://developer.hashicorp.com/terraform/docs)| ✔️ [terraform-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/terraform/basic/terraform-helloworld.sh) | |殼牌|[殼](https://github.com/tungbq/devops-basics/tree/main/topics/shell/)| 📖 [devdocs.io/bash](https://devdocs.io/bash/) | ✔️ [basic.sh](https://github.com/tungbq/devops-basics/tree/main/topics/shell/basic/basic.sh) | |去 |[去](https://github.com/tungbq/devops-basics/tree/main/topics/git/)| 📖 [git-scm.com/doc](https://git-scm.com/doc) | ✔️ [git-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/git/basic/hello-world/git-helloworld.sh) | |每個 |[每個](https://github.com/tungbq/devops-basics/tree/main/topics/elk/)| 📖 [www.elastic.co/guide](https://www.elastic.co/guide/index.html) | ✔️[任何/基本/helloworld](https://github.com/tungbq/devops-basics/tree/main/topics/elk/basic/helloworld/) | |阿爾戈CD |[阿爾古德](https://github.com/tungbq/devops-basics/tree/main/topics/argocd/)| 📖 [argo-cd.readthedocs.io](https://argo-cd.readthedocs.io/en/stable/) | ✔️ [argocd/基本](https://github.com/tungbq/devops-basics/tree/main/topics/argocd/basic/)| | Github-Action | [github 行動](https://github.com/tungbq/devops-basics/tree/main/topics/github-action/)| 📖 [docs.github.com/actions](https://docs.github.com/actions) | ✔️[建立第一個工作流程](https://docs.github.com/en/actions/quickstart#creating-your-first-workflow)| |亞搏體育appGitlab CI | gitlab-ci | [gitlab-ci](https://github.com/tungbq/devops-basics/tree/main/topics/gitlabci/) | 📖 [docs.gitlab.com/ee/ci](https://docs.gitlab.com/ee/ci/) | ✔️[建立第一個管道](https://docs.gitlab.com/ee/ci/quick_start/)| |格羅維 |[絕妙](https://github.com/tungbq/devops-basics/tree/main/topics/groovy/)| 📖 [groovy-lang.org](https://groovy-lang.org/documentation.html) | ✔️[絕妙/基本](https://github.com/tungbq/devops-basics/tree/main/topics/groovy/basic/)| |普羅米修斯|[普羅米修斯](https://github.com/tungbq/devops-basics/tree/main/topics/prometheus/)| 📖 [prometheus.io/docs](https://prometheus.io/docs/) | ✔️ [prometheus-helloworld.sh](https://github.com/tungbq/devops-basics/tree/main/topics/prometheus/basic/prometheus-helloworld.sh) | |蟒蛇 |[蟒蛇](https://github.com/tungbq/devops-basics/tree/main/topics/python/)| 📖 [www.python.org/doc](https://www.python.org/doc/) | ✔️[蟒蛇/基本](https://github.com/tungbq/devops-basics/tree/main/topics/python/basic/)| |開放堆疊 |[開放堆疊](https://github.com/tungbq/devops-basics/tree/main/topics/openstack/)| 📖 [docs.openstack.org](https://docs.openstack.org/2023.2/) | ✔️ [openstack/helloworld](https://github.com/tungbq/devops-basics/tree/main/topics/openstack/basic/) | | Azure-DevOps |[天藍色](https://github.com/tungbq/devops-basics/tree/main/topics/azuredevops/)的📖 [learn.microsoft.com](https://learn.microsoft.com/en-us/azure/devops) | ✔️ [azuredevops/基本](https://github.com/tungbq/devops-basics/tree/main/topics/azuredevops/basic/)| |編碼 |[編碼](https://github.com/tungbq/devops-basics/tree/main/topics/coding/)| 📖[編碼](https://github.com/tungbq/devops-basics/tree/main/topics/coding/)| 🏃 進行中 | |建築|[建築](https://github.com/tungbq/devops-basics/tree/main/topics/architecture/)| 📖[架構/README.md](https://github.com/tungbq/devops-basic/blob/main/topics/architecture/README.md) | ⏩即將推出 | |包裝機|即將推出 | 📖 [www.packer.io](https://www.packer.io/) | ⏩即將推出 | |微服務|[微服務](https://github.com/tungbq/devops-basics/tree/main/topics/microservices/)| 📖 [AWS/微服務](https://aws.amazon.com/microservices/)| ⏩ 即將推出 | | HashiCorp 金庫 |即將推出 | 📖 [hashcorp/vault](https://developer.hashicorp.com/vault/docs) | ⏩ 即將推出 | - 還有**更多即將推出的主題...⏩**您可以關注此存儲庫以獲取更多最新內容 - 有關練習這些工具的其他資源,請造訪: [**devops-project**](https://github.com/tungbq/devops-project) 結論 -- [**devops-basics**](https://github.com/tungbq/devops-basics)儲存庫是您進行 DevOps 學習和實踐的首選資源。無論您是初學者還是經驗豐富的工程師,此儲存庫都可以提供您增強技能並在 DevOps 中取得成功所需的內容。立即探索並升級您的 DevOps 之旅! 如果您發現此存儲庫有幫助,請考慮給它一顆星⭐️以表達您的讚賞。你能給我的任何星星都會幫助我更成長❤️ &lt; 表&gt; ``` <tr> ``` ``` <td> ``` ``` <a href="https://github.com/tungbq/devops-basics" style="text-decoration: none;"><strong>Star devops-basics ⭐️ on GitHub</strong></a> ``` ``` </td> ``` ``` </tr> ``` 謝謝您,編碼愉快! 🔥 --- 原文出處:https://dev.to/tungbq/the-devops-basics-3ecm

由於錯誤,我賣掉了我的新創公司:我希望我有這個無伺服器儲存庫!

2021 年,我創辦了一家名為 Linvo 的新創公司,這是一款 LinkedIn 自動化工具。它產生了很多錢,但燒錢率也很高。 我可以告訴你,作為一個年輕的企業家(完全自力更生),我損失了大部分錢😆 我的系統的問題是它不斷故障;我不是世界上最好的程式設計師,但讓我詳細說明一下。 ![收入](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4l95m758p7m9fg4914dc.png) --- 傀儡師會吸走你的記憶 ---------- Linvo 在其生命週期中進行了幾次迭代。我使用了我所知道的技術:React 和 NestJS。 基本上,任何自動化的雲端抓取都會涉及建立任務然後解決它們。 它看起來像這樣: ![工人和刮削](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9n4d78oe0cz6vxl1y34n.png) - Cron 每 10 分鐘執行一次,尋找新的事情要做,並將其發送到佇列。 - 工作人員從佇列中取出任務並處理它們。 - 將所有內容儲存到資料庫。 這是一個非常簡單的解決方案,在多個 EC2 (AWS) 和 Redis 上運作。 理論上,它應該有效 - 是的,您需要水平擴展工作人員,但這不是我的問題。 我開始經歷其他事情——**記憶體洩漏。** 您可能知道, [Puppeteer](https://pptr.dev/) - 一種 chromium 自動瀏覽器,很重(與您電腦上的 Chrome 相同),而且我執行了很多它們 - 它們耗盡了我的記憶體 - 導致伺服器停止工作並佔用網路頻寬。 ![糟透了](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5fsl47a1yzumo3qexa8h.gif) --- 需要一個解決方案 -------- 重構聽起來就像 - 是的,讓我們這樣做,但我的 Intercom 支援充滿了支援票(我已經有很多用戶),而且我知道我必須建立一些瘋狂的重構。 我有一個解決方案的想法 - 讓我們使用 AWS lambda。 - 拉姆達啟動 - 做任務 - 死亡(大部分時間) 它不會影響你的網路。 它會死掉並且不會導致記憶體洩漏。 它有點貴,因為 Lambda 並不意味著無限期地執行——這會消除整個概念,但我很絕望。 (嗯,好處是你不需要考慮規模。) 這是新的基礎設施: ![新基礎設施](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sr304vf0z81f0bqfxnup.png) - 事件橋 cron 每 1 分鐘執行一次(這是最小值) - 為佇列建立六個事件的 Lambda(使其像 cron 每 10 秒執行一次) - SQS隊列(再見,Redis) - Lambda 以自動縮放功能脫穎而出(是嗎?) --- 供應商鎖定 ----- 正如您可能從上下文中了解到的那樣 - 現在我完全使用 AWS,但我不介意 - 只介意如何在我的計算機上測試它。 以前,我使用[Sam](https://github.com/aws/aws-sam-cli) 。和[Serverless](https://www.serverless.com/)幾乎一樣快速地創造整個環境。 是的,他們確實帶來了一些本地測試。他們可以獲得您的 lambda 並將其轉變為端點!耶! 但我使用的是 Event Bridge、SQS 和 Lambda。那是不可能的。 我遇過[localstack](https://github.com/localstack/localstack) 。它本來應該幫助我在我的電腦上建立整個 AWS 堆疊,但當時很多東西都不受支持,例如 Lambda 層。我在使用它時不知所措。 因此,我開始建立我的「自己的」基礎設施,在 AWS 上部署了一個「測試」SQS,並用它執行本地程式碼(一個呼叫函數的函數),但結果很糟糕。 我在生產方面做得不好;我感覺這個詞當時就壓在我身上。 我只是想擺脫這家新創公司;我甚至免費向人們提供它,吸引了顧客並擺脫了這個問題。 長話短說,我設法以低價出售了該系統,但最近,我發現了一些有趣的事情。 --- Winglang - 類似 Typescript 的雲方言 ----------------------------- 我想我的痛苦是真實的,儘管我會很高興在當天找到它 - 我很高興它今天還活著。 [Winglang](https://github.com/winglang/wing)幫助您建立與我使用的相同的雲端基礎設施,但好處是: - 它不需要您使用任何設定檔。您基本上用程式碼定義了整個基礎設施(您可以檢查他們的整個預檢和飛行中文件) - 你可以在本地執行它 - 謝謝你,上帝,🙏🏻🙏🏻🙏🏻🙏🏻,包括所有基礎設施。 - 您可以將其部署到任何雲端供應商,並且不必使用 AWS。他們實際上可以產生任何 Terraform 或雲端結構,以便於部署。 我和Winglang的創始人Elad(著名的CDK的建置者)進行了交談,他說了一些讓我抽搐的話。 > 當您在飛機上時,您實際上可以處理您的專案並為其編寫測試🤯 我自己無法給他們足夠的星星 - 但請幫我一個忙,給他們的存儲庫加星標,當然,將其用於您的下一個專案。 https://github.com/winglang/wing ![謝謝](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/giofk3zupgxjgnc57zw5.gif) --- 最後的話 ---- 我對翼朗很生氣。我希望他們早點這麼做。現在他們出現了。什麼時候一切都與人工智慧有關? 我建立了一個新的 YouTube 頻道,主要涉及技術、開源和行銷:) 如果您對此感興趣,請隨時在這裡訂閱: https://www.youtube.com/@nevo-david?sub\_confirmation=1 --- 原文出處:https://dev.to/github20k/i-sold-my-startup-because-of-bugs-i-wish-i-had-this-serverless-repository-4l3a

50 多個核心 Java 面試問題及程式設計師答案

--- 標題:針對程式設計師的 50 多個核心 Java 面試問題及其答案 發表:真實 描述:核心 Java 面試常見問題及其答案,幫助初學者和初級開發人員獲得第一份 Java 開發工作。 標籤: java、程式設計、職業 封面圖:https://thepracticaldev.s3.amazonaws.com/i/k63545lbbjmh582tiosr.png --- *揭露:這篇文章包含附屬連結;如果您透過本文中提供的不同連結購買產品或服務,我可能會獲得補償。* Java程式設計師大家好!在過去的幾年裡,我一直在分享許多[Java 面試問題](http://javarevisited.blogspot.sg/2015/10/133-java-interview-questions-answers-from-last-5-years.html)、答案和單獨討論。我的許多讀者要求我將他們聚集在一起,以便他們可以在同一個地方進行面試準備。 這篇文章就是這個結果。 本文包含**50 多個 Java 面試問題和答案**,涵蓋所有重要主題,如核心 Java 基礎知識、 [Java 集合框架](https://javarevisited.blogspot.com/2011/11/collection-interview-questions-answers.html)、 [Java 多執行緒和並發](https://javarevisited.blogspot.com/2014/07/top-50-java-multithreading-interview-questions-answers.html)、 [Java IO](https://javarevisited.blogspot.com/2014/08/socket-programming-networking-interview-questions-answers-Java.html) 、 [JDBC](https://javarevisited.blogspot.com/2012/12/top-10-jdbc-interview-questions-answers.html) 、 [JVM 內部原理](http://www.java67.com/2016/08/10-jvm-options-for-java-production-application.html)、 [編碼問題](http://www.java67.com/2018/06/data-structure-and-algorithm-interview-questions-programmers.html)、 [物件導向程式設計](http://www.java67.com/2015/12/top-30-oops-concept-interview-questions-answers-java.html)等。 這些問題是從我做過的各種 Java 訪談中挑選出來的,我的朋友、讀者和其他人根據自己的經驗分享了一些問題。它們絕不是非常困難。您可能已經在電話或面對面的面試中見過它們。 這些問題對於複習重要的 Java 主題(例如核心 Java 概念、多執行緒、lambda、流和集合)也非常有用。 我還分享了一些*用於進一步學習和提高的有用資源*,例如 Udemy 上的[**完整 Java 大師**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)課程,您可以加入課程來提高和填補 Java 技能方面的空白。 我還寫過有關 Java 面試準備的書籍,例如[《Grokking the Java Interview》](https://gumroad.com/l/QqjGH)和[《Grokking the Spring Boot Interviews》](https://gumroad.com/l/hrUXKY) ,其中我為 Java 開發人員分享了很多問題。 如果你今年正在準備 Java 面試,你也可以**[在 Gumroad 上取得我的 Java + Spring Interview + SQL Bundle](https://javinpaul.gumroad.com/l/sowpfg)** ,使用程式碼**Friends20**還可獲得 20% 的折扣 [![Java 和 Spring 面試書籍](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xj0hpl0w5lyvdrnwlsoe.png)](https://javinpaul.gumroad.com/l/sowpfg) 那我們還在等什麼?以下是針對初學者和經驗豐富的 Java 開發人員的面試中最常見的一些 Java 問題的清單。 2 至 3 年經驗豐富的程式設計師的 50 個 Java 面試問題 --------------------------------- 因此,為了不浪費您的時間,這裡列出了一些針對初學者程式設計師的常見[核心 Java 面試問題](http://www.java67.com/2018/03/top-50-core-java-interview-questions.html)。此清單主要針對初學者和經驗不足的開發人員,例如具有 2 到 3 年 Java 經驗的人。 1) **Java如何實現平台無關性?** ([回答](http://www.java67.com/2012/08/how-java-achieves-platform-independence.html)) 提示:字節碼和Java虛擬機 答案 - Java 透過產生字節碼然後在 Java 虛擬機器上執行來實現平台獨立性,該虛擬機將這些字節碼轉換為依賴計劃的機器程式碼。由於不同平台的 JVM 不同,我的意思是,對於 Windows,您有單獨的 JRE(其中包括 JVM),對於 Linux,您將有單獨的 JRE。由於 Java 程式碼不會編譯為本機機器碼,而是編譯為字節碼,這使得它們獨立於平台。 2) **Java中的**`**ClassLoader**`**是什麼**? ([回答](http://javarevisited.blogspot.sg/2012/12/how-classloader-works-in-java.html#axzz59AWpr6cb)) 提示:JVM 的一部分,用於載入類別的字節碼。你可以自己寫。 答:在Java中,程式碼被封裝在類別中,因為Java是物件導向的程式設計。你的程式是在類別中寫的,為了執行它們,JVM 會載入這些包含你的程式碼的類別。負責載入類別的 JVM 元件稱為類別載入器。它們是存在的三個主要類別載入器:引導類別載入器、擴充類別載入器和應用程式類別載入器。 這是一個很好的圖表,顯示了每個 Java 類別載入器的功能: [![Java 中的類別載入器](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g2brxfmzd67dv2k7rwmv.PNG)](https://javarevisited.blogspot.com/2021/05/java-classloader-interview.html) 3)**寫一個Java程式來檢查一個數字是偶數還是奇數?** ([回答](http://javarevisited.blogspot.sg/2013/04/how-to-check-if-number-is-even-or-odd.htm)) 提示:您可以使用位元運算符,例如位元與,記住,二進位格式中偶數末尾為 0,奇數末尾為 1。 4) **Java中**`**ArrayList**`**和**`**HashSet**`**的差別**? ([回答](http://www.java67.com/2012/07/difference-between-arraylist-hashset-in-java.html)) 提示: `List`和`Set`之間的所有差異都適用於此,例如排序、重複、隨機搜尋等。請參閱 Richard Warburton 的[**《Java 基礎知識:集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections)以了解有關Java 中的ArrayList、HashSet 和其他重要集合的更多資訊。 [![](https://miro.medium.com/max/875/1*hd861fcwDe86tY-1Y0VNRQ.png)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections) 5)**什麼是單例中的雙重檢查鎖定?** ([回答](http://www.java67.com/2016/04/why-double-checked-locking-was-broken-before-java5.html)) 提示:兩次檢查實例是否已初始化,第一次不加鎖,第二次加鎖。 **6)如何在Java中建立線程安全的Singleton? (** [**回答**](http://javarevisited.blogspot.sg/2012/12/how-to-create-thread-safe-singleton-in-java-example.html)**)** 提示:有很多方法,例如使用 Enum 或使用雙重檢查鎖定模式或使用巢狀靜態類別。 **7) Java中Serialized和Externalized的差別? (** [**回答**](http://www.java67.com/2012/10/difference-between-serializable-vs-externalizable-interface.html)**)** 提示:Externalized 讓您可以更好地控制序列化過程。 **8) Java中何時使用瞬態變數? (**[**回答**](http://www.java67.com/2012/08/what-is-transient-variable-in-java.html)**)** 提示:當您想要在實作 Serialized 介面的類別中使變數不可序列化時。換句話說,您可以將其用於不想保存其值的變數。請參閱[**完整的 Java MasterClass**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)以了解 Java 中的瞬態變數。 **9) Java中transient變數和volatile變數的差別? (** [**回答**](http://www.java67.com/2012/11/difference-between-transient-vs-volatile-modifier-variable-java.html)**)** 提示:完全不同,一個用於序列化上下文,另一個用於並發。 **10) Java中什麼時候使用易失性變數? (**[**回答**](http://www.java67.com/2012/08/what-is-volatile-variable-in-java-when.html)**)** 提示:當你需要指示JVM一個變數可以被多個執行緒修改並提示JVM不緩存其值。 **11)我們可以重寫Java中的私有方法嗎? (** [**回答**](http://www.java67.com/2013/08/can-we-override-private-method-in-java-inner-class.html)**)** 提示:不,因為它在子類別中不可見,這是在 Java 中重寫方法的主要要求。 12) **Java中**`**Hashtable**`**和**`**HashMap**`**的差別**? **(** [**回答**](http://javarevisited.blogspot.sg/2010/10/difference-between-hashmap-and.html#axzz53B6SD769)\*\*) \*\*提示:有幾個但最重要的是`Hashtable` ,它是同步的,而`HashMap`不是。與`HashMap`相比,它也是遺留的且緩慢的。 13) **Java中**`**List**`**和**`**Set**`**的差別**? **(** [**回答**](http://javarevisited.blogspot.sg/2012/04/difference-between-list-and-set-in-java.html#axzz53n9YK0Mb)**)** 提示: `List`是有序的並且允許重複。 `Set`是無序的,不允許有重複的元素。 14) **Java中**`**ArrayList**`**和**`**Vector**`**的區別**([**答案**](http://www.java67.com/2012/09/arraylist-vs-vector-in-java-interview.html)**)** 提示:很多,但最重要的是, `ArrayList`是非同步的,速度很快,而`Vector`是同步的,速度很慢。它也是像`Hashtable`這樣的遺留類別。 **15)** **Java 中**`**Hashtable**`**和**`**ConcurrentHashMap**`的差異? **(** [**回答**](http://javarevisited.blogspot.sg/2011/04/difference-between-concurrenthashmap.html#axzz4qw7RoNvw)**)** 提示:更具可擴展性。請參閱 Richard Warburton 的[**《Java 基礎知識:集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections)以了解更多資訊。 16) `**ConcurrentHashMap**`**如何實現可擴充性? (** [**回答**](http://javarevisited.blogspot.sg/2017/08/top-10-java-concurrenthashmap-interview.html#axzz50U9xyqbo)**)** 提示:透過將映射分為段並僅在寫入操作期間鎖定。 **17) 您將重寫哪兩個方法來將**`**Object**`**用作**`**HashMap**`**中的**`**Key**` **? (** [**回答**](http://www.java67.com/2013/06/how-get-method-of-hashmap-or-hashtable-works-internally.html)**)** 提示:等於和哈希碼 **18) Java中wait和sleep的差別? (**[**回答**](http://www.java67.com/2012/08/what-are-difference-between-wait-and.html)**)** \\ 提示: `wait()`方法釋放鎖定或監視器,而 sleep 則不會。 19\) **Java中**`**notify**`**和**`**notifyAll**`**的差別**? **(** [**回答**](http://www.java67.com/2013/03/difference-between-wait-vs-notify-vs-notifyAll-java-thread.html)**)** 提示: `notify`通知一個隨機執行緒正在等待該鎖,而`notifyAll`通知所有等待監視器的執行緒。如果你確定只有一個執行緒在等待,那麼使用`notify` ,否則`notifyAll`會更好。請參閱 Java Champion Heinz Kabutz 的[**線程基礎迷你課程,**](https://javaspecialists.teachable.com/p/threading-essentials/?product_id=539197&coupon_code=SLACK100?affcode=92815_johrd7r8)以了解有關線程基礎知識的更多資訊。 20\) 為什麼要**在 Java 中重寫 hashcode 以及**`**equals()**` ? **(** [**回答**](http://javarevisited.blogspot.sg/2015/01/why-override-equals-hashcode-or-tostring-java.html#axzz55oDxm8vv)**)** 提示:遵守 equals 和 hashcode 約定,如果您打算將物件儲存到集合類別(例如`HashMap`或`ArrayList`中,則需要遵守這一點。 21) `**HashMap**`**的負載因子是什麼意思? (**[**回答**](http://www.java67.com/2017/08/top-10-java-hashmap-interview-questions.html)**)** 提示:觸發`HashMap`調整大小的閾值一般為 0.75,這表示如果 HashMap 已滿 75%,則`HashMap`會自行調整大小。 **22)** **Java 中**`**ArrayList**`**和**`**LinkedList**`之間的差異? **(** [**回答**](http://www.java67.com/2012/12/difference-between-arraylist-vs-LinkedList-java.html)**)** 提示:與陣列和鍊錶相同,其中一個允許隨機搜尋,而另一種則不允許。在鍊錶上插入和刪除很容易,但在陣列上搜尋很容易。請參閱[**《Java 基礎知識:集合》**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-collections) **(** Richard Warburton 在 Pluralsight 上的課程),以了解更多關於 Java 中基本集合資料結構的資訊。 **23)** **Java 中**`**CountDownLatch**`**和**`**CyclicBarrier**`之間的差異? **(** [**回答**](http://www.java67.com/2012/08/difference-between-countdownlatch-and-cyclicbarrier-java.html)**)** 提示:屏障被打破後,您可以重複使用`CyclicBarrier` ,但計數為零後,您無法重複使用`CountDownLatch` 。 24)**在 Java 中什麼時候使用**`**Runnable**`**和**`**Thread**` ? **(** [**回答**](http://www.java67.com/2016/01/7-differences-between-extends-thread-vs-implements-Runnable-java.html)**)** 提示:總是 **25) Java 中 Enum 類型安全的意義是什麼? (** [**回答**](http://www.java67.com/2014/04/what-java-developer-should-know-about-Enumeration-type-in-Java.html)**)** 提示:這表示您不能將不同 Enum 類型的實例指派給 Enum 變數。例如,如果您有一個像`DayOfWeek` day 這樣的變數,那麼您無法從`DayOfMonth`枚舉中為其指派值。 **26) Java 中整數的自動裝箱如何運作? (** [**回答**](http://javarevisited.blogspot.sg/2012/07/auto-boxing-and-unboxing-in-java-be.html#axzz59AWpr6cb)**)** 提示:透過使用Java中的`valueOf()`方法。 **27)** **Java 中**`**PATH**`**和**`**Classpath**`之間的差異? **(** [**回答**](http://www.java67.com/2012/08/what-is-path-and-classpath-in-java-difference.html)**)** 提示:作業系統使用`PATH` ,而JVM 使用`Classpath`來定位Java 二進位文件,例如JAR 檔案或Class 檔案。請參閱[**Java 基礎知識:核心平台**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-core-platform),以了解有關`PATH` 、 `Classpath`和其他 Java 環境變數的更多資訊。 [![](https://miro.medium.com/max/478/1*PBuMgGmVXwBguv-SPw7YJw.jpeg)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-core-platform) **28) Java中方法重載和重寫的差別? (** [**回答**](http://www.java67.com/2015/08/top-10-method-overloading-overriding-interview-questions-answers-java.html)**)** 提示:重寫發生在子類別中,而重載發生在同一個類別中。此外,覆蓋是執行時活動,而重載是在編譯時解決的。 **29) 如何防止 Java 中的類別被子類化? (**[**回答**](http://www.java67.com/2017/06/10-points-about-final-modifier-in-java.html)**)** \\ 提示:只需將其建構函數設為私有即可 **30) 你如何限制你的類別被你的客戶使用? (** [**回答**](http://javarevisited.blogspot.sg/2016/01/why-jpa-entity-or-hibernate-persistence-should-not-be-final-in-java.html)**)** \\ 提示:使建構子私有或從建構子拋出異常 **31)** **Java 中**`**StringBuilder**`**和**`**StringBuffer**`之間的差異? **(**[**回答**](http://www.java67.com/2016/10/5-difference-between-stringbuffer.html)**)** 提示: `StringBuilder`不同步,而`StringBuffer`同步。 **32) Java 中多態性與繼承的差別? (** [**回答**](http://www.java67.com/2014/04/difference-between-polymorphism-and-Inheritance-java-oops.html)**)** 提示:繼承允許程式碼重複使用並建構類別之間的關係,這是多態性所需要的,多態性提供動態行為。請參閱\[**物件導向的 Java 程式設計:資料結構及超越專業化**\]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fjava-object-orientation)在Coursera 上,了解有關OOP 功能的更多資訊。適合初學者的最深入的課程之一。 \[![](https://thepracticaldev.s3.amazonaws.com/i/vuohxotp8qeh638lzjpr.png) \]( https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fspecializations%2Fjava-物件導向) 順便說一句,如果您發現 Coursera 課程很有用,因為它們是由世界各地的知名公司和大學建立的,我建議您加入[**Coursera Plus**](https://coursera.pxf.io/c/3294490/1164545/14726?u=https%3A%2F%2Fwww.coursera.org%2Fcourseraplus) ,這是Coursera 的訂閱計劃,可以讓您無限制地存取他們最受歡迎的課程、專業、專業憑證和指導專案。它的費用約為 399 美元/年,但它完全物有所值,因為您可以獲得無限的憑證。 **33)我們可以在Java中重寫靜態方法嗎? (**[**回答**](http://www.java67.com/2012/08/can-we-override-static-method-in-java.html)**)** \\ 提示:否,因為重寫在執行時間解析,而靜態方法呼叫在編譯時解析。 **34) 我們可以存取Java中的私有方法嗎? (**[**回答**](http://www.java67.com/2012/08/can-we-override-private-method-in-java.html)**)** \\ 提示:可以,在同一個班級內,但不能在班級外 **35) Java中介面和抽象類別的區別? (** [**回答**](http://www.java67.com/2017/08/difference-between-abstract-class-and-interface-in-java8.html)**)** 提示:從[Java 8](https://dzone.com/articles/5-courses-to-crack-java-certification-ocajp-1z0-80)開始,差異變得模糊。然而,一個Java類別仍然可以實作多個接口,但只能擴展一個類別。 **36) Java 中 DOM 和 SAX 解析器的差別? (**[**回答**](http://www.java67.com/2012/09/dom-vs-sax-parser-in-java-xml-parsing.html)**)** \\ 提示:DOM 將整個 XML 檔案載入到記憶體中,而 SAX 則不會。它是一個基於事件的解析器,可用於解析大文件,但 DOM 速度很快,對於小文件應該是首選。 **37) Java 中 throw 和 throws 關鍵字的差異? (**[**回答**](http://www.java67.com/2012/10/difference-between-throw-vs-throws-in.html)**)** \\ 提示: throws 聲明方法在發生錯誤時可以拋出什麼異常,但 throw 關鍵字實際上會拋出異常。請參閱[**Java 基礎知識:異常處理**](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-exception-handling)以了解有關 Java 中異常處理的更多資訊。 [![](https://miro.medium.com/max/875/1*O5DEoN9mOy3D0HxFKWwfKQ.png)](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fjava-fundamentals-exception-handling) **38) Java 中的故障安全迭代器和故障快速迭代器的差異? (** [**回答**](http://www.java67.com/2015/06/what-is-fail-safe-and-fail-fast-iterator-in-java.html)**)** 提示:故障安全性不會拋出`ConcurrentModificationException` ,而`fail-fast`則在迭代時檢測到底層集合的外部變更時拋出 ConcurrentModificationException。 **39) Java 中迭代器和枚舉的差別? (** [**回答**](http://javarevisited.blogspot.sg/2010/10/what-is-difference-between-enumeration.html#axzz59AWpr6cb)**)** 提示:迭代器還使您能夠在迭代時刪除元素,而枚舉不允許這樣做。 **40)** **Java 中的**`**IdentityHashMap**`是什麼? **(** [**回答**](http://www.java67.com/2016/09/difference-between-identityhashmap-weakhashmap-enummap-in-java.html)**)** 提示:一個`Map` ,它使用`==`相等運算子來檢查相等性,而不是`equals()`方法。 **41)** **Java 中的**`**String**`池是什麼? **(** [**回答**](http://javarevisited.blogspot.sg/2016/07/difference-in-string-pool-between-java6-java7.html#axzz4pGGwsyna)**)** 提示: `String`文字池。請記住,它已從 JDK 7 中的永久代空間移至堆疊。 **42)** Java 中`**Serializable**`**類別可以包含不可序列化欄位嗎? (** [**回答**](http://javarevisited.blogspot.sg/2016/09/how-to-serialize-object-in-java-serialization-example.html)\*\*) \*\*提示:是的,但您需要將其設定為靜態或瞬態。 **43) Java 中 this 和 super 的差別? (**[**回答**](http://www.java67.com/2013/06/difference-between-this-and-super-keyword-java.html)**)** 提示:this 指的是目前實例,而 super 指的是超類別的實例。 **44)** **Java 中**`**Comparator**`**和**`**Comparable**`之間的差異? **(** [**回答**](http://www.java67.com/2013/08/difference-between-comparator-and-comparable-in-java-interface-sorting.html)**)** \\ 提示: `Comparator`定義自訂排序,而`Comparable`定義物件的自然順序,例如`String`字母順序。請參閱[**完整的 Java 大師課程**](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F)以了解有關 Java 排序的更多資訊。 [![](https://miro.medium.com/max/875/1*MTR8OytpiIMidLndBnsJ5g.png)](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-the-complete-java-developer-course%2F) **45)** **Java 中**`**java.util.Date**`**和**`**java.sql.Date**`之間的差異? **(**[**回答**](http://javarevisited.blogspot.sg/2012/04/difference-between-javautildate-and.html)**)** 提示:前者包含日期和時間,後者僅包含日期部分。 46)為什麼**Java中的**`**Object**`類別**中宣告了wait和notify方法**? **(**[**回答**](http://javarevisited.blogspot.sg/2012/02/why-wait-notify-and-notifyall-is.html)**)** 提示:因為它們需要僅對物件可用的鎖。 **47)為什麼Java不支援多重繼承? (** [**回答**](http://javarevisited.blogspot.sg/2011/07/why-multiple-inheritances-are-not.html)**)** 提示:它不支持,因為 C++ 的體驗不好,但對於 Java 8,它在某種意義上是支援的 --- 現在 Java 中不支援`Type`的多重繼承。 **48) Java 中檢查異常和非檢查異常的差異? (** [**回答**](http://javarevisited.blogspot.sg/2011/12/checked-vs-unchecked-exception-in-java.html)**)** 提示:如果是選取的,則必須使用 catch 區塊處理異常,而如果是未選取的,則由您決定;編譯不會打擾你。 **49) Java 中錯誤和異常的區別? (**[**回答**](http://www.java67.com/2012/12/difference-between-error-vs-exception.html)**)** 提示:我厭倦了打字,請檢查答案 **50) Java 中的競爭條件和死鎖的差異? (** [**回答**](http://javarevisited.blogspot.sg/2012/02/what-is-race-condition-in.html#axzz59AbkWuk9)**)** 提示:這兩種錯誤都是並發應用程式中發生的錯誤,一種是由於執行緒調度而發生的,另一種是由於編碼不良而發生的。請參閱[Java 中的多執行緒和平行計算](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fmultithreading-and-parallel-computing-in-java%2F),以了解有關死鎖、競爭條件和其他多執行緒問題的更多資訊。 其他資源 --- - [Java 面試指南:200+ 面試題目及答案](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fjava-interview-questions-and-answers%2F) - [Spring框架面談指南---200+問答](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fspring-interview-questions-and-answers%2F) - [準備工作面試 作者:John Sonmez](https://pluralsight.pxf.io/c/1193463/424552/7490?u=https%3A%2F%2Fwww.pluralsight.com%2Fcourses%2Fdeveloper-job-interviews) - [Markham 曝光的 Java 程式設計面試](http://www.amazon.com/Java-Programming-Interviews-Exposed-Markham/dp/1118722868?tag=javamysqlanta-20) - [破解編碼面試 --- 189 個問題和答案](http://www.amazon.com/Cracking-Coding-Interview-6th-Edition/dp/0984782850/?tag=javamysqlanta-20) - [求職面試的資料結構與演算法分析](https://click.linksynergy.com/fs-bin/click?id=JVFxdTr9V80&subid=0&offerid=323058.1&type=10&tmpid=14538&RD_PARM1=https%3A%2F%2Fwww.udemy.com%2Fdata-structure-and-algorithms-analysis%2F) - [過去 5 年 130 多道 Java 面試題](http://javarevisited.blogspot.sg/2015/10/133-java-interview-questions-answers-from-last-5-years.html) - [Grokking the Java Interview - 免費範例 PDF](https://javinpaul.gumroad.com/l/HMOAv) - [深入了解 Spring Boot 面試 - 免費 PDF 範本](https://javinpaul.gumroad.com/l/grokking-springboot-interview-sample) ### 結束語 謝謝,您已經讀到了文章的結尾...祝您程式設計面試順利!這當然不會很容易,但這些問題肯定會對您有所幫助。它還會鼓勵您了解更多。 如果您喜歡這篇文章,請與您的朋友和同事分享,並且不要忘記在 Twitter 上關注[javinpaul](https://twitter.com/javinpaul) ! > **PS ---**如果您需要一些免費資源來學習 Java,您可以查看[**我最喜歡的免費 Java 課程**](https://medium.com/javarevisited/10-free-courses-to-learn-java-in-2019-22d1f33a3915)清單來開始您的準備。 &gt; > **PSS ---**我沒有提供圖片中分享的面試問題的答案“程式碼中建立了多少個 String 物件?”你能猜出並解釋一下嗎? 而且,如果你今年正在準備 Java 面試,你還可以**[在 Gumroad 上取得我的 Java + Spring Interview + SQL Bundle](https://javinpaul.gumroad.com/l/sowpfg)** ,使用程式碼**friends20**也可以獲得 20% 的折扣 --- 原文出處:https://dev.to/javinpaul/50-core-java-interview-questions-with-answers-for-programmers-3bc

再見 SASS 👋,歡迎回歸原生 CSS

Sass 已成為本地安裝的強大預處理器,十多年來構成了我的專案的支柱。它使我能夠有效地組織可擴展且穩定的 CSS 包。即使在今天,我仍然認為 Sass 是一個非常強大的工具。然而,當我們步入 2024 年時,不可否認 CSS 已經經歷了快速發展。曾經是 Sass 獨有的功能現在已原生整合到 CSS 中,包括變數和最新亮點:CSS 嵌套。 變數 -- 長期以來,定義變數一直被視為 SCSS 的獨特優勢,它允許集中管理許多屬性,這是 CSS 長期以來非常缺少的功能。然而如今,變數也可以以類似 Sass 的方式在 CSS 中定義。然而,一個顯著的差異是,Sass 變數只存在於預處理器上下文中,而 CSS 變數可以在瀏覽器中使用,甚至可以透過 JavaScript 動態覆寫。 ``` :root { --button-padding: 10px 20px; --button-bg-color: #007bff; --button-text-color: #ffffff; --button-border-radius: 8px; } .button { padding: var(--button-padding); background-color: var(--button-bg-color); color: var(--button-text-color); border-radius: var(--button-border-radius); border: none; cursor: pointer; transition: background-color 0.3s; } ``` CSS 嵌套 ------ 在另一個元素中定義一個元素的樣式規則的能力大大簡化了 CSS 的編寫。嵌套允許將這些選擇器分組到父選擇器中,而不是對從屬元素或偽選擇器重複使用相同的選擇器。這種技術可以產生清晰的、層次結構的、因而更有效率的程式碼庫。 隨著[瀏覽器對 CSS 巢狀的支援率](https://caniuse.com/?search=css%20nesting)超過 84%,對巢狀選擇器的支援率超過 86%,這種技術變得越來越容易使用。 ``` .blog { position: relative; padding: 1rem; background: var(--neutral-100); .blog-item { border: 1px solid var(--neutral-200); & span { font-size: 1rem; } } } ``` :is 偽類 ------ `:is`偽類透過接受選擇器清單並對與這些選擇器中的任何一個匹配的所有元素進行樣式設置,徹底改變了選擇器概念。這大大方便了 DOM 中元素的選擇和樣式設定。 ``` :is(selector1, selector2, selector3) { /* styles */ } ``` 您可以使用 :is() 來提高可讀性,同時避免使用長選擇器,而不是使用長選擇器清單。 : has() 偽類 ---------- CSS 偽類`:has()`提供了一種基於其後代選擇元素的強大方法,類似於條件樣式的應用。 ``` .hero:has(.hero-button) { background-color: var(--accent-50); } ``` 容器查詢 ---- 容器查詢被認為是自 CSS3 以來網頁設計最重要的創新。他們透過允許元素根據容器的大小進行調整來擴展響應式設計的概念。該技術使元素的設計能夠根據上下文動態變化,從而實現更靈活和更具適應性的設計。 ``` .component { --theme: dark; container-name: fancy; } @container fancy style(--theme: dark) { .fancy { /* dark styles. */ } } ``` ``` @container (min-width: 720px) { .headline { font-size: 2em; } } ``` 如果容器有變數 --theme: dark,請加入以下 CSS。 級聯層 --- 使用級聯層,我們可以透過分配自己的層(layer)來避免類別、ID等的嵌套,以獲得更高的特異性。使用`@layer` at-rule 和分層`@imports` ,我們可以建立自己的級聯層- 從低優先樣式(如重設和預設值),透過主題、框架和設計系統,到最高優先樣式(如元件、實用程式) ,並覆蓋。級聯層提供更多控制。 ``` @layer utilities { .button { padding: 0.5rem; } .button--lg { padding: 0.8rem; } } ``` SASS 的未來 -------- 這是否意味著 Sass 已經過時了?一點也不。 Mixins和函數,例如像素到rem的轉換,仍然是Sass不可替代的優勢。儘管如此,我還是決定在我的大部分專案中放棄 Sass。相反,我在 Sublime 編輯器中使用預先定義的程式碼區塊和套件,這顯著改善了我的工作流程。 再見sass? ----- 我堅信,到 2024 年,Sass 的好處,包括安裝、使用和編譯問題,將不再證明其使用的合理性。現代 CSS 的可擴展性和用戶友好性使得無需額外工具即可完成。 我的 Themex 專案展示了新 CSS 功能的組合有多強大:https://app.themexproject.com 隨著 CSS 的進步,我期待直接、直接地實施小型和大型專案。 **再見sass,謝謝你!** ![圖片描述](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2v4zu1gxgmiul99ypn9.gif) --- 原文出處:https://dev.to/karsten_biedermann/goodbye-sass-welcome-back-native-css-cf

每個 Web 開發人員都需要的資源

我編制了一份工具列表,這些工具多年來幫助我建立了供個人使用和客戶使用的網站。讓我們開始吧,與網路上許多其他可用於增強網站外觀的資源相比,這是一個很小的清單。 **學習 Web 開發的網站** - 程式碼學院 - 奧丁計劃 - 前端導師 - JavaScript30 - Coursera - 可汗學院 - 免費程式碼訓練營 - MDN 網路文件 - W3學校 - 斯林巴 **學習 Web 開發的 YouTube 頻道** - 簡化網頁開發 - 編碼器 編碼器 - 編碼列車 - 自由程式設計營 - 穿越媒體 - 網路忍者 - 與哈利一起編程(印地語) \*\*HTML/CSS 範本網站 \*\* - HTML5UP - HTML修訂版 - 自由CSS - 模板化 - 免費HTML5 - 啟動引導程式 - 引導製作 - 靴子手錶 - 引導品味 - 克魯普 - 車頂板 - HTML5xCSS3 **使用的程式碼編輯器** - Visual Studio 程式碼(VS 程式碼) - 崇高的文字 - 括號 - 為什麼 **JavaScript 動畫庫** - Anime.js:輕量級 JavaScript 動畫函式庫。 - ScrollReveal.js:當元素進入視窗時輕鬆顯示元素。 - Popmotion:功能齊全、靈活的 JavaScript 運動庫。 - AniJS:CSS 動畫的聲明性處理庫。 - Wow.js:向下捲動頁面時顯示 CSS 動畫。 - Typed.js:一個類型的 JavaScript 函式庫。 - Velocity.js:加速 JavaScript 動畫。 - GSAP:現代網路的專業級動畫。 **向量、圖像和插圖網站** - Freepik:發現免費向量、照片、PSD 和圖示。 - Vecteezy:尋找高品質的向量藝術、圖形和插圖。 - Unsplash:存取超過一百萬張免費高解析度照片。 - Pixabay:探索龐大的免費圖片和影片庫。 - Flaticon:下載免費圖示、SVG、PSD、PNG、EPS 格式或 ICON FONT。 - Openclipart:分享和使用免費的剪貼畫和圖像。 - SVGRepo:免費下載 SVG。 - Vectorportal:免費向量、剪貼畫和圖示。 - SVGBackgrounds:可自訂的 SVG 圖案和背景。 - FreeDesignFile:高品質的圖形設計資源。 - Pexels:尋找才華橫溢的創作者分享的免費庫存照片和影片。 - Vectorian:下載免版稅向量藝術、庫存照片和素材。 我希望這些資源能幫助您建立網站。 謝謝閱讀。我們下一篇部落格見!😊🙌 --- 原文出處:https://dev.to/monica_w/resources-every-web-developer-needs-18m0

初學者最適合編碼的 5 款遊戲!

介紹 == 編碼沒有比編寫遊戲更有趣的了,讓東西在螢幕上移動真是令人滿足,真是太棒了。 因此,如果您對程式設計完全陌生,或者您是一名多年從事企業系統程式設計的高級開發人員,那麼此部落格應該可以幫助您開始一些遊戲開發,或者至少激勵您嘗試一下。 簡單說明一下,我*其實*並不是遊戲開發人員,我的日常工作主要是編寫大型的、有進取心的 Java 應用程式。但很高興回到家,花一個晚上寫一些更有趣的東西。我發布了一個教程系列,我在我的網站[codeheir.com](www.codeheir.com)上的博客中經常引用該系列教程,其中我經歷了遊戲的演變,因此從[《Pong - 1972》](https://codeheir.com/2019/02/04/how-to-code-pong-1972-1/)開始,然後是[《Space Race - 1973》](https://codeheir.com/2019/02/10/how-to-code-space-race-1973-2/)等等。這基本上是一個逐步的過程使用[p5.js](https://p5js.org/)編寫遊戲程式碼。當然,你用來編寫遊戲的語言並不重要,重要的是你從實際的製作過程中學到的概念。 開始編碼之前 ------ 如果您已經了解遊戲開發語言的程式設計基礎知識,我建議您在閱讀我的任何逐步過程之前嘗試編寫遊戲程式碼。如果您遇到困難,請使用部落格作為參考,看看您是否採用與我相同的方法來解決問題,很可能您會找到更好的方法😅。 如果您對程式設計完全陌生,那麼我建議您看看 Youtube 上[Daniel Shiffman 的 - The Coding Train](https://www.youtube.com/user/shiffman) ,他為初學者提供了精彩的系列。然後,當您開始了解基礎知識時,請按照我的部落格了解您想要編寫的遊戲。 ![丹尼爾·希夫曼](https://media1.giphy.com/media/l0HlGEX1ZORa0aIvu/giphy.gif?cid=790b7611b3b543f39372b022606cd810930b308db14221bf&rid=giphy.gif) 1-乒乓球 ===== 如果你在谷歌上搜尋“建立的第一個遊戲”,很可能會彈出 Pong,這並不是正式建立的第一個遊戲,但它是第一個商業上成功的遊戲。它建立於1972年6月! ![乒乓球](https://codeheir.files.wordpress.com/2019/02/finished.gif?w=1060) 乒乓球編碼會教您大量遊戲開發的關鍵概念,以下是一些: - 使用者輸入:玩移動球拍和/或球拍 - 擊球偵測:球擊中球拍,然後 - 計分系統:您需要追蹤兩名玩家的分數 - 螢幕約束:防止槳離開螢幕 有關如何編寫 pong 程式碼的逐步過程 -[請按此處!](https://codeheir.com/2019/02/04/how-to-code-pong-1972-1/) 2 - 太空競賽 ======== 一年後,《太空競賽》(Space Race)問世(同樣由雅達利製作)。太空競賽非常簡單,這是一個兩人遊戲,每個玩家控制一個火箭。這個想法是在避開太空碎片的情況下到達地圖頂部以獲得積分。中間的橫條代表遊戲剩餘時間,遊戲結束時得分最高的玩家獲勝! ![太空競賽](https://codeheir.files.wordpress.com/2019/02/end-game.gif?w=1060) 編碼太空競賽會教您一些關鍵概念,同時鞏固您之前從編碼乒乓球中學到的一些概念: - 使用陣列:為了保存碎片,您可能會使用陣列來迭代它們並確定它們是否與火箭相撞 - 計時器:使用某種計時器來確定遊戲何時結束 有關如何編寫太空競賽程式碼的逐步過程 -[請點擊此處!](https://codeheir.com/2019/02/10/how-to-code-space-race-1973-2/) 3 - 噴射戰鬥機 ========= Jet Fighter 是 1975 年發布的一款出色的遊戲。它非常簡單,有一架黑色噴氣機和一架白色噴氣機,黑色噴氣機發射黑色子彈,白色噴氣機發射白色子彈。目標是射擊其他玩家並獲得一分。 ![噴射戰鬥機](https://codeheir.files.wordpress.com/2019/02/scoring2.gif?w=1060) 噴射戰鬥機的關鍵概念: - 螢幕環繞:當子彈/射流離開螢幕時,它們會環繞並從另一側返回 - 射擊:學習從當前角度投射子彈背後的數學原理 我的多人太空遊戲**《Spaceheir》**從《Jet Fighter》中獲得了許多靈感。這個想法是建立小行星和噴氣式戰鬥機的混搭。考慮《小行星》中玩家與環境的關係;射擊小行星以獲得等級。還有《噴射戰鬥機》的玩家對玩家戰鬥系統。 ![太空繼承人](https://github.com/LukeGarrigan/spaceheir/raw/master/stream-royale2.gif) 遊戲完全開源,這是[github](https://github.com/LukeGarrigan/spaceheir) 有關如何編寫 Jet Fighter 的分步過程 -[請點擊此處!](https://codeheir.com/2019/02/24/how-to-code-jet-fighter-1975-4/) 4 - 太空侵略者 ========= 迄今為止,1978 年發布的最受歡迎的遊戲是《太空入侵者》。短短 4 年裡,它的票房收入就達到了 38 億美元,無需介紹。 ![太空侵略者](https://codeheir.files.wordpress.com/2019/03/done.gif?w=1060) 太空入侵者編碼中的關鍵概念: - 陣列移除:射擊外星人時移除或隱藏 - 陣列選擇:確保只有最底層的外星人在射擊 - 難度:你玩遊戲的時間越長,外星人就越快 - 隨機:給外星人隨機射擊的機會 有關如何編寫 Space Invaders 的分步過程[- 點擊此處!](https://codeheir.com/2019/03/17/how-to-code-space-invaders-1978-7/) 5 - 摩納哥大獎賽 ========== Monaco GP 是一款於 1979 年發布的無盡賽車遊戲。這是一款真正有趣的編碼遊戲,無縫包裝使得這款遊戲如此重要,因此感覺就像在無盡的賽道上賽車一樣。請注意,實際的遊戲看起來與我的實現不太相似。 ![摩納哥大獎賽](https://codeheir.files.wordpress.com/2019/03/collision.gif?w=1060) 摩納哥大獎賽編碼的關鍵概念 - 永無止境的遊戲:用一個很酷的遊戲開發技巧讓賽道繼續下去! - 人工智慧:對其他汽車的行為進行編碼,並使它們也包裹起來。 一些榮譽提名: ======= 封鎖 -- Blockade是Gremlin於1976年發布的一款血腥輝煌的遊戲,它基本上是PVP貪吃蛇,但在21年前就發布了! 它涉及對蛇人工智慧進行編碼,這非常有趣,但也相當困難。 ![封鎖](https://codeheir.files.wordpress.com/2019/02/finished-2.gif?w=1060) 峽谷轟炸機 ----- 峽谷轟炸機是一款有趣的老遊戲。這不是最令人興奮的,但它有一些有趣的編碼功能,例如,如果下面的塊被擊中,則使塊掉落,然後使該塊改變顏色以匹配其現在的級別。 ![峽谷轟炸機](https://codeheir.files.wordpress.com/2019/03/finished.gif?w=1060) 然後呢? ==== 當您對上述任何遊戲進行編碼感到滿意時,我建議您嘗試建立一個簡單的多人/線上遊戲。玩您建立的遊戲很有趣,邀請您的朋友和家人加入您的伺服器以便您擁有他們就更有趣了🤣。我為任何想要編寫多人 p5js 遊戲和節點程式碼的人建立了一個快速入門 Github 儲存庫,這樣您就不必重複大量的樣板檔案: [p5-multiplayer-game-starter](https://github.com/LukeGarrigan/p5-multiplayer-game-starter) ![P5 倉庫](https://i.imgur.com/vAHPUf9.png) 謝謝 == 我希望您喜歡這個博客,並希望它對你們中的一些人有所幫助。讓自己參與一些遊戲開發,這非常非常有趣。 如果您不想錯過絕對精彩的程式設計見解,請在 Twitter 上關注我:🤣 [@luke\_garrigan](https://twitter.com/luke_garrigan) 謝謝,如果您喜歡我的漫談,請查看我的個人部落格網站:https://codeheir.com/ 這篇部落格由[Code Canvases](https://www.codecanvases.com)贊助 ----------------------------------------------------- 用市面上最酷的程式設計/編碼畫布讓您的房間充滿活力。 [codecanvases.com](https://www.w3schools.com)是 100% 獨家設計的畫布程式設計印刷品的排名第一的賣家。立即購買,享**20% 折扣!!** ![[https://codecanvases.com/](https://codecanvases.com/)](https://cdn.shopify.com/s/files/1/0311/0151/7955/products/jqbr8djyof6ktl8qopmkpvy4_480x480.png?v=1585483987) --- 原文出處:https://dev.to/lukegarrigan/top-5-best-games-to-code-as-a-beginner-9n

🎉 我們的 Web 框架在 GitHub 上達到了 9,000 顆星! ⭐️9️⃣0️⃣0️⃣0️⃣⭐️

![黃蜂合影](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z6mrq2mqbhb8dwvrfp26.png) **TL;DR - 儘管困難重重,我們建立的 Web 框架還是達到了一個里程碑!請查看(如果您喜歡的[話,請給我們加星支持](https://github.com/wasp-lang/wasp)- 謝謝!🙏),並閱讀下文以了解我們的故事以及我們是如何走到這一步的。** 作為一名開發人員,建立自己的 Web 框架可能是您能做的最可怕的事情之一。幾乎可以肯定你的專案將會失敗,作為額外的好處,其他開發人員會一路取笑你,數出它不起作用的所有原因。 &lt; 圖&gt; ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mcu9469qr7fdcy9wwl8o.gif) 分享您對新 Web 框架的想法是怎樣的感覺 這對我們來說沒有什麼不同。當我們開始 Wasp 時,每個人都問*“為什麼要另一個 Web 框架?為什麼有人會在成熟、著名的框架旁邊使用你的工具?”* 。我承認,這些都是好問題,但我們並沒有找到所有答案,甚至還沒有接近答案。但這絕對不是我們不這麼做的理由。 &lt; 圖&gt; ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/loncvv6cn5ox644gggvy.png) 三年前,當我們推出 Wasp Alpha 時 我們繼續前進。我們心中有一個願景,我們想看看能否將其變成現實。**我們根本不在乎黃蜂是死是活,我們只知道我們需要堅持到底,這才是最重要的**。幾個月後,我們發布了 Alpha 版本並獲得了第一批 100 顆星。結果,這帶來了更多問題,我們距離弄清楚我們想像的概念是否真的能飛還差得遠。 **但是,我們也無法相信有人真的為我們的倉庫加註了星標。我們既驚訝又興奮**。我仍然清楚地記得 Martin Šošić 問我*“Matija,你能想像我們建立的專案在 GitHub 上獲得 1000 星嗎?”* 。我們倆立即搖頭大笑,心想*:“是啊,就是這樣啊!”* 。 &lt; 圖&gt; ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9z36qtjswggstpgggoyh.png) 我們的第一次社群更新,慶祝 GitHub 上的 100 顆星! 9,500 顆星,近 3 年後,我們今天在這裡。 Wasp 即將進入 GitHub 上的精英 10,000 星俱樂部,與行業巨頭並駕齊驅。**我們啟動的框架,並根據社群的寶貴回饋進一步開發,正在被各種開發人員使用 - 從週末專案到新創公司和頂級企業**。用 Wasp 建立的新創公司[已被收購](https://dev.to/wasp/from-idea-to-exit-building-and-selling-an-ai-powered-saas-in-5-months-27d9)。我今天剛在 Upwork 上看到一則招募廣告,其中一家公司正在招募[Open SaaS](https://github.com/wasp-lang/open-saas) (React 和 Node.js 的開源免費樣板啟動器,由 Wasp 提供支援)開發人員🤯。 ![開放式SaaS](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t8qyb3a7qxwbg8d2x5g7.png) 回想起來,我仍然覺得難以置信。從我哥哥女朋友(現在是妻子)的公寓開始,我們幾乎沒有開源也沒有社區建設經驗,但我們卻做出了全世界開發人員日常使用的產品,並且願意選擇使用它而不是主流的著名框架我們都知道。我們對此感到無比榮幸和謙卑。 我們仍然有很多問題(認為這些問題永遠不會消失),但現在也開始感覺我們得到了一些正確的答案。 &lt; 圖&gt; ![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6md2ilfye1jss9mr7a60.png) 我們今天收到的回饋 謝謝閱讀![在這裡](https://github.com/wasp-lang/wasp)了解有關 Wasp 的更多資訊並支持我們達到 10,000 顆星的旅程。 PS:如果您想知道誰是黃蜂隊的真正老闆,現在我們終於在上面的照片中明確了這一點。必須把這個小傢伙一直帶到山頂,這樣他才能得到一個漂亮的鏡頭。 🐝 --- 原文出處:https://dev.to/wasp/our-web-framework-reached-9000-stars-on-github-9000-jij