Free Figma Template: Sport app

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

🪝 Smooth Anchor Scroll in React

Aloha, frontend comrades! 🌴
Recently I had to solve a classic UX problem: when a user closes one tab or section, they should be automatically scrolled to another part of the page.

Sounds simple enough, right? Here’s how you can implement anchor-like behavior in React using ref and scrollIntoView().

⸻

🔧 The gist:
1. Create a ref for the target element
2. Trigger ref.current.scrollIntoView() when needed

⸻

🧪 Example Code:

import React, { useRef } from 'react';

const ScrollDemo = () => {
  const myRef = useRef(null);

  const executeScroll = () => myRef.current.scrollIntoView();

  return (
    <>
      <div style={{ height: 600 }} />
      <div ref={myRef}>This is the element we’ll scroll to</div>
      <div style={{ height: 1500 }} />
      <button onClick={executeScroll}>Scroll to element</button>
    </>
  );
};

✨ Bonus tip: You can add behavior: "smooth" for smooth scrolling like this:

myRef.current.scrollIntoView({ behavior: "smooth" });

Happy experimenting!
💬 Have you ever needed anchors in a React app?
📤 Share this post with a dev who loves clean UX.

👨‍🍼 Junior Tip

🧠 If you’re a junior dev, here’s ONE mindset shift to level up:

💬 Stop writing code to “make it work.”
Start writing code you can defend in a code review.

📤 Forward to a dev starting their first job.

🥋 IYKYK

🧪 Only real devs know what this means:

== vs ===  
null vs undefined  
0.1 + 0.2 !== 0.3  
NaN !== NaN  

😵‍💫 Drop the one that haunted you most.
👀 Forward to a dev friend to test their sanity.

UX Red Flag Sunday ✅

🚩 UX red flags that scream “junior coded this”:
• <div>s with onClick instead of <button>
• Scroll jank
• Input with no label
• Spinner. Forever. No feedback.

❗ Seen worse? Drop it below.
🧠 Save this for your code review checklist.

🙏 Dev Confession Monday

Forgive me, dev Gods, for I have sinned:
• Wrote CSS in JS… and enjoyed it
• Pushed to main on Friday
• Used !important 12 times
• Ignored eslint warnings

🧼 Cleanse yourself in the comments.
📨 Confess anonymously: tag a fellow sinner.

Free Figma Template: Car Marketplace

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

🖥 JavaScript Tip:

🌟 Use URLSearchParams to easily manage query parameters!

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

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

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

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

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

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

⏳ TTFB and its importance for performance

Strategies for improving TTFB and overall page load speed considering various factors.

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