Forem: Victor Ibironke

I Typed Everyday for 50 Days

Victor Ibironke — Sun, 29 Sep 2024 15:27:24 +0000

The school session ended towards the end of July this year, and I set a goal to practice typing over the holiday. I'm not exactly sure why (probably because I thought it was cool to be able to type without looking at the keyboard), but around the middle of August, I started.

I had seen an Ali Abdaal video on how he learned to type fast (156 WPM), so I began from there. I remember watching the video and being so impressed at how effortlessly he could type with such accuracy. He gave many useful tips, like working on your posture, forcing yourself not to look at the keyboard, and finding a way to make it fun. At the end of the video, I felt I had enough knowledge to start practicing. So I did, but I quickly ran into a problem...

My finger placements were all wrong, which made the "not looking at the keyboard" part difficult. To address this, I downloaded Mavis Beacon and started using typing.com to practice with the correct finger placements. I did that for a few days until I felt somewhat comfortable. During that time, I also started using monkeytype.com to track my progress. That’s when things got serious...

I knew I wouldn't reach 100 WPM in a week, but I thought seeing progress would be relatively easy. I got a bit frustrated when it didn’t come as quickly as I had hoped. But I was addicted. I was taking tests every chance I got, constantly trying to optimize my typing techniques, and even got interested in keyboards. I reminded myself that I just needed to keep going and work through the frustration.

Yesterday marked 50 consecutive days of practice, and I wrote this post as a progress report. I started 1,280 tests and completed 1,232 tests in the last 50 days, averaging 25 tests per day and completing 24. My public stats are available on my monkeytype profile.

Here are some of the resources I used:

This journey has been fun, and I'm going to keep practicing to get faster.

JavaScript Array Methods Guide

Victor Ibironke — Sun, 15 Sep 2024 19:36:24 +0000

Arrays are one of the most fundamental data structures in JavaScript. With an array, you can store multiple values in a single variable. JavaScript provides numerous built-in methods to manipulate arrays, making them incredibly versatile. In this post, we'll explore all the built-in array methods and how to use them effectively in your JavaScript projects.

Core Methods

forEach()

The forEach() method allows you to iterate over an array and execute a provided function once for each element in the array. It's a simple way to loop through an array.

const array = [1, 2, 3, 4, 5];

array.forEach((element) => {
  console.log(element);
});

map()

The map() method creates a new array populated with the results of calling a provided function on every element in the array. It's typically used for transforming data.

const array = [1, 2, 3, 4, 5];

