#321: Little Front-End Helpers and Resources

With useful little helpers and resources for front-end developers. Issue #321 • October 5, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Ahoy Smashing Friends, What are some of the most useful little tools and resources that you’ve discovered recently? Perhaps a little Terminal helper that makes completing tasks a bit faster, or a tool that syncs color themes for your dev environment? In this newsletter issue, we highlight some of these useful little helpers for front-end developers. From Git command references to color palettes generated by a Twitter bot — we hope you’ll find some useful gems in there. On the Smashing side of things, we’ve just announced [new front-end and UX online workshops]( on interface design, CSS, accessibility, Next.js and design systems. Now with [friendly tickets bundles for teams](. We’d love to see you there! :-) — Vitaly ([@smashingmag]( --------------------------------------------------------------- 1. A Learning Path To Improve Your Skills When you’re just starting out in web development, things can feel overwhelming. There’s so much to learn and even more learning resources to help you with that — but where to begin? To help you decide, front-end developer Andreas Mehlsen created a [visual overview of useful skills to learn as a web developer]( arranged in chronological order, so that you can follow along the recommended learning path or jump around freely if you prefer. [Web Skills]( The skills range from the fundamentals of HTML, CSS, JavaScript, and the browser to topics like accessibility, web components, progressive web apps, algorithms, data structures, and servers. Links to articles and videos to each topic provide you with the perfect base to get started. For beginners and advanced web developers who are hungry to learn more. (cm) --------------------------------------------------------------- 2. Finding Git Commands Made Easy Do you know the git command to commit all staged changes? Or the one to compare two commits and output the result to a file? And what about the command that lets you clone an existing repo along with submodules into the current directory? No worries if you don’t know the answers right off the bat, [Git Command Explorer]( is here to step in. [Git Command Explorer]( Designed to help you find the git commands you need without spending a lot of time digging through the web, Git Command Explorer uses a simple dropdown system that makes your search for the right command more efficient. Just select what you want to do from the dropdowns, and the tool provides you with the code snippet which you can copy and paste right away. One for the bookmarks. (cm) --------------------------------------------------------------- 3. A Terminal UI For Git Commands Git is super powerful, but often it seems that a lot of rather simple tasks can be unnecessarily hard to do. Interactive rebasing that requires you to edit a TODO file in your editor, for example. Or using a command line program to stage a part of a file. Frustrated by things like these, Jesse Duffield built [lazygit](. [Lazygit]( lazygit is a simple terminal UI for Git commands that makes completing tasks a lot faster and more straightforward — no matter if it’s staging lines, amending old commits, stashing selected files, fixing merge conflicts, or checking out of a branch without stashing changes. A handy little helper. (cm) --------------------------------------------------------------- 4. Upcoming Front-End & UX Workshops You might have heard it: we run [online workshops around front-end 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]( Front-end and design can sometimes feel like you’re riding some pretty wild waves! We’ve got your back with [personal and inclusive events](. As always, here’s an overview of our [upcoming workshops]( - [Level Up With Modern CSS]( DEV with Stephanie Eckles. Oct 5–20. - [Smart Interface Design Patterns, 2022 Edition]( UX with Vitaly Friedman. October 25 – November 8. - [Behavioral Design]( Design with Susan and Guthrie Weinschenk. November 3–17. - [Deep Dive On Accessibility Testing]( Dev with Manuel Matuzović. November 4–18. - [Jump to all online workshops →]( --------------------------------------------------------------- 5. Create .gitignore Files With Ease A .gitignore file in your repository’s root directory tells Git which files and directories to ignore when you make a commit. If you’re looking for an easy way to create such a file, [gitignore.io]( has got you covered. [Gitignore]( The site features UI/CLI options for creating a .gitignore for your operating system, programming language, or IDE. Let’s say you’re on a Mac and want to ignore Node files in your Node.js application, for example. Just enter “Node” and “macOS” inside the search bar, and the site will create a template file that ignores macOS and Node.js files. Alternatively, you can copy the shell command to create an alias for your terminal and create the file right there. Nice! (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- 6. Sync Color Themes For Your Dev Environment Have you ever wished for a consistent color theme across your entire development environment? One that you feel is pleasant for the eyes and that stays the same as you switch from your code editor to the terminal across to Slack? [Themer]( helps you achieve just that. [Themer]( Themer takes a set of colors and generates themes based on them. You can either start with a pre-built color set or create one from scratch by entering two main shades for background color and foreground text and accent colors for syntax highlighting, errors, warnings, and success messages. Once you’re happy with the result, the theme is ready to be used in your text editor, terminal, in Slack, Alfred, Chrome, Prism, and other tools right away. And if you want to make your perfectly color-coordinated setup complete, you can download matching wallpapers, too. (cm) --------------------------------------------------------------- 7. A Friendly Twitter Bot That Creates Color Palettes Color inspiration lies everywhere. Sometimes even in an image somebody included in a tweet. For those occasions, [Color Parrot]( is your new best friend. Just mention the Twitter bot in a reply, and it will respond to you with a color palette for the image. [Color Parrot]( When asking Color Parrot for help, you can specify the number of colors you’d like to get from the bot. Just include the number in your tweet. “@color_parrot what are those colors? I need 6 of them.”, for example. The story behind the bot is an interesting one, too, by the way: [David Aerne]( its creator, is maintaining an open-source list of color names that is used by many apps and websites. To measure, what names are better than others, he collects the likes and reactions to each color. So by using the bot, you are actively contributing to the open-source project. Win-win. (cm) --------------------------------------------------------------- #8. New On Smashing Job Board - [Sr. Digital Project Manager]( at netamorphosis (Remote USA; New York, NY) - [Senior WordPress/PHP Developer]( at 3 Media Web (Remote) - [Software Engineer - Front End]( at D2IQ (Germany, UK) --------------------------------------------------------------- #9. Recent Smashing Articles - [How To Build An Expandable Accessible Gallery]( - [How To Implement Search Functionality In Your Nuxt App Using Algolia InstantSearch]( - [A Time Of Transition (October 2021 Desktop Wallpapers Edition)]( - [Using Modern Image Formats: AVIF And WebP]( - [Improving The Accessibility Of Your Markdown]( --------------------------------------------------------------- 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](