Skip to main content

Browsers, their history and making the most of yours

· 21 min read
Brad Taniguchi
Brad Taniguchi
📖21 min read

I bet you are reading this on your browser. Are you certified to use that thing? Where did you get your license? Do you know how to operate it? No seriously? Do you? DO YOU???

The wonderful world of browsers​

Okay let’s be slightly more serious, web browsers are probably one of the single most important applications on a device. Browsers are also one of the most important pieces of software in the modern world. They connect the people, power the businesses, drive economies, interface with systems, and connect individuals. They are the pathway to many abilities some consider to be unnatural to many things. Anyone who has used a computer, and interacts with the internet has used one. It's almost guaranteed you are using one as you read this right now. Well maybe you are cool and subscribed to this blog using an RSS feed reader like inoreader. No, I'm not paid to say that... Why do you keep asking?

Anyways, their designs have been well tested, iterated upon, and developed by some of the biggest tech companies on Earth. There have been massive successes, massive failures, huge security issues, long and drawn out rises, and dramatic falls from grace. If web browsers were a TV show they'd be chugging into beyond their 20th season, and it's only getting more popular. They are a staple of the modern world. But like any show that sees their double digit season, let alone a multi-decade show, similar "themes" keep popping up again and again. Why change what works?

Today, you can pick up almost any browser and find yourself at home with similar features, where the general design and features have been the same decades ago. But that doesn't mean all are the same, or try something dramatically different. This also doesn't mean you are using them to their full potential. In fact, it's fairly common to see someone whose browser looks like the image at the top of this post.

This post is all about web browsers, specifically how to use them to their full potential. I'll go into some historical features as a background, core features basically all browsers have, then jump into focusing on just Chrome. Why only Chrome and not other browsers? Well that's what you dear humble browser reader get to learn about.

So sit back, don't touch that tab bar and let's dive into the wonderful world of browsers, and how to make the most of them!

Humble beginnings​

It’s hard to talk about web browsers without at least touching on the “birth of the web”.

The dawn of a new age, a tabbed one​

The turn of the century saw multiple browsers of the time start adding one of the single most critical features that all browsers utilize, which is tabs. Tabs are essentially separate instances of a browser window that allow the user to “switch” between them, allowing them to effectively multi-task. Tabs are available in all sorts of systems that allow users to do multiple things at one time and are an effective user experience pattern.

No other feature exemplifies the power of the web more than browser tabs. It’s fairly common to find yourself “fighting tabs”, if you decide to fight them at all. The web just has so much to keep track of, read, find, search and interact with. It’s literally infinite! But that also means your small little tab bar, and your poor RAM sticks. (yo RAM is expensive nowadays, protect that stuff, if anything do it for the RAM!)

Tabs made sense at the time, and still make sense today, but due to the extensive nature of the web, expecting just a simple humble tab bar to “capture” everything you’d want, or possibly want to keep track of is where most users go wrong. But before we continue into the actual tips, let’s continue our trip down memory lane. As tabs by themselves became a core feature of browsers (and other applications), they themselves don’t change much, and most users don’t change how they utilize browsers beyond tabs either. Before we dive into the other features, let’s continue our journey to the present day with the expansion of the web away from just serving websites, but instead turning into a platform for serving everything and anything.

Champions rise and fall​

With all browsers having tabs, users turned to what's in those tabs. What’s in those tabs has to work, and what browser do you use when you want stuff to just work? Of course you use chromium Internet Explorer! Well at least you would if the era were the 2010s.

With the rise of websites such as Facebook, Google, and Amazon. More people used the web for the first time and actually did something. Then came back, then wanted to do more. Tabs (and bookmarks) were around this time to help satisfy the world's budding navigation trends, while listening to nice dial-up noises before checking your AOL account.

Good times, simpler times. But I’m sure some true power users were already starting to see issues with being limited to just tabs and bookmarks. But I wasn’t old enough to know that, so I’ll just gloss over this fact and assume no one was running 100 tabs back then, I’m sure I’m wrong but for the sake of the “story time” aspect of this, we will just run with it.

Around this purposefully vague period of time, the main champions of the web were Microsoft’s Internet Explorer, and Mozilla's Firefox, but a new challenger approaches in the form of Google’s Chrome, which is currently the most popular browser out there. Even if you don’t use Chrome you probably use a version built on top of Chromium, which is the open source project underpinning Chrome, so think Chrome but without Google’s stuff.

