Skip to main content
CSS is fun and cool and I like it.
Article

How to Make a Line Chart With CSS

Line,  bar, and pie charts are the bread and butter of dashboards and are the basic components of any data visualization toolkit. Sure, you can use SVG or a JavaScript chart library like Chart.js or a complex tool like D3 to create those charts, but what if you don't want to load yet another library into your already performance-challenged website?

There are plenty of articles out there for creating CSS-only bar charts, column charts, and pie charts, but … Read article “How to Make a Line Chart With CSS”

Article

Hey, let’s create a functional calendar app with the JAMstack

Hey, let's create a functional calendar app with the JAMstack

I’ve always wondered how dynamic scheduling worked so I decided to do extensive research, learn new things, and write about the technical part of the journey. It’s only fair to warn you: everything I cover here is three weeks of research condensed into a single article. Even though it’s beginner-friendly, it’s a healthy amount of reading. So, please, pull up a chair, sit down and let’s have an adventure.… Read article “Hey, let’s create a functional calendar app with the JAMstack”

Article

Building a Donut Chart with Vue and SVG

I recently needed to make a donut chart for a reporting dashboard at work. I wanted it to dynamically calculate its segments based on an arbitrary set of values, have labels, scale well across all screen sizes and devices be accessible, and cross-browser compatible, among other things. This article details the steps I took to do that, using Vue.js.
Article

Creating a Bar Graph with CSS Grid

If you’re looking for more manageable ways to create bar graphs, or in search of use cases to practice CSS Grid layout, I got you!

Before we begin working on the graph, I want to talk about coding the bars, when Grid is a good approach for graphs, and we’ll also cover some code choices you might consider before getting started.… Read article “Creating a Bar Graph with CSS Grid”

Article

Building a Progress Ring, Quickly

On some particularly heavy sites, the user needs to see a visual cue temporarily to indicate that resources and assets are still loading before they taking in a finished site. There are different kinds of approaches to solving for this kind of UX, from spinners to skeleton screens.

If we are using an out-of-the-box solution that provides us the current progress, like preloader package by Jam3 does, building a loading indicator becomes easier.

For this, we will make a … Read article “Building a Progress Ring, Quickly”

Article

SVG Charting Libraries

There is no shortage of options with charting libraries on the web. That’s good! Competition is good for consumers. It keeps the quality high. That’s certainly true here. The landscape of charting libraries is pretty impressive, ranging from the good-and-free to the excellent-and-paid.

We’re limiting the options presented here specifically to SVG charts. I think SVG is an excellent way to go for charts because:

  • It looks sharp at any size
  • It’s easy to style
  • It can be interactive
  • And
Read article “SVG Charting Libraries”