novakHouse.us

As a professional research biologist, my playground used to be science laboratories filled with microscopes, petri dishes, and biology tools. Curiosity leads many scientists on their journey to discoveries. Mine led me to web design. I used to try learning HTML on my lab desktop while centrifuging extraction samples or waiting for my samples to thaw or freeze. These wait times are valuable for writing experiment notes and even learn a new skill. For me, this meant learning basic HTML … Read article “My Long Journey to a Decoupled WordPress Gatsby Site”

The post My Long Journey to a Decoupled WordPress Gatsby Site appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

The Gatsby team shipped an update to its source plugin for WordPress, graduating it to a beta release. The new version brings a new set of features to Gatsby’s headless WordPress configuration, which brings together WPGraphQL and WPGatsby to power a Gatsby front-end that pulls in data from WordPress.

If you haven’t encountered these plugins before, that’s probably because they’re only available on GitHub rather than the WordPress Plugin Directory.

And if you’re wondering what the big deal is, … Read article “Introducing Headless WordPress with Gatsby Cloud (Live Preview, Incremental Builds, and more!)”

The post Introducing Headless WordPress with Gatsby Cloud (Live Preview, Incremental Builds, and more!) appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Lemme sum this up:

• CodePen has Embedded Pens. Build a Pen on CodePen, embed it on any other site.
• We also offer Prefill Embeds, which remove that first step. With Prefill Embeds, the Pen doesn’t need to exist on CodePen at all. You pass in the code and settings you want to appear in the embed via code blocks sitting on the page (progressive enhancement!). Now that code can live in your Git repo or database, which might

… Read article “Lazy Loaded Prefill Embeds”

The post Lazy Loaded Prefill Embeds appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

When I decided to try to base my current personal website on Eleventy, I didn’t want to reinvent the wheel: I tested all the Eleventy starters built with Tailwind CSS that I could find in Starter Projects from the documentation.

Many of the starters seemed to integrate Tailwind CSS in a contrived way. Also, some of them seemed to assume that no one updates Tailwind’s configuration on the fly while working on a website. That’s why I integrated Eleventy … Read article “An Eleventy Starter with Tailwind CSS and Alpine.js”

The post An Eleventy Starter with Tailwind CSS and Alpine.js appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Scott Jehl argues that performance metrics such as First Contentful Paint and Largest Contentful Paint don’t really capture the full picture of everyone’s experience with websites:

These metrics are often touted as measures of usability or meaning, but they are not necessarily meaningful for everyone. In particular, users relying on assistive technology (such as a screenreader) may not perceive steps in the page loading process until after the DOM is complete, or even later depending on how JavaScript may block

… Read article “We need more inclusive web performance metrics”

The post We need more inclusive web performance metrics appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Hakim El Hattab tweeted a really nice little UX enhancement for a static site that includes a scrollable sidebar of navigation.

https://twitter.com/hakimel/status/1262337065670316033

The trick is to throw the scroll position into localStorage right before the page is exited, and when loaded, grab that value and scroll to it. I’ll retype it from the tweet…

let sidebar = document.querySelector(".sidebar");

let top = localStorage.getItem("sidebar-scroll");
if (top !== null) {
  sidebar.scrollTop = parseInt(top, 10);
}

window.addEventListener("beforeunload", () ={
  localStorage.setItem("sidebar-scroll", sidebar.scrollTop);
});

What … Read article “Memorize Scroll Position Across Page Loads”

The post Memorize Scroll Position Across Page Loads appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

In this article, we will use Next.js to build a static blog framework with the design and structure inspired by Jekyll. I’ve always been a big fan of how Jekyll makes it easier for beginners to setup a blog and at the same time also provides a great degree of control over every aspect of the blog for the advanced users.

With the introduction of Next.js in recent years, combined with the popularity of React, there is a new … Read article “Building a Blog with Next.js”

The post Building a Blog with Next.js appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Some developers just prefer working in React. I don’t blame them really, because I like React too. Maybe that’s what they learned first. I’ve been using it long enough there is just some comfort to it. But mostly it is the strong component model that I like. There is just something nice about a codebase where things are constructed from components with clear jobs and responsibilities.

It’s not terribly common to see WordPress sites built with React though. The standard … Read article “Frontity is React for WordPress”

The post Frontity is React for WordPress appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Julia Evans:

I decided to implement almost all of the UI by just adding & removing CSS classes, and using CSS transitions if I want to animate a transition.

An awful lot of the JavaScript on sites (that aren’t otherwise entirely constructed from JavaScript) is click the thing, toggle the class — which is why jQuery was so good and libraries like Alpine.js are finding happy developer audiences.

I once did a screencast called “Hey designers, if you only … Read article “A little bit of plain Javascript can do a lot”

The post A little bit of plain Javascript can do a lot appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

I’ve been doing a bit of refactoring this week at Sentry and I noticed that we didn’t have a generic List component that we could use across projects and features. So, I started one, but here’s the rub: we style things at Sentry using Emotion, which I have only passing experience with and is described in the docs as…

[…] a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to

… Read article “How to Make a List Component with Emotion”

The post How to Make a List Component with Emotion appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.