The Wiert Corner – irregular stream of stuff

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

  • My badges

  • Twitter Updates

  • My Flickr Stream

  • Pages

  • All categories

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

    Join 1,860 other subscribers

Archive for the ‘HTML’ Category

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 »

Characters you need to escape in the Title of a WordPress post

Posted by jpluimers on 2023/07/18

I forgot to post this: [Wayback/Archive] Which characters need to be escaped in HTML? – Stack Overflow

If you’re inserting text content in your document in a location where text content is expected1you typically only need to escape the same characters as you would in XML. Inside of an element, this just includes the entity escape ampersand & and the element delimiter less-than and greater-than signs < >:
& becomes &amp;
< becomes &lt;
> becomes &gt;

I didn’t quote further, as this bit is somehow important for WordPress posts. WordPress reminded me the hard way when initially these posts were wrongly titled:

Warning:

It also means the “Press This” bookmarklet always gets unescaped plain text wrong. Watch this when selecting text for blogging and check if the selected text actually got into your post fine.

Thanks [Wayback/Archive] Ahmet for asking the above question and [Wayback/Archive] Jeremy for answering it.

–jeroen

Posted in Development, HTML, HTML5, SocialMedia, Software Development, Web Development, WordPress, WordPress | Leave a Comment »

Thanks Stephan Kämper for showing me how to validate HTML on-line at W3C

Posted by jpluimers on 2023/07/05

In Another difference between the and element in HTML&XHTML, I mentioned Stephan Kämper taught be about the W3C HTML NU validator in [Archive] Stephan Kämper on Twitter: “I try to write fairly simple & #valid #HTML ➙ …gist..Validating it with …online HTML-Validator…, I get the error ‘No p element in scope but a p end tag seen.‘ What? Why? Removing the list from the HTML, gets rid of the error… Why?!? I. don’t. get it. 1/2″ / Twitter.

Upon closer inspection, there are actually two w3c.org HTML validators, each operating in three modes:

  1. Default checker which is DTD-based:

    This validator checks the [Wayback/Archive] markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as [Wayback/Archive] RSS/Atom feeds or [Wayback/Archive] CSS stylesheets, [Wayback/Archive] MobileOK content (now retired), or to [Wayback/Archive] find broken links, there are [Wayback/Archive] other validators and tools available. As an alternative you can also try our [Wayback/Archive] non-DTD-based validator.

    1. [Wayback/Archive] The W3C Markup Validation Service: #validate_by_uri mode (without #validate_by_uri URL fragment) and

      default: checks the HTML of a URL

    2. [Archive] The W3C Markup Validation Service: #validate_by_upload mode

      you upload a file of which the HTML then gets checked

    3. [Archive] The W3C Markup Validation Service: #validate_by_input mode

      you enter the HTML to be checked into a text box

  2. NU checker which is non-DTD-based:
    1. [Wayback/Archive] Ready to check – Nu Html Checker; #address mode (without #address URL fragment) and

      default: checks the HTML of a URL

    2. [Archive] Ready to check – Nu Html Checker: #file mode

      you upload a file of which the HTML then gets checked

    3. [Archive] Ready to check – Nu Html Checker: #textarea mode

      you enter the HTML to be checked into a <textarea> element

