SoatDev IT Consulting
SoatDev IT Consulting
  • About us
  • Expertise
  • Services
  • How it works
  • Contact Us
  • News
  • September 1, 2025
  • Rss Fetcher

David Darnes made a <code-pen> web component, which is a basic HTML/CSS/JS panel layout that renders them into an iframe (using the very cool <syntax-highlight> web component as well).

Then it ate itself when Ariel Salminen put a <code-pen> in a <code-pen>.

Then the universe collapsed upon itself when Rob Rhoades made a code pen linking to a code pen inside a <code-pen> inside a CodePen.

The kids are alright.

Speaking of, uhhhh, eating oneself, Julia Miocene has a video of a Recursive square that is a very satisfying watch. I almost forgot what was happening up until the end when you’re like ohhhhhhhh right it’s a perfect loop. Clever clever.


There is a thing you need to do once in a while where the more text you have, the smaller you want the font-size to be (and vice-versa). I remember doing this ages ago on a quotes site where I wanted very short quotes in big text and very long quotes in small text. I counted the letters in PHP and applied a font size based on ranges. It wasn’t pretty. Dave blogged that (as long as you have the character count as an HTML attribute) you can do this in CSS (in supporting browsers). You set an “ideal” number of characters per line, then do a little division to get a ratio, and apply the ratio to the font-size (while setting a clamp-ed minimum and maximum). Clever clever.


I liked the Zach’s clever thinking in his Eleventy Image project where, when display an image that starts as SVG, it converts them to a raster format (like PNG or JPG) only when the converted image is actually smaller. Like it’s smart enough to pick which choice to make depending on file size. Or maybe I just like the name: SVG Short Circuiting.


Cassidy blogged a little while back a fairly succinct way of figuring out an element’s “index” when you need it. That is, say a <div> contains three <button> elements, and you click the second one. How do you know it’s the second one? Go up the parent, get an array of the children, and check the indexOf of the button. (Clever, clever.) I actually think it’s more interesting that we’ll have this information in CSS soon with sibling-index() and friend (sibling-count()).


The pseudonymous dade blogged an idea that I’m pretty surprised I’d never seen before now, as it feels like an old school progressive enhancement technique. If you need to hide a feature on the page that you know only works with JavaScript, you can put a <style> in a <noscript> to do it.

<noscript>
    <style>
        .thing-that-only-works-with-js {
            display: none;
        }
    </style>
</noscript>

Clever, clever.

Previous Post

Recent Posts

  • Chris’ Corner: Clever Clever
  • Why Runway is eyeing the robotics industry for future revenue growth
  • Only 5 days left: Exhibit tables are disappearing for TechCrunch Disrupt 2025
  • Robert Gwerengwe Takes Over as WesBank CEO
  • 8 Key Considerations in Selecting a Debt Collection Partner for Your Business

Categories

  • Industry News
  • Programming
  • RSS Fetched Articles
  • Uncategorized

Archives

  • September 2025
  • August 2025
  • July 2025
  • June 2025
  • May 2025
  • April 2025
  • February 2025
  • January 2025
  • December 2024
  • November 2024
  • October 2024
  • September 2024
  • August 2024
  • July 2024
  • June 2024
  • May 2024
  • April 2024
  • March 2024
  • February 2024
  • January 2024
  • December 2023
  • November 2023
  • October 2023
  • September 2023
  • August 2023
  • July 2023
  • June 2023
  • May 2023
  • April 2023

Tap into the power of Microservices, MVC Architecture, Cloud, Containers, UML, and Scrum methodologies to bolster your project planning, execution, and application development processes.

Solutions

  • IT Consultation
  • Agile Transformation
  • Software Development
  • DevOps & CI/CD

Regions Covered

  • Montreal
  • New York
  • Paris
  • Mauritius
  • Abidjan
  • Dakar

Subscribe to Newsletter

Join our monthly newsletter subscribers to get the latest news and insights.

© Copyright 2023. All Rights Reserved by Soatdev IT Consulting Inc.