Smashing Newsletter #214: Respect, Font Loading and Accordions

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.Issue #214 • Tue, Sept 11, 2018 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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. [Smashing Book 6 Is Here: New Frontiers In Web Design]( 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]() --------------------------------------------------------------- Table of Contents 1. [The Font Loading Checklist](#a1) 2. [Getting A Website Live 101](#a2) 3. [Accordions And Semantic Markup](#a3) 4. [SVG Icon Transitions Made Easy](#a4) 5. [Freebie: Printable Browser Sheets](#a5) 6. [A Piece Of Front-End Wisdom](#a6) 7. [SmashingConf New York Is Coming](#a7) 8. [The Anywhere Workers](#a8) 9. [Upcoming In Smashing Membership](#a9) 10. [Upcoming Smashing Workshops](#a10) 11. [New On Smashing Job Board](#a11) 12. [Popular Articles This Month](#a12) --------------------------------------------------------------- #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) [The Font Loading Checklist]( --------------------------------------------------------------- #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. [Helping a Beginner Understand Getting A Website Live]( 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) --------------------------------------------------------------- From our sponsor Amazing Data Visualizations Without Coding [Qlik Branch Playground]( is a sandbox environment that lets you play around with complex data sets and test your reactive application and visualization ideas — without the hassle of queries. Giving you direct access to Qlik’s Associative Engine, you can easily visualize and interact with your data right in your browser. And backed by a community that’s ready to help you get started, it works with any stack, architecture or platform. So, ready to skip the boring tasks like writing queries and creating tables? Ready to explore the data-driven projects of your dreams? Come play at [developer.qlik.com](! [Qlik Playground]( --------------------------------------------------------------- #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) [How do you mark up an accordion?]( --------------------------------------------------------------- #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) [Icon Transition Generator]( --------------------------------------------------------------- From our sponsor 370+ Pre-built Websites With A One-click Installation [Be Theme]( comes with more than 370 pre-built websites. You can select a pre-built website that will work for you in minutes, and install it with a single click. [Check them out →]( [BeTheme]( --------------------------------------------------------------- #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) [UX Sketchbook]( --------------------------------------------------------------- #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. [Front-End Wisdom]( 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 (Oct 23-24) 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. [New York October 23-24 with Debbie Millman and Tim Kadlec, and many others!]( [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) --------------------------------------------------------------- From our sponsor Online Masters in Information Design and Strategy [Ad]( Earn your master’s degree [online](. --------------------------------------------------------------- #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) [Anywhere Workers]( --------------------------------------------------------------- #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 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: 🇪🇪 Tallinn, Estonia, [UX Estonia](, Sep. 26, 2018 🇭🇷 Labin, Croatia, [Digitalab](, Sep. 28, 2018 🇵🇹 Braga, Portugal, [MirrorConf](, Oct. 16–19, 2018 🇺🇸 New York, [SmashingConf NY](, Oct. 23 – 24, 2018 [New Front-End Adventures in Responsive Design Workshop]( 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! --------------------------------------------------------------- #11. New On Smashing Job Board - [System Engineer]( at [Centene]( (Sacramento, CA) “As System Engineer, you provide operational and technical support to ensure the ongoing stability to the server environments. You also contribute to the IT infrastructure design and leading in server implementations.” - [Java Developer]( at [Centene]( (Sacramento, CA) “As Java Developer, you design, build, test and maintain scalable and stable off the shelf applications or custom built technology solutions to meet business needs.” - [C#/.NET Developer]( at [Centene]( (Sacramento, CA) “In this position, you participate and contribute in the entire implementation process for new applications and enhancements to existing applications.” --------------------------------------------------------------- #12. Popular Articles This Month - [The Importance Of Manual Accessibility Testing]( Automated accessibility tests are a great resource to have, but they can’t automatically make your site accessible. Use them as one step of a larger testing process. - [Introduction To Animation And The iMessage App Store With Shruggie]( Learn about the basics of animation in After Effects by animating one of the most famous type characters and the state of the iMessage App Store in 2018 when it comes to stickers. - [Easy And Fun Methods For Your Prototypes]( When you work with prototypes and want them to be more interactive, functions like Fixed Elements And Overlays will be very helpful. This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Vitaly Friedman, Markus Seyfferth 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]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](