9 Popular GitHub Repos For Every Web Developer

src.: 9 Popular GitHub Repos For Every Web Developer by Simon Holdorf


img scr.: insights.dice.com

Useful tools, inspiring examples, and more

GitHub is the one-stop-shop for everything related to (web) development these days. Frameworks, demos, collections of all sorts — there’s probably nothing you cannot find on GitHub. However, this huge quantity of things is the problem. There are cool things you’ll probably never hear about, simply because there are so many repositories available.

So, once again I’ve decided to bring to you some of the most popular GitHub repositories you should know about, each of them having at least ~30,000 stars.

Realworld

The first repository in this list is Realworld. Its creators call it nothing less than “The Mother of all Demo Apps.” A bold statement, for sure, but I don’t think it’s an exaggeration.

Realworld is an exemplary Medium.com clone (yes, the very platform you are probably surfing right now!). But not only that. The repository lets you choose between different front end and back end implementations, which you can happily mix.

Vue.js + Node/Express or React /Redux + Rust? They got it!

Realworld shows you how the exact same blog app is built on almost any popular language or framework. How awesome is that?

You Don’t Know JS Yet

This repository is a popular book series by Kyle Simpson who is widely known under his alias, Getify. The books dive deep into the mechanics of JavaScript and covers the following topics:

  • Get Started

  • Scope & Closures

  • Objects & Classes

  • Types & Grammar

  • Sync & Async

  • ES.Next & Beyond

The best thing? It’s completely free to read! It’s definitely one of the best series about JavaScript and it really helped me to understand what JS is really about. Even if you think you know JavaScript well — read the books! You will be surprised, I promise.

Airbnb JavaScript Style Guide

A mostly reasonable approach to JavaScript.

The Airbnb JavaScript Style Guide is one of the most popular and commonly used style guides out there. It helps you write better JS code and is especially helpful in teams and in combination with ESLint.

Here is an example from the docs regarding the use of const instead of var:

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

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. It supports React, Vue, Angular, React Native, Ember, Web Components, and more!

Storybook runs outside 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.

You can find some great examples here.

HTML5 Boilerplate

HTML5 Boilerplate is a professional, and one of the most popular, front-end templates around the web. It helps you build fast, robust and adaptable websites or apps. Companies like Microsoft, NASA, and Nike use it.

Here are some of the key features:

  • HTML5 ready.

  • Designed with progressive enhancement in mind.

  • Includes:Normalize.css, jQuery and Modernizer

  • Configs that improve the web site’s performance and security.

  • Placeholder CSS Media Queries.

  • Default print styles, performance-optimized.

  • An optimized version of the Google Universal Analytics snippet.

Node.js Best Practices

This repository is a comprehensive collection of various best practices regarding Node.js development. It currently consists of more than 80 best practices, style guides, and architectural tips.

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

It definitely is a great repo and source of information. If you are into Node.js development, check this one out!

Front-End Checklist

Have you ever asked yourself what you need to have or test in your web application before launching it? The Front-End Checklist repository has you covered!

Many of the items listed are mandatory for the majority of projects and organized as follows:

  • Head

  • HTML

  • Webfonts

  • CSS

  • Images

  • JavaScript

  • Security

  • Performance

  • Accessibility

  • SEO

  • Translations

Here’s an example for the Apple Web App MetaData:

<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

NW.js

NW.js is an app runtime based on Chromium and node.js. You can write native apps in HTML and JavaScript with NW.js. It also lets you call Node.js modules directly from the DOM and enables a new way of writing native applications with all Web technologies.

Here are some of the key features:

  • Apps written in modern HTML5, CSS3, JS and WebGL.

  • Complete support for Node.js APIs and all its third-party modules.

  • Good performance: Node and WebKit run in the same thread.

  • Easy to package and distribute apps.

  • Available on Linux, Mac OS X, and Windows.

fullPage.js

fullPage.js by Alvaro Trigo is a simple and easy-to-use library that lets you create SPA (Single Page Applications) and landscape sliders. It’s available for Vue, React and Angular and is fully responsive for mobile devices.

You can find some great examples here.

The library is free to use in open source projects. However, if you want to use it in a commercial environment you have to buy a license.

It looks really cool so check it out!