Wikipedia talk:WikiProject JavaScript

src: upload.wikimedia.org

Video Wikipedia talk:WikiProject JavaScript

User script: User:The Transhumanist/anno.js

This script makes the annotations of bullet list entries disappear and reappear with the click of a toggle, or the press of a hot key.

But, it has a problem. When material above the reader's current position on the page is removed, it displaces the reader from what he was reading. The text shifts up relative to the viewport and may even go off the screen.

If you know how to adjust the positioning of the viewport, please let me know.

Thank you. The Transhumanist 06:49, 6 April 2017 (UTC)

Maps Wikipedia talk:WikiProject JavaScript

User script: User:The Transhumanist/OLUtils.js

This is going to have a bunch of features optimized for working on outlines.

It's first and only feature at this time is a redlink remover. I've adapted a pre-existing script and added a section for removing redlinked list entries from outlines, which is currently in the testing and bug-fixing phase. It doesn't work yet, but I'm hopeful.

I'm in the process of documenting the code liberally with comments, and with extensive explanatory notes on the script's talk page. Commentary and questions are welcome! The Transhumanist 01:10, 14 April 2017 (UTC)

src: upload.wikimedia.org

What scripts are you working on or maintaining, or would like to build?

Feel free to share the details of your user script projects, your problems, your ideas, and your JavaScript-related technological fantasies on this page. :) The Transhumanist 01:10, 14 April 2017 (UTC)

src: upload.wikimedia.org

Yeoman (computing) listed at Requested moves

A requested move discussion has been initiated for Yeoman (computing) to be moved to Yeoman (software). This page is of interest to this WikiProject and interested members may want to participate in the discussion here. --RMCD bot 18:32, 4 May 2017 (UTC)

To opt out of RM notifications on this page, transclude {{bots|deny=RMCD bot}}, or set up Article alerts for this WikiProject.

src: upload.wikimedia.org

Nested RegExp

I'm working on a script (User:The Transhumanist/OLUtils.js) to remove redlinks from outlines, and I've run into a problem with regular expressions:

The above returns two matches, when I was expecting one. The second one is coming from the nested RegExp constructor.

Is there another way to specify a variable within a regular expression? If so, what?

Also, I can't find any documentation on the plus signs as used here. Can you explain them, or point me to an explanation?

What would the RegExp look like in literal notation?

Thank you. The Transhumanist 11:07, 5 May 2017 (UTC)

This is the way Twinkle specifies variables in a regular expression; to my knowledge it's the only way to do it. The plus signs are acting as string concatenation operators (string + string = concatenation). And you couldn't express this in literal notation, because literal notation can't accept variables (it is literal after all).

As an example of using new RegExp, this regexp in literal notation: /^Hello\s+/gi is entirely equivalent to new RegExp('^Hello\\s+', 'gi'). Note the double escaping! This is because character escapes in regular expression are processed separately from character escapes in strings.

As to why it is returning two matches instead of one, I really couldn't tell you. Could you provide a simplified test case or example? -- This, that and the other (talk) 12:40, 5 May 2017 (UTC)

@This, that and the other: Thank you for the explanation. In answer to your question, "yes". Run the script User:The Transhumanist/OLUtils.js on any article with "Outline of" in the title, and that has red links in it, and the alerts will show you. The Transhumanist 15:35, 5 May 2017 (UTC)

(edit conflict)@The Transhumanist: It's difficult to quickly assess exactly what's going on without seeing the data it's being run against and the matches you are seeing. Is it possible that there's actually multiple matches in the input text? E.g. if you look for "apple" in "apple, orange, pineapple", two matches is the expected result. You would need to look for "\bapple\b" to restrict both ends to word boundaries, but that would still give multiple matches against "red apple, green apple, orange". There is nothing about that code snippet which suggests that multiple matches should be unexpected behaviour.

I think your problem here is that you need to deal with the text before and after the thing the regexp is supposed to match. Looking at Alex's original script, I believe you need to use something like his original regular expressions, as it looks like they already deal with the beginning and end of the string. I don't see why you appear to be reinventing the wheel here, as it looks like Alex's script already deals with that issue.

As for "plus signs as used here", do you mean the string concatenation operators? If you don't recognise basic JS operators and string concatenation, I suggest that you may need to learn fundamental JS programming before continuing. Try the tutorials and guides at https://developer.mozilla.org/en-US/docs/Web/JavaScript.

Literal notation? If you feed "apple" into the above snipped, via the "redlinks" array, you'd get the equivalent of /(apple)/i. That's very basic stuff, so you should probably be doing some reading on Mozilla's MDN site (or some other JS learning resource).

Murph9000 (talk) 12:55, 5 May 2017 (UTC)

@Murph9000: Thank you for the input. I've been having much difficulty with this script. The answer is "no" on the multiple matches. The original statement was

which for example returns [[Geography of France]], Geography of France

So I figure it's the nested RegExp that is the second match. The Transhumanist 15:33, 5 May 2017 (UTC)

Ok, now it's clearer exactly what you are talking about. This is expected behaviour, it's standard regexp group stuff as Syockit explained below. Don't use the term "nested RegExp" like that, as that's not what it is and that term just adds to the confusion here. Murph9000 (talk) 20:50, 5 May 2017 (UTC)

The parentheses creates a capturing group. The first match is the whole matched string, while the second one is the captured group. Try with RegExp(RegExp.quote(redlinks[i]),'i') and see if it works. Syockit (talk) 12:57, 5 May 2017 (UTC)

Wow. It's been many moons since anyone has asked me for JS help- I thought I'd become just a mostly-faded memory for a few editors. With that being said, Syockit is right as far as I can tell in that the parentheses create a capturing group. I'm not entirely sure why they're there at all- I'd use the same nodeScoop2 you currently have without the parentheses around the RegExp.quote; i.e. try:

Best, Kangaroopowah 20:09, 5 May 2017 (UTC)

