Skip to main content

27 My Development Environment

Episode 55 · May 15, 2015

Check out my development environment for Ruby on Rails


Transcripts

So today I thought I would explain my development environment to you. So this is what I use every day, what you see in my screencasts is what I really work with, of course I use a higher resolution, I'm on a Retina MacBookPro, so my resolution is a little tiny to be in screencast, so I usually bump things up, but that's the only real difference that I have every day. So, you'll also notice that I show the time and things like my username, and I'll hide those for screencasts because that's a little distracting. This is my real environment that I use every day, screen is just a little lower than normal. I have all the tools that I use and stuff like that.

Number one, I use this the most, is Alfred. I have it mapped to Option-space. Command-space is spotlight search, and if you want to launch Chrome you just type Chrome. Alfred does the same thing, but I can configure Alfred to launch things for us, so at one month, I look users up by their email address all the time, so I can say user [email protected], and if I hit enter, it will launch Chrome, and search for that user in our admin area. So this is really cool, and I can customize that, and make myself a bunch of little shortcuts like this to look up people very quickly or whatever I want to do. So Alfred is probably my number one tool, I love that the most, there's versions of that idea on Windows and Linux, but I just happen to use a Mac, so Alfred is the tool I use for that.

Now the second thing I probably use the most is the terminal. I use iTerm too, it's pretty great, I would recommend that. It's a little bit... a lot more customizable than the built in terminal on OSX, you can get similar kinds of things for Windows and Linux. And then comes the prompt. So normally you're in bash, and that's what ships by default, but I'm using a thing called zsh which you can see up here. And it basically is this is a different prompt that interprets your commands a little differently, so you can have things like autocompleting filenames that work a little bit better than bash would do. So that's useful, because when you're autocompleting something. I don't know if there's any of these, maybe Gemfile. Yeah, you type GE and hit tab, and you get all of these matches from all over the system, and it allows you to continue typing. So bash would just kind of not tab complete or something like that, and it would be a little more frustrating, so zsh gives you a lot of those helpful bits around it. Now I recommend if you use zsh or want to check it out, grab oh-my-zsh, and take a look at their website, install this. They have tons of themes, and tons and tons and tons of helpful plugins to get your git branches in there, whether or not you have staged files, things like that are wonderful and it makes it very very easy to add this, and you can do all these bash, but they're not going to be as easy. So I recommend that, it's pretty fantastic.

And with zsh, I have customized my prompt completely on my own, I didn't use any of the themes that it ships with, I wanted a two line prompt so I could see all my stuff, and have a lot of things in here, and I kind of liked it reading as an English sentence effectively, so this is my username, at "The computer name" using ruby 2.2.2 in "This directory" on the git branch "master", and there's a bunch of cool stuff that's kind of sutil, and you may have noticed this, and maybe you didn't. So if I type gs, and the command was not found, so it failed; my command turns red because the command failed, and if I type ls, and the command worked, and my name is green. So that's a useful thing if you have long running commands, and you want to see if the output of it succeeded or failed. It might appear to work, because you were looking at the debugging output or something, and this is really useful for that. So the other thing that's cool, is that if we were to edit a file, let's edit the Gemfile here, and let's add a new space and save that. When I get a new prompt, it's going to show this exclamation mark here, and that is basically just showing that when you do a git status there is modified files. And if we checkout this file back to where it was, now we don't have the "!" in the prompt. That's just really useful for me to keep an eye on; You know, did I finish things the last time I has here? Do I need to review that? Do a commit on it? Do I need to put it in a branch or something or stash it? It helps me just check myself and say: Oh, yeah, you were working on something before when you left. So that's really helpful. I will say that my config and theme for this is in my Github dotfiles project, so if you come here and come to the zsh directory, you can see my zsh config, and I'm usually fiddling with this. I actually have it load both rvm and rbenv, so if by change rvm happens to be installed, it will load that, but it will also try to load rbenv, so I would recommend don't install both of them, because that might be bad, but this should automatically allow you to have both of those loaded. My theme here is my prompt, all of this is always a work in progress, I've tried out getting your battery charged in there, I've also played with this plus or minus as the prompt instead of the normal dollar sign is customizable too, and I remember having it for some things so if you're using like mercurial, I believe is the HD command, it shows a different character, and if you're not in a git branch, or if you're not in a git directory, if we go cd .., there's a circle. That's something that I totally forgot is there, but the plus or minus just tells me I'm in git, circle tells me if I'm not in git, and that's just a useful thing to keep an eye out. So you can do lots of cool little subtle things like that, and I recommend checking that out, and all the other themes, because they're pretty amazing.

I also have in here a bash profile, this is the same as like a bash RC, you can just rename that file. This is my old config from bash, I don't really remember all that it does, aside from create a few de shortcuts, and cap shortcuts, and so on. But that's worth checking out. And then, I believe my color scheme here is here as well, so if you use iTerm, and you want to use these colors, which I took from monokai??, it's a theme I think I first learned of in vim Manakai?? is loved by a lot of people, it's very vibrant colors, and I can glance at things quickly, so I use this theme in general all over the place. So I use it in terminal, and in vim, and plenty of other places, so anywhere I can use Manakai and keep it consistent, I'll do that, so if you want to see the colors that we use, they're all in here, or if you want to download this file and import it into your color scheme, I believe you go to profiles/colors and you load presets, and it will just show up as profile there, these are all the colors that it will be using. That is that, that is iTerm and zsh, and of course the one that people asked a lot about is MacVim. So MacVim is my personal favorite editor right now, I wanted to learn Vim a long time ago, and I did, and I struggled with it, I was using Linux for a long time using Ubuntu, and I was using G-edit on there, which is similar to Sublime or TextMate, and it was doing plenty good, I was plenty fast at it, but I wanted to get faster, I saw that like all the really really good developers seem to use Vim or Emacs, and I was like: There must be something to that, why are they using that, and not using G-edit or something. So I set out to commit to using it, and it's hard, and it's time consuming, so don't feel bad if you haven't been able to commit to them, but I will say that what I think is the best way that I learned, was to open up your file in Vim, and then just learn how to do all the things that you're trying to do when you need them. So if I'm trying to delete this installation section when I would learn vim, I would just say: Okay, I'm in Vim now, I'm in the whatever mode this is called, like navigation mode, or edit mode or something. When I'm here, I want to be able to grab this installation section, so how do I highlight this and then delete it? So I would teach myself all these things, so first I would learn how to navigate with h,j,k and l, and then I would that Shift-v puts you in a visual line mode, and then "j" can help me go down and select these, and then hitting "d" would delete it. And then, I have an extra line here, so I learn: How do I delete one line? "dd" does that.

I learned these when I needed them, and they would actually stick by me doing it that way, I didn't really find any other ways of learning Vim to be that useful, like, people like to make games in the browser that use Vim commands and try to teach you that, but because it wasn't a real experience, in my real editor and I wasn't trying to do real work, it didn't stick with me. So this is how I ended up learning it, and I became proficient at it, so as probably as fast as I was in G-edit, after about one or two weeks, which is pretty quick. So I was slower for a while, but I learned all of the things that I needed, and then I could do most of my work in vim without having to use the mouse, and saving mouse time of expanding folders, and this is one of the things.

If you're in Vim and you're watching other developers who don't, you're going to see them stop, and they're going to expand these folders, and they're going to search for files manually here, and it's just kind of like painful to watch, that is what I wanted to avoid, and I wanted to be the guy that's quick and can open up a file, and just really quick jump into wherever, and I wanted to be that guy, because I saw developers like Gary Bernhardt, super fast in Vim, and that's why I wanted it, and I was like: Man, this is cool. So the way that you can do that, to get started is great, but you're probably going to want some of these nicities like Command-T, or I believe it's Control-p on Windows or Linux. This will open up a file named browser thing at the bottom, and you can type one character and say "r", and that will be limiting all of these to files that match with the letter "r" in it, and "re" will bring me the readme, and I can hit Enter and jump to it really quickly, you can do this in Sublime. I think Sublime is at the point now where you can do all of these stuff in Sublime, but yeah, I just find that you have tendencies to use the mouse more and stuff in a Visual editor like that, whereas vim will enforce you to use the keyboard as much as possible. In MacVim you can use the mouse to click on things if you need to, or kind of just want to do that, but you can also go in here and do it with a keyboard. So if I put my mouse over here, I can do Control-W to switch these windows, and I can jump back and forth, and then when I'm in this file browser, I can just hit Enter and open these folders as necessary and jump right back. So either way, I think vim is just useful for that, so I'd encourage you to check it out, and start without any plugins, and just use the basic vim, because I think that's the best way to learn it, but if you want to, check out Janus, which is the config that I use generally, I customized it a little bit, but in general Janus is a bunch of plugins, and a system to help you write configs for vim. So check this out, they have all these themes and stuff that come with it, but they also have links to very good tutorials, and explanation of how to get into your modes, so you can get into "insert mode", "normal mode", "visual mode", they have all the commands for that.

I have some other things here, like your leader keys, or a whole other things to learn, but they also have all these basic customizations, so these are things that you're looking at right here just for vim itself by default. So these are all regular vim things. Now down here, this Control-P plugin is the file matcher here at the bottom, and it ships with a ton of these, and I don't use half of them, but it's very useful to have because you can see your trailing whitespace for example. When I save my files, if I add an extra space, you can see that they show up as red where it's like: Hey, you don't want trailing whitespace. If I hit save, as part of the save process I overrode it so that it will remove those whitespaces at the bottom, and it should also retab things. So for some reason you accidentally have real tabs, it should automatically convert those to two spaces instead, which is pretty nifty.

You can do a lot with vim, especially if you get into scripting, but you definitely don't need any of that stuff. And Janus basically gives you all of this things that you would have as nicities in sublime. So switching to them from sublime, I definitely recommend Janus, it's super duper easy to get started with, and I also have a vim folder in here, so gvim is the visual vim, so it's this one, and regular vim, .vimrc files will apply to all vim. Including if you type vim . in terminal, this will just open it in terminal instead. So I have these, I believe gvimrc.after is the one to take a look at.

My fonts, line color, so the status bar changes color. So right now it's purple, it just changes colors and stuff, and you can keep track of that and it's just useful. Take a look at this too if you're interested, and that is pretty much my setup, I don't use a whole lot of other things, I use Dropbox, this is Alfred, I use ScreenFlow for recording, and it's awesome on the Mac; Highly recommend that if you want to get into screencasts, and cloudapp is one of my favorite things. So setting up a YouTube channel, and I can make screenshots, and they will be automatically uploaded to the browser. This is loading really really slowly, but for example, if I wanted to take a screenshot here. I can just do Command-Shift-4, hit Space, and it will grab this window, and it will automatically start uploading, and then copy it to the clipboard, and that's it. You have your screenshot uploaded, and you can paste it to co-workers or whatever. So I really love that about Cloudapp, and there's similar applications and Windows and Linux ones, and stuff like that too. So that's my current setup, it's always changing, but I try to keep it lightweight, not change it too much at this point. But I'm always fiddling because there's cool new stuff out there.

That is all I've got, but I would like you to post anything that you use, and why you like them in the comments below, because I'd love to see that, and maybe it might be something that I'm like: Oh, wow, that's really cool, I had never seen that, or never given it a change before, and add that to my repertoire. So yeah, hope this helped, and be sure to post links in the comments

Discussion


Gravatar

Vim tip: you can type :help [command] and vim will tell you what that command does. sometimes these descriptions can be so descriptive they're sort of confusing.

the one that saved me SO MUCH time, but I didn't know about for a year, was =

:help =

and also.. gg = (shift + g)


Gravatar

If working on OSX, check out Dash for API referencing and snippets - https://kapeli.com/dash - integrates with most major IDE's - searchable, offline mode, etc...


Gravatar

just check oh my fish i think it's better than oh my zsh

Gravatar

you do not get auto complete with on my fish

Gravatar

you can custom omz to add some fish-like behaviour, for example I use autosuggest

Gravatar

how to do like that can u send me a link please? thank u

Gravatar

Gravatar

This is a good stack. You should add tmux to your toolbox, it help a lot managing multi-project and complexe projet + it's a good start for remote (remember all good dev are not in big town) pairprogramming.


Gravatar

Awesome setup! Thanks for posting this. In my case, I switched to vim in January, got up to speed in two weeks. The main way I learned was having a cheat sheet with no more than 7 commands that I would revisit everytime I needed. The trick is, once you learn it, delete it from the cheat sheet and add another one. If you don't learn it after 2 weeks, delete it as well (since you won't be using it). That has worked like a charm for me.

