One of the fun things about playing with the new HTML-in-Canvas API is that it lets me revisit all sorts of cool ideas I’ve seen in the past and wished I could implement on native elements.
Like this one, based on Paola Demichelis article from about a year ago.
(Links 👇)
HTML in Canvas API is NUTS
code showing nested media query
nested media queries feel great, i never really liked having a bunch of code, then a bunch of media queries at the bottom. keeping everything together feels cleaner and easier to understand
pawelgrzybek.com/native-css-n...
Real DOM content in a canvas: fully searchable, translatable, inspectable.
You can have forms, add WebGL effects & much more.
Imagine if this was a customizable select 🤯
A little WIP exploration (not finished) for a very exciting API.
github.com/WICG/html-in...
Had someone let me know about a couple of typos they found while going through the course, and tell me they were happy to find them because it meant they knew I was writing the lessons and not using AI 😅
Bending a straight line using pure CSS?! 👀
Another cool demo in progress powered by border-shape. It's coming to @developer.chrome.com next week! 🤩
come write songs with us and nerd out about music theory on April 16th. you can ask @lilgreybirb.bsky.social how the class was!
sign up: lightninglessons.com/classes/writ...
we're running the next session of the songwriting workshop "Write a song using music theory" starting April 16th
you can sign up at lightninglessons.com/classes/writ...
I'm looking for excellent Svelte / SvelteKit contractors in the US with current availability. If that's you, slide into my DMs or email me at ben.werdmuller@propublica.org.
thanks for the kind words!
For #musicians who wanna improve #songwriting #musictheory #guitar skills, check out Lightning Lessons by @devinlane.com
I'm currently enjoying this breakdown of Britney's classic "Baby One More Time"
I'm finally old and secure enough to enjoy the song unironically
m.youtube.com/watch?v=6Y2l...
We're thrilled to release the #LongCovid Treatment Guide! This is a collaboration with @rthm.bsky.social to help patients & providers explore treatment options together.
The guide focuses on 24 medications, but includes a few other interventions for breadth /1
terminal GUI showing a different/wrong node version than the terminal output of `node -v`
the correct node version is displayed in the terminal GUI
in case you're a nerd and dislike that your @ohmyposh.dev theme shows the wrong Node version after you update, `oh-my-posh cache clear` might just save you 🫡
the `aria-expanded` attribute indicates if the control (accordion button in this case) is expanded or collapsed, and whether or not the controlled elements (the accordion children) are displayed or hidden
developer.mozilla.org/en-US/docs/W...
accessibility: accordions
In an accordion you can pass an `aria-expanded` attribute to the button controlling the opening/closing of accordion children. You can connect this to the same state controlling the display of the accordion children, for example:
`aria-expanded={isActive}`
MDN example showing the <del> tag with strike through
TIL about the HTML <del> tag: indicating something that has been deleted from a document, which will render with strike through by default
developer.mozilla.org/en-US/docs/W...
nice, let's do accountability buddy checkins!
QR code for frontend mentor design challenge
decided to do one of those @frontendmentor.io challenges--i'm doing so much full stack / state mangement work, i was wanting to just look at a design and built it
qr-component-dlane.netlify.app
Bots thwarted. Only after they sent about 120 emails in my name 🤦♀️
I used `position: absolute; left: -9999px; opacity: 0;`. I didn't use `display: none` in case a bot was set up to detect this. I called this input field "phone" just to keep it believable.
On my server I said "if we get a submission to the phone field, throw it away"
I finally decided to add a "honeypot".
This is an input field in the form that you hide, and expect that no human user would fill in. A bot automatically fills this in and then you can safely throw away that submission.
I tried deprecating HTTP/0.9 and HTTP/1.0, the idea being maybe an old or poorly written bot is using these older protocols.
this didn't work
I tried appending a # hash to the form's action URL, the idea being that if the bot was old or poorly written it would submit the wrong URL (and a browser just throws this away)
this didn't work
What do to? Akismet seems cool but was there a simpler solution?
Went through this site: www.ctrl.blog/entry/detect...
List of a bunch of gibberish names and random emails
No, you did not go viral, you got bots 😅.
Email stating that this user is 80% of the way to their daily quota of 200 emails
A few days later I got an email from Resend (who I'm using to send emails) that I was almost hitting the max allowed emails in a day. Strange...that's gotta be a lot of users. Did I go viral 🤩
The features works like this: submit your name and email, and your friend's name and email. That hits my backend, creates one promo code for each user, and sends each user an email with their promo code.
