Forem: Olonts

How to build a horizontal date-picker

Olonts — Tue, 25 Apr 2023 00:21:35 +0000

Imagine the challenge of building a horizontal date-picker from scratch as a developer intern. It seemed like an impossible task, with little guidance available online. But with perseverance and creativity, I cracked the code and successfully built a sleek and functional horizontal date picker.

In this guide, I will share my hard-earned insights and step-by-step approach on how I tackled this daunting project using React and Tailwind CSS. So, fasten your seatbelt and get ready to embark on an exciting journey to create a horizontal date picker that will impress your users.

Step 1: Create a new React app Open your terminal in VSCode and run the following command to create a new React app using Create React App:

npx create-react-app horizontal-date-picker
horizontal-date-picker

Step 2: Install Tailwind CSS Next, we need to install Tailwind CSS, which is a popular CSS framework that we’ll use to style our date picker. Run the following command in your terminal:

npm install -D tailwindcss
npx tailwindcss init

Step 3: Configure Tailwind CSS Open the tailwind.config.js file and configure it like this.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This will create a default configuration file for Tailwind CSS in your app’s root directory.

Step 4: Import Tailwind CSS into your app To use Tailwind CSS in your React app, you need to import its CSS file. Open the src/index.js file in your app and add the following line at the top:

@tailwind base;
@tailwind components;
@tailwind utilities;

Main Component

Now that we have all the dependencies installed and ready, let’s dive right into the implementation.

Start by navigating to your ‘src’ folder in your project directory and create a file called ‘Calendar’. Inside this file, we’ll begin building our horizontal date picker.”

import React, { useLayoutEffect, useState } from 'react'
import styled from "styled-components";
import leftArrowDate from "./assets/left-arrow-date.svg";

function Calendar() {
const [dateList, setDateList] = useState([]);
  const [day, setDay] = useState({});
  const [intervalsLeft, setIntervalsLeft] = useState([]);
  const [intervalsRight, setIntervalsRight] = useState([]);
  const [intervalIdLeft, setIntervalIdLeft] = useState();
  const [intervalIdRight, setIntervalIdRight] = useState();

const toDayName = (n) => {
    switch (n) {
      case 0:
        return "Monday";
      case 1:
        return "Tuesday";
      case 2:
        return "Wednesday";
      case 3:
        return "Thursday";
      case 4:
        return "Friday";
      case 5:
        return "Saturday";
      case 6:
        return "Saunday";
    }
  };

  const toMonthName = (n) => {
    switch (n) {
      case 1:
        return "JAN";
      case 2:
        return "FEB";
      case 3:
        return "MAR";
      case 4:
        return "APR";
      case 5:
        return "MAY";
      case 6:
        return "JUN";
      case 7:
        return "JUL";
      case 8:
        return "AUG";
      case 9:
        return "SEP";
      case 10:
        return "OCT";
      case 11:
        return "NOV";
      case 12:
        return "DEC";
    }
  };

 const generateDateList = () => {
    let date = new Date();
    let newDateList = [];
    for (let i = 0; i < 90; i++) {
      newDateList.push({
        number: date.getDate(),
        day: toDayName(date.getDay()),
        month: date.getMonth() + 1,
        year: date.getFullYear(),
      });
      date.setDate(date.getDate() + 1);
    }
    return newDateList;

 useLayoutEffect(() => {
    const newDateList = generateDateList();
    setDateList(newDateList);
    setDay(newDateList);
  }, []);
  };

  return (
    <div>

    </div>
  )
}

export default Calendar

Basically, this is a React component called “Calendar” that generates a list of dates for the next 90 days using the JavaScript “Date” object. It pushes date objects with day, month, year, and day of the week information into an array. The component returns an empty div element and is exported for use in other parts of the application.

Inside the loop, the function pushes an object into the “newDateList” array. This object contains four properties:

“number” — which represents the day of the month using the “getDate()” method of the “Date” object.
“day” — which represents the name of the day of the week using the “getDay()” method of the “Date” object, and passing it to a helper function called “toDayName()” to get the name of the day.

3.“month” — which represents the current month using the “getMonth()” method of the “Date” object, and adding 1 to it as JavaScript months are zero-indexed.

4.“year” — which represents the current year using the “getFullYear()” method of the “Date” object.

The useLayoutEffect hook is used to perform an effect after the component is initially rendered and laid out. It generates a new list of dates, updates the state variables dateList and day with the new values, and triggers a re-render of the component. It only runs once during the component's lifecycle due to the empty dependency array [] passed as the second argument.

6.The component also defines two helper functions toDayName and toMonthName that convert numeric values representing days of the week and months to their corresponding names.

