Smashing Magazine

From:Subject:

Smashing Newsletter #238: Email, Design Teams, Regex and Compression


Dear Smiles Davis,

I’ve worked mostly remotely with various teams since 2001, so I’m well used to doing most communication via email or the various messaging apps we have used over the years — does anyone else remember ICQ? However, in the last couple of weeks, I’ve been reminded just how valuable face-to-face time can be for remote teams.

Most of the Smashing Team spent a few days together in Freiburg, assembling for SmashingConf Freiburg and a one-day team meeting. It was the first time some of us had met in person. I left Freiburg feeling as if I had a new understanding of my colleagues, and a reminder that while digital communication is efficient, getting everyone together in one place on occasion is important, too.

On the subject of the Smashing team, we also celebrated the 13th birthday of Smashing Magazine while we were in Freiburg. You can find out about more of the people who are behind Smashing Magazine in my article, Smashing Magazine Is Thirteen.

Watch out for our write-up of SmashingConf Freiburg in the coming days — the videos will also be on the way just as soon as we can get it edited and ready for you.

— Rachel (@rachelandrew)


Table of Contents

1. Can I Email…?
2. Automating Image Compression
3. Learn Regex With Crosswords
4. Behind The Scenes Of Design Teams
5. Tips To Master Your Next Tech Job Interview
6. A Newsletter For Underrepresented Coders
7. Email Design Inspiration
8. An ASCII-Art Music Experience
9. Upcoming In Smashing Membership
10. New On Smashing Job Board
11. Our Next Smashing Workshops
12. Our Most Popular Articles

1. Can I Email…?

We all know and love caniuse.com. Unfortunately, if you wanted to test support for web standards in HTML Email, it wasn’t really easy. Until now. Inspired by the successful concept, Can I Email lets you check support for more than 50 HTML and CSS features in 25 email clients, and since the site only launched a week ago, more is already in the planning.

Can I Email showing support for background-blend-mode.

Made for and by the email geeks community, the data that fuels the project is available on GitHub and anyone can contribute to it. A nice detail: the Email Client Support Scoreboard which is included ranks email clients based on how they support the features. A useful little helper for anyone who’s wrangling HTML email. (cm)


2. Automating Image Compression

The transfer size of requested images has grown by 52% on desktop and 82% on mobile within the last year — with over half of the median page weight accounting for imagery. These are figures that once again make clear how crucial it is that images are optimized before they hit production. Now, wouldn’t it be handy if you could automate the compression step?

The GitHub Action listing the images that were optimized

Well, the folks at Calibre asked themselves the same question and built a GitHub Action that does exactly that: it automatically optimizes the images in your pull request — without any quality loss thanks to mozjpeg and libvips, so that no image accidentally skips compression. A real timesaver. (cm)


From our sponsor

Get Angular Code from Sketch Designs with Indigo.design

Indigo Design is a unified platform for visual design, UX prototyping, code generation and app development that keep your teams productive in the tools they love. Create the best-in-class UI designs using components & UX patterns in the expressive Indigo Design System with Sketch UI Kits. With the click of a button, generate high-quality HTML, CSS, and Angular code from your design with no compromise. Sign up for free.

Get Angular Code from Sketch Designs


3. Learn Regex With Crosswords

If you’ve got a sweet spot for riddles and logic puzzles, then Regex Crossword is for you. Regex Crossword is a crossword puzzle game where the clues are defined using regular expressions — who said regex can’t be fun?

Regex Crossword puzzle

There are different difficulty levels for you to start to cut your teeth on an easy set of crosswords to learn the basics or put your skills to the test as the puzzles get bigger and more complex. A puzzle generator is also included, so if you feel like making up your own puzzles for others to unravel, there’s nothing to hold you back. (cm)


4. Behind The Scenes Of Design Teams

While many companies are driven by features and technology, over the last years it’s rare to find debates about the importance of design. It’s reflected in publicly announced case studies, design systems, large scale design overhauls, and most recently in dedicated pages for design teams — be it Uber, Google, Spotify, Medium, Dropbox, Slack, Amazon or AirBnB.

Behind The Scenes of Design Teams

Recently, Intercom has announced Intercom.Design, a resource dedicated to its design teams, products, processes and public case studies, including internal UI recommendations and expectations from different product and content designer levels. Wonderful sources of inspiration to improve your design team and explore behind the scenes of how products are designed and built. (Thanks for the tip, Kostya Gorskiy!) (vf)


