Over the course of the past few days with the awesome success of my last blog post, I've been getting a decent amount of questions about my development setup.

This ranges from questions about the hardware/software I use to make my YouTube videos, to the specifics of what I use when I code in React.

I like to add new things and change things around every few months to keep things fresh, so this will act as a solid place for me to point to when people ask me this question.

If there's something that you're curious about, or want me to add please let me know in the comments and I'll add it as soon as I can!

Let's get into it.

Editor + Configuration

Right now, I use Visual Studio Code which I switched to way back in August 2017, after a viewer shared it with me while I was livestreaming building my portfolio.

I use most of the default settings that VS Code supplies, but here's a json of my personal settings.

Styling Settings

• I'm addicted to dark mode on everything, so I use the Dracula Color Theme at home and Charcoal Oceanic Next at work.
• I keep it simple and use either Powershell or Terminal when working in bash-like interface
• I currently use Fira Code for a font, and I previously used Consolas before that.

The reason I like Fira Code is their extensive list of programming ligatures. A common problem we as programmers have is that many symbols are often encoded with several characters.

When I'm working in PHP I don't see -> as a dash and a greater than sign, I see it as an arrow symbol to represent invoking a method in a class. The same thing applies in JavaScript, there are several instances where you have multiple characters that represent a concept, like:

• => Arrow function in ES6
• <= and >= Less than or equal to / Greater than or equal to
• != and == Not equal to comparison operator

All of these symbols are replaced with these awesome ligatures:

Fira Code font ligatures

Favorite Extensions

• ESLint - Adds ESLint into VSCode to follow project linting rules at work.
• exports autocomplete - Collects ES6 exports from your project and autocompletes them.
• Git History (git log) - Allows you to view a git log along with a graph and commit details.
• VSCode Icons - Icons for your Visual Studio Code Browser
• Prettier - Standard JavaScript formatter. Have it binded to Alt + Shift + F. Made it a standard in my development process for easier to read code.
• Reactjs code snippets - My most used extension by far, it adds snippets for ReactJS which will lay out the skeleton for tons of different types of components like:
  • Class components with prop types
  • Pure Components
  • Stateless Components with prop types
  • Class constructors
  • React lifecycle methods like componentDidMount, componentWillMount, componentWillReceiveProps
  • this.setState and many more
• Settings Sync - Uses Github gists to sync your VSCode settings across multiple devices. This one is a lifesaver.
• Auto Comment Blocks - Provides block comment completion for Javadoc-style multi-line comments and single-line comment blocks for most officially supported languages.
• Bracket Pair Colorizer - An extension that allows matching brackets to be identified with colors.
• GitLens - Allows you to view code authorship at a glance via git blame on a per line and per file basis!
• Import Cost - Calculates the size of imports and requires, and displays that inline.
• Polacode - Allows you to take custom screenshots of your code for easy sharing!

Recording

• Most of my videos I record using Open Broadcaster Software, while the rest were just recorded on my iPhone.
• I use an Excelvan BM-800 Condenser Studio Recording Microphone to record the audio for my YouTube videos.
• For video I just bought a 720p HD webcam, speciically the Logitech C615
• All of my videos are edited with Adobe Premiere Pro/Adobe After Effects. I reduce video hum and other annoying background sounds in my apartment with Adobe Audition/Audacity.
• Since I don't have a mixer I use VoiceMeeter in order two get multiple audio inputs into one track on my computer!

Blog Posts

• Most of my blog posts start off as an idea from the ever growing list of ideas on the Notes app on my phone.
• When it comes to actually writing the posts, I use Typora, and create a nice table of contents before I start fleshing out each section.
• I edit my photos with Adobe Photoshop CS6, and compres them for progressive loading using a few internet tools:
  • TinyPNG
  • JPEG Optimizer

Productivity

• ShiftIt - ShiftIt is an application for OSX that allows you to quickly manipulate window position and size using keyboard shortcuts, similar to Windows.
• Alfred - An amazing app to allow you to search your Mac and the web, all while providing other custom actions to control your machine.
• git-together - A small utility that allows you to credit two people to commits when pairing
• fasd - Amazing command line productivity booster that offers you quick access to files and directories as long as you've navigated to it before!

Applications

• Insomnia - My favorite Rest client. Postman is a close second though!
• Sequel Pro - Open source database management tool with a friendly UI.
• f.lux - If your computer doesn't have a night shift mode for late night coding, I'd recommend installing this!
• ImageOptim - One of the best tools for minimizing one or a batch of photos for your project! Simple drag and drop.
• LICEcap - Really simple screen capturing software that can record gifs up to 60 frames per second. Really good for demos.
• Rocket - Use slack emoji syntax everywhere for emojis. Super necessary 😀🎉

I'll continue to flesh this out as my repertoire grows! :)