#vanillajs — Public Fediverse posts

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 #вайбкодинг #телевидение

#100DaysOfCode

#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 true

Source Code : https://github.com/teotimepacreau/Svelte-Vite-Todo

#WebDev
#Frontend
#LearnWebDev
#Javascript
#LearnToCode
#LearnJavascript
#JS
#HTML
#CSS
#UI
#VanillaJS

#100DaysOfCode

#Day51 : learning #Svelte @sveltejs
- dispatching events
- working with components
- reactivity
- props

Source Code : https://github.com/teotimepacreau/Learn-Svelte

#WebDev
#Frontend
#LearnWebDev
#Javascript
#LearnToCode
#LearnJavascript
#JS
#HTML
#CSS
#UI
#VanillaJS

#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

https://bookshelf.teotimepacreau.fr/

Source Code : https://github.com/teotimepacreau/bookshelf

@fastify

#WebDev #Frontend #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS #HTML #CSS #UI #VanillaJS

#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 : https://github.com/teotimepacreau/bookshelf

@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 : https://github.com/teotimepacreau/bookshelf

@fastify

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

#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 : https://github.com/teotimepacreau/bookshelf

@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 : https://github.com/teotimepacreau/bookshelf

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

#100DaysOfCode

#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 style

Learned :
- 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 tab

Learned :
- 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 added

Roadmap features :
- unsub route 🚧
- newsletter sending each week with cronjobs 🚧

#WebDev #Frontend #CSS #WebDesign #LearnWebDev #Javascript #LearnToCode #LearnJavascript #JS