The Wiert Corner – irregular stream of stuff

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

  • My badges

    Mastodon

  • Twitter Updates

  • My Flickr Stream

    20140508-Delphi-2007--Project-Options--Cannot-Edit-Application-Title-HelpFile-Icon-Theming20140430-Fiddler-Filter-Actions-Button-Run-Filterset-now20140424-VMware-Fusion-6.0.3.-no-reclaimable
    More Photos

  • 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 ‘Web Development’ Category

« Previous Entries
Next Entries »

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 expected1, you 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 »

On repeat: “ask information only once”;  Eenmalige uitvraag – NORA Online

Posted by jpluimers on 2023/07/13

Since the SVB PGB site keeps violating the [Wayback/Archive] AP12: Eenmalige uitvraag – NORA Online principle, some more emphasis on it as the usefulness of the “ask information only once” principle is not limited to government sites or commercial sites providing services for the government.

The principle “ask information only once” is valid for any site and needs to be present at all times, especially in these situations:

  1. when an authentication token is expired and re-authentication is needed
  2. when checking if authentication might have been expired and a page refresh is done during that check

I wrote about 1. in SVB PGB and DigiD security suddenly logged you out every 15 minutes despite the count down counter indicating otherwise ( wrote it in March 2021, published it in December 2021 when I thought it had been sort of solved).

That was obnoxious and took a very long time to fix (despite the mandatory aspect of the “ask information only once” principle and me pushing for a quick resolving in [Archive.is] Jeroen Wiert Pluimers on Twitter: “Omdat de @SVB_PGB site hiermee een noodzakelijk NORA archictectuur principe schendt (je raakt bij de logoff/logon de informatie die je op de pagina aan het invullen bent kwijt): kan dit een hoge prirotieit krijgen? Zie: – …”).

In February 2022, I had enough energy to submit the final PGB administration parts to the SVB PGB site. I didn’t get logged out every few minutes for the first hour or so (that only happened after being authenticated more than one hour, then repeating every 15 minutes), but I bumped into 2: loosing a lot of data in an at first unpredictable manner.

An underlying thing is that despite the NORA rules to be mandatory there is no sanction for the SVB (or any other government organisation) to fix this: users have to use the site and take the burden in order to get their payments. Ruurd Pels highlighted in these two answers to my tweets: harsh, but hitting the nail on the head:

The problem is that every each period of 15 minutes session activity , when you submit a form (the whole flow is form based, where the amount of data per form varies: sometimes just a confirmation button, sometimes a full month of data containing the hours worked) you get an intermediate quickly flashing “Redirecting…” on your screen, then loose the data entered in that form:

  1. [Archive] Jeroen Wiert Pluimers on Twitter: “Het NORA principe wat @StOnSoftware een jaar geleden noemde wordt weer door het @SVB_PGB geschonden. Het duurde even om te reproduceren, maar je verliest ongeveer elke 15 minuten je ingevoerde data. 1/” / Twitter
  2. [Archive] Jeroen Wiert Pluimers on Twitter: “Wat je dan ziet tijdens de submit (Verder, Opslaan) is een kort “Redirecting…” scherm op een willekeurige plek in de flow …, …, … In dit voorbeeld verlies je een maand aan invulwerk en is alles weer leeg. 2/ …” / Twitter
    Declaratie insturen - empty declaration showing you just lost a month of input

    Declaratie insturen – empty declaration showing you just lost a month of input

  3. [Archive] Jeroen Wiert Pluimers on Twitter: “Vorig jaar werd je nog elke 15 minuten uitgelogd en was het nog erger, zie … 3/” / Twitter
  4. [Archive] Jeroen Wiert Pluimers on Twitter: “en … Dat probleem zorgde er voor dat ik maar sporadisch declaraties instuurde, maar nu met een hele stapel declaraties is het probleem op een subtielere wijze nog steeds aanwezig. 4/” / Twitter
  5. [Archive] Jeroen Wiert Pluimers on Twitter: “Kunnen jullie dit laten fixen? Dank alvast. 5/5” / Twitter

