Writing on full-stack design & development.

I had been wanting to use Gatsby pretty much since I heard about it, and finally found some time to put it to use. Combining Gatsby( the 2.0 beta), Craft CMS, and CraftQL, I have arrived at the CMS+Progressive Web App Promised Land.

A friend came to me wondering about how to pull off a nested Matrix situation in Craft CMS. What he wanted was to be able to use a Matrix field within another Matrix field, which is not possible at the moment. However, while talking about it with him, I came up with something that will work at least for his use-case.

The fool doth think he is wise, but the wise man knows himself to be a fool.

William Shakespeare, As You Like It

This is maybe the fourth or fifth incarnation of dtott.com. This time around I tried to simplify everything, do away with (mostly) useless features, and concentrate on the reading experience. Here's some notes on the site. Hope you enjoy it!

If you're tired of Flat Design and looking for something to spice it up, why not try Long Shadows? And if you're going to try Long Shadows, why not use a pure CSS solution with this Sass mixin?

A couple of weeks ago, a good friend sent me an email with a list of questions for me. He'd been out of the front-end game for a little while, and wanted to pick my brain a little bit. I thought that instead of just answering him directly, I'd share my answers with everyone.

About a year and a half ago, I had some ideas about using 3D CSS to create nonstandard 3D shapes, but never got around to writing a post about it. However, inspired by the incredibly impressive Acko.net redesign , I decided to finally clean it up and share it with you. Here it is.

By stacking and rotating elements in 3D space, you can create some new shapes out of pure CSS. It's not practical or useful in the least, but it is interesting. These examples work best in Safari, but they will mostly work in Chrome. Check it out: Pure CSS 3D Shapes (remember to click and drag to rotate. Thanks to Dirk Weber's traqball.js for that little bit of magic).

I've recently starting developing using LESS CSS ( lesscss.org), and quickly decided that I would benefit from a toolkit containing mixins that I would use over and over, such as border-radius or box-shadow.

Enter LESS CSS Toolkit.

We all have various tools in our box to deal with the constant headache that is Internet Explorer. Browser hacks, conditional comments, filters, pounding our heads against the wall, etc (wait, is it possible that's where the headaches come from? I'll look into it and get back to you).

This situation gets even worse when one wants to use some of the fantastic techniques available to us in CSS3, like border radius, drop shadows, and gradients. In the past, we had to use images for all of these design elements, but now it's possible to have a fancy, shiny button that uses only a <button>element and some css. Well, possible except in IE. Enter CSS3 PIE.

A little Friday-fun experiment I built: a word clock using CSS3 transforms and a little Javascript to run the actual clock. Useful? Maybe not. Fun? Definitely.