DEV Community: Ashutosh Mishra

5 Must-Have Cheat Sheets for Frontend Developers in 2025

Ashutosh Mishra — Mon, 17 Mar 2025 10:41:48 +0000

Frontend development is constantly evolving, and staying up to date with the latest tools, frameworks, and techniques is more crucial than ever. Whether you're a beginner or an experienced developer, there are moments when you forget syntax, struggle with layout issues, or spend way too much time searching for the right JavaScript method.

This is where cheat sheets become absolute lifesavers. Apart from relying on endless AI/Google searches or documentation deep dives, having a quick reference guide at your fingertips can boost productivity, reduce coding errors, and streamline your workflow.

Cheat sheets help by summarizing the most essential information in an easy-to-digest format. So, if you want to code smarter, faster, and more efficiently, here are the 5 best cheat sheets you should have in 2025.

1. HTML5 Cheat Sheet

HTML5 remains the foundation of the web, and even though it's one of the simplest languages to learn, developers still get caught up on elements, attributes, and best practices.

This html.com cheatsheet provides a structured overview of all commonly used elements, from basic tags like <div> and <span> to semantic elements like <section>, <article>, and <aside>. As a frontend developer, you need to ensure your code follows the best semantic practices for better SEO, accessibility, and maintainability.

It also covers event handler attributes and a browser support table to help you efficiently build functional and accessible web pages.
Instead of digging through MDN documentation every time, having this well-organized HTML5 cheat sheet can help you recall these elements quickly and use them effectively.

2. Tailwind CSS Cheat Sheet

Tailwind CSS has simplified frontend styling by offering a utility-first approach that eliminates the need for traditional CSS files. However, remembering every class name—especially when working on large projects—can be challenging. This Tailwind CSS cheat sheet provides an instant reference to commonly used utilities, making styling faster and more efficient.

Tailwind's biggest advantage is its atomic classes, which allow you to apply styles directly in your markup without writing custom CSS. But with hundreds of available classes, it's easy to forget the exact syntax. This cheat sheet has organized classes based on categories like layout, typography, spacing, and transitions. Instead of switching back and forth between documentation, you can simply glance at the cheat sheet and continue coding.

Additionally, this cheat sheet covers the latest version of Tailwind CSS, i.e., v4, apart from v3. If you're working with Tailwind CSS, this is the one cheat sheet you can't afford to ignore.

3. CSS Flexbox & Grid Cheat Sheet

Flexbox and Grid are the two most powerful layout models in modern CSS, and knowing when (and how) to use them is a game-changer.

Flexbox is great for one-dimensional layouts, such as aligning elements in a row or column. It provides easy control over spacing, alignment, and responsiveness.

On the other hand, CSS Grid is best for two-dimensional layouts, allowing you to create complex designs with just a few lines of code.

The flex and grid cheat sheet by Maven helps you remember key properties like justify-content, align-items, flex-wrap, grid-template-columns, grid-template-rows, and gap, etc. that are crucial when structuring layouts efficiently.

Instead of wrestling with CSS for hours, this allows you to reference key properties instantly and implement layouts faster. If you've ever spent more time debugging CSS than writing actual code, this cheat sheet is your new best friend.

4. JavaScript ES6+ Cheat Sheet

JavaScript is the backbone of frontend development, and keeping up with its constant updates and new features can feel like chasing a moving target. ES6+ introduced powerful additions like arrow functions, template literals, destructuring, and async/await, all of which significantly improve JavaScript coding efficiency. However, remembering the exact syntax for each feature can be tricky.

Destructuring allows developers to effortlessly extract values from arrays and objects, reducing repetitive code. Arrow functions provide a more concise way to write functions, while template literals make it easier to handle dynamic strings. Another essential ES6+ feature is the introduction of let and const, replacing var for better scoping and readability.

This ES6 cheat sheet provides quick syntax references and examples, making it easier to implement these features without second-guessing yourself.

5. React.js Cheat Sheet

React.js remains the most popular frontend library, and if you're building anything dynamic, chances are you're working with React. However, keeping track of React hooks, component lifecycles, and state management techniques can be overwhelming. The React cheat sheet and React hooks cheat sheet helps you quickly recall essential concepts like props, loops, useEffect, and useContext, making it easier to build powerful and scalable applications.

React hooks eliminated the need for class-based components while improving state management and side effects handling. However, keeping track of all available hooks, their parameters, and how they interact with other components can be tricky. The React hooks cheat sheet simplifies this by providing quick references and best practices.

With these two cheat sheets, you can focus on writing cleaner, more efficient React code, instead of endlessly searching for solutions.

Final Thoughts

Cheat sheets are a game-changer for developers, saving time and reducing frustration. Whether you're working with HTML, CSS, JavaScript, React, or Tailwind CSS, having quick reference guides can drastically improve your efficiency.

Bookmark these cheat sheets, print them out, or keep them open while coding—you'll thank yourself later. 🚀

Turn email designs to code that works even in Outlook, in a single click

Ashutosh Mishra — Thu, 07 Dec 2023 12:25:00 +0000

Introduction

Last week, we publicly launched Kombai For Email, a specialized version of our base model that can code custom HTML emails with 95%+ accuracy. It lets you convert email designs to code that works across all major Email Service Providers(ESPs) and Email Clients(even on Outlook) in a single click.

The Research Preview of our base model was launched on Product Hunt in August 2023. And with all your love and support, we made it to the top earning #1 Product of the Day, #1 Product of the Week, and #1 Product of the Month badges.

Today, we are launching the email version of our base model on Product Hunt. The Figma plugin of our email model was made available to the public last week. Since then, we have got 1000+ users who have created more than 800 sessions on our plugin. So, try our product and show us your love on Product Hunt.

Product Hunt Link: https://kombai.com/launch
Kombai For Email Plugin: https://kombai.com/email

What is Kombai For Email?

Kombai For Email is the specialized email version of the Kombai’s base model. You can access it through our Figma plugin. It helps you generate HTML emails for your designs in a single click. We also let you configure the code and ensure that the output code you receive works well on all major email clients and ESPs.

Getting started with Kombai is easy. Install our Figma plugin from here and follow the below steps:

Open your Figma design and run our plugin.
Select a frame or group you want to convert to code.
Kombai will now generate a preview of the frame/group along with the HTML email code.
Click the ⚙️ (Settings) button(if you have any configurations), make your changes, and save the code.
Click the Download Code button to download the code. Alternatively, you can also copy the code by clicking the Copy HTML button, which comes up when you expand the HTML CSS option.

Features

Preview

Preview tab shows the preview of the generated HTML code. We put all the Kombai-generated code inside an <iframe> and display it in the preview tab so that it mirrors the output code we generated.

We provide multiple common screen dimensions(320px, 360px, 768px, 1280px, etc.) to preview the rendered email. You can also use our percentage-based values(25%, 50%, 75%, 100%, 125%, and 150%), fit-email-height, and fit-device-width to zoom in or zoom out in the preview tab.

Preview tab also contains the following buttons:

Regenerate Code: It syncs the code with the latest design changes.
Send Email: It sends the generated code to your email ID for test.
Settings: It opens the settings for further configuration.
Code: It downloads the code to your computer.

HTML CSS

HTML CSS tab shows the HTML email code that Kombai has generated for your design. You can view and copy the entire code from this tab.

Any configurations you make in the settings will automatically get reflected in this tab.

Email Compatibility

Email Compatibility tab shows the client compatibility and email deliverability of the generated code.

We show a heatmap displaying whether the code is fully supported, majorly supported, or minorly supported in the most popular email clients and operating systems.

We also display email size, template width, and notification of fallback fonts(if used), along with suggestions on how to fix them.