Also, one of the main reasons to use vim is the dot ('.') command to repeat the last command. Extremely fast and useful when combined with search.

Tmux is the perfect vim companion if you use it in the terminal. Splitting panes, windows and sessions keeps everything highly organized, and you can customize it to make it behave just like vim.

All in all, so much stuff can be overwhelming. Take it easy, one step at a time, and you'll eventually get up to speed. The beauty of this is that it is so vast a topic, that you never stop learning.

@Chris I'd love to help out teaching this stuff. I have it fresh on my mind, since I'm a beginner as well. Feel free to PM :)

Gravatar

I really like you cheatsheet method. I'll try to use it in my everyday learnings to avoid what's not important while giving confidence in what you've memorized!


Gravatar

On the topic of users moving from sublime to vim - some other helpful tools that a a sublime user, or any user would want
https://github.com/Valloric...

For those who use rspec and want to run specs by line number within the file rather than the command line.
https://github.com/thoughtb...


Gravatar

Another really great stack is https://github.com/skwp/dot...

it includes the Zsh, vim, tmux, plus a ton of plugins for them, with a super simple install script.

Also the thoughtbot dotfiles are pretty awesome right out of the box.

https://github.com/thoughtb...

Gravatar

I second the skwp dot files stack. That's my favorite. A lot of nice shortcuts added to VIM from those Ruby packages as well.

Gravatar

Jared thanks for sharing the SKWP. I can't tell you how many times I have had to configure all these different components together using other dot files that I have tried. Now with this one, every single thing works like it should!
Now I just have to figure out how to make my whole environment automated with something like tmuxinator. Thanks for making my life easy!! cheers! :)


Gravatar

Hey, nice video :)

You didn't talk much about your hardware equipment, do you use MacBook Pro 13' or 15' ?

Gravatar

Great question! I'm using a Macbook Pro Retina 15" and a Thunderbolt display. Here's some more info: http://excid3.com/about/


Gravatar

I set up iTerm and Oh My ZSH just as in the video and everything works fine except when I first start iTerm my username starts out red, however it will turn to green if I type any command, ie: cd. Any ideas why?


Gravatar

oh my zsh is great. I haven't gotten too much into vim itself as I've learned that refactoring horrible code is much easier in an actual IDE when you don't know vim too well.

As others have stated, tmux is a great tool however -- I use it religiously.

With my basic terminal looking like:
http://cl.ly/012N312d050s

on the 2nd line, the [:0s] is how long the last command took to complete.

Then my tmux with vim
http://cl.ly/302z3M1t1j40

where my tmux uses powerline, and my vim also uses powerline for a pretty cool look and a visual way for me to see what mode i'm in, as well as what branch i'm in as well.

And if anyone wants the tm script I have it's on a gist here: https://gist.github.com/ch0...

where in you would type:
tm and be presented with a prompt to select either "1" or "2" for your default prompt ( which in mine is zsh but named bash in the prompt ) then once you have initiated a tmux session "1" becomes that session, and goes on for as many sessions/apps as you've created allowing you to quickly dismiss an entire app and pull up a new one and pickup right where you left off.


Gravatar

Hi Chris! I'm getting this error when trying to install your color scheme "The selected file could not be read or did not contain a valid color scheme."

Gravatar

If you mean the ZSH theme, make sure you copy it into the ~/.oh-my-zsh/themes folder.

Gravatar

When I try and import the profile.itermcolors file within the colors tab in iterm2 preferences, that's when I get the error. I did also try and install the ZSH theme as well and I get this error "/.oh-my-zsh/themes/excid3.zsh-theme:6: parse error near `\n'". (I copied the file into the theme folder and changed the .zshrc file to load your theme.)

Gravatar

Hmm, works just fine for me when I import it here: http://cl.ly/g2px It's the one named "profile" after you import.

As for the zsh theme, I'm not sure why this line would cause any problems: https://github.com/excid3/d...

Gravatar

Ah i'm a dumb ass and downloaded the files from git incorrectly - works fine :) Thanks!

Gravatar

That would do it! :)


Gravatar

I've been using sublime text for my rails and javascript apps but I'll be interested in using vim.
Could you make a screeencast on vim usage and customization.


Login or create an account to join the conversation.