After more than an hour, I bumped into 1 again:

  1. [Archive] Jeroen Wiert Pluimers on Twitter: “Oh @SVB_PGB: die bug van uitloggen na een kwartier bestaat nog steeds (zie …). Kreeg ik net in een uur tijd 3 keer. Na inloggen kom je wel weer in de flow, maar de data die je daar hebt ingevuld is dan verdwenen. A/ CC @EefvanKoos” / Twitter
  2. [Archive] Jeroen Wiert Pluimers on Twitter: “@SVB_PGB @EefvanKoos Ik vermoed dat beide te maken hebben met de sessie-duur van de active authenticatie van @DigiDwebcare omdat je in beide gevallen het “Redirecting…” stukje heel kort ziet verschijnen ofwel in het form of bij DigiD login beide met verlies aan data. B/B” / Twitter

[Archive] Stephan Eggermont (@StOnSoftware) / Twitter quote retweeted my initial message at [Archive] Stephan Eggermont on Twitter: “🧵 NORA heeft een aantal hele duidelijke principes om de burger niet te frustreren. Niet twee keer naar hetzelfde vragen geldt ook als je een sessie time-out. Dan moet je dus al ingevulde gegevens bewaren” / Twitter, which translated is

🧵 NORA has a number of very clear principles in order not to frustrate citizens. Not asking for the same thing twice also applies if you time out a session. Then you have to save already entered data

An introduction about NORA is at Nederlandse Overheid Referentie Architectuur – Wikipedia:

Nederlandse Overheid Referentie Architectuur of NORA is het interoperabiliteitsraamwerk voor de Nederlandse overheid en vertaalt daartoe wetgeving, beleid en standaarden naar architectuurprincipes, beschrijvingen en modellen. Het is een beschrijving van uitgangspunten voor het inrichten van de informatiehuishouding van de Nederlandse overheid. NORA is relevant voor de uitvoering van alle publieke taken door publieke en private organisaties.

[Wayback/Archive] NORA: Nederlandse Overheid Referentie Architectuur – Bluefrog has a way easier “table of contents” to the principles than the NORA online site (note that some document numbers are intentionally not used):

DE TIEN BASISPRINCIPES VAN NORA

  1. [Wayback/Archive] BP01: Afnemers krijgen de dienstverlening waar ze behoefte aan hebben.
  2. [Wayback/Archive] BP02: Afnemers kunnen de dienst eenvoudig vinden.
  3. [Wayback/Archive] BP03: Afnemers hebben eenvoudig toegang tot de dienst.
  4. [Wayback/Archive] BP04: Afnemers ervaren uniformiteit in de dienstverlening door het gebruik van standaardoplossingen.
  5. [Wayback/Archive] BP05: Afnemers krijgen gerelateerde diensten gebundeld aangeboden.
  6. [Wayback/Archive] BP06: Afnemers hebben inzage in voor hen relevante informatie.
  7. [Wayback/Archive] BP07: Afnemers worden niet geconfronteerd met overbodige vragen.
  8. [Wayback/Archive] BP08: Afnemers kunnen erop vertrouwen dat informatie niet wordt misbruikt.
  9. [Wayback/Archive] BP09: Afnemers kunnen erop vertrouwen dat de dienstverlenerzich aan afspraken houdt.
  10. [Wayback/Archive] BP10: Afnemers kunnen input leveren over de dienstverlening.

