Comlink

Comlink makes WebWorkers enjoyable. Comlink is a tiny library (1.1kB), that removes the mental barrier of thinking about postMessage and hides the fact that you are working with workers.

At a more abstract level it is an RPC implementation for postMessage and ES6 Proxies.

$ npm install --save comlink

Browsers support & bundle size

Browsers without ES6 Proxy support can use the proxy-polyfill.

Size: ~2.5k, ~1.2k gzip’d, ~1.1k brotli’d

Introduction

On mobile phones, and especially on low-end mobile phones, it is important to keep the main thread as idle as possible so it can respond to user interactions quickly and provide a jank-free experience. The UI thread ought to be for UI work only. WebWorkers are a web API that allow you to run code in a separate thread. To communicate with another thread, WebWorkers offer the postMessage API. You can send JavaScript objects…

Installation

npm install @notionhq/client

Usage

Use Notion's Getting Started Guide to get set up to use Notion's API.

Import and initialize a client using an integration token or an OAuth access token.

const { Client } = require("@notionhq/client")
// Initializing a client
const notion = new Client({
  auth: process.env.NOTION_TOKEN,
})

Make a request to any Notion API endpoint.

See the complete list of endpoints in the API reference.

;(async () => {
  const listUsersResponse = await notion.users.list()
})()

Each method returns a Promise which resolves the response.

console.log(listUsersResponse)

{
  results: [
    {
      object: 'user'
      id: 'd40e767c-d7af-4b18-a86d-55c61f1e39a4',
      type: 'person',
      person: {
        email: 'avo@example.org',
      },
      name:

Capacitor is a cross-platform API and code execution layer that makes it easy to call Native SDKs from web code and to write custom native plugins that your app may need. Additionally, Capacitor provides first-class Progressive Web App support so you can write one app and deploy it to the app stores and the mobile web.

Capacitor comes with a Plugin API for building native plugins. Plugins can be written inside Capacitor apps or packaged into an npm dependency for community use. Plugin authors are encouraged to use Swift to develop plugins in iOS and Kotlin (or Java) in Android.

Getting Started

Capacitor was designed to drop-in to any existing modern web app. Run the following commands to initialize Capacitor in your app:

npm install @capacitor/core @capacitor/cli
npx cap init

Next, install any of the desired native platforms:

npm install @capacitor/android

daisyUI

• 👉 [ See all components ]
• 📘 Documents: daisyui.com
• 🎲 Try it online: Tailwind Play | Codepen
• 📦 Source: GitHub | NPM | Unpkg | JSdeliver | cdnjs

🌼 Features

Stacking behaviour	Dismiss oldest when reached maxSnack (3 here)

Table of Contents

• How to use
• Online demo
• Documentation
• Redux / Mobx support

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

How to use

1: Wrap your app inside a SnackbarProvider component: (see docs for a full list of available props)
Note: If you're using material-ui ThemeProvider, make sure SnackbarProvider is a child of it.

import { SnackbarProvider } from 'notistack';

<SnackbarProvider maxSnack={3}>
    <App />
</SnackbarProvider>

2: Export any component that needs to send notification using withSnackbar. By doing this, you'll have access to…

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances
Unlike some popular plugins, SimpleBar doesn't mimic scroll with Javascript, causing janks and strange scrolling behaviours
You keep the awesomeness of native scrolling...with a custom scrollbar

SimpleBar does NOT implement a custom scroll behaviour. It keeps the native overflow: auto scroll and only replace the scrollbar visual appearance.

Design it as you want

SimpleBar uses pure CSS to style the scrollbar. You can easily customize it as you want! Or even have multiple style on the same page...or just keep the default style ("Mac OS" scrollbar style).

Lightweight and performant

Only 6kb minified. SimpleBar doesn't use Javascript to handle scrolling. You keep the performances/behaviours of the native scroll.

Supported everywhere

SimpleBar has been tested on the following browsers: Chrome, Firefox, Safari, Edge, IE11.

Getting started

The easiest way to use SimpleBar…

govuk-react

An implementation of the GOV.UK Design System in React using CSSinJS using Object notation (with styled-components).

We aim to track the following projects (in priority order) as to which components to implement and how they should look/behave. Where possible we are using the existing CSS as a guide. When we need to modify to suit custom markup, we aim to provide a comment in our code as to why this was done.

• GOV.UK Frontend
• GOV.UK Design System (source)
• GOV.UK Design System Backlog (where there are open tickets in the backlog that reference patterns/components in existing govuk sites)
• GOV.UK/elements
• GOV.UK Publishing Components
• Any other established govuk pattern

This project is being or has been used by:

• Department for Education
• Department for International Trade 2 3 4
• Department of Business, Energy and Industrial Strategy
• Department of Health
• Food Standards Agency 2
• HM Land Registry
• HM Passport Office
• HM…

high power tools for HTML

introduction

htmx allows you to access AJAX, CSS Transitions WebSockets and Server Sent Events directly in HTML, using attributes, so you can build modern user interfaces with the simplicity and power of hypertext

htmx is small (~10k min.gz'd) dependency-free extendable & IE11 compatible

motivation

• Why should only <a> and <form> be able to make HTTP requests?
• Why should only click & submit events trigger them?
• Why should only GET & POST be available?
• Why should you only be able to replace the entire screen?

By removing these arbitrary constraints htmx completes HTML as a hypertext

quick start

  <!-- Load from unpkg -->
  <script src="https://unpkg.com/htmx.org@1.5.0" ></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>

The…

Vue.js 3.0 UI Library
Developed by Epicmax. Designed by Vasili Savitski

Documentation | Discord

Vuestic UI is forever free and open to contributions. See our issues contributing guide and join discussions on our Discord to help us improve Vuestic UI experience.

Why use Vuestic UI?

• Vue.js 3.0 compatible
• MIT license
• Feature-rich: more than 52 customizable components
• Two built-in color scheme presets
• Powerful configurations
  • Local - configure components in-depth
  • Global - configure framework overall
• Cross-browser and responsive
• i18n-ready

Installation

First, make sure you have all prerequisites installed:

• Node.js ( >=14.*)
• npm version 3+ ( or yarn version 1.16+) and Git.

After checking the prerequisites, install Vuestic UI via npm/yarn:

npm install vuestic-ui
//or
yarn add vuestic-ui

Quick start

Make sure you've imported both styles and plugin into your entry file:

//main.js
import { createApp } from 'vue'
import App from './App.vue'
import { VuesticPlugin } from 'vuestic-ui'