The Wiert Corner – irregular stream of stuff

Jeroen W. Pluimers on .NET, C#, Delphi, databases, and personal interests

  • My badges

    Mastodon

  • Twitter Updates

  • Pages

  • All categories

  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 1,839 other subscribers

Archive for the ‘JavaScript/ECMAScript’ Category

« Previous Entries
Next Entries »

Bookmarklet to save a page both in the WayBack machine and Archive.is (ending on the latter to solve a reCAPTCHA)

Posted by jpluimers on 2023/08/22

TL;DR:

javascript:{h=location.href;open('https://archive.is/?run=1&url='+encodeURIComponent(h));location.href='https://web.archive.org/save/'+(h)}

Read the rest of this entry »

Posted in Bookmarklet, Development, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

Youtube – Extract Meta Data – Amnesty International

Posted by jpluimers on 2023/08/16

Cool that Amnesty International can do a YouTube [Wayback/Archive] Extract Meta Data (Amnesty International).

Via:

I wonder if I can write a Bookmarklet for this (it will likely require an HTTP POST request).

–jeroen

Posted in Development, HTML, JavaScript/ECMAScript, LifeHacker, Power User, Privacy, Scripting, SocialMedia, Software Development, Web Development, YouTube | Leave a Comment »

Bookmarklet for Archive.is to navigate to the canonical link

Posted by jpluimers on 2023/08/15

This is a follow-up to Bookmarklets for Archive.is and the WayBack Machine to go to the original page.

Archive.is has two kinds of URLs:

  1. The encoded version is the short form without any meta-information,
  2. The canonical version is a long form and has metadata about Archive date and time, and the Archived URL,

You get the first URL both after archiving and when browsing from an archived page to another archived page (if it is not archived you will go the unarchived full page URL).

Read the rest of this entry »

Posted in archive.is / archive.today, Development, Internet, InternetArchive, JavaScript/ECMAScript, Power User, Scripting, Software Development, WayBack machine | Leave a Comment »

Load jQuery Only If Not Present

Posted by jpluimers on 2023/07/26

Since I will likely need this one day:

Searching for the above, I ended up in some kind of YouTube vortex or time sink. This happens a lot when learning new stuff, so lets dump a bit more of what I learned along the way.

Watch your $

For checking for the availability of version of jQuery, lots of links I found use $(). or $. constructs which depend on the context of $ being the global alias for the jQuery. When mixing libraries, this global symbol (yes, unlike many languages $ and _ are valid and heavily symbols in JavaScript) can be used by any of these libraries and if you are not absolutely sure about your context, using them is a plain risk: [Wayback/Archive] Global Variables Are Bad.

Adding to the confusion, there are both the jQuery() and jQuery, which seem to be distinctly different. To add to the confusion, there is also jquery.

Since JavaScript is weakly typed, any typos are for you (in the sense of “you, the developer”) to figure out.

Some links from the vortex are below.

Confirmation of my fear of a using global names

  • [Wayback/Archive] Why does JQuery have dollar signs everywhere? – Stack Overflow (thanks [Wayback/Archive] Sachin Kainth for asking, and [Wayback/Archive] User T.J. Crowder for answering)
    $ is just a shortcut for jQuery. The idea is that everything is done with the one global symbol (since the global namespaces is ridiculously crowded), jQuery, but you can use $ (because it’s shorter) if you like:
    // These are the same barring your using noConflict (more below)
var divs = $("div");       // Find all divs
var divs = jQuery("div");  // Also find all divs, because
console.log($ === jQuery); // "true"
    If you don’t want to use the alias, you don’t have to. And if you want $ to not be an alias for jQuery, you can use noConflict and the library will restore $ to whatever it was before jQuery took it over. (Useful if you also use Prototype or MooTools.)
  • [Wayback/Archive] What does the dot after dollar sign mean in jQuery when declaring variables? – Stack Overflow

    Q

    I see variables declared as:
    $.root = $("body");
    and
    $root = $("body");
    What is the difference between the two?

    A (thanks [Wayback/Archive] Sampson)

    Functions in JavaScript are objects. And like most objects in JavaScript, you can arbitrarily add properties to them. The $ function is just that, a function. So if you want to pop a property onto it and reference a jQuery collection, or reference, you can.
    By adding the collection as a property on the $ function, it is one less variable in the current scope. You can examine the keys of the jQuery function before and after if you’d like to see how it affects the function’s topography and (enumerable) property list:
    Object.keys($);
// ["fn", "extend", "expando"..."parseHTML", "offset", "noConflict"]

