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
Free Figma Template: Tere

🧠 Difficulty: 🥕🥕

#Figma #Template
👍75
🧛‍♂️ Common Causes of Memory Leaks in JavaScript

Identify and fix common JavaScript memory leaks (Node.js and Deno.js)
Memory leaks are a silent threat that gradually degrades performance, leads to crashes, and increases operational costs. Unlike obvious bugs, memory leaks are often subtle and difficult to spot until they start causing serious problems.

Increased memory usage drives up server costs and negatively impacts user experience. Understanding how memory leaks occur is the first step in addressing them.
6🔥2
🥎 Transition to height: auto & display: none Using Pure CSS

CSS Transitions are the easiest way to add interactions on the web; all you need is an element in two different states with the transition property applied to its initial state, and the browser will smoothly animate the element between these two states.
🔥6👍1
🥷 Why Unknown Types Are Useful

How can the unknown type be useful in TypeScript? We explain with examples
6👍1
🪂 Floating UI

A library for positioning and interacting with floating elements.
7🔥2
🌽 Center Items in First Row with CSS Grid

Ryan Mulligan explains how to stack grid items so that an odd number of items appears horizontally centered in the first row instead of the last.
👍85
Free Figma Template: Virtual Reality

🧠 Difficulty: 🥕🥕

#Figma #Template
7👍2👏1
This media is not supported in your browser
VIEW IN TELEGRAM
🤯 Do you know this GitHub hack?

1️⃣ Open any GitHub repository
2️⃣ Replace .com with .dev
3️⃣ View the repository code in a VS Code instance!

And yes, you can just press the "." button on your keyboard.
👍18
🍻 Opinions for Writing Good CSS

Andrew Walpole shares some tips on writing better CSS.
9👍2
Free Figma Template: Gaming platform
🧠 Difficulty: 🥕🥕🥕

#Figma #Template
9🔥5
🧑‍💻 So you think you know box shadows?

Simple and advanced techniques for using box shadows, as well as situations in which you should avoid using shadows.
7👍2🔥1
⛳️ Cleave.js has a simple purpose: to help you format input text content automatically.

The idea is to provide an easy way to increase input field readability by formatting your typed data. By using this library, you won't need to write any mind-blowing regular expressions or mask patterns to format input text.

However, this isn't meant to replace any validation or mask library, you should still sanitize and validate your data in backend.
👍12🔥1
🪢 How to make complex Chrome extensions: a zero gravity guide

Tutorial on creating an extension using Image Saver as an example - an application for saving images.
👍8
Free Figma Template: Car shop

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
110🔥4🤩2👍1
☄️ Some little ways I’m using CSS :has() in the real world

A few quick examples from Andy Bell that make great use of the :has selector
6👍2
Free Figma Template: Selection of souvenirs

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template
👍54
🥱 annyang!

A tiny JavaScript Speech Recognition library that lets your users control your site with voice commands.

annyang has no dependencies, weighs just 2 KB, and is free to use and modify under the MIT license.
👍6🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
😳 In Your Face

VSCode extension that reacts to errors in code. And it is not just anyone who reacts to your errors, but the face of the main character of the legendary DOOM, from the times of DOS and Windows 95

Every time an error is detected in the code, the extension displays the corresponding "Ouch Face", which makes the debugging process more interactive and fun
8👍1
🍐 Interview Question

What is a closure in JavaScript and how does it work?

A closure is a combination of a function that retains access to variables from its outer scope, even after the outer function has finished executing.

1️⃣ Context Memorization:

When a function is created, it remembers all the variables in its scope. These variables are available to the function even after the outer function has finished executing.

2️⃣ Private Variables:

Closures allow you to create private variables that cannot be changed or seen outside the function. This makes your code safer and more organized.

3️⃣ Persistent Data:

Closures allow functions to retain state between calls. For example, counters or cached values.

4️⃣ Asynchronous Operations:

Closures are often used in asynchronous code to preserve access to variables from the outer context while performing asynchronous tasks, such as timers or queries.
👍123🔥1