Sending Large Files
April 29th, 2021
Despite fancy modern options for recording podcasts with guests, like Riverside.fm or Zencastr where guests don’t have to worry about recording their own audio, we haven’t made the leap to one of those yet. We have the guests record their own audio locally (typically Quicktime Player or Windows Voice Recorder) because that way our editor…
Text That Sometimes Turns to Emojis
April 22nd, 2021
There are some Unicode characters that some browsers just decide they are going to turn into emojis for you. I couldn’t tell you why exactly, but here’s what I see: Chrome on the left. Safari in the simulator on top and to the right. Those text Unicode characters (▶, ↩, and, ❤) show up as…
Still Hoping for Better Native Page Transitions
April 21st, 2021
It would be nice to be able to animate the transition between pages if we want to on the web without resorting to hacks or full-blown architecture choices to achieve it. I could imagine an API that would run stuff, perhaps integrating with WAAPI, before the page is unloaded, and other stuff after the next…
Building a Full-Stack Geo-Distributed Serverless App with Macrometa, GatsbyJS, & GitHub Pages
March 25th, 2021
In this article, we walk through building out a full-stack real-time and completely serverless application that allows you to create polls! All of the app’s static bits (HTML, CSS, JS, & Media) will be hosted and globally distributed via the GitHub Pages CDN (Content Delivery Network). All of the data and dynamic requests for data…
Maps Scroll Wheel Fix
March 23rd, 2021
This blog post by Steve Fenton came across my feeds the other day. I’d never heard of HERE maps before, but apparently they are embeddable somehow, like Google Maps. The problem is that you zoom and out of HERE maps with the scroll wheel. So imagine you’re scrolling down a page, your cursor (or finger)…
Creating Patterns With SVG Filters
March 15th, 2021
For years, my pain has been not being able to create a somewhat natural-looking pattern in CSS. I mean, sometimes all I need is a wood texture. The only production-friendly solution I knew of was to use an external image, but external images are an additional dependency and they introduce a new complexity. I know…
Too Many SVGs Clogging Up Your Markup? Try ‘use’.
March 10th, 2021
Recently, I had to make a web page displaying a bunch of SVG graphs for an analytics dashboard. I used a bunch of <rect>, <line> and <text> elements on each graph to visualize certain metrics. This works and renders just fine, but results in a bloated DOM tree, where each shape is represented as separate…
Web Components Are Easier Than You Think
March 8th, 2021
When I’d go to a conference (when we were able to do such things) and see someone do a presentation on web components, I always thought it was pretty nifty (yes, apparently, I’m from 1950), but it always seemed complicated and excessive. A thousand lines of JavaScript to save four lines of HTML. The speaker…
A Super Flexible CSS Carousel, Enhanced With JavaScript Navigation
March 5th, 2021
Not sure about you, but I often wonder how to build a carousel component in such a way that you can easily dump a bunch of items into the component and get a nice working carousel — one that allows you to scroll smoothly, navigate with the dynamic buttons, and is responsive. If that is…
Reduced Motion, CORS, WhiteHouse.gov, popups, and 100vw
February 26th, 2021
In this week’s roundup, we highlight a proposal for a new <popup> element, check the use of prefers-reduced-motion on award-winning sites, learn how to opt into cross-origin isolation, see how WhiteHouse.gov approaches accessibility, and warn the dangers of 100vh. Let’s get into the news! The new HTML <popup> element is in development On January 21,…