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. βπΌ
Top comments (55)
Great collection! Thanks! π
π― No problem. Very pleased that you found it helpful.
π
Have you heard of tailblocks? mertjf.github.io/tailblocks/
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
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.
Thanks for this!β€οΈ
My pleasure π
Great content.
Thanks for sharing.
Thank you Ousseynou
Great collection! Thanks! :D
I want my name to be "Sayan" too
Nice article, Very Helpful. Thanks
I'm glad I could help you Louis!
Wow, thank you!
No problem! π