🧐 CSS TIPS
An Interactive Guide to CSS Container Queries

In this interactive guide to container queries, I will explain the problems they solve, how they work, and how we can use them today in our workflows.

Free Figma Template: Crypto business

🧠 Difficulty: 🥕🥕

#Figma #Template

10 TypeScript Tips and Tricks for Advanced Developers

For a beginner, TypeScript can be overwhelming at times. However, with the right tips and techniques, you can harness the power of TypeScript to write safer, more reliable code. In this article, I share 10 TypeScript Tips to help you improve your development workflow and improve your understanding of the language.

Free Figma Template: business immigration services

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

5 CSS snippets every front-end developer should know in 2024

I believe every front-end developer should know :has() is more than a "parent selector", the how and why of a subgrid, how to nest with built-in CSS syntax, how to let the browser balance headline text wrapping, and how use container query units.

🔧 CSS TIPS
Safe/unsafe alignment in CSS flexbox

Rachel explains that when the CSS specs are written, key priority is to prevent data loss. I haven't heard this phrase before.

What is CSS Motion Path?

Quite simply, CSS Motion Path is a CSS property used to animate an element along a path. This path can be anything - one you've created yourself or taken from an existing design. The element you want to animate can also be anything - HTML or even another SVG.

Free Figma Template: Rehabilitation center

🧠 Difficulty: 🥕🥕

#Figma #Template

💎 Exploring the React Compiler: A detailed introduction

React has revolutionized how developers build user interfaces since its inception, with every iteration providing innovative and powerful ways for creating dynamic, component-based applications.

🛢 New JavaScript Set methods

🔸intersection() returns a new set with elements in both this set and the given set.
🔸union() returns a new set with all elements in this set and the given set.
🔸difference() returns a new set with elements in this set but not in the given set.
🔸symmetricDifference() returns a new set with elements in either set, but not in both.
🔸isSubsetOf() returns a boolean indicating if all elements of a set are in a specific set.
🔸isSupersetOf() returns a boolean indicating if all elements of a set are in a specific set.
🔸isDisjointFrom() returns a boolean indicating if this set has no elements in common with a specific set.

🥷 How to Validate Forms in React and React Native Using Yup and Formik

Validation is a key part of development, regardless of what programming language you’re writing. Developers should always be validating user input, API parameters, and retrieved values.

One of the most common elements where you’ll need to apply user input validation is via a form. This could be a user sign up form, a contact us form, or a simple questionnaire....

Free Figma Template: Website for IT company

🧠 Difficulty: 🥕🥕

#Figma #Template

⚡️How To Create Cut-Out Shapes using The clip-path property

We will see how to invert a shape created using polygon(). Such shapes are also called cut-out shapes.

Free Figma Template: Watch Shop

🧠 Difficulty: 🥕🥕

#Figma #Template

💠 How to parse HTML in JavaScript

In this guide, we'll explore the fundamentals of parsing HTML content and the various methods and libraries for parsing HTML in JavaScript. We'll also cover best practices and common issues, as well as practical applications.

Free Figma Template: Brand Shop

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

⛑ CSS Flexbox Layout Guide

Our comprehensive guide to CSS flexbox layout. This complete guide explains everything about flexbox, focusing on all the different possible properties for the parent element (the flex container) and the child elements (the flex items). It also includes history, demos, patterns, and a browser support chart.