Add a screenshot to your Github repo

Today I learned… that you can add images to a Github repository file! I’m now drunk with power and the desire to decorate all my repos with screenshots.


![alt text](screenshots/filename.png "Description goes here")

This approach (with a relative filepath to screenshots/filename.png) assumes your screenshot is part of your repo. For student projects, personal work, and other small stuff, including screenshots in your repo is no biggie.

If you don’t want the screenshot in your repo, you can upload it somewhere else and link to it directly like so:

![alt tag]( "Description goes here")

.png is the preferred file format.

To take a screenshot on a Mac, press COMMAND + SHIFT + 4 at the same time. By default, the screenshot is saved as a .png to your desktop.

Reasons why repo screenshots rule:

  • screenshots illustrate what the project does
  • they help distinguish your repos from one another
  • they can help you remember projects you worked on a while ago
  • they show off your ability to document your work*
  • save you from having to clone in a project and start up a server to remember what it looked like
  • make a pretty portfolio of your work

* Documenting your stuff helps future-you and everyone else you might ever work with (including maybe your manager or boss). The people who do well in their careers are often those who take the time to record what they did, how they did it, why they did it that way, and share it with others. The ability to document one’s work is something I always looked for when making a hiring decision.

Screenshot action shot:

Screen Shot 2014-09-10 at 10.16.02 AM

I don’t expect to win any graphic design awards here, but I can surf my own repos and remember what I did at a glance, which is pretty sweet.

Quickly add lines to .gitignore using echo in the command line

Today I learned… that you don’t have to open .gitignore in your editor, add a line(s) to it, save it, and close it. You can do all that in one step from the command line using echo!

Here’s a preview:

$ echo '.DS_Store' >> .gitignore

How it works

Here’s a common scenario. You do git status on your working folder and discover git wants to add some file you don’t want added to your remote repository, like the pesky .DS_Store file.

Thanks, but no thanks, git. I don't want that .DS_Store file in my git repository.
Thanks, but no thanks, git. I don’t want that .DS_Store file in my git repository.

If your git project doesn’t already have a .gitignore file, create one in one step by typing this while in your project’s root directory:

$ touch .gitignore

From here, you could open that .gitignore file in an editor and add lines to it, save it and close it, but that’s rather cumbersome if all you need to add is one or a few lines.

Here’s a faster way, using “echo” to push some new data into the file.

$ echo '.DS_Store' >> .gitignore

The double >> is important. If you type just one >, you’ll overwrite the existing contents. Using >> appends your echo string to the end.

For a sanity check, open up .gitignore and you’ll see that .DS_Store has been added.

Once you’re more accustomed to using .gitignore you’ll probably come up with a “boilerplate” .gitignore to copy and paste into all your projects, but you’ll probably never reach a point where you aren’t occasionally surprised by an unwanted file showing up in your git status.


Automate Express server restarts with Nodemon

Today I learned… that you don’t have to navigate to Terminal, press CTRL + C to stop the server, and re-enter node server.js to start up the express server again in order to see your latest work in the browser.

There’s a better way: get Nodemon and automate this repetitive process!

Nodemon will watch the files in the directory you run it in and restart your server automatically when it detects a change.

To install Nodemon:

$ npm -g install nodemon

To get Nodemon running:

$ nodemon server.js

Leave that Terminal window open and let Nodemon work its magic.