How to Set Up a Mac for Web Development(upandrunningtutorials.com)
upandrunningtutorials.com
How to Set Up a Mac for Web Development
https://www.upandrunningtutorials.com/how-to-set-up-a-mac-for-web-development/
61 comments
I guess it depends what your starting point is, if it's from having done no dev work I'd agree. But if it's from having done dev work on Linux I certainly was relieved to find iterm2.
Yeah iTerm2 is a beautiful terminal like Terminix (or whatever its called now). Thereby giving me a consistent experience accross operating systems.
iTerm is great but I'd like to take a moment to mention alacritty[0] in case some people haven't heard of it.
By far, the lowest latency terminal emulator on OSX.
[0] https://github.com/jwilm/alacritty
By far, the lowest latency terminal emulator on OSX.
[0] https://github.com/jwilm/alacritty
No beginner has problems with terminal emulation latency!
It's not, by far[0]
[0] https://danluu.com/term-latency/
[0] https://danluu.com/term-latency/
Actually from the looks of it we'd be better of using the stock terminal app than alacritty, thus back to the argument that a beginner probably don't need another terminal emulator.
Personally I also use iTerm partly due to habit, been using it for well over 10 years all the way back to the pre-fork days on my PowerMac G5. But it always had features that kept me on (although they've varied over time), for one I've had better true-color support, handles cursors-states better with vim inside of tmux. More font configuration options. I used the Tmux-integration before but don't feel that it adds value for me personally anymore as I'm so used to using tmux directly, GPU-rendering was a nice addition for the 5k/LG UF 4K monitors.
Tried going back to Terminal.app (mainly for ultra low vi latency inside of tmux) but always ended up going back.
Personally I also use iTerm partly due to habit, been using it for well over 10 years all the way back to the pre-fork days on my PowerMac G5. But it always had features that kept me on (although they've varied over time), for one I've had better true-color support, handles cursors-states better with vim inside of tmux. More font configuration options. I used the Tmux-integration before but don't feel that it adds value for me personally anymore as I'm so used to using tmux directly, GPU-rendering was a nice addition for the 5k/LG UF 4K monitors.
Tried going back to Terminal.app (mainly for ultra low vi latency inside of tmux) but always ended up going back.
Interesting. TIL. :)
One of the recommended terminal emulators is the built in one, but I'm surprised its on the bottom of the list.
It’s fascinating, really, that Microsoft has narrowed the gap so rapidly with WSL. I read these steps–which I performed for years over the space of a few machines–and am amazed at how janky the tooling is. WSL/WSL2 are clearly pushing to build better ways to create developer tool chains, without all of the janky macOS specific stuff. With everything being a container, and inherently disposable, along with all the investment Microsoft is making into VSCode and its remote tool chain, it’s a good time to be a dev on Windows (and I genuinely didn’t think I said that when I switched two years ago).
I am not an expert by any means but isnt Docker just good enough for this case as well? The benefit of WSL is that it doesnt consume more memory than it needs to has been my experience. I am not entirely sure of the memory consumption of Docker.
Docker is nowhere near as close to the metal as what Microsoft has done with WSL2—it's got better performance and runs as near-native as you could possibly get.
Docker on Windows runs in a VM through Hyper-V, by default it allocates 2GB of RAM per container (you can change the defaults if necessary).
One question: Why Hyper is default choice?
I wonder why the terminal app section is there at all, since the preinstalled Terminal is totally fine. Since this article seems aimed at brand new developers, I'd expect the author would want to eliminate any unnecessary steps.
iTerm 2 provides noticeable improvements. Being able to select text and have it immediately copied to your clipboard (much like the PRIMARY clipboard in Linux) is very, very nice. The UI is also much more customizable. And things like imgcat (a program like "cat" but for seeing images in your terminal) or even the ability to Cmd+click a file path on a remote server and have it downloaded over SSH onto your machine are fantastic
EDIT: also worth mentioning that if you use VS Code (or another GUI editor) and a separate terminal emulator, you may find VS Code's built-in terminal emulator to be very, very convenient. Although if you're overwhelmed with everything you already have to install, then it might be better to stick to iTerm 2 in the beginning, because it's a drop-in replacement for Terminal.app with awesome improvements
EDIT: also worth mentioning that if you use VS Code (or another GUI editor) and a separate terminal emulator, you may find VS Code's built-in terminal emulator to be very, very convenient. Although if you're overwhelmed with everything you already have to install, then it might be better to stick to iTerm 2 in the beginning, because it's a drop-in replacement for Terminal.app with awesome improvements
> Being able to select text and have it immediately copied to your clipboard (much like the PRIMARY clipboard in Linux) is very, very nice.
It's a Mac; the default usage model is direct manipulation rather than windows-style "object -> verb". So you select the text and drag the selection into where you want it, though as you say cut/paste is available as well.
I have personally not seen the point of anything beyond the built in terminal (though it's a taste matter) though I typically use the shell inside Emacs anyway. I think for beginners the least customization is the best.
My default mode for decades is to try to change defaults as little as possible, though my .emacs file tries as much as possible to bring Emacs back to the defaults of version 170.
It's a Mac; the default usage model is direct manipulation rather than windows-style "object -> verb". So you select the text and drag the selection into where you want it, though as you say cut/paste is available as well.
I have personally not seen the point of anything beyond the built in terminal (though it's a taste matter) though I typically use the shell inside Emacs anyway. I think for beginners the least customization is the best.
My default mode for decades is to try to change defaults as little as possible, though my .emacs file tries as much as possible to bring Emacs back to the defaults of version 170.
How often do you use that? I mean, I use the Terminal middle-click / Shift-Command-V paste-without-copy shortcut fairly regularly but I wouldn’t describe it as a huge deal for people getting started. Similarly, it’s not common to need to look at images in the terminal constantly and the standard `open` utility will display anything, only slightly slower for needing to close the window when you’re done. Again, not an unuseful feature but I’d leave it off of a beginners’ guide for web developers.
Sure, I'm not claiming Terminal is the best option. But if somebody who's not familiar with command line is starting to do web dev, they've got a ton of things to install/learn right away, and this doesn't need to be one of them. Maybe just move this section to the intermediate tutorial.
Installing iTerm 2 takes seconds and running it as equally as easy as running Terminal.app. It's really not any extra mental overhead; if anything, it helps you practice the strange art that is installing things on a mac
My main gripe with iTerm 2 is that I can't Option-Click to navigate around. It's supposed to work but is extremely buggy compared to Terminal.app
Now add in Z-Shell and Oh My Zsh and you're set.
I shrugged it off as pointless hipster dev for FAR too long and now I can't live without it. I only use 1/10th of what it does but the fact that I get that 1/10th with minimal fiddling it's so worth it. My favorite feature is typing part of a command and hitting the up arrow (similar to ctrl+r but easier).
I shrugged it off as pointless hipster dev for FAR too long and now I can't live without it. I only use 1/10th of what it does but the fact that I get that 1/10th with minimal fiddling it's so worth it. My favorite feature is typing part of a command and hitting the up arrow (similar to ctrl+r but easier).
Often when OhMyZsh gets mentioned on here someone will pop up and say "Why not just use Fish shell? You get all that functionality out the box and it's friendlier and faster.", today I am that person. I only made the switch a couple of weeks ago after many years of zsh and OhMyZsh, but I now _love_ Fish.
Iterm2 is truly awesome and I’m sad there’s no real equivalent on Linux, but it’s mostly useful for power users, you can get by very comfortably with the standard terminal.app with very few setting tweaks.
Although I was not aware of “click to download”, I wonder how that works.
Although I was not aware of “click to download”, I wonder how that works.
It let's you cmd+click on links (if it's detected the output as a link).
The stock terminal is nice for being able to alt+click directly in to the middle of a command input.
The stock terminal is nice for being able to alt+click directly in to the middle of a command input.
Most linux terminals are much better than terminal.app, though true don't have has many nifty features as iterm.
What makes you say “much better”? Having used them for decades I’d be hard pressed to find a single feature I regularly use which isn’t in Terminal.app by now.
My last experience with it, didn't support the full color palette, some of the more obscure escape seqs, and window splits. Has it improved in the last six months?
I was comparing iterm2 to anything on linux, (not terminal.app to anything on linux);
However terminal.app is decent enough, I would prefer urxvt on linux (or even termite) but not because terminal.app is missing anything major, I just like customisability.
However terminal.app is decent enough, I would prefer urxvt on linux (or even termite) but not because terminal.app is missing anything major, I just like customisability.
That last feature sounds interesting, though I'm on Linux 99% of the time.
It also has the full color palette for ansi escapes and other ansi features, though I realize they aren't crucial.
It also has the full color palette for ansi escapes and other ansi features, though I realize they aren't crucial.
What do you mean by copy/pasting texts? These always worked fine with Terminal.
Go to Terminal.app and (using your mouse) select some text, such as your prompt. Now paste.
Repeat the same experiment with iTerm 2 (although you may need some custom setting for this one). There are different results: iTerm 2 will copy the text that you selected, while Terminal.app will not. The idea is that the only time you select text in the terminal (with your mouse) is to copy it. It's very nice IMO
Repeat the same experiment with iTerm 2 (although you may need some custom setting for this one). There are different results: iTerm 2 will copy the text that you selected, while Terminal.app will not. The idea is that the only time you select text in the terminal (with your mouse) is to copy it. It's very nice IMO
Terminal will paste it using middle-click (like most xterm derivatives) or Shift-Command-V. Whether it’s good or bad that this doesn’t affect the system clipboard varies depending on the task.
"If you’re just getting started, choose Chrome."
Why, exactly?
Why, exactly?
Chrome has better devtools.
Personally I use Firefox on my MacBook for slightly better battery life and the tools are good enough for the most part. AFAIK in terms of batter life it goes Safari > Firefox > Chrome.
I feel like all of this and more should have been mentioned in the article. It's surprising that Safari wasn't even mentioned when it has clear benefits in some cases (coming from someone who hates Safari).
Personally I use Firefox on my MacBook for slightly better battery life and the tools are good enough for the most part. AFAIK in terms of batter life it goes Safari > Firefox > Chrome.
I feel like all of this and more should have been mentioned in the article. It's surprising that Safari wasn't even mentioned when it has clear benefits in some cases (coming from someone who hates Safari).
Interesting. How is chrome devtools better? They seem to offer the exact same things imo.
Last time I checked (I'm running firefox ESR right now so maybe it's gotten better recently) Chrome's dev tools were way better than the ones from mozilla.
The same kind of thinking that led to IE6-only websites.
My boss says that's the world we're about to repeat.
That’s not a fair comparison by any stretch. IE6 had a number of serious bugs and idiosyncratic behaviors that went unpatched until its demise. Chrome has continuous releases and often implements new web standards before other vendors.
Chrome has a solid track record, IE was ALWAYS a shit show.
I don’t know how anyone who was a web developer back when the majority were using IE6 could say Chrome’s current dominance is anything like what we experienced supporting IE6 well into the 21st century.
Chrome has a solid track record, IE was ALWAYS a shit show.
I don’t know how anyone who was a web developer back when the majority were using IE6 could say Chrome’s current dominance is anything like what we experienced supporting IE6 well into the 21st century.
`nvm` should be the default for installing node imo.
Why bother with nvm when you already have homebrew?
You may eventually want to pin your project to a specific node version, and homebrew aggressively upgrades dependencies with no easy way to run older versions, other than setting up your own tap.
Older software will tell you when you need NVM. A good example is I recently worked on a project requiring Node version 9.x or earlier (I don't remember why). Installing Yarn via brew installed Node v11.x. Even if I installed Yarn via brew without the Node dependency, brew upgrade would install Node whenever a Yarn upgrade was available. NVM, and alternatives like ASDF (some people like it, I don't care for it) we're created to work around blocking node version conflicts. Another option is developing in Docker containers, but using Docker is way beyond the scope of the beginner friendly setup in this article.
[deleted]
I’m curious about what this would look like on Windows, especially for someone who’s been happily developing on Mac for nearly a decade. Is WSL or a VM required? I assume so, for many languages.
It’d be WSL, and about as few steps as the article describes–I’ve documented it here: https://char.gd/blog/2017/how-to-set-up-the-perfect-modern-d.... You’ll just be using Aptitude to install packages instead–or you could use the new automation tools to get a fully disposable, native development environment without messing about (I forget the name right now, but I’ll post if I find it).
I’d argue that it’s getting easier to get a modern web dev environment going on a Windows box than much else these days, especially with WSL2 about to land. It’s fun that Microsoft is investing so heavily in the developer experience.
I’d argue that it’s getting easier to get a modern web dev environment going on a Windows box than much else these days, especially with WSL2 about to land. It’s fun that Microsoft is investing so heavily in the developer experience.
This sounds like what I was expecting, I’m glad to hear it. I already do a fair amount of work in an Ubuntu Desktop VM and it’s fine, so I imagine WSL2 should be at least a bit better than that. I’m REALLY over Apple hardware and don’t think I can justify the investment again. If WSL2 is as promised, it’ll probably seal the deal.
Most languages are fine on Windows without using WSL. You just download some installers and run them. Node, Ruby, Python, Go, Rust, Java at a minimum all have readily available Windows installers. The git installer comes with bash and busybox which you can use with whatever terminal emulator you want.
I’ve always been under the impression that Ruby development in Windows is miserable, even with the installer. Something changed? Regardless, I (and I’d guess anyone coming from Mac) am so much more comfortable in bash, I’d really prefer WSL if performance is right.
I think installing Docker should be one of the first steps...
Didn’t knew about Hyper. What do you guys think?
I think it's a bit overkill to use a full Chromium runtime to display a black window with monospace text.
It's multiple things I dislike about modern development conveniently packaged together.
If you're on macOS, you can fairly happily get by with the default terminal (it's also super fast). Otherwise I would use iTerm2, alacritty, or kitty—all of which I've used individually for 6+ months straight at a time.
If you're on macOS, you can fairly happily get by with the default terminal (it's also super fast). Otherwise I would use iTerm2, alacritty, or kitty—all of which I've used individually for 6+ months straight at a time.
its cool and has eye candy but its incredibly slow, moreso over time. I went from iterm to hyper but ended up just going back to mac's own terminal app since i do very basic stuff in the terminal and dont need any bells and whistles.
It's ultra slow compared to any other decent alternative
Not really, at least in comparison with iTerm 2. Hyper recently introduced a WebGL renderer and with my oh-my-zsh/pure-prompt config, both of them loaded in about the same time.
But keep in mind, the only reason I use Hyper is because of the borderless window aesthetic.
But keep in mind, the only reason I use Hyper is because of the borderless window aesthetic.
Why complicate with things like third-party terminal emulators? Nobody at the level of getting started needs something like that.