Forem: Usman Suleiman

2022 Side Project: Teamzone

Usman Suleiman — Sun, 25 Dec 2022 21:46:46 +0000

Hello Devs,

I created a simple productivity tool called Teamzone.

Teamzone is a timezone web app for remote international teams. It allows you to see the local time of your teammates and quickly schedule meetings.

It's very simple to use.

Login
Create a team
Invite teammates

I'm working on a feature that allows teammates to schedule countdowns for holidays and PTOs. I also plan to add Slack, Google meet, and Google calendar integrations.

Teamzone is powered by React, Prisma, and Apollo GraphQL.

GitHub: Teamzone Frontend
Live: Netlify

Please give it a try and tell me what you think. Any feedback is appreciated.

Merry Christmas!

Instagram clone with React

Usman Suleiman — Sat, 11 Sep 2021 19:28:41 +0000

Yesterday, I started working on a pet project to build a light Instagram web clone.

Aside from being a fun project to build, it'll serve as a case study for the Instagram UI.

To start with, I checked out the assets (icons and logos) the amazing team at Facebook used and discovered something interesting.

It is common for websites to store individual assets as files,

When you visit such websites, your browser will make multiple network requests to fetch each asset. Users with slow internet will notice some icons load faster than others.

Their solution was to store all the images in a single file called a sprite sheet.

A sprite sheet is a series of images combined into a larger image.

This allows your browser to fetch your assets in a single network request, making all icons and logos available at the same time. Including assets of pages you haven't visited yet. Making your app perform better offline.

This will require the developer to know the location of each image bounding rectangle. This isn't a problem if you have access to the design file (e.g Figma) of the spritesheet.

You then extract assets using CSS properties like this:

<style>
    .asset {
        background-image: url(/sprite.png)
    }

    .black-pad-lock-icon {
        background-position: -130px 0;
        background-repeat: no-repeat;
        height: 96px;
        width: 96px;
    }
</style>

<span class="asset black-pad-lock-icon"></span>

This is a great approach as long as you know the exact location and dimensions of each image.

Check out my Instagram clone authentication pages where I used the spritesheet approach to create the icon component.

Live Link

Drag & Drop Sort List

Usman Suleiman — Tue, 20 Jul 2021 09:08:08 +0000

The drag-and-drop API allows us to drag items and drop them anywhere in the browser and other applications. In this article, we'll learn how to use it to sort a list of items.

Let's start simple. We'll structure the UI according to the header image. We only want the bare minimum required, so we won't be implementing the "add items" and "checkbox" features.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Sorting with Drag & Drop</title>
  </head>
  <body>
    <ul></ul>
  </body>
  <script>
    const items = [
      {
        index: 0,
        title: "0 - Zero",
      },
      {
        index: 1,
        title: "1 - One",
      },
      {
        index: 2,
        title: "2 - Two",
      },
    ];

    // We add more code here
  </script>
</html>

First, we populate the unordered list with items. Each item has a unique index and a button that will serve as the drag handle.

function displayItems() {
  const ul = document.querySelector("ul");
  ul.innerHTML = "";
  items.forEach((item) => {
    const li = document.createElement("li");
    li.innerText = item.title;

    const dragHandle = document.createElement("button");
    dragHandle.innerText = "@";
    li.appendChild(dragHandle);

    ul.appendChild(li);
  });
}

window.addEventListener("load", () => {
  displayItems();
});

To start dragging an item, we click and hold on a drag handle. The DOM event equivalent for that is the mousedown event.

function displayItems() {
  const ul = document.querySelector("ul");
  items.forEach((item) => {
    const li = document.createElement("li");
    li.innerText = item.title;

    const dragHandle = document.createElement("button");
    dragHandle.innerText = "@";
    li.appendChild(dragHandle);

    // Equal to Click and Hold
    dragHandle.addEventListener("mousedown", () => {
      console.log("holding");
    });

    ul.appendChild(li);
  });
}

If you try dragging an item, you'll notice there is no indication of it being dragged around. By default, all links, text nodes, and image elements are draggable. For others, we tell the browser that an element can be dragged around by setting a draggable attribute.

dragHandle.addEventListener("mousedown", () => {
  li.setAttribute("draggable", true);
});

Now, try dragging an item around, and you'll see it highlighted. Our browser knows we're dragging a li element, but it doesn't know what item of the array. To tell the browser what item we're dragging, we can use the dataTransfer object. The dataTransfer object allows us to communicate with the browser when dragging and dropping.

// After the mousedown listener
li.addEventListener("dragstart", (event) => {
  event.dataTransfer.setData("index", item.index);
});

Why do we even need to tell the browser? The answer is simply because the item we're dropping on needs to know what is being dropped on it, and the only way for it to know is through the browser's dataTransfer object.

So, how does an item know something is being dropped on it? Every element can listen for a drop event. The browser fires a drop event whenever we drop an item. For instance, when we drag item-0 and drop it on item-2, item-0 will listen for dragstart event, while item-2 will listen for a drop event.

// After the dragstart listener
li.addEventListener("drop", (event) => {
  const draggedIndex = event.dataTransfer.getData("index"); // item being dragged
  const dropIndex = item.index; // item we're dropping on
  console.log("dragging", draggedIndex);
  console.log("dropping on", dropIndex);
});

Now, try dragging and dropping an item. Check your console. If you're lucky, you'll see an output. But if you're unlucky like me, then allow me to explain.

When you grab an item and drag it into a different location without dropping it, it means you are dragging over. The browser locks every element we drag over to. Preventing us from dropping anything.

Any element that wants to allow the dropping of dragged-over items needs to prevent the browser's default behavior.

// After the drop listener
li.addEventListener("dragover", (event) => {
  event.preventDefault();
});

Try testing the code again, and it should work on any browser.

The final step is to swap positions instead of logging to console. For that, we create a swap function.

function swap(draggedIndex, dropIndex) {
  // We get the current items
  const dragged = items[draggedIndex];
  const drop = items[dropIndex];

  // We swap their positions
  items[draggedIndex] = drop;
  items[dropIndex] = dragged;

  // Update their indexes to reflect their new positions
  dragged.index = dropIndex;
  drop.index = draggedIndex;

  // Then finally update the display
  displayItems();
}

We call the swap function to change the positions of the items. Then we set the draggable attribute to false because we want to drag items using only the drag handle.

li.addEventListener("drop", (event) => {
  const draggedIndex = event.dataTransfer.getData("index"); // item being dragged
  const dropIndex = item.index; // item we're dropping on

  swap(draggedIndex, dropIndex);
  li.setAttribute("draggable", false);
});

That's it! We now have a working drag-sort list.

Here are a few things you can try:

Hide the original dragging item on drag start to improve user experience.
Reduce the opacity of the item you're dragging over to.

Happy Coding!

To-do list with Observer Pattern

Usman Suleiman — Mon, 19 Jul 2021 17:06:25 +0000

In this post, we'll be learning about the Observer Pattern by creating a simple To-do application.

In a nutshell, the Observer Pattern is similar to Twitter's Followers feature. When you post a tweet, all your followers get notified, and they decide whether to read your tweet or not. We can say our Followers are observing our tweets.

The Observer Pattern has only two components. The Subject and the Observers. The Observers only want to know when we update the Subject. They don't care when it happens.

Going back to our Twitter analogy, our Tweet is the Subject, while our Followers are the Observers.

So, how does it relate to our Todo list application? We'll uncover the answer while we build the app, but first, we need to know the features of our app.

We want to be able to add a unique to-do to our list
We want to be able to remove a to-do from our list
We want to persist our list on page reload

Let's create the HTML of our Todo app.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Observer Pattern</title>
    </head>
    <body>
        <ul></ul>
        <form>
            <input required type="text" />
            <button type="submit">Add</button>
        </form>
    </body>
    <script>
    // We'll add all our code here
    </script>
</html>

In this HTML, we have an unordered list element which will hold our todo items, a form element to add a todo item to our list, and finally a script element to hold our JavaScript code.

The Subject will be our todo items. So we create an array list to store our todos.

<script>
    let todos = []; // Subject
