DEV Community

Cover image for Best GitHub Repos for Web Developers
Sayan Mondal
Sayan Mondal

Posted on

Best GitHub Repos for Web Developers

Having a list of resources 📚 is always a great thing to have by your side.

Being a coder, it is the need of the hour that we focus on functionality and best practices rather than writing boiler plate code over and over again. Eliminating redundant efforts and investing our time to learn the right tools or getting to know about few amazing resources which can greatly help us out.

In this article we'll look at a few GitHub repositories which can greatly enhance your Web Development skills and also help you write better code.

Node JS Best Practices Cover

Node.js Best Practices

This repository is an amazing place to keep yourself updated with the Node world and also learn about the best practices while you're at it. With over 40k stars and 133 contributors, this repository gets an update almost every single day.

This repository is a summary and curation of the top-ranked content on Node.js best practices and also its integration with other tools like Docker, Kubernetes, etc. It currently has more than 80 best practices, style guides, and architectural tips.

Some common best practices includes -

  • Structuring your Projects better
  • Error Handling Practices
  • Code Style Practices
  • Testing And Overall Quality Practices
  • Going To Production Practices and so much more.

Check out this repo here

HTML5 Boilerplate Cover

HTML5 Boilerplate

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

This project is the product of years of iterative development and community knowledge. It does not impose a specific development philosophy or framework, so you're free to architect your code in the way that you want.

It includes predefined features like -

  • Normalize.css
  • jQuery with CDN
  • Apache Server Configs
  • Useful CSS helper classes
  • Default print styles, performance optimized and more

Depending on what you want to use and how you want to use it, you may have to copy and paste the contents of that folder into your project directory. Thus giving you a already pre-configured starter template to speed up your development time.

Check out this repo here

RealWorld Cover

RealWorld

Mastering the core concepts & ideology of a new framework is unnecessarily frustrating.

From reading the docs 📃, running a contrived example in a codepen, ripping apart example apps & put it back together again to getting their CLI installed locally, its just too much work and in the if you do not get the concept right! Its equally frustrating.

RealWorld allows you to choose any frontend (React, Angular 2, & more) and any backend (Node, Django, & more) and integrate them both to see a real world example of the application.

Since these implementations are responsible for the entire stack, they obviously cannot be mixed and matched but they still adhere to the same functionality & UX specs.

Few Popular Integrations -

  • Angular + ngrx + nx
  • ClojureScript + re-frame
  • React / MobX
  • Go + Gin
  • NestJS + TypeORM/Prisma

And you can find tons more in the original repository. Have fun checking them out!

Not just for the Web but the cool thing is they are available for Mobile as well in the form of NativeScript.

React Native, Jasonette, Swift, C# on Xamarin, Kotlin/Android, Onymos, Quasar framework, Swift Perfect and Flutter are still a work in progress.

Check out the repo here

You Don't Know JS Yet Cover

You Don't Know JS Yet

This is a series of books diving deep into the core mechanisms of the JavaScript language.

All the books are complete free of charge and you can read them online on the repository.

The recommended order of reading the book by the author is -

  • Get Started
  • Scope & Closures
  • Objects & Classes (Work in Progress)
  • Types & Grammar (Work in Progress)
  • Sync & Async (Work in Progress)
  • ES.Next & Beyond (Work in Progress)

Check out this repo here

Airbnb JavaScript Guide Cover

Airbnb JavaScript Guide

This is an extremely precise and professional style guide by Airbnb.

This guide will help you understand JavaScript from the inside out by going deeper into fundamentals along with code snippets to help you along the way.

Some popular topics this style guide touches upon are -

  • Arrow Functions
  • Hoisting
  • Type Casting & Coercion
  • ECMAScript 6+ (ES 2015+) Styles
  • Testing
  • Performance

Check out the repo here

Storybook Cover

Storybook

Storybook 📖 is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components.

Storybook runs outside of your app. This allows you to develop UI components in isolation, which can improve component reuse, testability, and development speed. You can build quickly without having to worry about application-specific dependencies.

