#vanillajs — Public Fediverse posts

@samir
Dear Samir, I am writing to thank you for your early public endorsement of my project. Looking back on it, I could not have predicted the positive effect of your support. The weight of your expert endorsement cannot be overstated, especially while my project was a complete unknown. It really means a lot to me that you took the time to learn about my little project, and chose to endorse it.
Sincerest thanks. God bless you!

#IndieWeb #SmallWeb #IndieDev #PixelArt #Thanks #VanillaJS #Art

There is ASCII Art and there is a View-Finder showing the document space in miniature. How very German of me... #deutschland

FOSS, single-file, vanilla, save with CTRL + S. This is designed to make single file webpages/programs in absolute position or VW. The keyboard is like Vi. 20 levels per project. #VanillaJS #Minimalism #WebPerformance #Lightweight #SingleFile #NoBloat #FastWeb #ZeroDependencies #CleanCode #OfflineFirst #Efficiency #100DaysOfCode #GreenComputing #LowTech #WebStandards

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

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

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

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

React-Like JSX Syntax for Webcomponents

TLDR: I’ve been #experimenting with react-like jsx-syntax with webcomponents to see if I could theoretically replace #React in one of my larger #software projects. It is not ready for production use, but rather a #Research exploration into #CustomElements and #ModernJS performance.

The goal was to build #FunctionalWebComponents that handle #StateManagement and #DOM updates without the overhead of a massive #JavaScript framework. By leveraging #StandardWebAPIs and #Proxy objects, I’ve managed to create a #Reactive programming model that feels familiar but stays closer to the #Platform.

Check out the full #TechnicalTutorial and #DeepDive here: https://positive-intentions.com/docs/research/Tutorials/dim/dim-functional-webcomponents

(Disclosure: this project may be getting deprecated. Sharing this because it might still be interesting or educational.)

#WebDevelopment #Frontend #BuildTheWeb #NoFramework #JS #JSX #WebStandards #Coding #ResearchAndDevelopment #VanillaJS #SoftwareEngineering #TechBlog #WebDevCommunity

#Topography rendering in single-file #HTML #Canvas and #VanillaJS webpage (<2kb).

https://www.thomasweibel.ch/topo/

#switzerland #map #mapping #geography #3d #gis #opendata #opensource #openglam #glamhack #digitalhumanities @spatialists @OpendataCH #webdev #3d #illusion #js #javascript

Experimenting with #2D #topography rendering in #VanillaJS.

#switzerland #map #mapping #geography #gis #opendata #opensource #openglam #glamhack #digitalhumanities @spatialists @OpendataCH #webdev #3d #illusion #js #javascript

My new hobby: Building #SPA with #VanillaJS Code is from an ongoing side project: #LFS Builder #JS #Developer #Development #JavaScript #LinuxFromScratch

My new hobby: Building #SPA with #VanillaJS Code is from an ongoing side project: #LFS Builder #JS #Developer #Development #JavaScript #LinuxFromScratch

r6d6: Heute haben wir ein weiteres Repo nach #codeberg migriert:

web-components

Eine kleine Sammlung von offenen WebComponents, die beinahe in allen wichtigen Frameworks wie #vuejs, #angular oder #react oder einfach auch in plain #VanillaJS laufen sollten.

Darunter auch ein kleines

codeberg-ribbon "View on Codeberg".

https://y.lab.nrw/cb-rib

\__
@Codeberg #OpenSource #giveUpGitHub #diday #didit #100DaysOfCode #jek25 #39c3

IVVV Stack: kiến trúc front‑end chỉ dùng IndexedDB, Vanilla JS, HTML & CSS. Được minh hoạ bằng một ứng dụng ghi chú đơn giản, cho thấy dù khó khăn với dev hiện đại, việc dùng vanilla vẫn khả thi nếu kết hợp AI để nhanh chóng tạo prototype. #IVVV #Frontend #VanillaJS #IndexedDB #Tech #CôngNghệ #LậpTrình #WebDev

https://dev.to/stakiran/ivvv-stack-3pjp

IVVV Stack: kiến trúc front‑end chỉ dùng IndexedDB, Vanilla JS, HTML & CSS. Được minh hoạ bằng một ứng dụng ghi chú đơn giản, cho thấy dù khó khăn với dev hiện đại, việc dùng vanilla vẫn khả thi nếu kết hợp AI để nhanh chóng tạo prototype. #IVVV #Frontend #VanillaJS #IndexedDB #Tech #CôngNghệ #LậpTrình #WebDev

https://dev.to/stakiran/ivvv-stack-3pjp

IVVV Stack: kiến trúc front‑end chỉ dùng IndexedDB, Vanilla JS, HTML & CSS. Được minh hoạ bằng một ứng dụng ghi chú đơn giản, cho thấy dù khó khăn với dev hiện đại, việc dùng vanilla vẫn khả thi nếu kết hợp AI để nhanh chóng tạo prototype. #IVVV #Frontend #VanillaJS #IndexedDB #Tech #CôngNghệ #LậpTrình #WebDev

