techhub.social is one of the many independent Mastodon servers you can use to participate in the fediverse.
A hub primarily for passionate technologists, but everyone is welcome

Administered by:

Server stats:

4.6K
active users

#vanillajs

0 posts0 participants0 posts today

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

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

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

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

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

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: github.com/positive-intentions
🔗 Website: 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: positive-intentions.com/docs/c

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!

Contribute to positive-intentions/dim development by creating an account on GitHub.
GitHubGitHub - positive-intentions/dimContribute to positive-intentions/dim development by creating an account on GitHub.
Replied to kiara

@kajou solution 100% #HTML #CSS #VanillaJS mais sans le défilement de mon côté (flèches et fonctionnalité de défilement à implémenter de ton côté) :
- insertion dynamique d'un clone de l'image dans un <dialog> via JS
- style image plein écran via CSS

Tout est documenté ici : github.com/teotimepacreau/elev

En usage sur les images de mon blog

Eleventy plugin to zoom image on click to fullscreen - teotimepacreau/eleventy-plugin-img-magnifier
GitHubeleventy-plugin-img-magnifier/.eleventy.js at master · teotimepacreau/eleventy-plugin-img-magnifierEleventy plugin to zoom image on click to fullscreen - teotimepacreau/eleventy-plugin-img-magnifier

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

Continued thread

I'm becoming more convinced that we do not need React or any "virtual DOM". ES6 gives you plenty of tools to define reusable components as JavaScript classes that directly modifies the DOM. Plus you can even extend HTMLElements to create your own hybrid custom HTML elements. Then your components just become objects which wrap around DOM elements and provide methods for interacting with them in an abstract way.
developer.mozilla.org/en-US/do

The MDN Web Docs logo, featuring a blue accent color, displayed on a solid black background.
MDN Web DocsUsing custom elements - Web APIs | MDNOne of the key features of web components is the ability to create custom elements: that is, HTML elements whose behavior is defined by the web developer, that extend the set of elements available in the browser.

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

npmjs.com/package/eleventy-plu

@eleventy @zachleat

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

codepen.io/lmorchard/pen/eYqWm