loading...

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

iainfreestone profile image Iain Freestone Updated on ใƒป2 min read

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 pikapkg / snowpack

The faster frontend build tool. Unbundled web development โœŒ๏ธ

CI

What is Snowpack?

Snowpack is a modern, lightweight toolchain for web application development. Traditional dev bundlers like webpack or Parcel need to rebuild & rebundle entire chunks of your application every time you save a single file. This introduces lag between changing a file and seeing those changes reflected in the browser, sometimes as slow as several seconds.

Snowpack solves this problem by serving your application unbundled in development. Any time you change a file, Snowpack never rebuilds more than a single file. There's no bundling to speak of, just a few milliseconds of single-file rebuilding and then an instant update in the browser via HMR. We call this new approach O(1) Build Tooling. You can read more about it in our Snowpack 2.0 Release Post.

When you're ready to deploy your web application to users, you can add back a traditional bundler like Webpack or Parcel. With Snowpack youโ€ฆ


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

LICENSE Build status 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
  • 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 and Portuguese!

Link to Admin manual

Table of 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 anything here seems wrong, or any of the above are failing, please raise an issue in the Definitely Typed Gitter channel.

Join the chat at https://gitter.im/DefinitelyTyped/DefinitelyTyped

What are declaration files?

Seeโ€ฆ


6. Ant Design

A UI Design Language and React UI library

GitHub logo ant-design / ant-design

๐ŸŒˆ A UI Design Language and React UI library

Ant Design

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

CircleCI status CI status codecov NPM version NPM downloads

david deps david devDeps Total alerts FOSSA Status Issues need help

Follow Twitter Gitter Gitter [SemVer stability]

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
yarn add antd

๐Ÿ”จ Usage

import { Button, DatePicker } from 'antd'
const App = () => (
  <>
    <Button type="primary">PRESS ME</Button&gt
    <DatePicker placeholder="select date"
โ€ฆ

7. SWR

React Hooks library for remote data fetching

GitHub logo vercel / swr

React Hooks library 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<
โ€ฆ

8. Solid

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

GitHub logo ryansolid / 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! Almost indistinguishable performance vs optimized painfully imperative vanilla DOM code. See Solid on JS Framework Benchmark.
  • Small! Completely tree-shakeable Solid's compiler will only include parts of the library you use.
  • Supports modern features like JSX, Fragments, Context, Portals, Suspense, SSR, Error Boundaries and Asynchronous Rendering.
  • Built on TypeScript.
  • Webcomponent friendly
    • Context API that spans Custom Elements
    • โ€ฆ

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

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.

Read

To read the booklet, you can clone the repository and find theโ€ฆ


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 Realtime

Listens to changes in a PostgreSQL Database and broadcasts them over websockets.

Demo

Contents

Status

  • Alpha: Under heavy development
  • Beta: Ready for use. But go easy on us, there may be a few kinks.
  • 1.0: Use in production!

This repo is still under heavy development and the documentation is evolving. You're welcome to try it, but expect some breaking changes. Watch "releases" of this repo to receive a notifification when we are ready for Beta. And give us a star if you like it!

Watch this repo

Example

import { Socket } = '@supabase/realtime-js'
var socket = new Socket(process.env.REALTIME_URL)
socket.connect()
// Listen to all changes to user
โ€ฆ

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.

Posted on by:

iainfreestone profile

Iain Freestone

@iainfreestone

A Web developer from Hampshire in the south of England.

Discussion

pic
Editor guide