Open Source & Free Tools for Web Workers

WebTUI est une bibliothèque CSS modulaire conçue pour transposer l'esthétique des Interfaces Utilisateur de Terminal (TUI) dans le navigateur.

Ses principales caractéristiques comprennent :

• Design TUI pour le Navigateur : Son objectif fondamental est d'apporter l'apparence et l'expérience des TUIs au web. Le design est décrit comme allant "HARD".

• Modularité : Il s'agit d'une bibliothèque CSS modulaire.

• Composants UI : La bibliothèque offre une variété de composants UI prêts à l'emploi, tels que Badge, Button, Checkbox, Dialog, Input, Popover, Pre, Radio, Separator, Switch, Table, Textarea, Tooltip, et Typography.

• Thématisation et Plugins : WebTUI supporte la thématisation via des variables CSS, des styles de police, des couleurs, et la gestion des modes clair et sombre. Il prend également en charge les plugins, notamment des plugins officiels pour des thèmes comme Catppuccin, Gruvbox et Nord, ainsi qu'un plugin Nerd Font. Des sections de documentation sont dédiées au développement de plugins et aux couches de style.

• Installation Flexible : La bibliothèque propose différentes méthodes d'installation et d'utilisation, notamment en utilisant CSS, ESM, un CDN, ou une importation complète de la bibliothèque. Des guides d'installation sont disponibles pour des frameworks comme Next.js, Vite et Astro.

• Guides et Documentation : La documentation couvre divers aspects tels que le changelog, une introduction, une section sur les fonctionnalités, la comparaison entre TUIs et GUIs, ainsi que des guides sur la contribution, un guide de style (unités CSS, sélecteurs, documentation), et le développement de plugins.

ALTCHA is a next-generation CAPTCHA and spam protection system. It offers a privacy-first, globally compliant, and accessible alternative to traditional CAPTCHAs.

Features:

• Privacy Compliance: ALTCHA protects against spam and abuse without tracking users. It is designed to be fully compliant with major data protection regulations worldwide, including GDPR, HIPAA, CCPA, PIPEDA/CPPA, LGPD, DPDPA, and PIPL. It uses no cookies, no tracking, and no external servers for core functions, ensuring user privacy.

• Accessibility: It is built with accessibility in mind, adhering to WCAG 2.2 Level AA guidelines and meeting requirements under the European Accessibility Act (EAA). This ensures it works with screen readers and assistive technologies.

• User Experience: ALTCHA aims to provide a frictionless and frustration-free experience for real users. It primarily uses a Proof-of-Work (PoW) verification method, eliminating the need for visual puzzles.

• Technology: It works quietly in the background, using machine learning and pattern recognition to block abuse. It offers adaptive protection that dynamically responds to emerging threats.

• Challenge Mechanisms: The system defaults to PoW. For cases flagged as high-risk, it escalates to a secure code challenge. This code challenge includes an audio component, which is also available in multilingual versions (48+ languages supported, including RTL).

• Robust Security Features (ALTCHA Sentinel): The advanced ALTCHA Sentinel platform offers a range of security features including Bot Detection, Proxy/TOR Detection, Email Verification, Rate Limiting, IP Reputation checks, IP Geo Fencing, Language Detection, Text Classification, and secure form submissions. It provides comprehensive protection.

• Self-Hosted and Customizable: ALTCHA is a self-hosted solution, giving users full control over their spam protection system. It is fully customizable, allowing tailoring of the challenge mechanism to specific needs while maintaining compliance.

• Open Source: The core ALTCHA widget and integration libraries are open-source under the MIT license, offering a free base solution. ALTCHA Sentinel is the optional commercial platform for enhanced security needs.

• Easy Integration: It offers straightforward integration with various languages, frameworks, and CMS platforms.

In essence, ALTCHA provides a secure, compliant, and user-friendly way to protect websites, apps, and services against spam, bots, and automated threats by focusing on privacy, accessibility, and advanced detection methods.

Features :

It primarily focuses on the automated analysis and presentation of multi-dimensional data.

VTable is developed based on Canvas.

It is designed to solve rendering and interactive performance issues when handling large amounts of data, enabling smooth navigation even with millions of data points.

Its main function is to provide data computing and visualization capabilities for multi-dimensional data presentation scenarios, such as perspective analysis and tree display.

The sources mention several usage scenarios supported by VTable, including table themes (like BIGTHT), chart types, sales heatmaps, cell custom layout, perspective tables, and QS Major Rankings.

This tool is a small vanilla JavaScript library that allows making any HTML table sortable by adding the class sortable to the <table> element. Here are the main features:

• Sort by clicking the header: The user can click on a table header (<th>) to change the sorting order of the rows.

