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.
snowpackjs / snowpack
ESM-powered frontend build tool. Instant, lightweight, unbundled development. ✌️
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.
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
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.
- Homepage: https://html5boilerplate.com/
- Source: https://github.com/h5bp/html5-boilerplate
- Twitter: @h5bp
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 likehtml5-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
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 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.
- Most recent build type-checked/linted cleanly:
- All packages are type-checking/linting cleanly on typescript@next:
- All packages are being published to npm in under an hour and a half:
- typescript-bot has been active on Definitely Typed
- Current infrastructure status updates
If…
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
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
IE / Edge |
Firefox |
Chrome |
Safari |
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>
<DatePicker placeholder="select
…7. SWR
React Hooks library for remote data fetching
Introduction
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
solidjs / solid
A declarative, efficient, and flexible JavaScript library for building user interfaces.
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.
- Fastest at Server Rendering in the Isomorphic UI Benchmarks
- 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
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:
- 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 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.
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
Report Bug
·
Request Feature
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!
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)