Notes:

  1. that all three above modes get selected by a URL fragment (after a # hash) which the Wayback machine cannot individually save, but Archive.is can, hence the non-default URLs are not saved only in Archive.is, and not in the Wayback machine.
  2. The DTD-based checker seems non-functional and redirects all requests to the non-DTD-based checker.

I also took a look at the Wayback machine saved pages under the direct URLs of both checkers:

  1. https://web.archive.org/web/*/https://validator.w3.org/*
  2. https://web.archive.org/web/*/https://validator.w3.org/nu/*

I learned that the NU validator accepts at least these arguments:

Note that you cannot do this directly with HTML files saved in a gist or GitHub repository because it serves all RAW files as

[Wayback/Archive] text/plain MIME type. You can work around this by using a raw.githack.com trick I explained before at:

I also amended my above reply with more information using the ?doc= parameter with RAW gist files and archived that thread at [Wayback/Archive] Thread by @jpluimers on Thread Reader App – Thread Reader App.

–jeroen

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Another difference between the and element in HTML & XHTML

Posted by jpluimers on 2023/07/04

A few weeks after queueing What is the difference between <p>, <div> and <span> in HTML&XHTML?, Stephan Kämper posted an interesting other “TIL“.

Besides that TIL, it also taught me about an on-line HTML validator. Cool: I learned two things from Stephan that day!

The above post talked about phrasing versus non-phrasing elements, Stephan discovered another difference between the p and div elements:

Stephan’s TIL: [Archive] Stephan Kämper on Twitter: “TIL or Life (and the HTML specification) is full of wonders and surprises ➙ “List elements (in particular, ol and ul elements) cannot be children of p elements.” …” / Twitter

It was based on his quest [Archive] Stephan Kämper on Twitter: “I try to write fairly simple & #valid #HTML ➙ …gist..Validating it with …online HTML-Validator…, I get the error ‘No p element in scope but a p end tag seen.‘ What? Why? Removing the list from the HTML, gets rid of the error… Why?!? I. don’t. get it. 1/2″ / Twitter, which I archived at [Wayback/Archive] Thread by @S_2K on Thread Reader App – Thread Reader App.

I responded this: [Archive] Jeroen Wiert Pluimers on Twitter: “@S_2K I thought it would be something like explained in p/div/span differences But it is yet another html oddity where structural and logical concept are mixed in one language.” / Twitter.

Both his quest and tweet referred to this key documentation part: [Wayback/Archive] HTML Standard: grouping content; the p element; note on lists:

Read the rest of this entry »

Posted in Development, HTML, HTML5, Software Development, Web Development | 1 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 »

Converting an inline svg image to file

Posted by jpluimers on 2023/06/28

Via [Wayback/Archive.is] inline svg to file – Google Search, found first [Wayback/Archive] Convert Inline SVG to File – Eyedeal Graphics

  1. Use your browser’s “View Source” or “Page Source” command to view the page’s HTML code.
  2. Locate and copy all the code between the beginning <svg> and closing </svg> tags.
  3. Paste the copied code, including the <svg> and </svg> tags into your text editor of choice. (Atom, Brackets, Visual Studio Code, Sublime Text, etc.)
  4. Save the text file as an SVG file. (ex. legacy-xyz-products-logo.svg)
  5. Open the SVG file in your preferred vector editing tool. (Adobe, Illustrator, Affinity Designer, Sketch, Inkscape, etc.)

That wasn’t enough, as not all SVG files then render properly, so luckily the next hit was [Wayback/Archive] html – Convert an inline SVG into a SVG file – Stack Overflow (thanks [Wayback/Archive] Paul LeBeau):

Read the rest of this entry »

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a 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 »

What is the difference between <p>, <div> and <span> in HTML&XHTML?

Posted by jpluimers on 2023/06/06

I write most of my documentation in Markdown or reStructuredText, so I don’t bump into html questions as often as in the past. But recently, I had to document in html as markdown was impossible, bumped in the choice between using div or p tags for paragraphs, and remembered there was a p problem not present with div but forgot which problem.

So I found [Wayback/Archive] What is the difference between <p>, <div> and <span> in HTML&XHTML? where the red bit explained what I forgot:

As others have answered… div and p are “block elements” (now redefined as Flow Content) and span is an “inline element” (Phrasing Content). Yes, you may change the default presentation of these elements, but there is a difference between “flow” versus “block”, and “phrasing” versus “inline”.

An element classified as flow content can only be used where flow content is expected, and an element classified as phrasing content can be used where phrasing content is expected. Since all phrasing content is flow content, a phrasing element can also be used anywhere flow content is expected. [Wayback/Archive] The specs provide more detailed info.

All phrasing elements, such as strong and em, can only contain other phrasing elements: you can’t put a table inside a cite for instance. Most flow content such as div and li can contain all types of flow content (as well as phrasing content), but there are a few exceptions: ppre, and th are examples of non-phrasing flow content (“block elements”) that can only contain phrasing content (“inline elements”). And of course there are the normal element restrictions such as dl and table only being allowed to contain certain elements.

While both div and p are non-phrasing flow content, the div can contain other flow content children (including more divs and ps). On the other hand, p may only contain phrasing content children. That means you can’t put a div inside a p, even though both are non-phrasing flow elements.

Now here’s the kicker. These semantic specifications are unrelated to how the element is displayed. Thus, if you have a div inside a span, you will get a validation error even if you have span {display: block;} and div {display: inline;} in your CSS.

Thanks [Wayback/Archive] Dhamu for asking that question and [Wayback/Archive] chharvey for explaining these details!

The [Wayback/Archive] HTML Standard: 3.2.5.2 Kinds of content has a cool diagram too:

Read the rest of this entry »

Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »

Eight Dollars – Chrome Web Store: see who fell for the twitter blue scam

Posted by jpluimers on 2023/04/03

[Wayback/Archive] Eight Dollars – Chrome Web Store

It’s available for other browsers too (Brave, FireFox, Edge, Opera; Safari should become supported too), and more importantly: open source as well at [Wayback/Archive] wseagar/eight-dollars: A browser extension that shows twitter blue vs real verified users.

Via [Wayback/Archive] Alan Neilan on Twitter: “@IanColdwater pssst check out”.

jeroen

Read the rest of this entry »

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

Some QR code generators on github.io

Posted by jpluimers on 2023/01/03

QR codes often are the quickest way to copy/paste some data to a smartphone.

So, via [Wayback/Archive] generate qr code site:github.io – Google Search, I found these two (the first is based on the JavaScript source in second, but has QR codes with larger blocks and is therefore easier to scan):

  1. [Wayback/Archive] QR Code Generator
  2. [Wayback/Archive] QR Code Generator

–jeroen

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