OB电竞网站app下载
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
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)
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)
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)
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
:
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)
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)
You’ve probably used the CSS
To implement an animation using
You can even
split up each sub-animation
in its own set of keyframes to make your code modular.
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).
Useful
front-end & UX bits
, delivered once a week. Subscribe and get the
Smart Interface Design Checklists PDF
— in your inbox. 🎁
Looking for older issues?
Drop us an email
and we’ll happily share them with you. Would be quite a hassle searching and clicking through them here anyway.
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
.
2. Open-Source Storytelling Libraries
3. Handy Wrapper For Array And Object
4. Upcoming Online Workshops
with Vitaly Friedman. Sep 9 – Oct 7
with Gerry McGovern. Sept 13–27
with Stéphanie Walter. Sept 21 – Oct 5
with Nathan Curtis. Oct 6–14
with Zell Liew. Oct 6–14
with Aarron Walter. Oct 17–18
8h-video course on interface design with Vitaly Friedman
5. View and Analyze Repo Trends
6. Animated Terminal Code Samples
7. Fine-Grained CSS Transforms
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.
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.
translate
,
rotate
, and
scale
are supported in Chrome, Firefox, Safari, and Edge.
(cm)
That’s All, Folks!
Smashing Newsletter
You can always unsubscribe with just one click.
Previous Issues