#learnjavascript — Public Fediverse posts

#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

#Day42 : Newsletter Express project

Source Code : https://github.com/teotimepacreau/Express-Newsletter

Changes :
- reworked completely all styling to get a handcrafter #Bento UI
- when unsub, if checks if email is already in the DB, if not it sends an error notif

Learned :
-focus-visible
-SQL conditions
- adding a js parameter that is added to the SQL selection

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

#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS

#Day41 : Beginned email template in Newsletter Express project

Source Code : https://github.com/teotimepacreau/Express-Newsletter

Learned :
-inline styles
-html tag <style>
-email HTML current state : can get rid of tables if using divs. Still need to learn more about the support of semantic html elements

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

#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS

#Day40 : Added unsubscription logic and SQL handling in Newsletter Express project

Source Code : https://github.com/teotimepacreau/Express-Newsletter

Added :
- Unsubscription logic : Create a route for users to unsubscribe from the newsletter. Update the database accordingly.

Learned :
-async await handling of errors in Express, require to try catch and next to a middleware

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

#100DaysOfCode : #NodeJS #Express #SQLite #VanillaJS

#Day39 : Continuing Newsletter Express project with several UI changes

Source Code : https://github.com/teotimepacreau/Express-Newsletter

Added :
- modified homepage
- unsubscribe page
- beginned unsub route but i need to add SQL DELETE for the email

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

#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

#100DaysOfCode : #VanillaJS

#Day37 : Table with dynamic pagination

Online demo : https://teotimepacreau.github.io/Table-with-dynamic-pagination-Day37-of-100-DaysOfCode/

Source Code : https://github.com/teotimepacreau/Table-with-dynamic-pagination-Day37-of-100-DaysOfCode

Learned :
- pushing in an array each rows until a number of rowsPerPage with a for(i=0; i<arrayOfRows.length; i=i+rowsPerPage)
- implemented ViewTransitions API
- active page styled
- tried to implement a sorter but non complete

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

#100DaysOfCode : #VanillaJS

#Day36 : Promises and Async/Await Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Promises-and-AsyncAwait-Exercices-Day36-of-100DaysOfCode

Learned :
- Promises are based on `resolve and reject`, if it `resolves` the `.then` executes, if it `rejects` we `.catch` the error
- `Async/Await` : `async` make the function a promise, two blocks similar as `resolve` and `reject` : `try` and `catch`

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

#100DaysOfCode : #VanillaJS

#Day35 : #JSON Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/JSON-Exercices-Day35-of-100DaysOfCode

Learning :
- basic JSON structure : double quotes
- change JSON to object with JSON.parse(const, (key, value))
- change something JS in JSON with JSON.stringify(obj, replacer, space)

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

#100DaysOfCode : #VanillaJS

#Day34 : Destructuring & Spreading Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Destructuring-and-Spreading-Exercice-Day33-of-100DaysOfCode

Learning :
- destructuring arrays and objects
- destructuring in for... of loop
partial destructuring with , ,
- structuredClone() to create non superficial copies of objects
- complex treatments in array nested in object

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

#100DaysOfCode : #VanillaJS

#Day33 :Classes Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Classes-Exercice-Day34-of-100DaysOfCode/tree/main

Learning :
- class allows to create an object with built in properties
- class `constructor` is the better way to add properties
- this
- class extending to create child objects of the class that herits properties
- `constructor` and `super` to rewrite or add properties to the child class

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

#100DaysOfCode : #VanillaJS

#Day32 : Sets and Maps Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Sets-and-Maps-Exercices-Day32-Of-100DaysOfCode

- `Set` to get unique elements from an array
- `Map` to organize array in objects using as we want keys
- find unique values in a big array combinating `map` array method, flattening and `Set`

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

#100DaysOfCode : #VanillaJS

#Day31 : Higher Order Functions Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Higher-Order-Functions-Exercices-Day31-Of-100DaysOfCode

- concatenate strings with reduce
- some, every array method
-populating an object : using a combination of storing object, for...of loop, sort, slice, map
-create object with bracket notation storingObject[key] = value

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

#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

#100DaysOfCode : #VanillaJS

#Day29 : Loop Exercices part III from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Loop-Exercices-III-Day29-of-100DaysOfCode

- reminded filter and map array methods
used for...of, forEach loops
- copied an array to avoid mutation
- push into an array if a condition is met

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #VanillaJS

#Day28 : Array Exercices part III from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-III-Day28-of-100DaysOfCode

- array destructuring with... in order to use Math.min() and Math.max() (because they only works on numbers and not on an array)
- reduce in order to calculate a sum of elements necessary to an average
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #VanillaJS

#Day27 : Loop Exercices part II from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Loop-Exercices-II-Day27-of-100DaysOfCode

- understood why it's necessary to put return in map array method
- array of arrays thanks to map and []
- reduce to combine to subArray to a string

#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #VanillaJS

#Day26 : Array Methods partII from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Array-Methods-Exercices-II-Day26-of-100DaysOfCode

- import and export arrays from separate files
- replace string method to - remove string elements
- split string method to put each element in an array
- filter out one element of an array
- sort ascendantly
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS