DEV Community: Benaiah Barango

Building the Front-End for SoPlugged (a platform for Black-owned businesses)

Benaiah Barango — Tue, 11 May 2021 22:41:30 +0000

Hello! Brief introduction: I'm Benaiah, an Ottawa-based Full-Stack developer. Nice to meet you!

TL;DR: I did some freelance work for SoPlugged (a platform to find black-owned businesses in Canada). Check it out here.

I wanted to document how I built this platform, and what tools I used.

Front-end Library

React, easy! Being very conversant with React, and enjoying the benefits of easy state management made this an easy choice.
However, when the all-too-familiar issue of SEO came up, especially for the landing page, I made the executive decision to migrate to Next JS (a.k.a Server-side React).

Styling

Again, for this, choosing what I was familiar with was key. And, that was Material-UI. I've been using Material UI for a while now, primarily because of the components they provide 'ready-made'. I was a little worried about performance based on certain articles I had come across, but we'll discuss this in a subsequent article.

Back-end

I didn't have to handle this. A Ruby developer created the API and database using Rails.

Search Functionality

ALGOLIA.
Front-end search can easily be implemented by adding an input and querying your database on every keystroke, or when the user stops typing (to reduce how many times you'd have to hit the database).
This is what I started off with, till I came across Algolia.
Simply put, Algolia is VERY good when it comes to search. When configured, it routinely indexes your database to get all new information, so searches are hitting Algolia instead of your database directly. This results in a faster and more-efficient search experience.
You also get ready-made and easily customizable widgets for your front-end.

Form Handling

Forms are a critical aspect of a user's experience on a website, and so, should be properly created and easily navigated by the user.
I usually opt for react-hook-form to properly handle form validation (however complex), displaying error messages and handling other events.
But, I had to switch to Formik when I decided to create a multi-step format. Simply because of the limitations I ran into when managing the form's context, and accessing certain methods from child components.
It is possible with React Hook Forms, but much easier with Formik.

These are the major building blocks of the SoPlugged website. Feel free to leave a comment if you have any further questions.

Till next time!

Why I switched from hand-drawn sketches to Figma

Benaiah Barango — Mon, 19 Oct 2020 20:28:08 +0000

"Why didn't you find me sooner?" That's what I'd say to Figma if he/she managed to speak/understand English.

As a code newbie, I was told to always draw out a sketch of what I intended to create and also work out a pseudo-code before jumping on my appealing Material-themed VSCode editor. One major thing that was missing from this very useful piece of advice was what to use to "sketch" out my idea. So, like most people I saw, I pulled out a pen and a pad to try and replicate my mental pictures of this great web-app I had brewing.

While hand-drawing is better than not sketching at all, it had a few hinderances for me.
Simply put, I am not a very talented doodler. So, once I drew out boxes for where what component should go, and the relative sizes, I was done sketching.

This resulted in something I call "Designing on-the-go" (using CSS to try deciding what a page should look like by trial-and-error).

Now, this doesn't sound like much of a problem, considering that I made two nice apps this way. But here's how it can be an issue:

I found that writing CSS to create a component/page that I only had a mental image of is more tasking. It was easier to get frustrated because of the trial-and-error method I employed.
Secondly, you can play around easily with colors, gradients, font sizes, alignment etc. on Figma without having to tweak your CSS a 1000 times (I can't be the only one)
Thirdly, and more importantly, having a design protoype trained me to replicate designs with code. It doesn't get simpler than "here is what I want my app to look like... write code to bring it to life". Moreso, when you have a nice-looking design, you'd WANT to replicate it!!!

I'm more fond of Figma because of it's VERY shallow learning-curve. A 5-minute video was enough for me to get started!!
There are a few other well-known design options out there: Adobe Photoshop, Sketch, etc.

Regardless of which platform you are more comfortable with, I highly recommend taking some time to create a starting design before you jump to your preferred code editor (VS Code rules, btw!)

Let me know your thoughts in the comments :-)

Longest Substring Without Repeating Characters

Benaiah Barango — Fri, 28 Aug 2020 19:12:02 +0000

I have recently started attempting one LeetCode LeetCode problem everyday, to keep me "in shape".

Today's task? To find the length of the longest substring without any duplicate characters.

Here's my solution process:

Loop through giving string (s) while counting characters, and break if a duplicate is found
Use a hash-map (in this case, a javascript object) to store the unique characters

let uniqueChars = {}
let length = 0;
for(let i=0; i<s.length; i++){
  let char = s.charAt(i)
  if(uniqueChars[char]) {break;}
  else {
     uniqueChars[char] = true
     length ++
  }
}
return length;

Now, we're not done, because we are assuming that the longest substring starts from the first index (!).
So, to account for that, we'll need to make it into a recursive function where we keep slicing the string till the end, and compare the lengths.

Looks like this:

var lengthOfLongestSubstring = function(s) {
    if(s.length <= 1) return s.length  //for 1-letter or empty strings
    let uniqueChars = {}
    let length = 0;
    let counter = 0
    for(let i=0; i<s.length; i++){
        let char = s.charAt(i)
        if(uniqueChars[char]) {break;}
        else {
            uniqueChars[char] = true
            length ++}
    }
    if (length >= s.length -1) return length
    return Math.max(length, 
         lengthOfLongestSubstring(s.slice(++counter)))
};

Let's break this down:

From index, counter, we loop through string UNTIL there's a duplicate or we reach the end.
After the loop, we check if the length of our substring is at least 1 less than the string length. If true, we can stop searching, because this is our max length.
Otherwise, we call the function again, moving the counter a step forward, and return the maximum of both lengths. This happens until the counter is at the last letter.

As you can probably tell, this method has a time-complexity of O(n^2), as we have to loop through the rest of the string at every index. 👎

I will be updating this with a faster algorithm, but please feel free to let me know your suggestions!