Skip to content

Commit

Permalink
formatting fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
rahulakrishna committed Feb 7, 2024
1 parent c16c8c4 commit a474ae2
Show file tree
Hide file tree
Showing 20 changed files with 1,951 additions and 47 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
I"�<h3 id="web-browser">Web Browser</h3>

<hr />

<p>A Web Browser, ultimately, is an application that lets you send a request to a URL and displays the HTML response on your screen. Apart from displaying simple markup, it also has the ability to run JavaScript and style using CSS.</p>

<h3 id="web-page">Web Page</h3>

<hr />

<p>Web Pages have been relying on the “running JavaScript” part more and more. When Angular 1 came out, you were supposed to run the JS bundle inside your HTML. But most frameworks now expect you to render the markup inside JS. Even static websites now have a largely JS based codebase.</p>

<p>We’re seeing more and more “web-apps” instead of “web-sites”. This change makes a browser more akin to an Operating System running apps. Instead of the original concept of an application that renders markup.</p>

<p>In other words, we’re “doing more things” with our browsers than “reading things” with them. Arc Browser tries to bring some of those OS type UX into the browser world.</p>

<h3 id="launcher">Launcher</h3>

<hr />

<p>Every Operating Systems have some kind of “Launcher”.</p>

<table>
<tbody>
<tr>
<td><img src="/images/arc-browser/Untitled%202.png" alt="Spotlight on Mac" /></td>
<td><img src="/images/arc-browser/Untitled%204.png" alt="Start Menu on Windows" /></td>
</tr>
</tbody>
</table>

<p>Probably the biggest upgrade in Browser terms is when Google made the URL bar of Chrome work more like a “Launcher”. You weren’t any more expected to precisely type in the URL of the page you had to go to. Google would actually prefer it if you first went to <a href="http://google.com">google.com</a> and clicked on a link from there.</p>

<p><img src="/images/arc-browser/Untitled%205.png" alt="Untitled" /></p>

<p><img src="/images/arc-browser/Untitled%206.png" alt="Untitled" /></p>

<p><img src="/images/arc-browser/Untitled%207.png" alt="Untitled" /></p>

<p>Arc changes this by opening a Spotlight-like Command Palette every time you hit Cmd+T.</p>

<p><img src="/images/arc-browser/Untitled%208.png" alt="Untitled" /></p>

<p>This lets you do much more than just start a search or open a URL. For instance:</p>

<p><img src="/images/arc-browser/Untitled%209.png" alt="Untitled" /></p>

<p>This may seem like a radical change, but the fact is many applications have already mapped <code class="language-plaintext highlighter-rouge">Cmd+T</code> to such an action.</p>

<p>VS Code shows this:</p>

<p><img src="/images/arc-browser/Untitled%2010.png" alt="Untitled" /></p>

<p>Slack shows this:</p>

<p><img src="/images/arc-browser/Untitled%2011.png" alt="Untitled" /></p>

<h3 id="tab-management">Tab Management</h3>

<hr />

<p>Window Management in Operating Systems and Tab Management in Browsers have a lot in common. But all major browsers still rely on the same <code class="language-plaintext highlighter-rouge">Ctrl-Tab</code> shortcut to switch to the next tab. Arc changes this.</p>

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/cf92ac0bd7034f46b74da932a76696ee?sid=e25f5206-5ff8-483e-95f8-8dc682bce4a4" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<h3 id="space-management">Space Management</h3>

<hr />

<p>Spaces is another cool general OS feature that Browsers have tried to implement, but it hasn’t fared well.</p>

<p><img src="/images/arc-browser/Untitled%2012.png" alt="Spaces on macOS" /></p>

<p>Spaces on macOS</p>

<p><img src="/images/arc-browser/Untitled%2013.png" alt="Untitled" /></p>

<p>Safari’s Space Management is called Tab Groupings. And while this gets synced across devices and is pretty useful if you’re into organising things, it’s almost always hidden away from view. No keyboard shortcuts exist. It’s almost like a way to stash away a group of tabs rather than an intuitive way to organise tabs.</p>