const doubled = array.map((element) => element * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

filter()

The filter() method creates a new array with all elements that pass the test implemented by the provided function. It's useful when you need to filter out certain elements from an array based on a condition.

const array = [1, 2, 3, 4, 5];

const evenNumbers = array.filter((element) => element % 2 === 0);

console.log(evenNumbers); // [2, 4]

reduce()

The reduce() method executes a reducer function on each element of the array, resulting in a single output value. It's often used for summing values, accumulating totals, or merging arrays into a single value.

const array = [1, 2, 3, 4, 5];

const sum = array.reduce((accumulator, currentValue) => accumulator + currentValue, 0);

console.log(sum); // 15

find()

The find() method returns the value of the first element in the array that satisfies the provided testing function. It stops after finding the first match.

const array = [1, 2, 3, 4, 5];

const found = array.find((element) => element > 3);

console.log(found); // 4

findIndex()

The findIndex() method returns the index of the first element in the array that satisfies the provided testing function. If no element satisfies the testing function, it returns -1.

const array = [1, 2, 3, 4, 5];

const index = array.findIndex((element) => element > 3);

console.log(index); // 3

sort()

The sort() method sorts the elements of an array in place and returns the sorted array. It's commonly used to sort strings and numbers, but it may require a compare function to sort numbers correctly.

const array = [5, 3, 8, 1, 2];

const sortedArray = array.sort((a, b) => a - b);

console.log(sortedArray); // [1, 2, 3, 5, 8]

reverse()

The reverse() method reverses the elements of an array in place. The first array element becomes the last, and the last becomes the first.

const array = [1, 2, 3, 4, 5];

const reversedArray = array.reverse();

console.log(reversedArray); // [5, 4, 3, 2, 1]

concat()

The concat() method is used to merge two or more arrays. It returns a new array, leaving the original arrays unchanged.

const array1 = [1, 2, 3];
const array2 = [4, 5, 6];

const concatenatedArray = array1.concat(array2);

console.log(concatenatedArray); // [1, 2, 3, 4, 5, 6]

slice()

The slice() method returns a shallow copy of a portion of an array into a new array object selected from start to end (end not included).

const array = [1, 2, 3, 4, 5];

const slicedArray = array.slice(1, 4);

console.log(slicedArray); // [2, 3, 4]

splice()

The splice() method changes the contents of an array by removing, replacing, or adding elements.

const array = [1, 2, 3, 4, 5];

array.splice(2, 1, 6, 7);

console.log(array); // [1, 2, 6, 7, 4, 5]

push()

The push() method adds one or more elements to the end of an array and returns the new length of the array.

const array = [1, 2, 3];

array.push(4, 5);

console.log(array); // [1, 2, 3, 4, 5]

pop()

The pop() method removes the last element from an array and returns that element.

const array = [1, 2, 3, 4, 5];

const lastElement = array.pop();

console.log(lastElement); // 5
console.log(array); // [1, 2, 3, 4]

shift()

The shift() method removes the first element from an array and returns that element.

const array = [1, 2, 3, 4, 5];

const firstElement = array.shift();

console.log(firstElement); // 1
console.log(array); // [2, 3, 4, 5]

unshift()

The unshift() method adds one or more elements to the beginning of an array and returns the new length of the array.

const array = [2, 3, 4, 5];

array.unshift(1);

console.log(array); // [1, 2, 3, 4, 5]

join()

The join() method creates and returns a new string by concatenating all of the elements in an array, separated by commas or a specified separator string.

const array = [1, 2, 3, 4, 5];

const joinedString = array.join('-');

console.log(joinedString); // "1-2-3-4-5"

Additional Methods

every()

The every() method tests whether all elements in the array pass the provided test function.

const array = [2, 4, 6, 8];

const allEven = array.every((element) => element % 2 === 0);

console.log(allEven); // true

some()

The some() method tests whether at least one element in the array passes the provided test function.

const array = [1, 2, 3, 4, 5];

const hasEven = array.some((element) => element % 2 === 0);

console.log(hasEven); // true

flat()

The flat() method creates a new array with all sub-array elements concatenated into it recursively up to the specified depth.

const array = [1, [2, [3, [4]]]];

const flattenedArray = array.flat(2);

console.log(flattenedArray); // [1, 2, 3, [4]]

flatMap()

The flatMap() method first maps each element using a mapping function, then flattens the result into a new array. It's a combination of map() and flat().

const array = [1, 2, 3, 4];

const flattened = array.flatMap((num) => [num, num * 2]);

console.log(flattened); // [1, 2, 2, 4, 3, 6, 4, 8]

fill()

The fill() method fills all the elements of an array with a static value from a start index to an end index.

const array = [1, 2, 3, 4, 5];

array.fill(0, 2, 4);

console.log(array); // [1, 2, 0, 0, 5]

copyWithin()

The copyWithin() method shallow copies part of an array to another location in the same array without modifying its length.

const array = [1, 2, 3, 4, 5];

array.copyWithin(0, 3, 5);

console.log(array); // [4, 5, 3, 4, 5]

includes()

The includes() method checks if an array contains a certain value.

const array = [1, 2, 3, 4, 5];

const hasThree = array.includes(3);

console.log(hasThree); // true

toString()

The toString() method converts an array to a string, separated by commas.

const array = [1, 2, 3, 4, 5];

const arrayString = array.toString();

console.log(arrayString); // "1,2,3,4,5"

indexOf()

The indexOf() method returns the first index at which a given element can be found in the array, or -1 if it is not present.

const array = [1, 2, 3, 4, 5];

const index = array.indexOf(3);

console.log(index); // 2

lastIndexOf()

The lastIndexOf() method returns the last index at which a given element can be found in the array, or -1 if it is not present.

const array = [1, 2, 3, 4, 3, 5];

const lastIndex = array.lastIndexOf(3);

console.log(lastIndex); // 4

from()

The Array.from() method creates a new array instance from an array-like or iterable object.

const array = Array.from('hello');

console.log(array); // ['h', 'e', 'l', 'l', 'o']

isArray()

The Array.isArray() method checks whether the passed value is an array.

const array = [1, 2, 3, 4, 5];
const notArray = { a: 1, b: 2 };

console.log(Array.isArray(array)); // true
console.log(Array.isArray(notArray)); // false

of()

The Array.of() method creates a new array instance with a variable number of elements.

const array1 = Array.of(1, 2, 3);
const array2 = Array.of('a', 'b', 'c');

console.log(array1); // [1, 2, 3]
console.log(array2); // ['a', 'b', 'c']

Conclusion

JavaScript arrays come with a wide range of built-in methods that allow for powerful data manipulation. Understanding these methods will make you more efficient in writing clean and concise code. Take some time to experiment with these methods and see how they can improve your code.

Every React Hook and How to Use Them

Victor Ibironke — Fri, 13 Sep 2024 10:32:47 +0000

Every React Hook and How to Use Them

React Hooks revolutionized the way we write React components, allowing developers to use state and other React features in functional components. Hooks provide a more direct API to the React concepts we know and love—state, context, refs, and more. In this post, we'll explore every built-in React hook and how to use them effectively in your React projects.

Core Hooks

useState

useState is the most commonly used hook. It allows you to add state to functional components.

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

Here, useState initializes the state with 0. setCount is a function that updates the state.

useEffect

useEffect allows you to perform side effects in functional components. It runs after every render by default.

import React, { useState, useEffect } from 'react';

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer); // Cleanup on unmount
  }, []); // Dependency array

  return <h1>{count}</h1>;
}

