Frontend & Web Dev, Marketing, SEO, GEO | HI Web
15.2K subscribers
582 photos
17 videos
51 files
197 links
• Guides on HTML, CSS, JavaScript, React
• Free Figma templates
• Tips on UI/UX design
• Career advice
• Portfolio tips, GitHub help, and soft skills for devs
• Live projects, coding challenges, tools, and more

For all inquiries contact @haterobots
Download Telegram
🔧 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.
👍85
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.
9👍2🤩1
Free Figma Template: Rehabilitation center

🧠 Difficulty: 🥕🥕

#Figma #Template
👍103🔥2
💎 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.
9👍2
🛢 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.
9🔥5👍2
ES13 CheatSheet - 6 Modern JS Features (w/ examples)
5👍5🔥2
🥷 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....
👍65
Free Figma Template: Website for IT company

🧠 Difficulty: 🥕🥕

#Figma #Template
8👍5🔥1🤔1
⚡️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.
🔥8👍2
Free Figma Template: Watch Shop

🧠 Difficulty: 🥕🥕

#Figma #Template
8👍5
💠 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.
👍8🔥1
Free Figma Template: Brand Shop

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
🔥85👍2
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.
6👍6🔥1
Free Figma Template: Pay System

🧠 Difficulty: 🥕🥕

#Figma #Template
12👍2🔥2
Free Figma Template: Crypto Trading

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
👍84👏2
📝 How does map.entries() work?

The Map.entries() function returns a new iterator that contains [key, value] arrays for each pair of elements in the map object, in the order they were added to the object.

This method can be useful when you want to iterate over all the elements of a Map object and perform some action on each pair.

Map.entries() returns an iterator, not an array, for an array in the end, you should use other methods
👍53
Feature Detect CSS @starting-style Support

Bramus Van Damme shows a clever way to detect @starting-style at-rule support.
👍5🔥1