<p><img src="/images/arc-browser/Untitled%2014.png" alt="Untitled" /></p>

<p>Chrome has an even simpler Tab Grouping that essentially lets you put a label next to tabs.</p>

<p><img src="/images/arc-browser/Untitled%2015.png" alt="Untitled" /></p>

<p>Arc simply lets you have this small icons at the bottom of your tabs list. Where you can do a Horizontal scroll to switch between tabs. Also you can find tabs open in other tab groups from the “Spotlight-like” search thingie.</p>

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/da81b54218db46bbb14766baf4fbef0a?sid=b4541dfd-4fdc-4358-9435-29cca03b8432" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<h3 id="vertical-tabs">Vertical Tabs</h3>

<hr />

<p>Horizontal Tabs are hard to work with if you have a lot of tabs open.</p>

<p><img src="/images/arc-browser/Untitled%2016.png" alt="Untitled" /></p>

<p>Vertical Tabs offer a better view of the page title. It’s also essential for the scroll to switch space feature</p>

<p><img src="/images/arc-browser/Untitled%2017.png" alt="Untitled" /></p>

<h3 id="renaming-tabs">Renaming Tabs</h3>

<hr />

<p>Arc lets you rename tabs. Ridiculously simple. But really useful!</p>

<p><img src="/images/arc-browser/Untitled%2018.png" alt="Untitled" /></p>

<h3 id="theming">Theming</h3>

<hr />

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/8b744c9075ce44d8a0f415a329011201?sid=6a954096-5835-4f17-a16a-26625f39171c" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<h3 id="ai-features-and-split-view">AI Features and Split View</h3>

<hr />

<p>Arc clearly has an idea of how you browse the web and actively tries to enhance it. One day into trying out Arc, it completely changed how I use HN</p>

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/6c19c4099d334a278ed71e1c9928dc7e?sid=9dee27e8-32fa-41ab-bb01-d0357f7fe95d" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<p>Hover over links to get a summary. Open in split view so I never lose context of the HN link that took me there.</p>
:ET
Original file line number Diff line number Diff line change
@@ -0,0 +1,125 @@
I"�<h3 id="web-browser">Web Browser</h3>

<hr />

<p>A Web Browser, ultimately, is an application that lets you send a request to a URL and displays the HTML response on your screen. Apart from displaying simple markup, it also has the ability to run JavaScript and style using CSS.</p>

<h3 id="web-page">Web Page</h3>

<hr />

<p>Web Pages have been relying on the “running JavaScript” part more and more. When Angular 1 came out, you were supposed to run the JS bundle inside your HTML. But most frameworks now expect you to render the markup inside JS. Even static websites now have a largely JS based codebase.</p>

<p>We’re seeing more and more “web-apps” instead of “web-sites”. This change makes a browser more akin to an Operating System running apps. Instead of the original concept of an application that renders markup.</p>

<p>In other words, we’re “doing more things” with our browsers than “reading things” with them. Arc Browser tries to bring some of those OS type UX into the browser world.</p>

<h3 id="launcher">Launcher</h3>

<hr />

<p>Every Operating Systems have some kind of “Launcher”.</p>

<table>
<tbody>
<tr>
<td><img src="/images/arc-browser/Untitled%202.png" alt="Spotlight on Mac" /></td>
<td><img src="/images/arc-browser/Untitled%204.png" alt="Start Menu on Windows" /></td>
</tr>
</tbody>
</table>

<p>Probably the biggest upgrade in Browser terms is when Google made the URL bar of Chrome work more like a “Launcher”. You weren’t any more expected to precisely type in the URL of the page you had to go to. Google would actually prefer it if you first went to <a href="http://google.com">google.com</a> and clicked on a link from there.</p>

<p><img src="/images/arc-browser/Untitled%205.png" alt="Untitled" /></p>

<p><img src="/images/arc-browser/Untitled%206.png" alt="Untitled" /></p>

<p><img src="/images/arc-browser/Untitled%207.png" alt="Untitled" /></p>

<p>Arc changes this by opening a Spotlight-like Command Palette every time you hit Cmd+T.</p>

