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

Archive for the ‘Web Development’ Category

« Previous Entries
Next Entries »

Naughty naughty no alt: CSS style to clearly show which images lack an alt-text

Posted by jpluimers on 2021/10/05

The CSS from [WayBack/Archive.is] Naughty naughty no alt that shows the below red moving rendering of images that do not have an alt-text is simple:

Read the rest of this entry »

Posted in Bookmarklet, CSS, Development, HTML, HTML5, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

One of the Let’s Encrypt’s Root Certificates expired today (and their corresponding intermediate yesterday); how is your infrastructure doing?

Posted by jpluimers on 2021/09/30

Last weekend I published 5 days before the Let’s Encrypt’s Root Certificate is expiring!

It basically was a post trying to amplify the [Wayback/Archive.is] Let’s Encrypt’s Root Certificate is expiring! message by [Wayback] Scott Helme .

Yesterday and today, he is maintaining a Twitter thread on things that have broken.

Quite a few things have, including some versions of curl, on which a lot of infrastructure relies (the certificate for it got fixed later on 20120930), see:

Two important starting points in his thread:

  1. [Archive.is] Scott Helme on Twitter: “🚨🚨🚨 5 minutes until the Let’s Encrypt R3 intermediate expires 🚨🚨🚨 29 September 2021 19:21:40 UTC”
  2. [Archive.is] Scott Helme on Twitter: “🚨🚨🚨 30 minute warning 🚨🚨🚨 IdentTrust DST Root CA X3 Expires: Sep 30 14:01:15 2021 UTC… “

If you want to check from one of your own clients, try [Archive.is] Scott Helme on Twitter: “I’ve created a test site to help identify issues with clients. If you can connect to https://t.co/bXHsnlRk8D then your client can handle being served the expired R3 Intermediate in the server chain!… “

[Wayback/Archive.is] https://expired-r3-test.scotthelme.co.uk/

Note that neither SSLabs, nor Cencys, nor CertCheckkerApp do show the expired certificate, only the new one:

Yes, I know the pluimers.com web server is rated B from a TLS perspective. Will be working on it, but I’m still recovering from rectum cancer treatments, and have an almost 1.5 year backlog to get through.

–jeroen

Posted in Communications Development, Development, Encryption, HTTP, https, HTTPS/TLS security, Internet protocol suite, Let's Encrypt (letsencrypt/certbot), Power User, Security, Software Development, TCP, TLS, Uncategorized, Web Development | Leave a Comment »

Ian Colwater: Here are some terms to mute on Twitter to clean your timeline up a bit. · GitHub

Posted by jpluimers on 2021/09/30

[WayBack/Archive.is] Here are some terms to mute on Twitter to clean your timeline up a bit. · GitHub

Here are some terms to mute on Twitter to clean your timeline up a bit. – twittermute.txt

Via:

Related:

More details in [WayBack/Archive.is] List of Twitter mute words for your timeline | Hacker News curated comments:

Read the rest of this entry »

Posted in Development, LifeHacker, Power User, SocialMedia, Software Development, Twitter, Web Development | Leave a Comment »

5 days before the Let’s Encrypt’s Root Certificate is expiring!

Posted by jpluimers on 2021/09/24

Only 5 days left to take a close look at both your web-clients (including back-end clients!) and servers to prevent potential Let’s Encrypt mayhem.

Last week, [Wayback] Scott Helme published about [Wayback/Archive.is] Let’s Encrypt’s Root Certificate is expiring!

Let’s Encrypt has done loads of work over the past lustrum to prevent trouble like cross-signing, issuing the successor certificates, and more.

The problem is that people like you and me have refrained from keeping their clients and servers up-to-date, so some security issues will occur. Hopefully they are limited to non-functioning communication and not leaking of data.

It is about this DST Root CA X3 certificate, used by the vast majority of Let’s Encrypt certificates, [Wayback/Archive.is] Certificate Checker: CN=DST Root CA X3, O=Digital Signature Trust Co.:

DST Root CA X3
Certificate Trusted anchor certificate
Subject DN CN=DST Root CA X3, O=Digital Signature Trust Co.
Issuer DN CN=DST Root CA X3, O=Digital Signature Trust Co.
Serial Number 44AFB080D6A327BA893039862EF8406B
Valid  to  Key RSAPublicKey (2048 bit)
SHA1 Hash DAC9024F54D8F6DF94935FB1732638CA6AD77C13 MD5 Hash 410352DC0FF7501B16F0028EBA6F45C5
SKI C4A7B1A47B2C71FADBE14B9075FFC41560858910 AKI

Quoting Scott, these clients likely will fail, so need attention:

  • OpenSSL <= 1.0.2
  • Windows < XP SP3
  • macOS < 10.12.1
  • iOS < 10 (iPhone 5 is the lowest model that can get to iOS 10)
  • Android < 7.1.1 (but >= 2.3.6 will work if served ISRG Root X1 cross-sign)
  • Mozilla Firefox < 50
  • Ubuntu < 16.04
  • Debian < 8
  • Java 8 < 8u141
  • Java 7 < 7u151
  • NSS < 3.26
  • Amazon FireOS (Silk Browser)

