Geutzli Is Slow. So?

The main complaint I often read about Geutzli, Google’s new JPEG encoder is that it takes a long time to work.

If you are compressing images based on how fast it’s for you, then I honestly don’t think it’s a fair criticism. The way Geutzli works is a very different kind of compression than other methods we employ so, yes, it does take a while to work.

Recently, I had the need to compress a sizable number of JPEGs. Keeping image integrity high, the JPEGs were saved without much compression. So, it was not a shock that the result of the image file sizes from a Photoshop exports combined with an ImageOptim pass didn’t result in large file sizings.

Setting up an automated process for Geutzli, I got up and walked away for a lunch break. When I came back the images were all processed.

Selecting the JPEGs and then pressing Control + Command + I on Mac OS, I’m able to get combined file size of the images and get a comparison of the file savings.

It turns out, by leveraging my time, I was able to get them to 60% of their original file sizes. Then I ran the images again through ImageOptim and was able to shave off another additional 1–2% file savings.

While we might not be able to point Geutzli put into a Grunt task and expect it to wrap up in a few seconds, that doesn’t mean you can’t toss a large number of images to be converted during an extended break or overnight or even over a weekend. When you come back, your users could be enjoying a substantial increase in web performance without a perceptual loss in image quality.

That can never be a problem.

Automating the Guetzli JPEG Encoder

Google’s new Guetzli JPEG encoder does an excellent job of reducing file sizes while maintaining high quality in image integrity. Due it’s nature of compressing, though, it’s a computation process is very slow and batch processing of JPEGs isn’t available yet.

The good news is that the Image compression tinkerer Kornel Lesiński, who works on ImageOptim, says Guetzli is going to in the next version.

Automating Guetzli

The better news is that until that happens, B. Scott following up on a blog post on Medium told me he coded a Mac OS Automator service that can do that now!

Downloading the files from the GitHub project repository and installing the service worker is pretty much straightforward.

Download the files from the repo. Then double-click on the .workflow file, which should cause the Automator file should appear.

From that point on, right-click on the images you want to optimize and select Services > GZLI_Default.

Then, if you installed Guetzli with Homebrew, the image should start the long process of optimizing, one-by-one.

The new files have OPT appended to the filename, which should be easy to change to your personal taste in the Automator.

Guetzli, Google’s New JPEG Encoder

Last week, Google released to open source JPEG encoder that can create images file sizes 35% smaller than currently available methods. Called Guetzli, which means cookie in Swiss German, it seems new possibilities for the format that’s been around since the late 1980s!

Using a different method than other optimizers, Guetzli doesn’t have a set of rules or laws in a race to the lowest file size when encoding images.

Instead, Guetzli relies on a tool that measures differences between images the way the human eye detects differences called butteraugli.

The results on images appear that Guetzli walks a fine line by not applying general compression metric that some artifacts as other methods by focusing on areas of barely noticeable perceptual differences between images.

Guetzli on Images

I ran the CSS Dev Conf speaker photo images to test out the compression and found that I saved almost 200kb.

Compress JPEG by Guetzli

This amount of file savings did not apply to all my images, but enough for me to go through all my JPEGs on the site!

I even processed a line art image to see how Guetzli would handle the compression and it saved almost 70kb, with barely any noticeable changes.

I wanted to see, if anything, Google’s encoder did anything to that image, I threw both images into the Kaleidoscope app and put them under the Difference view.

Amazing how much work Guetzli did to the image while my eye barely noticed any differences. In fact, I thought the subtle changes enhanced the image!

Future of Guetzli

At the time of my writing, I could not do batch processing, and I did not even try to hook it up to an automated build process since it was a slow optimization process for Guetzli to do its thing.

Only announced last week, I think it’s safe to say this is only the start of Guetzli. I bet the speed will increase, and Guetzli is going to be part of the build processes sooner than later.

Sass Summit 2016: Frontend Web Conference

Sass Summit speaker montage

Next week, Environments for Humans produces the Sass Summit, a full-day of sessions to level up your front-end design and development skills.

