DEV Community: Obada

Building Smarter Delivery Robots: A Journey ThroughAlgorithm Optimization

Obada — Tue, 13 Jan 2026 20:40:29 +0000

Exploring algorithm optimization through Eloquent JavaScript's package delivery robot challenge.

Introduction
Chapter 7 of Eloquent JavaScript presents an interesting challenge: building a robot that deliverspackages around a virtual village. What makes this exercise compelling isn't just implementing thesolution—it's exploring how different optimization strategies perform in practice. This article walksthrough building increasingly efficient robots, measuring their performance, and discovering whichapproaches actually deliver results.

The Problem: Package Delivery in a Virtual Village

Imagine a robot that needs to deliver packages around a small village. The village has variouslocations connected by roads, and packages need to be picked up from one location and delivered toanother.

The Village Structure
The village is represented as a graph:

var roads = [
  "Alice's House-Bob's House",
  "Alice's House-Cabin",
  "Alice's House-Post Office",
  "Bob's House-Town Hall",
  // ... more roads
];

function buildGraph(edges) {
  let graph = Object.create(null);
  function addEdge(from, to) {
    if (graph[from] == null) {
      graph[from] = [to];
    } else {
      graph[from].push(to);
    }
  }
  for (let [from, to] of edges.map((r) => r.split("-"))) {
    addEdge(from, to);  // Add edge in both directions
    addEdge(to, from);  // This makes roads bidirectional
  }
  return graph;
}

why bidirectional? Each addEdge call is made twice with swapped parameters so the robot can travel in both directions on any road.

key Concept: Immutable State

The simulation uses an immutable data structure:

class VillageState {
  constructor(place, parcels) {
    this.place = place;
    this.parcels = parcels;
  }

  move(destination) {
    if (!roadGraph[this.place].includes(destination)) {
      return this; // Invalid move, return unchanged state
    }

    let parcels = this.parcels
      .map(p => {
        if (p.place != this.place) return p;
        return { place: destination, address: p.address };
      })
      .f****ilter(p => p.place != p.address);

    return new VillageState(destination, parcels);
  }
}

The _move _ method doesn't modify the existing state—it creates a new one. This immutability makesdebugging easier and prevents unexpected bugs from state mutations.

Exercise 1: Measuring Robot Performance
Optimization without measurement is guesswork. The book provides three robot strategies:

randomRobot: Picks random directions
routeRobot: Follows a fixed route visiting all locations
goalOrientedRobot: Uses pathfinding to go directly to targets

Building a Comparison Function
Fair comparison requires running each robot multiple times on identical scenarios and averaging theresults:

function compareRobots(robot1, memory1, robot2, memory2) {
  let robot1Total = 0;
  let robot2Total = 0;

  for (let i = 0; i < 100; i++) {
    let task = VillageState.random(); // Same task for both

    robot1Total += countTurns(task, robot1, memory1);
    robot2Total += countTurns(task, robot2, memory2);
  }

  console.log(`Robot 1 average: ${robot1Total / 100}`);
  console.log(`Robot 2 average: ${robot2Total / 100}`);
}

function countTurns(state, robot, memory) {
  for (let turn = 0; ; turn++) {
    if (state.parcels.length == 0) {
      return turn; // Return count instead of logging
    }
    let action = robot(state, memory);
    state = state.move(action.direction);
    memory = action.memory;
  }
}

Initial Results

randomRobot:        ~70 turns
routeRobot:         ~16 turns
goalOrientedRobot:  ~15 turns

The goal-oriented approach performs best, but there's room for improvement.

Exercise 2: Building a Smarter Robot
Understanding goalOrientedRobot's Weakness.

function goalOrientedRobot({ place, parcels }, route) {
  if (route.length == 0) {
    let parcel = parcels[0];  // Always picks first parcel!
    if (parcel.place != place) {
      route = findRoute(roadGraph, place, parcel.place);
    } else {
      route = findRoute(roadGraph, place, parcel.address);
    }
  }
  return { direction: route[0], memory: route.slice(1) }
}

The issue: It blindly chooses parcels[0] without considering distance.

