The Best GitHub Repos for Web Developers

WebTechRiser.com > Productivity > The Best GitHub Repos for Web Developers

Web developers have to work with different technologies – they need to know more than one language, 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, 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

NodeJS 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

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.

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

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 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

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, 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

RealWorld example apps

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, 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 boiler plate 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 frontend (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

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

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 “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 let you write native applications with all Web technologies.

Here are some of the key features of NW.js:

  • It let you to 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 touch screen 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 let 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 a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.