Search feature #101

Open
simevidas opened this Issue Oct 14, 2015 · 6 comments

Projects

None yet

4 participants

@simevidas
Owner

I have shipped search functionality on Web Platform Daily (WPD). This is a subscriber feature and it’s currently in alpha. If you encounter bugs, please report them (create an issue in this repo).

What is this?

This feature enables you to perform searches on the entire WPD dataset (~600 releases). You execute a search term and the entries that contain that string (exact match) are displayed.

Current limitations

  • it can only be used via keyboard for now (no UI for touchscreens yet)
  • the search algorithm is (for now) limited to finding exact matches in the (Markdown) source, with the addition that the search is not case sensitive

How to use

  1. on the site, press / (slash key) to activate and focus the search field
  2. enter a search term (see this YouTube video for examples) and press Enter to execute the search
    • the results are presented inside the usual categories (“News”, “Posts”, etc.)
    • the results are sorted from newest to oldest (within each category)
    • the colored bullets indicate age: green = past year; orange = 1–2 years ago; red = 2+ years
  3. press Esc to close the search interface

Use cases

  • quickly find a specific entry that appeared in a release in the past
  • explore content and information about a specific topic or feature

Update, February 7th 2016

I have enhanced the search functionality with the following operators:

  • and and or keywords
  • user:, url:, and in: filters
  • ... prefix/suffix

Examples:

1. svg and icon... user:chris

Finds all entries that contain the word “svg” and a word that starts with “icon” (the ... is used to match both “icon” and “icons”), and that have been posted by a user whose Twitter handle contains “chris” (the search obviously targets Chris Coyier).

capture

2. 300ms or 350ms

Finds entries containing either one of those; useful for finding all the entries about the tap delay.

3. aria or accessib... in:demos

Finds all demos that contain either “aria”, or “accessible”/“accessibility”/etc.

4. csp and report...

Find entries containing “csp” and “report”/“reporting”/etc.; so all entries related to CSP reporting.

5. es6 url:hacks.mozilla

Finds all entries about ES6 that have been published on the Mozilla Hacks website.

@miclf
miclf commented Nov 23, 2015

In my browser (Firefox 42.0 on OS X 10.11.1), pressing / actually open the browser’s built-in quick search feature (like it’s supposed to do). It seems that, in this case, the script is not able to catch the keystroke or to prevent the browser’s default behaviour.

@simevidas
Owner
@brandonaaskov

I love this feature, but I had to look up the link to this issue to find the shortcut (I kept trying "t" a la github's file finder). Any chance you'd be open to changing the key-binding?

@rolfnl
rolfnl commented Feb 8, 2016

This is really nice... perhaps you can put the possible filters/sections at the top of the page, right now I need to scroll first to see what the sections are so I can use them as filters.. having a key handler is all for fast access, if I then have to remember the filters... I'm kind of wasting time scrolling. Plus, the sections could also serve as a filter for the content below, jumping to it or something like that.

But in any case, I like how simple everything is.

@simevidas
Owner

@rolfnl Yeah, I should probably show a tooltip with the possible values for the in: filter. I haven’t defined the new UI yet, but there will definitely be a handy box explaining how to use the search in more detail. Not sure what you mean by that last sentence.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment