Open Source & Free Tools for Web Workers

Discover amazing tech resources, carefully handpicked to keep you up-to-date and elevate your efficiency. Already 1501 badass resources curated.

  • Remote Rocketship
    Sponsor

    Remote Rocketship

    Find Your Dream Remote Job. Search 100,000+ work from home jobs at top remote companies. Loved by 10,000+ remote workers

    Read more
  • Remote Rocketship
    Remote Rocketship Remote Rocketship Remote Rocketship Remote Rocketship

    Find Your Dream Remote Job. Search 100,000+ work from home jobs at top remote companies. Loved by 10,000+ remote workers

    Remote Rocketship is a powerful job search platform designed to help you land your dream remote career by uncovering thousands of opportunities that other job boards miss.

    Here are the key benefits that give you a competitive edge:

    • Access to "Hidden" Jobs: Unlike traditional job boards that require companies to pay for listings, Remote Rocketship scrapes the entire internet daily to find jobs directly from company websites. This ensures you don't miss out on positions from top companies that choose not to use paid platforms like LinkedIn.

    • A Crucial Head Start: In a competitive market, being first matters. The tool finds jobs as soon as they are posted, allowing you to submit your application before the competition even knows the role exists.

    • Effortless Job Hunting: Instead of manual searching, you can set up daily email alerts that deliver the latest openings tailored to your specific interests directly to your inbox.

    • Hyper-Targeted Search: You can filter through over 100,000 remote jobs using granular criteria such as minimum salary, tech stack (e.g., Python, AWS), visa sponsorship (H1B), or even "no degree required" roles.

    • Global and Diverse Opportunities: The platform covers a vast range of industries—including AI, Fintech, Cybersecurity, and Marketing—and tracks remote-friendly roles in the US, Canada, Europe, Brazil, and worldwide.

    • Authenticity and Trust: Built originally as a personal tool to help the founder's wife find work, the service focuses on providing legitimate, up-to-date work-from-home listings by checking company websites multiple times a day.

      The website link is an affiliate link.

  • Shipfast
    Sponsor

    Shipfast

    Ship your startup in days, not weeks. Shipfast is a NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.

    Read more
  • Shipfast
    Shipfast Shipfast Shipfast Shipfast Shipfast

    Ship your startup in days, not weeks. Shipfast is a NextJS boilerplate with all you need to build your SaaS, AI tool, or any other web app and make your first $ online fast.

    ShipFast is a comprehensive NextJS boilerplate designed to help entrepreneurs and developers launch startups as quickly as possible, ideally within minutes. It provides a pre-configured foundation that includes all the essential "plumbing" of a modern web application so users don't have to build common features from scratch.

    The main features of the tool include:

    • Full-Stack Infrastructure: It comes integrated with Next-Auth for user authentication (supporting Google OAuth and Magic Links) and offers out-of-the-box support for databases like MongoDB and Supabase.

    • Ready-to-Use UI Components: The boilerplate includes a wide array of React components specifically for conversion, such as pricing tables, FAQ sections, testimonials, and "Hero" sections.

    • Monetization & Communication: It features built-in integrations for Stripe subscriptions and payments, along with email handling systems for tools like Mailgun or Resend.

    • Optimized for Growth: The tool is pre-configured with SEO best practices, analytics, and customer support modules to help a new business scale.

    • Security & Reliability: It incorporates essential security features such as rate limiting, schema validation, and security headers to protect the application.

    • Centralized Customization: Most of the app's behavior is controlled through a single config.js file, which acts as the backbone of the application and simplifies the setup process.

    The project structure is designed for efficiency, with dedicated directories for API routes, database models, and library helper functions, allowing for a clean and scalable codebase.

  • Whimsical help you collaborate on your ideas visually
    September 25, 2018

    Whimsical help you collaborate on your ideas visually

    Whimsical is a collaboration tool that helps you do flowcharts, wireframes, sticky note exercises, and more. The starter offer let you create up to 4 free diagrams and it's only 10$/user/month for unlimited diagrams.

    Read more
  • Whimsical help you collaborate on your ideas visually
    Whimsical help you collaborate on your ideas visually Whimsical help you collaborate on your ideas visually

    Whimsical is a collaboration tool that helps you do flowcharts, wireframes, sticky note exercises, and more. The starter offer let you create up to 4 free diagrams and it's only 10$/user/month for unlimited diagrams.

    Whimsical is an all-in-one workspace designed to unite teams, tasks, and tools in a single place. The core purpose is to help teams think it, plan it, and build it without switching apps. The platform advocates for "The Whimsical Way," which seeks to help users achieve high levels of focus, productivity, and calm at work.

    By utilizing Whimsical, teams can escape the clutter associated with the "old way of working," which involved scattered conversations, wasted time switching between apps, and chaotic work environments. Instead, Whimsical provides one dedicated place for ideas, documents, projects, conversations, and notifications, leading to work that feels "calm and focused".

    The Four Core Tools

    Whimsical integrates four fundamental tools to manage the entire workflow, from brainstorming to launch:

    1. Boards: These provide an infinite canvas for creating visual assets such as diagrams, wireframes, whiteboards, mind maps, and flowcharts. Boards are useful for retrospectives and workshops, incorporating features like sticky notes, voting, and timers.

    2. Docs: These are described as clutter-free documents used to align the team and move work forward. Docs are where ideas transition into plans, shared notes are created, and Product Requirement Documents (PRDs) are drafted. Users can embed Boards into Docs to add important context and visual clarity.

    3. Projects: This is an integrated project space designed for tasks, documents, and communication. It functions as a project management tool that is connected to all other Whimsical content, enabling teams to "work calmer and ship faster".

    4. Posts: Posts represent a mindful approach to team communication free from noise. They are used to keep everyone in sync by sharing project updates, team check-ins, and feedback requests. Posts can be automatically shared to Slack for greater visibility.

    Key Features and Connectivity

    The entire Whimsical workspace is fundamentally connected.

    • Linking and Embeds: Users can easily link a file, task, or teammate anywhere in Whimsical by typing @. Importantly, these links can be displayed as visual embeds, making critical context easier to understand.

    • Notifications: Whimsical aims for "Notifications done right," ensuring users receive real-time updates only when desired, supporting peaceful focus otherwise.

    • Templates and Resources: The platform provides templates for every step of the workflow, from ideation to launch. It also offers a desktop app for macOS or Windows and includes resources like a Help Center, Blog, and comparison information against competitors such as Notion, Jira, and Miro. The tools list also mentions "Whimsical AI".

    Solutions for Specific Teams

    Whimsical offers tailored solutions to help different organizational functions streamline their work:

    • Product: Defining, scoping, and communicating product work in a single shared space.

    • Design: Mapping flows, gathering feedback, and maintaining team synchronization.

    • Engineering: Converting specifications into shippable work using clear documentation and diagrams.

    • Marketing: Planning campaigns, tracking updates, and facilitating cross-team collaboration with clarity.

    • Agencies: Streamlining client work, collaboration, and approvals.

    • Startups: Staying aligned on priorities, progress, and decisions without introducing "noise".

  • Tooty, a Mastodon web client
    September 25, 2018

    Tooty, a Mastodon web client

    Tooty is an alternative multi-accounts Web client for Mastodon written in Elm by Nicolas Perriault. I've been using it since the beginning on Mastodon and I love it! You should check it out ;-)

    Read more
  • Tooty, a Mastodon web client
    Tooty, a Mastodon web client

    Tooty is an alternative multi-accounts Web client for Mastodon written in Elm by Nicolas Perriault. I've been using it since the beginning on Mastodon and I love it! You should check it out ;-)

    Tooty, is an alternative multi-accounts Web client for Mastodon.

    Features:

    Core Functionality

    • Mastodon Client: Tooty serves as a dedicated web client for the Mastodon social network.

    • Multi-Account Support: A key feature is its ability to manage multiple accounts simultaneously.

    • Written in Elm: The application is an experimental client written predominantly in the Elm programming language (92.3%). It also uses CSS (6.1%) and HTML (1.6%).

    Technical Usage and Deployment

    • Fully Static Web Application: Tooty is a fully static web application designed to run in recent browsers.

    • No Custom Server Required: Users do not need any custom server setup to utilize it. It only needs to be served (e.g., over HTTP).

    • Publicly Hosted Option: A public version of the client is hosted on Github Pages.

    • Self-Hosting: Users can self-host the application by obtaining a build and serving it over HTTP.

    • Licensing: The project is available under the MIT Licence.

    Development and Optimization Features (for self-hosters/developers)

    The repository provides commands for development and production deployment:

    • Building: The application can be built using $ npm run build.

    • Optimization: The optimization command ($ npm run optimize) compresses and optimizes the generated JavaScript bundle, typically reducing its size by about 75%. This step is intended for deploying Tooty to production.

    • Deployment: A command exists to deploy the app specifically to GitHub Pages ($ npm run deploy).

    • Testing: Developers can launch the test suite using $ npm test.

    • Development Servers: Commands are available to start the development server ($ npm run live), or run it in live debug mode (e.g., $ npm run debug:all to watch for CSS changes).

  • October 2, 2018

    Web & Graphic Designer

    You’ll have the ability to design conversion optimised and responsive websites for multiple devices, as well as general digital communication design assets. You will mainly work on the design of ROLI’s websites, ensuring brand guidelines are met whilst striving to constantly enhance the content, functionality and beauty of these assets. You’ll see projects through from conception to on site execution, working from briefs based on commercial needs. You’ll also execute the digital design of ROLI’s calendar of campaigns and promotions, including the creation of landing pages and other online assets.

    Read more
  • You’ll have the ability to design conversion optimised and responsive websites for multiple devices, as well as general digital communication design assets. You will mainly work on the design of ROLI’s websites, ensuring brand guidelines are met whilst striving to constantly enhance the content, functionality and beauty of these assets. You’ll see projects through from conception to on site execution, working from briefs based on commercial needs. You’ll also execute the digital design of ROLI’s calendar of campaigns and promotions, including the creation of landing pages and other online assets.

  • Boostnote, take note everywhere
    October 2, 2018

    Boostnote, take note everywhere

    The note-taking app for programmers that focuses on markdown, snippets, and customizability.
    Edit your code and wikis from anywhere. Free and available on Windows, Linux, Mac, AUR.

    Read more
  • The note-taking app for programmers that focuses on markdown, snippets, and customizability.
    Edit your code and wikis from anywhere. Free and available on Windows, Linux, Mac, AUR.

  • Openroute service, an open source alternative to Google map API
    October 2, 2018

    Openroute service, an open source alternative to Google map API

    The openrouteservice API consumes user-generated and collaboratively collected free geographic data, directly from OpenStreetMap.

    Read more
  • Openroute service, an open source alternative to Google map API
    Openroute service, an open source alternative to Google map API Openroute service, an open source alternative to Google map API Openroute service, an open source alternative to Google map API

    The openrouteservice API consumes user-generated and collaboratively collected free geographic data, directly from OpenStreetMap.

    Openrouteservice (ORS), provides a variety of Geo-services via a single, free, and open source API designed for smart mobility. ORS consumes geographic data that is user-generated and collaboratively collected directly from OpenStreetMap (OSM).

    The key functionalities and services of openrouteservice are organized into several core API services and specialized planning tools:

    Core API Services

    The API provides interactive documentation for a wide range of services:

    • Directions: This service offers rich route instructions globally. It supports various profiles including cars, trucks, different bike profiles, walking, hiking, or wheelchair. Routes can be customized using options such as road restrictions and vehicle dimensions.

    • Isochrones: Used for reachability analysis, this service helps determine which areas objects can reach within given times or distances. Users can request up to 500 Isochrones per day for free.

    • Time-Distance Matrix: This feature calculates many-to-many distances and route times much faster than repeated consumption of the directions API. It is frequently utilized by logistics organizations seeking optimal delivery routes.

    • Pelias Geocoding: Transforms location descriptions (e.g., place names, street addresses, postal codes) into a normalized location with point geometry. This service is built on top of the sophisticated Pelias Stack.

    • POIs (Points of Interest): Known as Openpoiservice, it allows users to find categories of points of interest around or within given geographic coordinates. Searches can be executed along a point, path, or within a polygon.

    • Elevation (Openelevationservice): Easily enriches 2D geometries with height information based on SRTM data, returning the 3D version within milliseconds.

    • Optimization: Addresses complex planning problems like the Traveling Salesmen and other Vehicle Routing Problems. Based on the Vroom project, it provides optimal routes while considering specific vehicle and time constraints.

    Planning Tools and Clients

    openrouteservice provides several planning clients tailored for different user needs:

    • Classic Maps Client: This route planning tool enables users to access most of the openrouteservice API functionalities. Users can choose from a variety of profiles, set up to 50 waypoints, and customize routes by avoiding specific areas, street types, or whole countries. It also allows querying POIs along routes and performing accessibility analyses.

    • New Maps Client: Built using the VueJs framework, this client is responsive and optimized for both mobile and desktop browsers. It retains all functionalities of the previous client and aims to simplify route planning. The new approach also makes it possible to convert the client to a native mobile app.

    • Disaster Maps Client: Developed specifically to support humanitarian actors and disaster responders. In disaster situations, the service is limited to active disaster regions, allowing the routing graph to be recalculated every hour based on current OSM data. This capability is part of the expanded Disaster Management functionalities offered by ORS.

    Technical and Development Aspects

    • Open Source and Data: The code for openrouteservice is entirely opensource and freely available on GitHub. It is humanitarian focused, constantly developing services to meet current needs in disaster prevention and relief.

    • SDK Support: Using the API is simplified through available SDKs for Python, R, JavaScript, and QGIS.

    • Export Endpoint: Users can export the routing graph for use in external analyses, such as calculating edge centrality.

    • Version 8.0 Enhancements: Recent updates include a low RAM option, a new Docker Compose setup, overhauled configuration, improved logging, new backend documentation, and the ability to run the service as a JAR.

  • WatermelonDB, next-generation React database
    October 2, 2018

    WatermelonDB, next-generation React database

    WatermelonDB is a new way of dealing with user data in React Native and React web apps. It's optimized for building complex applications in React / React Native, and the number one goal is real-world performance.

    Read more
  • WatermelonDB, next-generation React database
    WatermelonDB, next-generation React database

    WatermelonDB is a new way of dealing with user data in React Native and React web apps. It's optimized for building complex applications in React / React Native, and the number one goal is real-world performance.

    WatermelonDB is a reactive & asynchronous database designed for powerful React and React Native apps. It is optimized for building complex applications, with its primary goal being real-world performance.

    Features:

    Performance and Scalability

    • Instant Launch: WatermelonDB is engineered to launch your app instantly regardless of the amount of data it holds.

    • High Scalability: It is highly scalable, capable of handling systems ranging from hundreds up to tens of thousands of records.

    • Fast Operations: The tool is designed to be fast, with ongoing performance improvements in every release.

    Data Handling and Architecture

    • Lazy Loading: WatermelonDB resolves performance bottlenecks (especially when scaling to thousands of records) by being lazy. Nothing is loaded until it’s requested.

    • SQLite Foundation: It is built on a rock-solid SQLite foundation. All querying is performed directly on the SQLite database on a separate native thread, ensuring that most queries resolve instantly.

    • Relational Structure: The database is Relational. Developers can define models (like Post and Comment) and relationships using decorators.

    • Offline-First: It supports an Offline-first approach, with functionality to sync data with your custom backend.

    Reactivity and Observability

    • Fully Observable: Unlike using SQLite directly, WatermelonDB is fully observable.

    • Automatic Re-rendering: It is Reactive (offering an optional RxJS API). When a record is changed, added, or removed (even in a different part of the application), all dependent UI components will automatically re-render.

    • React Optimization: It is Optimized for React, allowing users to easily plug data into components.

    Compatibility and Standards

    • Multiplatform: WatermelonDB is Multiplatform, supporting iOS, Android, Windows, web, and Node.js.

    • Framework-Agnostic: While optimized for React, it is Framework-agnostic, meaning its JavaScript API can be used to plug into other UI frameworks.

    • Static Typing: It supports Static typing via Flow or TypeScript.

    • Open Source: WatermelonDB is an open-source project that encourages contribution. It is available under the MIT license.

  • UX Collective
    October 2, 2018

    UX Collective

    Stories for designers, thinkers and makers.

    Read more
  • UX Collective
    UX Collective

    Stories for designers, thinkers and makers.

    The UX Collective (ISSN: 2766-5267) is an independent design publication and blog built to help designers think more critically about their work. Curated stories on user experience (UX), visual, and product design. The polar bear is a reference to "Information Architecture for the Web and Beyond", one of the most famous books in UX. Email: hello@uxdesign.cc

  • Sal.js, lightweight scroll animation library
    October 2, 2018

    Sal.js, lightweight scroll animation library

    Sal (Scroll Animation Library) is written with aim to provide performant and lightweight solution for animating elements on scroll. It's based on the Intersection Observer, which gives amazing performance in terms of checking the element's presence in viewport.

    Read more
  • Sal.js, lightweight scroll animation library
    Sal.js, lightweight scroll animation library

    Sal (Scroll Animation Library) is written with aim to provide performant and lightweight solution for animating elements on scroll. It's based on the Intersection Observer, which gives amazing performance in terms of checking the element's presence in viewport.

    Sal (Scroll Animation Library), a performance-focused, lightweight scroll animation library written in vanilla JavaScript. It has no dependencies and is very lightweight, weighing less than 2.8 kb.

    Functionalities:

    Core Performance and Mechanism

    • Performance: Sal was created to provide a performant solution for animating elements on scroll.

    • Underlying Technology: It is based on the Intersection Observer API, which provides exceptional performance in checking an element's presence in the viewport.

    • Initialization: Animations are triggered by initializing Sal with sal() in a script file. The library automatically looks for all elements containing a data-sal attribute and launches their animations when they enter the viewport.

    Animation and Customization

    • Animation Types: Sal supports several predefined animations:

      • fade

      • slide-up, slide-down, slide-left, slide-right

      • zoom-in, zoom-out

      • flip-up, flip-down, flip-left, flip-right

    • Data Attribute Customization: Animation options can be customized for specific elements using data attributes:

      • data-sal-duration: changes the animation duration (ranging from 200 to 2000 ms).

      • data-sal-delay: adds a delay to the animation (ranging from 5 to 1000 ms).

      • data-sal-easing: sets the easing function for the animation.

    • CSS Variable Customization: Users can also customize duration, delay, and easing using CSS variables (custom properties), such as --sal-duration, --sal-delay, and --sal-easing, allowing them to set any desired value. Data attributes take precedence over CSS custom properties.

    • Repeating Animations: By default, animations play once (once option set to true). This can be overridden globally during initialization, or individually for elements using data-sal-repeat (forces replay) or data-sal-once (plays once) attributes.

    Configuration Options

    During initialization, Sal allows users to configure options:

    • threshold: Defines the percentage of an element's area that must be visible to launch the animation (Default: 0.5).

    • once: A Boolean defining if the animation is launched only once (Default: true).

    • disabled: A Boolean flag or a function returning a Boolean used for disabling animations (Default: false).

    • Advanced Options: These include setting the root element (Default: window), specifying a custom element selector (Default: [data-sal]), and defining rootMargin (Default: 0% 50%).

    Public API Methods

    Once Sal is initialized, public methods are available to manage the animations:

    • enable: Activates animations.

    • disable: Deactivates animations.

    • reset: Resets the instance and allows passing a new set of options, useful for providing different options for specific viewport sizes.

    • update: Updates the observer to recognize new elements that need to be animated, which is useful for dynamically injected HTML.

    Events and Compatibility

    • Events: Sal fires custom events when an element is entering the viewport (sal:in) or exiting the viewport (sal:out). Listeners can be attached to a specific element or the entire document.

    • No-JS Support: The library provides methods to support users who have disabled JavaScript by suggesting the use of the <noscript /> element to inject CSS that disables the animation styles.

    • License: Sal is an open-source project released under the MIT License.

  • MJML makes responsive email easy
    October 2, 2018

    MJML makes responsive email easy

    MJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax.

    Read more
  • MJML makes responsive email easy
    MJML makes responsive email easy MJML makes responsive email easy MJML makes responsive email easy

    MJML is responsive by design on most-popular email clients, even Outlook. Write less code, save time and code more efficiently with MJML’s semantic syntax.

    MJML (Mailjet Markup Language) is an open-source framework described as the only framework that makes responsive email easy. It was created to abstract the complexity of responsive HTML and automatically generate it, redefining the coding experience for email.

    Here are the principal characteristics of the MJML tool:

    1. Purpose and Rationale

    MJML was created by a team of Mailjet developers in early 2015 to tackle the difficulty of coding responsive email. The creation was necessary because responsive email is hard, largely due to the fact that HTML for email is very different from standard web HTML. Each email client renders HTML in its own way, and some issues, like Gmail removing the entire header section where CSS might be placed, complicate design and guarantee.

    The framework was designed because the Mailjet team recognized two major trends: a) email HTML is antiquated and not developer-friendly, and b) the growing number of screens (mobile, tablet, smartwatches, and potentially VR devices) on which email is viewed.

    2. Core Functionality: Transpilation and Responsiveness

    MJML is essentially an engine transpiling <mj-*>-style markup language into responsive email HTML with nested tables and inline CSS.

    • Responsive by Default: MJML is responsive by design on most popular email clients, even Outlook. It ensures that the user's MJML will always be up-to-date and responsive. The engine reads the sections of the email and their intended appearance, then handles the rendering in a responsive way.

    • Abstraction of Complexity: It rolls up the lessons learned by the Mailjet Developer team concerning HTML email design, abstracting the entire layer of complexity related to responsive email design. MJML handles the regular updates to email client specifications and requirements, allowing users to spend less time reading up on the latest changes.

    3. Efficiency and Semantic Syntax

    MJML allows users to write less code, save time, and code more efficiently.

    • Semantic Syntax: It uses a semantic syntax that boosts speed and productivity. Users can build a responsive email using simple tags like <mj-section> and <mj-column>, avoiding endless HTML table nesting or email client-specific CSS.

    4. Component-Based Structure

    The framework utilizes a component-based structure, which allows users to write high-level code through reusable and extensible components.

    • Focus on Content: By using MJML components, developers can focus on the content rather than the tricky part of styling.

    • Component Examples: It includes low-level components, such as <mj-image>, and higher-level components, like <mj-article>. For example, including an article requires only specifying attributes like a link to an image, a title, a description, and a link to the article within the <mj-article> tag.

    • Customization: Users can quickly integrate components natively included in MJML, and they can also build their own custom components.

    5. Technology and Community

    • Technology Stack: The MJML engine was built in React.js due to the platform's high composability and how it handles components, making it easy to extend and reuse high-level components.

    • Open Source: MJML is an open-source framework that was shared with the community to make responsive email easier. The source code is available on Github, where the community is encouraged to contribute to the engine and its components.

    • Support: MJML is proudly powered by Mailjet and is widely used and well-supported.

  • LazyLoad, a vanilla javascript lazyload solution
    October 2, 2018

    LazyLoad, a vanilla javascript lazyload solution

    LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images, video or iframes as they enter the viewport. It’s written in plain “vanilla” JavaScript, uses Intersection Observers, and supports responsive images. It’s also SEO-friendly and it has some other notable features.

    Read more
  • LazyLoad, a vanilla javascript lazyload solution
    LazyLoad, a vanilla javascript lazyload solution

    LazyLoad is a fast, lightweight and flexible script that speeds up your web application by loading images, video or iframes as they enter the viewport. It’s written in plain “vanilla” JavaScript, uses Intersection Observers, and supports responsive images. It’s also SEO-friendly and it has some other notable features.

    LazyLoad (or vanilla-lazyload) is an open-source, lightweight script designed to improve website performance by deferring asset loading.

    Here is a summary of its main characteristics:

    Core Identity and Performance Optimization

    • Goal: LazyLoad is a lightweight (2.4 kB) and flexible script that speeds up your web application.

    • Mechanism: It works by deferring the loading of elements that are below-the-fold until they are about to enter the viewport.

    • Technology Base: It is written in plain "vanilla" JavaScript. It leverages the IntersectionObserver API.

    • SEO Friendliness: The script is SEO friendly as it does not hide assets from search engines. It detects if the user agent can scroll; if not, it instantly reveals all images.

    Supported Content Types and Customization

    LazyLoad can defer the loading of several types of content, requiring the use of data- attributes instead of actual attributes (e.g., data-src instead of src).

    Content TypeKey Features / SupportImagesSupports standard images, responsive images with srcset and sizes (using data-srcset and data-sizes). It also supports responsive images using the <picture> tag for art direction, Hi-DPI support, and WebP format selection.BackgroundsOnly vanilla-lazyload can lazyload background images, including single backgrounds, multiple backgrounds, and supporting HiDPI screens (Retina/Super Retina displays). It also supports backgrounds applied with image-set().VideosIt can lazyload the <video> tag, including multiple <source> tags. The video poster can also be lazily loaded.IframesSupports lazy loading the <iframe> tag.Scripts/FunctionsCan be configured to lazily execute arbitrary scripts or functions when specific elements enter the viewport.SVGsCan lazyload animated SVGs via the <object> tag.

    Advanced Features and Reliability

    • Native Lazy Loading: It supports the conditional usage of native lazy loading by setting the use_native option to true. On supporting browsers, it delegates the loading of images, iframes, and videos to the browser using the loading="lazy" attribute.

    • Dynamic Content: Provides an update() method to re-check the DOM for lazy elements after content has been added or removed asynchronously (e.g., via AJAX).

    • Handling Long Tasks: It optimizes for performance by cancelling the download of images that exit the viewport while still loading, which is especially helpful for mobile users on slow connections.

    • Error Handling: If an error occurs (such as a network connection going offline), vanilla-lazyload retries loading the assets when the network becomes available again. It also allows for image error handling via a callback_error function, enabling users to set fallback images.

    • Layout Stability: It provides tips to minimize CLS (Cumulative Layout Shift) by advising developers to set width and height attributes on lazy images/videos to occupy space before loading.

    • API Control: It offers methods to loadAll() remaining elements, restoreAll() (restoring DOM to its original state, useful for SPAs), and destroy() the instance to free memory.

    Implementation and Installation

    • Installation: It can be installed using npm (npm install vanilla-lazyload), bower, or included directly from a CDN.

    • Initialization: It is typically initialized by creating a new instance of LazyLoad and passing an options object (new LazyLoad({})).

    • Configuration: Highly flexible, the API allows customization of options such as the scrolling container, the loading threshold (or multiple thresholds using rootMargin syntax), and the CSS elements_selector (defaulting to ".lazy").

    • Bundles: Available in UMD, IIFE, and ES Module formats.

  • Vapid CMS
    October 9, 2018

    Vapid CMS

    Vapid is an intentionally simple content management system built on the idea that you can create a custom dashboard without ever leaving the HTML.

    Read more
  • Idle Until Urgent
    October 9, 2018

    Idle Until Urgent

    Philip Walton published a new article where he do a deep dive into improving website performance with a technique he's calling Idle Until Urgent.

    Read more
  • Idle Until Urgent
    Idle Until Urgent

    Philip Walton published a new article where he do a deep dive into improving website performance with a technique he's calling Idle Until Urgent.

    The tool described in this article is actually a web performance optimization strategy called "Idle Until Urgent", implemented using JavaScript helper classes (IdleValue and IdleQueue).

    Here is a summary of its principal characteristics:

    1. Core Purpose and Performance Goal

    The primary goal of the "Idle Until Urgent" strategy is to improve the responsiveness of a website, specifically targeting the First Input Delay (FID) metric. The strategy aims to ensure that FID remains under 100 milliseconds for 99% of page loads, as delays longer than 100ms are typically perceived as sluggish by users. The underlying problem it solves is the blocking of the browser’s main thread by long, synchronous JavaScript tasks, which prevents the browser from responding to user interactions.

    2. The "Idle Until Urgent" Mechanism

    This strategy is a hybrid approach positioned between eager and lazy code evaluation:

    • Idle Evaluation: The potentially expensive code is initially deferred and scheduled to run during the next available idle period using an API like requestIdleCallback.

    • Urgent Execution: If the value or the result of the task is needed immediately by another part of the program (e.g., a user interaction handler) before the idle period occurs, the scheduled idle callback is canceled, and the initialization function is run immediately and synchronously.

    • Task Management: By breaking up long synchronous code into smaller, distinct tasks (preferably less than 50ms), the strategy prevents the code from blocking user input, as the browser can prioritize input callbacks ahead of queued scheduled tasks.

    3. Implementation Tools

    The strategy can be implemented using specialized helper classes, available in the idlize package:

    • IdleValue: This class is designed for single, expensive property computations or values (e.g., initializing Intl.DateTimeFormat). It schedules the initialization function to run during idle time, but allows the value to be retrieved immediately via getValue() if needed urgently.

    • IdleQueue: This class manages a queue where multiple tasks (functions) can be scheduled to run when the browser has idle time. It can pause the execution of tasks to yield back to the browser if necessary.

    4. Guarantees and Use Cases

    The strategy addresses the reliability drawback of requestIdleCallback():

    • Ensuring Execution: For critical non-interactive tasks (like saving user state or analytics), the IdleQueue can be initialized with the option ensureTasksRun: true. This feature ensures that all pending tasks are run immediately before the page is terminated or discarded, typically by listening for the page's visibilitychange event (when visibilityState changes to hidden).

    • Applicable Scenarios: The strategy is well-suited for code that is essential but not critical to immediate user interaction. Specific examples include:

      • Analytics Code: Running initialization and sending event data idly.

      • Persisting Application State: Saving application state (e.g., Redux data) to localStorage.

      • Expensive Computations: Processing large sets of values, reading from localStorage or cookies, or calling layout APIs like getComputedStyle().

    5. Performance Benefits

    After implementing "Idle Until Urgent," the author demonstrated significant performance gains:

    • The longest synchronous task on the site was reduced from 233ms to 37ms.

    • The site achieved a 67% reduction in FID values at the 99th percentile (dropping from 254ms to 85ms).

    • The same amount of work is executed as before, but it is distributed over multiple, shorter tasks running during idle periods, resulting in a perfect Lighthouse score for Time to Interactive (TTI).

    6. Compatibility

    • As of the article's writing, requestIdleCallback() is natively supported by Chrome and Firefox.

    • The helper classes use a fallback to setTimeout in browsers that do not natively support requestIdleCallback(). This fallback is still beneficial because browsers can prioritize user input ahead of tasks queued via setTimeout().

  • Anchor let you start a podcast in 5 minutes
    October 9, 2018

    Anchor let you start a podcast in 5 minutes

    Anchor makes it as easy as possible to create a podcast. All you have to do is register on the Anchor website. You are then invited to create your first podcast. Give it a name, a description, an image to illustrate its coverage, then pushing it out into the world. And last but not least, Anchor is free and also provides a real audio editing environment.

    Read more
  • Anchor makes it as easy as possible to create a podcast. All you have to do is register on the Anchor website. You are then invited to create your first podcast. Give it a name, a description, an image to illustrate its coverage, then pushing it out into the world. And last but not least, Anchor is free and also provides a real audio editing environment.

  • Dress your screenshot with Shotsnapp
    October 9, 2018

    Dress your screenshot with Shotsnapp

    Shotsnapp is a simple tool made by by Gaddafi Rusli to quickly create beautiful device mockup presentation for your app and website design.

    Read more
  • Dress your screenshot with Shotsnapp
    Dress your screenshot with Shotsnapp Dress your screenshot with Shotsnapp Dress your screenshot with Shotsnapp

    Shotsnapp is a simple tool made by by Gaddafi Rusli to quickly create beautiful device mockup presentation for your app and website design.

    Shotsnapp is designed to create beautiful device mockup images for apps or website designs.

    Here is a summary of its principal characteristics:

    Core Functionality and Ease of Use

    • Purpose: shotsnapp allows users to show off their app or design by creating high-quality device mockup images that can be shared everywhere. It is also noted for generating nice framed phone/browser screenshots with shadows.

    • Simplicity and Speed: The tool is marketed as easy to use, allowing users to design mockups in seconds. The workflow involves choosing a device, adding an image (of the design or a screenshot), adjusting appearances, and then downloading the resulting mockup image.

    Design and Aesthetic Features

    • Device Variety: Users can select from a collection of various devices, including mobile phones, tablets, laptops, and smart watches.

    • Templates: The service provides beautiful pre-designed templates that users can choose from. The PRO option grants access to an unlimited number of pre-designed templates.

    • Customization: It offers custom fonts to improve the presentation of the message.

    • Backgrounds: Mockup images can be enhanced using amazing photos from Unsplash.

    Product Details and Pricing Model

    • Availability: shotsnapp can be used for free.

    • PRO Option: A PRO option is available for users who require more features. This option is described as super affordable.

    • PRO Cost: The cost for PRO access is $48 for 1 year, offered as a pay once purchase with no subscriptions.

    • Creator: shotsnapp is the product of a solo maker, @gaddafirusli, based in Malaysia.

    Feature Breakdown (Basic vs. PRO)

    The tool is offered in two tiers, Basic (Free) and PRO, which differ primarily in resource access and canvas flexibility:

    FeatureBasic (Free)ProCanvas ObjectsOne object per canvasUnlimited number of objects per canvas, including textTemplatesFree templatesChoose from unlimited pre-designed templatesUnsplash AccessCurated Unsplash photosSearch from unlimited photos on UnsplashDevice ModelsStandard collectionAccess to more device model styles and variationsExport FormatExport as PNG or JPEGExport as PNG or JPEG image

  • /e/ mobile phone operating system
    October 9, 2018

    /e/ mobile phone operating system

    You want to be free from Google and Apple operating system on your mobile phone? You want to use an open source operating system which is far more respectful of user’s data privacy? Check the project /e/ out. A first beta is now available.

    Read more
  • /e/ mobile phone operating system
    /e/ mobile phone operating system /e/ mobile phone operating system

    You want to be free from Google and Apple operating system on your mobile phone? You want to use an open source operating system which is far more respectful of user’s data privacy? Check the project /e/ out. A first beta is now available.

    1. Core Mission and Privacy Philosophy

    The primary focus of the e Foundation is data privacy.

    • Data Sovereignty: The foundational belief is that "Your data is YOUR data!".

    • Privacy by Design: The system is built to provide privacy by design, aiming to help users "escape from Mobile Surveillance".

    • Non-Tracking Guarantee: The foundation is committed to not scanning data (on the phone or in the cloud), not logging or tracking GPS location, and not collecting what users are doing with their apps. They state they "never will".

    • Non-Profit and Open Source: The e Foundation is a non-profit organization leading the development of Open Source mobile operating systems that respect users’ data privacy.

    2. /e/OS Operating System

    /e/OS is a mobile operating system based on fully deGoogled Android.

    • Design and Experience: The OS is described as having a new, optimized appearance in its User Interface and is considered a "very pleasant to use OS". The development is supported by a great support team working hard on the beta with very regular updates.

    • Compatibility: Despite being "deGoogled," the OS is compatible with all apps, allowing users to run most of their favorite applications, access bank accounts, chat, and play games.

    3. Advanced Privacy and Security Features

    /e/OS includes built-in features to protect the user from tracking and surveillance.

    • App Tracker Evaluation: Each app in the /e/OS app store is scanned and analyzed. Users are informed about trackers found in apps, allowing them to see which apps are safe and which should be avoided regarding personal data.

    • Advanced Privacy Widget: This widget provides users with control over their digital footprint.

      • It allows users to choose whether or not to stay tracked.

      • It offers features for hiding the IP address or geolocation when desired.

    • Ad Blocking: An ad blocker is enabled by default in the web browser. This feature, combined with the tracker control, helps users enjoy a digital life with very few or no ads in applications and on the web.

    4. Ecosystem and Services (Murena)

    The e Foundation offers supporting products and services:

    • Murena Smartphones: Users can purchase a Murena smartphone with /e/OS pre-installed.

    • Murena Workspace Account: Users can sign up for a FREE Murena workspace account.

      • The account includes a unique and personal @murena.io ID.

      • It comes with 1 GByte of cloud storage and other benefits.

    • Community and Resources: The project is supported by a vibrant growing international community of entrepreneurs and developers. Resources include Documentation and Source Code available for developers and users.

  • Lesspass, stateless password manager
    October 9, 2018

    Lesspass, stateless password manager

    Storing password in a data base is not safe. LessPass computes a unique password using a site, login and a master password. Use LessPass in your browser, with a browser extension, on your mobile, on your server or in your terminal via a CLI client.

    Read more
  • Lesspass, stateless password manager
    Lesspass, stateless password manager Lesspass, stateless password manager

    Storing password in a data base is not safe. LessPass computes a unique password using a site, login and a master password. Use LessPass in your browser, with a browser extension, on your mobile, on your server or in your terminal via a CLI client.

    Core Functionality and Design

    • Computation over Storage: LessPass operates by computing passwords rather than generating and storing random ones in a file.

    • Unique Password Generation: It generates unique passwords for websites or accounts based on a master password and information you know (such as the login and site name).

    • Pure Functionality: The system relies on a pure function; given the same input parameters (login, master password, site, and options), it will always return the same, unique password.

    • No Database or Synchronization Required: LessPass is designed to operate completely offline and without a database. It does not need to sync your devices, eliminating common synchronization problems associated with traditional password managers. There is no need to save your passwords in an encrypted file.

    Security and Openness

    • Open Source: LessPass is open source (GPLv3 license), meaning the source code is available and can be audited.

    • Brute Force Protection: To increase the cost of breaking the master password by brute force, the tool uses PBKDF2 with 100,000 iterations and the sha-256 hash function.

    • Open Culture: The developers refuse to install cookies or analysis tools (like Google Analytics) on their applications. They document their algorithms, aiming for "no magic, no black box".

    Availability and Features

    • Wide Accessibility: LessPass is accessible via any device with a browser.

    • Multiple Interfaces: Beyond the official website, it is available as an Android application, a Chrome extension, a Firefox extension, and a command line interface.

    • Complex Rules Handling: It supports complex, site-specific password rules (e.g., length, requiring only numbers) through a "connected" version. This version saves a password's profile (including options like length or required character types), but excludes the master password and the generated password.

    • Password Rotation: Users can generate a new password without changing the master password by simply incrementing the "counter" field in the options.

    • Self-Hosting Option: Users have the ability to host their own LessPass Database if they do not wish to use the official one, requiring docker and docker-compose installed on their machine.