Scenario:

Robot at Post Office
Parcel 1: At Alice's House (2 steps away)
Parcel 2: At Marketplace (1 step away)

It heads to Alice's House simply because that parcel is first in the array.

Attempt 1: Choose the Closest Parcel
Strategy: Calculate distance to each parcel and pick the nearest.

function parcelDistance(place, parcel) {
  if (parcel.place != place) {
    return findRoute(roadGraph, place, parcel.place).length;
  } else {
    return findRoute(roadGraph, place, parcel.address).length;
  }
}

function findClosestParcel(place, parcels) {
  let bestParcel = null;
  let shortDistance = Infinity;

  for (let parcel of parcels) {
    let distance = parcelDistance(place, parcel);
    if (distance < shortDistance) {
      shortDistance = distance;
      bestParcel = parcel;
    }
  }
  return bestParcel;
}

function cleverRobot({ place, parcels }, route) {
  if (route.length == 0) {
    let parcel = findClosestParcel(place, parcels);
    if (parcel.place != place) {
      route = findRoute(roadGraph, place, parcel.place);
    } else {
      route = findRoute(roadGraph, place, parcel.address);
    }
  }
  return { direction: route[0], memory: route.slice(1) };
}

Results:

goalOrientedRobot: turnsgoalOrientedRobot: 15.21 turns
cleverRobot: 12.57 turns (17% improvement)

Attempt 2: Consider Total Distance (Pickup + Delivery)
New insight: We should consider the complete journey, not just the next step.

Modified distance calculation:

function parcelDistance(place, parcel) {
  if (parcel.place != place) {
    // Distance to pickup + distance from pickup to delivery
    return findRoute(roadGraph, place, parcel.place).length +
           findRoute(roadGraph, parcel.place, parcel.address).length;
  } else {
    return findRoute(roadGraph, place, parcel.address).length;
  }
}

Results:

goalOrientedRobot: 15.82 turns
cleverRobot:       15.28 turns (minimal improvement)

Analysis:
This approach sometimes ignores parcels at the current location. A parcel at our currentposition should almost always be picked up immediately (0-step pickup cost), but the total distancecalculation doesn't prioritize this.

Attempt 3: Prioritize Local Parcels
Strategy:
Always grab parcels at our current location first.

function findClosestParcel(place, parcels) {
  let bestParcel = null;
  let shortDistance = Infinity;

  // First pass: look for parcels at current location
  for (let parcel of parcels) {
    if (parcel.place == place) {
      let distance = findRoute(roadGraph, place, parcel.address).length;
      if (distance < shortDistance) {
        shortDistance = distance;
        bestParcel = parcel;
      }
    }
  }

  if (bestParcel != null) return bestParcel; // Found one here!

  // Second pass: find best parcel elsewhere
  for (let parcel of parcels) {
    let distance = parcelDistance(place, parcel);
    if (distance < shortDistance) {
      shortDistance = distance;
      bestParcel = parcel;
    }
  }

  return bestParcel;
}

Results:

goalOrientedRobot: 15.88 turns
cleverRobot:       16.07 turns (regression)

Analysis:
Always prioritizing local parcels creates a greedy algorithm that can commit to inefficientlong-distance deliveries.

The Breakthrough: Multi-Parcel Thinking
different approach emerges from observing real delivery services. Delivery drivers don't:

Pick up one package
Deliver it
Return for the next one

They:

Pick up multiple packages along their route
Deliver them opportunistically as they pass by destinations

This requires a different question: instead of "which parcel should I complete next?", ask "what's thenearest useful destination?"

The Efficient Robot Algorithm

function categorizeParcels(place, parcels) {
  let toPickup = [];
  let toDeliver = [];

  for (let parcel of parcels) {
    if (parcel.place != place) {
      toPickup.push(parcel);
    } else {
      toDeliver.push(parcel);
    }
  }

  return { toPickup, toDeliver };
}

