12 ms·

Show HN: GitHub style split diffs in your terminal

178 points by milkbikis 5y ago

nyellin 5y ago
Is anyone familiar with a good way to programatically create a diff like this as an image? I wrote a small script that tracks changes to your kubernetes cluster and sends a diff of the yaml to Slack. It works but I want to prettify the diff with a GitHub style diff and I need it in image format to send to slack.
- milkbikis 5y ago
  I actually tried to automate the screenshots for this project's readme using GitHub actions, but struggled to get it to produce the same quality screenshots as my local machine. This is the script I use for now, which has to be invoked manually: https://github.com/banga/git-split-diffs/blob/main/scripts/generateScreenshots.sh https://github.com/banga/git-split-diffs/blob/main/scripts/g...
  - nyellin 5y ago
    Thank you. If you find a better way which works on a headless Linux container let me know. I would be interested in the older versions of your automation even if the output is worse quality so long as the quality is acceptable.
weitzj 5y ago
I enjoy having good terminal ergonomics for Git. What works for me is tig for git diffs. Also very impressive is kitty-diff. If you use kitty as your OpenGL enabled terminal https://sw.kovidgoyal.net/kitty/kittens/diff.html https://sw.kovidgoyal.net/kitty/kittens/diff.html
- kbd 5y ago
  I forgot kitty has kitty-diff! I love kitty as my terminal.
gigatexal 5y ago
I’ve been looking for just this!!! Thank you!!
nfoz 5y ago
I just use `vimdiff`, but this looks better.
- Brian_K_White 5y ago
  Same. I mean... vim, right there already for free, and the invocation is rather ridiculously simpler. And vimdiff is even an editor not just a viewer. Now if it was say, Meld in a terminal, that would be worth talking about and I installing some stack as a dependency.
- gnufx 5y ago
  Bad luck! Emacs Ediff worked well for me before Git, and it still does (frequently in a tty, and preferably not with Git).
kbd 5y ago
I already use delta for this: https://github.com/dandavison/delta https://github.com/dandavison/delta I thought delta was fairly well-known by now so I was surprised to see this project not mention it (the readme already has a section for that). I wonder what they've chosen to do differently, besides write it in Node.js.
- milkbikis 5y ago
  Yeah I (un)fortunately learned about delta too late or I probably wouldn't have made this. The main difference is that delta's default styles and appearance did not appeal to me. I'm sure it can be customized, but I wanted something that looked great by default. I especially like that the syntax highlighting matches vscode's since that's the editor I use for work.
  - kbd 5y ago
    > syntax highlighting matches vscode An that's cool. I've always had a dream of having the same syntax highlighting set up everywhere: vscode, bat, vim, git diff... etc.
    - d76d6776yudsy 5y ago
      check out base16 http://chriskempson.com/projects/base16/ http://chriskempson.com/projects/base16/
      - r0rshrk 5y ago
        link is dead for me
  - Noumenon72 5y ago
    I agree that's important! Delta's screenshot colors are so ugly that yours looks like the far superior product. It also seems more focused on diffs. I feel like I could drop in your project instantly, while delta seems to expect configuration.
- 5y ago
dikaio 5y ago
Nice work!
bovine3dom 5y ago
Related but for single pane diffs: https://github.com/so-fancy/diff-so-fancy https://github.com/so-fancy/diff-so-fancy
inshadows 5y ago
> package.json Bye. Context: What JS dependencies do is unheard of: https://news.ycombinator.com/item?id=26889543 https://news.ycombinator.com/item?id=26889543
- VWWHFSfQ 5y ago
  what should this be made with
  - deathanatos 5y ago
    Why Rust of course! /s More seriously, as much as I'm personally not a huge fan of JS (but this is TypeScript?) I don't see how such comments add to the conversation. This particular package even seems to be very considerate with its dependencies: there's only a half dozen, and relate to obvious things like terminal coloring/manipulation, syntax highlighting, and diff generation… Now, I've not explored the full tree to see if those drag in the world, of course. Sometimes, I think the hate on dependency trees gives them a bad rap. Code reuse lets people build things easily & quickly without having to badly reinvent every wheel! Sometimes, I get notified of a JS dependency with a security vulnerability where if a user can control how many spaces are used for indentation in some library's pretty-printer they can RCE and I die a little inside. I think there are easier ways to get a side-by-side diff, but this tool does do a remarkable job of reproducing GitHub's aesthetics.
    - inshadows 5y ago
      It's not about language nor dependency tree per se. It's about what is in that dependency tree. When I depend on a library A in say Python I can be reasonably sure that it won't download and execute random shit from Internet, nor that it will pull tons of other crap to log to console in colorful ANSI boxes. Basically, it's about NPM ecosystem, which is anything but trustworthy to be run as a terminal application. EDIT: Anyway, didn't mean to shit on author's work. (S)he apparently put fair amount of work into it, and the result looks great.
      - 5y ago
