@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.

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

Using modern CSS features to create a custom range slider with a tooltip. There is no JS to update the values, it's pure CSS with minimal HTML 😎

Powered by Scroll Driven animation, Anchor positioning, @​property and more! 🤩

Demo: https://codepen.io/t_afif/full/JjqNEbZ via :codepen: @codepen

Online Version: https://css-tip.com/range-slider-tooltip/

It's Chrome only for the tooltip but the range slider works fine in all the browsers.

Showing two range slider with a tooltip containing the selected values. From the linked demo.

zachleat, to random
@zachleat@zachleat.com avatar

is your tech stack a metaphorical cybertruck trunk slowly closing on your fingers? in this ted talk I will…

eleventy, to random
@eleventy@fosstodon.org avatar

Sustainability Fundraising Update №1; Week 1:

After seven days — our recurring contributions have grown from 36% of our goal to 54%! We’re on our way to independent sustainability in 2024! Continued gratitude to the helpers!

https://www.11ty.dev/blog/sustainability-fundraising/

bramus, to random
@bramus@front-end.social avatar

🥹

Very exciting news! This is the thing that gives Custom Properties their SUPERPOWERS.

Yes, you can use them to enforce type safety, limit their inheritance, and set up a default but what I like most about them is that YOU CAN ANIMATE/TRANSITION REGISTERED CUSTOM PROPERTIES.

https://botsin.space/@intenttoship/112519846001484140

zachleat, to random
@zachleat@zachleat.com avatar

Fascinated by the cycle-zone component on https://craftcms.com/demo (from @craftcms) that rotates through a few images as you hover over different portions of the card.

(This make an excellent web component!)

mayank, to random
@mayank@front-end.social avatar

one day we'll have "real" HTML modules and CSS modules

(i can hope)

mayank,
@mayank@front-end.social avatar

sometimes i get frustrated that we still don't have important features like HTML modules. (the need is so obvious!)

my frustration comes from multiple angles:

  • in absence of platform features, we need to reach for tools (which can suck majorly).
  • proposals are skewed by library maintainers/users who sometimes have strong one-dimensional opinions on how the platform should work.
  • discussions are dominated by the needs of big tech companies, alienating those who don't have the same constraints
doctype_jon, to random
@doctype_jon@mastodon.social avatar

Everything about this is so good https://eva.town/posts/design-outside-the-computer

matuzo, to random
@matuzo@front-end.social avatar

“And then, my dear kids, the bad blue wolf invented React and everyone, except for a privileged minority, was fucked for the next 15 years”

davidbisset, to CSS
@davidbisset@phpc.social avatar

.counter_with_drawers {
margin-left: -40px;
}

adactio, to random
@adactio@mastodon.social avatar

Journal: Fluid

Going from delight to default in one straight line.

🔗https://adactio.com/journal/21146

chriscoyier, to random
@chriscoyier@front-end.social avatar

jQuery plugins depended on jQuery, and when jQuery went out of favor, they ended up in the junkyard.

There is all sorts of componentry built exclusively on React, limiting it to React-based sites. As React goes out of favor, they will end up in the junkyard. (Same with any framework-specific extension.)

But with Web Components... it seems like the story will end differently. If they are built without dependencies, they might just live as long as the web does.

westbrook,
@westbrook@mastodon.social avatar

@chriscoyier That's not wholly true. jQuery plugins and React components fail over time because they belong to their dependencies, not the other way around.

A properly encapsulated can have just any dependencies it wants as long as they don't leak. In fact, the internal dependencies could be jQuery or React as long as the consuming app doesn't need to know about it.

There are performance realities there, but that's true today as much as it would on the last day of the web.

MaxArt2501,
@MaxArt2501@mastodon.social avatar

@chriscoyier I think that, more than just a "dependency", jQuery for jQuery plugins is a prerequisite. Just like React is for React component libraries.

OTOH, Web Component libraries have Lit (or FAST or Stencil...) as a "real" dependency, meaning they uses it for reactivity and such. Even if Lit goes out of favor, the components built with it will always be usable in whatever environment. That's a key difference.