Render component

Next, let’s add the following code inside the div element of the 'Calendar' component we created earlier:

<DateContainer id="scroll">
          {dateList.map((d, index) => (
            <div
              key={index}
              className="flex flex-col justify-center items-center font-bold"
            >
              <span className="text-[13px] leading-10">{d.day[0]}</span>
              <div className="w-[40px] m-0 p-0 h-0 border-2 border-purple-400" />
              <div
                onClick={() => setDay(d)}
                className={`rounded-full ${
                  day.number === d.number &&
                  day.month === d.month &&
                  day.year === d.year
                    ? "bg-purple-500"
                    : "bg-transparent"
                } w-[30px] h-[20px] flex justify-center items-center cursor-pointer my-3 0 4`}
              >
                <span className="text-xs leading-40">
                  {("0" + d.number).slice(-2)}
                </span>
              </div>
              <span
                className={`text-xs ${
                  day.number === d.number &&
                  day.month === d.month &&
                  day.year === d.year
                    ? "font-bold text-purple-600"
                    : "font-medium text-purple-400"
                } ${
                  d.number === 1 ||
                  index === 0 ||
                  (day.number === d.number &&
                    day.month === d.month &&
                    day.year === d.year)
                    ? "visible"
                    : "invisible"
                }`}
              >
                {toMonthName(d.month)}
              </span>
            </div>
          ))}
        </DateContainer>

<--- make sure Datacontainer style is not placed inside the Calender component --->

const DateContainer = styled.div`
  height: 130px;
  color: #727070;
  display: flex;
  justify-content: left;
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 80%;
  ::-webkit-scrollbar {
    display: none;
  }
`;

<--- make sure Datacontainer style is not placed inside the Calender component --->

Here’s a summarized and comprehensive overview of what’s happening:

DateContainer component is being used with an id of "scroll", which may indicate that it is meant to be a scrollable container for the date list.
The dateList array is being iterated using .map() function to generate a list of date elements.
Each date element is wrapped in a element with the flex, flex-col, justify-center, and items-center classes, which aligns its children in a column with vertical and horizontal center alignment.
Overall, the code generates a list of date elements with specific styles and behaviors based on the day and d objects' properties, and uses Tailwind CSS classes to define the styling and layout of the date container and its children elements.

Navigation Arrow

 const autoScroll = (direction) => {
    if (direction === "left") {
      setIntervalIdLeft(
        setInterval(() => {
          document.getElementById("scroll")?.scrollBy(-3, 0);
        }, 5)
      );
      setIntervalsLeft([...intervalsLeft, intervalIdLeft]);
    } else {
      setIntervalIdRight(
        setInterval(() => {
          document.getElementById("scroll")?.scrollBy(3, 0);
        }, 5)
      );
      setIntervalsRight([...intervalsRight, intervalIdRight]);
    }
  };
  const clearRunningIntervals = () => {
    intervalsLeft.map((i) => {
      clearInterval(i);
      return null;
    });
    intervalsRight.map((i) => {
      clearInterval(i);
      return null;
    });
  };

In this code snippet, there are two functions and an image element with event handlers.

autoScroll: This function takes a direction ("left" or "right") as an argument and sets up an interval using setInterval() to repeatedly scroll a DOM element with an id of "scroll" in the specified direction (-3 pixels for "left" and 3 pixels for "right") every 5 milliseconds. The interval IDs are stored in state variables intervalIdLeft and intervalIdRight using respective setter functions. The current intervals IDs are also appended to intervalsLeft or intervalsRight arrays using setIntervalsLeft or setIntervalsRight setter functions.
clearRunningIntervals: This function is called to clear all the intervals stored in intervalsLeft and intervalsRight arrays using clearInterval() function.

Navigation Implementation

{window.innerWidth > 10 ? (
          <img
            src={leftArrowDate}
            alt="left"
            style={{
              position: "absolute",
              left: "15px",
              height: "15px",
              cursor: "pointer",
            }}
            id="scroll-left"
            // onClick={() => autoScroll("left")}
            onMouseDown={() => autoScroll("left")}
            onMouseUp={() => {
              clearInterval(intervalIdLeft);
              clearRunningIntervals();
            }}
            onDrag={() => {
              clearInterval(intervalIdLeft);
            }}
          />
        ) : null}

<-- <DataContainer should be placed here --->

{window.innerWidth > 10 ? (
          <img
            src={leftArrowDate}
            alt="right"
            style={{
              position: "absolute",
              right: "15px",
              height: "15px",
              transform: "rotate(180deg)",
              cursor: "pointer",
            }}
            // onClick={() => autoScroll("right")}
            onMouseDown={() => autoScroll("right")}
            onMouseUp={() => {
              clearInterval(intervalIdRight);
              clearRunningIntervals();
            }}
            onDrag={() => {
              clearInterval(intervalIdRight);
            }}
          />
        ) : null}

