Archive by Author

Guetzli

Geutzili, Google’s new open source algorithm…

…that creates high-quality JPEG images with file sizes 35% smaller than currently available methods, enabling webmasters to create webpages that can load faster and use even less data.

I’ve seen this fairly widely reported, and that’s great because images are the main cause of web bloat these days and fighting back with tech seems smart.

I also saw Anselm Hannemann note:

This is great, but to put things into perspective, we also have …


Guetzli is a post from CSS-Tricks

The Next Smashing Magazine

Congrats to the big team over there assembled to take on this major redesign process. Unlike our redesigns around here that are usually more like realignments with minor dev work and UX sprinkles each iteration, this was a ground-up rebuild for them. They migrated a bunch of different platforms all into one, a static-site based system with all front end APIs. It’s gotta feel good to pull all that stuff into one system. I remember when I used to have …


The Next Smashing Magazine is a post from CSS-Tricks

Zeroing the Desk

Brendan Dawes:

After a recording session on one of those large mixing desks, after you’ve twiddled countless knobs and push around many faders you do something called zeroing the desk. This is were you turn every control and push every fader back to zero, so that when the next engineer comes in he or she isn’t going to jump out of their seat when a large sub-bass whacks them straight in the face and possibly blows something up. It’s a …


Zeroing the Desk is a post from CSS-Tricks

Text Effects with CSS (and a little contenteditable trick)

Mandy Michael has been creating some incredible text effects with just the power of CSS. She uses every trick in the book: gradients, transforms, pseudo elements, shadows, and clipping paths to name a few. They are all real web text too. Custom fonts typically, but no images, canvas, or SVG or anything like that.

Take a look at this beautiful effect:

See the Pen CSS only 3D paper fold text effect by Mandy Michael (@mandymichael) on CodePen.…


Text Effects with CSS (and a little contenteditable trick) is a post from CSS-Tricks

Measuring Image Widths in JavaScript (Carefully!)

Let’s say you want to find an <img> on the page and find out how wide it is in JavaScript. Maybe you need to make some choices based on that width (or height, or both) You can definitely do that. The DOM will even give you a variety of dimensions to choose from depending on what you need. There is definitely a catch though.

Here’s the image:

<img src="image.jpg" alt="an image">

And here’s us selecting it, by finding the first …


Measuring Image Widths in JavaScript (Carefully!) is a post from CSS-Tricks

Systems Smart Enough To Know When They’re Not Smart Enough

Josh Clark opens with “Our answer machines have an over-confidence problem.” Perhaps you’ve seen the examples of search results (in any form) presenting terrifyingly wrong (or at least “controversial”) “answers”. Hash tag fake news.

Search, in whatever form we offer it to our users, tends that way. This our top result, dear person! Interact with it! Our algorithm predicts you won’t regret it! Certainly, there is incentive to present results in that way.

Josh asks some hard questions:

  1. When should


Systems Smart Enough To Know When They’re Not Smart Enough is a post from CSS-Tricks

Scrolling on the Web: A Primer

Scrolling is complicated. Nolan Lawson:

  • User scrolls with two fingers on a touch pad
  • User scrolls with one finger on a touch screen
  • User scrolls with a mouse wheel on a physical mouse
  • User clicks the sidebar and drags it up and down
  • User presses up, down, PageUp, PageDown, or spacebar keys on a keyboard

As it turns out, all five of these input methods have vastly different characteristics, especially when it comes to performance and cross-browser behavior. Some of …


Scrolling on the Web: A Primer is a post from CSS-Tricks

Media Temple

Media Temple is a web hosting company that has hosting options for everyone. From inexpensive (but powerful) plans like their Managed WordPress Hosting, to mid-level stuff like the managed DV plan CSS-Tricks runs on, to super heavy duty dedicated and cloud hosting.

CSS-Tricks is the biggest site that I personally manage (with Media Temple’s help, of course), so I keep that on a DV all by itself. We’ve been able to tune it up to be incredibly speedy. The document …


Media Temple is a post from CSS-Tricks