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

Archive for the ‘Software Development’ Category

« Previous Entries
Next Entries »

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 »

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 »

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 »

doegox/EMV-CAP: This tool emulates an EMV-CAP device, to illustrate the article “Banque en ligne : à la decouverte d’EMV-CAP” published in MISC, issue #56

Posted by jpluimers on 2023/06/21

For my link archive: [Wayback/Archive] doegox/EMV-CAP: This tool emulates an EMV-CAP device, to illustrate the article “Banque en ligne : à la decouverte d’EMV-CAP” published in MISC, issue #56.

Via: [Archive] Philippe Teuwen on Twitter: “Our 10 years old EMV-CAP emulator is now republished on Github under GPL3+, use it responsibly! …” / Twitter

Related:

–jeroen

Posted in Development, Python, Scripting, Software Development | Leave a Comment »

Rust tool to make DNS queries: ~mvforell/toluol – sourcehut git

Posted by jpluimers on 2023/06/20

[Wayback/Archive] ~mvforell/toluol – sourcehut git: Rust tool to make DNS queries

From [Archive] Max on Twitter: “@b0rk Shameless plug of an alternative to dig I’ve written: … It’s not complete yet (it can’t do what dig +trace does), but it’s getting there :) I’m also planning to add coloured output to make it more readable. …” / Twitter

In a reaction to [Archive] 🔎Julia Evans🔍 on Twitter: “I wish dig‘s output actually looked like this? I feel like there’s no reason (except compatibility or whatever) that it has to be as unreadable of it is …” / Twitter

Read the rest of this entry »

Posted in *nix, *nix-tools, Development, dig, Power User, Rust, Software 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 »

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://wiert.wordpress.com/
    • 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 »

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 »

Why I try to keep an online copy of my bookmarklets in html instead of Markdown

Posted by jpluimers on 2023/06/01

As Chrome mangles Bookmarklets to a partially escaped form (I think using Percent encoding), I first tried to document my Bookmarklets in Markdown so I could easier edit them and copy these JavaScript links  to various browsers. That failed, because the html rendered from the Markdown didn’t contain the links any more. So I now use plain html for documenting them which is a pain to edit but works.

[Wayback/Archive] Some bookmarklets hosted as [Wayback/Archive] Some bookmarklets – cached 1 minute – throttled and [Wayback/Archive] Some bookmarklets – cached 1 year – CDN.

This is why:

  1. Technically you can include JavaScript for Bookmarklets in Markdown documents both as Markdown links (either with escapes or by splitting reference and link in two pieces) and html links (as embedding html in Markdown is allowed): [Wayback/Archive] Bookmarklet link in Markdown document – Stack Overflow (thanks [Wayback/Archive] Adam Haile, [Wayback/Archive] Zombo and [Wayback/Archive] stevemegson)
  2. Because of security reasons, many hosters will filter out JavaScript when transforming Markdown in html [Wayback/Archive] Embed JavaScript in GitHub README.md – Stack Overflow (thanks [Wayback/Archive] Matt Smith and [Wayback/Archive] coyotte508)

Searches: [Wayback/Archive] markdown javascript in link – Google Search and [Wayback/Archive] “embed javascript” in markdown – Google Search.

–jeroen

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

« Previous Entries
Next Entries »