seabass 5y ago
This is cool! A bit slow to start up, probably due to starting up a node process each run, but looks great. Wondering if you have a theme that doesn't include a background color as I quite like my terminal's defaults.
- milkbikis 5y ago
  The slowest operation is syntax highlighting: https://github.com/banga/git-split-diffs#performance https://github.com/banga/git-split-diffs#performance. I have a PR out to improve that somewhat. Good point about the themes, I'll add one. I'm hoping to make it easy to customize individual theme colors so you could unset the background colors, for example
manannayak 5y ago
Nice work, banga!
- milkbikis 5y ago
  :) thanks nayak!
nishparadox 5y ago
I've been using delta: https://github.com/dandavison/delta https://github.com/dandavison/delta It can be easily set up...
busterarm 5y ago
You can just use icdiff to get handsome-looking split diffs in terminal. https://github.com/jeffkaufman/icdiff https://github.com/jeffkaufman/icdiff in your .gitconfig [diff] tool = icdiff [difftool] prompt = false [difftool "icdiff"] cmd = /usr/bin/icdiff --line-numbers $LOCAL $REMOTE | less -eFXR then git difftool
nickstinemates 5y ago
Looks beautiful
AveryEm 5y ago
> 99.1% TypeScript disappointment
jez 5y ago
When I find myself wanting a split diff in the terminal, I tend to gravitate towards just using Vim’s built in diff mode via vim-fugitive. I even have some git aliases that will open vim and and show fugitive diffs for every file changed on the current branch. The I like this over fancy CLI diff viewers for a handful of reasons: - It re-uses my editor config (no need to fuss with that tools ad hoc config format) - I can navigate the diff with my editor’s navigation tools (expand or hide context lines, open/close/reorganize tabs, etc.) - My editor’s language-aware tooling kicks in. I can jump to def, reveal types, and find all references while reading the diffs. I wrote more about some of the specific workflows I use in this post, if you’re curious to level up from a CLI-only diff workflow: https://blog.jez.io/cli-code-review/ https://blog.jez.io/cli-code-review/ There’s a time and a place for CLI-only diff viewers, and kudos to the author for building a tool they enjoy! I’ve just found that they fit into a sort of uncanny valley of simplicity and power for my needs.
- i_am_not_elon 5y ago
  You and I have similar setups! I love it, but there's one thorn that I've not been able to figure out yet. Have you (or anyone reading this) been able to figure out how to get diff-highlight to be more intelligent so that if 'foo' changes to "foo", the highlighter is smart enough to only highlight the quotes as changing, but not the word foo? (Though this example is trivial, any time you've got two changes on the same line, this issue occurs where everything in between those changes gets highlighted as well.) I noticed that other tools in this thread such as delta and banga don't suffer from this issue.
  - airblade 5y ago
    You can't configure diff-highlight to do that. It 'will find the common prefix and suffix of two lines, and consider everything in the middle to be "different".' [1] To highlight only the quotes as changing, you need something else. On (Neo)Vim, for example, vim-gitgutter does this [2] (I'm the author). [1] https://github.com/git/git/tree/master/contrib/diff-highlight https://github.com/git/git/tree/master/contrib/diff-highligh... [2] https://github.com/airblade/vim-gitgutter/blob/master/autoload/gitgutter/diff_highlight.vim https://github.com/airblade/vim-gitgutter/blob/master/autolo...
zeckalpha 5y ago
`diff -y` works in a pinch but I generally use icdiff: https://www.jefftk.com/icdiff https://www.jefftk.com/icdiff
deleted 5y ago
[deleted]
shaicoleman 5y ago
Awesome, thanks!
vendiddy 5y ago
The diffs look beautiful. One suggestion to the author be to bundle this as a self-contained binary. This would have a huge impact on whether I want to install it. For this, I would look into Deno, which supports self contained binaries with typescript. I've never tried it myself so not sure how much work this would be.
- milkbikis 5y ago
  Yeah I looked into bundling and deno, but neither of those seemed palatable at this point. Deno’s ecosystem is still quite small, so I’d have to implement things like syntax highlighting from scratch which is not feasible. Other bundling options don’t seem all that reliable / popular and they aren’t really solving the actual issue of untrusted dependencies. So my current take is to just use node and be very conservative with dependencies.
