A 4-days workshop to learn rust

Indeed:

<template>
  <div
    @mouseover="hover = true"
    @mouseleave="hover = false"
  />
</template>

And now we now when the mouse is hovering.
A warning though: it is not compatible with touch screens !

2022 is relevant for the stable release of Vue 3. The ecosystem catch up: Nuxt 3, Vuetify 3, Quasar, NaiveUI, Ionic Vue, PrimeVue, InkLine, ElementPlus, ...

A focus has been given to Volar (1.0) and Vite. Vue 2 remains compatible with the version 2.7 "Naruto".

2023 expectations:

• smaller and more frequent releases
• vapor mode
• conferences

Generates beautiful shadows

UnoCSS powered component library.

It looks promising with its 18 components!

Github: https://github.com/jd-solanki/anu

TL;DR; instead of

• padding-left: use padding-inline-start
• padding-right: use padding-inline-end
• padding-top and -bottom: use padding-block
• width: use inline-size
• height: block-size
• overflow-x or -y: use overflow-inline or overflow-block
• position: top: use inset-block-start

Here is the pattern:

• inline for the reading axis. For us, it is left to right.
• block for the other (thickness) axis. For us, it is top to bottom.

A good starting point for Vue experienced programmers with Tailwind

• Extraction: make the nested code a function or its own piece of logic.
• Inversion: use guards to remove nested code. These guards will stop the function before the end of the function body. They act as gates.

How to handle fetch API errors ?
It throws on API Network Error only...

TL;DR; éviter les interfaces inutiles. La question se pose alors: quand est-ce qu'une interface est pertinente?

Deux cas vous indiquent que vous devriez avoir une interface :

• Vous développez une bibliothèque : mettez toute l’API publique dans des interfaces. Ça permet une excellente séparation de ce qui est public (et utilisable par les tiers) de ce qui est du détail d’implémentation et « public » pour raisons techniques. Vous pouvez même distribuer ces interfaces dans un paquet séparé si c’est pertinent dans votre cas.
• Vous savez déjà, lors de votre conception, que vous avez plusieurs implémentations distinctes à réaliser – maintenant ou dans un futur proche et non-hypothétique.

TL;DR $attrs defines every attribute that is not listed in the props.

Use cases:

• apply $attrs on a specific node
• tell Vue to apply $attrs on a node of a multiple root-node components
• using prop validations (in dev only for example)

Specific questions on the JS language

A crash course with further resources

JavaScript Repository of TheAlgorithms, which implements various algorithms and data structures in JavaScript.

For education only

How to build common ui patterns that are accessible 👍

A serie of posts about Nuxt

• Continuous performance checks in Nuxt.js with Lighthouse CI and Github Actions
• Performance checklist for Vue and Nuxt (and recommended modules for Nuxt)
• Introduction to Nuxt modules
• Leveraging cache in Nuxt.js (and there is a good example of server middleware per page 👍
• Introduction to Nuxt 3 modules
• How to add Algolia Search to Nuxt 3
• Using Modules and Pinia to structure Nuxt 3 app
• Building a Nuxt Modules clone with Nuxt 3, TailwindCSS, Storyblok, and Vercel
• Building Blog with Nuxt 2 and Contentrain Headless CMS
• Deploying Nuxt 3 app to Vercel 🚀
• Adding Newsletter to Nuxt 3 apps
• How to use Cloudinary Images with Nuxt 3
• Improving Security of Nuxt 3 (self-developed modules)
• Improving Performance of Nuxt apps with Partytown
• Improving Performance of Nuxt with Fontaine [fonts] 🚀