In this code snippet, there is an image element with event handlers.

The image element: This image is conditionally rendered based on the inner width of the window being greater than 10 pixels. It has event handlers attached for onMouseDown, onMouseUp, and onDrag events. These event handlers trigger the autoScroll and clearRunningIntervals functions with different parameters to control the scrolling behavior. The image has specific styles for a position, left offset, height, and cursor. If the inner width of the window is not greater than 10 pixels, the image is not rendered (null).

Here is the expected outcome:

Thank you for taking the time to read my article. I hope you find it valuable and useful. If you have any further questions or need additional information, please don’t hesitate to ask. Thank you for your support!

Finding Inspiration in Unexpected Places: How My Friend's Success Motivated Me to Pursue Tech Skills

Olonts — Fri, 21 Apr 2023 16:04:58 +0000

As the COVID-19 pandemic led to lockdowns and remote work becoming more prevalent in 2020, I saw an opportunity to make some quick money by investing in what seemed like online investment schemes. I fell for the Ponzi schemes hook, line, and sinker, and made good money during that time. I even treated myself to the latest iPhone, the iPhone 11, which was a status symbol for me. It felt like a big win, and I was enjoying my financial stability without realizing the need to invest in my own skills for the future.

Looking back, I realized that investing in a tech skill would have been a wiser move, given the shift towards remote work. But I was complacent, content with my earnings from the Ponzi schemes. It wasn’t until I caught up with a friend during a school break in 2021 that I was forced to rethink my life choices.

My friend had started learning graphic design and landed a job with a modest monthly pay of 300,000 naira. At first, I shrugged it off, thinking the pay was too low and saying, “I don’t think I would work for anybody.” But as we continued talking, I realized that my friend’s success was not something to be taken lightly. This was a friend I went to school with, and we even started learning website development together. Now he was a graphic designer making a significant monthly salary, while I had no job, no stable income, and no clear plan for my future. I felt empty, but I didn’t let him know. I acted normal, but deep down, I was inspired.

My friend’s success became my motivation to take tech skills seriously. He had no idea that he had become a source of inspiration for me, and I found myself telling everyone I met about my friend earning 300,000 naira monthly. I mean, I remember him telling me how he would scout for the best deals on snacks, negotiate with the vendor, and then sell them at a markup during the night prep sessions. I was genuinely happy for him, but at the same time, I felt foolish for not following a similar path.

Despite the initial shock, I acknowledged the need to step up my own game. I resolved to be more focused and determined in pursuing my own goals. While I cheered on my friend’s accomplishments, I also drew inspiration from his achievements and sought ways to enhance my own prospects.

Fast forward a few months, and I landed a job in the tech industry as well. It wasn’t easy, and I had to work hard to build my skills and network, but eventually, I found a job that aligned with my interests and offered a stable income. It was a major turning point for me. I learned from my friend’s example and realized the value of investing in tech skills and pursuing a career in a field that was in demand, especially in the era of remote work and digital transformation.

Now, I’m excited about my job and the opportunities it presents. I’m constantly learning and growing, and I’m grateful for the motivation my friend provided. I no longer chase after get-rich-quick schemes, but instead, I focus on building a solid foundation for my career. I’ve also started exploring entrepreneurial endeavors on the side, inspired by my friend’s success. I’m determined to create my own success story and share it with others

Lessons Learned:

Be cautious of get-rich-quick schemes, such as Ponzi schemes, and avoid falling for them.
Invest in your own skills and education for future career prospects, especially in fields that are in demand.
Surround yourself with motivated and successful individuals who can inspire and motivate you to achieve your own goals.

How React Determines Updates: The Difference Between Reconciliation and React Fiber

Olonts — Sun, 09 Apr 2023 17:21:49 +0000

If you’ve ever clicked on a button on a webpage, you have triggered a change to the Document Object Model(DOM). React is a JavaScript library that renders components based on these changes, a process known as DOM manipulation. In this article, we will discuss how these triggers are used to update components in React.

React uses two types of DOM nodes: The Virtual DOM and the Real DOM. The virtual DOM is a clone of the Real DOM; the Real DOM is the Rendered DOM that you see when you visit a website.