It comes together with a CLI and some code examples for you to get accustomed with Storybook.

Check out the repo here

Front End Checklist Cover

Front-End-Checklist

The Front-End Checklist is an exhaustive list of all elements you need to have or to test before launching your website or HTML page to production.

It is a repository which is based on Front End Web Development and focuses more on performance, security, SEO, etc. All items in the Front-End Checklist are required for the majority of the projects, but some elements can be omitted or are not essential.

It contains -
📖: documentation or article
🛠: online tool / testing tool
📹: media or video content

Check out this repo here

Inspiration and Resources

This article was inspired by Tech Sapien and all his amazing work
🔥. The repository pictures 📷 are also taken from the same.

Conclusion

That's all folks 👨‍🏫, Thank you for making it this far down. All the repositories mentioned are not just the only resources available, I'm sure there must be tons of other amazing project out there too. These are the ones that I really found helpful and often get myself indulged into. 👨🏻‍💻

Don't forget to star 🌟 these repositories as a thank you note for all the amazing contributors who put their effort creating these amazing resources for all of us. Peace out. ✌🏼

Top comments (55)

Collapse
 
developertharun profile image
Tharun Shiv

Great collection! Thanks! 🙂

Collapse
 
sayanide profile image
Sayan Mondal

💯 No problem. Very pleased that you found it helpful.

Collapse
 
developertharun profile image
Tharun Shiv

🙂

Collapse
 
codingmaster profile image
Coding Master

Have you heard of tailblocks? mertjf.github.io/tailblocks/

Collapse
 
sayanide profile image
Sayan Mondal • Edited

I haven't actually. From what I saw, it looks like Tailblocks provides lots of different choices for Content based Layouts! I think this could be amazing for faster development, the switch device layout feature is the coolest I think, reduces a lot of time to style it for different platforms making them responsive. I'll surely keep this repo in mind. Thank you for sharing this.

Collapse
 
codingmaster profile image
Coding Master

No problem! I only found it recently.

Collapse
 
pavelloz profile image
Paweł Kowalski

Thank you for that!

Collapse
 
yvettelau profile image
YvetteLau

Nice article!
Can I translate it into Chinese to help more developers?

I will give credit at the top of the article.

Collapse
 
sayanide profile image
Sayan Mondal • Edited

Yeah sure! That'd be great. Could you also forward me the same so that I can post it on my wall as well! That'd help increase the reach of the post for my Chinese friends.

Collapse
 
yvettelau profile image
YvetteLau

Yes, of Course.
Thanks very much.

Collapse
 
yvettelau profile image
YvetteLau

I'm so sorry, I thought I had already replied. The address of the translation is juejin.im/post/5ed5235551882543100... / github.com/YvetteLau/Blog/issues/51

Collapse
 
seokjeon profile image
Se-ok Jeon

Thx for this! This is really what I wanted. Helped A LOT.
Can I translate in Korean this post? If you don't mind, I wanna share this awesome post in Korean. Surely, There will be a linke directing to this original post.

Collapse
 
rishabk7 profile image
Rishab Kumar

Thanks for this!❤️

Collapse
 
sayanide profile image
Sayan Mondal

My pleasure 😄

Collapse
 
xarala221 profile image
Ousseynou Diop

Great content.
Thanks for sharing.

Collapse
 
sayanide profile image
Sayan Mondal

Thank you Ousseynou

Collapse
 
alfredocu profile image
Alfredo Carreón Urbano

Great collection! Thanks! :D

Collapse
 
luismartinezs profile image
Luis Martinez Suarez

I want my name to be "Sayan" too

Collapse
 
louis2688 profile image
Louis Madrigal

Nice article, Very Helpful. Thanks

Collapse
 
sayanide profile image
Sayan Mondal

I'm glad I could help you Louis!

Collapse
 
hooijerik profile image
Erik Hooijer

Wow, thank you!

Collapse
 
sayanide profile image
Sayan Mondal

No problem! 😄