The youth these days couldn’t possibly understand the abstraction of a floppy disk for a save icon.

People have been kicking that ol’ chestnut around for years. Do the youngsters have no idea what it is?, we ask. What happens when all the things we based our icons on don’t exist anymore?, we wonder. Do we need a new one?, and we experiment. Olivia Walch’s skewering is hilarious: Comic about the kids pic.twitter.com/LneN1Ff32u — Olivia (@oliviawalch) December 16, 2017 Baby bear: Make a button and put the word save in it. The youth these days couldn’t possibly understand the abstraction of a floppy disk for a save icon. is a post from CSS-Tricks

Continue Reading

Is jQuery still relevant?

Remy Sharp: I’ve been playing with BigQuery and querying HTTP Archive‘s dataset … I’ve queried the HTTP Archive and included the top 20 [JavaScript libraries] … jQuery accounts for a massive 83% of libraries found on the web sites. This corroborates other research, like W3Techs: jQuery is used by 96.2% of all the websites whose JavaScript library we know. This is 73.1% of all websites. And BuiltWith that shows it at 88.5% of the top 1,000,000 sites they look at. Even without considering what jQuery does, the amount of people that already know it, and the heaps of resources out there around it, yes, jQuery is still relevant. People haven’t… Read More

Continue Reading

From Local Server to Live Site

(This is a sponsored post.) With the right tools and some simple software, your WordPress development workflow can be downright delightful (instead of difficult)! That’s why we built Local by Flywheel, our free local development application. Now, we’ve launched Local Connect, a sweet feature embedded in the app that gives you push-pull functionality with Flywheel, our WordPress hosting platform. There’s no need to mess with downloading, uploading, and exporting. Pair up these platforms to push local sites live with a few quick clicks, pull down sites for offline editing, and streamline your tools for a simplified process! Download Local for free here and get started! Direct Link to Article —… Read More

Continue Reading

Accessibility Testing Tools

There is a sentiment that accessibility isn’t a checklist, meaning that if you’re really trying to make a site accessible, you don’t just get to check some things off a list and call it perfect. The list may be imperfect and worse, it takes the user out of the equation, so it is said. Karl Groves once argued against this: I’d argue that a well-documented process which includes checklist-based evaluations are better at ensuring that all users’ needs are met, not just some users. I mention this because you might consider an automated accessibility testing tool another form of a checklist. They have rules built into them, and they test… Read More

Continue Reading

Evolution of img: Gif without the GIF

Colin Bendell writes about a new and particularly weird addition to Safari Technology Preview in this excellent post about the evolution of animated images on the web. He explains how we can now add an MP4 file directly to the source of an img tag. That would look something like this: The idea is that that code would render an image with a looping video inside. As Colin describes, this provides a host of performance benefits: Animated GIFs are a hack. […] But they have become an awesome tool for cinemagraphs, memes, and creative expression. All of this awesomeness, however, comes at a cost. Animated GIFs are terrible for web… Read More

Continue Reading

Making your web app work offline, Part 2: The Implementation

This two-part series is a gentle, high-level introduction to offline web development. In Part 1 we got a basic service worker running, which caches our application resources. Now let’s extend it to support offline. Article Series: The Setup The Implementation (you are here!) Making an `offline.htm` file Next, lets add some code to detect when the application is offline, and if so, redirect our users to a (cached) `offline.htm`. But wait, if the service worker file is generated automatically, how do we go about adding in our own code, manually? Well, we can add an entry for importScripts, which tells our service worker to import the scripts we specify. It… Read More

Continue Reading

Making your web app work offline, Part 1: The Setup

This two-part series is a gentle introduction to offline web development. Getting a web application to do something while offline is surprisingly tricky, requiring a lot of things to be in place and functioning correctly. We’re going to cover all of these pieces from a high level, with working examples. This post is an overview, but there are plenty of more-detailed resources listed throughout. Article Series: The Setup (you are here!) The Implementation (posts tomorrow, stay tuned) Basic approach I’ll be making heavy use of JavaScript’s async/await syntax. It’s supported in all major browsers and Node, and greatly simplifies Promise-based code. The link above explains async well, but in a… Read More

Continue Reading

Animating Border

Transitioning border for a hover state. Simple, right? You might be unpleasantly surprised. The Challenge The challenge is simple: building a button with an expanding border on hover. This article will focus on genuine CSS tricks that would be easy to drop into any project without having to touch the DOM or use JavaScript. The methods covered here will follow these rules Single element (no helper divs, but psuedo-elements are allowed) CSS only (no JavaScript) Works for any size (not restricted to a specific width, height, or aspect ratio) Supports transparent backgrounds Smooth and performant transition I proposed this challenge in the Animation at Work Slack and again on Twitter.… Read More

Continue Reading