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

Archive for the ‘HTML’ Category

Bridgy Fed – bridges to/from BlueSky, Fediverse (including Mastodon) and many web-sites

Posted by jpluimers on 2025/01/29

I bumped into [Wayback/Archive] Bridgy Fed a while ago. The highlights:

Source is written in Python and HTML. It is available from [Wayback/Archive] GitHub – snarfed/bridgy-fed: 🌉 A bridge between decentralized social network protocols.

The blog post re-introducing it: [Wayback/Archive] Re-introducing Bridgy Fed | snarfed.org.

There is docs too: [Wayback/Archive] Bridgy Fed: docs

Bridgy Fed is a kind of a spin-off from the longer existing [Wayback/Archive] Bridgy which has documentation at [Wayback/Archive] About – Bridgy and source code at [Wayback/Archive] GitHub – snarfed/bridgy: 📣 Connects your web site to social media. Likes, retweets, mentions, cross-posting, and more….

Via [Wayback/Archive] Ionica Smeets (@ionica.mathstodon.xyz.ap.brid.gy) — Bluesky who’s primary social media presence is at [Wayback/Archive] Ionica Smeets (@ionica@mathstodon.xyz) – Mathstodon.

I created my [Wayback/Archive] wiert.me profile – Bridgy Fed which resulted in these two entities (that by the time you read this should have some updates):

--jeroen

Posted in Blogging, BlueSky, Development, Fediverse, HTML, Mastodon, Python, Scripting, SocialMedia, Software Development, Web Development | Leave a Comment »

A truckload of links which I need for some Bookmarklets work

Posted by jpluimers on 2024/12/31

A while ago, browser tabs were overflowing again so I first mad the list of links with quotes below, then discovered there is a template for many browser tabs open at [Wayback/Archive] To many browser tabs open Meme Generator – Imgflip

One of the reasons is that the WordPress “Press This” bookmarklet is very slow and also flaky at escaping HTML (for instance the below html – Why shouldn’t &amp;apos; be used to escape single quotes? – Stack Overflow sometimes becomes html – Why shouldn’t <code>'</code> be used to escape single quotes? – Stack Overflow in [Wayback/Archive] Press This – WordPress plugin | WordPress.org especially when running it from Archive Today archived pages).

So here we go: Read the rest of this entry »

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

Markdown has been the Internet’s lingua franca for documentation. Microsoft finally the documentation format with markitdown: Python tool for converting files and office documents to Markdown.

Posted by jpluimers on 2024/12/17

Finally an easier way to convert Office documents (and other formats) to markdown: [Wayback/Archive] GitHub – microsoft/markitdown: Python tool for converting files and office documents to Markdown. (after Google added a Markdown export feature to Google Docs about half a year ago, and basic Markdown formatting about 2 years ago – see below):

There are quite a few dependencies in [Wayback/Archive] markitdown/pyproject.toml at main · microsoft/markitdown · GitHub, so be prepared for that.

Supported formats (added links for clarity):

The MarkItDown library is a utility tool for converting various files to Markdown (e.g., for indexing, text analysis, etc.)
It presently supports:
  • PDF (.pdf)
  • PowerPoint (.pptx)
  • Word (.docx)
  • Excel (.xlsx)
  • Images (EXIF metadata, and OCR)
  • Audio (EXIF metadata, and speech transcription)
  • HTML (special handling of Wikipedia, etc.)
  • Various other text-based formats (csv, json, xml, etc.)

Google was first though:

  1. [Wayback/Archive] Google Workspace Updates: Compose with Markdown in Google Docs on web
  2. [Wayback/Archive] Google Workspace Updates: Import and export Markdown in Google Docs

There is speculation on why Microsoft introduced it just now ranging from “they need it for AI training” to “just late to the game”. I’m with the latter. Apple is even later, so if you want to convert Apple Notes to markdown, then you can use [Wayback/Archive] Import from Apple Notes – Obsidian Help.

Via various sources, including:

Read the rest of this entry »

Posted in CSV, Development, Excel, HTML, HTML5, JSON, Lightweight markup language, MarkDown, Office, PDF, Power Point, Power User, Software Development, Word, XML/XSD | Tagged: , | Leave a Comment »

Some links and notes as I want to write a Bookmarklets to help resize HTML images

Posted by jpluimers on 2024/12/17

Probably not fully the direction I need to search to (main goal is to interactively edit img tag attributes (basic and style) to manipulate the appearance of pictures in my blog), but should do for now:

Read the rest of this entry »

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

How To Scale and Crop Images with CSS object-fit | DigitalOcean

Posted by jpluimers on 2024/12/11

[Wayback/Archive] How To Scale and Crop Images with CSS object-fit | DigitalOcean helped me to crop the picture in Florian Haas on Twitter: alias kubectl=”TZ=Etc/UTC kubectl”; You’re welcome.

The picture itself is 800 * 800 pixels (width * height), but the interesting bits are 400 * 200 around the center. Also it is a lot larger than I wanted.

So I embedded it using this HTML

<img class="alignnone size-full" style="width: 200px; height: 100px; object-fit: cover; object-position: 0 50%;" src="https://archive.ph/frSNu/0f0ebeeb5a4edf048577be89adb866344b303394.jpg" alt="" />

The width made it 25% the original size (because of [Wayback/Archive] object-fit value cover), and half the height so I had to move the [Wayback/Archive]object-position up 50%.

I found this via [Wayback/Archive] image inline css to crop top and bottom – Google Search.

That also found [Wayback/Archive] html – while display image crop Top and Bottom of image using css – Stack Overflow with an example at [Wayback/Archive] Edit fiddle – JSFiddle – Code Playground which is similar to the above solution.

--jeroen

 

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

Online Paste to Markdown (in JavaScript + HTML)

Posted by jpluimers on 2024/10/08

Apparently I was living under a stone since the 2015 introduction of [Wayback/Archive] Paste to Markdown:

Paste to Markdown

Instructions

  1. Find the text to convert to Markdown (e.g., in another browser tab)
  2. Copy it to the clipboard (Ctrl+C, or ⌘+C on Mac)
  3. Paste it into this window (Ctrl+V, or ⌘+V on Mac)
  4. The converted Markdown will appear!

The conversion is carried out by to-markdown, a Markdown converter written in JavaScript and running locally in the browser.

The “to-markdown” I did already know (see A few HTML to Markdown converters written in javascript, Python, Ruby, PHP and C#) but has been renamed from [Wayback/Archive] GitHub – domchristie/to-markdown: An HTML to Markdown converter written in JavaScript into then “turndown” repository below.

More links:

Read the rest of this entry »

Posted in Development, HTML, JavaScript/ECMAScript, Lightweight markup language, MarkDown, Scripting, Software Development, Web Development | Leave a Comment »

Fixing the Google Calendar item editor CSS so the title 40% of my window width

Posted by jpluimers on 2024/10/08

When working on larger screens, I am always amazed at how little window estate most web sites actually use.

For sites that just try to look nice that is not so much or a problem, but for productivity sites it is.

The go-to solution for this is to manually modify the CSS. This can often be a pain because the CSS is either deeply nested or – even worse – uses semi-random HTML class attribute values.

This post is a reminder to myself to check if the below CSS modification in my Stylus library still works (gist link is at the bottom of this post):

Read the rest of this entry »

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

Reminder to self write a JavaScript NoDrives encoder/decoder on a web-page

Posted by jpluimers on 2024/10/01

A long time ago, I wrote about How to hide an entire drive from prying eyes on Windows 10 | Windows Central.

The easiest way is still to add/modify a NoDrives value in the Registry, but regrettably [WayBackNT Drive Calculator – The ‘NoDrives’ Registry Key Value Calculator is down (it was a server-side solution, so the WayBack Machine link does display a page, but the calculator does not function).

My use case is that I have an existing NoDrives value that I want to update (as there have been one or more drive letters added/changed).

Read the rest of this entry »

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

string – Check if MyString[1] is an alphabetical character? – Stack Overflow (and how Embarcadero broke one of the product version neutral redirects)

Posted by jpluimers on 2024/09/24

Quite a while ago [Wayback/Archive] string – Check if MyString[1] is an alphabetical character? – Stack Overflow asked by [Wayback/Archive] User Jeff was answered by [Wayback/Archive] Andreas Rejbrand:

The simplest approach is

function GetAlphaSubstr(const Str: string): string;
const
  ALPHA_CHARS = ['a'..'z', 'A'..'Z'];
var
  ActualLength: integer;
  i: Integer;
begin
  SetLength(result, length(Str));
  ActualLength := 0;
  for i := 1 to length(Str) do
    if Str[i] in ALPHA_CHARS then
    begin
      inc(ActualLength);
      result[ActualLength] := Str[i];
    end;
  SetLength(Result, ActualLength);
end;

but this will only consider English letters as “alphabetical characters”. It will not even consider the extremely important Swedish letters Å, Ä, and Ö as “alphabetical characters”!

Slightly more sophisticated is

function GetAlphaSubstr2(const Str: string): string;
var
  ActualLength: integer;
  i: Integer;
begin
  SetLength(result, length(Str));
  ActualLength := 0;
  for i := 1 to length(Str) do
    if Character.IsLetter(Str[i]) then
    begin
      inc(ActualLength);
      result[ActualLength] := Str[i];
    end;
  SetLength(Result, ActualLength);
end;

Back in 2011 I added a comment that for more than a decade would redirect to the most current documentation on the IsLetter method:

+1 for using IsLetter which checks the Unicode definition for being a letter or not [Wayback] docwiki.embarcadero.com/VCL/en/Character.TCharacter.IsLetter

Back then, Delphi X2 was current, so it would redirect

  1. from [Wayback] http://docwiki.embarcadero.com/VCL/en/Character.TCharacter.IsLetter
  2. to [Wayback] http://docwiki.embarcadero.com/VCL/XE2/en/Character.TCharacter.IsLetter
  3. then to [Wayback] http://docwiki.embarcadero.com/VCL/XE2/en/Character.TCharacter.IsLetter
  4. ending at [Wayback] http://docwiki.embarcadero.com/Libraries/XE2/en/System.Character.TCharacter.IsLetter

After a long outage in 2022 (see The Delphi documentation site docwiki.embarcadero.com has been down/up oscillating for 4 days is now down for almost a day.) only the Alexandria help was restored.

This killed the above redirect.

Luckily [Wayback/Archive] George Birbilis noticed that and commented this:

@JeroenWiertPluimers the correct link now is: docwiki.embarcadero.com/Libraries/Alexandria/en/…

In order to refer to the most recent Delphi version, now you have to use [Wayback] http://docwiki.embarcadero.com/Libraries/en/System.Character.TCharacter.IsLetter.

This redirects:

  1. via [Wayback] http://docwiki.embarcadero.com/Libraries/Alexandria/en/System.Character.TCharacter.IsLetter to
  2. to [Wayback] https://docwiki.embarcadero.com/Libraries/Alexandria/en/System.Character.TCharacter.IsLetter

The above breaks the help integration from older Delphi products which is bad. It is also bad because it makes it harder to port legacy Delphi code to more modern Delphi versions.

Hopefully the above gives you a bit insight how the docwiki help system was designed and what is left of that design.

–jeroen

Posted in Communications Development, Conference Topics, Conferences, Delphi, Development, Encryption, Event, HTML, HTTP, https, HTTPS/TLS security, Internet protocol suite, Power User, Security, Software Development, TCP, TLS, Web Development | Leave a Comment »

View DOM Source bookmarklet

Posted by jpluimers on 2024/09/12

This is cool as it shows the page source not as it was first loaded, but from how it is currently rendered which includes all post-load modifications by any scripts: [Wayback/Archive] View DOM Source bookmarklet.

Via [Wayback/Archive] Martin Splitt on Twitter: “I made a bookmarklet to view the rendered source (aka the DOM) of a page. 👀 🚀 Works with Chrome, Firefox, Safari and possibly others, too. 🌈 Beautifies the code 🎨 Includes syntax highlighting 💻 Get the bookmarklet at 👉 experiments.geekonaut.de/view-dom-source 👈”

Read the rest of this entry »

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