<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Alexandra</title>
    <description>The latest articles on DEV Community by Alexandra (@ale3oula).</description>
    <link>https://dev.to/ale3oula</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F155897%2Fbd0b9c2b-1685-487f-9de3-5096a19ae2eb.png</url>
      <title>DEV Community: Alexandra</title>
      <link>https://dev.to/ale3oula</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/ale3oula"/>
    <language>en</language>
    <item>
      <title>The Curiosity Gap: Why We've Stopped Asking Questions</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Tue, 22 Sep 2026 08:26:58 +0000</pubDate>
      <link>https://dev.to/ale3oula/the-curiosity-gap-why-weve-stopped-asking-questions-39e4</link>
      <guid>https://dev.to/ale3oula/the-curiosity-gap-why-weve-stopped-asking-questions-39e4</guid>
      <description>&lt;p&gt;In a comment some weeks ago (&lt;a href="https://dev.to/ale3oula/comment/3f3j5"&gt;link&lt;/a&gt;) i wrote about how it doesn't matter if you are using AI or not, or if you call yourself a vibe coder or a SWE. Over my years of working with code, I have seen passionate people who are excited and want the product to succeed, and people who have no interest in improving anything and promote enshittification. In my unpopular opinion, it all comes down to how much you care about the outcome and the quality of your work, and how curious you are to learn the whys.&lt;/p&gt;

&lt;p&gt;In this post I want to dig into that second part: curiosity, or rather, the lack of it. Last year I felt so stuck, I didn't feel that I was learning anything or producing the results I want to. Even though I was shipping code (a lot of it), everything was feeling pointless. Everyone around me was so obsessed of automating everything, that learning and progressing as an engineer was an afterthought. Even though they were pushing us to use AI in a ridiculous degree, and our performance was almost certainly evaluated by token usage, they didn't offer any material, courses on how these systems really work, what are the optimal ways of using them and why we should care. Their thought process sounded more like "use-this-produce-money" and the magical answer to everything was "ask claude".&lt;/p&gt;

&lt;p&gt;Buuuut...What it took me a long time to realise was that the only person that is responsible for my learning and the quality of my work, is me. I had slowly and steadily gave up trying, because everyone was telling me that I will be replaced. But nobody will come and save me, or implant knowledge in my head. It's on me whether I offload all my thought process to AI and don't care anymore, quote very confidently what claude answers me back or whether I doubt on the quality of my work and push for the best. Somehow this is how I started writing here again. My mantra is that if you can't explain it simple, you don't know it, so writing helped me identify my gaps and what really really interests me.&lt;/p&gt;

&lt;p&gt;I see lately both in my friends, my professional circle and even on linkedin, that many people have mentally given up (generally, not only in SWE). The state of the world isn’t the best. We’re constantly hearing about AI replacing jobs, industries changing overnight, economic uncertainty, climate anxiety, wars, and about 147 other reasons to wonder what the hell we’re doing here and what is the point of anything.&lt;/p&gt;

&lt;p&gt;When you’re constantly being told that whatever you’re learning might be automated tomorrow, I can understand why people stop investing to their skills or even to themselves. Why bother getting good at something if it might not matter in a few years (or months/weeks?). Why even bother look at the code when AI generates it, AI reviews it and AI documents it? Why even invest on learning how to code? And somewhere along these lines we lost everything that made this job interesting.&lt;/p&gt;

&lt;p&gt;My question to you dear reader: Does it really matter if AI can do the skill/task/programming? The promise of these fancy tools was to automate the boring tasks and us the humans we will continue doing the interesting or difficult parts. Is that what we are really doing? Somewhere in this trip we started offloading the interesting or the difficult and kept the worst part of this job for us - managing a tool. I like solving problems, find where this little bug comes from, create a new feature. It's like little puzzles to me, that you play the detective and you need to find the culprit. I really enjoy solving these by myself. So who cares if they can be automated? The world won't stop about the half hour more I will take to do something without Claude whispering "Yes, you are right, i underestimated the scope".   Not everything should be done in the name of automation and efficiency, sometimes we do stuff for the sake of enjoyment and curiosity.&lt;/p&gt;

&lt;p&gt;So maybe it's a good time to re-invest to ourselves and start be curious again. Care about what we are doing, even if we don’t know whether that thing will still exist in a year. The time that we invest to ourselves and our skills are never wasted. You can learn a new programming language, try a non-tech hobby, learn how the electronics world works, try a new library, revisit old projects, or build something completely unrelated to our job. Maybe we get the inspiration or motivation we need from somewhere we weren’t expecting.  &lt;/p&gt;

&lt;p&gt;I don’t think the answer to uncertainty is to stop being curious because AI can do it anyway. Sometimes we learn because we want to expand our mind or simply because it's just fun. &lt;/p&gt;

&lt;p&gt;So, thank you, for coming to my Ted talk and the optimistic message of the day for you is: Stay curious! ✌️&lt;/p&gt;

&lt;p&gt;--&lt;br&gt;
This post was written by human(me!) and might have grammar errors.&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>ai</category>
    </item>
    <item>
      <title>AI psychosis might be a result of subscription fatigue</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Wed, 09 Sep 2026 13:06:37 +0000</pubDate>
      <link>https://dev.to/ale3oula/ai-psychosis-might-be-a-result-of-subscription-fatigue-a39</link>
      <guid>https://dev.to/ale3oula/ai-psychosis-might-be-a-result-of-subscription-fatigue-a39</guid>
      <description>&lt;p&gt;Continuing my thoughts after &lt;a href="https://dev.to/ale3oula/what-do-you-build-when-you-can-build-anything-4eg0"&gt;my previous article&lt;/a&gt;, and having too much free time lately, I have been spending more time than I should browsing LinkedIn, the place where the jobs descriptions die, but the AI influencers thrive.&lt;/p&gt;

&lt;h3&gt;
  
  
  The subscription problem
&lt;/h3&gt;

&lt;p&gt;After reading too many AI posts, followed by too many anti-AI posts, I’ve started to forming some kind of belief that the AI psychosis we’ve seeing over the last year is- at least some extend of it- a direct consequence of something that started long before AI was there: the endless subscription models that almost every major or minor company has imposed on us.&lt;/p&gt;

&lt;p&gt;For years, we’ve gradually moved from buying software to renting it (who remembers the good old days that when you bought a laptop, it was also included the actual CDs to install Word?). Instead of paying once for a product, we now pay a monthly subscription to keep accessing it. Yes, we are paying for infrastructure (since everything  seems to be on the cloud), ongoing development, support, content or a service that has recurring costs. &lt;/p&gt;

&lt;p&gt;But sometimes it feels like our money goes to something that it is more like a collection of features wrapped in a nice-ish interface.&lt;/p&gt;

&lt;h3&gt;
  
  
  Two Types of AI Enthusiasm
&lt;/h3&gt;

&lt;p&gt;Upon browsing Linkedin you can see too major groups:&lt;/p&gt;

&lt;p&gt;The first group has realised that they can build a spinoff of an application they need/want/like for a fraction of the cost. They don't necessarily need to build something sophisticated, with the best architecture or commercially viable. They just need something that solves their particular problem and AI helps them to achieve their goal.&lt;/p&gt;

&lt;p&gt;The second group has a different thought model. They have realized that they can build a spinoff of an application they need/want/like, and then they assume that because they were able to build it more or less cheap and easy, there must also be an opportunity to monetize it.&lt;/p&gt;

&lt;p&gt;In my humble opinion this second group is where some of the current enthusiasm around AI starts becoming disconnected from reality. Being able to build something in a low price does not mean that someone is willing to pay you for it or you solve any particular novel problem.&lt;/p&gt;

&lt;h3&gt;
  
  
  AI Didn't Democratise Software
&lt;/h3&gt;

&lt;p&gt;So, did AI unlock our potential to democratize code or reduce (finally) the prices? Absolutely not.&lt;/p&gt;

&lt;p&gt;What AI has done is reduce the cost and effort required to produce &lt;em&gt;certain types of software&lt;/em&gt;. We have to consider the difference between the cost of creating that said software and the value that this software provides.&lt;/p&gt;

&lt;p&gt;If the software is just an interface around something easy to reproduce, then yes, AI can make it much less valuable. But there are plenty of businesses where the software itself isn't the main reason people buying it. That could be the trust in brand or the security promise etc.&lt;/p&gt;

&lt;h3&gt;
  
  
  Software Isn't Always the Product
&lt;/h3&gt;

&lt;p&gt;There are some services that you can’t really hurt and it doesn’t even matter if they use AI or not. Their value comes from something the average person can’t reproduce: their content.&lt;/p&gt;

&lt;p&gt;Streaming services are a good example. Netflix can charge (or change whenever they want) a monthly subscription not because the application is difficult to recreate (the contrary), but because its value is the content available inside the app.&lt;/p&gt;

&lt;p&gt;Yes, you could build your own basic streaming application version very easy. But that doesn’t give you access to the catalogue of movies or shows. &lt;/p&gt;

&lt;p&gt;Sure, you could start buying DVDs, digitise everything, build a ridiculous amount of storage and spend the rest of my life maintaining it. But at that point, I might as well just pay for the netflix subscription.&lt;/p&gt;

&lt;p&gt;Amazon works in a similar way. There is nothing revolutionary about the concept of an online storefront. A developer can build a basic version of an Amazon-like interface relatively quickly (with or without AI).&lt;/p&gt;

&lt;p&gt;But Amazon isn’t valuable because it has product cards, a shopping cart and a checkout page. The real value is everything behind them: the sellers, warehouses, logistics, delivery network, payment systems, customer service and, perhaps most importantly, the convenience of having almost anything delivered to your door.&lt;/p&gt;

&lt;h3&gt;
  
  
  The Software We Never Built
&lt;/h3&gt;

&lt;p&gt;The truth is that AI hasn't made software worthless but rather made a particular category of software easier to reproduce.&lt;/p&gt;

&lt;p&gt;The last years, we have accepted subscription software as the default. If we needed a particular functionality, we would search for a SaaS product, create an account and add another recurring payment to a long list of subscriptions we already have. But now we can just consider: "Can I just build and maintain the thing I actually need?"&lt;/p&gt;

