I am not a professional developer. I’m a recreational developer. My ultimate goal has been to do whatever it takes to get coding then adjust as I go along. When I first started, I would nitpick over every detail. Version control options, editors, package managers, plugins etc. and ultimately it was just wasting time. Very valuable time I could have spent coding instead. You’ll know soon enough if something isn’t working the way you hoped – I recommend worrying about it at that time versus trying to get everything set up exactly right before you even start.
My setup has changed since last year – you can review my original setup in my Environment setup for beginner web development post. However, the same rule applies – when you’re just starting out setup matters less than actual time spent coding. Below is the set up that is currently working for me.
You can expect this list to morph over time as my needs change.
Computer: Acer Aspire A515-51, previously Toshiba Chromebook
When I first started, I was writing CSS, HTML and very lightweight JavaScript that could be done on a Chromebook. However, as the code became more involved, and required installing various dependencies the Chromebook just wasn’t cutting it. I’m sure there are ways to pull off much of what I needed to do with a Chromebook, however, I would rather spend time coding than some obscure way to install things on a Chromebook. I pulled out my old Toshiba Windows 7 laptop (no longer made) and limped along but it was very slow. So I opted for a laptop. The Acer was on sale and it does what I need it to.
Operating system: Windows 10
My initial operating system was Chrome OS as I was using a Chromebook. I opted for a traditional laptop with Windows 10 as software dependencies increased (version control, node.js etc.) Mainly for ease of finding online resources on how to install and setup what I was downloading.
Browser: Chrome
I use Chrome 99.9999% of the time. Chrome’s built in developer tools are extremely useful. I also have Firefox and Edge as well for testing.
Chrome Extensions:
- React Developer Tools for React debugging
- Lighthouse for accessibility and performance
Text Editor: Visual Studio Code (VS Code)
Once I moved to a Windows laptop I tried Atom briefly and ended up sticking with Sublime Text for quite some time until I switched to Visual Studio Code. On my Chromebook I was using Caret and Text – both very basic text editors accessible through chrome extensions. Caret is modeled on Sublime Text which made it easy for me to transition to Sublime once I moved to Windows.
Sublime Text is free as long as you don’t get tired of the popups asking if you want to fund the paid version. While I enjoyed the customization options Sublime Text offered, I got tired of the popups and decided to try Visual Studio Code. VS Code has very good reviews and I decided to check it out before making any decisions to buy the paid version of Sublime. Glad I did. While it has taken some getting use to, VS Code works great for my needs.
Programming Font: Fira Code
Fira Code is a fantastic font. It’s monospaced, has clear character distinction, supports ligatures and best yet, it’s FREE! When I started programming, I didn’t give much thought to the font being used in my text editor. The default always seemed to do the trick until I was reading a programming blog and saw a block of code using Dank Mono.
I learned quickly the style of font I was after was a paid font. There is also Operator Mono which is even more pricey. I don’t currently do enough coding to justify plopping down big dollars for a font.
There do not appear to be any monospace-compatible cursive italics fonts that are free so Fira Code was the next best thing I could find. I do love me some ligatures as I feel it gives things a cleaner look.
When coding the primary features you are looking for in a font are:
- Monospaced – characters take the same amount of horizontal space allowing code to line up nicely.
- Character Distinction – A decent font should have very clear visual distinction between these characters: 0Oo, l1|I, 5Ss, 2Zz
Version Control: Git, GitHub
Git and GitHub are popular version control solutions that keep track of changes to the code. Git is free software used locally and GitHub is a service on the web that manages multiple copies of git repositories. GitHub has a free option for individuals as well as paid plans depending on your needs.
Hope the above is helpful. Again, don’t worry too much about getting every little set up detail when you start out. The main goal when you first start out is to gain experience doing actual coding. As you understand more you’ll figure out what tips, tricks and tools work best for your needs.