LWP::ConsoleLogger::Everywhere lets you debug LWP and Mojo UserAgents you don't even know about. Now we also have support for HTTP::Tiny.

You can either add UserAgent debugging to your code directly or, through the magic of perl’s -M you can invoke it on the command line without touching a single line of code.

The guts of this module are stolen from Plack::Middleware::DebugLogging,

Modern CSS features that replace Sass, PostCSS plugins and JavaScript hacks: nesting, :has(), container queries, subgrid and more, checked in September 2026.

Big stylesheets used to get their order from a folder structure and a build tool. Reset first, then base styles, then components, then utilities, plus a rule that nobody adds !important before the third code review.

@layer writes that order into the CSS itself:

A rule in a later layer beats any rule in an earlier layer, whatever its specificity. .p-0 wins over .card .button because utilities comes after components, and the order of the files no longer matters.

Despite broad browser support, container queries remain surprisingly underused and frequently misunderstood.

A very interesting way to distinguish @media and @container queries is the layout type.

Media queries are for the “macro” layout; they look outward. Stuff like page structure, the header that spans the window, footers, main grid layout, system preferences (prefers-color-scheme), device capabilities (touch screens). You know, anything that is majorly true to the entire page structure.

Container queries, I’d say, are for “micro” layouts, i.e., most things that live inside the “macro” layout. We use them when any content needs to responsively fit whatever space it is allocated. Components that come to mind are things like cards, widgets, forms, navigation, and so on.

In other words, think “page layout” vs. “component layout”.

We're a while off from being able to leverage ::checkmark with checkbox styling, but here's a decent way to get the styling control you want, while preserving the useful parts of the native input element.

This is just a list of things that you might have forgotten to design. When you think about how simple an app like Instagram or Snapchat is, it’s easy to overlook just how many screens, states, and stuff goes in to making a really awesome user experience.

• Login & Signup stuff
• First Experience
• All the Little Things
• Launch Materials
• Profile Stuff
• Mad Flows

A look at the CSS line height unit and how it works.

The idea is to use the lh unit to set the size of the icon.
https://piccalil.li/blog/lh-units-are-cool/

Tired of Inter being everywhere? Two real criteria—cap-centered vertical metrics and a tall x-height—for choosing a UI font, plus 10 alternatives from independent foundries.

TL;DR, two things make a UI font easy to work with:

1. Cap-centered vertical metrics—the space above the cap height equals the space below the baseline. Result: labels center optically on buttons and align with icons, and you can use a single padding token instead of hand-tuned CSS.

2. Tall x-height—lowercase letters reach 70–75% of cap height. Result: the word nearly fills its box, so it looks evenly centered.

With Meta Tags you can edit and experiment with your content then preview how your webpage will look on Google, Facebook, X and more!

Mojolicious apps come in two flavors, Lite or Full. Lite apps are great for proof of concept but Full is better for robust apps. Can you move up from Lite to Full? Absolutely, we call it "growing"!

http://npw2018.oslo.pm/npw2018/talk/7476

Growing Guide:
https://docs.mojolicious.org/Mojolicious/Guides/Growing

Whim is a brand-new command-line tool (written with Mojo!) that lets you receive, process, display, and send webmentions from the command line.

https://jmac.org/webmention/
https://www.adamdjbrett.com/blog/enabling-webmentions-in-11ty/

Webmention is a recent, W3C-approved technology that aims to promote the proliferation of independent websites through a simple protocol of open, cross-domain notifications.

I have been obsessed with this technology for the past two years, and I will try to explain why, sharing a lot of resources for further study.

https://jmac.org/whim/tpc2020/

Grid's auto-fit and auto-fill are super useful, and while the declaration is pretty long, and can seem complicated, it's not so bad once you break it down.

✅ Auto-fill vs. auto-fit demo: https://codepen.io/kevinpowell/pen/yyLYoZO
✅ More on getting started with Grid: https://youtu.be/rg7Fvvl3taU

.grid {
display: grid;
gap: var(--gap, 1rem);
grid-template-columns: repeat(
var(--grid-type, auto-fit),
minmax(min(180px, 100%), 1fr)
);
grid-auto-rows: 120px auto auto;
container-type: inline-size;
}

⌚ Timestamps
00:00 - Introduction
00:25 - The basics of grid columns
02:30 - Using the repeat syntax
03:15 - Breaking down repeat auto-fit
05:45 - Preventing overflow
08:00 - Use a variable for the minimum value
08:45 - How to remember this declaration
11:25 - The difference between auto-fit and auto-fill

Use these guidelines to select a JET collection component based on your user tasks and the features you wish to include. You can choose between the following components:

• List (oj-list-view, 2007.0.0)
• Table (oj-table, 2007.0.0)
• Data grid (oj-data-grid, 2007.0.0)

Change is not an event; it’s a process

Don’t take anything for granted

Your goal is to listen and capture everyone’s thoughts and propositions, but don’t take it as absolute truth. In the end, you are the expert who needs to filter through the noise and find where to focus.

Collection of the most essential transitions for web apps that you can just copy and paste into any project.

Modern phones are not simple rectangles. They have rounded corners, camera cutouts, dynamic islands, and home indicators that double as gesture areas.

Browsers by default will prevent your site from being obscured by the notch or home indicator, so your content will be safe without any special handling. That does come with a downside, which is that the browser will give you a smaller viewport to reserve space:

Oat is an ultra-lightweight HTML + CSS, semantic UI component library with zero dependencies. No framework, build, or dev complexity. Just include the tiny CSS and JS files and you are good to go building decent looking web applications with most commonly needed components and elements.

Semantic tags and attributes are styled contextually out of the box without classes, forcing best practices, and reducing markup class pollution. A few dynamic components are WebComponents and use minimal JavaScript.

https://x.com/technmak/status/2022287404128973056?s=43&t=gAZhA3-2h2DvLb-eSzGa5A

Compare Google Fonts side-by-side with anatomy overlays, OpenType metrics, pairing scores, and ready-to-use CSS. Free tool for designers and developers.

Stateless (JWT)

How it works:

User logs in, server creates a JWT containing user data
Server signs the JWT with a secret key
Server sends JWT to client
Client sends JWT with every request
Server verifies the signature and trusts the data inside
Why it scales:

Any server can validate a JWT using the shared secret key
No database lookup needed per request
If you add 100 more servers, they all work immediately

Design with the screen reader layer in mind

Closing the gap between what you’ve designed and what’s announced by screen readers doesn’t require accessibility or production code expertise. It’s about being more intentional with the decisions you’re already making.

Though screen reader output depends on how the design was developed, designers have more influence over the screen reader experience than they think.

Think “role, name, state” while designing

You don’t need to memorize ARIA specs to improve accessibility. Just ask yourself three questions as you design elements like interactive or informative elements:

Role: What is this?
Name: What does it do?
State: What’s its current condition?

Human-centered design has four major principles:

1. Understand and Address the Core Problems;
2. Be People-Centered;
3. Use a Systems Approach;
4. Use Rapid Iterations of Prototyping and Testing.