Level up your frontend skills with bite-sized tutorials and master the art of frontend development with the help of Webtips
Guided roadmaps →
Joined May 2020
- Tweets998
- Following7
- Followers127
- Likes61
Webtips retweeted
💡 Want to prevent elements from receiving click events? Here are three solutions you can use:
1️⃣ Set the `disabled` attribute in HTML
2️⃣ Set `pointer-events` to `none` in CSS
3️⃣ Call `event.preventDefault` in JavaScript
ALT How to Prevent Elements Receiving Click Events
Webtips retweeted
Learn how you can build a configurable Tabs component in React with TypeScript and HTML content support.
webtips.dev/tabs-component-i…
Webtips retweeted
Here are four patterns you can use in React to improve your codebase:
1️⃣ Child-to-parent communication: Most commonly, you want to lift your state when you want to pass data from child-to-parent components. However, you can also use callback functions:
ALT Child to parent communication with event handlers in React
Webtips retweeted
Carousels are a common way to present a list of media in a limited space. Learn how you can build the following animated Carousel component in React with the help of CSS transitions:
webtips.dev/animated-carouse…
Webtips retweeted
Modals are a great way to display information outside the regular content flow. You can create them natively in HTML in three simple steps:
1️⃣ Create the modal using a dialog element
2️⃣ Use form method="dialog" to close modals
3️⃣ Use dialog.showModal to open the modal
Webtips retweeted
💡 Tip: If you need to get the intersection of two arrays, you can use .filter combined with .includes. The same logic can be used to:
✅ Get the difference between two arrays
✅ Get the symmetric difference between two arrays
ALT Get the intersection of two arrays in JavaScript
Webtips retweeted
HTML Tip 💡
You may not know that now we can use <hr> inside <select> to visually divide the group of related options 🤩
ALT <select id="task-status"> <option value="">Select Task Status</option> <option value="to_do">To Do</option> <!-- Other options --> <hr> <option value="on_schedule">On Schedule</option> <!-- Other options --> <hr> <option value="done">Done</option> <!-- Other options --> </select> Note: <hr> is not exposed in the accessibility tree by any browser.
Webtips retweeted
those little details™
Scale up and down on scroll with CSS 📜✨
a {
animation: scale, scale;
animation-direction: normal, reverse;
animation-timeline: view(inline);
animation-range: entry, exit;
}
@keyframes scale { 0% { scale: 0; } }
Webtips retweeted
Astro 4.0 is here! Introducing the Astro Dev Toolbar — your new companion for local development. Inspect, audit, and extend your dev environment in the browser.
Plus: ⚡️ 80% faster builds, 🌐 i18n routing, 🪄 View Transition updates and more!
astro.build/blog/astro-4/
Webtips retweeted
CSS Trick 📜
You can trigger text highlights on scroll with scroll-driven animations 😎
mark {
animation: highlight;
animation-timeline: view();
}
@keyframes highlight { to { --lit: 1; }}
mark span {
background-position: calc(var(--lit) * -110%) 0;
transition: background 1s;
}
The trick is using a scroll-driven animation to flip a custom property on a <mark> element 🎚️
You flip the value between 0 and 1, and that transitions the background position of the <mark> element
mark {
--lit: 0;
animation: highlight steps(1) both;
animation-timeline: view();
animation-range: entry 100% cover 10%;
}
The background has to be applied on a child of the mark to see the change in the custom property 👀
mark span {
background: linear-gradient(
120deg, yellow 50%, transparent 50%)
110% 0 / 220% 100% no-repeat;
background-position: calc(var(--lit) * 110%) 0;
transition: background-position 1s;
}
The trick is to set the background-size so that it's bigger than the element and then split the background-color in the middle using a linear-gradient 🤙
And the property flips fills in the color 🫶 That's it!
If there isn't support for scroll-driven animations, use JavaScript's IntersectionObserver API. The code for this is in the demo 😎
Cool example of using CSS as an IntersectionObserver!
@CodePen link below 👇
