Daily Shaarli
August 10, 2022
An other ready-to-production framework with an opinionated tech stack. Powered by Vercel.
CSS variables that provoke invalid CSS declarations (for example --foo: ;
) are set to unset
.
Space toggle for numerical value: calc(1.5 var(--toggle-value, - .4))
with toggle value:
:root {
--ON: initial
--OFF: ;
}
Use variables for pure data, not CSS values as CSS values are often bound with a unit.
Relative values inherit as syntax tokens unless the property is registered. Registering a property as
Again CSS properties:
.box {
padding: var(--py, 1rem) var(--px, 1rem);
}
.box--some-variant {
--px: 2rem;
}
Segmented Rendering is just a smarter way to do static rendering. Once you understand that it’s all about caching renders and then getting the right cached render for each request, everything will click into place.
To implement segmented rendering:
- Define your “segments” for a page.
Example: paid users versus free users, users from company A versus users from company B or C, etc. - Render as many static variations of a page you need, with one URL per segment.
Example: /with-jokes/my-article, /bland/my-article. Each variation matches a segment, for instance, paid or free users. - Setup a very small redirection server, that checks the HTTP request content and redirects the user to the right variation, depending on their segment. Example: paid users are redirected to /with-jokes/my-article. We can tell if a user is paid or not by checking their request cookies.
More performance?
Render the site on demand with Incremental Static Regeneration
An interactive gallery that demonstrated what's possible with just CSS gradients.
Si un avortement m’expose à des poursuites pour meurtre, alors autant que je tue mon violeur.
Provocative, but I agree too.
Rapporté au temps:
1 million de secondes → 11 jours
1 milliard de secondes → 31 ans
Rapporté à une distance:
Le smicard est à 1,3 mm du départ.
Le millionnaire est à 1 mètre du départ.
Le milliardaire est à 1 km