🆚 CSS New Features

#css #guide #info

This is a list of the new changes (more details below):

— Changes to attr() function: so it can be used with any attribute and in any CSS property (not only on content).

— calc-size() function: use intrinsic values such as auto or min-content in calculations.

— New first-valid() function to avoid issues with custom properties with invalid values.

— New *-mix() family of functions with a new notation for ratios.

— New *-progress() family of functions to calculate the progress ratio between a range or within a media or container.

— Randomization with new random() and random-item() functions, to return random values from a range or list (finally!)

— New sibling-count() and sibling-index() functions that provide integer values to operate depending on the order and size.

— New toggle() function for styling nested elements easily cycling over a list of values.

— New functional notation for arguments with comma-separated lists of values, to avoid ambiguity with the comma separating the arguments.

— New URL modifiers to provide more control over url() requests.

— Extension of the position type to allow flow-relative values.

✅ Article link

📵 JavaScript Promises: 8 Practical Use Cases

#js #promise

✅ Article link

🚳 JavaScript Design Pattern: Builder

#js #patterns #ui_element

✅ Article link

🩵 Preloading Strategies in Angular

#angular #preload #preloading #PreloadingStrategy

Angular comes with two built-in preloading strategies:

— NoPreloading (default): Disables preloading entirely. Lazy-loaded modules are only fetched when the user navigates to them.
— PreloadAllModules: Preloads all lazy-loaded modules in the background after the initial app load. This is ideal for smaller applications with limited routes, where preloading everything won’t overwhelm the network.

— Custom Preloading Strategies: Taking Control of Performance

Angular allows you to define custom preloading strategies to preload specific routes based on your app’s requirements. This gives you fine-grained control over which modules should be loaded in the background and under what conditions.

✅ Article link

🌐 Angular: Go Zoneless

#angular #ngZone #zoneless

Why Zoneless?

Well, isn't it clear after those pictures? …In my opinion it might look clear, but this isn't the only advantage, there are others:

— Better performance: ZoneJS uses async task as indicators for change. It doesn't directly know when and where exactly the change has happened. You can imagine that it is a system that always runs and is checking everything, everywhere with some exceptions such as OnPush strategy etc.

— Debugging: We all know the Expression Changed After Checked we've all been there. Now the stack trace and errors will be more straight forward.

— Better feeling from the app: I haven't found the right words, but it just feel better. It feel better that when you change a property with async/await or using .signal(). Then the change appears immediately in the correct spot.

— Zone.js was the reason not to develop an App in Angular: Imagine you were building a snippet that was checking user interaction. For example you wanted to calculate how many times is user performing some event such as clicking, touching or interacting with keyboard -> in such scenario your app would go crazy with Angular and you would have to have a lot of components running out of Zone and manually trigger change detection. Otherwise your app even with OnPush strategy could freeze.

✅ Article link