📄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
📄 1/2 One-Liners Every Dev Needs to Know
#css
1. Prevent Text Selection
2. Responsive Text Size
3. Maintain Aspect Ratio
4. Automatic Smooth Scrolling
5. Scroll Snapping
6. Responsive Dark Mode
7. Full-width Responsive Images
8. Disable Pointer Interactions
9. Blurry Background or Elements
10. Dynamic Content from HTML Attributes
✅ Article link
#css
1. Prevent Text Selection
.no-select { user-select: none }2. Responsive Text Size
Enter the magic of clamp(): this CSS function dynamically adjusts the font size based on the viewport width, ensuring your text is always just right.
.responsive-text { font-size: clamp(1rem, 2.5vw, 2rem) }3. Maintain Aspect Ratio
Perfect for responsive design, setting an element’s aspect ratio will scale it beautifully while keeping its width and height in a specified ratio.
.aspect-ratio { aspect-ratio: 16 / 9 }4. Automatic Smooth Scrolling
Simply applying scroll-behavior: smooth to the <html> element makes any anchor link or navigation jumps glide gently instead of the default abrupt jump
html { scroll-behavior: smooth }5. Scroll Snapping
This forces scrollable content to lock to a certain element, making it perfect for image galleries or a horizontally scrolling menu
.scroll-snap { scroll-snap-type: x mandatory }6. Responsive Dark Mode
Automatically switch your website’s theme to dark mode based on the user’s system preferences with this CSS media query (the one-liner here is the media query).
@media (prefers-color-scheme: dark) {
body {
background-color: #333;
color: #fff;
}
}7. Full-width Responsive Images
This piece of CSS makes images fully adaptable to various screen sizes.
.cover-img { object-fit: cover }8. Disable Pointer Interactions
Use this to make an element ignore pointer events like mouse clicks, which is particularly useful for overlays or disabled buttons.
.cover-img { object-fit: cover }9. Blurry Background or Elements
This CSS declaration adds a blur effect to any element, great for creating focus on modal windows or for artistic background effects.
.blur { filter: blur(20px) }10. Dynamic Content from HTML Attributes
Dynamically insert content before (or after) an element based on its class name.
.dynamic-content::before { content: attr(class) }✅ Article link
👍5
📄 Angular Declarative Control Flow & Deferrable Views
#angular #controlFlow #defer
🚩 > Angular 17
✅ Article link
#angular #controlFlow #defer
🚩 > Angular 17
✅ Article link
🔥3