Select Page

Category: Article

Push and ye shall receive

Sometimes the seesaw of web tech is fascinating. Service workers have arrived, and beyond offline networking (read Jeremy’s book) which is possibly their best feature, they can enable push notifications via the Push API. I totally get the push (pun intended) to make that happen. There is an omnipresent sentiment that we want the web to win, as there should be in this industry. Losing on the web means losing to native apps on all the different platforms out there. Native apps aren’t evil or anything — they are merely competitive and exclusionary in a way the web isn’t. Making the web a viable platform for any type of “app” is a win for us and a win for humans. One of the things native apps do well is push notifications which gives them a competitive advantage. Some developers choose native for stuff like that. But now that we actually have them on the web, there is pushback from the community and even from the browsers themselves. Firefox supports them, then rolled out a user setting to entirely block them. We’re seeing articles like Moses Kim’s Don’t @ me: Push notifications are a classic example of good UX intentions gone bad because we know no bounds. Very few people are singing the praises of push notifications. And yet! Jeremy Keith wrote up a great experiment by Sebastiaan Andeweg. Rather...

Read More

Why can’t we use Functional CSS and regular CSS at the same time?

Harry Nicholls recently wrote all about simplifying styles with functional CSS and you should definitely check it out. In short, functional CSS is another name for atomic CSS or using “helper” or “utility” classes that would just handle padding or margin, background-color or color, for example. Harry completely adores the use of adding multiple classes like this to an element: So what I’m trying to advocate here is taking advantage of the work that others have done in building functional CSS libraries. They’re built on solid foundations in design, people have spent many hours thinking about how these libraries should be built, and what the most useful classes will be. And it’s not just the classes that are useful, but the fundamental design principles behind Tachyons. This makes a ton of sense to me. However, Chris notes that he hasn’t heard much about the downsides of a functional/atomic CSS approach: What happens with big redesigns? Is it about the same, time- and difficulty-wise, or do you spend more time tearing down all those classes? What happens when you need a style that isn’t available? Write your own? Or does that ruin the spirit of all this and put you in dangerous territory? How intense can all the class names get? I can think of areas I’ve styled that have three or more media queries that dramatically re-style an element....

Read More

GraphQL is Everywhere!

I find GraphQL extremely fun and empowering tech to work with, even as a novice just getting started. You’ve probably heard the elevator pitch before: it allows you to ask for exactly the data you need whenever you need it (probably at the component level), and it arrives as lovely JSON data for your usage. I see it used as part of modern website builds all the dang time. The overall vibe is, “I want to do whatever I want on the front end, and that actually allows for more back-end choices as well.” And by “whatever” on the front end, that generally means a fancy SPA-ish JavaScript-powered thing or a static-site generator-ish thing. Here’s a quick smattering of articles that are everywhere these days. Instead of the actual article titles, I’ll rename with the stack parts. Contentful > GraphQL Contentful > GraphQL > Gatsby Another Contentful > GraphQL > Gatsby CraftCMS > GraphQL Craft CMS > GraphQL > Headless site CraftCMS > GraphQL > Vue GraphQL > 11ty WordPress > GraphQL > GraphQL > Gatsby > GraphQL > Gatsby WordPress > GraphQL > Vue Drupal > GraphQL GraphCMS > GraphQL DatoCMS > GraphQL DatoCMS > GraphQL > Vue/Nuxt CosmicJS > GraphQL GravCMS > Gatsby > GraphQL Strapi > GraphQL > Gatsby Netlify CMS > Gatsby > GraphQL Gentics Mesh > GraphQL Relax > GraphQL (maybe dead?)...

Read More

An Overview of Render Props in React

An Overview of Render Props in React Using render props in React is a technique for efficiently re-using code. According to the React documentation, “a component with a render prop takes a function that returns a React element and calls it instead of implementing its own render logic.” To understand what that means, let’s take a look at the render props pattern and then apply it to a couple of light examples. The render props pattern In working with render props, you pass a render function to a component that, in turn, returns a React element. This render function...

Read More

Scaling CSS: Two Sides of a Spectrum

The subject of scaling CSS came up a lot in a recent ShopTalk Show with Ben Frain. Ben has put a lot of thought into the subject, even writing a complete book on it, Enduring CSS, which is centered around a whole ECSS methodology. He talked about how there are essentially two solutions for styling at scale: Total isolation Total abstraction Total isolation is some version of writing styles scoped to some boundary that you’ve set up (like a component) in which those styles don’t leak in or out. Total abstraction is some version of writing styles that are global, yet so generic and re-usable, that they have no unintended side effects. Total isolation might come from in a .vue file, CSS modules in which CSS class selectors and HTML class attributes are dynamically generated gibberish, or a CSS-in-JS project, like glamerous. Even strictly-followed naming conventions like BEM can be a form of total isolation. Total abstraction might come from a project, like Tachyons, that gives you a fixed set of class names to use for styling (Tailwind is like a configurable version of that), or a programmatic tool (like Atomizer) that turns specially named HTML class attributes into a stylesheet with exactly what it needs. It’s the middle ground that has problems. It’s using a naming methodology, but not holding strictly to it. It’s using some styles in...

Read More