π 2/8 JS Reactive Patterns: Custom Event Targets
#js #patterns #customEvent
#js #patterns #customEvent
If you prefer not to dispatch events globally on the window object, you can create your own event target.
By extending the native EventTarget class, you can dispatch events to a new instance of it. This ensures that your events are triggered only on the new class itself, avoiding global propagation. Moreover, you have the flexibility to attach handlers directly to this specific instance.
π4
π 3/8 JS Reactive Patterns: Observer
#js #patterns #observer
#js #patterns #observer
The Observer pattern is really similar to PubSub. You subscribe to the Subject and then it notifies its subscribers (Observers) about changes, allowing them to react accordingly. This pattern plays a significant role in building decoupled and flexible architecture.
π1
π 5/8 JS Reactive Patterns: Individual Object Properties and Reactivity
#js #patterns #defineProperty
#js #patterns #defineProperty
If you donβt need to track all the fields in the objects, you can choose the specific one using Object.defineProperty or group of them with Object.defineProperties.
π 6/8 JS Reactive Patterns: Reactive HTML Attributes With MutationObserver
#js #patterns #MutationObserver
#js #patterns #MutationObserver
One way to achieve reactivity in the DOM is by using MutationObserver. Its API allows us to observe changes in attributes and also in the text content of the target element and its children.
π 7/8 JS Reactive Patterns: Custom Events as a Browser Version Of PubSub
#js #patterns #CustomEvent
#js #patterns #CustomEvent
The browser offers an API for triggering and subscribing to custom events through the CustomEvent class and the dispatchEvent method. The latter provides us with the ability not only to trigger an event but also to attach any desired data to it.
I would like to get to know my subscribers a little, who is from what country? (Or your option in comments)
Final Results
52%
Ukraine
33%
India
2%
Pakistan
0%
Argentina
0%
France
3%
USA
6%
Other European countries
0%
Other Asian countries
3%
Other African countries
0%
Other countries of America
π1
π 8/8 JS Reactive Patterns: Reactive Scrolling With IntersectionObserver
#js #patterns #IntersectionObserver
#js #patterns #IntersectionObserver
The IntersectionObserver API enables reacting to the intersection of a target element with another element or the viewport area.
π4
π Π‘SS becomes SCSS
#css #scss #root #nesting #is #has #container @layer
β Article link
#css #scss #root #nesting #is #has #container @layer
Sass has established itself as a powerful preprocessor installed locally, forming the backbone of my projects for over a decade. It enabled me to efficiently organize scalable and stable CSS packages. Even today, I still consider Sass to be an extraordinarily powerful tool. Yet, as we step into the year 2024, itβs undeniable that CSS has undergone rapid development. Features that were once unique to Sass are now natively integrated into CSS, including variables and the latest highlight: CSS Nesting.
β Article link
π₯1π1
π Browser Fetch Priority API
#js #fetch #fetchpriority
β Article link
#js #fetch #fetchpriority
At the time of writing this article, the fetchpriority attributed is supported on the following elements:
β img
β script
β link
β iframe
The fetchpriority attribute can take on one of three values:
β high: Designates the resource as high priority, requesting the browser to prioritize it unless its heuristics advise otherwise.
β low: Marks the resource as low priority, instructing the browser to deprioritize it if its heuristics allow.
β auto: The default value, indicating no specific preference, allowing the browser to autonomously determine the suitable priority.
β Article link
π1
π Angular HostAttributeToken: the new way to inject attributes
#angular #attribute #HostAttributeToken
β Article link
#angular #attribute #HostAttributeToken
By creating an input, you are instructing Angular to create a binding to that property and check it during each change detection cycle. That is really excessive, you only need that property to be checked once during component initialization. π€― To make this more performant you can instead inject the host-element attribute in the constructor thanks to the Attribute decorator
Since the release of Angular 14 there is now a cleaner approach to inject providers without using the constructor class: the inject() function. Up until now, this inject() function allowed to inject easily components, directives and pipes, but it was missing a method to inject host attributes. And thatβs precisely why the HostAttributeToken class was introduced
β Article link
πManaging the Sticky Navigation: Angular, Tailwind, and RxJS
#angular #rxjs #tailwind #navbar #ui_element
β Article link
#angular #rxjs #tailwind #navbar #ui_element
Explanation:
β `public readonly isSticky$ = fromEvent(window, 'scroll').pipe(...):` This defines the isSticky$ observable using RxJS operators. It listens for scroll events on the window, maps them to the vertical scroll position (window.scrollY), filters out consecutive duplicate values, and then maps the scroll position to a boolean value indicating whether the scroll position is greater than 24 (assuming 24 is a threshold value for determining when the navigation bar should become sticky).
β `distinctUntilChanged()`: This operator filters out consecutive duplicate values emitted by the observable.
β `map((scrollTop: number) => scrollTop > 24)`: This operator maps the scroll position (scrollTop) to a boolean value, indicating whether the user has scrolled past a certain threshold (24 in this case).
β `(isSticky$ | async) === true`: This condition checks if the value emitted by the isSticky$ is true or not. Which makes it convenient since you donβt have to unsubscribe the observable.
β `sticky top-0 z-10 shadow-lg opacity-95 bg-white`: These classes from TailWind will help enhance the sticky experience when the users scroll down.
β Article link