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
Pinned Tweet
📚 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…
860
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
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
ALT How to store data in Local Storage
1
61
💡 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…
43
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
Here are three different ways to use the Promise API in JavaScript:
1️⃣ Use Promise.all to handle multiple promises at once
ALT How to use Promise.all in JavaScript
1
56
3️⃣ Use Promise.race to get the fastest resolved or rejected promise
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…
33
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
Following these 10 HTML best practices will help you improve the SEO and accessibility of your HTML documents
webtips.dev/lessons/html-bes…
39
Learn how you can build a configurable Tabs component in React with TypeScript and HTML content support.
webtips.dev/tabs-component-i…