⛅️ Meet the New Safe Assignment Operator (?=) in JavaScript
Modern JavaScript development often encounters tasks involving asynchronous operations and error handling. Typically, try-catch and async-await constructs are used for these purposes. However, they can bloat the code and make it harder to read. To address this issue, a new safe assignment operator ?= has been proposed, which significantly simplifies error handling and improves code readability. In this article, we’ll explore how this operator works, its features, and the benefits it offers developers.
Modern JavaScript development often encounters tasks involving asynchronous operations and error handling. Typically, try-catch and async-await constructs are used for these purposes. However, they can bloat the code and make it harder to read. To address this issue, a new safe assignment operator ?= has been proposed, which significantly simplifies error handling and improves code readability. In this article, we’ll explore how this operator works, its features, and the benefits it offers developers.
❤13👍3👎1
This media is not supported in your browser
VIEW IN TELEGRAM
🪡 Exploring Playful Context-Aware Animations for Fixed Elements
The other day, I was browsing a nicely designed “About” page, and, like many other sites, it had the familiar pattern of a fixed logo at the top while scrolling. This is quite common, but sometimes the logo ends up overlapping with the text, making things a bit hard to read. You might see this as a quirk of brutalist design, but it got me thinking: what if we hide the logo during those moments when it intersects with the text?
The other day, I was browsing a nicely designed “About” page, and, like many other sites, it had the familiar pattern of a fixed logo at the top while scrolling. This is quite common, but sometimes the logo ends up overlapping with the text, making things a bit hard to read. You might see this as a quirk of brutalist design, but it got me thinking: what if we hide the logo during those moments when it intersects with the text?
❤8👍3
This media is not supported in your browser
VIEW IN TELEGRAM
⭐️CSS Tip!⭐️
To create an inverted :hover effect, you can use mix-blend-mode with custom :hover properties.
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?
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;
}🔥15👍12❤4👌1
This media is not supported in your browser
VIEW IN TELEGRAM
reveal.js is an open source HTML presentation framework. It enables anyone with a web browser to create beautiful presentations for free.
❤13👍1🔥1
❓❓❓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.
Write the answer in the comments 🔻
✅ Answer:
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.
👍15❤2🔥2👌1
🤠 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.
👍13🔥1
🎄 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! 🥂
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! 🥂
❤17👍8🔥2👏1
Packt.The.Art.of.Micro.Frontends.2nd.Edition.pdf
7.6 MB
📚 The Art of Micro Frontends: Build highly scalable, distributed web applications with multiple teams (2024)
By: Florian Rappl
#book #free_book
By: Florian Rappl
#book #free_book
❤12👍6
🚃 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.
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.
👍6❤4👏2
✍️ 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.
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.
👍11❤4
✂️ 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.
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.
❤12👍2
🚸 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.
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.
❤8👍6