Open Source & Free Tools for Web Workers

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

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 (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 (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 (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.

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().

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

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.

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.

"30 Seconds of CSS" is a curated collection of useful CSS snippets intended to be understood in 30 seconds or less.

Here are the principal characteristics and categories of the snippets included in this collection:

Core Purpose and Utility

• Curated Collection: It provides CSS solutions for common design and layout challenges.

• Accessibility and Speed: Snippets are designed to be easily understood. Each snippet includes the necessary HTML and CSS, a demo, and a detailed explanation of how the code works.

• Browser Support: Each entry lists the current browser support percentage, often noting if prefixes are required for full coverage.

Main Categories of Snippets

The collection is divided into several major categories covering key areas of web development:

1. Layout (Positioning and Structure)

This category addresses how elements are positioned on the page.

• Centering Techniques: Includes modern methods like Flexbox centering and Grid centering (horizontally and vertically), as well as older alternatives like Display table centering and Transform centering.

• Box Model Management: Features a Box-sizing reset which ensures that an element's defined width and height are not affected by its border or padding.

• Responsive Ratios: Provides a snippet for maintaining a Constant width to height ratio on elements with variable width.

• Space Distribution: Includes Evenly distributed children using justify-content: space-between.

• Accessibility Hiding (Offscreen): Offers a "bulletproof way" to hide an element visually and positionally while keeping it accessible to screen readers, useful for ADA development.

2. Visual (Aesthetics and Styling)

This category focuses on decorative and stylistic effects.

• Text Effects: Includes Gradient text (using proprietary -webkit- properties), Etched text, and techniques for Truncate text (single line with ellipsis) or Truncate text multiline (ending with a gradient fade).

• Customization: Features snippets for creating Custom scrollbars (on WebKit platforms), applying Custom text selection styles, and using a System font stack to mimic a native app feel.

• Shapes and Borders: Shows how to create simple CSS shapes like a Circle or a Triangle, and how to achieve a Hairline border using box-shadow and media queries based on device pixel ratio.

• Dynamic Graphics: Features a Dynamic shadow that uses inheritance and blur filters to create a shadow based on the element's own gradient color.

3. Animation and Interactivity

This section provides dynamic visual effects and user experience improvements.

• Loaders: Examples include a Bouncing loader (using translate3d() for performance) and a Donut spinner.

• Transitions: Snippets for Height transition (from 0 to auto, requiring JavaScript) and using Easing variables (cubic-bezier values) for powerful timing functions.

• Hover Effects: Examples include Hover underline animation, Hover Shadow Box Animation, and Sibling fade (fading out unhovered siblings).

• Form Interaction: Includes a CSS-only Toggle switch and Focus Within to style a parent element when one of its children is focused.

4. Other/Utility

This covers powerful CSS features and general utilities.

• Mathematical Functions: The Calc() function allows defining values using mathematical expressions, permitting the use of different units (e.g., pixel and percent) together.

• CSS Variables: Demonstrates defining and reusing Custom variables globally within the :root pseudo-class.

• Counters: Explains how to use Counters (variables maintained by CSS) to create automatically numbered, outlined lists.

• Style Reset: Provides the Reset all styles snippet using all: initial to reset all properties to their default values.

Flipside is a button that seamlessly transitions from action to confirmation created with few lines of CSS and jQuery.