Configurations

Default Kombai-generated code can be configured in the Settings. Once your settings are saved, the HTML CSS tab updates the code to reflect the latest changes.

We support the following configurations in Settings:

Title: This will be added to the <title> inside the <head> element of the HTML.
Preview Text: Preview Text appears next to the subject in the recipient’s email inbox.
Code Minification: If this is turned on, you can copy or download the minified version of the email code.
Output Image Format: You can choose between Linked PNG Files or Base64 Embeds. By default, we use Linked PNG Files due to better support across ESPs and Email Clients.
Autogeneration of Alt text for images: If this is turned on, Kombai will auto-generate alt text for images used in the design.
Fallback for Non-Email safe fonts: For each non-web-safe font used in the design, you can add a fallback font.
Language(Accessibility): Based on the language you select, we'll add the lang and dir attribute to the HTML for better accessibility.
Mobile Responsiveness: Kombai has support for responsiveness in settings. This has been discussed later in the article.

Code Output

Our code output follows the common industry standards for HTML email, like using HTML tables for layout and content and using CSS properties with maximum email client support.

You can either copy the code to the clipboard or download the zip file. The downloaded zip will contain the HTML file index.html and assets folder with PNG images(if Linked PNGs are turned on in the settings).

Content Type Support

Links: Kombai supports linking in designs. If your Figma file has a hyperlink, we’ll add that link in the HTML email code at the right place.
GIFs: We also have support for GIFs in our code.
PNG: We have support for all image formats that are supported by Figma, i.e., JPG, PNG, HEIC, TIFF, WebP, and even SVG. However, we convert all the images to the PNG format as it’s supported by all the major email clients and operating systems. We also crop the part of the original image that is not used in the design and render the remaining used portion at 2x resolution for better display on the retina.
Font: We support all the publicly available fonts in our code. However, if you are using a non-web-safe font, it’s best to also specify a fallback font.

Accessibility

Kombai ensures maximum accessibility for generated code so that there’s less risk of the email getting delivered to spam. We provide settings to add title and preview text, minify code, auto-generate alt text, and add lang and dir attributes to the HTML.

Our code is also tested on Parcel’s Accessibility Checker tool to ensure maximum accessibility.

ESP Support

By design, Kombai-generated code works on all ESPs. However, we have tested our code across 11 major ESPs to ensure the proper functioning of our code.

These ESPs are Klaviyo, Mailchimp, HubSpot, Constant Contact, Active Campaign, Campaign Monitor, Moosend, Brevo, Zoho Campaigns, Mailjet, and GetResponse. For more information, check our Support For ESPs guide.

Email Clients Support

Kombai-generated code works well on all major email clients. This includes Apple Mail(iOS), Apple Mail(macOS), Gmail(Android), Gmail(iOS), Gmail(Webmail), Outlook(Android), Outlook(iOS), Outlook(macOS), Outlook.com, Outlook(Windows), Yahoo(Android), Yahoo(Webmail), and Yahoo(iOS).

We only generate those CSS properties that are supported across the above-listed clients. In case your email design has any property with partial or no support for at least one of the above clients, you can find how to fix them in our Client Compatibility guide.

Mobile Responsiveness

Kombai supports mobile responsiveness in the auto-generated code. We allow you to define a custom breakpoint below which all the responsive configurations will be turned on.

You can set email margins, font size overrides, make content fluid, and stack columns on top of one another. All these settings will be enabled only on the devices below the breakpoint you provide. For more information, visit our Mobile Responsiveness guide.

Support us on Product Hunt

If you are reading this till the end, support our launch on Product Hunt and check out our product. Comment below if you have any questions or feedback.

What are the best AI Frontend tools you have used?

Ashutosh Mishra — Tue, 22 Aug 2023 18:17:24 +0000

To all my frontend friends, I would love to know how much area of your daily workflow is occupied by AI tools?

And what are the best AI tools you have used? Specifically those that help you in frontend development.

6 Best Frontend Communities to Join in 2023

Ashutosh Mishra — Tue, 22 Aug 2023 10:25:06 +0000

If you are thinking to learn to code and become a frontend developer, going alone is not the way. In 2023, there are lots of online developer communities that can scale your learning experience and speed.

In this article, I have come up with the 6 best frontend communities you should join in 2023. So without further ado, let's get started.

Best Frontend Developer Communities

1. Frontend Developers

Frontend Developers is a great Discord community of Frontend Developers. With more than 27k members in August 2023, it's one of the best online communities for frontend devs.

The good thing about Frontend Developers is that the community is focused more on general frontend development and not on any specific frontend framework or tech stack. Therefore, all frontend devs can derive value at least some value from it.

The community has channels for core frontend technologies - HTML, CSS, JavaScript, TypeScript, and PHP. It is more generous on the tooling part having channels for major frontend frameworks like React, Vue, Angular, and Svelte.

Not only this, but it also has a separate design category with channels for UI/UX design and animation. If you are a frontend developer, I see no reason for you to not join this community.

2. WeLearnJS

WeLearnJS is a slack community of JavaScript developers with more than 13,000 members as of August 2023.

Their slack workspace has a total of 10 channels including #angular-talk, #react-talk, and #vuejs-talk to share resources, roadmaps, guides, etc., and ask questions relating to these technologies.

Apart from that, the workspace also has a #chat-room channel for random talks, #codetalk for getting any kind of help related to code issues, a very active #jobs channel to inform you about the latest job postings, and also #server-side-talk to discuss everything about the backend.

The community has more than 12k members so there will also be someone who will read your messages and you can use the community to share your projects, and content, and become friends with other JavaScripters.

3. Reactiflux

Reactiflux is an online Discord community of React developers with a massive size of more than 220,000 members as of August 2023. The community is very niche focused and it's everything about React.

Currently, it is divided into 10 different categories:

Welcome - This category is all about welcoming new members, telling them about the rules of the server, etc.

Need Help - This category has multiple help channels for asking for help react, styling, js, backend, GraphQL, etc.

React General - This category has channels for general talk about React, testing, tooling, internals, accessibility, internationalization, and a forum for asking questions related to React.

Promotions and Events - This category includes promotional channels to share your projects and writings, #events, and #jobs channels to share information about various React events and the latest React job postings. Apart from that, there's also a #q-and-a channel for monthly “q and a” sessions of the community.

Communities - This category is a little off-topic but still very useful. It has a channel to discuss longform blogs, books, etc, a tech forum for asking questions, and a Twitter feed channel with lots of tweets related to React posted by the Reactiflux bot. Apart from that #jobs-advice, #resume-review, and #code-review channels will be very useful for you if you are seeking a job. Finally, there's a #content-creators channel to share your process and work-in-progress if you are a content creator, and 3 other channels, namely, #general-tech, #functional-programming, #ui-ux-design for general discussions around the same topics.

Social - This category is all about making friends and finding like minded people to discuss books, music, gaming, fitness, sports, movies, etc.

Libraries - This category is for discussion around various useful React libraries like React Router, Redux, React Bootstrap, etc.

Tools - This category has 4 channels - #webpack, #gatsby, #typescript, and #next-js to hold discussions around these tools.

Reactiflux - This category is not about the community but about Reactiflux itself. This includes channels for moderation, suggestion, changelog, and a #thanks channel to say thanks to someone who helped you.

Archived - This category includes all the archived channels.

If you are a React developer or thinking to become one, the first thing you should do is join this community server.

4. Emberjs

This is the official discord server for Emberjs, a JavaScript framework. The community channels have lots of categories, I'll summarise the key ones in this article:

Discord Onboarding and Admin - These are 2 different categories for onboarding new members and admin tasks like announcements and ember jobs.