@Kangaroopower: I tried what you suggested in User:The Transhumanist/redlinkstest.js, and it doesn't seem to work. I'll keep at it, thgouh. The Transhumanist 20:34, 5 May 2017 (UTC)

@Kangaroopower: I forgot the quotes. So I put those back, and adjusted the replace strings to account for the removal of the control group delimiters, and it worked. Now to try it on the current script... The Transhumanist 02:29, 6 May 2017 (UTC)

@The Transhumanist: Glad I could help. Best, --03:34, 6 May 2017 (UTC)

Perhaps you are looking for String.indexOf(). Oftentimes people discover regular expressions and somehow convince themselves that everything must be expressed in terms of regexes. If regex is not working for you, it is ok not to use it. 91.155.195.247 (talk) 20:07, 5 May 2017 (UTC)

According to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/indexOf , that returns a number. I'm looking for specific strings, not the position (index) of a string. Thank you, as I was unaware of what this method does. The Transhumanist 11:00, 6 May 2017 (UTC)

You will have the starting position of the string and its length (= the length of the substring you are looking for). String.substring() will extract you the matching string - which will be the same as the string you were looking for, except possibly for case. This is how a programmer would do it, not with regexes. 91.155.195.247 (talk) 15:55, 7 May 2017 (UTC)

I cannot clear see what do you want to achieve, but I find these codes overkill. Mediawiki add titles of actual destinations as attribute title to links and class new for red links.

This jQuery one-liner simply unlinks all red links. This snippet actually inserts linked texts before links and then remove these links.

The function in before returns what to remain after link removal. The this refers to the currently iterated element due to jQuery's design. If we want to completely remove a link, make the function return nothing then. The following example completely removes red category links and treat other red links as usual.

Chen-Pang He (talk) --Preceding undated comment added 07:40, 6 May 2017 (UTC)

Sorry, but I don't understand what you are trying to achieve. If you want to remove red links from the DOM (in the generated code of the view), then you can use Javascript (faster) or jQuery (slower) to remove or replace all of them eventually at once, or do more things on each of them in a loop. With Javascript you need to use one of "getElementsByClassName" (for example applied to class="new") or "getElementsByTagName" for all <a> elements, and then you can apply styles ('_color_', '_cursor_', ...) or replace them with your own content such as their "innerHTML" values. With jQuery >= 1.2 you can use something like $(".new").replaceWith(function() { return $(this).text(); }); or $(".new").replaceWith(function() { return this.innerHTML; });, while with jQuery >= 1.4 you can use the unwrap function like this: $(".new").contents().unwrap();. jQuery seems to be shorter, but this is because you do not see the whole code that is behind the execution of it, and it is much slower than doing it in native Javascript (when it is well written, of course). All of them, Javascript and jQuery, should be wrapped into a document ready function (via Javascript or jQuery), a setTimeout functions or both. If you need to store their values, then you can create a for or a while loop for each of them and the do whatever you want to. Of course, if you are working on the source code, then the above does not apply at all. About the regex, I need more about the data, plus tests and examples. The reason for its multiple matches has been well explained above. Just a note, if you are sending and parsin a huge quantity of data, for example the whole content of an article, then something like PERL is always the faster and the better solution possible because it was conceived for reporting of the big log files such as those generated by a server. AWK and sed are also good with this. Unfortunately, I do not think that they are available here. -pjoef (talk o contribs) 12:18, 6 May 2017 (UTC)

@Pjoef and Jdh8: The script is User:The Transhumanist/OLUtils.js, and the section we are working on here is for processing outlines, and starts with this:

