Frontend & Web Dev, Marketing, SEO, GEO | HI Web

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

Best 3 Ways to Center a Div.

👨‍🚀 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.

🐸 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.

⚡️ 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.

❤️‍🔥 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.

⏳ TTFB and its importance for performance Strategies for improving TTFB and overall page load speed considering various factors.

🥕 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.

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

🎆 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.

😶‍🌫️ 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!

💡A Simple Way to Add Custom Form Validation with JavaScript's setCustomValidity() Method: A Note for Front-End Developers

🔥 doom-captcha is a captcha that can be solved by killing three monsters in the game Doom on Nightmare difficulty! 🌟 There is no better protection against bots yet...

🖥 JavaScript Tip: 🌟 Use URLSearchParams to easily manage query parameters!

Free Figma Template: Car Marketplace 🧠 Difficulty: 🥕🥕🥕🥕 #Figma #Template