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 to consider that it's up to 100 times slower as Mozilla's mozJPEG encoder and in many cases, it doesn't achieve the same quality at the same file size

Source: Kornel Lesiński, the guy behind ImageOptim, who says Guetzli will be incorporated into the next version.

Creating a Book Cover Using JavaScript and p5.js

I recently published a book and an interactive course called Coding for Visual Learners. It teaches coding to beginners from scratch using the widely popular JavaScript programming language and the p5.js programming library. Since p5.js a great and an easy to use drawing library, I wanted to make use of it to create the cover of my book and course as well. This is a tutorial on how to create this particular visual using JavaScript and p5.js.

(more…)

Hassle-free Full Bleed with *:not()

Common situation documented by Dave Rupert:

Let's say you're making a blog post layout. Content is entered into a CMS inside a WYSIWYG editor field. You echo that content to the page. You pull it up on a mobile device and notice the paragraphs go edge-to-edge. Yikes, it's a little uncomfortable. So you add some kind of left/right padding maybe using a div.container.

This works great until the client asks for the images and video to go full bleed. Your universal padding solution no longer works well.

You got options. Containerizing isn't great in any scenario. So how do you yank out those full bleed elements? Dave does it with what I'd call a reverso-whitelist. Say you want images and videos to be full bleed, but everything else needs edge padding:

.post > *:not( img ):not( video ) {
    margin-left: auto;
    margin-right: auto;
    max-width: 50rem;
    padding-left: 5%;
    padding-right: 5%;
}

He's using :not() to select everything that isn't an image or video. Those things are the whitelist. Much easier the other direction of maintaining a blacklist of every single possible HTML element.

I use this right here on CSS-Tricks in this design, but instead of applying padding to everything, I use a container and pull out a whitelist of items to the edge with negative margins. I think I like Dave's idea better.

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 almost always comes back from WordPress under 100ms, which is pretty smoking! The only caching in place is at the nginx level. The rest of my sites I host on a separate DV, and I actually quite enjoy being able to DevOps myself when I need to, which I can do with Plesk that comes preinstalled on the box.

(more…)

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 them (such as touch screen scrolling) are likely to be smooth even on a page with heavy JavaScript usage, whereas others (such as keyboard scrolling) will make the same page feel laggy and unresponsive. Furthermore, some kinds of scrolling can be slowed down by DOM event handlers, whereas others won't.

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 we sacrifice speed for accuracy?
  2. How might we convey uncertainty or ambiguity?
  3. How might we identify hostile information zones?
  4. How might we provide the answer’s context?
  5. How might we adapt to speech and other low-resolution interfaces?

To which I might add: can we find a business incentive to make these things happen? Can such a good job be done with all this, that it attracts users, gains their trust, and makes them good customers? I fear that fast, overconfident, context-free answers is better business, short term.

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.

(more…)

Need to do Dependency-Free Ajax?

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it's becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to lose the jQuery dependency.

How's Ajax doing?

(more…)

CSS-Tricks Chronicle XXX

All the latest happenings around here on CSS-Tricks as well as on CodePen and ShopTalk. Recommended listening, news, upcoming conferences, things to watch for, and more. Wow, it's the 30th of these already!

Getting Started with CSS Grid

This was a blockbuster week for front-end developers as CSS Grid landed in the latest versions of Firefox and Chrome without a feature flag. That's right: we can now go and play with Grid in two of the most popular browsers right away.

But why is CSS Grid a big deal and why should we care?

Well, CSS Grid is the first real layout system for the web. (more…)

If Your Company Were a Couch…

Without even realizing it, our perceptions are cross-referenced with our memories. Our brains conjure up an emotional reaction when our eyes see familiar shapes, colors, and textures. This fun exercise uses various styles of couches to help you make decisions about the emotional response that best represents the personality of your company (or how you would like your company to be perceived).

(more…)

Linting HTML using CSS

Ire Aderinokun with some CSS selectors designed to catch problematic HTML elements, such as those with inline styles or missing/wrong attributes.

I tossed up a repo so I could make a full page demo showing off all those selectors at work. Any red you see is a problem of sorts.

speak

The speak property in CSS is for specifying how a browser should speak the content it reads, such as through a screen reader.

In other words, it's kind of like styling speech the way other CSS properties style visual elements of a webpage.

.module {
  speak: none;
}

(more…)

Using CSS Transitions on Auto Dimensions

We've all been there. You've got an element you want to be able to collapse and expand smoothly using CSS transitions, but its expanded size needs to be content-dependent. You've set transition: height 0.2s ease-out. You've created a collapsed CSS class that applies height: 0. You try it out, and... the height doesn't transition. It snaps between the two sizes as if transition had never been set. After some fiddling, you figure out that this problem only happens when the height starts out or ends up as auto. Percentages, pixel values, any absolute units work as expected. But all of those require hard coding a specific height beforehand, rather than allowing it to naturally result from the size of the element content.

(more…)

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-searchicon-staricon-tag