Wikipedia:Wikipedia Signpost/2017-02-27/Technology report

Technology report

Responsive content on desktop; Offline content in Android app

Responsive content for a narrow screen... "isn't that beautiful?"

CREDIT showcase (Community, Reading, Editing, Discovery, Infrastructure and Technology) is a monthly live-streamed meeting that demonstrations developers' recent work, such as new gadgets, experiments and independent projects. It is hosted by the Wikimedia Foundation, with presentations from Wikimedia Engineering teams or individuals. The following highlights have been taken from the February's CREDIT showcase, which is available in full on Commons (WebM video) or on YouTube.

Responsive content for narrow and wide-screen displays

Derk-Jan Hartman (User:TheDJ) has written some CSS styling rules that makes Vector, the default desktop skin, adapt the display of content for both narrow and wide displays. These changes include limiting the width of content, adjusting the font size, and for wide screens, moving images and infoboxes into sidebars. The responsive content CSS is available on-wiki for users to install and test.[1]

On-wiki translatable training modules

A training module that takes it content from wiki pages

Sage Ross has developed a framework for presenting community built training modules. The modules are designed to present "bite-sized" bits of information in a way that is easy to learn - a slideshow to navigate through, without lots of distracting links that on-wiki content usually has. The slide contents are pulled from wiki pages, which makes them editable and translatable.

Offline content in the Android app

The Wikipedia Android app detects that the device is offline, and seamlessly switches to an already-download collection of articles
Kiwix is an app that allows offline browsing of Wikipedia, after downloading a collection of articles. Dmitry Brant has worked on seamlessly integrating this functionality into the Wikipedia Android app. When it detects that the device is offline, the app automatically switches to the offline collection as the content source (and warns the user that articles might not be up to date). Mobile app features, such as collapsing infoboxes and searching within the page, still work. Users can also continue reading articles they had been reading online, and navigate through links, with the pages being fetched from the offline collection. The user experience of downloading the offline collection still needs to be worked on.

Random locale for Android app developers

Stephen Niedzielski demonstrated a small change in the developmental version of the Wikipedia Android app – a randomised locale is chosen when the first time the app launched after installation. This ensures single-lingual or even bilingual developers experience "a little bit of what the rest of the world sees" in one of the almost 300 languages other than English (or their preferred language). This makes developers less likely to be completely unaware of issues in other locales.

After installing this developmental version of the Android app, the locale is randomly set to "MN" (Mongolian)

In brief

Newly approved bot tasks

Latest tech news from the Wikimedia technical community: 2017 #6, #7, & #8. Please tell other users about these changes. Not all changes will affect you. Translations are available on Meta.

  • Problems
  • Recent changes
    • Wikimedia pages will now be better at showing pictures when you share them on social media. The descriptions will be different too. You can see an example of before and after. (Phabricator task T157055)
    • The TwoColConflict extension is a new way to solve edit conflicts. It makes it easier to copy and paste the relevant text to the text field. It came to Meta and German Wikipedia recently (week of 13 February). It is also available on MediaWiki.org. It will come to more wikis later. (Meta page)
    • The edit summary box is now a little bit bigger. This is to make it follow the Wikimedia design guide. (Phabricator task T152025) You can make your edit summary box smaller again by adding code like #wpSummary { padding: 0.2em !important; } to your CSS (the number can be adjusted until it looks right for you).
    • There are some changes to the OOjs UI. Some old functions will not work anymore or not work as they used to. This could be a breaking change. (Wikitech mailing list)
    • EventStreams is a new way to show activity on Wikimedia wikis. For now it works with the recent changes feed. It will do more things later. It will replace RCStream. Tools that use RCStream should move to EventStreams before 7 July. (Analytics mailing list)
    • The Developer Wishlist is a list where developers prioritize tools they need. The voting closed at 14 February 23:59 (UTC), and the results are available on MediaWiki.org. This process is only for developers.
  • Changes this week
  • Future changes
    • Page Previews (formerly called Hovercards) was turned on for logged-out users on the Catalan, Greek, Russian, and Italian Wikipedias in the middle of February. It will be updated on 23 February to fix many bugs, and it be deployed to more wikis in March and April. Page Previews shows readers a short part of a linked article when they rest their mouse pointer on the link. This is to help them understand what it is about without leaving the article they are reading. (Phabricator task T156290, rollout plan on MediaWiki.org)
    • Tidy will be replaced later this year (see previous Signpost coverage). Instead, the HTML 5 parsing algorithm will be used to clean up bad HTML in wikitext. This will cause problems on a number of wikis. They need to be fixed first. You can see if your wiki still has something to fix here for one of the HTML problems. This list does not cover all problems. You can read about more problems. (Phabricator tasks T89331 & T134423)
  • Review

Installation code

  1. ^ Copy the following code, click here, then paste:
    mw.loader.load( '/w/index.php?title=User:TheDJ/responsiveContent.css&action=raw&ctype=text/css', 'text/css' ); // Backlink: [[User:TheDJ/responsiveContent.css]]