&lt;h3&gt;
  
  
  What Actually Changes?
&lt;/h3&gt;

&lt;p&gt;Realistically, I don't think everyone is going to become a software entrepreneur, and I certainly don't think every AI-generated SaaS product is going to become a successful business. Actually, i believe the opposite, most of them will fail, because when everyone can build another spin-off, building anotherx2 spin-off isn't much of a competitive advantage.&lt;/p&gt;

&lt;p&gt;In fact, we are already seeing an enormous amount of software being created that nobody actually needs or cares about. What I do think is changing is the relationship between users and software companies, now the users can make the decision between building or buying that software more or less in the same price (or even cheaper).&lt;/p&gt;

&lt;p&gt;These tools won't make us billionaires or help us to make the next billion-dollar application. I think the future lies more in making the tiny, boring, incredibly specific tool that only you need economically reasonable.&lt;/p&gt;

&lt;p&gt;The companies that should be worried aren't necessarily the ones selling complex technology or very good content. But the ones whose entire value proposition is a thin layer of software sitting between the user and something the user can now reproduce themselves.&lt;/p&gt;

&lt;p&gt;So What is your take? &lt;strong&gt;Do you think AI will change the way we buy/rent software?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Will we start building the small tools we need ourselves or will convenience and reliability still be enough to make subscriptions withstand?&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Which types of software do you think are most vulnerable to this shift?&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;This article reflects my own thoughts, and is written by me, but i use AI to help me with the grammar! &lt;/p&gt;

&lt;p&gt;This article isn't about AI being good or bad, but more than how the economy changes around it. You can agree or disagree but be nice in the comments.&lt;/p&gt;

</description>
      <category>ai</category>
      <category>discuss</category>
    </item>
    <item>
      <title>What do you build when you can build anything?</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Wed, 02 Sep 2026 16:38:09 +0000</pubDate>
      <link>https://dev.to/ale3oula/what-do-you-build-when-you-can-build-anything-4eg0</link>
      <guid>https://dev.to/ale3oula/what-do-you-build-when-you-can-build-anything-4eg0</guid>
      <description>&lt;p&gt;My hot take is: Telling people that they have to build endlessly is very, very, very bad advice. If you have been remotely on LinkedIn over the last six months, you will have seen two different camps. The AI haters, the ones who don’t want to lay their eyes on your AI-generated code, article or post, and the AI defenders, the ones who say all day long that if we dont build with AI we will be left behind. But which camp is right? Both and neither, all together.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Cost of Building Everything
&lt;/h2&gt;

&lt;p&gt;I said building everything is a waste. A waste of resources (...poor water), a waste of money, a waste of time and a waste of bytes in a data centre, all for a dead product that maybe only one person will ever discover. The best skill we probably need to develop nowdays is knowing what not to build. In a world of endless possibilities, how do you choose what is a good idea? It is almost an impossible task.&lt;/p&gt;

&lt;p&gt;It all started with a random idea I had for an app. I like photography, and i often go for photo walks in my cities. My idea involved creating an app that helps you create/attend/do a photo walk. Sometimes I am already out with my camera and want to find the next place to take photos, but I don't know exactly where to go. Or maybe I want to find a well-known photospot and try to recreate a particular photo. What sounds like a simple feature quickly becomes a set of different user needs. I started sketching the idea, using AI to explore the flows and turn the word vomit in my head into something tangible. But I had to stop and ask myself: is this actually worth building? When I go for my little photowalks, I actually like to getting lost, and find unexpected things. Is this even a good idea?&lt;/p&gt;

&lt;p&gt;One would argue "why not" or even not think to question the idea at all. I could open my IDE, ask an agent to build the first version and have something running in a few hours. I could spend a weekend on it. I could launch it. I could even convince myself that I am doing something productive. But none of that answers the question. It only answers whether I can build it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Welcome to Agency Hell
&lt;/h2&gt;

&lt;p&gt;Engineers love to create their own personal versions of hell. First we had the tutorial hell, then we upgraded to the side-hustle culture hell. And now, apparently, we are in the 7th ring of founder and agency hell.&lt;/p&gt;

&lt;p&gt;For a long time, there was a constraint between having an idea and building it. You needed to know how to code, find a designer, learn a new framework, figure out deployment, pay for infrastructure, convince someone to use it and somehow find the time to do all of that while having a job. So, most ideas died somewhere along the way, and that was probably a good thing.&lt;/p&gt;

&lt;p&gt;AI removed a lot of those problems. You can have an idea in the morning and have a prototype by the evening. You can generate an app, the accompanying landing page, write the backend, create the db schema, produce the copy (with the compalsory em dashes) and deploy the thing without needing much more than some free time and a few API tokens (it could many $$, but that's an other discussion).&lt;/p&gt;

&lt;p&gt;To some people that sounds like a freedom. But freedom without direction can become its own kind of trap.&lt;/p&gt;

&lt;p&gt;When everything is possible, every idea starts to feel like an obligation. You see someone building an AI wrapper, so you build one. Someone launches a micro-SaaS, so you launch one. Someone makes €10,000 from a weekend project, so you start wondering why you haven’t done the same. This is what I mean by agency hell. Not the inability to build, but the constant feeling that you should be building.&lt;/p&gt;

&lt;h2&gt;
  
  
  What Do You Actually Care About?
&lt;/h2&gt;

&lt;p&gt;When you can build anything, what do you build, though? That question is very personal for each of us. We can rephrase it: what do you care about? That is a much more difficult question to answer. But (in my humble opinion) that will break or make your relationship with AI.&lt;/p&gt;

&lt;p&gt;I don't know anyone that grew up with aspirations on making the best accounting software, these kind of software comes from a need of understanding a complex domain. AI can help you build this kind of software, but it cannot give you a reason to care about the problem.&lt;/p&gt;

&lt;p&gt;Most people care about their families, their hobbies, their friends and the things that make their lives meaningful. Those are the places where interesting problems hide. You might build something because your mother struggles with a particular task, because your dance studio has an annoying process, because your photographer friend struggles with their workflow, or because something in your own life keeps bothering you.&lt;/p&gt;

&lt;p&gt;Not every hobby needs an app. Quite the opposite. The point is that caring about something gives you a reason to notice problems that other people don't see.&lt;/p&gt;

&lt;h2&gt;
  
  
  Possibility Isn’t Purpose
&lt;/h2&gt;

&lt;p&gt;In a world of possibilities, we probably have to become more selective about what we build. AI has changed the economics of software creation, yes, but there are still only so many hours in a day, only so many people who will use your product and only so many problems worth solving.&lt;/p&gt;

&lt;p&gt;Most people think AI unlocks some secret chest of money. The truth is that it doesn’t. It makes execution cheaper. It makes experimentation faster. It gives more people the ability to turn an idea into something real.&lt;/p&gt;

&lt;p&gt;But it cannot tell you which idea deserves your time.&lt;/p&gt;

&lt;p&gt;Because if you don't care about what you are building, congratulations, you just unlocked a whole new world of endless misery.&lt;/p&gt;

&lt;p&gt;-- &lt;/p&gt;

&lt;p&gt;I would really love to hear about your thoughts about this topic. Yesterday I saw at least 2 posts of identical ideas being implemented by different people. Do we squeeze ideas to fit in the market in non-existing problems (create our own new kind of hell), or we solve problems people (or ourselves) have? I know that not all software are build for usefulness, sometimes being fun is enough, but i seem to struggle to recognize if my ideas are actually good and worthy to bring into life. So what is your take? &lt;/p&gt;

&lt;p&gt;&lt;em&gt;This post was written by human (me!) and passed through an AI grammar revision.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ai</category>
      <category>productivity</category>
      <category>discuss</category>
    </item>
    <item>
      <title>From Figma to the browser: building a shared mental model</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Sun, 30 Aug 2026 10:58:03 +0000</pubDate>
      <link>https://dev.to/ale3oula/from-figma-to-the-browser-building-a-shared-mental-model-41p8</link>
      <guid>https://dev.to/ale3oula/from-figma-to-the-browser-building-a-shared-mental-model-41p8</guid>
      <description>&lt;p&gt;Throughout my career as an engineer, I have been given a countless amount of specs, design documents and Figma files to bring ideas to life. I have attended handoffs, kickoffs, design critiques, you name it. Something I noticed out through the years is more often than not, it feels like designers and developers are talking about the same thing while actually having fundamentally different mental models. And here is where the friction between these two disciplines comes into play. &lt;/p&gt;

&lt;h2&gt;
  
  
  The canvas vs. the browser
&lt;/h2&gt;

&lt;p&gt;A designer has a canvas, and moves around stuff in this space. They can put an element wherever they want, move it around, resize it. This is quick, easy, fun and provides them with the creativity that a designer needs.&lt;/p&gt;

&lt;p&gt;But, the browser doesn’t work like that. A browser organizes the elements in stacks. These elements have relationships, they take up space, and their position can change depending on the items around them.&lt;/p&gt;

&lt;p&gt;A design to an engineer is a snapshot in a particular size screen, and our job usually is to find the correct rules that produce this result and interpolate this to different sizes. &lt;/p&gt;

&lt;p&gt;The interesting part is that the gap between these two mental models isn't actually as big as it might seem. Design tools have started to give designers many of the same or similar concepts that developers use to build layouts. Figma has an "Auto Layout" option, for example, which is very close to the way we think about CSS Flexbox. This helps the designers and developers to find a common vocabulary and collaborate more.&lt;/p&gt;

&lt;h2&gt;
  
  
  Auto Layout → Flexbox
&lt;/h2&gt;

&lt;p&gt;If you have worked with CSS for a while, you probably know about Flexbox. It has already been available to developers for the last decade. &lt;/p&gt;

&lt;p&gt;The basic idea is simple: you have a container with a number of children, and you want to describe how those children should be laid out and how they should use their available space. Instead of telling the browser where each element should go, you describe the relationship between them.&lt;/p&gt;

&lt;p&gt;Imagine having multiple buttons inside a container. The moment you instruct that this container is a flex container, I can say that these buttons should sit next to each other, have a gap between them and be aligned to the center. If the container gets wider, the layout can adapt. If one button becomes larger because its label changes, the others can respond accordingly.&lt;/p&gt;

&lt;p&gt;Figma has something very similar: Auto Layout! If you have used Auto Layout in the past, you already understand many of the concepts behind Flexbox. You have a container and you decide whether its children are arranged horizontally or vertically. You define spacing and alignment. You decide how the container should behave when its contents change, and how the children should use the available space.&lt;/p&gt;

&lt;p&gt;And just like Figma allows you to nest Auto Layout frames, CSS allows you to nest flex containers.&lt;/p&gt;

&lt;p&gt;Each of those containers can have its own layout rules. One can arrange its children vertically, another horizontally, and another might allow one child to take up all the remaining space.&lt;/p&gt;

&lt;p&gt;The closer the mental model in Figma is to the mental model in the browser, the less translation is required between the two.&lt;/p&gt;

&lt;h2&gt;
  
  
  When one dimension isn't enough → CSS Grid
&lt;/h2&gt;

&lt;p&gt;CSS Flexbox solves many problems for frontend development, but it still is 1-dimensional layout. What that means is that it handles the items in a single main axis (something like a single row or column).&lt;/p&gt;

&lt;p&gt;In many problems we solve one dimension is not enough. So we have a CSS Grid, which is a container in 2 dimensions. Think about a dashboard, a photo gallery, or a page with multiple sections that need to line up across both rows and columns. Now we're not only just asking “how should these things sit next to each other?”, but also “how should these things relate to the structure of the entire layout?”&lt;/p&gt;

&lt;p&gt;The easiest way to picture this, it is a grid of cells, something like a table, but unlike a table, these cells aren't tied to the content in a particular row or column. We can define the structure of the layout and decide how elements should span across it.&lt;/p&gt;

&lt;p&gt;A designer might look at a Figma canvas and see a beautiful asymmetric layout: one large image spanning two columns, a group of cards underneath, and a section that stretches across the entire page. A developer doesn't need to reproduce that with a collection of arbitrary pixel positions, but they can describe the underlying structure.&lt;/p&gt;

&lt;p&gt;This gives designers something useful to think about when creating layouts. That doesn’t mean that grid is the answer to all the problems, we can mix and match those tools to achieve the result.&lt;/p&gt;

&lt;p&gt;The important thing is for the designer and developer to  work closely with each other. One can help each other,  by strong communication and understanding of each others language. It’s not about just handing off designs anymore, but more about thinking these systems and the interaction needed to achieve useful results.&lt;/p&gt;

&lt;h2&gt;
  
  
  Designing for change → responsive layouts
&lt;/h2&gt;

&lt;p&gt;A design might look as a static snapshot to a developer. It works in a very defined size. A Figma file might give us a desktop design and a mobile design, but the browser has to deal with everything in between. &lt;/p&gt;

&lt;p&gt;A breakpoint is essentially the point where the current layout stops making sense. In CSS we use media or container queries that help us to determine the perfect layout for each screen size and all the steps in between.&lt;/p&gt;

&lt;p&gt;Flexbox and Grid already give us layouts that can respond to changes in available space. A container can grow and shrink, items can wrap, and columns can adapt without us defining what should happen at every screen width.&lt;/p&gt;

&lt;p&gt;Instead of designing only “desktop” and “mobile”, think about the hierarchy of the interface and how that hierarchy should respond when space becomes constrained. Typography is a good example. A heading doesn't necessarily need one font size on desktop and another completely different font size on mobile. CSS gives us tools like clamp() that allow a value to scale within a defined range.&lt;/p&gt;

&lt;p&gt;The goal isn't to create a collection of screenshots that the developer has to somehow connect together. It's to define enough rules and constraints that the interface can behave sensibly in the space between those screenshots.&lt;/p&gt;

&lt;h2&gt;
  
  
  The container matters → container queries
&lt;/h2&gt;

&lt;p&gt;The responsive design can be elevated even more with container queries.&lt;/p&gt;

&lt;p&gt;We're probably more familiar with media queries in development, we use it for ages to create responsive designs. A media query looks at the viewport and asks how much space does the browser window have? Based on that, we can change the layout.&lt;/p&gt;

&lt;p&gt;But CSS gives us cool tools these days, and we can be more explicit on our responsive designs. Container queries ask a different question: How much space does this component actually have?&lt;/p&gt;

&lt;p&gt;Imagine we have a card component. On a large screen, the card might have enough space to show an image next to its content. But the same card could be placed inside a narrow sidebar, where that layout no longer makes sense.&lt;/p&gt;

&lt;p&gt;With a media query, the component would respond to the size of the screen. With a container query, it can respond to the space that is available to the component itself.&lt;/p&gt;

&lt;h2&gt;
  
  
  Beyond the handoff
&lt;/h2&gt;

&lt;p&gt;The goal isn't for the designers to become developers, or vice versa. A designer doesn't need to know how to write &lt;code&gt;grid-template-columns&lt;/code&gt;, and a developer doesn't need to know how to create a perfect Figma component.&lt;/p&gt;

&lt;p&gt;The goal is to understand enough of each other's world to share a mental model of what's being built. A good handoff isn't just a Figma link with a list of measurements, colors, and font sizes. Yes, all of these are useful, but they merely describe the result.&lt;/p&gt;

&lt;p&gt;What matters more is understanding the intention behind the design. The bridge between design and development isn't the handoff, but a &lt;strong&gt;shared mental model&lt;/strong&gt;.&lt;/p&gt;

</description>
      <category>design</category>
      <category>frontend</category>
      <category>ux</category>
      <category>webdev</category>
    </item>
    <item>
      <title>What two months of interviewing taught me about the 2026 tech job market</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Fri, 28 Aug 2026 11:40:20 +0000</pubDate>
      <link>https://dev.to/ale3oula/what-two-months-of-interviewing-taught-me-about-the-2026-tech-job-market-3d8n</link>
      <guid>https://dev.to/ale3oula/what-two-months-of-interviewing-taught-me-about-the-2026-tech-job-market-3d8n</guid>
      <description>&lt;p&gt;July wasn’t a particularly pleasant month for me.&lt;br&gt;
I was affected by the restructuring of the company I was working for, which meant going back into a job market I would politely describe as insane.&lt;/p&gt;

&lt;p&gt;Over the past two months, I’ve interviewed mostly for frontend, SWE and full-stack engineering roles, and I’ve noticed quite a few things that feel very different from the last time I was interviewing, around two years ago.&lt;/p&gt;

&lt;p&gt;I should preface this by saying that I’m not the best interviewee. My job is to be an engineer, not a professional interviewee or leetcode solver. I’m an introvert, and the job market increasingly requires a lot of soft skills: having a "brand", marketing yourself, selling your experience, being charismatic, thinking on-the-fly ideas and presenting yourself as the perfect candidate.&lt;/p&gt;

&lt;p&gt;None of that necessarily reflects how good you are at your actual job, and when the interview itself is stressful, that gap becomes even bigger.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. The expectation is to be the perfect fit
&lt;/h2&gt;

&lt;p&gt;In older interviews I had, there seemed to be more room for learning or better said "potential". You didn’t have to possess all the skills but to be eager to learn. Now, I’m seeing much more of: “You don't have exactly the experience we're looking for? Rejected.” &lt;/p&gt;

&lt;p&gt;If you don't match a large part of the job description already, there doesn't seem to be much appetite to invest in someone who could grow into the role.&lt;/p&gt;

&lt;p&gt;Maybe this is simply the market correcting itself after years of aggressive hiring, but I do wonder whether we’re losing some of the willingness to hire for potential.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. Interviewing well seems to matter more than engineering well
&lt;/h2&gt;

&lt;p&gt;To me this is one of the biggest frustrations on the job market right now. Interviews are artificial environments. You are asked to produce your best answer, code, idea, product, under pressure, with very little time to think.&lt;/p&gt;

&lt;p&gt;And yet we seem comfortable treating performance in that environment as a proxy for engineering ability.&lt;/p&gt;

&lt;p&gt;In one interview, I received feedback that I had frozen because interviewing is stressful for me, and that saying “I don't know” when nothing immediately came to mind wasn't a good signal.&lt;/p&gt;

&lt;p&gt;But isn't being able to say “I don't know” actually an important engineering skill?&lt;/p&gt;

&lt;p&gt;I would much rather work with someone who says:&lt;br&gt;
“I don't know yet. Let me investigate.”&lt;br&gt;
than someone who confidently makes something up because they think that's what the interview expects.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Companies want you to be everything and salaries don't necessarily reflect it
&lt;/h2&gt;

&lt;p&gt;The scope of some of the roles I've seen has become… ambitious. Frontend. Backend. Product. Design. Talking to customers. Making technical decisions. Owning the roadmap. Using AI. Moving independently.&lt;/p&gt;

&lt;p&gt;Basically: be the engineer, product manager, designer and mini-CEO of your area. Don't get me wrong that's not necessarily a bad thing, I actually like having ownership.B&lt;/p&gt;

&lt;p&gt;ut when a company expects one person to cover what used to be several different roles, I think it's fair to ask whether compensation and expectations have kept up with that change. Instead i see the salaries and budgets have..decreased?&lt;/p&gt;

&lt;p&gt;Especially in expensive cities like Amsterdam.&lt;br&gt;
You can live somewhere cheaper, that's true, but then you often trade money for commuting time, which is another cost.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Some job advertisements don't feel real
&lt;/h2&gt;

&lt;p&gt;Many of the job descriptions are not real (or better said don’t feel real). Or if they are real, I’ve seen them sitting open for months. &lt;/p&gt;

&lt;p&gt;I've seen job descriptions asking for extremely specific combinations of experience. And I've seen companies seemingly looking for a unicorn while complaining that they can't find people.&lt;/p&gt;

&lt;p&gt;Maybe they really can’t find talent? Or there is so much talent in the market that they don’t know what to do? Or do they ask for the impossible? Or are some of these roles not really intended to be filled in the first place?&lt;/p&gt;

&lt;p&gt;Because right now, we somehow have a situation where companies say they can't hire, while qualified people say they can't get hired.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. Job applications have become unnecessarily enormous
&lt;/h2&gt;

&lt;p&gt;We've all joked about uploading your CV and then being asked to manually enter every single thing that's already in your CV. Tbh, that's not even a big problem anymore.&lt;/p&gt;

&lt;p&gt;Most roles have open-ended questions. With the dreaded “What excites you about this role?” being on the top of the list, which "paying my rent and bills" is not necessirily an answer to. &lt;/p&gt;

&lt;p&gt;And then, my personal favourite (approaching the word pet-peeve):&lt;br&gt;
Record a 2-4 minute video answering X question.&lt;/p&gt;

&lt;p&gt;Have you ever spoken to an engineer before? Some of us are already fighting for our lives in a live coding interview. Now you want a casting audition too? I didn’t know i was getting hired to be an actor.&lt;/p&gt;

&lt;h2&gt;
  
  
  6. Job descriptions  are generally bad
&lt;/h2&gt;

&lt;p&gt;An other trend i see is an abundance of startups got their first founding engineers, followed by job descriptions that are obviously AI-generated. Five paragraphs of corporate language that nobody understands following 37 technologies in must-haves. You should of course move fast, own end-to-end, thrive in ambiguity, be 20x engineer and 45x productive.&lt;/p&gt;

&lt;p&gt;My brain has already left the building.&lt;/p&gt;

&lt;p&gt;And then companies complain about receiving hundreds of generic, AI-generated applications. But if you put little thought into the job description, why should candidates put significantly more thought into their application?&lt;/p&gt;

&lt;p&gt;You get as much effort as you put into it.&lt;/p&gt;

&lt;p&gt;These are simply observations from my own experience over the last two months, and I'm genuinely curious whether other engineers are seeing the same thing.&lt;/p&gt;

&lt;p&gt;Maybe it's the AI transition/psychosis. Maybe it's a correction after the hiring frenzy of the 2020 mass hiring. Or maybe I'm just particularly unlucky with interviews. 😅&lt;/p&gt;

&lt;p&gt;What have you noticed in the 2026 tech job market that feels different from a few years ago?&lt;/p&gt;

</description>
      <category>discuss</category>
      <category>interview</category>
      <category>software</category>
    </item>
    <item>
      <title>HTML is getting cool again: Meet the Invoker Commands API</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Sat, 22 Aug 2026 10:55:26 +0000</pubDate>
      <link>https://dev.to/ale3oula/html-is-getting-cool-again-meet-the-invoker-commands-api-1367</link>
      <guid>https://dev.to/ale3oula/html-is-getting-cool-again-meet-the-invoker-commands-api-1367</guid>
      <description>&lt;p&gt;For years, frontend development has had a slightly embarrassing relationship with HTML. We all read about semantic HTML, we talk about using the right landmarks, the right attributes, accessible forms, and meaningful elements. And then we go back to writing React.&lt;/p&gt;

&lt;p&gt;While the whole industry is obsessed with AI, browsers are shipping features that make the platform even more capable. Features that let us remove JS, reduce state, and express UI behaviour in HTML. But since AI is trained in the past, these are ignored or not recommended enough through old patterns.&lt;/p&gt;

&lt;h2&gt;
  
  
  State boilerplate to open a dialog
&lt;/h2&gt;

&lt;p&gt;Historically, in order to open a dialog or a popover, we need a chunk of custom boilerplate code.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight html"&gt;&lt;code&gt;&lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"open-dialog"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Open dialog&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;dialog&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"my-dialog"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;p&amp;gt;&lt;/span&gt;Dialog content&lt;span class="nt"&gt;&amp;lt;/p&amp;gt;&lt;/span&gt;
  &lt;span class="nt"&gt;&amp;lt;button&lt;/span&gt; &lt;span class="na"&gt;id=&lt;/span&gt;&lt;span class="s"&gt;"close-dialog"&lt;/span&gt;&lt;span class="nt"&gt;&amp;gt;&lt;/span&gt;Close&lt;span class="nt"&gt;&amp;lt;/button&amp;gt;&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/dialog&amp;gt;&lt;/span&gt;

&lt;span class="nt"&gt;&amp;lt;script&amp;gt;&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;dialog&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;my-dialog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;open-dialog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;dialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;showModal&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
  &lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;getElementById&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;close-dialog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;dialog&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;close&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="nt"&gt;&amp;lt;/script&amp;gt;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;We need a button to open our dialog, the dialog itself, and then we write JS to explain the interaction to the browser: "When the user clicks the button, open the dialog".&lt;/p&gt;

&lt;p&gt;If you're using React or Vue, this can get even more elaborate: You need some custom state, potentially pass it to your component, wire up an event handler, and then make sure everything stays in sync.&lt;/p&gt;

&lt;p&gt;Whether vanilla or framework, the code above is completely reasonable on its own, every frontend developer has written something similar a hundred times. But after writing it for the thousandth time, it made me wonder: do we really need application state to represent that a dialog is open? The answer is: it depends. Sometimes state is needed. But sometimes we're just rebuilding behaviour that HTML and the browser can already provide for us out of the box in 2026.&lt;/p&gt;

&lt;h2&gt;
  
  
  Enters the chat: the Invoker Commands API
&lt;/h2&gt;

&lt;p&gt;The Invoker Commands API provides us a way to declaratively assign behaviours to buttons, which then allows us to control these interactive elements. Instead of adding an event listener we can describe the relationship directly in HTML.&lt;/p&gt;

&lt;p&gt;The attributes that help us are &lt;code&gt;commandFor&lt;/code&gt; and &lt;code&gt;command&lt;/code&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;commandFor: turns our button into a "command invoker". It takes the ID of the element to control as its value.&lt;/li&gt;
&lt;li&gt;command: Specifies the action to be performed on that element.
&lt;/li&gt;
&lt;/ul&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;commandfor&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mycoolpopover&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;toggle-popover&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="nx"&gt;Toggle&lt;/span&gt; &lt;span class="nx"&gt;the&lt;/span&gt; &lt;span class="nx"&gt;popover&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;section&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mycoolpopover&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;popover&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;commandfor&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;mycoolpopover&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;hide-popover&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Close&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="nx"&gt;Awesome&lt;/span&gt; &lt;span class="nx"&gt;Popover&lt;/span&gt; &lt;span class="nx"&gt;content&lt;/span&gt;
&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/section&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  How to do it in React?
&lt;/h3&gt;

&lt;p&gt;All of these are transferable to your framework of choice:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;export&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;DeleteButton&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
    &lt;span class="o"&gt;&amp;lt;&amp;gt;&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;show-modal&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;commandFor&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;delete-dialog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="nx"&gt;Delete&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;
      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;dialog&lt;/span&gt; &lt;span class="nx"&gt;id&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;delete-dialog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;h2&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;Delete&lt;/span&gt; &lt;span class="nx"&gt;account&lt;/span&gt;&lt;span class="p"&gt;?&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/h2&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;p&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;&lt;span class="nx"&gt;This&lt;/span&gt; &lt;span class="nx"&gt;cannot&lt;/span&gt; &lt;span class="nx"&gt;be&lt;/span&gt; &lt;span class="nx"&gt;undone&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/p&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nx"&gt;button&lt;/span&gt; &lt;span class="nx"&gt;command&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;close&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt; &lt;span class="nx"&gt;commandFor&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;delete-dialog&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="o"&gt;&amp;gt;&lt;/span&gt;
          &lt;span class="nx"&gt;Cancel&lt;/span&gt;
        &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/button&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;      &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/dialog&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;    &lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="sr"&gt;/&lt;/span&gt;&lt;span class="err"&gt;&amp;gt;
&lt;/span&gt;  &lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;The important detail here is that React's JSX property is commandFor, while the resulting HTML attribute is commandfor&lt;/p&gt;

&lt;h3&gt;
  
  
  Is that a really big deal?
&lt;/h3&gt;

&lt;p&gt;At a first glance this looks like saving, maybe 10 lines of code. That's nice. But the most interesting is the shift of the responsibilities from us, back to the browsers. &lt;/p&gt;

&lt;p&gt;The browser isn't becoming less capable because we're writing less JavaScript, but rather the opposite. We finally need less JS.&lt;/p&gt;

&lt;h3&gt;
  
  
  Browser support
&lt;/h3&gt;

&lt;p&gt;Now, before everyone starts deleting their dialogs, there is a small catch: The Invoker Commands API is new. MDN currently lists it as Baseline 2025, with cross-browser availability in the latest browser versions since December 2025. Older browsers may not support it.&lt;/p&gt;

&lt;h3&gt;
  
  
  References
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Invoker_Commands_API" rel="noopener noreferrer"&gt;MDN — Invoker Commands API&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/button" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;&amp;lt;button&amp;gt;&lt;/code&gt; element&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;&amp;lt;dialog&amp;gt;&lt;/code&gt; element&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/API/Popover_API/Using" rel="noopener noreferrer"&gt;MDN — Using the Popover API&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>a11y</category>
    </item>
    <item>
      <title>How Many Introductions Away Are You From Pedro Pascal? A Practical Introduction to Graph Search</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Tue, 11 Aug 2026 14:05:24 +0000</pubDate>
      <link>https://dev.to/ale3oula/how-many-introductions-away-are-you-from-pedro-pascal-a-practical-introduction-to-graph-search-5bfg</link>
      <guid>https://dev.to/ale3oula/how-many-introductions-away-are-you-from-pedro-pascal-a-practical-introduction-to-graph-search-5bfg</guid>
      <description>&lt;p&gt;I was watching The Mandalorian the other day when it struck me that I don't know Pedro Pascal, which is, by itself, very tragic.&lt;/p&gt;

&lt;p&gt;But maybe I know someone, who knows someone, who knows someone, ..., who knows Pedro Pascal. Somewhere out there, there is a finite chain of introductions that connects me to him. So the important computer science question we try to solve today is: How many introductions would it take to reach him?&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwo5vkp7f5oiuc0uztyq8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fwo5vkp7f5oiuc0uztyq8.jpg" alt=" " width="738" height="414"&gt;&lt;/a&gt; &lt;/p&gt;

&lt;p&gt;We accidentally have invented a graph problem!&lt;/p&gt;

&lt;h3&gt;
  
  
  Turn your social life into a graph
&lt;/h3&gt;

&lt;p&gt;Imagine that each person on this earth is a &lt;strong&gt;node&lt;/strong&gt; and any relationship or acquaintance between two people is an &lt;strong&gt;edge&lt;/strong&gt;:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Alexandra ── Maria ── Sofia ── Pedro
    │
    └── John ── Elena ── Carlos

&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;This is an unweighted and undirected graph.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;Unweighted means that every connection counts the same. We don't care whether Maria is Sofia's best friend or someone she met once at a cafe.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;Undirected means the relationship is both ways: if Alexandra knows Maria, Maria knows Alexandra.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If we strip the fluff of the original question, it kinda changes from "How do I meet Pedro Pascal?" to  "Given an unweighted graph, what is the shortest path between node A and node B?", which if you are familiar with trees or graphs it sounds like a BFS (Breadth-First Search). &lt;/p&gt;

&lt;p&gt;In code, the simplest way to represent this kind of data is an &lt;strong&gt;adjacency list&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;graph&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;Alexandra&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Maria&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Maria&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alexandra&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sofia&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Sofia&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Maria&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Pedro&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Pedro&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Sofia&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;John&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alexandra&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Elena&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Elena&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;John&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Carlos&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
  &lt;span class="na"&gt;Carlos&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Elena&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;],&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Make our delusions an algorithm
&lt;/h3&gt;

&lt;p&gt;Unfortunately, screaming “DOES ANYONE KNOW PEDRO PASCAL?” into the void isn't an algorithm. It has no order, no memory, and no stopping condition. If you just wander from person to person picking whoever seems interesting, you can easily do this:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Alexandra → Maria → Sofia → Maria → Sofia → Maria → ...
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Because the graph is undirected, Maria connects back to Sofia and Sofia connects back to Maria. Without remembering who we met already, nothing stops us from revisiting the same people forever.&lt;/p&gt;

&lt;p&gt;So we basically need two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;A rule for what order to explore people in.&lt;/li&gt;
&lt;li&gt;A way to remember who we already visited.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That's where a queue and a visited set come in.&lt;/p&gt;

&lt;h3&gt;
  
  
  Breadth-first search explained
&lt;/h3&gt;

&lt;p&gt;The key observation for finding the shortest path is this: check everyone one connection away before checking anyone two connections away. This is breadth-first search, and it organizes the graph into levels:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Level 0        Alexandra
                  │
           ┌──────┴──────┐
Level 1   Maria          John
            │              │
Level 2   Sofia          Elena
            │
Level 3   PEDRO 🎉
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;BFS will check all my direct friends (level 1), if Pedro isn't there (🥲) will check the direct friends of my direct friends (level 2) and so on. The moment Pedro is found, you know that this is the shortest possible path, because every shorter one has already been checked.&lt;/p&gt;

&lt;h3&gt;
  
  
  Put everything together
&lt;/h3&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;
&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;introductionsAway&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;graph&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;degrees&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;

  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;visited&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;Set&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;]);&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[[&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;start&lt;/span&gt;&lt;span class="p"&gt;]]];&lt;/span&gt; 

  &lt;span class="k"&gt;while &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt; &lt;span class="o"&gt;&amp;gt;&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;shift&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

    &lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;friend&lt;/span&gt; &lt;span class="k"&gt;of&lt;/span&gt; &lt;span class="nx"&gt;graph&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;person&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;||&lt;/span&gt; &lt;span class="p"&gt;[])&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;visited&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;has&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;friend&lt;/span&gt;&lt;span class="p"&gt;))&lt;/span&gt; &lt;span class="k"&gt;continue&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
      &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;friend&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
        &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;degrees&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;friend&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
      &lt;span class="p"&gt;}&lt;/span&gt;

      &lt;span class="nx"&gt;visited&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;friend&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
      &lt;span class="nx"&gt;queue&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;push&lt;/span&gt;&lt;span class="p"&gt;([&lt;/span&gt;&lt;span class="nx"&gt;friend&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;[...&lt;/span&gt;&lt;span class="nx"&gt;path&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;friend&lt;/span&gt;&lt;span class="p"&gt;]]);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;degrees&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;path&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="p"&gt;[]&lt;/span&gt; &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  The twist: real relationships aren't equal
&lt;/h3&gt;

&lt;p&gt;So far in our problem knowing someone is binary. But you and I both know that's a lie. There's a biiiig  difference between:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Maria once stood next to Pedro at an event, and&lt;/li&gt;
&lt;li&gt;Pedro? Yeah, we're having dinner every Thursday.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Technically, both are relationships but practically, one of them is significantly more useful to my &lt;em&gt;mission&lt;/em&gt;.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Alexandra --2-- Maria --5-- Sofia --4-- Tessa --1-- Pedro
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;So let's assign every relationship an introduction cost. A close relationship has a low cost because asking for an introduction is easy. A weak acquaintance has a high cost because... well, good luck with that.&lt;/p&gt;

&lt;p&gt;The BFS algorithm doesn't know how to handle weights. For weighted graphs, we need to move our attention to &lt;strong&gt;Dijkstra's algorithm&lt;/strong&gt;.&lt;/p&gt;

&lt;h4&gt;
  
  
  Dijkstra's algorithm, briefly
&lt;/h4&gt;

&lt;p&gt;Dijkstra's algorithm asks a slightly different question:&lt;/p&gt;

&lt;p&gt;"What is the cheapest path from A to B?"&lt;/p&gt;

&lt;p&gt;Instead of exploring nodes in the order we discover them, we prioritize the node who currently has the lowest accumulated cost from our starting point.&lt;/p&gt;

&lt;p&gt;That usually means replacing BFS's regular queue with a priority queue.&lt;/p&gt;

&lt;h2&gt;
  
  
  Same graph, different nouns
&lt;/h2&gt;

&lt;p&gt;The Pedro Pascal situation is ridiculous, i know, but the underlying problem isn't. Change what the nodes and edges represent, and suddenly the same ideas appear everywhere.&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Domain&lt;/th&gt;
&lt;th&gt;Nodes&lt;/th&gt;
&lt;th&gt;Edges&lt;/th&gt;
&lt;th&gt;What "shortest path" answers&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Social graph&lt;/td&gt;
&lt;td&gt;People&lt;/td&gt;
&lt;td&gt;Relationships&lt;/td&gt;
&lt;td&gt;"How many introductions to Pedro Pascal?"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Maps / GPS&lt;/td&gt;
&lt;td&gt;Intersections&lt;/td&gt;
&lt;td&gt;Roads (weighted by time/distance)&lt;/td&gt;
&lt;td&gt;"Fastest route from A to B"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Web crawling&lt;/td&gt;
&lt;td&gt;Web pages&lt;/td&gt;
&lt;td&gt;Hyperlinks&lt;/td&gt;
&lt;td&gt;"How many clicks from this page to that one?"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Codebases&lt;/td&gt;
&lt;td&gt;Modules/files&lt;/td&gt;
&lt;td&gt;Imports/dependencies&lt;/td&gt;
&lt;td&gt;"What breaks if I change this file?"&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Recommendations&lt;/td&gt;
&lt;td&gt;Users or items&lt;/td&gt;
&lt;td&gt;Similarity/interaction strength&lt;/td&gt;
&lt;td&gt;"What's most relevant to this user?"&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Graphs are one of those computer science concepts that you initially hate and mostly dont understand. Nodes. Edges. Traversals. Queues. But they are everywhere.. The internet itself is basically one very big graph.&lt;/p&gt;

&lt;p&gt;And if by any chance anyone knows someone who knows someone... You know where to find me.&lt;/p&gt;

</description>
      <category>algorithms</category>
      <category>datastructures</category>
      <category>webdev</category>
      <category>discuss</category>
    </item>
    <item>
      <title>Frontend system design interviews are weird. Here’s how I now approach functional requirements.</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Sat, 08 Aug 2026 16:40:25 +0000</pubDate>
      <link>https://dev.to/ale3oula/frontend-system-design-interviews-are-weird-heres-how-i-now-approach-functional-requirements-3ea6</link>
      <guid>https://dev.to/ale3oula/frontend-system-design-interviews-are-weird-heres-how-i-now-approach-functional-requirements-3ea6</guid>
      <description>&lt;p&gt;One of the worst types of interviews for me is the system design. It feels overwhelming, even though i studied computer science, i took all the network and operating systems and DBMS courses. I have an idea on how to explain what a distributed system is. Put me in an interview, though, and sometimes my brain just goes blank.&lt;/p&gt;

&lt;p&gt;So usually in these interviews you either get a screenshot or you're given a broad prompt like:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Design a notification system.&lt;br&gt;
Design a URL shortener&lt;br&gt;
Design netflix&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;On one hand, you're thinking that these systems took entire teams years to design. On the other, your brain is already jumping to WebSockets, caching, React state, API endpoints, databases, pagination, and whether you're somehow expected to know how many servers Instagram has.&lt;/p&gt;

&lt;p&gt;Let's take a step back. Before deciding how we are going to build something, we need to know what we are building. So let me introduce you to.. functional requirements.&lt;/p&gt;

&lt;h2&gt;
  
  
  What are functional requirements?
&lt;/h2&gt;

&lt;p&gt;Functional requirements describe &lt;strong&gt;what a system should allow its users to do&lt;/strong&gt;. You have to clarify what the capabilities of the product is and how it should behave without knowing or specifying how these will be implemented.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Design a notification system for a web application&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This is very broad, and give this prompt to 10 people and you'll get 10 different sets of requirements. So what a 'notification system' means? Are these notification real-time? Can users interact with them? Do we need to keep a history? Can users mark them as read? Do they disappear?&lt;/p&gt;

&lt;p&gt;Before drawing a single architecture box, we need to establish the scope of the problem we are talking about.&lt;/p&gt;

&lt;p&gt;A first set of functional requirements could be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Users can receive notifications.&lt;/li&gt;
&lt;li&gt;Users can view their notifications.&lt;/li&gt;
&lt;li&gt;Users can mark a notification as read.&lt;/li&gt;
&lt;li&gt;Users can mark all notifications as read.&lt;/li&gt;
&lt;li&gt;Users can navigate from a notification to a details page.&lt;/li&gt;
&lt;li&gt;Users can see how many unread notifications they have.&lt;/li&gt;
&lt;li&gt;Users can receive new notifications without manually refreshing the page.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Functional vs non-functional requirements
&lt;/h2&gt;

&lt;p&gt;This distinction becomes particularly important in system design interviews.&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Functional requirements describe &lt;strong&gt;what the system does&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;Non-functional requirements describe &lt;strong&gt;how well the system needs to do it&lt;/strong&gt; or the constraints under which it operates.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For our notification system, these could include:&lt;/p&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Functional requirement&lt;/th&gt;
&lt;th&gt;Related non-functional concern&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Receive new notifications&lt;/td&gt;
&lt;td&gt;Updates should appear with low latency&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;View notification history&lt;/td&gt;
&lt;td&gt;Large histories should load efficiently&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Mark notifications as read&lt;/td&gt;
&lt;td&gt;UI updates should feel immediate&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;See unread count&lt;/td&gt;
&lt;td&gt;Count should remain consistent across the application&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Open related content&lt;/td&gt;
&lt;td&gt;Navigation should be reliable and accessible&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;

&lt;p&gt;Accessibility, performance, reliability, scalability, browser support, and latency are usually concerns that influence our architecture without defining the product feature itself. Usually all of these are non-functional requirements.&lt;/p&gt;

&lt;h2&gt;
  
  
  Don't accept the prompt as the specification
&lt;/h2&gt;

&lt;p&gt;One of the most important things to remember in a system design interview is that the interview prompt is usually intentionally incomplete. You don't get a specification, you have to deduct it with your interviewer. The most important thing in these type of interviews is to &lt;strong&gt;ask questions.&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;For example good questions in our example could be:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;What kinds of notifications are we supporting?&lt;/li&gt;
&lt;li&gt;Do notifications need to arrive in real time?&lt;/li&gt;
&lt;li&gt;Do users need access to their notification history?&lt;/li&gt;
&lt;li&gt;Can notifications be deleted?&lt;/li&gt;
&lt;li&gt;Do we need read/unread state?&lt;/li&gt;
&lt;li&gt;Should notifications synchronize across multiple tabs or devices?&lt;/li&gt;
&lt;li&gt;How many notifications might a user receive?&lt;/li&gt;
&lt;li&gt;Are we designing only the web experience, or mobile too?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If the interviewer tells you that notifications only need to update when the page reloads, your architecture will look very different from a system expected to deliver millions of real-time updates.&lt;/p&gt;

&lt;h2&gt;
  
  
  Make assumptions explicit
&lt;/h2&gt;

&lt;p&gt;Sometimes the interviewer won't give you every answer, and leave it up to you. So at this point inevitable you will make an assumption. Make an assumption and say it out loud.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;I'll assume we're designing the web notification center, notifications should arrive while the application is open, users can mark them as read, and we're not covering email or push notifications.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;That single sentence dramatically reduces the problem scope.&lt;/p&gt;

&lt;p&gt;Now instead of designing Every Notification System Known to Humanity, we're designing something concrete. This is one of the reasons functional requirements are so useful: they establish the boundaries of the system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Requirements drive architecture
&lt;/h2&gt;

&lt;p&gt;Once we understand the requirements, technical decisions start having a reason to exist.&lt;/p&gt;

&lt;p&gt;Suppose one requirement says:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Users should receive new notifications while using the application without refreshing the page.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now we have a technical problem to solve.&lt;/p&gt;

&lt;p&gt;How our system can solve this concrete problem? We could consider:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;polling&lt;/li&gt;
&lt;li&gt;Server-Sent Events&lt;/li&gt;
&lt;li&gt;WebSockets&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So, we didn't jump immediately to a conclusion to use Websockets? We derived it from a user requirement and the architecture followed.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Users can view older notifications.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now we need to think about pagination and data fetching.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Users can mark notifications as read.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now we need to think about mutations, optimistic updates, error handling, and synchronization.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Users can see their unread count throughout the application.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Now we need to think about where that state lives and how different parts of the UI stay consistent.&lt;/p&gt;

&lt;h2&gt;
  
  
  From requirements to frontend architecture
&lt;/h2&gt;

&lt;p&gt;A useful way to think about the process is:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;Functional requirements
        ↓
User flows
        ↓
Data model
        ↓
API contracts
        ↓
Client architecture
        ↓
State management
        ↓
Rendering &amp;amp; performance
        ↓
Accessibility
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;These aren't perfectly isolated steps. Real systems are messy, requirements change, and decisions influence each other. But we move from a non defined problem to an architectural decision.&lt;/p&gt;

&lt;p&gt;Going back to our notification example: the user flow "click the bell, see 5 unread, mark one, count drops to 4" already forces a data model decision about where read/unread state lives, which in turn shapes the API contract and how the client keeps that count in sync. Each arrow in the pipeline above is really a question you're answering, not just a step you're passing through.&lt;/p&gt;

&lt;h2&gt;
  
  
  Functional requirements also protect your scope
&lt;/h2&gt;

&lt;p&gt;System design prompts can become enormous very quickly.&lt;/p&gt;

&lt;p&gt;For example:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Design Instagram.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;What does that even mean? The feed? Posting photos? Stories? Profiles?&lt;/p&gt;

&lt;p&gt;It's impossible trying to design all of Instagram in a 45-minute interview, despite what all the vibe coders tell you.&lt;/p&gt;

&lt;p&gt;Perhaps we can agree with the interviewer that we are designing the home feed and narrow down the problem to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Users can view posts from accounts they follow.&lt;/li&gt;
&lt;li&gt;Users can continuously load older posts.&lt;/li&gt;
&lt;li&gt;Users can like a post.&lt;/li&gt;
&lt;li&gt;Users can open a post.&lt;/li&gt;
&lt;li&gt;Users can see new content when it becomes available.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And booom...now we have something we can actually design.&lt;/p&gt;

&lt;h2&gt;
  
  
  Start with "what", then design "how"
&lt;/h2&gt;

&lt;p&gt;System design interviews aren't a competition to mention the largest number of technologies before the clock runs out. They're about making engineering decisions under incomplete information.&lt;/p&gt;

&lt;p&gt;Functional requirements give those decisions context.&lt;/p&gt;

&lt;p&gt;Suddenly, you're not designing Netflix anymore but a specific set of behaviours with specific problems to solve.&lt;/p&gt;

&lt;p&gt;And once you know what you're building, reasoning about how to build it becomes a lot less scary.&lt;/p&gt;

&lt;p&gt;At least that's what I'm trying to teach my brain before my next system design interview. 😅&lt;/p&gt;

</description>
      <category>architecture</category>
      <category>frontend</category>
      <category>interview</category>
      <category>systemdesign</category>
    </item>
    <item>
      <title>The 10 JS Topics Every Frontend Engineer Should Know</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Wed, 05 Aug 2026 08:20:52 +0000</pubDate>
      <link>https://dev.to/ale3oula/the-10-js-topics-every-frontend-engineer-should-know-1blj</link>
      <guid>https://dev.to/ale3oula/the-10-js-topics-every-frontend-engineer-should-know-1blj</guid>
      <description>&lt;p&gt;Maybe AI is THE "hot" topic, but interviews are as old as ever. As i am studying for that said interviews, I compiled a list of 10 JS topics I think that are very crucial to prove the understanding of. These are topics I have been asked or ask during my 10 years in tech🤗.   &lt;/p&gt;

&lt;h3&gt;
  
  
  1. Execution Context &amp;amp; Hoisting
&lt;/h3&gt;

&lt;p&gt;Level: Very common. I have been asked about hoisting so much during all my years of experience. &lt;/p&gt;

&lt;p&gt;Before JS runs your code, it creates an execution context. A new context is created when a program starts or when a new function is executed. During this phase it allocates memory for variables and functions. var variables are hoisted and initialised as undefined, while let and const are hoisted but remain in the Temporal Dead Zone until their declaration.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;a&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt; &lt;span class="c1"&gt;// undefined&lt;/span&gt;
&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;a&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;5&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/Hoisting" rel="noopener noreferrer"&gt;MDN — Hoisting&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/let" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;let&lt;/code&gt; and the Temporal Dead Zone&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/closure" rel="noopener noreferrer"&gt;javascript.info — Variable scope, closure&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  2. Closures
&lt;/h3&gt;

&lt;p&gt;Level: Common. Mostly asked to mid FE. &lt;/p&gt;

&lt;p&gt;A closure happens when a function remembers variables from the scope where it was created, even after that outer function has finished executing.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nf"&gt;function &lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
    &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;count&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;};&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;increment&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;counter&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="nf"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;span class="nf"&gt;increment&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Classic interview example :&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;var&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]();&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;
&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]();&lt;/span&gt; &lt;span class="c1"&gt;// 10&lt;/span&gt;

&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;result&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[];&lt;/span&gt;
&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;=&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;&amp;lt;&lt;/span&gt;&lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;]&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
      &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;,);&lt;/span&gt;
    &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;]();&lt;/span&gt; &lt;span class="c1"&gt;// 0&lt;/span&gt;
&lt;span class="nx"&gt;result&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;]();&lt;/span&gt; &lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures" rel="noopener noreferrer"&gt;MDN — Closures&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/closure" rel="noopener noreferrer"&gt;javascript.info — Closure&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Video: &lt;a href="https://www.youtube.com/results?search_query=fun+fun+function+closures" rel="noopener noreferrer"&gt;Closures in JavaScript — Fun Fun Function&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  3. The Event Loop
&lt;/h3&gt;

&lt;p&gt;Level: Very common. Asked at every level. Usually as questions "predict the output" like the one below.&lt;/p&gt;