baby 5y ago
This is amazing!

178 points by milkbikis 5y ago

Is anyone familiar with a good way to programatically create a diff like this as an image? I wrote a small script that tracks changes to your kubernetes cluster and sends a diff of the yaml to Slack. It works but I want to prettify the diff with a GitHub style diff and I need it in image format to send to slack.

milkbikis 5y ago
I actually tried to automate the screenshots for this project's readme using GitHub actions, but struggled to get it to produce the same quality screenshots as my local machine. This is the script I use for now, which has to be invoked manually: https://github.com/banga/git-split-diffs/blob/main/scripts/generateScreenshots.sh https://github.com/banga/git-split-diffs/blob/main/scripts/g...
- nyellin 5y ago
  Thank you. If you find a better way which works on a headless Linux container let me know. I would be interested in the older versions of your automation even if the output is worse quality so long as the quality is acceptable.

weitzj 5y ago

I enjoy having good terminal ergonomics for Git. What works for me is tig for git diffs. Also very impressive is kitty-diff. If you use kitty as your OpenGL enabled terminal https://sw.kovidgoyal.net/kitty/kittens/diff.html https://sw.kovidgoyal.net/kitty/kittens/diff.html

kbd 5y ago
I forgot kitty has kitty-diff! I love kitty as my terminal.

gigatexal 5y ago

I’ve been looking for just this!!! Thank you!!

nfoz 5y ago

I just use `vimdiff`, but this looks better.

Brian_K_White 5y ago
Same. I mean... vim, right there already for free, and the invocation is rather ridiculously simpler. And vimdiff is even an editor not just a viewer. Now if it was say, Meld in a terminal, that would be worth talking about and I installing some stack as a dependency.
gnufx 5y ago
Bad luck! Emacs Ediff worked well for me before Git, and it still does (frequently in a tty, and preferably not with Git).

kbd 5y ago

I already use delta for this: https://github.com/dandavison/delta https://github.com/dandavison/delta I thought delta was fairly well-known by now so I was surprised to see this project not mention it (the readme already has a section for that). I wonder what they've chosen to do differently, besides write it in Node.js.

milkbikis 5y ago
Yeah I (un)fortunately learned about delta too late or I probably wouldn't have made this. The main difference is that delta's default styles and appearance did not appeal to me. I'm sure it can be customized, but I wanted something that looked great by default. I especially like that the syntax highlighting matches vscode's since that's the editor I use for work.
- kbd 5y ago
  > syntax highlighting matches vscode An that's cool. I've always had a dream of having the same syntax highlighting set up everywhere: vscode, bat, vim, git diff... etc.
  - d76d6776yudsy 5y ago
    check out base16 http://chriskempson.com/projects/base16/ http://chriskempson.com/projects/base16/
    - r0rshrk 5y ago
      link is dead for me
- Noumenon72 5y ago
  I agree that's important! Delta's screenshot colors are so ugly that yours looks like the far superior product. It also seems more focused on diffs. I feel like I could drop in your project instantly, while delta seems to expect configuration.
5y ago

dikaio 5y ago

Nice work!

bovine3dom 5y ago

Related but for single pane diffs: https://github.com/so-fancy/diff-so-fancy https://github.com/so-fancy/diff-so-fancy

inshadows 5y ago

> package.json Bye. Context: What JS dependencies do is unheard of: https://news.ycombinator.com/item?id=26889543 https://news.ycombinator.com/item?id=26889543

VWWHFSfQ 5y ago
what should this be made with
- deathanatos 5y ago
  Why Rust of course! /s More seriously, as much as I'm personally not a huge fan of JS (but this is TypeScript?) I don't see how such comments add to the conversation. This particular package even seems to be very considerate with its dependencies: there's only a half dozen, and relate to obvious things like terminal coloring/manipulation, syntax highlighting, and diff generation… Now, I've not explored the full tree to see if those drag in the world, of course. Sometimes, I think the hate on dependency trees gives them a bad rap. Code reuse lets people build things easily & quickly without having to badly reinvent every wheel! Sometimes, I get notified of a JS dependency with a security vulnerability where if a user can control how many spaces are used for indentation in some library's pretty-printer they can RCE and I die a little inside. I think there are easier ways to get a side-by-side diff, but this tool does do a remarkable job of reproducing GitHub's aesthetics.
  - inshadows 5y ago
    It's not about language nor dependency tree per se. It's about what is in that dependency tree. When I depend on a library A in say Python I can be reasonably sure that it won't download and execute random shit from Internet, nor that it will pull tons of other crap to log to console in colorful ANSI boxes. Basically, it's about NPM ecosystem, which is anything but trustworthy to be run as a terminal application. EDIT: Anyway, didn't mean to shit on author's work. (S)he apparently put fair amount of work into it, and the result looks great.
    - 5y ago

