Archive for the ‘CSS’ Category
Posted by jpluimers on 2025/07/24
Very cool web site that I only discovered last year, with the clever name: [Wayback/Archive] Wakamai Fondue, the tool that answers the question “what can my font do?”
Drop a font!
Fonts aren’t uploaded,
they stay on your computer
Back then I used it to investigate some properties of SMuFL (Standard Music Font Layout) fonts as sometimes editing a PDF is easier than manually entering/transcribing it in MuseScore.
Of course you can use local font tools, but this is far easier for occasional use.
The beta can do even more at the risk of bumping into bugs: [Wayback/Archive] Wakamai Fondue, the tool that answers the question “what can my font do?”
Note the colour matching of the text around the circle with the fondue background image.
Oh: it is open source too, written mainly in JavaScript, CSS and a tiny bits of HTML and Python, based on Vue.js and npm, and available as parts in the repositories of [Wayback/Archive] Wakamai Fondue · GitHub:
Read the rest of this entry »
Posted in CSS, Development, Font, HTML, JavaScript/ECMAScript, npm, Python, Scripting, Software Development, Vue.js, Web Development | Leave a Comment »
Posted by jpluimers on 2025/06/26
Need to look into this further: [Wayback/Archive] Robust Links – Make Your Link Robust.
Likely running it on my blog requires JavaScript to be enabled which means going from the premium to the small business plan (at te time of writing from USD 8 to USD 25 per month: a 200+% increase).
Let’s first start with an example:
Read the rest of this entry »
Posted in archive.is / archive.today, CSS, Development, Internet, InternetArchive, JavaScript/ECMAScript, link rot, Power User, Scripting, Software Development, WayBack machine | Leave a Comment »
Posted by jpluimers on 2025/06/11
For my link archive (as interactive stuff works way better for me than learning from plain reading) [Wayback/Archive] An Interactive Guide to Flexbox in CSS
Via:
–jeroen
Posted in CSS, Development, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2025/06/05
For a, I wanted to a HTML ul list the SQL keywords in multiple columns I was afraid this would be a tough CSS job, but in practice it was way easier than even explained in the below Stack Overflow answers that made me find
[Wayback/Archive] columns – CSS: Cascading Style Sheets | MDN
The columns [Wayback/Archive] CSS shorthand property sets the number of columns to use when drawing an element’s contents, as well as those columns’ widths.
TL;DR:
- I used
<ul style="columns:3">...</ul>
- For setting column width, this failed in Chrome
<ul style="column-count: 2; column-width: 15em;">...</ul>
but this worked: <ul style="column-count: 2; width: 480px;">...</ul>
Here are the answers:
Read the rest of this entry »
Posted in Conference Topics, Conferences, CSS, Development, Event, HTML, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2025/03/05
I originally searched for the tables below to see if I could get the visualisations of TeX and LaTeX right for infinite loop in “LaTeX: A Document Preparation System” by Leslie Lamport, printed in 1994..
Didn’t work, neither did using plain html super and subscript. The only thing that worked was using CSS styles (I chose to embed them, as separate CSS files are a huge premium over the WordPress plan), which also preserves actual meaning for screen readers:
Read the rest of this entry »
Posted in accessibility (a11y), CSS, Development, HTML, Power User, Software Development, Unicode, URL Encoding, User Experience (ux), Web Development | Leave a Comment »
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 »
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 »
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 »
Posted by jpluimers on 2024/09/12
Posted in Bookmarklet, CSS, Development, HTML, HTML5, JavaScript/ECMAScript, Power User, Scripting, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2024/06/25
Every once in a while, b0rk (Julia Evans, of [Wayback/Archive] wizard zines fame) asks interesting questions like below that results in lot of cool links.
I have blogged assemblies of them before (see for instance Lots of interesting git links via b0rk on Twitter) and this one is no different:
[Wayback/Archive] Julia Evans on Twitter: “what are some helpful programming learning games? thinking of things like mystery.knightlab.com for SQL, and flexboxfroggy.com, and ohmygit.org especially interested in games that have helped you learn something”
The response was overwhelmingly good (I tried to indicate when games are not free or not playable from a web browser). I summarised it below.
Read the rest of this entry »
Posted in *nix, *nix-tools, Conference Topics, Conferences, CSS, Database Development, Development, DVCS - Distributed Version Control, Event, Games, git, Multi-Threading / Concurrency, Power User, RegEx, Scripting, sh, Sh Shell, Software Development, Source Code Management, SQL, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 