CSS WordPress

Discover The Fatwigoo

When you use a bit of inline <svg> and you don’t set height and width, but you do set a viewBox, that’s a fitwigoo. I love the name. The problem with fatwigoo’s is that the <svg> will size itself like a block-level element, rendering enormously until the CSS comes in and (likely) has sizing rules to size it into place. It’s one of those things where if you develop with pretty fast internet, you might not ever see it. But [...]

So you need to parse an email?

Say you have a website with users who have accounts. Those users email you sometimes. What if you could parse that email for more context about that user, their account, and what they might want?There are email parsing services out there. For example, Zapier offers Parser, which is free, with the idea being that you use Zapier itself to interconnect that data with other apps. You teach it about your emails and then get programatic access to those data [...]

A free guide to head elements

Josh Buchea rounds up all the stuff that could be put into the <head> for various reasons. Fun fact I just learned, the only acceptable elements in the head are <link>, <script>, <meta>, <title>, and <noscript> (I think that’s the complete list). If you put anything else in there at all, all browsers will abruptly end the <head> and start the <body>.Also, this proliferation of stuff-in-the-head is at least in part why manifest.json is a thing. Direct Link to [...]

Hexatope

It was awesome to hear Charlotte Dann on CodePen Radio the other day, who is Kickstarting a new jewelry business. The idea is that you draw your own jewelry (everything you draw looks awesome because it’s on this interesting hexagon grid) and then it gets actually made. This tying together of her passions sprang to life on CodePen. Direct Link to Article — PermalinkHexatope is a post from CSS-Tricks CSS-Tricks

A Bit on Buttons

1 The other day we published an article with a bonafide CSS trick where an element with a double border could look like a pause icon, and morph nicely into a CSS triangle looking like a play icon. It was originally published with a <div> being the demo element, which was a total accessibility flub on our part, as something intended to be interacted with like this is really a <button>. It also included a demo using the checkbox hack to [...]

Gutenberg

I’ve only just been catching up with the news about Gutenberg, the name for a revamp of the WordPress editor. You can use it right now, as it’s being built as a plugin first, with the idea that eventually it goes into core. The repo has better information. It seems to me this is the most major change to the WordPress editor in WordPress history. It also seems particularly relevant here as we were just talking about content blocks [...]

Template Literals are Strictly Better Strings

Nicolás Bevacqua wrote this a year ago, and I’d say with a year behind us he’s even more right. Template literals are always better. You don’t have to screw around with concatenation. You don’t have to screw around with escaping other quotes. You don’t have to screw around with multiline. We should use them all the time, and adjust our linting to help us develop that muscle memory. Besides the few things you can’t use them for (e.g. JSON), there [...]

The Importance Of JavaScript Abstractions When Working With Remote Data

Recently I had the experience of reviewing a project and assessing its scalability and maintainability. There were a few bad practices here and there, a few strange pieces of code with lack of meaningful comments. Nothing uncommon for a relatively big (legacy) codebase, right? However, there is something that I keep finding. A pattern that repeated itself throughout this codebase and a number of other projects I’ve looked through. They could be all summarized by lack of abstraction. Ultimately, this [...]

“The Notch” and CSS

Apple’s iPhone X has a screen that covers the entire face of the phone, save for a “notch” to make space for a camera and other various components. The result is some awkward situations for screen design, like constraining websites to a “safe area” and having white bars on the edges. It’s not much of a trick to remove it though, a background-color on the body will do. Or, expand the website the whole area (notch be damned), you [...]

lite.cnn.io

This little website pulls in all the main stories from CNN and strips almost everything from the design; styles, images, fonts, ads, colors. Nada, zilch, gone. At first it looks like nothing but hypertext and it feels like an extraordinary improvement but Sam Saccone made a thread about potential improvements that the team could use to make that experience even faster such as server side rendering and replacing the React framework with something smaller, like Preact. Either way this approach [...]