John Otander

Visual development environment for CSS

A simple, beautiful Jekyll theme that's mobile first

A forward-thinking, lightweight, css microframework

A css linter for immutable selectors

🌻[WIP] Gatsby Theme to build your own digital garden 🌻🥀🌸

A minimalist Gatsby Theme for documentation sites built with MDX and Theme UI

Get the contrast ratio and WCAG score between two colors in order to ensure accessibility

Push subdirectories in a monorepo to separate, read-only repositories

A slightly different user experience for hard deletes.

Get a random accessible color combination

An Ember component for gravatar image tags

Normalize + and . emails -- [email protected] => [email protected]

A regular expression for most valid domains (including the latest TLDs)

Ember addon for including fake data in your app for testing or prototyping.

List of all CSS properties

Ember addon for Remarkable markdown parsing helpers and components.

Linkify urls in an Ember app with a fancy helper

An Analysis of Ruby Optimization Techniques

A minimalist Gatsby Theme for a glossary built with MDX and Theme UI

Scrutinize a url by analyzing css, html, a11y, images, pagespeed, etc.

Get the pinned repos for a github username

A minimal yeoman generator for npm packages.

API for random-a11y

Remove CSS vendor prefixes from your source.

Rework CSS plugin for generating custom, lightweight flex grids.

Ember date helpers with locale support.

[WIP] A collection of Gatsby themes

Remove shorthand properties in your CSS

Turn on do not disturb mode for OS X

An Ember addon for SVG loading components.

A nicer color palette for Rails apps.

Components for Google's Material Design Icons library

No description.

Include BASSCSS in your Rails apps.

The minimal note taking script

A grayscale color palette for prototyping the web.

[WIP] HyperTerm theme with a nostalgic flair

Turn a css string and media query config into classes for each breakpoint

A gulp wrapper for the remarkable markdown parser (CommonMark spec).

A minimal blog theme built for those wanting to focus on their writing

Archive your Rails models rather than delete them

[WIP] Experimenting with pure JS styles using React Hooks

Suggest a domain when your users misspell it in an email address with mailcheck.js.

Comma delimit an array for human readability. The Oxford comma is optional.

An Ember addon for including Pure CSS.

App to create debug grids using css and background properties

Useful information to reference while building websites for humans

[WIP] A pleasurable snow tracking experience

Ember components for a responsive, mobile-first grid system based on flex.

Get latest ticker information for popular cryptocurrencies

Check whether a value is empty or blank, includes string whitespace support.

PostCSS plugin to get an object containing CSS variables and their values.

Generate a random hex color

[WIP] Style shell output in an html-like fashion

Gulp plugin for converting CSS to Scss.

A collection of the highest quality, open source Jekyll themes.

Apply persistent, meaningful urls to your Rails app.

Where johnotander.com lives

Get an array of classes from HTML

An example that uses the Draper gem for Rails Decorators.

Node CLI to get WHOIS data for a given url

[WIP] Prettify your html

CSS linter for immutable selectors.

A CSS variable transformer, supports Less, Sass, stylus and custom properties

Add a class prefix to further sandbox CSS styling for third-party imports.

Toggle OS X Night Shift

Check whether a CSS or JS string is minified.

A miniaturized (and fast af) router for the edge, and everywhere else.

A Gatsby starter for your own dark-mode digital garden

A minimalist Gatsby starter for a glossary built with MDX and Theme UI

[WIP] JAMStack website for Movax FC using Gatsby, Theme UI, and Airtable

Filter CSS based on a given list of selectors

Retrieve the readme contents from a directory

A minimalist starter for gatsby-theme-documentation

List of all CSS pseudo-elements.

Get a particular query param from a url

[WIP] Constraint based styling api based on styled-system

Considerations from @dougwig and @nickbender

Get the closest emoji representation of the weather

Check whether a value is present (nonblank).

An Atom package for providing a visual cue for trailing whitespace with a subtle underline.

Get a colorful rainbow string using chalk

Strip wayback toolbar from archived html

Elixir package to normalize emails

Validates the email format with the email_regex gem.

Elixir package to normalize urls

Dotfiles, ftw

CLI to restore a Rails PostgresQL database from a backup. Infers db config from config/database.yml.

A retro Gatsby Theme based on old Macintosh UIs.

Add CSS linting to your Broccoli tree.

A CSS utility class module/generator for all named CSS colors (bg, color, border, svg, etc).

A blog starter for the Tosh Gatsby Theme

Repeat class selectors to increase specificity

Example using Contentful as a source for MDX blog posts and Theme UI values for page level styling.

Get the current ticker value for cryptocurrencies

GitHub Actions for yarn with support for lerna

Gatsby Themes example using component extension via shadowing