function getAllDestinations(place, parcels) {
  let { toPickup, toDeliver } = categorizeParcels(place, parcels);
  let destinations = [];

  // Add all pickup locations
  for (let parcel of toPickup) {
    if (!destinations.includes(parcel.place)) {
      destinations.push(parcel.place);
    }
  }

  // Add all delivery addresses
  for (let parcel of toDeliver) {
    if (!destinations.includes(parcel.address)) {
      destinations.push(parcel.address);
    }
  }

  return destinations;
}

function findClosestDestination(place, destinations) {
  let bestDestination = null;
  let shortestDistance = Infinity;

  for (let dest of destinations) {
    let route = findRoute(roadGraph, place, dest);
    if (route.length < shortestDistance) {
      shortestDistance = route.length;
      bestDestination = dest;
    }
  }

  return bestDestination;
}

function efficientRobot({ place, parcels }, route) {
  if (route.length > 0) {
    return { direction: route[0], memory: route.slice(1) };
  }

  let destinations = getAllDestinations(place, parcels);
  let target = findClosestDestination(place, destinations);
  let newRoute = findRoute(roadGraph, place, target);

  return { direction: newRoute[0], memory: newRoute.slice(1) };
}

How it works:

Identify all useful destinations (places with parcels to pick up or deliver)
Find the closest destination
Move toward it
As the robot moves, VillageState.move() automatically handles pickups and deliveries

Final Results

goalOrientedRobot: 15.37 turns
cleverRobot:       15.40 turns
efficientRobot:    12.15 turns (20% improvement)

Key Takeaways

1.Greedy Algorithms Can Be Deceiving
Optimizing for the immediate next step (closest parcel) worked better than trying to plan too far ahead(total distance). Sometimes simpler heuristics win.

Over-optimization Can Backfire
The "prioritize local parcels" strategy seemed logical but decreased performance. Measurement revealstruth.
Problem Framing Matters
The breakthrough came from reframing the question:

❌ "Which parcel should I complete next?"
✅ "What's the nearest useful thing I can do?"

Reframing Drives Innovation
The most effective solution came from changing the fundamental question being asked.
Incremental Improvement Through Testing
Each iteration taught us something:

Attempt 1: Proximity matters (17% improvement)
Attempt 2: Too much planning hurts (regression)
Attempt 3: Greedy local priority fails (regression)
Final: Dynamic re-evaluation wins (20% improvement)

Further Optimizations
The efficient robot could be improved further with:

Traveling Salesman Problem algorithms for optimal multi-stop routes
Lookahead planning (considering 2-3 moves ahead)
Clustering nearby parcels for batch pickups/deliveries

But these add significant complexity for diminishing returns in a small village.

Conclusion
Algorithm optimization is rarely straightforward. Logical improvements can decrease performance, andbreakthrough solutions often require reframing the problem entirely.

The path from 15.37 turns to 12.15 turns demonstrates that understanding comes from building,measuring, and iterating. Sometimes the best insights emerge not from theory, but from observing whatactually works.

Explored different approaches to this problem? Found other optimizations? The discussion is open in the comments.

What is React Framer Motion?

Obada — Sun, 28 Sep 2025 07:04:08 +0000

React Framer Motion
Framer Motion is an open-source motion library for React, Created by Framer. Framer Motion is production-ready and offers a wide of features, it was created to help developers create smooth and interactive animations with ease.

Key Features
Framer Motion provides a variety of features to enhance your animation, including:

Spring: Create natural and realistic animations using spring control.
Keyframes: Define animations using keyframes for more control.
Layout animation: Animate layout changes seamlessly.
Shared layout animations: Coordinate animations across multiple components.
Gestures: Add drag, tap, and hover interactions to your animation.
Scroll animations: Animate elements based on scroll position.
SVG paths: Animate SVG elements and paths.
Exit animations: Define animations for elements when they are removed from the DOM.
Server-side rendering: Support for server-side rendering to improve performance.
Hardware-accelerated animations: Utilize hardware acceleration for smoother animations.
Orchestrate animations across components: Coordinate complex animations across multiple components.
CSS variables: Use CSS variables to control animations dynamically.

Getting Started
To get started with Framer Motion, you need to install it via your package manager. You can use npm to install it:

npm install framer-motion

import { motion } from "framer-motion";

