DEV Community: Luke Berry

The 5 Most Important Features on phived.com

Luke Berry — Thu, 22 Feb 2024 20:55:11 +0000

My project phived.com is turning 1 today!

It is an anti-procrastination to-do list that I developed as a way to help me remember things I have to do. The idea is you can list up to 5 things tasks. To do more, you have to complete some of the original tasks.

To celebrate, I'll look back to the 5 most important features that were implemented.I will share the pull requests at the end of the post, so you can see the implementation for each one!

Reorder tasks

The most requested feature on this list. It allowed you to organize tasks however you please, regardless of the order you originally typed them.

A huge win for the user experience using react-beautiful-dnd.

First Load Respects OS Theme

Even though I'm a big fan of light mode, having dark mode was a must from day 1. I know how much users, specially developers, crave it.

Even more important is that the initial load of the website respects the OS theme. This means that if your OS is set to Light the site will initially load as light mode, same for Dark.

If the user manually changes it to a specific mode, that will be prioritized over OS theme for all future loads.

Daily Tasks

A common complaint I got was that 5 tasks weren't enough, if it could be 6, 7, 8, etc...

I always pushed back since it would undermine the original purpose of the project. After all, the site is called phived (five-d). And you aren't meant to accumulate tasks, quite the opposite!

But one feedback caught my attention: "I spend too much time typing the same tasks everyday". As an active user, I felt this too.

To a point where it became tedious to write the same few tasks every day (such as "work out", "take creatine" and "wash my face"), just to complete them and move on with my other, sporadic tasks.

So I added Daily Tasks! This feature lived in its own route, phived.com/daily, and had one job: to restore tasks. Whenever you complete a task, the list shrinks, and a button with "restore tasks" appears.

The tasks can only be restored in a different day to when you completed them, so it is perfect for things you want to do every day!

Help Menu

When I launched phived, I got feedback I never thought I'd get: "Your site looks nice... But what does it do?".

This is such a crucial topic. As the developer, the goal of your website is crystal clear. But your user needs guidance. They must know what your site does. If you fail at this, they're gone and they won't look back.

That's why I implemented this Help Menu, explaining what the site does (and some keyboard shortcuts as a bonus!).

A nice touch is that it is open by default when the user first loads the website.

Confirm to Delete Tasks

You shouldn't be able to complete destructive actions with:

No confirmation step
No way to undo

That's why we added a confirm dialog to the "clear tasks" button. I'm sure it saved some important tasks from vanishing!

Conclusion

Here are the pull requests for each feature:

I merged the other two straight into main, sorry!

Thanks for reading! If you enjoyed this follow me on twitter and star phived on github.

Adding Twitter/VIM-inspired navigation to my React website

Luke Berry — Wed, 21 Feb 2024 16:46:32 +0000

I recently started learning VIM and became enchanted by its navigation. I am also a twitter addict, which has excellent shortcuts.

Inspired by these, I added similar navigation to my project. And I will show you how to do this in React in this article.

I created phived.com a year ago with the purpose of being a minimal to-do list that would help me remember things I had to do.

Since then, I have used it everyday. I added some shortcuts:

enter to go to the next task
shift + enter to go to the previous task
cmd + enter to complete a task

Here is the code for these behaviors. Since it isn't the focus of this article, I won't explain it further.

This mostly kept my hands off the mouse. But another feature changed things...

After using the website routinely, I found myself adding the same tasks every day. I always pushed back the idea of adding more than five tasks at a time, since that would undermine the original purpose of the project.

I ended up adding a /daily page, similar to the original tasks, with a key difference: tasks that you complete can be restored tomorrow: so you don't have to type them everyday!

Now, I wanted to toggle between phived.com and phived.com/daily tasks using g + g, inspired by twitter's shortcuts such as g + h to go to Home, g + n to go to Notifications, etc...

I achieved this with the following code. It belongs to the Daily component and redirects us to "/" when the user presses the combination g + g.

  const pressedKeys = useRef("");

  useEffect(() => {
    const handleKeyPress = (event: KeyboardEvent) => {
      const inputIsFocused = document.activeElement instanceof HTMLInputElement;

      if (event.key !== "g" || inputIsFocused) {
        return;
      }

      pressedKeys.current += "g";

      if (pressedKeys.current === "gg") {
        window.location.href = "/";
        pressedKeys.current = "";
      }
    };

    window.addEventListener("keydown", handleKeyPress);

    return () => {
      window.removeEventListener("keydown", handleKeyPress);
    };
  }, []);

Let's dive in! First, a ref will store our key presses:

const keysPressed = useRef("")

Our useEffect has one goal: listen to the keydown event and store them in the ref.

An important caveat is that, if the input is focused (user is editing a task) the redirect shouldn't happen. Imagine you're typing "buy e gg s" as a task, and it suddenly jumps you to another page.

We avoid that by returning early, which we also do if the key pressed isn't g:

const inputIsFocused = document.activeElement instanceof HTMLInputElement;

if (event.key !== "g" || inputIsFocused) {
  return;
}

Now we can add the key press to the ref:

pressedKeys.current += "g";

Check if the combination is g + g and redirect towards our general tasks (that live on phived.com, remember). We also empty the ref since it has fulfilled its cycle:

if (pressedKeys.current === "gg") {
  window.location.href = "/";
  pressedKeys.current = "";
}

We then add (and remove) the eventListener with useEffect, so that it hooks into the component's lifecycle correctly:

window.addEventListener("keydown", handleKeyPress);

return () => {
  window.removeEventListener("keydown", handleKeyPress);
};

And voilà! It works as intended. But not quite...

Since we can't redirect while input is focused, when can we redirect? When the focus is somewhere else. Currently, the only way to do that is by clicking another element. And that's not what we're looking for!

We are missing a crucial step, that Twitter implements in its website: pressign ESC to blur from input.

The following code does this. If there's an active element and the key pressed is ESC, we blur (remove focus).

const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
    if (!(document.activeElement instanceof HTMLElement)) {
      return;
    }

    if (e.key === "Escape") {
      document.activeElement.blur();
    }
  };

Now, we just assign the onKeyDown prop to handleKeyDown on the element that surrounds the components where we want this behavior. In my case, that is a div.

...
return (
    <GeneralTasksContextProvider>
      <div
        onKeyDown={handleKeyDown}
        className="flex h-full w-full flex-col items-center justify-center bg-softWhite dark:bg-trueBlack"
      >
        <HelmetProvider>
          <Head />
        </HelmetProvider>
        <ModeSelectorMobile />
        <Header />
        <GeneralTasks />
        <Message />
        <Footer />
      </div>
    </GeneralTasksContextProvider>
  );
...

Now it works: we can toggle between the general and daily tasks by pressing ESC + g + g - without touching the mouse!

Thanks for reading! If you enjoyed this follow me on twitter and star phived on github.

the silliest UI mistake

Luke Berry — Wed, 10 Jan 2024 18:16:03 +0000

what is it?

a "false click button" is an element that looks like a button, but has a "dead area" that triggers nothing when clicked.

sometimes, clicking said area even triggers typical click animations (such as translate and scale changes), which further aggravates the user experience.

why does it happen?

this happens when the event is mispositioned on a child element/container instead of the wrapper element.

where does it happen?

i thought this happened only in products that don't care about ui/ux, but i saw it recently in two products that are industry references in design: duolingo and airbnb.

i can't upload gifs here for some reason, so check out my twitter/x posts of it happening: in the duolingo website and the airbnb website

why is it a problem?

a "false click button" can lead a user to click multiple times in frustration, to interpret that there is an error with their internet, or ultimately, to give up and leave your site.

how to fix it

place the event on the wrapper element, instead of inside a child element/container. also ensure that animations/pointer cursor only happen in the same level where the event happens (again, the wrapper element).

