How and why I made a simple interface for Twitter’s advanced search.
This has been on my mind for ages.
I often search for Tweets that I remember seeing. And Twitter has this advanced search that lets you search Tweets from and to specific users, on or between specific dates, mentioning specific users or hashtags, and some other things.
This advanced search is hard to get to: you need to do a simple search, and then click the settings dots, and then select “Advanced search” and THEN you get a pop up with the options.
So it’s hard to get to. But it’s also hard to use.
- I have to think twice about whether or not usernames need @’s before them;
- once you’ve done a search, it defaults to “Top” Tweets, which i rarely want;
- the options pop-up resets itself so refining your search is tricky.
So I’ve had this idea for a while that someone could probably pretty easily figure out how the parameters are sent to Twitter’s search page and create a simpler interface.
And, though I’m sure someone must have done it before, that’s exactly what I did.
I’ve started with the options I use most. Condensed the search query into a single field with explainer, and added “from account” and “to account”. This covers quite a lot of bases:
- Find that Tweet I sent about…
- Find that Tweet I sent to @specific_person about…
- Find that Tweet someone sent to me about…
- Find that Tweet the @specifc_person sent to me about…
- Find that recent conversation I had with @specific_person
I figured out the parameters, created a form, gave it some styling and shoved it online using Netlify – it’s only a single HTML file and some Tailwind styles so static hosting is fine.
Try it at https://tweet-finder.veryuseful.app/
Creator notes
Creating the form was pretty simple.
I had to use a bit of vanilla JavaScript to improve the experience: adding @’s to usernames where they aren’t provided so that you don’t have to think about it and compiling the form data into a query string.
When it came to styling, it was total overkill, but I wanted to see how easy it was to add TailwindCSS to such a simple project.
Initially I got confused by the documentation which very much assumes you’re already using a framework or build tool, or otherwise have PostCSS in a toolchain somehow.
I was about to give up but eventually found the “Using Tailwind without PostCSS” section. This is really not that hard to find but for some reason I ignored it the first time I read through. Maybe I thought this was about the “include vast amounts of CSS using the CDN version” approach? Not sure.
Anyway, with a simple npx command (once you’ve got node and everything sorted out) you can get going.
I wanted to use the forms plugin so I had to init myself a Tailwind config file, create a boilerplate custom CSS file, create a package.json (did the npx command do this for me?) and add @tailwindcss/forms to it as a dependency.
Suddenly I was doing a lot, and I now had custom build commands to remember, so I added these to my package.json too:
"scripts": {
"build": "npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css",
"prod": "NODE_ENV=production npx tailwindcss-cli@latest build ./src/tailwind.css -o ./dist/tailwind.css"
},
So I can now npm run build or npm run prod to get what I need.
I don’t have a hot-reloading dev environment or anything, but don’t really need that for this single-page HTML thing.
And yes, let me say it again, Tailwind IS overkill, and it’s technical debt, and I’m generally against build processes for simple websites, but, hey, we learned some stuff, right! That was the aim.
You can see the code on GitHub.
And dont forget to use the search at tweet-finder.veryuseful.app !