DEV Community: Laura Norwood

👻 Ghost in the House 🎃

Laura Norwood — Wed, 28 Oct 2026 18:21:44 +0000

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

What I Built

Ghost in the House takes a night of smart home sensor events, picks the strangest with plain code, and asks an open-weight model running on your own machine to explain them as a short ghost story.

The page is a surveyor's plan of a quiet house. A floor plan and a chart of the whole night sit beside the story. Every time the story names a moment ("01:58"), the plan and chart jump to it and show the house as the sensors recorded it: lamps, open doors, movement, the spare room turning cold. The raw record sits underneath, so you can check the story against the evidence line by line. A guided walkthrough takes first-time visitors through the four events, and a panel beside the plan says what changed, what the sensors recorded beforehand, and what remains unknown, all derived from the data.

The night is fictional sample data shaped like Home Assistant history: 205 sensor readings, with four events nothing explains. A spare room light comes on with no motion recorded in the room. The hallway sensor fires while every tracked phone is home. The spare room drops 6 degrees in ten minutes. The back door opens with no motion recorded before it.

I tried to keep three kinds of claim apart, and the page labels them: what the sensors recorded, what my six rules assume, and what the model interpreted. A phone being at home does not prove anyone is asleep, and no recorded motion does not prove nobody moved, so the page says "no motion recorded" and nothing stronger.

Demo

Live page: https://lanthanum89.github.io/Ghost-in-the-Machine/

It opens with a recorded story that plays straight away, so nothing needs installing. The Live mode asks your own Ollama model for a fresh story and checks that Ollama is running before you press anything.

Code

Lanthanum89 / Ghost-in-the-Machine

This is a submission for the Hacktoberfest Open-Source AI Challenge Week 4: Ghost in the Machine

Ghost in the House

A night of smart home sensor events goes in. A short ghost story comes out, written by an open-weight model running on your own machine.

Built for the Hacktoberfest Open-Source AI Challenge, Week 4: Ghost in the Machine.

The page is a surveyor's plan of the house. The story streams in beside a floor plan and a chart of the whole night, and every time the story names a moment ("01:58") the plan and chart move to it, showing the lamps, doors, movement and temperatures as they were. The four marked events are numbered and linked in time order (the link shows sequence, not a tracked route), and the raw sensor record sits underneath.

The page opens on the quiet house just after lights out. A guided walkthrough takes you through the four marked events one at a time. A panel beside the plan says what…

View on GitHub

How I Built It

The rule I started with: the model never sees raw logs and never decides what is spooky.

Plain TypeScript filters the night's events, scores them with six explainable rules (night-time, no motion recorded before it, phones at home, rarity, sudden change, routine chatter) and picks about 20. Each point has a stated reason, and the page lists the rules. The model only narrates that short, pre-selected timeline, written as plain English with no scores or rule names. Choosing those events still shapes the story, and the page says so.

Model: a small open-weight instruct model through Ollama, llama3.1:8b by default and one setting to change. Low-ish temperature, capped length, and a system prompt fixing a dry, understated British voice that tells it to say "no motion was recorded" rather than claim nobody was there.
Inference: Ollama's streaming /api/chat, called straight from the browser. No cloud AI calls anywhere.
The plan and chart: a replay of the sensor history, computed in code. A small parser finds times like 01:58 in the story as it streams and moves the chart to the matching moment. The model decides nothing visual.
App: TypeScript, React, Vite, Tailwind and Vitest, as an installable PWA that opens offline. The type is IM Fell Double Pica for titles, Atkinson Hyperlegible for reading and IBM Plex Mono for data, all bundled open-licensed files, so nothing loads from a CDN.
Home Assistant: src/data/ha-client.ts is a stub for the real history API. It has never been run against a real Home Assistant, and the README and code both say so.

Why Does Open Innovation Matter?

Sensor data shows when a house is empty and when people are likely asleep. That should not go to someone else's server.

An open-weight model on your own network means the data never leaves the house, the tool works with the internet off, and it keeps working if a hosted service changes or disappears. The model is a setting you can swap. And because the selection step is ordinary code, you can read why each event was chosen, which makes it easier to see where the story comes from and where it does not.

Woof Are You, Really? A Dog Personality Quiz Built in a Weekend

Laura Norwood — Fri, 14 Aug 2026 19:14:03 +0000

This is a submission for Weekend Challenge: Dog Days Edition

What I Built

Which Dog Are You Today? — a tiny, silly personality quiz. Five daft questions about your Saturday mornings, your feelings on doorbells, and your ideal compliment, and you get crowned as one of five dog breeds: Golden Retriever, Corgi, Greyhound, Border Collie, or Pug. The goal was pure low-stakes fun with no login, no backend, no tracking — just open it, answer five questions, and get told which dog you are today. (Not forever. Today. Check back tomorrow — you might be a different dog.)

Demo

🔗 Live demo

🐾 The lineup:

Breed	You are...
🟡 Golden Retriever	Boundless joy, zero impulse control
🟠 Corgi	Short legs, tall opinions, runs the house
🔵 Greyhound	Capable of 40mph, choosing 0mph
🟢 Border Collie	Rest is a bug, not a feature
🟣 Pug	Didn't ask to be this glamorous, happened anyway

Code

Lanthanum89 / dev.to-weekend-doggos

Five daft questions. One inevitable truth about your energy levels. This is a tiny, silly personality quiz built for the DEV.to Weekend Doggos challenge. Answer questions about your Saturday mornings, your feelings on doorbells, and your ideal compliment — and find out which dog breed you truly are today. (Not forever. Today.)

🐶 Which Dog Are You Today?

Five daft questions. One inevitable truth about your energy levels.

This is a tiny, silly personality quiz built for the DEV.to Weekend Doggos challenge. Answer questions about your Saturday mornings, your feelings on doorbells, and your ideal compliment — and find out which dog breed you truly are today. (Not forever. Today. Check back tomorrow, you might be a different dog.)

🐾 The lineup

Breed	You are...
🟡 Golden Retriever	Boundless joy, zero impulse control
🟠 Corgi	Short legs, tall opinions, runs the house
🔵 Greyhound	Capable of 40mph, choosing 0mph
🟢 Border Collie	Rest is a bug, not a feature
🟣 Pug	Didn't ask to be this glamorous, happened anyway

Answer 5 questions, scores tally up behind the scenes, and whichever dog you matched hardest with gets crowned your spirit animal (ties broken at random, because chaos is thematically appropriate here).

🛠

…

View on GitHub

How I Built It

The stack is deliberately small: React 19 + TypeScript, Vite for dev/build, and Tailwind CSS 4 for the bold, hand-drawn look. Deploys happen automatically to GitHub Pages on every push to main via GitHub Actions.

A few decisions worth calling out:

Scoring is a simple tally, not a decision tree. Each answer bumps a per-breed counter (scores[breedId]++), and after the last question the breed(s) with the highest score win. It's a flat array of five integers — easy to reason about and easy to extend with a new breed.
Ties are broken at random, not by array order, because letting the "first" breed always win on a tie felt thematically wrong for a quiz about chaos and personality.
No illustration library. The dog faces are hand-rolled SVGs (<DogFace />) that take a color and an earStyle (floppy | pointy | folded | droop) as props, so each breed gets a distinct face just by composing the same component differently — mostly transform: rotate() on ear paths.
Content is fully data-driven. Breeds and questions live in src/data.ts as plain arrays/objects. Adding a new dog means adding a Breed entry and referencing its id from question options — no component changes needed.
Oxlint for fast linting, keeping the toolchain lightweight for a weekend build.

Prize Categories

Not submitting to any prize categories.

My CSS Art Made Some Foodie Friends 🍙🧋🥟🍲

Laura Norwood — Mon, 10 Aug 2026 08:59:34 +0000

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Comfort food isn't just one dish, so instead of picking one I built the whole spread and gave it somewhere to live: a dark, neon-lit restaurant with a digital menu display. Onigiri, Boba Tea, Gyoza, and Hot Pot double as the menu items, each with a price tag, blinking and bouncing on a glowing CRT-style screen. Underneath, a touchscreen self-order kiosk — the kind you'd find at any fast-food counter — asks "Can I take your order?" and prints out a ticket with your order number.