• Easy installation: There are several ways to integrate the library:

  • Linking the CSS and JavaScript files via jsDelivr CDN.

  • Copying the files from the dist directory to a local assets folder and linking them.

  • Installing via npm (npm install sortable-tablesort) and then linking the HTML files or importing them into a JavaScript file.

• Non-sortable field management: It is possible to disable sorting for specific columns by using:

  • The class no-sort in the <th> element.

  • CSS rules.

  • Using the <td> element instead of <th> (although this is discouraged for accessibility and styling reasons).

• Sorting indicators (arrows): Arrows indicating the sorting direction can be added via CSS. It is also possible to place them to the left of the text. The library provides example CSS stylesheets for this.

• Sticky headers management: By using the provided CSS file (sortable.min.css) and adding the class sticky to the table, the headers can remain visible during scrolling.

• Specific data sorting: The data-sort attribute in the cells (<td>) allows defining a different value from the displayed one for sorting. This is useful in case of file sizes (KB, MB, GB) or non-standard date formats.

• Alternative sorting: By clicking on a header while holding the shift or alt key, the data-sort-alt attribute is used for sorting instead of data-sort.

• Sorting on a different column (for colspans): The data-sort-col attribute in the <th> element allows specifying a different column to perform the sort on, which is useful in the presence of merged cells (colspan).

• Default sorting order management: Adding the class asc to the <table> element allows defining the default sorting order as ascending.

• Secondary sorting (tiebreaker): The data-sort-tbr attribute in the <th> element allows defining a secondary sorting column to be used when the values of the primary column are identical.

• Null/empty values management: Adding the class n-last to the table (<table class="sortable n-last">) ensures that rows with null or empty values are always sorted last. Note that a string of blank spaces is not considered null/empty.

• Accessibility (A11y): Including the sortable.a11y.min.js file adds basic accessibility features, such as aria-label to the headers and the ability to navigate through the headers with the tab key (tabindex="0"). A global function enhanceSortableAccessibility is provided to activate these features.

• Sort events: The library dispatches two custom events that bubble up the DOM tree: sort-start (when sorting begins) and sort-end (when sorting is complete). It is possible to listen for these events on any parent of the table, including the document.

• Sort on page load: It is possible to trigger a sort on page load by using JavaScript to simulate a click on the desired header.

The library is presented as being small (1.52KB minified, 795 bytes gzipped) and fast, although very large tables may be slow, especially on mobile. It requires the table to have <thead> and <tbody> elements. The management of rowspan is not supported. It is advertised as being compatible with most modern browsers (ie9+ although ie9 compatibility is no longer guaranteed) and works with tables generated by JavaScript thanks to an eventListener. It is also mentioned as working with Svelte, but has not been tested with React, Angular, or Vue.

Waveform Renderer is a lightweight and customizable TypeScript library for rendering audio waveforms on HTML canvas. Its primary function is to create visual representations of audio files.

Features:

• Highly customizable appearance.

• Performant canvas-based rendering. This indicates that the library uses the HTML canvas element for efficient drawing of the waveforms.

• Responsive and touch-friendly, making it suitable for various devices.

• Real-time progress updates, allowing users to see the current playback position.

• Interactive seeking, enabling users to navigate through the audio by interacting with the waveform.

• Written in TypeScript with full type support, which enhances code maintainability and provides better developer experience.

• Resolution independent with HiDPI/Retina support, ensuring crisp visuals on high-resolution screens.

• It offers various configuration options to control the waveform's appearance, such as color, background color, bar width, gap, and progress line styling.

• It provides support for events such as renderStart, renderComplete, seek, error, destroy, ready, resize, and progressChange, allowing developers to respond to different states and interactions.

• The library exports a main WaveformRenderer component and a utility function getPeaksFromAudioBuffer for calculating waveform data from raw audio.

• It includes methods to setOptions, setPeaks, setProgress, and destroy the waveform instance.

• Waveform Renderer is designed to be a focused alternative to larger audio libraries like wavesurfer.js, concentrating solely on waveform visualization and thus having a smaller bundle size and optimized performance for waveform rendering. It does not include features like playback, regions, or spectrograms.

• It supports modern browsers that support Canvas and ES6.

Wavesurfer.js is presented as an open-source audio visualization library in JavaScript designed for creating interactive and customizable audio waveforms. It supports both HTML5 Audio and Web Audio.

Features:

• Core Functionality: It can render responsive and customizable waveforms from audio files. A basic example shows how to display a waveform in a designated HTML container and initiate playback on interaction.

