The worst part (or perhaps the most fun for some) of getting a new laptop is setting up everything you need as a web developer. Adding programs and tools that you had installed over the many years of ownership of your previous laptop can seem daunting. With the release of the new Macbook M1 laptops, there are some interesting new considerations as well that you may not be aware of. So, let's jump in and get the basics set up so you can hit the ground running developing your next project.

## Rosetta 2

The first thing you should install is [Rosetta 2](https://developer.apple.com/documentation/apple_silicon/about_the_rosetta_translation_environment), which allows you to run Intel-based software on the new ARM chip. Because Apple has created their own chips they needed a way to provide backward compatibility with programs that do not yet support ARM and Rosetta 2 is that solution.

`/usr/sbin/softwareupdate --install-rosetta --agree-to-license`

## Homebrew

[Homebrew](https://brew.sh/) will be the best way to add the other software and tools on our computer, so we want to install that next. A quick tip that is good to know is when you go to open the built-in Terminal in the Applications folder: right-click, select *Get Info,* and check the *Open with Rosetta* box.

`/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"`

## Tools

There are a lot of tools to consider when setting up your Macbook from scratch, so one of the quickest ways to add a lot of the important ones is to use a script. I recommend [the script created by the author](https://github.com/CxGarcia/setup) of the original post that this is based on, but feel free to use a different one or modify this one for yourself.

Opening the downloaded script folder in your terminal you can choose to run the install script or modify what will be installed from the brew-installs.sh file. Once you're satisfied, run the script.

Some of the tools and applications included in the script are:

* MongoDB
* node
* git
* zsh
* Firefox
* Chrome
* VSCode
* Zoom
* Slack
* Discord
* Notion
* and more...

`./brew-installs.sh`

**Note:** if it doesn't work try running `chmod +x brew-installs.sh` first

## nvm

Something that is not included in the script is [nvm](https://github.com/nvm-sh/nvm) because there have been difficulties installing this with the ARM chip. To get around this you will have to use a `curl` command and make a couple of modifications afterward.

`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.37.2/install.sh | bash`

In your .zshrc file (.bash-profile or .bashrc for bash):

```
export NVM_DIR="$HOME/.nvm"
#This loads nvm
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
#This loads nvm bash_completion
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"
```

## Git and GitHub

Git was installed with the brew install script so make sure to configure the settings and [use a personal access token to authenticate GitHub](https://docs.github.com/en/github/authenticating-to-github/creating-a-personal-access-token).

```
git config --global user.name < USERNAME > &&
git config --global user.email < EMAIL > &&
git config --global --list
```

## VSCode

Make sure to use the [Settings Sync plugin](https://marketplace.visualstudio.com/items?itemName=Shan.code-settings-sync) to keep all of your VSCode settings in sync with a stored GitHub gist.

## Conclusion

You should now be all set to start developing! Thanks to the script many tools and applications were installed for us, minimizing the manual install process.

## Credit

*Today’s Tuesday Tips was adapted from [a post on the Logrocket blog](https://blog.logrocket.com/set-up-macbook-for-web-development-in-20-minutes/).*


## Landing Pages that Convert

Landing pages can make or break a product sale or other intended call-to-action. It can be difficult to create a landing page that boils down your product or service into a quick and easily consumable page. Yesterday, Dribbble posted about [how to design a landing page that converts](https://dribbble.com/stories/2020/09/10/design-landing-pages-that-convert) which offers several helpful tips on designing phenomenal landing pages. Tips include removing the main navigation, using shorter forms, and more.

## Scaffolding Web Development Tools

Many of us as web developers are constantly coming up with ideas and creating new repositories for them. But we want to get right in and starting coding our idea, and the last thing we want to do is take a long time setting up the basic elements of a new project. On Wednesday, SitePoint posted about [10 scaffolding web development tools to start new projects faster](https://www.sitepoint.com/start-new-projects-faster/). The list includes Meteor, Sails, Svelte, and more, giving a great place to start for any developer.

## Design Systems

Design systems help maintain consistency and brand presence across an organization. They take a lot of time and effort to create and maintain, but they are well worth the result of a elite-looking company. Toptal recently posted [a guide to design system models](https://www.toptal.com/designers/ui/design-system-model) that includes use case and principles to remember when creating a design system for your organization.



## WordPress Auto-Updates

With the recent release of WordPress 5.5, an auto-update feature was added for plugins and themes. This goes along with the auto-update feature for WordPress Core that was recently added. Allowing your WordPress site to update your themes or plugins can have pros and cons, which are highlighted in [a recent post on speckyboy.com](https://speckyboy.com/should-you-use-wordpress-auto-updates/). Luckily, you can choose to toggle this feature on a per theme or plugin basis.

## 10 Online Design Tools

Yesterday, Dribbble posted a list titled _[10 online design tools you never knew you needed](https://dribbble.com/stories/2020/08/24/online-graphic-web-design-tools)_. The list includes many great online tools like a brand book creator, a free screen recorder, and a sub-list of Chrome extensions. The next time you are starting a project, check out some of these awesome design tools!

## React vs Angular

Yesterday, SitePoint posted a phenomenal in-depth article [comparing Facebook's React framework to Google's Angular](https://www.sitepoint.com/react-vs-angular/). The post compares and contrasts their features, ecosystems, and more. It is a great read for developers of all skill sets with these frameworks and is a good read to decide which framework works best for you.



## Most Appreciated Web Solutions of 2020

Web Designer Depot recently posted a list of [47 most appreciated web solutions of 2020](https://www.webdesignerdepot.com/2020/08/the-most-appreciated-web-solutions-in-2020/). The list ranges across many areas of web design, including WordPress tools, logo creators, and other web development services. Check out the list for some services you have seen and new ones you can add to your tool belt.

## Bootstrap Alternatives

[Bootstrap](https://getbootstrap.com/) has been an industry-standard framework to make it easier to develop modern responsive websites. However, Bootstrap has opened the door for a long list of alternative frameworks, each with their own merits. A [recent post on the DEV community](https://dev.to/codesnail/top-bootstrap-alternatives-4947) highlights five alternatives to Bootstrap, including [Tailwind CSS](https://tailwindcss.com/), a personal favorite of ours.

## Becoming a Full-Stack Developer without a Degree

[A post on the DEV community on Saturday](https://dev.to/catmcgeecode/want-to-be-a-full-stack-developer-without-a-degree-this-is-what-you-need-2kmm) gives a great list to help become a full-stack developer without a degree. The list includes tangibles like "one big project" as well as soft skills like personality and drive. It is a great start for new developers looking for some guidance on getting to the next step.


Posts Tagged with "tools"

Tuesday Tips

Friday Facts

Wednesday Wisdom

Monday Medley