Sayan Mondal

Posted on May 24, 2020

Best GitHub Repos for Web Developers

#github #webdev #javascript #productivity

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

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

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

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

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

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

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

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