if (document.title.indexOf("Outline ") != -1) {.

For outlines, the script is supposed to remove list item entries (including bullet and carriage return) that are comprised entirely of redlinks, but only if they have no children. Red end nodes. It goes through several iterations, just in case the removal of a red end node renders other red entries into end nodes. After all those have been removed, then the script deletes any red category links, and finally delinks the remaining embedded red links. I've provided a more in-depth explanation below under #What the script is supposed to do. For non-outlines, it just deletes red cats and delinks the rest of the redlinks. The Transhumanist 04:09, 7 May 2017 (UTC)

The whole regex

@Jdh8, Kangaroopower, Syockit, Murph9000, SMcCandlish, and TheDJ:

The sample I posted at the beginning of this thread was simplified to show the problem that it was returning 2 matches instead of the expected 1. So, I thought the script might do unexpected replacements, but that has not happened (yet). But I've run into other problems...

The regex from the script is more involved than the sample, and is for matching the line the key topic (redlinks[i]) is included on plus the whole next line:

The reason the whole next line is included is because I'd like to delete entries based upon the type of line that follows (or more accurately, does not follow). If the entry is not followed by a child, then it gets deleted, but should be kept if it does have a child. The weird thing is, that the part matching the whole next line is in the 4th set of parentheses, so you would expect $4 to back reference that. In practice, it is $3 that accesses that capturing group. And I don't know why. Though the solution (ignoring the parentheses around the embedded RegExp, when counting the capturing groups) seems to be working. But, I've run into a worse problem...

The problem is patt3. I'm trying to check for the asterisks at the beginning of the second line. If there is one more asterisk on that line than in the line before it, it means it is a child. In which case I do not want to delete the parent. But, the above code deletes the parents anyways.

In the example below, $1 should match the asterisk at the beginning of the parent line, and $1\* (patt3) should match the asterisks at the beginning of the child line. But it doesn't seem to be working. And when I add an alert to test for the value of patt3 or $1, the script crashes!

* Parent
** Child

If $1 includes asterisks in it, does it return those asterisks escaped?

Any ideas on how to solve my patt3 problem? The Transhumanist 12:14, 6 May 2017 (UTC)

Try to double-escape the aterisk \\* in a RegExp constructor or in this way /\*. -pjoef (talk o contribs) 12:26, 6 May 2017 (UTC)

@Pjoef: I did. See the RegExp below. Notice that the double escaped asterisk is inside a capturing group. When you use $1 to refer to that capturing group, will the asterisks in there still be escaped? When I try to use alert to test for $1, it crashes the script.

I look forward to your reply. The Transhumanist 13:58, 6 May 2017 (UTC)

"*" is a quantifier (a special character) and, as well as all other special characters, it needs to be escaped when it is part of the pattern of characters that you want to find or replace. See: w3schools.com/jsref/jsref_obj_regexp.asp. About the use of the alert for debugging purpose I suggest you to use console.log() method to display data directly within the debugger of the browser. More @: w3schools.com/js/js_debugging.asp. The debugger itself should be also able to show you which and where is the error within your code. About the editing of the article and the DOM manipulation, it doesn't save the changes, but if an user is in the editor window/view and it presses the save button all changes that have been made to the content will be saved. -pjoef (talk o contribs) 09:26, 7 May 2017 (UTC)

P.S.: I haven't tested it out but probably $1 is "undefined". In this case you need to check for this before you use it: if ($1) .... -pjoef (talk o contribs) 09:34, 7 May 2017 (UTC)

Running the code in generated document seems to be easier because we can make use of HTML structure. A leaf link safe to remove is the only child of li.

Cheers, Chen-Pang He (talk) --Preceding undated comment added 15:19, 6 May 2017 (UTC)

@Jdh8: Hi. Thanks for the suggestions. I have some questions for you: Would the code you provided edit the article, or just affect the view? I'm looking for editing solutions. How could a script remove children list items in the edit window? The Transhumanist 03:57, 7 May 2017 (UTC)

I got your message. It looks like you may have gotten the help you need. When working with RegExp, I like to try them on some sample strings to see what each one is actually matching, and what it's returning. There's a great website for doing that: regex101. Nathanm mn (talk) 16:12, 6 May 2017 (UTC)

@Nathanm mn: We still haven't figured it out. The problem I'm trying to solve is how to identify when a list item has a child. A child list item will have one more asterisk at the beginning than the parent. So, I set up a capturing group for the asterisks at the beginning of the parent (so $1 would be the back reference), and then try to match that number of asterisks plus one more in the child (using $1\*). But it isn't working. I am stuck. There are other criteria which the entries to be removed must fail, otherwise I wish to keep them. So simply getting rid of all children isn't what I'm after. We already know they are red linked entries, because the first half of the program puts all redlinks into an array, which we process in the second half of the program. Then the nested if structure checks first for whether the current redlink in the array has no entry. If it doesn't, then we check to see if it has no colon annotation. If it doesn't have a colon separator, then we check to see if it doesn't have a hyphenated annotation. If it doesn't have an en dash separator, then we check to see if it has no children. If it doesn't have a child, then we delete it from the wiki source, modifying the actual article itself.

Once all redlinked entries that fail our tests are removed, then the rest of the program mops up, deleting red category links, and delinking all redlinks that still remain after that. We know, due to the extensive filtering we just subjected them to, that they are all embedded redlinks, the content of which we want to keep. I'll make a sample below that presents examples of the data instances to be processed. The Transhumanist 22:12, 6 May 2017 (UTC)

What the script is supposed to do

@Jdh8, Kangaroopower, Syockit, Murph9000, SMcCandlish, TheDJ, and Nathanm mn:

Here is a sample item list:

• Geography
• Geology - this text is an annotation. And here is an embedded redlink 1. After all the end node (dead end) redlinked entries are removed, this redlink will be delinked.
• Redlink 2
• Redlink 3
  • Redlink 4
  • Psychology
• Redlink 5: this text is also an annotation. So I want to keep this entry.
• Redlink 6
  • Redlink 7
    • Redlink 8
      • Redlink 9 - this annotation will prevent this entry and all its parents from being deleted. They will however be delinked after list item removal and relinked category removal are completed.
• Redlink 10
  • Redlink 11
  • Redlink 12
    • Redlink 13
      • Redlink 14
  • Redlink 15

What we want to do is remove the list entries for which the topic is a redlink, but which do not have annotations, and which do not have children. Then we delete redlinked categories, and delink whatever redlinks are leftover -- those will be by definition embedded, such as redlink 1 and redlink 3. Redlink 3 is embedded by virtue of having children.

Redlink 2 is a dead end. It is an end node in the tree structure that contains only a redlink. It gets deleted.

The script goes through the list multiple times, until it no longer finds dead end redlinks. This is because when it removes a redlinked end node, that may cause its redlinked parent to become a dead end node (such as when it has no other children). Multiple iterations catch these. So the entire branch starting with Redlink 10 will be deleted.

Here is the problem I've run into: the script currently and erroneously deletes the Redlink 3 list item. Because $1\* or $1\\* do not seem to be identifying the Redlink 4 list item as having more asterisks in the wikisource than the Redlink 3 list item. I do not know why. What should happen is that Redlink 3 would be retained because of Redlink 4, and after Redlink 4 is removed, then Redlink 3 is checked again and is kept by virtue of having Psychology as a child. But, when Redlink 3 is deleted in error, it makes Psychology a child of Geology, thus ruining the tree structure.

All this processing is to be done in the editor, so that the redlinked entries are actually removed from the article.

I'm stuck! I look forward to your replies. The Transhumanist 23:00, 6 May 2017 (UTC)

Your patt3 is off for a couple of reasons. First, with the $n regex matches, in general you access them using RegExp.$1 (which will be a string containing the match), not just $1 - except for within String.replace function, when just $1 is used in the replacement string [1]. Secondly, with regex literals, what you type is literally what you get as the regex string. So var patt3 = /$1\*/; will literally be interpreted as /$1\*/ (where $ asserts position at the end of the string; 1 matches the character 1; \* matches the character *).

What you could use instead is var patt3 = new RegExp("\\*{"+(RegExp.$1.length+1)+"}"); which, for example, will give you the regex /\*{3}/ when the RegExp.$1 match is "**" - Evad37 [talk] 04:59, 7 May 2017 (UTCt)

@Evad37: I'll try it and will let you know how it works. By the way, what about var patt3 = new RegExp("$1\*");. Why won't that work? (That was the first thing I tried, before going literal). The Transhumanist 23:14, 7 May 2017 (UTC)

$1 as part of a string doesn't have any special meaning, except within the string .replace function. So var patt3 = new RegExp("$1\*"); would give you the regex /$1*/. To use the actual match instead of $1, you would use var patt3 = new RegExp(RegExp.$1 + "\*"); which would e.g. give you the regex /***/ for a match "**". To actually get valid regex, the match would have to be escaped (note also that the single slash in "\*" doesn't get preserved unless it is double-escaped as "\\*") . - Evad37 [talk] 23:55, 7 May 2017 (UTC)

