DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

🚀10 Trending projects on GitHub for web developers - 11th June 2021

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

1. Slides

Terminal based presentation tool

GitHub logo maaslalani / slides

Terminal based presentation tool

Slides

Slides in your terminal.

Slides Presentation

Installation

Homebrew Snapcraft AUR

Instructions

MacOS

brew install slides

Arch

yay -S slides

Nixpkgs (unstable)

nix-env -iA nixpkgs.slides

Any Linux Distro running snapd

sudo snap install slides

Go

go install github.com/maaslalani/slides@latest

From source:

git clone https://github.com/maaslalani/slides.git
cd slides
go install

You can also download a binary from the releases page.

Usage

Create a simple markdown file that contains your slides:

# Welcome to Slides
A terminal based presentation tool
---

## Everything is markdown
In fact, this entire presentation is a markdown file.

---

## Everything happens in your terminal
Create slides and present them without ever leaving your terminal.

---

## Code execution
```go
package main

import "fmt"

func main() {
  fmt.Println("Execute code directly inside the slides")
}
```

You can execute code inside your slides by pressing `<C-e>`,
the output of your command
Enter fullscreen mode Exit fullscreen mode

2. million

<1kb virtual DOM - it's fast! Current Virtual DOM implementations are inadequate—Ranging from overcomplicated to abandoned, most are unusable without sacrificing raw performance and size. Million aims to fix this, providing a library-agnostic Virtual DOM to serve as the core for Javascript libraries.

GitHub logo aidenybai / million

Optimize React performance and make your React 70% faster in minutes, not months.

Want to automatically find and fix performance issues? Check out Million Lint.

Million.js Banner

What is Million.js?

Million.js is an extremely fast and lightweight optimizing compiler that make components up to 70% faster.

Oh man... Another /virtual dom|javascript/gi framework? I'm fine with React already, why do I need this?

Million.js works with React and makes reconciliation faster. By using a fine-tuned, optimized virtual DOM, Million.js reduces the overhead of diffing (try it out here)

TL;DR: Imagine React components running at the speed of raw JavaScript.

Installation

The Million.js CLI will automatically install the package and configure your project for you.

npx million@latest
Enter fullscreen mode Exit fullscreen mode

Once your down, just run your project and information should show up in your command line!

Having issues installing? → View the installation guide


3. Haunted

React's Hooks API implemented for web components

GitHub logo matthewp / haunted

React's Hooks API implemented for web components 👻

Haunted 🦇 🎃

npm npm

React's Hooks API but for standard web components and lit-html or hyperHTML.

📚 Read the Docs 📖

<html lang="en">
  <my-counter></my-counter>

  <script type="module">
    import { html } from 'https://unpkg.com/lit?module';
    import { component, useState } from 'https://unpkg.com/haunted/haunted.js';

    function Counter() {
      const [count, setCount] = useState(0);

      return html`
        <div id="count">${count}</div>
        <button type="button" @click=${() => setCount(count + 1)}>
          Increment
        </button>
      `;
    }

    customElements.define('my-counter', component(Counter));
  </script>
</html>
Enter fullscreen mode Exit fullscreen mode

More example integrations can be found in this gist.

Hooks

Haunted supports the same…


4. React Cool Virtual

A tiny React hook for rendering large datasets like a breeze.

GitHub logo wellyshen / react-cool-virtual

😎 ♻️ A tiny React hook for rendering large datasets like a breeze.

React Cool Virtual

A tiny React hook for rendering large datasets like a breeze.

npm version npm downloads coverage status gzip size best of js All Contributors

Features


5. Windmill UI

The component library for fast and accessible development of gorgeous interfaces.

GitHub logo estevanmaito / windmill-react-ui

🧩 The component library for fast and accessible development of gorgeous interfaces.

Windmill React UI

The component library for fast and accessible development of gorgeous interfaces.

codecov Build npm MIT License

Projects using it: Windmill Dashboard React

Mission

Be the most accessible it can be out of the box and the fastest way to production.

Go to docs to see complete, live examples

🚀 Usage

Install

npm i @windmill/react-ui
Enter fullscreen mode Exit fullscreen mode

Inside tailwind.config.js

const windmill = require('@windmill/react-ui/config')
module.exports = windmill({
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
})
Enter fullscreen mode Exit fullscreen mode

