#learnwebdev — Public Fediverse posts

#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

#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 : #VanillaJS

#Day30 : Object Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Object-Exercices-Day30-Of-100DaysOfCode

- using for in loops and understanding that it requireds the [index] of the item

- using .every() array method that return a true or false

- structuredClone() to deep copy an object

using Object.keys, Object.values, Object.entries and array destructuring

.find() array method

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