Lorem Picsum; CSS Unit Division; The Unreasonable Effectiveness Of Simple HTML

It’s easy to get caught up in the latest frameworks and cutting-edge technologies when crafting content for the web. But, sometimes the most powerful tools are the simplest ones. Today, we’re covering three topics that remind us of the beauty in simplicity: a versatile image placeholder service, clever CSS calculations, and the enduring effectiveness of plain HTML. These seemingly basic elements can make a world of difference in creating accessible, responsive, and user-friendly websites.

TL;DR

(This is an AI-generated summary of today’s Drop using Ollama + llama 3.1b and a custom prompt.)

• Lorem Picsum is an image placeholder service offering random or specific images with various modifications and formats (https://picsum.photos/)
• CSS unit division using calc() allows for responsive designs, with fallback methods for older browsers (https://typetura.com/blog/unit-division-with-css-and-fallbacks/)
• Simple HTML plays a crucial role in making websites accessible and functional, especially for public services (https://shkspr.mobi/blog/2021/01/the-unreasonable-effectiveness-of-simple-html/)

Lorem Picsum

Lorem Picsum is a super cool image placeholder service that provides random or specific images for web development, design, or just random fun purposes. Rather than blather, let’s look at the functionality:

Basic Usage

To get a random image, simply append the desired dimensions to the base URL:

https://picsum.photos/200/300

For square images, only specify one dimension:

https://picsum.photos/200

To retrieve a specific image (see the list endpoint, below), use the /id/{image} parameter:

https://picsum.photos/id/237/200/300

For consistent randomness, use the /seed/{seed} parameter:

https://picsum.photos/seed/picsum/200/300

Lorem Picsum also offers various image modifications:

• Grayscale: Append ?grayscale
• Blur: Append ?blur or ?blur=1-10 for adjustable blur

https://picsum.photos/id/870/200/300?grayscale&blur=2

The service also supports different file formats:

• JPEG: Add .jpg to the URL
• WebP: Add .webp to the URL

Use the /v2/list endpoint to get a list of images (in JSON):

https://picsum.photos/v2/list

You can paginate results using ?page and ?limit parameters.

And, you can retrieve specific image details using:

https://picsum.photos/id/{id}/info
https://picsum.photos/seed/{seed}/info

And, you can use the random query parameter for multiple unique images.

CSS Unit Division

I came across a neat article from Typetura that discusses an advanced CSS technique for unit division using the calc() function, along with fallback methods for older browsers. It’s a fun, quick read, and I could just leave you there, but let’s look at some simple[r] examples, here.

The calc() function in CSS allows for arbitrary mathematical operations, including the aforementioned division between units. This technique is pretty handy when we decide to support responsive designs and want to maintain consistent proportions across different screen sizes.

The basic syntax for unit division in CSS is:

width: calc(100% / 3);

This example sets the width to one-third of the parent container’s width.

More complex calculations can be performed, combining different units:

font-size: calc((100vw - 20rem) / 30);

This formula adjusts the font size based on the viewport width, subtracting a fixed amount and then dividing by a constant.

For browsers that don’t support calc(), fallback methods are needed. Two main approaches are discussed in the article are:

• Using CSS Variables (Custom Properties)::root { --base: 3; } .element { width: 33.333%; width: calc(100% / var(--base)); }
• Using the @supports rule:.element { width: 33.333%; } @supports (width: calc(100% / 3)) { .element { width: calc(100% / 3); } }

Both methods provide a way to use modern CSS features while ensuring compatibility with older browsers.

The Unreasonable Effectiveness Of Simple HTML

This post by Terence Eden’s sheds light on the very important role super simple HTML plays in making websites accessible and functional, especially for public services. He recounts an experience (which made me both sad and happy at the same time) at a housing benefits office where he observed a young woman using a PlayStation Portable (PSP) to access government websites for housing benefit information. Despite the PSP’s limited web browser capabilities, she successfully accessed the GOV.UK pages because they were written in straightforward HTML, designed to be lightweight and functional even on outdated browsers.

Eden emphasizes that not everyone has access to high-end devices or fast internet connections (we talk about this quite a bit on the regular), highlighting the importance of simple HTML for broader accessibility. He argues that plain HTML is highly effective for public services and systems that people might need in urgent situations. Minimal CSS can enhance aesthetics, and JavaScript should be used sparingly for progressive enhancements rather than core functionality.

He encourages all of us to test our creations on outdated browsers and devices to ensure accessibility isn’t compromised.

FIN

Remember, you can follow and interact with the full text of The Daily Drop’s free posts on Mastodon via @dailydrop.hrbrmstr.dev@dailydrop.hrbrmstr.dev ☮️