Repeating patterns in CSS with :nth-child and :nth-of-type

“What we call chaos is just patterns we haven’t recognized. What we call random is just patterns we can’t decipher.” ― Chuck Palahniuk

I’ve been trying to wrap my head around how the :nth-child pseudo-class can be used to create repeating patterns with CSS, beyond just even and odd (which are perfect for zebra-striping table rows, amongst other things). What really helped me understanding it was coding up a few examples to play around with. These examples are all available on CodePen too, so you can fork or edit them there if you want. I’ll embed the pen at the bottom. Note that while I will use :nth-child for all of the examples below, they should all work just as well with the :nth-of-type pseudo-class. Continue reading “Repeating patterns in CSS with :nth-child and :nth-of-type”

Design until it sucks less; leveling up on design

“Design is easy. All you do is stare at the screen until drops of blood form on your forehead.” — Marty Neumeier

Farm gold and level Up your design skillsI picked the quote above for this post because it’s remarkably similar to my own design process, which I like to think of as “tweak it until it sucks less.” Then I keep on iterating until a deadline looms, squint at it until I can tell myself it looks good enough, launch it, and then feel slightly mortified every time I see it from then on. I know it’s not uncommon to be your own worst critic but even so, a couple of required art classes in college, a lone graphic design class from Parsons, and a whole lot of “on the job experience” is just about the extent of my design education, so it’s past time to level-up. In searching about for the right approach, I’ve found a few good resources that I want to share. Continue reading “Design until it sucks less; leveling up on design”

Random fly-in animation using Sass

“It’s a cruel and random world, but the chaos is all so beautiful.”
― Hiromu Arakawa

One of the things that’s changed in the CSS world over the past several years is the rise of CSS preprocessors, and Sass is one of the most popular (LESS is another big one, if you’re interested here’s a comparison between the two from Smashing Magazine; here’s another comparison from CSS Tricks).  I hadn’t explored either much until recently, as useful as they are they have to fit into your workflow, and I just haven’t had the opportunity to use either in the context of my day job, but coding playground Codepen makes it super-easy to try out Sass (LESS too, if that’s more your thing).
Continue reading “Random fly-in animation using Sass”

Old dog, learning new tricks

“There is no need to sharpen my pencils anymore. My pencils are sharp enough.”
— Ze Frank

Before we get things started here, you should really watch this video. Even if you’ve seen it before, watch it again. It’ll be worth it, I promise.

As someone roughly the same age as Ze there (give or take 18 months), one thing I’ve noticed over the years is how the older you get the quicker the years go by, and time has a way of slipping away from you, especially when you’re not paying attention. This point was brought home most recently when, in cleaning up my web hosting from old long-abandoned projects and old cruft, I realized that it’s been over a decade since I registered a domain name and took my first steps into blogging.
Continue reading “Old dog, learning new tricks”