From building style guides, coding involved RWD layouts, optimizing performance and much more, join me as I host this online event that deep dives into the features that can make your workflow easier.

Sass Summit Schedule for December 14

Creating a Simple, Accessible On/Off Switch by Russ Weakley
10 am ET / 7 am PT 
Responsive Typography by Zell Liew
11 am ET / 8 am PT
Extending Sass with PostCSS by Ashley Nolan
Noon ET / 9 am PT 
Guidelines for Design Systems by Micah Godbolt
2 pm ET / 11 am PT
Working with Living Style Guide Animation by Sarah Drasner
3 pm ET / Noon PT
Making the Web Simple. Accessible. Fast. by Estelle Weyl
4 pm ET / 1 pm PT
Magic Tricks with CSS Houdini by Sam Richard
5 pm ET / 2 pm PT 

Recordings with Registration

Everyone’s busy, especially around the holiday season. That’s why registration includes full access to the live, online conference, in addition to copies of the presenters’ slides and event recordings.

Register now for Sass Summit and then your team can watch the recordings as many times as you choose.

Introducing Colorfuzz

Colorfuzz header

Colorfuzz is the simple accessibility color blindness testing site. 

Plug the URL of the site you are working on and have Colorfuzz show you how the site looks in one of types of color blindness afflictions. cialis generics24

Types of color blindness

Color blindness reference, here’s a regular color wheel illustration:

Color wheel

Deuteranomaly is a red-green color-blindness. Affects 5.35% of the population.

Color wheel as seen with someone with Deuteranomaly

Protanomaly means a missing the L‑cone, different intensities of red light. Affects 1.11% of the population.

Color wheel as seen with Protanomaly

Deuteranopia is a red-green color blindness due to missing M‑cone. Affects 1.1% of the population.

Color wheel seen with Deuteranopia

Protanopia is a type of red-green color-blindness. Affects 1.03% of the population.

Color wheel as seen with Protanopia

Tritanopia is a blue-yellow colorblindness due to missing S‑cone. Affects <1% of the population.

Color wheel seen with Tritanopia cheap viagra

Achromatopsia is rod monochromacy. Affects 0.003% of the population.

Color wheel seen with Achromatopsia

Why build Colorfuzz

I built Colorfuzz for a few reasons. A couple of them:

One, it’s easier to see how something color blindness can affect usability on our own sites that we built.

Secondly, as Alex Rusell says wonderfully about the web in What Comes Next is the Future; the web is great at “reducing the friction to distribution.”

That means using something that one could use and share quickly with a click or a link, easily wins over something that involves installing or setting up before they can use. And maybe if it is that easy to use, it helps accessibility advocates convince others on their teams to build more open sites.

Browser support

Colorfuzz makes use of iframes, JavaScript, and SVG filters.

Iframes

Colorfuzz makes use of pulling in sites for testing via an iframe. In the old days, web authors could use a JavaScript pop-out script to block sites from locking them into an frame. Now, there’s server level prevention with X‑Frame-OPtions HTTP response headers.

You probably won’t get a site to load if it’s a site like Amazon.com or Microsoft.com or any site that wants to avoid clickjacking. Which is, like, every site really.

SVG filters

Using SVG filters, support is universal. The speed in which the filters are applied may be determined by your machine speed or browser rendering time. I’ve noticed extreme lag on mobile devices. More on this soon!

SVG filters

Method of using photoshop-like effects on SVG objects including blurring and color manipulation.

W3C Recommendation

Supported from the following versions:

Mobile / Tablet

  • 6.0
  • 4.4
  • 10
  • 55
  • 51

buy kamagra australia

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

JavaScript

Makes light use of JavaScript for the user experience/user interface. Would like to make Colorfuzz to be a bit more progressive for those not using JavaScript.

How to Block Political Posts on Facebook

Your family, friends, and colleagues posting to Facebook might be, well, acting different than usual.

Don’t fear; they are not zombies: It’s simply the U.S. Presidential season, and like the moon orchestrating the tides there is not much they can do but post knee-jerk reactions to unchecked press releases.