• Extensibility through Plugins: Wavesurfer.js is designed to be highly extensible with plugins. Several official plugins are listed, which add significant functionality:

  • Regions: Enables the creation of clickable overlays on the waveform to mark specific audio segments.

  • Hover: Displays the current time position when the user hovers their mouse over the waveform.

  • Envelope: Provides a graphical interface for controlling fade-in, fade-out, and overall volume of the audio.

  • Record: Allows recording audio directly from the user's microphone and visualizing it as a waveform.

  • Minimap: Displays a smaller overview waveform that can act as a scrollbar for navigating the main waveform.

  • Timeline: Adds visual time markers and labels beneath the waveform for better orientation.

  • Spectrogram: Generates a visual representation of the audio's frequency spectrum using Fast Fourier Transform (FFT).

• Versatile Applications: The examples suggest a wide range of applications for wavesurfer.js:

  • Basic waveform visualization

  • Multi-track audio mixing

  • Adding annotations to audio

  • Real-time audio recording and visualization

  • Implementing a Web Audio equalizer

  • Creating audio players with a SoundCloud-style interface

• Developer-Friendly: It offers a TypeScript API with comprehensive documentation, indicating a focus on providing a well-structured and typed interface for developers. The project also acknowledges its contributors, suggesting an active open-source community.

NES.css is presented as a NES (8-bit) style CSS framework. Its main functionality is to provide components. It's important to note that NES.css focuses solely on components, which means you'll need to define your own layout to use them. For installation, NES.css is available via npm, Yarn or a CDN. The framework is developed by a core team (Core Team Members), and also pays tribute to former active members (Core Team Emeriti) while acknowledging its contributors.

The "ResponsiveImage" JavaScript library has several key features:

• Responsive Images Made Easy The library simplifies the implementation of responsive images.

• Multi-Framework Support It supports various frontend frameworks like Ember, Solid, Svelte, and offers a universal web component, along with Vite and Webpack for local image processing.

• Next-Gen Image Formats It supports modern image formats such as WebP and AVIF, in addition to standard PNG and JPEG, to optimize image quality and file size.

• Local Image Processing It facilitates fast processing of local images, allowing for optional filters and effects, and generates responsive images at different sizes using the Sharp library.

• Image CDNs The library supports integration with image CDNs like Cloudinary or imgix through an image provider abstraction.

• Image Placeholders It supports Low Quality Image Placeholders (LQIP) using dominant colors, blurred low-resolution images, or ThumbHash placeholders to show previews while loading.

• Layout Modes Offers layout modes for fixed sizes (with 1x and 2x image variants) and responsive layouts using srcset with optimized image sizes across devices.

• Web Performance It includes lazy rendering by default, optimized content visibility and decoding settings, and optimized markup to prevent Cumulative Layout Shift (CLS).

• High Quality The library is thoroughly tested and built with modern tooling, including native TypeScript types.

Code in your browser, save, download, share the result.

mizu.js is a lightweight HTML templating library designed to simplify web development by bringing back the simplicity of plain HTML and JavaScript.

Features:

• Plug-and-play: mizu.js can be included and used instantly with vanilla JavaScript expressions and HTML.

• Cross-platform compatibility: It is compatible with a wide range of JavaScript and TypeScript runtimes, including major browsers.

• Any-side rendering: mizu.js allows content rendering wherever needed with user-friendly APIs. It works both client-side and server-side. On the client-side, rendering is explicit, requiring the *mizu attribute to enable mizu.js on a subtree, and reactivity is enabled, so changes to contexts will trigger a re-render. On the server side, rendering is implicit, so the *mizu attribute is not required and reactivity is disabled, meaning changes to contexts are not tracked and will not trigger a re-render.

• Flexibility: Suitable for single page applications, static websites, and interactive websites.

• Simplicity: mizu.js is close to vanilla JavaScript and HTML, ensuring a minimal learning curve.

• Customizability: It allows easy opting in/out of features.

• Hackable: Developers can pick features and customize their setup using developer-friendly APIs and a custom builder.

• Community-driven: Build, share, and reuse custom elements and directives to enhance development.

mizu.js uses directives (special HTML attributes) to instruct how elements should be processed. Some of the directives include:

• *mizu: Enables mizu.js rendering for the element and its children.

• *set: Sets context values for an element and its children.

• *if: Conditionally renders an element.

• *for: Renders an element for each iteration performed.

• *text: Sets element's textContent.

• *html: Sets element's innerHTML.

• *mustache: Enables content interpolation within mustaches ( {{ and }}) from Text child nodes.

• @event: Listens for a dispatched Event.

• :attribute: Binds an element's attribute value.

• ::value: Binds an <input>, <select> or <textarea> element's value attribute in a bi-directional manner.

• %http: Performs a fetch() call that can be handled by %response directives.

• *once: Renders an element once and skip subsequent updates.

• *refresh: Reprocesses an element at a specified interval (in seconds).

mizu.js also provides APIs for client-side and server-side use, with default directives enabled for each. The server-side API can generate static files from various sources, such as strings, local files, callback returns, and URLs.

