Address Bar Hacks for Developers

Feb 23, 2021

This post is out of date

This post has been migrated from my old blog. It may have broken links, or missing content.

DDG Bangs

DuckDuckGo (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”, 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, 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.

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 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 creates a new GitHub repository
story.new creates a new Medium story
docs.new / sheets.new / slides.new all create new things in the Google ecosystem — a new Google Doc, Google Sheet, or Google Slides presentation
pen.new creates a new CodePen pen
js.new creates a new JavaScript project in CodeSandbox
canva.new creates a new Canva artboart
link.new creates a new Bit.ly link

Handy sites

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) 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

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 — clicking any of the files will give you a versioned and ready-to-use link that you could import into your project.