@WebtipsHQ

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

 Guided roadmaps →
webtips.dev
Joined May 2020
  • Tweets998
  • Following7
  • Followers127
94Media
📚 Learn how you can create a scroll-animated portfolio from scratch using React, TypeScript, and CSS in this interactive free course webtips.dev/courses/scroll-a…

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.

webtips.dev
860
Webtips retweeted
Webtips@WebtipsHQ9 Feb 2024
💡 Want to loop through an object? Use Object.entries combined with a forEach to read both keys and values:
How to loop through an object in JavaScript

ALT How to loop through an object in JavaScript

1
1
100
💡 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
How to Prevent Elements Receiving Click Events

ALT How to Prevent Elements Receiving Click Events

1
1
104
💡 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:
Displaying key-value pairs in React

ALT Displaying key-value pairs in React

1
1
97
💡 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:
4
44
3
400
37,595
Using the Local Storage API is a great way to store small sets of data, such as user preferences in the browser, without having to rely on a database. It has: ✅ Easy to use API ✅ Low effort to implement ✅ Supports offline access ✅ Improved data privacy
How to store data in Local Storage

ALT How to store data in Local Storage

1
61
more replies
💡 Do not confuse Local Storage with Sessions Storage. While both are client-side storage with a similar API, they have a key difference: ✅ Local Storage is persistent, retained after session 🚫 Session Storage is temporary, cleared after session
1
44
Learn what are the commonalities, and what are the differences between the local and storage session API in JavaScript, and how to use both of them. webtips.dev/webtips/javascri…

What is The Difference Between Local and Session Storage

Learn what are the commonalities, and what are the differences between the local and storage session API in JavaScript.

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

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.

webtips.dev
1
127
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:
Child to parent communication with event handlers in React

ALT Child to parent communication with event handlers in React

1
1
106
Here are three different ways to use the Promise API in JavaScript: 1️⃣ Use Promise.all to handle multiple promises at once
How to use Promise.all in JavaScript

ALT How to use Promise.all in JavaScript

1
56
more replies
3️⃣ Use Promise.race to get the fastest resolved or rejected promise
Use Promise.race if you need to wait for only the fastest Promise that either fulfills or rejects

ALT Use Promise.race if you need to wait for only the fastest Promise that either fulfills or rejects

1
34
If you'd like to learn more about how to work with promises in JavaScript, check out the following tutorial which dives deeper into the topic: webtips.dev/javascript-promi…

How to Use JavaScript Promises Effectively

Learn how asynchronous code works in JavaScript, and how we can use promises in place of callbacks to achieve asynchronicity.

webtips.dev
33
Webtips retweeted
Webtips@WebtipsHQ8 Feb 2024
Want to benchmark your JavaScript code? You can use the Performance API. Copy the following helper function to your project to use it:
Helper function for benchmarking JavaScript code performance

ALT Helper function for benchmarking JavaScript code performance

1
1
104
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…
1
89
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
1
130
Following these 10 HTML best practices will help you improve the SEO and accessibility of your HTML documents webtips.dev/lessons/html-bes…

10 HTML Best Practices for Improving Your Site

Following these 10 HTML best practices will help you improve the SEO and accessibility of your documents.

webtips.dev
39
Webtips retweeted
Webtips@WebtipsHQ6 Nov 2023
💡 Do you need to get query parameters in your React components? Simply use the URLSearchParams:
Use URLSearchParams in your React components to get search parameters

ALT Use URLSearchParams in your React components to get search parameters

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

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.

webtips.dev
1
127
Load more