$.root = $("body");
// [<body>]

Object.keys($);
// ["fn", "extend", "expando"..."parseHTML", "offset", "noConflict", "root"]

     

jQuery documentation

  • [Wayback/Archive] jQuery() | jQuery API Documentation – returning an empty set

    Returning an Empty Set

    Calling the jQuery() method with no arguments returns an empty jQuery set (with a .length property of 0). Similarly, if an argument of null, undefined, an empty array ([]), or an empty string ("") is passed, the set contains no elements.
  • [Wayback/Archive] .jquery | jQuery API Documentation
    The .jquery property is assigned to the jQuery prototype, commonly referred to by its alias $.fn. It is a string containing the version number of jQuery, such as “1.5.0” or “1.4.4”.

    Examples:

    Determine if an object is a jQuery object
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    var a = { what: "A regular JS object" },
    b = $( "body" );
    if ( a.jquery ) { // Falsy, since it's undefined
    alert( "a is a jQuery object!" );
    }
    if ( b.jquery ) { // Truthy, since it's a string
    alert( "b is a jQuery object!" );
    }
    Get the current version of jQuery running on the page
    1
    alert( "You are running jQuery version: " + $.fn.jquery );
  • [Wayback/Archive] Types | jQuery API Documentation: Prototype

    Prototype

    All objects have a prototype property. Whenever the interpreter looks for a property, it also checks in the object’s prototype if the property is not found on the object itself. jQuery uses the prototype extensively to add methods to jQuery instances. Internally, jQuery makes jQuery.fn an alias of jQuery.prototype so you can use either one (though plugin developers have standardized on fn).
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    var form = $("#myform");
    console.log( form.clearForm ); // undefined
    // jQuery.fn === jQuery.prototype
    jQuery.fn.clearForm = function() {
    return this.find( ":input" ).each(function() {
    this.value = "";
    }).end();
    };
    // works for all instances of jQuery objects, because
    // the new method was added to the prototype
    console.log( form.clearForm ); // function
    form.clearForm();
  • [Wayback/Archive] jQuery.fn.extend() | jQuery API Documentation

    The jQuery.fn.extend() method extends the jQuery prototype ($.fn) object to provide new methods that can be chained to the jQuery() function.

    This seems to be a construction that lots of people use to shoehorn truckloads of functionality into an almost global context. Doing that requires careful naming of each method, which the example does not make clear.

    A really important jQuery documentation problem is the lack of a separate documentation entry stating jQuery.fn = jQuery.prototype which is in the source code (more recent versions have it on different lines):
  • [Wayback/Archive] jQuery.noConflict() | jQuery API Documentation
    Many JavaScript libraries use $ as a function or variable name, just as jQuery does. In jQuery’s case, $ is just an alias for jQuery, so all functionality is available without using $. If you need to use another JavaScript library alongside jQuery, return control of $ back to the other library with a call to $.noConflict(). Old references of $ are saved during jQuery initialization; noConflict() simply restores them.
    If for some reason two versions of jQuery are loaded (which is not recommended), calling $.noConflict( true ) from the second version will return the globally scoped jQuery variables to those of the first version.
    …
    If necessary, you can free up the jQuery name as well by passing true as an argument to the method. This is rarely necessary, and if you must do this (for example, if you need to use multiple versions of the jQuery library on the same page), you need to consider that most plug-ins rely on the presence of the jQuery variable and may not operate correctly in this situation.
  • [Wayback/Archive] jQuery – MDN Web Docs Glossary: Definitions of Web-related terms | MDN
    jQuery is a JavaScript Library that focuses on simplifying DOM manipulation, AJAX calls, and Event handling.
    jQuery uses a format, $(selector).action() to assign an element(s) to an event. To explain it in detail, $(selector) will call jQuery to select selector element(s), and assign it to an event API called .action().
    Before writing this post, I had no idea what jQuery was and why it had the word Query in the name (I wrongly associated it with a server-side JavaScript SQL library).

