Team blog: Developers

User preferences without clutter?

I’m not a big fan of classic user preference dialogs where you have to hunt a million sections for the thing you care about. Where it’s possible to do it intuitively, I prefer to integrate preferences into the part of the application they regulate, where the user is likely to look for them.

In this vein, I just added a little pushpin widget to load the rich-text editor by default. Here’s what it looks like:

User preference switcher animation

Under the hood, it makes an API call to toggle the preference. This means it’s a real preference, not stored in your browser. Any new review or other long form text field you write or edit will be loaded in rich text until you click the pushpin again. Is it intuitive? I don’t know — feel free to comment on the relevant bug if you think it can be improved. But I do like that it doesn’t make me go hunting in a “user preferences” section.

Speaking of clutter, I also find it important to prune features that no longer make sense. Accordingly, we’ll be removing the “live preview” feature soon, since it’s made largely obsolete by the rich-text editor. If you disagree, speak up on the bug :-).

   Permanent link

Rich-text editor is now live

I just deployed the initial release of the new rich-text editor for all large text fields on the site (reviews, blog posts, team descriptions, bios). If you have JavaScript enabled, you should see the mode-switcher below the relevant text fields. Here’s what it looks like in action:

Animated RTE example

This editor is powered by ProseMirror, which is more a toolkit for building editors than a drop-in solution. We’ve hacked it to serve the purposes of this site. Features include:

  • You can switch back and forth between markdown and rich-text, and edit in either representation. (Most markdown editing tools only render a preview.)

  • When in rich-text mode, you can use markdown shortcuts such as >, *, 1., # at the beginning of a line to get quotes, bullet point lists, numbered lists, or headlines.

  • Want a bigger editor? In browsers that support it, you can drag-increase the size of the markdown editor. When you switch to rich-text, the new height will be preserved. In future, we may implement a proper full-screen mode.

  • All UI messages can be translated via translatewiki.net (become a translator).

ProseMirror itself is still in early development (watch out for this bug with trailing spaces), and I’m sure there are problems in the integration as well. Please don’t hesitate to report bugs!

We’ll continue to chip away at related issue, and will also start turning our attention to other shiny features such as

  • metadata for review subjects

  • import of items from Wikidata

  • API, API, API!

   Permanent link

Coming soon: A new editor

Some new users have requested a nicer way to write reviews, so I’ve decided to give the editing UI some love before moving on to some other high priority tasks. I’m currently working on integrating ProseMirror, which is an open source rich-text editor library.

ProseMirror is extremely modular – it’s basically a “build your own editor” kind of deal. The downside is that it takes longer to build something; the upside is that it’s possible to build advanced functionality and to customize the UI more easily.

Markdown is not going anywhere. One of the PM examples demonstrates the side-by-side use of markdown and rich-text editing. The goal is to create a similar user experience for lib.reviews. This way, users will be able to choose the editing environment they prefer on a case-by-case basis.

   Permanent link

A nicer language selector

The language list was starting to get cluttered (thanks to translators!), so we’re now using a dropdown, which should make things more manageable for some time to come.

Language selector dropdown

If you frequently change languages, two tips:

  • You can access the dropdown with the access key “L”, e.g., “Alt+L” in Chromium.
  • By typing the language code inside the dropdown, you can quickly select your favorite language, no matter what language the user interface is currently in.

(Note that this change adds a new interface text for the language button, which will take a little while to get translated into all the supported languages.)

   Permanent link

Search features deployed

We now have the first round of search features. This includes autocompletion (requires JavaScript):

Search autocompletion

And it includes full-text search across reviews, including highlighting:

Full-text match

See the search page for some tips on valid search operators (a full technical breakdown of supported operators can be found here).

A note on language support:

  • If you’re searching in a language other than English, content in that language will show up.
  • Content in English will always be searched.
  • In addition, we make certain fallback assumptions, e.g., Brazilian Portuguese also searches European Portuguese.

In future, it may be desirable to make those search options user-configurable, as well.

The search feature is based on ElasticSearch, an open source search backend used by many websites, including Wikipedia.

As always, please don’t hesitate to report bugs, or find us on #lib.reviews if you want to chat.

   Permanent link

ようこそ: Japanese is live!

Thanks to Higa4, the Japanese language version of lib.reviews is now live (preview).

Is your language still missing? See our earlier blog post for instructions on how to get involved in translating lib.reviews.

   Permanent link

Pretty URLs: Round two

Review subjects now have short URLs as well, such as:

https://lib.reviews/archive-webextension

Old “/thing/ID” URLs will continue to work. The short identifiers (“slugs”) are derived from a label associated with a review subject, and only in the original language that was used to create it (i.e. edits to translations will have no effect). In the absence of a label, the “/ID” URL schema is used.

If a thing with a given label already exists, a suffix like “-2” is automatically added. If a label changes, a redirect is kept in place. For now, we don’t limit the number of redirects/aliases, as we can trace a user’s edits and can simply undo excessive redirect use.

   Permanent link

Üdvözöljük: Hungarian is live

Thanks to BanKris, the Hungarian language version of lib.reviews is now live (preview).

Is your language still missing? See our earlier blog post for instructions on how to get involved in translating lib.reviews.

   Permanent link

Pretty URLs: Round one

To make lib.reviews more user-friendly, URLs to frequently accessed items will be increasingly human-readable, starting with team pages. Teams now have URLs such as:

https://lib.reviews/team/nonprofit-media

… instead of the more unwieldy:

https://lib.reviews/team/e7b911bb-9a13-4066-a70c-573d6d9ac7e7

The team name is translated into what we call a “slug”, a lower-case, hyphenated version stripped of invalid characters. Rename a team in its original language, and we’ll automatically create a redirect for you.

We’ll apply a similar scheme to “things” (review subjects), and perhaps to individual reviews/blog posts as well.

Pretty URLs are one major blocker before we move on to the most-requested feature: search.

   Permanent link

Welkom: Dutch is live

With big thanks to Effeietsanders, Hex, Keunes and Siebrand, the Dutch language version of lib.reviews is now live. Thanks also to Siebrand for preparing a pull request to enable the new language.

Is your language still missing? See our earlier blog post for instructions on how to get involved in translating lib.reviews.

   Permanent link

 Older blog posts