Forem: Yogesh Tewari

5 Ways to make money as a frontend developer

Yogesh Tewari — Wed, 28 Dec 2022 08:17:40 +0000

As a frontend developer, you have a range of options when it comes to making money. Here are some strategies you can consider:

Freelance or contract work: One way to make money as a frontend developer is to offer your services on a freelance or contract basis. This can be a good option if you want the freedom to work on a variety of projects and to set your own rates. To find freelance work, you can search online job boards, reach out to companies directly, or join a freelance platform like Upwork or Fiverr.

Full-time employment: Another option is to work as a full-time frontend developer for a company. This can be a good option if you want the stability and benefits that come with a regular job. To find full-time employment, you can search job listings online, network with industry professionals, or apply directly to companies that interest you.

Start your own business: If you want to be your own boss, you can consider starting your own business as a frontend developer. This could involve offering web design or development services to clients, or creating your own products or tools that you can sell. To get started, you'll need to create a business plan, build a portfolio, and market yourself to potential clients.

Sell your skills online: Another option is to sell your skills online through platforms like Udemy or Skillshare. This can involve creating courses or tutorials that teach others how to code or use specific technologies. To be successful, you'll need to create high-quality content and market your courses effectively.

Contribute to open-source projects: If you enjoy working on open-source projects, you can contribute to these projects and make money through donations or sponsorships. This can be a good way to build your skills and reputation as a developer, as well as to make some extra money.

Overall, the key to making money as a frontend developer is to build a strong skillset, market yourself effectively, and be open to a variety of opportunities. By staying up to date with the latest technologies and continuously learning and improving your skills, you'll be well-positioned to succeed in this field.

List of git commands every frontend developer should know

Yogesh Tewari — Mon, 26 Dec 2022 12:55:28 +0000

Git is a version control system that is widely used by software developers to track changes to their codebase and collaborate with other team members. As a frontend developer, it is important to have a good understanding of how to use Git to manage your code and work effectively with your team.

Here is a list of Git commands that every frontend developer should know:

git init: This command is used to initialize a new Git repository in the current directory. It creates a hidden .git directory that stores all the information about the repository, including a record of all the changes made to the code.
git clone: This command is used to create a local copy of a remote repository. It allows you to download all the code and history from a remote repository and create a new local repository on your computer.
git add: This command is used to stage changes for commit. When you make changes to your code, you can use git add to tell Git that you want to include these changes in the next commit. You can specify which files you want to add using the -A flag, or you can specify individual files by name.
git commit: This command is used to create a new commit in the repository. A commit is a snapshot of the code at a particular point in time, and it includes a message describing the changes that were made. When you make a commit, Git adds the changes you have staged to the repository history.
git push: This command is used to upload your local commits to a remote repository. It sends your commits to the remote repository, where they can be shared with other team members.
git pull: This command is used to download new commits from a remote repository and merge them into your local repository. It is often used to get the latest version of the code from the remote repository and incorporate any changes made by other team members.
git branch: This command is used to create and manage branches in a Git repository. A branch is a separate line of development that allows you to work on new features or bug fixes without affecting the main codebase. You can use the git branch command to create new branches, switch between branches, and merge branches back into the main codebase.
git merge: This command is used to merge one branch into another. It combines the changes from the source branch into the destination branch, and creates a new commit to reflect the merge.
git stash: This command is used to temporarily save changes that you are not ready to commit. It allows you to switch branches or switch to a different task without committing your changes, and then later restore them when you are ready to continue working on them.

By learning and using these Git commands, you can effectively manage your code and collaborate with your team as a frontend developer.

Top vs code extensions for WEB DEVELOPMENT

Yogesh Tewari — Sun, 25 Dec 2022 16:27:20 +0000

There are a lot of great extensions for Visual Studio Code that can help with web development. Here are a few that I recommend:

Live Server - this extension allows you to quickly spin up a local development server, which is useful for testing your web pages and applications.
ESLint - this extension integrates the popular ESLint linter into VS Code, which can help you identify and fix syntax errors and other problems in your code.
Prettier - this extension formats your code according to a set of predefined rules, helping you ensure that your code is consistent and easy to read.
Debugger for Chrome - this extension allows you to debug your JavaScript code in the Chrome browser, making it easier to find and fix bugs.
IntelliSense for CSS class names - this extension provides autocomplete suggestions for class names in your CSS, saving you time and making it easier to work with large stylesheets.
GitLens - this extension adds powerful Git integration to VS Code, including the ability to see blame information and compare commits.
HTML Snippets - this extension provides a set of predefined HTML snippets, making it easier to write common HTML structures like tables and lists.
REST Client - this extension allows you to send HTTP requests and view responses directly from within VS Code, which can be useful for testing APIs and other HTTP-based services.

