6

🚀10 Trending projects on GitHub for web developers - 30th April 2021

 3 years ago
source link: https://dev.to/iainfreestone/10-trending-projects-on-github-for-web-developers-30th-april-2021-efn
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

🚀10 Trending projects on GitHub for web developers - 30th April 2021

Apr 30 Originally published at iainfreestone.com

・3 min read

Trending projects on GitHub for web developers (49 Part Series)

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.

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

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

FigBanner.png%3Fraw%3Dtrue

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

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

ContributingLerna


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

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

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

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

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

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

Top growth(%) over last 7 days

Top risers over last 30 days

Top growth(%) over last 30 days


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.


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK