46 lines
3 KiB
Plaintext
46 lines
3 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 John Mercouris" />
|
|
<title>Select frame: a new model for interaction</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">Select frame: a new model for interaction</h1>
|
|
<p class="author">By John Mercouris</p>
|
|
</header>
|
|
<p>Typical interactions with web pages involve a single element. For example, when we view a search result, we visit or open each result one at a time.</p>
|
|
<p>This approach does not scale, it is tedious, and prone to misclicks.</p>
|
|
<p>Why can't we drag and select multiple objects like in our file explorers? Why do we have to manually interact with every single element?</p>
|
|
<p>Turns out, we don't have to. As a result of this development, Nyxt now offers a drag-select interface (<code>select-frame-*</code>) to interact with multiple elements at once!</p>
|
|
<h1 id="how-to-use-it">How to use it?</h1>
|
|
<p>Let's consider the common example of searching via a search engine, and then opening up the search results in several tabs/buffers.</p>
|
|
<ul>
|
|
<li>Begin by invoking <code>select-frame-new-buffer</code>.</li>
|
|
<li>Click to set the top-left of your selection area.</li>
|
|
<li>Click again, this time to set the bottom right of your selection area.</li>
|
|
<li>Confirm your selection in the prompt-buffer by typing in <code>C-s</code>.</li>
|
|
<li>Finally press <code>RET</code> to open up all of your selections in new tabs/buffers.</li>
|
|
</ul>
|
|
<p><img src="../static/image/article/select-frame-new-buffer.png" /></p>
|
|
<p>It doesn't matter whether you select one link, or a thousand, the amount of steps is the same.</p>
|
|
<p>Another common example is visiting a news aggregator website. In this example we'll be visiting Hacker News. We'll be doing something quite similar as above to select multiple elements, but this time, we'll start an <code>expedition</code> rather than opening a new tab/buffer for each link.</p>
|
|
<p><img src="../static/image/article/select-frame-expedition.png" /></p>
|
|
<p>After we select our frame, we can now begin our <code>expedition</code>. Our <code>expedition</code> is a way of recording a list of links that we want to visit. If we invoke <code>C-]</code> or <code>C-[</code> we'll go forward/backward through all of the links. And just like that, our journey begins! Super easy browsing!</p>
|
|
<p>We hope you enjoy this new paradigm and find creative uses for it!</p>
|
|
<p>Thanks for reading :-)</p>
|
|
</body>
|
|
</html>
|