Community Chat - This is the main category of this Discord community and has a long list of channels for almost everything related to development. There are obviously a few ember-related channels like #ember-cli, #ember-data, #ember-engines, etc. Apart from that this category also holds channels for lots of development topics like auth, animation, backend, CSS, design, docker, forms, jamstack, typescript, testing, etc.

Working on Ember - This category is for developers who are working on Ember and has various channels for the same like - #dev-ember-cli, #dev-ember-js, #dev-ember-engines, etc.

Ember Addons - This is the discussion category around various addons to ember, like Ember Bootstrap, Ember Font Awesome, Ember Leaflet, Ember Redux, etc.

Ember Events - This category is for various conferences, fests, and other events related to Ember.

Off Topic - This is the fun community category with various off topic channels like music, games, career, tv-shows, books, career advice etc.

This is a great community for all the Ember developers out there and if you are an Ember developer, join it asap.

5. Vue Land

Similar to the last Ember community, Vue Land is the official Discord server of Vue.js with more than 120,000 members as of August 2023.

The community has 6 main categories:

Vue Land - This is the category for onboarding new members and for admin tasks like announcements.

Vue Community - This is the category for the community with various channels to share your projects, writings, jobs, events, etc.

Code Help - Are you stuck on a problem or having a hard time solving an issue? This is your place to get help with all the things related to Vue and code. This category has multiple channels for various topics. Ask questions on Vue, Vue Router, JavaScript, TypeScript, Backend, etc.

Discussions - This category includes various channels to discuss general Vue, best practices, and random things.

Tools - This category is for discussion around various tools and their implementation with Vue, like storybook, testing, eslint, vitepress, etc.

Languages - This category contains channels for various languages Chinese, Dutch, Hindi, French, German, Finnish, etc. Find your language, join the channel and start the discussion.

Again, join this Discord server if you are a Vue.js developer.

6. Kevin Powell Community

Many of you may know Kevin Powell from his YouTube channel with a lot of amazing content on CSS. He also has a Discord server which is filled with the majority of Frontend developers.

There are 4 main categories in this community server:

Information - This category is all about welcoming new people, Kevin's YouTube feed, announcements, etc.

Community - The community category is for the members to have a general conversation, share memes, self promotion etc.

Dev Help - This category is for asking for help related to HTML/CSS, JavaScript, Accessibility, Backend, Linux, Feedback, and sharing resources and tips and tricks.

Design Help - This category is for people to get feedback on their UI/UX and ask questions about UI/UX in general.

These were the main categories in the server. Apart from them, there are also categories for voice chat, gaming, live stream, and archive channels.

If you are a frontend developer who enjoys building great UI and designs, you should join this community. As of August 2023, it has a total of 28K members.

Conclusion

Here comes the end of our best Discord communities for Frontend Developers. I hope you would have found some great and interesting communities to join. I have shared both general Frontend communities and the ones focused on specific frameworks.

Find the ones relevant to you, join them, make friends and have fun. If you have any questions or want to connect with me, check out my Twitter and Blog.

Happy Coding!

Frontend Devs: What are the favorite tools from your daily workflow?

Ashutosh Mishra — Mon, 21 Aug 2023 11:39:10 +0000

Hello, all frontend developers. I am curious what tools do you use in your daily workflow and how do you benefit from them?

It could be anything a Chrome extension, VS Code Extension, maybe some AI Code writer, whatever you can't live without.

Please tell me in the comments. I am curious to hear your answers.

12 Great Project Ideas for Web and Mobile Developers

Ashutosh Mishra — Mon, 21 Aug 2023 09:47:00 +0000

Everyone knows that project based learning is best. Endless diving in tutorials might be good initially but if you can’t build a project all by yourself, you have not learned much.

Real learning requires practice and whether you want to improve your skills or build a portfolio to get a programming job, the best way to practice is to build projects. Now, what projects you should build is another good question that I will try to answer in this article.

While there’s no universal answer to what kind of projects one should build when learning to code, there are definitely some good project categories and ideas that we are going to discuss in this article.

These projects will help you upskill yourself and create a portfolio of projects as a web developer or mobile app developer that you can show to your future employers in interviews. So without further ado, let’s get started:

Web portfolio projects

1. Landing page

All great products on the internet have their own landing page. As a web developer, knowing how to build great landing pages is the most basic thing. This would require you to know how to build responsive websites and websites that have good design.

Landing pages are static so even if you just know HTML and CSS, you can come up with beautiful landing pages that demonstrate the product best. You can look up Frontend Mentor for landing page ideas.

2. API powered website

Most projects consume some API and if you are serious about building a career as a programmer, you must know how to consume APIs to build better projects.

There are endless ideas that you can make real with APIs. From fun Pokémon projects to Music streaming apps to AI projects(which will discuss later in the article) to whatnot, your creativity is the only limit to what you can build.

3. Clone website

A Clone website could be of any popular websites out there or the ones that you like and use the most. It could be anything like Facebook, YouTube, Instagram, Twitter, Amazon, etc., or even the not so popular ones given that they are somewhat complex to build.

If you can create a clone of such websites, it demonstrates that you can convert good designs into good code. Find what website you want to clone and start building. If you want to take it a step further, create a full-stack clone application with a frontend, API, and database.

4. CRUD application

Most websites have CRUD functionality enabled. CRUD operations allow users to create, read, update, and delete data. Blogs, e-commerce, social media, educational platforms, productivity apps, etc. all have some sort of CRUD functionality enabled.

There are lots of good project ideas under this category like a TO-DO list, Notes App, Chat App, E-Commerce, Social Media website, etc that you can build.

5. AI powered website

AI is booming in 2023 and the best part is that you don’t necessarily need advanced artificial intelligence knowledge to build AI projects. You can build something great on top of great AI APIs available on the internet like Open AI API etc.

Having an AI project in your portfolio is a great step to show your employers that you care about the latest technological developments and can make your way to learning the required skills.

6. Full Stack unique project

This is the sum total of all points we have discussed above. You have built landing pages, API-powered web apps, Clone web apps, CRUD apps, and maybe AI-powered web apps. Now, you have to combine all this and build a unique project. Here you will create a fully functional full-stack project along with a separate landing page. If you can also add AI to it, that would be an extra bonus.

This project should ideally be something you can relate to, an idea you find interesting, or a solution to a problem that you are facing. Once you have finalized the idea, brainstorm and document all the features that you want to add to the web app.

Now, you should start the building process, there are three steps to it:

API endpoints: Create all the API endpoints you need and check if the data is getting saved properly in the database or not.
Frontend: This is where all the users of your web app will land. So try to build the app with good UI/UX that users would love to use.

Landing Page: The landing page doesn’t add anything to your product but it’s for the people who will come to use your project. So make sure, you spend a good time on it.
If you can build a big project like this nicely, it would serve as the best certification of your skills.

Mobile portfolio projects

We have already discussed web projects and most of those project ideas can also be used in the context of apps like building a clone app, CRUD app, AI app, etc. But for this section, we are going to discuss specific project examples so that after you finish reading this article, you will have both specific ideas and broad categories that you can fit your projects under.

1. ECommerce app

ECommerce is rocking both on the web and mobile and we can’t ignore the massive size of this industry. Knowing how to build and maintain e-commerce apps is going to help you a lot as a mobile app developer.

To begin with, you can either clone an existing e-commerce app like Amazon, etc or you can build your own from scratch. Irrespective of what you choose, let’s see some key features that you must add to your app:

Search for a product
Add to cart and checkout
Add your own products
Past purchases
Rate and review products

2. Diet tracker app

Diet Tracker app is an app with lots of potential. You can start this as a simple food logging app and eventually slowly make it bigger and better. Let’s see some features that you can add to this app, sooner or later:

