The Wiert Corner – irregular stream of stuff

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

  • My badges

  • Twitter Updates

  • 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 ‘JavaScript/ECMAScript’ Category

eidam/cf-workers-status-page: Monitor your websites, showcase status including daily history, and get Slack/Telegram/Discord notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage.

Posted by jpluimers on 2022/07/26

Cool: [Wayback/Archive.is] eidam/cf-workers-status-page:

Monitor your websites, showcase status including daily history, and get Slack/Telegram/Discord notification whenever your website status changes. Using Cloudflare Workers, CRON Triggers, and KV storage

Will try this out in a while, hopefully before this actually reaches the front of the blog article queue (:

Via: [Wayback/Archive.is] Status Page – Scott Helme (via [Archive.is] Scott Helme on Twitter: “And yes, I’m also nervously watching my own status page 😅 …”).

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

–jeroen

Posted in CSS, Development, JavaScript/ECMAScript, Scripting, Software Development, Web Development | Leave a Comment »

Converting inline svg xml to png

Posted by jpluimers on 2022/07/19

A while ago, I had a web page showing the logo as inline svg xml code.

Edit 20231209: [Wayback/Archive] Render SVG to PNG: Edit fiddle – JSFiddle – Code Playground (explained in [Wayback/Archive] html – Convert embedded SVG to PNG in-place – Stack Overflow by [Wayback/Archive] User anatoly techtonik – Stack Overflow) works way better than the InfoHeap link:

  1. Replace the svg element in it (but keep the id="inputSvg" attribute!),
  2. Run the fiddle,
  3. Save the rendered PNG file by right-clicking the “PNG (Save link as..)” link then saving the file.

Original content

It took a while to find a place to convert that on-line: [Wayback/Archive.is] inline svg xml to png – online html sandbox – InfoHeap (via [Wayback/Archive.is] Convert svg xml text to png image using canvas – InfoHeap):

The solution is a bit of JavaScript (quoted below) that you can run-online: modify the svg bit in it, then run it, scroll down in the result and verify if the canvas fits (when not: adapt the canvas side, then re-run).

The svg xml code needs to be all on one line, so remove any line breaks in it before running.

I have tested it in Chrome, but it should work in non-Chromium browsers like Firefox as well.

The inner workings of the JavaScript conversion code is explained in [Wayback/Archive.is] html – Convert embedded SVG to PNG in-place – Stack Overflow with more demo code at [Archive.is] Rasterizing In-Document SVG (thanks [Wayback] Phrogz!).

Related: [Archive.is] Jeroen Wiert Pluimers on Twitter: “Nieuwe logo, oude logo. Vrijwel alle werknemers werden een halve dag naar huis gestuurd om ruimte te maken voor de genodigden voor de zodat die de introductie van naam en logo konden bijwonen. Heel goed om verbinding te verliezen met je echte doelgroep. … “

Provalu logo

MareGroep logo

--jeroen



<div id="diagram_image">
<svg id="inputSvg" xmlns="http://www.w3.org/2000/svg&quot; xmlns:inkspace="http://www.inkscape.org/namespaces/inkscape&quot; xmlns:xlink="http://www.w3.org/1999/xlink&quot; viewBox="0 0 640 120">
<defs id="defs_block">
<filter height="1.504" id="filter_blur" inkspace:collect="always" width="1.1575" x="-0.07875" y="-0.252">
<feGaussianBlur id="feGaussianBlur3780" inkspace:collect="always" stdDeviation="4.2" />
</filter>
</defs>
<title>blockdiag</title>
<desc/>
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="67" y="46" />
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="259" y="46" />
<rect fill="rgb(0,0,0)" height="40" stroke="rgb(0,0,0)" style="filter:url(#filter_blur);opacity:0.7;fill-opacity:1" width="128" x="451" y="46" />
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="64" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="128" y="66">discovery</text>
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="256" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="320" y="66">execution</text>
<rect fill="rgb(255,255,255)" height="40" stroke="rgb(0,0,0)" width="128" x="448" y="40" />
<text fill="rgb(0,0,0)" font-family="sans-serif" font-size="11" font-style="normal" font-weight="normal" text-anchor="middle" textLength="55" x="512" y="66">reporting</text>
<path d="M 192 60 L 248 60" fill="none" stroke="rgb(0,0,0)" />
<polygon fill="rgb(0,0,0)" points="255,60 248,56 248,64 255,60" stroke="rgb(0,0,0)" />
<path d="M 384 60 L 440 60" fill="none" stroke="rgb(0,0,0)" />
<polygon fill="rgb(0,0,0)" points="447,60 440,56 440,64 447,60" stroke="rgb(0,0,0)" />
</svg>
</div>
<img id="outputPngImage" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4
//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=="/>
<span id="outputPngLinkSpan">
<a href="">PNG (Save link as..)</a>
</span>

view raw

page-body.html

hosted with ❤ by GitHub


class SVGtoPNGDataURL {
constructor() {
this.canvas = document.createElement('canvas'); // Not shown on page
this.canvas2DContext = this.canvas.getContext('2d');
this.loaderImage = new Image; // Not shown on page
}
// Generate PNG data URL from SVG and send it to callback function when ready
go(svgElement, dataUrlCallback) {
var svgAsXML = (new XMLSerializer).serializeToString( svgElement );
this.loaderImage.width = this.canvas.width = svgElement.clientWidth;
this.loaderImage.height = this.canvas.height = svgElement.clientHeight;
var self = this;
this.loaderImage.onload = function() {
self.canvas2DContext.drawImage( self.loaderImage, 0, 0, self.loaderImage.width, self.loaderImage.height );
dataUrlCallback(self.canvas.toDataURL());
};
this.loaderImage.src = 'data:image/svg+xml,' + encodeURIComponent( svgAsXML );
}
};
var converter = new SVGtoPNGDataURL();
var inputSvgElement = document.querySelector('#inputSvg'), // Inline SVG element
outputPngImage = document.querySelector('#outputPngImage'), // Where to draw the result
outputPngLink = document.querySelector('#outputPngLinkSpan a');
converter.go(inputSvgElement, dataUrlCallback=function(dataURL) {
outputPngImage.src = dataURL;
outputPngLink.href = dataURL;
});

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

Automatically reload page in Chrome without plugin – Super User

Posted by jpluimers on 2022/07/14

Below is a cool solution to refresh a page using a bookmarklet is to embed it into an iframe, then automatically reload it every interval.

It for instance works for the [Wayback/Archive.is] Woonveilig and often in Fritz!Box environments.

[Wayback] Jon described the below method as a solution for his own question, 6 years after asking it in [Wayback/Archive.is] Automatically reload page in Chrome without plugin – Super User.

So I made this a bookmark:


javascript:document.getElementsByTagName("body")[0].innerHTML = "<iframe id=\"testFrame\" src=\""+window.location.toString()+"\" style=\"position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%;\"><\/iframe>";reloadTimer = setInterval(function(){ document.getElementById("testFrame").src=document.getElementById("testFrame").src },5*60*1000)

(it is in a gist as the WordPress editors keep killing the embedded html code, despite it being escaped within <code> tags.

–jeroen

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

Getting meta data from an image URL – JSFiddle – Code Playground (not sure why it fails on the Chrome console)

Posted by jpluimers on 2022/06/28

It works as a [Wayback/Archive.is] Edit fiddle – JSFiddle – Code Playground.

And it fails on the Google Chrome console:

GET https://anniversary.archive.org/files/2021/07/October-2001-Google-Drive-7-19-2021-3-24-49-PM-768x276.png net::ERR_FAILED

The code is from [Wayback/Archive.is] javascript – Get width height of remote image from url – Stack Overflow (which has many more sync and async code examples that all fail in the same way, not sure why).

Glad the JSFiddle one works.

Via: [Wayback] get image dimensions from url – Google Search

–jeroen

Posted in Development, JavaScript/ECMAScript, JSFiddle, Scripting, Software Development, Web Development | Leave a Comment »

The Delphi documentation site docwiki.embarcadero.com has been down/up oscillating for 4 days is now down for almost a day.

Posted by jpluimers on 2022/03/08

The [Wayback/Archive] Embarcadero/IDERA Documentation Wiki has been mostly down since March 3rd, 2022 (not the main page, but almost all other pages are).

I modified [Wayback/Archive] Docwiki https – EmbarcaderoMonitoring to show the actual status of a deeper page as the (mostly static) top page is up, so monitoring that is useless as the deeper pages are down.

The deeper pages are dynamic and require a functioning MySQL database connection. That connection is mostly down (the error message is not clear, so this could be a network or a database server problem, or maybe even a loadbalancer gradually entering bit heaven).

Since it had been down for like 6 days in February*, I’d expect Idera to keep an eye on it and prepare for more downtime. Apparently that’s either not a 24×7 thing for them or  they missed the “pre” in preparation as it is dead-silent on .

It also runs on an unsupported version of Mediawiki 1.31** which by itself does not explain the outage, but does indicate that their idea of handling their internal lifetime management is different than what they advocate to clients in their software subscription model, see [Wayback/Archive] Delphi – Embarcadero store, [Wayback/Archive] Update Subscription – Embarcadero and [Wayback/Archive] Special Offers on RAD Studio, Delphi & C++Builder – Embarcadero:

Read the rest of this entry »

Posted in *nix, Bookmarklet, Delphi, Development, JavaScript/ECMAScript, Lightweight markup language, MediaWiki, Monitoring, Power User, Scripting, SocialMedia, Software Development, Twitter, Uptimerobot, Web Browsers | Leave a Comment »

I consider stealing the user’s time because of a bad UX design among the Dark Patterns

Posted by jpluimers on 2022/02/22

I an with [Wayback] Craig Buckler to consider Dark Patterns being wider than the strict sense.

For me anything that costs a user extra time or makes accessibility harder is a Dark Pattern.

So I agree with the issues he explains at [Wayback] The Web’s Most Annoying Dark Patterns – SitePoint

Does the web delight or displease you? Craig lists his least favourite UI and marketing dark patterns. Have you developed on the dark side?

Paste is enabled, but does not function

Paste is enabled, but does not function

A while ago, I got into one myself. Let me explain.

Having had RSI, I’m dependent on keeping my hands and arms in good shape. This means minimising the use of pointing devices and also trying to minimise typing.

In addition, I have heavily segmented my use of email addresses (among others for cutting down SPAM). Basically any point of contact gets a new email address.

This means I realy on tooling like password managers and email address generators. It means copying and pasting information.

So I bumped into a web-site that disallowed pasting the (unique and long!) email address into the email verification field.

[Archive.is] Jeroen Wiert Pluimers on Twitter: “The @olvg #mijnOLVG site is now on my Dark Patterns list as they make #accessibility harder by blocking pasting into the email address verification field. Blocking the paste-blocker. CC some people advocating mijnolvg.nl @MauricevdBosch @ronklitsie63 @kyntha”

Despite the popup menu, paste didn’t work. Chrome autofill did, but didn’t have the information for this particular (new and unique) email address yet, so could not be used yet.

Disabling the paste block

It is relatively easy to disable a paste block. In this case, I was using chrome, but this can be done with any browser. Some browsers even have optional extensions that can do this for you.

In the case of Chrome, when right clicking, there is an “Inspect” option

Inspect is enabled and actually works.

Inspect is enabled and actually works.

It inspects the current element, which on this site looks like this:

The element does not contain event handlers. But the code hooks them behind our backs.

The element does not contain event handlers. But the code hooks them behind our backs.

On the “Event Listeners” tab on the right, you can see there are two JavaScript methods hooked to the paste handler:

The paste handlers. The first is OK, the second blocks paste.

The paste handlers. The first is OK, the second blocks paste.

The first one is OK, though I did not really look into what the proxy does.

Second paste event handler: remove this one.

First paste event handler: keep this one.

First paste event handler: keep this one.

The second is not OK, as it effectively prevents the event from being handled any further at all by calling preventDefault

Second paste event handler: remove this one.

Second paste event handler: remove this one.

By clicking on the second Remove button above, the paste blocker is gone and you can paste again.

–jeroen

Read the rest of this entry »

Posted in Chrome, Chrome, Dark Pattern, Development, Google, JavaScript/ECMAScript, Power User, Scripting, Software Development, User Experience (ux), Web Browsers | Leave a Comment »

Archive.is is more like a thread unroll service than an archival service

Posted by jpluimers on 2022/02/14

An interesting take a while ago on [Wayback] Archive.is blog — People often compare various features of…

People often compare various features of archive.is to those of archive.org being mistaken by name similarity (and recently added “save a page” function to archive.org).

This project is different in at least two respects:

  1. We have no goal to save the entire Internet. Only manually submitted pages which may be deleted/altered soon. We are about 100x smaller than archive.org in the storage space (700TB vs. 70PB) and expenses (X,000 $/mo vs. X00,000 $/mo).
  2. The pages are not saved in their network form. Archive.today launches real browsers (not even headless) and tries to load lazy images, unroll folded content, login into accounts if prompted with login form, remove “subscribe our maillist” modals, … So archive.today is not suitable for making notarized or digitally signed snapshots.

It would be more correct to compare it with other thread unrollers.

The RSS feed of blog.archive.today is at blog.archive.today/rss

Read the rest of this entry »

Posted in archive.is / archive.today, Bookmarklet, Conference Topics, Conferences, Development, Event, Internet, InternetArchive, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers | Leave a Comment »

Chrome debugging tip: disabling framework/library code (from Minko Gechev on Twitter)

Posted by jpluimers on 2022/02/03

Cool tip: [Archive.is] Minko Gechev on Twitter: “Tooling tip: When debugging, you can prevent stepping into framework/library code by using blackboxing. In @ChromeDevTools: ‣ Open the script you don’t want to enter ‣ Right click → Blackbox ‣ Pain free debugging ✨… “

–jeroen

Read the rest of this entry »

Posted in Development, JavaScript/ECMAScript, Scripting, Software Development, TypeScript | Leave a Comment »

Google Open Source Insights (hopefully by now more than just npm/golang/maven)

Posted by jpluimers on 2022/02/02

Interesting project at [Wayback] Open Source Insights

Open Source Insights is an experimental project by Google.

Hopefully by now it is supporting more than just npm/golang/maven and by the time it sunsets, other projects take over.

The introduction was some 9 months ago: [Wayback] Introducing the Open Source Insights Project | Google Open Source Blog

Via:

–jeroen

Posted in Development, Go (golang), JavaScript/ECMAScript, Node.js, Power User, Scripting, Security, Software Development | Leave a Comment »

Twitter: find my new-style retweets that have images

Posted by jpluimers on 2022/01/11

This gets the tweets I retweeted and have images in them:

from:@jpluimers filter:images filter:nativeretweets

Based on:

  • [Wayback] twitter – How do I find my retweets of a certain account? – Web Applications Stack Exchange
    from:@someone filter:nativeretweets [KEYWORD(s)]
    

    This shows all retweets of @someone (including the optional KEYWORD(s)). If you retweeted the same tweet you can use @yourtwittername instead of @someone.

  • This article gives you a robust overview of everything you need to know about advanced TweetDeck features.[Wayback] About advanced TweetDeck features

    To search for mentions of #space from verified accounts, excluding Retweets, type the following in the search box: #space filter:verified -filter:nativeretweets

  • [Wayback] Difference between -filter:retweet and -filter:nativeretweets in Twitter Search API 1.1 – Stack Overflow

    I believe per TweetDeck documentation (https://support.twitter.com/articles/20170322) this is the difference:

    filter:nativeretweets shows retweets from users who have hit the retweet button. filter:retweets shows old style retweets (“RT”) + quoted tweets.

    Those are filtering FOR those types of results, but as you’ve done, the – is necessary to filter them out -filter:nativeretweets or -filter:retweets

  • [Wayback/Archive.is] Twitter API 1.1 tweets / favorites (likes) / following / followers backup in web browser
    /* Twitter API 1.1 tweets / favorites (likes) / following / followers backup in web browser
     * Get your access keys to use Twitter API 1.1: https://dev.twitter.com/docs/auth/tokens-devtwittercom
     * You can change Twitter API URL and Twitter screen_name, then execute script from a trusted web page without CSP protection like about:blank in a web browser console (F12 or Ctrl+Shift+K shortcut)
     * A textarea will appear so you can copy/paste to save data as a CSV file or search tweets / users in your web browser (Ctrl+F shortcut)
     * You can then view your backup in a spreadsheet editor like LibreOffice Calc
     * You can also compare the backup with another one to see who unfollowed you, who changed their Twitter username by looking at the user ID or which tweet you retweeted / favorited was deleted (e.g. with the Linux diff command)
     * 
     * Note about the tweets backup:
     * Usually you will search tweets that you retweeted using Twitter web version (https://twitter.com/search) with a search like "from:your_username filter:nativeretweets keyword"
     * But it is limited to the retweets of the last 7 days, like for the free version of the search API (https://developer.twitter.com/en/docs/tweets/search/overview/standard)
     * An alternative is to search tweets in your user timeline with this script but it is limited to your last 3200 tweets (including retweets and replies)
     * This script can be combined with the Twitter feature to backup data, which is not limited to your last 3200 tweets but you can only request a backup every 30 days
     * To find tweets that you retweeted or favorited / liked from a specific person, you can open the CSV file with LibreOffice Calc, click on the column you want to search and press Ctrl+H to search a username
    */

–jeroen

Posted in Development, JavaScript/ECMAScript, Power User, Scripting, SocialMedia, Software Development, Twitter | Leave a Comment »