Thank you Evad. Using your code, the script now works, matching about 90% of what it is supposed to. So far, I've cleaned up the all the country outlines for Africa. Now working on Asia. I'm not sure why it is skipping some entries that it shouldn't, but I'm sure I'll figure it out by observing as I use it. The Transhumanist 22:39, 11 May 2017 (UTC)

src: upload.wikimedia.org

Use of Wikipedian programmer categories

@The Transhumanist: Was it really appropriate to spam over 500 users with a notice of this discussion using WP:AWB? That seems to me to be an inappropriate use of that tool. Murph9000 (talk) 13:21, 5 May 2017 (UTC)

90% of them haven't logged in for months or years, but were still listed in the js users categories. It's the only feasible way I could think of to reach the other 10%. You wouldn't happen to know of a script that can sort or screen a user list by the date of their last edit, would you? That would be very helpful. The Transhumanist 15:07, 5 May 2017 (UTC)

 Done Found a way. See #Tracking down recent editors, below. The Transhumanist 17:10, 5 May 2017 (UTC)

Yeah, OP shouldn't have done that. If you want to recruit programming helpers, try Stack Overflow! Tomalak Geret'kal (talk) 13:29, 5 May 2017 (UTC)

Just contacted users in the js wikipedian categories, which is what those categories are for, per WP:UCAT. For help with a script to improve the encyclopedia. I'll look into a way to filter out dead user accounts from a list. The Transhumanist 15:19, 5 May 2017 (UTC)

 Done See #Tracking down recent editors, below. The Transhumanist 19:26, 5 May 2017 (UTC)

For real. Wikipedia is not StackOverflow. Julesmazur (talk) 14:00, 5 May 2017 (UTC)

The programming userboxes are to enable Wikipedians to contact each other about programming, per WP:UCAT. That's why we list our JavaScript skill-level, right? The Transhumanist 15:07, 5 May 2017 (UTC)

Consider that I've deleted several pages that you created through these mass messages that were not, in fact, user talk pages. Examples (not exhaustive, and I got bored of deleting them after a few): User talk:X!/egapresu siht tide t'nod esaelP, User talk:Vanished user 98wiejfno34tijsfoiwefjlok5y/infobox, User talk:Godlvall2/UserBoxes. Those userboxes are for identification, sure, but they're not for automated mass messaging. Writ Keeper ?? 15:35, 5 May 2017 (UTC)

Thanks. My bad. I didn't notice them right away, and then started skipping them. The Transhumanist 16:52, 5 May 2017 (UTC)

Also, was it really necessary to use AWB to post an invitation to 300+ mainspace talk pages? I don't think that's where they go. Writ Keeper ?? 14:11, 5 May 2017 (UTC)

@Writ Keeper: I've converted those to informational notices concerning upkeep of JavaScript articles, with a more encyclopedic tone. Thank you for the feedback. The Transhumanist 16:51, 5 May 2017 (UTC)

I agree, StackOverflow would be the appropriate place to ask a programming question, not Wikipedia. Styfle (talk) 17:16, 5 June 2017 (UTC)

src: upload.wikimedia.org

Tracking down recent editors

I'd like to contact recent editors (say, in the past month) from the users listed at:

Category:User js-4

Many of the users listed here haven't logged in for years.

Any ideas? The Transhumanist 11:43, 5 May 2017 (UTC)

Hi The Transhumanist. Quarry is awesome for stuff like this. Here you go :) https://quarry.wmflabs.org/query/18396 --EpochFail (talk o contribs) 16:05, 5 May 2017 (UTC)

Perfect. I ran it again for the other cats. Thank you for the script! The Transhumanist 19:08, 5 May 2017 (UTC)

src: upload.wikimedia.org

Data type section needed in JavaScript article

In my eyes the article misses a section describing the available data types. Can somebody with knowledge about the subject add this? --79.213.185.195 (talk) 06:37, 22 April 2017 (UTC)

src: upload.wikimedia.org

JavaScript sub-categories, subject development

I thought of creating some sub-categories for JavaScript like: "People related to JavaScript" and "Open-source games written in JavaScript". I'm not sure about the naming of the first one, and the second one seems to be contained in "Browser games" and "Open-source video games". What do you think? --????? ???????? (talk) 17:19, 8 May 2017 (UTC) ????? ???????? (talk) 17:19, 8 May 2017 (UTC)

????? ????????, they both sound like distinct categories to me. Go for it. The second one would be a good subcategory of the two categories you mentioned. I'm very interested in browsing the people one, so you have at least one fan so far. By the way, how do you pronounce your name? The Transhumanist 00:27, 10 May 2017 (UTC)

@The Transhumanist:, I'm gonna create those cats. Um, about my name, if I were to write it in "romaji", it would be something like this: "ilyes eljaza'iri" (Arabic for "Elias The Algerian")--????? ???????? (talk) 15:30, 10 May 2017 (UTC)

????? ???????? Can I call you "Elias"? The Transhumanist 00:44, 11 May 2017 (UTC)

