Code with Kristian • I make videos and write about software development and programming tools
2021's best developer tool is your browser's address bar
Four tips to use your browser's address bar more effectively.
Production-Quality Redis Hosting
RedisGreen offers production-quality Redis hosting. Set up a rock-solid, enterprise-ready backend instantly, perfect for high-throughput social and mobile applications.
Thanks to Redisgreen for sponsoring Bytesized. Learn more about sponsoring the newsletter.
Today, we're doing something a little different, and diving deep into the humble address bar. In this issue, I'll be looking at tips for searching better online.
New to this week's Bytesized newsletter–a matching video over on our YouTube channel! I'm experimenting with this idea, and if you enjoy it, let me know over on YouTube.
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:
\test→ I'm feeling lucky search for DDG
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.
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.
These three results look almost identical: one is from GitHub, and two are from gitMemory, which seems to be a mirror for GitHub.
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.
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,
The OR operator allows you to search for either one term, another term, or both. For instance,
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
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
- canva.new creates a new Canva artboart
- link.new creates a new Bit.ly link
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 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/[email protected]/file-path syntax, as seen below:
Another great feature of jsDelivr is the directory UI. By simply going to
/gh/user/repo/ (omitting the
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.