Rate My Setup: An Experience Builder Focused Coding Environment
For several years now, I have been limping along in this job on a computer that was really powerful enough to handle my workload.
Well, they have finally heard my cries of desperation (and the lease on the old computer expired) and got me the finest computer a municipal budget can buy. Having just gone through the process of setting this beast up, I thought you might want a look behind the curtain at how I have built my Experience Builder coding environment and why.
Source Control
Source control is a concept that allows multiple developers to work on the same project at the same time without getting in each others way. I work alone and I don't recommend trying to have multiple developers work on the same Experience Builder project, even with source control, but I still use it myself. Why? Hypocrisy, of course. I love being a hypocrite. Seriously, setting up source control is one of the first things I do when I download an new version of Experience Builder for two good reasons.
Firstly, I use branches to maintain a production and a working versions of my code. I do not code in my main/master branch. This is the production copy of my applications. I create a working branch to do my coding in when the all the bugs are squashed I merge the working branch to my production code and deploy. If whatever I'm working on goes horribly wrong, I can go back a few commits or abandon the branch entirely and I have not lost the whole project. This is more accurately called version control, but whatevs.
The other thing setting up source control does for me is file backup. This saved my gluteus maximus when I switched computers as I did a terrible job of backing up my files to my external hard drive before my old computer went to the great scrap heap in the sky. I was able to pull the my repo off the cloud without actually losing anything.
My source control of choice is Git, because that's what I know, with backup to Azure DevOps, because that's what my employer pays for. These are both Microsoft products, so they play well with each other and another Microsoft product that we will talk about later.
Node
Did you go straight to the Node website and download Node from there? Yeah, I used to do that, too. Don't do that. What you actually want to do is go to GitHub and download nvm-windows (Assuming you are on a Windows operating system. There's a different nvm for Mac and Linux). Using NVM, or Node Version Manager to its mother, you can quickly download any version of Node you need, run multiple Node versions on the same machine and quickly switch between them. This is very important if you have any legacy projects that are on older versions of Node. And as a bonus, you don't have to navigate through the terrible Node website to find the Node version you need.
IDE
IDE stands for Integrated Development Environment, a fact I had to look up in order to write this sentence. If you're not so fancy, you could call it a code editor or if you're honest, you could call it a text editor that thinks it's better than everyone else. My IDE of choice is Microsoft Visual Studio. I think the freeware version, Visual Studio Code, is actually better, as its easier to find what many functions and the lighter memory footprint makes it less prone to stalling. But I feel I need to use the paid version if it's paid for and it's required for the ArcGIS Pro SDK. In either version, what makes Visual Studio nice to work in is how well it works with Git, IntelliSense predictive text, and customization through third-party Extensions. Extensions like...
- Spell Check My Code - English is a very stupid language and I can barely use it even with the assistance of modern technology. The combination of a spell checker and IntelliSense is critical to preventing me spending hours debugging typos. This was a serious recurring problem in the brief period of time I tried to code without a spell checker. It's also important that your SpellCheckerUnderstandsThatJustBecauseYouStuckABunchOfWordsTogether you aren't making a mistake.
- Visual Studio Theme Pack - I know IDE themes seem like a silly cosmetic issue, but having a theme that works for you is actually critical to productivity (and maybe your long-term health). Specifically, I'm using Dark+ from this theme pack. Whenever I look at code on a light background, it feels like instant eye strain. Strangely, I get a similar feeling from browsers in dark mode. What really makes Dark+ special to me is that the text uses different colors for different types of coding concepts. Strings, comments, functions...yada, yada, yada. Not every theme does this and few do it this well.
- Rainbow Braces - After spelling, what's the other simple thing I'm always screwing up? Scope. Rainbow Braces makes all your {([])}s different paired colors and gives you dashed vertical indentation lines, so you can easily track scope issues and make sure all your closures are in orders. If you have ever struggled to find an unpaired }, you need this.
- Solution Colors - If you thought it was embarrassing to spend hours debugging a typo, I've made an even dumber mistake once. For two hours, I was absolutely baffled why I couldn't even make a console log work until I found I was working in the wrong project entirely. That's the problem I got Solution Colors to prevent. I this Extension set up to add a splash of random color to each Visual Studio project.
The overall theme is colors stop dumb mistakes. Sorry if you're colorblind.
Browser
Chrome. Of course, I develop in Chrome. Because 78.6% of the internet uses Chrome and it makes sense to use the same browser as your users. And Chrome is a branded skin over Chromium, something I could also say about Microsoft Edge, Samsung Internet, Opera and Brave, among many others, which add up to give Chromium over 90% of all internet traffic. Safari and Firefox are the only major, non-Chromium browsers.
Other Stuff
- Foam thinking ball - Toss it up and down while thinking about stuff.
- Foam hammer - When the thinking ain't working, bash the computer a few times without getting fired.
- Sit/Stand desk - Makes all the required pacing and fidgeting easier.
- Earbuds - Keeps everything out of your head but code and tunes.
