[gnome-devel-docs] Update German translation



commit 62a1e007f0952af481dde3d70ce72c3bde640089
Author: Mario Blättermann <mario blaettermann gmail com>
Date:   Sat Aug 11 17:45:19 2018 +0000

    Update German translation

 platform-demos/de/de.po | 12902 ++++++++++++++++++++++++++++------------------
 1 file changed, 7914 insertions(+), 4988 deletions(-)
---
diff --git a/platform-demos/de/de.po b/platform-demos/de/de.po
index 1e736272..278afeab 100644
--- a/platform-demos/de/de.po
+++ b/platform-demos/de/de.po
@@ -1,13 +1,13 @@
 # German translation for gnome-devel-docs (tutorial demos).
 # Copyright (C) 2011 gnome-devel-docs's COPYRIGHT HOLDER
 # This file is distributed under the same license as the gnome-devel-docs package.
-# Mario Blättermann <mario blaettermann gmail com>, 2011, 2013, 2016.
+# Mario Blättermann <mario blaettermann gmail com>, 2011, 2013, 2016, 2018.
 #
 msgid ""
 msgstr ""
 "Project-Id-Version: gnome-devel-docs master\n"
-"POT-Creation-Date: 2016-04-14 07:34+0000\n"
-"PO-Revision-Date: 2016-04-14 11:36+0200\n"
+"POT-Creation-Date: 2018-07-07 08:43+0000\n"
+"PO-Revision-Date: 2018-08-11 19:43+0200\n"
 "Last-Translator: Mario Blättermann <mario blaettermann gmail com>\n"
 "Language-Team: German <gnome-de gnome org>\n"
 "Language: de\n"
@@ -15,92 +15,12 @@ msgstr ""
 "Content-Type: text/plain; charset=UTF-8\n"
 "Content-Transfer-Encoding: 8bit\n"
 "Plural-Forms: nplurals=2; plural=(n != 1);\n"
-"X-Generator: Poedit 1.8.7.1\n"
+"X-Generator: Poedit 2.1\n"
 
 #. Put one translator per line, in the form NAME <EMAIL>, YEAR1, YEAR2
 msgctxt "_"
 msgid "translator-credits"
-msgstr "Mario Blättermann <mario blaettermann gmail com>, 2011, 2013"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:95
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_01.png' md5='3fdc22d361cf801f71557fdc76ae5b49'"
-msgstr "external ref='media/02_jsgrid_01.png' md5='3fdc22d361cf801f71557fdc76ae5b49'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:150
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_02.png' md5='07db86b0043ba5c3c24a90d7322bd81e'"
-msgstr "external ref='media/02_jsgrid_02.png' md5='07db86b0043ba5c3c24a90d7322bd81e'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:167
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_03.png' md5='817351e73c687d47253c56ed06b6629f'"
-msgstr "external ref='media/02_jsgrid_03.png' md5='817351e73c687d47253c56ed06b6629f'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:197
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_04.png' md5='eeaead27cee2851877fc3cfe66177f07'"
-msgstr "external ref='media/02_jsgrid_04.png' md5='eeaead27cee2851877fc3cfe66177f07'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:206
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_05.png' md5='a3ad12f432d5977fc1f66302ad5b7498'"
-msgstr "external ref='media/02_jsgrid_05.png' md5='a3ad12f432d5977fc1f66302ad5b7498'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:217
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_06.png' md5='450e48dbf6b8f5ce1c208e4812e1714b'"
-msgstr "external ref='media/02_jsgrid_06.png' md5='450e48dbf6b8f5ce1c208e4812e1714b'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:227
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_07.png' md5='0b304d70728903fbb2601d55bf00fdb9'"
-msgstr "external ref='media/02_jsgrid_07.png' md5='0b304d70728903fbb2601d55bf00fdb9'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/02_welcome_to_the_grid.js.page:249
-msgctxt "_"
-msgid "external ref='media/02_jsgrid_08.png' md5='78890beb47bd11360154b8ca4d50d1ff'"
-msgstr "external ref='media/02_jsgrid_08.png' md5='78890beb47bd11360154b8ca4d50d1ff'"
+msgstr "Mario Blättermann <mario blaettermann gmail com>, 2011, 2013, 2016, 2018"
 
 #. (itstool) path: credit/name
 #: C/02_welcome_to_the_grid.js.page:15 C/03_getting_the_signal.js.page:16 C/aboutdialog.js.page:12
@@ -223,28 +143,33 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:43 C/comboboxtext.js.page:31 C/textview.js.page:39
+#: C/02_welcome_to_the_grid.js.page:43
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
 msgid ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 msgstr ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 
 #. (itstool) path: section/p
 #: C/02_welcome_to_the_grid.js.page:49
 msgid ""
 "This part always goes at the start of your code. Depending on what you'll be doing with it, you may want to 
"
 "declare more imports here. What we're writing today is pretty basic, so these are all we need; Gtk for the "
-"widgets, and Lang so we can use Lang.bind to connect our application's activate and startup signals to the "
-"requisite functions."
+"widgets, using the stable '3.0' API."
 msgstr ""
 
 #. (itstool) path: section/p
@@ -255,72 +180,99 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/02_welcome_to_the_grid.js.page:51
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
 msgid ""
 "\n"
-"const WelcomeToTheGrid = new Lang.Class({\n"
-"    Name: 'Welcome to the Grid',\n"
-"\n"
+"class WelcomeToTheGrid {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
-"const WelcomeToTheGrid = new Lang.Class({\n"
-"    Name: 'Welcome to the Grid',\n"
-"\n"
+"class WelcomeToTheGrid {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:74
+#: C/02_welcome_to_the_grid.js.page:72
 msgid ""
 "This is the start of the application itself, and the _init function which creates it. It tells _buildUI to 
create "
 "an ApplicationWindow, which we're going to call _window, and it tells our window to present itself whenever 
needed."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:75
+#: C/02_welcome_to_the_grid.js.page:73
 msgid "This part, again, is pretty much copy-and-paste, but you always want to give your application a 
unique name."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:77
+#: C/02_welcome_to_the_grid.js.page:75
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            border_width: 10,\n"
+#| "            title: \"Welcome to the Grid\"});\n"
 msgid ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -331,7 +283,7 @@ msgid ""
 msgstr ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -341,7 +293,7 @@ msgstr ""
 "            title: \"Welcome to the Grid\"});\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:88
+#: C/02_welcome_to_the_grid.js.page:86
 msgid ""
 "Finally, we start off the _buildUI function by creating a new ApplicationWindow. We specify that it goes 
with this "
 "application, that it should appear in the center of the screen, and that there should be at least 10 pixels 
"
@@ -350,23 +302,33 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/02_welcome_to_the_grid.js.page:92
+#: C/02_welcome_to_the_grid.js.page:90
 msgid "Reaching into the GTK+ toolbox"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:93
+#: C/02_welcome_to_the_grid.js.page:91
 msgid "What widgets should we use? Well, let's say we want to write an application that looks like this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:93
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_01.png' md5='3fdc22d361cf801f71557fdc76ae5b49'"
+msgstr "external ref='media/02_jsgrid_01.png' md5='3fdc22d361cf801f71557fdc76ae5b49'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:97
+#: C/02_welcome_to_the_grid.js.page:95
 msgid ""
 "We're going to need, at the very least, a picture and a text label to go with it. Let's start with the 
picture:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:98
+#: C/02_welcome_to_the_grid.js.page:96
 #, no-wrap
 msgid ""
 "\n"
@@ -378,7 +340,7 @@ msgstr ""
 "        this._image = new Gtk.Image ({ file: \"gnome-image.png\" });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:103
+#: C/02_welcome_to_the_grid.js.page:101
 msgid ""
 "You can download the image file used in this example <link href=\"https://live.gnome.org/TarynFox?";
 "action=AttachFile&amp;do=get&amp;target=gnome-image.png\">here</link>. Be sure to put it in the same 
directory as "
@@ -386,7 +348,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:105
+#: C/02_welcome_to_the_grid.js.page:103
 #, no-wrap
 msgid ""
 "\n"
@@ -398,7 +360,7 @@ msgstr ""
 "        this._label = new Gtk.Label ({ label: \"Welcome to GNOME, too!\" });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:109
+#: C/02_welcome_to_the_grid.js.page:107
 msgid ""
 "That code adds in the label beneath. You can see how we create widgets, here; each one is a part of Gtk, 
and we "
 "can give it properties that customize how it behaves. In this case, we set the Image's file property to be 
the "
@@ -407,28 +369,28 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/02_welcome_to_the_grid.js.page:110
+#: C/02_welcome_to_the_grid.js.page:108
 msgid ""
 "Yes, it sounds redundant for a Label to have a label property, but it's not. Other widgets that contain 
text have "
 "a label property, so it's <em>consistent</em> for the Label widget to have one too."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:111
+#: C/02_welcome_to_the_grid.js.page:109
 msgid ""
 "We can't just add these widgets to our window in order, though, the same way HTML elements appear in the 
order you "
 "write them. That's because an ApplicationWindow can only contain one widget."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:112
+#: C/02_welcome_to_the_grid.js.page:110
 msgid ""
 "How do we get around that? By making that one widget a container widget, which can hold more than one 
widget and "
 "organize them inside it. Behold: The Grid."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:113
+#: C/02_welcome_to_the_grid.js.page:111
 #, no-wrap
 msgid ""
 "\n"
@@ -440,14 +402,14 @@ msgstr ""
 "        this._grid = new Gtk.Grid ();\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:118
+#: C/02_welcome_to_the_grid.js.page:116
 msgid ""
 "We're not giving it any properties yet. Those will come later, as we learn how to use the Grid's powers. 
First, "
 "let's attach the Image and Label we made to our Grid."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:119
+#: C/02_welcome_to_the_grid.js.page:117
 #, no-wrap
 msgid ""
 "\n"
@@ -461,34 +423,48 @@ msgstr ""
 "        this._grid.attach (this._label, 0, 1, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:125
+#: C/02_welcome_to_the_grid.js.page:123
 msgid "This code looks awfully complicated, but it's not. Here's what those numbers mean:"
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/02_welcome_to_the_grid.js.page:127
+#: C/02_welcome_to_the_grid.js.page:125
 msgid ""
 "The <em>first</em> number is what left-to-right position to put things in, starting from 0. Any widget that 
uses a "
 "0 here goes all the way to the left."
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/02_welcome_to_the_grid.js.page:128
+#: C/02_welcome_to_the_grid.js.page:126
 msgid ""
 "The <em>second</em> number is what top-to-bottom position to put a given widget in, starting from 0. The 
Label "
 "goes beneath the Image, so we give the Image a 0 and the Label a 1 here."
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/02_welcome_to_the_grid.js.page:129
+#: C/02_welcome_to_the_grid.js.page:127
 msgid ""
 "The <em>third</em> and <em>fourth</em> numbers are how many columns and rows a widget should take up. We'll 
see "
 "how these work in a minute."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:132
+#: C/02_welcome_to_the_grid.js.page:130
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new WelcomeToTheGrid ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "\n"
 "        // Add the grid to the window\n"
@@ -498,7 +474,7 @@ msgid ""
 "        this._window.show_all();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new WelcomeToTheGrid ();\n"
@@ -512,14 +488,14 @@ msgstr ""
 "        this._window.show_all();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new WelcomeToTheGrid ();\n"
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:146
+#: C/02_welcome_to_the_grid.js.page:144
 msgid ""
 "Now that we've created the Grid and attached all our widgets to it, we add it to the window and tell the 
window to "
 "show itself, as the last part of the _buildUI function. As always, to finish up we create a new instance of 
the "
@@ -527,39 +503,49 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:147
+#: C/02_welcome_to_the_grid.js.page:145
 msgid ""
 "Save your application as welcome_to_the_grid.js. Then, to run your application just open a terminal, go to 
the "
 "directory where your application is at, and type"
 msgstr ""
 
 #. (itstool) path: section/screen
-#: C/02_welcome_to_the_grid.js.page:148
+#: C/02_welcome_to_the_grid.js.page:146
 #, no-wrap
 msgid " <output style=\"prompt\">$ </output>gjs welcome_to_the_grid.js "
 msgstr " <output style=\"prompt\">$ </output>gjs welcome_to_the_grid.js "
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:148
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_02.png' md5='07db86b0043ba5c3c24a90d7322bd81e'"
+msgstr "external ref='media/02_jsgrid_02.png' md5='07db86b0043ba5c3c24a90d7322bd81e'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:152
+#: C/02_welcome_to_the_grid.js.page:150
 msgid ""
 "There we go! But wait. That doesn't look right. Why is the Label crammed up next to the Image like that? 
That "
 "doesn't look as nice, and it makes it harder to read. What can we do about this?"
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/02_welcome_to_the_grid.js.page:156
+#: C/02_welcome_to_the_grid.js.page:154
 msgid "Tweaking the Grid"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:158
+#: C/02_welcome_to_the_grid.js.page:156
 msgid ""
 "One thing we can do, is we can give the Label a margin_top property when we create it. This works sort of 
like "
 "setting a margin for an HTML element using inline CSS styling."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:159
+#: C/02_welcome_to_the_grid.js.page:157
 #, no-wrap
 msgid ""
 "\n"
@@ -575,21 +561,31 @@ msgstr ""
 "            margin_top: 20 });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:166
+#: C/02_welcome_to_the_grid.js.page:164
 msgid ""
 "Of course, if we do that then if we replace the Label with something else -- or add in another widget -- 
then we "
 "have to repeat the margin_top on it too. Otherwise we end up with something like this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:165
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_03.png' md5='817351e73c687d47253c56ed06b6629f'"
+msgstr "external ref='media/02_jsgrid_03.png' md5='817351e73c687d47253c56ed06b6629f'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:169
+#: C/02_welcome_to_the_grid.js.page:167
 msgid ""
 "We could give the Image a margin_bottom property, but that won't work when the new Label is in a separate 
column. "
 "So how about we try this instead:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:170
+#: C/02_welcome_to_the_grid.js.page:168
 #, no-wrap
 msgid ""
 "\n"
@@ -603,24 +599,24 @@ msgstr ""
 "            row_spacing: 20 });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:176
+#: C/02_welcome_to_the_grid.js.page:174
 msgid "That makes it so that there are always 20 pixels of space in between each horizontal row."
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/02_welcome_to_the_grid.js.page:177
+#: C/02_welcome_to_the_grid.js.page:175
 msgid ""
 "Yes, you can also set the column_spacing property on a Grid, or the margin_left and margin_right properties 
on any "
 "widget. Try them out, if you like!"
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/02_welcome_to_the_grid.js.page:181
+#: C/02_welcome_to_the_grid.js.page:179
 msgid "Adding more widgets"
 msgstr "Weitere Widgets hinzufügen"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:183
+#: C/02_welcome_to_the_grid.js.page:181
 msgid ""
 "If we did want to add a second Label, how would we do it so that it actually looked like it belonged there? 
One "
 "way is to center the Image on top, so that it's above both Labels instead of just the one on the left. 
That's "
@@ -628,7 +624,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:184
+#: C/02_welcome_to_the_grid.js.page:182
 #, no-wrap
 msgid ""
 "\n"
@@ -652,7 +648,7 @@ msgstr ""
 "        this._grid.attach (this._labelTwo, 1, 1, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:195
+#: C/02_welcome_to_the_grid.js.page:193
 msgid ""
 "After we create the second Label, we attach it to the Grid to the right of the first Label. Remember, the 
first "
 "two numbers count columns and rows from left to right and top to bottom, starting with 0. So if the first 
Label is "
@@ -660,26 +656,36 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:196
+#: C/02_welcome_to_the_grid.js.page:194
 msgid ""
 "Note the number 2 in the attach statement for the Image. That's what does the trick here. That number is 
how many "
 "columns the Image spans, remember? So when we put it together, we get something like this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:195
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_04.png' md5='eeaead27cee2851877fc3cfe66177f07'"
+msgstr "external ref='media/02_jsgrid_04.png' md5='eeaead27cee2851877fc3cfe66177f07'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:199
+#: C/02_welcome_to_the_grid.js.page:197
 msgid "There are two things you should take note of, here."
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/02_welcome_to_the_grid.js.page:201
+#: C/02_welcome_to_the_grid.js.page:199
 msgid ""
 "Setting the Image to span two columns doesn't stretch the picture itself horizontally. Instead, it 
stretches the "
 "invisible box taken up by the Image widget to fill both columns, then places the Image in the center of 
that box."
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/02_welcome_to_the_grid.js.page:202
+#: C/02_welcome_to_the_grid.js.page:200
 msgid ""
 "Even though we've set the Grid's row_spacing and the ApplicationWindow's border_width properties, we 
haven't yet "
 "set anything that puts a border in between the two Labels. They were separate earlier when the Image was in 
only "
@@ -687,19 +693,29 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:205
+#: C/02_welcome_to_the_grid.js.page:203
 msgid ""
 "There are at least three ways we can get around that last one. First, we can set a margin_left or 
margin_right on "
 "one of the Labels:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:204
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_05.png' md5='a3ad12f432d5977fc1f66302ad5b7498'"
+msgstr "external ref='media/02_jsgrid_05.png' md5='a3ad12f432d5977fc1f66302ad5b7498'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:208
+#: C/02_welcome_to_the_grid.js.page:206
 msgid "Second, we can set the Grid's column_homogeneous property to true."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:209
+#: C/02_welcome_to_the_grid.js.page:207
 #, no-wrap
 msgid ""
 "\n"
@@ -715,17 +731,27 @@ msgstr ""
 "            row_spacing: 20 });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:216
+#: C/02_welcome_to_the_grid.js.page:214
 msgid "That makes it look something like this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:215
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_06.png' md5='450e48dbf6b8f5ce1c208e4812e1714b'"
+msgstr "external ref='media/02_jsgrid_06.png' md5='450e48dbf6b8f5ce1c208e4812e1714b'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:219
+#: C/02_welcome_to_the_grid.js.page:217
 msgid "And third, we can set the Grid's column_spacing property, the same way we set its row_spacing."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:220
+#: C/02_welcome_to_the_grid.js.page:218
 #, no-wrap
 msgid ""
 "\n"
@@ -741,24 +767,34 @@ msgstr ""
 "            row_spacing: 20 });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:226
+#: C/02_welcome_to_the_grid.js.page:224
 msgid "That makes it look like this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:225
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_07.png' md5='0b304d70728903fbb2601d55bf00fdb9'"
+msgstr "external ref='media/02_jsgrid_07.png' md5='0b304d70728903fbb2601d55bf00fdb9'"
+
 #. (itstool) path: section/title
-#: C/02_welcome_to_the_grid.js.page:231
+#: C/02_welcome_to_the_grid.js.page:229
 msgid "Using stock images"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:233
+#: C/02_welcome_to_the_grid.js.page:231
 msgid ""
 "GNOME has a lot of stock images on hand already, that we can use if we don't feel like creating our own or 
if we "
 "want a universally-recognized icon. Here's how we create a stock image, compared to how we create a normal 
one:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:234
+#: C/02_welcome_to_the_grid.js.page:232
 #, no-wrap
 msgid ""
 "\n"
@@ -776,14 +812,14 @@ msgstr ""
 "        this._icon = new Gtk.Image ({ stock: 'gtk-about' });\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:241
+#: C/02_welcome_to_the_grid.js.page:239
 msgid ""
 "After that, we attach it to the Grid to the left of the first Label. (We aren't using the second one for 
this "
 "example.)"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:242
+#: C/02_welcome_to_the_grid.js.page:240
 #, no-wrap
 msgid ""
 "\n"
@@ -799,12 +835,22 @@ msgstr ""
 "        this._grid.attach (this._label, 1, 1, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:248
+#: C/02_welcome_to_the_grid.js.page:246
 msgid "That gives us this, when we run it:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/02_welcome_to_the_grid.js.page:247
+msgctxt "_"
+msgid "external ref='media/02_jsgrid_08.png' md5='78890beb47bd11360154b8ca4d50d1ff'"
+msgstr "external ref='media/02_jsgrid_08.png' md5='78890beb47bd11360154b8ca4d50d1ff'"
+
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:251
+#: C/02_welcome_to_the_grid.js.page:249
 msgid ""
 "That's what the stock \"About\" icon looks like. You can see a list of all the stock items starting with 
gtk-about "
 "in <link href=\"https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-ABOUT:CAPS\";>GNOME's "
@@ -813,7 +859,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/02_welcome_to_the_grid.js.page:252
+#: C/02_welcome_to_the_grid.js.page:250
 msgid ""
 "We put single quotes around 'gtk-about' here because, unlike text strings that have double quotes around 
them, "
 "that part will never need to be translated into another language. In fact, if it <em>were</em> translated 
it'd "
@@ -821,17 +867,17 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/02_welcome_to_the_grid.js.page:257 C/03_getting_the_signal.js.page:338 C/hellognome.js.page:187
+#: C/02_welcome_to_the_grid.js.page:255 C/03_getting_the_signal.js.page:336 C/hellognome.js.page:191
 msgid "What's next?"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:258
+#: C/02_welcome_to_the_grid.js.page:256
 msgid "Before we go on to the next tutorial, let's try something a little different:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:259
+#: C/02_welcome_to_the_grid.js.page:257
 #, no-wrap
 msgid ""
 "\n"
@@ -855,7 +901,7 @@ msgstr ""
 "        this._grid.attach (this._button, 1, 1, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:270
+#: C/02_welcome_to_the_grid.js.page:268
 msgid ""
 "That's right, we turned the Label into a Button just by changing the name! If you run the application and 
click on "
 "it, though, you'll find that it doesn't do anything. How do we make our Button do something? That's what 
we'll "
@@ -863,13 +909,13 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/02_welcome_to_the_grid.js.page:271
+#: C/02_welcome_to_the_grid.js.page:269
 msgid ""
 "If you like, feel free to spend some time experimenting with Grids, Labels, and Images, including stock 
images."
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/02_welcome_to_the_grid.js.page:272
+#: C/02_welcome_to_the_grid.js.page:270
 msgid ""
 "One trick you can use to make more complex layouts is to nest Grids inside of each other. This lets you 
group "
 "together related widgets, and rearrange them easily. Take a look at the <link 
xref=\"radiobutton.js\">RadioButton</"
@@ -877,48 +923,132 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/02_welcome_to_the_grid.js.page:276 C/checkbutton.js.page:131 C/comboboxtext.js.page:171 
C/combobox.js.page:228
-#: C/hellognome.js.page:194 C/messagedialog.js.page:184 C/radiobutton.js.page:269 C/scale.js.page:203
+#: C/02_welcome_to_the_grid.js.page:274 C/checkbutton.js.page:130 C/comboboxtext.js.page:171 
C/combobox.js.page:228
+#: C/hellognome.js.page:198 C/messagedialog.js.page:184 C/radiobutton.js.page:269 C/scale.js.page:203
 #: C/spinbutton.js.page:194 C/statusbar.js.page:216 C/switch.js.page:259 C/textview.js.page:243
 #: C/togglebutton.js.page:148 C/treeview_simple_liststore.js.page:267
 msgid "Complete code sample"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/02_welcome_to_the_grid.js.page:277
+#: C/02_welcome_to_the_grid.js.page:275
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const WelcomeToTheGrid = new Lang.Class({\n"
+#| "    Name: 'Welcome to the Grid',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application();\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            border_width: 10,\n"
+#| "            title: \"Welcome to the Grid\"});\n"
+#| "\n"
+#| "        // Create the Grid\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            // column_homogeneous: true,\n"
+#| "            // column_spacing: 20,\n"
+#| "            row_spacing: 20 });\n"
+#| "\n"
+#| "        // Create an image\n"
+#| "        this._image = new Gtk.Image ({ file: \"gnome-image.png\" });\n"
+#| "\n"
+#| "        // Create a second image using a stock icon\n"
+#| "        this._icon = new Gtk.Image ({ stock: 'gtk-about' });\n"
+#| "\n"
+#| "        // Create a label\n"
+#| "        this._label = new Gtk.Label ({\n"
+#| "            label: \"Welcome to GNOME, too!\",\n"
+#| "            /* margin_top: 20 */ });\n"
+#| "\n"
+#| "        /* Create a second label\n"
+#| "        this._labelTwo = new Gtk.Label ({\n"
+#| "            label: \"The cake is a pie.\" }); */\n"
+#| "\n"
+#| "        /* Create a button\n"
+#| "        this._button = new Gtk.Button ({\n"
+#| "            label: \"Welcome to GNOME, too!\"}); */\n"
+#| "\n"
+#| "        // Attach the images and button to the grid\n"
+#| "        this._grid.attach (this._image,  0, 0, 2, 1);\n"
+#| "        this._grid.attach (this._icon,   0, 1, 1, 1);\n"
+#| "        this._grid.attach (this._label,  1, 1, 1, 1);\n"
+#| "\n"
+#| "        // this._grid.attach (this._label, 0, 1, 1, 1);\n"
+#| "        // this._grid.attach (this._labelTwo, 1, 1, 1, 1);\n"
+#| "\n"
+#| "        // this._grid.attach (this._button, 1, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new WelcomeToTheGrid ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const WelcomeToTheGrid = new Lang.Class({\n"
-"    Name: 'Welcome to the Grid',\n"
+"class WelcomeToTheGrid {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"    this.application.connect('activate', this._onActivate.bind(this));\n"
+"    this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -969,7 +1099,7 @@ msgid ""
 "        this._window.show_all();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new WelcomeToTheGrid ();\n"
@@ -977,35 +1107,32 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const WelcomeToTheGrid = new Lang.Class({\n"
-"    Name: 'Welcome to the Grid',\n"
+"class WelcomeToTheGrid {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"    this.application.connect('activate', this._onActivate.bind(this));\n"
+"    this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -1056,52 +1183,12 @@ msgstr ""
 "        this._window.show_all();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new WelcomeToTheGrid ();\n"
 "app.application.run (ARGV);\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/03_getting_the_signal.js.page:37 C/03_getting_the_signal.js.page:351
-msgctxt "_"
-msgid "external ref='media/03_jssignal_01.png' md5='8d6ecab185f4af4534cc255d62b58b8e'"
-msgstr "external ref='media/03_jssignal_01.png' md5='8d6ecab185f4af4534cc255d62b58b8e'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/03_getting_the_signal.js.page:157 C/03_getting_the_signal.js.page:357
-msgctxt "_"
-msgid "external ref='media/03_jssignal_02.png' md5='ba941390fbafc4a0f653c8f70bca92c0'"
-msgstr "external ref='media/03_jssignal_02.png' md5='ba941390fbafc4a0f653c8f70bca92c0'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/03_getting_the_signal.js.page:231 C/03_getting_the_signal.js.page:363
-msgctxt "_"
-msgid "external ref='media/03_jssignal_03.png' md5='49ecf251b0bf57543c8d79a77b6f306d'"
-msgstr "external ref='media/03_jssignal_03.png' md5='49ecf251b0bf57543c8d79a77b6f306d'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/03_getting_the_signal.js.page:302 C/03_getting_the_signal.js.page:369
-msgctxt "_"
-msgid "external ref='media/03_jssignal_04.png' md5='dfc5221ca15ca9fba7d3c76a73804e2d'"
-msgstr "external ref='media/03_jssignal_04.png' md5='dfc5221ca15ca9fba7d3c76a73804e2d'"
-
 #. (itstool) path: info/desc
 #: C/03_getting_the_signal.js.page:21
 msgid "Create Buttons and other widgets that do things when you click on them."
@@ -1146,6 +1233,16 @@ msgstr ""
 msgid "Here is an extremely basic example:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/03_getting_the_signal.js.page:37 C/03_getting_the_signal.js.page:349
+msgctxt "_"
+msgid "external ref='media/03_jssignal_01.png' md5='8d6ecab185f4af4534cc255d62b58b8e'"
+msgstr "external ref='media/03_jssignal_01.png' md5='8d6ecab185f4af4534cc255d62b58b8e'"
+
 #. (itstool) path: section/p
 #: C/03_getting_the_signal.js.page:39
 msgid ""
@@ -1173,108 +1270,139 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/03_getting_the_signal.js.page:42
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "// We start out with 0 cookies\n"
+#| "var cookies = 0;\n"
+#| "\n"
+#| "const GettingTheSignal = new Lang.Class({\n"
+#| "    Name: 'Getting the Signal',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
 msgid ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
-"\n"
+"class GettingTheSignal {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
-"\n"
+"class GettingTheSignal {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:73
+#: C/03_getting_the_signal.js.page:71
 msgid ""
-"Take a look at the part that uses our application's connect method and Lang.bind, to connect its activate 
and "
-"startup signals to the functions that present the window and build the UI. We're going to do the same thing 
with "
-"our Button when we get to it, except that we're going to connect its \"clicked\" signal instead."
+"Take a look at the part that uses our application's connect method and bind, to connect its activate and 
startup "
+"signals to the functions that present the window and build the UI. We're going to do the same thing with 
our "
+"Button when we get to it, except that we're going to connect its \"clicked\" signal instead."
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:77
+#: C/03_getting_the_signal.js.page:75
 msgid "Click the button"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:79
+#: C/03_getting_the_signal.js.page:77
 msgid ""
 "As usual, we'll put all the code to create our Button and other widgets inside the _buildUI function, which 
is "
 "called when the application starts up."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:80
+#: C/03_getting_the_signal.js.page:78
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
 msgid ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 msgstr ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:85
+#: C/03_getting_the_signal.js.page:83
 msgid "First, we create the window itself:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:86
+#: C/03_getting_the_signal.js.page:84
 #, no-wrap
 msgid ""
 "\n"
@@ -1296,21 +1424,21 @@ msgstr ""
 "            title: \"Click the button to get a cookie!\"});\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:95
+#: C/03_getting_the_signal.js.page:93
 msgid ""
 "Note that we've set its default_height and default_width properties. These let us control how tall and wide 
the "
 "ApplicationWindow will be, in pixels."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:96
+#: C/03_getting_the_signal.js.page:94
 msgid ""
 "Next, we'll create the Label that shows us the number of cookies. We can use the cookies variable as part 
of the "
 "Label's label property."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:97
+#: C/03_getting_the_signal.js.page:95
 #, no-wrap
 msgid ""
 "\n"
@@ -1324,7 +1452,7 @@ msgstr ""
 "            label: \"Number of cookies: \" + cookies });\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:103
+#: C/03_getting_the_signal.js.page:101
 msgid ""
 "Now we'll create the Button. We set its label property to show the text that we want on the Button, and we 
connect "
 "its \"clicked\" signal to a function called _getACookie, which we'll write after we're done building our "
@@ -1332,25 +1460,32 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:104
+#: C/03_getting_the_signal.js.page:102
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Create the cookie button\n"
+#| "        this._cookieButton = new Gtk.Button ({ label: \"Get a cookie\" });\n"
+#| "\n"
+#| "        // Connect the cookie button to the function that handles clicking it\n"
+#| "        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
 msgid ""
 "\n"
 "        // Create the cookie button\n"
 "        this._cookieButton = new Gtk.Button ({ label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 msgstr ""
 "\n"
 "        // Create the cookie button\n"
 "        this._cookieButton = new Gtk.Button ({ label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:111
+#: C/03_getting_the_signal.js.page:109
 msgid ""
 "Finally, we create a Grid, attach the Label and Button to it, add it to the window and tell the window to 
show "
 "itself and its contents. That's all we need inside the _buildUI function, so we close it with a bracket, as 
well "
@@ -1359,8 +1494,27 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:112
+#: C/03_getting_the_signal.js.page:110
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Create a grid to arrange everything inside\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            row_spacing: 20 });\n"
+#| "\n"
+#| "        // Put everything inside the grid\n"
+#| "        this._grid.attach (this._cookieButton, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._cookieLabel, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "\n"
+#| "    },\n"
 msgid ""
 "\n"
 "        // Create a grid to arrange everything inside\n"
@@ -1379,7 +1533,7 @@ msgid ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
 "        // Create a grid to arrange everything inside\n"
@@ -1398,10 +1552,10 @@ msgstr ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:131
+#: C/03_getting_the_signal.js.page:129
 msgid ""
 "Now, we write the _getACookie function. Whenever our Button sends out its \"clicked\" signal, the code in 
this "
 "function will run. In this case, all it does is increase the number of cookies by 1, and update the Label 
to show "
@@ -1409,7 +1563,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:132
+#: C/03_getting_the_signal.js.page:130
 msgid ""
 "Many widgets have the same properties and methods. Both Labels and Buttons, for instance, have a label 
property "
 "that says what text is inside them, and get_label and set_label methods that let you check what that text 
is and "
@@ -1417,8 +1571,19 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:133
+#: C/03_getting_the_signal.js.page:131
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Increase the number of cookies by 1 and update the label\n"
+#| "        cookies++;\n"
+#| "        this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
 msgid ""
 "\n"
 "    _getACookie: function() {\n"
@@ -1429,7 +1594,7 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 msgstr ""
 "\n"
 "    _getACookie: function() {\n"
@@ -1440,15 +1605,15 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:145
+#: C/03_getting_the_signal.js.page:143
 msgid "Finally, we run the application, using the same kind of code as in our last tutorial."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:146
+#: C/03_getting_the_signal.js.page:144
 #, no-wrap
 msgid ""
 "\n"
@@ -1462,27 +1627,37 @@ msgstr ""
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:154
+#: C/03_getting_the_signal.js.page:152
 msgid "Flip the switch"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:155
+#: C/03_getting_the_signal.js.page:153
 msgid ""
 "Buttons aren't the only input widgets in our GTK+ toolbox. We can also use switches, like the one in this 
example. "
 "Switches don't have a label property, so we have to create a separate Label that says what it does to go 
next to "
 "it."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/03_getting_the_signal.js.page:155 C/03_getting_the_signal.js.page:355
+msgctxt "_"
+msgid "external ref='media/03_jssignal_02.png' md5='ba941390fbafc4a0f653c8f70bca92c0'"
+msgstr "external ref='media/03_jssignal_02.png' md5='ba941390fbafc4a0f653c8f70bca92c0'"
+
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:159
+#: C/03_getting_the_signal.js.page:157
 msgid ""
 "A Switch has two positions, Off and On. When a Switch is turned on, its text and background color change, 
so you "
 "can tell which position it's in."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:161
+#: C/03_getting_the_signal.js.page:159
 msgid ""
 "You may have seen Switches like these in GNOME's accessibility menu, which let you turn features like large 
text "
 "and the on-screen keyboard on and off. In this case, the Switch controls our imaginary cookie dispenser. If 
the "
@@ -1491,19 +1666,19 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:162
+#: C/03_getting_the_signal.js.page:160
 msgid ""
 "You can get to the accessibility menu by clicking on the outline of a human, near your name in the 
upper-right "
 "corner of the screen."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:163
+#: C/03_getting_the_signal.js.page:161
 msgid "Here's how we create the Switch:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:164
+#: C/03_getting_the_signal.js.page:162
 #, no-wrap
 msgid ""
 "\n"
@@ -1515,7 +1690,7 @@ msgstr ""
 "        this._cookieSwitch = new Gtk.Switch ();\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:169
+#: C/03_getting_the_signal.js.page:167
 msgid ""
 "We don't actually need to connect the Switch to anything. All we need to do is write an if statement in our 
"
 "_getACookie function, to check to see if the Switch is turned on. If we wanted to make something happen as 
soon as "
@@ -1523,26 +1698,30 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:170
+#: C/03_getting_the_signal.js.page:168
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Connect the switch to the function that handles it\n"
+#| "        this._cookieSwitch.connect ('notify::active', Lang.bind (this, this._cookieDispenser));\n"
 msgid ""
 "\n"
 "        // Connect the switch to the function that handles it\n"
-"        this._cookieSwitch.connect ('notify::active', Lang.bind (this, this._cookieDispenser));\n"
+"        this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));\n"
 msgstr ""
 "\n"
 "        // Connect the switch to the function that handles it\n"
-"        this._cookieSwitch.connect ('notify::active', Lang.bind (this, this._cookieDispenser));\n"
+"        this._cookieSwitch.connect ('notify::active', this._cookieDispenser.bind(this));\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:175
+#: C/03_getting_the_signal.js.page:173
 msgid ""
 "A Switch is set to the off position by default. If we wanted the Switch to start out turned on, we would 
set the "
 "value of its active property to true when we create it."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:176
+#: C/03_getting_the_signal.js.page:174
 #, no-wrap
 msgid ""
 "\n"
@@ -1552,7 +1731,7 @@ msgstr ""
 "        this._cookieSwitch = new Gtk.Switch ({ active: true });\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:180
+#: C/03_getting_the_signal.js.page:178
 msgid ""
 "Let's just create it normally, though, and then create the Label that goes with it. We want the Switch and 
the "
 "Label to be kept right next to each other, so we'll create a Grid just for them, then put that Grid in our 
larger "
@@ -1560,7 +1739,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:181
+#: C/03_getting_the_signal.js.page:179
 #, no-wrap
 msgid ""
 "\n"
@@ -1598,12 +1777,12 @@ msgstr ""
 "        this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:199
+#: C/03_getting_the_signal.js.page:197
 msgid "And now we arrange everything in the larger Grid like so."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:200
+#: C/03_getting_the_signal.js.page:198
 #, no-wrap
 msgid ""
 "\n"
@@ -1619,7 +1798,7 @@ msgstr ""
 "        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:207
+#: C/03_getting_the_signal.js.page:205
 msgid ""
 "Now we change the _getACookie function so that it checks to see if the cookie dispenser is turned on. We do 
that "
 "by using the Switch's get_active method. It returns true if the Switch is turned on, and false if the 
Switch is "
@@ -1627,18 +1806,32 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:208
+#: C/03_getting_the_signal.js.page:206
 msgid ""
 "When a method is used in an if statement like this, the code inside the if statement is executed if the 
method "
 "returns true."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:209
+#: C/03_getting_the_signal.js.page:207
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Is the cookie dispenser turned on?\n"
+#| "        if (this._cookieSwitch.get_active()) {\n"
+#| "\n"
+#| "            // Increase the number of cookies by 1 and update the label\n"
+#| "            cookies++;\n"
+#| "            this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "    }\n"
 msgid ""
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Is the cookie dispenser turned on?\n"
 "        if (this._cookieSwitch.get_active()) {\n"
@@ -1652,7 +1845,7 @@ msgid ""
 "    }\n"
 msgstr ""
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Is the cookie dispenser turned on?\n"
 "        if (this._cookieSwitch.get_active()) {\n"
@@ -1666,12 +1859,12 @@ msgstr ""
 "    }\n"
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:227
+#: C/03_getting_the_signal.js.page:225
 msgid "Tuning the radio"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:229
+#: C/03_getting_the_signal.js.page:227
 msgid ""
 "Another type of input widget we can use is called the RadioButton. You create them in groups, and then only 
one "
 "RadioButton in a group can be selected at a time. They're called RadioButtons because they work like the 
channel "
@@ -1679,8 +1872,18 @@ msgid ""
 "pressed one button in, another would pop back out."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/03_getting_the_signal.js.page:229 C/03_getting_the_signal.js.page:361
+msgctxt "_"
+msgid "external ref='media/03_jssignal_03.png' md5='49ecf251b0bf57543c8d79a77b6f306d'"
+msgstr "external ref='media/03_jssignal_03.png' md5='49ecf251b0bf57543c8d79a77b6f306d'"
+
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:233
+#: C/03_getting_the_signal.js.page:231
 msgid ""
 "First off, let's change our ApplicationWindow's name and increase its border_width property, so that our 
widgets "
 "aren't packed in too tightly. The border_width is the number of pixels between any widget and the edge of 
the "
@@ -1688,7 +1891,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:234
+#: C/03_getting_the_signal.js.page:232
 #, no-wrap
 msgid ""
 "\n"
@@ -1712,14 +1915,14 @@ msgstr ""
 "            title: \"Choose the one that says 'cookie'!\"});\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:245
+#: C/03_getting_the_signal.js.page:243
 msgid ""
 "After that, we create the RadioButtons. Remember how they're created in groups? The way we do that, is we 
set each "
 "new RadioButton's group property to the name of another RadioButton."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:246
+#: C/03_getting_the_signal.js.page:244
 #, no-wrap
 msgid ""
 "\n"
@@ -1739,14 +1942,14 @@ msgstr ""
 "            group: this._cookieRadio });\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:255
+#: C/03_getting_the_signal.js.page:253
 msgid ""
 "Next, we create a Grid for the RadioButtons. Remember, we don't have to arrange things in Grids in the same 
order "
 "that we create them in."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:256
+#: C/03_getting_the_signal.js.page:254
 #, no-wrap
 msgid ""
 "\n"
@@ -1764,19 +1967,19 @@ msgstr ""
 "        this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:264
+#: C/03_getting_the_signal.js.page:262
 msgid ""
 "Normally, the RadioButton that's selected by default is the one that's the name of the group. We want the 
first "
 "\"Not cookie\" button to be selected by default, though, so we use its set_active method."
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:265
+#: C/03_getting_the_signal.js.page:263
 msgid "We could also set its active property to true when we create it."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:266
+#: C/03_getting_the_signal.js.page:264
 #, no-wrap
 msgid ""
 "\n"
@@ -1788,12 +1991,12 @@ msgstr ""
 "        this._notCookieOne.set_active (true);\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:271
+#: C/03_getting_the_signal.js.page:269
 msgid "Now we arrange everything in our main Grid like usual ..."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:272
+#: C/03_getting_the_signal.js.page:270
 #, no-wrap
 msgid ""
 "\n"
@@ -1809,16 +2012,30 @@ msgstr ""
 "        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:279
+#: C/03_getting_the_signal.js.page:277
 msgid "And then we change our _getACookie function to test to see if the cookie button is the one that's 
selected."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:280
+#: C/03_getting_the_signal.js.page:278
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Did you select \"cookie\" instead of \"not cookie\"?\n"
+#| "        if (this._cookieRadio.get_active()) {\n"
+#| "\n"
+#| "            // Increase the number of cookies by 1 and update the label\n"
+#| "            cookies++;\n"
+#| "            this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "    }\n"
 msgid ""
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you select \"cookie\" instead of \"not cookie\"?\n"
 "        if (this._cookieRadio.get_active()) {\n"
@@ -1832,7 +2049,7 @@ msgid ""
 "    }\n"
 msgstr ""
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you select \"cookie\" instead of \"not cookie\"?\n"
 "        if (this._cookieRadio.get_active()) {\n"
@@ -1846,29 +2063,39 @@ msgstr ""
 "    }\n"
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:298
+#: C/03_getting_the_signal.js.page:296
 msgid "Can you spell \"cookie\"?"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:300
+#: C/03_getting_the_signal.js.page:298
 msgid "The last input widget we're going to cover is the Entry widget, which is used for single-line text 
entry."
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:301
+#: C/03_getting_the_signal.js.page:299
 msgid ""
 "If you need to be able to enter in a whole paragraph or more, like if you are building a text editor, 
you'll want "
 "to look at the much more customizable <link xref=\"textview.js\">TextView</link> widget."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/03_getting_the_signal.js.page:300 C/03_getting_the_signal.js.page:367
+msgctxt "_"
+msgid "external ref='media/03_jssignal_04.png' md5='dfc5221ca15ca9fba7d3c76a73804e2d'"
+msgstr "external ref='media/03_jssignal_04.png' md5='dfc5221ca15ca9fba7d3c76a73804e2d'"
+
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:304
+#: C/03_getting_the_signal.js.page:302
 msgid "After we change the window's name, we create the Entry widget."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:305
+#: C/03_getting_the_signal.js.page:303
 #, no-wrap
 msgid ""
 "\n"
@@ -1880,12 +2107,12 @@ msgstr ""
 "        this._spellCookie = new Gtk.Entry ();\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:310
+#: C/03_getting_the_signal.js.page:308
 msgid "Next, we arrange everything in the Grid ..."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:311
+#: C/03_getting_the_signal.js.page:309
 #, no-wrap
 msgid ""
 "\n"
@@ -1901,7 +2128,7 @@ msgstr ""
 "        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:318
+#: C/03_getting_the_signal.js.page:316
 msgid ""
 "And now we modify _getACookie's if statement again, using the Entry's get_text method to retrieve the text 
that "
 "you entered into it and see if you spelled \"cookie\" right. We don't care whether you capitalize 
\"cookie\" or "
@@ -1910,7 +2137,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:319
+#: C/03_getting_the_signal.js.page:317
 msgid ""
 "An Entry widget doesn't have a label property, which is a set text string that the user can't change. (You 
can't "
 "normally change the label on a Button, for instance.) Instead, it has a text property, which changes to 
match what "
@@ -1918,11 +2145,25 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:320
+#: C/03_getting_the_signal.js.page:318
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Did you spell \"cookie\" correctly?\n"
+#| "        if ((this._spellCookie.get_text()).toLowerCase() == \"cookie\") {\n"
+#| "\n"
+#| "            // Increase the number of cookies by 1 and update the label\n"
+#| "            cookies++;\n"
+#| "            this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "    }\n"
 msgid ""
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you spell \"cookie\" correctly?\n"
 "        if ((this._spellCookie.get_text()).toLowerCase() == \"cookie\") {\n"
@@ -1936,7 +2177,7 @@ msgid ""
 "    }\n"
 msgstr ""
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you spell \"cookie\" correctly?\n"
 "        if ((this._spellCookie.get_text()).toLowerCase() == \"cookie\") {\n"
@@ -1950,65 +2191,149 @@ msgstr ""
 "    }\n"
 
 #. (itstool) path: section/p
-#: C/03_getting_the_signal.js.page:339
+#: C/03_getting_the_signal.js.page:337
 msgid "Keep reading, if you'd like to see the complete code for each version of our cookie maker 
application."
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/03_getting_the_signal.js.page:340
+#: C/03_getting_the_signal.js.page:338
 msgid ""
 "The main JavaScript tutorials page has <link xref=\"beginner.js#buttons\">more detailed code samples</link> 
for "
 "each input widget, including several not covered here."
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:345
+#: C/03_getting_the_signal.js.page:343
 msgid "Complete code samples"
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:350
+#: C/03_getting_the_signal.js.page:348
 msgid "Code sample with Button"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:352
+#: C/03_getting_the_signal.js.page:350
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "// We start out with 0 cookies\n"
+#| "var cookies = 0;\n"
+#| "\n"
+#| "const GettingTheSignal = new Lang.Class({\n"
+#| "    Name: 'Getting the Signal',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400,\n"
+#| "            title: \"Click the button to get a cookie!\"});\n"
+#| "\n"
+#| "        // Create the label\n"
+#| "        this._cookieLabel = new Gtk.Label ({\n"
+#| "            label: \"Number of cookies: \" + cookies });\n"
+#| "\n"
+#| "        // Create the cookie button\n"
+#| "        this._cookieButton = new Gtk.Button ({ label: \"Get a cookie\" });\n"
+#| "\n"
+#| "        // Connect the cookie button to the function that handles clicking it\n"
+#| "        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+#| "\n"
+#| "        // Create a grid to arrange everything inside\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            row_spacing: 20 });\n"
+#| "\n"
+#| "        // Put everything inside the grid\n"
+#| "        this._grid.attach (this._cookieButton, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._cookieLabel, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Increase the number of cookies by 1 and update the label\n"
+#| "        cookies++;\n"
+#| "        this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new GettingTheSignal ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2026,7 +2351,7 @@ msgid ""
 "        this._cookieButton = new Gtk.Button ({ label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create a grid to arrange everything inside\n"
 "        this._grid = new Gtk.Grid ({\n"
@@ -2044,11 +2369,9 @@ msgid ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Increase the number of cookies by 1 and update the label\n"
 "        cookies++;\n"
@@ -2056,7 +2379,7 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
@@ -2064,38 +2387,35 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2113,7 +2433,7 @@ msgstr ""
 "        this._cookieButton = new Gtk.Button ({ label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create a grid to arrange everything inside\n"
 "        this._grid = new Gtk.Grid ({\n"
@@ -2131,11 +2451,9 @@ msgstr ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
+"    }\n"
 "\n"
-"\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Increase the number of cookies by 1 and update the label\n"
 "        cookies++;\n"
@@ -2143,55 +2461,162 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:356
+#: C/03_getting_the_signal.js.page:354
 msgid "Code sample with Switch"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:358
+#: C/03_getting_the_signal.js.page:356
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "// We start out with 0 cookies\n"
+#| "var cookies = 0;\n"
+#| "\n"
+#| "const GettingTheSignal = new Lang.Class({\n"
+#| "    Name: 'Getting the Signal',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400,\n"
+#| "            title: \"Click the button to get a cookie!\"});\n"
+#| "\n"
+#| "        // Create the label\n"
+#| "        this._cookieLabel = new Gtk.Label ({\n"
+#| "            label: \"Number of cookies: \" + cookies });\n"
+#| "\n"
+#| "        // Create the cookie button\n"
+#| "        this._cookieButton = new Gtk.Button ({\n"
+#| "            label: \"Get a cookie\" });\n"
+#| "\n"
+#| "        // Connect the cookie button to the function that handles clicking it\n"
+#| "        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+#| "\n"
+#| "        // Create the switch that controls whether or not you can win\n"
+#| "        this._cookieSwitch = new Gtk.Switch ();\n"
+#| "\n"
+#| "        // Create the label to go with the switch\n"
+#| "        this._switchLabel = new Gtk.Label ({\n"
+#| "            label: \"Cookie dispenser\" });\n"
+#| "\n"
+#| "        // Create a grid for the switch and its label\n"
+#| "        this._switchGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER });\n"
+#| "\n"
+#| "        // Put the switch and its label inside that grid\n"
+#| "        this._switchGrid.attach (this._switchLabel, 0, 0, 1, 1);\n"
+#| "        this._switchGrid.attach (this._cookieSwitch, 1, 0, 1, 1);\n"
+#| "\n"
+#| "        // Create a grid to arrange everything else inside\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            row_spacing: 20 });\n"
+#| "\n"
+#| "        // Put everything inside the grid\n"
+#| "        this._grid.attach (this._cookieButton, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._switchGrid, 0, 1, 1, 1);\n"
+#| "        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Is the cookie dispenser turned on?\n"
+#| "        if (this._cookieSwitch.get_active()) {\n"
+#| "\n"
+#| "            // Increase the number of cookies by 1 and update the label\n"
+#| "            cookies++;\n"
+#| "            this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new GettingTheSignal ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2210,7 +2635,7 @@ msgid ""
 "            label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create the switch that controls whether or not you can win\n"
 "        this._cookieSwitch = new Gtk.Switch ();\n"
@@ -2245,11 +2670,9 @@ msgid ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Is the cookie dispenser turned on?\n"
 "        if (this._cookieSwitch.get_active()) {\n"
@@ -2262,7 +2685,7 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
@@ -2270,38 +2693,35 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2320,7 +2740,7 @@ msgstr ""
 "            label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create the switch that controls whether or not you can win\n"
 "        this._cookieSwitch = new Gtk.Switch ();\n"
@@ -2355,11 +2775,9 @@ msgstr ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Is the cookie dispenser turned on?\n"
 "        if (this._cookieSwitch.get_active()) {\n"
@@ -2372,40 +2790,39 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:362
+#: C/03_getting_the_signal.js.page:360
 msgid "Code sample with RadioButton"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:364
+#: C/03_getting_the_signal.js.page:362
 #, no-wrap
 #| msgid ""
 #| "#!/usr/bin/gjs\n"
 #| "\n"
-#| "const Gio = imports.gi.Gio;\n"
 #| "const Gtk = imports.gi.Gtk;\n"
 #| "const Lang = imports.lang;\n"
 #| "\n"
-#| "const ToggleButtonExample = new Lang.Class({\n"
-#| "    Name: 'ToggleButton Example',\n"
+#| "// We start out with 0 cookies\n"
+#| "var cookies = 0;\n"
+#| "\n"
+#| "const GettingTheSignal = new Lang.Class({\n"
+#| "    Name: 'Getting the Signal',\n"
 #| "\n"
 #| "    // Create the application itself\n"
 #| "    _init: function() {\n"
-#| "        this.application = new Gtk.Application({\n"
-#| "            application_id: 'org.example.jstogglebutton',\n"
-#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-#| "        });\n"
+#| "        this.application = new Gtk.Application();\n"
 #| "\n"
-#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
-#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
 #| "    },\n"
 #| "\n"
 #| "    // Callback function for 'activate' signal presents window when active\n"
@@ -2427,83 +2844,109 @@ msgstr ""
 #| "        this._window = new Gtk.ApplicationWindow({\n"
 #| "            application: this.application,\n"
 #| "            window_position: Gtk.WindowPosition.CENTER,\n"
-#| "            default_height: 300,\n"
-#| "            default_width: 300,\n"
-#| "            border_width: 30,\n"
-#| "            title: \"ToggleButton Example\"});\n"
-#| "\n"
-#| "        // Create the spinner that the button stops and starts\n"
-#| "        this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});\n"
-#| "\n"
-#| "        // Create the togglebutton that starts and stops the spinner\n"
-#| "        this._toggleButton = new Gtk.ToggleButton ({label: \"Start/Stop\"});\n"
-#| "        this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));\n"
-#| "\n"
-#| "        // Create a grid and put everything in it\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"Choose the one that says 'cookie'!\"});\n"
+#| "\n"
+#| "        // Create the radio buttons\n"
+#| "        this._cookieRadio = new Gtk.RadioButton ({ label: \"Cookie\" });\n"
+#| "        this._notCookieOne = new Gtk.RadioButton ({ label: \"Not cookie\",\n"
+#| "            group: this._cookieRadio });\n"
+#| "        this._notCookieTwo = new Gtk.RadioButton ({ label: \"Not cookie\",\n"
+#| "            group: this._cookieRadio });\n"
+#| "\n"
+#| "        // Arrange the radio buttons in their own grid\n"
+#| "        this._radioGrid = new Gtk.Grid ();\n"
+#| "        this._radioGrid.attach (this._notCookieOne, 0, 0, 1, 1);\n"
+#| "        this._radioGrid.attach (this._cookieRadio, 0, 1, 1, 1);\n"
+#| "        this._radioGrid.attach (this._notCookieTwo, 0, 2, 1, 1);\n"
+#| "\n"
+#| "        // Set the button that will be at the top to be active by default\n"
+#| "        this._notCookieOne.set_active (true);\n"
+#| "\n"
+#| "        // Create the cookie button\n"
+#| "        this._cookieButton = new Gtk.Button ({\n"
+#| "            label: \"Get a cookie\" });\n"
+#| "\n"
+#| "        // Connect the cookie button to the function that handles clicking it\n"
+#| "        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+#| "\n"
+#| "        // Create the label\n"
+#| "        this._cookieLabel = new Gtk.Label ({\n"
+#| "            label: \"Number of cookies: \" + cookies });\n"
+#| "\n"
+#| "        // Create a grid to arrange everything inside\n"
 #| "        this._grid = new Gtk.Grid ({\n"
-#| "            row_homogeneous: false,\n"
-#| "            row_spacing: 15});\n"
-#| "        this._grid.attach (this._spinner, 0, 0, 1, 1);\n"
-#| "        this._grid.attach (this._toggleButton, 0, 1, 1, 1);\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            row_spacing: 20 });\n"
+#| "\n"
+#| "        // Put everything inside the grid\n"
+#| "        this._grid.attach (this._radioGrid, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._cookieButton, 0, 1, 1, 1);\n"
+#| "        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);\n"
 #| "\n"
 #| "        // Add the grid to the window\n"
 #| "        this._window.add (this._grid);\n"
 #| "\n"
 #| "        // Show the window and all child widgets\n"
 #| "        this._window.show_all();\n"
+#| "\n"
 #| "    },\n"
 #| "\n"
 #| "\n"
 #| "\n"
-#| "    _onToggle: function() {\n"
+#| "    _getACookie: function() {\n"
 #| "\n"
-#| "        // Start or stop the spinner\n"
-#| "        if (this._toggleButton.get_active ())\n"
-#| "            this._spinner.start ();\n"
-#| "        else this._spinner.stop ();\n"
+#| "        // Did you select \"cookie\" instead of \"not cookie\"?\n"
+#| "        if (this._cookieRadio.get_active()) {\n"
+#| "\n"
+#| "            // Increase the number of cookies by 1 and update the label\n"
+#| "            cookies++;\n"
+#| "            this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "        }\n"
 #| "\n"
 #| "    }\n"
 #| "\n"
 #| "});\n"
 #| "\n"
 #| "// Run the application\n"
-#| "let app = new ToggleButtonExample ();\n"
+#| "let app = new GettingTheSignal ();\n"
 #| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2535,7 +2978,7 @@ msgid ""
 "            label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create the label\n"
 "        this._cookieLabel = new Gtk.Label ({\n"
@@ -2558,11 +3001,9 @@ msgid ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you select \"cookie\" instead of \"not cookie\"?\n"
 "        if (this._cookieRadio.get_active()) {\n"
@@ -2575,7 +3016,7 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
@@ -2583,38 +3024,35 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2646,7 +3084,7 @@ msgstr ""
 "            label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create the label\n"
 "        this._cookieLabel = new Gtk.Label ({\n"
@@ -2669,11 +3107,9 @@ msgstr ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you select \"cookie\" instead of \"not cookie\"?\n"
 "        if (this._cookieRadio.get_active()) {\n"
@@ -2686,55 +3122,150 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/title
-#: C/03_getting_the_signal.js.page:368
+#: C/03_getting_the_signal.js.page:366
 msgid "Code sample with Entry"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/03_getting_the_signal.js.page:370
+#: C/03_getting_the_signal.js.page:368
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "// We start out with 0 cookies\n"
+#| "var cookies = 0;\n"
+#| "\n"
+#| "const GettingTheSignal = new Lang.Class({\n"
+#| "    Name: 'Getting the Signal',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"Spell 'cookie' to get a cookie!\"});\n"
+#| "\n"
+#| "        // Create the text entry field\n"
+#| "        this._spellCookie = new Gtk.Entry ();\n"
+#| "\n"
+#| "        // Create the cookie button\n"
+#| "        this._cookieButton = new Gtk.Button ({\n"
+#| "            label: \"Get a cookie\" });\n"
+#| "\n"
+#| "        // Connect the cookie button to the function that handles clicking it\n"
+#| "        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+#| "\n"
+#| "        // Create the label\n"
+#| "        this._cookieLabel = new Gtk.Label ({\n"
+#| "            label: \"Number of cookies: \" + cookies });\n"
+#| "\n"
+#| "        // Create a grid to arrange everything inside\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            row_spacing: 20 });\n"
+#| "\n"
+#| "        // Put everything inside the grid\n"
+#| "        this._grid.attach (this._spellCookie, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._cookieButton, 0, 1, 1, 1);\n"
+#| "        this._grid.attach (this._cookieLabel, 0, 2, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _getACookie: function() {\n"
+#| "\n"
+#| "        // Did you spell \"cookie\" correctly?\n"
+#| "        if ((this._spellCookie.get_text()).toLowerCase() == \"cookie\") {\n"
+#| "\n"
+#| "            // Increase the number of cookies by 1 and update the label\n"
+#| "            cookies++;\n"
+#| "            this._cookieLabel.set_label (\"Number of cookies: \" + cookies);\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new GettingTheSignal ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2753,7 +3284,7 @@ msgid ""
 "            label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create the label\n"
 "        this._cookieLabel = new Gtk.Label ({\n"
@@ -2776,11 +3307,9 @@ msgid ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you spell \"cookie\" correctly?\n"
 "        if ((this._spellCookie.get_text()).toLowerCase() == \"cookie\") {\n"
@@ -2793,7 +3322,7 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
@@ -2801,38 +3330,35 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
 "// We start out with 0 cookies\n"
 "var cookies = 0;\n"
 "\n"
-"const GettingTheSignal = new Lang.Class({\n"
-"    Name: 'Getting the Signal',\n"
+"class GettingTheSignal {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -2851,7 +3377,7 @@ msgstr ""
 "            label: \"Get a cookie\" });\n"
 "\n"
 "        // Connect the cookie button to the function that handles clicking it\n"
-"        this._cookieButton.connect ('clicked', Lang.bind (this, this._getACookie));\n"
+"        this._cookieButton.connect ('clicked', this._getACookie.bind(this));\n"
 "\n"
 "        // Create the label\n"
 "        this._cookieLabel = new Gtk.Label ({\n"
@@ -2874,11 +3400,9 @@ msgstr ""
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _getACookie: function() {\n"
+"    _getACookie() {\n"
 "\n"
 "        // Did you spell \"cookie\" correctly?\n"
 "        if ((this._spellCookie.get_text()).toLowerCase() == \"cookie\") {\n"
@@ -2891,22 +3415,12 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GettingTheSignal ();\n"
 "app.application.run (ARGV);\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/aboutdialog.c.page:25 C/aboutdialog.js.page:21 C/aboutdialog.py.page:23 C/aboutdialog.vala.page:30
-msgctxt "_"
-msgid "external ref='media/aboutdialog_GMenu.png' md5='a36117a559fa98e25e2f6b3db593639f'"
-msgstr "external ref='media/aboutdialog_GMenu.png' md5='a36117a559fa98e25e2f6b3db593639f'"
-
 #. (itstool) path: info/title
 #: C/aboutdialog.c.page:8
 msgctxt "text"
@@ -2932,6 +3446,16 @@ msgstr "Informationen zur Anwendung anzeigen"
 msgid "AboutDialog"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/aboutdialog.c.page:25 C/aboutdialog.js.page:21 C/aboutdialog.py.page:23 C/aboutdialog.vala.page:30
+msgctxt "_"
+msgid "external ref='media/aboutdialog_GMenu.png' md5='a36117a559fa98e25e2f6b3db593639f'"
+msgstr "external ref='media/aboutdialog_GMenu.png' md5='a36117a559fa98e25e2f6b3db593639f'"
+
 #. (itstool) path: page/p
 #: C/aboutdialog.c.page:26 C/aboutdialog.vala.page:31
 msgid "An AboutDialog example using Gtk.ApplicationWindow and Menu"
@@ -3339,42 +3863,145 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/aboutdialog.js.page:24
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const AboutDialogExample = new Lang.Class({\n"
+#| "    Name: 'AboutDialog Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "        _init: function() {\n"
+#| "            this.application = new Gtk.Application({\n"
+#| "                application_id: 'org.example.jsaboutdialog',\n"
+#| "                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "            });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal creates the menu and builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._initMenus();\n"
+#| "        this._buildUI();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function(){\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"AboutDialog Example\",\n"
+#| "                                                   default_height: 250,\n"
+#| "                                                   default_width: 350 });\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Create the application menu\n"
+#| "    _initMenus: function() {\n"
+#| "        let menu = new Gio.Menu();\n"
+#| "        menu.append(\"About\", 'app.about');\n"
+#| "        menu.append(\"Quit\",'app.quit');\n"
+#| "        this.application.set_app_menu(menu);\n"
+#| "\n"
+#| "        // Create the \"About\" menu option and have it call the _showAbout() function\n"
+#| "        let aboutAction = new Gio.SimpleAction({ name: 'about' });\n"
+#| "        aboutAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showAbout();\n"
+#| "            }));\n"
+#| "        this.application.add_action(aboutAction);\n"
+#| "\n"
+#| "        // Create the \"Quit\" menu option and have it close the window\n"
+#| "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
+#| "        quitAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._window.destroy();\n"
+#| "            }));\n"
+#| "        this.application.add_action(quitAction);\n"
+#| "    },\n"
+#| "\n"
+#| "    _showAbout: function() {\n"
+#| "\n"
+#| "        // String arrays of the names of the people involved in the project\n"
+#| "        var authors = [\"GNOME Documentation Team\"];\n"
+#| "        var documenters = [\"GNOME Documentation Team\"];\n"
+#| "\n"
+#| "        // Create the About dialog\n"
+#| "        let aboutDialog = new Gtk.AboutDialog({ title: \"AboutDialog Example\",\n"
+#| "                                                program_name: \"GtkApplication Example\",\n"
+#| "                                                copyright: \"Copyright \\xa9 2012 GNOME Documentation 
Team\",\n"
+#| "                                                authors: authors,\n"
+#| "                                                documenters: documenters,\n"
+#| "                                                website: \"http://developer.gnome.org\",\n";
+#| "                                                website_label: \"GNOME Developer Website\" });\n"
+#| "\n"
+#| "        // Attach the About dialog to the window\n"
+#| "        aboutDialog.modal = true;\n"
+#| "        aboutDialog.transient_for = this._window;\n"
+#| "\n"
+#| "        // Show the About dialog\n"
+#| "        aboutDialog.show();\n"
+#| "\n"
+#| "        // Connect the Close button to the destroy signal for the dialog\n"
+#| "        aboutDialog.connect('response', function() {\n"
+#| "            aboutDialog.destroy();\n"
+#| "        });\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new AboutDialogExample();\n"
+#| "app.application.run(ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const AboutDialogExample = new Lang.Class({\n"
-"    Name: 'AboutDialog Example',\n"
+"class AboutDialogExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function() {\n"
-"            this.application = new Gtk.Application({\n"
-"                application_id: 'org.example.jsaboutdialog',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jsaboutdialog',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal creates the menu and builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function(){\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
@@ -3384,10 +4011,10 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Create the application menu\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"About\", 'app.about');\n"
 "        menu.append(\"Quit\",'app.quit');\n"
@@ -3395,22 +4022,16 @@ msgid ""
 "\n"
 "        // Create the \"About\" menu option and have it call the _showAbout() function\n"
 "        let aboutAction = new Gio.SimpleAction({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        // Create the \"Quit\" menu option and have it close the window\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _showAbout: function() {\n"
+"    _showAbout() {\n"
 "\n"
 "        // String arrays of the names of the people involved in the project\n"
 "        var authors = [\"GNOME Documentation Team\"];\n"
@@ -3437,7 +4058,7 @@ msgid ""
 "            aboutDialog.destroy();\n"
 "        });\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new AboutDialogExample();\n"
@@ -3445,39 +4066,39 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const AboutDialogExample = new Lang.Class({\n"
-"    Name: 'AboutDialog Example',\n"
+"class AboutDialogExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function() {\n"
-"            this.application = new Gtk.Application({\n"
-"                application_id: 'org.example.jsaboutdialog',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jsaboutdialog',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal creates the menu and builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function(){\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
@@ -3487,10 +4108,10 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Create the application menu\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"About\", 'app.about');\n"
 "        menu.append(\"Quit\",'app.quit');\n"
@@ -3498,22 +4119,16 @@ msgstr ""
 "\n"
 "        // Create the \"About\" menu option and have it call the _showAbout() function\n"
 "        let aboutAction = new Gio.SimpleAction({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        // Create the \"Quit\" menu option and have it close the window\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _showAbout: function() {\n"
+"    _showAbout() {\n"
 "\n"
 "        // String arrays of the names of the people involved in the project\n"
 "        var authors = [\"GNOME Documentation Team\"];\n"
@@ -3540,7 +4155,7 @@ msgstr ""
 "            aboutDialog.destroy();\n"
 "        });\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new AboutDialogExample();\n"
@@ -3564,7 +4179,7 @@ msgid "<link href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.AboutDialo
 msgstr "<link 
href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.AboutDialog.html\";>Gtk.AboutDialog</link>"
 
 #. (itstool) path: item/p
-#: C/aboutdialog.js.page:32 C/button.js.page:31 C/checkbutton.js.page:138 C/comboboxtext.js.page:181
+#: C/aboutdialog.js.page:32 C/button.js.page:31 C/checkbutton.js.page:137 C/comboboxtext.js.page:181
 #: C/combobox.js.page:238 C/dialog.js.page:30 C/entry.js.page:30 C/grid.js.page:34 
C/GtkApplicationWindow.js.page:31
 #: C/image.js.page:32 C/label.js.page:30 C/linkbutton.js.page:30 C/messagedialog.js.page:196 
C/progressbar.js.page:40
 #: C/radiobutton.js.page:276 C/scale.js.page:211 C/spinbutton.js.page:202 C/spinner.js.page:31
@@ -3574,7 +4189,7 @@ msgid "<link href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Applicatio
 msgstr "<link 
href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html\";>Gtk.Application</link>"
 
 #. (itstool) path: item/p
-#: C/aboutdialog.js.page:33 C/button.js.page:32 C/checkbutton.js.page:139 C/comboboxtext.js.page:182
+#: C/aboutdialog.js.page:33 C/button.js.page:32 C/checkbutton.js.page:138 C/comboboxtext.js.page:182
 #: C/combobox.js.page:239 C/dialog.js.page:31 C/entry.js.page:31 C/grid.js.page:35 
C/GtkApplicationWindow.js.page:32
 #: C/image.js.page:33 C/label.js.page:31 C/linkbutton.js.page:31 C/messagedialog.js.page:197 
C/progressbar.js.page:41
 #: C/radiobutton.js.page:277 C/scale.js.page:212 C/spinbutton.js.page:203 C/spinner.js.page:32
@@ -4363,16 +4978,6 @@ msgstr "valac --pkg gtk+-3.0 <var>filename</var>.vala"
 msgid "./<var>filename</var>"
 msgstr "./<var>filename</var>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/button.c.page:25 C/button.js.page:22 C/button.py.page:25 C/button.vala.page:24
-msgctxt "_"
-msgid "external ref='media/button.png' md5='8d69efbb3a0d3e043af6139b6492171c'"
-msgstr "external ref='media/button.png' md5='8d69efbb3a0d3e043af6139b6492171c'"
-
 #. (itstool) path: info/title
 #: C/button.c.page:8
 msgctxt "text"
@@ -4389,6 +4994,16 @@ msgstr ""
 msgid "Button"
 msgstr "Knopf"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/button.c.page:25 C/button.js.page:22 C/button.py.page:25 C/button.vala.page:24
+msgctxt "_"
+msgid "external ref='media/button.png' md5='8d69efbb3a0d3e043af6139b6492171c'"
+msgstr "external ref='media/button.png' md5='8d69efbb3a0d3e043af6139b6492171c'"
+
 #. (itstool) path: page/p
 #: C/button.c.page:26
 msgid "A button widget connected to a callback function that reverses its label when clicked."
@@ -4561,42 +5176,106 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/button.js.page:25
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ButtonExample = new Lang.Class ({\n"
+#| "    Name: 'Button Example',\n"
+#| "\n"
+#| "    /* Create the application itself\n"
+#| "       This boilerplate code is needed to build any GTK+ application. */\n"
+#| "        _init: function () {\n"
+#| "            this.application = new Gtk.Application ({\n"
+#| "                application_id: 'org.example.jsbutton',\n"
+#| "                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "            });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                              window_position: 
Gtk.WindowPosition.CENTER,\n"
+#| "                                                              title: \"GNOME Button\",\n"
+#| "                                                              default_height: 50,\n"
+#| "                                                              default_width: 250 });\n"
+#| "\n"
+#| "        // Create the button\n"
+#| "        this.Button = new Gtk.Button ({label: \"Click Me\"});\n"
+#| "        this._window.add (this.Button);\n"
+#| "\n"
+#| "        // Bind it to a function that says what to do when the button is clicked\n"
+#| "        this.Button.connect (\"clicked\", Lang.bind(this, this._clickHandler));\n"
+#| "\n"
+#| "                // Show the window and all child widgets\n"
+#| "                this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Here's the function that says what happens when the button is clicked\n"
+#| "    _clickHandler: function () {\n"
+#| "        this.Button.set_label (\"Clicked!\");\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ButtonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ButtonExample = new Lang.Class ({\n"
-"    Name: 'Button Example',\n"
+"class ButtonExample {\n"
 "\n"
 "    /* Create the application itself\n"
 "       This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jsbutton',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsbutton',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -4610,17 +5289,17 @@ msgid ""
 "        this._window.add (this.Button);\n"
 "\n"
 "        // Bind it to a function that says what to do when the button is clicked\n"
-"        this.Button.connect (\"clicked\", Lang.bind(this, this._clickHandler));\n"
+"        this.Button.connect (\"clicked\", this._clickHandler.bind(this));\n"
 "\n"
 "                // Show the window and all child widgets\n"
 "                this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Here's the function that says what happens when the button is clicked\n"
-"    _clickHandler: function () {\n"
+"    _clickHandler() {\n"
 "        this.Button.set_label (\"Clicked!\");\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ButtonExample ();\n"
@@ -4628,39 +5307,39 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ButtonExample = new Lang.Class ({\n"
-"    Name: 'Button Example',\n"
+"class ButtonExample {\n"
 "\n"
 "    /* Create the application itself\n"
 "       This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jsbutton',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsbutton',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -4674,17 +5353,17 @@ msgstr ""
 "        this._window.add (this.Button);\n"
 "\n"
 "        // Bind it to a function that says what to do when the button is clicked\n"
-"        this.Button.connect (\"clicked\", Lang.bind(this, this._clickHandler));\n"
+"        this.Button.connect (\"clicked\", this._clickHandler.bind(this));\n"
 "\n"
 "                // Show the window and all child widgets\n"
 "                this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Here's the function that says what happens when the button is clicked\n"
-"    _clickHandler: function () {\n"
+"    _clickHandler() {\n"
 "        this.Button.set_label (\"Clicked!\");\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ButtonExample ();\n"
@@ -4709,45 +5388,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/button.py.page:32
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -5013,16 +5653,6 @@ msgid ""
 "link>"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/buttonbox.js.page:24 C/buttonbox.py.page:25
-msgctxt "_"
-msgid "external ref='media/buttonbox_calculator.png' md5='ce0de08b7ac66f517290e33e6d33d508'"
-msgstr "external ref='media/buttonbox_calculator.png' md5='ce0de08b7ac66f517290e33e6d33d508'"
-
 #. (itstool) path: info/title
 #: C/buttonbox.js.page:8
 msgctxt "text"
@@ -5046,6 +5676,16 @@ msgstr ""
 msgid "ButtonBox"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/buttonbox.js.page:24 C/buttonbox.py.page:25
+msgctxt "_"
+msgid "external ref='media/buttonbox_calculator.png' md5='ce0de08b7ac66f517290e33e6d33d508'"
+msgstr "external ref='media/buttonbox_calculator.png' md5='ce0de08b7ac66f517290e33e6d33d508'"
+
 #. (itstool) path: page/p
 #: C/buttonbox.js.page:25 C/buttonbox.py.page:26
 msgid "A calculator - the buttons are enclosed in horizontal ButtonBoxes."
@@ -5054,37 +5694,220 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/buttonbox.js.page:31
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const GObject = imports.gi.GObject;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ButtonBoxExample = new Lang.Class ({\n"
+#| "    Name: 'ButtonBox Example',\n"
+#| "\n"
+#| "    // Create the application itthis\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application({ application_id: 'org.example.jsbuttonbox' });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this.window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "        // Create the application window\n"
+#| "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                    title: \"Calculator\",\n"
+#| "                                                    default_width: 350,\n"
+#| "                                                    default_height: 200,\n"
+#| "                                                    border_width: 10 });\n"
+#| "        this.entry = new Gtk.Entry();\n"
+#| "        this.entry.set_text('0');\n"
+#| "        // text aligned on the right\n"
+#| "        this.entry.set_alignment(1);\n"
+#| "        // the text in the entry cannot be modified by writing in it\n"
+#| "        this.entry.set_can_focus(false);\n"
+#| "\n"
+#| "        // a grid\n"
+#| "        this.grid = new Gtk.Grid();\n"
+#| "        this.grid.set_row_spacing(5);\n"
+#| "        \n"
+#| "        // to attach the entry\n"
+#| "        this.grid.attach(this.entry, 0, 0, 1, 1);\n"
+#| "        \n"
+#| "        // the labels for the buttons\n"
+#| "        this.buttons = [ 7, 8, 9, '/', 4, 5, 6, '*', 1, 2, 3, '-', 'C', 0, '=', '+' ];\n"
+#| "        \n"
+#| "        // each row is a ButtonBox, attached to the grid            \n"
+#| "        for (i = 0; i &lt; 4; i++) {\n"
+#| "            this.hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL);\n"
+#| "            this.hbox.set_spacing(5);\n"
+#| "            this.grid.attach(this.hbox, 0, i + 1, 1, 1);\n"
+#| "            // each ButtonBox has 4 buttons, connected to the callback function\n"
+#| "            for (j= 0; j &lt; 4; j++) {\n"
+#| "                this.button = new Gtk.Button();\n"
+#| "                this.buttonLabel = (this.buttons[i * 4 + j].toString());\n"
+#| "                this.button.set_label(this.buttonLabel);\n"
+#| "                this.button.set_can_focus(false);\n"
+#| "                this.button.connect(\"clicked\", Lang.bind(this, this._buttonClicked, this.button));\n"
+#| "                this.hbox.add(this.button);\n"
+#| "            }\n"
+#| "        }\n"
+#| "            \n"
+#| "        // some variables for the calculations\n"
+#| "        this.firstNumber = 0;\n"
+#| "        this.secondNumber = 0;\n"
+#| "        this.counter = 0;\n"
+#| "        this.operation = \"\";\n"
+#| "\n"
+#| "        // add the grid to the window\n"
+#| "        this.window.add(this.grid);\n"
+#| "        this.window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    // callback function for all the buttons\n"
+#| "    _buttonClicked: function(button) {\n"
+#| "        this.button = button;\n"
+#| "        // for the operations\n"
+#| "        if (this.button.get_label() == '+') {\n"
+#| "            this.counter += 1 \n"
+#| "            if (this.counter &gt; 1)\n"
+#| "                this._doOperation();\n"
+#| "            this.entry.set_text('0');\n"
+#| "            this.operation = \"plus\";\n"
+#| "        }\n"
+#| "\n"
+#| "        else if (this.button.get_label() == '-') {\n"
+#| "            this.counter += 1;\n"
+#| "            if (this.counter &gt; 1)\n"
+#| "                this._doOperation();\n"
+#| "            this.entry.set_text('0');\n"
+#| "            this.operation = \"minus\";\n"
+#| "        }\n"
+#| "\n"
+#| "        else if (this.button.get_label() == '*') {\n"
+#| "            this.counter += 1; \n"
+#| "            if (this.counter &gt; 1)\n"
+#| "                this._doOperation();\n"
+#| "            this.entry.set_text('0');\n"
+#| "            this.operation = \"multiplication\";\n"
+#| "        }\n"
+#| "\n"
+#| "        else if (this.button.get_label() == '/') {\n"
+#| "            this.counter += 1 \n"
+#| "            if (this.counter &gt; 1)\n"
+#| "                this._doOperation();\n"
+#| "            this.entry.set_text('0');\n"
+#| "            this.operation = \"division\";\n"
+#| "        }\n"
+#| "\n"
+#| "        // for =\n"
+#| "        else if (this.button.get_label() == '=') {\n"
+#| "            this._doOperation();\n"
+#| "            this.entry.set_text(this.firstNumber.toString());\n"
+#| "            this.counter = 1;\n"
+#| "        }\n"
+#| "\n"
+#| "        // for Cancel\n"
+#| "        else if (this.button.get_label() == 'C') {\n"
+#| "            this.firstNumber = 0;\n"
+#| "            this.secondNumber = 0;\n"
+#| "            this.counter = 0;\n"
+#| "            this.entry.set_text('0');\n"
+#| "            this.operation = \"\";\n"
+#| "        }\n"
+#| "\n"
+#| "        // for a digit button\n"
+#| "        else {\n"
+#| "            this.newDigit = parseInt(this.button.get_label());\n"
+#| "            if (this.entry.get_text() == \"error\")\n"
+#| "                this.number = 0;\n"
+#| "            else\n"
+#| "                this.number = parseInt(this.entry.get_text());\n"
+#| "            this.number = this.number * 10 + this.newDigit;            \n"
+#| "            if (this.counter == 0)\n"
+#| "                this.firstNumber = this.number;\n"
+#| "            else\n"
+#| "                this.secondNumber = this.number;\n"
+#| "            this.entry.set_text(this.number.toString());\n"
+#| "        }\n"
+#| "     },\n"
+#| "\n"
+#| "     _doOperation: function() {\n"
+#| "        if (this.operation == \"plus\") {\n"
+#| "           this.firstNumber += this.secondNumber;\n"
+#| "        } else if (this.operation == \"minus\") {\n"
+#| "            this.firstNumber -= this.secondNumber;\n"
+#| "        } else if (this.operation == \"multiplication\") {\n"
+#| "            this.firstNumber *= this.secondNumber;\n"
+#| "        } else if (this.operation == \"division\") {\n"
+#| "            if (this.secondNumber != 0) {\n"
+#| "                this.firstNumber /= this.secondNumber;\n"
+#| "            } else {\n"
+#| "                this.firstNumber = 0; \n"
+#| "                this.secondNumber = 0;\n"
+#| "                this.counter = 0; \n"
+#| "                this.entry.set_text(\"error\");\n"
+#| "                this.operation = \"\";\n"
+#| "\n"
+#| "                return\n"
+#| "            }\n"
+#| "        } else {\n"
+#| "            this.firstNumber = 0;\n"
+#| "            this.secondNumber = 0;\n"
+#| "            this.counter = 0;\n"
+#| "            this.entry.set_text(\"error\");\n"
+#| "        }\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ButtonBoxExample();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ButtonBoxExample = new Lang.Class ({\n"
-"    Name: 'ButtonBox Example',\n"
+"class ButtonBoxExample {\n"
 "\n"
 "    // Create the application itthis\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application({ application_id: 'org.example.jsbuttonbox' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jsbuttonbox'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
@@ -5110,17 +5933,17 @@ msgid ""
 "        this.buttons = [ 7, 8, 9, '/', 4, 5, 6, '*', 1, 2, 3, '-', 'C', 0, '=', '+' ];\n"
 "        \n"
 "        // each row is a ButtonBox, attached to the grid            \n"
-"        for (i = 0; i &lt; 4; i++) {\n"
+"        for (let i = 0; i &lt; 4; i++) {\n"
 "            this.hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL);\n"
 "            this.hbox.set_spacing(5);\n"
 "            this.grid.attach(this.hbox, 0, i + 1, 1, 1);\n"
 "            // each ButtonBox has 4 buttons, connected to the callback function\n"
-"            for (j= 0; j &lt; 4; j++) {\n"
+"            for (let j= 0; j &lt; 4; j++) {\n"
 "                this.button = new Gtk.Button();\n"
 "                this.buttonLabel = (this.buttons[i * 4 + j].toString());\n"
 "                this.button.set_label(this.buttonLabel);\n"
 "                this.button.set_can_focus(false);\n"
-"                this.button.connect(\"clicked\", Lang.bind(this, this._buttonClicked, this.button));\n"
+"                this.button.connect(\"clicked\", this._buttonClicked.bind(this));\n"
 "                this.hbox.add(this.button);\n"
 "            }\n"
 "        }\n"
@@ -5134,10 +5957,10 @@ msgid ""
 "        // add the grid to the window\n"
 "        this.window.add(this.grid);\n"
 "        this.window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // callback function for all the buttons\n"
-"    _buttonClicked: function(button) {\n"
+"    _buttonClicked(button) {\n"
 "        this.button = button;\n"
 "        // for the operations\n"
 "        if (this.button.get_label() == '+') {\n"
@@ -5202,9 +6025,9 @@ msgid ""
 "                this.secondNumber = this.number;\n"
 "            this.entry.set_text(this.number.toString());\n"
 "        }\n"
-"     },\n"
+"     }\n"
 "\n"
-"     _doOperation: function() {\n"
+"     _doOperation() {\n"
 "        if (this.operation == \"plus\") {\n"
 "           this.firstNumber += this.secondNumber;\n"
 "        } else if (this.operation == \"minus\") {\n"
@@ -5230,7 +6053,7 @@ msgid ""
 "            this.entry.set_text(\"error\");\n"
 "        }\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ButtonBoxExample();\n"
@@ -5238,34 +6061,36 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ButtonBoxExample = new Lang.Class ({\n"
-"    Name: 'ButtonBox Example',\n"
+"class ButtonBoxExample {\n"
 "\n"
 "    // Create the application itthis\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application({ application_id: 'org.example.jsbuttonbox' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jsbuttonbox'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
@@ -5291,17 +6116,17 @@ msgstr ""
 "        this.buttons = [ 7, 8, 9, '/', 4, 5, 6, '*', 1, 2, 3, '-', 'C', 0, '=', '+' ];\n"
 "        \n"
 "        // each row is a ButtonBox, attached to the grid            \n"
-"        for (i = 0; i &lt; 4; i++) {\n"
+"        for (let i = 0; i &lt; 4; i++) {\n"
 "            this.hbox = Gtk.ButtonBox.new(Gtk.Orientation.HORIZONTAL);\n"
 "            this.hbox.set_spacing(5);\n"
 "            this.grid.attach(this.hbox, 0, i + 1, 1, 1);\n"
 "            // each ButtonBox has 4 buttons, connected to the callback function\n"
-"            for (j= 0; j &lt; 4; j++) {\n"
+"            for (let j= 0; j &lt; 4; j++) {\n"
 "                this.button = new Gtk.Button();\n"
 "                this.buttonLabel = (this.buttons[i * 4 + j].toString());\n"
 "                this.button.set_label(this.buttonLabel);\n"
 "                this.button.set_can_focus(false);\n"
-"                this.button.connect(\"clicked\", Lang.bind(this, this._buttonClicked, this.button));\n"
+"                this.button.connect(\"clicked\", this._buttonClicked.bind(this));\n"
 "                this.hbox.add(this.button);\n"
 "            }\n"
 "        }\n"
@@ -5315,10 +6140,10 @@ msgstr ""
 "        // add the grid to the window\n"
 "        this.window.add(this.grid);\n"
 "        this.window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // callback function for all the buttons\n"
-"    _buttonClicked: function(button) {\n"
+"    _buttonClicked(button) {\n"
 "        this.button = button;\n"
 "        // for the operations\n"
 "        if (this.button.get_label() == '+') {\n"
@@ -5383,9 +6208,9 @@ msgstr ""
 "                this.secondNumber = this.number;\n"
 "            this.entry.set_text(this.number.toString());\n"
 "        }\n"
-"     },\n"
+"     }\n"
 "\n"
-"     _doOperation: function() {\n"
+"     _doOperation() {\n"
 "        if (this.operation == \"plus\") {\n"
 "           this.firstNumber += this.secondNumber;\n"
 "        } else if (this.operation == \"minus\") {\n"
@@ -5411,7 +6236,7 @@ msgstr ""
 "            this.entry.set_text(\"error\");\n"
 "        }\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ButtonBoxExample();\n"
@@ -5763,7 +6588,6 @@ msgstr ""
 #. (itstool) path: item/screen
 #: C/c.page:99
 #, no-wrap
-#| msgid "gcc <var>filename</var>.c `pkg-config --cflags --libs gtk+-3.0` -o <var>filename</var>\n"
 msgid "gcc <var>filename</var>.c `pkg-config --cflags --libs gtk+-3.0` -o <var>filename</var>"
 msgstr "gcc <var>Dateiname</var>.c `pkg-config --cflags --libs gtk+-3.0` -o <var>Dateiname</var>"
 
@@ -5779,16 +6603,6 @@ msgstr ""
 msgid "Widget Code Examples"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/checkbutton.c.page:22 C/checkbutton.js.page:22 C/checkbutton.py.page:23 C/checkbutton.vala.page:22
-msgctxt "_"
-msgid "external ref='media/checkbutton.png' md5='7921a6812c87dd2b3781f4fad241e858'"
-msgstr "external ref='media/checkbutton.png' md5='7921a6812c87dd2b3781f4fad241e858'"
-
 #. (itstool) path: info/title
 #: C/checkbutton.c.page:8
 msgctxt "text"
@@ -5805,6 +6619,16 @@ msgstr ""
 msgid "CheckButton"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/checkbutton.c.page:22 C/checkbutton.js.page:22 C/checkbutton.py.page:23 C/checkbutton.vala.page:22
+msgctxt "_"
+msgid "external ref='media/checkbutton.png' md5='7921a6812c87dd2b3781f4fad241e858'"
+msgstr "external ref='media/checkbutton.png' md5='7921a6812c87dd2b3781f4fad241e858'"
+
 #. (itstool) path: page/p
 #: C/checkbutton.c.page:23 C/checkbutton.py.page:24 C/checkbutton.vala.page:23
 msgid "This CheckButton toggles the title."
@@ -5947,26 +6771,34 @@ msgid "Libraries to import"
 msgstr "Zu importierende Bibliotheken"
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:29 C/messagedialog.js.page:32 C/radiobutton.js.page:29 C/scale.js.page:29
-#: C/spinbutton.js.page:32 C/statusbar.js.page:29 C/switch.js.page:36 C/togglebutton.js.page:29
+#: C/checkbutton.js.page:29
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
 msgid ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 msgstr ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:36 C/comboboxtext.js.page:37 C/combobox.js.page:41 C/messagedialog.js.page:39
+#: C/checkbutton.js.page:37 C/comboboxtext.js.page:37 C/combobox.js.page:42 C/messagedialog.js.page:39
 #: C/radiobutton.js.page:36 C/scale.js.page:36 C/spinbutton.js.page:39 C/statusbar.js.page:36 
C/switch.js.page:43
 #: C/textview.js.page:45 C/togglebutton.js.page:36 C/treeview_simple_liststore.js.page:46
 msgid ""
@@ -5975,70 +6807,92 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/checkbutton.js.page:40 C/comboboxtext.js.page:41 C/combobox.js.page:45 C/messagedialog.js.page:43
+#: C/checkbutton.js.page:41 C/comboboxtext.js.page:41 C/combobox.js.page:46 C/messagedialog.js.page:43
 #: C/radiobutton.js.page:40 C/scale.js.page:40 C/spinbutton.js.page:43 C/statusbar.js.page:40 
C/switch.js.page:47
 #: C/textview.js.page:49 C/togglebutton.js.page:40 C/treeview_simple_liststore.js.page:50
 msgid "Creating the application window"
 msgstr "Entwurf des Anwendungsfensters"
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:41
+#: C/checkbutton.js.page:42
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "const CheckButtonExample = new Lang.Class({\n"
+#| "    Name: 'CheckButton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jscheckbutton',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
 msgid ""
 "\n"
-"const CheckButtonExample = new Lang.Class({\n"
-"    Name: 'CheckButton Example',\n"
-"\n"
+"class CheckButtonExample {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jscheckbutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"    this.application.connect('activate', this._onActivate.bind(this));\n"
+"    this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
-"const CheckButtonExample = new Lang.Class({\n"
-"    Name: 'CheckButton Example',\n"
-"\n"
+"class CheckButtonExample {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jscheckbutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"    this.application.connect('activate', this._onActivate.bind(this));\n"
+"    this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:67
+#: C/checkbutton.js.page:66
 msgid ""
 "All the code for this sample goes in the CheckButtonExample class. The above code creates a <link 
href=\"http://";
 "www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Application.html\">Gtk.Application</link> for our widgets and 
window to "
@@ -6046,12 +6900,25 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:68
+#: C/checkbutton.js.page:67
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 100,\n"
+#| "            default_width: 300,\n"
+#| "            border_width: 10,\n"
+#| "            title: \"CheckButton Example\"});\n"
 msgid ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -6064,7 +6931,7 @@ msgid ""
 msgstr ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -6076,7 +6943,7 @@ msgstr ""
 "            title: \"CheckButton Example\"});\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:81
+#: C/checkbutton.js.page:80
 msgid ""
 "The _buildUI function is where we put all the code to create the application's user interface. The first 
step is "
 "creating a new <link href=\"GtkApplicationWindow.js.page\">Gtk.ApplicationWindow</link> to put all our 
widgets "
@@ -6084,13 +6951,24 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/checkbutton.js.page:85
+#: C/checkbutton.js.page:84
 msgid "Creating the checkbutton"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:86
+#: C/checkbutton.js.page:85
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Create the check button\n"
+#| "        this._button = new Gtk.CheckButton ({label: \"Show Title\"});\n"
+#| "        this._window.add (this._button);\n"
+#| "\n"
+#| "        // Have the check button be checked by default\n"
+#| "        this._button.set_active (true);\n"
+#| "\n"
+#| "        // Connect the button to a function that does something when it's toggled\n"
+#| "        this._button.connect (\"toggled\", Lang.bind (this, this._toggledCB));\n"
 msgid ""
 "\n"
 "        // Create the check button\n"
@@ -6101,7 +6979,7 @@ msgid ""
 "        this._button.set_active (true);\n"
 "\n"
 "        // Connect the button to a function that does something when it's toggled\n"
-"        this._button.connect (\"toggled\", Lang.bind (this, this._toggledCB));\n"
+"        this._button.connect (\"toggled\", this._toggledCB.bind(this));\n"
 msgstr ""
 "\n"
 "        // Create the check button\n"
@@ -6112,10 +6990,10 @@ msgstr ""
 "        this._button.set_active (true);\n"
 "\n"
 "        // Connect the button to a function that does something when it's toggled\n"
-"        this._button.connect (\"toggled\", Lang.bind (this, this._toggledCB));\n"
+"        this._button.connect (\"toggled\", this._toggledCB.bind(this));\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:97
+#: C/checkbutton.js.page:96
 msgid ""
 "This code creates the checkbutton itself. The label next to the checkbutton is created by giving the 
checkbutton "
 "the \"label\" property and assigning a string value to it. Since this checkbutton toggles whether the 
window title "
@@ -6124,37 +7002,55 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:98 C/radiobutton.js.page:170
+#: C/checkbutton.js.page:97
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
 msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:103
+#: C/checkbutton.js.page:102
 msgid ""
 "This code finishes up creating the UI, by telling the window to show itself and all child widgets (which is 
just "
 "the checkbutton in this case)."
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/checkbutton.js.page:107
+#: C/checkbutton.js.page:106
 msgid "Function which handles the checkbutton's toggling"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:108
+#: C/checkbutton.js.page:107
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _toggledCB: function () {\n"
+#| "\n"
+#| "        // Make the window title appear or disappear when the checkbox is toggled\n"
+#| "        if (this._button.get_active() == true)\n"
+#| "            this._window.set_title (\"CheckButton Example\");\n"
+#| "        else\n"
+#| "            this._window.set_title (\"\");\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
 msgid ""
 "\n"
-"    _toggledCB: function () {\n"
+"    _toggledCB() {\n"
 "\n"
 "        // Make the window title appear or disappear when the checkbox is toggled\n"
 "        if (this._button.get_active() == true)\n"
@@ -6164,10 +7060,10 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 msgstr ""
 "\n"
-"    _toggledCB: function () {\n"
+"    _toggledCB() {\n"
 "\n"
 "        // Make the window title appear or disappear when the checkbox is toggled\n"
 "        if (this._button.get_active() == true)\n"
@@ -6177,10 +7073,10 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:121
+#: C/checkbutton.js.page:120
 msgid ""
 "If the checkbutton is toggled from on to off, we want the window title to disappear. If it's toggled from 
off to "
 "on, we want it to reappear. We can tell which way it was toggled by testing to see whether it's active 
(checked) "
@@ -6189,7 +7085,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:122
+#: C/checkbutton.js.page:121
 #, no-wrap
 msgid ""
 "\n"
@@ -6203,49 +7099,124 @@ msgstr ""
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/p
-#: C/checkbutton.js.page:127
+#: C/checkbutton.js.page:126
 msgid "Finally, we create a new instance of the finished CheckButtonExample class, and set the application 
running."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/checkbutton.js.page:132
+#: C/checkbutton.js.page:131
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const CheckButtonExample = new Lang.Class({\n"
+#| "    Name: 'CheckButton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jscheckbutton',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 100,\n"
+#| "            default_width: 300,\n"
+#| "            border_width: 10,\n"
+#| "            title: \"CheckButton Example\"});\n"
+#| "\n"
+#| "        // Create the check button\n"
+#| "        this._button = new Gtk.CheckButton ({label: \"Show Title\"});\n"
+#| "        this._window.add (this._button);\n"
+#| "\n"
+#| "        // Have the check button be checked by default\n"
+#| "        this._button.set_active (true);\n"
+#| "\n"
+#| "        // Connect the button to a function that does something when it's toggled\n"
+#| "        this._button.connect (\"toggled\", Lang.bind (this, this._toggledCB));\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _toggledCB: function () {\n"
+#| "\n"
+#| "        // Make the window title appear or disappear when the checkbox is toggled\n"
+#| "        if (this._button.get_active() == true)\n"
+#| "            this._window.set_title (\"CheckButton Example\");\n"
+#| "        else\n"
+#| "            this._window.set_title (\"\");\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new CheckButtonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const CheckButtonExample = new Lang.Class({\n"
-"    Name: 'CheckButton Example',\n"
+"class CheckButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jscheckbutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -6264,15 +7235,13 @@ msgid ""
 "        this._button.set_active (true);\n"
 "\n"
 "        // Connect the button to a function that does something when it's toggled\n"
-"        this._button.connect (\"toggled\", Lang.bind (this, this._toggledCB));\n"
+"        this._button.connect (\"toggled\", this._toggledCB.bind(this));\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _toggledCB: function () {\n"
+"    _toggledCB() {\n"
 "\n"
 "        // Make the window title appear or disappear when the checkbox is toggled\n"
 "        if (this._button.get_active() == true)\n"
@@ -6282,7 +7251,7 @@ msgid ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new CheckButtonExample ();\n"
@@ -6290,39 +7259,37 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const CheckButtonExample = new Lang.Class({\n"
-"    Name: 'CheckButton Example',\n"
+"class CheckButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jscheckbutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -6341,15 +7308,13 @@ msgstr ""
 "        this._button.set_active (true);\n"
 "\n"
 "        // Connect the button to a function that does something when it's toggled\n"
-"        this._button.connect (\"toggled\", Lang.bind (this, this._toggledCB));\n"
+"        this._button.connect (\"toggled\", this._toggledCB.bind(this));\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _toggledCB: function () {\n"
+"    _toggledCB() {\n"
 "\n"
 "        // Make the window title appear or disappear when the checkbox is toggled\n"
 "        if (this._button.get_active() == true)\n"
@@ -6359,21 +7324,21 @@ msgstr ""
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new CheckButtonExample ();\n"
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/title
-#: C/checkbutton.js.page:136 C/comboboxtext.js.page:176 C/combobox.js.page:233 C/messagedialog.js.page:189
+#: C/checkbutton.js.page:135 C/comboboxtext.js.page:176 C/combobox.js.page:233 C/messagedialog.js.page:189
 #: C/radiobutton.js.page:274 C/scale.js.page:208 C/spinbutton.js.page:199 C/statusbar.js.page:221
 #: C/switch.js.page:264 C/textview.js.page:248 C/togglebutton.js.page:153 
C/treeview_simple_liststore.js.page:272
 msgid "In-depth documentation"
 msgstr "Weiterführende Dokumentation"
 
 #. (itstool) path: item/p
-#: C/checkbutton.js.page:140
+#: C/checkbutton.js.page:139
 msgid "<link 
href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CheckButton.html\";>Gtk.CheckButton</link>"
 msgstr "<link 
href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.CheckButton.html\";>Gtk.CheckButton</link>"
 
@@ -6391,63 +7356,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/checkbutton.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -6702,16 +7610,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.CheckButton.html\";>Gtk.CheckButton</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.CheckButton.html\";>Gtk.CheckButton</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/colorbutton.js.page:22 C/colorbutton.py.page:23 C/colorbutton.vala.page:24
-msgctxt "_"
-msgid "external ref='media/colorbutton.png' md5='904539d26fe367bf99f9a0961cfc9a03'"
-msgstr "external ref='media/colorbutton.png' md5='904539d26fe367bf99f9a0961cfc9a03'"
-
 #. (itstool) path: info/title
 #: C/colorbutton.js.page:8
 msgctxt "text"
@@ -6728,6 +7626,16 @@ msgstr ""
 msgid "ColorButton"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/colorbutton.js.page:22 C/colorbutton.py.page:23 C/colorbutton.vala.page:24
+msgctxt "_"
+msgid "external ref='media/colorbutton.png' md5='904539d26fe367bf99f9a0961cfc9a03'"
+msgstr "external ref='media/colorbutton.png' md5='904539d26fe367bf99f9a0961cfc9a03'"
+
 #. (itstool) path: page/p
 #: C/colorbutton.js.page:23 C/colorbutton.py.page:24
 msgid ""
@@ -6737,38 +7645,107 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/colorbutton.js.page:29
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gdk = imports.gi.Gdk;\n"
+#| "const GObject = imports.gi.GObject;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ColorbuttonExample = new Lang.Class ({\n"
+#| "    Name: 'Colorbutton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({ application_id: 'org.example.jscolorbutton' });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this.window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this.window = new Gtk.ApplicationWindow ({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"ColorButton\",\n"
+#| "                                                   default_width: 150,\n"
+#| "                                                   default_height: 50,\n"
+#| "                                                   border_width: 10 });\n"
+#| "\n"
+#| "        this.button = new Gtk.ColorButton();\n"
+#| "        this.color = new Gdk.RGBA();\n"
+#| "        this.color.red = 0.0;\n"
+#| "        this.color.green = 0.0;\n"
+#| "        this.color.blue = 1.0;\n"
+#| "        this.color.alpha = 0.5;\n"
+#| "        this.button.set_rgba(this.color);\n"
+#| "        this.button.connect(\"color-set\", Lang.bind(this, this.onColorChosen));\n"
+#| "        this.label = new Gtk.Label();\n"
+#| "        this.label.set_text(\"Click to choose a color\");\n"
+#| "\n"
+#| "        let grid = new Gtk.Grid();\n"
+#| "        grid.attach(this.button, 0, 0, 2, 1);\n"
+#| "        grid.attach(this.label, 0, 1, 2, 1);\n"
+#| "        this.window.add(grid);\n"
+#| "        this.window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    onColorChosen: function() {\n"
+#| "    let colorName = this.color.to_string();\n"
+#| "    this.label.set_text(\"You chose the color \" + colorName);\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ColorbuttonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gdk = imports.gi.Gdk;\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ColorbuttonExample = new Lang.Class ({\n"
-"    Name: 'Colorbutton Example',\n"
+"class ColorbuttonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({ application_id: 'org.example.jscolorbutton' });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow ({ application: this.application,\n"
@@ -6785,7 +7762,7 @@ msgid ""
 "        this.color.blue = 1.0;\n"
 "        this.color.alpha = 0.5;\n"
 "        this.button.set_rgba(this.color);\n"
-"        this.button.connect(\"color-set\", Lang.bind(this, this.onColorChosen));\n"
+"        this.button.connect(\"color-set\", this.onColorChosen.bind(this));\n"
 "        this.label = new Gtk.Label();\n"
 "        this.label.set_text(\"Click to choose a color\");\n"
 "\n"
@@ -6794,13 +7771,13 @@ msgid ""
 "        grid.attach(this.label, 0, 1, 2, 1);\n"
 "        this.window.add(grid);\n"
 "        this.window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    onColorChosen: function() {\n"
-"    let colorName = this.color.to_string();\n"
-"    this.label.set_text(\"You chose the color \" + colorName);\n"
+"    onColorChosen() {\n"
+"        let colorName = this.color.to_string();\n"
+"        this.label.set_text(\"You chose the color \" + colorName);\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ColorbuttonExample ();\n"
@@ -6808,35 +7785,36 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gdk = imports.gi.Gdk;\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ColorbuttonExample = new Lang.Class ({\n"
-"    Name: 'Colorbutton Example',\n"
+"class ColorbuttonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({ application_id: 'org.example.jscolorbutton' });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow ({ application: this.application,\n"
@@ -6853,7 +7831,7 @@ msgstr ""
 "        this.color.blue = 1.0;\n"
 "        this.color.alpha = 0.5;\n"
 "        this.button.set_rgba(this.color);\n"
-"        this.button.connect(\"color-set\", Lang.bind(this, this.onColorChosen));\n"
+"        this.button.connect(\"color-set\", this.onColorChosen.bind(this));\n"
 "        this.label = new Gtk.Label();\n"
 "        this.label.set_text(\"Click to choose a color\");\n"
 "\n"
@@ -6862,13 +7840,13 @@ msgstr ""
 "        grid.attach(this.label, 0, 1, 2, 1);\n"
 "        this.window.add(grid);\n"
 "        this.window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    onColorChosen: function() {\n"
-"    let colorName = this.color.to_string();\n"
-"    this.label.set_text(\"You chose the color \" + colorName);\n"
+"    onColorChosen() {\n"
+"        let colorName = this.color.to_string();\n"
+"        this.label.set_text(\"You chose the color \" + colorName);\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ColorbuttonExample ();\n"
@@ -6893,63 +7871,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/colorbutton.py.page:30
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "from gi.repository import Gdk\n"
@@ -7200,16 +8121,6 @@ msgstr "<link href=\"http://valadoc.org/gtk+-3.0/Gtk.ColorButton.html\";>Gtk.Colo
 msgid "<link href=\"http://valadoc.org/gdk-3.0/Gdk.RGBA.html\";>Gdk.RGBA</link>"
 msgstr "<link href=\"http://valadoc.org/gdk-3.0/Gdk.RGBA.html\";>Gdk.RGBA</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/comboboxtext.js.page:24 C/combobox.c.page:26 C/combobox.py.page:24 C/combobox.vala.page:22
-msgctxt "_"
-msgid "external ref='media/combobox.png' md5='ab9e91bc1a58fe866cb00dd52159251d'"
-msgstr "external ref='media/combobox.png' md5='ab9e91bc1a58fe866cb00dd52159251d'"
-
 #. (itstool) path: info/title
 #: C/comboboxtext.js.page:8
 msgctxt "text"
@@ -7226,6 +8137,16 @@ msgstr ""
 msgid "ComboBoxText"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/comboboxtext.js.page:24 C/combobox.c.page:26 C/combobox.py.page:24 C/combobox.vala.page:22
+msgctxt "_"
+msgid "external ref='media/combobox.png' md5='ab9e91bc1a58fe866cb00dd52159251d'"
+msgstr "external ref='media/combobox.png' md5='ab9e91bc1a58fe866cb00dd52159251d'"
+
 #. (itstool) path: page/p
 #: C/comboboxtext.js.page:25
 msgid ""
@@ -7242,6 +8163,22 @@ msgid ""
 "you may find it a lot simpler to use a ComboBoxText whenever possible."
 msgstr ""
 
+#. (itstool) path: section/code
+#: C/comboboxtext.js.page:31 C/textview.js.page:39
+#, no-wrap
+msgid ""
+"\n"
+"#!/usr/bin/gjs\n"
+"\n"
+"const Gtk = imports.gi.Gtk;\n"
+"const Lang = imports.lang;\n"
+msgstr ""
+"\n"
+"#!/usr/bin/gjs\n"
+"\n"
+"const Gtk = imports.gi.Gtk;\n"
+"const Lang = imports.lang;\n"
+
 #. (itstool) path: section/code
 #: C/comboboxtext.js.page:42
 #, no-wrap
@@ -7303,7 +8240,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/comboboxtext.js.page:67 C/combobox.js.page:71
+#: C/comboboxtext.js.page:67
 #, no-wrap
 msgid ""
 "\n"
@@ -7529,7 +8466,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/comboboxtext.js.page:151 C/combobox.js.page:208
+#: C/comboboxtext.js.page:151
 #, no-wrap
 msgid ""
 "\n"
@@ -7579,39 +8516,141 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/comboboxtext.js.page:172
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ComboBoxTextExample = new Lang.Class ({\n"
+#| "    Name: 'ComboBoxText Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.jscomboboxtext'});\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            title: \"Welcome to GNOME\",\n"
+#| "            default_width: 200,\n"
+#| "            border_width: 10 });\n"
+#| "\n"
+#| "        // Create the combobox\n"
+#| "        this._comboBoxText = new Gtk.ComboBoxText();\n"
+#| "\n"
+#| "        // Populate the combobox\n"
+#| "        let distros = [\"Select distribution\", \"Fedora\", \"Mint\", \"Suse\"];\n"
+#| "        for (let i = 0; i &lt; distros.length; i++)\n"
+#| "            this._comboBoxText.append_text (distros[i]);\n"
+#| "        this._comboBoxText.set_active (0);\n"
+#| "\n"
+#| "        // Connect the combobox's 'changed' signal to our callback function\n"
+#| "        this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+#| "\n"
+#| "        // Add the combobox to the window\n"
+#| "        this._window.add (this._comboBoxText);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onComboChanged: function () {\n"
+#| "\n"
+#| "        // The responses we'll use for our messagedialog\n"
+#| "        let responses = [\"\",\n"
+#| "            \"Fedora is a community distro sponsored by Red Hat.\",\n"
+#| "            \"Mint is a popular distro based on Ubuntu.\",\n"
+#| "            \"SUSE is a name shared by two separate distros.\"];\n"
+#| "\n"
+#| "        // Which combobox item is active?\n"
+#| "        let activeItem = this._comboBoxText.get_active();\n"
+#| "\n"
+#| "        // No messagedialog if you chose \"Select distribution\"\n"
+#| "        if (activeItem != 0) {\n"
+#| "            this._popUp = new Gtk.MessageDialog ({\n"
+#| "                transient_for: this._window,\n"
+#| "                modal: true,\n"
+#| "                buttons: Gtk.ButtonsType.OK,\n"
+#| "                message_type: Gtk.MessageType.INFO,\n"
+#| "                text: responses[activeItem]});\n"
+#| "\n"
+#| "            // Connect the OK button to a handler function\n"
+#| "            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+#| "\n"
+#| "            // Show the messagedialog\n"
+#| "            this._popUp.show();\n"
+#| "        }\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onDialogResponse: function () {\n"
+#| "\n"
+#| "        this._popUp.destroy ();\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ComboBoxTextExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ComboBoxTextExample = new Lang.Class ({\n"
-"    Name: 'ComboBoxText Example',\n"
+"class ComboBoxTextExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.jscomboboxtext'});\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -7631,18 +8670,16 @@ msgid ""
 "        this._comboBoxText.set_active (0);\n"
 "\n"
 "        // Connect the combobox's 'changed' signal to our callback function\n"
-"        this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+"        this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));\n"
 "\n"
 "        // Add the combobox to the window\n"
 "        this._window.add (this._comboBoxText);\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
+"    }\n"
 "\n"
-"\n"
-"    _onComboChanged: function () {\n"
+"    _onComboChanged() {\n"
 "\n"
 "        // The responses we'll use for our messagedialog\n"
 "        let responses = [\"\",\n"
@@ -7663,23 +8700,21 @@ msgid ""
 "                text: responses[activeItem]});\n"
 "\n"
 "            // Connect the OK button to a handler function\n"
-"            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+"            this._popUp.connect ('response', this._onDialogResponse.bind(this));\n"
 "\n"
 "            // Show the messagedialog\n"
 "            this._popUp.show();\n"
 "        }\n"
 "\n"
-"    },\n"
-"\n"
+"    }\n"
 "\n"
-"\n"
-"    _onDialogResponse: function () {\n"
+"    _onDialogResponse() {\n"
 "\n"
 "        this._popUp.destroy ();\n"
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ComboBoxTextExample ();\n"
@@ -7687,36 +8722,33 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ComboBoxTextExample = new Lang.Class ({\n"
-"    Name: 'ComboBoxText Example',\n"
+"class ComboBoxTextExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.jscomboboxtext'});\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -7736,18 +8768,16 @@ msgstr ""
 "        this._comboBoxText.set_active (0);\n"
 "\n"
 "        // Connect the combobox's 'changed' signal to our callback function\n"
-"        this._comboBoxText.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+"        this._comboBoxText.connect ('changed', this._onComboChanged.bind(this));\n"
 "\n"
 "        // Add the combobox to the window\n"
 "        this._window.add (this._comboBoxText);\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onComboChanged: function () {\n"
+"    _onComboChanged() {\n"
 "\n"
 "        // The responses we'll use for our messagedialog\n"
 "        let responses = [\"\",\n"
@@ -7768,23 +8798,21 @@ msgstr ""
 "                text: responses[activeItem]});\n"
 "\n"
 "            // Connect the OK button to a handler function\n"
-"            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+"            this._popUp.connect ('response', this._onDialogResponse.bind(this));\n"
 "\n"
 "            // Show the messagedialog\n"
 "            this._popUp.show();\n"
 "        }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onDialogResponse: function () {\n"
+"    _onDialogResponse() {\n"
 "\n"
 "        this._popUp.destroy ();\n"
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ComboBoxTextExample ();\n"
@@ -7997,16 +9025,6 @@ msgstr ""
 msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkComboBoxText.html\";>GtkComboBoxText</link>"
 msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkComboBoxText.html\";>GtkComboBoxText</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/combobox.js.page:26 C/combobox_multicolumn.py.page:23 C/combobox_multicolumn.vala.page:23
-msgctxt "_"
-msgid "external ref='media/combobox_multicolumn.png' md5='43f16648fb11ebc7d2f70825ed0f63b3'"
-msgstr "external ref='media/combobox_multicolumn.png' md5='43f16648fb11ebc7d2f70825ed0f63b3'"
-
 #. (itstool) path: info/title
 #: C/combobox.js.page:8
 msgctxt "text"
@@ -8018,6 +9036,16 @@ msgstr "ComboBox (JavaScript)"
 msgid "A customizable drop-down menu"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/combobox.js.page:26 C/combobox_multicolumn.py.page:23 C/combobox_multicolumn.vala.page:23
+msgctxt "_"
+msgid "external ref='media/combobox_multicolumn.png' md5='43f16648fb11ebc7d2f70825ed0f63b3'"
+msgstr "external ref='media/combobox_multicolumn.png' md5='43f16648fb11ebc7d2f70825ed0f63b3'"
+
 #. (itstool) path: page/p
 #: C/combobox.js.page:27
 msgid ""
@@ -8046,72 +9074,103 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.js.page:34
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const GObject = imports.gi.GObject;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
 msgid ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 msgstr ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 
 #. (itstool) path: section/code
-#: C/combobox.js.page:46
+#: C/combobox.js.page:47
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "const ComboBoxExample = new Lang.Class ({\n"
+#| "    Name: 'ComboBox Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.jscombobox'});\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
 msgid ""
 "\n"
-"const ComboBoxExample = new Lang.Class ({\n"
-"    Name: 'ComboBox Example',\n"
+"class ComboBoxExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.jscombobox'});\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
-"const ComboBoxExample = new Lang.Class ({\n"
-"    Name: 'ComboBox Example',\n"
+"class ComboBoxExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.jscombobox'});\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
+"    _onStartup() {\n"
 "        this._buildUI ();\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
 #: C/combobox.js.page:70
@@ -8121,6 +9180,46 @@ msgid ""
 "in."
 msgstr ""
 
+#. (itstool) path: section/code
+#: C/combobox.js.page:71
+#, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            title: \"Welcome to GNOME\",\n"
+#| "            default_width: 200,\n"
+#| "            border_width: 10 });\n"
+msgid ""
+"\n"
+"    // Build the application's UI\n"
+"    _buildUI() {\n"
+"\n"
+"        // Create the application window\n"
+"        this._window = new Gtk.ApplicationWindow  ({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Welcome to GNOME\",\n"
+"            default_width: 200,\n"
+"            border_width: 10 });\n"
+msgstr ""
+"\n"
+"    // Build the application's UI\n"
+"    _buildUI() {\n"
+"\n"
+"        // Create the application window\n"
+"        this._window = new Gtk.ApplicationWindow  ({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Welcome to GNOME\",\n"
+"            default_width: 200,\n"
+"            border_width: 10 });\n"
+
 #. (itstool) path: section/title
 #: C/combobox.js.page:87 C/treeview_simple_liststore.js.page:94
 msgid "Creating the ListStore"
@@ -8316,20 +9415,27 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.js.page:149
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Set the first row in the combobox to be active on startup\n"
+#| "        this._comboBox.set_active (0);\n"
+#| "\n"
+#| "        // Connect the combobox's 'changed' signal to our callback function\n"
+#| "        this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
 msgid ""
 "\n"
 "        // Set the first row in the combobox to be active on startup\n"
 "        this._comboBox.set_active (0);\n"
 "\n"
 "        // Connect the combobox's 'changed' signal to our callback function\n"
-"        this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+"        this._comboBox.connect ('changed', this._onComboChanged.bind(this));\n"
 msgstr ""
 "\n"
 "        // Set the first row in the combobox to be active on startup\n"
 "        this._comboBox.set_active (0);\n"
 "\n"
 "        // Connect the combobox's 'changed' signal to our callback function\n"
-"        this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+"        this._comboBox.connect ('changed', this._onComboChanged.bind(this));\n"
 
 #. (itstool) path: section/p
 #: C/combobox.js.page:156
@@ -8343,6 +9449,14 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.js.page:158
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Add the combobox to the window\n"
+#| "        this._window.add (this._comboBox);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
 msgid ""
 "\n"
 "        // Add the combobox to the window\n"
@@ -8350,7 +9464,7 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
 "        // Add the combobox to the window\n"
@@ -8358,7 +9472,7 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
 #: C/combobox.js.page:166
@@ -8368,9 +9482,18 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.js.page:171
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _selected: function () {\n"
+#| "\n"
+#| "        // The silly pseudohaiku that we'll use for our messagedialog\n"
+#| "        let haiku = [\"\",\n"
+#| "            \"You ask for the new\\nwith no thought for the aged\\nlike fallen leaves trod.\",\n"
+#| "            \"Like a simple clam\\nrevealing a lustrous pearl\\nit opens for you.\",\n"
+#| "            \"A moment in time\\na memory on the breeze\\nthese things can't be saved.\"];\n"
 msgid ""
 "\n"
-"    _selected: function () {\n"
+"    _selected() {\n"
 "\n"
 "        // The silly pseudohaiku that we'll use for our messagedialog\n"
 "        let haiku = [\"\",\n"
@@ -8379,7 +9502,7 @@ msgid ""
 "            \"A moment in time\\na memory on the breeze\\nthese things can't be saved.\"];\n"
 msgstr ""
 "\n"
-"    _selected: function () {\n"
+"    _selected() {\n"
 "\n"
 "        // The silly pseudohaiku that we'll use for our messagedialog\n"
 "        let haiku = [\"\",\n"
@@ -8398,6 +9521,28 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.js.page:182
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "        // Which combobox item is active?\n"
+#| "        let activeItem = this._comboBox.get_active();\n"
+#| "\n"
+#| "        // No messagedialog if you choose \"Select\"\n"
+#| "        if (activeItem != 0) {\n"
+#| "            this._popUp = new Gtk.MessageDialog ({\n"
+#| "                transient_for: this._window,\n"
+#| "                modal: true,\n"
+#| "                buttons: Gtk.ButtonsType.OK,\n"
+#| "                message_type: Gtk.MessageType.INFO,\n"
+#| "                text: haiku[activeItem]});\n"
+#| "\n"
+#| "            // Connect the OK button to a handler function\n"
+#| "            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+#| "\n"
+#| "            // Show the messagedialog\n"
+#| "            this._popUp.show();\n"
+#| "        }\n"
+#| "\n"
+#| "    },\n"
 msgid ""
 "\n"
 "        // Which combobox item is active?\n"
@@ -8413,13 +9558,13 @@ msgid ""
 "                text: haiku[activeItem]});\n"
 "\n"
 "            // Connect the OK button to a handler function\n"
-"            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+"            this._popUp.connect ('response', this._onDialogResponse.bind(this));\n"
 "\n"
 "            // Show the messagedialog\n"
 "            this._popUp.show();\n"
 "        }\n"
 "\n"
-"    },\n"
+"    }\n"
 msgstr ""
 "\n"
 "        // Which combobox item is active?\n"
@@ -8435,13 +9580,13 @@ msgstr ""
 "                text: haiku[activeItem]});\n"
 "\n"
 "            // Connect the OK button to a handler function\n"
-"            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+"            this._popUp.connect ('response', this._onDialogResponse.bind(this));\n"
 "\n"
 "            // Show the messagedialog\n"
 "            this._popUp.show();\n"
 "        }\n"
 "\n"
-"    },\n"
+"    }\n"
 
 #. (itstool) path: section/p
 #: C/combobox.js.page:204
@@ -8458,6 +9603,37 @@ msgid ""
 "file>, and <file>get_active_text</file>, which returns the full text of the string you selected."
 msgstr ""
 
+#. (itstool) path: section/code
+#: C/combobox.js.page:208
+#, no-wrap
+#| msgid ""
+#| "\n"
+#| "    _onDialogResponse: function () {\n"
+#| "\n"
+#| "        this._popUp.destroy ();\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+msgid ""
+"\n"
+"    _onDialogResponse() {\n"
+"\n"
+"        this._popUp.destroy ();\n"
+"\n"
+"    }\n"
+"\n"
+"};\n"
+msgstr ""
+"\n"
+"    _onDialogResponse() {\n"
+"\n"
+"        this._popUp.destroy ();\n"
+"\n"
+"    }\n"
+"\n"
+"};\n"
+
 #. (itstool) path: section/code
 #: C/combobox.js.page:219
 #, no-wrap
@@ -8480,40 +9656,175 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.js.page:229
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const GObject = imports.gi.GObject;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ComboBoxExample = new Lang.Class ({\n"
+#| "    Name: 'ComboBox Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.jscombobox'});\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            title: \"Welcome to GNOME\",\n"
+#| "            default_width: 200,\n"
+#| "            border_width: 10 });\n"
+#| "\n"
+#| "        // Create the liststore to put our options in\n"
+#| "        this._listStore = new Gtk.ListStore();\n"
+#| "        this._listStore.set_column_types ([\n"
+#| "            GObject.TYPE_STRING,\n"
+#| "            GObject.TYPE_STRING]);\n"
+#| "\n"
+#| "        // This array holds our list of options and their icons\n"
+#| "        let options = [{ name: \"Select\" },\n"
+#| "            { name: \"New\", icon: Gtk.STOCK_NEW },\n"
+#| "            { name: \"Open\", icon: Gtk.STOCK_OPEN },\n"
+#| "            { name: \"Save\", icon: Gtk.STOCK_SAVE }];\n"
+#| "\n"
+#| "        // Put the options in the liststore\n"
+#| "        for (let i = 0; i &lt; options.length; i++ ) {\n"
+#| "            let option = options[i];\n"
+#| "            let iter = this._listStore.append();\n"
+#| "            this._listStore.set (iter, [0], [option.name]);\n"
+#| "            if ('icon' in option)\n"
+#| "                this._listStore.set (iter, [1], [option.icon]);\n"
+#| "        }\n"
+#| "\n"
+#| "        // Create the combobox\n"
+#| "        this._comboBox = new Gtk.ComboBox({\n"
+#| "            model: this._listStore});\n"
+#| "\n"
+#| "        // Create some cellrenderers for the items in each column\n"
+#| "        let rendererPixbuf = new Gtk.CellRendererPixbuf();\n"
+#| "        let rendererText = new Gtk.CellRendererText();\n"
+#| "\n"
+#| "        // Pack the renderers into the combobox in the order we want to see\n"
+#| "        this._comboBox.pack_start (rendererPixbuf, false);\n"
+#| "        this._comboBox.pack_start (rendererText, false);\n"
+#| "\n"
+#| "        // Set the renderers to use the information from our liststore\n"
+#| "        this._comboBox.add_attribute (rendererText, \"text\", 0);\n"
+#| "        this._comboBox.add_attribute (rendererPixbuf, \"stock_id\", 1);\n"
+#| "\n"
+#| "        // Set the first row in the combobox to be active on startup\n"
+#| "        this._comboBox.set_active (0);\n"
+#| "\n"
+#| "        // Connect the combobox's 'changed' signal to our callback function\n"
+#| "        this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+#| "\n"
+#| "        // Add the combobox to the window\n"
+#| "        this._window.add (this._comboBox);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onComboChanged: function () {\n"
+#| "\n"
+#| "        // The silly pseudohaiku that we'll use for our messagedialog\n"
+#| "        let haiku = [\"\",\n"
+#| "            \"You ask for the new\\nwith no thought for the aged\\nlike fallen leaves trod.\",\n"
+#| "            \"Like a simple clam\\nrevealing a lustrous pearl\\nit opens for you.\",\n"
+#| "            \"A moment in time\\na memory on the breeze\\nthese things can't be saved.\"];\n"
+#| "\n"
+#| "        // Which combobox item is active?\n"
+#| "        let activeItem = this._comboBox.get_active();\n"
+#| "\n"
+#| "        // No messagedialog if you choose \"Select\"\n"
+#| "        if (activeItem != 0) {\n"
+#| "            this._popUp = new Gtk.MessageDialog ({\n"
+#| "                transient_for: this._window,\n"
+#| "                modal: true,\n"
+#| "                buttons: Gtk.ButtonsType.OK,\n"
+#| "                message_type: Gtk.MessageType.INFO,\n"
+#| "                text: haiku[activeItem]});\n"
+#| "\n"
+#| "            // Connect the OK button to a handler function\n"
+#| "            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+#| "\n"
+#| "            // Show the messagedialog\n"
+#| "            this._popUp.show();\n"
+#| "        }\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onDialogResponse: function () {\n"
+#| "\n"
+#| "        this._popUp.destroy ();\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ComboBoxExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ComboBoxExample = new Lang.Class ({\n"
-"    Name: 'ComboBox Example',\n"
+"class ComboBoxExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.jscombobox'});\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -8564,18 +9875,16 @@ msgid ""
 "        this._comboBox.set_active (0);\n"
 "\n"
 "        // Connect the combobox's 'changed' signal to our callback function\n"
-"        this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+"        this._comboBox.connect ('changed', this._onComboChanged.bind(this));\n"
 "\n"
 "        // Add the combobox to the window\n"
 "        this._window.add (this._comboBox);\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onComboChanged: function () {\n"
+"    _onComboChanged() {\n"
 "\n"
 "        // The silly pseudohaiku that we'll use for our messagedialog\n"
 "        let haiku = [\"\",\n"
@@ -8596,23 +9905,21 @@ msgid ""
 "                text: haiku[activeItem]});\n"
 "\n"
 "            // Connect the OK button to a handler function\n"
-"            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+"            this._popUp.connect ('response', this._onDialogResponse.bind(this));\n"
 "\n"
 "            // Show the messagedialog\n"
 "            this._popUp.show();\n"
 "        }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onDialogResponse: function () {\n"
+"    _onDialogResponse() {\n"
 "\n"
 "        this._popUp.destroy ();\n"
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ComboBoxExample ();\n"
@@ -8620,37 +9927,35 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ComboBoxExample = new Lang.Class ({\n"
-"    Name: 'ComboBox Example',\n"
+"class ComboBoxExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.jscombobox'});\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
+"    _onActivate() {\n"
 "        this._window.present ();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -8701,18 +10006,16 @@ msgstr ""
 "        this._comboBox.set_active (0);\n"
 "\n"
 "        // Connect the combobox's 'changed' signal to our callback function\n"
-"        this._comboBox.connect ('changed', Lang.bind (this, this._onComboChanged));\n"
+"        this._comboBox.connect ('changed', this._onComboChanged.bind(this));\n"
 "\n"
 "        // Add the combobox to the window\n"
 "        this._window.add (this._comboBox);\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onComboChanged: function () {\n"
+"    _onComboChanged() {\n"
 "\n"
 "        // The silly pseudohaiku that we'll use for our messagedialog\n"
 "        let haiku = [\"\",\n"
@@ -8733,23 +10036,21 @@ msgstr ""
 "                text: haiku[activeItem]});\n"
 "\n"
 "            // Connect the OK button to a handler function\n"
-"            this._popUp.connect ('response', Lang.bind (this, this._onDialogResponse));\n"
+"            this._popUp.connect ('response', this._onDialogResponse.bind(this));\n"
 "\n"
 "            // Show the messagedialog\n"
 "            this._popUp.show();\n"
 "        }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onDialogResponse: function () {\n"
+"    _onDialogResponse() {\n"
 "\n"
 "        this._popUp.destroy ();\n"
 "\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ComboBoxExample ();\n"
@@ -8805,63 +10106,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/combobox.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -9612,16 +10856,6 @@ msgstr ""
 msgid "Examples of applications"
 msgstr "Anwendungsbeispiele"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/dialog.c.page:25 C/dialog.js.page:22 C/dialog.py.page:24 C/dialog.vala.page:22
-msgctxt "_"
-msgid "external ref='media/dialog.png' md5='c90a33386a600e892fe623d4072c8c38'"
-msgstr "external ref='media/dialog.png' md5='c90a33386a600e892fe623d4072c8c38'"
-
 #. (itstool) path: info/title
 #: C/dialog.c.page:8
 msgctxt "text"
@@ -9638,6 +10872,16 @@ msgstr ""
 msgid "Dialog"
 msgstr "Dialog"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/dialog.c.page:25 C/dialog.js.page:22 C/dialog.py.page:24 C/dialog.vala.page:22
+msgctxt "_"
+msgid "external ref='media/dialog.png' md5='c90a33386a600e892fe623d4072c8c38'"
+msgstr "external ref='media/dialog.png' md5='c90a33386a600e892fe623d4072c8c38'"
+
 #. (itstool) path: page/p
 #: C/dialog.c.page:26
 msgid "A dialog window that pops up when a button is pressed."
@@ -9880,97 +11124,126 @@ msgstr ""
 #| msgid ""
 #| "#!/usr/bin/gjs\n"
 #| "\n"
-#| "const GObject = imports.gi.GObject;\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
 #| "const Gtk = imports.gi.Gtk;\n"
 #| "const Lang = imports.lang;\n"
 #| "\n"
-#| "const ScrolledWindowExample = new Lang.Class ({\n"
-#| "    Name: 'ScrolledWindow Example',\n"
+#| "const DialogExample = new Lang.Class ({\n"
+#| "    Name: 'Dialog Example',\n"
 #| "\n"
 #| "    // Create the application itself\n"
-#| "    _init: function () {\n"
-#| "        this.application = new Gtk.Application({ application_id: 'org.example.jscrolledwindow' });\n"
+#| "        _init: function () {\n"
+#| "            this.application = new Gtk.Application ({\n"
+#| "                application_id: 'org.example.jsdialog',\n"
+#| "                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "            });\n"
 #| "\n"
-#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
 #| "    },\n"
 #| "\n"
 #| "    // Callback function for 'activate' signal presents windows when active\n"
-#| "    _onActivate: function() {\n"
-#| "        this.window.present();\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
 #| "    },\n"
 #| "\n"
 #| "    // Callback function for 'startup' signal builds the UI\n"
-#| "    _onStartup: function() {\n"
+#| "    _onStartup: function () {\n"
 #| "        this._buildUI ();\n"
 #| "    },\n"
 #| "\n"
 #| "    // Build the application's UI\n"
-#| "    _buildUI: function() {\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
 #| "        // Create the application window\n"
-#| "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-#| "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
-#| "                                                    title: \"ScrolledWindow Example\",\n"
-#| "                                                    default_width: 200,\n"
-#| "                                                    default_height: 200,\n"
-#| "                                                    border_width: 10 });\n"
-#| "        // the scrolledwindow\n"
-#| "        this.scrolledWindow = new Gtk.ScrolledWindow();\n"
-#| "        this.scrolledWindow.set_border_width(10);\n"
-#| "        // there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        this.scrolledWindow.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS);\n"
-#| "        // an image - slightly larger than the window\n"
-#| "        this.image = new Gtk.Image();\n"
-#| "        this.image.set_from_file(\"gnome-image.png\");\n"
+#| "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                         window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                         title: \"Gtk.Dialog Example\",\n"
+#| "                                                         default_height: 50,\n"
+#| "                                                         default_width: 250 });\n"
 #| "\n"
-#| "        // add the image to the scrolledwindow\n"
-#| "        this.scrolledWindow.add_with_viewport(this.image);\n"
+#| "        // Create a button\n"
+#| "        this._button = new Gtk.Button ({label: \"Click Me\"});\n"
+#| "        this._window.add (this._button);\n"
 #| "\n"
-#| "        // add the scrolledwindow to the window\n"
-#| "        this.window.add(this.scrolledWindow);\n"
-#| "        this.window.show_all();\n"
+#| "        // Bind it to the function that creates the dialog\n"
+#| "        this._button.connect (\"clicked\", Lang.bind(this, this._createDialog));\n"
+#| "\n"
+#| "                // Show the window and all child widgets\n"
+#| "                this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    _createDialog: function () {\n"
+#| "\n"
+#| "        // Create the dialog\n"
+#| "        this._dialog = new Gtk.Dialog ({ transient_for: this._window,\n"
+#| "                         modal: true,\n"
+#| "                         title: \"A Gtk+ dialog\" });\n"
+#| "\n"
+#| "        // Create the dialog's content area, which contains a message\n"
+#| "        this._contentArea = this._dialog.get_content_area();\n"
+#| "        this._message = new Gtk.Label ({label: \"This demonstrates a dialog with a label\"});\n"
+#| "        this._contentArea.add (this._message);\n"
+#| "\n"
+#| "        // Create the dialog's action area, which contains a stock OK button\n"
+#| "        this._actionArea = this._dialog.get_action_area();\n"
+#| "        this._OKButton = Gtk.Button.new_from_stock (Gtk.STOCK_OK);\n"
+#| "        this._actionArea.add (this._OKButton);\n"
+#| "\n"
+#| "        // Connect the button to the function that handles what it does\n"
+#| "        this._OKButton.connect (\"clicked\", Lang.bind (this, this._OKHandler));\n"
+#| "\n"
+#| "        this._dialog.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    _OKHandler: function (dialog, response_id) {\n"
+#| "\n"
+#| "        // Destroy the dialog\n"
+#| "        this._dialog.destroy();\n"
 #| "    }\n"
+#| "\n"
 #| "});\n"
 #| "\n"
 #| "// Run the application\n"
-#| "let app = new ScrolledWindowExample();\n"
+#| "let app = new DialogExample ();\n"
 #| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const DialogExample = new Lang.Class ({\n"
-"    Name: 'Dialog Example',\n"
+"class DialogExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jsdialog',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsdialog',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -9984,13 +11257,13 @@ msgid ""
 "        this._window.add (this._button);\n"
 "\n"
 "        // Bind it to the function that creates the dialog\n"
-"        this._button.connect (\"clicked\", Lang.bind(this, this._createDialog));\n"
+"        this._button.connect (\"clicked\", this._createDialog.bind(this));\n"
 "\n"
 "                // Show the window and all child widgets\n"
 "                this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _createDialog: function () {\n"
+"    _createDialog() {\n"
 "\n"
 "        // Create the dialog\n"
 "        this._dialog = new Gtk.Dialog ({ transient_for: this._window,\n"
@@ -10008,18 +11281,18 @@ msgid ""
 "        this._actionArea.add (this._OKButton);\n"
 "\n"
 "        // Connect the button to the function that handles what it does\n"
-"        this._OKButton.connect (\"clicked\", Lang.bind (this, this._OKHandler));\n"
+"        this._OKButton.connect (\"clicked\", this._OKHandler.bind(this));\n"
 "\n"
 "        this._dialog.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _OKHandler: function (dialog, response_id) {\n"
+"    _OKHandler(dialog, response_id) {\n"
 "\n"
 "        // Destroy the dialog\n"
 "        this._dialog.destroy();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new DialogExample ();\n"
@@ -10027,38 +11300,38 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const DialogExample = new Lang.Class ({\n"
-"    Name: 'Dialog Example',\n"
+"class DialogExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jsdialog',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsdialog',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -10072,13 +11345,13 @@ msgstr ""
 "        this._window.add (this._button);\n"
 "\n"
 "        // Bind it to the function that creates the dialog\n"
-"        this._button.connect (\"clicked\", Lang.bind(this, this._createDialog));\n"
+"        this._button.connect (\"clicked\", this._createDialog.bind(this));\n"
 "\n"
 "                // Show the window and all child widgets\n"
 "                this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _createDialog: function () {\n"
+"    _createDialog() {\n"
 "\n"
 "        // Create the dialog\n"
 "        this._dialog = new Gtk.Dialog ({ transient_for: this._window,\n"
@@ -10096,18 +11369,18 @@ msgstr ""
 "        this._actionArea.add (this._OKButton);\n"
 "\n"
 "        // Connect the button to the function that handles what it does\n"
-"        this._OKButton.connect (\"clicked\", Lang.bind (this, this._OKHandler));\n"
+"        this._OKButton.connect (\"clicked\", this._OKHandler.bind(this));\n"
 "\n"
 "        this._dialog.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _OKHandler: function (dialog, response_id) {\n"
+"    _OKHandler(dialog, response_id) {\n"
 "\n"
 "        // Destroy the dialog\n"
 "        this._dialog.destroy();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new DialogExample ();\n"
@@ -10132,63 +11405,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/dialog.py.page:32
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -10551,16 +11767,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Label.html\";>Gtk.Label<
 msgid "<link 
href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.get_content_area.html\";>get_content_area</link>"
 msgstr "<link 
href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Dialog.get_content_area.html\";>get_content_area</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/entry.c.page:23 C/entry.js.page:22 C/entry.py.page:29 C/entry.vala.page:22
-msgctxt "_"
-msgid "external ref='media/entry.png' md5='8a828cffdcbaa4bad83342e109f28cc8'"
-msgstr "external ref='media/entry.png' md5='8a828cffdcbaa4bad83342e109f28cc8'"
-
 #. (itstool) path: info/title
 #: C/entry.c.page:8
 msgctxt "text"
@@ -10577,6 +11783,16 @@ msgstr ""
 msgid "Entry"
 msgstr "Eintrag"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/entry.c.page:23 C/entry.js.page:22 C/entry.py.page:29 C/entry.vala.page:22
+msgctxt "_"
+msgid "external ref='media/entry.png' md5='8a828cffdcbaa4bad83342e109f28cc8'"
+msgstr "external ref='media/entry.png' md5='8a828cffdcbaa4bad83342e109f28cc8'"
+
 #. (itstool) path: page/p
 #: C/entry.c.page:24 C/entry.vala.page:23
 msgid "This application greets you in the terminal."
@@ -10727,43 +11943,128 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/entry.js.page:25
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const EntryExample = new Lang.Class({\n"
+#| "    Name: 'Entry Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsentry',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 100,\n"
+#| "            default_width: 300,\n"
+#| "            border_width: 10,\n"
+#| "            title: \"What is your name?\"});\n"
+#| "\n"
+#| "        // Create the text entry box\n"
+#| "        this.entry = new Gtk.Entry ();\n"
+#| "        this._window.add(this.entry);\n"
+#| "\n"
+#| "        // Connect the text entry box to a function that responds to what you type in\n"
+#| "        this.entry.connect(\"activate\", Lang.bind (this, this._hello));\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _hello: function() {\n"
+#| "\n"
+#| "        // Create a popup dialog to greet the person who types in their name\n"
+#| "        this._greeter = new Gtk.MessageDialog ({\n"
+#| "            transient_for: this._window,\n"
+#| "            modal: true,\n"
+#| "            text: \"Hello, \" + this.entry.get_text() + \"!\",\n"
+#| "            message_type: Gtk.MessageType.OTHER,\n"
+#| "            buttons: Gtk.ButtonsType.OK,\n"
+#| "        });\n"
+#| "\n"
+#| "        // Show the popup dialog\n"
+#| "        this._greeter.show();\n"
+#| "\n"
+#| "        // Bind the OK button to the function that closes the popup\n"
+#| "        this._greeter.connect (\"response\", Lang.bind(this, this._okClicked));\n"
+#| "    },\n"
+#| "\n"
+#| "    _okClicked: function () {\n"
+#| "        this._greeter.destroy();\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new EntryExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const EntryExample = new Lang.Class({\n"
-"    Name: 'Entry Example',\n"
+"class EntryExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsentry',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -10779,15 +12080,13 @@ msgid ""
 "        this._window.add(this.entry);\n"
 "\n"
 "        // Connect the text entry box to a function that responds to what you type in\n"
-"        this.entry.connect(\"activate\", Lang.bind (this, this._hello));\n"
+"        this.entry.connect(\"activate\", this._hello.bind(this));\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _hello: function() {\n"
+"    _hello() {\n"
 "\n"
 "        // Create a popup dialog to greet the person who types in their name\n"
 "        this._greeter = new Gtk.MessageDialog ({\n"
@@ -10802,14 +12101,14 @@ msgid ""
 "        this._greeter.show();\n"
 "\n"
 "        // Bind the OK button to the function that closes the popup\n"
-"        this._greeter.connect (\"response\", Lang.bind(this, this._okClicked));\n"
-"    },\n"
+"        this._greeter.connect (\"response\", this._okClicked.bind(this));\n"
+"    }\n"
 "\n"
-"    _okClicked: function () {\n"
+"    _okClicked() {\n"
 "        this._greeter.destroy();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new EntryExample ();\n"
@@ -10817,40 +12116,38 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const EntryExample = new Lang.Class({\n"
-"    Name: 'Entry Example',\n"
+"class EntryExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsentry',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -10866,15 +12163,13 @@ msgstr ""
 "        this._window.add(this.entry);\n"
 "\n"
 "        // Connect the text entry box to a function that responds to what you type in\n"
-"        this.entry.connect(\"activate\", Lang.bind (this, this._hello));\n"
+"        this.entry.connect(\"activate\", this._hello.bind(this));\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _hello: function() {\n"
+"    _hello() {\n"
 "\n"
 "        // Create a popup dialog to greet the person who types in their name\n"
 "        this._greeter = new Gtk.MessageDialog ({\n"
@@ -10889,14 +12184,14 @@ msgstr ""
 "        this._greeter.show();\n"
 "\n"
 "        // Bind the OK button to the function that closes the popup\n"
-"        this._greeter.connect (\"response\", Lang.bind(this, this._okClicked));\n"
-"    },\n"
+"        this._greeter.connect (\"response\", this._okClicked.bind(this));\n"
+"    }\n"
 "\n"
-"    _okClicked: function () {\n"
+"    _okClicked() {\n"
 "        this._greeter.destroy();\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new EntryExample ();\n"
@@ -10933,45 +12228,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/entry.py.page:36
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -11100,7 +12356,7 @@ msgstr ""
 #. (itstool) path: item/p
 #: C/entry.py.page:45
 msgid "<code>get_text_length()</code> is self-explanatory."
-msgstr ""
+msgstr "<code>get_text_length()</code> ist selbsterklärend."
 
 #. (itstool) path: item/p
 #: C/entry.py.page:46
@@ -11112,7 +12368,7 @@ msgstr ""
 msgid ""
 "If we set <code>set_visibility(False)</code> the characters in the entry are displayed as the invisible 
char. This "
 "is the best available in the current font, but it can be changed with <code>set_invisible_char(ch)</code>, 
where "
-"<code>ch</code> is a Unicode charcater. The latter method is reversed by 
<code>unset_invisbile_char()</code>."
+"<code>ch</code> is a Unicode character. The latter method is reversed by 
<code>unset_invisible_char()</code>."
 msgstr ""
 
 #. (itstool) path: item/p
@@ -11309,26 +12565,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Entry.html\";>Gtk.Entry</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Entry.html\";>Gtk.Entry</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/filechooserdialog.py.page:26
-msgctxt "_"
-msgid "external ref='media/filechooserdialog_save.png' md5='3a7a3b71b9d3a36066857843b68ff27f'"
-msgstr "external ref='media/filechooserdialog_save.png' md5='3a7a3b71b9d3a36066857843b68ff27f'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/filechooserdialog.py.page:28
-msgctxt "_"
-msgid "external ref='media/filechooserdialog_menu.png' md5='8a75f04127a70eba0ed68a9eb1d3bbca'"
-msgstr "external ref='media/filechooserdialog_menu.png' md5='8a75f04127a70eba0ed68a9eb1d3bbca'"
-
 #. (itstool) path: info/title
 #: C/filechooserdialog.py.page:8
 msgctxt "text"
@@ -11345,6 +12581,16 @@ msgstr ""
 msgid "FileChooserDialog"
 msgstr "FileChooserDialog"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/filechooserdialog.py.page:26
+msgctxt "_"
+msgid "external ref='media/filechooserdialog_save.png' md5='3a7a3b71b9d3a36066857843b68ff27f'"
+msgstr "external ref='media/filechooserdialog_save.png' md5='3a7a3b71b9d3a36066857843b68ff27f'"
+
 #. (itstool) path: page/p
 #: C/filechooserdialog.py.page:27
 msgid ""
@@ -11352,6 +12598,16 @@ msgid ""
 "below)."
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/filechooserdialog.py.page:28
+msgctxt "_"
+msgid "external ref='media/filechooserdialog_menu.png' md5='8a75f04127a70eba0ed68a9eb1d3bbca'"
+msgstr "external ref='media/filechooserdialog_menu.png' md5='8a75f04127a70eba0ed68a9eb1d3bbca'"
+
 #. (itstool) path: page/p
 #: C/filechooserdialog.py.page:29
 msgid "It is also possible to call a FileChooserDialog to open a new document."
@@ -12453,7 +13709,6 @@ msgstr ""
 
 #. (itstool) path: section/title
 #: C/filechooserdialog.vala.page:35 C/menubar.vala.page:187
-#| msgid "Reference Implementation"
 msgid "Relevant API documentation"
 msgstr "Relevante API-Dokumentation"
 
@@ -12477,20 +13732,8 @@ msgstr "<link href=\"http://valadoc.org/gtk+-3.0/Gtk.Builder.html\";>Gtk.Builder<
 msgid "<link href=\"http://valadoc.org/gio-2.0/GLib.ActionEntry.html\";>GLib.ActionEntry</link>"
 msgstr "<link href=\"http://valadoc.org/gio-2.0/GLib.ActionEntry.html\";>GLib.ActionEntry</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/fontchooserwidget.js.page:23 C/fontchooserwidget.py.page:25 C/fontchooserwidget.vala.page:23
-msgctxt "_"
-msgid "external ref='media/fontchooserwidget.png' md5='9161245e307b432ae1313e9a9941edae'"
-msgstr "external ref='media/fontchooserwidget.png' md5='9161245e307b432ae1313e9a9941edae'"
-
 #. (itstool) path: info/title
 #: C/fontchooserwidget.js.page:8
-#| msgctxt "text"
-#| msgid "Grid (JavaScript)"
 msgctxt "text"
 msgid "FontChooserWidget (JavaScript)"
 msgstr "FontChooserWidget (JavaScript)"
@@ -12505,6 +13748,16 @@ msgstr ""
 msgid "FontChooserWidget"
 msgstr "FontChooserWidget"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/fontchooserwidget.js.page:23 C/fontchooserwidget.py.page:25 C/fontchooserwidget.vala.page:23
+msgctxt "_"
+msgid "external ref='media/fontchooserwidget.png' md5='9161245e307b432ae1313e9a9941edae'"
+msgstr "external ref='media/fontchooserwidget.png' md5='9161245e307b432ae1313e9a9941edae'"
+
 #. (itstool) path: page/p
 #: C/fontchooserwidget.js.page:24 C/fontchooserwidget.py.page:26
 msgid "A FontChooserWidget with a callback function."
@@ -12513,36 +13766,97 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/fontchooserwidget.js.page:30
 #, no-wrap
+#| msgid ""
+#| "//!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const FontChooserWidgetExample = new Lang.Class ({\n"
+#| "    Name: 'Font Chooser Widget Example',\n"
+#| "\n"
+#| "    // Create the application itthis\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this.window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "        // Create the application window\n"
+#| "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                    title: \"FontChooserWidget\",\n"
+#| "                                                    default_width: 200,\n"
+#| "                                                    default_height: 200,\n"
+#| "                                                    border_width: 10 });\n"
+#| "\n"
+#| "        this.fontChooser = new Gtk.FontChooserWidget();\n"
+#| "        // a default font\n"
+#| "        this.fontChooser.set_font(\"Sans\");\n"
+#| "        // a text to preview the font\n"
+#| "        this.fontChooser.set_preview_text(\"This is an example of preview text!\");\n"
+#| "\n"
+#| "        // connect signal from the font chooser to the callback function\n"
+#| "        this.fontChooser.connect(\"notify::font\", Lang.bind(this, this._fontCb));\n"
+#| "\n"
+#| "        // add the font chooser to the window\n"
+#| "        this.window.add(this.fontChooser);\n"
+#| "        this.window.show_all();\n"
+#| "   },\n"
+#| "\n"
+#| "     // callback function:\n"
+#| "     _fontCb: function() {\n"
+#| "        // print in the terminal\n"
+#| "        print(\"You chose the font \" + this.fontChooser.get_font());\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new FontChooserWidgetExample();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "//!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const FontChooserWidgetExample = new Lang.Class ({\n"
-"    Name: 'Font Chooser Widget Example',\n"
+"class FontChooserWidgetExample {\n"
 "\n"
 "    // Create the application itthis\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
@@ -12558,19 +13872,19 @@ msgid ""
 "        this.fontChooser.set_preview_text(\"This is an example of preview text!\");\n"
 "\n"
 "        // connect signal from the font chooser to the callback function\n"
-"        this.fontChooser.connect(\"notify::font\", Lang.bind(this, this._fontCb));\n"
+"        this.fontChooser.connect(\"notify::font\", this._fontCb.bind(this));\n"
 "\n"
 "        // add the font chooser to the window\n"
 "        this.window.add(this.fontChooser);\n"
 "        this.window.show_all();\n"
-"   },\n"
+"   }\n"
 "\n"
 "     // callback function:\n"
-"     _fontCb: function() {\n"
+"     _fontCb() {\n"
 "        // print in the terminal\n"
 "        print(\"You chose the font \" + this.fontChooser.get_font());\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new FontChooserWidgetExample();\n"
@@ -12578,33 +13892,32 @@ msgid ""
 msgstr ""
 "//!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const FontChooserWidgetExample = new Lang.Class ({\n"
-"    Name: 'Font Chooser Widget Example',\n"
+"class FontChooserWidgetExample {\n"
 "\n"
 "    // Create the application itthis\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({ application_id: 'org.example.fontchooserwidget' });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
@@ -12620,19 +13933,19 @@ msgstr ""
 "        this.fontChooser.set_preview_text(\"This is an example of preview text!\");\n"
 "\n"
 "        // connect signal from the font chooser to the callback function\n"
-"        this.fontChooser.connect(\"notify::font\", Lang.bind(this, this._fontCb));\n"
+"        this.fontChooser.connect(\"notify::font\", this._fontCb.bind(this));\n"
 "\n"
 "        // add the font chooser to the window\n"
 "        this.window.add(this.fontChooser);\n"
 "        this.window.show_all();\n"
-"   },\n"
+"   }\n"
 "\n"
 "     // callback function:\n"
-"     _fontCb: function() {\n"
+"     _fontCb() {\n"
 "        // print in the terminal\n"
 "        print(\"You chose the font \" + this.fontChooser.get_font());\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new FontChooserWidgetExample();\n"
@@ -12653,45 +13966,6 @@ msgstr "FontChooserWidget (Python)"
 #. (itstool) path: section/code
 #: C/fontchooserwidget.py.page:32
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -12904,16 +14178,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.FontChooserWidget.html\";>GtkFontChooserWidget</link>"
 msgstr "<link 
href=\"http://www.valadoc.org/gtk+-3.0/Gtk.FontChooserWidget.html\";>GtkFontChooserWidget</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/gmenu.c.page:22
-msgctxt "_"
-msgid "external ref='media/gmenu.c.png' md5='f305fc3cae8d16d72b734ee53b559e33'"
-msgstr "external ref='media/gmenu.c.png' md5='f305fc3cae8d16d72b734ee53b559e33'"
-
 #. (itstool) path: info/title
 #: C/gmenu.c.page:8
 msgctxt "text"
@@ -12930,6 +14194,16 @@ msgstr ""
 msgid "GMenu"
 msgstr "GMenu"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/gmenu.c.page:22
+msgctxt "_"
+msgid "external ref='media/gmenu.c.png' md5='f305fc3cae8d16d72b734ee53b559e33'"
+msgstr "external ref='media/gmenu.c.png' md5='f305fc3cae8d16d72b734ee53b559e33'"
+
 #. (itstool) path: page/p
 #: C/gmenu.c.page:23 C/gmenu.js.page:23 C/gmenu.py.page:31 C/gmenu.vala.page:32
 msgid "A GtkApplication with a simple GMenu and SimpleActions"
@@ -13077,7 +14351,13 @@ msgstr ""
 "  return status;\n"
 "}\n"
 
-#. (itstool) path: media
+#. (itstool) path: info/title
+#: C/gmenu.js.page:8
+msgctxt "text"
+msgid "GMenu (JavaScript)"
+msgstr "GMenu (JavaScript)"
+
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -13087,40 +14367,124 @@ msgctxt "_"
 msgid "external ref='media/gmenu.js.png' md5='16b8bee122197771ec8498dac42f196b'"
 msgstr "external ref='media/gmenu.js.png' md5='16b8bee122197771ec8498dac42f196b'"
 
-#. (itstool) path: info/title
-#: C/gmenu.js.page:8
-msgctxt "text"
-msgid "GMenu (JavaScript)"
-msgstr "GMenu (JavaScript)"
-
 #. (itstool) path: page/code
 #: C/gmenu.js.page:25
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const Application = new Lang.Class ({\n"
+#| "    Name: 'Application',\n"
+#| "\n"
+#| "    //create the application\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.myapp',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "       //connect to 'activate' and 'startup' signals to the callback functions\n"
+#| "       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the UI (in this case it's just the ApplicationWindow\n"
+#| "    _buildUI: function() {\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"Welcome to GNOME\" });\n"
+#| "\n"
+#| "        //uncommenting the line below will change the window size\n"
+#| "        //this._window.set_default_size(600, 400);\n"
+#| "\n"
+#| "        //show the window and all child widgets (none in this case)\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    _showNew: function() {\n"
+#| "    print (\"This doesn't do anything. It is only a demonstration.\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _showAbout: function() {\n"
+#| "        print (\"No AboutDialog here.  This is only a demonstration.\");\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the menu items and connect the signals to the callback functions.\n"
+#| "    _initMenus: function() {\n"
+#| "        let menu = new Gio.Menu();\n"
+#| "        menu.append(\"New\",'app.new');\n"
+#| "        menu.append(\"About\", 'app.about');\n"
+#| "        menu.append(\"Quit\",'app.quit');\n"
+#| "        this.application.set_app_menu(menu);\n"
+#| "\n"
+#| "        let newAction = new Gio.SimpleAction ({ name: 'new' });\n"
+#| "        newAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showNew();\n"
+#| "            }));\n"
+#| "        this.application.add_action(newAction);\n"
+#| "\n"
+#| "        let aboutAction = new Gio.SimpleAction ({ name: 'about' });\n"
+#| "        aboutAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showAbout();\n"
+#| "            }));\n"
+#| "        this.application.add_action(aboutAction);\n"
+#| "\n"
+#| "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
+#| "        quitAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._window.destroy();\n"
+#| "            }));\n"
+#| "         this.application.add_action(quitAction);\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'activate' signal\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'startup' signal\n"
+#| "    _onStartup: function() {\n"
+#| "        //You must call _initMenus() before calling _buildUI().\n"
+#| "        this._initMenus();\n"
+#| "        this._buildUI();\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "//run the application\n"
+#| "let app = new Application ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
 "                                                   title: \"Welcome to GNOME\" });\n"
@@ -13130,18 +14494,18 @@ msgid ""
 "\n"
 "        //show the window and all child widgets (none in this case)\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _showNew: function() {\n"
-"    print (\"This doesn't do anything. It is only a demonstration.\");\n"
-"    },\n"
+"    _showNew() {\n"
+"        print(\"This doesn't do anything. It is only a demonstration.\");\n"
+"    }\n"
 "\n"
-"    _showAbout: function() {\n"
-"        print (\"No AboutDialog here.  This is only a demonstration.\");\n"
-"    },\n"
+"    _showAbout() {\n"
+"        print(\"No AboutDialog here.  This is only a demonstration.\");\n"
+"    }\n"
 "\n"
 "    //create the menu items and connect the signals to the callback functions.\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"New\",'app.new');\n"
 "        menu.append(\"About\", 'app.about');\n"
@@ -13149,39 +14513,30 @@ msgid ""
 "        this.application.set_app_menu(menu);\n"
 "\n"
 "        let newAction = new Gio.SimpleAction ({ name: 'new' });\n"
-"        newAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showNew();\n"
-"            }));\n"
+"        newAction.connect('activate', () =&gt; { this._showNew(); });\n"
 "        this.application.add_action(newAction);\n"
 "\n"
 "        let aboutAction = new Gio.SimpleAction ({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "         this.application.add_action(quitAction);\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        //You must call _initMenus() before calling _buildUI().\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application ();\n"
@@ -13189,28 +14544,28 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
 "                                                   title: \"Welcome to GNOME\" });\n"
@@ -13220,18 +14575,18 @@ msgstr ""
 "\n"
 "        //show the window and all child widgets (none in this case)\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _showNew: function() {\n"
-"    print (\"This doesn't do anything. It is only a demonstration.\");\n"
-"    },\n"
+"    _showNew() {\n"
+"        print(\"This doesn't do anything. It is only a demonstration.\");\n"
+"    }\n"
 "\n"
-"    _showAbout: function() {\n"
-"        print (\"No AboutDialog here.  This is only a demonstration.\");\n"
-"    },\n"
+"    _showAbout() {\n"
+"        print(\"No AboutDialog here.  This is only a demonstration.\");\n"
+"    }\n"
 "\n"
 "    //create the menu items and connect the signals to the callback functions.\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"New\",'app.new');\n"
 "        menu.append(\"About\", 'app.about');\n"
@@ -13239,54 +14594,35 @@ msgstr ""
 "        this.application.set_app_menu(menu);\n"
 "\n"
 "        let newAction = new Gio.SimpleAction ({ name: 'new' });\n"
-"        newAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showNew();\n"
-"            }));\n"
+"        newAction.connect('activate', () =&gt; { this._showNew(); });\n"
 "        this.application.add_action(newAction);\n"
 "\n"
 "        let aboutAction = new Gio.SimpleAction ({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "         this.application.add_action(quitAction);\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        //You must call _initMenus() before calling _buildUI().\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application ();\n"
 "app.application.run (ARGV);\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/gmenu.py.page:30
-msgctxt "_"
-msgid "external ref='media/gmenu.py.png' md5='52c68b34d5d566f37e9f803dedb6353a'"
-msgstr "external ref='media/gmenu.py.png' md5='52c68b34d5d566f37e9f803dedb6353a'"
-
 #. (itstool) path: info/title
 #: C/gmenu.py.page:8
 msgctxt "text"
@@ -13298,6 +14634,16 @@ msgstr "GMenu (Python)"
 msgid "A simple implementation of GMenu"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/gmenu.py.page:30
+msgctxt "_"
+msgid "external ref='media/gmenu.py.png' md5='52c68b34d5d566f37e9f803dedb6353a'"
+msgstr "external ref='media/gmenu.py.png' md5='52c68b34d5d566f37e9f803dedb6353a'"
+
 #. (itstool) path: section/code
 #: C/gmenu.py.page:37
 #, no-wrap
@@ -13593,7 +14939,13 @@ msgstr "<link href=\"http://developer.gnome.org/glib/unstable/glib-GVariantType.
 msgid "<link href=\"http://developer.gnome.org/glib/unstable/glib-GVariant.html\";>GVariant</link>"
 msgstr "<link href=\"http://developer.gnome.org/glib/unstable/glib-GVariant.html\";>GVariant</link>"
 
-#. (itstool) path: media
+#. (itstool) path: info/title
+#: C/gmenu.vala.page:8
+msgctxt "text"
+msgid "GMenu (Vala)"
+msgstr "GMenu (Vala)"
+
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -13603,12 +14955,6 @@ msgctxt "_"
 msgid "external ref='media/gmenu.vala.png' md5='7a9f381fc3ed5bf8d1c50d2acb095400'"
 msgstr "external ref='media/gmenu.vala.png' md5='7a9f381fc3ed5bf8d1c50d2acb095400'"
 
-#. (itstool) path: info/title
-#: C/gmenu.vala.page:8
-msgctxt "text"
-msgid "GMenu (Vala)"
-msgstr "GMenu (Vala)"
-
 #. (itstool) path: note/p
 #: C/gmenu.vala.page:30
 msgid "<em style=\"strong\">You need to be running GTK+-3.4 or later for this to work</em>"
@@ -13760,16 +15106,6 @@ msgstr "<link href=\"http://www.valadoc.org/gio-2.0/GLib.SimpleAction.html\";>Sim
 msgid "<link href=\"http://www.valadoc.org/gio-2.0/GLib.ActionMap.add_action.html\";>add_action</link>"
 msgstr "<link href=\"http://www.valadoc.org/gio-2.0/GLib.ActionMap.add_action.html\";>add_action</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/grid.c.page:23 C/grid.js.page:26 C/grid.vala.page:24
-msgctxt "_"
-msgid "external ref='media/grid.png' md5='27d45da115401127456a3b854dcfc5be'"
-msgstr "external ref='media/grid.png' md5='27d45da115401127456a3b854dcfc5be'"
-
 #. (itstool) path: info/title
 #: C/grid.c.page:8
 msgctxt "text"
@@ -13786,6 +15122,16 @@ msgstr "Widgets in Zeilen und Spalten anordnen"
 msgid "Grid"
 msgstr "Grid"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/grid.c.page:23 C/grid.js.page:26 C/grid.vala.page:24
+msgctxt "_"
+msgid "external ref='media/grid.png' md5='27d45da115401127456a3b854dcfc5be'"
+msgstr "external ref='media/grid.png' md5='27d45da115401127456a3b854dcfc5be'"
+
 #. (itstool) path: page/p
 #: C/grid.c.page:24 C/grid.vala.page:25
 msgid "A button widget connected to a progress bar."
@@ -13954,45 +15300,115 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/grid.js.page:29
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const GridExample = new Lang.Class ({\n"
+#| "    Name: 'Grid Example',\n"
+#| "\n"
+#| "    /* Create the application itself\n"
+#| "       This boilerplate code is needed to build any GTK+ application. */\n"
+#| "        _init: function () {\n"
+#| "            this.application = new Gtk.Application ({\n"
+#| "                application_id: 'org.example.jsgrid',\n"
+#| "                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "            });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                         window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                         title: \"Grid Example\"});\n"
+#| "\n"
+#| "        // Create the grid\n"
+#| "        this.Grid = new Gtk.Grid ();\n"
+#| "\n"
+#| "        // Create the widgets inside the grid\n"
+#| "        this.progressBar = new Gtk.ProgressBar ();\n"
+#| "        this.Button = new Gtk.Button ({ label: \"Button\" });\n"
+#| "        this.Button.connect (\"clicked\", Lang.bind(this, this._clickHandler));\n"
+#| "\n"
+#| "        // Assemble the grid\n"
+#| "        this._window.add (this.Grid);\n"
+#| "        this.Grid.attach (this.Button, 1, 1, 1, 1);\n"
+#| "        this.Grid.attach_next_to (this.progressBar, this.Button, Gtk.PositionType.BOTTOM, 1, 1);\n"
+#| "\n"
+#| "                // Show the window and all child widgets\n"
+#| "                this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Here's the function that says what happens when the button is clicked\n"
+#| "    _clickHandler: function () {\n"
+#| "        this.progressBar.pulse ();\n"
+#| "    }\n"
+#| "\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new GridExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const GridExample = new Lang.Class ({\n"
-"    Name: 'Grid Example',\n"
+"class GridExample {\n"
 "\n"
 "    /* Create the application itself\n"
 "       This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jsgrid',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsgrid',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -14005,7 +15421,7 @@ msgid ""
 "        // Create the widgets inside the grid\n"
 "        this.progressBar = new Gtk.ProgressBar ();\n"
 "        this.Button = new Gtk.Button ({ label: \"Button\" });\n"
-"        this.Button.connect (\"clicked\", Lang.bind(this, this._clickHandler));\n"
+"        this.Button.connect (\"clicked\", this._clickHandler.bind(this));\n"
 "\n"
 "        // Assemble the grid\n"
 "        this._window.add (this.Grid);\n"
@@ -14014,15 +15430,15 @@ msgid ""
 "\n"
 "                // Show the window and all child widgets\n"
 "                this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Here's the function that says what happens when the button is clicked\n"
-"    _clickHandler: function () {\n"
+"    _clickHandler() {\n"
 "        this.progressBar.pulse ();\n"
 "    }\n"
 "\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GridExample ();\n"
@@ -14030,42 +15446,39 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const GridExample = new Lang.Class ({\n"
-"    Name: 'Grid Example',\n"
+"class GridExample {\n"
 "\n"
 "    /* Create the application itself\n"
 "       This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jsgrid',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsgrid',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -14078,7 +15491,7 @@ msgstr ""
 "        // Create the widgets inside the grid\n"
 "        this.progressBar = new Gtk.ProgressBar ();\n"
 "        this.Button = new Gtk.Button ({ label: \"Button\" });\n"
-"        this.Button.connect (\"clicked\", Lang.bind(this, this._clickHandler));\n"
+"        this.Button.connect (\"clicked\", this._clickHandler.bind(this));\n"
 "\n"
 "        // Assemble the grid\n"
 "        this._window.add (this.Grid);\n"
@@ -14087,15 +15500,15 @@ msgstr ""
 "\n"
 "                // Show the window and all child widgets\n"
 "                this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Here's the function that says what happens when the button is clicked\n"
-"    _clickHandler: function () {\n"
+"    _clickHandler() {\n"
 "        this.progressBar.pulse ();\n"
 "    }\n"
 "\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new GridExample ();\n"
@@ -14111,7 +15524,13 @@ msgstr "<link href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Grid.html
 msgid "<link 
href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.ProgressBar.html\";>Gtk.ProgressBar</link>"
 msgstr "<link 
href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.ProgressBar.html\";>Gtk.ProgressBar</link>"
 
-#. (itstool) path: media
+#. (itstool) path: info/title
+#: C/grid.py.page:8
+msgctxt "text"
+msgid "Grid (Python)"
+msgstr "Grid (Python)"
+
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -14121,12 +15540,6 @@ msgctxt "_"
 msgid "external ref='media/grid_simple.png' md5='c806f2e69b30373d4d2e08b41d6cc1f6'"
 msgstr "external ref='media/grid_simple.png' md5='c806f2e69b30373d4d2e08b41d6cc1f6'"
 
-#. (itstool) path: info/title
-#: C/grid.py.page:8
-msgctxt "text"
-msgid "Grid (Python)"
-msgstr "Grid (Python)"
-
 #. (itstool) path: page/p
 #: C/grid.py.page:32
 msgid "Some labels in a grid."
@@ -14135,45 +15548,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/grid.py.page:38
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -14426,18 +15800,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Grid.html\";>Gtk.Grid</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Grid.html\";>Gtk.Grid</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/GtkApplicationWindow.c.page:22 C/GtkApplicationWindow.js.page:22 C/GtkApplicationWindow.py.page:29
-#: C/GtkApplicationWindow.vala.page:22 C/window.c.page:22 C/window.js.page:25 C/window.py.page:33
-#: C/window.vala.page:25
-msgctxt "_"
-msgid "external ref='media/window.png' md5='eb0cde3530978619c25bddfaeb453345'"
-msgstr "external ref='media/window.png' md5='eb0cde3530978619c25bddfaeb453345'"
-
 #. (itstool) path: info/title
 #: C/GtkApplicationWindow.c.page:8
 msgctxt "text"
@@ -14455,6 +15817,19 @@ msgstr ""
 msgid "ApplicationWindow"
 msgstr "ApplicationWindow"
 
+#. (itstool) path: page/media
+#. (itstool) path: td/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/GtkApplicationWindow.c.page:22 C/GtkApplicationWindow.js.page:22 C/GtkApplicationWindow.py.page:29
+#: C/GtkApplicationWindow.vala.page:22 C/window.c.page:22 C/window.js.page:25 C/window.py.page:33
+#: C/window.vala.page:25
+msgctxt "_"
+msgid "external ref='media/window.png' md5='eb0cde3530978619c25bddfaeb453345'"
+msgstr "external ref='media/window.png' md5='eb0cde3530978619c25bddfaeb453345'"
+
 #. (itstool) path: page/p
 #: C/GtkApplicationWindow.c.page:23
 msgid "A minimal GtkApplication with a GtkApplicationWindow"
@@ -14540,33 +15915,84 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/GtkApplicationWindow.js.page:25
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const Application = new Lang.Class ({\n"
+#| "    Name: 'Application',\n"
+#| "\n"
+#| "    //create the application\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.myapp',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "       //connect to 'activate' and 'startup' signals to the callback functions\n"
+#| "       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the UI (in this case it's just the ApplicationWindow\n"
+#| "    _buildUI: function () {\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"Welcome to GNOME\" });\n"
+#| "\n"
+#| "        //uncommenting the line below will change the window size\n"
+#| "        //this._window.set_default_size(600, 400);\n"
+#| "\n"
+#| "        //show the window and all child widgets (none in this case)\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'activate' signal\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'startup' signal\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "//run the application\n"
+#| "let app = new Application ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow\n"
-"    _buildUI: function () {\n"
-"        this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+"    _buildUI() {\n"
+"        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
 "                                                   title: \"Welcome to GNOME\" });\n"
 "\n"
@@ -14575,18 +16001,18 @@ msgid ""
 "\n"
 "        //show the window and all child widgets (none in this case)\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application ();\n"
@@ -14595,29 +16021,29 @@ msgstr ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow\n"
-"    _buildUI: function () {\n"
-"        this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+"    _buildUI() {\n"
+"        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
 "                                                   title: \"Welcome to GNOME\" });\n"
 "\n"
@@ -14626,18 +16052,18 @@ msgstr ""
 "\n"
 "        //show the window and all child widgets (none in this case)\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application ();\n"
@@ -14773,38 +16199,6 @@ msgstr ""
 msgid "<link 
href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Application.html.content.tpl\";>Gtk.Application</link>"
 msgstr "<link 
href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Application.html.content.tpl\";>Gtk.Application</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/guitar-tuner.c.page:45 C/guitar-tuner.cpp.page:43 C/guitar-tuner.js.page:37 C/guitar-tuner.py.page:50
-#: C/guitar-tuner.vala.page:48
-msgctxt "_"
-msgid "external ref='media/guitar-tuner.png' md5='35e615e0f5e293671d00c5c414ac2f6b'"
-msgstr "external ref='media/guitar-tuner.png' md5='35e615e0f5e293671d00c5c414ac2f6b'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/guitar-tuner.c.page:100 C/guitar-tuner.cpp.page:94 C/guitar-tuner.py.page:101 
C/guitar-tuner.vala.page:101
-msgctxt "_"
-msgid "external ref='media/guitar-tuner-glade.png' md5='f6606525443ab2160f53a87a454364d0'"
-msgstr "@@image: 'media/guitar-tuner-glade.png'; md5=f6606525443ab2160f53a87a454364d0"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/guitar-tuner.c.page:145 C/guitar-tuner.cpp.page:123 C/guitar-tuner.js.page:43 C/guitar-tuner.py.page:144
-#: C/guitar-tuner.vala.page:135
-msgctxt "_"
-msgid "external ref='media/guitar-tuner-pipeline.png' md5='5adc952909d92af5dae6954781b4ad5f'"
-msgstr "@@image: 'media/guitar-tuner-pipeline.png'; md5=5adc952909d92af5dae6954781b4ad5f"
-
 #. (itstool) path: info/title
 #: C/guitar-tuner.c.page:8
 msgctxt "text"
@@ -14871,6 +16265,17 @@ msgstr ""
 msgid "Basic knowledge of the C programming language"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/guitar-tuner.c.page:45 C/guitar-tuner.cpp.page:43 C/guitar-tuner.js.page:37 C/guitar-tuner.py.page:50
+#: C/guitar-tuner.vala.page:48
+msgctxt "_"
+msgid "external ref='media/guitar-tuner.png' md5='35e615e0f5e293671d00c5c414ac2f6b'"
+msgstr "external ref='media/guitar-tuner.png' md5='35e615e0f5e293671d00c5c414ac2f6b'"
+
 #. (itstool) path: section/title
 #: C/guitar-tuner.c.page:48 C/guitar-tuner.cpp.page:46 C/guitar-tuner.py.page:53 C/image-viewer.c.page:42
 #: C/image-viewer.cpp.page:40 C/image-viewer.js.page:50 C/image-viewer.py.page:49 C/image-viewer.vala.page:57
@@ -15016,6 +16421,16 @@ msgid ""
 "here to assign six <gui>GtkButtons</gui>, one for each of the six guitar strings."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/guitar-tuner.c.page:100 C/guitar-tuner.cpp.page:94 C/guitar-tuner.py.page:101 
C/guitar-tuner.vala.page:101
+msgctxt "_"
+msgid "external ref='media/guitar-tuner-glade.png' md5='f6606525443ab2160f53a87a454364d0'"
+msgstr "external ref='media/guitar-tuner-glade.png' md5='f6606525443ab2160f53a87a454364d0'"
+
 #. (itstool) path: item/p
 #: C/guitar-tuner.c.page:104 C/guitar-tuner.cpp.page:98 C/guitar-tuner.py.page:105
 msgid ""
@@ -15137,6 +16552,17 @@ msgid ""
 "on. Each element of the pipeline has properties which can be used to change its behaviour."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/guitar-tuner.c.page:145 C/guitar-tuner.cpp.page:123 C/guitar-tuner.js.page:43 C/guitar-tuner.py.page:144
+#: C/guitar-tuner.vala.page:135
+msgctxt "_"
+msgid "external ref='media/guitar-tuner-pipeline.png' md5='5adc952909d92af5dae6954781b4ad5f'"
+msgstr "external ref='media/guitar-tuner-pipeline.png' md5='5adc952909d92af5dae6954781b4ad5f'"
+
 #. (itstool) path: media/p
 #: C/guitar-tuner.c.page:146 C/guitar-tuner.cpp.page:124 C/guitar-tuner.js.page:44 C/guitar-tuner.py.page:145
 #: C/guitar-tuner.vala.page:136
@@ -15435,7 +16861,7 @@ msgstr ""
 #: C/guitar-tuner.c.page:256 C/guitar-tuner.cpp.page:255 C/guitar-tuner.vala.page:253 
C/image-viewer.c.page:222
 #: C/image-viewer.cpp.page:210 C/image-viewer.vala.page:280 C/photo-wall.c.page:392
 msgid "Build and run the application"
-msgstr ""
+msgstr "Die Anwendung erstellen und ausführen"
 
 #. (itstool) path: section/p
 #: C/guitar-tuner.c.page:257 C/guitar-tuner.vala.page:254 C/image-viewer.c.page:223 
C/image-viewer.cpp.page:211
@@ -15936,7 +17362,6 @@ msgstr ""
 
 #. (itstool) path: item/p
 #: C/guitar-tuner.js.page:25
-#| msgid "An example GStreamer pipeline."
 msgid "<link xref=\"#gstreamer\">GStreamer pipelines</link>"
 msgstr "<link xref=\"#gstreamer\">GStreamer-Weiterleitungen</link>"
 
@@ -17321,16 +18746,6 @@ msgid ""
 "link>"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/hellognome.js.page:65
-msgctxt "_"
-msgid "external ref='media/hellognomewebapp.png' md5='948efb6148ede3bc6b47b4b0bbe4a74f'"
-msgstr "external ref='media/hellognomewebapp.png' md5='948efb6148ede3bc6b47b4b0bbe4a74f'"
-
 #. (itstool) path: info/desc
 #: C/hellognome.js.page:17
 msgid "Your first GNOME application!"
@@ -17369,11 +18784,42 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/hellognome.js.page:32
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "&lt;!DOCTYPE html&gt;\n"
+#| "&lt;html&gt;\n"
+#| "    &lt;head&gt;\n"
+#| "        &lt;title&gt;Hello, GNOME!&lt;/title&gt;\n"
+#| "\n"
+#| "        &lt;!-- Use JavaScript to show a greeting when someone clicks the button --&gt;\n"
+#| "        &lt;script type=\"application/javascript\"&gt;\n"
+#| "        function greeting () {\n"
+#| "            document.getElementById (\"greeting\").innerHTML = (\"O hai!\");\n"
+#| "        }\n"
+#| "        &lt;/script&gt;\n"
+#| "\n"
+#| "        &lt;!-- Very basic CSS style using the GNOME font --&gt;\n"
+#| "        &lt;style type=\"text/css\"&gt;\n"
+#| "            body {\n"
+#| "                font-face: Cantarell, sans-serif;\n"
+#| "                text-align: center; }\n"
+#| "        &lt;/style&gt;\n"
+#| "\n"
+#| "    &lt;/head&gt;\n"
+#| "    &lt;body&gt;\n"
+#| "        &lt;br /&gt; &lt;br /&gt;\n"
+#| "        &lt;button type=\"button\" onclick=\"greeting()\"&gt;Hello, GNOME!&lt;/button&gt;\n"
+#| "\n"
+#| "        &lt;!-- Empty H1 element gets filled in when the button is clicked --&gt;\n"
+#| "        &lt;h1 id=\"greeting\"&gt;&lt;/h1&gt;\n"
+#| "    &lt;/body&gt;\n"
+#| "&lt;/html&gt;\n"
 msgid ""
 "\n"
 "&lt;!DOCTYPE html&gt;\n"
 "&lt;html&gt;\n"
 "    &lt;head&gt;\n"
+"        &lt;meta charset=\"utf-8\"&gt;\n"
 "        &lt;title&gt;Hello, GNOME!&lt;/title&gt;\n"
 "\n"
 "        &lt;!-- Use JavaScript to show a greeting when someone clicks the button --&gt;\n"
@@ -17404,6 +18850,7 @@ msgstr ""
 "&lt;!DOCTYPE html&gt;\n"
 "&lt;html&gt;\n"
 "    &lt;head&gt;\n"
+"        &lt;meta charset=\"utf-8\"&gt;\n"
 "        &lt;title&gt;Hello, GNOME!&lt;/title&gt;\n"
 "\n"
 "        &lt;!-- Use JavaScript to show a greeting when someone clicks the button --&gt;\n"
@@ -17431,12 +18878,22 @@ msgstr ""
 "&lt;/html&gt;\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:63
+#: C/hellognome.js.page:64
 msgid "Let's save this as <file>hellognome.html</file>, and see what it looks like when we run it!"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/hellognome.js.page:66
+msgctxt "_"
+msgid "external ref='media/hellognomewebapp.png' md5='948efb6148ede3bc6b47b4b0bbe4a74f'"
+msgstr "external ref='media/hellognomewebapp.png' md5='948efb6148ede3bc6b47b4b0bbe4a74f'"
+
 #. (itstool) path: section/p
-#: C/hellognome.js.page:67
+#: C/hellognome.js.page:68
 msgid ""
 "You <em>can</em> run the above code by opening <file>hellognome.html</file> in a web browser. But here, 
we're "
 "going to create a GNOME application that runs our web app inside of it, just like you see in the 
screenshot. "
@@ -17445,19 +18902,19 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:68
+#: C/hellognome.js.page:69
 msgid ""
 "The best part? We're going to continue to use JavaScript, to write all the parts that make our app work 
with "
 "GNOME. Let's look at the code, and see how it's done!"
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/hellognome.js.page:72
+#: C/hellognome.js.page:73
 msgid "Creating a GNOME window to frame our web app"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:74
+#: C/hellognome.js.page:75
 msgid ""
 "First, we need to tell GNOME that this is a JavaScript application, which uses gjs. Gjs is GNOME's way of 
turning "
 "your JavaScript code into instructions it understands, so this line always has to go at the start of your "
@@ -17465,7 +18922,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:75
+#: C/hellognome.js.page:76
 #, no-wrap
 msgid ""
 "\n"
@@ -17475,124 +18932,161 @@ msgstr ""
 "#!/usr/bin/gjs\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:78
+#: C/hellognome.js.page:79
+msgid "Then we should set the versions of the libraries we'll be using."
+msgstr ""
+
+#. (itstool) path: section/code
+#: C/hellognome.js.page:80
+#, no-wrap
+msgid ""
+"\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"imports.gi.versions.WebKit2 = '4.0';\n"
+msgstr ""
+
+#. (itstool) path: section/p
+#: C/hellognome.js.page:84
 msgid "After that, we need to tell GNOME which libraries we want to import."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:79
+#: C/hellognome.js.page:85
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "const Webkit = imports.gi.WebKit;\n"
 msgid ""
 "\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"const Webkit = imports.gi.WebKit;\n"
+"const Webkit = imports.gi.WebKit2;\n"
 msgstr ""
 "\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"const Webkit = imports.gi.WebKit;\n"
+"const Webkit = imports.gi.WebKit2;\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:85
+#: C/hellognome.js.page:90
 msgid ""
 "Just like how add-on libraries like jQuery let us do extra things with JavaScript, each of these libraries 
gives "
 "us new capabilities for our GNOME apps:"
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/hellognome.js.page:87
+#: C/hellognome.js.page:92
 msgid ""
-"<file>Gtk</file> and <file>Lang</file> are basic parts of any GNOME application, which let you create 
windows and "
-"widgets and tie them together."
+"<file>Gtk</file> is the basic part of any GNOME application, which lets you create windows and widgets and 
tie "
+"them together."
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/hellognome.js.page:88
+#: C/hellognome.js.page:93
 msgid ""
 "<file>GLib</file> is a helper library, which lets us do things like tell GNOME where the 
<file>hellognome.html</"
 "file> file we created is."
 msgstr ""
 
 #. (itstool) path: item/p
-#: C/hellognome.js.page:89
+#: C/hellognome.js.page:94
 msgid ""
 "And <file>Webkit</file> is a web rendering engine, which we'll use to basically create a browser window to 
open "
 "our HTML file with."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:92
+#: C/hellognome.js.page:97
 msgid "Now we create the application itself:"
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:93
+#: C/hellognome.js.page:98
 #, no-wrap
+#| msgid "1. Hello, GNOME!"
 msgid ""
 "\n"
-"const HelloGNOME = new Lang.Class ({\n"
-"    Name: 'Hello GNOME',\n"
+"class HelloGNOME {\n"
 msgstr ""
 "\n"
-"const HelloGNOME = new Lang.Class ({\n"
-"    Name: 'Hello GNOME',\n"
+"class HelloGNOME {\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:97
+#: C/hellognome.js.page:101
 msgid ""
 "This will look familiar to you if you've worked with object-oriented JavaScript before. That's right; our 
whole "
-"application is a class called HelloGNOME. And as you can see, we've given it a property that says what its 
name is."
+"application is a class called HelloGNOME."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:99
+#: C/hellognome.js.page:103
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
 msgid ""
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ();\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 msgstr ""
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ();\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:119
+#: C/hellognome.js.page:123
 msgid ""
 "Here's some code you will more or less copy-and-paste for every JavaScript application you build. It 
creates a new "
 "Application, and then binds its activate and startup signals to functions that make the window show itself 
and "
@@ -17600,17 +19094,17 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:120
+#: C/hellognome.js.page:124
 msgid ""
 "What does that mean? Well, everything in a GNOME application sends out a signal when something important 
happens. "
 "A button might send out the clicked signal when you click on it, for instance. Our job is to connect the 
signals "
 "to functions which handle them, and make the things that we want to have happen occur. We do this using 
each "
-"object's connect method, which takes two arguments: The signal we want to handle, and the Lang.bind 
function, "
-"which we have to use to tell connect which function we want to have handle the signal."
+"object's connect method, which takes two arguments: The signal we want to handle, and the bound function, 
which we "
+"have to use to tell connect which function we want to have handle the signal."
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:121
+#: C/hellognome.js.page:125
 msgid ""
 "In this case, we want _onActivate to handle the activate signal, and _onStartup to handle the startup 
signal. "
 "_onActivate just tells the window to present itself; so basically, whenever you <keyseq><key>Alt</key> 
<key>Tab</"
@@ -17619,31 +19113,43 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/hellognome.js.page:122
+#: C/hellognome.js.page:126
 msgid ""
-"When you copy and paste the above code for your own applications, be sure to change the name to a unique 
one each "
-"time."
+"When you copy and paste the above code for your own applications, be sure to change the class name to a 
unique one "
+"each time."
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/hellognome.js.page:126
+#: C/hellognome.js.page:130
 msgid "Designing our window's UI"
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:127
+#: C/hellognome.js.page:131
 msgid ""
 "In the _buildUI function, we're going to tell GNOME about our window and the things inside it, one at a 
time. "
 "After that, we're going to connect everything together and put it all on display."
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:129
+#: C/hellognome.js.page:133
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            title: \"Welcome to GNOME\",\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER });\n"
 msgid ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -17655,7 +19161,7 @@ msgid ""
 msgstr ""
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -17666,7 +19172,7 @@ msgstr ""
 "            window_position: Gtk.WindowPosition.CENTER });\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:142
+#: C/hellognome.js.page:146
 msgid ""
 "The first object we create is an ApplicationWindow. It needs a title to go in the title bar, and its 
application "
 "property needs to be the application that we created, above. Beyond that, there are various ways of 
customizing "
@@ -17676,7 +19182,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:143
+#: C/hellognome.js.page:147
 #, no-wrap
 msgid ""
 "\n"
@@ -17696,7 +19202,7 @@ msgstr ""
 "            \"/hellognome.html\", null));\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:151
+#: C/hellognome.js.page:155
 msgid ""
 "Remember how we imported Webkit right at the start? Here we're creating a new instance of a Webkit class 
called a "
 "WebView, which is more or less a browser window you can put inside of your app. After that, we then give it 
the "
@@ -17704,7 +19210,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:152
+#: C/hellognome.js.page:156
 msgid ""
 "We <em>could</em> just give it a web URI, like <link href=\"http://gnome.org\";>http://gnome.org</link>. 
Instead, "
 "here we use a couple of GLib helper functions to tell the WebView where our <file>hellognome.html</file> 
file is. "
@@ -17714,7 +19220,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:153
+#: C/hellognome.js.page:157
 #, no-wrap
 msgid ""
 "\n"
@@ -17738,7 +19244,7 @@ msgstr ""
 "});\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:163
+#: C/hellognome.js.page:167
 msgid ""
 "Each window can hold one, and only one, widget. Normally, we'd use a container widget like a <link 
xref=\"grid.js"
 "\">Grid</link> to put multiple widgets into, then use the window's add function to add the Grid to it. 
Here, we "
@@ -17747,7 +19253,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:164
+#: C/hellognome.js.page:168
 #, no-wrap
 msgid ""
 "\n"
@@ -17761,17 +19267,17 @@ msgstr ""
 "app.application.run (ARGV);\n"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:169
+#: C/hellognome.js.page:173
 msgid "Finally, we create a new instance of our HelloGNOME class, and tell GNOME to run it."
 msgstr ""
 
 #. (itstool) path: section/title
-#: C/hellognome.js.page:173
+#: C/hellognome.js.page:177
 msgid "Running your GNOME application"
 msgstr "Ihre GNOME-Anwendung ausführen"
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:175
+#: C/hellognome.js.page:179
 msgid ""
 "Now that we've created our first GNOME application, it's time to test it out! You don't need to compile 
your app "
 "or install any special software for this; GNOME has gjs built in, to let it run GNOME Shell. Just save "
@@ -17781,31 +19287,31 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/screen
-#: C/hellognome.js.page:176
+#: C/hellognome.js.page:180
 #, no-wrap
 msgid " <output style=\"prompt\">$ </output>gjs hellognome.js "
 msgstr " <output style=\"prompt\">$ </output>gjs hellognome.js "
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:177
+#: C/hellognome.js.page:181
 msgid ""
 "You should see more or less the same screenshot as before, with a button that you can click to make a short 
"
 "message appear."
 msgstr ""
 
 #. (itstool) path: note/p
-#: C/hellognome.js.page:180
+#: C/hellognome.js.page:184
 msgid "You can use the terminal command"
 msgstr ""
 
 #. (itstool) path: note/screen
-#: C/hellognome.js.page:181
+#: C/hellognome.js.page:185
 #, no-wrap
 msgid " <output style=\"prompt\">$ </output>cd <var>(directory name)</var> "
 msgstr " <output style=\"prompt\">$ </output>cd <var>(Ordnername)</var> "
 
 #. (itstool) path: note/p
-#: C/hellognome.js.page:182
+#: C/hellognome.js.page:186
 msgid ""
 "to navigate between directories inside the Terminal, in order to get to where you saved the files. There is 
also "
 "an extension for Nautilus, GNOME's file manager, which lets you right-click anywhere inside it to open a 
terminal "
@@ -17814,7 +19320,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:189
+#: C/hellognome.js.page:193
 msgid ""
 "<link xref=\"02_welcome_to_the_grid.js\">Continue on to the next tutorial</link> to learn how to build 
\"native\" "
 "GNOME applications that look and feel like the others, instead of a webview with HTML code inside. Or take 
a look "
@@ -17823,7 +19329,7 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/p
-#: C/hellognome.js.page:190
+#: C/hellognome.js.page:194
 msgid ""
 "Finally, if you want to just build GNOME applications using JavaScript libraries designed for the web, you 
can "
 "basically stop here and go do that! Check out <link xref=\"beginner.js#tutorials\">the later 
tutorials</link> if "
@@ -17832,40 +19338,101 @@ msgid ""
 msgstr ""
 
 #. (itstool) path: section/code
-#: C/hellognome.js.page:195
+#: C/hellognome.js.page:199
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "const Webkit = imports.gi.WebKit;\n"
+#| "\n"
+#| "const HelloGNOME = new Lang.Class ({\n"
+#| "    Name: 'Hello GNOME',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ();\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            title: \"Welcome to GNOME\",\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER });\n"
+#| "\n"
+#| "        // Create a webview to show the web app\n"
+#| "        this._webView = new Webkit.WebView ();\n"
+#| "\n"
+#| "        // Put the web app into the webview\n"
+#| "        this._webView.load_uri (GLib.filename_to_uri (GLib.get_current_dir() +\n"
+#| "            \"/hellognome.html\", null));\n"
+#| "\n"
+#| "        // Put the webview into the window\n"
+#| "        this._window.add (this._webView);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new HelloGNOME ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"imports.gi.versions.WebKit2 = '4.0';\n"
+"\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"const Webkit = imports.gi.WebKit;\n"
+"const Webkit = imports.gi.WebKit2;\n"
 "\n"
-"const HelloGNOME = new Lang.Class ({\n"
-"    Name: 'Hello GNOME',\n"
+"class HelloGNOME {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -17887,9 +19454,9 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new HelloGNOME ();\n"
@@ -17897,35 +19464,36 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"imports.gi.versions.WebKit2 = '4.0';\n"
+"\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"const Webkit = imports.gi.WebKit;\n"
+"const Webkit = imports.gi.WebKit2;\n"
 "\n"
-"const HelloGNOME = new Lang.Class ({\n"
-"    Name: 'Hello GNOME',\n"
+"class HelloGNOME {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application ();\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -17947,26 +19515,14 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new HelloGNOME ();\n"
 "app.application.run (ARGV);\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/hello-world.c.page:51 C/hello-world.js.page:28 C/hello-world.py.page:28 C/hello-world.vala.page:28
-#| msgctxt "_"
-#| msgid "external ref='media/helloWorld.png' md5='4c88a27211dfd1b33e504c9f78602f2d'"
-msgctxt "_"
-msgid "external ref='media/hello-world.png' md5='4c88a27211dfd1b33e504c9f78602f2d'"
-msgstr "external ref='media/hello-world.png' md5='4c88a27211dfd1b33e504c9f78602f2d'"
-
 #. (itstool) path: info/title
 #: C/hello-world.c.page:10
 msgctxt "link"
@@ -18003,32 +19559,6 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/hello-world.c.page:39
 #, no-wrap
-#| msgid ""
-#| "#include &lt;gtk/gtk.h&gt;\n"
-#| "\n"
-#| "static void\n"
-#| "activate (GtkApplication *app,\n"
-#| "          gpointer        user_data)\n"
-#| "{\n"
-#| "  GtkWidget *window;\n"
-#| "\n"
-#| "  window = gtk_application_window_new (app);\n"
-#| "  gtk_window_set_title (GTK_WINDOW (window), \"Hello GNOME\");\n"
-#| "  gtk_widget_show_all (window);\n"
-#| "}\n"
-#| "\n"
-#| "int\n"
-#| "main (int argc, char **argv)\n"
-#| "{\n"
-#| "  GtkApplication *app;\n"
-#| "  int status;\n"
-#| "\n"
-#| "  app = gtk_application_new (\"org.gtk.example\", G_APPLICATION_FLAGS_NONE);\n"
-#| "  g_signal_connect (app, \"activate\", G_CALLBACK (activate), NULL);\n"
-#| "  status = g_application_run (G_APPLICATION (app), argc, argv);\n"
-#| "  g_object_unref (app);\n"
-#| "  return status;\n"
-#| "}\n"
 msgid ""
 "\n"
 "    #include &lt;gtk/gtk.h&gt;\n"
@@ -18110,6 +19640,16 @@ msgid ""
 "a dialog window similar to what can be seen below:"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/hello-world.c.page:51 C/hello-world.js.page:28 C/hello-world.py.page:28 C/hello-world.vala.page:28
+msgctxt "_"
+msgid "external ref='media/hello-world.png' md5='4c88a27211dfd1b33e504c9f78602f2d'"
+msgstr "external ref='media/hello-world.png' md5='4c88a27211dfd1b33e504c9f78602f2d'"
+
 #. (itstool) path: info/title
 #: C/hello-world.js.page:9
 msgctxt "text"
@@ -18340,45 +19880,86 @@ msgstr "Die vollständige Datei:"
 #. (itstool) path: section/code
 #: C/hello-world.js.page:116
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Lang = imports.lang;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "\n"
+#| "const Application = new Lang.Class({\n"
+#| "    //A Class requires an explicit Name parameter. This is the Class Name.\n"
+#| "    Name: 'Application',\n"
+#| "\n"
+#| "    //create the application\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application();\n"
+#| "\n"
+#| "       //connect to 'activate' and 'startup' signals to handlers.\n"
+#| "       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the UI\n"
+#| "    _buildUI: function() {\n"
+#| "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
+#| "                                                   title: \"Hello World!\" });\n"
+#| "        this._window.set_default_size(200, 200);\n"
+#| "        this.label = new Gtk.Label({ label: \"Hello World\" });\n"
+#| "        this._window.add(this.label);\n"
+#| "    },\n"
+#| "\n"
+#| "    //handler for 'activate' signal\n"
+#| "    _onActivate: function() {\n"
+#| "        //show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    //handler for 'startup' signal\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI();\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "//run the application\n"
+#| "let app = new Application();\n"
+#| "app.application.run(ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
-"const Lang = imports.lang;\n"
+"imports.gi.versions.Gtk = '3.0'\n"
 "const Gtk = imports.gi.Gtk;\n"
 "\n"
-"const Application = new Lang.Class({\n"
-"    //A Class requires an explicit Name parameter. This is the Class Name.\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to handlers.\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   title: \"Hello World!\" });\n"
 "        this._window.set_default_size(200, 200);\n"
 "        this.label = new Gtk.Label({ label: \"Hello World\" });\n"
 "        this._window.add(this.label);\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //handler for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        //show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //handler for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application();\n"
@@ -18386,42 +19967,40 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
-"const Lang = imports.lang;\n"
+"imports.gi.versions.Gtk = '3.0'\n"
 "const Gtk = imports.gi.Gtk;\n"
 "\n"
-"const Application = new Lang.Class({\n"
-"    //A Class requires an explicit Name parameter. This is the Class Name.\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application();\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to handlers.\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   title: \"Hello World!\" });\n"
 "        this._window.set_default_size(200, 200);\n"
 "        this.label = new Gtk.Label({ label: \"Hello World\" });\n"
 "        this._window.add(this.label);\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //handler for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        //show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //handler for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application();\n"
@@ -18902,45 +20481,6 @@ msgstr "hello-world.py"
 #. (itstool) path: section/code
 #: C/hello-world.py.page:103 C/label.py.page:39
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -19293,16 +20833,6 @@ msgid ""
 "This will create hello-world-1.0.tar.xz\n"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/image.c.page:22 C/image.js.page:21 C/image.py.page:29 C/image.vala.page:22
-msgctxt "_"
-msgid "external ref='media/image.png' md5='9416aa74d9d6a857783f7a36338e7a02'"
-msgstr "external ref='media/image.png' md5='9416aa74d9d6a857783f7a36338e7a02'"
-
 #. (itstool) path: info/title
 #: C/image.c.page:8
 msgctxt "text"
@@ -19319,6 +20849,16 @@ msgstr ""
 msgid "Image"
 msgstr "Bild"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/image.c.page:22 C/image.js.page:21 C/image.py.page:29 C/image.vala.page:22
+msgctxt "_"
+msgid "external ref='media/image.png' md5='9416aa74d9d6a857783f7a36338e7a02'"
+msgstr "external ref='media/image.png' md5='9416aa74d9d6a857783f7a36338e7a02'"
+
 #. (itstool) path: page/p
 #: C/image.c.page:23 C/image.js.page:22 C/image.py.page:30 C/image.vala.page:23
 msgid "This GtkApplication displays an image file from the current directory."
@@ -19425,63 +20965,121 @@ msgstr "Bild (JavaScript)"
 #. (itstool) path: page/code
 #: C/image.js.page:27
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const LabelExample = new Lang.Class ({\n"
+#| "    Name: 'Label Example',\n"
+#| "\n"
+#| "    /* Create the application itself\n"
+#| "       This boilerplate code is needed to build any GTK+ application. */\n"
+#| "        _init: function () {\n"
+#| "            this.application = new Gtk.Application ({\n"
+#| "                application_id: 'org.example.jslabel',\n"
+#| "                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "            });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                              window_position: 
Gtk.WindowPosition.CENTER,\n"
+#| "                                                              title: \"Welcome to GNOME\",\n"
+#| "                                                              default_height: 100,\n"
+#| "                                                              default_width: 200 });\n"
+#| "\n"
+#| "        // Create the label\n"
+#| "        this.label = new Gtk.Label ({label: \"Hello GNOME!\"});\n"
+#| "        this._window.add (this.label);\n"
+#| "\n"
+#| "                // Show the window and all child widgets\n"
+#| "                this._window.show_all();\n"
+#| "    }\n"
+#| "\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new LabelExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"\n"
-"const ImageExample = new Lang.Class ({\n"
-"\tName: 'Image Example',\n"
-"\n"
-"\t/* Create the application itself\n"
-"\t   This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"   \t     this.application = new Gtk.Application ({\n"
-"  \t          application_id: 'org.example.jsimage',\n"
-"  \t          flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"   \t     });\n"
-"\n"
-"\t// Connect 'activate' and 'startup' signals to the callback functions\n"
-"\tthis.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"\tthis.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"\t},\n"
-"\n"
-"\t// Callback function for 'activate' signal presents windows when active\n"
-"\t_onActivate: function () {\n"
-"\t\tthis._window.present ();\n"
-"\t},\n"
-"\n"
-"\t// Callback function for 'startup' signal initializes menus and builds the UI\n"
-"\t_onStartup: function () {\n"
-"\t\tthis._buildUI ();\n"
-"\t},\n"
 "\n"
+"class ImageExample {\n"
 "\n"
+"    /* Create the application itself\n"
+"       This boilerplate code is needed to build any GTK+ application. */\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsimage',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
-"\t// Build the application's UI\n"
-"\t_buildUI: function () {\n"
+"    // Callback function for 'activate' signal presents windows when active\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
-"\t\t// Create the application window\n"
-"        \tthis._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-"                                                     \t     window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                     \t     title: \"Welcome to GNOME\",\n"
-"                                                     \t     default_height: 300,\n"
-"                                                     \t     default_width: 300 });\n"
+"    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
-"\t\t// Create the label\n"
-"\t\tthis.jsimage = new Gtk.Image ({file: \"gnome-image.png\"});\n"
-"\t\tthis._window.add (this.jsimage);\n"
+"    // Build the application's UI\n"
+"    _buildUI() {\n"
 "\n"
-"       \t \t// Show the window and all child widgets\n"
-"       \t \tthis._window.show_all();\n"
-"\t}\n"
+"        // Create the application window\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Welcome to GNOME\",\n"
+"            default_height: 300,\n"
+"            default_width: 300\n"
+"        });\n"
 "\n"
+"        // Create the label\n"
+"        this.jsimage = new Gtk.Image ({file: \"gnome-image.png\"});\n"
+"        this._window.add (this.jsimage);\n"
 "\n"
-"});\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
+"    }\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ImageExample ();\n"
@@ -19489,60 +21087,57 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"\n"
-"const ImageExample = new Lang.Class ({\n"
-"\tName: 'Image Example',\n"
-"\n"
-"\t/* Create the application itself\n"
-"\t   This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"   \t     this.application = new Gtk.Application ({\n"
-"  \t          application_id: 'org.example.jsimage',\n"
-"  \t          flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"   \t     });\n"
-"\n"
-"\t// Connect 'activate' and 'startup' signals to the callback functions\n"
-"\tthis.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"\tthis.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"\t},\n"
-"\n"
-"\t// Callback function for 'activate' signal presents windows when active\n"
-"\t_onActivate: function () {\n"
-"\t\tthis._window.present ();\n"
-"\t},\n"
-"\n"
-"\t// Callback function for 'startup' signal initializes menus and builds the UI\n"
-"\t_onStartup: function () {\n"
-"\t\tthis._buildUI ();\n"
-"\t},\n"
 "\n"
+"class ImageExample {\n"
 "\n"
+"    /* Create the application itself\n"
+"       This boilerplate code is needed to build any GTK+ application. */\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jsimage',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
-"\t// Build the application's UI\n"
-"\t_buildUI: function () {\n"
+"    // Callback function for 'activate' signal presents windows when active\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
-"\t\t// Create the application window\n"
-"        \tthis._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-"                                                     \t     window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                     \t     title: \"Welcome to GNOME\",\n"
-"                                                     \t     default_height: 300,\n"
-"                                                     \t     default_width: 300 });\n"
+"    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
-"\t\t// Create the label\n"
-"\t\tthis.jsimage = new Gtk.Image ({file: \"gnome-image.png\"});\n"
-"\t\tthis._window.add (this.jsimage);\n"
+"    // Build the application's UI\n"
+"    _buildUI() {\n"
 "\n"
-"       \t \t// Show the window and all child widgets\n"
-"       \t \tthis._window.show_all();\n"
-"\t}\n"
+"        // Create the application window\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Welcome to GNOME\",\n"
+"            default_height: 300,\n"
+"            default_width: 300\n"
+"        });\n"
 "\n"
+"        // Create the label\n"
+"        this.jsimage = new Gtk.Image ({file: \"gnome-image.png\"});\n"
+"        this._window.add (this.jsimage);\n"
 "\n"
-"});\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
+"    }\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ImageExample ();\n"
@@ -19579,45 +21174,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/image.py.page:43
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "\n"
 "  from gi.repository import Gtk\n"
@@ -19705,45 +21261,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/image.py.page:51
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "\n"
 "    # a class to create a window\n"
@@ -19882,13 +21399,11 @@ msgstr ""
 
 #. (itstool) path: item/p
 #: C/image.py.page:131
-#| msgid "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkImage.html\";>GtkImage</link>"
 msgid "<link href=\"https://developer.gnome.org/gtk3/unstable/GtkImage.html\";> GtkImage</link>"
 msgstr "<link href=\"https://developer.gnome.org/gtk3/unstable/GtkImage.html\";> GtkImage</link>"
 
 #. (itstool) path: item/p
 #: C/image.py.page:135
-#| msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkWindow.html\";>GtkWindow</link>"
 msgid "<link href=\"https://developer.gnome.org/gtk3/unstable/GtkWindow.html\";> GtkWindow</link>"
 msgstr "<link href=\"https://developer.gnome.org/gtk3/unstable/GtkWindow.html\";> GtkWindow</link>"
 
@@ -19967,17 +21482,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.ApplicationWindow.html\
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Image.html\";>GtkImage</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Image.html\";>GtkImage</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/image-viewer.c.page:39 C/image-viewer.cpp.page:37 C/image-viewer.js.page:47 C/image-viewer.py.page:46
-#: C/image-viewer.vala.page:54
-msgctxt "_"
-msgid "external ref='media/image-viewer.png' md5='7720360611243b14283b83527be968c2'"
-msgstr "@@image: 'media/image-viewer.png'; md5=7720360611243b14283b83527be968c2"
-
 #. (itstool) path: info/title
 #: C/image-viewer.c.page:8
 msgctxt "text"
@@ -20010,6 +21514,17 @@ msgstr ""
 msgid "How to write a Gtk application in C"
 msgstr "Schreiben einer Gtk-Anwendung in C"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/image-viewer.c.page:39 C/image-viewer.cpp.page:37 C/image-viewer.js.page:47 C/image-viewer.py.page:46
+#: C/image-viewer.vala.page:54
+msgctxt "_"
+msgid "external ref='media/image-viewer.png' md5='7720360611243b14283b83527be968c2'"
+msgstr "external ref='media/image-viewer.png' md5='7720360611243b14283b83527be968c2'"
+
 #. (itstool) path: item/p
 #: C/image-viewer.c.page:49
 msgid ""
@@ -20351,9 +21866,9 @@ msgstr ""
 #: C/image-viewer.c.page:245 C/image-viewer.cpp.page:233 C/image-viewer.js.page:333 
C/image-viewer.py.page:247
 #: C/image-viewer.vala.page:306
 msgid ""
-"You can use <link href=\"http://library.gnome.org/devel/gio/unstable/\";>GIO</link> to handle network file 
tranfers "
-"and the like, and <link href=\"http://library.gnome.org/devel/gnome-scan/unstable/\";>GNOME Scan</link> to 
handle "
-"scanning."
+"You can use <link href=\"http://library.gnome.org/devel/gio/unstable/\";>GIO</link> to handle network file "
+"transfers and the like, and <link href=\"http://library.gnome.org/devel/gnome-scan/unstable/\";>GNOME 
Scan</link> "
+"to handle scanning."
 msgstr ""
 
 #. (itstool) path: info/desc
@@ -22420,16 +23935,6 @@ msgstr ""
 msgid "Code samples and tutorials"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/label.c.page:26 C/label.js.page:22 C/label.py.page:31 C/label.vala.page:22
-msgctxt "_"
-msgid "external ref='media/label.png' md5='734975c18653d88379f983e4501c3fc0'"
-msgstr "external ref='media/label.png' md5='734975c18653d88379f983e4501c3fc0'"
-
 #. (itstool) path: info/title
 #: C/label.c.page:8
 msgctxt "text"
@@ -22448,6 +23953,17 @@ msgstr ""
 msgid "Label"
 msgstr "Label"
 
+#. (itstool) path: td/media
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/label.c.page:26 C/label.js.page:22 C/label.py.page:31 C/label.vala.page:22
+msgctxt "_"
+msgid "external ref='media/label.png' md5='734975c18653d88379f983e4501c3fc0'"
+msgstr "external ref='media/label.png' md5='734975c18653d88379f983e4501c3fc0'"
+
 #. (itstool) path: td/p
 #. (itstool) path: page/p
 #: C/label.c.page:27 C/label.py.page:32 C/label.vala.page:23
@@ -22553,7 +24069,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/3.4/GtkLabel.html\";>GtkLabe
 
 #. (itstool) path: info/title
 #: C/label.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "Label (JavaScript)"
 msgstr "Label (JavaScript)"
@@ -22571,63 +24086,123 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/label.js.page:25
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const LabelExample = new Lang.Class ({\n"
+#| "    Name: 'Label Example',\n"
+#| "\n"
+#| "    /* Create the application itself\n"
+#| "       This boilerplate code is needed to build any GTK+ application. */\n"
+#| "        _init: function () {\n"
+#| "            this.application = new Gtk.Application ({\n"
+#| "                application_id: 'org.example.jslabel',\n"
+#| "                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "            });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                              window_position: 
Gtk.WindowPosition.CENTER,\n"
+#| "                                                              title: \"Welcome to GNOME\",\n"
+#| "                                                              default_height: 100,\n"
+#| "                                                              default_width: 200 });\n"
+#| "\n"
+#| "        // Create the label\n"
+#| "        this.label = new Gtk.Label ({label: \"Hello GNOME!\"});\n"
+#| "        this._window.add (this.label);\n"
+#| "\n"
+#| "                // Show the window and all child widgets\n"
+#| "                this._window.show_all();\n"
+#| "    }\n"
+#| "\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new LabelExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const LabelExample = new Lang.Class ({\n"
-"    Name: 'Label Example',\n"
+"class LabelExample {\n"
 "\n"
 "    /* Create the application itself\n"
 "       This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jslabel',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jslabel',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-"                                                              window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                              title: \"Welcome to GNOME\",\n"
-"                                                              default_height: 100,\n"
-"                                                              default_width: 200 });\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Welcome to GNOME\",\n"
+"            default_height: 100,\n"
+"            default_width: 200\n"
+"        });\n"
 "\n"
 "        // Create the label\n"
-"        this.label = new Gtk.Label ({label: \"Hello GNOME!\"});\n"
-"        this._window.add (this.label);\n"
+"        this.label = new Gtk.Label({ label: \"Hello GNOME!\" });\n"
+"        this._window.add(this.label);\n"
 "\n"
-"                // Show the window and all child widgets\n"
-"                this._window.show_all();\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
 "    }\n"
 "\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new LabelExample ();\n"
@@ -22635,60 +24210,59 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const LabelExample = new Lang.Class ({\n"
-"    Name: 'Label Example',\n"
+"class LabelExample {\n"
 "\n"
 "    /* Create the application itself\n"
 "       This boilerplate code is needed to build any GTK+ application. */\n"
-"        _init: function () {\n"
-"            this.application = new Gtk.Application ({\n"
-"                application_id: 'org.example.jslabel',\n"
-"                flags: Gio.ApplicationFlags.FLAGS_NONE\n"
-"            });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application ({\n"
+"            application_id: 'org.example.jslabel',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"            this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-"                                                              window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                              title: \"Welcome to GNOME\",\n"
-"                                                              default_height: 100,\n"
-"                                                              default_width: 200 });\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Welcome to GNOME\",\n"
+"            default_height: 100,\n"
+"            default_width: 200\n"
+"        });\n"
 "\n"
 "        // Create the label\n"
-"        this.label = new Gtk.Label ({label: \"Hello GNOME!\"});\n"
-"        this._window.add (this.label);\n"
+"        this.label = new Gtk.Label({ label: \"Hello GNOME!\" });\n"
+"        this._window.add(this.label);\n"
 "\n"
-"                // Show the window and all child widgets\n"
-"                this._window.show_all();\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
 "    }\n"
 "\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new LabelExample ();\n"
@@ -22701,7 +24275,6 @@ msgstr "<link href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Label.htm
 
 #. (itstool) path: info/title
 #: C/label.py.page:9
-#| msgid "Python"
 msgctxt "text"
 msgid "Label (Python)"
 msgstr "Label (Python)"
@@ -22727,44 +24300,39 @@ msgstr ""
 #: C/label.py.page:45
 #, no-wrap
 #| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
 #| "\n"
+#| "# a class to define a window\n"
 #| "class MyWindow(Gtk.ApplicationWindow):\n"
 #| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
+#| "        Gtk.Window.__init__(self, title=\"Welcome to GNOME\", application=app)\n"
+#| "        self.set_default_size(200, 100)\n"
 #| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
+#| "# a class to define a label\n"
+#| "<hi>\n"
+#| "class MyLabel(Gtk.Label):\n"
+#| "    def __init__(self):\n"
+#| "        Gtk.Label.__init__(self)\n"
+#| "        self.set_text(\"Hello GNOME!\")\n"
+#| "</hi>\n"
 #| "\n"
 #| "class MyApplication(Gtk.Application):\n"
 #| "    def __init__(self):\n"
 #| "        Gtk.Application.__init__(self)\n"
 #| "\n"
 #| "    def do_activate(self):\n"
+#| "        # create an instance of MyWindow\n"
 #| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
 #| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
+#| "        # create an instance of MyLabel\n"
+#| "<hi>\n"
+#| "        label = MyLabel()\n"
+#| "</hi>\n"
+#| "        # and add it to the window\n"
+#| "<hi>\n"
+#| "        win.add(label)\n"
+#| "</hi>\n"
+#| "        # show the window and everything on it\n"
+#| "        win.show_all()"
 msgid ""
 "\n"
 "# a class to define a window\n"
@@ -22774,12 +24342,12 @@ msgid ""
 "        self.set_default_size(200, 100)\n"
 "\n"
 "# a class to define a label\n"
-"<hi>\n"
+"<e:hi>\n"
 "class MyLabel(Gtk.Label):\n"
 "    def __init__(self):\n"
 "        Gtk.Label.__init__(self)\n"
 "        self.set_text(\"Hello GNOME!\")\n"
-"</hi>\n"
+"</e:hi>\n"
 "\n"
 "class MyApplication(Gtk.Application):\n"
 "    def __init__(self):\n"
@@ -22790,13 +24358,13 @@ msgid ""
 "        win = MyWindow(self)\n"
 "\n"
 "        # create an instance of MyLabel\n"
-"<hi>\n"
+"<e:hi>\n"
 "        label = MyLabel()\n"
-"</hi>\n"
+"</e:hi>\n"
 "        # and add it to the window\n"
-"<hi>\n"
+"<e:hi>\n"
 "        win.add(label)\n"
-"</hi>\n"
+"</e:hi>\n"
 "        # show the window and everything on it\n"
 "        win.show_all()"
 msgstr ""
@@ -22808,12 +24376,12 @@ msgstr ""
 "        self.set_default_size(200, 100)\n"
 "\n"
 "# a class to define a label\n"
-"<hi>\n"
+"<e:hi>\n"
 "class MyLabel(Gtk.Label):\n"
 "    def __init__(self):\n"
 "        Gtk.Label.__init__(self)\n"
 "        self.set_text(\"Hello GNOME!\")\n"
-"</hi>\n"
+"</e:hi>\n"
 "\n"
 "class MyApplication(Gtk.Application):\n"
 "    def __init__(self):\n"
@@ -22824,13 +24392,13 @@ msgstr ""
 "        win = MyWindow(self)\n"
 "\n"
 "        # create an instance of MyLabel\n"
-"<hi>\n"
+"<e:hi>\n"
 "        label = MyLabel()\n"
-"</hi>\n"
+"</e:hi>\n"
 "        # and add it to the window\n"
-"<hi>\n"
+"<e:hi>\n"
 "        win.add(label)\n"
-"</hi>\n"
+"</e:hi>\n"
 "        # show the window and everything on it\n"
 "        win.show_all()"
 
@@ -22868,18 +24436,24 @@ msgstr ""
 #. (itstool) path: item/code
 #: C/label.py.page:92
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "label.set_markup(\"Text can be &lt;small&gt;small&lt;/small&gt;, &lt;big&gt;big&lt;/big&gt;, \"\n"
+#| "                 \"&lt;b&gt;bold&lt;/b&gt;, &lt;i&gt;italic&lt;/i&gt; and even point to somewhere \"\n"
+#| "                 \"in the &lt;a href=\\\"http://www.gtk.org\\\"; \"\n"
+#| "                 \"title=\\\"Click to find out more\\\"&gt;internets&lt;/a&gt;.\")"
 msgid ""
 "\n"
 "label.set_markup(\"Text can be &lt;small&gt;small&lt;/small&gt;, &lt;big&gt;big&lt;/big&gt;, \"\n"
 "                 \"&lt;b&gt;bold&lt;/b&gt;, &lt;i&gt;italic&lt;/i&gt; and even point to somewhere \"\n"
-"                 \"in the &lt;a href=\\\"http://www.gtk.org\\\"; \"\n"
-"                 \"title=\\\"Click to find out more\\\"&gt;internets&lt;/a&gt;.\")"
+"                 \"on the &lt;a href=\\\"http://www.gtk.org\\\"; \"\n"
+"                 \"title=\\\"Click to find out more\\\"&gt;internet&lt;/a&gt;.\")"
 msgstr ""
 "\n"
 "label.set_markup(\"Text can be &lt;small&gt;small&lt;/small&gt;, &lt;big&gt;big&lt;/big&gt;, \"\n"
 "                 \"&lt;b&gt;bold&lt;/b&gt;, &lt;i&gt;italic&lt;/i&gt; and even point to somewhere \"\n"
-"                 \"in the &lt;a href=\\\"http://www.gtk.org\\\"; \"\n"
-"                 \"title=\\\"Click to find out more\\\"&gt;internets&lt;/a&gt;.\")"
+"                 \"on the &lt;a href=\\\"http://www.gtk.org\\\"; \"\n"
+"                 \"title=\\\"Click to find out more\\\"&gt;internet&lt;/a&gt;.\")"
 
 #. (itstool) path: info/title
 #: C/label.vala.page:8
@@ -22947,7 +24521,6 @@ msgstr ""
 
 #. (itstool) path: p/link
 #: C/legal.xml:3
-#| msgid "This work is distributed under a CreativeCommons Attribution-Share Alike 3.0 Unported license."
 msgid "Creative Commons Attribution-ShareAlike 3.0 Unported License"
 msgstr "Creative Commons Attribution-ShareAlike 3.0 Unported License"
 
@@ -23057,16 +24630,6 @@ msgstr ""
 "Als besondere Ausnahme erteilen Ihnen die Urheberrechtsinhaber die Genehmigung, den in diesem Dokument 
enthaltenen "
 "Beispielcode ohne Einschränkung unter den Bedingungen Ihrer Wahl zu verbreiten."
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/linkbutton.c.page:23 C/linkbutton.js.page:22 C/linkbutton.py.page:24 C/linkbutton.vala.page:22
-msgctxt "_"
-msgid "external ref='media/linkbutton.png' md5='3712eae8953e87c65a6aa74503b8e32b'"
-msgstr "external ref='media/linkbutton.png' md5='3712eae8953e87c65a6aa74503b8e32b'"
-
 #. (itstool) path: info/title
 #: C/linkbutton.c.page:8
 msgctxt "text"
@@ -23083,6 +24646,16 @@ msgstr ""
 msgid "LinkButton"
 msgstr "LinkButton"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/linkbutton.c.page:23 C/linkbutton.js.page:22 C/linkbutton.py.page:24 C/linkbutton.vala.page:22
+msgctxt "_"
+msgid "external ref='media/linkbutton.png' md5='3712eae8953e87c65a6aa74503b8e32b'"
+msgstr "external ref='media/linkbutton.png' md5='3712eae8953e87c65a6aa74503b8e32b'"
+
 #. (itstool) path: page/p
 #: C/linkbutton.c.page:24
 msgid "This button links to the GNOME live webpage."
@@ -23173,7 +24746,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkLinkButton.html\";
 
 #. (itstool) path: info/title
 #: C/linkbutton.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "LinkButton (JavaScript)"
 msgstr "LinkButton (JavaScript)"
@@ -23191,41 +24763,97 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/linkbutton.js.page:25
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const LinkButtonExample = new Lang.Class ({\n"
+#| "    Name: 'LinkButton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "        _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "              application_id: 'org.example.jslinkbutton',\n"
+#| "              flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "         });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "    this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                 window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                 title: \"GNOME LinkButton\",\n"
+#| "                                                 default_height: 50,\n"
+#| "                                                 default_width: 250 });\n"
+#| "\n"
+#| "        // Create the LinkButton and have it link to live.gnome.org\n"
+#| "        this.LinkButton = new Gtk.LinkButton ({label: \"Link to GNOME live!\",\n"
+#| "                               uri: \"http://live.gnome.org\"});\n"
+#| "        this._window.add (this.LinkButton);\n"
+#| "\n"
+#| "    // Show the window and all child widgets\n"
+#| "    this._window.show_all();\n"
+#| "    },\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new LinkButtonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const LinkButtonExample = new Lang.Class ({\n"
-"    Name: 'LinkButton Example',\n"
+"class LinkButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
-"              application_id: 'org.example.jslinkbutton',\n"
-"              flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jslinkbutton',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "         });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "    this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -23241,8 +24869,8 @@ msgid ""
 "\n"
 "    // Show the window and all child widgets\n"
 "    this._window.show_all();\n"
-"    },\n"
-"});\n"
+"    }\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new LinkButtonExample ();\n"
@@ -23250,38 +24878,38 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const LinkButtonExample = new Lang.Class ({\n"
-"    Name: 'LinkButton Example',\n"
+"class LinkButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
-"              application_id: 'org.example.jslinkbutton',\n"
-"              flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jslinkbutton',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "         });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "    this._window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
@@ -23297,8 +24925,8 @@ msgstr ""
 "\n"
 "    // Show the window and all child widgets\n"
 "    this._window.show_all();\n"
-"    },\n"
-"});\n"
+"    }\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new LinkButtonExample ();\n"
@@ -23328,45 +24956,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/linkbutton.py.page:32
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -23535,16 +25124,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.LinkButton.html\";>Gtk.LinkButton</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.LinkButton.html\";>Gtk.LinkButton</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/magic-mirror.vala.page:47
-msgctxt "_"
-msgid "external ref='media/magic-mirror.png' md5='8171faea6ed3b6ddac0da084c29e4e22'"
-msgstr "@@image: 'media/magic-mirror.png'; md5=8171faea6ed3b6ddac0da084c29e4e22"
-
 #. (itstool) path: info/title
 #: C/magic-mirror.vala.page:8
 msgctxt "text"
@@ -23605,6 +25184,16 @@ msgstr ""
 msgid "Basic knowledge of an object-oriented programming language"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/magic-mirror.vala.page:47
+msgctxt "_"
+msgid "external ref='media/magic-mirror.png' md5='8171faea6ed3b6ddac0da084c29e4e22'"
+msgstr "external ref='media/magic-mirror.png' md5='8171faea6ed3b6ddac0da084c29e4e22'"
+
 #. (itstool) path: item/p
 #: C/magic-mirror.vala.page:57
 msgid ""
@@ -23738,7 +25327,7 @@ msgstr ""
 #. (itstool) path: item/p
 #: C/magic-mirror.vala.page:137
 msgid ""
-"Of course it is also possible to integrate the video more tighly into other windows but that is an advanced 
topic "
+"Of course it is also possible to integrate the video more tightly into other windows but that is an 
advanced topic "
 "that includes some details of the X Window System we will omit here."
 msgstr ""
 
@@ -23778,16 +25367,6 @@ msgid ""
 "where you can impress your friends and colleagues with an awesome application you just made in 15 minutes."
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/menubar.c.page:25 C/menubar.py.page:29 C/menubar.vala.page:24
-msgctxt "_"
-msgid "external ref='media/menubar.png' md5='7b642aaa1628d5e43ab85ac230ac1c78'"
-msgstr "external ref='media/menubar.png' md5='7b642aaa1628d5e43ab85ac230ac1c78'"
-
 #. (itstool) path: info/title
 #: C/menubar.c.page:8
 msgctxt "text"
@@ -23804,6 +25383,16 @@ msgstr ""
 msgid "MenuBar"
 msgstr "MenuBar"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/menubar.c.page:25 C/menubar.py.page:29 C/menubar.vala.page:24
+msgctxt "_"
+msgid "external ref='media/menubar.png' md5='7b642aaa1628d5e43ab85ac230ac1c78'"
+msgstr "external ref='media/menubar.png' md5='7b642aaa1628d5e43ab85ac230ac1c78'"
+
 #. (itstool) path: page/p
 #: C/menubar.c.page:26 C/menubar.py.page:30 C/menubar.vala.page:25
 msgid "A MenuBar created using XML and GtkBuilder."
@@ -24465,16 +26054,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk/stable/GtkAboutDialog.html\";
 msgid "<link href=\"http://developer.gnome.org/glib/stable/glib-GVariantType.html\";>GtkVariantType</link>"
 msgstr "<link href=\"http://developer.gnome.org/glib/stable/glib-GVariantType.html\";>GtkVariantType</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/menubar.py.page:132 C/menubar.vala.page:134
-msgctxt "_"
-msgid "external ref='media/menubar_choices.png' md5='47cdfa12caf85ba20dd3e835bd7f893f'"
-msgstr "external ref='media/menubar_choices.png' md5='47cdfa12caf85ba20dd3e835bd7f893f'"
-
 #. (itstool) path: info/title
 #: C/menubar.py.page:8
 msgctxt "text"
@@ -24873,6 +26452,16 @@ msgstr ""
 msgid "Choices submenu and items with state"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/menubar.py.page:132 C/menubar.vala.page:134
+msgctxt "_"
+msgid "external ref='media/menubar_choices.png' md5='47cdfa12caf85ba20dd3e835bd7f893f'"
+msgstr "external ref='media/menubar_choices.png' md5='47cdfa12caf85ba20dd3e835bd7f893f'"
+
 #. (itstool) path: section/p
 #: C/menubar.py.page:133
 msgid ""
@@ -26040,18 +27629,6 @@ msgstr "<link href=\"http://valadoc.org/gio-2.0/GLib.ActionEntry.html\";>Glib.Act
 msgid "<link href=\"http://valadoc.org/gio-2.0/Gtk.Builder.html\";>Gtk.Builder</link>"
 msgstr "<link href=\"http://valadoc.org/gio-2.0/Gtk.Builder.html\";>Gtk.Builder</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/menubutton.c.page:22 C/menubutton.js.page:22 C/menubutton.py.page:29 C/menubutton.vala.page:22
-#| msgctxt "_"
-#| msgid "external ref='media/linkbutton.png' md5='3712eae8953e87c65a6aa74503b8e32b'"
-msgctxt "_"
-msgid "external ref='media/menubutton.png' md5='99eedc5ef2d6c56d32ca9ae7f3f3320f'"
-msgstr "external ref='media/menubutton.png' md5='99eedc5ef2d6c56d32ca9ae7f3f3320f'"
-
 #. (itstool) path: info/title
 #: C/menubutton.c.page:8 C/menubutton.py.page:8
 msgctxt "text"
@@ -26068,6 +27645,16 @@ msgstr ""
 msgid "MenuButton"
 msgstr "MenuButton"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/menubutton.c.page:22 C/menubutton.js.page:22 C/menubutton.py.page:29 C/menubutton.vala.page:22
+msgctxt "_"
+msgid "external ref='media/menubutton.png' md5='99eedc5ef2d6c56d32ca9ae7f3f3320f'"
+msgstr "external ref='media/menubutton.png' md5='99eedc5ef2d6c56d32ca9ae7f3f3320f'"
+
 #. (itstool) path: page/p
 #: C/menubutton.c.page:23 C/menubutton.js.page:23 C/menubutton.py.page:30 C/menubutton.vala.page:23
 msgid ""
@@ -26309,7 +27896,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkArrow.html\";>Gt
 
 #. (itstool) path: info/title
 #: C/menubutton.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "MenuButton (JavaScript)"
 msgstr "MenuButton (JavaScript)"
@@ -26322,29 +27908,138 @@ msgstr "Anna Zacchi"
 #. (itstool) path: page/code
 #: C/menubutton.js.page:28
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const Application = new Lang.Class ({\n"
+#| "    Name: 'Application',\n"
+#| "\n"
+#| "    //create the application\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application ({ application_id: 'org.example.myapp',\n"
+#| "                                                  flags: Gio.ApplicationFlags.FLAGS_NONE });\n"
+#| "\n"
+#| "       //connect to 'activate' and 'startup' signals to the callback functions\n"
+#| "       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the UI (in this case it's just the ApplicationWindow)\n"
+#| "    _buildUI: function() {\n"
+#| "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"MenuButton Example\" });\n"
+#| "        this._window.set_default_size(600, 400);\n"
+#| "        this.grid = new Gtk.Grid();\n"
+#| "        this._window.add(this.grid);\n"
+#| "\n"
+#| "\n"
+#| "        this._menuButton = new Gtk.MenuButton();\n"
+#| "        this.grid.attach(this._menuButton, 0, 0, 1, 1 );\n"
+#| "        this.menu = new Gtk.Menu.new_from_model(this.menuModel);\n"
+#| "\n"
+#| "        this.menu.show();\n"
+#| "        this._menuButton.set_menu_model (this.menuModel);\n"
+#| "        this._menuButton.set_size_request(80, 35);\n"
+#| "        this._menuButton.show();\n"
+#| "\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "    _showNew: function() {\n"
+#| "    print(\"You clicked \\\"New\\\"\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _showAbout: function() {\n"
+#| "        print(\"You clicked \\\"About\\\"\");\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the menu items and connect the signals to the callback functions.\n"
+#| "    _initMenus: function() {\n"
+#| "        let newAction = new Gio.SimpleAction({ name: 'new' });\n"
+#| "        newAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showNew();\n"
+#| "            }));\n"
+#| "        this.application.add_action(newAction);\n"
+#| "\n"
+#| "        let aboutAction = new Gio.SimpleAction({ name: 'about' });\n"
+#| "        aboutAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showAbout();\n"
+#| "            }));\n"
+#| "        this.application.add_action(aboutAction);\n"
+#| "\n"
+#| "        let quitAction = new Gio.SimpleAction({ name: 'quit' });\n"
+#| "        quitAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._window.destroy();\n"
+#| "            }));\n"
+#| "         this.application.add_action(quitAction);\n"
+#| "\n"
+#| "        this.menuModel = new Gio.Menu();\n"
+#| "\n"
+#| "        this.menuItemNew = Gio.MenuItem.new(\"New\", 'app.new');\n"
+#| "        this.menuItemAbout = Gio.MenuItem.new(\"About\", 'app.about');\n"
+#| "        this.fileMenuItem = Gio.MenuItem.new(\"Other\", null);\n"
+#| "\n"
+#| "        this.menuModel.append_item(this.menuItemNew);\n"
+#| "        this.menuModel.append_item(this.menuItemAbout);\n"
+#| "\n"
+#| "        //submenu\n"
+#| "        this.subMenu = new Gio.Menu();\n"
+#| "        this.fileMenuItem.set_submenu(this.subMenu);\n"
+#| "        this.menuItemQuit = Gio.MenuItem.new(\"Quit\", 'app.quit');\n"
+#| "        this.subMenu.append_item(this.menuItemQuit);\n"
+#| "        this.menuModel.append_item(this.fileMenuItem);\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'activate' signal\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'startup' signal\n"
+#| "    _onStartup: function() {\n"
+#| "        //You must call _initMenus() before calling _buildUI().\n"
+#| "        this._initMenus();\n"
+#| "        this._buildUI();\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "//run the application\n"
+#| "let app = new Application();\n"
+#| "app.application.run(ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function() {\n"
-"        this.application = new Gtk.Application ({ application_id: 'org.example.myapp',\n"
-"                                                  flags: Gio.ApplicationFlags.FLAGS_NONE });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.myapp',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        //connect to 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow)\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
 "                                                   title: \"MenuButton Example\" });\n"
@@ -26355,7 +28050,7 @@ msgid ""
 "\n"
 "        this._menuButton = new Gtk.MenuButton();\n"
 "        this.grid.attach(this._menuButton, 0, 0, 1, 1 );\n"
-"        this.menu = new Gtk.Menu.new_from_model(this.menuModel);\n"
+"        this.menu = Gtk.Menu.new_from_model(this.menuModel);\n"
 "\n"
 "        this.menu.show();\n"
 "        this._menuButton.set_menu_model (this.menuModel);\n"
@@ -26363,37 +28058,28 @@ msgid ""
 "        this._menuButton.show();\n"
 "\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _showNew: function() {\n"
-"    print(\"You clicked \\\"New\\\"\");\n"
-"    },\n"
+"    _showNew() {\n"
+"        print(\"You clicked \\\"New\\\"\");\n"
+"    }\n"
 "\n"
-"    _showAbout: function() {\n"
+"    _showAbout() {\n"
 "        print(\"You clicked \\\"About\\\"\");\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //create the menu items and connect the signals to the callback functions.\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let newAction = new Gio.SimpleAction({ name: 'new' });\n"
-"        newAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showNew();\n"
-"            }));\n"
+"        newAction.connect('activate', () =&gt; { this._showNew(); });\n"
 "        this.application.add_action(newAction);\n"
 "\n"
 "        let aboutAction = new Gio.SimpleAction({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        let quitAction = new Gio.SimpleAction({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "         this.application.add_action(quitAction);\n"
 "\n"
 "        this.menuModel = new Gio.Menu();\n"
@@ -26411,20 +28097,20 @@ msgid ""
 "        this.menuItemQuit = Gio.MenuItem.new(\"Quit\", 'app.quit');\n"
 "        this.subMenu.append_item(this.menuItemQuit);\n"
 "        this.menuModel.append_item(this.fileMenuItem);\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        //You must call _initMenus() before calling _buildUI().\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application();\n"
@@ -26432,26 +28118,28 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function() {\n"
-"        this.application = new Gtk.Application ({ application_id: 'org.example.myapp',\n"
-"                                                  flags: Gio.ApplicationFlags.FLAGS_NONE });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.myapp',\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
-"       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        //connect to 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow)\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
 "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
 "                                                   title: \"MenuButton Example\" });\n"
@@ -26462,7 +28150,7 @@ msgstr ""
 "\n"
 "        this._menuButton = new Gtk.MenuButton();\n"
 "        this.grid.attach(this._menuButton, 0, 0, 1, 1 );\n"
-"        this.menu = new Gtk.Menu.new_from_model(this.menuModel);\n"
+"        this.menu = Gtk.Menu.new_from_model(this.menuModel);\n"
 "\n"
 "        this.menu.show();\n"
 "        this._menuButton.set_menu_model (this.menuModel);\n"
@@ -26470,37 +28158,28 @@ msgstr ""
 "        this._menuButton.show();\n"
 "\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _showNew: function() {\n"
-"    print(\"You clicked \\\"New\\\"\");\n"
-"    },\n"
+"    _showNew() {\n"
+"        print(\"You clicked \\\"New\\\"\");\n"
+"    }\n"
 "\n"
-"    _showAbout: function() {\n"
+"    _showAbout() {\n"
 "        print(\"You clicked \\\"About\\\"\");\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //create the menu items and connect the signals to the callback functions.\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let newAction = new Gio.SimpleAction({ name: 'new' });\n"
-"        newAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showNew();\n"
-"            }));\n"
+"        newAction.connect('activate', () =&gt; { this._showNew(); });\n"
 "        this.application.add_action(newAction);\n"
 "\n"
 "        let aboutAction = new Gio.SimpleAction({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        let quitAction = new Gio.SimpleAction({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "         this.application.add_action(quitAction);\n"
 "\n"
 "        this.menuModel = new Gio.Menu();\n"
@@ -26518,20 +28197,20 @@ msgstr ""
 "        this.menuItemQuit = Gio.MenuItem.new(\"Quit\", 'app.quit');\n"
 "        this.subMenu.append_item(this.menuItemQuit);\n"
 "        this.menuModel.append_item(this.fileMenuItem);\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        //You must call _initMenus() before calling _buildUI().\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application();\n"
@@ -26891,16 +28570,6 @@ msgstr ""
 "\treturn new MyApplication ().run (args);\n"
 "}\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/message-board.c.page:41
-msgctxt "_"
-msgid "external ref='media/message-board.ogv' md5='beb80c4538776dc2cdd26c95abea5027'"
-msgstr "external ref='media/message-board.ogv' md5='beb80c4538776dc2cdd26c95abea5027'"
-
 #. (itstool) path: info/title
 #: C/message-board.c.page:8
 msgctxt "text"
@@ -26935,6 +28604,16 @@ msgid ""
 "viewer.c\"/> to learn the basics of GTK+."
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/message-board.c.page:41
+msgctxt "_"
+msgid "external ref='media/message-board.ogv' md5='beb80c4538776dc2cdd26c95abea5027'"
+msgstr "external ref='media/message-board.ogv' md5='beb80c4538776dc2cdd26c95abea5027'"
+
 #. (itstool) path: section/p
 #: C/message-board.c.page:48
 msgid ""
@@ -27503,16 +29182,6 @@ msgid ""
 "menu when you right-click on a message. These features involve exploring WebKit's DOM API more."
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/messagedialog.c.page:24 C/messagedialog.js.page:25 C/messagedialog.py.page:23 
C/messagedialog.vala.page:22
-msgctxt "_"
-msgid "external ref='media/messagedialog.png' md5='1956288274018e2386d9cba96a2101de'"
-msgstr "external ref='media/messagedialog.png' md5='1956288274018e2386d9cba96a2101de'"
-
 #. (itstool) path: info/title
 #: C/messagedialog.c.page:8
 msgctxt "text"
@@ -27529,6 +29198,16 @@ msgstr ""
 msgid "MessageDialog"
 msgstr "MessageDialog"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/messagedialog.c.page:24 C/messagedialog.js.page:25 C/messagedialog.py.page:23 
C/messagedialog.vala.page:22
+msgctxt "_"
+msgid "external ref='media/messagedialog.png' md5='1956288274018e2386d9cba96a2101de'"
+msgstr "external ref='media/messagedialog.png' md5='1956288274018e2386d9cba96a2101de'"
+
 #. (itstool) path: page/p
 #: C/messagedialog.c.page:25 C/messagedialog.vala.page:23
 msgid "A modal message dialog which can cause the world to explode."
@@ -27908,7 +29587,6 @@ msgstr ""
 
 #. (itstool) path: info/title
 #: C/messagedialog.js.page:8
-#| msgid "Classes in JavaScript"
 msgctxt "text"
 msgid "MessageDialog (JavaScript)"
 msgstr "MessageDialog (JavaScript)"
@@ -27936,6 +29614,25 @@ msgid ""
 "popups appear with a basic message and buttons."
 msgstr ""
 
+#. (itstool) path: section/code
+#: C/messagedialog.js.page:32 C/radiobutton.js.page:29 C/scale.js.page:29 C/spinbutton.js.page:32
+#: C/statusbar.js.page:29 C/switch.js.page:36 C/togglebutton.js.page:29
+#, no-wrap
+msgid ""
+"\n"
+"#!/usr/bin/gjs\n"
+"\n"
+"const Gio = imports.gi.Gio;\n"
+"const Gtk = imports.gi.Gtk;\n"
+"const Lang = imports.lang;\n"
+msgstr ""
+"\n"
+"#!/usr/bin/gjs\n"
+"\n"
+"const Gio = imports.gi.Gio;\n"
+"const Gtk = imports.gi.Gtk;\n"
+"const Lang = imports.lang;\n"
+
 #. (itstool) path: section/code
 #: C/messagedialog.js.page:44
 #, no-wrap
@@ -28268,64 +29965,186 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/messagedialog.js.page:185
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const MessageDialogExample = new Lang.Class ({\n"
+#| "    Name: 'MessageDialog Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.jsmessagedialog',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._initMenus();\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            title: \"Gtk.MessageDialog Example\",\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 400 });\n"
+#| "\n"
+#| "        // Create a silly warning message and add it to the window\n"
+#| "        this.warningLabel = new Gtk.Label ({\n"
+#| "            label: \"This application goes boom! (Not really.)\"});\n"
+#| "        this._window.add (this.warningLabel);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application menu, including the button that calls the dialog\n"
+#| "    _initMenus: function() {\n"
+#| "        let menu = new Gio.Menu();\n"
+#| "        menu.append(\"Message\",'app.message');\n"
+#| "        menu.append(\"Quit\",'app.quit');\n"
+#| "        this.application.set_app_menu(menu);\n"
+#| "\n"
+#| "        // This pops up a MessageDialog when \"Message\" is clicked in the menu\n"
+#| "        let messageAction = new Gio.SimpleAction ({ name: 'message' });\n"
+#| "        messageAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showMessageDialog();\n"
+#| "            }));\n"
+#| "        this.application.add_action(messageAction);\n"
+#| "\n"
+#| "        // This closes the window when \"Quit\" is clicked in the menu\n"
+#| "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
+#| "        quitAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._window.destroy();\n"
+#| "            }));\n"
+#| "        this.application.add_action(quitAction);\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _showMessageDialog: function () {\n"
+#| "\n"
+#| "        // Create a modal MessageDialog whose parent is the window\n"
+#| "        this._messageDialog = new Gtk.MessageDialog ({\n"
+#| "            transient_for: this._window,\n"
+#| "            modal: true,\n"
+#| "            buttons: Gtk.ButtonsType.OK_CANCEL,\n"
+#| "            message_type: Gtk.MessageType.WARNING,\n"
+#| "            text: \"This action will cause the universe to stop existing.\" });\n"
+#| "\n"
+#| "        this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));\n"
+#| "        this._messageDialog.show();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Callback function (aka signal handler) for the response signal\n"
+#| "    _response_cb: function (messagedialog, response_id) {\n"
+#| "\n"
+#| "        // A simple switch that changes the main window's label\n"
+#| "        switch (response_id) {\n"
+#| "            case Gtk.ResponseType.OK:\n"
+#| "                this.warningLabel.set_label (\"*BOOM*\\n\");\n"
+#| "                break;\n"
+#| "            case Gtk.ResponseType.CANCEL:\n"
+#| "                this.warningLabel.set_label (\"Good choice!\\n\");\n"
+#| "                break;\n"
+#| "            case Gtk.ResponseType.DELETE_EVENT:\n"
+#| "                this.warningLabel.set_label (\"Dialog closed or cancelled.\\n\");\n"
+#| "                break;\n"
+#| "        }\n"
+#| "\n"
+#| "        this._messageDialog.destroy();\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new MessageDialogExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const MessageDialogExample = new Lang.Class ({\n"
-"    Name: 'MessageDialog Example',\n"
+"class MessageDialogExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsmessagedialog',\n"
-"            flags: Gio.ApplicationFlags.FLAGS_NONE });\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
 "        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"        this._window = new Gtk.ApplicationWindow  ({\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
 "            application: this.application,\n"
 "            window_position: Gtk.WindowPosition.CENTER,\n"
 "            title: \"Gtk.MessageDialog Example\",\n"
 "            default_height: 200,\n"
-"            default_width: 400 });\n"
+"            default_width: 400\n"
+"        });\n"
 "\n"
 "        // Create a silly warning message and add it to the window\n"
-"        this.warningLabel = new Gtk.Label ({\n"
-"            label: \"This application goes boom! (Not really.)\"});\n"
+"        this.warningLabel = new Gtk.Label({\n"
+"            label: \"This application goes boom! (Not really.)\"\n"
+"        });\n"
 "        this._window.add (this.warningLabel);\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Build the application menu, including the button that calls the dialog\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"Message\",'app.message');\n"
 "        menu.append(\"Quit\",'app.quit');\n"
@@ -28333,24 +30152,16 @@ msgid ""
 "\n"
 "        // This pops up a MessageDialog when \"Message\" is clicked in the menu\n"
 "        let messageAction = new Gio.SimpleAction ({ name: 'message' });\n"
-"        messageAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showMessageDialog();\n"
-"            }));\n"
+"        messageAction.connect('activate', () =&gt; { this._showMessageDialog(); });\n"
 "        this.application.add_action(messageAction);\n"
 "\n"
 "        // This closes the window when \"Quit\" is clicked in the menu\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _showMessageDialog: function () {\n"
+"    _showMessageDialog() {\n"
 "\n"
 "        // Create a modal MessageDialog whose parent is the window\n"
 "        this._messageDialog = new Gtk.MessageDialog ({\n"
@@ -28360,14 +30171,12 @@ msgid ""
 "            message_type: Gtk.MessageType.WARNING,\n"
 "            text: \"This action will cause the universe to stop existing.\" });\n"
 "\n"
-"        this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));\n"
+"        this._messageDialog.connect ('response', this._response_cb.bind(this));\n"
 "        this._messageDialog.show();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Callback function (aka signal handler) for the response signal\n"
-"    _response_cb: function (messagedialog, response_id) {\n"
+"    _response_cb(messagedialog, response_id) {\n"
 "\n"
 "        // A simple switch that changes the main window's label\n"
 "        switch (response_id) {\n"
@@ -28385,8 +30194,7 @@ msgid ""
 "        this._messageDialog.destroy();\n"
 "\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new MessageDialogExample ();\n"
@@ -28394,61 +30202,60 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const MessageDialogExample = new Lang.Class ({\n"
-"    Name: 'MessageDialog Example',\n"
+"class MessageDialogExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsmessagedialog',\n"
-"            flags: Gio.ApplicationFlags.FLAGS_NONE });\n"
+"            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal initializes menus and builds the UI\n"
-"    _onStartup: function () {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
 "        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"        this._window = new Gtk.ApplicationWindow  ({\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
 "            application: this.application,\n"
 "            window_position: Gtk.WindowPosition.CENTER,\n"
 "            title: \"Gtk.MessageDialog Example\",\n"
 "            default_height: 200,\n"
-"            default_width: 400 });\n"
+"            default_width: 400\n"
+"        });\n"
 "\n"
 "        // Create a silly warning message and add it to the window\n"
-"        this.warningLabel = new Gtk.Label ({\n"
-"            label: \"This application goes boom! (Not really.)\"});\n"
+"        this.warningLabel = new Gtk.Label({\n"
+"            label: \"This application goes boom! (Not really.)\"\n"
+"        });\n"
 "        this._window.add (this.warningLabel);\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Build the application menu, including the button that calls the dialog\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"Message\",'app.message');\n"
 "        menu.append(\"Quit\",'app.quit');\n"
@@ -28456,24 +30263,16 @@ msgstr ""
 "\n"
 "        // This pops up a MessageDialog when \"Message\" is clicked in the menu\n"
 "        let messageAction = new Gio.SimpleAction ({ name: 'message' });\n"
-"        messageAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showMessageDialog();\n"
-"            }));\n"
+"        messageAction.connect('activate', () =&gt; { this._showMessageDialog(); });\n"
 "        this.application.add_action(messageAction);\n"
 "\n"
 "        // This closes the window when \"Quit\" is clicked in the menu\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _showMessageDialog: function () {\n"
+"    _showMessageDialog() {\n"
 "\n"
 "        // Create a modal MessageDialog whose parent is the window\n"
 "        this._messageDialog = new Gtk.MessageDialog ({\n"
@@ -28483,14 +30282,12 @@ msgstr ""
 "            message_type: Gtk.MessageType.WARNING,\n"
 "            text: \"This action will cause the universe to stop existing.\" });\n"
 "\n"
-"        this._messageDialog.connect ('response', Lang.bind(this, this._response_cb));\n"
+"        this._messageDialog.connect ('response', this._response_cb.bind(this));\n"
 "        this._messageDialog.show();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Callback function (aka signal handler) for the response signal\n"
-"    _response_cb: function (messagedialog, response_id) {\n"
+"    _response_cb(messagedialog, response_id) {\n"
 "\n"
 "        // A simple switch that changes the main window's label\n"
 "        switch (response_id) {\n"
@@ -28508,8 +30305,7 @@ msgstr ""
 "        this._messageDialog.destroy();\n"
 "\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new MessageDialogExample ();\n"
@@ -29256,7 +31052,7 @@ msgstr ""
 #: C/model-view-controller.py.page:110
 msgid ""
 "<code>set_wrap_width(width)</code> sets the wrap width of this combo box to be <code>width</code>. The wrap 
width "
-"is basically the preferred number of columns when you want the popup to be layed out in a grid."
+"is basically the preferred number of columns when you want the popup to be laid out in a grid."
 msgstr ""
 
 #. (itstool) path: section/p
@@ -29486,21 +31282,8 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkTreeViewColumn.
 msgid "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkCellRenderer.html\";>GtkCellRenderer</link>"
 msgstr "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkCellRenderer.html\";>GtkCellRenderer</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/paned.c.page:22 C/paned.js.page:22 C/paned.py.page:23 C/paned.vala.page:22
-#| msgctxt "_"
-#| msgid "external ref='media/paned.png' md5='01e36d8a51ee18313616d63d2e15d993'"
-msgctxt "_"
-msgid "external ref='media/paned.png' md5='8c7e1df065395c9aafcd65036a293d8a'"
-msgstr "external ref='media/paned.png' md5='8c7e1df065395c9aafcd65036a293d8a'"
-
 #. (itstool) path: info/title
 #: C/paned.c.page:8
-#| msgid "Python"
 msgctxt "text"
 msgid "Paned (C)"
 msgstr "Paned (C)"
@@ -29515,6 +31298,16 @@ msgstr ""
 msgid "Paned"
 msgstr "Paned"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/paned.c.page:22 C/paned.js.page:22 C/paned.py.page:23 C/paned.vala.page:22
+msgctxt "_"
+msgid "external ref='media/paned.png' md5='8c7e1df065395c9aafcd65036a293d8a'"
+msgstr "external ref='media/paned.png' md5='8c7e1df065395c9aafcd65036a293d8a'"
+
 #. (itstool) path: page/p
 #: C/paned.c.page:23 C/paned.js.page:23 C/paned.py.page:24 C/paned.vala.page:23
 msgid "Two images in two adjustable panes, horizontally aligned."
@@ -29620,8 +31413,6 @@ msgstr ""
 
 #. (itstool) path: info/title
 #: C/paned.js.page:8
-#| msgctxt "text"
-#| msgid "Image (JavaScript)"
 msgctxt "text"
 msgid "Paned (JavaScript)"
 msgstr "Paned (JavaScript)"
@@ -29629,36 +31420,97 @@ msgstr "Paned (JavaScript)"
 #. (itstool) path: section/code
 #: C/paned.js.page:29
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const PanedExample = new Lang.Class ({\n"
+#| "    Name: 'Paned Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });\n"
+#| "\n"
+#| "       // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this.window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "        // Create the application window\n"
+#| "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                    title: \"Paned Window Example\",\n"
+#| "                                                    default_width: 450,\n"
+#| "                                                    default_height: 350,\n"
+#| "                                                    border_width: 10 });\n"
+#| "\n"
+#| "        // a new widget with two adjustable panes,\n"
+#| "        // one on the left and one on the right\n"
+#| "        this.paned = Gtk.Paned.new(Gtk.Orientation.HORIZONTAL);\n"
+#| "\n"
+#| "        // two images\n"
+#| "        this.image1 = new Gtk.Image();\n"
+#| "        this.image1.set_from_file(\"gnome-image.png\");\n"
+#| "        this.image2 = new Gtk.Image();\n"
+#| "        this.image2.set_from_file(\"tux.png\");\n"
+#| "\n"
+#| "        // add the first image to the left pane\n"
+#| "        this.paned.add1(this.image1);\n"
+#| "        // add the second image to the right pane\n"
+#| "        this.paned.add2(this.image2)\n"
+#| "\n"
+#| "        // add the panes to the window\n"
+#| "        this.window.add(this.paned)\n"
+#| "        this.window.show_all();\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new PanedExample();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const PanedExample = new Lang.Class ({\n"
-"    Name: 'Paned Example',\n"
+"class PanedExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });\n"
 "\n"
 "       // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
@@ -29686,7 +31538,7 @@ msgid ""
 "        this.window.add(this.paned)\n"
 "        this.window.show_all();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new PanedExample();\n"
@@ -29694,33 +31546,32 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const PanedExample = new Lang.Class ({\n"
-"    Name: 'Paned Example',\n"
+"class PanedExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({ application_id: 'org.example.panedexample' });\n"
 "\n"
 "       // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
 "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
@@ -29748,7 +31599,7 @@ msgstr ""
 "        this.window.add(this.paned)\n"
 "        this.window.show_all();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new PanedExample();\n"
@@ -29766,7 +31617,6 @@ msgstr "<link href=\"http://www.roojs.com/seed/gir-1.2-gtk-3.0/gjs/Gtk.Image.htm
 
 #. (itstool) path: info/title
 #: C/paned.py.page:8
-#| msgid "Python"
 msgctxt "text"
 msgid "Paned (Python)"
 msgstr "Paned (Python)"
@@ -29774,45 +31624,6 @@ msgstr "Paned (Python)"
 #. (itstool) path: section/code
 #: C/paned.py.page:30
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -29919,8 +31730,6 @@ msgstr ""
 
 #. (itstool) path: info/title
 #: C/paned.vala.page:8
-#| msgctxt "text"
-#| msgid "Window (Vala)"
 msgctxt "text"
 msgid "Paned (Vala)"
 msgstr "Paned (Vala)"
@@ -30003,30 +31812,9 @@ msgstr ""
 
 #. (itstool) path: item/p
 #: C/paned.vala.page:36
-#| msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkRange.html\";>GtkRange</link>"
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Paned.html\";>GtkPaned</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Paned.html\";>GtkPaned</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/photo-wall.c.page:84
-msgctxt "_"
-msgid "external ref='media/photo-wall.png' md5='f19590d97e8ec029cda3c44b769c11cd'"
-msgstr "@@image: 'media/photo-wall.png'; md5=f19590d97e8ec029cda3c44b769c11cd"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/photo-wall.c.page:87
-msgctxt "_"
-msgid "external ref='media/photo-wall-focused.png' md5='9f1ceecf3a28c1e468597b093a10cbae'"
-msgstr "@@image: 'media/photo-wall-focused.png'; md5=9f1ceecf3a28c1e468597b093a10cbae"
-
 #. (itstool) path: info/title
 #: C/photo-wall.c.page:7
 msgctxt "text"
@@ -30130,6 +31918,16 @@ msgstr ""
 msgid "Our image viewer presents the user with a wall of images."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/photo-wall.c.page:84
+msgctxt "_"
+msgid "external ref='media/photo-wall.png' md5='f19590d97e8ec029cda3c44b769c11cd'"
+msgstr "external ref='media/photo-wall.png' md5='f19590d97e8ec029cda3c44b769c11cd'"
+
 #. (itstool) path: section/p
 #: C/photo-wall.c.page:85
 msgid ""
@@ -30137,6 +31935,16 @@ msgid ""
 "returned to its original position using an animation with the same duration of 500 milliseconds."
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/photo-wall.c.page:87
+msgctxt "_"
+msgid "external ref='media/photo-wall-focused.png' md5='9f1ceecf3a28c1e468597b093a10cbae'"
+msgstr "external ref='media/photo-wall-focused.png' md5='9f1ceecf3a28c1e468597b093a10cbae'"
+
 #. (itstool) path: section/title
 #: C/photo-wall.c.page:91
 msgid "Initial setup"
@@ -30879,16 +32687,6 @@ msgid ""
 "\">reference code</link>."
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/progressbar.c.page:24 C/progressbar.vala.page:22
-msgctxt "_"
-msgid "external ref='media/progressbar_fill.ogv' md5='287763d1d3f4a328212ea2243910f5e4'"
-msgstr "external ref='media/progressbar_fill.ogv' md5='287763d1d3f4a328212ea2243910f5e4'"
-
 #. (itstool) path: info/title
 #: C/progressbar.c.page:8
 msgctxt "text"
@@ -30905,6 +32703,16 @@ msgstr ""
 msgid "ProgressBar"
 msgstr "ProgressBar"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/progressbar.c.page:24 C/progressbar.vala.page:22
+msgctxt "_"
+msgid "external ref='media/progressbar_fill.ogv' md5='287763d1d3f4a328212ea2243910f5e4'"
+msgstr "external ref='media/progressbar_fill.ogv' md5='287763d1d3f4a328212ea2243910f5e4'"
+
 #. (itstool) path: page/p
 #: C/progressbar.c.page:25 C/progressbar.vala.page:23
 msgid "This ProgressBar \"fills in\" by a fraction of the bar until it is full."
@@ -31063,16 +32871,6 @@ msgid ""
 msgstr ""
 "<link 
href=\"http://developer.gnome.org/glib/stable/glib-The-Main-Event-Loop.html#g-timeout-add\";>G_Timeout</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/progressbar.js.page:21 C/progressbar.py.page:23
-msgctxt "_"
-msgid "external ref='media/progressbar.ogv' md5='36deab3dd4b5be968828fa2ef416d612'"
-msgstr "external ref='media/progressbar.ogv' md5='36deab3dd4b5be968828fa2ef416d612'"
-
 #. (itstool) path: info/title
 #: C/progressbar.js.page:7
 msgctxt "text"
@@ -31084,6 +32882,16 @@ msgstr "ProgressBar (JavaScript)"
 msgid "A bar which animates to indicate progress"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/progressbar.js.page:21 C/progressbar.py.page:23
+msgctxt "_"
+msgid "external ref='media/progressbar.ogv' md5='36deab3dd4b5be968828fa2ef416d612'"
+msgstr "external ref='media/progressbar.ogv' md5='36deab3dd4b5be968828fa2ef416d612'"
+
 #. (itstool) path: div/p
 #: C/progressbar.js.page:25 C/progressbar.py.page:27
 msgid "Pressing any key stops and starts this ProgressBar."
@@ -31097,43 +32905,123 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/progressbar.js.page:34
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ProgressBarExample = new Lang.Class({\n"
+#| "    Name: 'ProgressBar Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "        _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsprogressbar',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "            this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
+#| "                                                       window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                       default_height: 20,\n"
+#| "                                                       default_width: 220,\n"
+#| "                                                       title: \"ProgressBar Example\"});\n"
+#| "\n"
+#| "        // Create the progress bar\n"
+#| "        this.progressBar = new Gtk.ProgressBar ();\n"
+#| "        this._window.add(this.progressBar);\n"
+#| "\n"
+#| "        // Start the function that pulses the bar every 100 milliseconds\n"
+#| "        this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));\n"
+#| "\n"
+#| "        // Connect a keypress event to the function that toggles the bar to start or stop pulsing\n"
+#| "        this._window.connect(\"key-press-event\", Lang.bind(this, this._onKeyPress));\n"
+#| "\n"
+#| "            // Show the window and all child widgets\n"
+#| "            this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Pulse the progressbar (unless it has been disabled by a keypress)\n"
+#| "    _barPulse: function() {\n"
+#| "        this.progressBar.pulse();\n"
+#| "        return true;\n"
+#| "    },\n"
+#| "\n"
+#| "    // Start or stop the progressbar when a key is pressed\n"
+#| "    _onKeyPress: function() {\n"
+#| "        if (this.sourceID == 0)\n"
+#| "            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, 
this._barPulse));\n"
+#| "        else {\n"
+#| "            GLib.source_remove(this.sourceID);\n"
+#| "            this.sourceID = 0;\n"
+#| "        }\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ProgressBarExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ProgressBarExample = new Lang.Class({\n"
-"    Name: 'ProgressBar Example',\n"
+"class ProgressBarExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsprogressbar',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
@@ -31147,34 +33035,34 @@ msgid ""
 "        this._window.add(this.progressBar);\n"
 "\n"
 "        // Start the function that pulses the bar every 100 milliseconds\n"
-"        this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));\n"
+"        this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100,\n"
+"                                         this._barPulse.bind(this));\n"
 "\n"
 "        // Connect a keypress event to the function that toggles the bar to start or stop pulsing\n"
-"        this._window.connect(\"key-press-event\", Lang.bind(this, this._onKeyPress));\n"
+"        this._window.connect(\"key-press-event\", this._onKeyPress.bind(this));\n"
 "\n"
 "            // Show the window and all child widgets\n"
 "            this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Pulse the progressbar (unless it has been disabled by a keypress)\n"
-"    _barPulse: function() {\n"
+"    _barPulse() {\n"
 "        this.progressBar.pulse();\n"
 "        return true;\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Start or stop the progressbar when a key is pressed\n"
-"    _onKeyPress: function() {\n"
+"    _onKeyPress() {\n"
 "        if (this.sourceID == 0)\n"
-"            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, 
this._barPulse));\n"
+"            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100,\n"
+"                                             this._barPulse.bind(this));\n"
 "        else {\n"
 "            GLib.source_remove(this.sourceID);\n"
 "            this.sourceID = 0;\n"
 "        }\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ProgressBarExample ();\n"
@@ -31182,40 +33070,38 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ProgressBarExample = new Lang.Class({\n"
-"    Name: 'ProgressBar Example',\n"
+"class ProgressBarExample {\n"
 "\n"
 "    // Create the application itself\n"
-"        _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsprogressbar',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "            this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
@@ -31229,34 +33115,34 @@ msgstr ""
 "        this._window.add(this.progressBar);\n"
 "\n"
 "        // Start the function that pulses the bar every 100 milliseconds\n"
-"        this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, this._barPulse));\n"
+"        this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100,\n"
+"                                         this._barPulse.bind(this));\n"
 "\n"
 "        // Connect a keypress event to the function that toggles the bar to start or stop pulsing\n"
-"        this._window.connect(\"key-press-event\", Lang.bind(this, this._onKeyPress));\n"
+"        this._window.connect(\"key-press-event\", this._onKeyPress.bind(this));\n"
 "\n"
 "            // Show the window and all child widgets\n"
 "            this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
 "    // Pulse the progressbar (unless it has been disabled by a keypress)\n"
-"    _barPulse: function() {\n"
+"    _barPulse() {\n"
 "        this.progressBar.pulse();\n"
 "        return true;\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Start or stop the progressbar when a key is pressed\n"
-"    _onKeyPress: function() {\n"
+"    _onKeyPress() {\n"
 "        if (this.sourceID == 0)\n"
-"            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100, Lang.bind(this, 
this._barPulse));\n"
+"            this.sourceID = GLib.timeout_add(GLib.PRIORITY_DEFAULT, 100,\n"
+"                                             this._barPulse.bind(this));\n"
 "        else {\n"
 "            GLib.source_remove(this.sourceID);\n"
 "            this.sourceID = 0;\n"
 "        }\n"
 "    }\n"
 "\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ProgressBarExample ();\n"
@@ -31631,16 +33517,6 @@ msgstr ""
 msgid "Tutorial for beginners"
 msgstr "Tutorial für Einsteiger"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/radiobutton.c.page:25 C/radiobutton.py.page:24 C/radiobutton.vala.page:25
-msgctxt "_"
-msgid "external ref='media/radiobutton.png' md5='d115460280d8e41493dd98054b5822a5'"
-msgstr "external ref='media/radiobutton.png' md5='d115460280d8e41493dd98054b5822a5'"
-
 #. (itstool) path: info/title
 #: C/radiobutton.c.page:8
 msgctxt "text"
@@ -31657,6 +33533,16 @@ msgstr ""
 msgid "RadioButton"
 msgstr "Auswahlknopf"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/radiobutton.c.page:25 C/radiobutton.py.page:24 C/radiobutton.vala.page:25
+msgctxt "_"
+msgid "external ref='media/radiobutton.png' md5='d115460280d8e41493dd98054b5822a5'"
+msgstr "external ref='media/radiobutton.png' md5='d115460280d8e41493dd98054b5822a5'"
+
 #. (itstool) path: page/p
 #: C/radiobutton.c.page:26
 msgid "These radiobuttons report their activity in the terminal."
@@ -31869,19 +33755,8 @@ msgstr ""
 msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkSwitch.html\";>GtkSwitch</link>"
 msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkSwitch.html\";>GtkSwitch</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/radiobutton.js.page:22
-msgctxt "_"
-msgid "external ref='media/radiobuttontravel.png' md5='0c5f01ee160bb42716ccf5dccbd080c0'"
-msgstr "external ref='media/radiobuttontravel.png' md5='0c5f01ee160bb42716ccf5dccbd080c0'"
-
 #. (itstool) path: info/title
 #: C/radiobutton.js.page:8
-#| msgid "Classes in JavaScript"
 msgctxt "text"
 msgid "RadioButton (JavaScript)"
 msgstr "RadioButton (JavaScript)"
@@ -31891,6 +33766,16 @@ msgstr "RadioButton (JavaScript)"
 msgid "Only one can be selected at a time"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/radiobutton.js.page:22
+msgctxt "_"
+msgid "external ref='media/radiobuttontravel.png' md5='0c5f01ee160bb42716ccf5dccbd080c0'"
+msgstr "external ref='media/radiobuttontravel.png' md5='0c5f01ee160bb42716ccf5dccbd080c0'"
+
 #. (itstool) path: page/p
 #: C/radiobutton.js.page:23
 msgid ""
@@ -32221,6 +34106,20 @@ msgid ""
 "to the window."
 msgstr ""
 
+#. (itstool) path: section/code
+#: C/radiobutton.js.page:170
+#, no-wrap
+msgid ""
+"\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
+"    },\n"
+msgstr ""
+"\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
+"    },\n"
+
 #. (itstool) path: section/p
 #: C/radiobutton.js.page:176
 msgid "Finally, we tell the window and everything inside it to become visible when the application is run."
@@ -32426,42 +34325,229 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/radiobutton.js.page:270
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const RadioButtonExample = new Lang.Class({\n"
+#| "    Name: 'RadioButton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsradiobutton',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"Travel Planning\"});\n"
+#| "\n"
+#| "        // Create a label for the first group of buttons\n"
+#| "        this._placeLabel = new Gtk.Label ({label: \"Where would you like to travel to?\"});\n"
+#| "\n"
+#| "        // Create three radio buttons three different ways\n"
+#| "        this._place1 = new Gtk.RadioButton ({label: \"The Beach\"});\n"
+#| "\n"
+#| "        this._place2 = Gtk.RadioButton.new_from_widget (this._place1);\n"
+#| "        this._place2.set_label (\"The Moon\");\n"
+#| "\n"
+#| "        this._place3 = Gtk.RadioButton.new_with_label_from_widget (this._place1, \"Antarctica\");\n"
+#| "        // this._place3.set_active (true);\n"
+#| "\n"
+#| "        // Create a label for the second group of buttons\n"
+#| "        this._thingLabel = new Gtk.Label ({label: \"And what would you like to bring?\" });\n"
+#| "\n"
+#| "        // Create three more radio buttons\n"
+#| "        this._thing1 = new Gtk.RadioButton ({label: \"Penguins\" });\n"
+#| "        this._thing2 = new Gtk.RadioButton ({label: \"Sunscreen\", group: this._thing1 });\n"
+#| "        this._thing3 = new Gtk.RadioButton ({label: \"A spacesuit\", group: this._thing1 });\n"
+#| "\n"
+#| "        // Create a stock OK button\n"
+#| "        this._okButton = new Gtk.Button ({\n"
+#| "            label: 'gtk-ok',\n"
+#| "            use_stock: 'true',\n"
+#| "            halign: Gtk.Align.END });\n"
+#| "\n"
+#| "        // Connect the button to the function which handles clicking it\n"
+#| "        this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));\n"
+#| "\n"
+#| "        // Create a grid to put the \"place\" items in\n"
+#| "        this._places = new Gtk.Grid ();\n"
+#| "\n"
+#| "        // Attach the \"place\" items to the grid\n"
+#| "        this._places.attach (this._placeLabel, 0, 0, 1, 1);\n"
+#| "        this._places.attach (this._place1, 0, 1, 1, 1);\n"
+#| "        this._places.attach (this._place2, 0, 2, 1, 1);\n"
+#| "        this._places.attach (this._place3, 0, 3, 1, 1);\n"
+#| "\n"
+#| "        // Create a grid to put the \"thing\" items in\n"
+#| "        this._things = new Gtk.Grid ({ margin_top: 50 });\n"
+#| "\n"
+#| "        // Attach the \"thing\" items to the grid\n"
+#| "        this._things.attach (this._thingLabel, 0, 0, 1, 1);\n"
+#| "        this._things.attach (this._thing1, 0, 1, 1, 1);\n"
+#| "        this._things.attach (this._thing2, 0, 2, 1, 1);\n"
+#| "        this._things.attach (this._thing3, 0, 3, 1, 1);\n"
+#| "\n"
+#| "        // Create a grid to put everything in\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            margin_left: 40,\n"
+#| "            margin_right: 50 });\n"
+#| "\n"
+#| "        // Attach everything to the grid\n"
+#| "        this._grid.attach (this._places, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._things, 0, 1, 1, 1);\n"
+#| "        this._grid.attach (this._okButton, 0, 2, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _okClicked: function () {\n"
+#| "\n"
+#| "        // Create a popup that shows a silly message\n"
+#| "        this._travel = new Gtk.MessageDialog ({\n"
+#| "            transient_for: this._window,\n"
+#| "            modal: true,\n"
+#| "            message_type: Gtk.MessageType.OTHER,\n"
+#| "            buttons: Gtk.ButtonsType.OK,\n"
+#| "            text: this._messageText() });\n"
+#| "\n"
+#| "        // Show the popup\n"
+#| "        this._travel.show();\n"
+#| "\n"
+#| "        // Bind the OK button to the function that closes the popup\n"
+#| "        this._travel.connect (\"response\", Lang.bind (this, this._clearTravelPopUp));\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _messageText: function() {\n"
+#| "\n"
+#| "        // Create a silly message for the popup depending on what you selected\n"
+#| "        var stringMessage = \"\";\n"
+#| "\n"
+#| "        if (this._place1.get_active()) {\n"
+#| "\n"
+#| "            if (this._thing1.get_active())\n"
+#| "                stringMessage = \"Penguins love the beach, too!\";\n"
+#| "\n"
+#| "            else if (this._thing2.get_active())\n"
+#| "                stringMessage = \"Make sure to put on that sunscreen!\";\n"
+#| "\n"
+#| "            else stringMessage = \"Are you going to the beach in space?\";\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "        else if (this._place2.get_active()) {\n"
+#| "\n"
+#| "            if (this._thing1.get_active())\n"
+#| "                stringMessage = \"The penguins will take over the moon!\";\n"
+#| "\n"
+#| "            else if (this._thing2.get_active())\n"
+#| "                stringMessage = \"A lack of sunscreen will be the least of your problems!\";\n"
+#| "\n"
+#| "            else stringMessage = \"You'll probably want a spaceship, too!\";\n"
+#| "        }\n"
+#| "\n"
+#| "        else if (this._place3.get_active()) {\n"
+#| "\n"
+#| "            if (this._thing1.get_active())\n"
+#| "                stringMessage = \"The penguins will be happy to be back home!\";\n"
+#| "\n"
+#| "            else if (this._thing2.get_active())\n"
+#| "                stringMessage = \"Antarctic sunbathing may be hazardous to your health!\";\n"
+#| "\n"
+#| "            else stringMessage = \"Try bringing a parka instead!\";\n"
+#| "        }\n"
+#| "\n"
+#| "        return stringMessage;\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _clearTravelPopUp: function () {\n"
+#| "\n"
+#| "        this._travel.destroy();\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new RadioButtonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const RadioButtonExample = new Lang.Class({\n"
-"    Name: 'RadioButton Example',\n"
+"class RadioButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsradiobutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -32497,7 +34583,7 @@ msgid ""
 "            halign: Gtk.Align.END });\n"
 "\n"
 "        // Connect the button to the function which handles clicking it\n"
-"        this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));\n"
+"        this._okButton.connect ('clicked', this._okClicked.bind(this));\n"
 "\n"
 "        // Create a grid to put the \"place\" items in\n"
 "        this._places = new Gtk.Grid ();\n"
@@ -32534,11 +34620,9 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
+"    }\n"
 "\n"
-"\n"
-"    _okClicked: function () {\n"
+"    _okClicked() {\n"
 "\n"
 "        // Create a popup that shows a silly message\n"
 "        this._travel = new Gtk.MessageDialog ({\n"
@@ -32552,13 +34636,11 @@ msgid ""
 "        this._travel.show();\n"
 "\n"
 "        // Bind the OK button to the function that closes the popup\n"
-"        this._travel.connect (\"response\", Lang.bind (this, this._clearTravelPopUp));\n"
-"\n"
-"    },\n"
-"\n"
+"        this._travel.connect (\"response\", this._clearTravelPopUp.bind(this));\n"
 "\n"
+"    }\n"
 "\n"
-"    _messageText: function() {\n"
+"    _messageText() {\n"
 "\n"
 "        // Create a silly message for the popup depending on what you selected\n"
 "        var stringMessage = \"\";\n"
@@ -32599,18 +34681,12 @@ msgid ""
 "\n"
 "        return stringMessage;\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"\n"
-"    _clearTravelPopUp: function () {\n"
+"    }\n"
 "\n"
+"    _clearTravelPopUp() {\n"
 "        this._travel.destroy();\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new RadioButtonExample ();\n"
@@ -32618,39 +34694,37 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const RadioButtonExample = new Lang.Class({\n"
-"    Name: 'RadioButton Example',\n"
+"class RadioButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsradiobutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -32686,7 +34760,7 @@ msgstr ""
 "            halign: Gtk.Align.END });\n"
 "\n"
 "        // Connect the button to the function which handles clicking it\n"
-"        this._okButton.connect ('clicked', Lang.bind (this, this._okClicked));\n"
+"        this._okButton.connect ('clicked', this._okClicked.bind(this));\n"
 "\n"
 "        // Create a grid to put the \"place\" items in\n"
 "        this._places = new Gtk.Grid ();\n"
@@ -32723,11 +34797,9 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
+"    }\n"
 "\n"
-"\n"
-"    _okClicked: function () {\n"
+"    _okClicked() {\n"
 "\n"
 "        // Create a popup that shows a silly message\n"
 "        this._travel = new Gtk.MessageDialog ({\n"
@@ -32741,13 +34813,11 @@ msgstr ""
 "        this._travel.show();\n"
 "\n"
 "        // Bind the OK button to the function that closes the popup\n"
-"        this._travel.connect (\"response\", Lang.bind (this, this._clearTravelPopUp));\n"
-"\n"
-"    },\n"
-"\n"
+"        this._travel.connect (\"response\", this._clearTravelPopUp.bind(this));\n"
 "\n"
+"    }\n"
 "\n"
-"    _messageText: function() {\n"
+"    _messageText() {\n"
 "\n"
 "        // Create a silly message for the popup depending on what you selected\n"
 "        var stringMessage = \"\";\n"
@@ -32788,18 +34858,12 @@ msgstr ""
 "\n"
 "        return stringMessage;\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"\n"
-"    _clearTravelPopUp: function () {\n"
+"    }\n"
 "\n"
+"    _clearTravelPopUp() {\n"
 "        this._travel.destroy();\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new RadioButtonExample ();\n"
@@ -32845,63 +34909,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/radiobutton.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -33253,16 +35260,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.RadioButton.html\";>Gtk.RadioButton</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.RadioButton.html\";>Gtk.RadioButton</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/record-collection.js.page:70
-msgctxt "_"
-msgid "external ref='media/record-collection.png' md5='2d645997687ed5aacd36aafafc16e072'"
-msgstr "@@image: 'media/record-collection.png'; md5=2d645997687ed5aacd36aafafc16e072"
-
 #. (itstool) path: info/title
 #: C/record-collection.js.page:8
 msgctxt "text"
@@ -33332,6 +35329,16 @@ msgstr ""
 msgid "Program Structure"
 msgstr "Programmstruktur"
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/record-collection.js.page:70
+msgctxt "_"
+msgid "external ref='media/record-collection.png' md5='2d645997687ed5aacd36aafafc16e072'"
+msgstr "external ref='media/record-collection.png' md5='2d645997687ed5aacd36aafafc16e072'"
+
 #. (itstool) path: section/p
 #: C/record-collection.js.page:71
 msgid ""
@@ -34035,16 +36042,6 @@ msgstr "ResponseType.HELP = -11"
 msgid "Returned by Help buttons in GTK+ dialogs"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/scale.c.page:25
-msgctxt "_"
-msgid "external ref='media/scale2.png' md5='ae2ba0a6675f3d9cdcd961cdf32f1a5c'"
-msgstr "external ref='media/scale2.png' md5='ae2ba0a6675f3d9cdcd961cdf32f1a5c'"
-
 #. (itstool) path: info/title
 #: C/scale.c.page:8
 msgctxt "text"
@@ -34061,6 +36058,16 @@ msgstr ""
 msgid "Scale"
 msgstr "Scale"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/scale.c.page:25
+msgctxt "_"
+msgid "external ref='media/scale2.png' md5='ae2ba0a6675f3d9cdcd961cdf32f1a5c'"
+msgstr "external ref='media/scale2.png' md5='ae2ba0a6675f3d9cdcd961cdf32f1a5c'"
+
 #. (itstool) path: page/p
 #: C/scale.c.page:26 C/scale.py.page:25 C/scale.vala.page:25
 msgid "Slide the scales!"
@@ -34410,19 +36417,8 @@ msgstr ""
 "<link 
href=\"http://developer.gnome.org/glib/stable/glib-String-Utility-Functions.html#g-strdup-printf\";>String "
 "Utility Functions</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/scale.js.page:22
-msgctxt "_"
-msgid "external ref='media/scalepenguins.png' md5='2dbe6a833fec86fde71a5ddb421e2cd5'"
-msgstr "external ref='media/scalepenguins.png' md5='2dbe6a833fec86fde71a5ddb421e2cd5'"
-
 #. (itstool) path: info/title
 #: C/scale.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "Scale (JavaScript)"
 msgstr "Scale (JavaScript)"
@@ -34432,6 +36428,16 @@ msgstr "Scale (JavaScript)"
 msgid "A slider which corresponds to a numerical value"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/scale.js.page:22
+msgctxt "_"
+msgid "external ref='media/scalepenguins.png' md5='2dbe6a833fec86fde71a5ddb421e2cd5'"
+msgstr "external ref='media/scalepenguins.png' md5='2dbe6a833fec86fde71a5ddb421e2cd5'"
+
 #. (itstool) path: page/p
 #: C/scale.js.page:23
 msgid ""
@@ -34843,41 +36849,168 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/scale.js.page:204
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ScaleExample = new Lang.Class({\n"
+#| "    Name: 'Scale Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsscale'\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"Birds on a Floe\"});\n"
+#| "\n"
+#| "        // Create the horizontal scale\n"
+#| "        this._hScale = Gtk.Scale.new_with_range (Gtk.Orientation.HORIZONTAL, 0.0, 100.0, 5.0);\n"
+#| "        this._hScale.set_valign (Gtk.Align.START);\n"
+#| "        this._hScale.set_value (50);\n"
+#| "        this._hScale.set_digits (0);\n"
+#| "        // this._hScale.set_draw_value (false);\n"
+#| "\n"
+#| "        // Create a master adjustment to use for the vertical (or any other) scale\n"
+#| "        this._adjustment = new Gtk.Adjustment ({\n"
+#| "            value: 95,\n"
+#| "            lower: 0,\n"
+#| "            upper: 100,\n"
+#| "            step_increment: 5,\n"
+#| "            page_increment: 10 });\n"
+#| "\n"
+#| "        // Create a vertical scale using the adjustment we just made\n"
+#| "        this._vScale = new Gtk.Scale ({\n"
+#| "            orientation: Gtk.Orientation.VERTICAL,\n"
+#| "            adjustment: this._adjustment,\n"
+#| "            digits: 0,\n"
+#| "            // draw_value: false,\n"
+#| "            margin_left: 10 });\n"
+#| "\n"
+#| "        // Create the label that shows the product of the two values\n"
+#| "        this._product = (this._hScale.get_value() * this._vScale.get_value());\n"
+#| "        this._label = new Gtk.Label ({\n"
+#| "            label: (String(this._product) + \" penguins on the iceberg.\"),\n"
+#| "            height_request: 200,\n"
+#| "            width_request: 200,\n"
+#| "            wrap: true});\n"
+#| "\n"
+#| "        // Connect the two scales to functions which recalculate the label\n"
+#| "        this._hScale.connect (\"value-changed\", Lang.bind (this, this._recalc));\n"
+#| "        this._vScale.connect (\"value-changed\", Lang.bind (this, this._recalc));\n"
+#| "\n"
+#| "        // Create a grid to arrange things in\n"
+#| "        this._UIGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            margin_top: 20,\n"
+#| "            margin_left: 20});\n"
+#| "\n"
+#| "        // Attach everything to the grid\n"
+#| "        this._UIGrid.attach (this._label, 0, 0, 1, 1);\n"
+#| "        this._UIGrid.attach (this._hScale, 0, 1, 1, 1);\n"
+#| "        this._UIGrid.attach (this._vScale, 1, 0, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._UIGrid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _recalc: function() {\n"
+#| "\n"
+#| "        // Figure out what the product of the two scales' values is\n"
+#| "        var product = (this._hScale.get_value() * this._vScale.get_value());\n"
+#| "\n"
+#| "        // Create a blank comment line in case there isn't a silly comment to make\n"
+#| "        var comment = \"\";\n"
+#| "\n"
+#| "        // Make a silly comment based on the number of penguins\n"
+#| "        if (product &gt; 9000) {\n"
+#| "            comment = \"It's over 9000!\";\n"
+#| "        }\n"
+#| "        else if (product &lt; 1000 &amp;&amp; product &gt; 0) {\n"
+#| "            comment = \"They're getting lonely.\";\n"
+#| "        }\n"
+#| "        else if (product == 0) {\n"
+#| "            comment = \"They're all gone ...\";\n"
+#| "        }\n"
+#| "        else comment = \"\";\n"
+#| "\n"
+#| "        // Set ._label's new text\n"
+#| "        this._label.set_label (String (product) + \" penguins on the iceberg. \" + comment);\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ScaleExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ScaleExample = new Lang.Class({\n"
-"    Name: 'Scale Example',\n"
+"class ScaleExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsscale'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -34918,8 +37051,8 @@ msgid ""
 "            wrap: true});\n"
 "\n"
 "        // Connect the two scales to functions which recalculate the label\n"
-"        this._hScale.connect (\"value-changed\", Lang.bind (this, this._recalc));\n"
-"        this._vScale.connect (\"value-changed\", Lang.bind (this, this._recalc));\n"
+"        this._hScale.connect (\"value-changed\", this._recalc.bind(this));\n"
+"        this._vScale.connect (\"value-changed\", this._recalc.bind(this));\n"
 "\n"
 "        // Create a grid to arrange things in\n"
 "        this._UIGrid = new Gtk.Grid ({\n"
@@ -34938,11 +37071,9 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _recalc: function() {\n"
+"    _recalc() {\n"
 "\n"
 "        // Figure out what the product of the two scales' values is\n"
 "        var product = (this._hScale.get_value() * this._vScale.get_value());\n"
@@ -34964,10 +37095,8 @@ msgid ""
 "\n"
 "        // Set ._label's new text\n"
 "        this._label.set_label (String (product) + \" penguins on the iceberg. \" + comment);\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ScaleExample ();\n"
@@ -34975,38 +37104,36 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ScaleExample = new Lang.Class({\n"
-"    Name: 'Scale Example',\n"
+"class ScaleExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsscale'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -35047,8 +37174,8 @@ msgstr ""
 "            wrap: true});\n"
 "\n"
 "        // Connect the two scales to functions which recalculate the label\n"
-"        this._hScale.connect (\"value-changed\", Lang.bind (this, this._recalc));\n"
-"        this._vScale.connect (\"value-changed\", Lang.bind (this, this._recalc));\n"
+"        this._hScale.connect (\"value-changed\", this._recalc.bind(this));\n"
+"        this._vScale.connect (\"value-changed\", this._recalc.bind(this));\n"
 "\n"
 "        // Create a grid to arrange things in\n"
 "        this._UIGrid = new Gtk.Grid ({\n"
@@ -35067,11 +37194,9 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _recalc: function() {\n"
+"    _recalc() {\n"
 "\n"
 "        // Figure out what the product of the two scales' values is\n"
 "        var product = (this._hScale.get_value() * this._vScale.get_value());\n"
@@ -35093,10 +37218,8 @@ msgstr ""
 "\n"
 "        // Set ._label's new text\n"
 "        this._label.set_label (String (product) + \" penguins on the iceberg. \" + comment);\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ScaleExample ();\n"
@@ -35112,7 +37235,13 @@ msgstr "<link href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Adjustmen
 msgid "<link href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Scale.html\";>Gtk.Scale</link>"
 msgstr "<link href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Scale.html\";>Gtk.Scale</link>"
 
-#. (itstool) path: media
+#. (itstool) path: info/title
+#: C/scale.py.page:8
+msgctxt "text"
+msgid "Scale (Python)"
+msgstr "Scale (Python)"
+
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -35122,13 +37251,6 @@ msgctxt "_"
 msgid "external ref='media/scale.png' md5='462c52a53b773cb9e8c62c646bf88452'"
 msgstr "external ref='media/scale.png' md5='462c52a53b773cb9e8c62c646bf88452'"
 
-#. (itstool) path: info/title
-#: C/scale.py.page:8
-#| msgid "Python"
-msgctxt "text"
-msgid "Scale (Python)"
-msgstr "Scale (Python)"
-
 #. (itstool) path: section/code
 #: C/scale.py.page:31
 #, no-wrap
@@ -35529,16 +37651,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.PositionType.html\";>Gtk
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Orientation.html\";>Gtk.Orientation</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Orientation.html\";>Gtk.Orientation</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/scrolledwindow.c.page:25 C/scrolledwindow.js.page:22 C/scrolledwindow.py.page:23 
C/scrolledwindow.vala.page:23
-msgctxt "_"
-msgid "external ref='media/scrolledwindow.png' md5='697bb3205d5c4fb0b4ea8db435843157'"
-msgstr "external ref='media/scrolledwindow.png' md5='697bb3205d5c4fb0b4ea8db435843157'"
-
 #. (itstool) path: info/title
 #: C/scrolledwindow.c.page:8
 msgctxt "text"
@@ -35555,6 +37667,16 @@ msgstr ""
 msgid "ScrolledWindow"
 msgstr "ScrolledWindow"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/scrolledwindow.c.page:25 C/scrolledwindow.js.page:22 C/scrolledwindow.py.page:23 
C/scrolledwindow.vala.page:23
+msgctxt "_"
+msgid "external ref='media/scrolledwindow.png' md5='697bb3205d5c4fb0b4ea8db435843157'"
+msgstr "external ref='media/scrolledwindow.png' md5='697bb3205d5c4fb0b4ea8db435843157'"
+
 #. (itstool) path: page/p
 #: C/scrolledwindow.c.page:26 C/scrolledwindow.js.page:23 C/scrolledwindow.py.page:24 
C/scrolledwindow.vala.page:24
 msgid "An image in a scrolled window."
@@ -35563,6 +37685,65 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/scrolledwindow.c.page:28
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#include &lt;gtk/gtk.h&gt;\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "static void\n"
+#| "activate (GtkApplication *app,\n"
+#| "          gpointer        user_data)\n"
+#| "{\n"
+#| "  /* Declare variables */\n"
+#| "  GtkWidget *window;\n"
+#| "  GtkWidget *scrolled_window;\n"
+#| "  GtkWidget *image;\n"
+#| "\n"
+#| "  /* Create a window with a title, and a default size */\n"
+#| "  window = gtk_application_window_new (app);\n"
+#| "  gtk_window_set_title (GTK_WINDOW (window), \"ScrolledWindow Example\");\n"
+#| "  gtk_window_set_default_size (GTK_WINDOW (window), 220, 200);\n"
+#| "\n"
+#| "  /* Create the scrolled window. Usually NULL is passed for both parameters so\n"
+#| "   * that it creates the horizontal/vertical adjustments automatically. Setting\n"
+#| "   * the scrollbar policy to automatic allows the scrollbars to only show up\n"
+#| "   * when needed.\n"
+#| "   */\n"
+#| "  scrolled_window = gtk_scrolled_window_new (NULL, NULL);\n"
+#| "  /* Set the border width */\n"
+#| "  gtk_container_set_border_width (GTK_CONTAINER (scrolled_window), 10);\n"
+#| "  /* Extract our desired image from a file that we have */\n"
+#| "  image = gtk_image_new_from_file (\"gnome-image.png\");\n"
+#| "  /* And add it to the scrolled window */\n"
+#| "  gtk_scrolled_window_add_with_viewport (GTK_SCROLLED_WINDOW (scrolled_window), image);\n"
+#| "  /* Set the policy of the horizontal and vertical scrollbars to automatic.\n"
+#| "   * What this means is that the scrollbars are only present if needed.\n"
+#| "   */\n"
+#| "  gtk_scrolled_window_set_policy (GTK_SCROLLED_WINDOW (scrolled_window),\n"
+#| "                                  GTK_POLICY_AUTOMATIC,\n"
+#| "                                  GTK_POLICY_AUTOMATIC);\n"
+#| "\n"
+#| "  gtk_container_add (GTK_CONTAINER (window), scrolled_window);\n"
+#| "\n"
+#| "  gtk_widget_show_all (window);\n"
+#| "}\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "int\n"
+#| "main (int argc, char **argv)\n"
+#| "{\n"
+#| "  GtkApplication *app;\n"
+#| "  int status;\n"
+#| "\n"
+#| "  app = gtk_application_new (\"org.gtk.example\", G_APPLICATION_FLAGS_NONE);\n"
+#| "  g_signal_connect (app, \"activate\", G_CALLBACK (activate), NULL);\n"
+#| "  status = g_application_run (G_APPLICATION (app), argc, argv);\n"
+#| "  g_object_unref (app);\n"
+#| "\n"
+#| "  return status;\n"
+#| "}\n"
 msgid ""
 "\n"
 "#include &lt;gtk/gtk.h&gt;\n"
@@ -35594,7 +37775,7 @@ msgid ""
 "  /* Extract our desired image from a file that we have */\n"
 "  image = gtk_image_new_from_file (\"gnome-image.png\");\n"
 "  /* And add it to the scrolled window */\n"
-"  gtk_scrolled_window_add_with_viewport (GTK_SCROLLED_WINDOW (scrolled_window), image);\n"
+"  gtk_container_add (GTK_CONTAINER (scrolled_window), image);\n"
 "  /* Set the policy of the horizontal and vertical scrollbars to automatic.\n"
 "   * What this means is that the scrollbars are only present if needed.\n"
 "   */\n"
@@ -35653,7 +37834,7 @@ msgstr ""
 "  /* Extract our desired image from a file that we have */\n"
 "  image = gtk_image_new_from_file (\"gnome-image.png\");\n"
 "  /* And add it to the scrolled window */\n"
-"  gtk_scrolled_window_add_with_viewport (GTK_SCROLLED_WINDOW (scrolled_window), image);\n"
+"  gtk_container_add (GTK_CONTAINER (scrolled_window), image);\n"
 "  /* Set the policy of the horizontal and vertical scrollbars to automatic.\n"
 "   * What this means is that the scrollbars are only present if needed.\n"
 "   */\n"
@@ -35693,8 +37874,6 @@ msgstr ""
 
 #. (itstool) path: info/title
 #: C/scrolledwindow.js.page:8
-#| msgctxt "text"
-#| msgid "Window (JavaScript)"
 msgctxt "text"
 msgid "ScrolledWindow (JavaScript)"
 msgstr "ScrolledWindow (JavaScript)"
@@ -35702,44 +37881,107 @@ msgstr "ScrolledWindow (JavaScript)"
 #. (itstool) path: section/code
 #: C/scrolledwindow.js.page:29
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const GObject = imports.gi.GObject;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ScrolledWindowExample = new Lang.Class ({\n"
+#| "    Name: 'ScrolledWindow Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application({ application_id: 'org.example.jscrolledwindow' });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this.window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "        // Create the application window\n"
+#| "        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
+#| "                                                    window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                    title: \"ScrolledWindow Example\",\n"
+#| "                                                    default_width: 200,\n"
+#| "                                                    default_height: 200,\n"
+#| "                                                    border_width: 10 });\n"
+#| "        // the scrolledwindow\n"
+#| "        this.scrolledWindow = new Gtk.ScrolledWindow();\n"
+#| "        this.scrolledWindow.set_border_width(10);\n"
+#| "        // there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
+#| "        this.scrolledWindow.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS);\n"
+#| "        // an image - slightly larger than the window\n"
+#| "        this.image = new Gtk.Image();\n"
+#| "        this.image.set_from_file(\"gnome-image.png\");\n"
+#| "\n"
+#| "        // add the image to the scrolledwindow\n"
+#| "        this.scrolledWindow.add_with_viewport(this.image);\n"
+#| "\n"
+#| "        // add the scrolledwindow to the window\n"
+#| "        this.window.add(this.scrolledWindow);\n"
+#| "        this.window.show_all();\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ScrolledWindowExample();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ScrolledWindowExample = new Lang.Class ({\n"
-"    Name: 'ScrolledWindow Example',\n"
+"class ScrolledWindowExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application({ application_id: 'org.example.jscrolledwindow' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jscrolledwindow'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
-"        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-"                                                    window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                    title: \"ScrolledWindow Example\",\n"
-"                                                    default_width: 200,\n"
-"                                                    default_height: 200,\n"
-"                                                    border_width: 10 });\n"
+"        this.window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"ScrolledWindow Example\",\n"
+"            default_width: 200,\n"
+"            default_height: 200,\n"
+"            border_width: 10\n"
+"        });\n"
 "        // the scrolledwindow\n"
 "        this.scrolledWindow = new Gtk.ScrolledWindow();\n"
 "        this.scrolledWindow.set_border_width(10);\n"
@@ -35756,7 +37998,7 @@ msgid ""
 "        this.window.add(this.scrolledWindow);\n"
 "        this.window.show_all();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ScrolledWindowExample();\n"
@@ -35764,41 +38006,45 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ScrolledWindowExample = new Lang.Class ({\n"
-"    Name: 'ScrolledWindow Example',\n"
+"class ScrolledWindowExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application({ application_id: 'org.example.jscrolledwindow' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jscrolledwindow'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
-"        this.window = new Gtk.ApplicationWindow  ({ application: this.application,\n"
-"                                                    window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                    title: \"ScrolledWindow Example\",\n"
-"                                                    default_width: 200,\n"
-"                                                    default_height: 200,\n"
-"                                                    border_width: 10 });\n"
+"        this.window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"ScrolledWindow Example\",\n"
+"            default_width: 200,\n"
+"            default_height: 200,\n"
+"            border_width: 10\n"
+"        });\n"
 "        // the scrolledwindow\n"
 "        this.scrolledWindow = new Gtk.ScrolledWindow();\n"
 "        this.scrolledWindow.set_border_width(10);\n"
@@ -35815,7 +38061,7 @@ msgstr ""
 "        this.window.add(this.scrolledWindow);\n"
 "        this.window.show_all();\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ScrolledWindowExample();\n"
@@ -35836,45 +38082,6 @@ msgstr "ScrolledWindow (Python)"
 #. (itstool) path: section/code
 #: C/scrolledwindow.py.page:30
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -36081,16 +38288,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.ScrolledWindow.html\";>G
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.PolicyType.html\";>Gtk.PolicyType</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.PolicyType.html\";>Gtk.PolicyType</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/separator.c.page:24 C/separator.py.page:25 C/separator.vala.page:26
-msgctxt "_"
-msgid "external ref='media/separator.png' md5='8769b27662ce5c77f99e9ce33751a21a'"
-msgstr "external ref='media/separator.png' md5='8769b27662ce5c77f99e9ce33751a21a'"
-
 #. (itstool) path: info/title
 #: C/separator.c.page:8
 msgctxt "text"
@@ -36107,6 +38304,16 @@ msgstr ""
 msgid "Separator"
 msgstr "Separator"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/separator.c.page:24 C/separator.py.page:25 C/separator.vala.page:26
+msgctxt "_"
+msgid "external ref='media/separator.png' md5='8769b27662ce5c77f99e9ce33751a21a'"
+msgstr "external ref='media/separator.png' md5='8769b27662ce5c77f99e9ce33751a21a'"
+
 #. (itstool) path: page/p
 #: C/separator.c.page:25 C/separator.py.page:26 C/separator.vala.page:27
 msgid "A horizontal and a vertical separator divide some labels."
@@ -36232,8 +38439,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkSeparator.html\
 
 #. (itstool) path: info/title
 #: C/separator.py.page:8
-#| msgctxt "text"
-#| msgid "Separator (C)"
 msgctxt "text"
 msgid "Separator (Python)"
 msgstr "Separator (Python)"
@@ -36241,63 +38446,6 @@ msgstr "Separator (Python)"
 #. (itstool) path: section/code
 #: C/separator.py.page:32
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -36399,8 +38547,6 @@ msgstr ""
 
 #. (itstool) path: info/title
 #: C/separator.vala.page:8
-#| msgctxt "text"
-#| msgid "Statusbar (Vala)"
 msgctxt "text"
 msgid "Separator (Vala)"
 msgstr "Separator (Vala)"
@@ -36517,26 +38663,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Grid.html\";>GtkGrid</li
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Label.html\";>GtkLabel</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Label.html\";>GtkLabel</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/set-up-gedit.js.page:25
-msgctxt "_"
-msgid "external ref='media/geditview.png' md5='f1438295662d95f56fcd1d8200efaaf2'"
-msgstr "external ref='media/geditview.png' md5='f1438295662d95f56fcd1d8200efaaf2'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/set-up-gedit.js.page:37
-msgctxt "_"
-msgid "external ref='media/gediteditor.png' md5='50db1ee8f2c545744879ee9fba5b4b24'"
-msgstr "external ref='media/gediteditor.png' md5='50db1ee8f2c545744879ee9fba5b4b24'"
-
 #. (itstool) path: page/title
 #: C/set-up-gedit.js.page:19
 msgid "Set up gedit for JavaScript development"
@@ -36561,6 +38687,16 @@ msgid ""
 "this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/set-up-gedit.js.page:25
+msgctxt "_"
+msgid "external ref='media/geditview.png' md5='f1438295662d95f56fcd1d8200efaaf2'"
+msgstr "external ref='media/geditview.png' md5='f1438295662d95f56fcd1d8200efaaf2'"
+
 #. (itstool) path: section/p
 #: C/set-up-gedit.js.page:26
 msgid "Here are the options you want to make sure are turned on."
@@ -36596,6 +38732,16 @@ msgid ""
 "In gedit's <gui>Preferences</gui> dialog, click on the <gui>Editor</gui> tab. You should see something like 
this:"
 msgstr ""
 
+#. (itstool) path: section/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/set-up-gedit.js.page:37
+msgctxt "_"
+msgid "external ref='media/gediteditor.png' md5='50db1ee8f2c545744879ee9fba5b4b24'"
+msgstr "external ref='media/gediteditor.png' md5='50db1ee8f2c545744879ee9fba5b4b24'"
+
 #. (itstool) path: section/p
 #: C/set-up-gedit.js.page:38
 msgid ""
@@ -36681,16 +38827,6 @@ msgid ""
 "link> in Python GTK+ 3 Tutorial"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/spinbutton.c.page:26 C/spinbutton.py.page:24 C/spinbutton.vala.page:24
-msgctxt "_"
-msgid "external ref='media/spinbutton.png' md5='993cbb7d9bd271a329727a926195712a'"
-msgstr "external ref='media/spinbutton.png' md5='993cbb7d9bd271a329727a926195712a'"
-
 #. (itstool) path: info/title
 #: C/spinbutton.c.page:8
 msgctxt "text"
@@ -36707,6 +38843,16 @@ msgstr ""
 msgid "SpinButton"
 msgstr "SpinButton"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/spinbutton.c.page:26 C/spinbutton.py.page:24 C/spinbutton.vala.page:24
+msgctxt "_"
+msgid "external ref='media/spinbutton.png' md5='993cbb7d9bd271a329727a926195712a'"
+msgstr "external ref='media/spinbutton.png' md5='993cbb7d9bd271a329727a926195712a'"
+
 #. (itstool) path: page/p
 #: C/spinbutton.c.page:27 C/spinbutton.py.page:25 C/spinbutton.vala.page:25
 msgid "Choose a number, by entering it or by clicking on the -/+ buttons!"
@@ -36913,19 +39059,8 @@ msgstr ""
 msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkSpinButton.html\";>GtkSpinButton</link>"
 msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkSpinButton.html\";>GtkSpinButton</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/spinbutton.js.page:25
-msgctxt "_"
-msgid "external ref='media/spinbuttonkittens.png' md5='577cce8a902140aacbab73fe8a76a010'"
-msgstr "external ref='media/spinbuttonkittens.png' md5='577cce8a902140aacbab73fe8a76a010'"
-
 #. (itstool) path: info/title
 #: C/spinbutton.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "SpinButton (JavaScript)"
 msgstr "SpinButton (JavaScript)"
@@ -36935,6 +39070,16 @@ msgstr "SpinButton (JavaScript)"
 msgid "A number entry field that has + and - buttons"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/spinbutton.js.page:25
+msgctxt "_"
+msgid "external ref='media/spinbuttonkittens.png' md5='577cce8a902140aacbab73fe8a76a010'"
+msgstr "external ref='media/spinbuttonkittens.png' md5='577cce8a902140aacbab73fe8a76a010'"
+
 #. (itstool) path: page/p
 #: C/spinbutton.js.page:26
 msgid ""
@@ -37321,155 +39466,153 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/spinbutton.js.page:195
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const SpinButtonExample = new Lang.Class({\n"
+#| "    Name: 'SpinButton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsspinbutton'\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"Kitten Feeder\"});\n"
+#| "\n"
+#| "        // Create the first spinbutton using a function\n"
+#| "        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);\n"
+#| "        this._kittens.connect (\"value-changed\", Lang.bind (this, this._newValue));\n"
+#| "\n"
+#| "        // Create an adjustment to use for the second spinbutton\n"
+#| "        this._adjustment = new Gtk.Adjustment ({\n"
+#| "            value: 1,\n"
+#| "            lower: 0,\n"
+#| "            upper: 9001,\n"
+#| "            step_increment: 1,\n"
+#| "            page_increment: 10 });\n"
+#| "\n"
+#| "        // Create the second spinbutton\n"
+#| "        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });\n"
+#| "        this._tuna.connect (\"value-changed\", Lang.bind (this, this._newValue));\n"
+#| "\n"
+#| "        // this._tuna.set_digits (1);\n"
+#| "        // this._tuna.set_wrap (true);\n"
+#| "\n"
+#| "        // Create the text labels to go with the spinbuttons\n"
+#| "        this._startLabel = new Gtk.Label ({ label: \"There are \" });\n"
+#| "        this._kittenLabel = new Gtk.Label ({ label: \" kitten(s), and \"});\n"
+#| "        this._tunaLabel = new Gtk.Label ({ label: \" can(s) of tuna.\"});\n"
+#| "        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));\n"
+#| "        this._lastLabel = new Gtk.Label ({\n"
+#| "            label: \"That's \" + this.perKitten + \" can(s) of tuna per kitten.\" });\n"
+#| "\n"
+#| "        // Create a grid to put the spinbuttons and their labels in\n"
+#| "        this._spinGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            margin_bottom: 20 });\n"
+#| "\n"
+#| "        // Attach everything to the grid\n"
+#| "        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);\n"
+#| "        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);\n"
+#| "        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);\n"
+#| "        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);\n"
+#| "        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);\n"
+#| "\n"
+#| "        // Create a main grid to hold it and the last label\n"
+#| "        this._mainGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER });\n"
+#| "\n"
+#| "        // Attach the smaller grid and the last label to the main grid\n"
+#| "        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);\n"
+#| "        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the main grid to the window\n"
+#| "        this._window.add (this._mainGrid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _newValue: function () {\n"
+#| "\n"
+#| "        // Update the label which shows how many cans there are per kitten\n"
+#| "        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))\n"
+#| "        this._lastLabel.set_label (\"That's \" + this.perKitten + \" can(s) of tuna per kitten.\");\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new SpinButtonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
-"const Gio = imports.gi.Gio;\n"
-"const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"\n"
-"const SpinButtonExample = new Lang.Class({\n"
-"    Name: 'SpinButton Example',\n"
-"\n"
-"    // Create the application itself\n"
-"    _init: function() {\n"
-"        this.application = new Gtk.Application({\n"
-"            application_id: 'org.example.jsspinbutton'\n"
-"        });\n"
-"\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
-"\n"
-"    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
-"        this._window.present();\n"
-"    },\n"
-"\n"
-"    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    // Build the application's UI\n"
-"    _buildUI: function() {\n"
-"\n"
-"        // Create the application window\n"
-"        this._window = new Gtk.ApplicationWindow({\n"
-"            application: this.application,\n"
-"            window_position: Gtk.WindowPosition.CENTER,\n"
-"            border_width: 20,\n"
-"            title: \"Kitten Feeder\"});\n"
-"\n"
-"        // Create the first spinbutton using a function\n"
-"        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);\n"
-"        this._kittens.connect (\"value-changed\", Lang.bind (this, this._newValue));\n"
-"\n"
-"        // Create an adjustment to use for the second spinbutton\n"
-"        this._adjustment = new Gtk.Adjustment ({\n"
-"            value: 1,\n"
-"            lower: 0,\n"
-"            upper: 9001,\n"
-"            step_increment: 1,\n"
-"            page_increment: 10 });\n"
-"\n"
-"        // Create the second spinbutton\n"
-"        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });\n"
-"        this._tuna.connect (\"value-changed\", Lang.bind (this, this._newValue));\n"
-"\n"
-"        // this._tuna.set_digits (1);\n"
-"        // this._tuna.set_wrap (true);\n"
-"\n"
-"        // Create the text labels to go with the spinbuttons\n"
-"        this._startLabel = new Gtk.Label ({ label: \"There are \" });\n"
-"        this._kittenLabel = new Gtk.Label ({ label: \" kitten(s), and \"});\n"
-"        this._tunaLabel = new Gtk.Label ({ label: \" can(s) of tuna.\"});\n"
-"        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));\n"
-"        this._lastLabel = new Gtk.Label ({\n"
-"            label: \"That's \" + this.perKitten + \" can(s) of tuna per kitten.\" });\n"
-"\n"
-"        // Create a grid to put the spinbuttons and their labels in\n"
-"        this._spinGrid = new Gtk.Grid ({\n"
-"            halign: Gtk.Align.CENTER,\n"
-"            valign: Gtk.Align.CENTER,\n"
-"            margin_bottom: 20 });\n"
-"\n"
-"        // Attach everything to the grid\n"
-"        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);\n"
-"        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);\n"
-"        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);\n"
-"        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);\n"
-"        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);\n"
-"\n"
-"        // Create a main grid to hold it and the last label\n"
-"        this._mainGrid = new Gtk.Grid ({\n"
-"            halign: Gtk.Align.CENTER,\n"
-"            valign: Gtk.Align.CENTER });\n"
-"\n"
-"        // Attach the smaller grid and the last label to the main grid\n"
-"        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);\n"
-"        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);\n"
-"\n"
-"        // Add the main grid to the window\n"
-"        this._window.add (this._mainGrid);\n"
-"\n"
-"        // Show the window and all child widgets\n"
-"        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _newValue: function () {\n"
-"\n"
-"        // Update the label which shows how many cans there are per kitten\n"
-"        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))\n"
-"        this._lastLabel.set_label (\"That's \" + this.perKitten + \" can(s) of tuna per kitten.\");\n"
-"\n"
-"    }\n"
-"\n"
-"});\n"
-"\n"
-"// Run the application\n"
-"let app = new SpinButtonExample ();\n"
-"app.application.run (ARGV);\n"
-msgstr ""
-"#!/usr/bin/gjs\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const SpinButtonExample = new Lang.Class({\n"
-"    Name: 'SpinButton Example',\n"
+"class SpinButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsspinbutton'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -37480,7 +39623,7 @@ msgstr ""
 "\n"
 "        // Create the first spinbutton using a function\n"
 "        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);\n"
-"        this._kittens.connect (\"value-changed\", Lang.bind (this, this._newValue));\n"
+"        this._kittens.connect (\"value-changed\", this._newValue.bind(this));\n"
 "\n"
 "        // Create an adjustment to use for the second spinbutton\n"
 "        this._adjustment = new Gtk.Adjustment ({\n"
@@ -37492,7 +39635,7 @@ msgstr ""
 "\n"
 "        // Create the second spinbutton\n"
 "        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });\n"
-"        this._tuna.connect (\"value-changed\", Lang.bind (this, this._newValue));\n"
+"        this._tuna.connect (\"value-changed\", this._newValue.bind(this));\n"
 "\n"
 "        // this._tuna.set_digits (1);\n"
 "        // this._tuna.set_wrap (true);\n"
@@ -37532,19 +39675,121 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
+"    }\n"
 "\n"
+"    _newValue() {\n"
+"        // Update the label which shows how many cans there are per kitten\n"
+"        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))\n"
+"        this._lastLabel.set_label (\"That's \" + this.perKitten + \" can(s) of tuna per kitten.\");\n"
+"    }\n"
+"};\n"
 "\n"
+"// Run the application\n"
+"let app = new SpinButtonExample ();\n"
+"app.application.run (ARGV);\n"
+msgstr ""
+"#!/usr/bin/gjs\n"
 "\n"
-"    _newValue: function () {\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
+"const Gio = imports.gi.Gio;\n"
+"const Gtk = imports.gi.Gtk;\n"
+"\n"
+"class SpinButtonExample {\n"
+"\n"
+"    // Create the application itself\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jsspinbutton'\n"
+"        });\n"
+"\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
+"\n"
+"    // Callback function for 'activate' signal presents window when active\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
+"\n"
+"    // Callback function for 'startup' signal builds the UI\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
+"\n"
+"    // Build the application's UI\n"
+"    _buildUI() {\n"
+"\n"
+"        // Create the application window\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            border_width: 20,\n"
+"            title: \"Kitten Feeder\"});\n"
+"\n"
+"        // Create the first spinbutton using a function\n"
+"        this._kittens = Gtk.SpinButton.new_with_range (1, 9001, 1);\n"
+"        this._kittens.connect (\"value-changed\", this._newValue.bind(this));\n"
+"\n"
+"        // Create an adjustment to use for the second spinbutton\n"
+"        this._adjustment = new Gtk.Adjustment ({\n"
+"            value: 1,\n"
+"            lower: 0,\n"
+"            upper: 9001,\n"
+"            step_increment: 1,\n"
+"            page_increment: 10 });\n"
+"\n"
+"        // Create the second spinbutton\n"
+"        this._tuna = new Gtk.SpinButton ({ adjustment: this._adjustment });\n"
+"        this._tuna.connect (\"value-changed\", this._newValue.bind(this));\n"
+"\n"
+"        // this._tuna.set_digits (1);\n"
+"        // this._tuna.set_wrap (true);\n"
+"\n"
+"        // Create the text labels to go with the spinbuttons\n"
+"        this._startLabel = new Gtk.Label ({ label: \"There are \" });\n"
+"        this._kittenLabel = new Gtk.Label ({ label: \" kitten(s), and \"});\n"
+"        this._tunaLabel = new Gtk.Label ({ label: \" can(s) of tuna.\"});\n"
+"        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()));\n"
+"        this._lastLabel = new Gtk.Label ({\n"
+"            label: \"That's \" + this.perKitten + \" can(s) of tuna per kitten.\" });\n"
 "\n"
+"        // Create a grid to put the spinbuttons and their labels in\n"
+"        this._spinGrid = new Gtk.Grid ({\n"
+"            halign: Gtk.Align.CENTER,\n"
+"            valign: Gtk.Align.CENTER,\n"
+"            margin_bottom: 20 });\n"
+"\n"
+"        // Attach everything to the grid\n"
+"        this._spinGrid.attach (this._startLabel, 0, 0, 1, 1);\n"
+"        this._spinGrid.attach (this._kittens, 1, 0, 1, 1);\n"
+"        this._spinGrid.attach (this._kittenLabel, 2, 0, 1, 1);\n"
+"        this._spinGrid.attach (this._tuna, 3, 0, 1, 1);\n"
+"        this._spinGrid.attach (this._tunaLabel, 4, 0, 1, 1);\n"
+"\n"
+"        // Create a main grid to hold it and the last label\n"
+"        this._mainGrid = new Gtk.Grid ({\n"
+"            halign: Gtk.Align.CENTER,\n"
+"            valign: Gtk.Align.CENTER });\n"
+"\n"
+"        // Attach the smaller grid and the last label to the main grid\n"
+"        this._mainGrid.attach (this._spinGrid, 0, 0, 1, 1);\n"
+"        this._mainGrid.attach (this._lastLabel, 0, 1, 1, 1);\n"
+"\n"
+"        // Add the main grid to the window\n"
+"        this._window.add (this._mainGrid);\n"
+"\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
+"    }\n"
+"\n"
+"    _newValue() {\n"
 "        // Update the label which shows how many cans there are per kitten\n"
 "        this.perKitten = Math.floor((this._tuna.get_value() / this._kittens.get_value()))\n"
 "        this._lastLabel.set_label (\"That's \" + this.perKitten + \" can(s) of tuna per kitten.\");\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new SpinButtonExample ();\n"
@@ -37569,63 +39814,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/spinbutton.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -37885,16 +40073,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.SpinButton.html\";>Gtk.SpinButton</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.SpinButton.html\";>Gtk.SpinButton</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/spinner.c.page:24 C/spinner.js.page:22 C/spinner.py.page:23 C/spinner.vala.page:22
-msgctxt "_"
-msgid "external ref='media/spinner.png' md5='d04f2d81f1d72c6c2f97e8729947dfed'"
-msgstr "external ref='media/spinner.png' md5='d04f2d81f1d72c6c2f97e8729947dfed'"
-
 #. (itstool) path: info/title
 #: C/spinner.c.page:8
 msgctxt "text"
@@ -37911,6 +40089,16 @@ msgstr ""
 msgid "Spinner"
 msgstr "Spinner"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/spinner.c.page:24 C/spinner.js.page:22 C/spinner.py.page:23 C/spinner.vala.page:22
+msgctxt "_"
+msgid "external ref='media/spinner.png' md5='d04f2d81f1d72c6c2f97e8729947dfed'"
+msgstr "external ref='media/spinner.png' md5='d04f2d81f1d72c6c2f97e8729947dfed'"
+
 #. (itstool) path: page/p
 #: C/spinner.c.page:25 C/spinner.js.page:23 C/spinner.py.page:24 C/spinner.vala.page:23
 msgid "This Spinner is stopped and started by pressing the spacebar."
@@ -38116,7 +40304,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkSpinner.html\";>Gt
 
 #. (itstool) path: info/title
 #: C/spinner.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "Spinner (JavaScript)"
 msgstr "Spinner (JavaScript)"
@@ -38124,71 +40311,150 @@ msgstr "Spinner (JavaScript)"
 #. (itstool) path: page/code
 #: C/spinner.js.page:25
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Gdk = imports.gi.Gdk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const SpinnerExample = new Lang.Class ({\n"
+#| "    Name: 'Spinner Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.jsspinner',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            title: \"Spinner Example\",\n"
+#| "            default_height: 200,\n"
+#| "            default_width: 200,\n"
+#| "            border_width: 30 });\n"
+#| "\n"
+#| "        // Create a spinner which starts spinning automatically\n"
+#| "        this._spinner = new Gtk.Spinner ({active: true});\n"
+#| "        this._window.add (this._spinner);\n"
+#| "\n"
+#| "        // Connect a keypress event to the function that makes it start or stop spinning\n"
+#| "        this._window.connect(\"key-press-event\", Lang.bind(this, this._onKeyPress));\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onKeyPress: function(widget, event) {\n"
+#| "\n"
+#| "        // Get the value of the key that was pressed\n"
+#| "        let keyval = event.get_keyval()[1];\n"
+#| "\n"
+#| "        // If it was the spacebar, toggle the spinner to start or stop\n"
+#| "        if (keyval == Gdk.KEY_space) {\n"
+#| "            if (this._spinner.active == true)\n"
+#| "                this._spinner.stop();\n"
+#| "            else\n"
+#| "                this._spinner.start();\n"
+#| "        }\n"
+#| "    }\n"
+#| "\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new SpinnerExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
 "const Gdk = imports.gi.Gdk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const SpinnerExample = new Lang.Class ({\n"
-"    Name: 'Spinner Example',\n"
+"class SpinnerExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsspinner',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"        this._window = new Gtk.ApplicationWindow  ({\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
 "            application: this.application,\n"
 "            window_position: Gtk.WindowPosition.CENTER,\n"
 "            title: \"Spinner Example\",\n"
 "            default_height: 200,\n"
 "            default_width: 200,\n"
-"            border_width: 30 });\n"
+"            border_width: 30\n"
+"        });\n"
 "\n"
 "        // Create a spinner which starts spinning automatically\n"
 "        this._spinner = new Gtk.Spinner ({active: true});\n"
 "        this._window.add (this._spinner);\n"
 "\n"
 "        // Connect a keypress event to the function that makes it start or stop spinning\n"
-"        this._window.connect(\"key-press-event\", Lang.bind(this, this._onKeyPress));\n"
+"        this._window.connect(\"key-press-event\", this._onKeyPress.bind(this));\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onKeyPress: function(widget, event) {\n"
+"    _onKeyPress(widget, event) {\n"
 "\n"
 "        // Get the value of the key that was pressed\n"
-"        let keyval = event.get_keyval()[1];\n"
+"        let [, keyval] = event.get_keyval();\n"
 "\n"
 "        // If it was the spacebar, toggle the spinner to start or stop\n"
 "        if (keyval == Gdk.KEY_space) {\n"
@@ -38198,9 +40464,7 @@ msgid ""
 "                this._spinner.start();\n"
 "        }\n"
 "    }\n"
-"\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new SpinnerExample ();\n"
@@ -38208,68 +40472,66 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
 "const Gdk = imports.gi.Gdk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const SpinnerExample = new Lang.Class ({\n"
-"    Name: 'Spinner Example',\n"
+"class SpinnerExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsspinner',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"        this._window = new Gtk.ApplicationWindow  ({\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
 "            application: this.application,\n"
 "            window_position: Gtk.WindowPosition.CENTER,\n"
 "            title: \"Spinner Example\",\n"
 "            default_height: 200,\n"
 "            default_width: 200,\n"
-"            border_width: 30 });\n"
+"            border_width: 30\n"
+"        });\n"
 "\n"
 "        // Create a spinner which starts spinning automatically\n"
 "        this._spinner = new Gtk.Spinner ({active: true});\n"
 "        this._window.add (this._spinner);\n"
 "\n"
 "        // Connect a keypress event to the function that makes it start or stop spinning\n"
-"        this._window.connect(\"key-press-event\", Lang.bind(this, this._onKeyPress));\n"
+"        this._window.connect(\"key-press-event\", this._onKeyPress.bind(this));\n"
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onKeyPress: function(widget, event) {\n"
+"    _onKeyPress(widget, event) {\n"
 "\n"
 "        // Get the value of the key that was pressed\n"
-"        let keyval = event.get_keyval()[1];\n"
+"        let [, keyval] = event.get_keyval();\n"
 "\n"
 "        // If it was the spacebar, toggle the spinner to start or stop\n"
 "        if (keyval == Gdk.KEY_space) {\n"
@@ -38279,9 +40541,7 @@ msgstr ""
 "                this._spinner.start();\n"
 "        }\n"
 "    }\n"
-"\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new SpinnerExample ();\n"
@@ -38306,63 +40566,6 @@ msgstr "Spinner (Python)"
 #. (itstool) path: section/code
 #: C/spinner.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "from gi.repository import Gdk\n"
@@ -38622,16 +40825,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Spinner.html\";>Gtk.Spin
 msgid "<link href=\"http://www.valadoc.org/gdk-3.0/Gdk.keyval_name.html\";>Gdk.keyval_name</link>"
 msgstr "<link href=\"http://www.valadoc.org/gdk-3.0/Gdk.keyval_name.html\";>Gdk.keyval_name</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/statusbar.c.page:27
-msgctxt "_"
-msgid "external ref='media/statusbar3.png' md5='60c71604fb44656237ee66dfb39a8689'"
-msgstr "external ref='media/statusbar3.png' md5='60c71604fb44656237ee66dfb39a8689'"
-
 #. (itstool) path: info/title
 #: C/statusbar.c.page:8
 msgctxt "text"
@@ -38648,6 +40841,16 @@ msgstr ""
 msgid "Statusbar"
 msgstr "Statusbar"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/statusbar.c.page:27
+msgctxt "_"
+msgid "external ref='media/statusbar3.png' md5='60c71604fb44656237ee66dfb39a8689'"
+msgstr "external ref='media/statusbar3.png' md5='60c71604fb44656237ee66dfb39a8689'"
+
 #. (itstool) path: page/p
 #: C/statusbar.c.page:28
 msgid ""
@@ -38877,19 +41080,8 @@ msgid ""
 "Functions</link>"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/statusbar.js.page:22
-msgctxt "_"
-msgid "external ref='media/statusbar2.png' md5='ff6f7e5b270827ca98b2d5f7087aa766'"
-msgstr "external ref='media/statusbar2.png' md5='ff6f7e5b270827ca98b2d5f7087aa766'"
-
 #. (itstool) path: info/title
 #: C/statusbar.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "Statusbar (JavaScript)"
 msgstr "Statusbar (JavaScript)"
@@ -38899,6 +41091,16 @@ msgstr "Statusbar (JavaScript)"
 msgid "Show notifications in a dedicated statusbar"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/statusbar.js.page:22
+msgctxt "_"
+msgid "external ref='media/statusbar2.png' md5='ff6f7e5b270827ca98b2d5f7087aa766'"
+msgstr "external ref='media/statusbar2.png' md5='ff6f7e5b270827ca98b2d5f7087aa766'"
+
 #. (itstool) path: page/p
 #: C/statusbar.js.page:23
 msgid ""
@@ -39329,42 +41531,191 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/statusbar.js.page:217
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const StatusbarExample = new Lang.Class({\n"
+#| "    Name: 'Statusbar Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsstatusbar',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 120,\n"
+#| "            default_width: 300,\n"
+#| "            title: \"Button Clicker\"});\n"
+#| "\n"
+#| "        // Create a paned interface\n"
+#| "        this._panes = new Gtk.Paned ({\n"
+#| "            orientation: Gtk.Orientation.VERTICAL });\n"
+#| "\n"
+#| "        // Create the main button\n"
+#| "        this._clickMe = new Gtk.Button ({\n"
+#| "            label: \"Click Me!\" });\n"
+#| "        this._clickMe.connect (\"clicked\", Lang.bind (this, this._clicked));\n"
+#| "\n"
+#| "        // Create the back button\n"
+#| "        this._backButton = new Gtk.Button ({\n"
+#| "            label: \"gtk-go-back\",\n"
+#| "            use_stock: true });\n"
+#| "        this._backButton.connect (\"clicked\", Lang.bind (this, this._back));\n"
+#| "\n"
+#| "        // Create the clear button\n"
+#| "        this._clearButton = new Gtk.Button ({\n"
+#| "            label: \"gtk-clear\",\n"
+#| "            use_stock: true });\n"
+#| "        this._clearButton.connect (\"clicked\", Lang.bind (this, this._clear));\n"
+#| "\n"
+#| "        // Put the buttons in a grid\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER });\n"
+#| "        this._grid.attach (this._backButton, 0, 0, 1, 1);\n"
+#| "        this._grid.attach_next_to (this._clickMe, this._backButton, Gtk.PositionType.RIGHT, 1, 1);\n"
+#| "        this._grid.attach_next_to (this._clearButton, this._clickMe, Gtk.PositionType.RIGHT, 1, 1);\n"
+#| "\n"
+#| "        // Put the grid in a large frame that fills most of the window\n"
+#| "        this._topFrame = new Gtk.Frame ({\n"
+#| "            border_width: 20,\n"
+#| "            height_request: 90,\n"
+#| "            width_request: 300});\n"
+#| "        this._topFrame.add (this._grid);\n"
+#| "\n"
+#| "        // Create the statusbar\n"
+#| "        this._statusbar = new Gtk.Statusbar();\n"
+#| "\n"
+#| "        // Keep track of the number of times the button has been clicked\n"
+#| "        this.Clicks = 0;\n"
+#| "        this.ContextID = this._statusbar.get_context_id (\"Number of Clicks\");\n"
+#| "\n"
+#| "        // Give the statusbar an initial message\n"
+#| "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
+#| "\n"
+#| "        // Put the statusbar in its own frame at the bottom\n"
+#| "        this._barFrame = new Gtk.Frame ({\n"
+#| "            height_request: 30 });\n"
+#| "        this._barFrame.add (this._statusbar);\n"
+#| "\n"
+#| "        // Assemble the frames into the paned interface\n"
+#| "        this._panes.pack1 (this._topFrame, true, false);\n"
+#| "        this._panes.pack2 (this._barFrame, false, false);\n"
+#| "\n"
+#| "        // Put the panes into the window\n"
+#| "        this._window.add (this._panes);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _clicked: function() {\n"
+#| "\n"
+#| "        // Increment the number of clicks by 1\n"
+#| "        this.Clicks++;\n"
+#| "\n"
+#| "        // Update the statusbar with the new number of clicks\n"
+#| "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _back: function () {\n"
+#| "\n"
+#| "        // If there have been any clicks, decrement by 1 and remove last statusbar update\n"
+#| "        if (this.Clicks &gt; 0 ) {\n"
+#| "            this.Clicks--;\n"
+#| "            this._statusbar.pop (this.ContextID);\n"
+#| "        };\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _clear: function () {\n"
+#| "\n"
+#| "        // Reset the number of clicks\n"
+#| "        this.Clicks = 0;\n"
+#| "\n"
+#| "        // Wipe out all the messages pushed to the statusbar\n"
+#| "        this._statusbar.remove_all (this.ContextID);\n"
+#| "\n"
+#| "        // Reset the statusbar's message\n"
+#| "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new StatusbarExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const StatusbarExample = new Lang.Class({\n"
-"    Name: 'Statusbar Example',\n"
+"class StatusbarExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsstatusbar',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -39381,19 +41732,19 @@ msgid ""
 "        // Create the main button\n"
 "        this._clickMe = new Gtk.Button ({\n"
 "            label: \"Click Me!\" });\n"
-"        this._clickMe.connect (\"clicked\", Lang.bind (this, this._clicked));\n"
+"        this._clickMe.connect (\"clicked\", this._clicked.bind(this));\n"
 "\n"
 "        // Create the back button\n"
 "        this._backButton = new Gtk.Button ({\n"
 "            label: \"gtk-go-back\",\n"
 "            use_stock: true });\n"
-"        this._backButton.connect (\"clicked\", Lang.bind (this, this._back));\n"
+"        this._backButton.connect (\"clicked\", this._back.bind(this));\n"
 "\n"
 "        // Create the clear button\n"
 "        this._clearButton = new Gtk.Button ({\n"
 "            label: \"gtk-clear\",\n"
 "            use_stock: true });\n"
-"        this._clearButton.connect (\"clicked\", Lang.bind (this, this._clear));\n"
+"        this._clearButton.connect (\"clicked\", this._clear.bind(this));\n"
 "\n"
 "        // Put the buttons in a grid\n"
 "        this._grid = new Gtk.Grid ({\n"
@@ -39434,35 +41785,27 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _clicked: function() {\n"
+"    _clicked() {\n"
 "\n"
 "        // Increment the number of clicks by 1\n"
 "        this.Clicks++;\n"
 "\n"
 "        // Update the statusbar with the new number of clicks\n"
 "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
+"    }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _back: function () {\n"
+"    _back() {\n"
 "\n"
 "        // If there have been any clicks, decrement by 1 and remove last statusbar update\n"
 "        if (this.Clicks &gt; 0 ) {\n"
 "            this.Clicks--;\n"
 "            this._statusbar.pop (this.ContextID);\n"
 "        };\n"
+"    }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _clear: function () {\n"
+"    _clear() {\n"
 "\n"
 "        // Reset the number of clicks\n"
 "        this.Clicks = 0;\n"
@@ -39472,10 +41815,8 @@ msgid ""
 "\n"
 "        // Reset the statusbar's message\n"
 "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new StatusbarExample ();\n"
@@ -39483,39 +41824,37 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const StatusbarExample = new Lang.Class({\n"
-"    Name: 'Statusbar Example',\n"
+"class StatusbarExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsstatusbar',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -39532,19 +41871,19 @@ msgstr ""
 "        // Create the main button\n"
 "        this._clickMe = new Gtk.Button ({\n"
 "            label: \"Click Me!\" });\n"
-"        this._clickMe.connect (\"clicked\", Lang.bind (this, this._clicked));\n"
+"        this._clickMe.connect (\"clicked\", this._clicked.bind(this));\n"
 "\n"
 "        // Create the back button\n"
 "        this._backButton = new Gtk.Button ({\n"
 "            label: \"gtk-go-back\",\n"
 "            use_stock: true });\n"
-"        this._backButton.connect (\"clicked\", Lang.bind (this, this._back));\n"
+"        this._backButton.connect (\"clicked\", this._back.bind(this));\n"
 "\n"
 "        // Create the clear button\n"
 "        this._clearButton = new Gtk.Button ({\n"
 "            label: \"gtk-clear\",\n"
 "            use_stock: true });\n"
-"        this._clearButton.connect (\"clicked\", Lang.bind (this, this._clear));\n"
+"        this._clearButton.connect (\"clicked\", this._clear.bind(this));\n"
 "\n"
 "        // Put the buttons in a grid\n"
 "        this._grid = new Gtk.Grid ({\n"
@@ -39585,35 +41924,27 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _clicked: function() {\n"
+"    _clicked() {\n"
 "\n"
 "        // Increment the number of clicks by 1\n"
 "        this.Clicks++;\n"
 "\n"
 "        // Update the statusbar with the new number of clicks\n"
 "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
+"    }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _back: function () {\n"
+"    _back() {\n"
 "\n"
 "        // If there have been any clicks, decrement by 1 and remove last statusbar update\n"
 "        if (this.Clicks &gt; 0 ) {\n"
 "            this.Clicks--;\n"
 "            this._statusbar.pop (this.ContextID);\n"
 "        };\n"
+"    }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _clear: function () {\n"
+"    _clear() {\n"
 "\n"
 "        // Reset the number of clicks\n"
 "        this.Clicks = 0;\n"
@@ -39623,10 +41954,8 @@ msgstr ""
 "\n"
 "        // Reset the statusbar's message\n"
 "        this._statusbar.push (this.ContextID, \"Number of clicks: \" + this.Clicks);\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new StatusbarExample ();\n"
@@ -39647,7 +41976,13 @@ msgstr "<link href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Paned.htm
 msgid "<link href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Statusbar.html\";>Gtk.Statusbar</link>"
 msgstr "<link href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.Statusbar.html\";>Gtk.Statusbar</link>"
 
-#. (itstool) path: media
+#. (itstool) path: info/title
+#: C/statusbar.py.page:8
+msgctxt "text"
+msgid "Statusbar (Python)"
+msgstr "Statusbar (Python)"
+
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -39657,12 +41992,6 @@ msgctxt "_"
 msgid "external ref='media/statusbar.png' md5='eb1aca55315d6cda57b12a5f36058ba8'"
 msgstr "external ref='media/statusbar.png' md5='eb1aca55315d6cda57b12a5f36058ba8'"
 
-#. (itstool) path: info/title
-#: C/statusbar.py.page:8
-msgctxt "text"
-msgid "Statusbar (Python)"
-msgstr "Statusbar (Python)"
-
 #. (itstool) path: page/p
 #: C/statusbar.py.page:25
 msgid "This statusbar tells you if you click the button or if you press any key (and which key)."
@@ -39671,75 +42000,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/statusbar.py.page:32
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "from gi.repository import Gdk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"StatusBar Example\", application=app)\n"
-#| "        self.set_default_size(200, 100)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label(label=\"Press any key or \")\n"
-#| "\n"
-#| "        # a button\n"
-#| "        button = Gtk.Button(label=\"click me.\")\n"
-#| "        # connected to a callback\n"
-#| "        button.connect(\"clicked\", self.button_clicked_cb)\n"
-#| "\n"
-#| "        # the statusbar\n"
-#| "        self.statusbar = Gtk.Statusbar()\n"
-#| "        # its context_id - not shown in the UI but needed to uniquely identify\n"
-#| "        # the source of a message\n"
-#| "        self.context_id = self.statusbar.get_context_id(\"example\")\n"
-#| "        # we push a message onto the statusbar's stack\n"
-#| "        self.statusbar.push(self.context_id, \"Waiting for you to do something...\")\n"
-#| "\n"
-#| "        # a grid to attach the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing(5)\n"
-#| "        grid.set_column_homogeneous(True)\n"
-#| "        grid.set_row_homogeneous(True)\n"
-#| "        grid.attach(label, 0, 0, 1, 1)\n"
-#| "        grid.attach_next_to(button, label, Gtk.PositionType.RIGHT, 1, 1)\n"
-#| "        grid.attach(self.statusbar, 0, 1, 2, 1)\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # callback function for the button clicked\n"
-#| "    # if the button is clicked the event is signaled to the statusbar\n"
-#| "    # onto which we push a new status\n"
-#| "    def button_clicked_cb(self, button):\n"
-#| "        self.statusbar.push(self.context_id, \"You clicked the button.\")\n"
-#| "\n"
-#| "    # event handler\n"
-#| "    def do_key_press_event(self, event):\n"
-#| "    # any signal from the keyboard is signaled to the statusbar\n"
-#| "    # onto which we push a new status with the symbolic name\n"
-#| "    # of the key pressed\n"
-#| "        self.statusbar.push(self.context_id, Gdk.keyval_name(event.keyval) +\n"
-#| "                                            \" key was pressed.\")\n"
-#| "        # stop the signal emission\n"
-#| "        return True\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "from gi.repository import Gdk\n"
@@ -40188,7 +42448,7 @@ msgstr "Strings in Python 3"
 #: C/strings.py.page:64
 msgid ""
 "Since Python 3.0, all strings are stored as Unicode in an instance of the <code>str</code> type. Encoded 
strings "
-"on the other hand are represented as binary data in the form of instances of the bytes type. 
Conceptionally, "
+"on the other hand are represented as binary data in the form of instances of the bytes type. Conceptually, "
 "<code>str</code> refers to text, whereas bytes refers to data. Use <code>encode()</code> to go from 
<code>str</"
 "code> to <code>bytes</code>, and <code>decode()</code> to go from <code>bytes</code> to <code>str</code>."
 msgstr ""
@@ -40318,7 +42578,23 @@ msgid ""
 "Python GTK+ 3 Tutorial</link>"
 msgstr ""
 
-#. (itstool) path: media
+#. (itstool) path: info/title
+#: C/switch.c.page:8
+msgctxt "text"
+msgid "Switch (C)"
+msgstr "Switch (C)"
+
+#. (itstool) path: info/desc
+#: C/switch.c.page:18 C/switch.py.page:19 C/switch.vala.page:22
+msgid "A \"light switch\" style toggle"
+msgstr ""
+
+#. (itstool) path: page/title
+#: C/switch.c.page:21 C/switch.js.page:21 C/switch.py.page:22 C/switch.vala.page:25
+msgid "Switch"
+msgstr "Switch"
+
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -40328,7 +42604,7 @@ msgctxt "_"
 msgid "external ref='media/switch_off.png' md5='211a2962708800697ad5373dcc86ad6d'"
 msgstr "external ref='media/switch_off.png' md5='211a2962708800697ad5373dcc86ad6d'"
 
-#. (itstool) path: media
+#. (itstool) path: page/media
 #. This is a reference to an external file such as an image or video. When
 #. the file changes, the md5 hash will change to let you know you need to
 #. update your localized copy. The msgstr is not used at all. Set it to
@@ -40338,22 +42614,6 @@ msgctxt "_"
 msgid "external ref='media/switch_on.png' md5='95e8769f758c2d95ace0fa8ecf30b29d'"
 msgstr "external ref='media/switch_on.png' md5='95e8769f758c2d95ace0fa8ecf30b29d'"
 
-#. (itstool) path: info/title
-#: C/switch.c.page:8
-msgctxt "text"
-msgid "Switch (C)"
-msgstr "Switch (C)"
-
-#. (itstool) path: info/desc
-#: C/switch.c.page:18 C/switch.py.page:19 C/switch.vala.page:22
-msgid "A \"light switch\" style toggle"
-msgstr ""
-
-#. (itstool) path: page/title
-#: C/switch.c.page:21 C/switch.js.page:21 C/switch.py.page:22 C/switch.vala.page:25
-msgid "Switch"
-msgstr "Switch"
-
 #. (itstool) path: page/p
 #: C/switch.c.page:25
 msgid "This switch toggles the title of the window."
@@ -40521,19 +42781,8 @@ msgstr ""
 "  return status;\n"
 "}\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/switch.js.page:22
-msgctxt "_"
-msgid "external ref='media/switchanimals.png' md5='513ae15dcf68e15eef30b76420b8c714'"
-msgstr "external ref='media/switchanimals.png' md5='513ae15dcf68e15eef30b76420b8c714'"
-
 #. (itstool) path: info/title
 #: C/switch.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "Switch (JavaScript)"
 msgstr "Switch (JavaScript)"
@@ -40543,6 +42792,16 @@ msgstr "Switch (JavaScript)"
 msgid "A sliding switch that can be flipped on and off"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/switch.js.page:22
+msgctxt "_"
+msgid "external ref='media/switchanimals.png' md5='513ae15dcf68e15eef30b76420b8c714'"
+msgstr "external ref='media/switchanimals.png' md5='513ae15dcf68e15eef30b76420b8c714'"
+
 #. (itstool) path: page/p
 #: C/switch.js.page:23
 msgid ""
@@ -41081,42 +43340,220 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/switch.js.page:260
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const SwitchExample = new Lang.Class({\n"
+#| "    Name: 'Switch Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jsswitch'\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal creates the menu and builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._initMenus();\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"Animal Creator\"});\n"
+#| "\n"
+#| "        // Create the image widget and set its default picture\n"
+#| "        this._image = new Gtk.Image ({file: \"redfox.png\"});\n"
+#| "\n"
+#| "        // Create a label for the first switch\n"
+#| "        this._flyLabel = new Gtk.Label ({\n"
+#| "            label: \"Make it fly\",\n"
+#| "            margin_right: 30});\n"
+#| "\n"
+#| "        // Create the first switch and set its default position\n"
+#| "        this._flySwitch = new Gtk.Switch ({active: false});\n"
+#| "        this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));\n"
+#| "\n"
+#| "        // Create a label for the second switch\n"
+#| "        this._birdLabel = new Gtk.Label ({\n"
+#| "            label: \"Make it a bird\",\n"
+#| "            margin_right: 30});\n"
+#| "\n"
+#| "        // Create the second switch\n"
+#| "        this._birdSwitch = new Gtk.Switch ({active: false});\n"
+#| "        this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));\n"
+#| "\n"
+#| "        // Create a grid for the labels and switches beneath the picture\n"
+#| "        this._UIGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER,\n"
+#| "            margin_top: 20});\n"
+#| "\n"
+#| "        // Attach the labels and switches to that grid\n"
+#| "        this._UIGrid.attach (this._flyLabel, 0, 0, 1, 1);\n"
+#| "        this._UIGrid.attach (this._flySwitch, 1, 0, 1, 1);\n"
+#| "        this._UIGrid.attach (this._birdLabel, 0, 1, 1, 1);\n"
+#| "        this._UIGrid.attach (this._birdSwitch, 1, 1, 1, 1);\n"
+#| "\n"
+#| "        // Create a master grid to put both the UI and the picture into\n"
+#| "        this._mainGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER });\n"
+#| "\n"
+#| "        // Attach the picture and the UI grid to the master grid\n"
+#| "        this._mainGrid.attach (this._image, 0, 0, 1, 1);\n"
+#| "        this._mainGrid.attach (this._UIGrid, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the master grid to the window\n"
+#| "        this._window.add (this._mainGrid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _switchFlip: function() {\n"
+#| "\n"
+#| "        // Change the picture depending on which switches are flipped\n"
+#| "        if (this._flySwitch.get_active()) {\n"
+#| "\n"
+#| "            if (this._birdSwitch.get_active()) this._image.set_from_file (\"muteswan.png\");\n"
+#| "\n"
+#| "            else this._image.set_from_file (\"fruitbat.png\");\n"
+#| "        }\n"
+#| "\n"
+#| "        else {\n"
+#| "\n"
+#| "            if (this._birdSwitch.get_active()) this._image.set_from_file (\"gentoopenguin.png\");\n"
+#| "\n"
+#| "            else this._image.set_from_file (\"redfox.png\");\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _initMenus: function() {\n"
+#| "\n"
+#| "        // Build the application's menu so we can have an \"About\" button\n"
+#| "        let menu = new Gio.Menu();\n"
+#| "        menu.append(\"About\", 'app.about');\n"
+#| "        menu.append(\"Quit\",'app.quit');\n"
+#| "        this.application.set_app_menu(menu);\n"
+#| "\n"
+#| "        // Bind the \"About\" button to the _showAbout() function\n"
+#| "        let aboutAction = new Gio.SimpleAction ({ name: 'about' });\n"
+#| "        aboutAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._showAbout();\n"
+#| "            }));\n"
+#| "        this.application.add_action(aboutAction);\n"
+#| "\n"
+#| "        // Bind the \"Quit\" button to the function that closes the window\n"
+#| "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
+#| "        quitAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._window.destroy();\n"
+#| "            }));\n"
+#| "        this.application.add_action(quitAction);\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _showAbout: function () {\n"
+#| "\n"
+#| "        // String arrays of the names of the people involved in the project\n"
+#| "        var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi 
http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 
'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas 
http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png'];\n"
+#| "        var authors = [\"GNOME Documentation Team\"];\n"
+#| "        var documenters = [\"GNOME Documentation Team\"];\n"
+#| "\n"
+#| "        // Create the About dialog\n"
+#| "        let aboutDialog = new Gtk.AboutDialog({\n"
+#| "            title: \"AboutDialog Example\",\n"
+#| "            program_name: \"Animal Creator\",\n"
+#| "            copyright: \"Copyright \\xa9 2012 GNOME Documentation Team\\n\\nRed fox photo licensed CC-By 
by Rob Lee\\nGentoo penguin photo licensed CC-By-SA by Ken Funakoshi\\nFruit bat photo licensed CC-By by Shek 
Graham\\nMute swan photo licensed CC-By-SA by Mindaugas Urbonas\\nLinks to the originals are available under 
Credits.\\n\\nHave you hugged a penguin today?\",\n"
+#| "            artists: artists,\n"
+#| "            authors: authors,\n"
+#| "            documenters: documenters,\n"
+#| "            website: \"http://developer.gnome.org\",\n";
+#| "            website_label: \"GNOME Developer Website\" });\n"
+#| "\n"
+#| "        // Attach the About dialog to the window\n"
+#| "        aboutDialog.modal = true;\n"
+#| "        aboutDialog.transient_for = this._window;\n"
+#| "\n"
+#| "        // Show the About dialog\n"
+#| "        aboutDialog.show();\n"
+#| "\n"
+#| "        // Connect the Close button to the destroy signal for the dialog\n"
+#| "        aboutDialog.connect('response', function() {\n"
+#| "            aboutDialog.destroy();\n"
+#| "        });\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new SwitchExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const SwitchExample = new Lang.Class({\n"
-"    Name: 'Switch Example',\n"
+"class SwitchExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsswitch'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal creates the menu and builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -41135,7 +43572,7 @@ msgid ""
 "\n"
 "        // Create the first switch and set its default position\n"
 "        this._flySwitch = new Gtk.Switch ({active: false});\n"
-"        this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));\n"
+"        this._flySwitch.connect ('notify::active', this._switchFlip.bind(this));\n"
 "\n"
 "        // Create a label for the second switch\n"
 "        this._birdLabel = new Gtk.Label ({\n"
@@ -41144,7 +43581,7 @@ msgid ""
 "\n"
 "        // Create the second switch\n"
 "        this._birdSwitch = new Gtk.Switch ({active: false});\n"
-"        this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));\n"
+"        this._birdSwitch.connect ('notify::active', this._switchFlip.bind(this));\n"
 "\n"
 "        // Create a grid for the labels and switches beneath the picture\n"
 "        this._UIGrid = new Gtk.Grid ({\n"
@@ -41172,33 +43609,27 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _switchFlip: function() {\n"
+"    _switchFlip() {\n"
 "\n"
 "        // Change the picture depending on which switches are flipped\n"
 "        if (this._flySwitch.get_active()) {\n"
 "\n"
-"            if (this._birdSwitch.get_active()) this._image.set_from_file (\"muteswan.png\");\n"
-"\n"
-"            else this._image.set_from_file (\"fruitbat.png\");\n"
-"        }\n"
-"\n"
-"        else {\n"
-"\n"
-"            if (this._birdSwitch.get_active()) this._image.set_from_file (\"gentoopenguin.png\");\n"
-"\n"
-"            else this._image.set_from_file (\"redfox.png\");\n"
+"            if (this._birdSwitch.get_active())\n"
+"                this._image.set_from_file (\"muteswan.png\");\n"
+"            else\n"
+"                this._image.set_from_file (\"fruitbat.png\");\n"
+"        } else {\n"
 "\n"
+"            if (this._birdSwitch.get_active())\n"
+"                this._image.set_from_file (\"gentoopenguin.png\");\n"
+"            else\n"
+"                this._image.set_from_file (\"redfox.png\");\n"
 "        }\n"
+"    }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "\n"
 "        // Build the application's menu so we can have an \"About\" button\n"
 "        let menu = new Gio.Menu();\n"
@@ -41208,24 +43639,16 @@ msgid ""
 "\n"
 "        // Bind the \"About\" button to the _showAbout() function\n"
 "        let aboutAction = new Gio.SimpleAction ({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        // Bind the \"Quit\" button to the function that closes the window\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _showAbout: function () {\n"
+"    _showAbout() {\n"
 "\n"
 "        // String arrays of the names of the people involved in the project\n"
 "        var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi 
http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 
'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas 
http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png'];\n"
@@ -41255,8 +43678,7 @@ msgid ""
 "            aboutDialog.destroy();\n"
 "        });\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new SwitchExample ();\n"
@@ -41264,39 +43686,37 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const SwitchExample = new Lang.Class({\n"
-"    Name: 'Switch Example',\n"
+"class SwitchExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jsswitch'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal creates the menu and builds the UI\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -41315,7 +43735,7 @@ msgstr ""
 "\n"
 "        // Create the first switch and set its default position\n"
 "        this._flySwitch = new Gtk.Switch ({active: false});\n"
-"        this._flySwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));\n"
+"        this._flySwitch.connect ('notify::active', this._switchFlip.bind(this));\n"
 "\n"
 "        // Create a label for the second switch\n"
 "        this._birdLabel = new Gtk.Label ({\n"
@@ -41324,7 +43744,7 @@ msgstr ""
 "\n"
 "        // Create the second switch\n"
 "        this._birdSwitch = new Gtk.Switch ({active: false});\n"
-"        this._birdSwitch.connect ('notify::active', Lang.bind (this, this._switchFlip));\n"
+"        this._birdSwitch.connect ('notify::active', this._switchFlip.bind(this));\n"
 "\n"
 "        // Create a grid for the labels and switches beneath the picture\n"
 "        this._UIGrid = new Gtk.Grid ({\n"
@@ -41352,33 +43772,27 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
+"    }\n"
 "\n"
-"\n"
-"    _switchFlip: function() {\n"
+"    _switchFlip() {\n"
 "\n"
 "        // Change the picture depending on which switches are flipped\n"
 "        if (this._flySwitch.get_active()) {\n"
 "\n"
-"            if (this._birdSwitch.get_active()) this._image.set_from_file (\"muteswan.png\");\n"
-"\n"
-"            else this._image.set_from_file (\"fruitbat.png\");\n"
-"        }\n"
-"\n"
-"        else {\n"
-"\n"
-"            if (this._birdSwitch.get_active()) this._image.set_from_file (\"gentoopenguin.png\");\n"
-"\n"
-"            else this._image.set_from_file (\"redfox.png\");\n"
+"            if (this._birdSwitch.get_active())\n"
+"                this._image.set_from_file (\"muteswan.png\");\n"
+"            else\n"
+"                this._image.set_from_file (\"fruitbat.png\");\n"
+"        } else {\n"
 "\n"
+"            if (this._birdSwitch.get_active())\n"
+"                this._image.set_from_file (\"gentoopenguin.png\");\n"
+"            else\n"
+"                this._image.set_from_file (\"redfox.png\");\n"
 "        }\n"
+"    }\n"
 "\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _initMenus: function() {\n"
+"    _initMenus() {\n"
 "\n"
 "        // Build the application's menu so we can have an \"About\" button\n"
 "        let menu = new Gio.Menu();\n"
@@ -41388,24 +43802,16 @@ msgstr ""
 "\n"
 "        // Bind the \"About\" button to the _showAbout() function\n"
 "        let aboutAction = new Gio.SimpleAction ({ name: 'about' });\n"
-"        aboutAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._showAbout();\n"
-"            }));\n"
+"        aboutAction.connect('activate', () =&gt; { this._showAbout(); });\n"
 "        this.application.add_action(aboutAction);\n"
 "\n"
 "        // Bind the \"Quit\" button to the function that closes the window\n"
 "        let quitAction = new Gio.SimpleAction ({ name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _showAbout: function () {\n"
+"    _showAbout() {\n"
 "\n"
 "        // String arrays of the names of the people involved in the project\n"
 "        var artists = ['Rob Lee http://en.wikipedia.org/wiki/File:Fuzzy_Freddy.png', 'Ken Funakoshi 
http://en.wikipedia.org/wiki/File:Pygoscelis_papua_-Nagasaki_Penguin_Aquarium_-swimming_underwater-8a.png', 
'Shek Graham http://www.flickr.com/photos/shekgraham/127431519/in/photostream/', 'Mindaugas Urbonas 
http://commons.wikimedia.org/wiki/File:Mute_Swan-Mindaugas_Urbonas.png'];\n"
@@ -41435,8 +43841,7 @@ msgstr ""
 "            aboutDialog.destroy();\n"
 "        });\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new SwitchExample ();\n"
@@ -41466,63 +43871,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/switch.py.page:33
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -41778,16 +44126,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Switch.html\";>Gtk.Switch</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Switch.html\";>Gtk.Switch</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/textview.c.page:27 C/textview.py.page:39 C/textview.vala.page:27
-msgctxt "_"
-msgid "external ref='media/textview.png' md5='049e859ed1af2d7c93d8cb5cfd9f7792'"
-msgstr "external ref='media/textview.png' md5='049e859ed1af2d7c93d8cb5cfd9f7792'"
-
 #. (itstool) path: info/title
 #: C/textview.c.page:8
 msgctxt "text"
@@ -41827,6 +44165,16 @@ msgid ""
 "If we have a loooooooooooooooooooooooooooooooooooong (that was long) word, a* horizontal scrollbar will 
appear."
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/textview.c.page:27 C/textview.py.page:39 C/textview.vala.page:27
+msgctxt "_"
+msgid "external ref='media/textview.png' md5='049e859ed1af2d7c93d8cb5cfd9f7792'"
+msgstr "external ref='media/textview.png' md5='049e859ed1af2d7c93d8cb5cfd9f7792'"
+
 #. (itstool) path: page/p
 #: C/textview.c.page:28 C/textview.vala.page:28
 msgid "This is an example of Gtk.TextView"
@@ -41987,19 +44335,8 @@ msgstr ""
 msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkContainer.html\";>GtkContainer</link>"
 msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkContainer.html\";>GtkContainer</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/textview.js.page:26
-msgctxt "_"
-msgid "external ref='media/textviewpenguinchat.png' md5='0dd6f6aa44aaeab7901bd90162ed4c9a'"
-msgstr "external ref='media/textviewpenguinchat.png' md5='0dd6f6aa44aaeab7901bd90162ed4c9a'"
-
 #. (itstool) path: info/title
 #: C/textview.js.page:8
-#| msgid "JavaScript"
 msgctxt "text"
 msgid "TextView (JavaScript)"
 msgstr "TextView (JavaScript)"
@@ -42014,6 +44351,16 @@ msgstr "Ein mehrzeiliger Texteditor"
 msgid "TextView"
 msgstr "TextView"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/textview.js.page:26
+msgctxt "_"
+msgid "external ref='media/textviewpenguinchat.png' md5='0dd6f6aa44aaeab7901bd90162ed4c9a'"
+msgstr "external ref='media/textviewpenguinchat.png' md5='0dd6f6aa44aaeab7901bd90162ed4c9a'"
+
 #. (itstool) path: page/p
 #: C/textview.js.page:27
 msgid "A TextView is really (or at least usually) a nested set of three objects."
@@ -42506,39 +44853,341 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/textview.js.page:244
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const TextViewExample = new Lang.Class ({\n"
+#| "    Name: 'TextView Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.jstextview' });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function () {\n"
+#| "        this._window.present ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow  ({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            title: \"Talk to a Penguin\",\n"
+#| "            default_height: 400,\n"
+#| "            default_width: 440,\n"
+#| "            border_width: 20 });\n"
+#| "\n"
+#| "        // Create a label for the penguin to talk to you\n"
+#| "        this._penguin = new Gtk.Label ({\n"
+#| "            height_request: 180,\n"
+#| "            width_request: 400,\n"
+#| "            label: \"Squaaaak?\",\n"
+#| "            wrap: true });\n"
+#| "\n"
+#| "        // Create a textview for you to talk to the penguin\n"
+#| "        this.buffer = new Gtk.TextBuffer();\n"
+#| "        this._textView = new Gtk.TextView ({\n"
+#| "            buffer: this.buffer,\n"
+#| "            editable: true,\n"
+#| "            wrap_mode: Gtk.WrapMode.WORD });\n"
+#| "\n"
+#| "        // Create a \"scrolled window\" to put your textview in so it will scroll\n"
+#| "        this._scrolled = new Gtk.ScrolledWindow ({\n"
+#| "            hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,\n"
+#| "            vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,\n"
+#| "            shadow_type: Gtk.ShadowType.ETCHED_IN,\n"
+#| "            height_request: 180,\n"
+#| "            width_request: 400, });\n"
+#| "\n"
+#| "        // Put the textview into the scrolled window\n"
+#| "        this._scrolled.add_with_viewport (this._textView);\n"
+#| "\n"
+#| "        // Create a grid to organize them in\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER });\n"
+#| "\n"
+#| "        // Put the label and textview in the grid one on top of the other\n"
+#| "        this._grid.attach (this._penguin, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._scrolled, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Create a button to send your message to the penguin\n"
+#| "        this._send = new Gtk.Button ({\n"
+#| "            halign: Gtk.Align.END,\n"
+#| "            margin_top: 20,\n"
+#| "            label: \"Send\" });\n"
+#| "        this._send.connect ('clicked', Lang.bind (this, this._chat));\n"
+#| "\n"
+#| "        // Create a grid that will have the other grid on top and the button on bottom\n"
+#| "        this._mainGrid = new Gtk.Grid ({\n"
+#| "            halign: Gtk.Align.CENTER,\n"
+#| "            valign: Gtk.Align.CENTER });\n"
+#| "\n"
+#| "        // Add the other grid and the button to the main grid\n"
+#| "        this._mainGrid.attach (this._grid, 0, 0, 1, 1);\n"
+#| "        this._mainGrid.attach (this._send, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Attach the main grid to the window\n"
+#| "        this._window.add (this._mainGrid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _chat: function () {\n"
+#| "\n"
+#| "        // Create a random number to determine what the penguin says\n"
+#| "        this.number = Math.floor ((Math.random() * 3) + 1);\n"
+#| "\n"
+#| "        // Did you actually say anything?\n"
+#| "        if (this.buffer.text) {\n"
+#| "\n"
+#| "            // Did you mention fish?\n"
+#| "            if (this.buffer.text.match (/fish/gi)) {\n"
+#| "\n"
+#| "                // Have the penguin squaak about fish\n"
+#| "                if (this.number == 1)\n"
+#| "                    this._penguin.set_label (\"FISH!\");\n"
+#| "\n"
+#| "                else if (this.number == 2)\n"
+#| "                    this._penguin.set_label (\"Fish fish fish fish. Fish!\");\n"
+#| "\n"
+#| "                else\n"
+#| "                    this._penguin.set_label (\"Fish? Fish fish fish. Fish fish. FISH!\");\n"
+#| "\n"
+#| "            }\n"
+#| "\n"
+#| "            // I guess you didn't mention fish\n"
+#| "            else {\n"
+#| "\n"
+#| "                // Have the penguin talk about penguinny stuff\n"
+#| "                if (this.number == 1)\n"
+#| "                    this._penguin.set_label (\"SQUAAK!\");\n"
+#| "\n"
+#| "                else if (this.number == 2)\n"
+#| "                    this._penguin.set_label (\"Ork ork ork ork squaak. Squaak squaak! *waves 
flippers*\");\n"
+#| "\n"
+#| "                else\n"
+#| "                    this._penguin.set_label (\"Ork ork ork ork ork?\");\n"
+#| "\n"
+#| "            }\n"
+#| "\n"
+#| "        }\n"
+#| "\n"
+#| "        // Clear the buffer\n"
+#| "        this.buffer.text = \"\";\n"
+#| "\n"
+#| "        // Give focus back to the textview so you don't have to click it again\n"
+#| "        this._textView.has_focus = true;\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new TextViewExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const TextViewExample = new Lang.Class ({\n"
-"    Name: 'TextView Example',\n"
+"class TextViewExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
-"            application_id: 'org.example.jstextview' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jstextview'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
+"    // Build the application's UI\n"
+"    _buildUI() {\n"
 "\n"
+"        // Create the application window\n"
+"        this._window = new Gtk.ApplicationWindow  ({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Talk to a Penguin\",\n"
+"            default_height: 400,\n"
+"            default_width: 440,\n"
+"            border_width: 20 });\n"
+"\n"
+"        // Create a label for the penguin to talk to you\n"
+"        this._penguin = new Gtk.Label ({\n"
+"            height_request: 180,\n"
+"            width_request: 400,\n"
+"            label: \"Squaaaak?\",\n"
+"            wrap: true });\n"
+"\n"
+"        // Create a textview for you to talk to the penguin\n"
+"        this.buffer = new Gtk.TextBuffer();\n"
+"        this._textView = new Gtk.TextView ({\n"
+"            buffer: this.buffer,\n"
+"            editable: true,\n"
+"            wrap_mode: Gtk.WrapMode.WORD });\n"
+"\n"
+"        // Create a \"scrolled window\" to put your textview in so it will scroll\n"
+"        this._scrolled = new Gtk.ScrolledWindow ({\n"
+"            hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,\n"
+"            vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,\n"
+"            shadow_type: Gtk.ShadowType.ETCHED_IN,\n"
+"            height_request: 180,\n"
+"            width_request: 400, });\n"
+"\n"
+"        // Put the textview into the scrolled window\n"
+"        this._scrolled.add_with_viewport (this._textView);\n"
+"\n"
+"        // Create a grid to organize them in\n"
+"        this._grid = new Gtk.Grid ({\n"
+"            halign: Gtk.Align.CENTER,\n"
+"            valign: Gtk.Align.CENTER });\n"
+"\n"
+"        // Put the label and textview in the grid one on top of the other\n"
+"        this._grid.attach (this._penguin, 0, 0, 1, 1);\n"
+"        this._grid.attach (this._scrolled, 0, 1, 1, 1);\n"
+"\n"
+"        // Create a button to send your message to the penguin\n"
+"        this._send = new Gtk.Button ({\n"
+"            halign: Gtk.Align.END,\n"
+"            margin_top: 20,\n"
+"            label: \"Send\" });\n"
+"        this._send.connect ('clicked', this._chat.bind(this));\n"
+"\n"
+"        // Create a grid that will have the other grid on top and the button on bottom\n"
+"        this._mainGrid = new Gtk.Grid ({\n"
+"            halign: Gtk.Align.CENTER,\n"
+"            valign: Gtk.Align.CENTER });\n"
+"\n"
+"        // Add the other grid and the button to the main grid\n"
+"        this._mainGrid.attach (this._grid, 0, 0, 1, 1);\n"
+"        this._mainGrid.attach (this._send, 0, 1, 1, 1);\n"
+"\n"
+"        // Attach the main grid to the window\n"
+"        this._window.add (this._mainGrid);\n"
+"\n"
+"        // Show the window and all child widgets\n"
+"        this._window.show_all();\n"
+"    }\n"
+"\n"
+"    _chat() {\n"
+"\n"
+"        // Create a random number to determine what the penguin says\n"
+"        this.number = Math.floor ((Math.random() * 3) + 1);\n"
+"\n"
+"        // Did you actually say anything?\n"
+"        if (this.buffer.text) {\n"
+"\n"
+"            // Did you mention fish?\n"
+"            if (this.buffer.text.match (/fish/gi)) {\n"
+"\n"
+"                // Have the penguin squaak about fish\n"
+"                if (this.number == 1)\n"
+"                    this._penguin.set_label (\"FISH!\");\n"
+"\n"
+"                else if (this.number == 2)\n"
+"                    this._penguin.set_label (\"Fish fish fish fish. Fish!\");\n"
+"\n"
+"                else\n"
+"                    this._penguin.set_label (\"Fish? Fish fish fish. Fish fish. FISH!\");\n"
+"\n"
+"            }\n"
+"\n"
+"            // I guess you didn't mention fish\n"
+"            else {\n"
+"\n"
+"                // Have the penguin talk about penguinny stuff\n"
+"                if (this.number == 1)\n"
+"                    this._penguin.set_label (\"SQUAAK!\");\n"
+"\n"
+"                else if (this.number == 2)\n"
+"                    this._penguin.set_label (\"Ork ork ork ork squaak. Squaak squaak! *waves 
flippers*\");\n"
+"\n"
+"                else\n"
+"                    this._penguin.set_label (\"Ork ork ork ork ork?\");\n"
+"\n"
+"            }\n"
+"\n"
+"        }\n"
+"\n"
+"        // Clear the buffer\n"
+"        this.buffer.text = \"\";\n"
+"\n"
+"        // Give focus back to the textview so you don't have to click it again\n"
+"        this._textView.has_focus = true;\n"
+"    }\n"
+"};\n"
+"\n"
+"// Run the application\n"
+"let app = new TextViewExample ();\n"
+"app.application.run (ARGV);\n"
+msgstr ""
+"#!/usr/bin/gjs\n"
+"\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"const Gtk = imports.gi.Gtk;\n"
+"\n"
+"class TextViewExample {\n"
+"\n"
+"    // Create the application itself\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jstextview'\n"
+"        });\n"
+"\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
+"\n"
+"    // Callback function for 'activate' signal presents windows when active\n"
+"    _onActivate() {\n"
+"        this._window.present();\n"
+"    }\n"
+"\n"
+"    // Callback function for 'startup' signal builds the UI\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow  ({\n"
@@ -42588,7 +45237,7 @@ msgid ""
 "            halign: Gtk.Align.END,\n"
 "            margin_top: 20,\n"
 "            label: \"Send\" });\n"
-"        this._send.connect ('clicked', Lang.bind (this, this._chat));\n"
+"        this._send.connect ('clicked', this._chat.bind(this));\n"
 "\n"
 "        // Create a grid that will have the other grid on top and the button on bottom\n"
 "        this._mainGrid = new Gtk.Grid ({\n"
@@ -42604,166 +45253,9 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _chat: function () {\n"
-"\n"
-"        // Create a random number to determine what the penguin says\n"
-"        this.number = Math.floor ((Math.random() * 3) + 1);\n"
-"\n"
-"        // Did you actually say anything?\n"
-"        if (this.buffer.text) {\n"
-"\n"
-"            // Did you mention fish?\n"
-"            if (this.buffer.text.match (/fish/gi)) {\n"
-"\n"
-"                // Have the penguin squaak about fish\n"
-"                if (this.number == 1)\n"
-"                    this._penguin.set_label (\"FISH!\");\n"
-"\n"
-"                else if (this.number == 2)\n"
-"                    this._penguin.set_label (\"Fish fish fish fish. Fish!\");\n"
-"\n"
-"                else\n"
-"                    this._penguin.set_label (\"Fish? Fish fish fish. Fish fish. FISH!\");\n"
-"\n"
-"            }\n"
-"\n"
-"            // I guess you didn't mention fish\n"
-"            else {\n"
-"\n"
-"                // Have the penguin talk about penguinny stuff\n"
-"                if (this.number == 1)\n"
-"                    this._penguin.set_label (\"SQUAAK!\");\n"
-"\n"
-"                else if (this.number == 2)\n"
-"                    this._penguin.set_label (\"Ork ork ork ork squaak. Squaak squaak! *waves 
flippers*\");\n"
-"\n"
-"                else\n"
-"                    this._penguin.set_label (\"Ork ork ork ork ork?\");\n"
-"\n"
-"            }\n"
-"\n"
-"        }\n"
-"\n"
-"        // Clear the buffer\n"
-"        this.buffer.text = \"\";\n"
-"\n"
-"        // Give focus back to the textview so you don't have to click it again\n"
-"        this._textView.has_focus = true;\n"
-"\n"
 "    }\n"
 "\n"
-"});\n"
-"\n"
-"// Run the application\n"
-"let app = new TextViewExample ();\n"
-"app.application.run (ARGV);\n"
-msgstr ""
-"#!/usr/bin/gjs\n"
-"\n"
-"const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"\n"
-"const TextViewExample = new Lang.Class ({\n"
-"    Name: 'TextView Example',\n"
-"\n"
-"    // Create the application itself\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
-"            application_id: 'org.example.jstextview' });\n"
-"\n"
-"        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
-"\n"
-"    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function () {\n"
-"        this._window.present ();\n"
-"    },\n"
-"\n"
-"    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    // Build the application's UI\n"
-"    _buildUI: function () {\n"
-"\n"
-"        // Create the application window\n"
-"        this._window = new Gtk.ApplicationWindow  ({\n"
-"            application: this.application,\n"
-"            window_position: Gtk.WindowPosition.CENTER,\n"
-"            title: \"Talk to a Penguin\",\n"
-"            default_height: 400,\n"
-"            default_width: 440,\n"
-"            border_width: 20 });\n"
-"\n"
-"        // Create a label for the penguin to talk to you\n"
-"        this._penguin = new Gtk.Label ({\n"
-"            height_request: 180,\n"
-"            width_request: 400,\n"
-"            label: \"Squaaaak?\",\n"
-"            wrap: true });\n"
-"\n"
-"        // Create a textview for you to talk to the penguin\n"
-"        this.buffer = new Gtk.TextBuffer();\n"
-"        this._textView = new Gtk.TextView ({\n"
-"            buffer: this.buffer,\n"
-"            editable: true,\n"
-"            wrap_mode: Gtk.WrapMode.WORD });\n"
-"\n"
-"        // Create a \"scrolled window\" to put your textview in so it will scroll\n"
-"        this._scrolled = new Gtk.ScrolledWindow ({\n"
-"            hscrollbar_policy: Gtk.PolicyType.AUTOMATIC,\n"
-"            vscrollbar_policy: Gtk.PolicyType.AUTOMATIC,\n"
-"            shadow_type: Gtk.ShadowType.ETCHED_IN,\n"
-"            height_request: 180,\n"
-"            width_request: 400, });\n"
-"\n"
-"        // Put the textview into the scrolled window\n"
-"        this._scrolled.add_with_viewport (this._textView);\n"
-"\n"
-"        // Create a grid to organize them in\n"
-"        this._grid = new Gtk.Grid ({\n"
-"            halign: Gtk.Align.CENTER,\n"
-"            valign: Gtk.Align.CENTER });\n"
-"\n"
-"        // Put the label and textview in the grid one on top of the other\n"
-"        this._grid.attach (this._penguin, 0, 0, 1, 1);\n"
-"        this._grid.attach (this._scrolled, 0, 1, 1, 1);\n"
-"\n"
-"        // Create a button to send your message to the penguin\n"
-"        this._send = new Gtk.Button ({\n"
-"            halign: Gtk.Align.END,\n"
-"            margin_top: 20,\n"
-"            label: \"Send\" });\n"
-"        this._send.connect ('clicked', Lang.bind (this, this._chat));\n"
-"\n"
-"        // Create a grid that will have the other grid on top and the button on bottom\n"
-"        this._mainGrid = new Gtk.Grid ({\n"
-"            halign: Gtk.Align.CENTER,\n"
-"            valign: Gtk.Align.CENTER });\n"
-"\n"
-"        // Add the other grid and the button to the main grid\n"
-"        this._mainGrid.attach (this._grid, 0, 0, 1, 1);\n"
-"        this._mainGrid.attach (this._send, 0, 1, 1, 1);\n"
-"\n"
-"        // Attach the main grid to the window\n"
-"        this._window.add (this._mainGrid);\n"
-"\n"
-"        // Show the window and all child widgets\n"
-"        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _chat: function () {\n"
+"    _chat() {\n"
 "\n"
 "        // Create a random number to determine what the penguin says\n"
 "        this.number = Math.floor ((Math.random() * 3) + 1);\n"
@@ -42808,10 +45300,8 @@ msgstr ""
 "\n"
 "        // Give focus back to the textview so you don't have to click it again\n"
 "        this._textView.has_focus = true;\n"
-"\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new TextViewExample ();\n"
@@ -42874,45 +45364,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/textview.py.page:46
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"ScrolledWindow Example\", application=app)\n"
-#| "        self.set_default_size(200, 200)\n"
-#| "\n"
-#| "        # the scrolledwindow\n"
-#| "        scrolled_window = Gtk.ScrolledWindow()\n"
-#| "        scrolled_window.set_border_width(10)\n"
-#| "        # there is always the scrollbar (otherwise: AUTOMATIC - only if needed - or NEVER)\n"
-#| "        scrolled_window.set_policy(Gtk.PolicyType.ALWAYS, Gtk.PolicyType.ALWAYS)\n"
-#| "\n"
-#| "        # an image - slightly larger than the window...\n"
-#| "        image = Gtk.Image()\n"
-#| "        image.set_from_file(\"gnome-image.png\")\n"
-#| "\n"
-#| "        # add the image to the scrolledwindow\n"
-#| "        scrolled_window.add_with_viewport(image)\n"
-#| "\n"
-#| "        # add the scrolledwindow to the window\n"
-#| "        self.add(scrolled_window)\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -43321,16 +45772,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.TextView.html\";>Gtk.Tex
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.WrapMode.html\";>Gtk.WrapMode</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.WrapMode.html\";>Gtk.WrapMode</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/togglebutton.c.page:27 C/togglebutton.js.page:22 C/togglebutton.py.page:23 C/togglebutton.vala.page:25
-msgctxt "_"
-msgid "external ref='media/togglebutton.png' md5='791e062613d4f9bd5936390b0aa18448'"
-msgstr "external ref='media/togglebutton.png' md5='791e062613d4f9bd5936390b0aa18448'"
-
 #. (itstool) path: info/title
 #: C/togglebutton.c.page:8
 msgctxt "text"
@@ -43347,6 +45788,16 @@ msgstr ""
 msgid "ToggleButton"
 msgstr "ToggleButton"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/togglebutton.c.page:27 C/togglebutton.js.page:22 C/togglebutton.py.page:23 C/togglebutton.vala.page:25
+msgctxt "_"
+msgid "external ref='media/togglebutton.png' md5='791e062613d4f9bd5936390b0aa18448'"
+msgstr "external ref='media/togglebutton.png' md5='791e062613d4f9bd5936390b0aa18448'"
+
 #. (itstool) path: page/p
 #: C/togglebutton.c.page:28 C/togglebutton.py.page:24 C/togglebutton.vala.page:26
 msgid "When this ToggleButton is in an active state, the spinner spins."
@@ -43523,7 +45974,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/GtkToggleButton.html
 
 #. (itstool) path: info/title
 #: C/togglebutton.js.page:8
-#| msgid "Classes in JavaScript"
 msgctxt "text"
 msgid "ToggleButton (JavaScript)"
 msgstr "ToggleButton (JavaScript)"
@@ -43794,42 +46244,123 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/togglebutton.js.page:149
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const ToggleButtonExample = new Lang.Class({\n"
+#| "    Name: 'ToggleButton Example',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jstogglebutton',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 300,\n"
+#| "            default_width: 300,\n"
+#| "            border_width: 30,\n"
+#| "            title: \"ToggleButton Example\"});\n"
+#| "\n"
+#| "        // Create the spinner that the button stops and starts\n"
+#| "        this._spinner = new Gtk.Spinner ({hexpand: true, vexpand: true});\n"
+#| "\n"
+#| "        // Create the togglebutton that starts and stops the spinner\n"
+#| "        this._toggleButton = new Gtk.ToggleButton ({label: \"Start/Stop\"});\n"
+#| "        this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));\n"
+#| "\n"
+#| "        // Create a grid and put everything in it\n"
+#| "        this._grid = new Gtk.Grid ({\n"
+#| "            row_homogeneous: false,\n"
+#| "            row_spacing: 15});\n"
+#| "        this._grid.attach (this._spinner, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._toggleButton, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onToggle: function() {\n"
+#| "\n"
+#| "        // Start or stop the spinner\n"
+#| "        if (this._toggleButton.get_active ())\n"
+#| "            this._spinner.start ();\n"
+#| "        else this._spinner.stop ();\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new ToggleButtonExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ToggleButtonExample = new Lang.Class({\n"
-"    Name: 'ToggleButton Example',\n"
+"class ToggleButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jstogglebutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -43845,7 +46376,7 @@ msgid ""
 "\n"
 "        // Create the togglebutton that starts and stops the spinner\n"
 "        this._toggleButton = new Gtk.ToggleButton ({label: \"Start/Stop\"});\n"
-"        this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));\n"
+"        this._toggleButton.connect ('toggled', this._onToggle.bind(this));\n"
 "\n"
 "        // Create a grid and put everything in it\n"
 "        this._grid = new Gtk.Grid ({\n"
@@ -43859,11 +46390,9 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onToggle: function() {\n"
+"    _onToggle() {\n"
 "\n"
 "        // Start or stop the spinner\n"
 "        if (this._toggleButton.get_active ())\n"
@@ -43871,8 +46400,7 @@ msgid ""
 "        else this._spinner.stop ();\n"
 "\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ToggleButtonExample ();\n"
@@ -43880,39 +46408,37 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const ToggleButtonExample = new Lang.Class({\n"
-"    Name: 'ToggleButton Example',\n"
+"class ToggleButtonExample {\n"
 "\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jstogglebutton',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
@@ -43928,7 +46454,7 @@ msgstr ""
 "\n"
 "        // Create the togglebutton that starts and stops the spinner\n"
 "        this._toggleButton = new Gtk.ToggleButton ({label: \"Start/Stop\"});\n"
-"        this._toggleButton.connect ('toggled', Lang.bind (this, this._onToggle));\n"
+"        this._toggleButton.connect ('toggled', this._onToggle.bind(this));\n"
 "\n"
 "        // Create a grid and put everything in it\n"
 "        this._grid = new Gtk.Grid ({\n"
@@ -43942,11 +46468,9 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
+"    }\n"
 "\n"
-"    _onToggle: function() {\n"
+"    _onToggle() {\n"
 "\n"
 "        // Start or stop the spinner\n"
 "        if (this._toggleButton.get_active ())\n"
@@ -43954,8 +46478,7 @@ msgstr ""
 "        else this._spinner.stop ();\n"
 "\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new ToggleButtonExample ();\n"
@@ -43975,63 +46498,6 @@ msgstr "ToggleButton (Python)"
 #. (itstool) path: section/code
 #: C/togglebutton.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "import sys\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    # a window\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Switch Example\", application=app)\n"
-#| "        self.set_default_size(300, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # a switch\n"
-#| "        switch = Gtk.Switch()\n"
-#| "        # turned on by default\n"
-#| "        switch.set_active(True)\n"
-#| "        # connect the signal notify::active emitted by the switch\n"
-#| "        # to the callback function activate_cb\n"
-#| "        switch.connect(\"notify::active\", self.activate_cb)\n"
-#| "\n"
-#| "        # a label\n"
-#| "        label = Gtk.Label()\n"
-#| "        label.set_text(\"Title\")\n"
-#| "\n"
-#| "        # a grid to allocate the widgets\n"
-#| "        grid = Gtk.Grid()\n"
-#| "        grid.set_column_spacing (10);\n"
-#| "        grid.attach (label, 0, 0, 1, 1);\n"
-#| "        grid.attach (switch, 1, 0, 1, 1);\n"
-#| "\n"
-#| "        # add the grid to the window\n"
-#| "        self.add(grid)\n"
-#| "\n"
-#| "    # Callback function. Since the signal is notify::active\n"
-#| "    # we need the argument 'active'\n"
-#| "    def activate_cb(self, button, active):\n"
-#| "        # if the button (i.e. the switch) is active, set the title\n"
-#| "        # of the window to \"Switch Example\"\n"
-#| "        if button.get_active():\n"
-#| "            self.set_title(\"Switch Example\")\n"
-#| "        # else, set it to \"\" (empty string)\n"
-#| "        else:\n"
-#| "            self.set_title(\"\")\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "import sys\n"
@@ -44302,17 +46768,6 @@ msgstr ""
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.ToggleButton.html\";>Gtk.ToggleButton</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.ToggleButton.html\";>Gtk.ToggleButton</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar.c.page:25 C/toolbar.js.page:22 C/toolbar.py.page:25 C/toolbar.vala.page:24 
C/toolbar_builder.py.page:38
-#: C/toolbar_builder.vala.page:25
-msgctxt "_"
-msgid "external ref='media/toolbar.png' md5='f0350855eedf6343952b72d6d906f738'"
-msgstr "external ref='media/toolbar.png' md5='f0350855eedf6343952b72d6d906f738'"
-
 #. (itstool) path: info/title
 #: C/toolbar.c.page:8
 msgctxt "text"
@@ -44329,6 +46784,17 @@ msgstr "Eine Leiste mit Knöpfen"
 msgid "Toolbar"
 msgstr "Toolbar"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar.c.page:25 C/toolbar.js.page:22 C/toolbar.py.page:25 C/toolbar.vala.page:24 
C/toolbar_builder.py.page:38
+#: C/toolbar_builder.vala.page:25
+msgctxt "_"
+msgid "external ref='media/toolbar.png' md5='f0350855eedf6343952b72d6d906f738'"
+msgstr "external ref='media/toolbar.png' md5='f0350855eedf6343952b72d6d906f738'"
+
 #. (itstool) path: page/p
 #: C/toolbar.c.page:26 C/toolbar.js.page:23 C/toolbar.vala.page:25
 msgid ""
@@ -44818,37 +47284,212 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/toolbar.js.page:26
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gdk = imports.gi.Gdk;\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const Application = new Lang.Class({\n"
+#| "    Name: 'Application',\n"
+#| "\n"
+#| "    //create the application\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.myapp',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "       //connect to 'activate' and 'startup' signals to the callback functions\n"
+#| "       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the UI (in this case it's just the ApplicationWindow\n"
+#| "    _buildUI: function() {\n"
+#| "        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"Toolbar Example\",\n"
+#| "                                                   default_height: 200,\n"
+#| "                                                   default_width: 400 });\n"
+#| "\n"
+#| "        this._grid = new Gtk.Grid();\n"
+#| "        this._window.add(this._grid);\n"
+#| "        this._grid.show();\n"
+#| "\n"
+#| "        this._createToolbar();\n"
+#| "        this._toolbar.set_hexpand(true);\n"
+#| "        this._grid.attach(this._toolbar, 0, 0, 1, 1);\n"
+#| "\n"
+#| "        //show the  toolbar and window\n"
+#| "        this._toolbar.show();\n"
+#| "        this._window.show();\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'activate' signal\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'startup' signal\n"
+#| "    _onStartup: function() {\n"
+#| "        this._initMenus();\n"
+#| "        this._buildUI();\n"
+#| "    },\n"
+#| "\n"
+#| "    //create the toolbar, its toolbuttons and their actions\n"
+#| "    _createToolbar: function() {\n"
+#| "\n"
+#| "        this._toolbar = new Gtk.Toolbar();\n"
+#| "        this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);\n"
+#| "\n"
+#| "        //create the \"New\" ToolButton and its SimpleAction.\n"
+#| "        //Using actions allows you to add them to the app menu\n"
+#| "        //without duplicating code.\n"
+#| "        let newAction = new Gio.SimpleAction({ name: 'new'});\n"
+#| "        newAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._newCB();\n"
+#| "            }));\n"
+#| "        this.application.add_action(newAction);//note: this action is added to the app\n"
+#| "\n"
+#| "        this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);\n"
+#| "        this._newButton.is_important = true;\n"
+#| "        this._toolbar.add(this._newButton);\n"
+#| "        this._newButton.show();\n"
+#| "        this._newButton.action_name = \"app.new\";\n"
+#| "\n"
+#| "        //create the \"Open\" ToolButton and its SimpleAction\n"
+#| "        let openAction = new Gio.SimpleAction({ name: 'open'});\n"
+#| "        openAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._openCB();\n"
+#| "            }));\n"
+#| "        this.application.add_action(openAction);\n"
+#| "\n"
+#| "        this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);\n"
+#| "        this._openButton.is_important = true;\n"
+#| "        this._toolbar.add(this._openButton);\n"
+#| "        this._openButton.show();\n"
+#| "        this._openButton.action_name = \"app.open\";\n"
+#| "\n"
+#| "        //create the \"Undo\" ToolButton and its SimpleAction\n"
+#| "        let undoAction = new Gio.SimpleAction({ name: 'undo'});\n"
+#| "        undoAction.connect('activate', Lang.bind (this,\n"
+#| "            function() {\n"
+#| "                this._undoCB();\n"
+#| "            }));\n"
+#| "        this._window.add_action(undoAction);//note this action is added to the window\n"
+#| "\n"
+#| "        this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);\n"
+#| "        this._undoButton.is_important = true;\n"
+#| "        this._toolbar.add(this._undoButton);\n"
+#| "        this._undoButton.show();\n"
+#| "        this._undoButton.action_name = \"win.undo\";\n"
+#| "\n"
+#| "        //create the \"Fullscreen\" ToolButton and its SimpleAction\n"
+#| "        let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });\n"
+#| "        fullscreenToggleAction.connect ('activate', Lang.bind (this,\n"
+#| "            function () {\n"
+#| "                this._fullscreenToggleCB();\n"
+#| "            }));\n"
+#| "        this._window.add_action(fullscreenToggleAction);\n"
+#| "\n"
+#| "        this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);\n"
+#| "        this._fullscreenButton.is_important = true;\n"
+#| "        this._toolbar.add(this._fullscreenButton);\n"
+#| "        this._fullscreenButton.show();\n"
+#| "        this._fullscreenButton.action_name = \"win.fullscreenToggle\";\n"
+#| "\n"
+#| "        //create the \"leaveFullscreen\" ToolButton, and set the action name to 
\"win.fullscreenToggle\"\n"
+#| "        this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);\n"
+#| "        this._leaveFullscreenButton.is_important = true;\n"
+#| "        this._toolbar.add(this._leaveFullscreenButton);\n"
+#| "        this._leaveFullscreenButton.action_name = \"win.fullscreenToggle\";\n"
+#| "    },\n"
+#| "\n"
+#| "    _initMenus: function () {\n"
+#| "        let menu = new Gio.Menu();\n"
+#| "        menu.append(\"New\", 'app.new');\n"
+#| "        menu.append(\"Open\", 'app.open');\n"
+#| "        menu.append(\"Quit\", 'app.quit');\n"
+#| "\n"
+#| "        this.application.set_app_menu(menu);\n"
+#| "\n"
+#| "        let quitAction = new Gio.SimpleAction({name: 'quit' });\n"
+#| "        quitAction.connect('activate', Lang.bind(this,\n"
+#| "            function() {\n"
+#| "                this._window.destroy();\n"
+#| "            }));\n"
+#| "        this.application.add_action(quitAction);\n"
+#| "    },\n"
+#| "\n"
+#| "    _newCB: function() {\n"
+#| "        print(\"You clicked 'New'.\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _openCB: function() {\n"
+#| "        print(\"You clicked 'Open'.\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _undoCB:function () {\n"
+#| "        print (\"You clicked 'Undo'.\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _fullscreenToggleCB: function() {\n"
+#| "        if ((this._window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ) {\n"
+#| "              this._window.unfullscreen();\n"
+#| "              this._leaveFullscreenButton.hide();\n"
+#| "              this._fullscreenButton.show();\n"
+#| "        }\n"
+#| "        else {\n"
+#| "             this._window.fullscreen();\n"
+#| "             this._fullscreenButton.hide();\n"
+#| "             this._leaveFullscreenButton.show();\n"
+#| "        }\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "//run the application\n"
+#| "let app = new Application();\n"
+#| "app.application.run(ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gdk = imports.gi.Gdk;\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow\n"
-"    _buildUI: function() {\n"
-"        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
-"                                                   window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                   title: \"Toolbar Example\",\n"
-"                                                   default_height: 200,\n"
-"                                                   default_width: 400 });\n"
+"    _buildUI() {\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Toolbar Example\",\n"
+"            default_height: 200,\n"
+"            default_width: 400\n"
+"        });\n"
 "\n"
 "        this._grid = new Gtk.Grid();\n"
 "        this._window.add(this._grid);\n"
@@ -44861,21 +47502,21 @@ msgid ""
 "        //show the  toolbar and window\n"
 "        this._toolbar.show();\n"
 "        this._window.show();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //create the toolbar, its toolbuttons and their actions\n"
-"    _createToolbar: function() {\n"
+"    _createToolbar() {\n"
 "\n"
 "        this._toolbar = new Gtk.Toolbar();\n"
 "        this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);\n"
@@ -44884,13 +47525,10 @@ msgid ""
 "        //Using actions allows you to add them to the app menu\n"
 "        //without duplicating code.\n"
 "        let newAction = new Gio.SimpleAction({ name: 'new'});\n"
-"        newAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._newCB();\n"
-"            }));\n"
+"        newAction.connect('activate', () =&gt; { this._newCB(); });\n"
 "        this.application.add_action(newAction);//note: this action is added to the app\n"
 "\n"
-"        this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);\n"
+"        this._newButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);\n"
 "        this._newButton.is_important = true;\n"
 "        this._toolbar.add(this._newButton);\n"
 "        this._newButton.show();\n"
@@ -44898,13 +47536,10 @@ msgid ""
 "\n"
 "        //create the \"Open\" ToolButton and its SimpleAction\n"
 "        let openAction = new Gio.SimpleAction({ name: 'open'});\n"
-"        openAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._openCB();\n"
-"            }));\n"
+"        openAction.connect('activate', () =&gt; { this._openCB(); });\n"
 "        this.application.add_action(openAction);\n"
 "\n"
-"        this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);\n"
+"        this._openButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);\n"
 "        this._openButton.is_important = true;\n"
 "        this._toolbar.add(this._openButton);\n"
 "        this._openButton.show();\n"
@@ -44912,13 +47547,10 @@ msgid ""
 "\n"
 "        //create the \"Undo\" ToolButton and its SimpleAction\n"
 "        let undoAction = new Gio.SimpleAction({ name: 'undo'});\n"
-"        undoAction.connect('activate', Lang.bind (this,\n"
-"            function() {\n"
-"                this._undoCB();\n"
-"            }));\n"
+"        undoAction.connect('activate', () =&gt; { this._undoCB(); });\n"
 "        this._window.add_action(undoAction);//note this action is added to the window\n"
 "\n"
-"        this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);\n"
+"        this._undoButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);\n"
 "        this._undoButton.is_important = true;\n"
 "        this._toolbar.add(this._undoButton);\n"
 "        this._undoButton.show();\n"
@@ -44926,26 +47558,25 @@ msgid ""
 "\n"
 "        //create the \"Fullscreen\" ToolButton and its SimpleAction\n"
 "        let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });\n"
-"        fullscreenToggleAction.connect ('activate', Lang.bind (this,\n"
-"            function () {\n"
-"                this._fullscreenToggleCB();\n"
-"            }));\n"
+"        fullscreenToggleAction.connect('activate', () =&gt; {\n"
+"            this._fullscreenToggleCB();\n"
+"        });\n"
 "        this._window.add_action(fullscreenToggleAction);\n"
 "\n"
-"        this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);\n"
+"        this._fullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);\n"
 "        this._fullscreenButton.is_important = true;\n"
 "        this._toolbar.add(this._fullscreenButton);\n"
 "        this._fullscreenButton.show();\n"
 "        this._fullscreenButton.action_name = \"win.fullscreenToggle\";\n"
 "\n"
 "        //create the \"leaveFullscreen\" ToolButton, and set the action name to \"win.fullscreenToggle\"\n"
-"        this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);\n"
+"        this._leaveFullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);\n"
 "        this._leaveFullscreenButton.is_important = true;\n"
 "        this._toolbar.add(this._leaveFullscreenButton);\n"
 "        this._leaveFullscreenButton.action_name = \"win.fullscreenToggle\";\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _initMenus: function () {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"New\", 'app.new');\n"
 "        menu.append(\"Open\", 'app.open');\n"
@@ -44954,38 +47585,34 @@ msgid ""
 "        this.application.set_app_menu(menu);\n"
 "\n"
 "        let quitAction = new Gio.SimpleAction({name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _newCB: function() {\n"
+"    _newCB() {\n"
 "        print(\"You clicked 'New'.\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _openCB: function() {\n"
+"    _openCB() {\n"
 "        print(\"You clicked 'Open'.\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _undoCB:function () {\n"
+"    _undoCB() {\n"
 "        print (\"You clicked 'Undo'.\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _fullscreenToggleCB: function() {\n"
+"    _fullscreenToggleCB() {\n"
 "        if ((this._window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ) {\n"
 "              this._window.unfullscreen();\n"
 "              this._leaveFullscreenButton.hide();\n"
 "              this._fullscreenButton.show();\n"
-"        }\n"
-"        else {\n"
+"        } else {\n"
 "             this._window.fullscreen();\n"
 "             this._fullscreenButton.hide();\n"
 "             this._leaveFullscreenButton.show();\n"
 "        }\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application();\n"
@@ -44993,34 +47620,37 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gdk = imports.gi.Gdk;\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "\n"
-"const Application = new Lang.Class({\n"
-"    Name: 'Application',\n"
+"class Application {\n"
 "\n"
 "    //create the application\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
 "       //connect to 'activate' and 'startup' signals to the callback functions\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"       this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"       this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    //create the UI (in this case it's just the ApplicationWindow\n"
-"    _buildUI: function() {\n"
-"        this._window = new Gtk.ApplicationWindow({ application: this.application,\n"
-"                                                   window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                   title: \"Toolbar Example\",\n"
-"                                                   default_height: 200,\n"
-"                                                   default_width: 400 });\n"
+"    _buildUI() {\n"
+"        this._window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Toolbar Example\",\n"
+"            default_height: 200,\n"
+"            default_width: 400\n"
+"        });\n"
 "\n"
 "        this._grid = new Gtk.Grid();\n"
 "        this._window.add(this._grid);\n"
@@ -45033,21 +47663,21 @@ msgstr ""
 "        //show the  toolbar and window\n"
 "        this._toolbar.show();\n"
 "        this._window.show();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //callback function for 'startup' signal\n"
-"    _onStartup: function() {\n"
+"    _onStartup() {\n"
 "        this._initMenus();\n"
 "        this._buildUI();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    //create the toolbar, its toolbuttons and their actions\n"
-"    _createToolbar: function() {\n"
+"    _createToolbar() {\n"
 "\n"
 "        this._toolbar = new Gtk.Toolbar();\n"
 "        this._toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);\n"
@@ -45056,13 +47686,10 @@ msgstr ""
 "        //Using actions allows you to add them to the app menu\n"
 "        //without duplicating code.\n"
 "        let newAction = new Gio.SimpleAction({ name: 'new'});\n"
-"        newAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._newCB();\n"
-"            }));\n"
+"        newAction.connect('activate', () =&gt; { this._newCB(); });\n"
 "        this.application.add_action(newAction);//note: this action is added to the app\n"
 "\n"
-"        this._newButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);\n"
+"        this._newButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);\n"
 "        this._newButton.is_important = true;\n"
 "        this._toolbar.add(this._newButton);\n"
 "        this._newButton.show();\n"
@@ -45070,13 +47697,10 @@ msgstr ""
 "\n"
 "        //create the \"Open\" ToolButton and its SimpleAction\n"
 "        let openAction = new Gio.SimpleAction({ name: 'open'});\n"
-"        openAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._openCB();\n"
-"            }));\n"
+"        openAction.connect('activate', () =&gt; { this._openCB(); });\n"
 "        this.application.add_action(openAction);\n"
 "\n"
-"        this._openButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);\n"
+"        this._openButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);\n"
 "        this._openButton.is_important = true;\n"
 "        this._toolbar.add(this._openButton);\n"
 "        this._openButton.show();\n"
@@ -45084,13 +47708,10 @@ msgstr ""
 "\n"
 "        //create the \"Undo\" ToolButton and its SimpleAction\n"
 "        let undoAction = new Gio.SimpleAction({ name: 'undo'});\n"
-"        undoAction.connect('activate', Lang.bind (this,\n"
-"            function() {\n"
-"                this._undoCB();\n"
-"            }));\n"
+"        undoAction.connect('activate', () =&gt; { this._undoCB(); });\n"
 "        this._window.add_action(undoAction);//note this action is added to the window\n"
 "\n"
-"        this._undoButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);\n"
+"        this._undoButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);\n"
 "        this._undoButton.is_important = true;\n"
 "        this._toolbar.add(this._undoButton);\n"
 "        this._undoButton.show();\n"
@@ -45098,26 +47719,25 @@ msgstr ""
 "\n"
 "        //create the \"Fullscreen\" ToolButton and its SimpleAction\n"
 "        let fullscreenToggleAction = new Gio.SimpleAction ({ name: 'fullscreenToggle' });\n"
-"        fullscreenToggleAction.connect ('activate', Lang.bind (this,\n"
-"            function () {\n"
-"                this._fullscreenToggleCB();\n"
-"            }));\n"
+"        fullscreenToggleAction.connect('activate', () =&gt; {\n"
+"            this._fullscreenToggleCB();\n"
+"        });\n"
 "        this._window.add_action(fullscreenToggleAction);\n"
 "\n"
-"        this._fullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);\n"
+"        this._fullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);\n"
 "        this._fullscreenButton.is_important = true;\n"
 "        this._toolbar.add(this._fullscreenButton);\n"
 "        this._fullscreenButton.show();\n"
 "        this._fullscreenButton.action_name = \"win.fullscreenToggle\";\n"
 "\n"
 "        //create the \"leaveFullscreen\" ToolButton, and set the action name to \"win.fullscreenToggle\"\n"
-"        this._leaveFullscreenButton = new Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);\n"
+"        this._leaveFullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_LEAVE_FULLSCREEN);\n"
 "        this._leaveFullscreenButton.is_important = true;\n"
 "        this._toolbar.add(this._leaveFullscreenButton);\n"
 "        this._leaveFullscreenButton.action_name = \"win.fullscreenToggle\";\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _initMenus: function () {\n"
+"    _initMenus() {\n"
 "        let menu = new Gio.Menu();\n"
 "        menu.append(\"New\", 'app.new');\n"
 "        menu.append(\"Open\", 'app.open');\n"
@@ -45126,38 +47746,34 @@ msgstr ""
 "        this.application.set_app_menu(menu);\n"
 "\n"
 "        let quitAction = new Gio.SimpleAction({name: 'quit' });\n"
-"        quitAction.connect('activate', Lang.bind(this,\n"
-"            function() {\n"
-"                this._window.destroy();\n"
-"            }));\n"
+"        quitAction.connect('activate', () =&gt; { this._window.destroy(); });\n"
 "        this.application.add_action(quitAction);\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _newCB: function() {\n"
+"    _newCB() {\n"
 "        print(\"You clicked 'New'.\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _openCB: function() {\n"
+"    _openCB() {\n"
 "        print(\"You clicked 'Open'.\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _undoCB:function () {\n"
+"    _undoCB() {\n"
 "        print (\"You clicked 'Undo'.\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _fullscreenToggleCB: function() {\n"
+"    _fullscreenToggleCB() {\n"
 "        if ((this._window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ) {\n"
 "              this._window.unfullscreen();\n"
 "              this._leaveFullscreenButton.hide();\n"
 "              this._fullscreenButton.show();\n"
-"        }\n"
-"        else {\n"
+"        } else {\n"
 "             this._window.fullscreen();\n"
 "             this._fullscreenButton.hide();\n"
 "             this._leaveFullscreenButton.show();\n"
 "        }\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application();\n"
@@ -45865,76 +48481,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.ToolButton.html\";>Gtk.T
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html\";>Gtk.Stock</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Stock.html\";>Gtk.Stock</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:50 C/toolbar_builder.vala.page:33
-msgctxt "_"
-msgid "external ref='media/glade_ui.png' md5='baea74fe213bc12ea934f64f6977215a'"
-msgstr "external ref='media/glade_ui.png' md5='baea74fe213bc12ea934f64f6977215a'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:56 C/toolbar_builder.vala.page:39
-msgctxt "_"
-msgid "external ref='media/glade_select_toolbar.png' md5='f7b5b224050b2e387eb04362fc99df00'"
-msgstr "external ref='media/glade_select_toolbar.png' md5='f7b5b224050b2e387eb04362fc99df00'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:62 C/toolbar_builder.vala.page:45
-msgctxt "_"
-msgid "external ref='media/glade_toolbar_general.png' md5='e31daba6e8a3e526aca89d5f1622edaa'"
-msgstr "external ref='media/glade_toolbar_general.png' md5='e31daba6e8a3e526aca89d5f1622edaa'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:68 C/toolbar_builder.vala.page:51
-msgctxt "_"
-msgid "external ref='media/glade_toolbar_common.png' md5='d5ec6cc0218ca98e195dbd033feb9ac5'"
-msgstr "external ref='media/glade_toolbar_common.png' md5='d5ec6cc0218ca98e195dbd033feb9ac5'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:74 C/toolbar_builder.vala.page:57
-msgctxt "_"
-msgid "external ref='media/glade_toolbar_edit.png' md5='feb1e2b7040d24a4d030f94cf07c81fd'"
-msgstr "external ref='media/glade_toolbar_edit.png' md5='feb1e2b7040d24a4d030f94cf07c81fd'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:133 C/toolbar_builder.vala.page:116
-msgctxt "_"
-msgid "external ref='media/glade_toolbar_editor.png' md5='8af65241e5ca47d5494a7b36640e6f1c'"
-msgstr "external ref='media/glade_toolbar_editor.png' md5='8af65241e5ca47d5494a7b36640e6f1c'"
-
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/toolbar_builder.py.page:142 C/toolbar_builder.vala.page:125
-msgctxt "_"
-msgid "external ref='media/glade_visible_no.png' md5='dc6c025aa825f4d772fbd283d6330026'"
-msgstr "external ref='media/glade_visible_no.png' md5='dc6c025aa825f4d772fbd283d6330026'"
-
 #. (itstool) path: info/title
 #: C/toolbar_builder.py.page:8
 msgctxt "text"
@@ -45969,6 +48515,16 @@ msgstr ""
 msgid "Open Glade, and save the file as <file>toolbar_builder.ui</file>"
 msgstr ""
 
+#. (itstool) path: p/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:50 C/toolbar_builder.vala.page:33
+msgctxt "_"
+msgid "external ref='media/glade_ui.png' md5='baea74fe213bc12ea934f64f6977215a'"
+msgstr "external ref='media/glade_ui.png' md5='baea74fe213bc12ea934f64f6977215a'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:50 C/toolbar_builder.vala.page:33
 msgid "<media type=\"image\" src=\"media/glade_ui.png\" width=\"900\"> Screenshot of Glade ui </media>"
@@ -45981,6 +48537,16 @@ msgid ""
 "toplevel</gui>."
 msgstr ""
 
+#. (itstool) path: p/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:56 C/toolbar_builder.vala.page:39
+msgctxt "_"
+msgid "external ref='media/glade_select_toolbar.png' md5='f7b5b224050b2e387eb04362fc99df00'"
+msgstr "external ref='media/glade_select_toolbar.png' md5='f7b5b224050b2e387eb04362fc99df00'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:56 C/toolbar_builder.vala.page:39
 msgid "<media type=\"image\" src=\"media/glade_select_toolbar.png\"> Screenshot of toolbar icon in Glade ui 
</media>"
@@ -45993,6 +48559,16 @@ msgid ""
 "<gui>Show Arrow</gui> to <gui>No</gui>."
 msgstr ""
 
+#. (itstool) path: p/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:62 C/toolbar_builder.vala.page:45
+msgctxt "_"
+msgid "external ref='media/glade_toolbar_general.png' md5='e31daba6e8a3e526aca89d5f1622edaa'"
+msgstr "external ref='media/glade_toolbar_general.png' md5='e31daba6e8a3e526aca89d5f1622edaa'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:62 C/toolbar_builder.vala.page:45
 msgid "<media type=\"image\" src=\"media/glade_toolbar_general.png\"> Screenshot of General tab </media>"
@@ -46003,6 +48579,16 @@ msgstr ""
 msgid "Under the <gui>Common</gui> tab, set <gui>Horizontal Expand</gui> to <gui>Yes</gui>."
 msgstr ""
 
+#. (itstool) path: p/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:68 C/toolbar_builder.vala.page:51
+msgctxt "_"
+msgid "external ref='media/glade_toolbar_common.png' md5='d5ec6cc0218ca98e195dbd033feb9ac5'"
+msgstr "external ref='media/glade_toolbar_common.png' md5='d5ec6cc0218ca98e195dbd033feb9ac5'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:68 C/toolbar_builder.vala.page:51
 msgid "<media type=\"image\" src=\"media/glade_toolbar_common.png\"> Screenshot of Common tab </media>"
@@ -46015,6 +48601,16 @@ msgid ""
 "appear."
 msgstr ""
 
+#. (itstool) path: p/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:74 C/toolbar_builder.vala.page:57
+msgctxt "_"
+msgid "external ref='media/glade_toolbar_edit.png' md5='feb1e2b7040d24a4d030f94cf07c81fd'"
+msgstr "external ref='media/glade_toolbar_edit.png' md5='feb1e2b7040d24a4d030f94cf07c81fd'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:74 C/toolbar_builder.vala.page:57
 msgid ""
@@ -46164,6 +48760,16 @@ msgstr "Vollbild verlassen"
 msgid "gtk-leave-fullscreen"
 msgstr "gtk-leave-fullscreen"
 
+#. (itstool) path: item/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:133 C/toolbar_builder.vala.page:116
+msgctxt "_"
+msgid "external ref='media/glade_toolbar_editor.png' md5='8af65241e5ca47d5494a7b36640e6f1c'"
+msgstr "external ref='media/glade_toolbar_editor.png' md5='8af65241e5ca47d5494a7b36640e6f1c'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:138 C/toolbar_builder.vala.page:121
 msgid "Close the <gui>Tool Bar Editor</gui>."
@@ -46179,6 +48785,16 @@ msgid ""
 "would override this setting - so in the code we have to use <code>show()</code> separately on all the 
elements."
 msgstr ""
 
+#. (itstool) path: p/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/toolbar_builder.py.page:142 C/toolbar_builder.vala.page:125
+msgctxt "_"
+msgid "external ref='media/glade_visible_no.png' md5='dc6c025aa825f4d772fbd283d6330026'"
+msgstr "external ref='media/glade_visible_no.png' md5='dc6c025aa825f4d772fbd283d6330026'"
+
 #. (itstool) path: item/p
 #: C/toolbar_builder.py.page:142 C/toolbar_builder.vala.page:125
 msgid "<media type=\"image\" src=\"media/glade_visible_no.png\"> Setting the visible property to No </media>"
@@ -46941,18 +49557,6 @@ msgstr ""
 "\treturn new MyApplication ().run (args);\n"
 "}\n"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/tooltip.c.page:23 C/tooltip.js.page:23 C/tooltip.py.page:24 C/tooltip.vala.page:23
-#| msgctxt "_"
-#| msgid "external ref='media/toolbar.png' md5='f0350855eedf6343952b72d6d906f738'"
-msgctxt "_"
-msgid "external ref='media/tooltip.png' md5='41e35860a51e39cb48c71e57bb8fb1d0'"
-msgstr "external ref='media/tooltip.png' md5='41e35860a51e39cb48c71e57bb8fb1d0'"
-
 #. (itstool) path: info/title
 #: C/tooltip.c.page:8
 msgctxt "text"
@@ -46969,6 +49573,16 @@ msgstr ""
 msgid "Tooltip"
 msgstr "Tooltip"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/tooltip.c.page:23 C/tooltip.js.page:23 C/tooltip.py.page:24 C/tooltip.vala.page:23
+msgctxt "_"
+msgid "external ref='media/tooltip.png' md5='41e35860a51e39cb48c71e57bb8fb1d0'"
+msgstr "external ref='media/tooltip.png' md5='41e35860a51e39cb48c71e57bb8fb1d0'"
+
 #. (itstool) path: page/p
 #: C/tooltip.c.page:24 C/tooltip.js.page:24 C/tooltip.py.page:25 C/tooltip.vala.page:24
 msgid "A toolbar with a tooltip (with an image) for a button."
@@ -47370,8 +49984,6 @@ msgstr "<link href=\"http://developer.gnome.org/gtk3/stable/gtk3-Stock-Items.htm
 
 #. (itstool) path: info/title
 #: C/tooltip.js.page:8
-#| msgctxt "text"
-#| msgid "Toolbar (JavaScript)"
 msgctxt "text"
 msgid "Tooltip (JavaScript)"
 msgstr "Tooltip (JavaScript)"
@@ -47384,47 +49996,204 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/tooltip.js.page:30
 #, no-wrap
+#| msgid ""
+#| "//!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gdk = imports.gi.Gdk;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const Gtk = imports.gi.Gtk; \n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const TooltipExample = new Lang.Class ({\n"
+#| "    Name: 'Tooltip Example',\n"
+#| "\n"
+#| "    // Create the application \n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({ application_id: 'org.example.jstooltip' });\n"
+#| "\n"
+#| "        // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents windows when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this.window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function () {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function () {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this.window = new Gtk.ApplicationWindow ({ application: this.application,\n"
+#| "                                                   window_position: Gtk.WindowPosition.CENTER,\n"
+#| "                                                   title: \"Toolbar with Tooltips Example\",\n"
+#| "                                                   default_width: 400,\n"
+#| "                                                   default_height: 200,\n"
+#| "                                                   border_width: 10 });\n"
+#| "\n"
+#| "        this.grid = new Gtk.Grid();\n"
+#| "\n"
+#| "        this.toolbar = this._createToolbar();\n"
+#| "        this.toolbar.set_hexpand(true);\n"
+#| "        this.toolbar.show();\n"
+#| "\n"
+#| "        this.grid.attach(this.toolbar, 0, 0, 1, 1);\n"
+#| "\n"
+#| "        this.window.add(this.grid);\n"
+#| "\n"
+#| "        this._newAction = new Gio.SimpleAction({ name: \"new\" });\n"
+#| "        this._newAction.connect(\"activate\", Lang.bind(this, this._newCallback));\n"
+#| "        this.window.add_action(this._newAction);\n"
+#| "\n"
+#| "        this._openAction = new Gio.SimpleAction({ name: \"open\" });\n"
+#| "        this._openAction.connect(\"activate\", Lang.bind(this, this._openCallback));\n"
+#| "        this.window.add_action(this._openAction);\n"
+#| "\n"
+#| "        this._undoAction = new Gio.SimpleAction({ name: \"undo\" });\n"
+#| "        this._undoAction.connect(\"activate\", Lang.bind(this, this._undoCallback));\n"
+#| "        this.window.add_action(this._undoAction);\n"
+#| "\n"
+#| "        this._fullScreenAction = new Gio.SimpleAction({ name: \"fullscreenToggle\" });\n"
+#| "        this._fullScreenAction.connect(\"activate\", Lang.bind(this, this._fullScreenCallback));\n"
+#| "        this.window.add_action(this._fullScreenAction);\n"
+#| "\n"
+#| "        this.window.show_all();\n"
+#| "   },\n"
+#| "\n"
+#| "     _createToolbar: function(){\n"
+#| "        this.toolbar = new Gtk.Toolbar();\n"
+#| "        this.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);\n"
+#| "\n"
+#| "        // button for the \"new\" action\n"
+#| "        this.newButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_NEW);\n"
+#| "        // with a tooltip with a given text        \n"
+#| "        this.newButton.set_tooltip_text(\"Create a new file\");\n"
+#| "        this.newButton.set_is_important(true);\n"
+#| "        this.toolbar.insert(this.newButton, 0);\n"
+#| "        this.newButton.show();\n"
+#| "        this.newButton.set_action_name(\"win.new\");\n"
+#| "\n"
+#| "        // button for the \"open\" action\n"
+#| "        this.openButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_OPEN);\n"
+#| "        // with a tooltip with a given text in the Pango markup language        \n"
+#| "        this.openButton.set_tooltip_markup(\"Open an &lt;i&gt;existing&lt;/i&gt; file\");\n"
+#| "        this.openButton.set_is_important(true);\n"
+#| "        this.toolbar.insert(this.openButton, 1);\n"
+#| "        this.openButton.show();\n"
+#| "        this.openButton.set_action_name(\"win.open\");\n"
+#| "\n"
+#| "        // button for the \"undo\" action\n"
+#| "        this.undoButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_UNDO);\n"
+#| "        // with a tooltip with an image\n"
+#| "        // set true the property \"has-tooltip\"        \n"
+#| "        this.undoButton.set_property(\"has-tooltip\", true);\n"
+#| "        // connect to the callback function that for the tooltip\n"
+#| "        // with the signal \"query-tooltip\"\n"
+#| "        this.undoButton.connect(\"query-tooltip\", Lang.bind(this, this._undoTooltipCallback));\n"
+#| "        this.undoButton.set_is_important(true);\n"
+#| "        this.toolbar.insert(this.undoButton, 2);\n"
+#| "        this.undoButton.show();\n"
+#| "        this.undoButton.set_action_name(\"win.undo\");\n"
+#| "\n"
+#| "        // button for the \"fullscreen/leave fullscreen\" action\n"
+#| "        this.fullscreenButton = Gtk.ToolButton.new_from_stock(Gtk.STOCK_FULLSCREEN);\n"
+#| "        this.fullscreenButton.set_is_important(true);\n"
+#| "        this.toolbar.insert(this.fullscreenButton, 3);\n"
+#| "        this.fullscreenButton.set_action_name(\"win.fullscreenToggle\");\n"
+#| "\n"
+#| "        return this.toolbar;\n"
+#| "    },\n"
+#| "\n"
+#| "    _newCallback: function(action, parameter) {\n"
+#| "        print(\"You clicked \\\"New\\\".\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _openCallback: function(action, parameter) {\n"
+#| "        print(\"You clicked \\\"Open\\\".\");\n"
+#| "    },\n"
+#| "\n"
+#| "    // the callback function for the tooltip of the \"undo\" button\n"
+#| "    _undoTooltipCallback: function(widget, x, y, keyboard_mode, tooltip) {\n"
+#| "        // set the text for the tooltip\n"
+#| "        tooltip.set_text(\"Undo your last action\");\n"
+#| "        // set an icon fot the tooltip\n"
+#| "        tooltip.set_icon_from_stock(Gtk.STOCK_UNDO, Gtk.IconSize.MENU);\n"
+#| "        // show the tooltip\n"
+#| "        return true;\n"
+#| "    },\n"
+#| "\n"
+#| "    _undoCallback: function(action, parameter) {\n"
+#| "        print(\"You clicked \\\"Undo\\\".\");\n"
+#| "    },\n"
+#| "\n"
+#| "    _fullScreenCallback: function() {\n"
+#| "        if ((this.window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ){\n"
+#| "            this.fullscreenButton.set_stock_id(Gtk.STOCK_FULLSCREEN);\n"
+#| "            this.fullscreenButton.set_tooltip_text(\"Make your window fullscreen\");\n"
+#| "            this.window.unfullscreen();\n"
+#| "        } else {\n"
+#| "            this.fullscreenButton.set_stock_id(Gtk.STOCK_LEAVE_FULLSCREEN);\n"
+#| "            this.fullscreenButton.set_tooltip_text(\"Leave fullscreen\");\n"
+#| "            this.window.fullscreen();\n"
+#| "        }\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new TooltipExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "//!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gdk = imports.gi.Gdk;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk; \n"
-"const Lang = imports.lang;\n"
-"\n"
-"const TooltipExample = new Lang.Class ({\n"
-"    Name: 'Tooltip Example',\n"
 "\n"
+"class TooltipExample {\n"
 "    // Create the application \n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({ application_id: 'org.example.jstooltip' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jstooltip'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"        this.window = new Gtk.ApplicationWindow ({ application: this.application,\n"
-"                                                   window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                   title: \"Toolbar with Tooltips Example\",\n"
-"                                                   default_width: 400,\n"
-"                                                   default_height: 200,\n"
-"                                                   border_width: 10 });\n"
+"        this.window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Toolbar with Tooltips Example\",\n"
+"            default_width: 400,\n"
+"            default_height: 200,\n"
+"            border_width: 10\n"
+"        });\n"
 "\n"
 "        this.grid = new Gtk.Grid();\n"
 "\n"
@@ -47437,25 +50206,26 @@ msgid ""
 "        this.window.add(this.grid);\n"
 "\n"
 "        this._newAction = new Gio.SimpleAction({ name: \"new\" });\n"
-"        this._newAction.connect(\"activate\", Lang.bind(this, this._newCallback));\n"
+"        this._newAction.connect(\"activate\", this._newCallback.bind(this));\n"
 "        this.window.add_action(this._newAction);\n"
 "\n"
 "        this._openAction = new Gio.SimpleAction({ name: \"open\" });\n"
-"        this._openAction.connect(\"activate\", Lang.bind(this, this._openCallback));\n"
+"        this._openAction.connect(\"activate\", this._openCallback.bind(this));\n"
 "        this.window.add_action(this._openAction);\n"
 "\n"
 "        this._undoAction = new Gio.SimpleAction({ name: \"undo\" });\n"
-"        this._undoAction.connect(\"activate\", Lang.bind(this, this._undoCallback));\n"
+"        this._undoAction.connect(\"activate\", this._undoCallback.bind(this));\n"
 "        this.window.add_action(this._undoAction);\n"
 "\n"
 "        this._fullScreenAction = new Gio.SimpleAction({ name: \"fullscreenToggle\" });\n"
-"        this._fullScreenAction.connect(\"activate\", Lang.bind(this, this._fullScreenCallback));\n"
+"        this._fullScreenAction.connect(\"activate\",\n"
+"                                       this._fullScreenCallback.bind(this));\n"
 "        this.window.add_action(this._fullScreenAction);\n"
 "\n"
 "        this.window.show_all();\n"
-"   },\n"
+"    }\n"
 "\n"
-"     _createToolbar: function(){\n"
+"    _createToolbar() {\n"
 "        this.toolbar = new Gtk.Toolbar();\n"
 "        this.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);\n"
 "\n"
@@ -47484,7 +50254,7 @@ msgid ""
 "        this.undoButton.set_property(\"has-tooltip\", true);\n"
 "        // connect to the callback function that for the tooltip\n"
 "        // with the signal \"query-tooltip\"\n"
-"        this.undoButton.connect(\"query-tooltip\", Lang.bind(this, this._undoTooltipCallback));\n"
+"        this.undoButton.connect(\"query-tooltip\", this._undoTooltipCallback.bind(this));\n"
 "        this.undoButton.set_is_important(true);\n"
 "        this.toolbar.insert(this.undoButton, 2);\n"
 "        this.undoButton.show();\n"
@@ -47497,31 +50267,31 @@ msgid ""
 "        this.fullscreenButton.set_action_name(\"win.fullscreenToggle\");\n"
 "\n"
 "        return this.toolbar;\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _newCallback: function(action, parameter) {\n"
+"    _newCallback(action, parameter) {\n"
 "        print(\"You clicked \\\"New\\\".\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _openCallback: function(action, parameter) {\n"
+"    _openCallback(action, parameter) {\n"
 "        print(\"You clicked \\\"Open\\\".\");\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // the callback function for the tooltip of the \"undo\" button\n"
-"    _undoTooltipCallback: function(widget, x, y, keyboard_mode, tooltip) {\n"
+"    _undoTooltipCallback(widget, x, y, keyboard_mode, tooltip) {\n"
 "        // set the text for the tooltip\n"
 "        tooltip.set_text(\"Undo your last action\");\n"
 "        // set an icon fot the tooltip\n"
 "        tooltip.set_icon_from_stock(Gtk.STOCK_UNDO, Gtk.IconSize.MENU);\n"
 "        // show the tooltip\n"
 "        return true;\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _undoCallback: function(action, parameter) {\n"
+"    _undoCallback(action, parameter) {\n"
 "        print(\"You clicked \\\"Undo\\\".\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _fullScreenCallback: function() {\n"
+"    _fullScreenCallback() {\n"
 "        if ((this.window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ){\n"
 "            this.fullscreenButton.set_stock_id(Gtk.STOCK_FULLSCREEN);\n"
 "            this.fullscreenButton.set_tooltip_text(\"Make your window fullscreen\");\n"
@@ -47532,7 +50302,7 @@ msgid ""
 "            this.window.fullscreen();\n"
 "        }\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new TooltipExample ();\n"
@@ -47540,44 +50310,48 @@ msgid ""
 msgstr ""
 "//!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gdk = '3.0';\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gdk = imports.gi.Gdk;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gio = imports.gi.Gio;\n"
 "const Gtk = imports.gi.Gtk; \n"
-"const Lang = imports.lang;\n"
-"\n"
-"const TooltipExample = new Lang.Class ({\n"
-"    Name: 'Tooltip Example',\n"
 "\n"
+"class TooltipExample {\n"
 "    // Create the application \n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({ application_id: 'org.example.jstooltip' });\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
+"            application_id: 'org.example.jstooltip'\n"
+"        });\n"
 "\n"
 "        // Connect 'activate' and 'startup' signals to the callback functions\n"
-"        this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"        this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents windows when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this.window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function () {\n"
-"        this._buildUI ();\n"
-"    },\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function () {\n"
+"    _buildUI() {\n"
 "\n"
 "        // Create the application window\n"
-"        this.window = new Gtk.ApplicationWindow ({ application: this.application,\n"
-"                                                   window_position: Gtk.WindowPosition.CENTER,\n"
-"                                                   title: \"Toolbar with Tooltips Example\",\n"
-"                                                   default_width: 400,\n"
-"                                                   default_height: 200,\n"
-"                                                   border_width: 10 });\n"
+"        this.window = new Gtk.ApplicationWindow({\n"
+"            application: this.application,\n"
+"            window_position: Gtk.WindowPosition.CENTER,\n"
+"            title: \"Toolbar with Tooltips Example\",\n"
+"            default_width: 400,\n"
+"            default_height: 200,\n"
+"            border_width: 10\n"
+"        });\n"
 "\n"
 "        this.grid = new Gtk.Grid();\n"
 "\n"
@@ -47590,25 +50364,26 @@ msgstr ""
 "        this.window.add(this.grid);\n"
 "\n"
 "        this._newAction = new Gio.SimpleAction({ name: \"new\" });\n"
-"        this._newAction.connect(\"activate\", Lang.bind(this, this._newCallback));\n"
+"        this._newAction.connect(\"activate\", this._newCallback.bind(this));\n"
 "        this.window.add_action(this._newAction);\n"
 "\n"
 "        this._openAction = new Gio.SimpleAction({ name: \"open\" });\n"
-"        this._openAction.connect(\"activate\", Lang.bind(this, this._openCallback));\n"
+"        this._openAction.connect(\"activate\", this._openCallback.bind(this));\n"
 "        this.window.add_action(this._openAction);\n"
 "\n"
 "        this._undoAction = new Gio.SimpleAction({ name: \"undo\" });\n"
-"        this._undoAction.connect(\"activate\", Lang.bind(this, this._undoCallback));\n"
+"        this._undoAction.connect(\"activate\", this._undoCallback.bind(this));\n"
 "        this.window.add_action(this._undoAction);\n"
 "\n"
 "        this._fullScreenAction = new Gio.SimpleAction({ name: \"fullscreenToggle\" });\n"
-"        this._fullScreenAction.connect(\"activate\", Lang.bind(this, this._fullScreenCallback));\n"
+"        this._fullScreenAction.connect(\"activate\",\n"
+"                                       this._fullScreenCallback.bind(this));\n"
 "        this.window.add_action(this._fullScreenAction);\n"
 "\n"
 "        this.window.show_all();\n"
-"   },\n"
+"    }\n"
 "\n"
-"     _createToolbar: function(){\n"
+"    _createToolbar() {\n"
 "        this.toolbar = new Gtk.Toolbar();\n"
 "        this.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR);\n"
 "\n"
@@ -47637,7 +50412,7 @@ msgstr ""
 "        this.undoButton.set_property(\"has-tooltip\", true);\n"
 "        // connect to the callback function that for the tooltip\n"
 "        // with the signal \"query-tooltip\"\n"
-"        this.undoButton.connect(\"query-tooltip\", Lang.bind(this, this._undoTooltipCallback));\n"
+"        this.undoButton.connect(\"query-tooltip\", this._undoTooltipCallback.bind(this));\n"
 "        this.undoButton.set_is_important(true);\n"
 "        this.toolbar.insert(this.undoButton, 2);\n"
 "        this.undoButton.show();\n"
@@ -47650,31 +50425,31 @@ msgstr ""
 "        this.fullscreenButton.set_action_name(\"win.fullscreenToggle\");\n"
 "\n"
 "        return this.toolbar;\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _newCallback: function(action, parameter) {\n"
+"    _newCallback(action, parameter) {\n"
 "        print(\"You clicked \\\"New\\\".\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _openCallback: function(action, parameter) {\n"
+"    _openCallback(action, parameter) {\n"
 "        print(\"You clicked \\\"Open\\\".\");\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // the callback function for the tooltip of the \"undo\" button\n"
-"    _undoTooltipCallback: function(widget, x, y, keyboard_mode, tooltip) {\n"
+"    _undoTooltipCallback(widget, x, y, keyboard_mode, tooltip) {\n"
 "        // set the text for the tooltip\n"
 "        tooltip.set_text(\"Undo your last action\");\n"
 "        // set an icon fot the tooltip\n"
 "        tooltip.set_icon_from_stock(Gtk.STOCK_UNDO, Gtk.IconSize.MENU);\n"
 "        // show the tooltip\n"
 "        return true;\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _undoCallback: function(action, parameter) {\n"
+"    _undoCallback(action, parameter) {\n"
 "        print(\"You clicked \\\"Undo\\\".\");\n"
-"    },\n"
+"    }\n"
 "\n"
-"    _fullScreenCallback: function() {\n"
+"    _fullScreenCallback() {\n"
 "        if ((this.window.get_window().get_state() &amp; Gdk.WindowState.FULLSCREEN) != 0 ){\n"
 "            this.fullscreenButton.set_stock_id(Gtk.STOCK_FULLSCREEN);\n"
 "            this.fullscreenButton.set_tooltip_text(\"Make your window fullscreen\");\n"
@@ -47685,7 +50460,7 @@ msgstr ""
 "            this.window.fullscreen();\n"
 "        }\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new TooltipExample ();\n"
@@ -48399,16 +51174,6 @@ msgstr ""
 "<link 
href=\"https://developer.gnome.org/gtk3/3.4/gtk3-Stock-Items.html#GTK-STOCK-UNDO:CAPS\";>Repertoire-Objekte</"
 "link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/treeview_advanced_liststore.py.page:23
-msgctxt "_"
-msgid "external ref='media/treeview_advanced_liststore.png' md5='102b512197fb9aa4ed9a16462f6af911'"
-msgstr "external ref='media/treeview_advanced_liststore.png' md5='102b512197fb9aa4ed9a16462f6af911'"
-
 #. (itstool) path: info/title
 #: C/treeview_advanced_liststore.py.page:8
 msgctxt "text"
@@ -48425,6 +51190,16 @@ msgstr ""
 msgid "More Complex Treeview with ListStore"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/treeview_advanced_liststore.py.page:23
+msgctxt "_"
+msgid "external ref='media/treeview_advanced_liststore.png' md5='102b512197fb9aa4ed9a16462f6af911'"
+msgstr "external ref='media/treeview_advanced_liststore.png' md5='102b512197fb9aa4ed9a16462f6af911'"
+
 #. (itstool) path: page/p
 #: C/treeview_advanced_liststore.py.page:24 C/treeview_simple_liststore.py.page:25
 msgid "This TreeView displays a simple ListStore with the selection \"changed\" signal connected."
@@ -48731,16 +51506,6 @@ msgid ""
 "\"signals-callbacks.py\"/> for a more detailed explanation."
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/treeview_cellrenderertoggle.py.page:23
-msgctxt "_"
-msgid "external ref='media/treeview_cellrenderertoggle.png' md5='ade9b9437f8f83150acf37610dab834d'"
-msgstr "external ref='media/treeview_cellrenderertoggle.png' md5='ade9b9437f8f83150acf37610dab834d'"
-
 #. (itstool) path: info/title
 #: C/treeview_cellrenderertoggle.py.page:8 C/treeview_treestore.py.page:8
 msgctxt "text"
@@ -48757,6 +51522,16 @@ msgstr ""
 msgid "More Complex TreeView with TreeStore"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/treeview_cellrenderertoggle.py.page:23
+msgctxt "_"
+msgid "external ref='media/treeview_cellrenderertoggle.png' md5='ade9b9437f8f83150acf37610dab834d'"
+msgstr "external ref='media/treeview_cellrenderertoggle.png' md5='ade9b9437f8f83150acf37610dab834d'"
+
 #. (itstool) path: page/p
 #: C/treeview_cellrenderertoggle.py.page:24
 msgid "This TreeView displays a TreeStore with two columns, one of which is rendered as a toggle."
@@ -48765,108 +51540,6 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/treeview_cellrenderertoggle.py.page:31
 #, no-wrap
-#| msgid ""
-#| "from gi.repository import Gtk\n"
-#| "from gi.repository import Pango\n"
-#| "import sys\n"
-#| "\n"
-#| "books = [[\"Tolstoy, Leo\", [\"War and Peace\", True], [\"Anna Karenina\", False]],\n"
-#| "         [\"Shakespeare, William\", [\"Hamlet\", False], [\"Macbeth\", True], [\"Othello\", False]],\n"
-#| "         [\"Tolkien, J.R.R.\", [\"The Lord of the Rings\", False]]]\n"
-#| "\n"
-#| "class MyWindow(Gtk.ApplicationWindow):\n"
-#| "    def __init__(self, app):\n"
-#| "        Gtk.Window.__init__(self, title=\"Library\", application=app)\n"
-#| "        self.set_default_size(250, 100)\n"
-#| "        self.set_border_width(10)\n"
-#| "\n"
-#| "        # the data are stored in the model\n"
-#| "        # create a treestore with two columns\n"
-#| "        self.store = Gtk.TreeStore(str, bool)\n"
-#| "        # fill in the model\n"
-#| "        for i in range(len(books)):\n"
-#| "            # the iter piter is returned when appending the author in the first column\n"
-#| "            # and False in the second\n"
-#| "            piter = self.store.append(None, [books[i][0], False])\n"
-#| "            # append the books and the associated boolean value as children of the author\n"
-#| "            j = 1\n"
-#| "            while j &lt; len(books[i]):\n"
-#| "                self.store.append(piter, books[i][j])\n"
-#| "                j += 1\n"
-#| "\n"
-#| "        # the treeview shows the model\n"
-#| "        # create a treeview on the model self.store\n"
-#| "        view = Gtk.TreeView()\n"
-#| "        view.set_model(self.store)\n"
-#| "\n"
-#| "        # the cellrenderer for the first column - text\n"
-#| "        renderer_books = Gtk.CellRendererText()\n"
-#| "        # the first column is created\n"
-#| "        column_books = Gtk.TreeViewColumn(\"Books\", renderer_books, text=0)\n"
-#| "        # and it is appended to the treeview\n"
-#| "        view.append_column(column_books)\n"
-#| "\n"
-#| "        # the cellrenderer for the second column - boolean rendered as a toggle\n"
-#| "        renderer_in_out = Gtk.CellRendererToggle()\n"
-#| "        # the second column is created\n"
-#| "        column_in_out = Gtk.TreeViewColumn(\"Out?\", renderer_in_out, active=1)\n"
-#| "        # and it is appended to the treeview\n"
-#| "        view.append_column(column_in_out)\n"
-#| "        # connect the cellrenderertoggle with a callback function\n"
-#| "        renderer_in_out.connect(\"toggled\", self.on_toggled)\n"
-#| "\n"
-#| "        # add the treeview to the window\n"
-#| "        self.add(view)\n"
-#| "\n"
-#| "    # callback function for the signal emitted by the cellrenderertoggle\n"
-#| "    def on_toggled(self, widget, path):\n"
-#| "        # the boolean value of the selected row\n"
-#| "        current_value = self.store[path][1]\n"
-#| "        # change the boolean value of the selected row in the model\n"
-#| "        self.store[path][1] = not current_value\n"
-#| "        # new current value!\n"
-#| "        current_value = not current_value\n"
-#| "        # if length of the path is 1 (that is, if we are selecting an author)\n"
-#| "        if len(path) == 1:\n"
-#| "            # get the iter associated with the path\n"
-#| "            piter = self.store.get_iter(path)\n"
-#| "            # get the iter associated with its first child\n"
-#| "            citer = self.store.iter_children(piter)\n"
-#| "            # while there are children, change the state of their boolean value\n"
-#| "            # to the value of the author\n"
-#| "            while citer is not None:\n"
-#| "                self.store[citer][1] = current_value\n"
-#| "                citer = self.store.iter_next(citer)\n"
-#| "        # if the length of the path is not 1 (that is, if we are selecting a book)\n"
-#| "        elif len(path) != 1:\n"
-#| "            # get the first child of the parent of the book (the first book of the author)\n"
-#| "            citer = self.store.get_iter(path)\n"
-#| "            piter = self.store.iter_parent(citer)\n"
-#| "            citer = self.store.iter_children(piter)\n"
-#| "            # check if all the children are selected\n"
-#| "            all_selected = True\n"
-#| "            while citer is not None:\n"
-#| "                if self.store[citer][1] == False:\n"
-#| "                    all_selected = False\n"
-#| "                    break\n"
-#| "                citer = self.store.iter_next(citer)\n"
-#| "            # if they do, the author as well is selected; otherwise it is not\n"
-#| "            self.store[piter][1] = all_selected\n"
-#| "\n"
-#| "class MyApplication(Gtk.Application):\n"
-#| "    def __init__(self):\n"
-#| "        Gtk.Application.__init__(self)\n"
-#| "\n"
-#| "    def do_activate(self):\n"
-#| "        win = MyWindow(self)\n"
-#| "        win.show_all()\n"
-#| "\n"
-#| "    def do_startup(self):\n"
-#| "        Gtk.Application.do_startup(self)\n"
-#| "\n"
-#| "app = MyApplication()\n"
-#| "exit_status = app.run(sys.argv)\n"
-#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "from gi.repository import Pango\n"
@@ -49108,16 +51781,6 @@ msgid ""
 msgstr ""
 "<link 
href=\"http://developer.gnome.org/gtk3/unstable/GtkCellRendererToggle.html\";>GtkCellRendererToggle</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/treeview_simple_liststore.js.page:25
-msgctxt "_"
-msgid "external ref='media/treeview_simple_liststore_penguins.png' md5='d750a0b9fddf8e508753cc639839871d'"
-msgstr "external ref='media/treeview_simple_liststore_penguins.png' md5='d750a0b9fddf8e508753cc639839871d'"
-
 #. (itstool) path: info/title
 #: C/treeview_simple_liststore.js.page:8
 msgctxt "text"
@@ -49134,6 +51797,16 @@ msgstr ""
 msgid "TreeView with ListStore"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/treeview_simple_liststore.js.page:25
+msgctxt "_"
+msgid "external ref='media/treeview_simple_liststore_penguins.png' md5='d750a0b9fddf8e508753cc639839871d'"
+msgstr "external ref='media/treeview_simple_liststore_penguins.png' md5='d750a0b9fddf8e508753cc639839871d'"
+
 #. (itstool) path: page/p
 #: C/treeview_simple_liststore.js.page:26
 msgid ""
@@ -49765,43 +52438,191 @@ msgstr ""
 #. (itstool) path: section/code
 #: C/treeview_simple_liststore.js.page:268
 #, no-wrap
+#| msgid ""
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const GObject = imports.gi.GObject;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "const Pango = imports.gi.Pango;\n"
+#| "\n"
+#| "const TreeViewExample = new Lang.Class({\n"
+#| "    Name: 'TreeView Example with Simple ListStore',\n"
+#| "\n"
+#| "    // Create the application itself\n"
+#| "    _init: function() {\n"
+#| "        this.application = new Gtk.Application({\n"
+#| "            application_id: 'org.example.jstreeviewsimpleliststore'\n"
+#| "        });\n"
+#| "\n"
+#| "    // Connect 'activate' and 'startup' signals to the callback functions\n"
+#| "    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'activate' signal presents window when active\n"
+#| "    _onActivate: function() {\n"
+#| "        this._window.present();\n"
+#| "    },\n"
+#| "\n"
+#| "    // Callback function for 'startup' signal builds the UI\n"
+#| "    _onStartup: function() {\n"
+#| "        this._buildUI ();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    // Build the application's UI\n"
+#| "    _buildUI: function() {\n"
+#| "\n"
+#| "        // Create the application window\n"
+#| "        this._window = new Gtk.ApplicationWindow({\n"
+#| "            application: this.application,\n"
+#| "            window_position: Gtk.WindowPosition.CENTER,\n"
+#| "            default_height: 250,\n"
+#| "            default_width: 100,\n"
+#| "            border_width: 20,\n"
+#| "            title: \"My Phone Book\"});\n"
+#| "\n"
+#| "        // Create the underlying liststore for the phonebook\n"
+#| "        this._listStore = new Gtk.ListStore ();\n"
+#| "        this._listStore.set_column_types ([\n"
+#| "            GObject.TYPE_STRING,\n"
+#| "            GObject.TYPE_STRING,\n"
+#| "            GObject.TYPE_STRING,\n"
+#| "            GObject.TYPE_STRING]);\n"
+#| "\n"
+#| "        // Data to go in the phonebook\n"
+#| "        let phonebook =\n"
+#| "            [{ name: \"Jurg\", surname: \"Billeter\", phone: \"555-0123\",\n"
+#| "                description: \"A friendly person.\"},\n"
+#| "             { name: \"Johannes\", surname: \"Schmid\", phone: \"555-1234\",\n"
+#| "                description: \"Easy phone number to remember.\"},\n"
+#| "             { name: \"Julita\", surname: \"Inca\", phone: \"555-2345\",\n"
+#| "                description: \"Another friendly person.\"},\n"
+#| "             { name: \"Javier\", surname: \"Jardon\", phone: \"555-3456\",\n"
+#| "                description: \"Bring fish for his penguins.\"},\n"
+#| "             { name: \"Jason\", surname: \"Clinton\", phone: \"555-4567\",\n"
+#| "                description: \"His cake's not a lie.\"},\n"
+#| "             { name: \"Random J.\", surname: \"Hacker\", phone: \"555-5678\",\n"
+#| "                description: \"Very random!\"}];\n"
+#| "\n"
+#| "        // Put the data in the phonebook\n"
+#| "        for (let i = 0; i &lt; phonebook.length; i++ ) {\n"
+#| "            let contact = phonebook [i];\n"
+#| "            this._listStore.set (this._listStore.append(), [0, 1, 2, 3],\n"
+#| "                [contact.name, contact.surname, contact.phone, contact.description]);\n"
+#| "        }\n"
+#| "\n"
+#| "        // Create the treeview\n"
+#| "        this._treeView = new Gtk.TreeView ({\n"
+#| "            expand: true,\n"
+#| "            model: this._listStore });\n"
+#| "\n"
+#| "        // Create the columns for the address book\n"
+#| "        let firstName = new Gtk.TreeViewColumn ({ title: \"First Name\" });\n"
+#| "        let lastName = new Gtk.TreeViewColumn ({ title: \"Last Name\" });\n"
+#| "        let phone = new Gtk.TreeViewColumn ({ title: \"Phone Number\" });\n"
+#| "\n"
+#| "        // Create a cell renderer for when bold text is needed\n"
+#| "        let bold = new Gtk.CellRendererText ({\n"
+#| "            weight: Pango.Weight.BOLD });\n"
+#| "\n"
+#| "        // Create a cell renderer for normal text\n"
+#| "        let normal = new Gtk.CellRendererText ();\n"
+#| "\n"
+#| "        // Pack the cell renderers into the columns\n"
+#| "        firstName.pack_start (bold, true);\n"
+#| "        lastName.pack_start (normal, true);\n"
+#| "        phone.pack_start (normal, true);\n"
+#| "\n"
+#| "        // Set each column to pull text from the TreeView's model\n"
+#| "        firstName.add_attribute (bold, \"text\", 0);\n"
+#| "        lastName.add_attribute (normal, \"text\", 1);\n"
+#| "        phone.add_attribute (normal, \"text\", 2);\n"
+#| "\n"
+#| "        // Insert the columns into the treeview\n"
+#| "        this._treeView.insert_column (firstName, 0);\n"
+#| "        this._treeView.insert_column (lastName, 1);\n"
+#| "        this._treeView.insert_column (phone, 2);\n"
+#| "\n"
+#| "        // Create the label that shows details for the name you select\n"
+#| "        this._label = new Gtk.Label ({ label: \"\" });\n"
+#| "\n"
+#| "        // Get which item is selected\n"
+#| "        this.selection = this._treeView.get_selection();\n"
+#| "\n"
+#| "        // When something new is selected, call _on_changed\n"
+#| "        this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));\n"
+#| "\n"
+#| "        // Create a grid to organize everything in\n"
+#| "        this._grid = new Gtk.Grid;\n"
+#| "\n"
+#| "        // Attach the treeview and label to the grid\n"
+#| "        this._grid.attach (this._treeView, 0, 0, 1, 1);\n"
+#| "        this._grid.attach (this._label, 0, 1, 1, 1);\n"
+#| "\n"
+#| "        // Add the grid to the window\n"
+#| "        this._window.add (this._grid);\n"
+#| "\n"
+#| "        // Show the window and all child widgets\n"
+#| "        this._window.show_all();\n"
+#| "    },\n"
+#| "\n"
+#| "\n"
+#| "\n"
+#| "    _onSelectionChanged: function () {\n"
+#| "\n"
+#| "        // Grab a treeiter pointing to the current selection\n"
+#| "        let [ isSelected, model, iter ] = this.selection.get_selected();\n"
+#| "\n"
+#| "        // Set the label to read off the values stored in the current selection\n"
+#| "        this._label.set_label (\"\\n\" +\n"
+#| "            this._listStore.get_value (iter, 0) + \" \" +\n"
+#| "            this._listStore.get_value (iter, 1) + \" \" +\n"
+#| "            this._listStore.get_value (iter, 2) + \"\\n\" +\n"
+#| "            this._listStore.get_value (iter, 3));\n"
+#| "\n"
+#| "    }\n"
+#| "\n"
+#| "});\n"
+#| "\n"
+#| "// Run the application\n"
+#| "let app = new TreeViewExample ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "const Pango = imports.gi.Pango;\n"
 "\n"
-"const TreeViewExample = new Lang.Class({\n"
-"    Name: 'TreeView Example with Simple ListStore',\n"
-"\n"
+"class TreeViewExample {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jstreeviewsimpleliststore'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
-"\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
 "            application: this.application,\n"
@@ -49880,7 +52701,7 @@ msgid ""
 "        this.selection = this._treeView.get_selection();\n"
 "\n"
 "        // When something new is selected, call _on_changed\n"
-"        this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));\n"
+"        this.selection.connect ('changed', this._onSelectionChanged.bind(this));\n"
 "\n"
 "        // Create a grid to organize everything in\n"
 "        this._grid = new Gtk.Grid;\n"
@@ -49894,12 +52715,9 @@ msgid ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _onSelectionChanged: function () {\n"
+"    }\n"
 "\n"
+"    _onSelectionChanged() {\n"
 "        // Grab a treeiter pointing to the current selection\n"
 "        let [ isSelected, model, iter ] = this.selection.get_selected();\n"
 "\n"
@@ -49908,11 +52726,10 @@ msgid ""
 "            this._listStore.get_value (iter, 0) + \" \" +\n"
 "            this._listStore.get_value (iter, 1) + \" \" +\n"
 "            this._listStore.get_value (iter, 2) + \"\\n\" +\n"
-"            this._listStore.get_value (iter, 3));\n"
-"\n"
+"            this._listStore.get_value (iter, 3)\n"
+"        );\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new TreeViewExample ();\n"
@@ -49920,40 +52737,36 @@ msgid ""
 msgstr ""
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const GObject = imports.gi.GObject;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
 "const Pango = imports.gi.Pango;\n"
 "\n"
-"const TreeViewExample = new Lang.Class({\n"
-"    Name: 'TreeView Example with Simple ListStore',\n"
-"\n"
+"class TreeViewExample {\n"
 "    // Create the application itself\n"
-"    _init: function() {\n"
+"    constructor() {\n"
 "        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.jstreeviewsimpleliststore'\n"
 "        });\n"
 "\n"
-"    // Connect 'activate' and 'startup' signals to the callback functions\n"
-"    this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    this.application.connect('startup', Lang.bind(this, this._onStartup));\n"
-"    },\n"
+"        // Connect 'activate' and 'startup' signals to the callback functions\n"
+"        this.application.connect('activate', this._onActivate.bind(this));\n"
+"        this.application.connect('startup', this._onStartup.bind(this));\n"
+"    }\n"
 "\n"
 "    // Callback function for 'activate' signal presents window when active\n"
-"    _onActivate: function() {\n"
+"    _onActivate() {\n"
 "        this._window.present();\n"
-"    },\n"
+"    }\n"
 "\n"
 "    // Callback function for 'startup' signal builds the UI\n"
-"    _onStartup: function() {\n"
-"        this._buildUI ();\n"
-"    },\n"
-"\n"
-"\n"
+"    _onStartup() {\n"
+"        this._buildUI();\n"
+"    }\n"
 "\n"
 "    // Build the application's UI\n"
-"    _buildUI: function() {\n"
-"\n"
+"    _buildUI() {\n"
 "        // Create the application window\n"
 "        this._window = new Gtk.ApplicationWindow({\n"
 "            application: this.application,\n"
@@ -50032,7 +52845,7 @@ msgstr ""
 "        this.selection = this._treeView.get_selection();\n"
 "\n"
 "        // When something new is selected, call _on_changed\n"
-"        this.selection.connect ('changed', Lang.bind (this, this._onSelectionChanged));\n"
+"        this.selection.connect ('changed', this._onSelectionChanged.bind(this));\n"
 "\n"
 "        // Create a grid to organize everything in\n"
 "        this._grid = new Gtk.Grid;\n"
@@ -50046,12 +52859,9 @@ msgstr ""
 "\n"
 "        // Show the window and all child widgets\n"
 "        this._window.show_all();\n"
-"    },\n"
-"\n"
-"\n"
-"\n"
-"    _onSelectionChanged: function () {\n"
+"    }\n"
 "\n"
+"    _onSelectionChanged() {\n"
 "        // Grab a treeiter pointing to the current selection\n"
 "        let [ isSelected, model, iter ] = this.selection.get_selected();\n"
 "\n"
@@ -50060,11 +52870,10 @@ msgstr ""
 "            this._listStore.get_value (iter, 0) + \" \" +\n"
 "            this._listStore.get_value (iter, 1) + \" \" +\n"
 "            this._listStore.get_value (iter, 2) + \"\\n\" +\n"
-"            this._listStore.get_value (iter, 3));\n"
-"\n"
+"            this._listStore.get_value (iter, 3)\n"
+"        );\n"
 "    }\n"
-"\n"
-"});\n"
+"};\n"
 "\n"
 "// Run the application\n"
 "let app = new TreeViewExample ();\n"
@@ -50087,16 +52896,6 @@ msgid ""
 msgstr ""
 "<link 
href=\"http://www.roojs.org/seed/gir-1.2-gtk-3.0/gjs/Gtk.TreeViewColumn.html\";>Gtk.TreeViewColumn</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/treeview_simple_liststore.py.page:24 C/treeview_simple_liststore.vala.page:24
-msgctxt "_"
-msgid "external ref='media/treeview_simple_liststore.png' md5='2dc501a2b95b094da985d37b66aee90c'"
-msgstr "external ref='media/treeview_simple_liststore.png' md5='2dc501a2b95b094da985d37b66aee90c'"
-
 #. (itstool) path: info/title
 #: C/treeview_simple_liststore.py.page:8
 msgctxt "text"
@@ -50113,9 +52912,104 @@ msgstr ""
 msgid "Simple TreeView with ListStore"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/treeview_simple_liststore.py.page:24 C/treeview_simple_liststore.vala.page:24
+msgctxt "_"
+msgid "external ref='media/treeview_simple_liststore.png' md5='2dc501a2b95b094da985d37b66aee90c'"
+msgstr "external ref='media/treeview_simple_liststore.png' md5='2dc501a2b95b094da985d37b66aee90c'"
+
 #. (itstool) path: section/code
 #: C/treeview_simple_liststore.py.page:32
 #, no-wrap
+#| msgid ""
+#| "from gi.repository import Gtk\n"
+#| "from gi.repository import Pango\n"
+#| "import sys\n"
+#| "\n"
+#| "columns = [\"First Name\",\n"
+#| "           \"Last Name\",\n"
+#| "           \"Phone Number\"]\n"
+#| "\n"
+#| "phonebook = [[\"Jurg\", \"Billeter\", \"555-0123\"],\n"
+#| "             [\"Johannes\", \"Schmid\", \"555-1234\"],\n"
+#| "             [\"Julita\", \"Inca\", \"555-2345\"],\n"
+#| "             [\"Javier\", \"Jardon\", \"555-3456\"],\n"
+#| "             [\"Jason\", \"Clinton\", \"555-4567\"],\n"
+#| "             [\"Random J.\", \"Hacker\", \"555-5678\"]]\n"
+#| "\n"
+#| "\n"
+#| "class MyWindow(Gtk.ApplicationWindow):\n"
+#| "\n"
+#| "    def __init__(self, app):\n"
+#| "        Gtk.Window.__init__(self, title=\"My Phone Book\", application=app)\n"
+#| "        self.set_default_size(250, 100)\n"
+#| "        self.set_border_width(10)\n"
+#| "\n"
+#| "        # the data in the model (three strings for each row, one for each\n"
+#| "        # column)\n"
+#| "        listmodel = Gtk.ListStore(str, str, str)\n"
+#| "        # append the values in the model\n"
+#| "        for i in range(len(phonebook)):\n"
+#| "            listmodel.append(phonebook[i])\n"
+#| "\n"
+#| "        # a treeview to see the data stored in the model\n"
+#| "        view = Gtk.TreeView(model=listmodel)\n"
+#| "        # for each column\n"
+#| "        for i in range(len(columns)):\n"
+#| "            # cellrenderer to render the text\n"
+#| "            cell = Gtk.CellRendererText()\n"
+#| "            # the text in the first column should be in boldface\n"
+#| "            if i == 0:\n"
+#| "                cell.props.weight_set = True\n"
+#| "                cell.props.weight = Pango.Weight.BOLD\n"
+#| "            # the column is created\n"
+#| "            col = Gtk.TreeViewColumn(columns[i], cell, text=i)\n"
+#| "            # and it is appended to the treeview\n"
+#| "            view.append_column(col)\n"
+#| "\n"
+#| "        # when a row is selected, it emits a signal\n"
+#| "        view.get_selection().connect(\"changed\", self.on_changed)\n"
+#| "\n"
+#| "        # the label we use to show the selection\n"
+#| "        self.label = Gtk.Label()\n"
+#| "        self.label.set_text(\"\")\n"
+#| "\n"
+#| "        # a grid to attach the widgets\n"
+#| "        grid = Gtk.Grid()\n"
+#| "        grid.attach(view, 0, 0, 1, 1)\n"
+#| "        grid.attach(self.label, 0, 1, 1, 1)\n"
+#| "\n"
+#| "        # attach the grid to the window\n"
+#| "        self.add(grid)\n"
+#| "\n"
+#| "    def on_changed(self, selection):\n"
+#| "        # get the model and the iterator that points at the data in the model\n"
+#| "        (model, iter) = selection.get_selected()\n"
+#| "        # set the label to a new value depending on the selection\n"
+#| "        self.label.set_text(\"\\n %s %s %s\" %\n"
+#| "                            (model[iter][0],  model[iter][1], model[iter][2]))\n"
+#| "        return True\n"
+#| "\n"
+#| "\n"
+#| "class MyApplication(Gtk.Application):\n"
+#| "\n"
+#| "    def __init__(self):\n"
+#| "        Gtk.Application.__init__(self)\n"
+#| "\n"
+#| "    def do_activate(self):\n"
+#| "        win = MyWindow(self)\n"
+#| "        win.show_all()\n"
+#| "\n"
+#| "    def do_startup(self):\n"
+#| "        Gtk.Application.do_startup(self)\n"
+#| "\n"
+#| "app = MyApplication()\n"
+#| "exit_status = app.run(sys.argv)\n"
+#| "sys.exit(exit_status)\n"
 msgid ""
 "from gi.repository import Gtk\n"
 "from gi.repository import Pango\n"
@@ -50150,7 +53044,7 @@ msgid ""
 "        # a treeview to see the data stored in the model\n"
 "        view = Gtk.TreeView(model=listmodel)\n"
 "        # for each column\n"
-"        for i in range(len(columns)):\n"
+"        for i, column in enumerate(columns):\n"
 "            # cellrenderer to render the text\n"
 "            cell = Gtk.CellRendererText()\n"
 "            # the text in the first column should be in boldface\n"
@@ -50158,7 +53052,7 @@ msgid ""
 "                cell.props.weight_set = True\n"
 "                cell.props.weight = Pango.Weight.BOLD\n"
 "            # the column is created\n"
-"            col = Gtk.TreeViewColumn(columns[i], cell, text=i)\n"
+"            col = Gtk.TreeViewColumn(column, cell, text=i)\n"
 "            # and it is appended to the treeview\n"
 "            view.append_column(col)\n"
 "\n"
@@ -50235,7 +53129,7 @@ msgstr ""
 "        # a treeview to see the data stored in the model\n"
 "        view = Gtk.TreeView(model=listmodel)\n"
 "        # for each column\n"
-"        for i in range(len(columns)):\n"
+"        for i, column in enumerate(columns):\n"
 "            # cellrenderer to render the text\n"
 "            cell = Gtk.CellRendererText()\n"
 "            # the text in the first column should be in boldface\n"
@@ -50243,7 +53137,7 @@ msgstr ""
 "                cell.props.weight_set = True\n"
 "                cell.props.weight = Pango.Weight.BOLD\n"
 "            # the column is created\n"
-"            col = Gtk.TreeViewColumn(columns[i], cell, text=i)\n"
+"            col = Gtk.TreeViewColumn(column, cell, text=i)\n"
 "            # and it is appended to the treeview\n"
 "            view.append_column(col)\n"
 "\n"
@@ -50596,16 +53490,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.TreeView.html\";>Gtk.Tre
 msgid "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.TreeSelection.html\";>Gtk.TreeSelection</link>"
 msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.TreeSelection.html\";>Gtk.TreeSelection</link>"
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/treeview_treestore.py.page:24
-msgctxt "_"
-msgid "external ref='media/treeview_treestore.png' md5='5ca87bc4acd55c527b3fb5fd46779d85'"
-msgstr "external ref='media/treeview_treestore.png' md5='5ca87bc4acd55c527b3fb5fd46779d85'"
-
 #. (itstool) path: info/desc
 #: C/treeview_treestore.py.page:20
 msgid "A TreeView displaying a TreeStore (simpler example)"
@@ -50616,6 +53500,16 @@ msgstr ""
 msgid "Simpler TreeView with TreeStore"
 msgstr ""
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/treeview_treestore.py.page:24
+msgctxt "_"
+msgid "external ref='media/treeview_treestore.png' md5='5ca87bc4acd55c527b3fb5fd46779d85'"
+msgstr "external ref='media/treeview_treestore.png' md5='5ca87bc4acd55c527b3fb5fd46779d85'"
+
 #. (itstool) path: page/p
 #: C/treeview_treestore.py.page:25
 msgid "This TreeView displays a TreeStore."
@@ -50916,19 +53810,8 @@ msgstr ""
 msgid "Code samples and tutorial"
 msgstr ""
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/weatherApp.js.page:41
-msgctxt "_"
-msgid "external ref='media/weatherAppJs.png' md5='1fe859ac4854273d72ea8fc9203639b2'"
-msgstr "external ref='media/weatherAppJs.png' md5='1fe859ac4854273d72ea8fc9203639b2'"
-
 #. (itstool) path: info/title
 #: C/weatherApp.js.page:7
-#| msgid "Classes in JavaScript"
 msgctxt "text"
 msgid "Weather application (JavaScript)"
 msgstr "Wetter-Anwendung (JavaScript)"
@@ -50980,6 +53863,16 @@ msgstr ""
 msgid "<link xref=\"#main\">Autotools and Icons</link>"
 msgstr "<link xref=\"#main\">Autotools und Symbole</link>"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/weatherApp.js.page:41
+msgctxt "_"
+msgid "external ref='media/weatherAppJs.png' md5='1fe859ac4854273d72ea8fc9203639b2'"
+msgstr "external ref='media/weatherAppJs.png' md5='1fe859ac4854273d72ea8fc9203639b2'"
+
 #. (itstool) path: section/title
 #: C/weatherApp.js.page:44
 msgid "Planning the graphical user interface"
@@ -51184,7 +54077,7 @@ msgstr ""
 #: C/weatherAppMain.js.page:91
 msgid ""
 "In this section we create the grid we are going to use for positioning the widgets. All the buttons, labels 
and "
-"entrys are initialized and placed on the grid. As seen from the placing of the different widgets, they 
don't need "
+"entries are initialized and placed on the grid. As seen from the placing of the different widgets, they 
don't need "
 "to be related only to one widget. At this point some of the labels don't have any content. The content for 
those "
 "widgets is applied later. If you run the application at this stage, you have the UI ready, but the widgets 
are not "
 "connected to anything. For this we need to first build the weather searching local library, and then get 
the "
@@ -51767,7 +54660,7 @@ msgstr ""
 #: C/weatherAutotools.js.page:129
 msgid ""
 "after the comment #icons in the application there are all the icons that are used by the program. For them 
to be "
-"useful you need to install the icons in correct places and that is done byt the install-icons: bit"
+"useful you need to install the icons in correct places and that is done by the install-icons: bit"
 msgstr ""
 
 #. (itstool) path: section/code
@@ -52138,22 +55031,8 @@ msgstr ""
 "}\n"
 "}  "
 
-#. (itstool) path: media
-#. This is a reference to an external file such as an image or video. When
-#. the file changes, the md5 hash will change to let you know you need to
-#. update your localized copy. The msgstr is not used at all. Set it to
-#. whatever you like once you have updated your copy of the file.
-#: C/widget_drawing.py.page:22
-#| msgctxt "_"
-#| msgid "external ref='media/window.png' md5='eb0cde3530978619c25bddfaeb453345'"
-msgctxt "_"
-msgid "external ref='media/widget_drawing.png' md5='d00abd8cb9e158018c57fd75b81dfe58'"
-msgstr "external ref='media/widget_drawing.png' md5='d00abd8cb9e158018c57fd75b81dfe58'"
-
 #. (itstool) path: info/title
 #: C/widget_drawing.py.page:8
-#| msgctxt "text"
-#| msgid "Window (Python)"
 msgctxt "text"
 msgid "Widget (Python)"
 msgstr "Widget (Python)"
@@ -52168,6 +55047,16 @@ msgstr ""
 msgid "Widget"
 msgstr "Widget"
 
+#. (itstool) path: page/media
+#. This is a reference to an external file such as an image or video. When
+#. the file changes, the md5 hash will change to let you know you need to
+#. update your localized copy. The msgstr is not used at all. Set it to
+#. whatever you like once you have updated your copy of the file.
+#: C/widget_drawing.py.page:22
+msgctxt "_"
+msgid "external ref='media/widget_drawing.png' md5='d00abd8cb9e158018c57fd75b81dfe58'"
+msgstr "external ref='media/widget_drawing.png' md5='d00abd8cb9e158018c57fd75b81dfe58'"
+
 #. (itstool) path: page/p
 #: C/widget_drawing.py.page:23
 msgid "Enter an angle, visualize it."
@@ -52357,7 +55246,6 @@ msgstr ""
 
 #. (itstool) path: item/p
 #: C/widget_drawing.py.page:39
-#| msgid "<link href=\"http://developer.gnome.org/gtk3/stable/GtkRange.html\";>GtkRange</link>"
 msgid "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkDrawingArea.html\";>GtkDrawingArea</link>"
 msgstr "<link href=\"http://developer.gnome.org/gtk3/unstable/GtkDrawingArea.html\";>GtkDrawingArea</link>"
 
@@ -52462,7 +55350,7 @@ msgstr "Window (JavaScript)"
 #. (itstool) path: info/desc
 #: C/window.js.page:18
 msgid "A basic window which can contain other widgets"
-msgstr "Ein einfaches Fenster, welches weitere Widgets enthalten kann."
+msgstr "Ein einfaches Fenster, welches weitere Widgets enthalten kann"
 
 #. (itstool) path: td/p
 #: C/window.js.page:26
@@ -52477,46 +55365,88 @@ msgstr ""
 #. (itstool) path: page/code
 #: C/window.js.page:33
 #, no-wrap
+#| msgid ""
+#| "\n"
+#| "#!/usr/bin/gjs\n"
+#| "\n"
+#| "const Gio = imports.gi.Gio;\n"
+#| "const GLib = imports.gi.GLib;\n"
+#| "const Gtk = imports.gi.Gtk;\n"
+#| "const Lang = imports.lang;\n"
+#| "\n"
+#| "const Application = new Lang.Class ({\n"
+#| "    Name: 'Application',\n"
+#| "\n"
+#| "    //create the application\n"
+#| "    _init: function () {\n"
+#| "        this.application = new Gtk.Application ({\n"
+#| "            application_id: 'org.example.myapp',\n"
+#| "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
+#| "        });\n"
+#| "\n"
+#| "       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
+#| "    },\n"
+#| "\n"
+#| "    //callback function for 'activate' signal\n"
+#| "    _onActivate: function () {\n"
+#| "\n"
+#| "        MyWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});\n"
+#| "        MyWindow.title = \"Welcome to GNOME\";\n"
+#| "\n"
+#| "       /* Here are a few ways we can customize our window.\n"
+#| "       Try uncommenting them or changing their values! */\n"
+#| "        //MyWindow.set_default_size (400,200);\n"
+#| "        //MyWindow.set_has_resize_grip (false);\n"
+#| "        //MyWindow.set_opacity (0.5);\n"
+#| "        //MyWindow.maximize ();\n"
+#| "\n"
+#| "        //show the window and all child widgets (none in this case)\n"
+#| "        MyWindow.show_all();\n"
+#| "        this.application.add_window(MyWindow);\n"
+#| "    }\n"
+#| "});\n"
+#| "\n"
+#| "//run the application\n"
+#| "let app = new Application ();\n"
+#| "app.application.run (ARGV);\n"
 msgid ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
 "\n"
+"class Application {\n"
 "    //create the application\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function () {\n"
-"\n"
-"        MyWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});\n"
-"        MyWindow.title = \"Welcome to GNOME\";\n"
+"    _onActivate() {\n"
+"        let myWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});\n"
+"        myWindow.title = \"Welcome to GNOME\";\n"
 "\n"
 "       /* Here are a few ways we can customize our window.\n"
 "       Try uncommenting them or changing their values! */\n"
-"        //MyWindow.set_default_size (400,200);\n"
-"        //MyWindow.set_has_resize_grip (false);\n"
-"        //MyWindow.set_opacity (0.5);\n"
-"        //MyWindow.maximize ();\n"
+"        //myWindow.set_default_size (400,200);\n"
+"        //myWindow.set_has_resize_grip (false);\n"
+"        //myWindow.set_opacity (0.5);\n"
+"        //myWindow.maximize ();\n"
 "\n"
 "        //show the window and all child widgets (none in this case)\n"
-"        MyWindow.show_all();\n"
-"        this.application.add_window(MyWindow);\n"
+"        myWindow.show_all();\n"
+"        this.application.add_window(myWindow);\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application ();\n"
@@ -52525,42 +55455,40 @@ msgstr ""
 "\n"
 "#!/usr/bin/gjs\n"
 "\n"
+"imports.gi.versions.Gtk = '3.0';\n"
+"\n"
 "const Gio = imports.gi.Gio;\n"
 "const GLib = imports.gi.GLib;\n"
 "const Gtk = imports.gi.Gtk;\n"
-"const Lang = imports.lang;\n"
-"\n"
-"const Application = new Lang.Class ({\n"
-"    Name: 'Application',\n"
 "\n"
+"class Application {\n"
 "    //create the application\n"
-"    _init: function () {\n"
-"        this.application = new Gtk.Application ({\n"
+"    constructor() {\n"
+"        this.application = new Gtk.Application({\n"
 "            application_id: 'org.example.myapp',\n"
 "            flags: Gio.ApplicationFlags.FLAGS_NONE\n"
 "        });\n"
 "\n"
-"       this.application.connect('activate', Lang.bind(this, this._onActivate));\n"
-"    },\n"
+"       this.application.connect('activate', this._onActivate.bind(this));\n"
+"    }\n"
 "\n"
 "    //callback function for 'activate' signal\n"
-"    _onActivate: function () {\n"
-"\n"
-"        MyWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});\n"
-"        MyWindow.title = \"Welcome to GNOME\";\n"
+"    _onActivate() {\n"
+"        let myWindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL});\n"
+"        myWindow.title = \"Welcome to GNOME\";\n"
 "\n"
 "       /* Here are a few ways we can customize our window.\n"
 "       Try uncommenting them or changing their values! */\n"
-"        //MyWindow.set_default_size (400,200);\n"
-"        //MyWindow.set_has_resize_grip (false);\n"
-"        //MyWindow.set_opacity (0.5);\n"
-"        //MyWindow.maximize ();\n"
+"        //myWindow.set_default_size (400,200);\n"
+"        //myWindow.set_has_resize_grip (false);\n"
+"        //myWindow.set_opacity (0.5);\n"
+"        //myWindow.maximize ();\n"
 "\n"
 "        //show the window and all child widgets (none in this case)\n"
-"        MyWindow.show_all();\n"
-"        this.application.add_window(MyWindow);\n"
+"        myWindow.show_all();\n"
+"        this.application.add_window(myWindow);\n"
 "    }\n"
-"});\n"
+"};\n"
 "\n"
 "//run the application\n"
 "let app = new Application ();\n"
@@ -52767,7 +55695,6 @@ msgstr "<link href=\"http://www.valadoc.org/gtk+-3.0/Gtk.Window.window_position.
 
 #. (itstool) path: credit/name
 #: C/custom-gsource.c.page:11
-#| msgid "Philip Chimento"
 msgid "Philip Withnall"
 msgstr "Philip Withnall"
 
@@ -53538,4 +56465,3 @@ msgid ""
 "c#n871\"><code>GTlsConnectionGnutlsSource</code></link> synchronizes the main thread and a TLS worker 
thread which "
 "performs the blocking TLS operations."
 msgstr ""
-



[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]