Food logging
Find nutrients by searching the name of a recipe
Diet plan for specific fitness goals
Weight tracking
Water reminder
Progress tracking

3. Personal finance app

Managing finances is a gruesome task and what’s a better way to simplify it than with an app? Let’s discuss some features this app could have:

Record income and expenses
Different categories for income and expenses
Can give tags to a transaction
Budget planning
Charts and graphs to view the cash flow, income, and expenses
Can automate monthly income and fixed expenses
Track your investments

While there’s no end to what you can add to this app, even if you implement the above features, that would make this app a solid project in your portfolio.

4. Movie review app

Apps like IMDb are really popular and fun to build. You have to create a similar app in this section and make sure that you definitely add the following features to it:

Search for a movie
Rate a movie
Write review
Read existing reviews
Follow tags for various genres
Read the description, cast, release date, budget, collection, etc.

While these features would be interesting to implement, don’t forget to differentiate yourself wherever you can. For instance, you can create a niche movie app like Sci-Fi, Comedy, Action, etc.

5. Photo editing app

Unlike other apps mentioned in this section, the Photo editing app is a little different and it will help to diversify the project categories in your portfolio. So, let’s see some features that you can add to the project:

Enhancement options like contrast, brightness, etc.
Create a collage
Add borders and frames
Filters like Grayscale, Lighten, Darken, etc.
Reduce file size
Remove background
AI enhancement

6. Social networking app

Social Networking apps are everyone’s favourite and have a bright future. Building one such project will give your skills and portfolio great improvement and help you shine in front of your employer.

Let’s see some features that you can add to your app:

Create posts with text and images
Comment on other people’s posts
Like/Upvote and Bookmark posts
Follow other people based on interests
Personalised feed
AI-generated posts and images

The AI-generated posts and images are just an additional feature to spark up things that you can consider adding while the rest of the features are basic and you must add them to your project.

Wrapping up

Now that the article is going to end, I hope you are filled with endless ideas for your upcoming projects. You have got both idea categories and specific examples that you can build whether you are a web developer or mobile app developer or both.

Make sure to spend good time on the user interface and user experience of these projects as they should be good enough to be used by real users, great design and experience is the key to acquiring more users to your users.

I hope you enjoyed this article, let me know which project are you going to choose to start your journey. Good luck!

20 Essential Backend Tools For Developers

Ashutosh Mishra — Sat, 19 Aug 2023 09:15:11 +0000

There are two aspects of a website - frontend and backend. Frontend deals with everything that happens on the screen while Backend development involves everything that happens behind the screen. It involves setting up the server, database, APIs, etc., and building and maintaining the infrastructure that powers your web application and so on.

What are the top Backend Development Tools?

We have categorised the further part of the article into multiple sections, covering programming languages, frameworks, databases, containerisation, and backend hosting services to give you a better and more structured understanding of the best backend development tools available in the industry.

Programming Languages

1. JavaScript

JavaScript is the language that powers the web. Any fairly complex dynamic website that is packed with features is almost impossible to create without using JavaScript with such ease.

But the front end is not the only area where JS rocks. With its runtimes like Node.js, Deno, and Bun, JavaScript is also killing in Backend.

In the 2023 Stack Overflow Developer Survey, Node.js even overpowered React in terms of popularity. The best advantage of using runtimes like Node.js is that you don't have to learn a new programming language altogether to work on backend development.

2. Python

Python is one of the most popular programming languages in the world. According to the Stack Overflow Developer Survey 2023, it was the 3rd most used programming language. Developers love Python for its easy syntax and diverse use cases.

It can be used in Web Development, Data Analysis, Machine Learning, the Internet of Things(IoT), and so on.

When it comes to backend development, Python has a bunch of frameworks with Django and Flask leading the way and making Python a really useful language for backend developers.

3. PHP

PHP is a language that came into existence in the days of the early internet. It has made its way into the codebase of popular websites ever since.

It's widely popular for building websites and web applications and has a great number of frameworks that help developers build great websites with Laravel being the most popular.

4. Java

Java, born in the early 90s is one of the most popular programming languages when it comes to building backend applications. It's a high-level, object-oriented programming language that can be used for a variety of purposes like creating desktop and mobile apps, data processing, backend development, and more.

Just like other languages in the list, Java also offers a wide number of frameworks for building robust backend applications. Here, Spring is the most popular backend framework used by developers.

Frameworks

5. Express.js

Express.js is a very popular Node.js framework used for building web applications. It provides developers with a proper set of tools on top of Node.js that makes it easier for them to build scalable backend applications.

It also comes with a vast library of middleware and plugins that make it easy to extend the framework's capabilities. Express along with MongoDB, React, and Node.js also forms that popular MERN stack often used by developers and corporations to build modern full-stack applications.

6. Django

Django is one of the best and most popular backend web frameworks that Python offers. It's a highly secure web framework that can be used to build a wide variety of websites like content management systems, news websites, social media, and more.

Developed between 2003-2005, Django was open-sourced in July 2005 and it has been continuously growing and improving ever since.

7. Flask

Flask is another really popular web framework of Python after Django. It's a microframework created by Armin Ronacher and initially released in 2010. Flask is free from boilerplate code or dependencies which makes it really attractive option for newbie backend developers to learn.

It only comes with the essential components of backend development like routing, requests, sessions, etc. For more functionality, you have to either use an extension or write a custom module.

This approach helps in keeping Flask lightweight and avoiding boilerplate code that is not being used.

8. Laravel

Laravel is the most popular PHP framework that provides developers with a rich set of features like routing, middleware, authentication, and more to help them build efficient backend web applications.

Laravel has an intuitive syntax that is easy to pick up by backend developers. It is also highly customisable and has a range of configuration options available making Laravel a great option for projects that need a high degree of flexibility.

Laravel also has a huge community of developers that contribute to its development and it can be used with a variety of frontend frameworks and database management systems.

9. Spring

Spring is one of the most popular Java backend frameworks used to build enterprise-level applications. It was originally written by Rod Johnson and launched in 2001.

Spring is a lightweight framework that provides support to various other frameworks like Struts, Hibernate, Tapestry, etc, and is used on millions of computers today.

The framework also provides a bunch of unique features like spring web service, data access framework, etc. that make Spring a great choice for any backend developer to learn.

Database

10. MySQL

MySQL is a popular open-source relational database management system heavily used in the industry for building web applications. It is appreciated in the developer community for its speed and reliability.

MySQL is also a highly scalable database that can be scaled up or down depending on the needs of your application.

Along with Linux, Apache, and PHP, MySQL is also part of the popular LAMP stack.

11. PostgreSQL

PostgreSQL is an open-source relational database management system that was born in 1996. It can be used to manage a wide range of workloads, like single computers, data warehouses, and web applications with several concurrent users.

PostgreSQL is ACID-compliant ensuring that all the database transactions are reliably processed. It also includes support for advanced capabilities like full-text search, and spatial indexing. PostgreSQL supports all the major operating systems and a variety of programming languages like C, C++, Java, and Python.

12. MongoDB

MongoDB is one of the most preferred NoSQL database management systems on the internet. It stores data in a JSON-like format called BSON as documents.

This makes MongoDB a really flexible database because as a developer it's going to be easier for you to define schemas when storing complex data structures in the database.

It can be used with multiple languages and frameworks including Python, Java, and Node.js.

13. Firebase

Firebase is a Google-backed backend development platform that helps developers build and ship apps for Android, iOS, and the Web. It was founded in 2011 with its first product, Realtime Database.

