Three articles are expected to be translated as follows:

  • 9 Projects that will Make you a Front End Expert by 2020
  • Preloading responsive images is implemented in Chrome 73
  • 13 Useful JavaScript Array Tricks you should know

Why am I creating this Git repository? Learn and follow up new ideas and technologies of web development by translating foreign Web related technical articles. Git repository address: github.com/yzsunlei/ja…

introduce

Whether you’re new to programming or an experienced developer. In the Internet industry, it is necessary to constantly learn new concepts and languages/frameworks to keep pace with the rapid pace of change. React, for example, was open-source by Facebook four years ago and is now the number one choice for JavaScript developers worldwide. Vue and Angular certainly have their fans. Then there’s Svelte, and generic frameworks like next.js or Nuxt.js, and Gatsby, Gridsome, Quasar, and so on. If you want to become a professional JavaScript developer, you should have at least some hands-on experience with different frameworks and libraries – in addition to working with native JS.

To help you become a Frontend Master in 2020, I’ve collected nine different projects, each with a different theme and a different JavaScript framework or library as a technology stack, that you can build and add to your learning goals. Remember, nothing is better for you than actually building stuff, so sharpen your mind and make it happen!

Build the movie search application with React (using hooks)

First, you can use React to build a movie search application. Here is a sample diagram of the final application:

What will you learn

By building this application, you’ll use the relatively new Hooks API to improve your React skills. The sample project makes use of the React component, hooks, an external API, and of course some CSS styles.

Technology stack and features

  • React with Hooks
  • create-react-app
  • JSX
  • CSS

Without using any classes, this project gives you the perfect entry point for functionality, and will certainly help you in 2020. You can find a sample project here: www.freecodecamp.org/news/how-to… Follow this tutorial, or make it your own!

Use Vue to build chat applications

Another great project for you is to build a chat application using my favorite JavaScript library, VueJS. The application will look like this:

What will you learn

After this tutorial, you’ll learn how to configure a Vue application from scratch, create components, handle state, create routes, connect to third-party services, and even handle authentication.

Technology stack and features

  • Vue
  • Vuex
  • Vue Router
  • Vue CLI
  • Pusher
  • CSS

It’s really a great project to start using Vue or upgrade your existing skills for development in 2020. You can find the tutorial here: www.sitepoint.com/pusher-vue-…

Build beautiful weather apps with Angular 8

This example will help you build a beautiful weather application using Google Angular 8:

What will you learn

This project will teach you valuable skills such as creating an application from scratch, from design to development to production deployment.

Technology stack and features

  • Angular 8
  • Firebase
  • Server side rendering
  • Use grid layout and Flex layout
  • Mobile friendly & responsive
  • Diablo mode
  • Nice UI

What I really like about this comprehensive project is that you don’t just learn things, but the whole development process from design to final deployment. You should really do it! medium.com/@hamedbaato…

Build backlog applications using Svelte

New to React, Vue, and Angular, Svelte Kinda is still one of the hottest topics of 2020. Ok, to-do applications aren’t necessarily the hottest topic there, but this can certainly help you improve your Svelte skills To look like this:

What will you learn

This tutorial will show you how to make an application using Svelte 3 from start to finish. It applies components, styles, and event handlers.

Technology stack and features

  • Svelte 3
  • component
  • Using CSS styles
  • ES 6 grammar

There aren’t many good Svelte programs out there, so I thought this was a good place to start. Who knows, maybe you’re the one creating another, more comprehensive Svelte tutorial that will be covered in next year’s edition of this post? Medium.com/codingthesm…

Build an e-commerce shopping cart with next.js

NextJs is the most popular framework for creating React applications that support applications out of the box. This project will show you how to build an e-commerce shopping cart like this:

What will you learn

In this project, you’ll learn how to set up the Next.js development environment, create new pages and components, get data, style, and deploy the Next application.

Technology stack and features

  • Next.js
  • Components and pages
  • Data acquisition
  • style
  • Deployment way
  • SSR and SPA

It’s always nice to have a real-life example (such as an e-commerce showcase) to learn something new. You can find the tutorial here: snipcart.com/blog/next-j…

Build a complete multi-language blog site nuxt.js

What Nuxt.js does to Vue is mirror next-js. A great framework for combining server-side rendering and single-page application functionality. The final application you can create will look like this:

What will you learn

This sample project will teach you how to build a complete website using Nuxt.js, from initial setup to final deployment. It takes advantage of many of the great features Nuxt has to offer, such as pages and components and SCSS styles.

Technology stack and features
  • Nuxt.js
  • Components and pages
  • Storyblok module
  • Hybrid (Mixins)
  • Vuex status management
  • SCSS style
  • Nuxt middleware

This is a really cool project for you and covers a lot of the great features of Nuxt.js. I personally love using Nuxt, so you should really try it out, because it will also make you a better Vue developer! www.storyblok.com/tp/nuxt-js-…

Use Gatsby to blog

Gatsby is a great static site generator that uses React and GraphQL in the background. Here are the results of the project:

What will you learn

In this tutorial, you’ll learn how to build a great blog using Gatsby and write your own articles while using React and GraphQL.

Technology stack and features

  • Gatsby
  • React
  • GraphQL
  • Plug-ins and themes
  • MDX/Markdown
  • Bootstrap
  • The template

If you want to create a blog, this is a good example of how React and GraphQL can do it. I’m not saying WordPress is a bad choice, but with Gatsby, you can create high-performance sites while using React! Blog. Bitsrc. IO/how-to – buil…

Set up a blog in Gridsome

Gridsome works for Vue, well, we already have it in Next/Nuxt, but Gridsome and Gatsby do too. Both use GraphQL as the data layer, but Gridsome uses VueJS. This is also a great static site generator that will help you create great blogs:

What will you learn

This project will teach you how to build a simple blog to get started using Gridsome, GraphQL, and Markdown. It also shows you how to deploy applications through Netlify.

Technology stack and features

  • Gridsome
  • Vue
  • GraphQL
  • Markdown
  • Netlify

Of course, this isn’t the most comprehensive tutorial, but it covers the basic concepts of Gridsome and Markdown and might be a good place to start. www.telerik.com/blogs/build…

Use the Quasar to build an audio player application similar to SoundCloud

Quasar is another Vue framework that can also be used to build mobile applications. In this project, you will create an audio player application that looks like this:

What will you learn

While other projects focus on Web applications, this one will show you how to create mobile applications using Vue through the Quasar framework. You should already have the Cordova workspace configured and Android Studio/Xcode configured. If not, there is a link to quasar’s site in the tutorial that shows you how to set it up.

Technology stack and features

  • Quasar
  • Vue
  • Cordova
  • Wavesurfer
  • UI components

A small project that demonstrates the power of Quasar in building mobile applications. www.learningsomethingnew.com/how-to-buil…

conclusion

In this article, I show you nine projects that you can build, each focusing on a JavaScript framework or library. Now, the choice is entirely up to you: do you try something new with a previously unused framework? Or do you build your skills by working on projects for technologies that you already have some knowledge of? Or will you rely on your favorite frameworks/libraries and finish all projects in 2020? Feel free to comment and don’t forget to follow me for more upcoming posts!

Dev. to/ Simonholdor…