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
maaslalani
/
slides
Terminal based presentation tool
Slides
Slides in your terminal.
Installation
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…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.
<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.
→ 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
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'…3. Haunted
React's Hooks API implemented for web components
Haunted 🦇 🎃
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>
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.
wellyshen
/
react-cool-virtual
😎 ♻️ A tiny React hook for rendering large datasets like a breeze.
A tiny React hook for rendering large datasets like a breeze.
Features
-
♻️ Renders millions of items with highly performant way, using DOM recycling. -
🎣 Easy to use, based on React hook. - 💅🏼 Apply styles without hassle, just few setups.
-
🧱 Supports fixed, variable, dynamic, and real-time heights/widths. -
🖥 Supports responsive web design (RWD) for better UX. -
📌 Supports sticky headers for building on-trend lists. -
🚚 Built-ins load more callback for you to deal with infinite scroll + skeleton screens. -
🖱 Imperative scroll-to methods for offset, items, and alignment. -
🛹 Out-of-the-box smooth scrolling and the effect is DIY-able. -
💬 It's possible to implement stick to bottom and pre-pending items for chat, feeds, etc. -
⛳ ProvidesisScrollingindicator to you for UI placeholders or performance optimization. -
🗄️ Supports server-side rendering (SSR) for a fast FP + FCP and better SEO. -
📜 Supports…
5. Windmill UI
The component library for fast and accessible development of gorgeous interfaces.
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.
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
Inside tailwind.config.js
const windmill = require('@windmill
/react-ui/config')
module.exports = windmill({
purge: [],
theme: {
extend: {},
},
variants: {},
plugins: [],
})
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>…6. mini-typescript
A miniature model of the Typescript compiler, intended to teach the structure of the real Typescript compiler
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…7. Pinia
Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
posva
/
pinia
🍍 Intuitive, type safe, light and flexible Store for Vue using the composition api with DevTools support
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
/f/86387/x/4cf6a70a8c/logo-white-text.svg){kind=logo}
Silver Sponsors
Bronze Sponsors
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.
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:
- Clone the repository
- To install node packages, run:
npm install
- Then build the app by running:
npm run build
- After building, start the development server by running:
npm run dev
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)
mechaniac
/
Map-of-Javascript
Javascript on one sheet. (and one for algorithms)
map of javascript
data structures and alogrithms
HTML and CSS and DOM interaction
10. CSSgram
CSSGram is an Instagram filter library written in Sass and CSS.
CSSgram
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:
 |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 43+ |
38+ |
Nope ✘ | 13 |
32+ |
8+ |
…
Stargazing 📈
Top risers over last 7 days
- Public APIs +3,934 stars
- Slidev +2,106 stars
- Electron +1,706 stars
- Coding Interview University +1,442 stars
- Awesome +1,148 stars
Top growth(%) over last 7 days
- Vitro +20%
- react-simple-flowchart +19%
- Slidev +18%
- Observable Plot +13%
- useStateMachine +12%
Top risers over last 30 days
- Coding Interview University +7,202 stars
- Public APIs +6,806 stars
- Free Programming Books +4,594 stars
- Awesome +3,148 stars
- Developer Roadmap +3,120 stars
Top growth(%) over last 30 days
- useStateMachine +380%
- Fig +169%
- Observable Plot +47%
- Appwrite +40%
- 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.
Oldest comments (0)