Setting up a basic dev environment for noobs

-
This is a tutorial for beginners on how to set up a dev environment on a Mac/OSX (since you'll probably be using one as the primary laptop for your job).

Text Editor - Sublime Text


You'll probably want at least a text editor like [Sublime Text](https://www.sublimetext.com/). Install it, and then set up a `subl` keyword that you can use to launch Sublime from the terminal (eg. `subl filename.txt`)

    sudo ln -s /Applications/Sublime\ Text.app/Contents/SharedSupport/bin/subl /usr/local/bin/subl

Next, [install the package manager for Sublime](https://packagecontrol.io/installation).

Then you'll want to install a [nice dark theme](https://github.com/buymeasoda/soda-theme).

Terminal - iTerm, Oh My Zsh


Download [iTerm2](https://www.iterm2.com/). It's much better than the Mac's stock terminal.

Fire it up and install [Oh My Zsh](https://github.com/robbyrussell/oh-my-zsh) via the following command:

    sh -c "$(curl -fsSL https://raw.githubusercontent.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

This will make your terminal look prettier and give you some pretty sweet features like telling you what git branch you're on.

git


You should set up some aliases to save you some keystrokes. The following let's you type `git co <branchname>` instead of `git checkout <branchname>`:

    git config --global alias.co checkout

Comments

Post a Comment

Popular posts from this blog

Docker for noobs

-
Source Create your Dockerfile FROM debian:jessie # Replace shell with bash so we can source files RUN rm /bin/sh && ln -s /bin/bash /bin/sh # Set environment variables ENV appDir /var/www/app/current # Run updates and install deps RUN apt-get update RUN apt-get install -y -q --no-install-recommends \     apt-transport-https \     build-essential \     ca-certificates \     curl \     g++ \     gcc \     git \     make \     nginx \     sudo \     wget \     && rm -rf /var/lib/apt/lists/* \     && apt-get -y autoclean ENV NVM_DIR /usr/local/nvm ENV NODE_VERSION 6.9.1 # Install nvm with node and npm RUN curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.29.0/install.sh | bash \     && source $NVM_DIR/nvm.sh \     && nvm install $NODE_VERSION \    ...
Read more

Symlinking

-
const execSync = require('child_process').execSync execSync("rm -rf node_modules/@app && ln -sf ../src node_modules/@app") execSync("[ -h ./node_modules/@static ] || ln -sf ../static ./node_modules/@static")
Read more

Flexbox for noobs

-
Making a CSS block grid is super easy with Flexbox. Check out this basic example I made . All you need to do is add the following lines of CSS: ul {   display: flex;   flex-wrap: wrap; } li {   width: 25% //This makes 4 columns per row. Adjust to taste   //flex-basis: 25% also works as well } If you want all the grid items to have the same height, add "display: flex" to each of the list items.
Read more