https://dev.to/stakiran/ivvv-stack-3pjp

IVVV Stack: kiến trúc front‑end chỉ dùng IndexedDB, Vanilla JS, HTML & CSS. Được minh hoạ bằng một ứng dụng ghi chú đơn giản, cho thấy dù khó khăn với dev hiện đại, việc dùng vanilla vẫn khả thi nếu kết hợp AI để nhanh chóng tạo prototype. #IVVV #Frontend #VanillaJS #IndexedDB #Tech #CôngNghệ #LậpTrình #WebDev

https://dev.to/stakiran/ivvv-stack-3pjp

Das Wandern ist des Schweizers Lust: "Mont" ist eine #AugmentedReality-#Webapp, die Schweizer Berggipfel und Hügelkuppen benennt und auf dem Handybildschirm anzeigt (iOS only).

https://www.thomasweibel.ch/mont2/

Endlich ist nun auch mein Paper über die verwendete Technik erschienen:

https://phaidra.fhstp.ac.at/detail/o:7234

Für alle, die hoch hinaus wollen - mit #VanillaJS oder in Wanderschuhen.

#html5 #ar #geoinformatics #geography #topography #ios #opendata #geodata #swisstopo #switzerland @OpendataCH

React-like functional webcomponents, but with vanilla HTML, JS and CSS

Introducing Dim – a new #Framework that brings #ReactJS-like functional #JSX-syntax with #VanillaJS. Check it out here:
🔗 Project: https://github.com/positive-intentions/dim
🔗 Website: https://dim.positive-intentions.com

My journey with #WebComponents started with Lit, and while I appreciated its native browser support (less #Tooling!), coming from #ReactJS, the class components felt like a step backward. The #FunctionalProgramming approach in React significantly improved my #DeveloperExperience and debugging flow.

So, I set out to build a thin, functional wrapper around #Lit, and Dim is the result! It's a #ProofOfConcept right now, with "main" #Hooks similar to React, plus some custom ones like useStore for #EncryptionAtRest. (Note: #StateManagement for encryption-at-rest is still unstable and currently uses a hardcoded password while I explore #Passwordless options like #WebAuthn/#Passkeys).

You can dive deeper into the #Documentation and see how it works here:
📚 Dim Docs: https://positive-intentions.com/docs/category/dim

This #OpenSource project is still in its early stages and very #Unstable, so expect #BreakingChanges. I've already received valuable #Feedback on some functions regarding #Security, and I'm actively investigating those. I'm genuinely open to all feedback as I continue to develop it!

#FrontendDev #JSFramework #Innovation #Coding #Programmer #Tech

bon, #help, je sais pas comment formuler ça efficacement pour une recherche web alors je vais juste poser ma question ici, avec plein de mots :
Comment je peux faire un carousel d'images en popup - je m'explique.
J'ai une miniature, et au clic je veux que ça ouvre un modal ou whatever, par-dessus la fenêtre active, qui contient le reste des images du carousel. Avec les flèches de navigation itout

#HMTL #CSS #VanillaJS only !

petit schéma pour visualiser l'idée

Edit : j'ai la solution !!

Created an #Eleventy plugin to zoom images on fullscreen.

When hovering, the magnifying glass indicates to the user that the img can be enlarged. A click and it appears enlarged, through a fade-in animation. A click outside the image quit the enlarged view.

Under the hood, a #VanillaJS inserts `<dialog>` #HTML modal right before the image. Outside of the modal click =`dialog` disappears.
Styled via #CSS `@starting-style`.

https://www.npmjs.com/package/eleventy-plugin-img-magnifier

@eleventy @zachleat

#11ty #builtwith11ty

Запустили нішу АІ у 2023-му, а офіс переобладнали у «фортецю». Як зростає та розвивається Brainstack_ https://itc.ua/ua/articles/zapustyly-nishu-ai-u-2023-mu-a-ofis-pereobladnaly-u-fortetsyu-yak-zrostaye-ta-rozvyvayetsya-brainstack_/ #Партнерськийпроєкт #Crypto&Blockchain #ВолодимирСитніков #ParentalControl #Swift(SwiftUI) #LvivITCluster #PHP(Symfony) #Brainstack_ #Kubernetes #PostgreSQL #VanillaJS #React.js #Wellness #Flutter #MongoDB #Next.js #Node.js #Kotlin #Python #MySQL #AMQP #HTTP #AI

#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

#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

#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

It's exciting to see how far one can get with #webcomponents (custom elements) and #vanillajs nowadays. If you want to follow what @_web_ is doing rewriting old #coffeescript and #jquery based JS into modern #es6 just keep an eye on latest PRs of the 7.1 milestone

https://github.com/AlchemyCMS/alchemy_cms/pulls?q=is%3Apr+author%3Asascha-karnatz+milestone%3A7.1

🙏🏻👏🏻

#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