@vanilla@social.spicyweb.dev avatar

vanilla

@vanilla@social.spicyweb.dev

Vanilla has never tasted so hot. Join a fabulous community of web developers learning how to use “vanilla” web specs like HTTP, HTML, CSS, JavaScript, & Web Components.

Produced by @jaredwhite

This profile is from a federated server and may be incomplete. Browse more on the original instance.

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

Sometimes need to know what’s happening inside of them.

Whether you’re working with the concept of “slots” or just plain ol’ , you may need to react to changes imposed from without.

Thankfully, the native platform provides a solution in the form of MutationObserver, an API which is so powerful it can beat at the heart of entire frameworks (Stimulus being but one example).

examples by @raymondcamden and @jaredwhite:

https://thathtml.blog/2024/03/more-fun-with-web-components-and-mutationobserver/

vanilla, to CSS
@vanilla@social.spicyweb.dev avatar

It seems hyperbolic to keep referring to new features as "gamechangers" but…

…Container Style Queries is indeed a gamechanger. 🙌

Chromium browsers and now Safari TP have added support…Firefox when? Hopefully soon! 🤞

⚙️ elopers, add some 🦸🏽‍♀️ superpowers to your CSS variables:

https://thathtml.blog/2024/03/superpowered-container-style-queries/

vanilla, to javascript
@vanilla@social.spicyweb.dev avatar

For a long time, developers would need to query for a submit button inside of a form—or create one if need be!—and then call click() on the button in order to programmatically submit a form with the same lifecycle that a user submission would get.

To solve this, a new method was added to the Form API: requestSubmit().

Check out the CodePen by @raymondcamden demonstrating the differences between this and the old submit() method.

https://thathtml.blog/2024/03/probably-time-to-use-requestsubmit/

starshaped, (edited ) to random
@starshaped@labyrinth.social avatar

I'm working on an @eleventy project at work today AND I get to rip out all the Tailwind from the previous site. I'm living the dream, folks.

vanilla,
@vanilla@social.spicyweb.dev avatar

@starshaped @eleventy Oh that IS fun. 🤩

DavidDarnes, to random
@DavidDarnes@mastodon.design avatar

Little bit of news:
Next month I will be wrapping up my role as Team Lead on Nord Design System at Nordhealth.

So proud of the work we've done and it's been a privilege to have worked alongside the rest of the Design System team, past and present (cc @ariel, @elwinvaneede, @WickyNilliams & @bellahabib). Here's to the best DS team ever! 🥂💙

vanilla,
@vanilla@social.spicyweb.dev avatar

@DavidDarnes @ariel @elwinvaneede @WickyNilliams @bellahabib Bravo! An incredible set of accomplishments.

vanilla, to random
@vanilla@social.spicyweb.dev avatar

Something is rotten in the state of the internet. 🧐

On JavaScript bloat in 2024 💩

https://tonsky.me/blog/js-bloat/

vanilla,
@vanilla@social.spicyweb.dev avatar

@hs0ucy Would be better if it were using loading=“lazy"

vanilla, to random
@vanilla@social.spicyweb.dev avatar

Declarative Shadow DOM: It's as easy as Firefox 123! 🎉

https://www.mozilla.org/en-US/firefox/123.0/releasenotes/

davatron5000, to random
@davatron5000@mastodon.social avatar

😍 The art direction on this post! The content on this post! [gasps loudly] https://www.theverge.com/c/23194235/ai-fiction-writing-amazon-kindle-sudowrite-jasper

vanilla,
@vanilla@social.spicyweb.dev avatar

@davatron5000 Incredible!

thomasfuchs, to random
@thomasfuchs@hachyderm.io avatar

Forgot that XP still had a DOS-based installer

vanilla,
@vanilla@social.spicyweb.dev avatar

@thomasfuchs so! many! gradients!

mia, to CSS
@mia@front-end.social avatar

Converting to use BEM syntax is a lossy transformation

vanilla,
@vanilla@social.spicyweb.dev avatar

@mia BEM gets clunky and frustrating real fast—so much so that my theory is it’s often a driving force towards running away from stylesheets altogether and into the arms of Utility Class All the Things™. Embracing modern & semantic CSS features while eschewing extremes on either side is the right path forward.

w3c, to random
@w3c@w3c.social avatar

Did you know that Web Consortium's impact even extends beyond this planet?

NASA regularly uses W3C standards in both the Spirit and Opportunity Mars rovers and space exploration missions. 🪐

vanilla,
@vanilla@social.spicyweb.dev avatar

@w3c so…name change to GWWC? (Galaxy-Wide Web Consortium) 😎

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

