#367: Front-End Helpers

Little helpers for JavaScript and CSS, with a few tools for HTML email workflow and interactive timelines.Issue #367• August 23, 2022 • [View in the browser]( 💨 [Smashing Newsletter]( Yasou Smashing Friends, 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. [Smashing Meets: Data Visualization]( 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]( [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 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. [My Wonderful 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. [TimelineJS]( 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]( 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. [Smashing Online Workshops]( With [online workshops]( we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are. 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 7h-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](. [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. [Terminal Gif Maker]( 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) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS in Information Design and Strategy [Northwestern’s Online MS in Information Design and Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more](. --------------------------------------------------------------- 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) --------------------------------------------------------------- 8. New On Smashing Job Board - [UI Developer]( at Integrated Data Services (Remote) - [Java Developer]( at Integrated Data Services (Remote) - [Software Engineer]( at Vestcom (Remote) --------------------------------------------------------------- 9. Recent Smashing Articles - [What Makes A Great Toggle Button? (Case Study, Part 1)]( - [Implementing A Reset Password Feature With Next.js Dynamic Routes]( - [An Introduction To Context Propagation In JavaScript]( - [Designing A Better Back Button UX]( - [Everything Developers Must Know About Figma]( - [Read more articles on Smashing Magazine →]( --------------------------------------------------------------- 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). Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](

No.	Font Name
Subscribe Now