我整理了一下vanilla js 背后的有趣故事 | what is vanilla js

不知道你有没有在网上看见过 #vanillajs / vanilla HTML 这样的表述，我时不时的看见但是又不知道是什么意思，前几天又看见一个数据库产品的文档中提到 vanilla js 的使用方法，就去探索了一番。

vanilla，意思是香草，在 vanilla js 这个表述中表示 plain，standard，你可以理解成纯血原生 #Javascript，不需要任何第三方库，只使用 JS 标准功能和语法。

我写了一篇公众号，讲述背后的有趣故事关于为什么叫这个名字，以及还有人专门给这个【 JS 库】做了一个调侃味极浓的官网。

公众号文章：https://mp.weixin.qq.com/s/KOmKDsfcwK-vHLUKHOINeg

React-like functional webcomponents, but with vanilla HTML, JS and CSS

Introducing Dim – a new #Framework that brings #ReactJS-like functional #JSX-syntax with #VanillaJS. Check it out here:
Project: https://github.com/positive-intentions/dim
Website: https://dim.positive-intentions.com

My journey with #WebComponents started with Lit, and while I appreciated its native browser support (less #Tooling!), coming from #ReactJS, the class components felt like a step backward. The #FunctionalProgramming approach in React significantly improved my #DeveloperExperience and debugging flow.

So, I set out to build a thin, functional wrapper around #Lit, and Dim is the result! It's a #ProofOfConcept right now, with "main" #Hooks similar to React, plus some custom ones like useStore for #EncryptionAtRest. (Note: #StateManagement for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore #Passwordless options like #WebAuthn/#Passkeys).

You can dive deeper into the #Documentation and see how it works here:
Dim Docs: https://positive-intentions.com/docs/category/dim

This #OpenSource project is still in its early stages and very #Unstable, so expect #BreakingChanges. I've already received valuable #Feedback on some functions regarding #Security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!

Does anyone have good reading on how major frameworks make their SPA url router? I'm not talking about a hash router, I'd like to see how (with the server configured properly) the JS handles all the things (history pop state changes, link clicks, etc)

I recently tried out Turbo: a #JS library promising to give a Single Page App feel to a static website - without having to write JS code.

My take? It doesn’t offer much for experienced JS devs, but can be a solid option for devs who aren't comfortable with vanilla frontend JS.

More on it here: https://marmelab.com/blog/2025/04/18/give-a-spa-feel-to-your-static-website-with-turbo.html

Teskoanno is now live! My #threejs powered 3D N-Body simulator is now up - it's a dev build, and not optimised but it works! I tested it on mobile - UI needs to work, but runs well on my Pixel 8 Pro.

Would love to get #feedback

https://tanepiper.github.io/teskooano/

#gamedev #astronomy #webDev #webComponents #vanillaJS #opensource

(Bonus debug tools screenshot)

bon, #help, je sais pas comment formuler ça efficacement pour une recherche web alors je vais juste poser ma question ici, avec plein de mots :
Comment je peux faire un carousel d'images en popup - je m'explique.
J'ai une miniature, et au clic je veux que ça ouvre un modal ou whatever, par-dessus la fenêtre active, qui contient le reste des images du carousel. Avec les flèches de navigation itout

#HMTL #CSS #VanillaJS only !

petit schéma pour visualiser l'idée

Edit : j'ai la solution !!

Is there a suite of vanilla JS web components implemented as classes somewhere on https://npmjs.org? Like, what if I want a Dark Mode switch or a tags input field with auto-complete that I can import (via import maps, of course), is there a project or namespace where I could find those?

How many vanilla.js/zero-dependency reusable components are there on https://npmjs.com? I can easily write my own components for simple things, like a Dark Mode switch, as plain old JavaScript classes that directly manipulate the DOM. Why can't I simply add a bunch of these components to my project and use import-maps to load them?

Created an #Eleventy plugin to zoom images on fullscreen.

When hovering, the magnifying glass indicates to the user that the img can be enlarged. A click and it appears enlarged, through a fade-in animation. A click outside the image quit the enlarged view.

Under the hood, a #VanillaJS inserts `<dialog>` #HTML modal right before the image. Outside of the modal click =`dialog` disappears.
Styled via #CSS `@starting-style`.

https://www.npmjs.com/package/eleventy-plugin-img-magnifier

@eleventy @zachleat

Just came across CRXJS: A tool that helps you make Chrome Extensions using modern web development technology.

Have any of you tried it? What was your experience with it?

https://crxjs.dev/vite-plugin#why-crxjs

#CRXJS #Chrome #React​ #Solid​ #VanillaJS​ #Vue

I love this so much: https://jan.miksovsky.com/posts/2024/11-12-momboard

I'm stupidly happy to have solved this puzzle:

Learned a couple new-to-me CSS properties. Had a sudden brainstorm wondering if I could do a tab group almost entirely in CSS using details elements.

Turns out I can, except with just the itty-bittiest amount of JS to make the tabs display mutually exclusively. Also, some shenanigans with non-shadow-DOM web components just because I can.

#html #css #js #webdev #vanillajs #webcomponents

https://codepen.io/lmorchard/pen/eYqWmvV

Plain Vanilla

by Joeri Sebrechts @joeri_s

An explainer for doing web development using only vanilla techniques. No tools, no frameworks — just HTML, CSS, and JavaScript.

#VanillaWebDev #webdev #html #css #js #VanillaJS #noframeworks

https://plainvanillaweb.com/

Enough progress for the day!

back to landscaping:
lava pool by the moon

Unsatble - last part of my sat research

Minting now @ fx(hash)

Open edition @ 1 TEZ
Closing @ 01.08.2024

#onchainsummer #generative #vanillajs

https://fxhash.xyz/generative/31028