Smashing Newsletter #295: Boosting Your Coding Workspace

With tools for a better command line, text editor, finding git commands and pets for your VS Code. Issue #295 Tue, April 6, 2021 View in the browser 💨

Smashing Newsletter

Ahoj Smashing Friends,

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.

Smashing Online Workshops
Just a friendly and smart attendee of smashing online workshops.

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.

From GitHub To VS Code, In One Second

You can also use a bookmarklet to quickly switch between and, 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.

Autocomplete For The Terminal

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)

From our sponsor

Add An Elegant Touch To Your Portfolio Or Website With A Free .design Domain Name

Top Level Design advert
A .design domain tells a designers’ clients exactly who they are and what they do. A .design domain also looks good in a URL, improving the legibility and aesthetic of a designer’s branding. Porkbun is offering one year completely free to you, dear SmashingMag reader. Grab yours today!

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?

Adding Tags to Files In Your Editor

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.

Smashing Online Events

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.

Finding Git Commands Made Easy

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)

From our sponsor

More And More Professionals Are Leaving WordPress For Wix

Wix advert
WordPress users are tired of constant updates, security flaws and plugin conflicts. That’s why more and more are moving to Wix for a robust, reliable platform with a built-in dev mode, flexible design and advanced SEO tools. Learn more →

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!

Pets For Your VS Code

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.

Your Little Battery Buddy

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)

8. New On Smashing Job Board

9. Our Recent Articles

That’s All, Folks!

Wow, you’ve made it this far! We hope you’ve found at least one useful, practical tidbit that will help you get better at what you do. As you see, there are so many talented folks out there working on so many brilliant projects, and we’d sincerely appreciate it if you could help spread the word and give them all the credit they deserve!

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

Follow us on Twitter Join us on Facebook

Weekly issues with useful tips for web devs.

unsubscribe update preferences view in your browser

Older messages

Smashing Newsletter #294: SVG Generators and Tools

Wednesday, March 31, 2021

With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG transformation. Issue #294 • Tue, March 30, 2021 • View in the browser 💨 Smashing Newsletter Ahoy

Smashing Newsletter #293: Jamstack, Headless, Static Site Generators

Tuesday, March 23, 2021

With static site generators, headless CMS, the state of Jamstack and how to choose if headless options are a good fit for your projects. Issue #293 • Tue, March 23, 2021 • View in the browser 💨

Smashing Newsletter #292: JavaScript, Bundlers, Frameworks

Tuesday, March 16, 2021

With vanilla JavaScript snippets, bundlers, on migrating JavaScript to TypeScript, and how to choose a JavaScript framework. Issue #292 • Tue, March 16, 2021 • View in the browser Smashing Newsletter G

New Live Workshops On Front-End & Design

Thursday, March 4, 2021

Live workshops on web performance, design systems, CSS with Lea Verou, Harry Roberts, Stephanie Eckles and Dan Mall. From front-end to design, to help your boost your skills online. Live workshops on

Smashing Newsletter #290: Email Productivity and Meetings

Tuesday, March 2, 2021

From email productivity to better code reviews, consistent color schemes and better scheduling. Issue #290 • Tue, March 2, 2021 • View in the browser Smashing Newsletter Ahoy Dear Friends, We all want

Bamboo, Blow-Ups, and 3 Other Trends from Milan Design Week 2021

Thursday, September 16, 2021

Plus, the new Laura Gonzalez-designed Saint James Hotel is a Parisian oasis (image) Architectural Digest AD PRO Logo Saint James Paris The New Laura Gonzalez-Designed Saint James Hotel Is a Parisian

✏ WordPress vs Blogger, Creative Hamburger Menus, CSS Mirror Editing in Edge, and more...

Thursday, September 16, 2021

WordPress Vs Blogger: Which is Better for your Website? KINSTA.COM COMMENTS 20 Extremely Creative Web Layouts AWWWARDS.COM COMMENTS 10 Creative Hamburger Menus + Tips & Tricks 1STWEBDESIGNER.COM

✏ Issue #504: Typography for Data, Google Search Redesign, 8 Freelance Project Management Apps, Doodle Ipsum, and more…

Thursday, September 16, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #504 SEPTEMBER 15, 2021 Typography for Data In this in-depth investigation of typography for design systems, Michael Yom breaks down the

Now Hiring: Senior Interior Designer at Morgan Harrison Home (and More!)

Thursday, September 16, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Photomicrography, Hoefler&Co & Monotype, Fintech Design, Cascade Layers, Doodle Ipsum

Thursday, September 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 16 2021 The Winners of the 2021 Small World

Running effective remote meetings

Wednesday, September 15, 2021

We're all dialling in, now what? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

6 Timeless Alexander Girard Patterns Are Being Reintroduced

Wednesday, September 15, 2021

Plus, the unbelievable story behind this Elsie de Wolfe portrait (image) Architectural Digest AD PRO Logo The Mexidot pattern by Alexander Girard These 6 Timeless Alexander Girard Patterns Are Being

✏ 10 Iconography Rules, Core Web Vitals For WordPress, Why Creativity Matters, and more…

Wednesday, September 15, 2021

Say buh-bye to PAID page builders. Design Faster & Smarter with BeTheme's Live Builder & 600+ Pre-Built Sites [ad] MUFFINGROUP.COM 10 Iconography Rules to Follow in UI Design DRIBBBLE.COM

Issue 320

Wednesday, September 15, 2021

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news! CSS Layout News Issue 320 By Rachel Andrew – 15 Sep 2021 – View online → I'll start this week with

Human-Computer Interactions, Jargon, Data Vis Dispatch, Bonsai, Jamstack Conf

Wednesday, September 15, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 15 2021 A comprehensive list of human-computer