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

✏ How to Avoid SEO Disaster, 6 Types of Web Design, Simply Markdown, and more...

Sunday, June 20, 2021

Work at the Intersection of Data, Design, and Technology [ad] SPS.NORTHWESTERN.EDU An Alternative Voice UI to Voice Assistants SMASHINGMAGAZINE.COM COMMENTS Simply Markdown - Easy Create Markdown with

✏ Is AMP Dead and Do We Care? React Markdown Editor, Bad vs Good Designs, and more...

Saturday, June 19, 2021

Poll: Is AMP Dead, and do We Care? WEBDESIGNERDEPOT.COM COMMENTS Bad Vs Good Accessible Designs USABILITYGEEK.COM COMMENTS Client-Side Routing in Next.js SMASHINGMAGAZINE.COM COMMENTS React Markdown

The 25 Best Accent Chairs, According to AD100 Designers

Friday, June 18, 2021

Plus, more sourcing inspiration. View in your browser | Update your preferences Architectural Digest AD PRO logo image Welcome to the PROcurement, our new weekly roundup of the best designs to source

✏ 40 Javascript Memes, CSS Specificity Calculator, HTML Semantic Tags Sheet, and more...

Friday, June 18, 2021

The Problem with UX/UI Portfolios MARKBOULTON.CO.UK COMMENTS CSS Specificity Calculator POLYPANE.APP COMMENTS Your Image is Probably not Decorative SMASHINGMAGAZINE.COM COMMENTS Top 40+ Javascript

What Will Back-To-Normal Look Like?

Friday, June 18, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

UX/UI Portfolios, Feels, Bear Plus Snowflake, Optical Size, Aspect Ratio

Friday, June 18, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 18 2021 The problem with UX/UI portfolios

RWD Weekly #462— the one about the little yellow book

Friday, June 18, 2021

No preview text for you this week, you've got to commit to reading this one by opening it first :) Read online Hello again, welcome back to RWD Weekly #462 happy Friday! This week I've been

Meet Image Optimization, A New Smashing Book

Thursday, June 17, 2021

Meet Addy Osmani's new book on image optimization: from formats and compression to delivery and maintenance. Brand new book: Image Optimization by Addy Osmani. Dearest Friend, How do we deliver

🔥 Dashing Mobile UI Designs and more

Thursday, June 17, 2021

Round Up The Newest UpLabs Weekly Freebies 🤠 Check out some fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. The New Super Fast Way to Build a Website

Holly Hunt Reinvents Herself Once Again

Thursday, June 17, 2021

Plus, a houseplant sells for almost $20000 at auction (image) Architectural Digest AD PRO Logo house plant - philodendron Think You Love Houseplants? This One Just Sold for Almost $20000 Read More →