Even Microsoft’s champion, Internet Explorer, eventually gave way to Edge, but Edge as it traditionally was built, ended up being a failure. Microsoft eventually waved the white flag and moved to a Chromium based version of Edge that is still around today.

Cloud, the modern era and consolidation of power​

The 2010s saw one major shift that cascaded everywhere in the web, including the browser. It was the emergence of what is called “the cloud”. The main incentive of the cloud is to power website infrastructure at a cost. Before this, any company who wanted to run their own website largely ran their own hardware, this would be their own physical server racks running somewhere in your own office. With the advent of the cloud, anyone can just pay another company with their own dedicated hardware a fee to utilize their resources, today many companies go this route as it is flexible and generally cheaper.

Now you might be asking how does the cloud relate to browsers? The main reason I’ll provide here, is that this allowed many more companies to build out their website infrastructure, and look for people to pay to serve them. This is when the rise of “big tech” started to gain traction in the web infrastructure space, suddenly a lot of companies and consumers wanted to build “on the web”, which brings us back to the basic question. How do people get there?

As you might have already guessed, it's web browsers! Google specifically built out Chromium to help get customers to the web. For them, this meant getting ad money for Google searches and later cloud money through businesses running on their infrastructure, so indirectly funding a “better browser” was just another way to build out their other businesses, and investing into their browser in a way to make the web more enjoyable and capable fed into their other main money makers.

I primarily bring all this up as to the main reason why I’m focusing specifically on Chrome, as there’s a ton of options out there (see the bottom of this post for a list of ones I know about), but focusing on the current most popular browser seems like a good bet.

Cool but wait, when are you going to talk about how to use the browser exactly?​

Okay okay! Now that we’ve gotten from the dawn of the web, to the cloud, with Google’s web/browsers, and some initial mentions of how to use web browsers is over. Let’s actually jump into using the darn thing. With this history we can also see how some companies make money based on your experience using the web, with the browser just being the initial interface.

Because that usability and raw experience is a core functionality and difference maker on many browsers, it’s also why Google funds Chromium’s development. Ultimately they win at the end of the day if you are using a web browser, even if it doesn’t have Google’s direct integration.

Okay let's get to the “learn how to use” portion finally!

Tabs​

Tabs are the main productivity feature most users know, think about and use. Tabs are at their bare minimum a way to do multiple things in a single browser window. They are also easily the most abused feature. Many users end up with many tabs open to the point they can’t see anything besides the favicon. Most browsers allow users to move a tab out of their original window and into a new window, which can help with multiple monitors.

For many people, they are the “first option” and “last option” when using their browser extensively. It's possible even having this exact webpage open among 100+ other tabs! Or if you are on the other side of the spectrum, and don't use them you should! It allows you to keep multiple webpages opened at the same time, and allow you to do multiple things at the same time.

I won't go into it more as I assume most users already know how to use this feature. So lets get into the more helpful/nuanced stuff.

Before we do though, here are some rapid fire keyboard shortcuts:

  • New Tab: ctrl + t (Win/Linux) / cmd + t (Mac)
  • Close Tab: ctrl + w (Win/Linux) / cmd + w (Mac)
  • Reopen Closed Tab: ctrl + shift + t (Win/Linux) / cmd + shift + t (Mac)
  • Switch Tabs: ctrl + tab (next) or ctrl + shift + tab (previous)
  • Jump to URL bar: ctrl + l (Win/Linux) / cmd + l (Mac)

Pinning​

In Chrome and many other browsers, pinning is a feature where if you right-click or two-finger click on a Mac, a tab you can select “pin” that tab. This pushes the tab all the way to the left of the tab and condenses it down to just its favicon.

This feature allows you to keep tabs in a specific order, and more accessible as they are essentially in their own group. I use these for a few sites I always keep open no matter what. Critically using ctrl + number-key (or cmd + number-key on Mac) allows you to jump to your tabs, pinned or not. But having the same tabs setup allows easy access to the same sites every time via these keyboard shortcuts.

Split tab​

Split tab is a new feature available in Google Chrome, which allows you to essentially render a side by side view “within the same tab”. This can be helpful if you don't want to manage multiple Chrome windows while also being able to work in multiple tabs that you see at the same time side by side.

As before you can right-click or two finger click a tab to “add tab to new split view”, or you can select multiple tabs holding down ctrl (cmd on Mac), select your two tabs, then “add tab to new split view” and this should connect the tabs to a new split view.

This feature in my opinion is useful, but somewhat awkward, as the tabs share the URL bar so knowing which one you are actually on can get a little confusing at times, as the usability distinction between which tab is under focus and which isn’t isn’t clearly defined a majority of the time.

