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

Best GitHub Repos for Web Developers

sayanide profile image Sayan Mondal ・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. ✌🏼

Posted on by:

sayanide profile

Sayan Mondal

@sayanide

A coffee lover β˜• and explorer 🌏. In my free time I like to write Code and help the community out.

Discussion

pic
Editor guide
 

Great collection! Thanks! πŸ™‚

 

πŸ’― No problem. Very pleased that you found it helpful.

 
 
 

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.

 

No problem! I only found it recently.

 

Thank you for that!

 

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

I will give credit at the top of the article.

 

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.

 

Yes, of Course.
Thanks very much.

 

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

 

Great content.
Thanks for sharing.

 

Thank you Ousseynou

 

I want my name to be "Sayan" too

 

Nice article, Very Helpful. Thanks

 

I'm glad I could help you Louis!

 

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

 

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

 

Great Collection Sayan! 🀩

 

Thanks a lot!

 
 

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

 

Yeah! It's crazy what you can do with it. Give it a shot πŸ™Œ

 

Super awesome thank you! :)

 

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

 

Thank you Sudheendra! Really Appreciate it. πŸ˜„

 
 

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

 

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

 

Very good, thank you!

 

Trying to do my best. I'm delighted I could help you. πŸ™Œ

 

Very nice collection, thank you! :)

 

Thanks, I plan to add more to it soon. πŸ’―

 
 

You're welcome. 🀩

 

Thanks for this!❀️

 

My pleasure πŸ˜„

 

Great collection! Thanks! :D

 

Thank you for the resources

 

No problem Velda!

 

Great selection of exciting repos. Thanks for sharing!

 

Thanks, there are so many I might have missed, But that's for another post. πŸ’―

 

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

 

I'm glad I could you out Matheus

 

Thank you for this

 

Forked all of them! Thanks

 

Thanks for showing your support. Really appreciate this. 🀩

 

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

 

Great article, thanks!

 

Thank you for sharing this resources

 
 

No problem! πŸ˜„

 

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

 

Yes they did remove jQuery in their latest update