Frontend & Web Dev, Marketing, SEO, GEO | HI Web
15.2K subscribers
465 photos
16 videos
51 files
86 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
💡A Simple Way to Add Custom Form Validation with JavaScript's setCustomValidity() Method: A Note for Front-End Developers
🔥112👍1👏1
😶‍🌫️ 10 Backend Terms Every Frontend Developer Should Know

When a backend dev gives their update in the daily standup meeting, most frontend devs are clueless about the work they're doing. They use a lot of jargons that sound gibberish to us frontend devs. But not anymore!
14👌2👍1
🎆 Relatively New Things You Should Know about HTML Heading Into 2025

Not all of this is like absolutely brand spanking new just-dropped-in-2024 stuff. Some of it is, but generally it’s relatively new stuff that’s all pretty great. I’m pointing things out that I think are really worth knowing about. It’s possible you haven’t kept up too much with HTML developments as it tends to, rightfully, move a lot slower than CSS or JavaScript.
7
Recently, CSS has supported "logical" direction based properties for margin, padding, border, etc!

Previous to this, we were able to define properties based on physical directions like left, right, etc. This was a problem when different writing modes come into play, such as Arabic which is written from right to left, or traditional Chinese, Japanese, which are written from top to bottom.

👉 These new properties automatically adjust to the writing mode without the need for media queries.

"block" indicates main axis of writing mode (top to bottom for English)

"inline" indicates the cross axis of the writing mode (left to right for English)

You can combine this to create different properties for margin, padding, border, size and inset

👉 margin-block-end
👉 padding-inline
👉 border-inline-start
👉 inline-size
👉 block-size

This also has the benefit that it provides shorthands like margin-inline which sets both left and right margin
🔥76👍2
🥕 Understanding the Differences Between WebSocket and Socket.IO

Modern web applications rely on real-time data exchange for seamless user experiences. Technologies like WebSocket and Socket.IO allow instant, two-way communication between clients and servers. This guide explores how WebSocket works, its benefits and limitations, and why Socket.IO is a powerful tool for real-time interactions.
10👍1
TTFB and its importance for performance

Strategies for improving TTFB and overall page load speed considering various factors.
12
❤️‍🔥 Working with the Context API in React

An overview article about how the Context API helps manage application state and share data between components without having to pass it through props. Examples of using the Context API.
13
⚡️ How we tamed Node.js event loop lag: a deepdive

At around 11pm local time (10pm UTC) on Thursday June 20, we were alerted to some issues in our production services powering the cloud, as some of our dashboard/API instances started crashing.

We hopped on to our AWS production dashboard and saw that the CPU usage of our instances were really high and growing.
17
🐸 F.I.R.S.T Principles: A Guide to Better Code Testing

Unit testing is a crucial aspect of modern software development, ensuring code reliability and maintainability. To maximize testing efficiency, developers should follow the F.I.R.S.T principles:

- Fast
- Isolated
- Repeatable
- Self-Validating
- Thorough/Timely

By adhering to these principles, teams can create robust test suites that enhance code quality while maintaining development speed. Let’s explore each principle with practical examples in React.
13
👨‍🚀 Revisiting CSS Multi-Column Layout

Honestly, it’s difficult for me to come to terms with, but almost 20 years have passed since I wrote my first book, Transcending CSS.
8
Best 3 Ways to Center a Div.
15