Free Figma Template: Real estate

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

⭐️CSS Tip!⭐️

To create an inverted :hover effect, you can use mix-blend-mode with custom :hover properties.

button > span {
  left: calc(var(--x, 0) * 1px);
  top: calc(var(--y, 0) * 1px);
  mix-blend-mode: difference; 
}

The cool thing is that using mix-blend-mode acts as a color inverter, which works well with monochrome controls.

As for how to move this code to JavaScript?

const UPDATE = ({target, x, y }) => {
  const bounds = target.getBoundingClientRect()
  target .style.setProperty('--x', x - bounds.left)
  target .style.setProperty('--y', y - bounds .top)
}

const BTNS = document.querySelectorAll('button')
BTNS.forEach(BTN => BTN.addEventListener('pointermove', UPDATE))

button:is(:hover, :focus-visible) {
  --active: 1;
}
button span {
  transform: translate(-50%, -50%) scale(calc(var(--active, 0) * 3);
  transition: transform 0.25s;
}

🤳 How to Validate Forms in React and React Native Using Yup and Formik

Validation is a key part of development, regardless of what programming language you’re writing. Developers should always be validating user input, API parameters, and retrieved values.

Free Figma Template: MYEL

🧠 Difficulty: 🥕🥕

#Figma #Template

reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free.

❓❓❓What are you running this code for and why?

Write the answer in the comments 🔻

✅ Answer:

31
31

🔍 Explanation:

Creating the person1 object: The person1 object is created with properties name and age.
Assigning person2 = person1: This does not create a copy of the person1 object but instead creates a reference to the same object in memory. As a result, both person1 and person2 point to the same object.
Modifying the age property of person2: Changing person2.age also affects person1.age because both identifiers refer to the same object.
Outputting person1.age and person2.age: Both values will be 31 because the modification to person2.age also altered person1.age.

🤠 GDevelop is a full-featured, no-code, open-source game development software. You can build 2D, 3D and multiplayer games for mobile (iOS, Android), desktop and the web. GDevelop is fast and easy to use: the game logic is built up using an intuitive and powerful event-based system and reusable behaviors.

Free Figma Template: RIVO - multi page template

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

🎄 Hey everyone, happy New Year in advance!

This year has been full of coding, bug hunting, fixes, and tons of growth in our favorite craft. 💻 Here’s to 2025 bringing you exciting projects, smooth deadlines, and endless inspiration for new achievements.

Wishing you clean code, responsive designs, and a perfect balance between work and life. May your documentation always make sense, and your deployments go flawlessly on the first try. 🚀

Thank you for sticking around this year. There’s so much more exciting content and surprises coming your way.

✨ Speaking of surprises... In 2025, I’m launching a platform with courses and premium Figma templates designed specifically for web developers! The courses will be hands-on, guiding you step by step to create your very own portfolio-ready pet project. Whether you’re just starting or looking to sharpen your skills, this platform will be your go-to for practical learning and professional growth.

Happy New Year! 🥂

📚 The Art of Micro Frontends: Build highly scalable, distributed web applications with multiple teams (2024)

By: Florian Rappl

#book #free_book

🚃 React Folder Structure in 5 Steps [2024]

Organizing large React applications into folders and files is a topic that often sparks strong opinions. I found it challenging to write about this, as there isn't a definitive "correct" approach. However, I frequently get asked how I structure my React projects, from small to large, and I'm happy to share my approach.

✍️ Drag to Select

This past summer, I led a project at Makeswift to rework our file manager. Makeswift is a website builder and many of our users have hundreds of files. To manage hundreds of anything you need bulk operations, but bulk operations aren't helpful if selecting things is cumbersome, so drag selection was a key part of my vision for making Makeswift's file manager feel native.

Free Figma Template: Newspaper

🧠 Difficulty: 🥕🥕🥕🥕

#Figma #Template

❤️‍🔥❤️‍🔥❤️‍🔥 GitHub Profile Generator

GitHub Profile Generator can quickly and easily create a beautifully designed profile. The tool is indispensable for developers, students, and job seekers.

✂️ Top 10 JavaScript SEO Tricks Every Developer Should Know

JavaScript SEO is crucial for ensuring your web application is discoverable by search engines while providing a rich user experience.

While JavaScript frameworks offer dynamic functionality, if search engines can’t properly interpret your JS content, you risk losing visibility and traffic. Search engines like Google can execute JavaScript to some extent — despite this, relying solely on their capabilities is risky.

Free Figma Template: Fashion

🧠 Difficulty: 🥕🥕🥕

#Figma #Template

🚸 How to Drag and Drop in React

A React tutorial by example about how to use drag and drop in React. Here you will learn how to create a DnD component in React step by step. First, you will implement it as vertical list, later as horizontal list, and in between with lots of customizations as examples. We will be using @hello-pangea/dnd for this React tutorial.

〽️ Bézier curves

Bézier curves have been a recurring theme in my frontend engineering career. I have used them extensively in my work - in animations and SVG paths of illustrations and icons. However, I only recently took an interest in understanding the underlying logic that governs their behaviour. This demystified curve-related path commands for me and gave me a deeper understanding of web animations. In this article, I’ll share my interesting findings on Bézier curves.