JOYCO Marquee is a marquee component that leverages the Web Animations API to create smooth animations.

Features:

• Smooth Animations: Uses the Web Animations API for performance.

• Precise Control: Offers programmatic control over animation playback, which allows dynamic adjustments to speed and direction.

• Runtime Flexibility: Allows modification of animation parameters on the fly.

• React Component: Provides a <Marquee> component for use in React applications.

• Custom Hook: Includes a useMarquee hook for more control and sharing configurations.

• Customizable: Offers props for speed, speedFactor, direction, and class names.

• Automatic Workflows: Comes with GitHub Actions workflows for releases and publishing.

• Version Management: Uses Changesets to manage versions and publish releases.

• Framework Compatibility: While it has a React implementation, it is not strictly bound to React and can be implemented in other frameworks.

Bestatic is a free and open-source static-site engine that transforms text files into websites and blogs. It's designed for ease of use, offering graphical installation without dependency concerns.

Features:

• Blog-awareness: It includes customizable list pages for blog posts, reverse chronological order of posts, tags, custom taxonomies, comments, URL customizations, multiple author support, and RSS feeds.

• Feature-richness: Bestatic supports LaTeX, syntax highlighting, powerful search, auto-reloading server, and configurable navigation.

• Flexibility: Configuration is done via YAML files or CLI options, and theming uses Jinja2 templating, allowing for different layouts across pages.

• Scalability: It builds static files, eliminating the need for database management, server maintenance, and constant security updates.

• Simplicity: Bestatic focuses on user-friendliness through graphical installation, OS compatibility, quickstart guides, and in-depth documentation.

To get started, you install Bestatic, obtain a theme, write content in Markdown, customize using Jinja2 if desired, and then run Bestatic to generate the website or blog, which can then be deployed on git-based platforms or a private server.

Datenstrom Yellow is designed for people who make small websites.

Here’s a summary of its main features:

• Easy to Use: It allows website editing directly in a web browser after logging in, offering immediate feedback on changes, which makes updating websites straightforward.

• File and Folder Based: Websites can be edited using a text editor, making it suitable for creating web pages, wikis, and blogs. This setup is particularly convenient for developers, designers, and translators.

• Simple Installation: Installation involves downloading a single file, unzipping it, and copying the contents to a web server.

• Extensible: It includes essential features and supports extensions for additional functionalities, languages, and themes.

• Open Source: Datenstrom Yellow is open source.

• No database, no admin panel

MapLibre GL JS is an open-source library that allows you to publish maps on websites or webview-based applications. It renders maps quickly using GPU-accelerated vector tiles. Key features include:

• Interactive vector tile maps in the browser.

• It is a fork of mapbox-gl-js from before their switch to a non-OSS license in December 2020.

• Flexibility: Initial versions were intended as a replacement for Mapbox’s OSS version with added functionality, but it has evolved since.

• Customization: It can be integrated with React and Angular.

• Open Source: It is licensed under the 3-Clause BSD license.

• Community-led: MapLibre GL JS welcomes contributions and leaders to avoid fragmentation of free software alternatives to mapbox-gl-js.

Hyper 8 is a static site generator for video publishing. Here's a summary of its key features:

• Video Site Creation: It allows the creation of video sites ranging from single videos to playlists and entire video archives.

• User Interface: It offers a graphical user interface for building and publishing sites, but also supports text editor and terminal-based workflows.

• No Maintenance: The generated sites require no database, programming, or maintenance.

• Compatibility: It is compatible with virtually every web host.

• Adaptability: It adapts to various use cases, such as presenting a single video, a single playlist, or a collection of videos and playlists.

• Theming: It offers adaptive theming with dark or light color schemes.

• Localization: Both the graphical user interface and the generated sites are localizable.

• Resource-Conscious: It offers tools and design choices supporting conscious handling of resource-intensive media.

• Free and Non-Profit: It is developed for public benefit and licensed as free software under AGPLv3+.

iro.js is a "modular, design-conscious color picker widget for JavaScript" with the following key features:

• Color Format Support: It supports hex, RGB, HSV, HSL formats, and even kelvin temperatures.

• Multiple Colors: You can add multiple colors to a single color picker to select color harmonies and themes.

• Pre-built UI Components: It allows you to create color pickers using pre-built UI components.

• No External Dependencies: iro.js operates from a single script without requiring extra CSS, images, or third-party libraries.

• LED Control: It provides a UI suitable for controlling RGB lighting in smart home applications.

• Free to Use: It is licensed under MPL 2.0, making it free for commercial and personal use.

• Easy Installation: It can be installed via NPM or used directly from the jsDelivr CDN.

• Customizable: The color picker can be customized with various options, such as size and initial color.

• Event Handling: It allows you to run code when specific events occur, like when the selected color changes.