That said, let's continue as tabs are great, but just being able to pin or split them doesn’t actually help a majority of users who have 100+ tabs open and no idea of what's in them!

Bookmark organization, and the "reading list"​

Bookmarks are old browser features that are underutilized. They are very powerful, but I think they are not as visible as tabs, so most users don’t rely on them. They cover one of the main use cases most people have for opening multiple tabs, which is “not losing information”.

Bookmarks are like what their name intends, a way to save places on the internet to go back to them later. Explaining that isn’t what this section will be about, instead I’ll point out a few reasons why you’d want to save your huge list of tabs as bookmarks instead and save your poor web browser from keeping them open continually.

Go into your tab and click on the “star” icon in your URL bar, or press ctrl + d (Windows/Linux) or cmd + d (Mac). This will bookmark your tab. However that isn’t how to use bookmarks, instead organize your bookmarks into folders and utilize those folders as a way to find what you need later. If you leverage this feature enough, and combine it with other features such as “bookmark search” you can build your own little knowledge base that is searchable and organized.

To manage them all at once, you can open the Bookmark Manager with ctrl + shift + o (Windows/Linux) or cmd + option + b (Mac).

But it all starts with saving your bookmarks, naming them sensibly and taking time to organize them in some sensible structure. It's similar to files in your filesystem, doing some spring cleaning every now and then can go a long way.

Google Chrome, and many other browsers, allow you to easily search your bookmarks. In Chrome you can just type @bookmarks then hit space and search for what you want, and you will search against all the bookmarks. You can then select individual bookmarks or just hit enter and go into Chrome’s bookmark manager, which is available at chrome://bookmarks (other internal pages will be gone over later)

This search feature is available in that internal page, and the bookmarks sidebar.

Bookmarks bar and bookmark sidebar​

You can also use the bookmarks bar or sidebar to see and organize your top-level bookmarks that you always want quick access to, or see a list of searchable and filterable bookmarks alongside whatever you are working on. A quick way to toggle the bookmarks bar is ctrl + shift + b (Windows/Linux) or cmd + shift + b (Mac). This can be used along with the search and folders to effectively have a “file system” of bookmarks on the side of your browser. But as I said earlier, this requires your own effort to maintain and work to build your own setup.

Tab groups​

Tab groups are one of the “newer” features that has come around in the last few years that adds a level of organization to tabs more directly than saving things into a bookmarks folder. Tab groups allow you to put tabs into a colored “group”. In Chrome this can be done by right clicking on a given tab and clicking “add tab to group”.

This pattern allows you to “collapse” tabs and organize them all in your tab bar. Many browsers have a secondary “store” of these tabs so you can close the tab group and open them later. With Chrome this syncs across devices, so you can save your tab group on one machine and open/reference them easily in another.

Tab Groups should be the first thing you try to utilize, as it builds on most users' common workflow of just having a lot of tabs open. They don’t solve the problem directly, you can still have a lot of tabs, but you get at least 1 level of organization/abstraction and the ability to collapse them.

Mixing tab groups and bookmarks you can easily turn bookmarks into tab groups and vice versa for a more “solid” way to save tab groups over time, while also giving you multiple levels of control and ability to search/manage groups and bookmarks.

Pro-tip: Name your tab group with an emoji and when you collapse it, it turns into the width of a single tab! On windows this can be done by right clicking on a tab-group, then in the tab group name field, right click again and pick “Emoji” then search/pick a sensible emoji to represent your tab group.

Let's say you have read all of the above advice, learned some high level web browser information, but then still just spam tons of tabs. Well this is the one other feature you should use way more. It's searching tabs.

Chrome provides a “tab search” button near the top, or you can hit the keyboard shortcut for ctrl + shift + a (or cmd + shift + a on Mac). If you hit the button it will also show tabs from other devices if you have sync enabled. Or you can search in the URL bar by typing @tabs then hitting space.

As long as you know the name of your tab you want, you can use this to find it!
Most other browsers have a variant of this feature, which again can be a huge help as long as you know the name of the tab you are searching for.

Pro-tip: if you skipped the section of searching bookmarks, check that section out, it uses the same “url search” mechanic!

The new UI pattern of vertical tabs​

Vertical tabs are a newer feature that leverages the fact most people’s windows have gotten “wider” over the years. Because of that there’s more horizontal space than vertical space, so to make use of that you can move your tabs to the left side of the screen rather than the top.

