DEV Community

loading...

πŸš€10 Trending projects on GitHub for web developers - 11th June 2021

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・2 min read

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.

Credits

This project is heavily inspired by lookatme slides is a more minimal version of lookatme and written in Go.

Demo

slides

Installation

go get github.com/maaslalani/slides

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.

Checkout the example slides.

Then, to present, run:

slides presentation.md

You are also able to pass in slides through stdin, this allows you to curl and present remote files:

curl https://example.com/slides.md | slides

Go to the next slide with any of the following keys:

  • space
  • right
  • down
  • enter
  • n
  • k
  • l

Go to the previous slide with any of the following keys:

  • left
  • up
  • p
  • h
  • j
…

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 millionjs / million

🌈 <1kb virtual DOM - it's fast!

Million Logo

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

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', { id: 'app' }, [
…
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.

<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

Getting started

A starter app is available on codesandbox and also can be cloned from this repo. This app…


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 gzip size 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.

Limitations

  1. This is an example of the way that Typescript's compiler does things…

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 and you are currently on the branch that supports Vue 3.x. If you are looking for the version compatible with Vue 2.x, check the v1 branch.

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

…


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 allows you to dive into the advanced options provided by various image compressors.

API & CLI

Squoosh now has an API and a CLI that allows you to compress many images at once.

Privacy

Google Analytics is used to record the following:

  • Basic visit data.
  • Before and after image size once an image is downloaded. These values are rounded to the nearest kilobyte.
  • If install is available, when Squoosh is installed, and what method was used to install Squoosh.

Image compression is handled locally; no additional data is sent to the server.

Building locally

Clone the repo, and:

npm install
npm run build
Enter fullscreen mode Exit fullscreen mode

You can run the development server with:

npm run dev
Enter fullscreen mode Exit fullscreen mode

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)

Forem Open with the Forem app