DEV Community

loading...
Cover image for Best GitHub Repos for Web Developers

Best GitHub Repos for Web Developers

Sayan Mondal
A coffee lover ☕ and explorer 🌏. In my free time I like to write Code and help the community out.
・5 min read

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. ✌🏼

Discussion (55)

Collapse
developertharun profile image
Tharun Shiv

Great collection! Thanks! 🙂

Collapse
sayanide profile image
Sayan Mondal Author

💯 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 Author • 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 Author • 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
veldakiara profile image
Velda Kiara

Thank you for the resources

Collapse
sayanide profile image
Sayan Mondal Author

No problem Velda!

Collapse
xarala221 profile image
Ousseynou Diop

Great content.
Thanks for sharing.

Collapse
sayanide profile image
Sayan Mondal Author

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 Author

I'm glad I could help you Louis!

Collapse
carlos487 profile image
Carlos Fabara

Great work, looking forward of a part 2 of this post

Collapse
sayanide profile image
Sayan Mondal Author

Sure! I'm on the hunt to find better repos now 🧐

Collapse
sagnik20 profile image
Sagnik Chattopadhyaya

Great Collection Sayan! 🤩

Collapse
danielnoo profile image
danielnoo

Thanks a lot!

Collapse
davidvalenciait profile image
davidvalencia-it

Thank you!

Collapse
madza profile image
Madza

I knew something like Realworld should exist somewhere, thanks :)

Collapse
sayanide profile image
Sayan Mondal Author

Yeah! It's crazy what you can do with it. Give it a shot 🙌

Collapse
upieez profile image
Samuel Huang

Super awesome thank you! :)

Collapse
sudheendrakv profile image
Sudheendra

Very informative.. One Of the finest collection of Resources related to Web

Collapse
sayanide profile image
Sayan Mondal Author

Thank you Sudheendra! Really Appreciate it. 😄

Collapse
aspokes profile image
Albert Angmor

Awesome

Collapse
roninjosue profile image
Reynaldo Josué Cano Bárcenas

That's its absolutely great, thanks for share it.

Collapse
sayanide profile image
Sayan Mondal Author

Thank you, I'm glad you found it useful. 😁

Collapse
dvaraujo profile image
dvaraujo

Very good, thank you!

Collapse
sayanide profile image
Sayan Mondal Author

Trying to do my best. I'm delighted I could help you. 🙌

Collapse
tumee profile image
Tuomo Kankaanpää

Very nice collection, thank you! :)

Collapse
sayanide profile image
Sayan Mondal Author

Thanks, I plan to add more to it soon. 💯

Collapse
htetlynnhtun profile image
Htet Lynn Htun

Thanks you.

Collapse
sayanide profile image
Sayan Mondal Author

You're welcome. 🤩

Collapse
rishabk7 profile image
Rishab Kumar

Thanks for this!❤️

Collapse
sayanide profile image
Sayan Mondal Author

My pleasure 😄

Collapse
lexoskeleton profile image
lex

Great selection of exciting repos. Thanks for sharing!

Collapse
sayanide profile image
Sayan Mondal Author

Thanks, there are so many I might have missed, But that's for another post. 💯

Collapse
makampos profile image
Matheus de Campos

ohh man, thats I talking about! Thank you so much

Collapse
sayanide profile image
Sayan Mondal Author

I'm glad I could you out Matheus

Collapse
thejayhaykid profile image
Jake Hayes

Thank you for this

Collapse
chandragie profile image
chandragie

Forked all of them! Thanks

Collapse
sayanide profile image
Sayan Mondal Author

Thanks for showing your support. Really appreciate this. 🤩

Collapse
richard457 profile image
Muragijimana • Edited

Best repo for flutter and angular dev github.com/yegobox/flipper

Collapse
ancheetz profile image
ancheetz

Great article, thanks!

Collapse
vincentiroleh profile image
Iroleh Vincent Nwachukwu

Thank you for sharing this resources

Collapse
hooijerik profile image
Erik Hooijer

Wow, thank you!

Collapse
sayanide profile image
Sayan Mondal Author

No problem! 😄

Collapse
andrewbaisden profile image
Andrew Baisden

HTML5 Boilerplate thats a name I have not heard in a long time. It seems that they removed jQuery in their latest version.

Collapse
sayanide profile image
Sayan Mondal Author

Yes they did remove jQuery in their latest update