Frontend & Web Dev, Marketing, SEO, GEO | HI Web
15.2K subscribers
581 photos
17 videos
51 files
196 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
react-19-cheat-sheet.pdf
1.4 MB
📝 React 19 Cheat Sheet

This is part cheat sheet, part quick reminder of some of the new features in React 19 with simple code examples.
8🔥3👍2
AbortController is more than you think

AbortController is a JavaScript API for creating an object with two properties, a signal and an abort() method, that can be used to abort tasks.

📌 Usage:

🟠You can use AbortController to abort HTTP requests via fetch().
🟠You can add event handlers using AbortSignal, which will allow you to automatically unsubscribe from events.
🟠AbortController also supports aborting streams.

📌 Advanced Features:

🟠Use AbortSignal.timeout() for automatic cancellation based on a timer.
🟠AbortSignal.any() allows you to combine multiple signals into one, making the API even more flexible.
🟠Cancellation error handling: When calling abort(), you can pass a cancellation reason, allowing for more flexible handling of canceled operations.
👍61
How to Annul Promises in JavaScript

In JavaScript, you might already know how to cancel a request: you can use xhr.abort() for XHR and signal for fetch. But how do you cancel a regular Promise?

Currently, JavaScript's Promise does not natively provide an API to cancel a regular Promise. So, what we’ll discuss next is how to discard/ignore the result of a Promise.
👍72
Free Figma Template: Agency

🧠 Difficulty: 🥕🥕

#Figma #Template
👍73
🐌 15 page speed optimizations that sites ignore (at their own risk)

A recent analysis of twenty leading websites found a surprising number of page speed optimizations that sites are not taking advantage of – to the detriment of their performance metrics, and more importantly, to the detriment of their users and ultimately their business.
👍7🔥21
🧶 CSS Grid Generator

CSS grid generator is a tool that helps developers create custom CSS grid layouts more easily. The generator allows users to specify the number of columns, rows, the gutter size.
14👍3
Using @starting-style and transition-behavior for enter and exit stage effects

ve been playing around with @starting-style and had a thought; that combining it with transition-behavior could aid in completing a purely CSS transition strategy for toggling display: none or first render.
8👍3
Free Figma Template: Agency

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
18👍3
“If” CSS Gets Inline Conditionals

All of this is conceptual at the moment and nothing is set in stone. We’re likely to see things change as the CSSWG works on the feature. But as it currently stands, the idea seems to revolve around specifying a condition, and setting one of two declared styles — one as the “default” style, and one as the “updated” style when a match occurs.
👍12🤔1
Free Figma Template: Tatoo

🧠 Difficulty: 🥕🥕

#Figma #Template
👍6🔥31
⚡️ TypeScript and Everything You Need for Development

This article is designed to simplify the process of learning TypeScript through practical examples. You can always find more detailed information in the documentation or additional resources.

This article is suitable for both beginner developers who are just getting acquainted with TypeScript and experienced developers looking to deepen their knowledge of the language. Here, you will find a concise and informative overview of the key aspects of TypeScript that can be useful in day-to-day development. For your convenience, the table of contents includes links to specific TypeScript topics, allowing you to quickly jump to the parts of the material that interest you.
🔥5👍1
Free Figma Template: Cosmetics store

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
👍105
🔥 I highly recommend using this awesome service to create a high-quality resume!

We all know how important it is to have a professionally crafted resume. It’s truly the key to landing your dream job.

💼 I found a great service that helps you highlight your achievements, experience, and skills in the best possible way. If you want a resume that stands out from the crowd, this is the way to go.

🎁 I have negotiated a special discount just for my subscribers.
Use this promo code 👇 to get a 20% discount on your order.

HiWeb


Don’t miss out on the chance to boost your chances of getting that job — your resume matters!
🤩9👍51🔥1
Free Figma Template: Criminal justice

🧠 Difficulty: 🥕🥕

#Figma #Template
9👍5
🍐 Embla Carousel — a lightweight JS library for creating carousels

Embla Carousel is a dependency-free lightweight JS library. It will help you solve the most complex problems associated with creating carousels; it has an easily extensible API and plugins.

Embla Carousel works in all modern browsers.
👍10🔥3
🥕 Providing Type Definitions for CSS with @property

A cross-browser feature as of the release of Firefox 128 in July 2024 is a new at-rule - @property - which allows defining types as well as inheritance and an initial value for your custom properties.

We'll learn when and why traditional fallback values can fail, and how @property features allow us to write safer, more resilient CSS custom property definitions.
👍6🔥1
Free Figma Template: Product page

🧠 Difficulty: 🥕🥕

#Figma #Template
👍82