#learnjavascript — Public Fediverse posts

𝗟𝗲𝗮𝗿𝗻 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁:

#JS #Course #LearnJavaScript

https://thewhale.cc/posts/learn-javascript

Learn in an interactive environment. Study short lessons and practice in an intuitive environment based on Tests. Written in French.

The "everything" Javascript cheat sheet

https://syntaxsimplified.com/cheatsheet/Javascript/javascript.html

Discussions: https://discu.eu/q/https://syntaxsimplified.com/cheatsheet/Javascript/javascript.html

#javascript #learnjavascript #programming #webdev

Looking to learn javascript , have some python experience but need some guidance on where to start. Not sure what to google for this specific project I'm trying to learn with!

https://github.com/wonderunit/storyboarder

Discussions: https://discu.eu/q/https://github.com/wonderunit/storyboarder

#javascript #learnjavascript #programming #python #webdev

While the world builds AI Agents, I'm just building calculators.

https://www.calcverse.live/

Discussions: https://discu.eu/q/https://www.calcverse.live/

#javascript #learnjavascript #programming #reactjs #webdev

Built a npm package to run Python code in JavaScript

https://www.npmjs.com/package/python-js-executor

Discussions: https://discu.eu/q/https://www.npmjs.com/package/python-js-executor

#javascript #learnjavascript #programming #python #webdev

#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

#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

#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

#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

#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

Understanding JavaScript Closures: Finally Got It After Struggling for Months!

https://medium.com/@shanmugarajak92/understanding-closures-in-javascript-a-friendly-guide-6fe1aef27210

Discussions: https://discu.eu/q/https://medium.com/%40shanmugarajak92/understanding-closures-in-javascript-a-friendly-guide-6fe1aef27210

#javascript #learnjavascript #programming #webdev

JavaScript Calculator

https://wildaxewappears.github.io/calculator/

Discussions: https://discu.eu/q/https://wildaxewappears.github.io/calculator/

#javascript #learnjavascript #programming #webdev

Best practise for security in python flask

https://github.com/FaceOnLive/OpenKYC

Discussions: https://discu.eu/q/https://github.com/FaceOnLive/OpenKYC

#flask #javascript #learnjavascript #learnprogramming #learnpython #programming #python #webdev

Man I thought I was okay in Javascript but holy shit practicing on bfe.dev really really made me question it..

https://bfe.dev

Discussions: https://discu.eu/q/https://bfe.dev

#frontend #javascript #learnjavascript #programming #webdev

Thoughts on Learning JavaScript

https://stackoverflow.com

Discussions: https://discu.eu/q/https://stackoverflow.com

#javascript #learnjavascript #programming #rustlang #webdev

JavaScript Interview Q&A - Most common JS concepts you should know by heart

https://youtu.be/_zUZa2vMQSU?si=Jngodtlzr-7BzRFm

Discussions: https://discu.eu/q/https://youtu.be/_zUZa2vMQSU?si=Jngodtlzr-7BzRFm

#javascript #learnjavascript #programming #webdev

I have built an interactive javascript cheatsheet

https://cheatsheetjs.xyz/

Discussions: https://discu.eu/q/https://cheatsheetjs.xyz/

#javascript #learnjavascript #programming #webdev

The best way to learn Javascript

https://zerotomastery.io

Discussions: https://discu.eu/q/https://zerotomastery.io

#javascript #learnjavascript #programming #webdev

I made a terrible baby name generator in JavaScript as a practice project based on articles and lists of bad baby names

https://perfectseowebsites.com/terrible-baby-name-generator/

Discussions: https://discu.eu/q/https://perfectseowebsites.com/terrible-baby-name-generator/

#javascript #learnjavascript #programming #webdev

#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

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

#Day25 : Functions Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Function-exercices-Day25-of-100DaysOfCode

- reminded multiple parameters
- concatenation of string, math operations
- multiple if conditions
switch/case statements in order to take several conditions
- looping through an array and displaying each entries
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS

#100DaysOfCode : #VanillaJS

#Day24 : Loop Exercices from #30DaysOfJavascript

Source Code : https://github.com/teotimepacreau/Loop-exercices-Day24-of-100DaysOfCode

- constraint number of iterations with for(i=0; i<=array.length; i++)
reverse iteration with for(i=countries.length-1; i>=0 ; i--)
- repeat() string method associated with for(i)
- generate a random 6 characters ID

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

#100DaysOfCode : #VanillaJS

#Day23 : Array Methods Exercices from #30DaysOfJavascript

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

- understood the difference between .map() and forEach() method
- used .includes() for first time to verif if the array contains certain letters
- used .filter() for first time
reverse array

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

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day22 : Microblog

Online demo :
https://teotimepacreau.github.io/Callback-blog-Day22-Of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Callback-blog-Day22-Of-100DaysOfCode

Project goals :
- use of callbacks, split string method, Map array method, Object.assign method

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

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day21 : Drag and drop

Online demo :
https://teotimepacreau.github.io/Drag-and-drop-Day21-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Drag-and-drop-Day21-of-100DaysOfCode

Project goals :
- discovering the drag and drop API
- first approach to setting data into an object in order to keep properties

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

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day20 : Bookmark reader using only Raindrop.io API

Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks

Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode

Project goals ↓

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

#100DaysOfCode : #HTML #CSS #VanillaJS

#Day20 : Bookmark reader using only Raindrop.io API

Inspired by the excellent design and functionality from @iamrobin https://www.iamrob.in/bookmarks

Online demo :
https://teotimepacreau.github.io/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode/

Source Code : https://github.com/teotimepacreau/Bookmark-reader-using-Raindrop-API-Day20-of-100DaysOfCode
Project goals ↓
#WebDev #Frontend #WebDesign #LearnWebDev #Javascript #LearnToCode #CodingDay #FrontendDevelopment #UIDesign #UITrend #DailyUI #CodingChallenge #LearnCode #WebDevelopment #LearnJavascript #JS #DailyUI #ViewTransitionsAPI