Shaw

@shaw.city

754 Followers 165 Following

◈ https://shaw.city ◈ AKA "shshaw" on Twitter & other platforms ◈ Developer at @codepen.io https://codepen.io/shshaw ◈ Cohost of @keyframe.rs web animation tutorials https://keyframe.rs

Young child photographed on a GameBoy Camera shown on a Game Boy Color, photographed by an old iPhone.
@keyframers ( Stephen Shaw and David Khourshid ) posing in polyester space suits on the set of Web Dev Challenge.
Using Mario Paint for the SNES to design kick-butt Sign Up & Log In buttons.
@import example of Pen CSS
`Failed to parse URL` error
Mid-2000's style CodePen website design
Comparison between the Classic CodePen Editor and the CodePen 2.0 Editor showing almost identical page size and load times.
KidPix UI
"Failed to fillFrame. Frame is missing uuid" error in browser console
Classic Block visual configuration
The Settings modal in the CodePen 2.0 Editor showing the layout options with a Default Orientation setting.
Template setting under the Controls Menu in the CodePen 2.0 Editor
Rename File option in the Omnibar
index.pen.html file simplifying the HTML in the CodePen 2.0 Editor
CodePen 2.0 Controls Menu with Minimal UI enabled
Walkthrough of enabling a Classic CodePen look & feel in the 2.0 Editor
Screenshot showing default template option in the CodePen 2.0 Editor
Example of the CodePen 2.0 Editor using Classic Block and Pug to produce a basic demo where the Pug input is only what's in the <body>
macOS Software Update dialog showing Tahoe 26.3.1, a 12.87gb software update that "expands external display support"
Screenshot from Slack with the text “Yup. Kill the worker if you need.”
Minimal UI toggle
Minimal UI toggle in CodePen 2.0
Minimal UI Sidebar Toggle button
3D animation for the CodePen 2.0 Public Beta release page.
PicoStepSeq project playing a MIDI Sequence
Raspberry Pi Pico MIDI Step Sequencer
Two images of Spock side by side. One is normal Spock labelled "DOM", and one is Spock with his evil goatee labelled "Shadow DOM."
AI Overview giving chords for a song in Nashville Numbers style with correct keys and modulations.
"Marie Mosley picked your Pen Airport Distance Map" notification from CodePen
"Simulator" app on macOS depicting what appears to be a santa glove holding an iPad
A stack of $5 "Shawbucks", the official currency of Shaw City.
Chrome Dev Tools "Emulate a focused page" checkbox under Styles -> :hov. Description text says "Keep page focused. Commonly used for debugging disappearing elements."
The CodePen Radio intro jingle on Piano
Text with >body< instead of <body> due to mixed up HTML encoding
Awful website called Nintendo Planet with red text on a black background and little substance.
Small calico kitten standing on a laptop looking fricken adorable
Box for the 1990's Sega "Nomad" handheld Genesis
GitHub showing "There aren't any open pull requests" in one area and 10 pull requests in another.
MDN docs stating: Size containment does not offer much in the way of performance optimizations when used on its own. However, size containment means that the size of the size-contained element's children cannot affect the size of the element itself — its size is computed as if it had no children. If you set contain: size on an element, you need to specify the size of the element using contain-intrinsic-size, or the longhand properties contain-intrinsic-width and contain-intrinsic-height, in that order. If no size is set, the element risks being zero-sized in most cases.
CodePen 2.0 Omnibar showing the "Embed Pen" option
Shaw & David whiteboarding
Jason and Stephen bantering on the Web Dev Challenge set. Jason "I feel like I've only heard your voice twice today" Stephen "(sigh) That's probably two times to many." Stephen "When's the part of the show with the physical challenges? Jason "That's coming up actually. We're inflating the sumo suits in the back right now" Stephen "That'll get us immunity, right?" Jason "Yeah" Stephen "Just making sure"
Accept the licence terms there are only 2 things you can't do with the music here; use it to advertise right wing politics or causes, or use it to promote meat, dairy, or other animal products.
Web Safe color table showing 216 shades of colors
Baby onesie with the Boolean Buddies graphic
The first Boolean Buddies sketch, smaller than my thumb.
Bridge riff from Yahweh We Love You
Screenshot from Gmail app with an illustration of empty chairs in different colors with the caption “Nothing in Social”
An old man with worn out shoes riding on a cheap skateboard where a circular cutout in the foam grip tape has a CodePen logo sticker.
Low resolution image of a wooden computer desk with roll-top and a slide out keyboard tray. The desk is packed full with a large printer, a CRT-monitor and a tiny tube television with a Sega Dreamcast and controller connected.
"Subscribe" button on GitHub followed by a "Only Get Notifications If Someone Provides A Real Solution" Button.
Page Views showing 18,550 and more for an old JavaScript library named jquery flipster
Box following the pointer on the page without overflowing. Also has a nice springy snap back into place.
Logo for "Nintendo Planet" designed in MS Paint with a poorly drawn pumpkin under some Super Mario 64 clip art and the text "Happy Fall!!!"
Browsing bookmarks on CodePen
Webcam rendered to <input type="color"> elements, with the user clicking each one to get color values of various objects.
Evernote Apple Subscription going from $34.99 per year to $84.99 per year.
VS Code asking "Do you trust the authors of the files in this folder?"
A CodePen demo in Safari showing a CSS animation of CSS Variables crashing the browser when Dev Tools get opened.