It has tremendously evolved over the years and now provides a wide range of tools such as Authentication, Realtime Database, Hosting, Cloud Functions, Cloud Firestore, Cloud Storage, Analytics, and much more. Owing to this, it has become one of the best backend development tools in modern times.

Firebase is used by popular companies like Alibaba, The New York Times, The Economist, Lyft, Trivago, Gameloft, Duolingo, and thousands of developers on their projects.

14. Supabase

Supabase is an open-source Firebase alternative and a backend development tool that helps you quickly build backend for your projects.

It comes with all the necessary backend features like authentication, database, file storage, etc to help you build and scale your application to millions of users.

As a backend development tool, it frees your time and mental space by taking care of all your backend stuff and allowing you to spend more time on business and users' needs.

Containerisation

15. Docker

Docker is a set of platform-as-a-service products that allows you to build, deploy, and run your applications inside containers. Containers are isolated packages with their own software and config files etc. They can communicate with each other through well-defined channels and can be run across platforms that support Docker, including operating systems like macOS, Linux, and Windows.

Docker containers are lightweight and even a single virtual machine can be used to run multiple containers together. Overall, Docker is a great backend development tool for any modern developer to look into.

16. Kubernetes

Kubernetes, also known as K8s, is an open-source container orchestration technology for automating the deployment, scaling, and administration of containerized applications. It was created by Google and is now maintained by the Cloud Native Computing Foundation (CNCF).

Kubernetes provides a strong framework for container management, ensuring that applications run consistently and resiliently. K8s also takes care of scaling your application and supports a number of features like automatic bin packing, self-healing, strong orchestration, and load balancing.

Backend Hosting Services

17. Render

Render is a cloud-based platform that simplifies the process of deploying and hosting web applications. It positions itself as a Heroku alternative with easy usage, better pricing, and simple UI.

It has a set of powerful features like zero-downtime deployments, automatic SSL, and custom domains that makes deploying applications a huge relief.

Render supports a wide range of programming languages, frameworks, and databases and also offers a generous free tier for developers to get started quickly and scale as their needs grow.

18. Fly.io

Fly.io is a Platform as a Service(PaaS) hosting provider for your backend applications. It helps you run your backend servers and databases close to the users without DevOps.

Fly.io runs your applications on top of actual physical servers all around the world with the main focus on deploying the apps as close to the end users.

It provides a range of features like automatic SSL, custom domains, and built-in monitoring and supports a variety of programming languages and frameworks, including Node.js, Ruby, Python, and Go.

19. AWS

Amazon Web Services(AWS) is a cloud computing platform developed by Amazon in 2006. It is one of the most popular cloud computing platforms currently in the world.

It provides you with a range of tools and services to build, deploy, and scale your applications. AWS is designed for scalability and can be used by developers to scale their apps up and down whenever the need arises.

It also provides powerful APIs like Amazon S3 and Amazon DynamoDB to integrate into your projects.

20. Google Cloud

Developed by Google in 2008, Google Cloud is a cloud computing platform that provides developers with all the necessary tools to build, deploy, and scale their applications with ease.

This includes virtual machines, storage, networking, support for machine learning and data analytics, and so on.

Google Cloud supports a long list of programming languages and frameworks including Python, Node.js, and Java. It also provides an intuitive console for developers of various skill levels to help solve issues when they arise.

Parting Thoughts

With this, our article on the best backend development tools has come to an end. We have provided you with a huge list of tools with proper categories.

Now go and explore these tools and tell us which one of them you like the most or tell us if there is some other backend development tool that you like and use but were missing from this list.

Happy Coding!

9 Step Solution to Escape Tutorial Hell Permanently

Ashutosh Mishra — Fri, 18 Aug 2023 11:08:35 +0000

Tutorial Hell is real and it's one of humanity’s worst known sufferings. You can easily find lots of beginner developers burning, out there, in the fire of tutorials.

Fortunately, there's a way out. You can work your way up on the ladder of self learning and project building and this will help you escape tutorial hell. Let me explain how can we do so.

How to really escape Tutorial Hell?

1. Build atomic projects

Great projects are not finished in a day, they are built day by day in small proportions. And you have to do the same if you want to become a great programmer - DON'T BUILD A BIG PROJECT ALL AT ONCE

Initially, what you want is to build a super small project or a bunch of super small projects. These are what I call Atomic Projects.

Try to think of a big website, let's say YouTube.

If we try to break the above image into various small projects, we will see that it has:

A top navbar with logo, search button, notification icon, etc.
A left navbar with YouTube premium, Films, Gaming links, etc.
A topic bar with All, Mixes, Music, JavaScript, etc as topics.
A big section with links to a total of 8 videos.

Each video has its own card like section which includes thumbnail, title, video length, channel name, channel logo, views, and date published.

In the above list, I gave you ideas for 5 different atomic projects instead of one large project. You can build all of them separately and join them together once finished.

Also, use the same mental model to break other big projects that you want to build into smaller chunks.

2. Teach yourself and others

Self-teaching is important. No one else will teach you everything you require. Sometimes teaching yourself also includes teaching others. When you teach something to others, you repeat that concept in your mind which results in a better understanding of it.

If you're thinking that you are not ready to teach others, you might be wrong. If you are even one step ahead of someone else, you are completely ready to teach them about that extra step.

To teach is to learn twice, if you are teaching someone, you'll have to revisit the concepts and communicate in an easy way, which will also give structure to your understanding of that particular concept.

3. Give yourself time

Don't try to cover 100 miles in one step. Sometimes things just take time, especially when you are new to programming. You have to give your brain some time to digest concepts.

If you are trying too hard, you are simply stopping yourself to learn. Take some time and explore other points which I have mentioned in this article. You will find that most of the time those concepts will start to click after that.

4. Learn to solve bugs

Debugging is a lifesaver. If you take some time to learn about debugging and how to solve errors quickly, how to work with browser dev tools, and use console.log() often, your suffering will be somewhat reduced.

No matter how great a developer you become, you will still have bugs. Instead of brooding over writing bug-free code, learn how to solve them quickly.

5. Stare at your code

I know this is what you usually do when you are stuck in tutorial hell but I am not talking about mindlessly looking at your screen. I am talking about thoughtfully staring at your code and thinking

How does your code work?
Can you do something better?
If you are given the chance to write it again, what will you do? etc.

When you think actively on these questions, your brain forms certain connections and neurons which will help you grasp those concepts and make you a rockstar developer.

6. Read the documentation

Give reading documentation a try. You might be too attached to watching videos or text tutorials that you can't do anything without them.

A baby has to eventually learn to walk on their own, and so do you as a developer. Learn to solve your own problems, learn to build your own projects. Documentation will be your best friend on this journey.

You can also go back to the videos or blogs to understand certain concepts if docs don't click with you yet. But try to make your learning smoother without getting into tutorial hell.

7. Ask for help

Asking for help isn't shameful. We all need it at some point in time. If you are really struggling and nothing else is working, try talking to other developers, especially the ones who are senior to you in terms of knowledge and understanding of the concepts. Professional experience is not necessarily required.

Create a Twitter, Showwcase, Slack, and Discord account. Join technical communities there and try to connect with developers who can help you solve your problem. Build a genuine connection with them, and ask your questions if they are ready to help you.

8. Write Technical Blogs

Coding is important, but can you write a technical article explaining those concepts to others? Writing blogs has innumerable benefits. It helps you better understand the topics you are writing about, build your personal brand, differentiate you from other non-blogging developers, and open the door to various professional opportunities.

If you know even a single thing in programming, web development, etc. you are perfectly ready to start your own blog. There are various great platforms that will help you get started:

Hackernoon
Hashnode
Dev.to
Showwcase etc

Don't think much about perfection initially, just post your first blog. You'll learn everything eventually as you write more.