DOM Manipulation
Whenever a change, such as a button click, is made to a component’s state, React creates a tree-like structure of all the components that need to be updated. It generates a new Virtual DOM, which is compared to the Real DOM using a technique called “snapshotting.” Based on the differences between these two versions of the DOM, React updates the rendered DOM accordingly. Importantly, the Virtual DOM is updated before the Real DOM, which reduces unnecessary updates and improves performance.

Reconciliation Algorithm
Before React version 16, the library used a process called the Reconciliation Algorithm to analyze the rendered DOM and the Virtual DOM. It traversed the DOM nodes and updated the DOM according to the class or element that needed to be updated. This process occurred after every User Interface (UI) update.

React Fiber
With version 16, React introduced an upgraded version of the Reconciliation Algorithm called React Fiber. It breaks down the tree-like structure discussed earlier into smaller units called fibers. This allows React Fiber to prioritize which unit of the tree needs to be updated first.

React Fiber introduces a concept called “reconciliation and rendering phases” to make the updating process more efficient. It breaks the updating process into two distinct phases:

Reconciliation Phase: React Fiber compares the old and new Virtual DOM and calculates the differences. It then breaks down the work into smaller units called fibers and prioritizes them based on their importance. During this phase, React can pause, abort, or even delegate work to another thread to keep the UI responsive.
Commit phase: Once the reconciliation phase is complete, React Fiber enters the commit phase. In this phase, it applies the changes to the actual DOM, updating only the necessary parts of the UI. This ensures that the user sees a consistent and updated UI as soon as possible.

In the earlier version of React, there was no provision to temporarily halt the traversal to process other renders in between. As a consequence, this often led to sluggish and unresponsive inputs, and caused the frame rates to be choppy.

Difference between Reconciliation and React Fiber
Here are the key differences between the Reconciliation Algorithm and React Fiber:

Rendering architecture: The old version of React used a stack-based architecture for rendering components, which caused performance issues in large applications. The React Fiber architecture was introduced to address these issues by introducing a more efficient fiber-based approach for rendering and prioritizing components.
Incremental rendering: React Fiber enables incremental rendering, which means that rendering can be broken down into smaller chunks, allowing the UI to be displayed more quickly. This also means that the UI can be updated more frequently, resulting in a more dynamic user experience.
Rendering priorities: React Fiber introduces the concept of rendering priorities, which allows developers to specify which parts of the UI should be rendered first, based on their importance. This ensures that critical parts of the UI are rendered first, resulting in a more responsive user interface.
Improved error handling: React Fiber includes improved error handling, which makes it easier to diagnose and fix issues in the UI. This is particularly important in larger applications where issues can be more complex.
Improved reconciliation: React Fiber includes an improved reconciliation algorithm, which is the process of comparing the current state of the UI with the new state and updating the UI accordingly. This improved algorithm makes the reconciliation process more efficient and results in faster UI updates.

Overall, React Fiber introduces significant improvements over the previous version of React, particularly in terms of rendering performance, prioritization, and error handling. These improvements result in a better user experience and make React a more powerful tool for building complex user interfaces.

My Tech Journey: Lessons Learned as a Junior Developer

Olonts — Thu, 06 Apr 2023 22:18:17 +0000

In 2021, I graduated from university with a degree in mathematics, I realized that pursuing a career in that field was not something that interested me. Instead, I found myself drawn to website development, something I had already enjoyed even before attending university. In this article, I will share my experiences as a junior developer and the lessons I learned along the way.

Learning JavaScript and React
In 2022, I began my journey to become a web developer by learning JavaScript, followed by React. I quickly fell in love with React — everything from its name to its popularity drew me in, building all my projects on GitHub with it. However, in hindsight, I now realize that I rushed into React without fully grasping the basics of JavaScript. This made it challenging for me to learn other aspects of frontend development.

Getting a Job as a Junior Developer
In March 2023, I landed a job. However, I did not get the job based on my technical competence, as the interview process focused on non-code-related topics. Although I was excited to join the team, I struggled with impostor syndrome, worrying about how I would cope with working alongside experienced coders.

The Reality of Being a Junior Developer
During my first week on the job, I experienced significant stress and headaches. I was working in a paid internship with a clause stating that I would retain my position if I performed well. This only added to my anxiety, as I did not want to mess up and risk losing my job. However, with the help of the internet and a React course on Udemy, I slowly began to learn and gain confidence in my abilities.

Conclusion:
My journey so far has taught me a few key lessons:

Getting a job is one thing, but performing well on the job is another issue that junior developers should be prepared for.
It’s important to learn the core basics of JavaScript before moving on to any framework, as it will give you a better foundation for understanding and working with different frameworks.
Don’t be afraid to ask for help or seek out additional resources to broaden your knowledge and skills. The internet is a great tool for finding information and courses that can help you grow as a developer.