Tag: images

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.


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


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 paste an image directly into an Issue on GitHub – 032

If you don’t know today’s tip, be prepared for a life-changing event (provided you are using Chrome).

Suppose you want to open an Issue on a project on GitHub. For example, let’s say you were learning Electron and tried out my your-moment-of-github-zen app on a Windows machine. You’ll quickly noticed that I wrote it on a Mac environment.

App appears offscreen on Windows

First, you can go to the repo, click on the Issue tab, (search to make sure there are no duplicate issues), and then fill out steps to reproduce the issue.

Place the cursor where you want the new image to go, and press Ctrl-v (or your non-Windows equivalent of paste).

Creating a new issue in repo

Not only will you see that the file was uploaded to GitHub, but also the Ctrl-v shortcut generated the markdown for showing images.

image uploaded and markdown generated

To make sure the image is :+1: click on the Issue – Preview tab.

image appears in preview

If you are not using Chrome, you’ll only see two options listed at the bottom of an Issue comment field.

pasting images not supporting in non-Chrome browsers

meaning you’ll have to save the file locally and then drag and drop it into the comment box (or use the Open File Dialog from the selecting them link).