</script>

Next we create a list of Observers. (Functions that will make use of the list).

<script>
    let todos = []; // Subject
    let observers = [];
</script>

Then, we implement the add todo functionality. Each todo needs to be uniquely identified, so assign each item with an ID.

const form = document.querySelector("form");
form.addEventListener('submit', (event) => {
    event.preventDefault();
    const input = form.elements[0];
    const item = {
        id: Date.now(),
        description: input.value,
    };
    addTodo(item);
    input.value = ''; // Clear text input
});

function addTodo(item) {
    todos.push(item);
}

Introducing our first observer

When you try running the app, you'll notice nothing is being displayed on screen. That's because we haven't hooked up our todos array to our HTML unordered list element.

Our HTML ul element is interested in our todos array. It wants to observe our array list so that it can display it on the screen. So it wants to be an Observer. Let's implement a function that will display our list.

function displayTodos() {
    const ul = document.querySelector('ul');
    todos.forEach((todo) => {
        const li = document.createElement('li');
        li.innerText = todo.description;
        ul.appendChild(li);
    });
}

Now, we register this function as an Observer by adding it to our list of observers. To do that we create a helper function to register new observers.

function registerObserver(observer) {
    // The observers array is basically an array of functions
    observers.push(observer);
}

registerObserver(displayTodos);

Despite registering as an observer, nothing is being displayed. That's because our todos array hasn't notified the observers.
We create a notifyObservers function that will loop through our observers array and call each observer function to know an update has happened.

function notifyObservers() {
    observers.forEach((observer) => observer());
}

Then, we call the notifyObservers function whenever we change the Subject.

function addTodo(item) {
    todos.push(item);
    notifyObservers(); // Add this line
}

Now, run the app in your browser and see your todos being added to the list.

Congratulations on your first bug 🥳

You've probably noticed that our list doubles every time we add a new item. We can fix that by clearing it first.

// Inside the displayTodos function

