Menu Search
Jump to the content X X
Smashing Conf Barcelona

You know, we use ad-blockers as well. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. our upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #176

This newsletter issue was sent out to 233,268 newsletter subscribers on Tuesday, February 21st 2017.

Editorial

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, mozjpeg1 seems to be a decent JPEG encoder, just like pngquant2 for PNGs, and you can even go as far as use SVG to shrink your images3 and optimize GIFs4, too.

For web fonts, it’s a good time to switch over from WOFF to WOFF2 compression5 (or TTF to WOFF26), as the format is now widely supported in browsers7 — probably with a WOFF and TTF/OTF fallback.

Brotli browser support is getting decent.8
Brotli compression format is gaining traction9, with Firefox, Chrome, Opera and Android Browser supporting it already.

When it comes to text-based files (HTML, CSS, JavaScript, SVG), we can use Brotli10, which shows significant improvements11 for static content (14–39% file size savings12). Brotli’s modules are available for Apache13, nginx14 and IIS15.

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 it16 if possible. The server should then handle content negotiation to choose Brotli or gzip. The catch? Brotli support is restricted to HTTPS connections17. Can’t use it? You can use Zopfli18 instead — a very good, but slow, deflate or zlib compression19 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 Francisco3820 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)

Table of Contents

  1. A Step-By-Step Guide To Moving To HTTPS21
  2. Something’s Cooking!22
  3. Freebie: A Fully-Customizable Flowchart Kit For Sketch23
  4. Spicing Up The Search UI24
  5. Common Git Problems and Solutions25
  6. Getting To Grips With Caching26
  7. A More User-Friendly Solution For Select Boxes27
  8. A World Of Music28
  9. Upcoming Smashing Workshops29
  10. New On Smashing Job Board30
  11. Smashing Highlights (From Our Archives)31
  12. Recent Articles On Smashing Magazine32

331. A Step-By-Step Guide To Moving To HTTPS

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.

Moving To HTTPS34

The community project “Moving To HTTPS35” 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)

362. Something’s Cooking!

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.

SmashingConf SanFrancisco37

With SmashingConf San Francisco3820, 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 workshop39, too, you’ll save $100 off the conference + workshop price. See you there? ;-) (cm)

403. Freebie: A Fully-Customizable Flowchart Kit For Sketch

Are you looking for a fast and easy way to create a flowchart? Then be sure to check out the free Flowchart Kit41 for Sketch. It includes all the building blocks you’ll need to create fine sitemaps, wireframes, and diagrams with ease.

Sketch Flowchart Kit42

If you want to get even more out of Sketch, feel free to check out our fancy new book, “The Sketch Handbook43”, 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)

444. Spicing Up The Search UI

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 interesting45 and engaging to use.

Search UI Effects46

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)

475. Common Git Problems and Solutions

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!48” collects some of the most common things that can go wrong when working with git — and how to fix them, of course.

Oh Shit, Git!49

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)

506. Getting To Grips With Caching

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 right51. 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.

Caching Explained52

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 about53 so everybody will be able to understand what’s happening behind the scenes with caching. Finally! (cm)

547. A More User-Friendly Solution For Select Boxes

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.js55 could finally solve this issue.

Multi.js56

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)

578. A World Of Music

“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 Map58.

World Song Map59

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 maps60 they created with allusions to films, books, football, TV and games. (cm)

619. Upcoming Smashing Workshops

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.

Smashing Public Workshops62

Workshops at SmashingConf SF 2017 — Apr 3

Workshops at SmashingConf SF 2017 — Apr 6

Our Public Workshops

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.com73 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!

7410. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board75:

  • Senior Developer76 at Atlantic Media (New York City)
    “We’re looking for a Senior Developer who will play an integral role in developing and executing new digital experiences on behalf of our clients. Main responsibilities include defining the technical road map of new client projects, assessing timelines and mentoring junior developers.”
  • Full-Stack WordPress Developer For Social Impact Design Agency77 at Constructive (New York City)
    “If you are a Senior Full-Stack WordPress developer who excels at translating sophisticated UX and design into exceptional interaction design, and are hungry to collaborate in close-knit teams of senior strategic and creative experts to push boundaries, then we’d love to hear from you.”
  • Front End Developer/Web Developer – Junior/Graduate/Mid78 at viagogo (London)
    “We’re on a mission to revolutionise the way people get tickets to live events, making it possible for anyone, anywhere in the world to see their favourite artists, teams or shows live. Your role is simple – think of ways to improve our user experience and get these improvements into the hands of our users as quickly as possible.”

7911. Smashing Highlights (From Our Archives)

  • How To Get A Logo Accepted: Eight Steps To A Better Design Workflow80
    As logo and brand designers, your work starts long before the first concept sketches, and finishes long after the last perfectly placed pixel. Your work requires so much more than just creative ideas and technical skills — it compels you to be a marketer, strategist, psychologist, salesperson, showman and project manager at the same time. It’s difficult, but it’s also exciting and challenging!
  • Designing Case Studies: Showcasing A Human-Centered Design Process
    81
    Designers are great at producing visual artifacts. We create mockups, images, code and all sorts of other material to document our solutions. But looking only at those artifacts doesn’t account for the actual creative process.
  • A Type Design Brief: What Is In It, And Why Does It Matter?82
    Type design is equal parts suffering and euphoria. It is a walk along a winding road that goes on for many weeks and months before it’s done. A type design brief is like a charter path: It asks you questions, and the answers will guide you to where you want to be.

