This post is about a simple and fun search engine aggregator tool I created recently. I'm going to talk about how I made it and discuss some of the code.
Background 🐲
Someone asked me to build a useful and fun search tool.
We had just watched Wish Dragon on Netflix.
The Chinese dragon imagery inspired the name and design.
I used this as a chance to learn an unfamiliar area of JavaScript - opening tabs.
Vue seemed like a natural choice for handling events and data in JS. It would look similar if it was built in React instead.
Web app 🐉
I put it together in a few hours and I am pleased to announce Search Dragon as an online tool you can use.
Preview
Do a search:
See the tabs opened:
Website
What does it do? 🏮
It aggregates searches from popular search engines, including Google and Yahoo, Bing, DuckDuckGo, and Yandex. If for some reason you care about comparing results from each one or balancing your search without being biased by using just one tool.
The app provides some automation to save you copy and pasting searches in multiple windows. You can enter your search query once and then a tab will be opened for each search engine.
Then you run a new search query, the existing tabs get reused.
What is it built on? ⛩
I use GitHub and GitHub Pages to host most of my websites.
This project was built on JavaScript and the Vue framework. But without using Node or a build step. See my Vue Frontend Quickstart for a template and info on how that works.
How does it work? 🔍
The core of the app is 3 parts:
- Capture user query in HTML
inputelement text box. - Create the search URLs for each search engine, based on the user's query.
- When the user submits, use JavaScript to open each URL in a tab.
Build the URLs
It was easy to build the query URLs in the web app.
In main.js, I set up a base URL and then append a URL-encoded query to it. Something like this:
const bingUrl = `${BING_BASE_URL}?q=${q}`;
// https://www.bing.com/search?q=my+search+query
Note use of a plus sign for a space. A percent-encoding of %20 would also work but a plus sign is more readable and seems favored by some websites.
Four of the search engines use q as the query parameter. And one of them uses text.
Open the tabs
I used JavaScript's Window.open browser function to open multiple tabs for the user. The JS is around windows, but fortunately, they do get opened as tabs in the same browser window instead of as new windows.
Here is an example of opening a URL with a given window name, then opening a different URL in the same tab.
window.open("https://dev.to", "devTo");
window.open("https://dev.to/michaelcurrin", "devTo");
Listen to submission event
When a visitor clicks the search button, a function is run to open multiple tabs for the user.
When pressing Enter, then the search is also run.
In Vue, this is set up with an Event Listener like this:
@keyup.enter="myFunction"
I could have used a "form" approach in HTML and Vue, but the simpler approach I used ended up being fine, especially since there is only one input.
Repo 🔥
Here is the repo on GitHub:
MichaelCurrin
/
search-dragon
The meta search engine 🔍 🐲
Search Dragon 🔍 🐲
The meta search engine
Preview
The web app:
A view of new tabs opened, when searching all search engines.
Use the web app
Enter a query once and search on multiple search engines at once. Reusing tabs for each site so you don't lose control of tabs.
Follow the instructions on the site.
Documentation
License
Released under MIT by @MichaelCurrin.
The codebase is simple:
-
index.html- static content. -
main.js- dynamic content based on user interaction and configured data. -
styles.css- styling.
No package.json or node_modules! I used the modern ES Modules approach so that I can do an import in my JS directly from a CDN.
import { createApp } from "https://unpkg.com/vue@3.1.1/dist/vue.esm-browser.prod.js";
Note on content - I didn't put all the content in main.js. If JS is disabled or a search engine crawls my site, it might appear a mostly blank. So the content that can be static HTML is left as static HTML - this improves the user's loading experience and SEO ranking (because crawlers can understand my site better).
Credits 📷
Photo by Kumiko SHIMIZU on Unsplash
Top comments (1)
I recently developed a search engine aggregator tool called Search Dragon, and I'm excited to share insights into its creation. In this thread, I'll delve into the process of building this simple yet engaging web app and discuss some of the key aspects of the code. Moreover, I'll explore the intriguing search term Dragon Ball Z Kakarot mobile and its relevance within the context of Search Dragon, highlighting how the tool efficiently fetches and compiles information on specific topics. Stay tuned for a closer look into the mechanics behind this innovative search experience!