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
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
🪝 Vivus

A library for creating drawn animations using SVG. Many different animations are available, as well as the ability to create your own script for drawing SVG in any way you like.
17
🤖 I watch bloggers and noticed that every other one of them advertises zapier – a platform for automation. They say everything is so simple there: connect nodes, get a zap and that's it – craft your own agents. But a subscription costs $20 to make slightly complex zaps.

Then I decided to review open source with similar functionality. And I found automatisch. The service is rolled out with Docker and is ultra-simple. The approach of zapier is one to one, only poorer in functionality.
11👍2