On the server side, you can help Android devices by using a Let’s Encrypt certificate that is cross-signed with the ISRG Root X1 certificate [Wayback/Archive.is] Certificate Checker: CN=ISRG Root X1, O=Internet Security Research Group, C=US:

ISRG Root X1
Certificate
Subject DN CN=ISRG Root X1, O=Internet Security Research Group, C=US
Issuer DN CN=DST Root CA X3, O=Digital Signature Trust Co.
Serial Number 4001772137D4E942B8EE76AA3C640AB7
Valid  to  Key RSAPublicKey (4096 bit)
SHA1 Hash 933C6DDEE95C9C41A40F9F50493D82BE03AD87BF MD5 Hash C1E1FF07F9F688498274D1A18053EABF
SKI 79B459E67BB6E5E40173800888C81A58F6E99B6E AKI C4A7B1A47B2C71FADBE14B9075FFC41560858910

Via [Archive.is] Scott Helme on Twitter: “There are only 10 days left until the Let’s Encrypt root certificate expires and there are still questions over what the impact will be! Full details here: …” which links to the above article showing a nice graph of the current Let’s Encrtypt root certificate setup:

–jeroen

Posted in Communications Development, Development, Encryption, https, HTTPS/TLS security, Internet protocol suite, Let's Encrypt (letsencrypt/certbot), Power User, Security, Software Development, TCP, TLS, Web Development | Leave a Comment »

Increase sales: ensure your web-shop is accessible

Posted by jpluimers on 2021/09/01

TL;DR:

  • Inaccessible web-shops cut themselves off from at least 5% customers.
  • Customers with accessibility issues are very loyal, so if your accommodate them, they will stay
  • Accessible web sites cut back on customer support questions (as high as a 15-30% decrease) saving on average EUR 10 per customer support request

Source: Maak webwinkels ook toegankelijk voor mensen met een beperking (behind a sign-in wall, sometimes this link or visiting via the below Twitter posts works)

Via:

 

–jeroen

Read the rest of this entry »

Posted in accessibility (a11y), Development, LifeHacker, Power User, Web Development | Leave a Comment »

html – CSS Display an Image Resized and Cropped – Stack Overflow

Posted by jpluimers on 2021/08/25

[WayBack] html – CSS Display an Image Resized and Cropped – Stack Overflow (thanks [WayBack] roborourke!); see full answer link for runnable snippet and HTML (the WordPress editor keeps fucking up preformatted code blocks with html or XML in it).

You could use a combination of both methods eg.

    .crop {
        width: 200px;
        height: 150px;
        overflow: hidden;
    }

    .crop img {
        width: 400px;
        height: 300px;
        margin: -75px 0 0 -100px;
    }

You embed the img in a div with class .crop, or in-line the styles in the img and div tags.

--jeroen

 

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

html – How can I scale the content of an iframe? – Stack Overflow

Posted by jpluimers on 2021/08/19

I used [WayBack] html – How can I scale the content of an iframe? – Stack Overflow as starting point to scale some iframes.

In my case, I had to scale up (by a 25% so a factor 1.25) instead of scale down.

What I observed so far in recent Chrome versions is:

  1. The wrapping div is still needed, otherwise the outer size and inner size of the frame mismatches
  2. The wrapping div and the wrapped iframe need to have the same dimensions (so unlike the Stack Overflow answers, no need to scale the width/height of the div; keep the same values as the iframe)

The div uses class calendar_wrap.

The iframe uses class calendar_iframe.

This is part of my CSS:

body {
      margin: 0; /* override browser setting for body `margin: 8px;` */
      overflow: hidden; /* remove scroll bars; does not work for iframes  */
    }

    /* ... */

    iframe {
      border-width: 0; /* override browser setting for iframe `border-width: 2px; */
      height: 100vh;
      width:   50vw;
      overflow: hidden; /* remove scroll bars; does not work for iframes  */
    }

     /* wrap and iframe zoom as per https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe */
    .calendar_wrap {
      float: left;

      height: 70vh;
      width:  35vw; /* calc(35vw / 1.25); */

      padding: 0;
      background-color: blue;
    }

    .calendar_iframe {
      float: left;

      width:  35vw;

      -ms-transform: scale(1.25);
      -moz-transform: scale(1.25);
      -o-transform: scale(1.25);
      -webkit-transform: scale(1.25);
      transform: scale(1.25);

      -ms-transform-origin: 0 0;
      -moz-transform-origin: 0 0;
      -o-transform-origin: 0 0;
      -webkit-transform-origin: 0 0;
      transform-origin: 0 0;
    }

    /* ... */

–jeroen

Posted in Chrome, CSS, Development, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »

css color picker – Google Search

Posted by jpluimers on 2021/08/12

Probably old, but there is an embedded [WayBack] css color picker – Google Search that on each refresh switches colours:

–jeroen

Posted in Color (software development), CSS, Development, Google, GoogleSearch, HTML, Power User, Software Development, Web Development | Leave a Comment »

Simple iframe clock via Free Clocks for Your Website