In this example, useEffect sets up a timer and cleans it up when the component unmounts.

useContext

useContext is used to access the value of a React context. It's a simpler way to consume context values without using the <Context.Consumer> component.

import React, { useContext } from 'react';

const UserContext = React.createContext();

function UserProfile() {
  const user = useContext(UserContext);

  return <div>Hello, {user.name}!</div>;
}

useContext takes a context object and returns the current context value.

useReducer

useReducer is useful for managing complex state logic that involves multiple sub-values or when the next state depends on the previous state.

import React, { useReducer } from 'react';

const initialState = { count: 0 };

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

useReducer takes a reducer function and an initial state and returns the current state and a dispatch function.

useRef

useRef provides a way to persist values between renders without causing a re-render when updated. It is also commonly used to access DOM elements.

import React, { useRef } from 'react';

function TextInput() {
  const inputRef = useRef(null);

  const focusInput = () => {
    inputRef.current.focus();
  };

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus Input</button>
    </>
  );
}

useRef creates a reference to a DOM element or a mutable value that persists for the full lifetime of the component.

Additional Hooks

useMemo

useMemo memoizes the result of a calculation and recomputes it only when one of its dependencies has changed. It's useful for performance optimization.

import React, { useMemo, useState } from 'react';

function ExpensiveCalculationComponent({ num }) {
  const [multiplier, setMultiplier] = useState(1);

  const result = useMemo(() => {
    console.log('Calculating...');
    return num * multiplier;
  }, [num, multiplier]);

  return (
    <div>
      <h1>{result}</h1>
      <button onClick={() => setMultiplier(multiplier + 1)}>Increase Multiplier</button>
    </div>
  );
}

useCallback

useCallback is similar to useMemo but is used to memoize functions. It returns a memoized version of a callback function that only changes if one of its dependencies has changed.

import React, { useState, useCallback } from 'react';

function Button({ onClick }) {
  console.log('Button re-rendered');
  return <button onClick={onClick}>Click me</button>;
}

function ParentComponent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    setCount(count + 1);
  }, [count]);

  return (
    <div>
      <Button onClick={handleClick} />
      <p>Count: {count}</p>
    </div>
  );
}

useLayoutEffect

useLayoutEffect is similar to useEffect but fires synchronously after all DOM mutations. It’s useful when you need to read layout from the DOM and re-render synchronously.

import React, { useLayoutEffect, useRef } from 'react';

function LayoutEffectExample() {
  const divRef = useRef();

  useLayoutEffect(() => {
    console.log('Height:', divRef.current.clientHeight);
  });

  return <div ref={divRef}>Check the console for height</div>;
}

useImperativeHandle

useImperativeHandle customizes the instance value that is exposed when using ref. It's often used with forwardRef.

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    },
  }));

  return <input ref={inputRef} />;
});

function ParentComponent() {
  const inputRef = useRef();

  return (
    <>
      <FancyInput ref={inputRef} />
      <button onClick={() => inputRef.current.focus()}>Focus Input</button>
    </>
  );
}

useDebugValue

useDebugValue can be used to display a label for custom hooks in React DevTools.

import React, { useState, useDebugValue } from 'react';

