Flexbox grid system featuring infinitely nestable rows/columns with automatic sizing and utility classes for column offsets, wrapping, ordering, alignment, and space distribution.
A Pen by Mark Hillard on CodePen.
JavaScript string conversion tool that escapes special characters and automatically selects the result.
A Pen by Mark Hillard on CodePen.
Simple px to rem unit conversion with copy to clipboard functionality... modified from https://gist.github.com/daniellmb/3c8003550ccff7dd72aa.
A Pen by Mark Hillard on CodePen.
markhillard
/ great-wall-of-gitmoji.markdown
Last active
October 9, 2019 19:13
The Great Wall of Gitmoji
Just using https://api.github.com/emojis to mess around with CSS grid.
A Pen by Mark Hillard on CodePen.
markhillard
/ responsive-audio-player.markdown
Last active
October 6, 2021 14:17
Responsive Audio Player
This audio player features playlist support via JSON data and step navigation. The version you're seeing now is a fresh new take on this project... by modernizing the style and offloading all browser detection crap to a wonderful audio player plugin called Plyr (https://github.com/sampotts/plyr).
A Pen by Mark Hillard on CodePen.
This is a demonstration of how to visualize the contents of console.log inside an HTML tag (including JavaScript errors).
Using the Granim.js gradient animation library, I was able to create an infinite loop of data logged to the console every 5 seconds using callbacks available from the API... then displayed with a little flair.
A Pen by Mark Hillard on CodePen.
This is an Etsy shop featuring a responsive, column-based "masonry" layout written in pure CSS. Listings and pagination are handled via jQuery with an AJAX call to the Etsy API returning JSONP. In this example, I'm using a publicly available key to grab all active listings.
Simply update the AJAX url and api_key to pull listings from your own Etsy shop and display them on your website.
Docs: https://www.etsy.com/developers/documentation/
A Pen by Mark Hillard on CodePen.
Simple example of how to implement Twitter's typeahead.js to load library data from cdnjs. It includes functionality that runs on select and change events as well as error handling.
A Pen by Mark Hillard on CodePen.
Just messing around with the Google Maps JavaScript API.
A Pen by Mark Hillard on CodePen.
markhillard
/ p5-js-microphone-toggle.markdown
Last active
December 15, 2021 05:16
p5.js Microphone Toggle
Using the p5.js canvas drawing library, I was able to create a toggle button that enables/disables your computer microphone when clicked. It listens to this audio channel in real time and produces an animated ellipse that increases/decreases in amplitude based on the input volume.
A Pen by Mark Hillard on CodePen.
NewerOlder