comment heart repost

Owl logo Keith J. Grant

Posts

Adding Webmention Support to a Static Site

A black vintage rotary dial phone
This is Part 3 in a series exploring short-form posting, the IndieWeb, and taking control of your own online social workflow for your statically-generated site: A Low-Friction Workflow for Short-form Posting on A Statically Generated Site Preparing Your Site for Posting Notes Adding Webmention Support to a Static Site Using Micropub to Post to a Static Site — Coming soon Webmentions are a key building block of the IndieWeb.
01 Feb 2019
Continue reading...

Preparing Your Site for Posting Notes

Closeup photo of an old rotary dial on a bright red telephone
This is Part 2 in a series exploring short-form posting, the IndieWeb, and taking control of your own online social workflow for your statically-generated site: A Low-Friction Workflow for Short-form Posting on A Statically Generated Site Preparing Your Site for Posting Notes Adding Webmention Support to a Static Site Using Micropub to Post to a Static Site — Coming soon If you’re eager to get going with short-form posting using webmentions and micropub, it’s worth giving your site structure a little thought so you know where your notes will go.
17 Jan 2019
Continue reading...

A Low-Friction Workflow for Short-form Posting on a Statically Generated Site

Three vintage rotary payphones hanging on a wall
This is Part 1 in a series exploring short-form posting, the IndieWeb, and taking control of your own online social workflow for a statically-generated site: A Low-Friction Workflow for Short-form Posting on A Statically Generated Site Preparing Your Site for Posting Notes Adding Webmention Support to a Static Site Using Micropub to Post to a Static Site — Coming soon I am thrilled to see more and more folks are moving to their blogs for posting short-form content, usually referred to as Notes.
17 Jan 2019
Continue reading...

Teaching a Correct CSS Mental Model

A man holds his head in his hand in frustration while looking at his laptop
Almost four years ago, I chimed in on the debate surrounding CSS. Is it good? Is it broken? Does CSS-in-JS solve anything? The discussion has evolved since then, as has CSS-in-JS tooling, but we are still seeing regularly recurring heated arguments on Twitter. The most recent happened — checks watch — an hour ago. It’s interesting to read my original article now. There are elements I still agree with, and some I don’t.
08 Jan 2019
Continue reading...

Won’t You Be My Neighbor

Title screen for Mr. Roger's Talks about Conflict

Here we are again. Arguing about CSS, the cascade, and CSS-in-JS. And you know what? We’ll be here again in a few months. Because that seems to be the cycle.

Somebody tweets something, usually rather innocuous. This gets spun a few times with various reactions. Then it escalates.

So often conflicts arise from lack of communication, false assumptions, or confusion. Mr. Rogers

10 Sep 2018
Continue reading...

Getting started with Micropub

With the recent discontentment on Twitter (and social media in general), I’ve seen a resurgence of people returning to blogging. In particular, I’ve noticed more folks posting short entries, or notes, to their blog — either in addition to Twitter, or in place of it. If you are interested in doing this, micropub is a great way to make it a frictionless experience. Micropub is a new W3C standard, allowing you to post directly to your site using third-party apps.
04 Sep 2018
Continue reading...

Resilient, Declarative, Contextual

A bunch of lemon slices. One has bright pink flesh intead of yellow like the rest.

I’ve spent a lot of time thinking about what defines a CSS mindset. Some people seem to “get” it, and others don’t. It’s always felt to me that if I could put my finger on that, maybe CSS would make more sense to those who have struggled with it. One piece of my motivation in writing CSS in Depth was to try to articulate some of those things.

08 Jun 2018
Continue reading...

HTML5 Sectioning and Landmark Elements

An open map on the dashboard of a car
A little while ago, I wrote about the <dialog> element. But there are plenty of interesting HTML elements that have been around longer, since HTML5 was first introduced, so I’ve decided to expand it into a series. Every now and then, I stumble across an element I haven’t heard of before. Some are interactive, and provide a surprising amount of functionality with little to no JavaScript. Others provide helpful semantic meaning and a welcome alternative to “div soup” in complex pages.
05 Mar 2018
Continue reading...

Introducing Sidecar

