CSS Transitions & Whimsy

In my constant effort to push my skills, I’ve been fooling around with CSS transitions and animations with the idea that some dull micro-interactions can become a tiny bit more enjoyable (or a tiny bit less excruciating, depending) with a little bit of motion and maybe some whimsy.

The button below is one result, experimenting with timing the transitions of an element’s properties differently. It’s nothing fancy — you get a normal hover effect when you roll your cursor over the button, then a “secret” message when you roll off.

Dumb, I’ll admit, but the potential for relieving some dullness is real.

If for some reason you want to see the source code, its available and editable on CodePen.

Posted in CSS

Still-fishing the Specs

Considering the pleasures of CSS Specifications as casual reading

What the hell is this supposed to do?

[class^="some-value"] {
  padding: 3rem 2rem 0;
}

That construction, [attribute^="value"], is one of a set of “attribute substring combinators” (an explanation at MDN) that allow you to use something like a regular expression (it’s not actually a regular expression, just resembles one) to refine a selector. You might wonder, like I did when I first encounntered it, how on earth that could ever be useful.

Here’s how.


(read more )

Posted in CSS

Limit Woocommerce Shipping Options

A client recently asked me to modify his Woocommerce checkout process so that if the cart contained one particular product then shipping for the entire order would be restricted to a single option, but if that product was not in the cart then every shipping option except for that one would be available.

A Gist for my solution, modifying the Woocommerce template file cart-shipping.php is at GitHub if you want to get right to work, the rest is mostly me patting myself on the back.


(read more )

SEO And Done? Hmmm…

In the past few weeks I’ve been approached, twice, by people obliquely seeking help promoting their sites on search engines. One of then knew enough to call what they wanted “SEO” and they both approached obliquely, though politely, obviously looking for free advice while pretending to inquire about my services and fees. I couldn’t help either of them. SEO is hard and best left to specialists (more below), but that’s not why I couldn’t help. I couldn’t help because in both cases they LAST thing they should have wanted is for a prospective customer to see their website.


(read more )

Old Sites, NewTools

The tools and techniques available to Web developers have improved immensely in the last few years. Our jobs are easier and the Websites we build better because of editors like Atom.ioSublime Text, and VisualStudio Code, diff tools like Beyond Compare, version control systems like Git (and the de-facto home of open-source development based on it, GitHub), developer-focused browsers like Mozilla’s Developer’s Edition of Firefox and Google’s Canary Edition of Chrome, CSS processors like SASS and PostCSS, build tools like Gulp, Grunt, and Webpack, JavaScript libraries like React.js, AngularJS, and jQuery — I could go on and on.  That’s  a partial list of my daily toolkit. The full kit is larger and good options exist for every tool I use.

These tools can lost their edge, though, if we’re asked to add a feature to a site that was built five years ago (or a site that was built yesterday using methods from five years ago), and we might face the prospect of having to revert to what feels like sharpened rocks to get the job done. Revising legacy CSS files is where I first notice great tools becoming irrelevant and where the problem has loomed largest for me, and that’s what I’m going to talk about here.


(read more )