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
🥎 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
How does JSON.stringify() work in JS?

JSON.stringify function: Converts a JavaScript object or values ​​to a JSON string (text formatted according to the current standard)

Arguments:

Value - This is the main argument that specifies what to convert.

Replacer (optional) - A function or array to filter properties.

Spaces (optional) - A number or string to format with indents.
👍115
How does Array,map() work in JS?

The Array,map function: Creates a new array by calling the specified function on each element of the original array and collects the results into a new array.

It takes one mandatory argument — this is the callback function that will be applied to each element of the original array.

The callback can take up to three arguments:
currentValue — the current element of the array being processed.
index — the index of the current element in the array being processed.
array — the array being iterated over.
• There is also an optional argument thisArg — the value used as this when calling the callback function

Code example
:
const numbers = [1, 2, 3, 4];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // [2, 4, 6, 8]
10🔥4👍2
Free Figma Template: Interior design

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template
👍116