callionica, to webdev
@callionica@mastodon.social avatar

What if <video> and <audio> had a new attribute scope with possible values page and session?

scope="page" would be the assumed default and cause the media player to work as it does today.

scope="session" would preserve the underlying runtime state of the media player across page loads in the same session allowing uninterrupted audio playback and scriptability.

There’d be a lot of details to work out, but that’s the basic idea.

eleventy, to random
@eleventy@fosstodon.org avatar

All of the talk videos are now published on YouTube (and in a playlist): https://www.youtube.com/playlist?list=PLwhCq3ZFGOGgetCSWisU2pkl9AFwQVxWJ

(Each talk page on the conf.11ty.dev web site has a link to the respective video too)

smth, to random
@smth@mastodon.social avatar

Two of my takeaways from the recent @eleventy International Symposium on Making Web Sites Real Good were that I should use web components, and I should update my homepage. So I added a new cover image and rebuilt the <cover-switcher> https://smth.uk/

scottjehl, to random
@scottjehl@mstdn.social avatar

New Post!
Just Speculating: You May Not Need a SPA framework

https://scottjehl.com/posts/speculation-rules/

bramus, to random
@bramus@front-end.social avatar

What's new in view transitions? (Google I/O 2024 update)

In this video I introduce you to cross-document view transitions for MPA along with two improvements that allow you to more easily work with view transitions in general.

https://developer.chrome.com/blog/view-transitions-update-io24

leaverou, to random
@leaverou@front-end.social avatar

The 2023 results are finally out!

Enjoy insights from 22K responses about the state of the web platform, from HTML and interactivity to , PWAs, and a lot more.

This project is a monumental effort from people across the world. We even designed novel data collection UIs to gather the data we needed while minimizing friction, which I plan to write a case study about soon.

https://2023.stateofhtml.com/en-US

justaspec, to Podcast
@justaspec@intuitivefuture.com avatar

The lads @jaredwhite & @ayush are back!

On this episode:

Where data lives, how to retrieve data, how to change data, how to track updates to data and provide feedback accordingly to the user…in other words, state.

can necessitate a wide range of possible options for how you manage state, and in this episode we look at many of the ways this may work from the server to the client and back again.

Also…how the blazes do you pronounce JWT?! 😂

https://justaspec.buzzsprout.com/1863126/15074787-this-state-of-affairs

tdp_org, to webdev
@tdp_org@mastodon.social avatar

My pals in BBC World Service have been doing some awesome work on "lite" versions of their news articles (other page types to follow).
They essentially skip the Server-Side React hydration which means you end up with a simpler HTML+CSS page, no JS.
Page sizes drop significantly:

Screenshot of a BBC World Service Mundo "lite" page with Dev Tools open showing bytes transferred and total as stated

sachagreif, to random
@sachagreif@hachyderm.io avatar

I'm very excited to share that the State of HTML 2023 survey results are now live!

https://2023.stateofhtml.com/

css__cafe, to random German
@css__cafe@mastodon.social avatar

display: nun

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

New video out on The Spicy Web! 🌶️

Here be a fresh (and tingly!) take on reaching for -first tools like htmx, Turbo, Unpoly, etc. and why you might just want to (spoiler alert!) go vanilla. 🍦 After all, we have so many great browser-native APIs at our disposal now!

Sign in or sign up via Intuitive+ to watch:
https://www.spicyweb.dev/videos/2024/ajax-back-in-action/

alvaromontoro, to random
@alvaromontoro@front-end.social avatar

New comiCSS cartoon: Framework Fans vs Framework Bros
https://comicss.art/comics/140/

It was inspired by a Pizza Cake Comic cartoon (linked in the source code).

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

#CSS tips for understanding and memorizing alignment stuff.

  • align vs justify: think of an inline flow, where justify keyword of text-align controls the text in an inline direction. And for align think of vertical-align, which controls it over the block axis.

  • items vs content: an “item” is something that can be controlled by itself, via -self properties. content is a single entity, where you align the whole chunk of things, without a way to override it per item.

  • 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
    •