JavaScript documentation

  • [Wayback/Archive] Object prototypes – Learn web development | MDN

    Prototypes are the mechanism by which JavaScript objects inherit features from one another.

    …

    Every object in JavaScript has a built-in property, which is called its prototype. The prototype is itself an object, so the prototype will have its own prototype, making what’s called a prototype chain. The chain ends when we reach a prototype that has null for its own prototype.

    …

    Prototypes are a powerful and very flexible feature of JavaScript, making it possible to reuse code and combine objects.
    In particular they support a version of inheritance. Inheritance is a feature of object-oriented programming languages that lets programmers express the idea that some objects in a system are more specialized versions of other objects.
  • [Wayback/Archive] Object – JavaScript | MDN

    Nearly all objects in JavaScript are instances of Object; a typical object inherits properties (including methods) from Object.prototype, although these properties may be shadowed (a.k.a. overridden). However, an Object may be deliberately created for which this is not true (e.g. by [Wayback/Archive] Object.create(null)), or it may be altered so that this is no longer true (e.g. with [Wayback/Archive] Object.setPrototypeOf).

    Changes to the Object prototype object are seen by all objects through prototype chaining, unless the properties and methods subject to those changes are overridden further along the prototype chain. This provides a very powerful although potentially dangerous mechanism to override or extend object behavior.
  • [Wayback/Archive] javascript – How does the “this” keyword work? – Stack Overflow has a few very precise and elaborate answers. Too much to quote here so I just thank these people:

Note $ is used to prefix variables too

[Wayback/Archive] jquery – Why use $ (dollar sign) in the name of javascript variables? – Stack Overflow (thanks [Wayback/Archive] Simon and [Wayback/Archive] Konerak):

The $ in the variable name is only part of the name, but the convention is to use it to start variable names when the variable represents a jQuery object.
var $myHeaderDiv = $('#header');
var myHeaderDiv = document.getElementById('header');
Now later in your code, you know the $myHeaderDiv is already a jQuery object, so you can call jQuery functions:
$myHeaderDiv.fade();

To get from the DOM-variable to the jQuery variable:

var $myHeaderDiv = jQuery(myHeaderDiv); //assign to another variable
jQuery(myHeaderDiv).fade(); //use directly

//or, as the $ is aliased to the jQuery object if you don't specify otherwise:
var $myHeaderDiv = jQuery(myHeaderDiv); //assign
$(myHeaderDiv).fade(); //use

To get from the jQuery variable to the DOM-variable.

var myHeaderDiv = $myHeaderDiv.get(0);

Finding the jQuery version

Via [Wayback/Archive] detect jquery version – Google Search:

Via [Wayback/Archive] jquery fn – Google Search:

–jeroen

Posted in Development, JavaScript/ECMAScript, jQuery, Scripting, Software Development, Web Development | Leave a Comment »

Some JavaScript bookmarklets for WordPress published pages centered around navigation and IDs

Posted by jpluimers on 2023/07/20

Maintaining a blog takes considerable time, so I wrote a bit of JavaScript for the browser console and bookmarklets to help me navigate faster, especially from my published posts on wiert.me back to the WordPress editing environment.

I wrote this because a query like [Wayback/Archive] wordpress get id from post html – Google Search top hits only contain results that work within the WordPress environment itself, like for instance [Wayback/Archive] 14 Ways to Get Post ID in WordPress.

This blog post is long and contains a lot of information, so I have split it in quite a few sections.

Let’s get started:

Read the rest of this entry »

Posted in Bookmarklet, Classic editor, Development, Gutenberg editor, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »

JavaScript Bookmarklet to enable Mastodon publishing for a WordPress.com post that is edited in the Classic Editor

Posted by jpluimers on 2023/07/02

I quickly hacked together this JavaScript Bookmarklet today, so it is without any checks and assumes you have enabled one Mastodon account for publishing, that you are hosting your blog on WordPress.com, and using the Classic Editor:

javascript:(function(){
  publicizeFormEditHref = document.getElementById('publicize-form-edit');
  publicizeFormEditHref.click();
  mastodonCheckboxes = document.getElementsByClassName('wpas-submit-mastodon');
  mastodonCheckboxes[0].checked = true;
  publicizeFormHideHref = document.getElementById('publicize-form-hide');
  publicizeFormHideHref.click();
  updateButtonHref = document.getElementById('publish');
  updateButtonHref.click();
})();

The above code is the state of [Wayback/Archive] JavaScript Bookmarklet for the WordPress classic editor which enables mastodon publishing (assuming you have one mastodon publishing account enabled … )  and due to be improved in a later blog post.

This will enable the currently edited post to be published to Mastodon, then update/publish the post.

On enabling one Mastodon account for publishing:

Read the rest of this entry »

Posted in Bookmarklet, Development, HTML, JavaScript/ECMAScript, Mastodon, Power User, Scripting, SocialMedia, Software Development, Twitter, Web Browsers, Web Development, WordPress, WordPress | Leave a Comment »

Need to check out replay.io: The Time Travel Debugger for Web Development

Posted by jpluimers on 2023/06/27