@The Transhumanist:, sure thing... Hey, the "People related to JavaScript" category has been moved to "People associated with JavaScript" since it is a more appropriate term xD. I knew it sounded strange... Ahem, anyway, "JavaScript developers" would be the most "appropriate term", no? (As in Shall we rename it again?) And then we may add Mike Bostock (D3.js), Nicky Case (Nothing To Hide, Coming Out Simulator 2014, Exporable Explanations, Parable of Polyglons, etc), the creator of Node.js, Ferros Abukhadija who created WebTorrent -- and that redirect should be turned into an article, it is notable enough, I believe... in addition to some other (cool) dudes... Currently I have no (real) access to the internet, which means I won't be able to (try) to create those articles... Also, since the goal of this WikiProject is to help people learn JS, "'starting a book'" would be helpful! (Take a look at Book:Alice in Wonderland)... One more thing, the projects page is much too "big", don't you think? If I were you, I would split it (Open tasks, needed articles, requested articles, or idk)... Ah, I am talkative and "I don't English good", hope I'm not being a pain in the rass (Arabic for "head" ;-;) --????? ???????? (talk) 03:53, 12 May 2017 (UTC)

Elias, are all notable JavaScript authors JavaScript developers as well? If not, then "JavaScript developers" as the main people category for JavaScript would be too narrow. Also, does "JavaScript developers" mean "developers of the JavaScript language" or does it mean "JavaScript software developers"? Concerning a "book", we don't need one, as outlines are more extensive topic lists. See Draft:Outline of JavaScript. By the way, take a look at JavaScript syntax. It's not just about syntax, as it nearly summarizes the whole language. Can you think of a better title for it? Last, but not least, get real (Internet access)! The Transhumanist 13:43, 12 May 2017 (UTC)

src: upload.wikimedia.org

"Reference library"

It would be helpful if we create a "Reference library" page as in Wikipedia:WikiProject Video games/Reference library. --????? ???????? (talk) 09:49, 9 May 2017 (UTC)

Wow. That's amazing. Page started. How do you think it should be organized? I look forward to seeing what you add to it. The Transhumanist 01:13, 10 May 2017 (UTC)

????? ????????, thank you for adding to it. It has been expanded further. Feel free to work your wiki-magic and improve it. The Transhumanist 02:37, 11 May 2017 (UTC)

????? ????????, the reference library has been expanded with links to external articles. The Transhumanist 05:35, 21 January 2018 (UTC)

src: upload.wikimedia.org

How to remedy the regular MediaWiki updates breakings?

Would it be possible for this new task force to influence the current system in order to avoid the regular massive javascripts breakings which are provoked by the MediaWiki updates for years?

Actually my personal experience about this phenomena, as an administrator of four Wikimedia wikis is a kind of traumatic.

• On Wikibooks, half of the gadgets are broken, and they hadn't been identified during several years before my recent inventory.

• On the French Wikiversity, we have a precious partnership with a famous school from France called the CNED. We had taken a few months to authorize and install their MOOC JS system. But less than one year after this success, everything has been compromised by the MediaWiki 1.30 this week. And no one could help us on Phabricator for now. The fact is, that on the average-sized wikis like this one, the administrator team is often penniless in front of these breakings. And I don't want to talk about dictatorship or sabotage but I couldn't help thinking about these words, after having spent many unplanned days trying to repair our useful scripts every year.

• These yearly mass breakings have already caused the resignation of priceless professional JS developers like fr:User:Dr Brains and b:fr:User:DavidL.

So I think about at least proposing some unit tests to the MediaWiki developers (by Behat hooks on Gerrit?), in order limit the breakings, and a bot to identify and organize their reparations at an interwiki scale. JackPotte (talk) 21:20, 12 May 2017 (UTC)

The problem is scale. What we do (and need to do), no longer scales to people just doing their own thing without oversight, linting etc. We (MediaWiki developers) are breaking these things for good reasons, not willy nilly (SIX YEARS for this years removal !!!!). But writing a userscript is easy. Maintaining it for years and years (while you cannot trace who uses it and how often it is used. or if you just got married and now have 2 kids taking up all your time) is not and whoever is left behind gets to clean up his own problems and everyone else's :) (I spent 5 days fixing well over 50 gadgets and scripts myself).

Part of these breakages, is to force people into a world where these things are going to be easier to trace (deprecations), easier to sandbox (one error not bringing down all the other javascript), faster to load, making use of libraries instead of 15 year old globals etc etc. We NEED to move this forward, because it's holding a lot of other stuff back.

One improvement would be building linting options for the mediawiki libraries into the CodeEditor.

A second would be further expanding https://github.com/Krinkle/mw-tool-tourbot to be more usable for more people to scan for code that needs to be updated and to and to do pro active cleanup work.

Gadgets are another part of the answer. globablized gadgets a better answer. globalized gadgets with code review an even better one. The question is, who is going to build it ? And that's my other problem. I have a feeling that we are no longer seeing a lot of technical people join the ranks of Wikipedia anymore. Not as we had between 2001 and 2008. And that generation has largely moved on by now. And I can't blame people for not wanting to build scripts for Wikipedia, if I had learned to build stuff on github, I'd NEVER jump through the Wikipedia hoops either :)

--TheDJ (talk o contribs) 22:02, 12 May 2017 (UTC)

src: upload.wikimedia.org

I'm stumped: How do you save a location in the viewport to reposition the viewport later?

@Jdh8, Evad37, TheDJ, Ynhockey, Murph9000, Kangaroopower, Syockit, Llightex, This, that and the other, Pjoef, Nathanm mn, Paulmlieberman, AlexTheWhovian, Canley, Unready, and Writ Keeper:

Hi guys,

I'm suffering from the viewport blues. How to reposition the viewport where I want it to go is turning out to be a major mystery for me. It's become a design element problem on a program I've been working on. I stopped touching it 3 months ago because of it. It really has me stumped. I definitely need some guidance on this one...

It's a script to make browsing and reading lists on Wikipedia easier. It's called User:The Transhumanist/anno.js. It toggles the hiding of annotations, so you can turn them off when you just want to see the items listed for quick browsing. And you can reactivate them again when you come across a term you don't know. For example...

