Open Source & Free Tools for Web Workers

Discover amazing tech resources, carefully handpicked to keep you up-to-date and elevate your efficiency. Already 1503 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.

  • The ultimate guide to proper use of animation in UX
    September 18, 2018

    The ultimate guide to proper use of animation in UX

    Learn how to build an animation correctly that does not distract the users from their goals.

    Read more
  • The ultimate guide to proper use of animation in UX
    The ultimate guide to proper use of animation in UX

    Learn how to build an animation correctly that does not distract the users from their goals.

    The article emphasizes that animation in UX is now a standard rather than a novelty. It serves key functions: showing interactions between screens, explaining how to use an application, and directing user attention. The author notes that while animation is more art than science, experimentation and user testing are essential. The guide aims to consolidate all major principles and rules for interface animation in one place, making it easier for designers to find practical advice without searching multiple sources. The core message is that animation should be purposeful, enhancing usability and user experience rather than just adding visual flair.

  • Web Design museum
    September 18, 2018

    Web Design museum

    Souvenir, souvenir. The web design museum exhibits over 900 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.

    Read more
  • Web Design museum
    Web Design museum Web Design museum

    Souvenir, souvenir. The web design museum exhibits over 900 carefully selected and sorted web sites that show web design trends between the years 1995 and 2005.

    The Web Design Museum is a digital archive that exhibits thousands of websites chronicling forgotten trends in web design from the 1990s to the mid-2000s. The main goal of the project is to map out past trends in web design that were dominant on the Internet between 1991 and 2006, preserving the creative legacy of web designers from the turn of the millennium for future generations.

    Main Features:

    • Extensive Archive: Features thousands of screens and videos of old websites, mobile apps and software from 1990s to mid-2000s

    • Timeline Section: Provides an extensive archive of web design milestones, offering insights into how design principles have evolved, allowing users to explore various design elements such as typography, color schemes, and interactive features

    • Educational Resource: Serves as an educational tool, allowing users to learn from past design successes and failures, which can inform their own design practices

    • Searchable Collection: You can refine results by year, category and graphic style or explore curated sections like Web Design in the 90s and the Golden Age of Web Design

    • Historical Preservation: Captures the unique aesthetic and user experience design of early internet websites that would otherwise be lost to time

  • Complete guide about favicon
    September 25, 2018

    Complete guide about favicon

    Audrey Roy has written this cheat sheet favicon sizes/types on her GitHub account to help your website shine in society.

    Read more
  • Complete guide about favicon
    Complete guide about favicon

    Audrey Roy has written this cheat sheet favicon sizes/types on her GitHub account to help your website shine in society.

    The purpose of this initiative, the "favicon-cheat-sheet" repository, is to serve as an "Obsessive cheat sheet to favicon sizes/types", specifically a "painfully obsessive" resource detailing the various favicon sizes and types needed for web projects.

    The primary goals of this extensive guide include:

    • Standardizing Best Practices: The cheat sheet compiles information from numerous sources to establish best practices for favicon implementation.

    • Detailing Image Requirements: It specifies the necessary and optional image sizes and names for various devices and platforms, including default use (favicon.ico at 16x16 & 32x32), iOS and Android touch icons (e.g., 180x180, 196x196), and sizes for Windows 8 Start Screen tiles (e.g., 144x144, 270x270).

    • Providing HTML Markup: It instructs developers on the optimal HTML required for cross-browser and cross-device compatibility, detailing basic requirements (like placing favicon.ico in the root), optional but encouraged tags (like <link rel="apple-touch-icon-precomposed">), and very optional, obsessive tags for maximum coverage.

    • Addressing Technical Specifications: The guide explains that an .ico file is a container for multiple .bmp or .png icons of different sizes. It also provides specifications for creating SVG files for pinned tabs in Safari 9+.

    • Fostering Community Improvement: The initiative actively seeks contributions and justification via pull requests to add or change content, reflecting the note that the sheet "may be in flux as I learn new things about favicon best practices".

  • The Complete CSS Demo for OpenType Features
    September 25, 2018

    The Complete CSS Demo for OpenType Features

    A comprehensive CSS font-feature-settings demo for OpenType features.

    Read more
  • The Complete CSS Demo for OpenType Features
    The Complete CSS Demo for OpenType Features The Complete CSS Demo for OpenType Features The Complete CSS Demo for OpenType Features

    A comprehensive CSS font-feature-settings demo for OpenType features.

    "The Complete CSS Demo for OpenType Features," serves as a comprehensive demonstration of OpenType features accessed via the CSS font-feature-settings property.

    The functionalities listed are the diverse typographic controls available within supporting fonts.

    Ligation and Alternate Glyphs

    These features involve substituting one character form for another, often based on context or user preference:

    • Ligatures (liga, dlig, rlig): Replaces a sequence of glyphs with a single ligature glyph, which is generally preferred for typographic purposes. Required ligatures (rlig) are necessary for correct text display.

    • Access All Alternates (aalt): Presents the user with a choice of all available alternate forms of a character.

    • Stylistic Alternates (salt): Replaces default character glyphs with stylistic variants.

    • Swashes (swsh, cswh): Replaces default glyphs with corresponding swash glyphs. Contextual Swash (cswh) performs this replacement based on surrounding characters.

    • Contextual Alternates (calt): Substitutes default glyphs with alternate forms to provide better joining behavior and harmonize shapes with the surrounding context.

    • Historical Forms (hist, hlig): Applies obsolete forms of characters or obsolete ligatures at the user's discretion.

    • Localised Forms (locl): Enables localized variant forms of specific letters used by individual literary communities, such as those in the Bulgarian and Serbian alphabets.

    • Randomize (rand): Replaces characters with cyclical forms intended to simulate handwriting.

    • Titling Alternates (titl): Replaces characters with forms suited for large type, such as titles.

    • Ornaments (ornm): Provides user access to ornament glyphs like fleurons, dingbats, and border elements.

    • Stylistic Sets (ss01ss20): Replaces sets of default character glyphs with specific, harmonizing stylistic variants.

    Casing and Bicameral Alphabets

    These features control the appearance of letters, particularly relating to capital forms:

    • Small and Petite Caps (smcp, c2sc, pcap, c2pc): Features to convert lowercase characters (smcp) or uppercase characters (c2sc) into small capitals. Similar features convert letters to petite caps (pcap, c2pc).

    • Unicase (unic): Replaces both lowercase and uppercase letters with a set of single case glyphs.

    • Capital Spacing (cpsp): Adjusts spacing between letters specifically in all-capitals text.

    • Case Sensitive Forms (case): Replaces characters, especially punctuation, with forms better suited for all-capital text.

    • Ordinals (ordn): Replaces figures with superior forms used for ordinals (e.g., 1st, 2nd).

    Digits and Mathematical Forms

    These features control the style, width, and positioning of figures and mathematical symbols:

    • Figure Style: Converts numerals to Lining Figures (lnum) or Oldstyle Figures (onum).

    • Figure Width: Switches between Proportional Figures (pnum) (glyph-specific widths) and Tabular Figures (tnum) (uniform widths).

    • Fractions (frac, afrc, numr, dnom): Replaces figures separated by a slash with common diagonal fractions (frac) or alternative stacked fraction forms (afrc). Dedicated features exist for Denominator (dnom) and Numerator (numr) forms.

    • Positional Figures: Includes Subscript (subs), Superscript (sups), and Scientific Inferiors (sinf).

    • Slashed Zero (zero): Replaces the standard '0' figure with a slashed zero.

    • Mathematical Greek (mgrk): Replaces Greek characters with special forms for use in mathematics.

    Positioning and Composition

    These features manage the spacing and interaction between glyphs:

    • Kerning (kern): Adjusts the amount of space between glyphs to provide optically consistent spacing.

    • Mark Positioning (mark, mkmk): Fine positioning of a mark glyph relative to a base character (mark) or relative to another mark character (mkmk).

    • Glyph Composition/Decomposition (ccmp): Permits combining two characters into a single glyph or decomposing a character into two glyphs for better processing.

    • Optical Size (size): Provides information about the appearance and intent of the font to aid in font selection (Note: Demo not available on the web).

    • Required Variation Alternates (rvrn): Special variants required by variable fonts.

    Script-Specific Features

    The tool supports complex script formatting, including:

    • East Asian (Chinese, Japanese, Korean): Supports forms like Simplified (smpl) and Traditional (trad), various JIS standard forms (jp78jp04), and numerous features controlling character width, such as Full Widths (fwid), Half Widths (hwid), Third Widths (twid), and Quarter Widths (qwid). It also includes features for Proportional Kana (pkna) and Ruby Notation Forms (ruby).

    • West Asian (Semitic, Arabic): Supports contextual forms required by Arabic and Syriac, including Initial Forms (init), Medial Forms (medi), and Final Forms (fina).

    • South-Asian alphasyllabaries (Indic/Brahmic): Listed as "Coming soon".

  • 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".

  • 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

  • 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

  • Email foundation
    November 6, 2018

    Email foundation

    Foundation for Emails 2. Quickly create responsive HTML emails that work. Even on Outlook!

    Read more
  • Email foundation
    Email foundation Email foundation Email foundation

    Foundation for Emails 2. Quickly create responsive HTML emails that work. Even on Outlook!

    Foundation for Emails 2 (formerly known as Ink), is a Responsive Email Framework created by ZURB. It is designed to quickly create responsive HTML emails that are guaranteed to work across major email clients, even Outlook.

    Here are the principal functionalities and features:

    1. Core Goal and Compatibility

    • Responsive Design: The framework helps users build responsive emails that look great on any device and are optimized for both desktop and mobile email clients. This addresses the fact that 54% of all emails are opened on a mobile device.

    • Broad Client Support: It ensures emails work in all of the major email clients, even Outlook. The framework gives guidelines to prevent inconsistent spacing and odd rendering issues, reducing the time spent debugging.

    • Use Cases: It facilitates the creation of emails for any use case, including Transactional Emails, Marketing Emails, and Drip Campaigns.

    2. Coding Efficiency and Templating

    • Inky Templating Language: Foundation for Emails uses Inky, a templating language that simplifies email markup. Users write simple, web-like tags such as <row> and <columns>.

    • Reduced Markup Complexity: Inky translates these simple tags into the complex table markup (up to 3x more code) needed for email clients. This results in faster coding, less frustration, and better organization.

    • Responsive Grid: It includes a Responsive Grid designed to work on any device and allows users to code emails like they code websites. This grid creates evenly sized content blocks (good for image galleries or product lists) and ensures the layout stacks neatly on small screens. Padding and row width automatically scale for mobile devices.

    • Sass Customization: Users can quickly create stylish emails using Sass. Sass variables provide control over common styles (colors, font sizes, spacing, column counts), eliminating repetitive CSS and allowing users to change the entire look and feel in minutes.

    3. Workflow and Tool Integration

    • Pre-built Components: The framework includes Common UI Patterns to speed up building, such as buttons, menus, block grids, callouts, typography, and thumbnails. Helpers like Visibility and alignment are also included.

    • Templates: Foundation for Emails provides Ten (or twelve) responsive HTML templates to start from. These templates cover common needs like Basic, Hero, Sidebar, Marketing, Newsletter, Order, and Password Reset.

    • Automatic CSS Inlining: It handles the complex task of inlining CSS automatically (in the Sass version). It keeps the work-in-progress HTML separate from the inlined version. A separate web inliner is also available.

    • ZURB Email Stack: An integrated workflow tool, the ZURB Email Stack, includes a Gulp build system, Inky templating, auto inlining, CSS and image compression, and support for Handlebars templates. Handlebars allows users to reuse common elements (like headers and footers) across multiple emails.

  • OpenMoji
    November 13, 2018

    OpenMoji

    OpenMoji, Open-source emojis for designers, developers and everyone else!

    Read more
  • OpenMoji
    OpenMoji OpenMoji OpenMoji OpenMoji

    OpenMoji, Open-source emojis for designers, developers and everyone else!

    OpenMoji is an open source project providing emojis for designers, developers, and everyone else.

    Key Content and Scope

    • Vast Collection: OpenMoji features 4292 Emojis designed so far across many categories.

    • Standard Support: It carefully supports the Unicode Emoji standard, specifically version 16.0.

    • Flags: The collection includes 270 Flags, ranging from Andorra to Zimbabwe and even Pirates.

    • Special Categories: OpenMoji ships with various special interest categories beyond the standard Unicode set, including Special Interest Categories for Technologies and Design.

    Design and Quality

    • Handcrafted and Consistent: All emojis are handcrafted, having been carefully designed, tested, and reviewed over many iterations. They are consistent, following a single style guide so they fit perfectly together.

    • Style Variants: The project supports a wide range of use cases by offering both colored and outlined (or Black) emojis.

    • Skin Tones: OpenMoji supports the Fitzpatrick skin tones scale and multiple skin tone combinations.

    Usage and Availability

    • Free to Use: All emojis are free to use under the CC BY-SA 4.0 license.

    • Available Formats: The service provides emojis in several formats:

      • SVG Color and SVG Black.

      • PNG Color in 72×72 and 618×618 sizes.

      • PNG Black in 72×72 and 618×618 sizes.

    • Applications: An OpenMoji App for iOS is available, and they also offer proof-of-concept/Beta versions of OpenMoji Fonts, though these are not intended for production use.

    • Origin: The project is the effort of 80+ students and 2 professors of the HfG Schwäbisch Gmünd, along with many external contributors.