My Development Setup

_{Photo by Markus Spiske on Unsplash}

Hey, folks!

I thought I'd make a quick update on my development setup. After working for half a year as a technical support specialist, I am up for a promotion to become a junior front-end developer at the company I work at. After multiple years of self-educating, I finally made it! Yay!

As I have been studying web development on my own, I have found that your tools are very important. Because of this, I am going to show you my setup for web development and also explain why I use what I use.

The machine

_{Photo source}

The machine I daily drive is a Macbook Air 2021, which has one of Apple's newest M1 processors. As you may know, these cost a lot of money (which is why I have this as my work laptop), but honestly, I think I am never looking back and might get a MacOSX laptop for myself as well. The ease of use and the UNIX-based system makes everything so much easier to handle. The laptop is blazing fast, has an amazing battery and enough of a screen to not make my eyes tired after a few hours of working.

The browser?

I have to admit that I'm a freak for Google Chrome. I have also used Firefox in the past and while it has a lot of nifty features for web development (error highlighting during source code viewing, CSS tools etc), I am just so used to Chrome that I don't see myself turning to Firefox in the future. I am very much aware of the privacy of Firefox and the data collection of Chrome, but, as of right now, I am not bothered by it.

I also use a few browser extensions, which help me with web development – one of them is Wappalyzer, which makes it very easy for me to see which technologies sites are using for their front-end, back-end etc. Another useful browser extension is ColorPick Eyedropper – whenever I need to determine a specific color on a website (for example find out that the PeakD red has an approximate hex value of #E21337) I use that extension.

Next, the text editor!

…I'm guessing it does not come as a shock that I use Visual Studio Code as my main text editor. It is among the top text editors (after Sublime Text and Atom) that developers use nowadays. The reason I use VS Code is that while it helps with version control and integrations/applications (of which I'll talk about later), it also allows me to write code in different coding languages. For example, next to web dev specific code, I also write a lot of Python.

I have to admit, I have also dabbled quite a lot with Vim and the usability seems amazing. However, I have just never got around to learning it in depth. Now that I have finished my bachelor's and have a lot of free time, I might just dive in and finally get around to using it.

VS Code extensions

I use a number of extensions, which I'll state below.

Web-dev specific:

1. Beautify
   Beautify is an amazing code formatter for HTML, CSS (+ SASS), JS and JSON files. It makes my life much easier and makes sure I don't miss any semicolons in my JavaScript code. I'm aware that JS doesn't actually need semicolons anymore (the browsers can add them by default), but this too has it's flaws. Let me know down in the comments below whether you're team semicolons or not!

2. Bracket Pair Colorizer
   A very simple, yet very useful extension. If you have a lot of brackets inside your code (for example, while writing ReactJS), it becomes very handy and lets you follow along the different pairs of brackets.

3. ES7 React/Redux/GraphQL/React-Native snippets
   Another useful extension, which allows to use snippets for different pieces of code. For example, if you need to create a boilerplate for HTML, you can simply write !!! to VS Code and it will create an HTML boilerplate. This extensions allows to create boilerplates for React components, for example.

4. ESLint
   Another formatting tool – this tool basically triggers whenever Beautify doesn't want to trigger. Used for JS.

5. GitLens
   Git, as you may know, is a version control system, which is used very widely in development. GitLens comes in handy whenever you want to blame someone for writing shitty code, basically. :-) GitLens allows you to all types of history, heatmaps, changes etc right in the code editor.

6. JS & CSS Minifier (Minify)
   As a beginner developer, I never realized that I should minify my own files to make the webpage load faster. With this extension, the minification happens automatically and you can enjoy faster loading times!

7. Live Server
   Live Server is usually one of the first extensions that is recommended to beginner web developers. It helps to set up a web server so that whenever you make changes in your code, they will appear on the website and you can see how your code works immediately.

8. Smarty
   The templating language we use at work is called Liquid, however Smarty is very similar to Liquid and the syntax highlighting comes in very handy whenver writing templates in Liquid.

Miscellaneous:

1. Jupyter
   As mentioned before, I also write a lot of Python code. Since most of my bachelor's thesis was based on data analysis, Jupyter (Jupyter Notebooks) were a very important part of my data analysis setup.

2. Python
   Self-explanatory: syntax highlighting for Python, autocompletion etc. All very necessary things.

3. MJML
   Now MJML is a bit of a curveball. MJML is used at work whenever we're creating custom emails to be sent out to our customers. While MJML is quite similar to HTML, it still needs compiling. This is where the extension comes handy – you can see a preview of the MJML code you've written, which is very useful for a visual overview.

4. Snazzy Theme
   I'm a sucker for pretty colours and since almost all text editors offers the option of themes, I've found that the Snazzy theme is which tingles my brain the most.

And that's it!

That's all the extensions I use for my development. If you have any other recommendations or questions about the used extensions, feel free to let me know down in the comments below!