It makes:

• Chess board - checkerboard with 64 squares (eight rows and eight columns) arranged in two alternating colors (light and dark). The colors are called "black" and "white", although the actual colors vary: usually they are dark green and buff for boards used in competition, and often natural shades of light and dark woods for home boards. Chess boards can be built into chess tables, or dispensed with (along with pieces) if playing mental chess, computer chess, Internet chess and sometimes correspondence chess.
  • Rank - horizontal row of squares on the chessboard.
  • File - vertical (i.e. in the direction from one player to the other) column of squares on the chessboard.
• Chess set - all the pieces required to play a game of chess. Chess sets come in various materials and styles, and some are considered collectors' items and works of art. The most popular style for competitive play is the Staunton chess set, named after Howard Staunton. The relative values given are approximate and depend on the game situation.
  • Chess pieces - two armies of 16 chess pieces, one army white, the other black. Each player controls one of the armies for the entire game. The pieces in each army include:
    • 1 king - most important piece, and one of the weakest (until the endgame). The object of the game is checkmate, by placing the enemy king in check in a way that it cannot escape capture in the next move. On the top of the piece is a cross.
    • 1 queen - most powerful piece in the game, with a relative value of 9 points. The top of the piece is crown-like. Official tournament chess sets have 2 queens of each color, to deal with pawns being promoted
    • 2 rooks - look like castle towers and have a relative value of 5 points each.
    • 2 bishops - stylized after mitres (bishops' hats), and have a relative value of 3 points each.
    • 2 knights - usually look like horse heads and have a relative value of 3 points each.
    • 8 pawns - smallest pieces in the game, each topped by a ball. Pawns have a relative value of 1 point each.

Look like this:

• Chess board
  • Rank
  • File
• Chess set
  • Chess pieces
    • 1 king
    • 1 queen
    • 2 rooks
    • 2 bishops
    • 2 knights
    • 8 pawns

The problem is that the view port shifts position relative to what the user was looking at. When annotations before his location in the article are removed, the text he was looking at disappears off the top of the view port. When those annotations are restored, it pushes the text in the view port down.

What I'd like to do is have the top line of the topmost bulleted item in the view port retain its position when the toggle is pressed, with everything else being updated above and below it. If there are no bulleted items on the screen, then the topmost line of text should retain its position.

This is where I'm stuck.

Everything I've read so far about view port location adjustment requires doing so relative to an identifiable DOM element.

"<li>" tags apparently are not specific enough.

Is there a way to apply regex to just the content of the viewport?

If so, I could insert a div (with ID), and then determine and save the location of the div, and work off of that.

I'm hoping you can point me in the right direction on any approach(es) you think might work for saving a position in an article's content relative to what the user was looking at, and repositioning the viewport to that location after the script has altered the page.

Sincerely, The Transhumanist 17:04, 15 May 2017 (UTC)

I'm trying to test this script, but the "Hide anno" link in the menu bar is all the way at the top of the page. So, I have to scroll all the way up to toggle this option, but then that makes the point about repositioning the viewport moot. Is there another way to "Hide anno" without scrolling to the top and clicking on the link? Llightex (talk) 20:47, 15 May 2017 (UTC)

Llightex, yes, there is a way. The hotkey to turn it on and off is ? Shift+Alt+a. Some good pages to test it out on are:

• Outline of fishing
• Outline of canoeing and kayaking
• Outline of cell biology
• Outline of forestry
• Outline of astronomy

It's ? Shift+Alt for hot keys in Firefox. For other browsers, see Wikipedia:Keyboard shortcuts. Thanks for testing it. The Transhumanist 02:39, 17 May 2017 (UTC)

Could you please not ping me for these general JavaScript-related queries? In my mind, pings should be restricted to cases where you speak to someone personally. In this case, you are not doing that. -- This, that and the other (talk) 01:36, 16 May 2017 (UTC)

2nd'ed --TheDJ (talk o contribs) 08:33, 16 May 2017 (UTC)

Sure thing. The Transhumanist 02:02, 17 May 2017 (UTC)

Perhaps you could consider another approach - instead of just having "all on" or "all off", you could insert an element before each annotation that when clicked on toggles just that annotation. - Evad37 [talk] 03:06, 17 May 2017 (UTC)

Good idea. That would be especially useful when all list items are hidden (but not the other way around). Hence we still need the show/hide toggle (which we already have), and in turn we still need viewport repositioning. The latter is the hardest thing I've come across in JavaScript so far. The Transhumanist 04:44, 18 May 2017 (UTC)

Local Storage is an object thus your problem. -pjoef (talk o contribs) 08:10, 19 May 2017 (UTC)

Pjoef, the annotations disappear and reappear just fine, without local storage, because we don't leave the page. It follows that we don't need local storage to record the location of anything within the viewport. What we do need is some way to determine the location of the viewport, so we can place a marker or beacon into it, or a way to identify content or elements within the viewport, so we can home in on one of those later. The former would probably be better, since it avoids the contingency of there being no elements in the viewport. The Transhumanist 18:25, 19 May 2017 (UTC)

A JavaScript object like local storage has not an order.
If I understood your scope fully, then you can do it in another way. Turn on/off a global variable via js or stored in a cookie or whatever, and apply changes. When this variable is turned on (true, 1) then hide annotations (you can do it in several ways by adding a proper element, a class, applying a style, ...), When this variable is turned off (false, 0, null, undefined, empty string) and you are on the same page then show annotations again (by doing the opposite of the previous case). When it is turned off and the location is changed then do nothing. It can be written in fully native js.
If you still want to use an object then you need to add a positioning key to each item and do a loop through this key, or an array, which is sortable or it is already ordered, and then doing a loop within the array to get the correct/wanted objects. -pjoef (talk o contribs) 09:34, 23 May 2017 (UTC)

@The Transhumanist: I think I've got an approach that could work - for elements above the veiwport, get the difference in height from before hiding annotations to after hiding annotations, then scroll the window up by that amount.

• If an element is above the viewport, getBoundingClientRect will have a negative value for bottom
• The total height of an element can be obtained by the jQuery .outerHeight(true) method
• The window can be scrolled using window.scrollBy()

In code, this would be something like the following

- Evad37 [talk] 05:06, 28 May 2017 (UTC)

Evad, this looks way more efficient than the approach I've been working on. Thank you. I'll see what I can do with it. The Transhumanist 22:46, 3 June 2017 (UTC)

src: upload.wikimedia.org

User script for moving refs after punctuation

I'm a little new to JavaScript, but I've created a script (User:Erutuon/footnoteCleanup.js) to move refs, {{citation needed}} tags, and footnote templates after punctuation.

It escapes ref tags, then reorders them in relation to punctuation; then escapes footnote templates, and reorders them; then unescapes twice to get the original content back. Thus, ref tags inside of footnote templates should be handled correctly. And it can currently handle just one level of templates inside of the footnote templates. (That can be increased if necessary.)

This tool might be useful if you happen to find an article with a huge number of misplaced refs and want to fix it without doing a lot of annoying copy-pasting. -- Eru·tuon 02:16, 20 May 2017 (UTC)

src: upload.wikimedia.org

What is jsfiddle?

It looks like a sandbox, but I have a feeling it is a whole lot more. It seems to be used extensively out there in the JS community, but we don't have an article on jsfiddle yet.

I did find this: Comparison of online source code playgrounds, and there is no article on Source code playground. Are there other names for this type of thing?

Getting back to my initial query, what is jsfiddle, and what is it used for?

I look forward to your replies. The Transhumanist 20:42, 21 May 2017 (UTC)

An interview with one of the jsFiddle creators is at https://davidwalsh.name/jsfiddle-interview. The term 'source code playground' sounds correct. The author stated "One of the great code sharing tools was pastebin. It was simple and straight-forward but quickly grew out of its usefulness. That's where jsFiddle comes in. jsFiddle is a fresh tool that not only displays the code and highlights it but also executes its code within the browser for even better debugging." When you look at jsFiddle and compare it to some other entries that also let you try your example in your own browser, it has the virtue of letting you play with HTML, CSS and Javascript all at the same time.

When considering possible applications for a source code playground, it seems like an obvious win for an online textbook to use examples that can execute in the browser. Here is an online book by Cody Lindley that uses jsFiddle for its examples: https://www.gitbook.com/book/frontendmasters/react-enlightenment/details. A sample jsFiddle window is at https://www.reactenlightenment.com/react-jsx/5.8.html.

When you compare the Alexa rankings for jsfiddle.com and www.codepen.io, the latter gets more hits. The CodePen site has some quite elegant examples ('pens') which will run in your browser and claim to let you play with the code. CodePen gets bonus points for a New York Times blog article that came complete with a CodePen window that allows playing with one of their videos, although the company name isn't mentioned in the article text. They also managed to raise a million dollars from investors, which could explain why their examples are more beautiful than the jsFiddle ones. While having an article on CodePen seems well-justified, it is tricky to know if an article on jsFiddle could meet the notability rules. It would be fun to have. I see that Comparison of online source code playgrounds already has some red-linked entries, which is a thing that people often object to in lists.

Whether individual items are notable or not, It seems worthwhile for somebody to write an article on Source code playground. EdJohnston (talk) 02:53, 27 May 2017 (UTC)

src: upload.wikimedia.org

Should we have an article on Babel?

• https://babeljs.io/

It allows you to program in the latest version of JavaScript, and then transpile it to a version that is actually being used in current browsers. Is it notable enough? The Transhumanist 00:24, 15 June 2017 (UTC)

src: jech.bmj.com

Are these notable?

Here are some things I've run across while browsing JS on WWW:

• http://bluebirdjs.com/docs/getting-started.html
• https://bower.io/
• http://broccolijs.com/
• http://brunch.io/

Which ones should WP have articles on? The Transhumanist 01:27, 15 June 2017 (UTC)

src: upload.wikimedia.org

There is no Portal:JavaScript

(Hint hint). The Transhumanist 06:21, 15 June 2017 (UTC)

src: tarjetasysobres.co

HTML scripting is in sad shape (eom)

New article: Userscript manager (eom)

New Draft:Tampermonkey (eom)

Please check lead section at JavaScript (eom)

Expert attention

This is a notice about Category:JavaScript articles needing expert attention, which might be of interest to your WikiProject. It will take a while before the category is populated. There might be as few as one page in the category, or zero if someone has removed the expert request tag from the page. -- Mr. Guye (talk) (contribs) 04:20, 7 October 2017 (UTC)

Thank you. The Transhumanist 05:38, 26 October 2017 (UTC)

Applying JavaScript upon the future of outlines

I'm in the process of building scripts for viewing outlines and for outline development. To make it easier for others to follow along with how the scripts work, I provide extensive explanations of the source code on their talk pages.

So far, there is:

• User:The Transhumanist/OutlineViewAnnotationToggler.js - this one provides a menu item to turn annotations on/off, so you can view lists bare when you want to (without annotations). When done, it will work on (the embedded lists of) all pages, not just outlines. Currently it is limited to outlines only, for development and testing purposes. It supports hotkey activation/deactivation of annotations, but that feature currently lacks an accurate viewport location reset for retaining the location on screen that the user was looking at. The program also needs an indicator that tells the user it is still on. Otherwise, you might wonder why a bare list has annotations in edit mode, when you go in to add some. :) Though it is functional as is. Check it out. After installing it, look at Outline of cell biology, and press ? Shift+Alt+a. And again.
• User:The Transhumanist/RedlinksRemover.js - strips out entries in outlines that are nothing but a redlink. It removes them right out of the tree structure. But only end nodes (i.e., not parent nodes, which we need to keep). It delinks redlinks that have non-redlink offspring, or that have or are embedded in an annotation. It does not yet recognize entries that lack a bullet (it treats those as embedded).

