This newsletter issue was sent out to 233,268 newsletter subscribers on Tuesday, February 21st 2017.
Compression matters. Whenever you’re given the option to save on bandwidth without losing too much of the quality, it’s always a good idea to do so. For images, mozjpeg seems to be a decent JPEG encoder, just like pngquant for PNGs, and you can even go as far as use SVG to shrink your images and optimize GIFs, too.
For web fonts, it’s a good time to switch over from WOFF to WOFF2 compression (or TTF to WOFF2), as the format is now widely supported in browsers — probably with a WOFF and TTF/OTF fallback.
Brotli compression format is gaining traction, with Firefox, Chrome, Opera and Android Browser supporting it already.
When it comes to text-based files (HTML, CSS, JavaScript, SVG), we can use Brotli, which shows significant improvements for static content (14–39% file size savings). Brotli’s modules are available for Apache, nginx and IIS.
So, what to do? Pre-compress static assets with both Brotli and gzip at a high compression level. Compress (dynamic) HTML on the fly with Brotli at level 1–4. Check for Brotli support on CDNs and enable it if possible. The server should then handle content negotiation to choose Brotli or gzip. The catch? Brotli support is restricted to HTTPS connections. Can’t use it? You can use Zopfli instead — a very good, but slow, deflate or zlib compression which is backwards-compatible for browsers that support only gzip.
We’ll be covering some of these (and quite a few other!) fancy optimization techniques at our upcoming SmashingConf San Francisco on April 4–5, 2017. Tickets are selling quickly and workshops are filling up fast, so please don’t wait too long to get your ticket. We’d love to see you there! Now, let’s optimize… everything!
– Vitaly (@smashingmag)
With browsers starting marking sites that don’t support HTTPS as “Not secure”, it’s high time to finally make the switch. But no worries, moving from HTTP to HTTPS isn’t necessarily as hard as you might think. Especially when the community has got your back.
The community project “Moving To HTTPS” guides you through all the steps you need to take to implement HTTPS on your site. You can filter the switching strategy depending on the platform you use (e.g. WordPress, Magento, Shopify, and others), your hosting environment, and the level of access you have to your site. The guide itself is divided into four stages that you’ll have to go through to get HTTPS up and running. Before the big move, you’ll learn to select which kind of SSL certificate might work best for you, on moving day you’ll install it, fix mixed content issues, set up redirects and check 3rd-party integrations. Finally, the guide reminds you of what you need to check for and how to further improve the security of your site once the switch is done. (cm)
The web is full of generic, average solutions. But what’s the secret sauce to stand out of the mass and become noticeable? The recipe to whip up a truly exceptional, delightful experience? Well, every good chef has their little secrets, their tricks, but what makes them excel at their craft is the courage to think outside the box, to push boundaries and combine new flavors into something truly tasty.
With SmashingConf San Francisco, we want to challenge you to do just that: explore solutions you’ve never considered before. Designs that were impossible, front-end techniques you’d consider unthinkable, and strategies often too quickly dismissed as unfeasible.
The conference will be taking place April 4th and 5th with Nadieh Bremer, Nathan Curtis, Marcy Sutton, Sarah Drasner, and others. Join us at the Palace of Fine Arts near the Golden Gate Bridge waterfront, with breathtaking views of the bridge and Alcatraz Island. Conference tickets are available for $599, and if you book a workshop, too, you’ll save $100 off the conference + workshop price. See you there? ;-) (cm)
Are you looking for a fast and easy way to create a flowchart? Then be sure to check out the free Flowchart Kit for Sketch. It includes all the building blocks you’ll need to create fine sitemaps, wireframes, and diagrams with ease.
If you want to get even more out of Sketch, feel free to check out our fancy new book, “The Sketch Handbook”, with pratical examples that you can follow along, step-by-step, to master even the trickiest, advanced facets and become a true master of Sketch. (cm)
Search is an essential part of almost every website. But that doesn’t mean that there’s no room for innovation. Codrops recently published a couple of proof-of-concepts that illustrate how a sprinkle of CSS animation can make the good old “Search” field a lot more interesting and engaging to use.
The showcase features eleven experimental effects that add an unknown, bold dynamic to the “Search” interaction. A great piece of inspiration that reminds us to think outside the box. However, please keep in mind that the effects rely heavily on modern CSS properties that aren’t supported by all browsers yet. (cm)
Screwing up in git is easy. Figuring out your mistakes, on the other hand, can be quite hard. Especially since you need to know the exact name of the problem to track it down in the official git documentation. But no worries, Katie Sylor-Miller, engineer at Etsy, has got your back. Her little project “Oh shit, git!” collects some of the most common things that can go wrong when working with git — and how to fix them, of course.
You need to make changes after you committed? Retrieve something you accidentally deleted? Or maybe you committed to the wrong branch? It’s the little tragedies like these which every developer has experienced before and which Katie provides a fix for. In plain ol’ English and with a healthy dose of levity. Entertaining and useful. (cm)
When done right, caching can benefit performance, save bandwidth and reduce server costs. If you mess with it, however, things can get out of hand quickly. Luckily, Jake Archibald wrote a great primer on how to get caching right. In it, he shares caching best practices, explains the ins and outs of max-age, mutable and immutable content and what you can do so that HTTP cache and your service worker play well together.
But once you got to grips with caching, how should you go about explaining caching to clients or non-developers? The folks behind WordPress agency 10° came up with an easy-to-grasp explanation of what it’s is all about so everybody will be able to understand what’s happening behind the scenes with caching. Finally! (cm)
When you need to provide users with an option to select multiple items from a list, a select box paired with the multiple attribute is an obvious but not the most user-friendly solution. Multi.js could finally solve this issue.
To make it easier for users to keep track of the items they already selected, Multi.js adds a second column next to the conventional select box. It displays the user’s selection and further enhances the functionality of the box with a search function. Clever! Multi.js can be applied to any select element with the multiple attribute enabled. It’s easy to style with CSS and optionally supports jQuery. But you can stick to fully native JavaScript, too, if you prefer. (cm)
“Born In The USA”. “Back In The USSR”. “China Girl”. “London Calling”. “One Night In Bangkok”. Do these ring a bell? If you dive a little deeper into the history of music, you’ll find a lot more songs with geographical references. Now what does a creative foursome of designers do with that fact? Well, they go on the hunt for more songs and create a map of the world with them — the World Song Map.
Created by the team behind UK-based design studio Dorothy, the World Song Map shows a world in which continents, countries, cities, oceans, rivers and landmarks aren’t entitled with their geographical names but with the titles of over 1,000 songs. New York becomes “New York, New York” (what else?), the Mediterranean Sea “Holidays In The Sun”, Iceland “Walking On Thin Ice”. The map is inspired by 1950’s wall charts and, to make a music lover’s heart leap for joy, it even features an A-Z key with all the songs featured and the artists who performed them. A spectacular project. If you want to see more by the designers, also take a look at the street maps they created with allusions to films, books, football, TV and games. (cm)
With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.
Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!
Here are the recent job openings published on our Smashing Job Board:
Imagine you wrote a beautifully crafted newsletter and nobody read it. That would make any cat sad. Don't let that happen!