Smashing Newsletter: Issue #321

Editorial

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.

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.

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 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 Events — 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.

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)

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 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.

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)

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).

October 5, 2021 Smashing Newsletter: Issue #321

Previous Issues