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 ‘CSS’ 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 »
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 »
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 »
Lots of interesting programming learning games links via b0rk on Twitter
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”
- [Wayback/Archive] The SQL Murder Mystery
- [Wayback/Archive] Flexbox Froggy – A game for learning CSS flexbox
- [Wayback/Archive] Oh My Git!
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.
Share this:
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 »
Fixing the GitHub gist CSS so the editor uses more than 25% of my screen estate
Posted by jpluimers on 2024/06/05
Two years ago I asked [Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “Is there a way to make the @github gist text editor wider and taller? Right now (at 1920×1200) it uses about half the screen width and screen height. That wastes about 25% of screen estate. “.
I still have to figure out how to fix the height, but the width was relatively easy back then. Hopefully this CSS fix still works today.
In the mean time [Wayback/Archive] Add full height gist creation by xthexder · Pull Request #68 · xthexder/wide-github: Conversation permanently fixed my problem.
[Wayback/Archive] Jeroen Wiert Pluimers on Twitter: “I fixed the width by modifying .container-lg and changing max-width from 1018px to 95%.”
Until GitHub fixes it themselves, I started with this fix in the extension [Wayback/Archive] Stylus – Chrome Web Store:
Share this:
Posted in CSS, Development, DVCS - Distributed Version Control, gist, GitHub, HTML, Software Development, Source Code Management, Web Development | Leave a Comment »
Web-Design user experience: if you replace actual characters with images or empty styled items you will exclude screen-readers and make visually impaired unhappy (and others too)
Posted by jpluimers on 2024/02/15
So I was on a medical site trying to copy my prescriptions trying to copy them:
Before copying After copying
In this case, the element that failed to copy was this:
Share this:
Posted in CSS, Dark Pattern, Development, Software Development, User Experience (ux), Web Development | Leave a Comment »
css color names – Google Search
Posted by jpluimers on 2023/12/27
I like the featured snipped [WayBack] css color names – Google Search
It points to [WayBack] Quackit: CSS Color Codes which has the below nice table (a few duplicates could be stripped, but the ordering and layout is great!)
Since then, I also found these very interesting pages on web colors that are also useful in any software development environment:
- Source: Web colors – Wikipedia which has sections for HTML color names, Basic colors, Extended colors, Web-safe colors, Safest web colors, Color selection, Color contrast (including many colorful tables similar to the table below)
- CIE L*a*b color space: CIELAB color space – Wikipedia
- List of color palettes – Wikipedia
Share this:
Posted in Color (software development), CSS, Development, HTML, Software Development, Web Development | Leave a Comment »
0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox.
Posted by jpluimers on 2023/10/31
[Wayback/Archive] 0x48piraj/fadblock: Friendly Adblock for YouTube: A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome, Opera and Firefox.
At the time of writing, it was available in these web-browser extension/addon stores:
- [Wayback/Archive] fadblock – Chrome Web Store
- [Wayback/Archive] fadblock – Get this Extension for 🦊 Firefox (en-GB)
A 404 was returned at [Wayback/Archive] https://addons.opera.com/en-gb/extensions/details/fadblock/ which I reported in [Wayback/Archive] Extension vanished from the Opera Addons page · Issue #15 · 0x48piraj/fadblock.
Via:
- [Wayback/Archive] chrome youtube adblock checker – Поиск в Google
- [Wayback/Archive] A fast, lightweight, and undetectable YouTube Ads Blocker for Chrome. : youtube
–jeroen
Share this:
Posted in Chrome, CSS, Development, Firefox, JavaScript/ECMAScript, Opera, Power User, Scripting, SocialMedia, Software Development, Web Browsers, Web Development, YouTube | Leave a Comment »
Via isotopp: Yes, I can connect to a DB in CSS
Posted by jpluimers on 2023/06/22
Boy, I wonder what can go wrong with [Wayback/Archive] Yes, I can connect to a DB in CSS
Via: [Wayback/Archive] Kris on Twitter: “… “Yes, I can connect to a DB in CSS” Abusing houdini.how, and using a JS version of Sqlite, CSS can connect to a DB.” / Twitter
Related:
- [Wayback/Archive] Houdini.how
- [Wayback/Archive] Memeloper on Twitter: “Recruiters be like: We’re looking for someone who can connect to the database using CSS.” / Twitter
–jeroen
Share this:
Posted in CSS, Database Development, Development, Software Development, SQLite, Web Development | Leave a Comment »
The Wiert Corner - irregular stream of stuff 