主頁 > 企業開發 > [技術翻譯]9個可以讓你在2020年成為前端專家的專案

[技術翻譯]9個可以讓你在2020年成為前端專家的專案

2020-10-18 23:35:58 企業開發

本次預計翻譯三篇文章如下：

  • 01.[譯]9個可以讓你在2020年成為前端專家的專案
  • 02.[譯]預加載回應式影像，從Chrome 73開始實作
  • 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構建電影搜索應用程式，下面是應用程式最終的示例圖：

示例專案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應用，創建組件，處理狀態，創建路由，連接到第三方服務，甚至處理身份驗證，

技術堆疊和功能

  • 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

您將學到什么

該專案將教您一些寶貴的技能，例如從頭開始創建應用程式，從設計到開發，一直到生產部署，

技術堆疊和功能

  • 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

您將學到什么

本教程將向您展示如何從頭到尾使用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

您將學到什么

這個示例專案將教您從初始設定到最終部署，如何使用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

您將學到什么

該專案將教您如何構建一個簡單的博客，以開始使用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框架，也可以用于構建移動應用程式，在這個專案中，您將創建一個音頻播放器應用程式，如下所示：

示例專案Quasar

您將學到什么

盡管其他專案主要關注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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179052.html

標籤：JavaScript

上一篇：layui 學習筆記一：layui table 查詢、新增、編輯、洗掉

下一篇：TypeScript入門一：配置TS作業環境

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