Headless WordPress on the JAMstack

Timeless Web Dev Articles

January 18, 2020

Pavithra Kodmad asked people for recommendations on what they thought were some of the most timeless articles about web development that have changed their perspective in some way. Fun! I’m gonna scour the thread and link up my favorites (that are actually articles, although not all of them are super directly related to web dev).

Read more ⟶

Eleventy Love

January 17, 2020

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 […]

Read more ⟶

Autumn (macOS window manager)

January 17, 2020

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 […]

Read more ⟶

Third-Party Components at Their Best

January 16, 2020

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, […]

Read more ⟶

NetNewsWire and Feedbin

January 16, 2020

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, […]

Read more ⟶

Thinking Through Styling Options for Web Components

January 16, 2020

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 […]

Read more ⟶

The Design Squiggle

January 16, 2020

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 […]

Read more ⟶

How We Tagged Google Fonts and Created goofonts.com

January 15, 2020

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 […]

Read more ⟶

A Web Component with Different HTML for Desktop and Mobile

January 15, 2020

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 […]

Read more ⟶

The Deal with the Section Element

January 15, 2020

Two articles published the exact same day: Bruce Lawson on Smashing Magazine: Why You Should Choose HTML5 <article></article> Over <section></section> Adam Laki on Pine: The Difference Between <section></section> and <div></div> Element They are comparing slightly different things, but they both involve the <section></section> element.

Read more ⟶

Debunking the Myth: Accessibility and React

January 15, 2020

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></div> for a […]

Read more ⟶

How many CSS properties are there?

January 14, 2020

Tomasz Łakomy posted a joke tweet about naming all the CSS attributes and Tejas Kumar replied with a joke answer, going as far as making an npm module. You can even run a terminal command to see them: npx get-all-css-properties You’ll get 259 of them. The source code uses the website quackit.com for the data, […]

Read more ⟶

Business Dad

January 14, 2020

Congrats to Chris Enns, our podcast editor on ShopTalk and CodePen Radio, for landing a really cool new podcast to edit: Business Dad. It’s Alexis Ohanian, the co-founder of Reddit, talking to dads. The first episode is with Hasan Minhaj(!) Speaking of podcasting, Dave wrote up his thoughts on starting a podcast (you should), a […]

Read more ⟶

A Trick That Makes Drawing SVG Lines Way Easier

January 14, 2020

When drawing lines with SVG, you often have a <path></path> element with a stroke. You set a stroke-dasharray that is as long as the path itself, as well as a stroke-offset that extends so far that you that it’s initially hidden. Then you animate the stroke-offset back to 0 so you can watch it “draw” […]

Read more ⟶

In Defence of “Serverless” —the term

January 14, 2020

Ben Ellerby: For now Serverless, to me at least, manages to do a hard job, defining the borders of a very fluid and complex space of possible solutions in which we can build next-generation architectures. It would help if there was not a framework of the same name, it would help if people didn’t first […]

Read more ⟶

Netlify High-Fives

January 14, 2020

We’ve got Netlify as a sponsor around here again this year, which is just fantastic. Big fan. Our own Sarah Drasner is Head of DX (Developer Experience) over there, if you hadn’t heard. And if you haven’t heard of Netlify, well, you’re in for a treat. It’s a web host, but for your jamstack sites, […]

Read more ⟶

Snowpack

January 13, 2020

Snowpack. Love that name. This is the new thing from the Pika people, who are on to something. It’s a bundler alternative, in a sense. It runs over packages you pull from npm to make sure that they are ES module-compatible (native imports).

Read more ⟶

Animate Text on Scroll

January 13, 2020

We covered the idea of animating curved text not long ago when a fun New York Times article came out. All I did was peek into how they did it and extract the relevant parts to a more isolated demo.

Read more ⟶

A Scandal in Bohemia

January 13, 2020

I love that Paravel is so busy doing so much cool stuff they literally just forgot that they built this and are just now releasing it. It’s a Sherlock Holmes story, but designed to be more interesting and immersive (even audio!) than just words-on-a-screen.

Read more ⟶

How to Animate on the Web With GreenSock

January 13, 2020

There are truly thousands of ways to animate on the web. We’ve covered a comparison of different animation technologies here before. Today, we’re going to dive into a step-by-step guide of one of my favorite ways to get it done: using GreenSock.

Read more ⟶