8312. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 https://github.com/mozilla/mozjpeg
  2. 2 https://pngquant.org/
  3. 3 https://css-tricks.com/transparent-jpg-svg/
  4. 4 https://bitsofco.de/optimising-gifs/
  5. 5 https://everythingfonts.com/woff-to-woff2
  6. 6 https://everythingfonts.com/ttf-to-woff2
  7. 7 http://caniuse.com/#search=woff2
  8. 8 http://caniuse.com/#search=brotli
  9. 9 http://caniuse.com/#search=brotli
  10. 10 https://github.com/google/brotli
  11. 11 https://www.voorhoede.nl/en/blog/static-site-implosion-with-brotli-and-gzip/
  12. 12 https://blogs.akamai.com/2016/02/understanding-brotlis-potential.html
  13. 13 https://github.com/kjdev/apache-mod-brotli
  14. 14 https://github.com/google/ngx_brotli
  15. 15 https://www.iispeed.com/pagespeed/products/iisbrotli
  16. 16 https://calendar.perfplanet.com/2016/enabling-brotli-even-on-cdns-that-dont-support-it-yet/
  17. 17 https://groups.google.com/a/chromium.org/forum/#!topic/net-dev/JufzX024oy0
  18. 18 https://github.com/google/zopfli
  19. 19 https://blog.codinghorror.com/zopfli-optimization-literally-free-bandwidth/
  20. 20 https://smashingconf.com/
  21. 21 #a1
  22. 22 #a2
  23. 23 #a3
  24. 24 #a4
  25. 25 #a5
  26. 26 #a6
  27. 27 #a7
  28. 28 #a8
  29. 29 #a9
  30. 30 #a10
  31. 31 #a11
  32. 32 #a12
  33. 33 #
  34. 34 https://movingtohttps.com/
  35. 35 https://movingtohttps.com/
  36. 36 #
  37. 37 https://smashingconf.com/
  38. 38 https://smashingconf.com/
  39. 39 https://smashingconf.com/registration
  40. 40 #
  41. 41 http://uxflow.co/
  42. 42 http://uxflow.co/
  43. 43 https://www.smashingmagazine.com/sketch-handbook/
  44. 44 #
  45. 45 https://tympanus.net/Development/SearchUIEffects/
  46. 46 https://tympanus.net/Development/SearchUIEffects/
  47. 47 #
  48. 48 http://ohshitgit.com/
  49. 49 http://ohshitgit.com/
  50. 50 #
  51. 51 https://jakearchibald.com/2016/caching-best-practices/
  52. 52 https://cachingexplained.com/
  53. 53 https://cachingexplained.com/
  54. 54 #
  55. 55 https://github.com/Fabianlindfors/multi.js
  56. 56 https://github.com/Fabianlindfors/multi.js
  57. 57 #
  58. 58 http://www.wearedorothy.com/shop/world-song-map-classic-edition
  59. 59 http://www.wearedorothy.com/shop/world-song-map-classic-edition
  60. 60 http://www.wearedorothy.com/shop/category/street-maps
  61. 61 #
  62. 62 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  63. 63 https://shop.smashingmagazine.com/products/workshop-nathan-curtis-SF-2017
  64. 64 https://shop.smashingmagazine.com/products/tim-kadlec-http2-performance
  65. 65 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-design-SF-2017
  66. 66 https://shop.smashingmagazine.com/products/workshop-chris-holst-SF-2017
  67. 67 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-SF-2017
  68. 68 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-sf-2017
  69. 69 https://shop.smashingmagazine.com/products/workshop-nadieh-bremer-sf-2017
  70. 70 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-SF-2017
  71. 71 http://fitc.ca/presentation/workshop-smart-responsive-design-patterns/
  72. 72 http://www.webdirections.org/respond/
  73. 73 mailto:vitaly@smashingconf.com
  74. 74 #
  75. 75 http://jobs.smashingmagazine.com/
  76. 76 http://jobs.smashingmagazine.com/j/Senior-Developer/2469085
  77. 77 http://jobs.smashingmagazine.com/j/Full-Stack-WordPress-Developer-for-Social-Impact-Design-Agency-NYC/2468509
  78. 78 http://jobs.smashingmagazine.com/j/Front-End-Developer-Web-Developer-Junior-Graduate-Mid/2467862
  79. 79 #
  80. 80 https://www.smashingmagazine.com/2016/02/design-workflow/
  81. 81 https://www.smashingmagazine.com/2015/02/designing-case-studies-human-centered-design-process/
  82. 82 https://www.smashingmagazine.com/2014/02/a-type-design-brief-arabic-typography-calligraphy/
  83. 83 #
  84. 84 https://www.smashingmagazine.com/2017/02/realities-ux-design-luxury-industry/
  85. 85 https://www.smashingmagazine.com/2017/02/touch-gesture-controls-mobile-interfaces/
  86. 86 https://www.smashingmagazine.com/2017/02/create-realistic-clock-sketch/
  87. 87 https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/
  88. 88 https://www.smashingmagazine.com/2017/02/experimenting-with-speechsynthesis/
  89. 89 https://www.smashingmagazine.com/2017/02/designing-html-apis/
  90. 90 https://www.smashingmagazine.com/2017/02/current-trends-future-prospects-mobile-app-market/
  91. 91 https://www.smashingmagazine.com/2017/02/freebie-space-earth-elements-icon-set/
  92. 92 https://www.smashingmagazine.com/2017/02/improving-ui-design-skills-copywork/
  93. 93 https://www.smashingmagazine.com/2017/02/30-free-fonts-with-personality-and-style/
  94. 94 https://www.smashingmagazine.com/2017/02/web-development-reading-list-169/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' web with the latest tips and tricks for designers and web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top