TN Search
- 6 Devlogs
- 8 Total hours
A New Tab Page offering over 50 search engines and tools for various workflows, built for developers, by a developer.
Ship #1
Pending review
I created TN Search, a New Tab Page offering over 50 search engines and tools for various workflows, built for developers, by a developer. It does not utilize any CSS or JavaScript frameworks, and requires no setup (unless you want to make it your new tab page, which requires finding an appropriate extension).
When I started this project, I was thinking “Ooh! 60 stardust! I’ll do it in half an hour!” That statement was partly true, but obviously wasn’t, since I have logged eight hours with this project. While I got a technically fully working site in an hour and 20 minutes, that was far less complex than it is now.
While every feature this New Tab page has looks very simple on the outside, they actually require a lot of coding to accomplish, with most of the coding making the features work with each other, not the feature itself. For example, when I added a search option for the dropdown menu, I had to fiddle with datalists for two and a half hours. And the silly thing is, I didn’t assign a value to any of the options! I was just relying on its textContent! That was very hard to add back later! I proud that I sat down for as long as it took each session and grinded through this project.
To search for an option, click on the input to the left of the main search box, and simply type what you are thinking of. To view all of the options, visit the search-providers.md file in the documentation. Or, remove the text from the provider input box and click it once more before unfocusing.
25m 41s logged
I just made it so TN Search saves your search provider choice to local storage so it will persist, forever!
While this would normally be a couple second change, there was a lot of error handling I had to do to make this work!
45m 11s logged
I just added a very nice README to TN Search! I also made a SECURITY.md file for reporting security vulnerabilities, and a search-providers.md that lists every single supported search provider!
2h 23m 56s logged
Well, this is a very, very big devlog! Here is what has been added since the last devlog!
Users now have the ability to search through the long list of search engines/tools. This is a very major accomplishment, which required a lot of debugging.
There is a nice digital clock above the search input! It even has a cool green dropshadow!
Though only two big features were added, the reason this took 2 and a half hours was because of one single word. That word, you might be asking, is errors.
2h 46m 18s logged
I recently just made a very, very big change to my new tab page! Up until recently, only the Google search engine was supported. But now, it supports 11 search engines and a miraculous number of search tools—44! This totals 66 search options in total!
In order to handle these many searching options, each option in the dropdown menu contains a data-url attribute that is then taken by the getSearchURL() function to generate the URL for the search query. And, every tool has a data-category attribute set to “tool” so the code knows that it should never just send the user to the site they entered, if they did enter a site (that wouldn’t work for things like reverse DNS, WHOIS, or certain VirusTotal and other searches).
Also, two minor bugs were fixed. The first one was that queries containing slashes, like math equations, would be misinterpreted by the code to be an IP Address. For example, trying to search “24/8” would have taken you to somewhere like https://0.0.0.24.The second bug was that on certain resolutions generally consistent with mobile devices, the div-search div would create a scroll bar for the user due to its length. In order to fix this, I set the flex-direction to column and wrapped the dropdown menu and input into a div so they would be on the same horizontal line, while the search button would be below.
40m 41s logged
I just sat down and added the ability to differentiate between websites and search queries to my new tab page! Most of the time was spent randomly troubleshooting, because my code was correct, but livereload wasn’t working! I finally found it out when I looked in the developer console and saw my code wasn’t the same as my most recent additions. At least I learned one more thing to check before giving up hope!
1h 20m 56s logged
Started TN Search, my own New Tab Page. I thought I would never be able to make something like this, but here I am, already done with one of the hardest parts! It currently has the following features: automatic focusing onto the search input on page load and when the user presses Ctrl + /, the ability to click the enter key instead of the Search button, and a really nice layout! It only supports Google search right now, but I plan to add support for more search engines! You can try it out at tn-search.pages.dev!
