DEV Community

Iain Freestone
Iain Freestone

Posted on • Originally published at iainfreestone.com

πŸš€10 Trending projects on GitHub for web developers - 30th April 2021

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

1. WinBox

WinBox is a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

GitHub logo nextapps-de / winbox

WinBox is a professional HTML5 window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

WinBox.js: HTML5 Window Manager for the Web.

Modern window manager for the web: lightweight, outstanding performance, no dependencies, fully customizable, open source!

Demo  ‒  Getting Started  ‒  Options  ‒  API  ‒  Themes  ‒  Customize  ‒  Changelog

Live Demo / Code Examples:
https://nextapps-de.github.io/winbox/

Getting Started

Get Latest Stable Build (Recommended):

Bundle: (all assets bundled into one single file: js + css + html + icons)
winbox.bundle.js Download https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/winbox.bundle.js

Non-Bundled: (js and css are separated, css includes icons as base64)
winbox.min.js Download https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/js/winbox.min.js
winbox.min.css Download https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/dist/css/winbox.min.css

Sources: (not bundled at all, images as url to original resources)
ES6 Modules Download The /src/js folder of this Github repository
LESS Files (source) Download The /src/css folder of this Github repository
winbox.css (compiled) Download https://rawcdn.githack.com/nextapps-de/winbox/0.2.0/src/css/winbox.css
src.zip Download Download all source files including image original resources.

Get Latest (NPM):

npm install winbox
Enter fullscreen mode Exit fullscreen mode

Get Latest Nightly (Do not use for production!):

Just exchange the version number from the URLs above with "master", e.g.: "/winbox/…


2. Script Kit

Automation for Developers, Automate Anything! Making scripts easy to run, write, and share



3. vanilla-extract

Zero-runtime Stylesheets-in-TypeScript. Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.

GitHub logo seek-oss / vanilla-extract

Zero-runtime Stylesheets-in-TypeScript

🧁 vanilla-extract

Zero-runtime Stylesheets-in-TypeScript.

Write your styles in TypeScript (or JavaScript) with locally scoped class names and CSS Variables, then generate static CSS files at build time.

Basically, it’s β€œCSS Modules-in-TypeScript” but with scoped CSS Variables + heaps more.

πŸ”₯ Β  All styles generated at build time β€” just like Sass, Less, etc.

✨   Minimal abstraction over standard CSS.

πŸ¦„ Β  Works with any front-end framework β€” or even without one.

🌳 Β  Locally scoped class names β€” just like CSS Modules.

πŸš€ Β  Locally scoped CSS Variables, @keyframes and @font-face rules.

🎨   High-level theme system with support for simultaneous themes. No globals!

πŸ›  Β  Utils for generating variable-based calc expressions.

πŸ’ͺ Β  Type-safe styles via CSSType.

πŸƒβ€β™‚οΈ Β  Optional runtime version for development and testing.

πŸ™ˆ Β  Optional API for dynamic runtime theming.


πŸ–₯ Β  Try it out for yourself in CodeSandbox.


Write your styles in .css.ts files.

// styles.css.ts
import { createTheme,
…
Enter fullscreen mode Exit fullscreen mode

4. Tiptap

The headless editor framework for web artisans.

GitHub logo ueberdosis / tiptap

The headless editor framework for web artisans.

tiptap 2

A headless, framework-agnostic and extendable rich text editor, based on ProseMirror.

Build Status Version Downloads License Chat Sponsor

If you’re looking for tiptap 1, click here.

Examples

Have a look at the examples to see tiptap in action.

Documentation

The full documentation is a available on www.tiptap.dev.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discuss tiptap on GitHub

πŸ’– Sponsors

mymind DocIQ Apostrophe CMS Ycode, Flow Mobile, Gretel, Omics Data Automation, Novadiscovery, Atlan Technologies, Gamma, Kirchner Consulting, IT Xpert and hundreds of awesome inviduals.

Using tiptap in production? Invest in the future of tiptap and become a sponsor!

Contributing

Please see CONTRIBUTING for details.

Contributors

Sam Willis Christoph Flathmann, Erick Wilder…


5. DOMPurify

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.

GitHub logo cure53 / DOMPurify

DOMPurify - a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG. DOMPurify works with a secure default, but offers a lot of configurability and hooks. Demo:

DOMPurify

npm version Build and Test Downloads minified size gzip size dependents

NPM

DOMPurify is a DOM-only, super-fast, uber-tolerant XSS sanitizer for HTML, MathML and SVG.

It's also very simple to use and get started with. DOMPurify was started in February 2014 and, meanwhile, has reached version 2.3.1.

DOMPurify is written in JavaScript and works in all modern browsers (Safari (10+), Opera (15+), Internet Explorer (10+), Edge, Firefox and Chrome - as well as almost anything else using Blink or WebKit). It doesn't break on MSIE6 or other legacy browsers. It either uses a fall-back or simply does nothing.

Our automated tests cover 17 different browsers right now, more to come. We also cover Node.js v14.15.1, v15.4.0, running DOMPurify on jsdom. Older Node.js versions are known to work as well.

DOMPurify is written by security people who have vast background in web attacks and XSS. Fear not. For more details please also read about our Security Goals & Threat Model…


6. Fig

Fig adds VSCode style autocomplete to your terminal

GitHub logo withfig / autocomplete

Fig adds autocomplete to your terminal.


os Signup Documentation All-Contributors Discord Twitter

Fig adds autocomplete to your terminal.

As you type, Fig pops up subcommands, options, and contextually relevant arguments in your existing terminal on macOS.

Fig Visual Autocomplete For Your Terminal Demo


πŸ‘‹ Add a completion spec for a CLI tool

Want to add autocomplete to a CLI tool (or make changes to an existing autocomplete spec)? We welcome contributions!

Completion specs are defined in a declarative schema that specifies subcommands, options and arguments. Suggestions are generated from information in the spec or can be generated dynamically by running shell commands or reading local files.

For documentation and tutorials, visit fig.io/docs

To request autocomplete for a CLI tool, open an issue.


😎 Get Started

Build your first spec in 3 min or less: fig.io/docs/getting-started

Prerequisites:

  • Early access to the Fig macOS app.

If you don't have access yet, sign up for the waitlist and say you're interested in building completions!

  • Node and NPM…

7. puppeteer-extra

Teach puppeteer new tricks through plugins.

GitHub logo berstend / puppeteer-extra

πŸ’― Teach puppeteer new tricks through plugins.

puppeteer-extra

This is the monorepo for puppeteer-extra, a modular plugin framework for puppeteer. :-)

