Return of the creative web
Why many of us got into the field in the first place—and how new browser APIs, mixed reality, and indie communities are reviving the joy.
The video opens to a blank screen. One by one, elaborately designed MySpace profiles float in from the sides, top and bottom and settle in a masonry grid. The profiles are themed to show interests like Soulja Boy, Lindsay Lohan and Twilight. They are visually noisy and intensely colorful, but each profile is unique and expresses personality.
The GIF shows a clip from Sister Act. In it, Sister Mary Patrick and Deloris, disguised as a nun, are performing community service in a tough neighborhood in San Francisco. Sister Mary Patrick dances as if possessed by a joyful spirit while Deloris and a local woman look on in confusion.
The video opens to a blank screen. One by one, elaborately designed Geocities webpages float in from the sides, top and bottom and settle in a masonry grid. In one webpage littered with hearts and disembodied lips, an amorous and chess-loving man cheerfully describes himself to any ladies on the internet who might come across his page. Another is littered with no fewer than 30 frame-embedded pages. All pages are densely cluttered, brightly colored and largely inaccessible. And yet, looking at them, you get the sense that you learn a bit about their creators from the choices they made in designing their pages.
A brown-haired woman with bangs and a dark blazer talks to someone offscreen from within a plain room with beige walls and brown slat blinds. She shakes her head as she speaks, and a caption reads: “I just can’t believe it’s not the 90s anymore”.
The slide opens to a quore by C.A.R. Hoare:
There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.
Below the quote is a comment: “The amount a new developer is expected to get familiar with in order to be productive has only grown over time. Is it any wonder new devs get fatigued with the complexity?”
As the video progresses, the logos of various technologies float onto the screen and settle in place. At first, they are a manageable amount: HTML5, CSS3, JavaScript, etc. As more and more technologies flood the screen (CSS frameworks, pre- or post-processors, programming languages, runtimes, server software, web frameworks, database management systems, build tools, version control software, transpilers, etc.), it becomes impossible to see the original text on the slide. At the end, the Golang gopher peeks their head up from the bottom of the slide, looking at the above smörgåsbord of tools in horror.
The GIF is a clip from pop-punk singer-songwriter Avril Lavigne’s debut single “Complicated”. In it, Avril and her crew of skater bois rock forward and back while she throws her arms up in frustration. She asks (and the caption reads) “Why do you have to go and make things so complicated?”
The GIF is a clip from the sitcom Malcolm in the Middle. In it Malcolm and his brothers, Reese, Dewey and Francis, are seated in a golf cart. The boys are dressed for a formal occasion in suits and ties. Malcolm looks from side to side as the golf cart slowly sinks into a pool of water while the other boys remain unfazed.
A man in a suit and tie is seated in an office chair at a wrap around desk in a boring office cubicle with blinds blocking out the only natural light and view of the outside world. The man is animated poorly, jerking around wildly in distinctly unnatural motions. As he does this, he slaps his computer monitor into the air, knocks his laptop to the floor and throws a book. The physics for all of these items are improperly simulated, to the effect that they act as though they were made of styrofoam. The sense conveyed is that the man is done—he’s exhausted the very last fuck he had to give.
The GIF is a clip from the Good Burger sketch from the kids’ comedy show All That. In it, fast-food cashier Ed spins forward to face the viewer (standing in for the customer) before delivering his signature opener: “Welcome to Good Burger, home of the Good Burger. Can I take your order?”
The GIF is the same clip from the sitcom Malcolm in the Middle that we saw in slide 8, only played in reverse. In it, a golf cart is mostly submerged in a pool of water. It slowly rises out of the water to reveal Malcolm and his brothers, Reese, Dewey and Francis, seated inside. The boys are dressed for a formal occasion in suits and ties. Malcolm looks from side to side as the golf cart rises while the other boys remain unfazed.
The GIF is a clip from golfing comedy Happy Gilmore starring Adam Sandler. In it, Potter coaches the titular Happy on managing his emotional state as he golfs. He gestures with his hands as he says: “A lot of pressure. You gotta rise above it. You gotta harness in the good energy. Block out the bad. Harness energy. Block bad. Feel the flow. Feel it.”
Neocities
Geocities rises again.
Neocities is a new community built on the legacy of Geocities.
Giving users free static websites (only HTML, CSS and JavaScript), a built in HTML editor and a growing community, Neocities invites creativity, learning the basics and free expression.
Sharing Interests
People from around the world can share whatever they want however they want. The only limit is their desire to learn.
First Steps
New coders practice their craft and apply it to their professional goals.
Quote from Enda Kenny (Taoiseach, Ireland):
Learning to code is learning to create and innovate.
Quote from Andy Hunt:
No one in the brief history of computing has ever written a piece of perfect software. It’s unlikely that you’ll be the first.
Like Myspace, CodePen allows users to design their profiles with CSS.
Harkening back to the Myspace profiles popular a decade ago, CodePen users can set a pen to serve as custom CSS for their profile page. Anything from the mundane to the spectacular or wacky is encouraged.
Remix
Fork or “remix” anyone else’s work with one click and build in a Google Docs-like collaborative editor.
Glitch provides a unique intersection of power and ease.
Build together without worrying about your version control and deploy with one click with Glitch’s free community centered around open source creativity.
The GIF is a clip from Reading Rainbow. In it, Levar Burton, a librarian and a young girl dance happily in the aisle of a library. They point to the stacks of books on either side like treasures.
Art
Canvas API group
Speech
Speech Recognition and Speech Synthesis APIs
Animation
Web Animation API
Immersion
WebVR and WebXR Device APIs
Canvas API makes art on the web more interactive.
The Canvas API allows for manipulating camera, mouse and touch inputs to create artwork, apply filters to photos, or accomplish feats like QR code scanning and motion detection.
The GIF is a clip from Billy Madison. In it Adam Sandler’s character, dressed like an elementary school student, stands in front of a chalkboard that lists the week’s homework assignment. He raises his arms in the air triumphantly while his face takes on an aggressively ecstatic expression. He shouts: “I am the smartest man alive!”
Web Animations API makes CSS more powerful.
It previously took large amounts of JavaScript, potentially slowing sites down, to implement features like the one seen in Rachel Nabors’ Falling Down the (WAAPI) Rabbit Hole.
Web Speech APIs give you a voice on the web and allow the web to talk back.
Web Speech Recognition API and Web Speech Synthesis API
The speech recognition API processes speech from the device microphone, and the speech synthesis API allows speech creation. This API finally brings to the web capabilities that our phones have had for years.
The GIF is a clip from The Waterboy. In it Rob Schneider’s character is holding a torch, standing among a mob gathered outside the hospital where Adam Sandler’s character is visiting his mother. He points his index finger in the air and confidently declares “You can do it.”
Adapting A-Painter to WebXR
A responsive web-app that works in AR and VR
A quote from Martin Fowler:
Any fool can write code that a computer can understand. Good programmers write code that humans can understand.
Build WebVR with A-FRAME: Hello World
A-FRAME is an open-source framework for developing VR (and now AR) for the web. Based on HTML, it is easy to read, and simple to get started.
The GIF is the Numa Numa internet meme video featuring vlogger Gary Brolsma cheerfully lip syncing and dancing to O-Zone song “Dragostea Din Tei.”
The GIF is a montage of Kenan Thompson’s character Pierre Escargot from the All That sketch comedy show. He sits in his signature bathtub wearing a raincoat and flippers.
The GIF is a clip of Kenan Thompson and Kel Mitchell as themselves, dancing in front of an audience and a giant neon guitar.
A quote from Patrick McKenzie:
Every great developer you know got there by solving problems they were unqualified to solve until they actually did it.
Environments & Editors
Learn HTML, CSS & JS
WebXR & Web APIs
- aframe.io
- mixedreality.mozilla.org
- experiments.withgoogle.com/collection/webvr
- webvr.info
- ~~webvr.rocks~~ - no longer around, no archive
Communities
Contests
Miscellaneous
The GIF is a clip from The Water Boy. In it Adam Sandler’s character, Bobby Boucher, smiles at his girlfriend, Vicki, who is just out of view behind the camera. He nods and says: “Yes...yes. This is another first for me and I...I appreciate what you’re showing me right now.”
Chazona Baum
Senior Apprentice Technologist, MAXX Potential
Thank you
chazona@chazonabaum.com
On twitter @chazonacodes (now on Bluesky at @chazonabaum.com)
Did you enjoy this article?
Recommend it — Standard Reader surfaces well-loved writing to more readers across the network.