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 )

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 )

Gutenberg Block Styles Headstart

I plan to keep banging this drum — WordPress 5.0 is coming this year, a lot will change, and the big change will be the introduction of a new default editor codenamed “Gutenberg.”

Elsewhere I’ve (hastily) sketched out some things WordPress users should do to prepare for 5.0, here I’m addressing WordPress developers.

Blocks of content entered into a post (keep in mind that everything is a post) via Gutenberg get tagged with a block-specific CSS class, like .wp-block-button or .wp-block-cover-image. Default styles for core-blocks are loaded (for now, While we use a plugin) from somedomain.com/wp-content/plugins/gutenberg/build/core-blocks/style.css, and are loaded before the theme stylesheets. The Gutenberg developers have written well-formed CSS so a theme’s stylesheet overrides the default styles without problems like over-specified selectors or !important declarations.

Much of my work is building custom WordPress themes and the custom themes I make almost always start from Automattic’s Underscores starter-theme. Underscores provides modularized CSS using SASS. Anticipating WordPress 5.0, and for the sites (like this one) that currently use the plugin, I’ve created a collection of SASS files copying the default styles for Gutenberg core blocks, organized according to where the block sits in the editor’s selection dropdown. The files are available on Github.

A developer can incorporate this collection to a theme’s SASS folder for quick availability of the necessary selectors for styling blocks, providing a head-start in matching block styles to the theme.

In addition to the theme styles, there is also a collection of editor-styles in the GitHub project. I don’t want to blab about it here, but with careful development of editor-styles, a theme can come very close to displaying the editor contents just as they will appear on the live site, approaching the What You See Is What You Get promise that no one has ever quite delivered.