- Macbook 12 For Web Development Websites
- Macbook 12 For Web Development Software
- Macbook 12 For Web Development Tools
- Macbook 12 For Web Development Tool
My experience coding on the new MacBook when compared to the MacBook Pro
Apple's new 2020 MacBook Air left out a key upgrade for people working from home. Commentary: The outdated webcam on the new MacBook Air won't help people with all the video calls they're doing in. The 12-Inch MacBook: This model was canceled in July 2019. If you find one of the final models and get a good bargain (well under $1,000), it may be worth a look, but we generally recommend you. Read on for our take on the MacBook, MacBook Air, MacBook Pro and iMac for web development. The prettiest and most portable range of Apple’s current Mac lineup is undoubtably the new MacBook. They come in a range of colors — silver, space grey, gold and rose gold, boast a slimmer unibody chassis than ever, and weigh a staggeringly. Apple's popular MacBook Air set the bar for years for what you could expect from a $1,000 laptop and gave you a great entry point into MacOS without having to shell out for an iMac or MacBook Pro. Which Macbook for web development? I am joining uni this fall, and I need a new computer. I currently used a chunky, slow 2010 macbook pro, and just doesnt do the job anymore.
This past month I’ve been using the latest Apple MacBook for web development. Let’s start with a couple of questions: could this laptop be the only computer I use? Probably. Would I want that? Hell no!
Update: Soon after I wrote this, Apple upgraded the MacBook line. The new upgrade include a Skylake processor with integrated Intel HD 515 graphics supplying 25% faster graphics performance, and improved battery life. They also improved the 8GB RAM with faster 1866 MHz memory. And they even have a Rose Gold option now, if that’s what floats your boat!
How I Work
Everyone has their own workflow and habits, and everyone uses their computer for different tasks — my needs may not be the same as yours. To put this review in context, here’s the kind of work I do and tools I use:
- I do minor graphic editing, mainly converting vector AI files to SVG and tweaking colors.
My main machine is a beefed-up 2012 Mac Mini sporting a 2.3GHz i7 processor, 16GB RAM and a 1TB SSD. I like to have as much information readily available as possible, so I use a dual monitor setup: one 27“ Apple Thunderbolt Display (important for the following review!) and one 24” Samsung monitor. To the left of my keyboard I have a Magic Trackpad, and on the right I have a Logitech Performance MX mouse with plenty of shortcuts mapped to the extra buttons. As a side note, I keep two panes open in Atom so I can review code side-by-side.
Here’s what my setup looks like:
This setup works great for me but, since I’m often on the move, I also have a laptop so I can work wherever I go. I’ve been using a 2015 13″ Retina MacBook Pro — until now.
Why the MacBook?
I’ve read countless reviews of the 12″ MacBook and played with it on visits to the Apple Store. I always thought it was a gorgeous machine but the lack of connectivity and processing power stopped me from getting one… until last month.
I was reading a discussion on some forum — I can’t remember which, but it was most likely reddit — where someone said something along the lines of the most useful laptop is the one you have with you, not the one sitting at home on a table. I read this on my iPhone while stuck in a bar for a couple of hours due to a roadblock, and I didn’t have my flashy new MacBook Pro with me. Two hours of precious coding time was lost forever; when I looked at my rMBP that morning, I thought: nah, I won’t need it today — it’s too bulky to carry around.
The next day, I was on the Apple website, ready to give them a good chunk of my hard-earned monies.
The Unit
I chose the Space Grey (sounds so much better than black, doesn’t it?), mid-range version with the firm intention to carry it with me anytime I leave the house. 1.2 GHz Intel Core M, 8GB RAM and 512GB SSD. The video card is an Intel HD Graphics 5300. This MacBook costs $1,599.
The first thing that struck me was its weight. I have an iPad Air 2 with a folding case and I can barely notice the weight difference compared to the MacBook. When the MacBook is closed, it has the same thickness as the iPad Air 2 and its case. You can read plenty of reviews on the web about its build quality, weight, size, screen, and so on. I’m not going to focus on that stuff but I felt compelled to say that, for my intended usage, the light weight is really astonishing.
The Keyboard
I should add a few words regarding the keyboard: it’s awesome — for me, at least. I have small fingers and I absolutely hate noisy and hipster-y mechanical keyboards (get a fucking typewriter already!) with never-ending travel distance. My favorite keyboard remains the wired Apple Keyboard with Numeric Keypad, but the MacBook keyboard is a close second. If you are a fan of big, bulky keyboards or have large sausage fingers, you may not like it so much. Before committing to buy a MacBook, you should make sure you enjoy typing on it — test one out at an Apple Store. The keyboard is as silent as the rest of the machine, which is a big plus. A few years ago, I sat next to a guy who liked to show he was working hard by pounding on his keyboard as hard as he could. A year of that will make you totally nauseous every time you hear a noisy keyboard!
The Speed
My workflow consists of coding in Ruby and editing vector files in Affinity Designer. When working on this laptop, I haven’t noticed any difference in speed compared to my MacBook Pro. Atom opening, ActiveRecord parsing large PostgreSQL databases, switching between apps — it’s all just as fast and I’ve yet to see the infamous beach ball. Granted, compiling Ruby or native extensions on the MacBook takes several seconds longer than on the MacBook Pro, but I only do those tasks when first setting up my machine.
Keep in mind that I’m not playing games or editing 4K movies. I’m only coding and cropping the occasional vector file to export as an SVG. For tasks like these, RAM is much more important than processing power; with 8GB, there’s plenty of it to go around.
I often work with an Ubuntu Server VM using Vagrant and VirtualBox to simulate my production environment before release. I had no issues there either.
Macbook 12 For Web Development Websites
The Battery
Before my MacBook Pro, I used a MacBook Air. The battery life of the Air completely crushed the MacBook Pro, so I wasn’t expecting much from the MacBook. But on average, it lasts about an hour longer than the Pro, which was a pleasant surprise — I get 8h out of it before it needs to be fed again. I have few tweaks to maximize the battery life, such as turning off OS X transparency effects and using the screen brightness at about 80%. I use iStat Menus to keep an eye on what my MacBook is doing and to see if a process could potentially drain the battery too quickly.
I recently took a 15-hour trip to Japan and I easily used the MacBook for half the flight. I fell asleep before my laptop, so that’s a good thing.
The Screen
It’s a Retina display — 226 pixels per inch on a 16:10 aspect ratio. Several resolutions are supported, and I use it at 1440×900 to maximize screen real estate. At this resolution, nothing feels too small and everything is comfortably readable. The max brightness is usually too bright — not “staring into an exploding sun” bright like the iPhone, but bright enough on max settings to bother my eyes in an average lit room — so I decrease it to about 80% (which also helps with the battery life).
There’s no noticeable difference in screen real estate compared to a 13″ MacBook Pro.
The Connectivity (or lack thereof)
The MacBook only has one USB Type-C connector on the left side and that’s it. You use this port to charge the MacBook and to communicate with external devices. Oh, and a headphone jack on the right side. Initially, this put me off. What about my backups? I use CarbonCopyCloner to clone my entire disk on an external drive every other day. What about my Apple Thunderbolt Display? And USB sticks and devices?
Before jumping on board the MacBook, I took a look at how often I really use external devices. I don’t remember connecting my MacBook Pro to an external display or ever plugging a mouse in. I’d be hard pressed to find a USB thumb-drive in under 10 minutes — if I even have any at all. And as for the backups, there are adaptors: I got this one from Kanex for $14.
If you have an Apple Thunderbolt Display and plan to connect the MacBook to it, you should know that it isn’t currently supported — you simply can’t do it. It doesn’t bother me because the goal of the MacBook is to use it outside of the house (or on the couch).
The Workflow
You can probably tell that I have a very specific workflow on my desktop. Adapting that workflow to a laptop has been challenging, but with a few tweaks I’m nearly as productive on my MacBook. The compromises I’ve made when working on the MacBook are the same ones I had to make on my MacBook Pro.
To work around the limited screen real estate, I make use of Spaces, which comes with OS X. I organize these spaces as such:
- Desktop 1: browser
- Desktop 2: Atom (I split the panes horizontally instead of vertically)
- Desktop 3: 4 terminal windows
- Desktop 4: SourceTree
- Desktop 5: second browser
- Desktop 6: Affinity Designer
- Desktop 7: Mail and Slack
Since I always use the same apps on the same Space, I have keyboard shortcuts mapped to access them quickly. The major downside is that I can’t access all the information I want at a glance, like reading a web page while looking at my code. But this is the case on any laptop, not just the MacBook.
If I absolutely require two monitors while on the go, the excellent Duet Display app turns my iPad into an external screen. I’ve used it only once, mostly just to see how it works (quite good!), but I think it would easily meet my needs for a second screen.
Conclusion
My opinion is that, to be the most productive, I need a lot of screen real estate. This is a problem whether I use a MacBook Pro or the new MacBook. With that in mind, I didn’t find any cons to the MacBook when comparing it to the MacBook Pro. I did find a lot of pros, though: the light weight, the better battery life, the more comfortable keyboard, the silence from having no fan — these are just a few of the benefits that the MacBook has over the MacBook Pro.
If this is going to be your only dev machine, don’t get the MacBook — the Pro is a better choice if you can only get one machine. But if this is your second computer — one to carry with you everywhere you go — then I absolutely recommend the MacBook!
If you are interested in learning how to code and get certified by one of the world’s top universities, visit .
The 12″ MacBook: A Web Developer’s Perspective was originally published in Optional Bits on Medium, where people are continuing the conversation by highlighting and responding to this story.
I have to set up a MacBook Pro fairly often - when starting a new job and when buying a new personal computer. I created this article back in 2015 when I got my first Mac and have been updating it ever since with whatever I need as my job evolves. I'm primarily a full-stack web developer, so most of my needs will revolve around JavaScript/Node.js.
Getting Started
The setup assistant will launch once you turn the computer on. Enter your language, time zone, Apple ID, and so on. The first thing you should do is update macOS to get the latest security updates and patches.
Homebrew
Install the Homebrew package manager. This will allow you to install almost any app from the command line.
Make sure everything is up to date.
Install Apps
Here are some the programs I always install.
Don't install Node.js through Homebrew. Use nvm (below).
Program | Purpose |
---|---|
Visual Studio Code | text editor |
Google Chrome | web browser |
Firefox | web browser |
Opera | web browser |
Rectangle | window resizing |
iTerm2 | terminal |
Docker | development |
VLC Media Player | media player |
Slack | communication |
Keybase | security |
Spotify | music |
Postgres | database |
Postico | database UI |
Postman | API tool |
Shell
Catalina comes with zsh as the default shell. Install Oh My Zsh for sensible defaults.
Node.js
Use Node Version Manager (nvm) to install Node.js. This allows you to easily switch between Node versions, which is essential.
Install
Install the latest version.
Restart terminal and run the final command.
Confirm that you are using the latest version of Node and npm.
Update
For later, here's how to update nvm.
Change version
Here's how to switch to another version and use it.
And to set the default:
Git
Apple mac movie software. The first thing you should do with Git is set your global configuration.
Input your config and create some aliases.
With the above aliases, I can run
git s
instead of git status
, for example. The less I have to type, the happier I am.SSH
Simplify the process of SSHing into other boxes. Create an SSH config file.
Add the following contents, changing the variables for any hosts that you connect to. Using the below will be the same as running
ssh -i ~/.ssh/key.pem [email protected]
..ssh/config
Now just run the alias to connect.
Generate SSH key
You can generate an SSH key to distribute.
Add key.
Settings
I don't like a lot of the Apple defaults so here are the things I always change.
To get the Home folder in the finder, press
CMD + SHIFT + H
and drag the home folder to the sidebar.General
- Set Dark mode
- Make Google Chrome default browser
Dock
- Automatically hide and show Dock
- Show indicators for open applications
Keyboard
- Key Repeat -> Fast
- Delay Until Repeat -> Short
- Disable 'Correct spelling automatically'
- Disable 'Capitalize words automatically'
- Disable 'Add period with double-space'
- Disable 'Use smart quotes and dashes'
Security and Privacy
- Allow apps downloaded from App Store and identified developers
- Turn FileVault On (makes sure SSD is securely encrypted)
- Turn Firewall On (extra security measure)
Sharing
- Change computer name
- Make sure all file sharing is disabled
Macbook 12 For Web Development Software
Users & Groups
- Add 'Rectangle' to Login items
Defaults
A few more commands to change some defaults. Fine artist software, free download.
Application Settings
Chrome
- Turn off 'Warn before quitting'
- Install uBlock Origin
- Install React DevTools
- Install Redux DevTools
- Install JSONView
- Install DevTools Theme - New Moon
- Settings
- Set theme to 'Dark'
- Go to
chrome://flags
and set Developer Tools Experiments to 'Enabled' - Go to Experiments and select 'Allow custom UI themes'
Visual Studio Code
Macbook 12 For Web Development Tools
- Press
CMD + SHIFT + P
and click 'Install code command in PATH'. - Install Prettier
- Install New Moon Theme
- Install GitLens
- Install Highlight Matching Tag
- Keyboard Shortcuts
- Copy Line Down -
CMD + SHIFT + E
- Delete Line -
CMD + SHIFT + D
- Reload Window - Remove Development Mode from When
- Format Document -
CMD + SHIFT + L
- Copy Line Down -
Rectangle
- Full Screen:
CMD + SHIFT + '
(prevents messing with other commands) - Left Half:
CMD + OPTION + LEFT
- Right Half:
CMD + OPTION + RIGHT
Macbook 12 For Web Development Tool
iTerm2
- Set tab to open in same location
Conclusion
That sums it up for my current preferences on setting up a MacBook Pro. I hope it helped speed up your process or gave you ideas for the next time you're setting one up.