Newsletter Subject

#367: Front-End Helpers

From

smashingmagazine.com

Email Address

newsletter@smashingmagazine.com

Sent On

Tue, Aug 23, 2022 03:06 PM

Email Preheader Text

Little helpers for JavaScript and CSS, with a few tools for HTML email workflow and interactive time

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](

Marketing emails from smashingmagazine.com

View More
Sent On

01/10/2024

Sent On

24/09/2024

Sent On

17/09/2024

Sent On

10/09/2024

Sent On

03/09/2024

Sent On

27/08/2024

Email Content Statistics

Subscribe Now

Subject Line Length

Data shows that subject lines with 6 to 10 words generated 21 percent higher open rate.

Subscribe Now

Average in this category

Subscribe Now

Number of Words

The more words in the content, the more time the user will need to spend reading. Get straight to the point with catchy short phrases and interesting photos and graphics.

Subscribe Now

Average in this category

Subscribe Now

Number of Images

More images or large images might cause the email to load slower. Aim for a balance of words and images.

Subscribe Now

Average in this category

Subscribe Now

Time to Read

Longer reading time requires more attention and patience from users. Aim for short phrases and catchy keywords.

Subscribe Now

Average in this category

Subscribe Now

Predicted open rate

Subscribe Now

Spam Score

Spam score is determined by a large number of checks performed on the content of the email. For the best delivery results, it is advised to lower your spam score as much as possible.

Subscribe Now

Flesch reading score

Flesch reading score measures how complex a text is. The lower the score, the more difficult the text is to read. The Flesch readability score uses the average length of your sentences (measured by the number of words) and the average number of syllables per word in an equation to calculate the reading ease. Text with a very high Flesch reading ease score (about 100) is straightforward and easy to read, with short sentences and no words of more than two syllables. Usually, a reading ease score of 60-70 is considered acceptable/normal for web copy.

Subscribe Now

Technologies

What powers this email? Every email we receive is parsed to determine the sending ESP and any additional email technologies used.

Subscribe Now

Email Size (not include images)

Font Used

No. Font Name
Subscribe Now

Copyright © 2019–2025 SimilarMail.