9. Make learning a habit

A career in tech = lifelong learning. You cannot survive long enough if you don't like learning. Sooner or later, you have to fall in love with learning to make your journey smoother.

It may be possible that you are not feeling confident to work on your own projects because you have not understood certain concepts. In that case, go back to the basics and learn those programming concepts again. Once you’re confident, come back to hack your project.

May you escape your tutorial hell successfully

You may find this hard initially but as you practice and work more, you will learn how things work and definitely become a great developer.

I wish you very good luck in your journey of escaping tutorial hell. If you follow the above points seriously, you will most likely get rid of tutorial hell.

Happy Coding!

5 Best Full Stack Communities to Join in 2023

Ashutosh Mishra — Thu, 17 Aug 2023 06:04:07 +0000

Becoming a Full Stack Developer is a great career option in 2022. However, the path is long and could be lonely.

So, here I am with a list of the 5 best Full Stack communities that will keep you accountable and help you learn together with other fellow developers. So without further ado, let's get started.

1. JavaScript Mastery

JavaScript Mastery by Adrian Hajdin is one of the best YouTube and Instagram creators on web development and has a great Discord community of more than 23K developers as of August 2023.

The community is divided into four main categories:

Welcome - The welcome category contains channels for announcements, rules, welcoming new members, etc.

Community - This is the fun community category with various channels to connect with other developers, talk about PC specifications, find your coding partner, and share your accomplishments with the community.

Ask for help - This category is to ask for help with your code-related problems. There are channels for HTML/CSS, JavaScript, TypeScript, ReactJS, Material UI, MERN, Web3, PHP, NodeJS, Firebase, and an #other channel.

Career Corner - The Career Corner category is to get help and guidance related to career questions. This includes the #projects and #portfolios channels to share your projects and portfolios and the #resumes and #interview-questions channel to share your resume and interesting interview questions.

2. Learn w/ Leon & Friends

Learn w/ Leon & Friends by Leon Noel is a great community server of developers. It's also the official server of his 100Devs Bootcamp where he takes people from zero experience to employable MERN stack developers.

The community is mainly divided into seven different categories:

Start Here - This is the category for introductions, welcoming new members, faq, etc.

Learn with Noel - This category contains announcements, follow along material, and Leon's live stream notifications.

Help - This includes channels for HTML/CSS help, JavaScript help, Node help, General code help (including voice channel), #new-need-help channel to ask questions about 100Devs, and #homework-help for 100Devs students.

Main Channels - This category is about asking questions to Leon, general chat, sharing resources, celebrations, mental health, self-promotion, etc.

Getting a Job - This includes a #career-advice channel, #resume-portfolio-review to have your resume and portfolio reviewed, and a #job-openings channel for the latest job openings.

Hangout - Hangout is all about anime, books, memes, pets, gaming, etc.

As of August 2023, the community already has more than 55K developers and if you are a full stack developer and want to connect with more amazing full-stack devs, join this community asap.

3. Commit your Code

Commit your Code by Danny Thompson is a developer community with more than 12.5K developers as of August 2023.

The categories of the Discord server are mainly divided into 3 categories:

Start Here - Just like all other servers, this category is all about introductions, welcoming new members, rules, news, etc.

Main Area - This is the main category of this server and although it won't have any channel for specific technologies like HTML, CSS, JavaScript, etc., it does have lots of useful channels for the community. This includes channels for general chat, coding questions, advanced level questions, resume feedback, data structure problems and solutions, programming tips, job listings, meetups, open source, DevOps, etc.

Non Dev Subjects - This category includes channels for anime, gaming, music, growing online, etc.

If you are a fullstack developer and want to network with other amazing fullstack developers, Commit your Code is your place.

4. Nodeiflux

Nodeiflux is the sister channel of Reactiflux, the largest chatroom for React developers.

It's not a full stack community but focused more on Nodejs and backend but I am including this community in the list because most of the other communities are frontend + backend and having a community completely dedicated to Node.js and backend would balance the list.

There are many categories in this server, but the main two are #general and #community:

General - This category includes channels for general node talk, help node, help js, libraries, ops, general tech, etc.

Community - This category focuses more on the community part and has channels for career questions, code review, software reads, and tech reads.

If you are a Nodejs developer or want to become one, you should definitely check out this community. As of August 2023, Nodeiflux has got more than 13K members.

5. SpeakJS

SpeakJS is a JavaScript community with more than 32K members as of August 2023. This community is the most complete of all the ones I previously mentioned.

There are 10 main categories on this server:

General - The general category is all about collaboration, code review, study groups, server feedback, jobs, and other general things.

Help - This category includes 3 different channels to ask for help.

Libraries and Frameworks - This category has a dedicated channel for all popular libraries and frameworks. It includes channels for React, Angular, Vue, Remix, Svelte, JQuery, Gatsby, Rxjs, and NextJS.

Runtimes - This includes channels for Node and Deno.

Mobile Apps - This category has 2 channels - one for mobile apps and the other for React Native.

Desktop Apps - It includes 3 channels - Desktop apps, Electron, and Nwjs.

3D and Graphics - 3D and Graphics category includes channels for ThreeJS, p5.js, WebGL, and D3js.

Tools - Tools include channels for GraphQL, TypeScript, Bundlers, and Editors.

Other - The Other category includes channels like testing, DevOps, bot dev, game dev, CSS, databases, etc.

Offtopic - Offtopic includes gaming, tech, books, health and fitness, and photography.

Just by looking at the above categories, you get an idea of how diverse this community is. If you are a modern developer, there is no reason for you not to join this community.

Conclusion

The list of the 5 best Full Stack Discord Communities is over, and I hope you’ve found some great and amazing full stack communities to join and network with other developers.

If you have any questions or want to connect with me, reach out to me on X.

Happy Coding!

Originally published here.

React useState() made easy for beginners

Ashutosh Mishra — Wed, 16 Aug 2023 08:26:53 +0000

The React way of dynamically updating a website’s content is different from Vanilla JavaScript. In JavaScript, we do it by directly manipulating DOM whereas, in React, we have a feature called useState.

It is one of the built-in hooks in React. It helps us to declare state variables in Functional Components.

We pass the initial state to the useState hook and in return it gives us a variable with our state value and a function to update the value.

Now let’s compare both ways (JavaScript and React) with an example.

Suppose you’ve been given a bag filled with 5 apples and after some time you are given 7 more apples to put into your bag, now how many apples will you have in your bag?

It's 5+7=12 right?

Let’s see how we can show this example in both JavaScript and React:

The JavaScript Way

I’ve created this repl.it HTML/CSS/JS code template to show this example live, you can access it here.

HTML

<!DOCTYPE html>
<html>
 <head>
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width">
   <title>replit</title>
   <link href="style.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
   <div>
     <p>Apples</p>
     <p class="value">5</p>
     <button>Update values</button>
   </div>
   <script src="script.js"></script>
 </body>
</html>

JavaScript

const value = document.querySelector('.value')
const button = document.querySelector('button')

let realValue = parseInt(value.innerHTML)
let updateValue = () => {
 realValue+=7
 return value.innerHTML = realValue
}
button.addEventListener('click', updateValue)

Code Explanation

We’ve created two HTML paragraphs - apples and 5, added a class called value to 5 to update it later, and created a button called Update values.
In our JavaScript code, We stored the value class and the button into 2 different variables.
Next we used parseInt() function to convert the value of our apples into integers and store it into another variable called realValue.
Then we created a function called updateValue, inside which we first added 7 to the current value of the realValue variable and assigned this updated realValue to the HTML value of our value variable with the help of .innerHTML.
Finally we added the click event listener to our button to call the updateValue function every time the button gets clicked.

