#vanillajs — Public Fediverse posts
Live and recent posts from across the Fediverse tagged #vanillajs, aggregated by home.social.
-
108 окон, 0 фреймворков, 1 Kubernetes: как команда без разработчиков построила интерактивный дом-таймлайн про ТВ 90-х
Зов джунглей, Поле чудес, Ералаш — мы сделали интерактивный дом-таймлайн про телевидение 90-х и 00-х. Под катом: как команда без разработчиков дошла от JSON-файла на VPS за $5 до корпоративного Kubernetes. Читать, пока не началась реклама
https://habr.com/ru/articles/1025152/
#vanillajs #frontend #cms #kubernetes #canvas #webp #avif #parallax #вайбкодинг #телевидение
-
#Day52 : building a Todo with @sveltejs #Svelte and @vite #vite
- using bind: to handle user input and dispath the event
- using props to activate function and change states of the component
- conditionnaly style with a CSS class activated only when a prop is trueSource Code : https://github.com/teotimepacreau/Svelte-Vite-Todo
#WebDev
#Frontend
#LearnWebDev
#Javascript
#LearnToCode
#LearnJavascript
#JS
#HTML
#CSS
#UI
#VanillaJS -
#Day51 : learning #Svelte @sveltejs
- dispatching events
- working with components
- reactivity
- propsSource Code : https://github.com/teotimepacreau/Learn-Svelte
#WebDev
#Frontend
#LearnWebDev
#Javascript
#LearnToCode
#LearnJavascript
#JS
#HTML
#CSS
#UI
#VanillaJS -
#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 @vercelhttps://bookshelf.teotimepacreau.fr/
Source Code : https://github.com/teotimepacreau/bookshelf
#WebDev #Frontend #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #HTML #CSS #UI #VanillaJS
-
#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 : https://github.com/teotimepacreau/bookshelf
@fastify
#WebDev #Frontend #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS -
#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" tableSource Code : https://github.com/teotimepacreau/bookshelf
@fastify
#WebDev #Frontend #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS
-
#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 : https://github.com/teotimepacreau/bookshelf
#WebDev #frontend #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #HTML #CSS #Vite #Fastify #UI #VanillaJS -
#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 collectionSource Code : https://github.com/teotimepacreau/bookshelf
#WebDev #Frontend #WebDesign #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #IndieWeb #PersonalWeb #Homemade #UI #UserInterface #VanillaJS -
#Day45 : V2 of my personal website https://www.teotimepacreau.fr/
Built only with #HTML #CSS , 40 lines of #JS and with the magical Eleventy https://www.11ty.dev/
@eleventy
@zachleat
Source Code : https://github.com/teotimepacreau/Personal-website#WebDev #Frontend #WebDesign #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #IndieWeb #PersonalWeb #Homemade #UI #UserInterface #VanillaJS #IndieWeb #SmallWeb -
#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day44 : V2 of my personal website https://www.teotimepacreau.fr/
Source Code : https://github.com/teotimepacreau/Personal-website
Changes :
- semantic HTML
- added mobile hamburger navigation
- title fonts
- desktop nav styleLearned :
- building hamburger menu
- CSS position:fixed
- transitioning on translateX
- aria-expanded#WebDev #Frontend #CSS #WebDesign #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #IndieWeb #PersonalWeb #Homemade #UI #UserInterface -
#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day43 : continuing Newsletter Express project
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Changes :
- implemented a functionality to allow the client to render the email in a new tabLearned :
- handling query parameters in Express#WebDev #Frontend #CSS #WebDesign #LearnWebDev
#Javascript #LearnToCode
#LearnJavascript #JS #emailgeeks #bentos #UI #UserInterface -
#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS
#Day38 : Newsletter building
Source Code : https://github.com/teotimepacreau/Express-Newsletter
Learned :
- intro to Backend : learned basics of NodeJS, Express, SQL
- Express subscription routes : adding entries from the user to an the db
- Displaying notif if the entries are correctly addedRoadmap features :
- unsub route 🚧
- newsletter sending each week with cronjobs 🚧#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS