Open Source & Free Tools for Web Workers

happyconf.net is a web-based platform designed to transform inactive conference screens into professional, animated displays and provide organizers with practical event management tools.

The main features of this service include:

• Animated Slideshows: It allows organizers to create elegant presentations to highlight speakers, showcase sponsors, share announcements, and display quotes from the event.

• Integrated Event Utilities: Beyond slides, the platform includes a remote-controlled countdown timer, a large room clock, and a fair prize draw system to entertain and inform attendees during breaks.

• Web-Based and Installation-Free: The service runs entirely in a web browser, requiring no software installation; it can be projected onto any connected screen, TV, or projector.

• Professional Visual Themes: Users can choose from ready-made themes like "Cyberpunk," "Glassy," or "Romantic," or request a fully custom theme to match their specific graphic identity.

• Real-Time Dashboard: Content is managed through a private admin area, and the public display updates in real time as changes are made.

• Event-Based Pricing Model: Instead of a recurring subscription, it offers a "pay-per-event" system with tiers (Starter, Pro, and Custom) tailored to different event sizes, from small meetups to large professional conferences.

• Privacy and Data Sovereignty: To display content, a login is required; once an event is over, all user data is typically deleted to ensure privacy.

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.

PowerGlitch is a tiny library that can be used to apply glitch effects to any element on a webpage using CSS animations, without using a canvas. Here's a breakdown of its features:

• Functionality: PowerGlitch is used to create glitch effects on web elements. It leverages CSS animations to achieve this effect.

• Size and Dependencies: The library is very small, weighing less than 2kb when minified and gzipped. It is also a standalone library, meaning it has no external dependencies.

• Implementation: PowerGlitch can be installed using package managers like npm or yarn, or by importing the web bundle in a script tag.

• Usage: To use PowerGlitch, you need to find the HTML element that you want to apply the glitch effect to, and add the 'glitch' class to it. Then, initialize the glitch effect using the PowerGlitch.glitch('.glitch') command.

• Customization: The library offers customization and optimization tips that can be found in the usage guide.

• Integrations: PowerGlitch has integrations with React (react-powerglitch) and Vue (vue-powerglitch).

• Topics: The library is associated with topics such as javascript, css, gifs, library, css-animations, glitch-art, mosh, glitching, glitched-images, glitch-effect, and glitchify-images.

• Licensing: PowerGlitch is released under the MIT license.

KinesisJS is a JavaScript library primarily used for managing and simulating animations or dynamic interactions based on mouse movements or scroll events. Here are its main features:

Parallax Effects

• Mouse movement-based animations: Allows elements to move at different speeds in response to mouse movements, creating a sense of depth.

• Scroll effects: Elements can move or animate based on the page's scroll position.

Easy Configuration

• Animations can be easily configured through simple options or by applying attributes to HTML elements.

• Supports parameters such as direction, speed, and movement boundaries.

Layer Management

• KinesisJS enables defining multiple layers of elements for complex parallax effects. Each layer can have specific speed and direction settings.

Responsiveness

• Compatible with responsive environments, adapting to screen sizes and orientations to maintain effects on mobile devices and tablets.

Optimized Performance

• Utilizes requestAnimationFrame for smooth and efficient animations, reducing system resource consumption.

Customizable Interactions

• Allows specific triggers to be set (e.g., activating effects only after a certain scroll point or when the mouse enters a defined area).

Support for Non-linear Transitions

• Animations can include transitions with acceleration/deceleration curves for more natural and customized effects.

Typical Use Cases:

• Creating interactive websites with impressive visual animations.

• Adding parallax effects to enhance a page's aesthetics and user experience.

• Animating specific elements to draw attention to content or guide the user.

i-HTML fetches a requested HTML resource and replaces the element's inner contents with the parsed content of the response. It's similar to an <iframe> but adopts the HTML into the page.

Key functionalities and features of <i-html> include:

• Basic Usage: The <i-html> tag is placed as an empty container, and when the src= attribute changes, it fetches the HTML and updates the content.

• Targeting with Links: Like iframes, <i-html> respects the target= attribute on links, so a link with a target that matches the id of an <i-html> element will load the link's href into the element.

• Targeting with Forms: Similarly, <i-html> respects target= attributes on forms, allowing forms to submit to an <i-html> element and load new content. Forms can also be wrapped in <i-html> elements to create "AJAX-style" forms. The formaction= attribute of buttons is also supported.

• Content Selection: By default, <i-html> injects the <body> element's content but this can be customized with the target= attribute, which uses a querySelector to select specific content.

• Refetching: Content can be refetched by clicking a link or by using a <button command="--load"> element. The Refresh header or <meta http-equiv=refresh> tag in the response can also trigger a refresh.

• Content Negotiation: The accept= attribute allows customization of the Accept header in the request, limited to text/plain, text/html, image/svg+xml, and application/xml. Invalid MIME types default to text/html.

• Streaming: With accept="text/event-stream", <i-html> uses EventSource to listen for Server-Side Events, allowing for multiple content updates with a single request.

• Insertion Modes: Content can be appended (insert="append") or prepended (insert="prepend") to existing content instead of replacing it.

• Deferring Loading: The loading= attribute can be set to lazy to defer loading until the element is visible, or to none to prevent loading until changed via JavaScript. A <button command="--load"> can force loading regardless of the loading attribute.

• Security: <i-html> uses fetch() and adheres to CORS policies. By default, it only fetches same-origin URLs. The allow="cross-origin" attribute allows cross-origin requests. Several elements, such as <iframe>, <script>, and <style> are sanitized out by default, unless specifically allowed with the allow attribute.

• Declarative Shadow DOM: <i-html> supports declarative shadow DOM (DSD) if the browser supports Document.parseHTMLUnsafe. Older browsers require a polyfill.

• Styling: The element has pseudo-classes (:waiting, :loading, :loaded, and :error) for styling during different stages of its lifecycle, and uses attributes like [state-waiting] in older browsers.

• Events: <i-html> dispatches events such as loadstart, load, loadend, error, beforeinsert, and inserted during its lifecycle. The loadstart event can be used to customize the request or prevent loading. The beforeinsert event can modify or prevent content insertion.

<i-html> aims to combine the best features of similar elements, like include-fragment, and offers more functionality than other options like htmx or htmz. It remains in the DOM and can refetch content, unlike <include-fragment> which replaces itself.

Features:

• Customizable CSS property prefixes. For example, the prefix for "display" can be changed from "dis" to "d".

• Optional custom value names. For instance, the value "flex" can be associated with the custom name "fx".

• Selective addition of !important keyword utility classes. By setting generate_utility to true, utility classes with !important can be generated for each CSS property.

• Responsive design on-demand. Users can set screen sizes and apply CSS properties selectively for each size. Responsive settings are defined in the screenSizes object. The responsive property can be set to true or false for each CSS property.

• Use of tokens. Tokens are lists of names associated with values, organized by families, and reusable. Tokens prevent repeating the same names and values across multiple CSS properties. Each token is written as a CSS variable.

• CSS variables that are automatically generated.

• Automatic documentation of the CSS output. An interactive documentation is generated automatically.

• Instant file size impact of the settings.

• Offline functionality.

To get started, users need to download the starter project, edit the build.json file, and run it through a browser. The tool requires only a text editor, a web server, and a browser. The JSON settings include:

• separator: A string to split names, values, and utility prefixes.

• responsiveSeparator: A string to split screen size names.

• utilitiesPrefix: A string for utility classes.

• cssVariablesPrefix: A string used for tokens' CSS variables.

• screenSizes: An object that defines screen sizes.

The JSON tokens are lists of names associated with values, organized by families. Tokens are optional and can be left empty if unused.

The JSON properties object has keys that are valid CSS property names. Each CSS property has a prefix, generate_from to refer to a token, a list of values, an optional list of names, responsive which is a boolean, and a generate_utility boolean to generate utility classes.