DEV Community

Iain Freestone
Iain Freestone

Posted on • Edited 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 FredKSchott / snowpack

ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️

Update (April 20, 2022): Snowpack is no longer actively maintained and is not recommended for new projects.

Check out Vite for a well-maintained Snowpack alternative.
See also: esbuild, parcel

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.

Build status LICENSE 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.

About This Repository

This repository is where HTML5-Boilerplate is authored. Some of the tools files and processes that you see here are solely for the production of HTML5 Boilerplate and are not part of HTML5 Boilerplate. For one example, the gulpfile.mjs script is used to build the project. It's not part of the project itself.

The project we publish is represented by the contents of the /dist/ folder. Everything else in this repository is used to author the project.

Think of it this way, in the same way that you…


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 Español, 한국어, Русский, 简体中文, Português, Italiano, 日本語 and Français!

Link to Admin manual

!!! Important! This repo has recently changed layout! !!!

Definitely Typed has recently changed to a proper pnpm monorepo; you may want to reread this document for changes to the layout of packages in this repo.

At the very least, you may want to git clean -fdx the repo (or node ./scripts/clean-node-modules.js on Windows) to clean up node_modules and run pnpm install --filter . to install the workspace root. See further sections for more info on pnpm install.

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.


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

FOSSA Status

Follow Twitter Renovate status dumi Issues need help

Changelog · Report Bug · Request Feature · English · 中文

❤️ Sponsors and Backers

✨ 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 based on CSS-in-JS.

🖥 Environment Support

  • Modern browsers
  • Server-side Rendering
  • Electron
Edge
Edge
Firefox
Firefox
Chrome
Chrome
Safari
Safari
Electron
Electron
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
pnpm add antd
Enter fullscreen mode Exit fullscreen mode

🔨 Usage

import { Button, DatePicker } from 'antd';
export default () => (
  <>
    <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 Data Fetching

SWR


Introduction

SWR is a React Hooks library for 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 request (revalidate), and finally comes with the up-to-date data again.

With just one hook, you can significantly simplify the data fetching logic in your project. And it also covered in all aspects of speed, correctness, and stability to help you build better experiences:

  • Fast, lightweight and reusable data fetching
  • Transport and protocol agnostic
  • Built-in cache and request deduplication
  • Real-time experience
  • Revalidation on focus
  • Revalidation on network recovery
  • Polling
  • Pagination and scroll position recovery
  • SSR and SSG
  • Local mutation (Optimistic UI)
  • Built-in smart error retry
  • TypeScript
  • React Suspense
  • React Native

...and a lot more.

With SWR, components will get a stream of data updates constantly and automatically. Thus…


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.

SolidJS

Build Status Coverage Status

NPM Version Discord Subreddit subscribers

WebsiteAPI DocsFeatures TutorialPlaygroundDiscord

Solid is a declarative JavaScript library for creating user interfaces. Instead of using a Virtual DOM, it compiles its templates to real DOM nodes and updates them with fine-grained reactions. Declare your state and use it throughout your app, and when a piece of state changes, only the code that depends on it will rerun.

At a Glance

import { createSignal } from "solid-js";
import { render } from "solid-js/web";
function Counter() {
  const [count, setCount] = createSignal(0);
  const doubleCount = () => count() * 2;
  
  console.log("The body of the function runs once...");

  return (
    <>
      <button onClick={() => setCount(c => c + 1)}>
        {doubleCount(
Enter fullscreen mode Exit fullscreen mode

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. NOT the repo for the book "Designing Machine Learning Systems"

Machine Learning Systems Design

Read this booklet here.

This booklet was my initial attempt to write about machine learning systems design back in 2019. My understanding of the topic has gone through significant iterations since then. My book Designing Machine Learning Systems (O'Reilly, June 2022) is much more comprehensive and up-to-date. The new book's repo contains the full table of contents, chapter summaries, and random thoughts on MLOps tooling.

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…


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

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

GitHub logo supabase / realtime

Broadcast, Presence, and Postgres Changes via WebSockets


Supabase Logo

Supabase Realtime

Send ephemeral messages, track and synchronize shared state, and listen to Postgres changes all over WebSockets
Multiplayer Demo · Request Feature · Report Bug

Status

Features v1 v2 Status
Postgres Changes GA
Broadcast Beta
Presence Beta

This repository focuses on version 2 but you can still access the previous version's code and Docker image. For the latest Docker images go to https://hub.docker.com/r/supabase/realtime.

The codebase is under heavy development and the documentation is constantly evolving. Give it a try and let us know what you think by creating an issue. Watch releases of this repo to get notified of updates. And give us a star if you like it!

Overview

What is this?

This is a server built with Elixir using the Phoenix Framework that enables the following functionality:

  • Broadcast: Send ephemeral messages from client to clients with low latency.
  • Presence: Track and…

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)