novakHouse.us

Been seeing a lot of Eleventy action lately. It's a smaller player in the world of static site generators, but I think it's got huge potential because of how simple it is, yet does about anything you'd need it to do. It's Just JavaScript™.

• Jason Lengstorf and Zach Leatherman did a Learn with Jason episode on it.
• Reginald Hunt has a big ol' guide on it.
• Phil Hawksworth has all these starters for it, like EleventyOne and ElevenTail.
• Andy

… Read article

The post Eleventy Love appeared first on CSS-Tricks.

I love how nerdy this is. Autumn allows you to write JavaScript to control your windows. Get this window, move it over here. Nudge this window over. There are all sorts of APIs, like keyboard command helpers and doing things on events, like waking up from sleep.

I love that it exists, but for the moment, my window management mostly consists of: grab this window and chuck it on the left half of the screen, and grab this window and … Read article

The post Autumn (macOS window manager) appeared first on CSS-Tricks.

I'm a fan of the componentization of the web. I think it's a very nice way to build a website at just about any scale (except, perhaps, the absolute most basic). There are no shortage of opinions about what makes a good component, but say we scope that to third-party for a moment. That is, components that you just use, rather than components that you build yourself as part of your site's unique setup.

What makes a third-party component … Read article

The post Third-Party Components at Their Best appeared first on CSS-Tricks.

NetNewsWire is one of the classic RSS apps, debuting in 2002. I was pretty stoked when it went 5.0 and was open-sourced in August 2019! You can snag it right here. (Sorry, Mac only.)

It's super nice, is fast, and looks great. It has just the right features.

But... I thought, at least at first, that really prefer websites for reading RSS content. I have multiple machines. I have mobile devices. I don't want my RSS to be limited … Read article

The post NetNewsWire and Feedbin appeared first on CSS-Tricks.

Where do you put styles in web components?

I'm assuming that we're using the Shadow DOM here as, to me, that's one of the big draws of a web component: a platform thing that is a uniquely powerful thing the platform can do. So this is about defining styles for a web component in a don't-leak-out way, and less so a way to get global styles to leak in (although that's very interesting as well, which can be done via … Read article

The post Thinking Through Styling Options for Web Components appeared first on CSS-Tricks.

I think we all have an intuitive understanding that, at the beginning of projects that require our creativity (be it design or code), things feel uncertain and messy. Then, as we go, things tend to straighten out. There is still some wiggling and setbacks, but by the end, we find a single solution and ship it.

Apparently this feeling has a logo: The Design Squiggle

The Process of Design Squiggle by Damien Newman, thedesignsquiggle.com

It comes from Damien Newman who … Read article

The post The Design Squiggle appeared first on CSS-Tricks.

GooFonts is a side project signed by a developer-wife and a designer-husband, both of them big fans of typography. We’ve been tagging Google Fonts and built a website that makes searching through and finding the right font easier.

GooFonts uses WordPress in the back end and NuxtJS (a Vue.js framework) on the front end. I’d love to tell you the story behind goofonts.com and share a few technical details regarding the technologies we’ve chosen and how we adapted and used them for this project.… Read article

The post How We Tagged Google Fonts and Created goofonts.com appeared first on CSS-Tricks.

Christian Schaefer has a great big write-up about dealing with web advertisements. The whole thing is interesting, first documenting all the challenges that ads present, and then presenting modern solutions to each of them.

One code snippet that caught my eye was a simple way to design a component that renders different HTML depending on the screen size.

<div class="ad">
  <template class="ad__mobile">
    // Mobile ad HTML code with inline script
  </template>
  <template class="ad__desktop">
    // Desktop ad HTML code with 

… Read article

The post A Web Component with Different HTML for Desktop and Mobile appeared first on CSS-Tricks.

Two articles published the exact same day:

1. Bruce Lawson on Smashing Magazine: Why You Should Choose HTML5 <article> Over <section>
2. Adam Laki on Pine: The Difference Between <section> and <div> Element

They are comparing slightly different things, but they both involve the <section> element.

I find it pretty clear when you reach for a <div>: When you want that element to be essentially meaningless. You're only using it for styling purposes.

I always think of RSS when I think … Read article

The post The Deal with the Section Element appeared first on CSS-Tricks.

I find it notable when the blog of a major accessibility-focused company like Deque publishes an article called Debunking the Myth: Accessibility and React. Mark Steadman is essentially saying if a site has bad accessibility, it ain't React... it's you. The tools are there to achieve good accessibility.

React didn't use a <div> for a <button>, you did. React didn't force extra markup all over the page when you decided to not use a Fragment. React didn't forget … Read article

The post Debunking the Myth: Accessibility and React appeared first on CSS-Tricks.