Posted by jpluimers on 2021/10/21
I have used other on-line HTML cleanup tools in the past (especially for including parts of web-pages in a blog post), but so far none beats HTML Washer: [Wayback] HTML cleanup tool & simplifier. For basic & clean HTML 🔧
An online tool that reduces HTML to basic tags and attributes. Removes scripts, CSS, and other non-basic elements like , , etc… Also, corrects errors and formats the HTML doc or a fragment.
–jeroen
Posted in Development, HTML, Power User, SocialMedia, Software Development, Web Development, WordPress | Leave a Comment »
Posted by jpluimers on 2021/10/05
The CSS from [WayBack/Archive.is] Naughty naughty no alt that shows the below red moving rendering of images that do not have an alt-text is simple:
<style> body { margin: 5vw; } img { max-width: 25vw; margin: 1vw; box-sizing: border-box; } img:not([alt]) { border: 2px solid red; animation: pulse 1.2s ease infinite; } @keyframes pulse { 0% { transform: scale(1) rotate(0); } 25% { transform: scale(1.3) rotate(15deg); filter: blur(2px); opacity: 0.8; box-shadow: 0 0 2vw 2vw red; } 50% { transform: scale(1) rotate(0); filter: none; } 75% { transform: scale(1.3) rotate(-15deg); filter: blur(5px); opacity: 0.8; box-shadow: 0 0 2vw 2vw red; } 100% { transform: scale(1) rotate(0); } } </style>
Less intrusive CSS fragements are
img:not([alt]) { filter: blur(5px); }
and
img:not([alt]) { border: 5px solid red; }
Via:
This CSS file intends to warn developers about possible risks and mistakes that exist in HTML code. It can also be used to roughly evaluate a site’s quality by simply including it as an external stylesheet.
Available as:
Diagnostic.css is a stylesheet which allows the user to test for common errors in a page’s markup. Inspired by Eric Meyer’s diagnostic CSS file, this one is intended to flesh out accessibility related issues on a page.
Available as:
javascript:var images = document.querySelectorAll('img');if(images) {for (var i = images.length - 1; i >= 0; i--){var alt = images[i].getAttribute('alt');if(!alt){images[i].style.border = "5px solid red";}}} Hope it’s correct😀”
–jeroen
Posted in CSS, Development, HTML, HTML5, Software Development, Web Development | Leave a Comment »
Posted by jpluimers on 2021/08/25
[WayBack] html – CSS Display an Image Resized and Cropped – Stack Overflow (thanks [WayBack] roborourke!); see full answer link for runnable snippet and HTML (the WordPress editor keeps fucking up preformatted code blocks with html or XML in it).
You could use a combination of both methods eg.
.crop { width: 200px; height: 150px; overflow: hidden; } .crop img { width: 400px; height: 300px; margin: -75px 0 0 -100px; }
You embed the img in a div with class .crop, or in-line the styles in the img and div tags.
–jeroen
Posted in CSS, Development, HTML, HTML5, SocialMedia, Software Development, Web Development, WordPress, WordPress | Leave a Comment »
Posted by jpluimers on 2021/08/19
I used [WayBack] html – How can I scale the content of an iframe? – Stack Overflow as starting point to scale some iframes.
In my case, I had to scale up (by a 25% so a factor 1.25) instead of scale down.
What I observed so far in recent Chrome versions is:
div is still needed, otherwise the outer size and inner size of the frame mismatchesdiv and the wrapped iframe need to have the same dimensions (so unlike the Stack Overflow answers, no need to scale the width/height of the div; keep the same values as the iframe)The div uses class calendar_wrap.
The iframe uses class calendar_iframe.
This is part of my CSS:
body { margin: 0; /* override browser setting for body `margin: 8px;` */ overflow: hidden; /* remove scroll bars; does not work for iframes */ } /* ... */ iframe { border-width: 0; /* override browser setting for iframe `border-width: 2px; */ height: 100vh; width: 50vw; overflow: hidden; /* remove scroll bars; does not work for iframes */ } /* wrap and iframe zoom as per https://stackoverflow.com/questions/166160/how-can-i-scale-the-content-of-an-iframe */ .calendar_wrap { float: left; height: 70vh; width: 35vw; /* calc(35vw / 1.25); */ padding: 0; background-color: blue; } .calendar_iframe { float: left; width: 35vw; -ms-transform: scale(1.25); -moz-transform: scale(1.25); -o-transform: scale(1.25); -webkit-transform: scale(1.25); transform: scale(1.25); -ms-transform-origin: 0 0; -moz-transform-origin: 0 0; -o-transform-origin: 0 0; -webkit-transform-origin: 0 0; transform-origin: 0 0; } /* ... */
–jeroen
Posted in Chrome, CSS, Development, HTML, Power User, Software Development, Web Browsers, Web Development | Leave a Comment »
Posted by jpluimers on 2021/08/12
Probably old, but there is an embedded [WayBack] css color picker – Google Search that on each refresh switches colours:
–jeroen
Posted in Color (software development), CSS, Development, Google, GoogleSearch, HTML, Power User, Software Development, Web Development | Leave a Comment »