// Custom hook to manage user online status
function useOnlineStatus() {
  const [isOnline, setIsOnline] = useState(navigator.onLine);

  useDebugValue(isOnline ? 'Online' : 'Offline');

  React.useEffect(() => {
    function handleOnline() {
      setIsOnline(true);
    }
    function handleOffline() {
      setIsOnline(false);
    }

    window.addEventListener('online', handleOnline);
    window.addEventListener('offline', handleOffline);

    return () => {
      window.removeEventListener('online', handleOnline);
      window.removeEventListener('offline', handleOffline);
    };
  }, []);

  return isOnline;
}

// Component using the custom hook
function StatusIndicator() {
  const isOnline = useOnlineStatus();

  return <span>{isOnline ? '🟢 Online' : '🔴 Offline'}</span>;
}

export default StatusIndicator;

Custom Hooks

Creating custom hooks allows you to extract and reuse component logic. Here’s a basic example of a custom hook for data fetching:

import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    async function fetchData() {
      const response = await fetch(url);
      const data = await response.json();
      setData(data);
      setLoading(false);
    }
    fetchData();
  }, [url]);

  return { data, loading };
}

Conclusion

React Hooks provide a powerful and flexible way to build modern React applications using functional components. Mastering these hooks can help you write cleaner, more maintainable code. Start using these hooks today to enhance your React development experience!

Visualizing Firebase Data: Unlocking the Power of Real-Time Insights

Victor Ibironke — Fri, 16 Aug 2024 12:49:51 +0000

Introduction

In today’s world driven by data, knowing how to show and understand information plays a key role in making smart choices. Firebase offers a full set of tools that create lots of data. This data can give you insights into how well your app works, what users do, and more. But the hard part is turning all this raw data into useful actionable insights. When you show your Firebase data in pictures or graphs, it helps you see trends, catch problems, and make your app work better right away.

The Power of Data Visualization

Data visualization turns data into pictures like charts or graphs. This makes tricky data easier to grasp. When you change plain numbers into visual insights, you can spot patterns, links, and trends you might miss with regular data analysis. Showing data in pictures also helps teams work together better. It lets them share complex info and make smart choices based on what they see.

Data visualization has a big impact on:

Better Decision-Making: Easy-to-understand visual insights help you make smart, fact-based choices that fit your big-picture goals.
Keeping Track of Performance: Visual tools let you watch important numbers in real-time so you can respond to changes in how well your app is doing.
Making Users Happier: By looking at how people use your app, you can spot patterns and problems, which helps you make the app better and more engaging.
Creating Plans Based on Facts: Seeing your data helps you come up with and tweak plans making sure your choices are based on what’s happening.

Visualizing Firebase Data

Firebase stands out for its real-time data delivery, which proves essential for anyone who wants to keep a close eye on their app. But to make this data useful, you need good visualization tools that can change raw numbers into insights you can act on. The trick is to find a tool that meets your needs striking the right balance between what it can do and how easy it is to use.

Tool 1: Looker Studio

Looker Studio has a powerful impact on data visualization offering users detailed and flexible options. This tool allows you to mix various data sources, like Firebase, and create intricate dashboards that match your specific requirements. The high level of customization makes Looker Studio a go-to choice for people who need to examine data and know how to use its more sophisticated features.

Looker Studio's complexity might prove challenging for beginners in data visualization or those who want quick insights without much setup. Its robust capabilities come with a steeper learning curve making it more suitable for users with experience in data analysis and visualization.

Tool 2: Ventivo

Ventivo stands out as a fresh addition to the data visualization landscape. This tool puts simplicity and user-friendliness at the forefront. It aims to help you create live visualizations of your Firebase data without hassle. Ventivo suits people who want to jump into data visualization without facing a tough learning process. You can link your Firebase project and see your data in visual form right away with little setup needed.

Right now, Ventivo doesn’t have a lot of bells and whistles, but it’s growing all the time. The tool’s straightforward approach makes it easy for many types of users to handle. From coders to product leads, anyone who needs to keep an eye on app performance, how users behave, and key numbers in real-time can use it. They don’t have to deal with tricky settings to get started.

Conclusion

Turning your Firebase data into visuals helps you gain insights and boost your app’s performance. You have options like Looker Studio with its wide range of features and customization, or Ventivo which is straightforward and user-friendly. Picking the right tool can be a game-changer. When you transform your raw data into clear useful visuals, you can make better choices, improve how your app works, and in the end, give your users a better experience.

7 days of Codewars and Leetcode challenges

Victor Ibironke — Sun, 29 Jan 2023 21:16:50 +0000

On the 23rd of January, I started a challenge of solving only Codewars and Leetcode challenges for the next 7 days, nothing else. This is the summary of that experience.

