Skip to main content
Fresh 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

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

Sponsored Link

Seen by Indeed

Are you looking for a tech job where you clock in, or for a career where you’ll be seen?

Seen by Indeed is a matching service for software engineers, product managers and other tech pros that sorts through thousands of companies -- like Twilio, Overstock, VRBO, and PayPal -- and matches tech talent like you to the role that’ll take you further. Not only does Seen by Indeed match on things like skills, experience and salary, but we’re with … Read article

Article

Footnote Characters

There are special superset number characters that are sometimes perfect for footnotes. Here they are:

¹ ² ³ ⁴ ⁵ ⁶ ⁷ ⁸ ⁹

I generally prefer to superscript the number myself, like:… Read article

Article

Do This to Improve Image Loading on Your Website

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser. Then it needs to repaint the page after that which pushes all the content around. I’ve definitely seen this problem a lot on big news … Read article

Link

monica.css

Article

Understanding Web Accessibility Color Contrast Guidelines and Ratios

What should you do when you get a complaint about the color contrast in your web design? It might seem perfectly fine to you because you’re able to read content throughout the site, but to someone else, it might be a totally different experience. How can put yourself in that person’s shoes to improve their experience?

There are some relatively easy ways to test contrast. For example, you can check the site on your phone or tablet in bright sunlight, … Read article

Link

Same HTML, Different CSS

Article

Centering a div That Maintains Aspect-Ratio When There’s Body Margin

Andrew Welch had a little CSS challenge the other day to make an ordinary div:

• centered vertically + horizontally
• scales to fit the viewport w/ a margin around it
• maintains an arbitrary aspect ratio
• No JS

There's a video in that tweet if it helps you visualize the challenge. I saw Paul Bakaus blogging about this the other day, too, so it's a thing that comes up! … Read article

Link

Solving Sticky Hover States with @media (hover: hover)

Article

How to Build Vue Components in a WordPress Theme

The inline-template directive allows us to build rich Vue components as a progressive enhancement over existing WordPress markup.
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!