Matthew Sechrist's Blog
My Top VS Code extensions, Mac apps and websites to help complete the Cloud Resume Challenge

My Top VS Code extensions, Mac apps and websites to help complete the Cloud Resume Challenge

Matthew Sechrist's photo
Matthew Sechrist
·

3 min read

Table of contents

Disclaimer: This blog post is not related to my current job with NIWC Atlantic or the Department of Navy whatsoever.

Since completing the Cloud Resume Challenge, I wanted to help pay it forward. Here are the tools/apps/websites that helped me complete the challenge, I hope they assist others on their cloud journey.

roman-synkevych-vXInUOv1n84-unsplash.jpg Photo by Roman Synkevych on Unsplash

VSCode Extensions

  1. Prettier - Elegant code formatter
  2. HTML Preview - Helped me see my HTML/CSS updates in real time
  3. Hashicorp Terraform - Great for syntax highlighting and catching HCL errors
  4. IntelliSense for CSS class names in HTML - Saved me time with CSS class name completion
  5. Gitlens - Extremely powerful and visual tool that helped me see the evolution of my code, along with code commits
  6. Python - Helpful with Python IntelliSense and variable explorer

koala-BDpEmeB8HUk-unsplash.jpg Photo by Koala on Unsplash

Websites

  1. coolors.co - Awesome color scheme generator
  2. vscode.dev - Amazing browser based IDE with extension support, it helped me when I only had my phone/tablet but still want to code
  3. codepen.io - Real-time HTML/CSS/JS online code editor with live preview
  4. w3schools - Feels like I'll never remember exactly how to center a div without looking it up :)
  5. canva - Where I created my logo shown below

image.png

Mac Applications

  1. Postman - While cURL is easy and readily available, I love how configurable Postman is and can save different API calls in your profile
  2. diagrams.net - Great tool to create architecture diagrams, like my example AWS architecture below

final-architecture.drawio.png

  1. Chrome Developer Tools - The built-in Chrome Dev Tools work great for testing responsive design, looking into CORS issues, and modifying HTML/CSS values in real-time
  2. Safari Developer Tools - Same benefits as Chrome Dev Tools, I just wanted to make sure my website looked good in multiple browsers
  3. Cypress - Helpful Javascript automated testing tool that I used to test my website availability, along with my API call
  4. GitHub desktop - Similary to the Gitlens VS Code extension, the GitHub Desktop app has rich visualizations for seeing the evolution of my code

Command Line Interfaces

While most of the above are feature-rich and elegant viewing experiences, command-line tools are typically the fastest way to run some things. For tasks like running terraform fmt/apply, invalidating the CloudFront cache, or committing code changes to my repo, below are the CLIs to make it happen.

  1. AWS CLI
  2. Hashicorp Terraform CLI
  3. GitHub CLI

What are your favorite extensions/website/apps/CLIs?

What are you favorite VS Code extensions you think I should try? I am no website design guru, are there Design/UX/UI inspiration-type websites that you find helpful? Let me know!

Developer ToolscolorDevelopercoding