export const MyComponent = ({ isVisible }) => (
  <motion.div animate={{ opacity: isVisible ? 1 : 0 }}/>
);

Practical Example
Here is a practical example of how to use Framer Motion to create a simple animation:

import React, { useState } from "react";
import { motion } from "framer-motion";
const App = () => {
 const [isVisible, setIsVisible] = useState(true);
 return (
   <div>
     <button onClick={() => setIsVisible(!isVisible)}>Toggle</button>
     <motion.div
       animate={{ opacity: isVisible ? 1 : 0 }}
       transition={{ duration: 0.5 }}
     >
       Hello, Framer Motion!
     </motion.div>
   </div>
 );
};
export default App;

In this example, clicking the button toggles the visiblity of the "Hello, Framer Motion" with a smooth fade-in and fade-out animation.

Conclusion
Framer Motion is a powerful and versatile animation library for React that offers a wide range of features to create smooth and interactive animations. It is easy to get started with and provides extensive documentation and examples to help you create stunning animations for your projects.

Promises in JavaScript

Obada — Fri, 25 Jul 2025 09:35:46 +0000

What is a Promise?

A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.
Think of it like a placeholder for a value that will arrive in the future.

States of a Promise

A promise can be in one of three states:

Pending - initial state, not fulfilled or rejected.
Fulfilled - operation completed successfully.
Rejected - operation failed.

Basic Syntax

