Select Page

Category: Article

Website Sameness™

Here’s captain obvious (yours truly) with an extra special observation for you: BAR WITH SPECIAL MESSAGE LOGO PLATFORM↓ SOLUTIONS↓ PRICING BOLD STATEMENT CALL TO ACTION GRID OF LITTLE ILLUSTRATIONS LARGE BOLD FOOTER©2018 — Chris Coyier (@chriscoyier) January 30, 2018 It came across as (particularly trite) commentary about Website Sameness™. I suppose it was. I was looking at lots of sites as I was putting together The Power of Serverless. I was actually finding it funny how obtuse the navigation often is on a SaaS sites. Products? Solutions? Which one is for me? Do I need to buy a product...

Read More

Using Conic Gradients and CSS Variables to Create a Doughnut Chart Output for a Range Input

I recently came across this Pen and my first thought was that it could all be done with just three elements: a wrapper, a range input and an output. On the CSS side, this involves using a conic-gradient() with a stop set to a CSS variable. The result we want to reproduce. In mid 2015, Lea Verou unveiled a polyfill for conic-gradient() during a conference talk where she demoed how they can be used for creating pie charts. This polyfill is great for getting started to play with conic-gradient(), as it allows us to use them to build stuff...

Read More

JavaScript, I love you, you’re perfect, now change

Those of us who celebrate Christmas or Hannukkah probably have strong memories of the excitement of December. Do you remember the months leading up to Christmas, when your imagination exploded with ideas, answers to the big question “What do you want for Christmas?” As a kid, because you aren’t bogged down by adult responsibility and even the bounds of reality, the list could range anywhere from “legos” to “a trip to the moon” (which is seeming like will be more likely in years to come). Thinking outside of an accepted base premise—the confines of what we know something to be—can be a useful mental exercise. I love JavaScript, for instance, but what if, like Christmas as a kid, I could just decide what it could be? There are small tweaks to the syntax that would not change my life, but make it just that much better. Let’s take a look. As my coworker and friend Brian Holt says, Get out your paintbrushes! Today, we’re bikeshedding! Template Literals First off, I should say, template literals were quite possibly my favorite thing about ES6. As someone who regularly manipulates SVG path strings, moving from string concatenation to template literals quite literally changed my damn life. Check out the return of this function: function newWobble(rate, startX) { ... if (i % 2 === 0) { pathArr2[i] = pathArr2[i] + " Q "...

Read More

Boilerform: A Follow-Up

When Chris wrote his idea for a Boilerform, I had already been thinking about starting a new project. I’d just decided to put my front-end boilerplate to bed, and wanted something new to think about. Chris’ idea struck a chord with me immediately, so I got enthusiastically involved in the comments like an excitable puppy. That excitement led me to go ahead and build out the initial version of Boilerform, which you can check out here. The reason for my initial excitement was that I have a guilty pleasure for forms. In various jobs, I’ve worked with forms at...

Read More

One File, Many Options: Using Variable Fonts on the Web

In 2016, an important development in web typography was jointly announced by representatives from Adobe, Microsoft, Apple, and Google. Version 1.8 of the OpenType font format introduced variable fonts. With so many big names involved, it’s unsurprising that all browsers are on-board and racing ahead with implementation. Font weights can be far more than just bold and normal—most professionally designed typefaces are available in variants ranging from a thin hairline ultralight to a black extra-heavy bold. To make use of all those weights, we would need a separate file for each. While a design is unlikely to need every...

Read More