Smashing Newsletter: Issue #214

Editorial

Ah, all these annoying pop-ups, deceptive checkboxes, linkbaity headlines and malicious data aggregators! Over the last years, we’ve got pretty good at instinctively dismissing and ignoring them. Even better: with more attention to respect and design ethics these days, we’ve been fighting back against all these dark practices, encouraging transparency and honesty in our interfaces.

As a result, in times when everybody is trying to sell us something, we often find ourselves reluctant to trust products and people behind them — just because loudness and exaggeration have become a new normal way of delivering a message to an audience.

But what if we’d all avoid exaggerating? What if we could all show a bit of personality, explaining our intentions and goals and principles and beliefs instead? What if we stop explaining why we are better than somebody else, and just explain what makes us trustworthy and wonderful? What if we try to connect to other people and build an engaging community instead?

At Smashing, we are very proud of our friendly, inclusive conferences with wonderful, hard-working people around the world joining us. We’re proud of our books and eBooks written by people who deeply care about the quality and versatility of the web. We’re proud of Smashing Membership where wonderful people help each other and share what they’ve learned, and we’re incredibly proud of having you among our readers because you care about the quality of your work.

Brand new Smashing Book 6 is focused on real challenges and real front-end solutions in the real world.

Be proud of your work, and promote and support it, but maybe don’t forget to promote your values and beliefs as well. Your website might not become the traffic-heaviest website in the world, but you might build a remarkable community around you with people who will take those extra steps to support and help you. And that’s something no traffic can beat.

— Vitaly (@smashingmag)

The Font Loading Checklist
Getting A Website Live 101
Accordions And Semantic Markup
SVG Icon Transitions Made Easy
Freebie: Printable Browser Sheets
A Piece Of Front-End Wisdom
SmashingConf New York Is Coming
The Anywhere Workers
Upcoming In Smashing Membershp
Upcoming Workshops With Vitaly Friedman

1. The Font Loading Checklist

Maximizing the user experience while keeping the performance budget low is a challenge every web developer faces. To find the right balance, Zach Leatherman has spent the last four years learning everything he could about web fonts and how they load. Now he distilled everything down to one small — but mighty! — checklist. (cm)

2. Getting A Website Live 101

Do you remember the times when you got started with web development? You learned the basics of HTML and CSS, and maybe a bit of JavaScript, too, proudly used your newly-aquired knowledge to build a little site, and then you came to the point where you didn’t know how to actually get that thing online.

Let’s face it: Explaining to a beginner how to get a website live can be a challenge. Luckily, Chris Coyier has written a fantastic explanation that you can point aspiring developers (like you once were) or your clients to. (cm)

3. Accordions And Semantic Markup

How do you mark up an FAQ section? Sara Soueidan made a poll on Twitter to find out, and, well, the responses showed that everyone does it differently. The poll turned into an interesting discussion, and since some responses even changed the way she would tackle the task, Sara now summarized the different approaches in a blog post. A great example of how important semantic HTML is. (cm)

4. SVG Icon Transitions Made Easy

So you’ve got two SVG icons and want to create a transition between them? Then the Icon Transition Generator is for you. You upload your SVG icons, and the browser-based tool exports a single SVG file that includes the JavaScript code for the animation. To adjust the transition to your project’s needs, you can select the type of interaction (hover or click) and the kind of animation (scale or rotation). A great little helper! (cm)

5. Freebie: Printable Browser Sheets

Sometimes pen and paper are the most effective way to quickly sketch out and communicate an idea. To take your hand-sketched wireframes to the next level, the UX Sketchbook could be just for you. It includes 15 free, grid-based browser screens with desktop and mobile views that you can download, resize, and print out. (cm)

6. A Piece Of Front-End Wisdom

Each front-end project is a new adventure. And as you grow and gain more experience, you discover strategies and patterns that make working on even the most uncoordinated project somehow manageable.

The article “10 Things You Will Eventually Learn About JavaScript Projects” now compiles some precious tips that work with any framework, methodology and team size and that are bound to keep the need for documentation and refactoring as low as possible. Make thinks embarrassingly obvious. Fight nesting. Manage states responsibly. Wisdom shared from front-end dev to front-end dev. (cm)

7. SmashingConf New York Is Coming

Remember the good old days when front-end was easy and straightforward? Well, these days we can’t afford betting on a wrong strategy — it’s just too expensive and time-consuming. That’s why we’ll be running SmashingConf in New York next month, and will be focusing on real challenges and real front-end solutions in the real world.

SmashingConf NYC 2018 is coming — an inclusive, practical conference around front-end and UX.

We’ll dive into new challenges, solutions, and opportunities: for progressive web apps, Webpack and HTTP/2 to serverless, Vue.js and Nuxt, all the way to inclusive design, branding and machine learning. With Sarah Drasner, Sara Soueidan and many other speakers. Oh, need to convince your boss? We’ve got your back, too! (PDF, 602 KB). We’d love to see you there! (cm)

8. The Anywhere Workers

Are you working remotely? Well, you’re in good company. The trend is growing, and a new generation of workers who aren’t tied to a place or a standard 9–5 routine is here. A study conducted by AND CO takes a closer look at what it means to work remotely these days. What are the motivations behind leaving the office? How does remote work pay off financially? And what are the challenges it’s bringing along? Interesting insights guaranteed. (cm)

9. Upcoming In Smashing Membership

Smashing Membership helps us to keep the site alive and go ad-free. Each member makes a difference, and gets valuable content from it, too!

Coming up next:

🎪 We’ve been having some hiccups with SmashingConf Toronto videos but they are coming soon.
📺 Smashing TV: Webinar on variable fonts and web typography with Jason Pamental. Free for everybody: register now, password: tothemoon.

We are very grateful for the kind and generous support of 1,085 members! You can become one of us, too! ;-)

10. Upcoming Workshops With Vitaly Friedman

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:

🇪🇪 Tallinn, Estonia, UX Estonia, Sept. 26, 2018
🇭🇷 Labin, Croatia, Digitalab, Sept. 28, 2018
🇵🇹 Braga, Portugal, MirrorConf, Oct. 16–19, 2018
🇺🇸 New York, SmashingConf NY, Oct. 23 – 24, 2018

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. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!

September 18, 2018 Smashing Newsletter: Issue #214

Previous Issues