Smashing Newsletter #241: Cheatsheets, Vintage Science and Playgrounds For Tinkering

On how to export from HTML to PSD, Sketch and Figma, Git cheatsheet and freebie illustrations. Issue #241 • Tue, Oct. 29, 2019 • [View in the browser]( 💨 [Smashing Newsletter]( Dear Friend, 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]( --------------------------------------------------------------- Table of Contents 1. [Exporting HTML To Photoshop, Sketch And Figma](#a1) 2. [Simple And Performant React Form Validation](#a2) 3. [Free Services For Developers](#a3) 4. [Real-Time Visualization Of Tokyo’s Public Transport](#a4) 5. [Freebie: Mix-And-Match Illustrations](#a5) 6. [Git Command Cheatsheet](#a6) 7. [Vintage Science And Tech Ads](#a7) 8. [A Playground For Tinkering With Design Systems](#a8) 9. [50 Years Of Unix: Test Your Skills](#a9) 10. [Upcoming In Smashing Membership](#a10) 11. [New On Smashing Job Board](#a11) 12. [Our Next Smashing Workshops](#a12) 13. [Our Most Popular Articles](#a13) --------------------------------------------------------------- #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. [Exporting HTML To Photoshop, Sketch And Figma]( 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]( 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. [Free 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) --------------------------------------------------------------- From our sponsor Grow your agency with DigitalOcean See why web development agencies love hosting client apps & sites on DigitalOcean’s cloud platform. They make it simple to deploy and manage your clients’ infrastructure. Save time, resources, and headaches while passing the value onto your clients. [Try out DigitalOcean]( with a $50 credit for agencies today! [Grow your agency with DigitalOcean]( --------------------------------------------------------------- #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. [Mini Tokyo 3D]( 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]( [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. [GitSheet]( 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) --------------------------------------------------------------- From our sponsor Online Masters in Information Design and Strategy [Online Masters in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #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. [Science and Tech Ads]( 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. [Design System Playground]( 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. [The Unix Game]( 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. New On Smashing Job Board - [Senior Product Designer]( at Buildkite (Remote) “As a Senior Product Designer at Buildkite you’ll work on a small team with a big impact, and help shape a tool that thousands of developers use every day.” - [Freelance UX & UI Mentoring (EU & EU Adjacent Timezones)]( at CareerFoundry (Remote) “We are looking for experienced and passionate UX and UI designers in EU adjacent time zones to join our pool of experts and help define the next generation of design talent by educating and empowering students across the globe.” - [PHP Developer]( at All 4 Kids (Atlanta, Georgia) “We are are a seasonal, local Atlanta based business looking for a part time, back end programmer who is proficient in PHP, MySQL, .Net to take over the programming and ongoing support for our website and stand alone POS.” --------------------------------------------------------------- #12. 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. [SmashingConf Workshops]( 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) --------------------------------------------------------------- #13. Our Most Popular Articles - [A Guide To Optimizing Images For Mobile]( You want to build a mobile website or PWA that converts visitors into leads or customers. But with Google and consumers alike becoming ever more demanding when it comes to loading speeds, what more can you do? ImageKit, a digital image optimization service, might have the all-in-one hands-off solution you need. - [Speed Up Your Website With WebP]( Images are a big part of the web and, yet, they can cause a lot of challenges for the user experience if not properly optimized or delivered. It’s been almost a decade since Google introduced the world to WebP as a solution to this problem. It’s time that web designers started adopting it as their default image format. - [Great Expectations: Using Story Principles To Anticipate What Your User Expects]( When someone reads a story, they have certain expectations about how that story will unfold whether they know how to articulate them or not. The same is true about users coming to our websites. We can pull principles from storytelling to help us meet and, hopefully, exceed those user expectations. --------------------------------------------------------------- This newsletter issue was written and researched by Cosima Mielke, Iris Lješnjanin, Rachel Andrew, Vitaly Friedman and Christiane Rosenberger. Sent to truly [smashing]( readers via [Mailchimp](. We sincerely appreciate your kind support. You rock. [Follow us on Twitter]( • [Join us on Facebook]( --------------------------------------------------------------- With useful tips for web devs. Sent 2× a month. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](