Skip to main content
Fresh Article

Creating a Pencil Effect in SVG

Scott Turner, who has an entire blog "Exploring procedural generation and display of fantasy maps", gets into why vector graphics seems on these surface why it would be bad for the look of a pencil stroke:

Something like this pencil stroke would require many tens of thousands of different elements.  Basically each little blob of gray in that image would be separately defined. 

But, SVG filters to the rescue. … Read article “Creating a Pencil Effect in SVG”


How to use CSS Scroll Snap


Emergency Website Kit


Creating an Editable Site with Google Sheets and Eleventy

Remember Tabletop.js? We just covered it a little bit ago in this same exact context: building editable websites. It’s a tool that turns a Google Sheet into an API, that you as a developer can hit for data when building a website. In that last article, we used that API on the client side, meaning JavaScript needed to run on every single page view, hit that URL for the data, and build the page. That might be OK in … Read article “Creating an Editable Site with Google Sheets and Eleventy”


Maintaining Performance


Consistent Backends and UX: How Do New Algorithms Help?

Article Series

  1. Why should you care?
  2. What can go wrong?
  3. What are the barriers to adoption?
  4. How do new algorithms help?

In previous articles, we explained what consistency is, the difference between "strong" and "eventual" consistency, and why this distinction is more important than ever to modern application developers. We also introduced the notion of ‘consistency tax’: the extra time and effort that a development team needs to invest if they choose a system with only eventual consistency or limited … Read article “Consistent Backends and UX: How Do New Algorithms Help?”


Get Static


How to Repeat Text as a Background Image in CSS Using element()

There’s a design trend I’ve seen popping up all over the place. Maybe you’ve seen it too. It’s this sort of thing where text is repeated over and over. A good example is the price comparison website, GoCompare, who used it in a major multi-channel advertising campaign.… Read article “How to Repeat Text as a Background Image in CSS Using element()”


Value Bubbles for Range Inputs

HTML5 range inputs, in supported browsers and by design, don't show the user the actual value they are submitting. If you want to use the cool slider, but show the value, you'll have to do that yourself. Here we use the output element and jQuery to show the current value in a bubble that hovers above the range input.

How to Animate Text with SVG and CSS

The other day I was helping my pal Jez work on Dept. of Enthusiasm, the site for his newsletter, and I had a thought. What if we made the word “enthusiasm” in the title animate a little bit? Like, what if each of the letters in the word bopped up and down enthusiastically?… Read article “How to Animate Text with SVG and CSS”

Keep browsing in the archives

Monthly Mixup


Ideas Behind Responsive Emails


Design Systems and Portfolios


Triangular List Bullets

Monthly Sponsor
Thanks, Mailchimp!