Frontend & Web Dev, Marketing, SEO, GEO | HI Web
15.2K subscribers
479 photos
16 videos
51 files
100 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
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
Free Figma Template: Tech Landing Page Template

🧠 Difficulty: 🥕🥕

#Figma #Template
10👍3🤯1
Free Figma Template: Portfolio and a community of designers.

🧠 Difficulty: 🥕🥕

#Figma #Template
10🔥4👍1
This media is not supported in your browser
VIEW IN TELEGRAM
🐋 CSS Compatibility

CSS Compatibility is a VS Code extension that allows you to check on hover which CSS syntax, keywords, types, or functions are compatible or supported across browsers.
8🔥3👍2
🚤 The Ultimate Guide to Font Performance Optimization

Font performance optimization is a set of web development techniques that make fonts load faster and render more smoothly. They involve practices such as thoughtful font selection, the use of performant font formats, self-hosting, optimized @font-face declarations, font display strategies, and more.

Optimizing the fonts displayed on your website comes with many web performance advantages, including faster page load times, improved user experience, and better results for Core Web Vitals and other performance metrics.

On the other hand, improving font performance often comes at the expense of aesthetics and creativity (i.e. you’ll need to be careful about using custom typography), which can make it harder to establish a distinguishable brand identity...
7👍3
Packt.Building.Micro.Frontends.with.React.18.1804610968.pdf
5.6 MB
📚 Free book

Building Micro Frontends with React 18: Develop and deploy scalable applications using micro frontend strategies (2023
)

By Vinci J Rufus

#book
9👍1
👨‍💻 VS Code extension

Error
Lens turbo-charges language diagnostic features by making diagnostics stand out more prominently, highlighting the entire line wherever a diagnostic is generated by the language and also prints the message inline.
8🔥2
🧳 How to Create a Chrome Extension with React, TypeScript, TailwindCSS, and Vite

Creating a Chrome extension can be a fun and rewarding project, especially when you combine powerful tools like React, TypeScript, TailwindCSS, and Vite. In this article, we'll walk you through the entire process step-by-step, ensuring you have a clear understanding of how to build your own Chrome extension in 2024. Whether you're a seasoned developer or just starting out, this guide will help you navigate the complexities of extension development with ease.
9🔥3
Free Figma Template: Travel agency

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template
👍10🔥32
🗣 45 Visual Studio Code Shortcuts for Boosting Your Productivity

Please note that these shortcuts are taken from VS Code’s documentation. If some shortcuts don’t work, it could be due to changes in shortcuts in your editor or file format or sometimes due to extensions installed...
10👍1🔥1
Free Figma Template: Car rent

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
👍102
🚎 CSS Protips

A collection of tips to help take your CSS skills pro.
11👍4
JavaScript All-in-One For Dummies.pdf
23.5 MB
📒 FREE Book

JavaScript All-in-One For Dummies (2023)

By:
Chris Minnick

#book
14👍4👌1
📒 What's new in ECMAScript 2024

▫️Improved work with unicode
▫️Atomics.waitAsync
▫️Extensible ArrayBuffer
▫️Promise.withResolvers
7👍2
Free Figma Template: Flowers store

🧠 Difficulty: 🥕🥕🥕

#Figma #Template
🔥12👍52
🤖 AIHawk: Automate your job search with AI

AIHawk is a Python script that helps you automatically submit your resume to various job openings. The project supports integration with job search sites (LinkedIn) and uses AI to optimize the application process.
7🔥1
React_js_Design_Patterns_Learn_how_to_build_scalable_React_apps.pdf
3.1 MB
📒 FREE Book

React.js Design Patterns: Learn how to build scalable React appswith ease
(2023)

By:
Anthony Onyekachukwu Okonta

#book
👍10