Smashing Newsletter: Issue #241

Editorial

Last week, I realized that I’ve been Editor-in-Chief of Smashing Magazine for two years. It’s gone fast, but it also seems like I’ve been part of the furniture forever. I’m really proud of the content we’ve produced over those two years — with the help of the whole team — and I’m excited about building on that in the next year.

The closing weeks of the year tend to feel a little introspective for me. Conference season winds down, my travel slows down, and here at Smashing we’ve just run our final event of the year. It’s a great time to think over how things have gone in the past year personally, and for the teams and projects we work with. Then we can be ready to make those New Year Resolutions, or set our 2020 goals in the New Year.

I thought I’d share a couple of books that I’ve read this year and found useful in terms of setting goals and managing time across a lot of different projects and responsibilities. The first is “Free To Focus” by Michael Hyatt. I’ve been a longtime advocate of the Getting Things Done (GTD) methodology; Hyatt’s approach works really well with that in terms of helping to understand which things you should be focusing on, rather than filling your days with busywork.

The second book is “Atomic Habits” by James Clear. This book presents a framework for small improvements by making tiny changes that build up to something big over time — in any area of your life. Keep in mind that becoming more efficient and improving things should never be seen as just making more time for work. What it should do is let you get that work out of the way and free up time to do the other things you want to do. For me, that’s usually going for a very long run!

Happy reading!
— Rachel (@rachelandrew)

Exporting HTML To Photoshop, Sketch And Figma
Simple And Performant React Form Validation
Free Services For Developers
Real-Time Visualization Of Tokyo’s Public Transport
Freebie: Mix-And-Match Illustrations
Git Command Cheatsheet
Vintage Science And Tech Ads
A Playground For Tinkering With Design Systems
50 Years Of Unix: Test Your Skills
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. Exporting HTML To Photoshop, Sketch And Figma

What if you have an existing prototype working in the browser, yet you’d love to refine the design without spending too much time fiddling with HTML and CSS in DevTools? Luckily, there are tools that can help you to achieve just that.

For example, VisBug Chrome Extension allows you to hover spacing, distance, accessibility and alignment, edit text, replace images and move elements on the canvas. Beyond that, you could use PageLayers to export div’s from HTML/CSS into Photoshop layers, and HTML-Sketch-App to import into Sketch or HTML-to-Figma to import into Figma. Just keep in mind to have 1:1-mapping between the names of layers in your design tool and the class names in your HTML markup. Happy experimenting! (vf)

2. Simple And Performant React Form Validation

Form validation should be much simpler. That’s the idea behind React Hook Form. The library helps you create performant, flexible, and extensible forms with easy-to-use validation.

React Hook Form leverages the existing markup and validates your forms with a constraint-based validation API. To provide the best user experience and give your form a performance boost, it minimizes the number of pre-renders and speeds up mounting. There are no dependencies involved and, since the form state is inherently local, it can be adopted easily, too. Promising! (cm)

3. Free Services For Developers

So many services out there offer free tiers, but they can be hard to find. Free For Developers wants to change that and lists software and other services that have free tiers for developers.

The services included in the list are particularly interesting for System Administrators, DevOps Practitioners, and other infrastructure developers and cover everything from cloud providers and source code repos to testing, log management, payment integration, and a lot more. More than 500 people have contributed to this community project and you are welcome to submit your findings, too, of course. A handy resource for the bookmarks. (cm)

4. Real-Time Visualization Of Tokyo’s Public Transport

A stunning 3D data visualization project comes from Akihiko Kusanagi: Mini Tokyo 3D displays Tokyo’s public transport system on a map in realtime.

You can follow along Tokyo’s trains moving through the city, with information on the train line, train number, next and previous stops, and possible delays. The data for this mammoth project is sourced from Open Data Challenge for Public Transportation in Tokyo which promotes the openness of public transportation data. Their aim is to make public transportation (which is considered to be the world’s most complicated) easier to navigate. Inspiring! (cm)

5. Freebie: Mix-And-Match Illustrations

Illustrations are a fantastic way to breathe some life into a project. But not all of us have the skills to create them ourselves or the time or the budget to hire an illustrator. For these occasions, the mix-and-match illustration library which Leni Kauffman created, might come in handy.

Fresh Folk lets you combine poses, outfits, and skin tones into different characters. The library also includes background elements (e.g., tables, seating, lamps, plants) to create different settings — from office spaces to nature scenes. Free for personal and commercial projects. (cm)

6. Git Command Cheatsheet

Do you know your git commands? While you probably know the most common ones by heart, there are always those commands that are easily forgotten because you don’t need them often. A concise refresher now comes from Rainer Selvet.

Described as a “dead simple git cheatsheet” by its creator, GitSheet lists git commands and what they do by topic. A nifty little feature: You can copy a command to your clipboard with just a click. Simple yet effective. (cm)

7. Vintage Science And Tech Ads

If you’ve got a sweet spot for vintage graphic design, here’s a very special goodie for you: a Flickr album with more than 1,400 science and tech ads from the 1950s and 60s.

The ads come from various science and tech magazines and are great examples of the modernist mid-century aesthetic — and a fascinating journey back to the times when the foundations of the technologies we take for granted today were being laid. Eye candy! (cm)

8. A Playground For Tinkering With Design Systems

You’re about to build a design system but don’t really know where or how to begin? Well, the Design System Playground might be a great place to get started.

The playground offers a lot of room to tinker with different font and color combinations and, once you’re happy with your choices, it generates a design system that you can export and use in your projects right away. If the visual direction of your design isn’t clear yet, there’s also the option to use a preset theme or random choices to build upon. (cm)

9. 50 Years Of Unix: Test Your Skills

50 years ago, computer scientists Ken Thompson and Dennis Ritchie created the first implementation of Unix. What was designed as an economical operating system at that time heavily influenced the computing industry and modern operating systems such as Android, MacOS, and Linux.

One of the great innovations of Unix were added to the system in 1973: pipes. Thanks to Unix pipes programmers were able to compose larger programs from smaller utility programs. Want to give it a try? The Unix Game gives you coding challenges which you need to solve by constructing “pipelines” of Unix text-processing utilities to compute the solution. Now, can you make it to the leaderboard? (cm)

10. Upcoming In Smashing Membership

Starting from November, we are looking into a slightly more interactive format. We’ll try to broadcast webinars live, and we kindly invite you to submit your questions or actual mock-ups of your work in the Membership channel (#tv), so our speakers can review and provide feedback to your current projects — live!

We’ll test the waters over the next couple of weeks, and we’ll see how it goes then! It might be worth joining the Membership family after all! ;-)

Here’s the list of new webinars coming up soon:

“Selling Design Systems” with Ben Callahan
Oct 29 at 17:00 Berlin time
“Building A CSS Layout, Live” with Rachel Andrew
Nov 5 at 19:00 Berlin time
“Building Effective Cross-Cultural Teams” with Emma Wedekind
Nov 12 at 16:00 Berlin time

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

11. Our Next 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:

🇮🇱 UX Salon (Nov. 13–14) in Jerusalem/Haifa, Israel.
🇱🇹 UX Salon (Nov. 19) in Vilnius, Lithuania.
🇮🇹 Speaking Of (Nov. 28-29) in Milano, Italy.

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. Get in touch — it’s that easy! (vf)

October 29, 2019 Smashing Newsletter: Issue #241

Previous Issues