GitHub now has view modes for image diffs. | Hacker News Reader

GitHub now has view modes for image diffs.

github.com

570 pointsjrnkntl58 comments

If you're just looking at the screenshots, be sure to look at the Swipe, Onion Skin, and Difference options. I missed them at first.

Github makes the best damn pickaxes in the industry.

Pretty sure a joke just flew over my head. woosh

Anyone care to explain?

It's a reference to this saying: http://cdixon.org/2011/02/05/selling-pickaxes-during-a-gold-...

I'd also consider it an homage to git's highly useful pickaxe functionality, which lets you easily find commits that added or removed a given string, for example: git log -Sgithub shows you revisions where "github" was added or removed from the repository. Turns out that "git pickaxe" is also an alias for "git blame".

Blog post: https://github.com/blog/817-behold-image-view-modes

This should be the OP. Thank you.

OP[1]. It does not mean what you think it means.

[1]: http://www.urbandictionary.com/iphone/#define?term=op

Great job Kyle! I'm sure this feature has your hands all over it :)

You'd think, but that's all my boy Cameron Mcefee. Wrote down some ideas on a wiki page and he showed up with this a couple weeks later :)

Github is pushing so many envelopes. I don't pay them any money monthly yet, but every single time I see one of these updates - it makes me want to open my wallet to just make sure they don't go out of business.

I have a mancrush on Github. Really!

Same here, they gave me a free student account so I have the private repo I need now, but rest assured it wont be long before I start paying them!

Thanks for mentioning that! I had no idea they gave free private repos to students.

For anyone else, you can apply for the free student account here: https://github.com/edu

I kind of like github enough to pay even though I'm a student. It will only make me good to skip one pizza anyway =)

I have the $7 account type.

Don't really use the included private repos yet, but I'm so happy with them that I kept paying.

The people at github really get the social aspects of version control. This is one of those things that can make the designers get on board with version control for your project and make it useful for everyone and not just a chore for them. Great job!

Btw, anyone know how they are doing those various views ? Are they using Canvas or is there something else ?

I love that they are doing all of this with just css & js and no flash.

It is things like this, that make me excited about the future of the web.

It is highly likely we will see more complex things with non-flash technologies, than we have seen with flash technologies to date, in my humble estimation.

The swipe and onion skin are pretty simple. Both of them put the images in the same place. When you swipe, the width of the top image changes. For the onion skin, the opacity changes.

Difference has some canvas magic going on.

This is brilliant!!!

Thanks for this explanation. That makes total sense :)

A while ago there was a comment here on hackernews which mentioned a designer talking about how much better git maps with a designer's workflow. (http://news.ycombinator.com/item?id=2268004)

The basic gist was that designers like to keep around lots of versions and this gels well with git's easy branches.

That coupled with these kind of great tools really give me hope for a version control strategy that is useful to both designers and hackers.

Can anyone see a github wrapper with some nice UI making version control for the average user more palatable?

Perhaps github are positioning themselves to take on dropbox in the near future.

Yes, a really slick client app geared towards design inclined folk and more storage space.

This idea is going into OS X Lion as "Versions"

http://www.apple.com/macosx/lion/

From memory, this is no different than Microsoft's versioning correct? (Albeit Microsoft's implementation is well hidden. I think I read an article linked here on HN about it).

I wonder if this'll use a Git backend, like XCode 4 does.

I doubt it'll happen. But a man can dream!

This is really great!

But - another useful option would be mouse rollovers to switch between two images (which I think would work better than Onion Skin).

The swipe feature doesn't work for you? Onion skin is to gradually change the opacity of the new one while keeping the old one constant but below while swipe is a hard line difference that you can move.

I like the swipe feature, but it's harder to grab and drag that tiny handle than to just roll over an image. With rollovers, I'd be able to flip through the two much more rapidly and simply.

Also, I should mention that Kaleidoscope is one of my favorite apps: http://www.kaleidoscopeapp.com/

In the short term, I bet a greasmonkey script could accomplish this fairly trivially.

Yes, I often find blink comparison useful. A keypress to switch between opposite ends of the onionskin and swipe bars would do the trick.

This could be very useful for designers...

Ya think? :p

I think the best part is that this will make it much easier to evangelize GitHub to designers. It's not like GitHub wasn't a great tool beforehand.

Wow, truly awesome implementation. Way to nail it, Github!

Nice. What I would like to see is having swipe and onion skin modes working without dragging the slider: just move your mouse over images and get swipe position move along or opacity change accordingly. Of course, sliders should still be there—and make them bigger, Fitt's law, you know. Probably some more prominent indication for opacity would not hurt too.

Now I can solve all those 'spot the difference' games. Bwhahahah!

Just cross your eyes.

Or uncross them--i.e. moving your eyes out also works.

I really wish GitHub would add support for Mercurial.

There's nothing wrong with BitBucket - I use that right now - but it's clear that GitHub is the innovator and market leader in the field of online source repos.

There's the Hg-Git plugin: http://hg-git.github.com/ I have no idea how well it works, but I know we have customers using it now.

I saw that sometime ago but it looked like

a) A crutch

b) Abandonware

But if you're saying that people are using it then maybe I ought to give it a shot.

There was some interesting discussion about the current state of the hg-git plugin on the Changelog show last month (episode 0.4.9) when they interviewed Scott Chacon from Github.

I use it for RubyPython.

> I really wish GitHub would add support for Mercurial.

Hrm...ah here we go.

http://hg-git.github.com/

> but it's clear that GitHub is the innovator and market leader in the field of online source repos.

You were saying?

Github is now about social designing too. This could help designers get feedback on designs and other designers could possibly fork and improve on the designs.

Well, certainly it's an awesome move on behalf of Github—none can say the opposite, but I don't think it could attract designers (or at least, yet). Github is very code-centric; I mean for to "upload" new content in your repo you have to go through terminal commands and stuff. Not appealing for the designer. If and when Github can also be maintained through visual app(s), then it'd a cool tool for designers to use. But as far as I know, there are lots of professional designer communities out there already.

Although i love github and this is yet another brilliant feature, we should give props where due as this as been built into tortoisediff for a while and i am sure many before it.

http://tortoisesvn.tigris.org/TortoiseIDiff.html http://imagediff.tigris.org/

what's the algorithm used in "difference"? delta-E? subtractive blending?

It's using context-blender (https://github.com/Phrogz/context-blender) an implementation of the Photoshop blend modes.

This looks great, even more motivation for me to get my girlfriend (who is a designer) to use git. Does anyone have any reccomendation for a user friendly GUI based GIT client for Mac?

I still stick with GitX, but Tower[1] looked pretty cool during its beta.

[1] http://www.git-tower.com/

GitX is nice, but there's a fork of it that's so much nicer:

http://brotherbard.com/blog/2010/11/experimental-gitx-update...

http://stackoverflow.com/questions/83789/what-is-the-best-gi...

http://stackoverflow.com/questions/455698/best-visual-client...

Excellent idea. Is it me or does the diff for 2_transparentPixels.png look incorrect? Seems to ignore the shadow.

Wow. Github just turned into something that graphic/web designers can actually use for image revisions etc.

The visual cue that the size of the image was the change made is especially clever. Really good thinking.

Swipe mode doesn't seem to be working on the iPad in safari.

Otherwise... Awesome!

Very nicely done. I want it for subversion now!

Sorry, I'm not hip enough so you just downvote me?

Reply on news.ycombinator.com