ABEM. A more useful adaptation of BEM.

BEM (Block Element Modifier) is a popular CSS class naming convention that makes CSS easier to maintain. This article assumes that you are already familiar with the naming convention. If not you can learn more about it at getbem.com to catch up on the basics.
The standard syntax for BEM is:
block-name__element-name–modifier-name
I’m personally a massive fan of the methodology behind the naming convention. Separating your styles into small components is far easier to maintain than having a sea of …

ABEM. A more useful adaptation of BEM. is a post from CSS-Tricks

Link: https://css-tricks.com/abem-useful-adaptation-bem/

Keeping Parent Visible While Child in :focus

Say we have a

.
We only want this div to be visible when it’s hovered, so:
div:hover {
opacity: 1;
}
We need focus styles as well, for accessibility, so:
div:hover,
div:focus {
opacity: 1;
}
But div’s can’t be focused on their own, so we’ll need:
<div tabindex=”0">
</div>
There is content in this div. Not just text, but links as well.
<div tabindex="0">
<p>This little piggy went to market.</p>
<a href="#market">Go to market</a>
</div>
This is …

Keeping Parent Visible While Child in :focus is a post from CSS-Tricks

Link: https://css-tricks.com/keeping-parent-visible-child-focus/

How Would You Solve This Rendering Puzzle In React?

Welcome, React aficionados and amateurs like myself! I have a puzzle for you today.
Let’s say that you wanted to render out a list of items in a 2 column structure. Each of these items is a separate component. For example, say we had a list of albums and we wanted to render them a full page 2 column list. Each “Album” is a React component.

Scroll rendering problem
Now assume the CSS framework that you are using requires you …

How Would You Solve This Rendering Puzzle In React? is a post from CSS-Tricks

Link: https://css-tricks.com/solve-rendering-puzzle-react/

An Open Source Etiquette Guidebook

Open source software is thriving. Large corporations are building on software that rests on open collaboration, enjoying the many benefits of significant community adoption. Free and open source software is amazing for its ability to bring together many people from all over the world, and join their efforts and skills by their interests.

That said, and because we come from so many different backgrounds, it’s worth taking a moment to reflect on how we work together. The manner in which …

An Open Source Etiquette Guidebook is a post from CSS-Tricks

Link: https://css-tricks.com/open-source-etiquette-guidebook/

On Building Features

We’ve released a couple of features recently at CodePen that I played a role in. It got me thinking a little bit about the process of that. It’s always unique, and for a lot of reasons. Let’s explore that.

What was the spark?
Features start with ideas.
Was it a big bright spark that happened all the sudden? Was it a tiny spark that happened a long time ago, but has slowly grown bright?
Documenting ideas can help a lot. …

On Building Features is a post from CSS-Tricks

Link: https://css-tricks.com/on-building-features/

Making your web app work offline, Part 2: The Implementation

This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let’s extend it to support offline.
Article Series:

The Setup
The Implementation (you are here!)

Making an `offline.htm` file
Next, lets add some code to detect when the application is offline, and if so, redirect our users to a (cached) `offline.htm`.
But wait, if the service worker file is generated automatically, how …

Making your web app work offline, Part 2: The Implementation is a post from CSS-Tricks

Link: https://css-tricks.com/making-web-app-work-offline-part-2-implementation/

Making your web app work offline, Part 1: The Setup

This two-part series is a gentle introduction to offline web development. Getting a web application to do something while offline is surprisingly tricky, requiring a lot of things to be in place and functioning correctly. We’re going to cover all of these pieces from a high level, with working examples. This post is an overview, but there are plenty of more-detailed resources listed throughout.

Article Series:

The Setup (you are here!)
The Implementation (posts tomorrow, stay tuned)

Basic approach
I’ll …

Making your web app work offline, Part 1: The Setup is a post from CSS-Tricks

Link: https://css-tricks.com/making-your-web-app-work-offline-part-1/

Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised.
The Challenge
The challenge is simple: building a button with an expanding border on hover.
This article will focus on genuine CSS tricks that would be easy to drop into any project without having to touch the DOM or use JavaScript. The methods covered here will follow these rules

Single element (no helper divs, but psuedo-elements are allowed)
CSS only (no JavaScript)
Works for any size (not

Animating Border is a post from CSS-Tricks

Link: https://css-tricks.com/animating-border/

A Front End Developer’s Guide to GraphQL

No matter how large or small your application is, you’ll have to deal with fetching data from a remote server at some point. On the front end, this usually involves hitting a REST endpoint, transforming the response, caching it, and updating your UI. For years, REST has been the status quo for APIs, but over the past year, a new API technology called GraphQL has exploded in popularity due to its excellent developer experience and declarative approach to data fetching.…

A Front End Developer’s Guide to GraphQL is a post from CSS-Tricks

Link: https://css-tricks.com/front-end-developers-guide-graphql/

How the Roman Empire Made Pure CSS Connect 4 Possible

Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. “Pure CSS" demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. CSS and HTML preprocessors also helped the scene move forward. Sometimes preprocessors are used for hardcoding every possible scenario, for example, long strings of :checked and adjacent sibling selectors.
In this article, I will walk through the key ideas of a …

How the Roman Empire Made Pure CSS Connect 4 Possible is a post from CSS-Tricks

Link: https://css-tricks.com/roman-empire-made-pure-css-connect-4-possible/