Demo

Live demo: https://lanthanum89.github.io/dev.to-Frontend-Challenge-Comfort-Food-Edition/
Source: https://github.com/Lanthanum89/dev.to-Frontend-Challenge-Comfort-Food-Edition

Every character bounces on its own, blinking every few seconds — click one and it gets happy ^^ eyes plus a burst of sparkles, right there on the menu screen. Give the kiosk below a few seconds and watch it type out its prompt, pulse its order button, and print a receipt.

Journey

Everything is divs built with clip-path / border-radius + gradients and CSS animations, with a single small vanilla-JS click handler for the food characters (the challenge allows "a sprinkle of JavaScript," so I kept it to exactly one interaction and pushed everything else — including the kiosk's whole sequence — into pure CSS):

Shared rig: every character is a .character wrapper with the same .face / .eye / .cheek / .mouth parts, the same infinite float bounce, the same blink timing, and the same squish + sparkle-burst reaction on click. Building this as one reusable system — instead of one-off pieces — is what made it possible to add multiple characters without the CSS ballooning out of control. Each character only overrides shape, color, and face position.
Onigiri: a clip-path rounded triangle with a radial-gradient dot texture for rice grains and a separate nori-band trapezoid.
Boba Tea: a tapered cup (clip-path polygon) with a striped straw, a domed lid, and tapioca pearls scattered along the bottom via absolutely-positioned circles.
Gyoza: a squashed dome shape, seared with layered radial-gradients on the bottom half, and scalloped pleats along the top edge made from a repeating dot pattern.
Hot Pot: a broth bowl split red/clear with a hard-edged linear-gradient, sitting in a separate metal "band" (with rivets) below it, ring handles on both sides, and a rising-steam animation.
The restaurant scene: a flickering neon "COMFORT FOOD" sign (layered text-shadow glow + a subtle opacity @keyframes flicker), a screen bezel with a repeating-linear-gradient scanline overlay for that CRT feel, and a wood counter underneath.
The self-order kiosk: entirely CSS-driven and timed with animation-delay so it plays out like a little sequence on page load — "Can I take your order?" types itself out letter by letter using the classic width: 0 → Nch + steps(N, end) typewriter trick (no JS, no per-letter markup), the "TAP TO ORDER" button pulses with an expanding-ring box-shadow plus a radial-gradient "ripple," and a receipt slides down and prints its order number one digit at a time, torn edge included via a repeating diagonal-gradient background.

The biggest lesson: getting the shared character mechanics right first (float, blink, squish, sparkle burst) meant each new food was mostly "draw a shape and drop it into the rig" — and having that solid meant I could spend the JS-light budget entirely on the kiosk's CSS choreography instead.

Next up: I'd like the kiosk's order number to actually reflect whichever dish you last tapped, and maybe have the characters glance toward the kiosk when its button pulses.

Thanks for reading — go tap the kiosk. 🍙

Women in Tech: Global Map 🌍💖

Laura Norwood — Fri, 17 Apr 2026 15:11:07 +0000

This is a submission for Weekend Challenge: Earth Day Edition

What I Built

Women in Tech — Global Map 🌍💖

An interactive, pixelated 3D globe that visualizes the percentage of the tech workforce that is female in countries around the world. The project highlights the global gender gap in technology through a beautiful pink-themed, retro-pixel aesthetic.

Features

3D Rotating Globe — A low-poly, flat-shaded icosahedron globe that auto-rotates and can be dragged to explore
57 Country Data Points — Pixelated box columns rise from each country, with height and color mapped to female tech participation rates
Interactive Tooltips — Hover over any country marker to see its name, percentage, region, and a progress bar
Stats Panel — Live stats including global average, country count, highest (Philippines 46%), and lowest (Pakistan 9%)
Pixelated Retro Style — Low pixel ratio rendering, flat shading, scanline overlay, "Press Start 2P" pixel font, and crisp-edges rendering
Pink Aesthetic — Entire color palette in shades of pink, magenta, and rose — from the deep dark background to glowing markers and star field

Demo

Open index.html in any modern browser — no build step or server required!

Code

GitHub Repo

A single index.html file using:

Three.js (v0.170) for 3D rendering via ES module imports from CDN
OrbitControls for drag-to-rotate and scroll-to-zoom interaction
Pure CSS for the pixel UI, scanline overlay, and pink theme
Inline data sourced from World Bank, UNESCO, Deloitte, and McKinsey reports (approximate figures)

How I Built It

The globe is an IcosahedronGeometry with flat shading to get a low-poly, pixelated look. The renderer pixel ratio is intentionally set low (1/3) so the entire canvas renders at a fraction of screen resolution and is scaled up with image-rendering: pixelated — giving everything that chunky retro-pixel feel.

Each country is represented by a BoxGeometry column positioned on the globe surface using lat/lon → spherical coordinate conversion. Column height and color both encode the female tech workforce percentage, creating a gradient from deep magenta (low %) to bright pink (high %).

A raycaster handles mouse hover detection on the 3D markers, showing a pixel-bordered tooltip with country details. The scene includes a pink star field, latitude/longitude grid lines, a glow shell, and a CSS scanline overlay for extra retro vibes.

Prize Categories

Best Use of GitHub Copilot

Useless Enterprise App

Laura Norwood — Tue, 07 Apr 2026 11:31:25 +0000

This is a submission for the DEV April Fools Challenge

What I Built

I built a Useless Enterprise App™ that looks dangerously close to something you’d be forced to use at work… but is entirely designed to waste your time.

It’s a React-based “Business Request Alignment Interface” that simulates a full corporate workflow, complete with forms, approvals, dashboards, and system feedback. None of it actually achieves anything.

Key features (all technically functional, strategically pointless):

A Save button that runs away from you when you try to click it
A form that introduces new mandatory fields after submission
A fake approval process requiring an “Approval Readiness Reference Code” that never existed
A progress bar that confidently tracks nothing
A system status panel that cycles through corporate nonsense like “Consulting the alignment committee…”
Error messages such as: “Success could not be completed successfully”

It’s not broken. It’s just… like this.

Demo

Demo: Best experienced emotionally rather than functionally.

Run locally and experience:

Fill in the form like a responsible adult
Try to click “Save” while it actively avoids you
Discover a new required field that wasn’t there before
Finally submit… and get a failure toast anyway

It’s basically every bad internal system distilled into one app.

Code

Lanthanum89 / useless-enterprise-app

Submission for the DEV April Fools Challenge. A React-based “Business Request Alignment Interface” that simulates a full corporate workflow, complete with forms, approvals, dashboards, and system feedback. None of it actually achieves anything.

This is a submission for the DEV April Fools Challenge

What I Built

I built a Useless Enterprise App™ that looks dangerously close to something you’d be forced to use at work… but is entirely designed to waste your time.

Key features (all technically functional, strategically pointless):

A Save button that runs away from you when you try to click it A form that introduces new mandatory fields after submission A fake approval process requiring an “Approval Readiness Reference Code” that never existed A progress bar that confidently tracks nothing A system status panel that cycles through corporate nonsense like “Consulting the alignment committee…” Error messages such as: “Success could not be completed successfully”

It’s not broken. It’s just… like this.

Demo

Demo…

View on GitHub

Everything behaves exactly as designed, which is the problem.

How I Built It

Tech stack:

React (functional components + hooks)
Pure frontend state, no backend, no persistence, no consequences
Tailwind for layout, plus aggressively offensive inline styling

Approach:

Model real enterprise UX patterns (forms, approvals, dashboards), then deliberately sabotage them
Focus on process over outcome, just like real enterprise software

Design choices were intentional:

Comic Sans + pastel gradients to simulate “legacy system that somehow still exists”
Overcomplicated UI hierarchy with zero payoff
Feedback loops that sound important but do nothing

Prize Category

Community Favourite

Because nothing unites developers faster than shared trauma from systems like this.