-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
c16c8c4
commit a474ae2
Showing
20 changed files
with
1,951 additions
and
47 deletions.
There are no files selected for viewing
125 changes: 125 additions & 0 deletions
125
...l--Converters--Markdown/5a/2489263034916875516c654191f9f0fce8a686a7f0c740b1eb4d5cd1acc295
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
125 changes: 125 additions & 0 deletions
125
...l--Converters--Markdown/5c/3b9c86593da535cf6490516d7fd3cbcf34af74c2825e57d58c95addb923fe8
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
Oops, something went wrong.