Month: February 2017

How to use Blame on GitHub to find the commit that changed that line or block of code – 059

First time I saw the Blame button, I was scared to put any of my code up on GitHub. I thought, “Why would I want people to publicly blame me?” Fortunately, the Blame functionality has absolutely nothing to do with its connotation.

The Blame button is more of a “Show the commit when this line or block of code was changed.” That’s it. With no blame implied! 🙂

For example, you can look at the 3rd line of the main.js file for my simple electron app.

Blame button for main.js

The timeline of events is as follows:

  1. at some time 7 months ago, I made a commit “added close button” that changed the 3rd line of code. I added “ipcMain” to the constants.
  2. shortly thereafter, about 7 months ago, I made a commit “appears in tray” that changed the 3rd line of code. I added “Tray” to the constants.

The blame button allows you to select a given line of code, e.g. the 3rd line in my example, and work your way backwards up the commit events…

In the image below, you’ll see the first line was added in my initial commit. Then I’ve made some modifications to the 3rd line. But the 4th line (some whitespace) has remained the same since the initial comment. But the 5th line was added alongside the changes to the 3rd line, and so on and so forth…

"appears in tray" commit for 3rd line of code

You have two options to proceed. You can either choose to click the “appears in tray” link to see the diff in the usual commit diff view,

diff showing Tray being added to list of consts

or you can click the box-looking button to the right of the 7 months ago commit date.

View blame prior to this change button

Clicking on the View blame prior to this change now shows you the file before the “added close button” commit was added. Why this commit? Because this “added close button” commit was the last time line #3 was changed after the “appears in tray” commit. You’re just walking back up the log for a given line of code.

image

A few things to notice:

  • the “appears in tray” commit has changed to “added close button” commit
  • line 3 only contains consts for app, BrowserWindow, and ipcMain
  • line 5 is different, because we’re looking at the history of the file when “added close button” was committed

Let’s go one more click up the chain.

View blame prior to this change for "added close button" 

Clicking on the View blame prior to this change for the “added close button” now shows the original file at the time of its initial commit.

Initial commit to the main.js file

You’ve now just walked all the way up the chain of changes to a given line of code.

Perhaps Pedigree is a better term than Blame? E.g. what’s the pedigree of this line of code? I only offer the word pedigree so the button icon could be a

How to upload your speaker slides to your GitHub repo – 058

If you give talks or want to upload extra documentation or slides to your repos, you have a couple of options!

1. Push your PowerPoint slides to your repo to retain a copy

First, you can simply upload your slides, e.g. .ppt or .pptx, to your repo.

ppt file in a repo

You won’t be able to see the slides when you click on the PowerPoint filename, but anyone who clicks on View Raw will download the deck.

powerpoint deck uploaded to GitHub

2. Push a PDF of your slides to your repo for others to view without downloading

Next If you save your PowerPoint slides as a PDF and push those to GitHub,

pdf file in a repo

GitHub will render your PDF files as subsequent images.

PDF slides shown as subsequent images

Note re diff’ing

Unfortunately, because these are binary files, you won’t be able to see any rich diff information for the commit.

Binary file not shown for powerpoint or pdf commit diff

How to write your repo README in a markup language other than markdown – 057

Markdown not your thing? GitHub supports more than just markdown for your Readme markup language. You can view the full list of supported markup languages.

For example, the following readme is written in Creole instead of markdown.

repo README written in Creole

The code used to render readmes on GitHub is an open source project called Markup which is accepting contributions.

Now if you’re like me and love to break software by trying different combinations of things, you might ask, “What happens if I add both a README.md and a README.creole or other markup language file?” It looks like the first readme file that got created wins (i.e. the readme that is displayed). If you delete the readme file being shown (e.g. README.creole as shown in my example) and you’ve already added a README.md file, the README.md file’s contents will be displayed.

How to render a CSV and TSV file as an interactive table on GitHub – 056

If you have a csv or tsv file in your repo, GitHub will automatically display it as a table that you can search and filter on.

csv file displayed as table

Similar to source code, you can click a row (or shift+click multiple rows) to highlight, and copy that URL to send to someone, e.g. https://github.com/saraford-tips/fluffy-octo-robot/blob/master/inventory.csv#L6-L8

Multiple rows highlighted

You can also search within the spreadsheet. Although I couldn’t find a keyboard shortcut, as ‘s’ goes to the overall search this repo search box.

Search within table

How to view and diff a 3D model hosted on GitHub – 055

GitHub has a built-in 3D file viewer that allows you to get a 360 degree view of your 3D models. This 3D file viewer also gives you an interactive diff experience to compare changes between commits!

I created a quick cube using Microsoft’s 3D Builder. I added it to my repo and pushed it up to GitHub.

There are 3 options for viewing the 3D model.

Solid view

Solid green cube

Wireframe view

wireframe of a green cube

Surface Angle

Each surface drawn with a different color

And the grand finale, how to view a diff of a 3D Model.

Using the 3D Builder software, I added a cone to the top of the cube. I pushed these changes up to GitHub.

cube with cone added at top

If you look at the diff of the commit (click the commit ID circled in red above), you’ll see the diff viewer. By default it shows you what’s changed. Since I added a cone, the cone is shown in green (for additive).

green cone on top of wireframe cube

At the bottom of the image, you’ll find the Revision Slider. Click this link for an interactive 3D diff experience!

In the image below, you’ll see how the cone is added.

interactive 3D viewer showing changes as the slider changes

How to view diffs of images in a GitHub repo – 054

GitHub offers 3 ways for you to diff your images. For example, this commit diff shows how I checked in an image and then changed the image completely in the next commit.

commit diff showing how the octocat as Clark Kent has changed into the octocat as Superman w a 'G' logo

At the bottom of the image, you’ll see the options for 2-up, Swipe, and Onion Skin.

2-up

The default view is the 2-up, which shows the images before and after side-by-side.

Swipe

Swipe allows you to do more of a pixel-by-pixel comparison by allowing you to slide a splitter back and forth over the image.

half Clark Kent image and half Superman-octo image

Onion Skin

Onion skin allows you to pick up on subtle changes you might have otherwise missed. Although there’s nothing subtle with the image I picked Smile

animated gif showing a slow change from octo-Kent to octo-Superman

Today’s tip of the day images are brought to you by https://octodex.github.com/. And thanks to the Help Documentation for clarifying when to use Onion Skin versus Swipe!

How to find and use different Octocat images from the Octodex – 053

GitHub users love stickers. Especially at conferences. It’s hard playing Oprah. I’ve never given out so many stickers in my life!

There’s the standard Octocat image, but did you know we have an Octodex?

https://octodex.github.com

If you’ve got questions about what you can and cannot do with your new favorite Octocats, check out our Octodex FAQ for some answers.

My favorite (of course) is Red Polo.

the Red Polo