DEV Community

Iain Freestone
Iain Freestone

Posted on • Updated on • Originally published at iainfreestone.com

๐Ÿš€10 Trending projects on GitHub for web developers - 5th June 2020

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

Following on from last week Responsively App, Node Best Practices, Algorithm Visulaizer, JS Algorithms and Real World continue to trend well so have been omitted from this post. See last weeks post for more details.

1. Snowpack

A faster build system for the modern web.

GitHub logo snowpackjs / snowpack

ESM-powered frontend build tool. Instant, lightweight, unbundled development. โœŒ๏ธ

CI Join us on Discord!

Snowpack

Snowpack is a lightning-fast frontend build tool, designed to leverage JavaScript's native module system (known as ESM). It is an alternative to heavier, more complex bundlers like webpack or Parcel in your development workflow.

Key Features

๐Ÿ’ More info at the official Snowpack website โžž


Contributor Guidelines: CONTRIBUTING.md
License: MIT





2. HTML5 Boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.

GitHub logo h5bp / html5-boilerplate

A professional front-end template for building fast, robust, and adaptable web apps or sites.

HTML5 Boilerplate

Build status LICENSE devDependency Status NPM Downloads github-stars-image

HTML5 Boilerplate is a professional front-end template for building fast, robust, and adaptable web apps or sites.

This project is the product of over 10 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.

Quick start

Choose one of the following options:

  • Download the latest stable release from html5boilerplate.com. This zip file is a snapshot of the dist folder. On Windows, Mac and from the file manager on Linux unzipping this folder will output to a folder named something like html5-boilerplate_v7.3.0. From the command line will need to create a folder and unzip the contents into that folder.

    mkdir html5-boilerplate
    unzip html5-boilerplate*.zip -d html5-boilerplate
    Enter fullscreen mode Exit fullscreen mode
  • Clone the git repo โ€” git clone https://github.com/h5bp/html5-boilerplate.git - and checkout the taggedโ€ฆ


3. Air BnB JavaScript Styleguide

JavaScript Style Guide

GitHub logo airbnb / javascript

JavaScript Style Guide