seabass 5y ago

This is cool! A bit slow to start up, probably due to starting up a node process each run, but looks great. Wondering if you have a theme that doesn't include a background color as I quite like my terminal's defaults.

milkbikis 5y ago
The slowest operation is syntax highlighting: https://github.com/banga/git-split-diffs#performance https://github.com/banga/git-split-diffs#performance. I have a PR out to improve that somewhat. Good point about the themes, I'll add one. I'm hoping to make it easy to customize individual theme colors so you could unset the background colors, for example

manannayak 5y ago

Nice work, banga!

milkbikis 5y ago
:) thanks nayak!

nishparadox 5y ago

I've been using delta: https://github.com/dandavison/delta https://github.com/dandavison/delta It can be easily set up...

busterarm 5y ago

You can just use icdiff to get handsome-looking split diffs in terminal. https://github.com/jeffkaufman/icdiff https://github.com/jeffkaufman/icdiff in your .gitconfig [diff] tool = icdiff [difftool] prompt = false [difftool "icdiff"] cmd = /usr/bin/icdiff --line-numbers $LOCAL $REMOTE | less -eFXR then git difftool

nickstinemates 5y ago

Looks beautiful

AveryEm 5y ago

> 99.1% TypeScript disappointment

jez 5y ago

When I find myself wanting a split diff in the terminal, I tend to gravitate towards just using Vim’s built in diff mode via vim-fugitive. I even have some git aliases that will open vim and and show fugitive diffs for every file changed on the current branch. The I like this over fancy CLI diff viewers for a handful of reasons: - It re-uses my editor config (no need to fuss with that tools ad hoc config format) - I can navigate the diff with my editor’s navigation tools (expand or hide context lines, open/close/reorganize tabs, etc.) - My editor’s language-aware tooling kicks in. I can jump to def, reveal types, and find all references while reading the diffs. I wrote more about some of the specific workflows I use in this post, if you’re curious to level up from a CLI-only diff workflow: https://blog.jez.io/cli-code-review/ https://blog.jez.io/cli-code-review/ There’s a time and a place for CLI-only diff viewers, and kudos to the author for building a tool they enjoy! I’ve just found that they fit into a sort of uncanny valley of simplicity and power for my needs.

i_am_not_elon 5y ago
You and I have similar setups! I love it, but there's one thorn that I've not been able to figure out yet. Have you (or anyone reading this) been able to figure out how to get diff-highlight to be more intelligent so that if 'foo' changes to "foo", the highlighter is smart enough to only highlight the quotes as changing, but not the word foo? (Though this example is trivial, any time you've got two changes on the same line, this issue occurs where everything in between those changes gets highlighted as well.) I noticed that other tools in this thread such as delta and banga don't suffer from this issue.
- airblade 5y ago
  You can't configure diff-highlight to do that. It 'will find the common prefix and suffix of two lines, and consider everything in the middle to be "different".' [1] To highlight only the quotes as changing, you need something else. On (Neo)Vim, for example, vim-gitgutter does this [2] (I'm the author). [1] https://github.com/git/git/tree/master/contrib/diff-highlight https://github.com/git/git/tree/master/contrib/diff-highligh... [2] https://github.com/airblade/vim-gitgutter/blob/master/autoload/gitgutter/diff_highlight.vim https://github.com/airblade/vim-gitgutter/blob/master/autolo...

zeckalpha 5y ago

`diff -y` works in a pinch but I generally use icdiff: https://www.jefftk.com/icdiff https://www.jefftk.com/icdiff

deleted 5y ago

[deleted]

shaicoleman 5y ago

Awesome, thanks!

vendiddy 5y ago

The diffs look beautiful. One suggestion to the author be to bundle this as a self-contained binary. This would have a huge impact on whether I want to install it. For this, I would look into Deno, which supports self contained binaries with typescript. I've never tried it myself so not sure how much work this would be.

milkbikis 5y ago
Yeah I looked into bundling and deno, but neither of those seemed palatable at this point. Deno’s ecosystem is still quite small, so I’d have to implement things like syntax highlighting from scratch which is not feasible. Other bundling options don’t seem all that reliable / popular and they aren’t really solving the actual issue of untrusted dependencies. So my current take is to just use node and be very conservative with dependencies.

baby 5y ago

This is amazing!