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.
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.
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 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.
- 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:
-
typescript-bot has been active on Definitely Typed
- Current infrastructure status updates
If anything here seems wrong, or any of the above are failing, please raise an issue in the Definitely Typed Gitter channel.
What are declaration files?
See…
6. Ant Design
A UI Design Language and React UI library
ant-design
/
ant-design
🌈 A UI Design Language and React UI library
Ant Design
✨ 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 date"
…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
ryansolid
/
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.
- 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
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:
- 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.
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.
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.
Contents
- Status
- Example
- Introduction
- Quick start
- Client libraries
- Server
- Contributing
- Releasing
- License
- Credits
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!
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.
Discussion (0)