DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 28th May 2021

Trending Projects is available as a weekly newsletter please sign up at www.iainfreestone.com to ensure you never miss an issue.

1. 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.

GitHub logo GoogleChromeLabs / comlink

Comlink makes WebWorkers enjoyable.

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

Comlink in action

Browsers support & bundle size

Chrome 56+ Edge 15+ Firefox 52+ Opera 43+ Safari 10.1+ Samsung Internet 6.0+

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…


2. Notion SDK for JavaScript

Official Notion JavaScript Client. A simple and easy to use client for the Notion API

GitHub logo makenotion / notion-sdk-js

Official Notion JavaScript Client

Notion SDK for JavaScript

A simple and easy to use client for the Notion API


Build status npm version

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,
})
Enter fullscreen mode Exit fullscreen mode

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({})
})()
Enter fullscreen mode Exit fullscreen mode

Each method returns a Promise which resolves the response.

console.log(listUsersResponse)
Enter fullscreen mode Exit fullscreen mode
{
  results: [
    {
      object: 'user'
      id: 'd40e767c-d7af-4b18-a86d-55c61f1e39a4',
      type: 'person',
      person: {
        email: 'avo@example.org',

3. Capacitor

Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web

GitHub logo ionic-team / capacitor

Build cross-platform Native Progressive Web Apps for iOS, Android, and the Web ⚡️


⚡️ Cross-platform apps with JavaScript and the Web ⚡️


Capacitor lets you run web apps natively on iOS, Android, Web, and more with a single codebase and cross-platform APIs.

Capacitor provides 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…





4. daisyUI

Tailwind CSS Components. Adds component classes like btn, card and more to Tailwind CSS

GitHub logo saadeghi / daisyui

🌼 🌼 🌼 🌼 🌼  The most popular, free and open-source Tailwind CSS component library





5. Notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

GitHub logo iamhosseindhv / notistack

Highly customizable notification snackbars (toasts) that can be stacked on top of each other

notistack logo

Notistack: Display notifications with call of a function.

Easy to use, customizable, smooth transitions, stack and queue them up

Table of Contents

Getting Started

Use your preferred package manager:

npm install notistack
yarn add notistack

Version guide

Version Notes
v3.x.x Latest stable release. Standalone (i.e. not dependent on material-ui)
<= v2.0.8 Requires Material-UI v5 as peer dependency. npm install notistack@2.0.8
<= 1.0.10 Requires Material-UI <= v4 as peer dependency. npm install notistack@latest-mui-v4

How to use

Instantiate a SnackbarProvider component and start showing snackbars: (see docs for a full list of available props)

import { SnackbarProvider, enqueueSnackbar } from 'notistack';
const App = () => {
  return (
    <div>
      <SnackbarProvider />
      <button onClick={() => enqueueSnackbar('That was easy!')}>Show snackbar</button>
Enter fullscreen mode Exit fullscreen mode

6. Dragula

Drag and drop so simple it hurts

GitHub logo bevacqua / dragula

👌 Drag and drop so simple it hurts

logo.png

Drag and drop so simple it hurts

Browser support includes every sane browser and IE7+. (Granted you polyfill the functional Array methods in ES5)

Framework support includes vanilla JavaScript, Angular, and React.

Demo

demo.png

Try out the demo!

Inspiration

Have you ever wanted a drag and drop library that just works? That doesn't just depend on bloated frameworks, that has great support? That actually understands where to place the elements when they are dropped? That doesn't need you to do a zillion things to get it to work? Well, so did I!

Features

  • Super easy to set up
  • No bloated dependencies
  • Figures out sort order on its own
  • A shadow where the item would be dropped offers visual feedback
  • Touch events!
  • Seamlessly handles clicks without any configuration

Install

You can…


7. SimpleBar

SimpleBar does only one thing: replace the browser's default scrollbar with a custom CSS-styled one without losing performances.

GitHub logo Grsmto / simplebar

Custom scrollbars vanilla javascript library with native scroll, done simple, lightweight, easy to use and cross-browser.

SimpleBar

NPM version NPM downloads Build Status

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.

Buy Me A Coffee

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…


8. govuk-react

An implementation of the GOV.UK Design System in React using CSSinJS

GitHub logo govuk-react / govuk-react

An implementation of the GOV.UK Design System in React using CSSinJS

govuk-react

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

codecov Join the community on Spectrum

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.

This project is being or has been used by:


9. htmx

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

GitHub logo bigskysoftware / htmx

</> htmx - high power tools for HTML

</> htmx

high power tools for HTML

Discord Netlify Bundlephobia Bundlephobia

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 (~14k min.gz'd) dependency-free & extendable

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

  <script src="https://unpkg.com/htmx.org@2.0.3"></script>
  <!-- have a button POST a click via AJAX -->
  <button hx-post="/clicked" hx-swap="outerHTML">
    Click Me
  </button>
Enter fullscreen mode Exit fullscreen mode

The hx-post and hx-swap attributes tell htmx:

"When a…


10. Vuestic UI

Free and Open Source UI Library for Vue 3

GitHub logo epicmaxco / vuestic-ui

Vuestic UI is an open-source Vue 3 component library designed for rapid development, easy maintenance, and high accessibility. Maintained by Epicmax (@epicmaxco).

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

CI badge License Version

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.

Quick start

Use following command to quickly scaffold new Vite or Nuxt project with Vuestic or Vuestic Admin

npm create vuestic@latest
Enter fullscreen mode Exit fullscreen mode

Documentation

Documentation, guides, examples and tutorials are available on ui.vuestic.dev

Partners & Sponsors ❤️

Epicmax, vuejobs, ag-grid, flatlogic, browserstack and jetbrains

Deploys by Netlify

Thanks to BrowserStack for providing the infrastructure that allows us to test using all possible browsers.

Thanks to Chromatic for providing the visual testing platform that helps us review UI changes and prevent visual regressions.

Become a partner: hello@epicmax.co

Community

Feel free to ask any questions or contact us at the official community Discord server

Vuestic Admin

See Vuestic UI library in action. Vuestic Admin is a great example of a…


Stargazing 📈

Top risers over last 7 days

  1. Appwrite +1,890 stars
  2. Coding Interview University +1,234 stars
  3. code-server +1,103 stars
  4. Fig +926 stars
  5. Free Programming Books +908 stars

Top growth(%) over last 7 days

  1. useStateMachine +164%
  2. Fig +69%
  3. Appwrite +27%
  4. renature +7%
  5. Chakra Templates️ +7%

Top risers over last 30 days

  1. Public APIs +5,557 stars
  2. Coding Interview University +5,500 stars
  3. Free Programming Books +3,678 stars
  4. WinBox.js +3,668 stars
  5. Developer Roadmap +3,609 stars

Top growth(%) over last 30 days

  1. WinBox.js +653%
  2. github-elements +160%
  3. Fig +159%
  4. Supabase Realtime +42%
  5. Supabase +36%

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 (1)

Collapse
 
abazieudochukwu profile image
abazieudochukwu

Good post thanks for the update