I started out with these ranks on Codewars and Leetcode.

Day 1

Day 1 was very frustrating day because I didn't solve as many as I would have liked. I was aiming for at least 15 solves every day but didn't even come close.

On Codewars, I attempted 8, solved 3, and solved 0 from 1 problem tried on Leetcode. I was able to identify the reason for such a bad first result.

I woke up late. My aim for this challenge was to solve 10 problems from both Codewars and Leetcode, and my waking up late didn't help at all. I needed time to think about the problems and find a solution, but there are only so many hours in the day.
I was impatient. I started with Codewars because I found that their problems were slightly easier so I wanted to give myself motivation for the harder ones, but when it got to the tougher questions, I just gave up. I forfeited the kata and when I looked at the solutions, I saw that I was actually on track to solving the problem and I just had to give myself more time. The frustration kept piling up and I only managed three solutions and none of those came from Leetcode.
There were too many distractions. I had so many things distracting me while thinking of a solution for the problems. My phone buzzed every second, I was listening to music, and that open YouTube tab kept calling me to finish that video I started.

Thankfully, I took my advice and did better on day 2.

Day 2

Day 2 was much better. I fixed what went wrong on day 1 and there were improvements.

I attempted 7 Codewars problems and solved 5 of them, and solved 5 as well from 8 attempted on Leetcode.

I didn't reach my goal but seeing that improvement gave me so much motivation for day 3.

Day 3

I woke up feeling strong and motivated and after the morning rituals, I went straight to my computer to get started.

At the end of the day, I attempted 20 questions in total (10 each), solving 9 from Codewars and 6 from Leetcode. Massive improvement from day 1.

Nothing much happened today apart from me buzzing with excitement.

Day 4

It seems like I was on a motivation high because solving 9 from 10 Codewars challenges and 10 out of 10 from Leetcode was absolutely insane.

This result is a bit shocking because Codewars' challenges are generally easier than Leetcode's, but I'll take it. Onto day 5.

Day 5

Day 5 started off quite slowly. The challenge was to only solve problems on the platforms but I was really starting to miss building projects so I lost a bit of momentum going into today. I attempted 6 problems and solved 4 from Codewars, and attempted 10 problems and solved 7 from Leetcode.

I found myself doing more on Leetcode than on Codewars, and I'm not sure why but I think some of the challenges on Codewars were buggy. My code would return the correct answer, but the test cases would not be well-defined. Oh well.

Day 6

Day 6 was probably the worst day of this challenge. I was tired, felt burnt out, and just wanted it to end. I still tried to do something and I attempted and solved 2 and 3 from Codewars and Leetcode respectively. That was probably because I handpicked the questions that looked easy because my brain wasn't even trying to think.

Day 7

At the end of day 6, I calculated the sum of all my attempts and solves and realized I needed to attempt 15 problems to reach 100. I didn't have a goal at the beginning but I felt having 100 attempts in 7 days would be nice. So that's what I did. I attempted 7 problems from Codewars and solved 6, and solved 7 from 8 attempts on Leetcode

Final Statistics

23-Jan-2023 (Day 1): Codewars: Attempted, 8, solved, 3. Leetcode: Attempted, 1, solved, 0.

24-Jan-2023 (Day 2): Codewars: Attempted, 7, solved, 5. Leetcode: Attempted, 8, solved, 5.

25-Jan-2023 (Day 3): Codewars: Attempted, 10, solved, 9. Leetcode: Attempted, 10, solved, 6.

26-Jan-2023 (Day 4): Codewars: Attempted, 10, solved, 9. Leetcode: Attempted, 10, solved, 10.

27-Jan-2023 (Day 5): Codewars: Attempted, 6, solved, 4. Leetcode: Attempted, 10, solved, 7.

28-Jan-2023 (Day 6): Codewars: Attempted, 2, solved, 2. Leetcode: Attempted, 3, solved, 3.

29-Jan-2023 (Day 7): Codewars: Attempted, 7, solved, 6. Leetcode: Attempted, 8, solved, 7.

Codewars: Total attempted: 50. Total solved: 38. 76%

Leetcode: Total attempted: 50. Total solved: 38. 76%

Total Attempted = 100

Total Solved = 76

Solve percentage = 76%

Conclusion

This challenge was very demanding. I'm not entirely sure why I decided to do it, but I learned a lot from it. I don't know if I will do it again but for now, I'm happy it's over and I can go back to building projects again.