2021's best developer tool is your browser's address bar
Tags: webdev, beginners, productivity, programming
Published: 2021-02-24 21:00:17

---
title: 2021's best developer tool is your browser's address bar
published: true
tags: webdev, beginners, productivity, programming
date: 2021-02-23 15:15:00 UTC
canonical_url: https://www.bytesized.xyz/address-bar-hacks/
---

In this blog post and video, I'll be looking at tips for searching better online.

{% youtube gqt8UFaIa5Q %}

## DDG Bangs

[DuckDuckGo](https://duckduckgo.com/) (DDG) is an alternative to Google, the biggest search engine in the world. **DDG's Bangs feature is probably one of my favorite secret weapons in my day-to-day browsing.**

Bang searches work using the `!` symbol, and a shortcut for _what_ you want to search for. Let's start with a simple (and useful one) for developers: `!gh` — searching on GitHub.

`!gh react.js` will take you directly to [GitHub's search page for the term "react.js"](https://github.com/search?utf8=%E2%9C%93&q=react.js), allowing you to find repos matching the term React.

**DDG Bang searches turn your address bar into a _launcher_.** Instead of being a simple search bar or a place to filter through your browser history, Bang searches are like having **specific workflows for searching a thousand different websites** , constrained by your ability to find the right keyword (though a lot of the time, you can just guess).

Here's some of my favorites:

- `!gh`: GitHub
- `!yt`: YouTube
- `!wiki`: Wikipedia
- `!stackoverflow`: StackOverflow
- `\test` → I'm feeling lucky search for DDG

## Search operators

Search operators, whether in Google, DuckDuckGo, or any search engine, have long been touted as "advanced" searching. You've probably seen some of these before, but some of the basics are worth exploring again, so you can refine your searches as much as possible.

Search engines work by looking at what you're searching for, and trying to find matching terms in the content that it knows about. When I search for the term "javascript packages", search engines are trying to find content that it knows about the term "javascript packages", but also "javascript" and "packages" separately.

### Exact match

**The _exact-match_ operator, which you can use by wrapping your search term in double quotes, searches _just_ for the exact text that you're looking for.**

A great example of this is searching for error messages. Recently, my Ghost blog went down, and I saw the following error message in my logs:

```
MESSAGE: Worker initialization failure: EMFILE
```

Searching that term in Google returns 6.5k results. Searching the same term, [wrapped in double quotes](https://www.google.com/search?hl=en&ei=kcMmYO6aOYvNtQbOqK6ABA&q=%22MESSAGE%3A+Worker+initialization+failure%3A+EMFILE%22&oq=%22MESSAGE%3A+Worker+initialization+failure%3A+EMFILE%22&gs_lcp=Cgdnd3Mtd2l6EAM6BwgAEEcQsANQlJgCWPCdAmCxnwJoAnACeACAAT2IAacBkgEBM5gBAKABAaoBB2d3cy13aXrIAQjAAQE&sclient=gws-wiz&ved=0ahUKEwiup6bt9-TuAhWLZs0KHU6UC0AQ4dUDCA0&uact=5), as an exact-match search, returns just three results, all specifically related to the issue I ran into on my own blog:

```
"MESSAGE: Worker initialization failure: EMFILE"
```

### Search by site

Using my above example, I first did a general search for an error message, before ultimately using the _exact-match_ search to narrow my searches down to just three results.

These three results look almost identical: one is from GitHub, and two are from gitMemory, which seems to be a mirror for GitHub.

![2021's best developer tool is your browser's address bar](https://www.bytesized.xyz/content/images/2021/02/Capture.png)

This sort of duplication is really common in searches, especially when there's a strong incentive to generate _a lot_ of content on your site for SEO (search engine optimization) purposes.

**The `site:` operator allows you to narrow your search results to a specific website.** In the above case, let's say I _just_ want to search for results from GitHub. Updating my search term to only search github.com will remove the two gitMemory results from my search:

```
site:github.com "MESSAGE: Worker initialization failure: EMFILE"
```

### Inclusion, exclusion, combination

There's a few other search tricks you should know about that I'll run through quickly.

The **AND** operator allows you to search for multiple terms _together_. For instance, `python AND javascript`.

The **OR** operator allows you to search for either one term, another term, or both. For instance, `javascript OR typescript`.

The parentheses operator allows you to group a certain part of your query into a separate section. This is useful when using the AND/OR operators above: if I'm searching for new form packages to use in my project, I could search `(javascript OR typescript) form packages`, I could then see results for form packages in JavaScript or TypeScript.

The `-exclude` operator allows you to remove certain terms from your search. For instance, if I'm researching how best to do form validation in JavaScript, I may want to remove results from older websites in favor of more up-to-date results.

Searching `form validation javascript` returns the usual sites you'll always see in these searches — w3schools, tutorialspoint, and more — but filtering the search down to `form validation javascript -w3schools -tutorialspoint` will remove both sites from the search results, and returns things like [a FreeCodeCamp article](https://www.freecodecamp.org/news/basic-form-validation-in-javascript/) from January 2020, with more modern JavaScript syntax and a better implementation.

## Shortcut URLs

The recent explosion of new top-level domains (TLDs) has given rise to one particularly useful shortcut: `.new` domains. These TLDs have been registered by a number of companies, including many developer tools, that let you jump quickly to new repositories, projects, documents, and more.

Here's a list of some of my favorites:

- [repo.new](http://repo.new) creates a new GitHub repository
- [story.new](http://story.new) creates a new Medium story
- [docs.new](http://docs.new) / [sheets.new](http://sheets.new) / [slides.new](http://slides.new) all create new things in the Google ecosystem — a new Google Doc, Google Sheet, or Google Slides presentation
- [pen.new](http://pen.new) creates a new CodePen pen
- [js.new](http://js.new) creates a new JavaScript project in CodeSandbox
- [canva.new](http://canva.new) creates a new Canva artboart
- [link.new](http://link.new) creates a new [Bit.ly](http://bit.ly) link

## Handy sites

### [GitHub1s](https://github.com/conwnet/github1s)

GitHub1s is a recent discovery I made via a great video from the codeSTACKr YouTube channel. It allows you to view any GitHub repository directly in VS Code, in your browser. I’m kinda amazed this works, and it’s super fast, too. Just change any GitHub repo URL in your browser (for instance, [signalnerve/lilredirector](https://github.com/signalnerve/lilredirector)) to `github1s.com`, and in just a few seconds, you’ll get a VS Code instance you can use to poke around the codebase.

Just as a caveat, this project doesn’t appear to let you search _globally_ throughout the codebase using the File Finder (`Ctrl+p`)  or using the Search function (`Ctrl+f`) — instead, it appears to be constrained to whatever file you have open. This doesn’t make it immediately useful for discovering something in a new project, but this may be something that can be fixed in the future.

### [jsDelivr](https://www.jsdelivr.com/)

jsDelivr is a free CDN for open source code. It has the standard CDN-for-JS and CSS tricks: you can provide version numbers and files directly in the URL, and you can hotlink directly to jsDelivr to include things like jQuery or Tailwind CSS (see our Tailwind CSS guide) in your projects.

jsDelivr’s underrated feature is _GitHub integration_. A few years ago, there was a great project called RawGit, which allowed you to hotlink directly to GitHub projects or files in your codebase. It effectively made GitHub a free (and easy-to-use) storage service for your projects. As you might imagine, it became expensive to run as it got more popular, and it eventually shut down.

Since jsDelivr is already a CDN, adding support for hotlinking your GitHub files turns out to be a pretty trivial addition. jsDelivr supports linking to GitHub by using the `/gh/user/repo@tag/file-path` syntax, as seen below:

```
https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/dist/jquery.min.js
```

Another great feature of jsDelivr is the directory UI. By simply going to `/gh/user/repo/` (omitting the `tag` and `file-path`), you can see a complete directory structure for the project, allowing you to click around, and ultimately select a file for inclusion in your project. For an example of this, check out my lilredirector repo [inside of jsDelivr](https://cdn.jsdelivr.net/gh/signalnerve/lilredirector/) — clicking any of the files will give you a versioned and ready-to-use link that you could import into your project.