A little over a year ago, my wife bought me a copy of Liquid Intelligence by Dave Arnold. It’s a book by a renowned bartender on making cocktails. I enjoyed making drinks before this, but this book really got me hooked. In the time since, I’ve been honing my skills. And I’ve been collecting cocktail recipes. Testing them, tweaking them, and sharing them. I have a little book of notecards on a ring, full of the recipes I have tested and deemed worthy of making again.
19 Jan 2018
Continue reading...

Meet the New Dialog Element

Old iron mailbox with the word 'letters' emblazoned on front

HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss.

11 Jan 2018
Continue reading...

Shindig

Mal and Kaylee from Firefly dressed up for the ball

My new site design is live! I’ve been working on this one for a while, and it just so happened to coincide with the #newwwyear activity on Twitter. I’m calling this theme Shindig.

02 Jan 2018
Continue reading...

OOCSS and Grid

A stack of old leather-bound books

OOCSS was the first of the many CSS methodologies. Since it arrived on the scene, the industry has moved on to newer, more strongly prescriptive methodologies like SMACSS, BEM, and ITCSS. These newer approaches dominate the conventional wisdom today. But CSS grid is here now, and I find it presents some challenges to this wisdom. I think it’s time we give OOCSS a little attention again, because it has an important idea to offer in the world of CSS grid.

13 Dec 2017
Continue reading...

Code, Not Clojure

I’m going to make two declarations that might sound contradictory:

  1. CSS is code.
  2. CSS is not a programming language.

Many developers get these backwards.

08 Sep 2017
Continue reading...

Transitioning Gradients

In, CSS, you can’t transition a background gradient. It sure would be nice if you could:

.gradient {
  background-image: linear-gradient(
    to right,
    hsl(211, 100%, 50%),
    hsl(179, 100%, 30%)
  );
  transition: background-image 0.5s linear;
}

.gradient:hover {
  background-image: linear-gradient(
    to bottom,
    hsl(344, 100%, 50%),
    hsl(31, 100%, 40%)
  );
}

But, no. It jumps from one gradient to the other immediately, with no smooth transition between the two. So let’s hack it!

05 Jul 2017
Continue reading...

Thoughts on Self-Documenting CSS

One of the best programming books I’ve ever read is Clean Code by Robert C. Martin. If you have never read it, add it to your list.

Every comment represents a failure to make the code self explanatory. Robert C. Martin

09 Jun 2017
Continue reading...

Memorizing Alignment Properties

Do you often find yourself looking up a Flexbox cheat sheet? Wish you could just commit all those properties to memory and be done with it? Here’s how I memorized them.

05 May 2017
Continue reading...

What Grid Can Do That Tables Can’t

There’s a kind of narrative out there that’s basically, “Silly CSS wonks: first they tell us tables are bad, now they give us grid.” Nevermind that this is completely ignorant of the original argument against tables for layout (tables were never bad for layout because of the way they looked on screen; they were bad because of what they did to your markup). It’s true that grid looks a lot like tables at first glance.
12 Apr 2017
Continue reading...

Don’t QWOP Your Way Through CSS

QWOP, if you haven’t played it, is a ridiculous running game. Instead of pressing, say, the right arrow key to run, you must control each of the runner’s muscles independently. Pressing the keys Q, W, O, and P will each extend one leg or bend one knee. Coordinating them all is incredibly difficult, and you are usually lucky if you can make a full stride before falling on your head.
07 Apr 2017
Continue reading...

CSS is Not Broken

Coding in any language is hard before you spend time mastering it. Imagine what your JavaScript would look like if you never took the time to learn about OOP or functional programming principles? Just because you expect CSS to be easy, doesn’t mean the language is broken when you find it is not. A lot of people have gone on about how horrible JavaScript is. JavaScript is not horrible. It is an incredible language.
24 Mar 2017
Continue reading...

More thoughts on CSS in JS

At a previous job, I was brought in to a team of Java devs to provide a little JS support. They had been using something called PrimeFaces, basically a bunch of front-end components you drop into JSF pages. Working with it was horrid. In short, these devs knew nothing about JavaScript or the front-end, but this tool let them sort of hack a UI together. It abstracted away all the tools needed for really working in the front end.
20 Mar 2017
Continue reading...