Check whether a string is a valid MAC address.

Get a list of all CSS pseudo-classes

Just a hyper theme

Get a list of all named CSS colors.

Experiments with svg spinning

[WIP] Build out your React UI with a nostalgic flair

[UNMAINTAINED] A script for updating all the things: node, npm, brew, rvm, jekyll, etc.

Parse and return statistics for an html string

Get CSS urls from a string.

A Gatsby starter for your own digital garden

Ruby client for accessing SNOTEL station data.

Remove HTML comments from a string

Git push shortcut packaged for npm

Get image src attributes/urls from HTML.

An example of a Gatsby Theme with yarn workspaces

A chrome extension to give Hacker News a little bit of flair.

A minimalist starter for gatsby-theme-documentation

A minimalist starter for gatsby-theme-documentation

Minimal starter for a Gatsby Theme that's read only and updated via a GitHub Action

[WIP] Display keys in hyperterm as you type them

Ember helpers for percentage formatting.

A wrapper for the Rails link_to helper to add icons.

Skeleton layout example to increase perceived page performance

[WIP] An experiment with css gradients and small footprint page enhancements

Elixir package to validate a url

List filtering component with a text input.

[WIP] Turn html and css strings for components into documentation

List of system fonts for CSS.

Get CSS classes from a selector string.

Log http requests and responses to loggly

Determine whether an html tag is a void element

[WIP] Generate svg identicons

[WIP] Get a developer profile based on their GitHub/npm/etc. usernames

Utility classes for vh percentages

A miniature CSS3 flexbox grid.

Add a class prefix to an import in order to sandbox CSS styling.

Beautiful and accessible drag and drop for lists with React

Grayscale hyperterm theme

Check whether a string is a valid phone number.

some API ideas

Repeat class selectors

Manage redirects from a single file for static hosting

Node CLI to generate Subresource Integrity hashes for your assets.

[WIP] A project to analyze the page speed, CSS, HTTP requests, etc. of websites.

Begin app

Ember addon for weather icons

An API for data about me

Split a string into words based on whitespace

Git push force shortcut with allow-empty that automatically infers the current branch. Useful for kicking failed builds.

∞ Noop for forever

Convert class attributes to className

Get the latest tag for a repository on GitHub

Ensure a string has a single trailing newline based off it's dominant newline character.

Git pull shortcut packaged for npm

Get a JS object with diatonic scale values

Strip media queries from a css string

PostCSS plugin to postfix class selectors

Postfix class selectors in a string

[WIP] Turn static HTML and CSS into a react component

Remove the protocol from a string

[WIP] The client-side Ember app for First Chair -- the new way to track snowfall.

An email microservice to send yourself an email

A pretty display for crypto coin prices.

[WIP] Turn a file glob into a trie structure

[WIP] A 100% mobile-first, responsive UI library for building ambitious Ember applications with Tachyons

Get your npm token

List of all CSS media query types specified by the W3C

Reproduction where a Theme UI import, during Next SSR, results in a cjs require of mdx-js/react

Documentation of ZEIT Now and other services

GitHub clone shortcut

Extra stuff to help the toast ecosystem

No description.

Build blazing fast, modern apps and websites with React

:blue_book: A guided handbook on how to use Babel and how to create plugins for Babel.

Converts simplified JSX code into a JSON representation, which can be used by React.createElement

A curated list of awesome MDX resources.

A CLI for gatsby theme UX improvements

A starter that sets up yarn workspaces and an example usage of the minimum possible theme to speed up starting new themes

No description.

Design system utilities for styled-components and other css-in-js libraries

Replace classes in HTML

Example using Gatsby themes component shadowing

This is an example Gatsby blog site that we use as a reference at egghead.

Content for christopherbiscardi.com

Sens8 is my personal design system and exemplifying area for experimental designops workflows.

React component to PNG converter

Configurable React Stateless Functional UI Components

Convert a string to a valid domain name equivalent

MDX-based presentation decks

Official Next.js plugins

[WIP] Convert CSS to Less

rehype support for remark

Convert CSS syntax to SCSS with calc, variables, and custom media queries

PostCSS plugin for RTL-adaptivity

Returns true if a file appears to be a corrupted jpeg image file and is corrupted.

Simple way to initialize a new git repository in an empty directory, add a file and do a first commit (or skip that part in a directory with files). Useful for unit tests and generators.

Collection of common Sinatra extensions

Convert PostCSS style CSS to SCSS

Man pages for web APIs using MDN

A build-your-own responsive typography and layout UI toolkit for React

Ember app example to reproduce ember-cli/ember-cli#5227

[WIP] A tiny ruby chart library

Gulp plugin to provide a backround-image fallback for browsers that don't support W3C image-set notation.