It is my objective to build a set of scripts that fully automate the process of creating outlines. This end goal is a long way off (AI-complete?). In the meantime, I hope to increase productivity as much as I can. Fifty percent automation would double an editor's productivity. I think I could reach 80% automation (a five-fold increase in productivity) within a couple years.

There's more:

• User:The Transhumanist/StripSearchInWikicode.js - another script, which strips search results down to a bare list of links, and inserts wikilink formatting for ease of insertion of those links into lists. This is useful for gathering links for outlines. I'd like this script to sort its results. So, if you know how, or know someone who knows how, please let me know. A more immediate problem is that the output is interlaced with CR/LFs. I can't figure out how to get rid of them. Stripping them out in WikEd via regex is a tedious extra step. It would be nice to track them down and remove them with the script.

I look forward to your comments and suggestions. The Transhumanist 07:45, 26 October 2017 (UTC)

Global object?

"mw" is the alias for "mediaWiki", the global object.

What is a global object? The Transhumanist 12:58, 19 December 2017 (UTC)

@The Transhumanist: is this a quote from somewhere else, context may help. You may be referring to the meta:Interwiki map. -- xaosflux ^Talk 13:50, 19 December 2017 (UTC)

@Xaosflux: Context, right. See below... The Transhumanist 18:39, 19 December 2017 (UTC)

