Skip to content

Specials

Whole pages and site-wide extras rather than building blocks - an article, a slide deck, a tool stack and a seasonal dress for every card.

Before & After

Two pictures of the same place on one frame, split where the reader drags - the renovated bathroom, the cleared garden, the restored facade. The control is a native range laid over the whole frame, so a finger, a mouse and the arrow keys all move it, and a screen reader announces the position. Without the script the frame shows a fixed half-and-half split.

Default

The valley at night The same valley by day Before After

Own labels, other ratio

The meadow in February The meadow in July February July
index.html HTML
<div class="mw-compare mw-aspect-video">
  <img class="mw-compare-before" src="before.jpg" alt="..." />
  <img class="mw-compare-after" src="after.jpg" alt="..." />
  <span class="mw-compare-label">Before</span>
  <span class="mw-compare-label mw-compare-label-after">After</span>
  <input type="range" class="mw-compare-range" min="0" max="100" value="50"
         aria-label="Move the split between before and after" />
</div>

Presentations

A link instead of a slide file. A deck is a page of its own with mw-deck on the body: landscape for tablets, laptops and projectors, or portrait for a phone - sent as a link and paged with a thumb. The swipe is the browser's scroll snap; the script adds arrow keys, the mouse wheel, jump buttons, counter, progress and fullscreen. Colours, fonts and buttons come from the MaverickWave setup of the page, so a deck looks like the site it belongs to. Inside another page it sits in mw-deck-frame, and mw-deck-card links to it.

The chrome over the slides - counter, progress, the round buttons under the pointer - wears the second colour. mw-deck-accent-primary on the deck keeps it to the first, and mw-accent-single on the site does the same everywhere. Without the script the slides keep their scrollbar and the controls that would do nothing stay hidden.

Chrome accent in the decks below

Landscape · from tablet

Page with the arrow keys once you clicked into it, with a swipe or the buttons bottom right. The button top right switches to fullscreen. On a phone held upright the deck asks to be turned.

Portrait · for phones

Swipe up, or use the arrow keys after one click into it. Opened on its own on a computer, the deck stands in a phone-shaped stage with a column of text and the arrows beside it.

Device Frames

A laptop and a phone drawn in CSS, with a page on the glass - for showing a site the way people meet it, next to the prose that sells it. mw-devices stands the phone over the laptop's corner; each frame is an mw-device with mw-device-laptop or mw-device-phone and an mw-device-screen inside. A screenshot on the glass scrolls to its end while the pointer rests on the laptop, and a device written as a <button> tours it on a tap: to the end, a pause, and back.

An iframe instead of the picture shows the live page, laid out at --mw-device-viewport and scaled to the glass, so it scrolls by hand like the real thing. Both frames also stand on their own; the phone then takes a column of up to 22rem.

A bakery's homepage on a laptop

The same frames with a live site: m1well.com, laid out once at 1280px and once at 390px. Scroll the phone by hand, page through the laptop - nothing here is a picture.

Action Bar

The shortcut a local business needs on a phone: call, directions, book - held at the bottom edge where the thumb already is. Up to four actions, one of them filled as the one that matters most. It takes the header's colours, so the page has chrome at both ends in either theme.

From a tablet up it steps aside, unless it carries mw-action-bar-always. While it is on screen the page reserves its height at the foot and in the scroll padding, so neither the footer nor a focused field ends up underneath it. The two below are mw-action-bar-embedded, which sits at the bottom of its own frame instead of the window - here, the phone's glass.

index.html HTML
<!-- Last in the body, after the footer -->
<nav class="mw-action-bar" aria-label="Contact">
  <a class="mw-action-bar-item" href="tel:+49891234567">
    <i class="fas fa-phone" aria-hidden="true"></i><span>Call</span>
  </a>
  <a class="mw-action-bar-item" href="https://maps.google.com/?q=...">
    <i class="fas fa-location-dot" aria-hidden="true"></i><span>Directions</span>
  </a>
  <a class="mw-action-bar-item mw-action-bar-primary" href="/booking">
    <i class="fas fa-calendar-check" aria-hidden="true"></i><span>Book</span>
  </a>
</nav>

Technology Stack Bucket

The Techstack component allows you to showcase toolsets and skills in a clean, organized bucket layout. Each item can feature a logo, optional labels, and a direct link to the technology's homepage.

Small Items (Logos Only), Narrow Variant

Small Items with Name

Dashed Variant (Mixed Content)

Occasions

Seasonal decoration on every card, panel and testimonial - snow in winter, a garland at Christmas, leaves in autumn. Pick one below and this page reloads wearing it. Static is CSS alone: the pieces sit on the surfaces and nothing moves. Arrive with the scroll lets each piece land as its surface scrolls in, with a few particles drifting along - scroll down after the reload to see it. Intro plays five seconds over the page right after the reload; any click or scroll ends it. The size turns both: smaller pieces and less of everything, or more.