&lt;p&gt;JS is single threaded, meaning it runs one line of code at a time. The Event Loop decides when callbacks (macrotasks, think timers) or promises (microtasks) are allowed to run after the current code (executed in the call stack) has finished.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nf"&gt;setTimeout&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;2&lt;/span&gt;&lt;span class="p"&gt;),&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nb"&gt;Promise&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;resolve&lt;/span&gt;&lt;span class="p"&gt;().&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;3&lt;/span&gt;&lt;span class="p"&gt;));&lt;/span&gt;
&lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;4&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Output:&lt;/span&gt;
&lt;span class="c1"&gt;// 1&lt;/span&gt;
&lt;span class="c1"&gt;// 4&lt;/span&gt;
&lt;span class="c1"&gt;// 3&lt;/span&gt;
&lt;span class="c1"&gt;// 2&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2m4qa0gghf2aideidb65.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2m4qa0gghf2aideidb65.png" alt="The JavaScript Event Loop — call stack, Web APIs, microtask and macrotask queues" width="800" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop" rel="noopener noreferrer"&gt;MDN — Concurrency model and the event loop&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;Video: &lt;a href="https://www.youtube.com/watch?v=8aGhZQkoFbQ" rel="noopener noreferrer"&gt;Philip Roberts — "What the heck is the event loop anyway?" (JSConf)&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;Interactive: &lt;a href="http://latentflip.com/loupe/" rel="noopener noreferrer"&gt;Loupe — visualize the event loop in real time&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  4. Promises &amp;amp; Async/Await
&lt;/h3&gt;

&lt;p&gt;Level: Very common. Understandably, there is no way to not have async behaviour in an app in 2026.&lt;/p&gt;

&lt;p&gt;Promises represent work that will finish later. &lt;code&gt;async&lt;/code&gt; and &lt;code&gt;await&lt;/code&gt; is syntactic sugar for promises that let you write asynchronous code that looks like synchronous code.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;async&lt;/span&gt; &lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;getUser&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;await&lt;/span&gt; &lt;span class="nf"&gt;fetch&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;/api/user&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="k"&gt;return&lt;/span&gt; &lt;span class="nx"&gt;response&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;json&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises" rel="noopener noreferrer"&gt;MDN — Using promises&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;async function&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/async-await" rel="noopener noreferrer"&gt;javascript.info — Async/await&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  5. &lt;code&gt;this&lt;/code&gt; Keyword
&lt;/h3&gt;

&lt;p&gt;Level: Common. Mostly junior to mid FE.&lt;/p&gt;

&lt;p&gt;&lt;code&gt;this&lt;/code&gt; refers to the object that is calling the function. Its value&lt;br&gt;
depends on how the function is invoked.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alex&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="k"&gt;this&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;name&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;};&lt;/span&gt;

&lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;greet&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt; &lt;span class="c1"&gt;// Alex&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;this&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/object-methods" rel="noopener noreferrer"&gt;javascript.info — Object methods, "this"&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;Function.prototype.bind()&lt;/code&gt;&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  6. Objects &amp;amp; Recursion
&lt;/h3&gt;

&lt;p&gt;Level: Less common as trivia, but shows up in live coding (deep clone, tree traversal, flattening nested objects).&lt;/p&gt;

&lt;p&gt;Recursion is when a function calls itself. It's useful for traversing&lt;br&gt;
nested objects or tree-like structures.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;function&lt;/span&gt; &lt;span class="nf"&gt;countDown&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;===&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="k"&gt;return&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
  &lt;span class="nf"&gt;countDown&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;n&lt;/span&gt; &lt;span class="o"&gt;-&lt;/span&gt; &lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Glossary/Recursion" rel="noopener noreferrer"&gt;MDN — Recursion (Glossary)&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/recursion" rel="noopener noreferrer"&gt;javascript.info — Recursion and stack&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  7. Arrays &amp;amp; Data Manipulation
&lt;/h3&gt;

&lt;p&gt;Level: Very common. You need to know how to manipulate data. &lt;/p&gt;

&lt;p&gt;Frontend applications constantly read and manipulate API data. Methods like &lt;code&gt;map&lt;/code&gt;, &lt;code&gt;filter&lt;/code&gt;, and &lt;code&gt;reduce&lt;/code&gt; make this easier.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Alice&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;active&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;true&lt;/span&gt; &lt;span class="p"&gt;},&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;name&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;Bob&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;active&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="kc"&gt;false&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;
&lt;span class="p"&gt;];&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;activeUsers&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;users&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;filter&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;user&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;user&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;active&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;Array.prototype.map()&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;Array.prototype.filter()&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce" rel="noopener noreferrer"&gt;MDN — &lt;code&gt;Array.prototype.reduce()&lt;/code&gt;&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Indexed_collections" rel="noopener noreferrer"&gt;MDN — Array methods overview&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  8. Browser Rendering &amp;amp; Performance
&lt;/h3&gt;

&lt;p&gt;Level: Less common. Mostly senior or performance-focused roles.&lt;/p&gt;

&lt;p&gt;The browser converts HTML, CSS, and JavaScript into pixels on the&lt;br&gt;
screen. Efficient updates reduce unnecessary layout and painting work.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;translateX(100px)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://web.dev/articles/rendering-performance" rel="noopener noreferrer"&gt;web.dev — Rendering Performance&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/Performance/Guides/How_browsers_work" rel="noopener noreferrer"&gt;MDN — Populating the page: how browsers work&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing" rel="noopener noreferrer"&gt;web.dev — Avoid large, complex layouts and layout thrashing&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  9. Event Propagation
&lt;/h3&gt;

&lt;p&gt;Level: Common. Mid FE and up.&lt;/p&gt;

&lt;p&gt;Events travel through the DOM. They first capture down the tree, then&lt;br&gt;
bubble back up. Event delegation uses bubbling to handle many events with one listener.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk45en7skw7f8qicq3ftb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fk45en7skw7f8qicq3ftb.png" alt=" " width="800" height="427"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;console&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;log&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;event&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;target&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling" rel="noopener noreferrer"&gt;MDN — Event bubbling and capture&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/bubbling-and-capturing" rel="noopener noreferrer"&gt;javascript.info — Bubbling and capturing&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href="https://javascript.info/event-delegation" rel="noopener noreferrer"&gt;javascript.info — Event delegation&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  10. Memory Management
&lt;/h3&gt;

&lt;p&gt;Level: Less common as a direct question, but senior interviews may have a "why is this leaking?" scenario.&lt;/p&gt;

&lt;p&gt;JavaScript automatically frees unused memory, but objects can stay alive if something still references them, such as an event listener or timer.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Example&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;addEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;handleClick&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Later when no longer needed&lt;/span&gt;
&lt;span class="nx"&gt;button&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;removeEventListener&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;click&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;handleClick&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;Resources&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Memory_management" rel="noopener noreferrer"&gt;MDN — Memory management&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://developer.chrome.com/docs/devtools/memory-problems/" rel="noopener noreferrer"&gt;Chrome DevTools — Fix memory problems&lt;/a&gt; &lt;em&gt;(hands-on: heap snapshots, detached DOM nodes)&lt;/em&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://web.dev/articles/detached-window-memory-leaks" rel="noopener noreferrer"&gt;web.dev — Memory leaks in web apps&lt;/a&gt; &lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>webdev</category>
      <category>javascript</category>
      <category>beginners</category>
    </item>
    <item>
      <title>Repaint vs Reflow: A Simple Explanation</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Mon, 03 Aug 2026 13:34:46 +0000</pubDate>
      <link>https://dev.to/ale3oula/repaint-vs-reflow-a-simple-explanation-1m4j</link>
      <guid>https://dev.to/ale3oula/repaint-vs-reflow-a-simple-explanation-1m4j</guid>
      <description>&lt;h2&gt;
  
  
  What's happening when a website loads?
&lt;/h2&gt;

&lt;p&gt;When you visit a website, your browser reads the code, it creates the DOM, it reads the CSS, it builds the CSSOM, figures out where everything should go, and then draws it on your screen. This process includes two main concepts: &lt;strong&gt;repaint&lt;/strong&gt; and &lt;strong&gt;reflow&lt;/strong&gt;. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ootps4zi0hw0qtskjlb.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F3ootps4zi0hw0qtskjlb.png" alt=" " width="800" height="447"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a repaint?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;repaint&lt;/strong&gt; happens when you change the &lt;em&gt;appearance&lt;/em&gt; of an element, but NOT the sizes or positions. Think it as changing a text or background color, opacity, borders or box shadows.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;blue&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;yellow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When this happens, the browser just needs to redraw the pixels on screen. In general, this is somewhat fast.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is a reflow?
&lt;/h2&gt;

&lt;p&gt;A &lt;strong&gt;reflow&lt;/strong&gt; (or "layout") happens when you change the size or position of an element. Think about it as a result of changing width, height, padding or margins, adding or removing elements from the page, showing/hiding elements with display property, or changing the font size.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;newElement&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;500px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;newElement&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;padding&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;20px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nb"&gt;document&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;body&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;appendChild&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;newElement&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;When this happens, the browser has to:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Recalculate where everything should be &lt;/li&gt;
&lt;li&gt;Figure out the new size of elements&lt;/li&gt;
&lt;li&gt;Update all the affected elements&lt;/li&gt;
&lt;li&gt;THEN repaint everything&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That's why reflows are a bit expensive.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2qdc5sdkpq1sn77z3dxq.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F2qdc5sdkpq1sn77z3dxq.png" alt=" " width="800" height="452"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Should We Care?
&lt;/h2&gt;

&lt;p&gt;Both repaints and reflows make the browser do work, which can make your website feel slow, especially when you trigger them often.&lt;/p&gt;

&lt;p&gt;Imagine you're building a feature that updates a user's score:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="mi"&gt;100&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;100&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// Reflow!&lt;/span&gt;
  &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;                  &lt;span class="c1"&gt;// Reflow!&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Every loop iteration triggers a reflow because we're changing the width and content. That's 100+ potential reflows! Modern browsers do batch some of these automatically, but you still want to minimize layout recalculations.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;textContent&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;99&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;199px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Prefer to do all the changes at once. The browser will likely batch these into a single reflow cycle instead of triggering multiple sequential ones.&lt;/p&gt;

&lt;h2&gt;
  
  
  Tips to Avoid Performance Problems
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Batch your changes&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// Good&lt;/span&gt;
   &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;cssText&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;width: 100px; height: 100px; color: red;&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="c1"&gt;// Not as good&lt;/span&gt;
   &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;100px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;height&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;100px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
   &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;red&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Avoid reading layout properties in loops&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;  &lt;span class="c1"&gt;// Bad — alternating reads and writes force recalculation&lt;/span&gt;