This has one key side-effect, that combined with tab groups, allows you to see most of your tabs titles, and group them in a nested tree. You could use short names for tabs with horizontal tabs, but with vertical tabs you could name them more verbosely.

The same “tricks” apply here, allowing you to search tabs and groups but with the ability to see more of the title more easily.

X-factor features​

Below are some “x factor” features, features that you could never use, but if you do they could be game changers depending on what you are doing. So these are provided for those looking to “up their game” either way. Since these are largely situational, I’ll leave an extra note about why you’d want to use these.

Installing web pages as PWAs, or as "apps"​

The why
Use PWAs, or “Progressive Web Apps”, if you want better integration into your desktop

PWAs is a browser feature that some websites support. There are websites that act more like mobile or desktop apps, and have extended features to fill that niche. The technology is several years old, but only some websites actually leverage it. Examples would be:

  • Youtube
  • X/Twitter
  • Spotify

You usually see this as an “install” icon in the URL bar on chrome. Once you install it, it will appear in your taskbar and is searchable like any desktop app. Critically this completely offloads the app from your browser, so it opens as its own desktop app. This also allows you to “right-click” on the app icon and immediately jump to specific actions within the app directly from the icon. This can help some true power users access common functionality quickly and easily.

This can be very helpful if you use some apps and want your operating system to manage their windows instead of your browser. If you want to remove them, you will uninstall them like any other app and go back toward using your browser to access the site/app.

For websites that do not offer PWA support, you can get a similar experience by installing the page as a “shortcut”, which in Chrome is available from “cast, save and share” then picking the “create shortcut” button. This will work similar to a PWA, in the sense your operating system will then be able to manage and find the webpage, but it won’t provide as many features as a PWA as it's just a shortcut.

Site search, make specific site searches easily accessible​

“Site search” is a way to isolate individual sites that have a “search” option in Google Chrome. This way you can enter in a prefix, for example `@github` then hit space, then search directly in GitHub without leaving your URL bar!

Continuing the same example, for GitHub, you can search in GitHub via its search bar. Once you enter a query and hit search, you can see how the query is passed in so the url looks something like this: https://github.com/search?q=bradtaniguchi. The q query parameter is what you need to remember, and utilize in the next step.

Next go into your browser settings and go to “search engine”, then click on “Manage search engines and site search”. On this page you can add a site search option, name it “GitHub” or something similar for its prefix. Then provide the following as the value: https://github.com/search?q=%s. Now you can use your prefix and search GitHub much faster!

Expand this for any site you like to use, and you can jump through to find stuff on that particular site more or less from anywhere.

I already went over bookmarks, but this section is on a very specific (and coder oriented) use case where you can save JavaScript as a bookmark, then upon clicking the bookmark, it executes the code onto the current page!

This can be useful if you have a small snippet you like to use, or want to literally “save” a script to execute to “hack” a given page at any given time. Of course this isn’t real hacking, as you are only executing front-end JavaScript code. There are also other ways to do this more elegantly, such as from the dev tools, or having extensions which are designed to inject/run arbitrary JS as needed. But this is a neat little feature that could be useful and played around with.

Performance and Memory Saver​

Lastly, let's say you don’t like to use tab groups or bookmarks and you still keep hundreds of tabs open. Changing your browser’s performance settings can help keep things running smooth, or at least reclaim some memory for tabs you don’t go back to. This does have the side effect of making going back to idle tabs mean they refresh (which you might not want to happen) but concessions must be made if you want to free up some memory.

To utilize Chrome memory saver, go to the “three dot menu”, then to settings. Then performance, then select the type of performance you want to leverage.

What about extensions?​

I purposefully skipped over and ignored browser extensions, or even other browsers. The main reason for this is because there’s a lot out there that could be useful, and I can’t go over all of them, nor could I do it with any justice as I don’t actually use any productivity extensions that change the behavior of the browser. I use what it gives, with the single exception of turning on some flags here and there.

For example, vertical tabs aren’t public yet, but are available behind a flag in Chrome Beta. I usually use Chrome Beta anyways, so I flipped the flag and have been working with vertical tabs for a while to see how it is. It takes some getting used to, but so far I like it.

Conclusion​

Hopefully some of the above is helpful, and insightful. I might write another post on how to utilize browsers, maybe a more “demo oriented” one, but this post is already one of the longest I’ve written, and I plan to write. I wanted to give it my best!

One of the next things I’ll be working on is allowing for some way to provide feedback to these posts, without opening myself up to spam. But this is for another day, and something I’ve been working on behind the scenes.