important

ideally, this wrapper element will be a button, for accessibility reasons. if you must use another element for this, be mindful of role=button attribute and other a11y implications.

conclusion

this is an easy bug to fix with significant UX wins. it is definitely worth fixing. i'm a website bug collector, so follow me on x if you want to see more.

My 5 Most Used VS Code Hotkeys And Why

Luke Berry — Tue, 25 Oct 2022 15:33:13 +0000

VS Code is excellent software. It suits web developers amazingly.

The codebase I currently work on is larger than all my personal projects combined. The mouse can only get you so far, and rather slowly. These are my most used VS Code hotkeys as a Beginner Software Developer (and the reason behind each choice).

CTRL + SHIFT + F

This looks through your directory for any string. It can be a function, variable, etc...

Why?

Moving through a professional codebase as a beginner is intimidating. There is so much information flying around that being able to look everywhere at once will allow you to map behaviors more easily.

CTRL + P

Similarly, this hotkey allows to search for filenames, using fuzzy search. Also a must for traversing large projects.

Why?

There are files that we open regularly, such as READMEs. Also, in React we can have a component, content and template architecture. With similar naming for these files, you can find all them at once.

CTRL + SHIFT + L

This hotkey surprised me. I had been using CTRL + D repeatedly to select occurences of a string in the current file. CTRL + SHIFT + L does that immediately, for all ocurrences.

Why?

Makes it ultra-fast to refactor, specially variable names (descriptive variables FTW).

ALT + UP/DOWN

Forget cutting, removing empty spaces, pasting and adding empty lines back: by using this, you can manually move any amount of lines up or down in your file seamlessly.

Why?

Want to switch the order of your components just to see what it looks like? This is the way to go!

CTRL + SHIFT + K

This removes the selected lines. As a beginner, I felt frightened to remove anything from the codebase. This hotkey helped me overcome that fear (with some obligatory CTRL + Z to follow).

Why?

A great lesson I learned is that removing code is a shorter path to understanding functionality than adding. CTRL + SHIFT + K is our fastest tool for that.

Here is a useful pdf with many other keyboard shortcuts to increase your productivity.

Mentoring as a Beginner

Luke Berry — Fri, 21 Oct 2022 00:58:28 +0000

I had a thought a few weeks back: "Can you mentor without being an expert?". As a proud member of the ever-growing Tech Community, I went to Twitter and asked, openly, for their opinion.

The results were surprising, although not shocking: three resounding yesses. Actually, I had been mentoring a few students as a beginner. This question wasn't about intention, it was about validation.

See, there's a plague roaming around: the Impostor Syndrome. Everyone is susceptible to it, newcomers and masters. It may be an old friend of yours, or hiding just around the corner.

I'm a beginner myself. And mentoring was a double-edged sword to me. It felt amazing to see my guidance be worthy. Many of the people I instructed were simply months behind me or not as fortunate. And yet, it felt terrible to be unable to respond to their expectation when the question was beyond my capacity.

That's where my thought arised. In reality, there is no shame in saying "I don't know" and handing the person a gigantic stackoverflow thread from 2011. It is foolish to assume that I can have all the answers. It is foolish to assume that an expert would.

Mentoring goes beyond the technical, it's also about trust and connection. A beginner has the upper hand here: no one is closer to a student than a Junior Developer (except for another student... and hell, get mentoring from them too!).

A student may be unaware of the true value. For now, their mentor may just be a clever friend with the right answers.

For the mentor, the value is crystal clear. No knowledge is as well consolidated as the one you can teach.

Still, mentoring isn't about having the answer. It's about being however many steps ahead of someone and deploying your knowledge with empathy.

In short, it's a win-win. It's a must for both. As a student, seek beginner mentors (or other students!). If you have been recently employed in tech, share your story and provide for the people trying to enter the field. Your aid will be a familiar face.