Web developers have to work with different technologies – they need to know more than one language, and they need to know how to use different tools if they have knowledge about different operating systems it helps to add extra merit points to their career.
GitHub is a huge resource space with excellent resources for a wide variety of developers, not just web developers. Framework, demos, and all kinds of ready-made resources can be found and used from GitHub.
With so many resources, finding the one you need is a daunting task. Some developers bookmark a list of their required resources in the browser or store them in Pocket.
Having a list of essential resources that are generally useful can be an advantage for many developers. With that in mind, a list of some essential resources has been created in this post.
Node.js Best Practices
This GitHub repository is a wonderful page to keep yourself refreshed with the NodeJS world and furthermore find out about the best practices while you’re dealing with it. 133 contributors from around the world have worked on it. 40,000 Star Mark of developers proves how important this repository is to them.
This repository summarises a curated list of content on Node.js best practices and how it integrates with other tools like Docker, Kubernetes, etc.
There are more than 80 best practices, style guides, and architectural tips at the time of writing this post.
You can find information about:
- Project Structure Practices
- Error Handling Practices
- Code Style Practices
- Testing And Overall Quality Practices
- Going To Production Practices
- Security Practices
- Performance Practices
Storybook
Storybook is a development environment for creating UI components. It lets you browse the component library, view the different states of each component, and interactively create and test different components. It supports Angular, React, React Native, VueJS, Ember, Web Components, and many more technologies.
The storybook runs outside your app. As a result, you can create useful UI components in a completely different environment. This will increase the reusability of your component, and, moreover, make your app run faster. As a result, you don’t have to worry about whether your component will work in the target environment.
HTML5 Boilerplate
The HTML5 Boilerplate is one of the most popular and professional front-end templates for web developers across the Internet. It helps you create fast, robust, and adaptable websites or apps. Top-notch companies like Microsoft, NASA, and Nike use it.
Some of these widely used features are bundled into a package, arranged as preset code by the standard. Developers usually download this boilerplate as a .zip file. These include:
- Normalize.css
- jQuery with CDN
- Apache Server Configs
- Useful CSS helper classes
- Default print styles, performance-optimized, and more
After downloading the HTML5 Boilerplate, copy and paste it into your project folder and customize it as per your requirement. This will protect you from all the clutter and monotony that you have to do when starting a project and save time.
You Don’t Know JS
The best book series I’ve ever seen to learn the basics of JavaScript very well and deeply is by Kyle Simpson, “You Don’t Know JS Yet (book series) – 2nd Edition”.
Exactly so, while reading this book we may think, I may not know anything about JavaScript.
You can read all the books in this series for free at this GitHub repo.
Airbnb JavaScript Style Guide
When writing JavaScript code, we often wonder if the code we are writing is really of professional quality. Or how do programmers from big companies like Google / Facebook write code?
AIRBNB recommends a style guide to bring a standard to our code writing style. This repository shows you how to declare a variable, and how to write a curly brace – it has created guidelines for many types of syntax writing.
Some notable style guides they recommend:
- Arrow Functions
- Hoisting
- Type Casting & Coercion
- ECMAScript 6+ (ES 2015+) Styles
- Testing
- Performance
Realworld
It is a difficult task for any developer to master the underlying techniques of a new framework and the way it works. For this, you have to read the documentation for hours, and practice by looking at the examples from the official website, if there is any CLI, install it – it is a tedious thing to do such boilerplate works. If you don’t understand them at once, seeing and practicing them again makes the life of the developers miserable.
I remember Shifu, the master of the Kung Fu Panda movie, who taught Po the tricks of Kung Fu. Shifu taught his students practically everything with his long life experience and wisdom. RealWorld will give us a real-life meaningful application for our application by combining the front (React, Vue, Angular …) and backend (Node, Django, etc.) of our application.
The framework can be compared to a Swiss knife. The success of any project depends on its proper use. Although frameworks work based on similar functionality and UX specifications, these frameworks do not work interactively.
Examples of some popular integrations can be:
- Angular + ngrx + nx
- ClojureScript + re-frame
- React / MobX
- Go + Gin
- NestJS + TypeORM/Prisma
A list of many more such frameworks can be found in RealWorld’s original repository. You can take a look from time to time.
Interestingly, these frameworks are adept at creating apps for mobile devices, which are all done with NativeScript.
Take a look at RealWorld’s GitHub repository.
Front-end Checklist
Controlling the quality of web applications is a challenging task for the software team. However, there are automated tools for this, it is a matter of relief. Many may wonder what tools are used to test web applications. The Front-end Checklist repository contains the answer to your question.
This repository lists some items that are essential to big projects to follow. Some notable items are:
- Head
- HTML
- Webfonts
- CSS
- Images
- JavaScript
- Security
- Performance
- Accessibility
- SEO
- Translations
NW.js
If there is a situation where you need to create a native application by typing HTML and JavaScript code, you will find NW.js as your friend. NW.js is an app runtime based on Chromium and node.js. It was previously known as the “node-webkit” project. You can write native apps in HTML and JavaScript with it. It also enables you to call Node.js modules directly from the DOM and lets you write native applications with all Web technologies.
Here are some of the key features of NW.js:
- It let you write apps written in modern HTML5, CSS3, JS, and WebGL.
- It has complete support for Node.js APIs and all its third-party modules.
- NW.js provides good performance: Node and WebKit run in the same thread.
- It is easy to package and distribute your apps.
- Good news! NW.js is available on Linux, Mac OS X, and Windows.
fullpage.js
fullPage.js is fully functional on all modern browsers, as well as some old ones such as Internet Explorer 9, Opera 12, etc. It works with browsers with CSS3 support and with the ones which don’t have it, making it ideal for old browsers compatibility. It also provides touch support for mobile phones, tablets, and touchscreen computers. It is a simple and easy-to-use library that creates fullscreen scrolling websites (also known as single-page websites or one-page sites) and adds landscape sliders inside the sections of the site.
If you are creating an open-source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3. However, if you want to use this library on a commercial basis, the author of the script lets you buy a commercial license.
The page fullPage.js has some eye-catching examples for interested developers.
Conclusion
GitHub is a vast ocean of knowledge, with many repositories for web developers to take inspiration from throughout their lives. In fact, it is not advisable to make a short list of required repositories in an article. This is because a good start to a new developer’s learning journey makes his or her learning task easier.
Outside this list, GitHub also has repositories of tons of exquisite projects. Even after writing this article, more and more amazing repositories are being published on GitHub. Efforts will continue to be made to include them in this list in the future.
However, outside this list, mark the “Star” of your choice in the repository of your choice. All developers have a list of required repositories from GitHub. You can share this list with us.
Leave Your Comment