🥕 Providing Type Definitions for CSS with @property
A cross-browser feature as of the release of Firefox 128 in July 2024 is a new at-rule - @property - which allows defining types as well as inheritance and an initial value for your custom properties.
We'll learn when and why traditional fallback values can fail, and how @property features allow us to write safer, more resilient CSS custom property definitions.
A cross-browser feature as of the release of Firefox 128 in July 2024 is a new at-rule - @property - which allows defining types as well as inheritance and an initial value for your custom properties.
We'll learn when and why traditional fallback values can fail, and how @property features allow us to write safer, more resilient CSS custom property definitions.
👍6🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
🧵Creating an animated background in text
To create a beautiful background for text, use the background-image property, which takes a value in the form of a photo, or a link to any photo or video via url()
• color: transparent — makes the text transparent. This is necessary so that the text is visible only due to the background image.
• -moz-background-clip and -webkit-background-clip are special properties for other browsers that limit the display of the background image to the text area only.
To create a beautiful background for text, use the background-image property, which takes a value in the form of a photo, or a link to any photo or video via url()
• color: transparent — makes the text transparent. This is necessary so that the text is visible only due to the background image.
• -moz-background-clip and -webkit-background-clip are special properties for other browsers that limit the display of the background image to the text area only.
h1 {
font-family: sans-serif;
text-align: center;
font-size: 80px;
font-weight: 800;
text-transform: uppercase;
background-image: url(https://i.giphy.com/media/v1.Y2lkPTc5MGI3NjExYTlmN2h0MnhhNHFqcDFwaWYxMXd0NjlrZTE0NDBoY3N0M2hiNnY5ayZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/XQsEy59pNgaVu6QlGi/giphy-downsized-large.gif);
background-size: cover;
color: transparent;
-moz-background-clip: text;
-webkit-background-clip: text;
}👍15🔥3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
🚤 How to choose the best rendering strategy for your app
Web rendering has evolved from simple server-rendered HTML pages to highly interactive and dynamic applications, and there are more ways than ever to present your app to users.
Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and experimental Partial Prerendering (PPR) have all been developed to optimize performance, SEO, and user experience in various situations.
Here, we'll explore the use cases and tradeoffs of each rendering strategy and peek into the future of content delivery.
Web rendering has evolved from simple server-rendered HTML pages to highly interactive and dynamic applications, and there are more ways than ever to present your app to users.
Static Site Generation (SSG), Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), and experimental Partial Prerendering (PPR) have all been developed to optimize performance, SEO, and user experience in various situations.
Here, we'll explore the use cases and tradeoffs of each rendering strategy and peek into the future of content delivery.
👍5🤯2
This media is not supported in your browser
VIEW IN TELEGRAM
📒 Scroll animation with typography
Experiment with animation with the appearance of an image in the text when scrolling.
Experiment with animation with the appearance of an image in the text when scrolling.
❤17👍1
🧠 CSS font-size-adjust is now in Baseline
The CSS font-size-adjust property lands in Chrome today, and becomes part of Baseline Newly Available. This property can help prevent shifting of your layout when fallback fonts are loaded, and ensure legibility of fallback fonts at smaller font sizes. The font-size-adjust property is part of Interop 2024, so this is another win for the effort to improve the interoperability of the web platform.
The CSS font-size-adjust property lands in Chrome today, and becomes part of Baseline Newly Available. This property can help prevent shifting of your layout when fallback fonts are loaded, and ensure legibility of fallback fonts at smaller font sizes. The font-size-adjust property is part of Interop 2024, so this is another win for the effort to improve the interoperability of the web platform.
❤6🔥3👍1
This media is not supported in your browser
VIEW IN TELEGRAM
👁 Paroller.js is a lightweight jQuery plugin that enables parallax scrolling effect on selected elements.
You can use it on elements with background property or on any other element.
While scrolling elements can move: vertical, horizontal.
- Manipulated through html data-* attributes or jQuery options.
- Mobile ready.
- Easy to use.
You can use it on elements with background property or on any other element.
While scrolling elements can move: vertical, horizontal.
- Manipulated through html data-* attributes or jQuery options.
- Mobile ready.
- Easy to use.
❤6👍3
🧛♂️ How to use container queries now
Some developers say they want to use container queries now but think they can't because they still have to support older browsers.
As you may have guessed from the title, we think it's possible for most developers to use container queries now—in production—even if you have to support older browsers. This post walks you through the approach we recommend to do that.
Some developers say they want to use container queries now but think they can't because they still have to support older browsers.
As you may have guessed from the title, we think it's possible for most developers to use container queries now—in production—even if you have to support older browsers. This post walks you through the approach we recommend to do that.
❤5👍1
🍪 Demystifying cookies and tokens
In this blog post we will reach and understanding of what web cookies and tokens are and what are they used for. We will also look at the most common types of web cookies and tokens. This post is not going into how to prevent token or cookie abuse. That’s a topic for another post.
In this blog post we will reach and understanding of what web cookies and tokens are and what are they used for. We will also look at the most common types of web cookies and tokens. This post is not going into how to prevent token or cookie abuse. That’s a topic for another post.
👍11
🧑💻 What’s new in React 19
React 19 is near. The React Core Team announced a React 19 release candidate (RC) this past April. This major version brings several updates and new patterns, aimed at improving performance, ease of use, and developer experience.
Many of these features were introduced as experimental in React 18, but they will be marked as stable in React 19. Here’s a high-level look at what you need to know to be ready.
React 19 is near. The React Core Team announced a React 19 release candidate (RC) this past April. This major version brings several updates and new patterns, aimed at improving performance, ease of use, and developer experience.
Many of these features were introduced as experimental in React 18, but they will be marked as stable in React 19. Here’s a high-level look at what you need to know to be ready.
❤9
🛢 How to Use Mixins in Sass and Pass Arguments – With Code Examples
Mixins are my favorite thing about Sass. They made my life so much easier, so I wanted to show you how they can do the same for you.
Mixins can be a bit tricky to understand at first, but don't worry. You'll get the hang of it by practicing and will fall in love with mixins like I have.
Mixins are my favorite thing about Sass. They made my life so much easier, so I wanted to show you how they can do the same for you.
Mixins can be a bit tricky to understand at first, but don't worry. You'll get the hang of it by practicing and will fall in love with mixins like I have.
❤9👍3
👁 10 Key JavaScript Concepts: A Complete Guide for Beginners and Pros
This article covers 10 essential JavaScript concepts, useful for both beginners and experienced developers. It explains core principles like scopes, asynchronous programming, closures, error handling, and more, which are key for writing efficient, readable code. Each concept is accompanied by examples to help solidify theoretical understanding through practice.
This article covers 10 essential JavaScript concepts, useful for both beginners and experienced developers. It explains core principles like scopes, asynchronous programming, closures, error handling, and more, which are key for writing efficient, readable code. Each concept is accompanied by examples to help solidify theoretical understanding through practice.
👍6❤5
🧛♂️ Common Causes of Memory Leaks in JavaScript
Identify and fix common JavaScript memory leaks (Node.js and Deno.js)
Memory leaks are a silent threat that gradually degrades performance, leads to crashes, and increases operational costs. Unlike obvious bugs, memory leaks are often subtle and difficult to spot until they start causing serious problems.
Increased memory usage drives up server costs and negatively impacts user experience. Understanding how memory leaks occur is the first step in addressing them.
Identify and fix common JavaScript memory leaks (Node.js and Deno.js)
Memory leaks are a silent threat that gradually degrades performance, leads to crashes, and increases operational costs. Unlike obvious bugs, memory leaks are often subtle and difficult to spot until they start causing serious problems.
Increased memory usage drives up server costs and negatively impacts user experience. Understanding how memory leaks occur is the first step in addressing them.
❤6🔥2
🥎 Transition to
CSS Transitions are the easiest way to add interactions on the web; all you need is an element in two different states with the transition property applied to its initial state, and the browser will smoothly animate the element between these two states.
height: auto & display: none Using Pure CSSCSS Transitions are the easiest way to add interactions on the web; all you need is an element in two different states with the transition property applied to its initial state, and the browser will smoothly animate the element between these two states.
🔥6👍1