📝 CSS HANDBOOK

CSS, a shorthand for Cascading Style Sheets, is one of the main building blocks of the Web. Its history goes back to the 90's and along with HTML it has changed a lot since its humble beginnings.
Having created websites since before CSS existed, I have seen its evolution. 10 CSS is an amazing tool, and in the last few years it has grown a lot, introducing many fantastic features like CSS Grid, Flexbox and CSS Custom Properties.

📝 JS HANDBOOK

The JavaScript Handbook follows the 80/20 rule: learn in 20% of the time the 80% of a topic.
In particular, the goal is to get you up to speed quickly with JavaScript.

🔗 CSS Anchor Positioning Guide

Juan Diego Rodríguez created an in-depth guide on CSS Anchor Positioning, including its syntax and properties, positioning one element next to another, and even resizing elements relative to other elements.

❤️ JavaScript Roadmap

💥 Tailwind CSS is ruining web development.

I said it.
You build faster, but you stop thinking in CSS.
Agree or disagree?

👉 Drop your opinion below.

🎯 Here’s how to center anything in CSS — even your soul:

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

🔥 Bookmark this. Or tattoo it on your arm.

🔁 Share it with a junior dev.

😱 WTF

Ever seen this JS behavior?

console.log([] + []); // ''
console.log([] + {}); // '[object Object]'
console.log({} + []); // 0

WTF is going on here?
Can you explain the 3rd one?

⚡️ React trick: use useEffect in React like a pro

useEffect(() => {
  const handler = () => console.log('resize');
  window.addEventListener('resize', handler);

  return () => window.removeEventListener('resize', handler);
}, []);

✅ Clean up side effects.
💬 Have you ever forgotten the return part?

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!