function displayTodos() {
    const ul = document.querySelector('ul');
    ul.innerHTML = ''; // Add this line

Now that we have "add" functionality working, it's time to remove todos. First, we add a remove button to every li element.

function displayTodos() {
    const ul = document.querySelector('ul');
    ul.innerHTML = '';
    todos.forEach((todo) => {
        const li = document.createElement('li');
        li.innerText = todo.description;

        // Add these lines
        const button = document.createElement('button');
        button.innerText = 'Remove';
        li.appendChild(button);

        ul.appendChild(li);
    });
}

Then, we create a removeTodo function that will handle removing to-dos by their ID.

function removeTodo(id) {
    todos = todos.filter((todo) => todo.id !== id);
    notifyObservers();
}

Then we attach a click event listener to the remove button, that will call the removeTodo function.

// Inside the displayTodos function

const button = document.createElement('button');
button.innerText = 'Remove';
// Attach an event listener here
button.addEventListener('click', () => {
   removeTodo(todo.id);
});
li.appendChild(button)

Introducing the second observer

The final step is to save our list in local storage and load it when we reload the page. We want our local storage to be an observer, and save the list whenever it is notified.

function persistData() {
    localStorage.setItem("saved-todos", JSON.stringify(todos));
}

registerObserver(persistData);

Then, we load the saved todos on page load.

function loadTodos(todoList) {
    todos = todoList;
    notifyObservers();
}

window.addEventListener("load", () => {
    const savedTodos = localStorage.getItem("saved-todos");
    if (savedTodos) {
        loadTodos(JSON.parse(savedTodos));
    }
});

The Clean Code

Our code is working. It meets the minimum requirements, but it's not elegant. If you follow closely, you'll notice there are 2 kinds of code. Those that manipulate the unordered list element and those that manipulate the todos array list. We are mixing UI logic and State logic, which is an attribute of a messy code.

Let us start by wrapping our state logic in a function and exposing the register, add, remove, and load functions as methods to an object. This is called Abstraction.
Our todos array is no longer visible to the UI logic code. So we create the getTodos method for accessing the todos. This is called Encapsulation. The art of hiding internal state and exposing it via a method.

function createSubject() {
    let todos = [];
    let observers = [];

    function registerObserver(observer) {
      observers.push(observer);
    }

    function notifyObservers() {
      observers.forEach((observer) => observer());
    }

    function addTodo(item) {
        todos.push(item);
        notifyObservers();
    }

    function removeTodo(id) {
      todos = todos.filter((todo) => todo.id !== id);
      notifyObservers();
    }

    function loadTodos(todoList) {
        todos = todoList;
        notifyObservers();
    }

    function getState() {
        return todos;
    }

    return {
        registerObserver,
        addTodo,
        removeTodo,
        loadTodos,
        getState,
    }
}

Next we use the createSubject to create a todos subject.

const subject = createSubject();

function displayTodos() {
    const ul = document.querySelector("ul");
    ul.innerHTML = "";
    todos.forEach((todo) => {
        const li = document.createElement("li");
        li.innerText = todo.description;

        const button = document.createElement("button");
        button.innerText = "Remove";
        button.addEventListener("click", () => {
            subject.removeTodo(todo.id);
        });
        li.appendChild(button);

        ul.appendChild(li);
    });
}

subject.registerObserver(displayTodos)

subject.registerObserver(() => {
    localStorage.setItem("saved-todos", JSON.stringify(todos));
});

window.addEventListener("load", () => {
    const savedTodos = localStorage.getItem("saved-todos");
    if (savedTodos) {
        subject.loadTodos(JSON.parse(savedTodos));
    }

    const form = document.querySelector("form");
    form.addEventListener("submit", (event) => {
        event.preventDefault();
        const input = form.elements[0];
        const item = {
            id: Date.now(),
            description: input.value,
        };
        subject.addTodo(item);
        input.value = "";
    });
});

The createSubject function adheres to the Observer Pattern design. We subscribe to the todos by registering as observers. What about if we no longer want to be notified?
It's quite simple. We can return a function in the registerObserver method.

function registerObserver(observer) {
    observers.push(observer);

    return function () {
        observers = observers.filter((currentObserver) => !== observer);
    }
}

Then, we can save the return value after registering and call it later to unregister.

const unregisterDisplayTodos = subject.registerObserver(displayTodos)

// later when we want to unregister
unregisterDisplayTodos(); // displayTodos will no longer be notified

FIN

Redux is a popular JavaScript library that uses the Observer Pattern. In the next post, we'll demystify redux by creating our own small redux library.

Happy Coding!

New year goal (2019) done: Complete a side project

Usman Suleiman — Sat, 21 Dec 2019 01:20:23 +0000

Hello, devs,

Usman here. I'm pleased to share a side project I've been working on since the beginning of the year. It's probably the only new year (2019) goal I've completed. 😇
Anyway, the project is named Schdlr, pronounced "Scheduler", It's a mobile application designed to share events (schedules) with family, friends, and colleagues. A schedule in this context could be a meetup group, calendar, timetable, etc. It works both offline and online.

Some of the features include:

Follow schedules of interest
Event offline reminders
Create recurring events
Real-time updates on events
Communicate with event participants

I built it completely with ReactNative and AWS, and one of the challenges I faced was learning AWS, Yeah it has a somewhat steep learning curve for someone with zero AWS knowledge but everything starts to make sense after a month or so, especially while having great community support (thanks @dabit3). One of my main objectives was following industry standard and I have to say, some days I feel like a big fraud and question my career choice. Overall I'm happy with this project and I look forward to 2020.

Please give it a try and tell me what you think. It's currently available only on Android,😞 IOS version will be coming soon. Thank you!

Known issues:

No notification sound in some devices. Not sure if it's an android or module problem.
Sometimes AdMob delivers the wrong banner size. Still trying to figure it out. I try to keep Ads very minimal and unobtrusive.
I'm still new to AWS pricing, so I've limited file upload size to 8mb.

Do you write tests for your side projects?

Usman Suleiman — Wed, 17 Jul 2019 20:33:46 +0000

A lot of posts talk about writing tests but I feel writing tests for a side project is a real drag, maybe i'm just a very lazy person. What about you?

PS: Any kind of tests. 😇