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

Archive for the ‘Web Development’ Category

The browser wars that started on iOS (forcing Safari) and Android (forcing Chrome) now are continued on Windows 11 (forcing Edge)

Posted by jpluimers on 2021/10/05

Via:

 

Posted in Awareness, Development, HTTP, Internet protocol suite, Software Development, TCP, TLS, URI, Web Development | Leave a Comment »

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.isLet’s Encrypt’s Root Certificate is expiring! message by [WaybackScott 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>

–jeroen

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