Tips and tricks for view transition

In my opinion, the best cases for implementing view transitions are as a way to draw attention to an element, convey movement, and help users remain in context.

Add it to all pages to apply a default cross fade transition.

@view-transition {
    navigation: auto;
}

Then mark similar content with the view-transition-name css property.

Custom view transitions can be made with ::view-transition-old, ::view-transition-new, ::view-transition-image-pair.
Full page transition can be done by marking :root.
These transitions should be set only when the media query prefers-reduced-motion is set to no-preference.

Not read yet.

Nice!

• Indexing into a vector: prefer better pattern matching or raw array with index safety instead
• Lazy use of Default: initialize all fields instead
• Avoid fragile trait implementations that pass silently on changes
• From traits must be infaillible, use TryFrom if any error can occur. Make it explicit.
• Avoid non-exchaustive matches (with _ =>)
• Use decriptive names for unused variables with the _ placeholder.
• Avoid temporary mutability and make it explicit instead: let mut data = ....; .... ; let data = data
• Defensively handle constructors with #[non_exhaustive], so creating an raw instance of a struct should be prohibited outside constructor functions.
• Use #[must_use] to avoid unused instance of the struct.
• Avoid boolean parameters and in case of need, prefer enums.
• Use Clippy lints:
  • clippy::indexing_slicing
  • clippy::fallible_impl_from
  • clippy::wildcard_enum_match_arm
  • clippy::unneeded_field_pattern
  • clippy::fn_params_execussive_bools

Use cases for inherit(). They can be good but I don't see a need currently

There are great animations of ease-in, ease-in-out, ease, spring and bounce. The latest two can not be animated with Bézier curves as other common animations.

To get spring and bounce effects, the linear() function can be used. The linear() function takes a set of numbers, with 0 representing the starting value and 1 representing the final value.

Easing wizard or the Linear() Easing Generator can help.

JSON module imports became baseline: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with:

import data from './data.json' with { type: 'json' };

and lazy-load it with:

const { default: data } = await import('./data.json', {
  with: { type: 'json' },
});

It makes sense to use JSON module imports for local static JSON resources where you need all/most of the data within. Particularly since bundlers can understand JSON imports, and bundle the object with other modules. That isn't possible with fetch(), unless you use some pretty hacky plugins.

Generally, I try to turn any "fetch-and-process" logic into a Vite/Rollup plugin, so it happens at build time rather than runtime.

Another post about semantic HTML, or the UX of HTML with <button>

A way to document a web component (an element manifest per web component).

If JS fails to load, a keyframe remove the effect provided by JS in 2 seconds.

The return value is unclear:

• The old API treats zero as false (parameter not handled)
• The new API expects an error code (zero is success).
• To add some fun, any non-zero result is passed to ERR_PTR() and used as a pointer for further parsing. Well, (char*)1 is neither IS_ERR_OR_NULL() nor a valid pointer…

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

A version with better support:

:root {
  --w: calc(100vw/1px); /* screen width  */
  --h: calc(100vh/1px); /* screen height */
  /*  The result is an integer without a unit! */
}

Wrapping every string to a newtype ensure the string can be extended as wished and at least differenciated from normal strings without meaning