Smashing Newsletter: Issue #295

Editorial

Imagine that you’re working your way through your ambitious to-do list on a lovely Tuesday afternoon. You squish long overdue bugs left and right; your pending PRs get merged one after another; and you even have the time to refactor that legacy component that needed fixing forever!

Now what if in this very moment the spinning wheel makes its appearance, or your text editor crashes, or you just spill your coffee over your keyboard. All these things can turn a productive flow into a frustrating developer’s experience, slowing you down, and making you focus on things that distract you from your actual work.

In this newsletter issue, we look into some little helpers to make you feel more comfortable in your workspace. And a few tools to get annoying things out of the way, so you can feel like home when you code.

Ah, just a friendly reminder: we have a couple of friendly and truly smashing online workshops on front-end & UX on web performance, design patterns, psychology, design systems, React and CSS. We’d be humbled to welcome you there.

Also, join our upcoming free Smashing online meet-up with a friendly community that appreciates kind and hard-working people like yourself, and wants to learn together with you, live.

Stay smashing, everyone!
— Vitaly (@smashingmag)

1. From GitHub To VS Code, In One Second

Once you’ve discovered a snippet of code on GitHub, what if you want to start working with it in your project immediately? Instead of cloning the repo and finding that file that you need, you can use Github1s. Just add 1s after github in the URL, press Enter, and the repo, or a single file, will open straight in VS Code.

You can also use a bookmarklet to quickly switch between github.com and github1s.com, access private repositories and there are plenty of browser extensions that are listed on the project page as well. If you need an alternative, Gitpod is a slightly more advanced option, which also allows you to start an online development environment, run parallel workspaces and work on the codebase collaboratively. (vf)

2. Autocomplete For The Terminal

How often do you have to find just the right directory with ls in your Terminal? How often do you forget just the right flag for a git operation? Or perhaps you just get lost in the scripts/ folder a bit more often than you’d love to. Fig provides VSCode-style autocomplete to your existing Terminal, along with hints and suggestions for your commands.

The tool works only on MacOS for now, supporting iTerm, the native MacOS Terminal app, Hyper and the integrated terminal in VSCode. The best part is that everyone can add support to their own favorite CLI tool, and you can specify just the completion spec you need for your work. The tool is currently in private beta, but baches of new users are invited every week.

If you don’t feel like waiting, of course, there is also oh my zsh (Linux, Windows, Mac), with plenty of helpers, plugins and themes to improve your CLI experience. Also, take a look at some useful plugins and improved setup, ranging from better syntax highlighting to listing contents of directories in tree-like format. And if you want to just understand your Terminal better, DashDash features a lovely Terminal documentation, presented beautifully. (vf)

3. Adding Tags To Files In Your Editor

In large projects, finding one specific variant of a component, or just the right file requires you to know the file that you are actually looking for. But what if you could add bookmarks or labels to specific files, so you could find them faster?

File Ops VS Code Extension allows you to tag and alias files, and then quickly switch between them. You can also quickly list all tags just in case you lose track of them, view all files from the current directory and switch between .css and .js files in the same folder. You can also take a look at the video explaining how it all works. Now that will come in handy! (vf)

4. Upcoming Front-End & UX Workshops

We’ve run over 30 online workshops so far, with over 2750 attendees joining our workshops. We’ve learned how important and useful a comfortable environment is, and we know how to run a smooth workshop where everyone has time to take in all the content and ask all the questions.

We’ve rolled out a full workshops schedule for the next months, ranging from web performance to interface design. There are still some early-bird-tickets left, with a lil’ friendly discount. We’d be happy and humbled to see you there as well.

5. 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. (vf)

6. Pets For Your VS Code

Ever wanted to pep up your VS code editor? Well, how about adding a cat, dog, snake, rubber duck or even good ol’ Clippy? All you need to do is install vscode-pets and run the vscode-pets.start command in order to see the panel. Once you’ve chosen a pet, its fur color and size, lean back and watch them interact with you!

From throwing a ball and playing catch with your pet (run vscode-pets.throw-ball) to adding additional pets (run vscode-pets.spawn-pet), you’re coding workflow is bound to be anything but boring! The creator, Anthony Shaw, is open for ideas and discussion and welcomes feedback anytime. (il)

7. Your Little Battery Buddy

Simple things matter. Take a closer look at the charger icon in the right upper corner of your desktop machine. Could it also be a little creature that would become happier once it’s fully charged? Battery Buddy is just like a default battery indicator in your menu bar, but cute.

Created by Neil Sardesai, it does only one thing, but it does so nicely and politely. Now all of a sudden it’s worth exploring what happens with the buddy when the battery is low. Let’s see if we’ll find out soon enough. The little app requires macOS 11.0 or newer to work. Happy charging! (vf)

April 6, 2021 Smashing Newsletter: Issue #295

Previous Issues