mastouille.fr est l'un des nombreux serveurs Mastodon indépendants que vous pouvez utiliser pour participer au fédiverse.
Mastouille est une instance Mastodon durable, ouverte, et hébergée en France.

Administré par :

Statistiques du serveur :

429
comptes actifs

#vanillaJS

0 message0 participant0 message aujourd’hui

Das Wandern ist des Schweizers Lust: "Mont" ist eine #AugmentedReality-#Webapp, die Schweizer Berggipfel und Hügelkuppen benennt und auf dem Handybildschirm anzeigt (iOS only).

thomasweibel.ch/mont2/

Endlich ist nun auch mein Paper über die verwendete Technik erschienen:

phaidra.fhstp.ac.at/detail/o:7

Für alle, die hoch hinaus wollen - mit #VanillaJS oder in Wanderschuhen.

#html5 #ar #geoinformatics #geography #topography #ios #opendata #geodata #swisstopo #switzerland @OpendataCH

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!

GitHubGitHub - positive-intentions/dimContribute to positive-intentions/dim development by creating an account on GitHub.
En réponse à 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

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

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

#100DaysOfCode

#Day50 : continue Bookshelf project
- implemented reservation function, clicking on a book card button "reserve", adds the book to the reservation modal `<dialog>`
- deployed #Fastify #SQLite backend to fly.io @flydotio
- deployed #Vite frontend @vercel

bookshelf.teotimepacreau.fr/

Source Code : github.com/teotimepacreau/book

@fastify

#100DaysOfCode

#Day49 : continue Bookshelf project
- implemented View Transitions API fade animation when changing page
- implemented Scroll-Progress-Timeline to animate with CSS only the elements entry on scroll using `animation: book-entry linear forwards; animation-timeline: view(); animation-range: entry 0% 35%;`

Source Code : github.com/teotimepacreau/book

@fastify
#WebDev #Frontend #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS

#100DaysOfCode

#Day48 : continue Bookshelf project
- Authorization : only authenticated user that have a session-cookie can add a book to the collection and the SQL DB
- Adding book to the collection : when addBookForm is received it visually adds, and adds to the DB
- At reload : it combines "goodreads" & "bookviaform" table

Source Code : github.com/teotimepacreau/book

@fastify

#100DaysOfCode

#Day47 : continuing Bookshelf project
- Login function : <dialog> element contains the connexion form. username and password are passed to the backend endpoint "/login"
- Authentification : Retrieving username and password. Hashing it through bcrypt. Fastify-secure-session plugin adds a session cookie.

Source Code : github.com/teotimepacreau/book

@fastify

#WebDev #frontend #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS

#100DaysOfCode

#Day46 : Bookshelf project

- backend with #Fastify, querying with #SQL a database of books from my Goodreads account and scrapping books covers
- frontend with #Vite
- implemented search and filter function
- working on an authentification to allow admin to add books to the collection

Source Code : github.com/teotimepacreau/book

#WebDev #Frontend #WebDesign #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #IndieWeb #PersonalWeb #Homemade #UI #UserInterface #VanillaJS