Webtips

@WebtipsHQ

Level up your frontend skills with bite-sized tutorials and master the art of frontend development with the help of Webtips

Education

Guided roadmaps →

webtips.dev

Joined May 2020

998Posts 130Followers 7Following

How to Create a Scroll Animated Portfolio With React

Learn how you can create a scroll-animated single site portfolio from scratch using React, TypeScript and CSS.

Source: webtips.dev

Webtips reposted

Webtips

@WebtipsHQ

Feb 9, 2024

💡 Want to loop through an object? Use Object.entries combined with a forEach to read both keys and values:

Webtips reposted

💡 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

WebtipsHQ's tweet image. 💡 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

Webtips reposted

Webtips

@WebtipsHQ

Feb 22, 2024

💡 Want to display a JavaScript object in a readable way in your React app? You can use a combination of Object.keys with a map to create a loop and display the data in a tabular format:

WebtipsHQ's tweet image. 💡 Want to display a JavaScript object in a readable way in your React app? You can use a combination of Object.keys with a map to create a loop and display the data in a tabular format:

Webtips reposted

bolt.new

@boltdotnew

May 10, 2024

💡 JavaScript tip(2): If you want to remove duplicates from your array, make a `Set()` out of it, and spread it back into an array:

Webtips

@WebtipsHQ

Feb 23, 2024

Learn how you can build a configurable Tabs component in React with TypeScript and HTML content support. webtips.dev/tabs-component…

webtips.dev

How to Create a Configurable Tabs Component in React

Learn how you can build a configurable Tabs component in React with TypeScript and HTML content support.

Source: webtips.dev

Webtips reposted

Webtips

@WebtipsHQ

Feb 23, 2024

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:

WebtipsHQ's tweet image. 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:

Webtips reposted

Webtips

@WebtipsHQ

Feb 8, 2024

Want to benchmark your JavaScript code? You can use the Performance API. Copy the following helper function to your project to use it:

WebtipsHQ's tweet image. Want to benchmark your JavaScript code? You can use the Performance API. Copy the following helper function to your project to use it:

Webtips reposted

Webtips

@WebtipsHQ

Feb 13, 2024

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-carou…

Webtips reposted

Webtips

@WebtipsHQ

Oct 28, 2023

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