DEV Community: hpal

Circuit a list, a useArray hook

hpal — Wed, 14 Oct 2020 19:23:13 +0000

So recently I had to create a react component that cycles through a list using two arrows. The catch here is the next arrow must go back to the first index after reaching the end and the previous arrow must go to the first item when it reaches the last item.

This being react and using hooks gave me the following result

// useArrayNavigator.js
import { useState } from 'react';

export function useArrayNavigator(arrayLength) {
  const [currentIndex, setCurrentIndex] = useState(0);

  const previousIndex = () => {
    const index = currentIndex === 0 ? arrayLength - 1 : currentIndex - 1;
    setCurrentIndex(index);
  };

  const nextIndex = () => {
    const index = currentIndex === arrayLength - 1 ? 0 : currentIndex + 1;
    setCurrentIndex(index);
  };

  return { currentIndex, previousIndex, nextIndex };
}

To use it in the component:

// widget.js
const Widget = ({ array }) => {
  const { currentIndex, nextIndex, previousIndex } = useArrayNavigator(array.length);

  return (
    <div>
      <span className="text-lg">Top in {array[currentIndex].label}</span>
      <span>
        <button onClick={previousIndex} />
        <button onClick={nextIndex} />
      </span>
    </div>
  );
};

And the result is:

Notice how I can go through the list continuously.

Till next time!

Discussion: SPA v SPA. When do you use each?

hpal — Wed, 02 Sep 2020 17:57:07 +0000

Hey folks, I can't quite wrap my head around when to build an app as an SPA and when it's better to use an SSR framework like Next.js or Nuxt.js.

If we take Gmail as an example, which approach would be the best to use for building an app like that where all of the content is private?

Guide me! Why would you use one pattern over another; state the reasons behind your choices.

Chasing after productivity

hpal — Sat, 02 May 2020 22:31:18 +0000

When I started seriously learning python, I used a technique I have never forsaken since; I built a real-world project with deadlines and all that. The application helps property owners collect rent from their tenants through mobile money using USSD.

Every time I fancy a new technology, I look for an actual project with deadlines and all to learn it.

I decided to use flask as the web framework and with it organised my application into a web portal, an API, and a third-party gateway. I had explored Django but never really fancied it's "batteries included" approach. Fast-forward to 2020, I have developed 3 other applications using flask.

In the last few months I picked up Django. I have been using flask primarily due to its minimality and was quite hesitant to pick up Django. However, I have come to this point due to the following reasons:

Productivity is key and Django already has a number of common tasks done for you already.
A large number of client projects I get are nothing more than CRUD with a few statistics dashboards.
A guy I know has always held multiple client projects and have them delivered on time. I thought I should try his framework choice to see if I can deliver as fast.

A lot of work goes into building a complex application with flask. Django has a lot of this work already done

So picking up Django means:

Authentication is a setup, not a code up.
I am enjoying using signals (Celery has been overkill in some situations)
Writing an application now is like building using LEGOs.

Till I write again.