Or really, as it stands right now.

As front end developers we spend a lot of our day at the keyboard. It makes perfect sense to spend some time creating an environment that is pleasant and productive to work in.

My environment is pretty personal and tweaked to my taste. There are many different ways to build your own setup and I hope you find something you can use in this post. Note that some of the extras are specific to macOS as well as the touchbar.

My editor of choice:

Visual Studio Code

VS code is a lightweight but powerful cross platform source code editor that runs on your desktop. It also has many extensions that can make life that much easier. I quickly fell in love with the editor the more I used it.

A few extensions I use pretty regularly:

• :emojisense: (Matt Bierner)

  Adds suggestions and autocomplete for emoji

• Auto Rename Tag (Jun Han)

  Auto rename paired HTML/XML tag

• Bracket Pair Colorizer (CoenraadS)

  A customizable extension for colorizing matching brackets

• WakaTime (WakaTime)

  Metrics, insights, and time tracking automatically generated from your programming activity.

• GitLens (Eric Amodio)

  Supercharge the Git capabilities built into Visual Studio Code

• Polacode (P & P)

  📸 Polaroid for your code

• Prettier (Esben Petersen)

  VS Code plugin for prettier/prettier

• Vetur (Pine Wu)

  Vue tooling for VS Code

• ES7 React/Redux/GraphQL/React-Native snippets (dsznajder)

  Simple extensions for React, Redux and Graphql in JS/TS with ES7 syntax

• GraphQL for VSCode (Kumar Harsh)

  GraphQL syntax highlighting, linting, auto-complete, and more!

• Import Cost (Wix)

  Display import/require package size in the editor

• Simple Icons (Laurent Tréguier)

  An icon theme that tries to be simple

• npm Intellisense (Christian Kohler)

  Visual Studio Code plugin that autocompletes npm modules in import statements

• vscode-Spotify (shyykoserhiy)

  Use Spotify inside vscode

• SynthWave '84 (Rob Owen)

  A Synthwave-inspired colour theme to satisfy your neon dreams

Outside of my VSCode I use these applications for other things related to web development

• Postman

  Useful for testing api routes

• Github Desktop

  Simple GUI for github on your desktop

Photography/Design

Photographer by night and occasional designer when needed.

• Figma

  Collaborative design application in the browser

• Lightroom Classic

  Simple editing and photo organization

• Photoshop

  Photo manipulation

• Davinci Resolve

  Video editing

Information Management

If it's not written down, it didn't happen. Last year, I started transitioning from a traditional pen and paper system and went digital. I wanted a system that allowed everything to be easily accessible from any of my devices and kept me sane. Though, I still have my journal because I haven't been able to find a suitable replacement online. Any suggestions?

• Slack

  The digital water cooler and client communication

• Zoom

  Video conferencing and screen sharing

• Notion

  Project management, CRM, knowledge base

• Todoist

  Running list of everything that needs to get done at some point in time

• Google Suite (Drive, Calendar, Photos)

  Hosts all important files to be organized in Notion, Todoist linked to Google Calendar, Auto backup photos

Other Software

• Spotify

  Gotta have the tunez

• OBS

  Screen recording and streaming

• Pock

  Makes the touchbar useful again

• Steam

  Gaming platform

• Alfred

  Spotlight on steroids

• Grammarly

  Grammar and spell checking

Now, this environment isn't perfect and I will always be tinkering and tweaking to make it more productive and fit my workflow.

Know something that helps you?

Comment below!

I'd love to see what you're using.