Posted by jpluimers on 2021/08/11

Using [WayBack] Free Clocks for Your Website, I created this clock for a 1920×1080 web dashboard which is a web page hosted on [WayBack] raw.githack.com with an iframe hosted at www.timeanddate.com

I know that is a risk, but that is OK for now: that site has existed for a very long time and probably will last a while.

There is a truckload of options you can use, despite the clock being simple. Luckily the [WayBack] FAQ: Free Clocks for Your Website explains these options.

This is the gist of the above “this clock” page:


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
body {
margin: 0; /* override browser setting for body `margin: 8px;` */
overflow: hidden; /* remove scroll bars; does not work for iframes */
}
.box {
float: left;
width: 100vw; /* Firefox/Chrome outside Mac OS X: force viewport-width */
overflow: hidden; /* remove scroll bars; does not work for iframes */
background-color: azure;
}
iframe {
border-width: 0; /* override browser setting for iframe `border-width: 2px; */
height: 100vh;
width: 50vw;
}
.clock_iframe {
float: right;
height: 30vh;
width: 16vw;
}
</style>
<title>Clock in frame</title>
</head>
<body>
<div class="box">
<iframe class="clock_iframe" src="https://freesecure.timeanddate.com/clock/i6xvy9ve/n16/szw300/szh300/hoc000/cf100/hgr0/fiv0/fas34/fdi74/mqv0/mhc000/mhs3/mhl20/mhw1/mhd84/mmv0/hhs1/hms1/hsc000/hss1&quot; frameborder="0" width="300" height="300">
<!– https://www.timeanddate.com/clocks/free.html –>
</iframe>
</div
</body>
</html>

view raw

simple-large-clock.html

hosted with ❤ by GitHub

–jeroen

Posted in CSS, Development, HTML, Power User, Software Development, Web Development | Leave a Comment »

Where my tweet about testing in production gained me knowledge about the Covid QR code systems

Posted by jpluimers on 2021/07/06

Even though RIVM twitter-care did not respond at all on my raised issue that the production environment leaded an acceptation environment URL, it did gain me some knowledge on their systems and the (then upcoming) European QR code systems.

[Archive.is] Jeroen Wiert Pluimers on Twitter: “Onhandig op de #CoronaCheck site van het @rivm de link hier (1) wijst nog naar de acceptatie omgeving en daar heb je authorisatie voor nodig. Zonder “.acc” werkt het ook niet: (2) Dit werkt wel: (3) CC @locuta… “

  1. web.acc.coronacheck.nl/nl/faq/1-6-welke-informatie-staat-in-mijn-qr-code/
  2. web.coronacheck.nl/nl/faq/1-6-welke-informatie-staat-in-mijn-qr-code/
  3. coronacheck.nl/nl/faq/1-6-welke-informatie-staat-in-mijn-qr-code/

The problem digging into it was that it only reproduces when inside the [Archive.is] Coronacheck Print Portaal after you have logged on via DigiD, so you cannot save it in the WayBack machine nor Archive.is.

This print portal isn’t a straightforward hierarchy of web-pages, but an actual Vue.js app that injects itself into [Wayback/Archive.is] nl-covid19-coronacheck-website/index.html at main · minvws/nl-covid19-coronacheck-website and dynamically changes the URL depending on the application state.

It also means that you cannot archive pages like coronacheck.nl/nl/print/vaccinatie-ophalen or coronacheck.nl/nl/print/keuze-papieren-bewijs as the Vue.js app will not understand state from those sub-URLs and go back to coronacheck.nl/nl/print/

The only other results of [Wayback] “acc.coronacheck.nl” – Google Search were:

Acceptance URLs in production

I had a hunch the CoronaCheck code would be open source, though finding it through the most obvious [Wayback] open source coronacheck app – Google Search failed. Since the web-site and app look very similar to the CoronaMelder web-site and app, I tried [Wayback] open source coronamelder app – Google Search and found the page with links: [Wayback] Colophon – Stop the spread of the coronavirus, download CoronaMelder.

Note that [Wayback] Open-Source Project Corona-Warn-App is a different beast. Though internationally available and released way earlier than the Dutch apps, the Dutch government has a huge ego (maybe even abbreviatable to Hugo) resulting in severe “not invented here” syndrome despite having had to be bailed out when “code black” happened in hospitals.

One thing that I learned is that there is one version of the code behind coronacheck.nl/nl/print/print-vaccinatie in the main branch of github.com/minvws/nl-covid19-coronacheck-website that has only acceptance URLs. They are in these locations:

Apparently, replacing these with production URLs is done during deployment, but I could not find the code that does it in the main repositories at [Wayback] github.com/minvws

European Corona/COVID-19 Green Pass QR certificate

One answer to my tweet was [Archive.is] Joel Haasnoot on Twitter: “gir.st/blog/greenpass.html… “ which provides more information on the European

These are the links I thought were interesting:

–jeroen

Read the rest of this entry »

Posted in Development, JavaScript/ECMAScript, Scripting, Software Development, Vue.js, Web Development | Leave a Comment »

« Previous Entries
Next Entries »