🌟 For the main documentation, please head over to the puppeteer-extra package.

In case you're interested in the available plugins, check out the packages folder.

Monorepo

Contributing

Contributing

PRs and new plugins are welcome! The plugin API for puppeteer-extra is clean and fun to use. Have a look the PuppeteerExtraPlugin base class documentation to get going and check out the existing plugins (minimal example is the anonymize-ua plugin) for reference.

We use a monorepo powered by Lerna (and yarn workspaces), ava for testing, the standard style for linting and JSDoc heavily to auto-generate markdown documentation based on code. :-)

Lerna

Lerna

This monorepo is powered by Lerna and yarn workspaces.

Initial setup

# Install deps
yarn
# Bootstrap the packages in the current Lerna repo.
# Installs all of their dependencies and links
…
Enter fullscreen mode Exit fullscreen mode

8. swc

swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.

GitHub logo swc-project / swc

swc is a super-fast compiler written in rust; producing widely-supported javascript from modern standards and typescript.

babel

Make the web (development) faster

npm Downloads undefined

CI Status

swc is a super-fast typescript / javascript compiler written in rust. It's a library for rust and javascript at the same time. If you are using swc from rust, see rustdoc and for most users, your entrypoint for using library will be parser.

If you are using swc from javascript, please refer to docs on the website.

Documentation

Check out the documentation in the website.

Features

Please see comparison with babel.

Performance

Please see benchmark results on the website.

Supporting swc

Backers on Open Collective Gold sponsors on Open Collective Silver sponsors on Open Collective Bronze sponsors on Open Collective

swc is a community-driven project, and is maintained by a group of volunteers. If you'd like to help support the future of the project, please consider:

Contributing

See CONTRIBUTING.md. You may also find…





9. Inkline

Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

GitHub logo inkline / inkline

Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites.

Inkline logo

Inkline

Inkline is the customizable Vue.js UI/UX Library designed for creating flawless responsive websites. Inkline is written and maintained by @alexgrozav


Vue.js UI/UX Library - Inkline


Homepage Β· Documentation Β· Issue Tracker

npm version Build Coverage Status Downloads Discord

Table of contents

Installation

Read the Getting Started page and find information on framework contents, templates, examples, and more.


Vue CLI Installation - Inkline


Nuxt.js Installation - Inkline


Custom Installation - Inkline


CDN Installation - Inkline

Join the beta

The beta version for Inkline 3 (compatible with Vue 3) is finally out! Here are some basic installation instructions. Keep in mind that the beta is still subject to change.

npm install @inkline/inkline@next
import '@inkline/inkline/src/inkline.scss';
import Inkline from '@inkline/inkline';
import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App);

app.use(Inkline);

app.mount('#app');
Enter fullscreen mode Exit fullscreen mode

Bugs and feature requests

Have a bug or a feature request…


10. Foal

Elegant and all-inclusive Node.Js web framework based on TypeScript.

GitHub logo FoalTS / foal

Elegant and fully-featured Node.Js web framework based on TypeScript. πŸš€.


https://foalts.org

License: MIT node version npm version Build Status Code coverage Known Vulnerabilities Commit activity Last commit 2FA 2FA

What is Foal?

Foal (or FoalTS) is a Node.JS framework for creating web applications.

It provides a set of ready-to-use components so you don't have to reinvent the wheel every time. In one single place, you have a complete environment to build web applications. This includes a CLI, testing tools, frontend utilities, scripts, advanced authentication, ORM, deployment environments, GraphQL and Swagger API, AWS utilities, and more. You no longer need to get lost on npm searching for packages and making them work together. All is provided.

But while offering all these features, the framework remains simple. Complexity and unnecessary abstractions are put aside to provide the most intuitive and expressive syntax. We believe that concise and elegant code is the best way to develop an application and maintain it in the future. It also allows you to spend more time coding rather than trying to understand how the…





Stargazing πŸ“ˆ

Top risers over last 7 days

  1. Free Programming Books +2,453 stars
  2. Build Your Own X +2,383 stars
  3. Web Developer Roadmap +2,178 stars
  4. Public APIs +1,804 stars
  5. JavaScript Algorithms +1,341 stars

Top growth(%) over last 7 days

  1. JS Image Carver +37%
  2. party.js +26%
  3. Choc UI +24%
  4. Superplate +22%
  5. Fig +8%

Top risers over last 30 days

  1. Coding Interview University +7,913 stars
  2. Free Programming Books +4,655 stars
  3. Web Developer Roadmap +4,498 stars
  4. Public APIs +4,497 stars
  5. Clone Wars +3,905 stars

Top growth(%) over last 30 days

  1. Appsmith +105%
  2. React Flow +84%
  3. Simpler State +59%
  4. Clone Wars +59%
  5. Headless UI +55%

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

Collapse
navaneethbysani profile image
Navaneeth Bysani

Amazing Collection!!!