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 will be displayed
…
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

🦁 <1kb compiler-focused virtual DOM. It's fast!

Million Logo

<1kb compiler-focused 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 that focus on precompilation and static analysis.

CI Code Size NPM Version Code Coverage

β†’ Check out the Million documentation

Installing Million

Million doesn't require build tools by default, but it is highly recommended you use NPM to install.

npm install million
Enter fullscreen mode Exit fullscreen mode

Hello World Example

Below is an extremely simple implementation of a Hello World page using Million.

import { m, createElement, patch } from 'million';
// Initialize app
const app = createElement(m('div', { id: 'app' }, ['Hello World']));
document.body.appendChild(app);
// Patch content
patch(app, m('div'
…
Enter fullscreen mode Exit fullscreen mode

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-html/lit-html.js';
    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

I started this project as part of 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. The resulting compiler covers a tiny slice of Typescript: just var declarations, assignments and numeric literals. The only two types are string and number.

To get set up

git clone https://github.com/sandersn/mini-typescript
cd mini-typescript
code .
# Get
…
Enter fullscreen mode Exit fullscreen mode

7. Pinia

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

GitHub logo posva / pinia

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

Pinia logo


npm package build status code coverage


Pinia

Intuitive, type safe and flexible Store for Vue

  • πŸ’‘ Intuitive
  • πŸ”‘ Type Safe
  • βš™οΈ Devtools support
  • πŸ”Œ Extensible
  • πŸ— Modular by design
  • πŸ“¦ Extremely light

Pinia works both for Vue 2.x and Vue 3.x. It requires Vue 2 with @vue/composition-api ^1.1.0-0 or Vue ^3.2.0-0.

Pinia is 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.

πŸ‘‰ Demo on CodeSandbox

Help me keep working on this project πŸ’š

Gold Sponsors

Passionate People VueJobs

Silver Sponsors

Vue Mastery Vuetify CodeStream Bird Eats bug

Bronze Sponsors

Storyblok NuxtJS


FAQ

A few notes about the project and possible questions:

Q: Does this replace Vuex, is…


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!

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

API & CLI

Squoosh has an API and a CLI to compress many images at once.

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


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.

Discussion (0)