43 lines
2.7 KiB
Plaintext
43 lines
2.7 KiB
Plaintext
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml" lang="" xml:lang="">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="generator" content="pandoc" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
|
|
<meta name="author" content="By André A. Gomes" />
|
|
<title>diff-mode lets you track changes</title>
|
|
<style type="text/css">
|
|
code{white-space: pre-wrap;}
|
|
span.smallcaps{font-variant: small-caps;}
|
|
span.underline{text-decoration: underline;}
|
|
div.column{display: inline-block; vertical-align: top; width: 50%;}
|
|
</style>
|
|
<!--[if lt IE 9]>
|
|
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv-printshiv.min.js"></script>
|
|
<![endif]-->
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1 class="title">diff-mode lets you track changes</h1>
|
|
<p class="author">By André A. Gomes</p>
|
|
</header>
|
|
<p>Modes keep springing up like mushrooms in Nyxt. If you've paid attention to our <a href="https://nyxt.atlas.engineer/article/the-thin-line-between-users-and-collaborators.org">latest article</a>, it should come as no surprise.</p>
|
|
<p>Diff mode does what you expect, if you're familiar with tools such as GNU diff. In short, it compares two web pages!</p>
|
|
<h1 id="how-to-use-it">How to Use It?</h1>
|
|
<p>Firstly we need two buffers. Let's say that we'd like to compare an older Wikipedia article with its most up-to-date version. From the buffer corresponding to the oldest piece of information, we can call <code>diff</code> from the minibuffer.</p>
|
|
<p><img src="../static/image/article/diff-invoke.png" /></p>
|
|
<p>Then, we choose the current buffer, which already appears at the top.</p>
|
|
<p><img src="../static/image/article/diff-old-buffer.png" /></p>
|
|
<p>Now, we choose the other buffer, corresponding to the latest piece of information. If that's the last buffer you have visited, it should again appear at the top.</p>
|
|
<p><img src="../static/image/article/diff-new-buffer.png" /></p>
|
|
<p>And tada!</p>
|
|
<p><img src="../static/image/article/diff-wiki-output.png" /></p>
|
|
<p>Notice that the order in which we provided the buffers does play a role!</p>
|
|
<p>Let me show you another example. You might be aware that Nyxt <a href="https://nyxt.atlas.engineer/article/next-nyxt-rename.org">changed its name recently</a>. Let's compare its Github README before and after.</p>
|
|
<p><img src="../static/image/article/diff-github-output.png" /></p>
|
|
<h1 id="future-work">Future Work</h1>
|
|
<p>As you can imagine, any two bits of valid HTML can be compared against each other. This means web buffers, HTML files, or HTML tags can be provided. It will also be possible to display the diff side-by-side, rather by line-by-line as you saw above.</p>
|
|
<p>If you have ideas, complaints or any comments don't hesitate to get in touch!</p>
|
|
</body>
|
|
</html>
|