The React Way - useState()

Check out the repl of the same app created with React, here.

App.js

import React, {useState} from 'react';
import './App.css';

function App() {

 const [apples, setApples] = useState(5)
 const updateApples = () => {
   return setApples(apples+7)
 }
 return (
   <div>
     <p>Apples</p>
     <p>{apples}</p>
     <button onClick={updateApples}>Update Apples</button>
   </div>
 );
}

export default App;

Code Explanation

We start with importing React and useState from React.

const [apples, setApples] = useState(5)

The snippet above is the standard way of declaring useState. Here useState gives us a variable called apples with the value of 5 as initialized under useState function call and another function called setApples to update the value of apples variable.
Next we declared a function called updateApples which will be called every time someone clicks our Update Apples button which is yet to be declared.

return setApples(apples+7)

In the above snippet, we return setApples() function call and add 7 to the apples variable as an argument. This is how the state is updated in useState.

return (
   <div>
     <p>Apples</p>
     <p>{apples}</p>
     <button onClick={updateApples}>Update Apples</button>
   </div>
 );
}

Now finally we made our return statement. We returned a <div> element with 2 paragraph elements, one for Apples and one for value of apples similar to how we did this in the JavaScript version. The twist here is that instead of directly writing the value, we used the apples variable from the useState() hook to declare the value of apples.
And at last we created a button and attached the updateApples function we declared earlier to the onClick event handler.
Up to this point in the article, we have learned useState() hook, how it works and compared it with DOM manipulation in Vanilla JavaScript. Now before ending this article, we’ll build a Counter App which is the classic example of useState() and React.

Counter App with useState()

Before starting, if you want to know how this app will work, you can check out this repl.

Code

import React, {useState} from 'react';
import './App.css';

function App() {

 const [addCount, setAddCount] = useState(0);
 const [subtractCount, setSubtractCount] = useState(0);

 return (
   <div>
     <p>Your value is {addCount}</p>
     <button onClick={() => setAddCount(addCount + 1)}>
       Add
     </button>

     <p>Your value is {subtractCount}</p>
     <button onClick={() => setSubtractCount(subtractCount - 1)}>
       Subtract
     </button>
   </div>
 );
}
export default App;

Explanation

In our App() function we declared 2 useState() hooks, one for adding up the values in the counter and the other one for subtracting the values as you can see in their names. Both useStates are initialised with the value of 0.
The return statement returns a <div> element with two <p> elements and two <button> elements for our addCount and subtractCount variables.
Both paragraphs show Your value is as a default text followed by their respective state variables, i.e., addCount and subtractCount. These state variables display their current value on the screen.
Then there are two buttons which call their respective setAddCount() and setSubtractCount() functions to add or subtract values from our state variables.

Great, now both the Update Apple and Counter App are finished and I hope you would have understood by now what useState hook is and how it works. If yes, show your love by sharing your thoughts and the article on social media.

Happy Coding ✌️

13 Must Know Libraries for a React Developer

Ashutosh Mishra — Tue, 15 Aug 2023 09:31:04 +0000

Being a modern React developer is not only about understanding the core concepts of React but also about getting well versed with the whole ecosystem of React.

This includes having the knowledge and experience of various React libraries which you can use in your application to make your development process a lot easier.

Even if you don't have the necessary experience working with them, you should at least be aware of their existence and the problem they solve.

So, here are the 13 great React libraries which you should know about as a React developer.

1. TanStack Query

TanStack Query is an open source data fetching library in React developed by Tanner Linsley. It has more than 1.7 million weekly downloads on NPM and more than 35k stars on GitHub as of August 2023.

React doesn't have an opinionated way to fetch data. This leaves developers free to come up with various data fetching methods. Most of the time, it involves the use of useEffect and useState hooks or the use of some general purpose state management library.

TanStack Query gives us a standard way to fetch data in React applications and helps us avoid writing complex logic, reduce lines of code, make our code more maintainable, make our application faster, and so on.

It comes with lots of amazing features to make the data fetching and the development experience in React really awesome. These features include Auto Caching, Auto Refetching, Scroll Recovery, Render-as-you-fetch, etc. You can look up all the features in the below screenshot.

2. Redux

Redux is an open source state management library in JavaScript. It has more than 58K stars on GitHub, and more than 7.8 million weekly downloads on NPM as of August 2023.

According to Redux's official docs, Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time travelling debugger. (Source: Redux)

Features of Redux

Predictable - Helps you write easily testable applications with consistent behaviour across environments.
Centralised - Helps you centralise the state of the application.
Debuggable - It comes up with its own DevTools that make it easy to track the timeline of the application's state.
Flexible - Redux works with any UI layer and has a large ecosystem of addons to fit your needs. (Source: Redux)

It is one of the most popular state management libraries in React and makes building large scale, industrial applications easier.

3. MUI

Any list featuring the best React libraries would be incomplete without adding MUI Core. It's a React styling library that helps you build amazing UIs in no time. The MUI Core contains 4 foundational libraries for building and shipping UI faster-

Material UI: Material UI is a library of React UI components that implements Google's Material Design. (Source: Material UI)
Joy UI: Joy UI is a library of beautifully designed React UI components built to spark joy in the development process. (Source: Joy UI)
Base UI: MUI Base is a library of headless ("unstyled") React UI components and low-level hooks. (Source: Base UI)
MUI System: MUI System is a collection of CSS utilities for rapidly laying out custom designs with MUI component libraries. (Source: MUI System)

With GitHub stars of 88K(August 2023) and weekly NPM downloads of 2.9 million(August 2023), MUI is one of the most popular React UI libraries in the world.

4. React Bootstrap

React Bootstrap is the rebuilt version of our old good friend Bootstrap in React. It's a standalone UI library of Bootstrap components for React with no dependency on bootstrap.js or jQuery.

React Bootstrap offers a library of components with easy to use functionality, statefulness, and default accessibility making it a great choice to start building the UI of our application.

It has more than 21K stars on GitHub and more than 2.4 million weekly downloads on NPM, as of August 2023.

5. React DND

Modern React applications are rarely simple. Almost all industrial applications have some form of drag and drop functionality.

React DnD is a library that helps you build React applications based on drag and drop functionality. To make it possible, it uses the HTML5 drag and drop API under the hood.

The library is fairly simple to use with lots of interesting, and innovative use cases in real world applications. It has more than 19K stars on GitHub and more than 1.8 million weekly downloads on NPM as of August 2023.

6. SWR

SWR by Vercel is the second data fetching library on our list and another great option apart from React Query.

The SWR library is a lot smaller and simpler than React Query yet it provides many amazing features like Reusable Data Fetching, Suspense, Pagination, Built-in cache and so much more.

It has more than 27K stars on GitHub and more than 1.2 million weekly downloads on NPM as of August 2023.

7. React Hook Form

React Hook Form is the king when it comes to building forms in React. It's a high-performant, tiny library without any dependencies and improves your app's performance by reducing your code, isolating re-renders, faster mounting, etc.

According to React Hook Forms' GitHub Readme, it has the following features-

Built with performance, UX, and DX in mind
Embraces native HTML form validation
Out of the box integration with UI libraries
Small size and no dependencies
Supports Yup, Zod, Superstruct, Joi, Vest, class-validator, io-ts, nope, and custom

This project has more than 36K stars on GitHub and more than 3.4 million weekly downloads on NPM as of August 2023. Check out this library before building your next form in React.

8. Recharts

Recharts is an open source charting library built with React and D3. It's lightweight, built on React components, provides Native SVG support, and makes adding charts into React applications painless.

It provides 11 built-in chart components including AreaChart, BarChart, LineChart, PieChart, and so on.