5. Tips To Master Your Next Tech Job Interview

The job-hunting process can be intimidating, especially if you’re just about to get your career started. To help you tackle the challenge well, Yangshun Tay put together the Tech Interview Handbook.

Tech Interview Handbook teaser

This free resource takes you through the entire process; from working on your resume to negotiating with the employer once the interview has ended, while curated practice questions get you fit for both the technical and behavioral questions that might pop up along the way. A good read, not only for prospective web professionals. (cm)


6. A Newsletter For Underrepresented Coders

The web community is diverse and colorful, with so many people from different backgrounds and origins bringing in their talent, sharing, caring, and learning from each other. Nevertheless, some coders are rather underrepresented in the usual roundups, newsletters, and articles.

Code with Veni logo

To change that, Veni Kunche started Code with Veni, a newsletter for underrepresented coders. It features hand-picked articles on coding, finding your first job, and advice from underrepresented folks. A true treasure chest — for everyone. (cm)


From our sponsor

Clients don’t get your design?

We show the label on white background and clients don’t like it. We put it on a mockup and they are like “Wow it's so pretty!” And we laugh because it’s the same design. Get photorealistic mockups ↬

#


7. Email Design Inspiration

Standing out from the flood of emails that reach our inboxes every day is hard, not only for promotional campaigns but also for transactional emails and newsletters. So how about some inspiration from how others manage to spark curiosity and interest to save their emails from ending up in the junk-mail folder as a victim on the quest to inbox zero?

Email campaigns from Italic and Bellroy

Curated by Rob Hope, Email Love showcases well-crafted emails that you can turn to for fresh ideas — a look inside the code of each email is included, of course. Exciting discoveries guaranteed! (cm)


8. An ASCII-Art Music Experience

No matter if it’s the kind of music you usually listen to or not, the album visualizer that Spotify presents on occasion of the newly-released Bon Iver album i, i is definitely worth taking a closer look at.

Screenshot from the Visualizer

ViiSUALiiZER, as it’s officially called, is an immersive online experience that augments the listening experience with a mixture of animated ASCII art that is made up of the album title’s characters and facts revolving around how people across the globe are listening to the album. An impressive concept that is bound to draw you right in. (cm)


From our sponsor

Online Masters in Information Design and Strategy

Ad
Earn your master’s degree online.


9. Upcoming In Smashing Membership

Thank you for being smashing! A few weeks ago, we released the brand-new Smashing Magazine Print, with practical and thought-provoking articles on ethics and privacy to make us all think. Members ($5 plan) receive the digital version for free, Smashers ($9 plan) get the printed issue shipped directly to their doorsteps. And we have new webinars coming up as well:

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (Ah, you could become a Smashing Member, too! Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉)


10. New On Smashing Job Board

  • Data Engineer (m/f/x) Automation & Dashboard Development at DECATHLON Deutschland SE & Co. KG (Plochingen, Germany)
    “As a Data Engineer (m/f/x) you enable an easy and user-friendly access to different data sources. You will work at our headquarters in Plochingen (near Stuttgart).”
  • Software Engineer — UI/UX For Machine Learning at Wild Me (Portland, Oregon)
    “Wild Me is a non-profit organization looking for a designer who is interested in developing cutting edge solutions to translate machine learning workflows and results into engaging and easy-to-understand displays for wildlife biologists.”
  • Business Card Template Designer at Print Peppermint (Remote)
    “Print Peppermint is a refreshingly creative online printer specializing in high-end custom business cards. We are looking for hip young talent to help us create amazing business card templates… around 500 of them.”

11. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems. Coming up next:

A cartoon of the Smashing Cat being on stage and giving a presentation with a flipchart

Or, if you’d like to run an in-house workshop at your office, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)


12. Our Most Popular Articles

  • A Re-Introduction To Destructuring Assignment
    Sick of chaining lots of keys together with dots to access nested values in objects? Frustrated that arr[0] isn’t a very descriptive name? Destructuring assignment has incredible value when accessing values in arrays and objects. Read on to learn a number of use cases in which this syntax can come in handy.
  • Machine Learning For Front-End Developers With Tensorflow.js
    Using JavaScript and frameworks like Tensorflow.js is a great way to get started and learn more about machine learning. In this article, Charlie Gerard covers the three main features currently available using Tensorflow.js and sheds light onto the limits of using machine learning in the frontend.
  • Overflow And Data Loss In CSS
    In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.

This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman and Christiane Rosenberger.

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook