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:
Archive for the ‘HTML’ Category
Some links and notes as I want to write a Bookmarklets to help resize HTML images
Posted by jpluimers on 2024/12/17
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
Share this:
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
- Find the text to convert to Markdown (e.g., in another browser tab)
- Copy it to the clipboard (
Ctrl+C, or⌘+Con Mac)- Paste it into this window (
Ctrl+V, or⌘+Von Mac)- 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:
Share this:
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):
Share this:
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 [WayBack] NT 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).
Share this:
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
IsLetterwhich 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
- from [Wayback] http://docwiki.embarcadero.com/VCL/en/Character.TCharacter.IsLetter
- to [Wayback] http://docwiki.embarcadero.com/VCL/XE2/en/Character.TCharacter.IsLetter
- then to [Wayback] http://docwiki.embarcadero.com/VCL/XE2/en/Character.TCharacter.IsLetter
- 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:
- via [Wayback] http://docwiki.embarcadero.com/Libraries/Alexandria/en/System.Character.TCharacter.IsLetter to
- 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
Share this:
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 👈”
Share this:
Posted in Bookmarklet, CSS, Development, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »
GitHub – AnswerDotAI/fasthtml: The fastest way to create an HTML app
Posted by jpluimers on 2024/09/11
The HTMX based [Wayback/Archive] GitHub – AnswerDotAI/fasthtml: The fastest way to create an HTML app
FastHTML is a new next-generation web framework for fast, scalable web applications with minimal, compact code. It’s designed to be:
- Powerful and expressive enough to build the most advanced, interactive web apps you can imagine.
- Fast and lightweight, so you can write less code and get more done.
- Easy to learn and use, with a simple, intuitive syntax that makes it easy to build complex apps quickly.
FastHTML apps are just Python code, so you can use FastHTML with the full power of the Python language and ecosystem.
Could this be something for me?
Via [Wayback/Archive] Erik Meijer on X: “Reverse selling in full action.”
Share this:
Posted in Deployment, Development, HTML, htmx, Python, Scripting, Software Development, Web Development | Leave a Comment »
Belastingaangifte 2023 met Excel gratis downloaden | Computer Idee
Posted by jpluimers on 2024/08/27
Dit jaar was ik er een paar dagen eerder bij dan vorig jaar: meer rust in mijn hoofd na de verhuizing en een betere planning gemaakt rondom de paardrijvakantie van mijn verstandelijk beperkte broer (waar we altijd zorgen daar in de buurt te zijn zodat we indien nodig snel ter plaatse kunnen handelen).
Waarom is deze blog post zo laat?
Het laat heeft er vooral mee te maken dat deze Excel sheet meestal nog een aantal wijzigingen krijgt na de normale deadline van 1 mei. Dus ik begin pas met downloaden de maand voor de echt harde deadline van 1 september.
Waarom dan toch nu de post?
Eigenlijk is dat heel simpel: vooral zodat je kunt zien hoe je aan deze informatie komt ook al wijzigen de locaties: waar vorig jaar het Excel-bestand voor de belastingaangifte nog bij Google stond, staat het deze keer bij WeTransfer.
Dit jaar zijn de linkjes her en der dus behoorlijk anders: meer dan een simpele vervanging van 2022 door 2023 in de start-link van de eerste Google Search onderaan mijn blog-post.
Let ook op (dit vergat ik vorig jaar te vermelden): dit Excel bestand werkt bij mij niet op Office voor MacOS.
Omdat Computer Idee meestal geen jaartallen in de titels van hun artikelen gebruikt, moet je handmatig de zoekresultaten van Google Search door om te zien welke relevant voor aangifte over afgelopen jaar (in dit geval 2023) is/zijn. Vandaar dat ik hieronder op een aantal plekken jaartellen heb toegevoegd:
Share this:
Posted in Development, Excel, HTML, Office, Power User, Software Development, Web Development | 2 Comments »
How to apply border inside a table ? – GeeksforGeeks
Posted by jpluimers on 2024/06/20
It is deprecated but still works and an easy way to quickly set the inner borders of an HTML table: use the rules attribute.
- [Wayback/Archive] How to apply border inside a table ? – GeeksforGeeks
Only Using HTML: In this case, we will use rules attribute of table. Rules is the attribute in HTML table which allows user to display only inside borders of the table which can be chosen among only rows, cols or all.
Share this:
Posted in Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 