These are just a few examples, and there are many more extensions available that can help with web development in VS Code.

GetStaticProps vs GetServerSideProps: Next JS Data Fetching

Yogesh Tewari — Sun, 25 Dec 2022 13:58:26 +0000

In Next.js, getServerSideProps and getStaticProps are two functions that you can use to fetch data and populate your pages with that data at build time or on the server. Both of these functions are useful for improving the performance and SEO of your Next.js application by pre-rendering the data on the server and sending the rendered HTML to the client.

However, there are some key differences between getServerSideProps and getStaticProps that you should be aware of:

getServerSideProps

getServerSideProps is a function that you can use to fetch data on the server when a request is made to your Next.js application. This function is called on every request, which means that the data it returns will be fresh and up-to-date.
getServerSideProps is useful for building applications that require real-time data or need to handle sensitive data, such as user sessions or API keys.
getServerSideProps can be used in both server-rendered and statically generated pages.
getServerSideProps is not called during the build process, so any data it fetches will not be pre-rendered at build time. This means that your application will make an additional network request to fetch the data when the page is rendered on the client.

getStaticProps

getStaticProps is a function that you can use to fetch data at build time and pre-render the data on your pages. This means that the data is fetched and the pages are rendered on the server, and the rendered HTML is sent to the client when the page is requested.
getStaticProps is useful for building applications that do not require real-time data or do not need to handle sensitive data.
getStaticProps can only be used in statically generated pages.
getStaticProps is called during the build process, so any data it fetches will be pre-rendered at build time. This means that your application will not need to make an additional network request to fetch the data when the page is rendered on the client.

In summary, getServerSideProps is useful for building applications that require real-time data or need to handle sensitive data, while getStaticProps is useful for building applications that do not require real-time data or do not need to handle sensitive data.
getServerSideProps is called on every request and can be used in both server-rendered and statically generated pages, while getStaticProps is called at build time and can only be used in statically generated pages.

I hope this helps! Let me know if you have any questions or need further clarification.

Next JS vs React: Which one to choose for your frontend ?

Yogesh Tewari — Sun, 25 Dec 2022 13:46:25 +0000

What is Next.js?

Next.js is a framework created by Vercel. It is open-source based on Node.js and Babel and integrates with React for developing single-page apps. This makes server-side rendering very easy.

Next allows you to build a React app that uses server-side rendering to store the content in advance on the server. That way, visitors and search bots interact with the fully pre-rendered HTML page and a fully interactive website or app.

This approach ensures that visitors can see an interactive site in less than three seconds.

Next.js’s built-in configurations and styling solutions simplify development and provide you with templates and website starters to kickstart your web application.

But if you’re feeling adventurous, Next.js gives you the freedom to get under the hood and tweak the configuration to get the most performance out of your app. However, you might not even need to because what you get out of the box is already pretty good.

Here’s a diagram that shows how Nex.js works with React and other tools to render a fully functional web app in seconds.

What is React?

Created by Facebook in 2011 and then open-sourced in 2013, React is a declarative, efficient, and flexible JavaScript library for building interactive user interfaces that are influenced by XHP, an HTML component library for PHP.

React is commonly used to develop web apps that require constant data changes on their UIs. Think of Facebook and Instagram, where you scroll to see new posts and content while most page sections remain the same.

A traditional approach would require the entire website (or app) to reload every time you click on something, which is time-consuming and frustrating for visitors.

React avoids reprocessing every line of code by using pieces of UI called components.

Next.js vs React: Key Differences

So, what are the key differences between Next.js and React? Here are a few:

Purpose: Next.js is a framework that is built on top of React, whereas React is a library for building user interfaces. This means that Next.js provides a set of tools and conventions that make it easy to build and deploy web applications, whereas React is primarily focused on the rendering of UI elements.

Server-Rendering: One of the key features of Next.js is that it is designed to make it easy to build server-rendered applications. This means that Next.js will automatically render your application on the server and send the HTML to the client, which can improve the performance and SEO of your application. React, on the other hand, is primarily focused on client-side rendering, although it can be used to build server-rendered applications as well.

Routing: Next.js includes built-in support for routing, which means that you can easily define the different pages and routes in your application. React, on the other hand, does not include built-in routing support and you will need to use a separate library, such as react-router, to add routing to your application.

Static Generation: Next.js also includes built-in support for static generation, which means that you can pre-render your application and deploy it as a set of static HTML files. This can be useful for improving the performance of your application and making it easier to deploy. React does not include built-in support for static generation, although you can use tools like Gatsby to build static sites using React.

Use React if…

You need highly dynamic routing
You’re already familiar with JSX
You need offline support

Use Next.js if…

You need an all-inclusive framework
You require backend API endpoints
You need server-side rendering