Motion
Off

A plain card

Carries the piece on its top left corner, or along part of the top edge.

The signature corner

Stays free - the arc on the top right shows through every occasion.

New

With a badge

The badge keeps its corner, the edge pieces never reach it.

A card across the whole page

The snow, the garland and the bunting cover half of a narrow surface and 40% of a wide one, never more than 400px - on this card they end well before the middle.

A panel

Panels and testimonials are decorated like cards. Anything else opts in with mw-occasion-spot, a surface opts out with mw-occasion-skip.

The same class on a single surface decorates that one alone, whatever the page wears - a showcase next to the offer, one card for a birthday. Size and scroll go on the surface too. Intro and particles belong to the page and stay off.

Snow on one card

mw-occasion-snow on the card.

Easter, large

mw-occasion-easter mw-occasion-lg - the size stays on this card.

Birthday with the scroll

mw-occasion-scroll on the card lets the bunting drop in.

<!-- CSS only: the class, and the surfaces are decorated -->
<html class="mw-occasion-snow">

<!-- Smaller pieces and less of everything, or more: -sm and -lg -->
<html class="mw-occasion-snow mw-occasion-sm">

<!-- Arrives with the scroll, plays the intro once per visit (main.js) -->
<html class="mw-occasion-christmas mw-occasion-scroll" data-mw-occasion-intro>

<!-- Scheduled: occasions.js in the head picks today's entry before the
     first paint, the shortest window wins -->
<html data-mw-occasions='[
  {"effect": "snow", "from": "2026-12-05", "until": "2027-02-05", "yearly": true, "size": "sm"},
  {"effect": "christmas", "from": "2026-12-18", "until": "2026-12-26", "yearly": true, "scroll": true, "intro": true}
]'>
<head>
  <script src="https://cdn.jsdelivr.net/npm/maverick-wave@6/src/js/occasions.js"></script>

<!-- The same as the form above, on any page that loads main.js -->
?mw-occasion=autumn&mw-occasion-size=lg&mw-occasion-scroll&mw-occasion-intro

<!-- Any other surface opts in, one opts out -->
<div class="mw-tile mw-occasion-spot">...</div>
<div class="mw-card mw-occasion-skip">...</div>

<!-- One card wears its own, whatever the page has on -->
<div class="mw-card mw-occasion-easter mw-occasion-lg">...</div>

Blog Posts

A long-form article rather than a card: title, meta line, body and the way back out. The gradient rule down the left edge is what makes it read as a page instead of a panel.

Just a dummy blog post (markdown generated)

UI/UX design

The landscape of web development continues to evolve at a rapid pace. In this article, we explore the latest frameworks, tools, and methodologies that are shaping the industry in 2025.

The Rise of AI-Assisted Development

Artificial intelligence has transformed how we approach coding. Modern IDEs now come equipped with sophisticated AI assistants that can generate entire components, optimize performance, and even identify potential bugs before they manifest.

The most significant advancement has been in the realm of natural language programming, where developers can describe functionality in plain English and have the AI generate the corresponding code.

"AI did not replace us. It took the boilerplate, and left the part where you decide what the thing should do." - Elena Vega, Lead Developer at TechFront

Serverless Architecture: Beyond the Basics

Serverless has grown past single functions. Whole applications now run on it, and the current generation of platforms offers:

  • Stateful serverless functions with built-in memory persistence
  • Edge-optimized execution for global performance
  • Integrated database connections with automatic scaling
  • Real-time monitoring and debugging capabilities

Code Example: Modern Serverless Function

// Modern serverless function with state management
export async function handler(event, context) {
  // Access persistent state across invocations
  const state = await context.getState();

  // Process the incoming request
  const result = processRequest(event, state);

  // Update the state for future invocations
  await context.setState({
    lastProcessed: new Date(),
    counter: (state.counter || 0) + 1,
    recentRequests: [...(state.recentRequests || []), event.id].slice(-10)
  });

  return {
    statusCode: 200,
    body: JSON.stringify(result)
  };
}

Web Components and Micro-Frontends

The component-based architecture has evolved into a more standardized approach with Web Components becoming the foundation of modern frontend development. This has enabled true interoperability between different frameworks and libraries.

Micro-frontends have also gained widespread adoption, allowing teams to develop, test, and deploy parts of a frontend independently, using different technologies if necessary.

  • DOP is not anti-OOP - it's a refinement for clearer thinking and modeling.
  • With record, sealed interface, and Pattern Matching, Java is finally ready for this style.
  • You’ll get:
    • Transparent and predictable models
    • Easier testing and logging
    • Less coupling and fewer side effects
  • This approach can make your domain models sharper and your codebase easier to reason about.

What this means for the next project

None of this is exotic any more. The tooling ships with the framework, the runtimes are on every major host, and the cost of trying one of them on a real feature is an afternoon.