I need to check out [Wayback/Archive.is] The Time Travel Debugger for Web Development:

one frame of the replay.io demo

one frame of the replay.io demo

Read the rest of this entry »

Posted in Development, JavaScript/ECMAScript, Scripting, Software Development | 1 Comment »

JavaScript – how to refresh an iframe automatically – Stack Overflow

Posted by jpluimers on 2023/06/14

Based on [Wayback/Archive] javascript – how to refresh an iframe automatically – Stack Overflow and help from [Archive] Roderick Gadellaa (@RGadellaa) / Twitter, I used this JavaScript code right after the body in the html page to reload part of the iframes every 3 minutes and another part every 3 hours:

<script>
  var iframes3minuteInterval = setInterval( () => {
    const ids3minutes = [ 'agenda_iframe', 'month_iframe' ];
    ids3minutes.forEach( id => {
      element = document.getElementById( id );
      element.src = element.src;
    });
  }, 1000 * 60 * 3);
  var iframes3hourInterval = setInterval( () => {
    const ids3hours = [ 'weerplaza_nederland_iframe', 'weerplaza_radar_iframe', 'buienradar_iframe' ];
    ids3hours.forEach( id => {
      element = document.getElementById( id );
      element.src = element.src;
    });
  }, 1000 * 60 * 60 * 3);
</script>

The iframes are widgets for:

This was to workaround GitLab pages on a custom domain are nice, but be aware of intermittent 502 and certificate errors. Now the page only gets loaded once, and the widgets at intervals that are needed.

—jeroen

Posted in CSS, Development, HTML, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »

Side effect-free bookmarklets: wrap them in an IIFE (Immediately Invoked Function Expression)

Posted by jpluimers on 2023/06/08

In Bookmarklets for Archive.is and the WayBack Machine to go to the original page, I wrote about how the Shadow DOM is used to prevent side effects between the code of the WayBack machine and the archived page.

In a similar manner, Bookmarklets can also interfere with code on the page and vice versa, for instance by using global variables.

That is why the [Wayback/Archive] A simple bookmarklet to tweet the current page – DEV Community is wrapped in a special kind of function:

javascript:(function(){
  n=getSelection().anchorNode;
  t=n.nodeType===3?n.data:n.innerText;t='“'+t+'”\\n\\n';
  window.open(`https://twitter.com/intent/tweet?
  text=${encodeURIComponent(t)}${document.location.href}`)
})()

This is an [Wayback/Archive] IIFE – MDN Web Docs Glossary: Definitions of Web-related terms | MDN or “Immediately Invoked Function Expression”, a mechanism coined by [Archive] Ben Alman (@cowboy) / Twitter at [Wayback/Archive] Ben Alman » Immediately-Invoked Function Expression (IIFE).

Since the variables are inside the function body, they won’t interfere with the page. The body will be immediately executed.

Related:

–jeroen

Posted in Bookmarklet, Development, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers | Leave a Comment »

Bookmarklets for Archive.is and the WayBack Machine to go to the original page

Posted by jpluimers on 2023/06/07

Quite often, when browsing an archived page on Archive.is or the WayBack Machine, I want to check the current status of the original page.

So I wrote a few Bookmarklets.

Archive.is

Default field

Any Archive.is page has a Saved from field which is an input html element having a name attribute with value q and a value property containing the URL, which is navigated to by assigning the location in the above code.

So my goto Bookmarklet is this one:

javascript:open(document.getElementsByName("q")[0]?.value)

It uses [0]? as there is no getElementsByName, but there is [Wayback/Archive] Document.getElementsByName() – Web APIs | MDN as name values need not to be unique but id values have to be.

Other Archive.is fields

The above works on all types of Archive.is page types:

  1. search pages like https://archive.is/https://example.org
  2. actual archived pages like https://archive.is/LkpeZ and https://archive.ph/2022.01.22-165646/https://example.org/
    • these only have a Saved from field.
  3. redirected archived pages like https://archive.ph/UEQeg and https://archive.ph/2013.01.03-111457/http://www.iana.org/domains/example/
    • these both have Saved from and Redirected from fields.
  4. complex pages like https://archive.ph/5iVVH and https://archive.ph/2015.11.14-044109/http://www.example.org/
    • those have even more fields: in addition to fields Saved from and Redirected from, the fields Via and Original also are added.

To get the additional fields from the other fields, we need to figure out a way to access them.

Read the rest of this entry »

Posted in Bookmarklet, Development, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers | 1 Comment »

« Previous Entries
Next Entries »