God level front-end: Part 1 (Introduction to the series)
God level frontend is going to be a full package and a boon in disguise for you if you need to take your front end skills to the next level. This is the first part of the series. In this part, we will discuss the following things
- Prerequisites for the series
- For whom is this series?
- The motivation behind it.
- Content in brief
- How to get the most out of it.
“If opportunity doesn’t knock, build a door” — Milton berle
Having said this, let’s take off on this journey together.
Prerequisites
If you want to follow this series and don’t want to feel lost during the process we would recommend you to at least know the basics of HTML, CSS, and javascript. Also, knowing how these three things work together will be a great plus.
These are the only prerequisites needed for the course. We would recommend you to brush up on these before diving deeper into the forthcoming topics in order to take your frontend skills to the next level.
Who should follow this series?
There is a lot to frontend than just HTML, CSS, and Javascript as will be rightly proved by us in the forthcoming stories in this series.
This series is for everyone from someone who has just started learning frontend to someone who has been working with frontend for a long time and is looking for a good resource to learn all the advance and current technologies in the frontend world. After learning the various things covered in this series you will be able to increase your development speed and make scalable and agile frontend applications.
The motivation behind this series
When we started out as frontend developers we struggled a lot to find some good resources on most of the technologies we will be covering in this series. As a result of this sometimes we reached a standstill. Through this series, we are trying to give back to the community that helped us grow so that developers like us never reach a dead-end in their path of learning.
Also, most of the time young developers are not using some of the great tools out there as they are not aware of them. These tools can help users boost their productivity, make scalable applications, and beautiful websites.
Content of the series
In this series, we will be covering all the tools for the automation of various web-related tasks. You will also learn to create mobile apps, desktop apps, progressive web apps as well as your own “create react app” from scratch (sounds pretty cool, right?) with tools like linters, bundlers, testing tools, react based frameworks, and much more than that. Let’s dive into a bit more detailed content overview. Here we will just mention the topics and why this topic is on the list.
Version control system
Under this topic, we will cover all the basic and essential things about git and GitHub that you must know to work with a team or manage your own projects efficiently using git and GitHub.
We chose git and GitHub over the other options out there because they are the most popular version control tool and platform respectively. We decided to include a version control system as part of this series because it is considered to be the best and the most professional way to manage your work and in this series, we plan to follow the best practices only.
CSS Architecture and preprocessors:
CSS architecture is how you write the CSS for your website and link it to your HTML components. Having a well-defined CSS architecture is essential to keep your project manageable in the future when it contains many stylesheets especially if you are working in a group.
We will be covering BEM(Block Element Modifier) Methodology in this series and then you can later use any other standard methodology or you can even define one for your project. BEM like methodology helps you to write standard CSS code. Not following a proper convention in a project is a big no-no and you do not want to pass on bad code to your colleagues.
CSS pre-processors will provide you with many features like mixins, loops, variables, nested styling, and other such features that don’t come with plain CSS. It will help you to write and edit your code faster as compared to plain CSS but it requires compiling of the SCSS or LESS file to CSS file which obviously can be automated using task runners and module bundlers covered later in this series. Trust me, once you start working with SASS or LESS you will never switch back to CSS ever again.
Package Managers:
In this section, we will cover NPM and YARN which are both node package managers. Package managers are used to import external dependencies. This is the point where you enter the world of NodeJS and in my opinion, NodeJS is the most awesome gift to the developers’ community and in fact, the thing which makes it so awesome is the community itself. One of the cool things about development is that you do not always have to write all your code from scratch. There are some things that you do not need to understand and code yourself as someone else has already done it for everyone else to directly use in their projects. So, why reinvent the wheel? Instead, you can take advantage of the code written by the community and you will need a package manager for this, therefore we have NPM and YARN to the rescue. We will learn a lot more about the awesomeness of the two later in the series. Moreover, we will also cover how to add your own package to the NPM package collection and it will be accessible to the world.
Build tools:
Here comes another super amazing thing, “Build tools”. If you have ever worked with ReactJS and used the create-react-app tool then I hope you know how awesome create-react-app is and it uses the build tools like Webpack, ESlint, etc. Basically build tools will make our lives easier by automating almost everything like SASS compilation, CSS concatenation, minification, detecting errors in JS, and countless other things (Don’t get intimidated by these big words, we’ll cover them all). As a beginner, no will expect you to know all these things but if you know them, your growth will go through the roof, then the clouds, and then it might be roaming somewhere in the outer universe.
Web components:
In simple words, web components are custom HTML tags but actually they are much more than that. Basically, you will be able to create custom elements and you can define their characteristics as well as their functionality which results in a more modular code that can be used in several different contexts.
Typescript:
I don’t know what to say about this one! This is one of the most important things to learn in development, It will make your code easier to read, understand, debug, and will make your code less error-prone as compared to plain javascript code. You might argue, we learn from the errors that we make. In my defense, I would say you can’t afford a silly error in production. Don’t worry typescript has your back, it will let you learn even more as well as help you code with fewer errors. Typescript eventually trans-compiles to Javascript. Over the past year, typescript has gained immense popularity and is one of the most in-demand skills. I hope this gets you excited to learn this one.
Modern ways of writing javascript
This will be an introduction to JSX and you will learn a lot more about it in ReactJS. The code which is written in JSX eventually gets converted to JS.
React JS
Here comes the bad boy. Wait, wait! All the Angular and VueJS fans, there is a reason we are covering ReactJS in this series, which is, it will form the basis for a lot more things like React-Native, GatsbyJS, NextJS, etc. Hopefully, you know the importance of ReactJS already as you will also be able to make Android and IOS applications using ReactJS based React Native. Hence, you can become a mobile app developer too without all the hassles of learning a new language like Java, Swift, Dart, or Kotlin.
Desktop app development:
By far you will have a good knowledge of NodeJS, here we will cover some more core concepts of NodeJS and then dive right into Desktop application development using ElectronJS.
FYI: Visual studio code was made using ElectronJS.
Other topics to be covered are:
- GatsbyJS
- NextJS
- React Native
- Progressive Web Applications (PWA)
- GraphQL
How to get the most out of this series?
We would recommend you to stay tuned and follow us closely as we will be regularly posting new content. In order to get the most out of this series, do not just read through it but also code along with us. Try to regularly modify the code given by us and introduce your own unique changes. Make mistakes and learn from them. If you ever get stuck anywhere “The Developers’ Home” is there for you. You can reach out to us on thedevelopershomepublication@gmail.com . You can contact us even if you want to share some interesting code snippets or projects made by you. We are also always open to constructive criticism. Also, let us know if there is any other topic you would like us to cover. We hope you have as much fun learning with us as we are having making this for you.
So at the end of this series, you will be God level front end developer who can create Web, Android, IOS, and desktop applications.
