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,862 other subscribers

Archive for the ‘Web Development’ Category

« Previous Entries
Next Entries »

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 »

I want to check out how to do POST requests using bookmarklets in order to save URLs to the WayBack machine

Posted by jpluimers on 2023/04/27

I want to check out how to do POST requests using bookmarklets in order to save URLs to the Wayback machine.

The reason is that every few months or so, saving a page the normal way through a something like https://web.archive.org/save/URL fails for one reason or the other, but going to https://web.archive.org/save, then entering URL, and pressing “SAVE PAGE” button works fine:

The the failing way above is using a GET request, the succeeding workaround will open https://web.archive.org/save/URL  using the below POST request (where I omitted some HTTP cookies and HTTP header fields for brevity).

  • POST request using PowerShell:
    $session = New-Object Microsoft.PowerShell.Commands.WebRequestSession
$session.UserAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36"
Invoke-WebRequest -UseBasicParsing -Uri "https://web.archive.org/save/URL" `
-Method "POST" `
-WebSession $session `
-Headers @{
"method"="POST"
  "origin"="https://web.archive.org"
  "referer"="https://web.archive.org/save"
} `
-ContentType "application/x-www-form-urlencoded" `
-Body "url=URL&capture_outlinks=on&capture_all=on&capture_screenshot=on"
  • POST request using cURL on bash:
    curl 'https://web.archive.org/save/URL' \
  -H 'origin: https://web.archive.org' \
  -H 'content-type: application/x-www-form-urlencoded' \
  -H 'referer: https://web.archive.org/save' \
  --data-raw 'url=URL&capture_outlinks=on&capture_all=on&capture_screenshot=on' \
  --compressed
  • POST request using the fetch API in JavaScript:
    fetch("https://web.archive.org/save/URL", {
  "headers": {
    "content-type": "application/x-www-form-urlencoded",
  },
  "referrer": "https://web.archive.org/save",
  "body": "url=URL&capture_outlinks=on&capture_all=on&capture_screenshot=on",
  "method": "POST",
  "mode": "cors"
});

BTW: Yes, I know that URL is not a valid URL, so it will return a page with “http://url/ URL syntax is not valid.“.

All links below via [Wayback/Archive] bookmarklet post request – Google Search:

I tried to put createFormSubmittingBookmarklets/createFormSubmitBookmarklets.js in a bookmarklet using both userjs.up.seesaa.net/js/bookmarklet.html and skalman.github.io/UglifyJS-online. That failed: somehow this code does not want to run as bookmarklet.

Running it from the console is fine though, and gave me this basic bookmarklet template:

javascript:function sf(ur,ty,fd){function me(tg,pr){var el=document.createElement(tg);for(const[nm,vl]of Object.entries(pr)){el.setAttribute(nm,vl);}return el}const fm=me("form",{action:ur,method:ty,style:"display:hidden;"});for(const[nm,vl]of Object.entries(fd)){fm.appendChild(me("input",{name:nm, value:vl}))}document.body.appendChild(fm);fm.submit()}sf("https://web.archive.org/save","post",{"url":"URL","capture_outlinks":"on","capture_all":"on","capture_screenshot":"on","wm-save-mywebarchive":"on","email_result":"on","":"SAVE PAGE"});

There bold URL there is the URL to be saved. I need to test this, then rework it to become parameterised.

–jeroen

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

Some resources on CORS proxies

Posted by jpluimers on 2023/04/19

Having my background before the web-development era, and having lived mostly in back-ends or client-server front-ends, I sometimes need to really dig into things in order to understand them better.

CORS is such a thing, so below are some links to get started. My main interest is CORS proxies as they will force me do go deep and really get what is going on below the surface.

Defunct CORS proxy sites:

Used searches:

–jeroen

Posted in Communications Development, Development, HTTP, Internet protocol suite, REST, Software Development, TCP, 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 »

For my reading list: some links on Twitter bookmarklets

Posted by jpluimers on 2023/03/15

Yup, web browser bookmarklets, though hardly published about any more, I still like them (and wrote about them before). With a little bit, usually unreadable, JavaScript, they can add magical functionality to your browser.

So here are some links on Twitter related bookmarklets:

All via [Wayback/Archive] twitter bookmarklet – Google Search.

–jeroen

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

Enabling GitHub pages to a HTML or markdown GitHub project is dead easy: Delphi deadlockempire is now hosted on github.io

Posted by jpluimers on 2023/01/10

A while ago I wrote about Setting up a GitHub project so it is served over https as a github.io and a custom subdomain.

Doing the full “host on your custom domain” route was a big tougher than I hoped for, so I totally forgot how easy it is to convert an existing HTML or markdown documentation repository to use GitHub pages without a custom domain.

I needed it for the Delphi version of the DeadLockEmpire (see links below, originally it was an interactive tutorial game focusing on the C# language and .NET runtime), as I am trying to get as much as my stuff published and hosted in a manner that will outlive me (I still have a pretty high chance of the rectum cancer metastases returning).

Enabling GitHub Pages on your repository is almost as easy as hosting a page through raw.githack.com (where I already hosted raw.githack.com/jpluimers/deadlockempire.github.io/feature/Delphi-language-and-Delphi-RTL/index.html as raw.githack.com/jpluimers/deadlockempire.github.io/feature/Delphi-language-and-Delphi-RTL/index.html and rawcdn.githack.com/jpluimers/deadlockempire.github.io/feature/Delphi-language-and-Delphi-RTL/index.html).

This is how easy it was to get it hosted as [Wayback/Archive] jpluimers.github.io/deadlockempire.github.io:

  1. In my [Wayback/Archive] jpluimers/deadlockempire.github.io: The Deadlock Empire: Slay dragons, learn concurrency! repository, go to the Settings tab, then click on Pages:
    DeadLockEmpire Settings tab, Pages configuration None

    DeadLockEmpire Settings tab, Pages configuration None.

    Here you see “None” as value for the branch to be published as GitHub Pages.

  2. Here I have chosen the Branch “feature/Delphi-language-and-Delphi-RTL” to be published, and am about to press “Save” (full screenshot below):
    DeadLockEmpire Pages selecting the correct branch

    DeadLockEmpire Pages selecting the correct branch

  3. After pressing “Save“, the site gets published (it takes about a minute for that to complete) at [Wayback/Archive] jpluimers.github.io/deadlockempire.github.io:
    DeadLockEmpire Pages the correct branch has been saved

    DeadLockEmpire Pages the correct branch has been saved which will automagically publish it.

That was it. No more steps.

Each new commit in the selected branch will auto-publish as well.

Related DeadLockEmpire posts

  1. 2016 – If you thought you could do multi-threading, then play “The Deadlock Empire” games.
  2. 2017 – ThreadBarrier/ThreadBarrier.pas at master · lordcrc/ThreadBarrier
  3. 2020 – Davidlohr Bueso on Twitter: A programmer had a problem. He thought to himself, “I know, I’ll solve it with threads!”. has Now problems. two he
  4. [WayBack] One second code: Do YOU know how much your computer can do in a second? is a quiz version of the [WayBack] Numbers Every Programmer Should Know By Year. [WayBack] About this game revealed…Source: One second code: Do YOU know how much your computer can do in a second? « The Wiert Corner – irregular stream of stuff

Read the rest of this entry »

Posted in .NET, About, C#, Conference Topics, Conferences, Delphi, Development, Event, Personal, Software Development, Web Development | 1 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 »

« Previous Entries
Next Entries »