Shaw
@shaw
◈ ◈ AKA "shshaw" on Twitter & other platforms ◈ Developer at @codepen.io ◈ Cohost of @keyframe.rs web animation tutorials
I needed to split an ethernet port and all I had handy was an old switch I used for Halo LAN parties. Turns out, ethernet technology has come a little ways since then. 1. 10baseT Switch 2. WiFi 3. Gigabit Switch
I -love- dithering, probably due to the fixation I had with my GameBoy Camera. I last dug that out 10 years ago; might be time for a resurgence... if only there were easier ways to transfer data off.
Not currently possible. Pug doesn't really have a built-in way to include JSON data (that I'm aware of) and fetch is locked down to prevent security issues. That code produces this error if you click into the Pug Block, due in part to the local file reference in fetch instead of a URL.
Working on a CodePen redesign. Fashion and styles repeat themselves every 20 years, right?
Released some updates to the @codepen.io 2.0 Editor to help with Perceived and Actual Performance. In most cases, page weight & load time are nearly identical to/less than the Classic Editor. If you still feel like 2.0 is slower, please send a screenshot like this comparing the two on your setup.
I feel like the vibes of kids software in the 90s and early 2000s were along these lines. Quirky UIs focused on a vibe en.wikipedia.org/wiki/Kid_Pix en.wikipedia.org/wiki/File:Ki...
Just trying to book a haircut and now I'm debugging the website because the login form doesn't work.
Yes! Super handy. That was something I really pushed for to help keep the focus on the important user code. You can even configure it through the Classic Block visual config and the classic.config.json file to add extra styles & scripts, modify the <head> or add classes to the <html>!
Bonus Tip: You can set Default Layout & Orientation in the 2.0 Editor under Settings > Layout if you love the Classic Editor's "Top" orientation.
3. Use the Default Template setting to keep your setup on new Pens. After you've set up a Pen the way you like it, make it a Template and set it as your Default Template so that every new Pen will start with the same Files & Blocks.
This Classic Block Template is a good starting point: codepen.io/editor/pen?t... Or you can right click the index.html file & select rename, or search "Rename" in the Omnibar. You can also use *.pen.pug, *.pen.md, and *.pen.njk to have the same automatic scaffolding with Pug, Markdown & Nunjucks!
2. Rename to index.pen.html to simplify the HTML The processing in 2.0 Pens is mostly based on file extensions (e.g. script.ts = TypeScript). Use *.pen.html to have the CSS & JS linked up & the rest of the HTML scaffolded for you, so you only see the <body> content like the Classic CodePen Editor.
1. Enable Minimal UI from the Control Menu This global setting tucks away the Sidebar to focus in on the Editors & Preview like the Classic Editor. You can still get to the Sidebar by hovering near the edge, clicking the toggle, or using the Omnibar to search for Files/Settings/Shortcuts.
If you love the Classic @codepen.io Editor and want that same feel in the 2.0 Editor, here are some quick tweaks to get you back into familiar territory. Try the 2.0 Editor: codepen.io/editor/pen
Here's an empty version as a Template that you can set as your Default to start all new Pens that way: codepen.io/editor/shsha... Or bookmark this to use it: codepen.io/editor/pen?t...
Blocks can be stacked! Rename your index.html to index.pen.pug and you'll get the same experience you're used to where the style & script are automatically linked and the code shown in the Editor is only what's in the <body>. codepen.io/editor/shsha...
In context: just talking about CloudFlare optimizations. Out of context: Kind of an unhinged thing to say to your boss.
Two ways to simplify the Editor for this case: 1. Set the Blank Classic Template as your Default to have 0 HTML boilerplate / code codepen.io/editor/team/... 2. Enable Minimal UI (Controls > Minimal UI) to hide the sidebar and other UI elements until they're needed. blog.codepen.io/docs/what-ch...
Thanks for the feedback! Anything in particular about the Minimal UI Sidebar Reveal that feels off? Just that the area is too small? Have you tried using the button toggle?
It's definitely cool. Here's a goofy little video of me playing with it, but the github.com/todbot/picos... has some better examples of what it can do.
I've mostly been dabbling in Macropad/MIDI Controller kind of stuff. My biggest build so far has been this MIDI Step Sequencer github.com/todbot/picos... I ordered the circuit board then had to source all the components and solder everything. I definitely need to level up my soldering skills/gear.
Oh dang. This might be the first useful "AI Overview" popping up in a search that I've seen. The info's probably scraped from somewhere, but there's not a basic chord chart showing up in the overall search results.
As a testament to the impact: Here's a screenshot I saved back in 2017 where you picked one of my Pens. Approximately one year later, we were co-workers!