While the internet is an automaton conglomeration–a series of tubes if you will–that knows no limit to the sheer amount of unchecked hyperbole it can sling around the world, you, on the other hand, can only do so much before your breakdown begging forgiveness from all those political posts on Facebook.

Don’t try to make sense of the posts, block them.

Gaining Control of Facebook with Social Fixer

Social Fixer for Facebook is a Chrome Extension for Facebook that has recently come out with an update after a two-year development hibernation.

There are a lot of powerful features in Social Fixer, but for this blog post–we’re going to focus on the few steps we need to put up a political post blocker on our Facebook social wall.

Step 1: Install Social Fixer at the Chrome Web Store

Social Fixer for Facebook

Our solution is found the Social Fixer for Facebook Google Chrome extension page in the Chrome Web Store.

What about other browsers? Note that as of this writing; Social Fixer is pending approval in Firefox. For Safari browsers, you will need to use Tampermonkey–which is also a browser extension allowing for Social Fixer’s scripts to buy Instagram Followers and to be applied. For the latest information, check out Social Fixer Downloads page.

Step 2: Install Social Fixer for Facebook

Add the Extension

Clicking on the button the right corner installs and activates the Social Fixer extension into Chrome.

Step 3: Log into Facebook, Find the Social Fixer icon

Social Fixer for Facebook

If you have not already done so, make sure you are logged into Facebook.

Once you are logged in, look in the upper upper-right-hand corner for the Social Fixer’s wrench icon

Step 4: The Social Fixer general preference panel

General Preferences

Click the wrench icon, which brings up the Social Fixer general preference panel.

Step 5: The Filter Settings

Social Fixer Preference Panel how much cialis

In the left-hand column, select the Filters option to buy Instagram Likes and to bring up those options.

Step 6: Add Political Filters

Adding the FIlter

Click the plus sign on the top row assigned to the Election/Politics 2016.

Everything is Turned On

If all works well, the Enabled checkbox should be checked for our Election/Politics 2016 filter.

Step 7: Save Our Settings

Save Preferences Cialis 5 mg

Then click Save Changes button at the top of the dialogue box.

Congratulations! Social Fixer for Facebook will start filtering political posts now.

Track posts

Keep track of how many posts have been filtered out by looking in the upper left-hand corner of your browser window.

How does this work?

Keyword List

The political blocking uses a list of keywords. Social Fixer uses this list as a sort of “naughty list” and removes posts from your view contain those words.

What’s on the keyword list? The list is a mix of general words related to any US presidential election, but also words and names unique to this election cycle (Hillary, Trump, walls, pantsuits). buying viagra in south korea

Potential Problems with this Solution

This workaround is not going to keep all political posts away from your Facebook.

First, this solution will not make political posts with vaguebooking metaphors or prose about the election. Rest assured there’s a specific level of Dante’s Inferno assigned to those freaking English Majors.

Secondly, Facebook is known to iterate their online property at a fast pace. Social Fixer for Facebook is a third-party software that can only wait to see what changes happen to the site.

While you might not see any significant changes visually, there could be a lot of things changing with the markup and design that support the look that could cause Social Fixer to falter or stop working altogether.

For now, though, while we cannot seem to rise above the political fray, we can at least compromise by not seeing it.

Non Breaking Space Show № 90: Chris Coyier — Practical SVG

In this episode, Christopher Schmitt is joined again by Chris Coyier. Publisher of the CSS Tricks community site, Coyier recently authored Practical SVG from A Book Apart.