Sorry be the bearer of bad news, but the typical DOM APIs you use to turn strings of HTML into new DOM do not parse declarative shadow DOM (DSD). All those <template shadowrootmode="…"> tags remain just that, template tags. No shadow DOM to be found anywhere.

Until now. 🙌

(coming very soon to a browser near you…)

https://thathtml.blog/2024/01/dsd-safety-with-set-html-unsafe/

vanilla,
@vanilla@social.spicyweb.dev avatar

@EmilVanGalen so…yeah that was a thing at one point, but it looks like it never got standardized and the recommended approach going forward will be to use these new parse/set APIs.

bw, to random
@bw@social.lol avatar

If you’re using Arc browser mainly for the vertical tabs, try Vivaldi with vertical tabs. Similar experience plus doesn’t break “normal browser things.”

vanilla,
@vanilla@social.spicyweb.dev avatar

@bw Also Safari on macOS and iPad can have vertical tabs. There's a lot hiding in the sidebar that's easy to overlook!

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

This is very exciting stuff and now available in Safari TP as well as Chromium-based browsers!

What Prelude-less Scope Is and Why You Want It

https://thathtml.blog/2024/01/preludeless-scope/

vanilla, to random
@vanilla@social.spicyweb.dev avatar

Hot Take Tuesday 🌶️

If you're building your web applications against hosting platform SDKs instead of host-agnostic open source libraries, you are taking on an arguably unacceptable degree of tech debt and vendor lock-in.

Plan your architecture accordingly.

(In case you're wondering what this means, here's an example:

Open source library: Redis

Hosting platform SDK: Netlify Blobs

Use Redis? You can host anywhere. Use Netlify Blobs? You're stuck with Netlify. FOREVER… 😱)

vanilla,
@vanilla@social.spicyweb.dev avatar

@fpsvogel True, and even that last hypothetical is only true if you're using a managed service (like a managed database)…if you're running the library directly on infra you control (via Docker or whatever), the host will always "support" it by default. 🙌

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

The Government Digital Service blog for the UK has published an article about their performance gains across a variety of properties, with “reductions of up to 40% in CSS size on some pages.”

This was accomplished by unbundling styles which are specific to certain pages and not the entire website and loading those styles on those specific pages, instead of loading all of a website’s via a single bundle.

https://thathtml.blog/2024/01/css-performance-page-styles/

vanilla, to CSS
@vanilla@social.spicyweb.dev avatar

Tired: bypass the Cascade of Cascading Style Sheets via our bespoke build tooling and syntax!

Wired: harness the Cascade of Cascading Style Sheets using the power of modern CSS to do your bidding! *

  • aka using layers, declarative shadow DOM, :has, scope, and other awesome features coming online in 2024!

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

How Could I Have Ever Lived Without This…

A riff off of @matthiasott's blog post about new web platform features which seem "too good to be true"…

What are YOUR modern favorites?

https://thathtml.blog/2024/01/how-could-i-have-ever-lived-without-this/

vanilla,
@vanilla@social.spicyweb.dev avatar

@julian @matthiasott Very true! Self-hosting videos is easier than ever, and paid CDNs like Bunny also make it very straightforward to build your "own" streaming service. Businesses really don't need to post any of their content on YouTube anymore (other than for the marketing reach).

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

Better to ask for forgiveness than permission?

You can throw all kinds of random goofiness at browsers and they’ll valiantly trudge along, doing their best to render everything despite the errors.

@jimniels on the benefits of the web's fault-tolerance:

https://thathtml.blog/2024/01/web-dev-forgiveness/

vanilla, to webdev
@vanilla@social.spicyweb.dev avatar

State of Web Development in 2023? Is it though? 🧐

A critical look at Netlify's latest “stats”:

https://thathtml.blog/2023/12/zach-leatherman-netlify-smackdown/

vanilla, to Dom
@vanilla@social.spicyweb.dev avatar

Moar APIs in 2024!

One of the things I love most about all this new talk concerning is how much focus there is on vanilla DOM APIs. 😁

https://thathtml.blog/2023/12/moar-dom-apis/

  • All
  • Subscribed
  • Moderated
  • Favorites
  • •
  • anitta
  • thenastyranch
  • rosin
  • GTA5RPClips
  • osvaldo12
  • love
  • Youngstown
  • slotface
  • khanakhh
  • everett
  • kavyap
  • mdbf
  • DreamBathrooms
  • ngwrru68w68
  • megavids
  • magazineikmin
  • InstantRegret
  • normalnudes
  • tacticalgear
  • cubers
  • ethstaker
  • modclub
  • cisconetworking
  • Durango
  • provamag3
  • tester
  • Leos
  • JUstTest
  • All magazines
    •