<p><img src="/images/arc-browser/Untitled%208.png" alt="Untitled" /></p>

<p>This lets you do much more than just start a search or open a URL. For instance:</p>

<p><img src="/images/arc-browser/Untitled%209.png" alt="Untitled" /></p>

<p>This may seem like a radical change, but the fact is many applications have already mapped <code class="language-plaintext highlighter-rouge">Cmd+T</code> to such an action.</p>

<p>VS Code shows this:</p>

<p><img src="/images/arc-browser/Untitled%2010.png" alt="Untitled" /></p>

<p>Slack shows this:</p>

<p><img src="/images/arc-browser/Untitled%2011.png" alt="Untitled" /></p>

<h3 id="tab-management">Tab Management</h3>

<hr />

<p>Window Management in Operating Systems and Tab Management in Browsers have a lot in common. But all major browsers still rely on the same <code class="language-plaintext highlighter-rouge">Ctrl-Tab</code> shortcut to switch to the next tab. Arc changes this.</p>

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/cf92ac0bd7034f46b74da932a76696ee?sid=e25f5206-5ff8-483e-95f8-8dc682bce4a4" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<h3 id="space-management">Space Management</h3>

<hr />

<p>Spaces is another cool general OS feature that Browsers have tried to implement, but it hasn’t fared well.</p>

<p><img src="/images/arc-browser/Untitled%2012.png" alt="Spaces on macOS" /></p>

<p>Spaces on macOS</p>

<p><img src="/images/arc-browser/Untitled%2013.png" alt="Untitled" /></p>

<p>Safari’s Space Management is called Tab Groupings. And while this gets synced across devices and is pretty useful if you’re into organising things, it’s almost always hidden away from view. No keyboard shortcuts exist. It’s almost like a way to stash away a group of tabs rather than an intuitive way to organise tabs.</p>

<p><img src="/images/arc-browser/Untitled%2014.png" alt="Untitled" /></p>

<p>Chrome has an even simpler Tab Grouping that essentially lets you put a label next to tabs.</p>

<p><img src="/images/arc-browser/Untitled%2015.png" alt="Untitled" /></p>

<p>Arc simply lets you have this small icons at the bottom of your tabs list. Where you can do a Horizontal scroll to switch between tabs. Also you can find tabs open in other tab groups from the “Spotlight-like” search thingie.</p>

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/da81b54218db46bbb14766baf4fbef0a?sid=b4541dfd-4fdc-4358-9435-29cca03b8432" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<h3 id="vertical-tabs">Vertical Tabs</h3>

<hr />

<p>Horizontal Tabs are hard to work with if you have a lot of tabs open.</p>

<p><img src="/images/arc-browser/Untitled%2016.png" alt="Untitled" /></p>

<p>Vertical Tabs offer a better view of the page title. It’s also essential for the scroll to switch space feature</p>

<p><img src="/images/arc-browser/Untitled%2017.png" alt="Untitled" /></p>

<h3 id="renaming-tabs">Renaming Tabs</h3>

<hr />

<p>Arc lets you rename tabs. Ridiculously simple. But really useful!</p>

<p><img src="/images/arc-browser/Untitled%2018.png" alt="Untitled" /></p>

<h3 id="theming">Theming</h3>

<hr />

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/8b744c9075ce44d8a0f415a329011201?sid=6a954096-5835-4f17-a16a-26625f39171c" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<h3 id="ai-features-and-split-view">AI Features and Split View</h3>

<hr />

<p>Arc clearly has an idea of how you browse the web and actively tries to enhance it. One day into trying out Arc, it completely changed how I use HN</p>

<div style="position: relative; padding-bottom: 56.25%; height: 0;"><iframe src="https://www.loom.com/embed/6c19c4099d334a278ed71e1c9928dc7e?sid=9dee27e8-32fa-41ab-bb01-d0357f7fe95d" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen="" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></iframe></div>

<p>Hover over links to get a summary. Open in split view so I never lose context of the HN link that took me there.</p>
:ET
Loading

0 comments on commit a474ae2

Please sign in to comment.