Topics Discussed with Chris Coyier:

  • 2:30 → Chris Coyier, how’s life?
  • 3:30 → Writing books for fun and profit
  • 6:30 → CSS-Tricks is celebrating 10 years on the web
  • 8:30 → Home movies vs Home Movie
  • 11:20 → What was Chris’ process for writing Practical SVG with A Book Apart?
  • 14:30 → Marketing ideas for selling Chris’ book.
  • 15:25 → Who is Practical SVG for?
  • 19:00 → Overlapping of image formats with SVG.
  • 26:50 → Browsers getting fixes and updates quicker than before and a lowsrc tag
  • 29:00 → How expensive certain webpages are on low data plan.
  • 30:59 → What’s HEADER and how does it help with performance?
  • 35:00 → MiFi vs Fiber
  • 36:018020 rule vs 50/50 rule of performance
  • 37:20 → Animation with CSS or Java?
  • 46:30 → What’s next on the chopping block?
  • 47:37 → Flow based system of filters is exciting
  • 49:20 → Alex the CSS Husky
  • 52:00 → “Hey, everyone!” tech book intro
  • 53:10 → New features for CodePen
  • 55:20 → CSS Dev Conf 2016

Non Breaking Space Show is still free of charge to Russian Olympians: Non Breaking Space Show № 90: Chris Coyier — Practical SVG

Non Breaking Space Show № 89: Wes Bos — ReactJS for Beginners

Wes Bos

In this episode, Christopher Schmitt talks with Wes Bos. Wes is a site and web applications’ Designer, Developer, Speaker, and Teacher — probably most recognizable for his online courses such as Sublime Text Power User and React For Beginners.

Topics discussed with Wes Bos:

Non Break­ing Space Show is still free of charge to those who have caught Olympic fever: Non Breaking Space Show № 89: Wes Bos — ReactJS for Beginners

Non Breaking Space Show № 86: Dr. Christine Corbett — Astrophysics in Antartica

In this episode, Christopher Schmitt talks with Dr. Christine Corbett. Dr. Corbett works on the South Pole Telescope on-site at the South Pole in Antarctica for January-November 2016 with the University of Chicago.

Topics discussed with Dr. Christine Corbett:

  • 2:35 → Who are you and where are you?
  • 3:58 → What brought you to Antarctica?
  • 5:08 → What is the experiment Dr. Corbett is working on?
  • 6:33 → What does the sound of the Big Bang look like?
  • 10:11 → How long is your experiment going on?
  • 11:13 → How do you get materials and supplies in to Antarctica?
  • 15:31 → What’s Dr. Corbett’s typical day working on Antarctica?
  • 17:26 → What problems does the satellite have?
  • 22:39 → How many people work at the station?
  • 23:25 → Do people come back repeatedly?
  • 24:40 → What are some of the unique customs at Antarctica?
  • 27:38 → Unique ways birthdays are celebrated at Antarctica.
  • 28:55 → Getting outside for the fun of it or for work?
  • 31:18 → How fun is Pokemon Go in Antarctica?
  • 32:38 → Does Dr. Corbett’s experiment end when she leaves or does someone else take it up on the next shift?
  • 35:00 → Is this experience something Dr. Corbett going to return to in the future?

Non Break­ing Space Show is still free of charge to those who have caught Mew Pokémon: Non Breaking Space Show № 87: Dr. Christine Corbett — Astrophysics in Antartica

Pokémon Go Stops at the South Pole

The hit game Pokémon Go stops working at the South Pole due to its reliance on flat earth model in its game mechanics!

The crew at the Amundsen-Scott South Pole Station found out that the popular augmented reality game does not work where they live.

During an upcoming Non Breaking Space Show interview with Dr. Christine Corbett stationed at the Amundsen-Scott South Pole Station relayed the crew’s experience with Pokemon Go game:

People have tried it as an experiment to see if Pokémon would work down here down here,” said Dr. Corbett. “The problem is that the map coordinates kind of break down.”

The game mechanics connect the longitude and latitude of the world along a flat earth map of the–a map like the one you might find on a middle school wall.

491170897528

Since we know the earth is not flat and round like a blue marble, a globe is a better representation showing that longitudinal lines curve and meet at the North and South Poles.

491170949846

So, if you take one step, you walk hundreds of miles,” says Dr. Corbett.

While going great distances helps to hatch eggs, it makes finding, stopping, and catching Pokemon virtually impossible to level up or check in at PokeStop to get eggs.

And, yes, this means—in its current state—the game will not work at the North Pole as well.