vanilla

vanilla, 1 day ago to CSS

Finally. 😂

(We love ya #CSS 3, but it's high time we were talking about CSS4, CSS5, and beyond!) #WebDev

https://thathtml.blog/2024/05/get-ready-for-css-6/

vanilla, 3 days ago to programming

Last month's exclusive video at The Spicy Web demonstrating a CodePen example of Signals—what they are, how they work, and why frontend frameworks and fans of vanilla #JS alike are adopting them rapid-fire—is now available to view for free! Check it out:

#JavaScript #WebDev #Reactivity

https://www.spicyweb.dev/videos/2024/signals-are-eating-the-web/

sachagreif, 3 days ago to random

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

https://2023.stateofhtml.com/

vanilla, 4 days ago to webdev

New video out on The Spicy Web! 🌶️

Here be a fresh (and tingly!) take on reaching for #HTML-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! #JavaScript #WebDev

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

vanilla, 5 days ago to random

I don't know. Am I? 🤔💭🤖

bw, 6 days ago to random

I’m always looking for good CSS named-colors cheatsheets or references. This one is fun. Please send me ones you know of!

https://austingil.com/css-named-colors/

hi_mayank, 7 days ago to random

the thing i love about CSS is that there are no "CSS bros" in the way that there are "JS bros", "tailwind bros", and even "HTML bros"

thomaswilburn, 7 days ago to random

Prime example of where web components really shine: I'm working on a scrollytelling piece where moving through the document updates state linked to a map background layer. At the bottom there's a graph that appears if you click a school board district. Now I want that to appear in multiple places. Easy: just move that into a custom element, and it takes care of initializing itself wherever I put it. The ability to create reactive islands is deeply underappreciated.

vanilla, 8 days ago to random

Astro's been pushing hard into fullstack framework territory as of late, and has just released an experimental server actions feature. Check it out and offer your feedback:

RE: https://m.webtoo.ls/@astro/112411302831929468

vanilla, 9 days ago to javascript

It’s easy to get confused about how to work with element properties in #JavaScript vs. how to work with element attributes in #HTML.

@jaffathecake to the rescue!

In this article, Jake talks about value types, serialization, reflection, case sensitivity, and a host of other interesting details. #WebDev

https://thathtml.blog/2024/05/props-v-attributes-go/

vanilla, 14 days ago to CSS

Oh, the drama!

Rachel Andrew:

> Chrome is keen to see an implementation of masonry type layouts on the web. However, we feel that implementing it as part of the CSS Grid specification as proposed in the recent WebKit post would be a mistake.

Rachel goes on to explain how the “masonry” layout differs enough from standard grid so as to warrant a different mode.

What do you think? Should masonry be an addition to #CSS grid? Or should it be its own layout mode? #WebDev

https://thathtml.blog/2024/05/masonry-the-rebuttal/

vanilla, 21 days ago to random

One of the truly great things about the Web is how so much of it is just files in folders…and mostly text at that. No mysterious bundles of data goo, no weird hard-to-parse formats. And the best frameworks let you go from A -> B easily with simple understandable conversions.

Markdown -> HTML
Posts -> RSS
Big images -> smaller images
Component styles -> .css file(s)

And then if you use hosting setups which understand how to serve mostly static assets quickly and cheaply, you're golden! 🤩🤘

vanilla, 22 days ago to CSS

Feels like we’ve been waiting for a JavaScript-free solution to content flowing down multiple columns (what some might think of as the "Pinterest" layout) for forever. But the momentum to add a “masonry grid” to #CSS proper is growing, and this layout mode is being prototyped as we speak!

Over at the WebKit Blog, @jensimmons writes about the future of masonry, or “waterfall" layout in CSS and asks the #WebDev community for its feedback:

https://thathtml.blog/2024/04/the-future-of-masonry-layout/

vanilla, 29 days ago to javascript

A look at the future: what could be coming down the pike for #JavaScript?

A list of @TC39 proposals you might want to keep your #WebDev eye on:

https://thathtml.blog/2024/04/coming-to-javascript-near-you/

jimniels, 29 days ago to random

📝 Thanks to an intervention from @chriscoyier I have now provided a slightly better way to consistently navigate across my inconsistent websites.

If, like me, you also suffer from the effects of poor choices in web property architecture, improvement is possible.

I got better in a little less than 4 weeks by making a widget of my floating head.

https://blog.jim-nielsen.com/2024/consistent-nav-across-inconsistent-sites/

vanilla, 1 month ago to webdev

Unpopular (maybe?) #WebDev opinion:

The way to get better at #HTML & #CSS isn't to build complex web applications with frontend frameworks. The way to get better at HTML & CSS is to write content with HTML & CSS.

• Build a blog.
• Build a landing page.
• Build a report.
• Build a portfolio.
• Build lists.

Most web applications are simply content + forms in a fancy UI trench coat. 😅 They just tend to be far more "componetized" — making it much harder to grok the underlying semantics at first.

DavidDarnes, 1 month ago to random

Newly added to my #WebComponents collection: <link-peek>!

Turn any regular anchor link into a rich preview (also known as an ‘unfurled’ link). Can be used with any JSON API and allows for custom templating.

Prefect for creating more visual interest on links without filling the page with additional HTML noise:

✍🏻 https://darn.es/link-peek-web-component/
📦 https://www.npmjs.com/package/@daviddarnes/link-peek

vanilla, 1 month ago to random

Yet

==React==

is still based in a

==DOM==

built on

==object-oriented mutations & side effects==

😎
https://beep.town/@zion/112258607133575939

vanilla, 1 month ago to webdev

Should the web platform offer signals?

That is, the ability to define observable values (signals) which you can implicitly subscribe to in execution contexts (effects) which will then re-run whenever the values change.

That’s the question being asked by a crew of researchers and spec authors led by noted web components expert Rob Eisenberg.

https://thathtml.blog/2024/04/should-the-web-platform-offer-signals/

#WebDev #JavaScript #Reactivity

zachleat, 1 month ago to random

I wonder if y’all can help me out—I’m trying to collect a list of web development communities (not related to any one specific tool or framework), can you reply with your favorites?

(if you don’t have a favorite I will also accept communities you’re familiar with 😅)

vanilla, 1 month ago to webdev

Providing a recap of Interop 2023, @bsmth at @MDN shows us why the Interop initiative is so important, the role MDN developer docs play in keeping #WebDev folks updated as new spec implementations align across browsers, and what we can look forward to in 2024:

https://thathtml.blog/2024/03/interop-2023-documentation-recap/

vanilla, 2 months ago to webdev

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

Whether you’re working with the concept of “slots” or just plain ol’ #HTML, 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 #JS frameworks (Stimulus being but one example).

#WebDev examples by @raymondcamden and @jaredwhite:

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

vanilla, 2 months ago to CSS

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

…Container Style Queries is indeed a gamechanger. 🙌

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

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

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