Skip to main content
Fresh Article

Responsive Grid Magazine Layout in Just 20 Lines of CSS

I was recently working on a modern take of the blogroll. The idea was to offer readers a selection of latest posts from those blogs in a magazine-style layout, instead of just popping a list of our favorite blogs in the sidebar.

The easy part was grabbing a list of posts with excerpts from our favorite RSS feeds. For that, we used a WordPress plugin, Feedzy lite, which can aggregate multiple feeds into a single time-ordered list — perfect … Read article

Article

Recreating the CodePen Gutenberg Embed Block for Sanity.io

Learn how to create a custom CodePen block with a preview for Sanity Studio, inspired by Chris Coyier’s implementation for Wordpress’ Gutenberg editor.
Article

Pages for Likes

I posted about parsing an RSS feed in JavaScript the other day. I also posted about my RSS setup talking about how Feedbin is at the heart of it.

Dave discovered that Feedbin can also produce an RSS feed for all your likes. Likes is a feature of Feedbin, and fortunately also NetNewsWire, which syncs the likes back to Feedbin. You have to flip a settings switch in Feedbin, but then you get a URL for your likes. Here's Read article

Article

Gutenberging

It's been over a year since the big WordPress launch of Gutenberg, the new editor. It seems to me most of the controversy around it has died down. There has been enough time that the UX and accessibility of it have improved, and people are seeing the potential a lot more clearly. There ain't no turning back.

I'm running across articles like Haris Zulfiqar saying he's betting on it and Nick Hamze saying that blocks are for the next Read article

Link

wpaudit.site

Article

Fixed Headers and Jump Links? The Solution is scroll-margin-top

The problem: you click a jump link like <a href="#header-3">Jump</a> which links to something like <h3 id="header-3">Header</h3>. That's totally fine, until you have a position: fixed; header at the top of the page obscuring the header you're trying to link to!

Fixed headers have a nasty habit of hiding the element you're trying to link to. … Read article

Link

Inspiring high school students with HTML and CSS

Link

iOS 13 Design Guidelines, Templates, and Downloads

Article

Animate SVG Path Changes in CSS

Every once in a while I'm motivated to attempt to draw some shapes with <path>, the all-powerful drawing syntax of SVG. I only understand a fragment of what it all can do, but I know enough to be dangerous. All the straight-line syntax commands (like L) are pretty straightforward and I find the curved Q command fairly intuitive. Box yourself into a viewBox="0 0 100 100" and drawing simple stuff doesn't seem so bad.… Read article

Article

A Guide to Console Commands

The developer’s debugging console has been available in one form or another in web browsers for many years. Starting out as a means for errors to be reported to the developer, its capabilities have increased in many ways; such as automatically logging information like network requests, network responses, security errors or warnings.

There is also a way for a website’s JavaScript to trigger various commands that output to the console for debugging purposes. These commands are contained in a console … Read article

Article

Add Background Colors to SVGs Using the “rect” Element

The advantages of using SVGs in web development are well known. SVGs are small in size, can be made quite accessible, are scalable while maintaining their quality, and can be animated. Still, there is a learning curve. Things, like the syntax of SVG, can be a little tricky and having to hand-alter SVG code sometimes isn’t out of the question.

Most SVG assets allow styling to be applied in predictable ways. For instance, this circle has a hover state … Read article

Keep browsing in the archives

Monthly Mixup

Article

Leveling up with React: React Router

Article

Making the Move from jQuery to Vue

Snippet

Get URL and URL Parts in JavaScript

Monthly Sponsor
Thanks, Frontend Masters!