Skip to main content

Geoff Graham

Read, write, coffee, web, repeat.

Article

Defining and Dealing with Technical Debt

We're all familiar with debt, right? It's that concept where an amount is owed from one person (the borrower) to another (the lender). We often use it to describe financial situations. For example, I borrow money from a bank. I now have debt with them in the amount of how much money they lent me (plus interest!) and expect me to repay it.

Debt isn't always about money. In fact, we run into it as front-end developers all the time … Read article

Snippet

Apple.com Hamburger Bun Menu

Apple made some noise when they released an updated site, including an all-new responsive navigation. While the redesign was focused on other things, one thing that stuck out was the use of a hamburger menu icon in a newly designed responsive navigation. And, not just any hamburger, a meatless one—just the buns. It could be a statement on simplicity or whatever, but here's how we can recreate it with the same animated effect that transforms the icon from a … Read article

Article

First Impression of GitHub Desktop

GitHub Desktop was released late last week.

Wait, doesn't GitHub already have two desktop apps? If the same question crossed your mind when you first read that, then you are not alone. Yes, GitHub did have two desktop apps—one for Mac OS and one for Windows—but decided to unify them into a single app. Instead of GitHub for Mac and GitHub for Windows, we are now left with just GitHub Desktop.

I was planning to write up a … Read article

Almanac

::marker

The ::marker pseudo-element is for applying list-style attributes on a given element. It effectively targets the bullet-point or number generated by a list-item, whether that is a (<li>) in an ordered (<ol>) or unordered (<ul>) list, or an element that declares its display property as a list-item.

Please note that that no browser supports the use of ::marker at the time of this writing.

li::marker {
  content: "#" counter(counter) ":";
}

The most handy … Read article

Almanac

isolation

The isolation property in CSS is used to prevent elements from blending with their backdrops.

.module {
  isolation: isolate;
}

It is most commonly used when mix-blend-mode has been declared on another element. Applying isolation to the element guards that element so that it does not inherit the mix-blend-mode applied to the other elements that might be behind it.

In other words, if mix-blend-mode is telling overlapping elements to blend with one another, then isolation creates an exemption on the … Read article

Article

Front-End Development is Development

There is some sentiment out there that front-end development isn't real development. It's a swaggering, trollish sentiment. Still, it's fun to puff our chests back sometimes. Let's try to put a point on why front-end development is every bit as difficult and worthy of the title as any other subset.… Read article

Article

What a CSS Code Review Might Look Like

Many programming languages go through a code review before deployment. Whether it's a quick once-over, in-depth peer review, or complete unit testing, code reviews help us release code into the wild with confidence.

I started to imagine what a CSS code review might look like. CSS can be written in a number of ways, and the best way is often subjective to the project. I'm definitely not trying to get dogmatic with a post like this, but instead lay the … Read article

icon-link icon-logo-star icon-search icon-star