This library has more than 20K stars on GitHub and more than 1.3 million weekly downloads on NPM as of August 2023.

9. React Router

React Router is the most popular library to implement routing in React apps. It has more than 50K stars on GitHub and more than 10 million weekly downloads on NPM and it's built by the same team behind the popular Remix framework of React.

It is a lightweight, fully-featured routing library for the React JavaScript library. React Router runs everywhere that React runs; on the web, on the server (using node.js), and on React Native. (Source: React Router GitHub)

React Router is used by the dev teams at top companies like Microsoft, Netflix, Twitter, Discord, etc.

10. BluePrint

Blueprint is a React-based UI toolkit for the web. It is optimised for building complex, data-dense web interfaces for desktop applications that run in modern browsers and IE11. (Source: Blueprint GitHub)

There are 7 different NPM packages of Blueprint-

blueprintjs/core - This is the core package with various UI components(30+) to handle all the basic UI formation of the app. These components include Card, Button, Spinner, etc.
blueprintjs/datetime - This package helps you interact with dates and times in React. We can use it to select a single date, date ranges, select a time, etc.
blueprintjs/icons - This package provides over 300 vector UI icons to make your React app beautiful.
blueprintjs/popover2 - This package has successor components to Popover and Tooltip of blueprintjs/core.
blueprintjs/select - This package provides React components to select an item or select multiple items in the app.
blueprintjs/table - This package provides an interactive table component for your React app.
blueprintjs/timezone - This package helps you interact with various timezones in the app.

Blueprint has more than 20K stars on GitHub as of August 2023.

11. React Virtualized

React Virtualized is a React library that helps you work with large lists and tabular data efficiently in React. It has more than 25K stars on GitHub and more than 2.5 million weekly downloads on NPM as of August 2023.

This library will come in handy if you are working with large data in your application.

12. React Suite

React Suite is a set of react component libraries for enterprise system products. It is a well-thought-out and developer-friendly UI framework. (Source: React Suite GitHub)

It's a UI library like no other. Each component is very well designed to increase the beauty of your application manifold and give it the touch of excellence.

The library does provide general UI components like Button, Drawer, Pagination, Loader, etc but with way better design and depth than most of the UI component libraries.

It has more than 7K stars on GitHub and more than 60,000 weekly NPM downloads as of August 2023.

13. TailwindCSS

TailwindCSS is a utility-first CSS framework used for rapidly styling websites. It's not a React library but a CSS styling framework and one of the most popular options among React developers to style their applications.

Tailwind makes building UIs super easy with its utility classes like flex, pt-4, text-centre, etc. Each class has pre-defined CSS values which become active once you assign the particular class to a particular JSX element.

For instance, if you assign the className of flex or text-center to a div, the element will become a flex element or have text aligned to the centre.

It has more than 71K stars on GitHub and more than 6 million weekly downloads on NPM as of August 2023.

Parting Thoughts

You don't need to learn all of these libraries to work effectively in React because many of them are used for the same purposes. For instance, MUI, React Bootstrap, and React Suite are all UI component libraries.

So instead of learning all the libraries used for the same purposes, use that time to work with libraries that are used for different purposes. For instance, build a React app that uses React Suite for UI, React Router for routing, React Query for data fetching, and Recharts for rendering charts.

You don't have to use the same tech stack I told in the above para but I hope you get the point. Learn various libraries used for various purposes.

If you have any questions or confusion, reach out to me on X(formerly Twitter).

Where to Find Open Source Projects for Contribution?

Ashutosh Mishra — Mon, 14 Aug 2023 15:23:24 +0000

Note: This article was originally written on January 13th, 2022.

Contributing to open source can be both rewarding and satisfying. It helps you improve your skills, build meaningful connections, and also build your career.

But having that first contribution can be a daunting task to you as a developer who has never contributed to open source before.

I’ve compiled a list of some great platforms that will help you find some cool projects and issues to make their first contribution.

10 Platforms to Find Open Source Projects for Beginners

1. Open Source Guides

Before starting open source, it’s always good to know how to contribute to an open-source project.

Open Source Guides is like a 101 for open-source. This website has guides on 👇 (list below was taken directly from their website)

how to contribute to open source
starting an open-source project
finding users for your project
building welcoming communities
best practices for maintainers
leadership and governance
getting paid for open source work
your code of conduct
open-source metrics
the legal side of open source

I will highly encourage you to give it a read before making your first pull request. It’ll enlighten you on Open Source and various other elements involved in it.

2. Up For Grabs

Up For Grabs maintains a “list of open source projects which have curated tasks specifically for new contributors.” (Source: Up For Grabs)

Filter the projects by labels and tags and check the projects which you find interesting.

3. Ovio Projects

Ovio is a community platform striving to make the open-source ecosystem more collaborative and accessible by empowering developers to contribute. (Source: Ovio)

It gives you access to the curated lists of projects and issues that match your skills and interests.

You have to first create your account and fill your profile to let Ovio know about your skills and interests based on which they will auto-match you with projects and issues.

4. CodeTriage

CodeTriage helps you contribute to open source by “picking a handful of open issues and delivering them directly to your inbox”. (Source: CodeTriage)

After you sign up for CodeTriage, you pick the repos you want to help with, and they will periodically send you issues. They have already helped 63,488 developers contribute to 6,767 Open Source projects to date.

5. First Contributions

First Contributions helps you make your first open-source contribution in five minutes.

To get started, you have to clone their repository locally and then add your name to their Contributors.md file and then push the changes to GitHub.

Once you have done that you can check their extensive list of projects and choose the ones which match your skills and interests.

6. Codetribute

Codetribute is a site that guides contributors to their first contribution. It helps new contributors find a project they want to work with, learn about that project, and then find a task that is suitable to their skills and interests and not already assigned to someone else. (Source: Codetribute GitHub)

You can browse projects and their issues and can also filter issues based on your preferred programming languages. The other good thing about Codetribute is that it lets you find issues with good-first-bugs tag unlike other resources in this article.

7. Hacktoberfest Projects

Hacktoberfest Projects is a website that lets you find eligible projects for Hacktoberfest. Though this website is specifically designed to find Hacktoberfest projects, there’s no rule that you cannot contribute to those projects in other months apart from October.

So check out this site and you may find some great projects here.

8. Good First Issue

Good First Issue website curates the issues with good first issue tag from various open-source projects and displays them with a nice and clean UI.

It’s a great way to find "good first issues" on GitHub which would manually take you a long long time to find. If you're a beginner, I would encourage you more to visit and check this website.

9. First Pull Request

To be honest, this website might not find you open-source projects for contribution but it'll tell you what was the first open-source contribution of your favorite programmers.

First Pull Request as the name suggest asks you the GitHub username of your favorite programmers and in return displays their first pull request.

It's a great website for you to know how many giant programmers you know of started with small contributions.

10. Aviyel

Aviyel is a community-driven monetization platform for open-source projects. They work with open source creators to build and incentivise active communities, achieve financial independence and increase adoption of their projects.

Aviyel is building a knowledge-sharing platform that offers seamless and guaranteed exchange of knowledge, support, and content around open source projects between the open-source community and the businesses and developers who build great products using them. (Source: The Aviyel Manifesto)

Currently, they have onboarded five projects - Docz, Typesense, Mobile Security Framework(MobSF), Chatwoot, and Hoppscotch, you can check them at Aviyel’s website.

Check out the platform and these projects and you may find something interesting.

Parting Thoughts

If you are reading up to this point, chances are you are really serious about getting involved in open source. I wish you good luck with your open source journey.

Reach out to me on X(formerly Twitter) if any of these platforms now or in the future help you make your first open-source contribution. I would love to hear about your journey.

Happy Coding!