DE 38 AFGELEIDE PRINCIPES

  1. [Wayback/Archive] AP01: Diensten zijn herbruikbaar
  2. [Wayback/Archive] AP02: Ontkoppelen met diensten
  3. [Wayback/Archive] AP03: Diensten vullen elkaar aan
  4. [Wayback/Archive] AP04: Positioneer de dienst
  5. [Wayback/Archive] AP05: Nauwkeurige dienstbeschrijving
  6. [Wayback/Archive] AP06: Gebruik standaard oplossingen
  7. [Wayback/Archive] AP07: Gebruik de landelijke bouwstenen
  8. [Wayback/Archive] AP08: Gebruik open standaarden
  9. [Wayback/Archive] AP09: Voorkeurskanaal internet
  10. [Wayback/Archive] AP10: Aanvullend kanaal
  11. [Wayback/Archive] AP11: Gelijkwaardig resultaat ongeacht kanaal
  12. [Wayback/Archive] AP12: Eenmalige uitvraag
  13. [Wayback/Archive] AP13: Bronregistraties zijn leidend
  14. [Wayback/Archive] AP14: Terugmelden aan bronhouder
  15. [Wayback/Archive] AP15: Doelbinding (AP)
  16. (AP16 is intentionally missing: merged into AP17)
  17. [Wayback/Archive] AP17: Informatie-objecten systematisch beschreven
  18. [Wayback/Archive] AP18: Ruimtelijke informatie via locatie
  19. [Wayback/Archive] AP19: Perspectief gebruiker
  20. [Wayback/Archive] AP20: Persoonlijke benadering
  21. [Wayback/Archive] AP21: Bundeling van diensten
  22. [Wayback/Archive] AP22: No wrong door
  23. [Wayback/Archive] AP23: Automatische dienstverlening
  24. [Wayback/Archive] AP24: Proactief aanbieden
  25. [Wayback/Archive] AP25: Transparante dienstverlening
  26. [Wayback/Archive] AP26: Afnemer heeft inzage
  27. [Wayback/Archive] AP27: Een verantwoordelijke organisatie
  28. [Wayback/Archive] AP28: Afspraken vastgelegd
  29. [Wayback/Archive] AP29: De dienstverlener voldoet aan de norm
  30. [Wayback/Archive] AP30: Verantwoording dienstlevering mogelijk
  31. [Wayback/Archive] AP31: PDCA-cyclus in besturing kwaliteit
  32. [Wayback/Archive] AP32: Sturing kwaliteit op het hoogste niveau
  33. [Wayback/Archive] AP33: Baseline kwaliteit diensten
  34. [Wayback/Archive] AP34: Verantwoording besturing kwaliteit
  35. (AP35 is intentionally missing: superseded by AP41)
  36. (AP36 is intentionally missing: superseded by AP41)
  37. (AP37 is intentionally missing: superseded by AP43)
  38. (AP38 is intentionally missing: superseded by AP43 and AP42)
  39. (AP39 is intentionally missing: superseded by AP42)
  40. [Wayback/Archive] AP40: Onweerlegbaarheid (principe)
  41. [Wayback/Archive] AP41: Beschikbaarheid
  42. [Wayback/Archive] AP42: Integriteit
  43. [Wayback/Archive] AP43: Vertrouwelijkheid (principe)
  44. [Wayback/Archive] AP44: Controleerbaarheid

The missing numbers (see also [Wayback/Archive] Betrouwbaarheid – NORA Online, [Wayback/Archive] Vervangen of Vervallen elementen in NORA – NORA Online and [Wayback/Archive] Vervangen of Vervallen uitspraken in NORA – NORA Online):

For a management overview, see [Wayback/Archive] NORA (Nederlandse Overheid Referentie Architectuur) – Digitale Overheid.

–jeroen

Posted in Authentication, Development, DigiD, Power User, Security, Software Development, Web Development | 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 »

Via isotopp: Yes, I can connect to a DB in CSS

Posted by jpluimers on 2023/06/22

Boy, I wonder what can go wrong with [Wayback/Archive] Yes, I can connect to a DB in CSS

Via: [Wayback/Archive] Kris on Twitter: “… “Yes, I can connect to a DB in CSS” Abusing houdini.how, and using a JS version of Sqlite, CSS can connect to a DB.” / Twitter

Related:

–jeroen

Posted in CSS, Database Development, Development, Software Development, SQLite, 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: p, pre, 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 »

Some more links on bookmarklets: this time ones that operate on (selection of text on) the current page

Posted by jpluimers on 2023/05/04

As a continuation of the various bookmarklet posts, here is one with information on bookmarklets that operate on the current page, for instance when you already got text selected.

All via [Wayback/Archive] bookmarklet that works on link of current selection – Google Search

–jeroen

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

« Previous Entries
Next Entries »