Then place Windmill at the root of your project (the order doesn't matter, as long as your application is inside).

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import { Windmill } from '@windmill/react-ui'
ReactDOM.render(
  <Windmill>
    <App />
  </Windmill>
Enter fullscreen mode Exit fullscreen mode

6. mini-typescript

A miniature model of the Typescript compiler, intended to teach the structure of the real Typescript compiler

GitHub logo sandersn / mini-typescript

A miniature model of the Typescript compiler, intended to teach the structure of the real Typescript compiler

mini-typescript

A miniature model of the Typescript compiler, intended to teach the structure of the real Typescript compiler

This project contains two models of the compiler: micro-typescript and centi-typescript.

micro-typescript started when I started reading Modern Compiler Implementation in ML because I wanted to learn more about compiler backends. When I started building the example compiler I found I disagreed with the implementation of nearly everything in the frontend. So I wrote my own, and found that I had just written a small Typescript.

I realised a small Typescript would be useful to others who want to learn how the Typescript compiler works. So I rewrote it in Typescript and added some exercises to let you practise with it. micro-typescript is the smallest compiler I can imagine, implementing just a tiny slice of Typescript: var declarations, assignments and numeric literals. The only two types are string and number


7. Pinia

Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

GitHub logo vuejs / pinia

🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support

Pinia logo


npm package build status


Pinia

Intuitive, type safe and flexible Store for Vue

  • 💡 Intuitive
  • 🔑 Type Safe
  • ⚙️ Devtools support
  • 🔌 Extensible
  • 🏗 Modular by design
  • 📦 Extremely light
  • ⛰️ Nuxt Module

Pinia works with both Vue 2 and Vue 3.

Pinia is the most similar English pronunciation of the word pineapple in Spanish: piña. A pineapple is in reality a group of individual flowers that join together to create a multiple fruit. Similar to stores, each one is born individually, but they are all connected at the end. It's also a delicious tropical fruit indigenous to South America.

Help me keep working on this project 💚

Silver Sponsors

Route Optimizer and Route Planner Software Prefect VueMastery

Bronze Sponsors

Storyblok Nuxt UI Pro Templates Antony Konstantinidis Stanislas Ormières


FAQ

A few notes about the project and possible questions:

Q: Is Pinia the successor of Vuex?





8. Squoosh

Make images smaller using best-in-class codecs, right in the browser.

GitHub logo GoogleChromeLabs / squoosh

Make images smaller using best-in-class codecs, right in the browser.

Squoosh is an image compression web app that reduces image sizes through numerous formats.

Privacy

Squoosh does not send your image to a server. All image compression processes locally.

However, Squoosh utilizes Google Analytics to collect the following:

  • Basic visitor data.
  • The before and after image size value.
  • If Squoosh PWA, the type of Squoosh installation.
  • If Squoosh PWA, the installation time and date.

Developing

To develop for Squoosh:

  1. Clone the repository
  2. To install node packages, run:
    npm install
    Enter fullscreen mode Exit fullscreen mode
  3. Then build the app by running:
    npm run build
    Enter fullscreen mode Exit fullscreen mode
  4. After building, start the development server by running:
    npm run dev
    Enter fullscreen mode Exit fullscreen mode

Contributing

Squoosh is an open-source project that appreciates all community involvement. To contribute to the project, follow the contribute guide.





9. Map of javascript

Javascript on one sheet. (and one for algorithms)

GitHub logo mechaniac / Map-of-Javascript

Javascript on one sheet. (and one for algorithms)

map of javascript

alt text

data structures and alogrithms alt text

HTML and CSS and DOM interaction alt text

Cryptography alt text

responsive alt text

alt text





10. CSSgram

CSSGram is an Instagram filter library written in Sass and CSS.

GitHub logo una / CSSgram

CSS library for Instagram filters

CSSgram

CDNJS

CSSGram is an Instagram filter library written in Sass and CSS.

What is This?

Simply put, CSSgram is a library for editing your images with Instagram-like filters directly using CSS. What we're doing is adding filters to the images, as well as applying color and/or gradient overlays via various blending techniques to mimic filter effects. This means less manual image processing and more fun filter effects on the web!

We're using pseudo-elements (i.e. ::before and ::after) to create the filter effects, so you must apply these filters on a containing element (i.e. not a replaced element like <img>). The recommendation is to wrap your images in a <figure> tag. More about the tag here.

Browser Support

This library uses CSS Filters and CSS Blend Modes. These features are supported in the following browsers:

Chrome logo Firefox logo Internet Explorer logo Edge logo Opera logo Safari logo
43+ ✔ 38+ ✔ Nope ✘ 13 ✔ 32+ ✔ 8+ ✔


Stargazing 📈

Top risers over last 7 days

  1. Public APIs +3,934 stars
  2. Slidev +2,106 stars
  3. Electron +1,706 stars
  4. Coding Interview University +1,442 stars
  5. Awesome +1,148 stars

Top growth(%) over last 7 days

  1. Vitro +20%
  2. react-simple-flowchart +19%
  3. Slidev +18%
  4. Observable Plot +13%
  5. useStateMachine +12%

Top risers over last 30 days

  1. Coding Interview University +7,202 stars
  2. Public APIs +6,806 stars
  3. Free Programming Books +4,594 stars
  4. Awesome +3,148 stars
  5. Developer Roadmap +3,120 stars

Top growth(%) over last 30 days

  1. useStateMachine +380%
  2. Fig +169%
  3. Observable Plot +47%
  4. Appwrite +40%
  5. Hammer +39%

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)