Téotime Pacreau<p><span class="h-card" translate="no"><a href="https://mastodon.design/@kajou" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>kajou</span></a></span> solution 100% <a href="https://mastodon.design/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a> mais sans le défilement de mon côté (flèches et fonctionnalité de défilement à implémenter de ton côté) : <br>- insertion dynamique d'un clone de l'image dans un <dialog> via JS<br>- style image plein écran via CSS</p><p>Tout est documenté ici : <a href="https://github.com/teotimepacreau/eleventy-plugin-img-magnifier/blob/master/.eleventy.js" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/teotimepacreau/elev</span><span class="invisible">enty-plugin-img-magnifier/blob/master/.eleventy.js</span></a></p><p>En usage sur les images de mon blog</p>
Recent searches
No recent searches
Search options
Not available on mastodon.xyz.
mastodon.xyz is one of the many independent Mastodon servers you can use to participate in the fediverse.
A Mastodon instance, open to everyone, but mainly English and French speaking.
Administered by:
Server stats:
814active users
mastodon.xyz: About · Profiles directory · Privacy policy
Mastodon: About · Get the app · Keyboard shortcuts · View source code · v4.3.4
#vanillajs
0 posts · 0 participants · 0 posts today
kiara<p>bon, <a href="https://mastodon.design/tags/help" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>help</span></a>, je sais pas comment formuler ça efficacement pour une recherche web alors je vais juste poser ma question ici, avec plein de mots :<br>Comment je peux faire un carousel d'images en popup - je m'explique. <br>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</p><p><a href="https://mastodon.design/tags/HMTL" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HMTL</span></a> <a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a> only !</p><p>petit schéma pour visualiser l'idée</p>
postmodern<p>Is there a suite of vanilla JS web components implemented as classes somewhere on <a href="https://npmjs.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">npmjs.org</span><span class="invisible"></span></a>? 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?</p><p><a href="https://ruby.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a> <a href="https://ruby.social/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webcomponents</span></a> <a href="https://ruby.social/tags/npm" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>npm</span></a> <a href="https://ruby.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a></p>
postmodern<p>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.<br><a href="https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">developer.mozilla.org/en-US/do</span><span class="invisible">cs/Web/API/Web_components/Using_custom_elements</span></a></p><p><a href="https://ruby.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> <a href="https://ruby.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a></p>
postmodern<p>How many vanilla.js/zero-dependency reusable components are there on <a href="https://npmjs.com" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">npmjs.com</span><span class="invisible"></span></a>? 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?</p><p><a href="https://ruby.social/tags/npmjs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>npmjs</span></a> <a href="https://ruby.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a> <a href="https://ruby.social/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a></p>
Téotime Pacreau<p>Created an <a href="https://mastodon.design/tags/Eleventy" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Eleventy</span></a> plugin to zoom images on fullscreen.</p><p>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.</p><p>Under the hood, a <a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a> inserts `<dialog>` <a href="https://mastodon.design/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> modal right before the image. Outside of the modal click =`dialog` disappears.<br>Styled via <a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> `@starting-style`.</p><p><a href="https://www.npmjs.com/package/eleventy-plugin-img-magnifier" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="ellipsis">npmjs.com/package/eleventy-plu</span><span class="invisible">gin-img-magnifier</span></a></p><p><span class="h-card" translate="no"><a href="https://fosstodon.org/@eleventy" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>eleventy</span></a></span> <span class="h-card" translate="no"><a href="https://fediverse.zachleat.com/@zachleat" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>zachleat</span></a></span> </p><p><a href="https://mastodon.design/tags/11ty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>11ty</span></a> <a href="https://mastodon.design/tags/builtwith11ty" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>builtwith11ty</span></a></p>
marmelab<p>Just came across CRXJS: A tool that helps you make Chrome Extensions using modern web development technology. 🧩</p><p>Have any of you tried it? What was your experience with it?</p><p>👉 <a href="https://crxjs.dev/vite-plugin#why-crxjs" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">crxjs.dev/vite-plugin#why-crxj</span><span class="invisible">s</span></a> </p><p><a href="https://mastodon.social/tags/CRXJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CRXJS</span></a> <a href="https://mastodon.social/tags/Chrome" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Chrome</span></a> <a href="https://mastodon.social/tags/React" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>React</span></a> <a href="https://mastodon.social/tags/Solid" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Solid</span></a> <a href="https://mastodon.social/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a> <a href="https://mastodon.social/tags/Vue" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Vue</span></a></p>
Les Orchard<p>I'm stupidly happy to have solved this puzzle:</p><p>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. </p><p>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.</p><p><a href="https://hackers.town/tags/html" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>html</span></a> <a href="https://hackers.town/tags/css" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>css</span></a> <a href="https://hackers.town/tags/js" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>js</span></a> <a href="https://hackers.town/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> <a href="https://hackers.town/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a> <a href="https://hackers.town/tags/webcomponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webcomponents</span></a></p><p><a href="https://codepen.io/lmorchard/pen/eYqWmvV" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/lmorchard/pen/eYqWm</span><span class="invisible">vV</span></a></p>
Ana Tudor 🐯<p>1⃣2⃣ no library heart ❤️ → star ⭐️ wave:<br><a href="https://codepen.io/thebabydino/pen/XXEdBJ" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">codepen.io/thebabydino/pen/XXE</span><span class="invisible">dBJ</span></a></p><p>An SVG morphing demo with vanilla JS.</p><p><a href="https://mastodon.social/tags/SVG" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SVG</span></a> <a href="https://mastodon.social/tags/CodePen" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CodePen</span></a> <a href="https://mastodon.social/tags/geometry" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>geometry</span></a> <a href="https://mastodon.social/tags/maths" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>maths</span></a> <a href="https://mastodon.social/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.social/tags/vanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillaJS</span></a> <a href="https://mastodon.social/tags/transform" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>transform</span></a> <a href="https://mastodon.social/tags/code" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>code</span></a> <a href="https://mastodon.social/tags/coding" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>coding</span></a> <a href="https://mastodon.social/tags/web" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>web</span></a> <a href="https://mastodon.social/tags/webDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDev</span></a> <a href="https://mastodon.social/tags/dev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>dev</span></a> <a href="https://mastodon.social/tags/frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>frontend</span></a> <a href="https://mastodon.social/tags/webDevelopment" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webDevelopment</span></a></p>
Thomas Weibel<p>Es gibt Augenblicke, da verwünsche ich meine Leidenschaft für Webgames. <a href="https://www.thomasweibel.ch/mahjongg/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://www.</span><span class="">thomasweibel.ch/mahjongg/</span><span class="invisible"></span></a> <a href="https://swiss.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a> <a href="https://swiss.social/tags/webapp" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webapp</span></a></p>
Harry Percival<p>does anyone out there write unit tests (or better yet do <a href="https://fosstodon.org/tags/tdd" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>tdd</span></a> for vanilla frontend <a href="https://fosstodon.org/tags/javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>javascript</span></a> like no react no framework other than your testrunner? <a href="https://fosstodon.org/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a></p>
ℹ️❤️🖥 aka Compy-chan<p>An early <a href="https://xoxo.zone/tags/FollowFriday" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>FollowFriday</span></a> of my favorite <a href="https://xoxo.zone/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a> folks:</p><p><span class="h-card" translate="no"><a href="https://front-end.social/@leaverou" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>leaverou</span></a></span><br><span class="h-card" translate="no"><a href="https://mastodon.social/@cferdinandi" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>cferdinandi</span></a></span> <br><span class="h-card" translate="no"><a href="https://mastodon.social/@webreflection" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>webreflection</span></a></span></p>
Alex Crocker<p>Looking for some feedback on my vanilla Web Component</p><p><a href="https://cdn.croc.io/web-components/discord-invite/1.0.0/DiscordInvite.js" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">cdn.croc.io/web-components/dis</span><span class="invisible">cord-invite/1.0.0/DiscordInvite.js</span></a></p><p><a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/webdev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>webdev</span></a> <a href="https://mastodon.social/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a></p>
Téotime Pacreau<p><a href="https://mastodon.design/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>100DaysOfCode</span></a> </p><p><a href="https://mastodon.design/tags/Day52" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Day52</span></a> : building a Todo with @sveltejs <a href="https://mastodon.design/tags/Svelte" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Svelte</span></a> and <span class="h-card" translate="no"><a href="https://m.webtoo.ls/@vite" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vite</span></a></span> <a href="https://mastodon.design/tags/vite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vite</span></a> </p><p>- using bind: to handle user input and dispath the event<br>- using props to activate function and change states of the component<br>- conditionnaly style with a CSS class activated only when a prop is true </p><p>Source Code : <a href="https://github.com/teotimepacreau/Svelte-Vite-Todo" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/teotimepacreau/Svel</span><span class="invisible">te-Vite-Todo</span></a></p><p><a href="https://mastodon.design/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a><br><a href="https://mastodon.design/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a><br><a href="https://mastodon.design/tags/LearnWebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnWebDev</span></a><br><a href="https://mastodon.design/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Javascript</span></a><br><a href="https://mastodon.design/tags/LearnToCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnToCode</span></a><br><a href="https://mastodon.design/tags/LearnJavascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnJavascript</span></a><br><a href="https://mastodon.design/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a><br><a href="https://mastodon.design/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a><br><a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a><br><a href="https://mastodon.design/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a><br><a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a></p>
Téotime Pacreau<p><a href="https://mastodon.design/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>100DaysOfCode</span></a> </p><p><a href="https://mastodon.design/tags/Day51" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Day51</span></a> : learning <a href="https://mastodon.design/tags/Svelte" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Svelte</span></a> <span class="h-card" translate="no"><a href="https://birdsite.slashdev.space/users/sveltejs" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>sveltejs</span></a></span> <br>- dispatching events<br>- working with components<br>- reactivity<br>- props</p><p>Source Code : <a href="https://github.com/teotimepacreau/Learn-Svelte" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/teotimepacreau/Lear</span><span class="invisible">n-Svelte</span></a></p><p><a href="https://mastodon.design/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a><br><a href="https://mastodon.design/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a><br><a href="https://mastodon.design/tags/LearnWebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnWebDev</span></a><br><a href="https://mastodon.design/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Javascript</span></a><br><a href="https://mastodon.design/tags/LearnToCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnToCode</span></a><br><a href="https://mastodon.design/tags/LearnJavascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnJavascript</span></a><br><a href="https://mastodon.design/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a><br><a href="https://mastodon.design/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a><br><a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a><br><a href="https://mastodon.design/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a><br><a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a></p>
Alex Crocker<p>Couldn't find an existing multi-handle range slider built as a HTML Web Component, so I converted an existing regular multi-handle range slider to a Web Component and learned a lot about the process of building custom Web Components. Fun!</p><p><a href="https://gist.github.com/crock/385825f81203fb6986efbb078705027b" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">gist.github.com/crock/385825f8</span><span class="invisible">1203fb6986efbb078705027b</span></a></p><p><a href="https://mastodon.social/tags/WebComponents" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebComponents</span></a> <a href="https://mastodon.social/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a></p>
Sebastian Reiners<p><span class="h-card" translate="no"><a href="https://chaos.social/@leyrer" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>leyrer</span></a></span> 😆 First: Since when is 14k zipped considered small? Second: All points under "Motivation" on <a href="https://htmx.org" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">htmx.org</span><span class="invisible"></span></a> can be answered with "Because of essentials like semantics or separation of concerns." or "But you already can, with the <a href="https://techhub.social/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a> of the browser." and that is shipped with 0KB. Everything in there would require just a few lines of JS; certainly not 14k. And I'd still question the use of JS in most of these cases.</p><p>And the best: "has reduced code base sizes by 67% when compared with react". That's a ridiculously low bar to clear.</p>
kik<p><span class="h-card" translate="no"><a href="https://fosstodon.org/@blainsmith" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>blainsmith</span></a></span> Amen to that. I'm not sure why they don't mention it, but it's also the best cure to software rot, which is a calamity in webdev. </p><p>I'm using a similar stack for my personal projects (replacing OpenBSD with Linux and httpd with Lighttpd), limiting dependencies to the strict minimum (SQLite and JSON-C) and building frontend with vanilla HTML/JS/CSS, so that the whole stack is built on standards having multiple implementations with minimal to no dependencies. I'm confident those apps will be immortal (or at least, will have a better life expectancy than me) and I only have to fix actual bugs, rather than having to go through each of them every few months to see what backward incompatibility was introduced this time. </p><p>As a side effect, I went crazy and built around 200 programs of various complexity (try to maintain that with current state of software rot with other tools) to solve my everyday problems. Finally, my craft is actually useful for me.</p><p><a href="https://techhub.social/tags/cgi" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>cgi</span></a> <a href="https://techhub.social/tags/c" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>c</span></a> <a href="https://techhub.social/tags/vanillajs" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>vanillajs</span></a></p>
Téotime Pacreau<p><a href="https://mastodon.design/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>100DaysOfCode</span></a> </p><p><a href="https://mastodon.design/tags/Day50" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Day50</span></a> : continue Bookshelf project <br>- implemented reservation function, clicking on a book card button "reserve", adds the book to the reservation modal `<dialog>`<br>- deployed <a href="https://mastodon.design/tags/Fastify" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Fastify</span></a> <a href="https://mastodon.design/tags/SQLite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>SQLite</span></a> backend to fly.io <span class="h-card" translate="no"><a href="https://hachyderm.io/@flydotio" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>flydotio</span></a></span> <br>- deployed <a href="https://mastodon.design/tags/Vite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Vite</span></a> frontend <span class="h-card" translate="no"><a href="https://bird.makeup/users/vercel" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>vercel</span></a></span> </p><p><a href="https://bookshelf.teotimepacreau.fr/" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="">bookshelf.teotimepacreau.fr/</span><span class="invisible"></span></a></p><p>Source Code : <a href="https://github.com/teotimepacreau/bookshelf" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/teotimepacreau/book</span><span class="invisible">shelf</span></a></p><p><span class="h-card" translate="no"><a href="https://fosstodon.org/@fastify" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>fastify</span></a></span> </p><p><a href="https://mastodon.design/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.design/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.design/tags/LearnWebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnWebDev</span></a> <a href="https://mastodon.design/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Javascript</span></a> <a href="https://mastodon.design/tags/LearnToCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnToCode</span></a> <a href="https://mastodon.design/tags/LearnJavascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnJavascript</span></a> <a href="https://mastodon.design/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a> <a href="https://mastodon.design/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.design/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a></p>
Téotime Pacreau<p><a href="https://mastodon.design/tags/100DaysOfCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>100DaysOfCode</span></a> </p><p><a href="https://mastodon.design/tags/Day49" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Day49</span></a> : continue Bookshelf project <br>- implemented View Transitions API fade animation when changing page<br>- 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%;`</p><p>Source Code : <a href="https://github.com/teotimepacreau/bookshelf" rel="nofollow noopener noreferrer" translate="no" target="_blank"><span class="invisible">https://</span><span class="ellipsis">github.com/teotimepacreau/book</span><span class="invisible">shelf</span></a></p><p><span class="h-card" translate="no"><a href="https://fosstodon.org/@fastify" class="u-url mention" rel="nofollow noopener noreferrer" target="_blank">@<span>fastify</span></a></span> <br><a href="https://mastodon.design/tags/WebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>WebDev</span></a> <a href="https://mastodon.design/tags/Frontend" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Frontend</span></a> <a href="https://mastodon.design/tags/LearnWebDev" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnWebDev</span></a> <a href="https://mastodon.design/tags/Javascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Javascript</span></a> <a href="https://mastodon.design/tags/LearnToCode" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnToCode</span></a> <a href="https://mastodon.design/tags/LearnJavascript" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>LearnJavascript</span></a> <a href="https://mastodon.design/tags/JS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>JS</span></a> <a href="https://mastodon.design/tags/HTML" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>HTML</span></a> <a href="https://mastodon.design/tags/CSS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>CSS</span></a> <a href="https://mastodon.design/tags/Vite" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Vite</span></a> <a href="https://mastodon.design/tags/Fastify" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>Fastify</span></a> <a href="https://mastodon.design/tags/UI" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>UI</span></a> <a href="https://mastodon.design/tags/VanillaJS" class="mention hashtag" rel="nofollow noopener noreferrer" target="_blank">#<span>VanillaJS</span></a></p>
ExploreLive feeds
Mastodon is the best way to keep up with what's happening.
Follow anyone across the fediverse and see it all in chronological order. No algorithms, ads, or clickbait in sight.
LoginDrag & drop to upload