Month: February 2017

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

How to press ‘y’ to navigate to the permalink for a file’s exact commit ID on GitHub.com – 052

Suppose you had a question about the contents of a file at an exact moment in time (or in git-speak: at an exact commit in time). If you were to visit the repo and navigate directly either to a file or the line in question in a file, e.g. https://github.com/saraford/your-moment-of-github-zen/blob/master/main.js#L74 showing the line

mainWindow.webContents.openDevTools();

you might forget or not even realize (like me) that you’re copying the link for the latest version of that file on master (or in git-speak: the version of the file at the current head of master).

In other words, if someone were to come along and make a change to this file, your link to this line of code at the latest commit on master might be a link to a totally different line of code instead of the openDevTools() link.

Press the `y` key and you’ll see that the page seems to refresh. Well, yes and no. The page has updated, but look at the URL now.

https://github.com/saraford/your-moment-of-github-zen/blob/f06f035cfed7c0ea05db8bd3cc25b22c43cea6d7/main.js#L74

now you got the permalink to that exact line of code!

This shortcut is the functional equivalent of clicking Code – Commit – Browse the repository at this point in the history – clicking the file (e.g. main.js) – and then clicking the line number.

This shortcut works for any branch name, specific commit SHAs, and tags, according to the docs. E.g. suppose you were looking at main.js on a branch called windows-fix located at https://github.com/saraford-tips/your-moment-of-github-zen/blob/windows-fix/main.js and you pressed the `y` key. The URL would change to https://github.com/saraford-tips/your-moment-of-github-zen/blob/811aacbd492044c8a02536129edf42862d0a593d/main.js

I hate not having a photo to go alongside a tip, so here’s a picture of a Great Dane next to a small (terrier?) dog, aka how I feel standing next to tall people.

Great Dane standing next to small dog

photo taken from https://flic.kr/p/b4RGX8