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.
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
- Develop faster, with a dev server that starts up in 50ms or less.
- See changes reflected instantly in the browser.
- Integrate your favorite bundler for a production-optimized build.
- Enjoy out-of-the-box support for TypeScript, JSX, CSS Modules and more.
- Connect your favorite tools with third-party plugins.
💁 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.
h5bp / html5-boilerplate
A professional front-end template for building fast, robust, and adaptable web apps or sites.
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
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.
This guide is available in other languages too. See Translation
Other Style Guides
Table of Contents
- Types
- References
- Objects
- Arrays
- Destructuring
- Strings
- Functions
- Arrow Functions
- Classes & Constructors
- Modules
- Iterators and Generators
- Properties
- Variables
- Hoisting
- Comparison Operators & Equality
- Blocks
- Control Statements
- Comments
- Whitespace
- Commas
- Semicolons
- Type Casting & Coercion
- Naming Conventions
- Accessors
- Events
- jQuery
- ECMAScript 5 Compatibility
- ECMAScript 6+ (ES 2015+) Styles
- Standard Library
- Testing
- Performance
- Resources
- In the Wild
- Translation
- The JavaScript Style Guide Guide
- Chat With Us About JavaScript
- Contributors
- License
- Amendments
Types
-
1.1 Primitives: When you access a primitive type you work…
4. Mostly Adequate guide to Functional JS
MostlyAdequate / mostly-adequate-guide
Mostly adequate guide to FP (in javascript)
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.
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.
- Most recent build type-checked/linted cleanly:
- All packages…
6. Ant Design
A UI Design Language and React UI library
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.
Changelog · Report Bug · Request Feature · English · 中文
✨ 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
📦 Install
npm install antd
yarn add antd
pnpm add antd
🔨 Usage
import { Button, DatePicker } from 'antd';
export default () => (
<>
<Button type="primary">PRESS ME</Button>
<DatePicker placeholder="select
…7. SWR
React Hooks library for remote data fetching
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
solidjs / solid
A declarative, efficient, and flexible JavaScript library for building user interfaces.
Website • API Docs • Features Tutorial • Playground • Discord
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(
…9. Machine Learning Systems Design
A booklet on machine learning systems design with exercises
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:
- Project setup
- Data pipeline
- Modeling: selecting, training, and debugging
- 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.
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)