(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.data-privacy-src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-1596564-1', 'auto'); ga('send', 'pageview');
Home » NewsBlog » CSS

A Bunch of Options for Looping Over querySelectorAll NodeLists

2018-11-13T03:05:44+00:00November 13th, 2018|Categories: News, Tutorials|Tags: |

A common need when writing vanilla JavaScript is to find a selection of elements in the DOM and loop over them. For example, finding instances of a button and attaching a click handler to them. const buttons = document.querySelectorAll(".js-do-thing"); // There could be any number of these! // I need to loop over them and [...]

The ironic inaccessibility of a11y

2018-11-13T03:05:43+00:00November 13th, 2018|Categories: News, Tutorials|Tags: |

This resonated with me: It’s ironic to me that the numeronym “a11y” lacks accessibility: it’s not immediately decipherable by humans who aren’t “in the club”; and, in some fonts, it’s visually indistinguishable from the word “ally” (with lowercase L’s), which can foil searches for clarity. — Eric Meyer (@meyerweb) November 5, 2018 Because I bet [...]

Get References from HTML Built with Template Literals

2018-11-09T03:05:20+00:00November 9th, 2018|Categories: News, Tutorials|Tags: |

One thing JavaScript template literals are great at is little blocks of HTML. Like: // Probably from some API or whatever const data = { title: "Title", content: "Content" }; const some_html = ` ${data.title} ${data.content} `; But that's still just a string. It's not ready to append to the DOM just yet. And what [...]

CSS-Tricks Uses Jetpack

2018-11-09T03:05:19+00:00November 9th, 2018|Categories: News, Tutorials|Tags: |

(This is a sponsored post.) Hey! I made a little page to explain all the ways in which this very site uses the Jetpack WordPress plugin. Here's the gist of it: Our Jetpack subscription gives us VaultPress, which backs up literally everything on this site in real time. That helps me sleep. Jetpack improves our [...]

A Guide to Custom Elements for React Developers

2018-11-09T03:05:16+00:00November 9th, 2018|Categories: News, Tutorials|Tags: |

I had to build a UI recently and (for the first time in a long while) I didn't have the option of using React.js, which is my preferred solution for UI these days. So, I looked at what the built-in browser APIs had to offer and saw that using custom elements (aka Web Components) may [...]

Simplify Styling with Functional CSS

2018-11-08T03:04:42+00:00November 8th, 2018|Categories: News, Tutorials|Tags: |

There is no doubt that "functional CSS" resonates strongly with some people. If that term is new to you, I belive it's come to mean the same thing as "Atomic CSS" as defined by John Polacek here. Harry Nicholls likens it to a function that can only produce one result (although I'd call that a [...]

Building a Donut Chart with Vue and SVG

2018-11-08T03:04:40+00:00November 8th, 2018|Categories: News, Tutorials|Tags: |

Mmm... forbidden donut." - Homer Simpson I recently needed to make a donut chart for a reporting dashboard at work. The mock-up that I got looked something like this: My chart had a few basic requirements. It needed to: Dynamically calculate its segments based on an arbitrary set of values Have labels Scale well across [...]

Fun Tip: Use calc() to Change the Height of a Hero Component

2018-11-07T03:04:55+00:00November 7th, 2018|Categories: News, Tutorials|Tags: |

The concept of Fluid Typography was tossed around a couple of years ago. The main idea is that if you know what size your font is at two different viewport sizes, then you can have the font scaling smoothly between the two sizes. We had a jQuery solution for this in FitText (meant of headings, [...]

We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it. Ok