1. SSR and Jamstack

2. Active Memory Caching

In summary, if you want to increase the performance of your application, you can use server caches to speed up your APIs, but if you want to persist your app state, you should use the local storage cache.

3. Data Event Sourcing

Useful for real-time applications. Connections are made with Websockets.

4.a Prefetching

Pros: Prefetching waits until the browser’s network is idle and is no longer in use and will stop when you trigger usage by clicking a link or triggering a lazy loading function.
Pros: Prefetching caches data within the browser, making page transitions faster when redirecting to a link.

4.b Lazy Loading

Lazy loading can only help you delay downloading resources and doesn’t make your resources smaller and more cost-efficient.

5. Resumability

Essentially, Resumability uses the server to do the heavy lifting and then gives the client a minimal amount of JavaScript to execute via serialization.

:last-child, :nth-last-child(2), nth-child(2), nth-child(3n), nth-child(even), nth-child(odd), nth-child(n+3), nth-child(-n+3), nth-child(3n+1), nth-child(3n-1)

What does which operators in javascript?

TL;DR Use HTML attributes with the content: attr() CSS property.

Here is an example with a notification icon with a counter nudge.

Nano ID is nano-sized unique string ID generator for JavaScript. It’s truly small (130 bytes minified), URL-friendly, and it has no dependencies. Plus, it’s safe, secure, and fast.

Project link: https://github.com/ai/nanoid
A small library to generate unique ids. It is implemented in a lot of other languages too.

webkitdirectory multiple to allow a directory and every files in it to be uploaded :)

Minimal CSS to look great: 58 bytes, 100 bytes, and 100 more bytes.

I find it hard too :/

Rule of thumbs:

1. Show errors immediately if issues are severe
2. Late validation is almost always better
3. Validate empty fields only on submit
4. Reward early, punish late: if a user edits an erroneous field, we should be validating immediately, removing the error message and confirming that the mistake has been fixed as soon as possible (reward early). However, if the input was valid already and it is being edited, it’s probably better to wait until the user moves to the next input field and flag the errors then (punish late).
5. Validate after a copy-paste
6. Allow users to override inline validation
7. Just in time validation
8. For short forms, consider validation on submit only. For complex forms, use the task list pattern

Laravel suit l'évolution et peut être utilisé avec Vite. Ici un exemple en intégrant Boostrap.

The infer keyword only works within conditional types. It defines the type depending of another one.

Some use cases:

• extract type from promise
• extract function return type
• extract multiple candidates

Similar to useFetch in vue

A collection of algorithms. They are available in many languages.

Here a list about datastructures: https://the-algorithms.com/fr/category/datastructures

On a 4-core machine, running all our tests sequentially would take 3 days, 15 hours, 10 minutes, and 3 seconds. It’s extremely difficult to run a subset of tests since we’ve built a pure monolith with deeply interwoven concerns, so we run every test on every push of every PR … in only 18 minutes!

CSS specificity as image 👍

You're encountering a flexbox default setting.

A flex item cannot be smaller than the size of its content along the main axis.

The defaults are...

• min-width: auto
• min-height: auto
  ...for flex items in row-direction and column-direction, respectively.

display: contents is underrated: it removes the box layout of the element!

grid-row or grid-column only works on explicit layout: workaround at 18:55

#idea #project make a UI for it !

Headings are not focusable because they are not interactive, as long as the headings are not links… ;)

Here an example of how to make focused element transition on focus:

section:focus {
  outline: 0;
  animation: yellowFade 3s forwards;
}
@keyframes yellowFade {
  from { background: lightYellow; }
  to   { background: white; }
}