#404: Front-End Tooling

DevTools tips, fluid type scale, Terminal explained, HTML email, better mobile input and fluid CSS grid. Issue #404 • May 2, 2023 • [View in the browser]( [Smashing Newsletter]( Cagā dina Smashing Friends, What would we do without incredible front-end tooling? In today’s issue, we take a closer look at some of the little nifty helpers that can help us avoid the hassle of figuring out just the right set of values for just the right solution. We hope you find a few useful gems in there. [SmashingConf SF 2023]( Coming up on May 23–26: [SmashingConf SF 2023]( all around cutting-edge frontend. On our end, we are getting ready to dive deep into front-end and tooling, with a few lovely events coming up later this year: - [SmashingConf Front-End @ SF]( 🇺🇸 (May 23–26) all around front-end, CSS, web performance, JavaScript, Next.js and accessibility, - [Smashing Meets AI]( (free, June 20, online), a friendly get-together to discuss the challenges of AI, along with designing and building with it. - [Advanced JavaScript Masterclass]( (Aug 16–30), a roller-coaster of freshly-baked JavaScript awesomeness, with Christophe Porteneuve. In the meantime, let’s dive into some front-end tooling — from DevTools tips to fluid-type scale calculators! We hope you’ll find them useful — and we can’t wait to see you in-person or online soon! — Vitaly ([@vitalyf]( --------------------------------------------------------------- 1. Cross-Browser DevTools Tips DevTools are a developer’s best friend! And there’s so much more that they can do than what you are already using them for. [DevTools Tips]( shares useful cross-browser tips that help you leverage the power of DevTools and become more productive. [DevTools Tips]( From accessibility to CSS, performance, debugging, and web components, you can browse the tips by category or filter them by browser to see only tips relevant to you. The open-source project was started by Patrick Brosset to get developers more comfortable with DevTools by providing short, specific articles. By the way, if you have a DevTools tip you’d like to share, you can submit it on the [GitHub repository](. (cm) --------------------------------------------------------------- 2. Fluid Responsive Design Responsive experiences are usually designed around quite arbitrary breakpoints. James Gilyead and Trys Mudford offer a more fluid and systematic approach to responsive design: [Utopia](. Utopia is not a product, plugin, or framework but a way of thinking. Instead of designing for breakpoints, it aims at designing a system within which elements scale proportionally. [Utopia]( Fluid type and space scales are the base of Utopian Design. They help you keep your code minimal, streamline collaboration between designers and developers, and ensure visual consistency. On the Utopia site, you’ll find articles and a video introduction on the how and why of fluid responsive design — from a designer’s and a developer’s perspective — and a suite of free tools to support your next Utopian project. (cm) --------------------------------------------------------------- 3. Shell Commands Explained Command line can be daunting. But they don’t have to be. Whenever you have a shell command and aren’t quite sure what it does, [Explain Shell]( is here to explain it. All you need to do is paste the command line into the tool’s search bar and Explain Shell does the heavy lifting for you. [Shell Commands Explained]( To explain shell commands, Explain Shell parses man pages (it contains the entire archive of Ubuntu), extracts options, and matches each argument to the relevant help text. You can go to Explainshell.com to use the web interface or [set up a working environment]( to run the tool locally using Docker. (cm) --------------------------------------------------------------- 4. Upcoming Workshops and Conferences As you know, we run [online workshops on frontend and design]( be it accessibility, performance, or design patterns. In fact, we have a couple of front-end and design 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 a quick overview: - [Architecting Design Systems]( Workflow with Nathan Curtis. May 11–19 - [SmashingConf SF]( — May 23–26 - [The Power of Storytelling]( UX with Chiara Aliotta. May 30 – June 14 - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. June 12–26 - [Figma Workflow Masterclass]( UX with Christine Vallaure. June 15–23 - [The React Performance Masterclass]( Dev with Ivan Akulov. June 29 – July 13 - [Data Visualization Masterclass]( Dev with Amelia Wattenberger. July 4–18 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 5. Fluid Type Scale Calculator Static type scales are traditionally what you’ll find in a lot of design systems. They define a fixed font size for every viewport width. If you’re looking for a more flexible solution, CSS clamp now [makes it possible to use a fluid type scale]( instead. It consists of a baseline font size and proportionally smaller and larger font sizes. [Fluid Type Scale Calculator]( To make it easy to create fluid type scales, Aleksandr Hovhannisyan built the [Fluid Type Scale Calculator](. It generates font size variables for a fluid type scale with CSS clamp for you. All you need to do is enter a minimum and a maximum font size and viewport width, and the tool provides you with the final CSS that you can copy into your design system. A preview shows what the scale looks like when applied to different font families. (cm) --------------------------------------------------------------- 6. Modern HTML Email While the web is advancing at a fast pace, coding for email still means messing with tables, obsolete HTML elements, and other workarounds. If you are frequently tinkering with HTML email or need to take on the challenge for a project you’re working on, Oliver Williams’ article “[Modern HTML Email]( is a must-read to get you up-to-date on the current state of email. [Modern HTML Email]( In the article, Oliver takes a closer look at how a recent update for Outlook improved the situation (no more tables!), what HTML and CSS are capable of doing in email today, and the role that AMP could play to lead email into a better future. There is still a lot of room for improvement and email certainly hasn’t reached the modern world of coding yet, but things are heading into the right direction. Even if it’s only slowly. (cm) --------------------------------------------------------------- From our sponsor Help Us Inform The State Of Web Development With The 2023 Web Development Survey [Web Development Survey 2023 ]( Are you and your team building websites, online stores, or digital apps? [We want to hear from you!]( Since 2020, Netlify has been helping web development teams learn more about the global community of web teams at large, current trends, and breakthrough topics everyone is talking about! --------------------------------------------------------------- 7. Better Mobile Inputs No one likes filling out forms, especially on a small mobile screen. A little detail can make the user experience much smoother, though: the mobile input. Alex Holachek built a handy tool to help you properly configure key input attributes and make your forms easier to use on mobile devices. [Better Mobile Inputs]( “[Build A Better Mobile Input]( lets you experiment with different combinations of type, inputmode, and autocomplete attributes. You can select the attributes from a list, and the tool shows you a preview of what the configuration will look like on your user’s mobile keyboard, whether they use an iOS or Android device. (cm) --------------------------------------------------------------- 8. Fancy Border Radius Generator When we talk about border-radius, the idea of using it to slightly round the corners on an image or a button is probably the first that will come to your mind. As it turns out, border-radius can also be used for something a bit more fancy. With only [eight values]( it’s possible to create organic shapes. The [Fancy-Border-Radius]( generator makes it easy. [Fancy-Border-Radius]( The generator comes in two versions: a [simple version]( and a version with [eight-point full control](. Both have in common that you can manipulate a default shape by dragging the handles until you get the organic shape you want. The border-radius code will update in real-time. If prefer to run it locally, the generator is also available as a [CLI tool](. (cm) --------------------------------------------------------------- 9. New On Smashing Job Board - [Visual Designer]( at UCLA (Los Angeles / New York / Remote) - [Wordpress/PHP Developer]( at Razorbraille (Toronto) - [Design System Specialist]( at InVision AG (Düsseldorf, Germany) --------------------------------------------------------------- 10. Recent Smashing Articles - [How To Use AI Tools To Skyrocket Your Programming Productivity]( - [The Safest Way To Hide Your API Keys When Using React]( - [Learning JavaScript With Imagination]( - [The Growing Need For Effective Password Management]( - [Smashing Podcast Episode 60 With Mei Zhang: How Do You Design A Design Process?]( - [Read more 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](