DEV Community

loading...

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

iainfreestone profile image Iain Freestone Originally published at iainfreestone.com ・3 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. 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.1.8/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.1.8/dist/js/winbox.min.js
winbox.min.css Download https://rawcdn.githack.com/nextapps-de/winbox/0.1.8/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.1.8/src/css/winbox.css
src.zip Download Download all source files including image original resources.

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

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


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.


🚧   Please note, this is an alpha release.


πŸ”₯ Β  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 …


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, @impactvelocity, 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, Marius Tolzmann, jjangga0214…


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

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 15 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 VSCode style autocomplete to your terminal


os Signup Documentation All-Contributors Slack Twitter

Fig adds autocomplete to the 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

Looking to improve autocomplete functionality or add support for your favorite CLI tool? We welcome contributions for new specs!

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

For more documentation and tutorials, visit withfig.com/docs

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

Get Started

git clone https://github.com/withfig/autocomplete.git fig-autocomplete
cd fig-autocomplete
# Install packages
npm install
# Go into testing mode
npm run dev
Enter fullscreen mode Exit fullscreen mode

Edit your spec in the dev/ folder. It will compile to the specs/ folder on save. Start testing your spec…


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

Travis Status Coverage

swc is a super-fast typescript / javascript compiler written in rust.

Documentation

Check out the documentation in the website.

Features

Please see comparison with babel.

Performance

The lower bound of the speedup compared to babel is 18. The benchmarks were run on Macbook pro, dual core, 2.3GHz Intel Core i5, 16 GB ram

performance
swc (es3) 761 ops/sec Β±0.23% (89 runs sampled)
swc (es2015) 800 ops/sec Β±1.02% (87 runs sampled)
swc (es2016) 2123 ops/sec Β±0.84% (88 runs sampled)
swc (es2017) 2131 ops/sec Β±1.13% (90 runs sampled)
swc (es2018) 2981 ops/sec Β±0.25% (90 runs sampled)
swc-optimize (es3) 712 ops/sec Β±0.21% (86 runs sampled)
babel 41.75 ops/sec Β±8.07% (56 runs sampled)

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:

  • Giving developer time on…

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

Bugs and feature requests

Have a bug or a feature request? Please first search for existing and closed issues If your problem or idea is not addressed yet, please open a new issue.

Community

Get updates on Inkline's development and chat with the project maintainers and community members.

  • Follow @inkline on Twitter.
  • Join Inkline on Discord.
  • Developers should use the keyword inkline on packages which modify or add to the functionality of Inkline when distributing through npm or similar delivery mechanisms for maximum discoverability.

Releases

Previous releases…


10. Foal

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

GitHub logo FoalTS / foal

Elegant and all-inclusive 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!!!

Forem Open with the Forem app