Fold & Unfold

When a friend requested a way to present a piece of print media online without losing the novelty created by its multiple folds, we weren't sure if CSS Transforms and Animations would suffice...

Round and Round

CSS animation of a classic optical illusion of rotating items.

Whitelist MailChimp in CloudFlare

After a client’s RSS Feed daily email campaign stopped working I had to reanalyze a series of firewall rules I had just set in their CloudFlare account.

Ratio Comparator

When it was time to do an audit of the different image sizes in a Drupal site, I found that there were quite a few image ratios... Just how different were they? I had to find out of course.

Hierarchy Aware Heading Styles

Experiment. What do you do when your beautifully designed large headings seem a little overwhelming against those inevitable small stories? Well, first of, try a little redesign maybe? But then... if the problem persists, perhaps we could get a little... funky with :has().

How to work sed in macOS

Wanna use sed in macOS? Save yourself a headache and use the classic gnu-sed instead of the default sed that comes pre-installed with macOS! Trust me...

Connections

A mural made of simple lines and circles as a representation of the sales and marketing process as it propagates and spreads out looking for connections. Any similarities with the concept of human interactions is not just a coincidence... any similarities with fish ARE a coincidence.

Semantic Steps Progress Bar

A very clean semantic HTML progress bar styled with nothing but CSS, requires only one class to style all steps, finished or unfinished.

Parallax Animated Illustrations

Animated illustrations that use @patrykzabielski's script, and Jun Luo's digital paintings. Patryk's parallax script is an elegant piece of code that use a data value to animate layered images parallaxically (?). With a few tweaks to the styles, I've added greater control to the ratio of the image, that way we're not limited by a fixed height.