本次預計翻譯三篇文章如下：
- 01.[譯]9個可以讓你在2020年成爲前端專家的項目
- 02.[譯]預加載響應圖像
- 03.[譯]您應該知道的13個有用的JavaScript數組技巧
我爲什麼要創建這個git倉庫？通過翻譯國外的web相關的技術文章來學習和跟進web發展的新思想和新技術。git倉庫地址：https://github.com/yzsunlei/javascript-article-translate
介紹
無論您是編程新手還是經驗豐富的開發人員。在互聯網這個行業中，必須不斷學習新的概念和語言/框架以跟上快速變化的步伐。以React爲例 - 4年前由Facebook開源，它現在已經成爲全球JavaScript開發人員的首選。Vue和Angular當然也有其相應的追捧者。然後是Svelte，以及Next.js或Nuxt.js等通用框架，以及Gatsby，Gridsome，Quasar等等。如果您想成爲一名專業的JavaScript開發人員，那麼您至少應該在不同的框架和庫中擁有一些實戰經驗 - 除了使用原生的JS完成工作任務。
爲了幫助您在2020年成爲前端專家(Frontend Master)，我收集了9個不同的項目，每個項目都有不同的主題和不同的JavaScript框架或庫作爲技術棧，您可以構建這些項目並將其添加到學習目標中。請記住，沒有什麼比項目實戰(actually building stuff)對您有更大的幫助了，因此，請不斷進取(sharpen your mind)，實現這一目標！
使用React（使用鉤子）構建電影搜索應用程序
首先，您可以使用React構建電影搜索應用程序。下面是應用程序最終的示例圖：
您將學到什麼
構建這個應用程序，您將使用相對較新的Hooks API來提升您的React技能。示例項目利用了React組件，鉤子，一個外部api，當然還有一些CSS樣式。
技術棧和功能
- React with Hooks
- create-react-app
- JSX
- CSS
不使用任何類，該項目爲您提供了功能的完美切入點，並且肯定會在2020年爲您提供幫助。您可以在此處找到示例項目：https://www.freecodecamp.org/news/how-to-build-a-movie-search-app-using-react-hooks-24eb72ddfaf7/請按照本教程進行操作，或者按照您自己的方式進行！
使用Vue構建聊天應用
對您來說，另一個很棒的項目是使用我最喜歡的JavaScript庫VueJS構建聊天應用程序。該應用程序將如下所示：
您將學到什麼
在本教程之後，您將學習如何從頭開始配置Vue應用，創建組件，處理狀態，創建路由，連接到第三方服務，甚至處理身份驗證。
技術棧和功能
- Vue
- Vuex
- Vue Router
- Vue CLI
- Pusher
- CSS
這真的是一個很棒的項目，可以開始使用Vue或提升您現有的技能以應對2020年的開發。您可以在此處找到該教程：https://www.sitepoint.com/pusher-vue-real-time-chat-app/
使用Angular 8構建美麗的天氣應用
此示例將幫助您使用Google的Angular 8構建美觀的天氣應用程序：
您將學到什麼
該項目將教您一些寶貴的技能，例如從頭開始創建應用程序，從設計到開發，一直到生產部署。
技術棧和功能
- Angular 8
- Firebase
- 服務端渲染
- 使用柵格佈局和Flex佈局
- 移動端友好 & 響應式
- 暗黑模式
- 漂亮的UI
對於這個綜合性項目，我真正喜歡的是，您不是單一地學習東西，而是從設計到最終部署的整個開發過程。您應該真正做到這一點！https://medium.com/@hamedbaatour/build-a-real-world-beautiful-web-app-with-angular-6-a-to-z-ultimate-guide-2018-part-i-e121dd1d55e
使用Svelte構建待辦應用
與React，Vue和Angular相比，Svelte kinda是新手，但仍是2020年的熱門話題之一。好的，To-Do應用程序不一定是那裏最熱門的話題，但這確實可以幫助您提高Svelte技能看起來像這樣：
您將學到什麼
本教程將向您展示如何從頭到尾使用Svelte 3製作應用。它應用了組件，樣式和事件處理程序。
技術棧和功能
- Svelte 3
- 組件
- 通過CSS樣式
- ES 6語法
那裏沒有很多優秀的Svelte入門項目，因此我覺得這是一個很好的起點。誰知道呢，也許您是在創建另一篇更全面的Svelte教程的人，它將在本帖子的明年版本中介紹？https://medium.com/codingthesmartway-com-blog/building-a-svelte-3-todo-app-from-start-to-deployment-1737f72c23a6
使用Next.js構建電子商務購物車
NextJs是用於創建支持應用程序開箱即用的React應用程序的最受歡迎的框架。該項目將向您展示如何構建一個如下所示的電子商務購物車：
您將學到什麼
在這個項目中，您將學習如何設置Next.js開發環境，創建新頁面和組件，獲取數據，樣式並部署下一個應用程序。
技術棧和功能
- Next.js
- 組件和頁面
- 數據獲取
- 樣式
- 部署方式
- SSR和SPA
擁有一個真實的例子（例如電子商務展示櫃）來學習新的東西總是很高興。您可以在這裏找到該教程：https://snipcart.com/blog/next-js-ecommerce-tutorial
建立完整的多語言博客網站Nuxt.js
Nuxt.js對Vue的作用是Next.js的反映。一個很好的框架，可以結合服務器端渲染和單頁應用程序的功能。您可以創建的最終應用程序將如下所示：
您將學到什麼
這個示例項目將教您從初始設置到最終部署，如何使用Nuxt.js構建完整的網站。它利用了Nuxt必須提供的許多優秀功能，如頁面和組件以及SCSS樣式。
技術棧和功能
- Nuxt.js
- 組件和頁面
- Storyblok模塊
- 混合(Mixins)
- Vuex狀態管理
- SCSS樣式
- Nuxt中間件
這對您來說是一個非常酷的項目，涵蓋了Nuxt.js的許多優秀功能。我個人很喜歡使用Nuxt，因此您應該真正嘗試使用它，因爲它也將使您成爲更好的Vue開發人員！https://www.storyblok.com/tp/nuxt-js-multilanguage-website-tutorial
用Gatsby建立博客
Gatsby是一個出色的靜態站點生成器，在後臺使用React和GraphQL。這是該項目的結果：
您將學到什麼
在本教程中，您將學習如何利用Gatsby構建優秀的博客，在使用React和GraphQL的同時可以很好地編寫自己的文章。
技術棧和功能
- Gatsby
- React
- GraphQL
- 插件和主題
- MDX/Markdown
- Bootstrap
- 模板
如果您想創建博客，這是一個很好的示例，說明如何利用React和GraphQL做到這一點。我並不是說Wordpress是一個不好的選擇，但是有了Gatsby，您可以在使用React的同時創建高性能站點！https://blog.bitsrc.io/how-to-build-a-blog-with-gatsby-and-boostrap-d1270212b3dc
用Gridsome建立博客
Gridsome適用於Vue，好吧，我們已經在Next/Nuxt中擁有了，但是Gridsome和Gatsby也是如此。兩者都使用GraphQL作爲數據層，但是Gridsome使用VueJS。這也是一個很棒的靜態站點生成器，它將幫助您創建出色的博客：
您將學到什麼
該項目將教您如何構建一個簡單的博客，以開始使用Gridsome，GraphQL和Markdown。它還介紹瞭如何通過Netlify部署應用程序。
技術棧和功能
- Gridsome
- Vue
- GraphQL
- Markdown
- Netlify
當然，這不是最全面的教程，但涵蓋了Gridsome和Markdown的基本概念，可能是一個很好的起點。
https://www.telerik.com/blogs/building-a-blog-with-vue-and-markdown-using-gridsome
使用Quasar構建類似於SoundCloud的音頻播放器應用
Quasar是另一個Vue框架，也可以用於構建移動應用程序。在這個項目中，您將創建一個音頻播放器應用程序，如下所示：
您將學到什麼
儘管其他項目主要關注Web應用程序，但該項目將向您展示如何通過Quasar框架使用Vue創建移動應用程序。您應該已經配置了Cordova工作環境，並配置了android studio/xcode。如果沒有，則在教程中有一個指向quasar網站的鏈接，他們向您介紹瞭如何進行設置。
技術棧和功能
- Quasar
- Vue
- Cordova
- Wavesurfer
- UI組件
一個小項目，展示了Quasar在構建移動應用程序方面的強大功能。https://www.learningsomethingnew.com/how-to-build-a-sound-cloud-like-audio-player-app-with-vue-js-quasar-and-wave-surfer
結論
在本文中，我向您展示了您可以構建的9個項目，每個項目專注於一個JavaScript框架或庫。現在，選擇權全由您自己決定：您是否會使用以前未使用的框架來嘗試一些新的東西？還是要通過爲已經具備一定知識的技術進行項目來增強技能？還是您會依賴自己喜歡的框架/庫，並在2020年完成所有項目？隨時發表評論，不要忘記關注我，以獲取更多即將發佈的帖子！
原文鏈接：https://dev.to/simonholdorf/9-projects-you-can-do-to-become-a-frontend-master-in-2020-n2h