August 23, 2022 Smashing Newsletter: Issue #367
This newsletter issue was sent out to 222,965 subscribers on Tuesday, August 23, 2022.
Editorial
Who doesn’t like good little JavaScript helpers? Or a simple routine to build out quite complicated things with a single Terminal command? In this newsletter, we explore just that — a few useful front-end techniques that might help you get better, and faster at your work.
Also, we are just starting with our Smashing Meets Data Visualization, a little friendly community gathering with sessions on everything data visualization. The first sessions will be starting at 5PM CET / 8AM Pacific.
SmashingConf Freiburg is back, on Sep 5–7, 2022, in-person and online. We're coming to New York, too! ;-)
Beyond that, we have just a handful of our last tickets for SmashingConf Freiburg early September, and just a few final seats for the live UX training. We’d love to see you there! :-)
— Vitaly (@vitalyf)
1. Frustration-Free HTML Email Workflow
If you’ve ever tried to build an HTML email from scratch, you know that it’s quite an adventure. An adventure that requires you to forget about all the modern techniques you usually use to build things for the web and revert to the good old <table> tags. However, even if you thoroughly test your emails, you might still encounter rendering bugs. Frustrated by the status quo of HTML email, Josh W. Comeau decided to build a new, fuss-free HTML email workflow.
Josh had high demands on the new system: it should not only be compatible with all popular email clients, but Josh also wanted to automate the generation of the raw HTML so that he could compose individual emails in a Markdown-like syntax. He also wanted it to support custom components that could be reused across emails, and each email should produce a web version at a unique URL.
Sounds too good to be true? Well, Josh came up with a workflow that meets all these requirements and makes writing new emails as easy as writing a blog post. If you want to implement a similar system, Josh summarized some valuable insights into his approach. (cm)
2. Open-Source Storytelling Libraries
Building easy-to-use tools that push online journalism into new spaces is the mission of Knight Lab, a community of designers, developers, students, and educators at Northwestern University. To help everyone create better stories, their suite of JavaScript libraries is open-source, adaptable, and lightweight.
The most popular tool in the suite is TimelineJS. Available in more than sixty languages, it has been used by more than 250,000 people to build interactive timelines based on Google spreadsheets.
The other tools in the suite are just as promising: JuxtaposeJS helps you create frame comparisons to compare two images, Scene VR turns your collection of VR-ready photos into navigable scenes to create 360° narratives, and SoundciteJS lets you add inline audio to your story. StorylineJS enables you to build an annotated, interactive line chart, and, last but not least, there’s StoryMapJS, a free tool to help you highlight the locations of a series of events. A powerful collection. (cm)
3. Handy Wrapper For Array And Object
If you’re looking for a handy little helper to simplify working with data, collect.js has got you covered. Created by Daniel Eckermann, collect.js is a convenient and dependency-free wrapper for working with arrays and objects.
Collect.js will come in particularly handy for everyday tasks like looping through your items, mapping, and sorting, especially when working with both arrays and objects. If you need custom methods or want to extend its existing capabilities, collect.js can be extended using macros. You can install collect.js using NPM or Yarn, add it via a CDN, or download the minified version. (cm)
4. Upcoming Online Workshops
We keep running online workshops on frontend and design, be it accessibility, performance, navigation, or landing pages. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s an overview of our upcoming workshops:
- Live Interface Design Patterns UX Training UX
with Vitaly Friedman. Sep 9 – Oct 7 - Designing Better UX With Top Tasks Workflow
with Gerry McGovern. Sept 13–27 - Designing Better Products Masterclass UX
with Stéphanie Walter. Sept 21 – Oct 5 - Architecting Design Systems Workflow
with Nathan Curtis. Oct 6–14 - Optimistic UI Masterclass Dev
with Zell Liew. Oct 6–14 - Designing for Emotion Masterclass UX
with Aarron Walter. Oct 17–18 - Smart Interface Design Patterns UX
9h-video course on interface design with Vitaly Friedman
5. View and Analyze Repo Trends
The average time it takes to close issues and pull requests is an indicator of the health of an open-source repository. A quick and easy solution to view and analyze trends in repositories comes from Steven Sanders: Repo Trends.
To learn more about a repository, enter its name, and Repo Trends will provide you with the most important stats: the total number of open issues and pull requests over time, the average number of new issues and pull requests per month, as well as the average time to close them. A great little helper to give you a complete overview of the state of things without having to dig through the repo’s history yourself. (cm)
6. Animated Terminal Code Samples
Do you want to create a code sample in the terminal interface? To embed it in a blog post or a README file, for example? Recording a screen capture of your terminal and converting it to a GIF is time-consuming, and the quality of the converted GIF is often not ideal either. Muhammed İkinci’s Terminal Gif Maker is here to change that.
Instead of recording your terminal and then converting the recording to a GIF, Terminal Gif Maker lets you create animated terminal code samples with just a few clicks, right in the browser.
You can add your commands and arrange how everything should look in the terminal — add a typing animation for certain lines or make them appear at once and decide how much time shall pass until the next line appears. There are also options to customize the font and its size, as well as the timeout. Once you’re happy with the result, you can export your sample to a GIF with just one click. Clever! (cm)
7. Fine-Grained CSS Transforms
You’ve probably used the CSS transform property to apply transforms to an element before. But have you heard of the translate, rotate, and scale properties already? They give you even better control over CSS transforms. Bramus and L. David Baron take a closer look at the properties and how they make dealing with animations easier.
To implement an animation using transform, you’d have to calculate all in-between values for all defined transformations, and include those in each keyframe. Now, instead of dragging all transformations from keyframe to keyframe, you can use translate, rotate, and scale to target each transform individually, without calculating all those in-between values.
You can even split up each sub-animation in its own set of keyframes to make your code modular. translate , rotate, and scale are supported in Chrome, Firefox, Safari, and Edge. (cm)
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.