const promise = new Promise((resolve, reject) => { // async operation here if (/* everything good */) { resolve("Success!"); } else { reject("Something went wrong."); } });

Consuming a Promise

promise .then((result) => { console.log(result); // "Success!" }) .catch((error) => { console.error(error); // "Something went wrong." }) .finally(() => { console.log("Done"); });

.then() is called when the promise is fulfilled.
.catch() is called when the promise is rejected.
.finally() runs regardless of success or failure.

Real Example: Using fetch

fetch('https://api.example.com/data') .then((response) => response.json()) .then((data) => console.log(data)) .catch((error) => console.error('Error:', error));

Why Use Promise?

Before promises, we used callbacks, which could lead to "callback hell", deeply nested functions that are hard to read and maintain.

Promises solve that by:

Making code more readable
Making error handling easier
Chaining operations

Promises in JavaScript - a very important topic for writing clean, modern asynchronous code.

What is Bootstrap 5?

Obada — Tue, 24 Jun 2025 18:31:43 +0000

What is Bootstrap?

Bootstrap is a free front-end framework for faster and easier web development.
Bootstrap includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels and many other, as well as optional JavaScript plugins.
Bootstrap also gives you the ability to easily create responsive designs.

Bootstrap Versions
Bootstrap 5 (released 2021) is the newest version of Bootstrap (released 2013); with new components, faster stylesheet and more responsiveness.

Bootstrap 5 supports the latest, stable releases of all major browsers and platforms. However, Internet Explorer 11 and down is not supported.

The main differences between Bootstrap 5 and Bootstrap 3 & 4, is that Bootstrap 5 has switched to vanilla JavaScript instead of jQuery.

Before using any tool or framework, we should ask ourselves an important question: WHY?

Why use Bootstrap?

Advantages of Bootstrap:

Easy to use: Anybody with just basic knowledge of HTML and CSS can start using Bootstrap.
Responsive features: Bootstrap's responsive CSS adjusts to phones, tablets, and desktops.
Mobile-first approach: In Bootstrap, mobile-first styles are part of the core framework.
Browser compatibility: Bootstrap 5 is compatible with all modern browsers (Chrome, Firefox, Edge, Safari, and Opera). Note that if you need support for IE11 and down, you must use either BS4 or BS3.

Where to get Bootstrap5?

There are two ways to start using Bootstrap 5 on your own web site.

Include Bootstrap 5 from a CDN
Download Bootstrap 5 from getbootstrap.com

Bootstrap is the most popular HTML, CSS, and JavaScript framework for creating responsive, mobile-first websites.

Bootstrap 5 is completely free to download and use!
It's very important to know how to work with it and use it with your projects.

Intersection Observer API

Obada — Sat, 07 Jun 2025 12:38:09 +0000

The Intersection Observer API allows you to configure a callback that is called when either of these circumstances occur:

A traget element intersects either the device's viewport or a specified element. That specified element is called the root element or root for the purposes of the Intersection Observer API.
The first time the observer is initially asked to watch a target element.

Typically, you'll want to watch for intersection changes with regard to the target element's closest scrollable ancestor, or, if the target element is not a descendant of a scrollable element, the device's viewport.

The API works the same way, in all cases, whether you're using the viewport or some other element as the root.

The degree of intersection between the target element and its root is the intersection ratio. This is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0 .

Creating an Intersection Observer

create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other:

`
const options = {
root: document.querySelector('#scrollArea'),
rootMargin: '0px',
threshold: 1.0,
};

const observer = new IntersectionObserver(callback, options);
`
A threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked.

Intersection Observer options

The option object passed into the IntersectionObserver() constructor let you control the circumstances under which the observer's callback is invoked. it has the following fields:

root
the element that is used as the viewport for checking visibility of the target. MUST be the ancestor of the target. Defaults to the browser viewport if not specified or if null.

rootMargin
Margin around the root. A string of one to four values similar to the CSS margin property, e.g., "5px 10px 15px 25px" (top, right, bottom, left). The values can ONLY be percentages or absolute lengths.

Threshold
Either a single number or an array of numbers which indicate at what percentage of the target's visibility the observer's callback should be executed. If you only want to detect when visibility passes the 50% mark, you can use a value of 0.5 . If you want the callback to run every time visibility passes another 25%, you would specify the array [0, 0.25, 0.5, 0.75, 1]. The default is 0 (meaning as soon as even on pixel is visible, the callbach will be run). A value of 1.0 means that the treshold isn't considered passed until every pixel is visible.

Be aware that your callback is executed on the main thread. It should operate as quickly as possible; if anything time-consuming needs to be done, use Window.requestIdleCallback() .

🔗 Related Links

💡 Simple Demo Project – A basic implementation of the Intersection Observer API
Live Demo (https://obada-barakat.github.io/intersection-observer-demos/Simple-demo/)
⚙️ Advanced Demo (Coming Soon) – A more interactive use case with lazy loading and multiple observed elements
Stay tuned!

Conclusion

The Intersection Observer API is a powerful tool that can help you build performance-friendly, scroll-based features without constantly polling the DOM. Whether you're implementing lazy loading, triggering animations, or building infinite scroll, this API gives you a clean and efficient way to track element visibility.

I've created a couple of hands-on demos to help you understand how it works in real projects. If you're curious to dive deeper, check out the code linked above — and feel free to leave feedback or ask questions!

Can You Build This? Shift + Click Checkbox Selector – No Libraries!

Obada — Fri, 30 May 2025 09:30:22 +0000

Hey developers! 👋

I'm currently going through #JavaScript30 — a fantastic 30-day vanilla JavaScript challenge, and today I hit Day 10.

The task?
Recreate that handy Shift + Click checkbox feature you’ve probably used in Gmail, where you can select a range of checkboxes at once.

🎯 The Goal

Let users:

Click a checkbox
Hold down Shift
Click another checkbox
✅ Automatically select all checkboxes between them

🧠 What You’ll Practice

This mini-challenge is great for improving:

Handling multiple checkbox events
Using the event.shiftKey property
Tracking user selections between clicks
Looping through elements conditionally

🚀 Your Challenge
Try building this without any libraries or frameworks — just HTML, CSS (optional), and JavaScript.
Here’s what you need:

A list of checkboxes (10+ makes it fun!)
An event listener on each checkbox
A way to remember the last checked box
Logic to check all boxes between the last and current if Shift is pressed.

🧪 Starter Hint

You’ll likely need to:

Store the last checked checkbox in a variable
Loop through all checkboxes to find the range using forEach.
Use a flag (e.g. inBetween) to mark when to check/uncheck boxes

💬 Want Help?
If you're stuck or want to compare your solution later, drop a comment! I’ll be sharing my approach in a follow-up post soon.

🔗 Bonus: Try It Live
I’ve also made a live version of this if you want to test it directly:
👉 GitHub

🕹️ When you finish it publish with the #challengewithubba hashtag, so everyone would be able to see you solution!

🎉 ENJOY!!

🛠 DevTools & Console

Obada — Thu, 29 May 2025 10:34:21 +0000

DevTools and the console might feel light exercises or less important, but they're actually super important for debugging and real-world development.

🛠 DevTools & Console Highlights:

console.log(), console.warn(), console.error(), console.info for messaging
console.table() — super helpful for visualizing arrays/objects
console.group() and console.groupCollapsed() — useful for organizing logs
console.time() / console.timeEnd() for performance checks
console.assert() — throws only when a condition is false
console.clear — clears the console

These little tools can save you hours of debugging when you're working on bigger projects.

messaging:
console.log('hello'); console.warn("OH NOO!"); console.error('shot!'); console.info('We are born with only 2 natural fears: the fear of falling and the fear of loud sounds');
Visualizing array/objects:
const dogs = [ { name: "Snickers", age: 2 }, { name: "Hugo", age: 8 }, { name: "Butchi", age: 4 }, ]; console.table(dogs)

Organizing logs:
const dogs = [ { name: "Snickers", age: 2 }, { name: "Hugo", age: 8 }, { name: "Butchi", age: 4 }, ]; dogs.forEach(dog => { console.group(${dog.name}) console.log(This is ${dog.name}) console.log(${dog.name} is ${dog.age} years old) console.groupEnd(${dog.name}) });

Time:
console.time('fetching data'); fetch('https://api.github.com/users/obada-barakat') .then(data => data.json()) .then(data => { console.timeEnd('fetching data'); console.log(data) })
.assert:
console.assert(1 === 2, 'That is wrong!');

clear the console:
console.clear()

You can check out all of these examples in my GitHub: Ubba's repo for more info.

These tools are super important and helpful, there are absolutely more tools, a quick search in MDN or any other platform would give more information.

Thanks for reading!

JavaScript Challenge: Chessboard

Obada — Wed, 28 May 2025 13:26:00 +0000

What is the task:
Write a program that creates a string that represents an 8X8 grid,
using new line characters to separate lines. At each position of
the grid there is either a space or a # character. The characters
should form a chessboard.
passing this string to console.log should show something like
this:

When you have a program that generates this pattern, define a binding

size = 8 and change the program so that it works for any size, outputing a grid of the given size.
When you solve it, share on social media platforms with #challengewithubba

Building an Interactive JavaScript Image Gallery with Flexbox — Day 5 of My 30-Day Challenge

Obada — Sun, 25 May 2025 14:14:12 +0000

Hi everyone!

I just completed Day 5 of my #JavaScript30 challenge where I built a responsive and interactive image gallery using JavaScript and CSS Flexbox. The gallery displays five wildlife images, and clicking on any image smoothly expands it for a closer look.

This project helped me improve:

DOM manipulation
Responsive layouts with Flexbox
Handling click events for interactive UI

Here’s a quick demo of the gallery:
(https://obada-barakat.github.io/30-days-of-javascript/day5-JavaScript%20Flex%20Gallery/)

I’m excited to continue learning and building!
If you have any feedback or suggestions, I’d love to hear from you.

Happy coding! 🚀

7-Day Website Challenge

Obada — Sat, 24 May 2025 11:31:07 +0000

🚀 I just launched my first challenge!
Are you ready to build your own website from scratch — even if you're a beginner?

Join me for the 7-Day Website Challenge where I’ll guide you step-by-step to create a complete, responsive website using just HTML, CSS, and JavaScript.

✅ No experience needed
✅ 100% beginner-friendly
✅ Daily tasks, live events, and real support
✅ Build and launch your own personal website in 1 week

🎯 Whether you're curious about coding or want to finally start learning web development, this is your chance.

💥 We start now — it's free to join!

🔗 Join the challenge here: https://nas.io/frontend-mastery-with-ubba/challenges/7day-website-challenge

💬 Tag a friend who needs this!