User:Krinkle/MediaWiki Introduction 2023

MediaWiki Introduction 2023 is a 3-part video series by Timo Tijhof, recorded in December 2023 for the MediaWiki Code Jam.

Part 1: MediaWiki core concepts

Watch on Wikimedia Commons. • Watch on YouTube

Timestamps:

00:00 Outline
00:50 Database schema
01:37 Users
02:55 Preferences
04:12 Localisation
05:02 Permissions
08:50 Bot passwords
10:10 Logging
11:58 Comments
12:35 Recent changes
15:39 Pages
16:00 Namespaces
18:14 Revisions
18:20 Example: Save an edit
19:59 Example: View a page
20:52 Link tables
21:02 Categories
24:20 Templates
25:05 Image links
25:59 GLAM
26:43 External links
27:40 Statistics
28:02 Search
29:14 JobQueue
31:58 Multimedia

High-level product and architecture perspective. Component walk-through.

Part 2: Wikipedia's extensions

Watch on Wikimedia Commons. • Watch on YouTube

Timestamps:

00:00 Outline
00:25 What is an extension?
01:52 How to install an extension?
02:01 Install WikiEditor
02:54 Install VisualEditor
03:58 Wikipedia's extensions
04:10 CentralAuth
04:38 Echo
04:56 OAuth for MediaWiki
05:40 Editor extensions
05:48 Parser extensions
06:37 Cite extension
07:37 EasyTimeline
07:56 InputBox extension
08:38 Scribunto
09:38 Faster editing performance
11:24 Media handlers
11:31 TimedMediaHandler
11:42 3D extension for MediaWiki
11:57 Spam prevention extensions
12:35 Gadgets
13:05 Gadget demo
13:41 Gadget examples

What is an extension?

How to install an extension in two easy steps.

Walk-through the installed extensions via Wikipedia's Special:Version page.

Part 3: Write an example patch

Homework preparation:
- Quickstart.
- Run PHPUnit, e.g. composer phpunit -- tests/phpunit/includes/ResourceLoader/
- Run QUnit, e.g. view http://localhost:4000/index.php/Special:JavaScriptTest
- Clone the "examples" repo in your extensions/ directory, and enable it.
How does an extension actually work?
- Manual:Extension registration (wfLoadExtension loads extension.json)
- Manual:Extension.json/Schema ("type", "SpecialPages" is a registry, "AutoloadNamespaces" is a registry).
- Best practices for extensions (keep it simple, reduce decisions/choices, fewer things to verify, "includes/").
- Manual:Coding conventions/PHP (quick open, file name = class name)
How do special pages work?
- MediaWiki takes care of URL routing.
- MediaWiki loves registries that do things for you automatically. MediaWiki constructs your SpecialPage class, and skins the output.
- Special:SpecialPages.
- Special:HelloWorld -> execute, now it's our turn.
Localisation
- Special:HelloWorld?uselang=qqx (debugging to see which message keys are used)
- i18n/en.json
Excercise 1: Edit a localisation message. Change the value of the "example-helloworld" message in en.json, and notice the change on Special:HelloWorld.
Excercise 2: Create a new localisation message. Define your message under a new key in en.json, and add code in SpecialHelloWorld.php to output it as a second paragraph, similar to how the first paragraph is added. Notice the change on Special:HelloWorld in the browser.
What are hooks?
- extension.json ("Hooks" is a central registry, "HookHandlers" is a mapping within your extension)
- MediaWiki will call your Hooks.php#onSomething method, now it's our turn.
- Follow mentions of "BeforePageDisplay" from extension.json to Hooks.php.
How can extensions define extra configuration?
- $wgExampleEnableWelcome ("ExampleEnableWelcome", under "config", in extension.json; "config" is another central registry)
- You can set or change these in your LocalSettings.php file.
Excercise 3: Make a config change. Edit LocalSettings.php and disable $wgExampleEnableWelcome by setting it to false. Notice the change on Main Page. Comment out the line you added, to re-enable it and notice difference.
Excercise 4: Edit a hook handler. Make it "welcome" you on special pages instead of articles. Notice the change on Special:HelloWorld and Main Page.
- Namespaces (remember from Part 1)
How do extensions define extra ResourceLoader modules?
- extension.json ("ResourceModules" is another registry, "dependencies", "packageFiles")
- ResourceLoader/Developing with ResourceLoader
- onBeforePageDisplay calls OutputPage::addModule, which is responsible for changing the HTML so that your module is loaded on the page.
- The welcome.js file is part of this module.
- The styles.css file is also part of this module.
How do extension define frontend unit tests?
- ext.Example.welcome.test.js (find it in extension.json)
- Run via Special:JavaScriptTest?filter=welcome (filter optional, but helps focus and runs faster)
Excercise 5: Improve test and fix the bug. The welcome message currently greets you with the wrong day. Improve the QUnit test by using strictEquals. Copy the "actual" value from Special:JavaScriptTest and edit the test file to make it the "expected" value, except with the correct day. The test should now fail. Try to fix this bug in welcome.js, and notice the tests passing afterwards. Also verify that it works correctly on the Main Page (or Special:HelloWorld, depending on your wgExampleEnableWelcome).
If you have a mentor or onboarding buddy, and want to share your result, use a Phabricator paste:
- Copy the output from git diff. For example, git diff | pbcopy on macOS. Or, write it to a temporary file with git diff > tmp.txt, and open that in your text editor, select all and copy that.
- Create Phabricator paste