&lt;span class="k"&gt;for &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="kd"&gt;let&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="mi"&gt;0&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt; &lt;span class="o"&gt;&amp;lt;&lt;/span&gt; &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;length&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="o"&gt;++&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;currentWidth&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;offsetWidth&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// READ — forces layout recalculation&lt;/span&gt;
  &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;currentWidth&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;  &lt;span class="c1"&gt;// WRITE — invalidates layout&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;

&lt;span class="c1"&gt;// Good — batch all reads first, then writes&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;widths&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nb"&gt;Array&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;from&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;).&lt;/span&gt;&lt;span class="nf"&gt;map&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;offsetWidth&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;
&lt;span class="nx"&gt;widths&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;[&lt;/span&gt;&lt;span class="nx"&gt;i&lt;/span&gt;&lt;span class="p"&gt;].&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;width&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="mi"&gt;10&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;+&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Use classes instead of inline styles&lt;/strong&gt; (similar with 1)
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// Good — batches all CSS changes together and is more maintainable&lt;/span&gt;
&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;classList&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;add&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;highlighted&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Not as good — multiple individual property assignments can trigger separate reflows&lt;/span&gt;
&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;color&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;blue&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;backgroundColor&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;yellow&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;fontWeight&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;bold&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;CSS classes batch multiple properties into a single reflow cycle, and keep your styling logic separate from your JavaScript.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Use transforms for animations&lt;/strong&gt;
&lt;/li&gt;
&lt;/ol&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;   &lt;span class="c1"&gt;// Good for animations&lt;/span&gt;
   &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;translateX(100px)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

   &lt;span class="c1"&gt;// Causes reflow&lt;/span&gt;
   &lt;span class="nx"&gt;element&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;left&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;100px&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;Transforms are cheaper because they skip the Layout and Paint phases of the rendering pipeline and only trigger Composite (which happens on the GPU). Position changes like left, top, width, and height require the browser to recalculate the entire layout.&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;&lt;strong&gt;Use requestAnimationFrame for Coordinated Updates&lt;/strong&gt;&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;When you need to perform multiple DOM reads and writes in animations, use &lt;code&gt;requestAnimationFrame&lt;/code&gt; to ensure they're batched together in the browser's rendering cycle:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="c1"&gt;// Good — batches all changes into one frame&lt;/span&gt;
&lt;span class="nf"&gt;requestAnimationFrame&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;translateX(100px)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Less efficient — each update happens immediately, may cause multiple recalculations&lt;/span&gt;
&lt;span class="nx"&gt;elements&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;forEach&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;el&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;el&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;style&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nx"&gt;transform&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;translateX(100px)&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Modern Browser Considerations
&lt;/h3&gt;

&lt;p&gt;Browsers have become smarter about batching DOM operations. Modern engines like V8 (Chrome) and SpiderMonkey (Firefox) automatically defer and batch layout recalculations to some degree. However, this doesn't mean poor practices are harmless, you can still force synchronous reflows by reading layout properties like offsetWidth, clientHeight, or getBoundingClientRect() immediately after writing styles. Avoiding these patterns ensures your code stays performant across all browsers and circumstances.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Bottom Line
&lt;/h2&gt;

&lt;p&gt;☑️ &lt;strong&gt;Repaint&lt;/strong&gt; = Change colors/appearance → relatively fast&lt;br&gt;
☑️ &lt;strong&gt;Reflow&lt;/strong&gt; = Change size/position/layout → slower, more expensive&lt;br&gt;
☑️ Both slow down your site if you do too many&lt;br&gt;
☑️ Group changes together when possible&lt;br&gt;
☑️ Use CSS transforms for animations&lt;/p&gt;

&lt;p&gt;Next time a website feels slow, there's a good chance it's because the browser is constantly doing reflows and repaints.&lt;/p&gt;

&lt;h3&gt;
  
  
  Further Reading
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Visual_formatting_model" rel="noopener noreferrer"&gt;MDN: Visual formatting model&lt;/a&gt; - Background on how browsers lay out pages&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://web.dev/articles/avoid-large-complex-layouts-and-layout-thrashing" rel="noopener noreferrer"&gt;web.dev: Avoid large, complex layouts and layout thrashing&lt;/a&gt; - Google's deep dive specifically on layout thrashing and how to avoid it&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://web.dev/articles/rendering-performance" rel="noopener noreferrer"&gt;web.dev: Rendering Performance&lt;/a&gt; - The full pixel pipeline (JS → Style → Layout → Paint → Composite)&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://csstriggers.com/" rel="noopener noreferrer"&gt;CSS Triggers&lt;/a&gt; - A reference showing exactly which CSS properties trigger layout, paint, or composite&lt;/li&gt;
&lt;li&gt;
&lt;a href="https://developer.chrome.com/docs/devtools/performance/" rel="noopener noreferrer"&gt;Chrome DevTools: Analyze runtime performance&lt;/a&gt; - How to actually profile and see reflows/repaints happening in your own site&lt;/li&gt;
&lt;/ul&gt;

</description>
      <category>css</category>
      <category>frontend</category>
      <category>performance</category>
      <category>webdev</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Mon, 03 Aug 2026 11:48:39 +0000</pubDate>
      <link>https://dev.to/ale3oula/-40fn</link>
      <guid>https://dev.to/ale3oula/-40fn</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/ale3oula/does-the-web-feel-slower-these-days-9pi" class="crayons-story__hidden-navigation-link"&gt;Does the web feel slower these days?&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/ale3oula" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F155897%2Fbd0b9c2b-1685-487f-9de3-5096a19ae2eb.png" alt="ale3oula profile" class="crayons-avatar__image" width="100" height="100"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/ale3oula" class="crayons-story__secondary fw-medium m:hidden"&gt;
              Alexandra
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                Alexandra
                
                
              
              &lt;div id="story-author-preview-content-4181150" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/ale3oula" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F155897%2Fbd0b9c2b-1685-487f-9de3-5096a19ae2eb.png" class="crayons-avatar__image" alt="" width="100" height="100"&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;Alexandra&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/ale3oula/does-the-web-feel-slower-these-days-9pi" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Jul 20&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/ale3oula/does-the-web-feel-slower-these-days-9pi" id="article-link-4181150"&gt;
          Does the web feel slower these days?
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/ale3oula/does-the-web-feel-slower-these-days-9pi" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="24" height="24"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;4&lt;span class="hidden s:inline"&gt;&amp;nbsp;reactions&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/ale3oula/does-the-web-feel-slower-these-days-9pi#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              

              &lt;span class="hidden s:inline"&gt;Add&amp;nbsp;Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            4 min read
          &lt;/small&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
    </item>
    <item>
      <title>The Comfort Atlas: What Does Home Taste Like?</title>
      <dc:creator>Alexandra</dc:creator>
      <pubDate>Sat, 01 Aug 2026 21:19:16 +0000</pubDate>
      <link>https://dev.to/ale3oula/the-comfort-atlas-what-does-home-taste-like-3a6i</link>
      <guid>https://dev.to/ale3oula/the-comfort-atlas-what-does-home-taste-like-3a6i</guid>
      <description>&lt;p&gt;&lt;em&gt;This is a submission for &lt;a href="https://dev.to/challenges/frontend-2026-07-29"&gt;Frontend Challenge - Comfort Food Edition, Perfect Landing&lt;/a&gt;&lt;/em&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What I Built
&lt;/h2&gt;

&lt;p&gt;The Comfort Atlas is a spinning 3D globe of comfort food from ~100 countries. &lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5pm4ysf89ppzjqhpo70o.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2F5pm4ysf89ppzjqhpo70o.png" alt=" " width="800" height="390"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Virtually travel the globe and have a taste of the comfort foods from 100~ countries. Moussaka in Greece, Jollof Rice in Nigeria, Pho in Vietnam. There is also a "featured dish of the day" that rotates deterministically so it's the same for everyone visiting that day. And the fun feature: visitors can type in their own comfort dish and generate a downloadable, passport-stamp-style card in one of three color styles.&lt;/p&gt;

&lt;h2&gt;
  
  
  Demo
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://comfort-atlas.netlify.app/" rel="noopener noreferrer"&gt;https://comfort-atlas.netlify.app/&lt;/a&gt;&lt;br&gt;
 &lt;/p&gt;
&lt;div class="ltag-netlify"&gt;
  &lt;iframe src="https://comfort-atlas.netlify.app/" title="Netlify embed"&gt;
  &lt;/iframe&gt;
&lt;/div&gt;


&lt;h2&gt;
  
  
  Journey
&lt;/h2&gt;

&lt;p&gt;I started with a flat SVG world map, clickable countries, keyboard support, a hover tooltip on the map, all built on real  elements so accessibility came for free. It worked fine, but it looked very meh.&lt;/p&gt;

&lt;p&gt;So i decided to try something i have never done before. Make a globe! I used &lt;code&gt;cobe&lt;/code&gt; which promised a 3D globe out of the box. First attempt rendered absolutely nothing but floating dots. 😂  With a lot of the help of my friend claude, we found out that their docs are outdated, and there is a &lt;code&gt;createGlobe()&lt;/code&gt; that draws exactly one synchronous frame and expects you to drive a requestAnimationFrame loop calling .update() yourself.&lt;/p&gt;

&lt;p&gt;Two things on the globe I'm  proud of, because neither had any library support: a hover tooltip that tracks a marker in 3D space, and a fading "trail" of great-circle arcs between the countries you've visited. Both came down to translating the projection math out of a minified bundle into something readable.&lt;/p&gt;

&lt;p&gt;What I would do next: dark mode, enrich the content, comfort food battles per country.&lt;/p&gt;

&lt;p&gt;What I learned: a lot about accessibility in 3D/canvas, which is so much more difficult than the 2d one, one check for a11y is never enough. Maps are hard, and getting something to track a moving 3D object from regular DOM is even harder.&lt;/p&gt;

&lt;p&gt;Licensed under MIT&lt;/p&gt;

&lt;p&gt;Fun fact: I don't like Moussaka, even though i am greek, my comfort food is Pizza or Giouvetsi. xD &lt;/p&gt;

</description>
      <category>devchallenge</category>
      <category>frontendchallenge</category>
      <category>webdev</category>
      <category>javascript</category>
    </item>
  </channel>
</rss>