I think you are talking about a Javascript object. Global variables are declared outside any function, and they can be accessed (used) on any function in the program. Local variables are declared inside a function, and can be used only inside that function. Same thing with global and local objects. mw:ResourceLoader/Core modules Disclaimer: I am not a Javascript expert. (((The Quixotic Potato))) (talk) 17:57, 19 December 2017 (UTC)

@The Quixotic Potato: That link is where I came across the term. At mw:ResourceLoader/Core modules#mediawiki It says:

This is the mediawiki base module. It initialises the mediaWiki global object (with mw as alias). Alias mw is available everywhere and should be used.

But I can't find the definition of "global object" anywhere. As far as I can tell, it means that "mediaWiki" and "mw" refer to the mediaWiki object (initialized by the mediawiki base module) no matter what script they are used in on Wikipedia.

Does that mean scripts on Wikipedia don't need a bodyguard function to protect the mw alias?

Is "global object" a neologism? It would be nice to be able to look up the definition. The Transhumanist 18:25, 19 December 2017 (UTC)

I'll ping @TheDJ: who knows a hell of a lot more about this stuff than I do. (((The Quixotic Potato))) (talk) 18:29, 19 December 2017 (UTC)

mediaWiki is a library using the javascript object structure. It is accessible via the variable name mediaWiki (or mw) in javascript's global scope for variables. Global variables can be written and read by everyone, so they are a bit dangerous to use, therefor we try to limit how many we use, so that we make fewer mistakes. We use bodyguards functions to 'hoist' these global variable names and make them functionally scoped variables (we import jQuery and mediaWiki, and instead of using them directly within the bodyguard, we use by renaming them to the function parameters $ and mw). This has multiple advantages. First, by lifting, we basically get to name them however we want and we can be consistent about that throughout the module (pick one and stick to it). Second, we won't be bothered by other libraries accidentally overwriting the global variable after our code in the bodyguard began executing (these can be very hard problems to debug, as they are cause by someone else's code). Third, it makes it easier to keep track of the global variables that you are using, making it harder to unintentionally use a global variable. For jshint/eslint, we define just the globals that we import with the bodyguard, allowing us to easily spot unintentional global variable usage in any other place in the code. --TheDJ (talk o contribs) 19:47, 19 December 2017 (UTC)

@TheDJ: I don't understand the answer (I was expecting a "yes" or "no" response). Do "mediaWiki" and "mw" have the power of reserved words (in scripts on Wikipedia)? Do scripts on Wikipedia need a bodyguard function to protect the mw alias? I generally include the following, but is it providing any benefit?

What am I missing?

By the way, I'm still having trouble grasping a particular term. On the page at mw:ResourceLoader/Core modules#mediawiki it says:

This is the mediawiki base module. It initialises the mediaWiki global object (with mw as alias). Alias mw is available everywhere and should be used.

In the quote above, what exactly does "mediaWiki global object" refer to? I look forward to your replies. The Transhumanist 15:31, 30 December 2017 (UTC)

I assume "global" refers to scope (computer science) (especially global scope) whereas object refers to a Javascript object. In other words, it is an object which any program can access on a specific MediaWiki page. Changing some attribute of the object will cause all other programs or scripts accessing the object to be affected. (And for that reason, I assume that the majority of attributes of the object are read-only.) --Izno (talk) 18:35, 19 December 2017 (UTC)

@Izno: Thank you. Any comments on TheDJ's Dec 19 answer above? (I don't get it). The Transhumanist 23:26, 23 December 2017 (UTC)

New draft: Glossary of JavaScript (eom)

Comparison of JavaScript charting frameworks listed at Requested moves

A requested move discussion has been initiated for Comparison of JavaScript charting frameworks to be moved to Comparison of JavaScript charting libraries. This page is of interest to this WikiProject and interested members may want to participate in the discussion here. --RMCD bot 22:16, 16 March 2018 (UTC)

To opt out of RM notifications on this page, transclude {{bots|deny=RMCD bot}}, or set up Article alerts for this WikiProject.

JavaScript programmers needed at WT:WPPORT

The portal system is being overhauled.

They could really use some input from JS programmers on what is possible.    -- The Transhumanist   22:45, 14 May 2018 (UTC)

Please turn my whinge into text at IIFE

I've noticed an amazing omission from IIFE summarized in that talk page. I've neither tuits or brain-bits at the moment. Could someone add text to document this frequently-seen usage of IIFEs? Shenme (talk) 05:15, 20 June 2018 (UTC)

Source of article : Wikipedia