Airbnb JavaScript Style Guide() {

A mostly reasonable approach to JavaScript

Note: this guide assumes you are using Babel, and requires that you use babel-preset-airbnb or the equivalent. It also assumes you are installing shims/polyfills in your app, with airbnb-browser-shims or the equivalent.

Downloads Downloads Gitter

This guide is available in other languages too. See Translation

Other Style Guides

Table of Contents

  1. Types
  2. References
  3. Objects
  4. Arrays
  5. Destructuring
  6. Strings
  7. Functions
  8. Arrow Functions
  9. Classes & Constructors
  10. Modules
  11. Iterators and Generators
  12. Properties
  13. Variables
  14. Hoisting
  15. Comparison Operators & Equality
  16. Blocks
  17. Control Statements
  18. Comments
  19. Whitespace
  20. Commas
  21. Semicolons
  22. Type Casting & Coercion
  23. Naming Conventions
  24. Accessors
  25. Events
  26. jQuery
  27. ECMAScript 5 Compatibility
  28. ECMAScript 6+ (ES 2015+) Styles
  29. Standard Library
  30. Testing
  31. Performance
  32. Resources
  33. In the Wild
  34. Translation
  35. The JavaScript Style Guide Guide
  36. Chat With Us About JavaScript
  37. Contributors
  38. License
  39. Amendments

Types

  • 1.1 Primitives: When you access a primitive type you workโ€ฆ


4. Mostly Adequate guide to Functional JS

GitHub logo MostlyAdequate / mostly-adequate-guide

Mostly adequate guide to FP (in javascript)

cover

About this book

This is a book on the functional paradigm in general. We'll use the world's most popular functional programming language: JavaScript. Some may feel this is a poor choice as it's against the grain of the current culture which, at the moment, feels predominately imperative. However, I believe it is the best way to learn FP for several reasons:

  • You likely use it every day at work.

    This makes it possible to practice and apply your acquired knowledge each day on real world programs rather than pet projects on nights and weekends in an esoteric FP language.

  • We don't have to learn everything up front to start writing programs.

    In a pure functional language, you cannot log a variable or read a DOM node without using monads. Here we can cheat a little as we learn to purify our codebase. It's also easier to get started in thisโ€ฆ


5. Definitely Typed

The repository for high quality TypeScript type definitions.

GitHub logo DefinitelyTyped / DefinitelyTyped

The repository for high quality TypeScript type definitions.

Definitely Typed

The repository for high quality TypeScript type definitions.

You can also read this README in Spanish, Korean, Russian, Chinese, Portuguese, Italian and Japanese!

Link to Admin manual

Contents

Current status

This section tracks the health of the repository and publishing process It may be helpful for contributors experiencing any issues with their PRs and packages.

Ifโ€ฆ


6. Ant Design

A UI Design Language and React UI library

GitHub logo ant-design / ant-design

An enterprise-class UI design language and React UI library

Ant Design

An enterprise-class UI design language and React UI library.

CI status codecov NPM version NPM downloads

david deps david devDeps Total alerts

Follow Twitter FOSSA Status Discussions Issues need help

English | Portuguรชs | ็ฎ€ไฝ“ไธญๆ–‡ | ะฃะบั€ะฐั—ะฝััŒะบะพัŽ

โœจ Features

  • ๐ŸŒˆ Enterprise-class UI designed for web applications.
  • ๐Ÿ“ฆ A set of high-quality React components out of the box.
  • ๐Ÿ›ก Written in TypeScript with predictable static types.
  • โš™๏ธ Whole package of design resources and development tools.
  • ๐ŸŒ Internationalization support for dozens of languages.
  • ๐ŸŽจ Powerful theme customization in every detail.

๐Ÿ–ฅ Environment Support

  • Modern browsers and Internet Explorer 11 (with polyfills)
  • Server-side Rendering
  • Electron
IE / Edge
IE / Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
IE11, Edge last 2 versions last 2 versions last 2 versions last 2 versions

๐Ÿ“ฆ Install

npm install antd
Enter fullscreen mode Exit fullscreen mode
yarn add antd
Enter fullscreen mode Exit fullscreen mode

๐Ÿ”จ Usage

import { Button, DatePicker } from 'antd';
const App = () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

7. SWR

React Hooks library for remote data fetching

GitHub logo vercel / swr

React Hooks for remote data fetching

SWR


Introduction

swr.vercel.app

SWR is a React Hooks library for remote data fetching.

The name โ€œSWRโ€ is derived from stale-while-revalidate, a cache invalidation strategy popularized by HTTP RFC 5861 SWR first returns the data from cache (stale), then sends the fetch request (revalidate), and finally comes with the up-to-date data again.

It features:

  • Transport and protocol agnostic data fetching
  • Fast page navigation
  • Revalidation on focus
  • Interval polling
  • Request deduplication
  • Local mutation
  • Pagination
  • TypeScript ready
  • SSR support
  • Suspense mode
  • React Native support
  • Minimal API

...and a lot more.

With SWR, components will get a stream of data updates constantly and automatically. Thus, the UI will be always fast and reactive.


Quick Start

import useSWR from 'swr'
function Profile() {
  const { data, error } = useSWR('/api/user', fetcher)

  if (error) return <div>failed to load<
โ€ฆ
Enter fullscreen mode Exit fullscreen mode

8. Solid

A declarative, efficient, and flexible JavaScript library for building user interfaces

GitHub logo solidjs / solid

A declarative, efficient, and flexible JavaScript library for building user interfaces.

Solid

Build Status Coverage Status NPM Version Discord Subreddit subscribers

Solid is a declarative JavaScript library for creating user interfaces. It does not use a Virtual DOM. Instead it opts to compile its templates down to real DOM nodes and wrap updates in fine grained reactions. This way when your state updates only the code that depends on it runs.

Key Features

  • Real DOM with fine-grained updates (No Virtual DOM! No Dirty Checking Digest Loop!).
  • Declarative data
    • Simple composable primitives without the hidden rules.
    • Function Components with no need for lifecycle methods or specialized configuration objects.
    • Render once mental model.
  • Fast
  • Small! Completely tree-shakeable Solid's compiler will only include parts of the library you use.
  • Supports and is built on TypeScript.
  • Supports modern features like JSX, Fragments, Context, Portals, Suspense, Streaming SSRโ€ฆ

9. Machine Learning Systems Design

A booklet on machine learning systems design with exercises

GitHub logo chiphuyen / machine-learning-systems-design

A booklet on machine learning systems design with exercises

Machine Learning Systems Design

Read this booklet here.

This booklet covers four main steps of designing a machine learning system:

  1. Project setup
  2. Data pipeline
  3. Modeling: selecting, training, and debugging
  4. Serving: testing, deploying, and maintaining

It comes with links to practical resources that explain each aspect in more details. It also suggests case studies written by machine learning engineers at major tech companies who have deployed machine learning systems to solve real-world problems.

At the end, the booklet contains 27 open-ended machine learning systems design questions that might come up in machine learning interviews. The answers for these questions will be published in the book Machine Learning Interviews. You can look at and contribute to community answers to these questions on GitHub here. You can read more about the book and sign up for the book's mailing list here.

Contribute

This is work-in-progress so any type ofโ€ฆ


10. Realtime - https://github.com/supabase/realtime

Listen to your to PostgreSQL database in realtime via websockets. Built with Elixir.

GitHub logo supabase / realtime

Listen to your to PostgreSQL database in realtime via websockets. Built with Elixir.


Supabase Logo

Supabase Realtime

Listens to changes in a PostgreSQL Database and broadcasts them over websockets
Report Bug ยท Request Feature

Supabase Realtime Demo

Hiring

Supabase is hiring Elixir experts to work full-time on this repo. If you have the experience, apply online.

Project Status

  • Alpha: Under heavy development
  • Public Alpha: Ready for use. But go easy on us, there may be a few kinks.
  • Public Beta: Stable enough for most non-enterprise use-cases
  • Public: Production-ready

This repo is still under heavy development and the documentation is constantly evolving. You're welcome to try it, but expect some breaking changes. Watch "releases" of this repo to get notified of major updates. And give us a star if you like it!

Watch this repo

Introduction

What is this?

This is a server built with Elixir using the Phoenix Framework that allows you to listen to changes in your PostgreSQL database via logical replication and then broadcast those changes via websockets.

โ€ฆ


Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

If you enjoyed this article you can follow me on Twitter where I regularly post bite size tips relating to HTML, CSS and JavaScript.

Top comments (0)