I wanted to write a quick blog post on why it's important for developers on a team to use different setups to develop. Why it's important to have Linux and windows users in a field (web dev specifically) that's been dominated by macOS. And why it's important to stay away from Chrome-only development.
I think the answer is almost obvious at first: diversity in development means you catch more cross-browser/cross-platform bugs. So why doesn't every team have "quotas" or at least a thorough QA step every step of the way?
The situation right now
I've worked on a handful of development teams and on applications that ranged from having half a dozen users to websites that serve millions. Almost every team I've been on has an almost identical setup for development:
- latest OSX machine
- latest Chrome browser
- iTerm2 with bash/zsh (fish is great, why isn't anyone using fish?)
- Sublime Text or VSCode
I've always been driven to setup my development environment differently than everyone else. I've always had plenty of personal reasons to do so (eg. macOS interface is just not pleasing to me, Windows ftw) but the end result was always the same, I stuck out like a sore thumb with:
- latest Windows machine or maybe ArchOS
- random browser I use on rotation (will it be Opera? or Firefox? or Chrome? who knows.)
- ConEmu or TMUX with Bash or PowerShell, or CMD
- VSCode, Emacs, VIM, or Sublime Text
It's definitely been annoying our ops guy because tools don't always behave the same way on different platforms.
What my dev setup taught me
Over three years ago, I started working at a company called Landdox. We have an app that does document/land management for Oil & Gas companies. We have a few "famous" "hard" problems we dealt with when we first started building the app:
- original color scheme looked great on Macs -- it was illegible/unusable on every single other machine.
- a "plus" sign on a button was always misaligned -- it looked centered in Chrome on a Mac but not on Firefox or Chrome on a Windows machine. I spent a week debugging this and considered using images...
- form fields were cut off on IE Edge so you couldn't see the text you typed, or the option you selected on a select field.
We were a small company but already the fact that I had a Windows machine meant that I was able to debug and fix these and more importantly, notice these problems as they arose.
Tooling and new developers
Tooling issues suck. It sucks when Docker runs perfectly on a Mac machine but fails on Linux or when it fails on Windows. But fixing problems cross-platform meant that when we onboarded new developers that had their own productive setups, we didn't have to force them to work on machines, OSes, and editors that they weren't comfortable with.
This meant that I, as a Windows developer on the team, paved way for at least one other developer we onboarded who used Windows almost exclusively. He also switches to work on a Linux machine but that's ok, we have Linux devs that paved way for that setup as well.
I just want to mention that when I had to work on a Mac setup years ago, it took a good deal of time to get used to it. Normal apps I depended on (like Np++) didn't exist and had very poor replacement (TextMate? Really?). I wasn't a fan of the UI either. I didn't detest being a mac user and eventually got proficient with it.
I embraced the change of pace but if I was interviewing with a company right now and they demanded I use a Mac, I'd most likely turn them down. In fact, I've done that early on in my career pretty often.
Browser testing while developing
We occasionally get tickets due to performance issues in our application. We're running an AngularJS/Angular hybrid and if you've ever done that on a production application handling tons of data, you'll know that there are strange performance hiccups when the two frameworks conflict ("thrashing" is what I'd describe it as).
This thrashing is pretty easy to spot and generally appears cross-browser; however, there are sneakier performance bottlenecks that do not. And we found one that occurs only on IE Edge, and somehow, only on my machine (other Windows-using devs haven't been able to recreate it).
Before I get to where this lead me, let me expand on the idea of using your dev environment as testing grounds.
Not every team has QA and fickle bugs that exist only in certain conditions are difficult to test for or find using regular QA techniques. We employ e2e tests but those run on Cypress which means they run in a Chrome-like environment.
I've been using Firefox as my primary browser. It's a really fucking awesome browser and the dev tools are AMAZING -- definitely not "secondary" to Chrome as developers like to say.
With Firefox, I've identified numerous bugs and annoyances during my regular development. I had to download a report that was built inside the browser (yep, you can build an excel spreadsheet in your browser without hitting the server!) but the way the name of the file was constructed resulted in an invalid file in Firefox.
I've also noticed a weird bug with form fields and a few others where entire sections of the site would disappear.
Onto IE Edge
So back to that performance problem. I decided to move to IE Edge as my browser of choice so I could watch out for these things. Our customer base uses Edge to a certain degree so that means that I'll see these bugs before they do.
So far, Edge has revealed quite a few things to me:
- at one point, we loaded a 12mb vendor file...yeah, 12mb. It was a copy of our dependencies that were already tree-shaken and bundled into our main app bundle. Only Edge complained about it
- our app is WAY faster on Edge than on Chrome or Firefox. No, seriously. It's nuts.
- Edge's custom autofill features cause thrashing with fields that had
$scope.$watchon them and updated other fields during that process. (Eg. change a date, and another date changes as a result)
Let's see how this goes!
Please share your setup! I'd love to hear about it
Like this post? Check out the original on my blog and follow me on Twitter
Top comments (14)
Randomly rotating your browser usage is such a good idea! I find that I often have to "force" myself out of my comfortable box with things like that, so rotating what you use randomly sounds like a great way to normalize that experience.
for me, using different browsers for home and work helps a little bit. but randomly rotating browsers I'd probably spend at least an hour just importing my bookmarks, installing extensions and reentering credentials for every website I visit
That's very true, even on a personal level I've noticed that in my slow migration from Chrome to Firefox. I imported everything I could, but I still have to re-enter credentials on most sites, which is kind of a pain! I'm doing them as I go along, wish I didn't have to though.
same! It takes some getting used to. I've been using Firefox and going back to Chrome isn't entirely comfortable. Going to Edge wasn't comfortable either but it's not a huge leap
I like the idea of trying to have have developers that belong to all the 3 religions. Most guys run and say, I want a Mac, or the other heavy side is Windows. I worked at a company that made us use Windows. I installed Virtualbox and had Linux on there really quick. What your suggestion, I believe will inadvertently gets developers to do cross browser/OS testing and not even know it
ha! It's interesting because I love Linux and nearly installed it as my main OS on my laptop (but ended up with Windows...). I also really like Windows so I definitely gravitate away from macs haha.
But yep! They do browser testing without realizing it!
I am a windows user who also uses Linux sometimes, edge browser is something which I find difficult to configure my web applications and my sweet spot is chrome or developer firefox.
What difficulties do you find with Edge?
I'm still learning about using it for development. I've got my DOM explorer and my console, I hope this experiment won't bite me in the butt when I need to start setting breakpoints!
For beginners edge can be tiresome because some features of css just doesn't work with edge and other compatibility issues and I guess that's the most common complaint about edge by most of the web developers but I guess you're an experienced dev in web development so you must already know workarounds for some properties or compatibility issue, but as I said when I develop web applications first I try it on Chrome and then Mozilla I have very less experience with web development in edge.
"novice" == beginner
Just a friendly heads-up. 🙂
Thank you for the heads up, edited it.
I've struggled just to access localhost with Edge. Since it's not a traditional desktop app you have to jump through some hoops to do local development with it
I still do frontend development for IE11 on the regular, so switching up browsers is a must. I keep a Windows laptop handy to test IE and Edge.
However, I refuse to use Windows for development. I spend more time trying to manage my PATH and my dependencies (good luck getting node gyp to run consistently on outdated, enterprise-managed Windows installs) than actually doing development. If my company would let me use Linux I absolutely would, but they won't. So my options are a Windows machine running a Linux VM or Mac. Pretty easy choice for me
I do agree with your main point, but my Windows experience hasn't been as flowery as yours unfortunately. 🙁
Windows Update tends to cause my hosts file to get cleared and my graphics profile to be set back to the defaults. Sometimes my sound driver gets uninstalled too.
But there usually is better support💲💲💲 from software and hardware vendors than for Linux (as much as I'd love to switch to Linux permanently 😸).