DEV Community: Wunmi

My Frontend Developer Journey x HNG

Wunmi — Wed, 29 Jan 2025 21:33:51 +0000

As a UI/UX designer, I have always been fascinated by the synergy between design and functionality. Creating visually appealing interfaces is fulfilling, but I have increasingly felt the need to bridge the gap between design and implementation. This desire has driven me to start learning front-end development, and while I have made progress, I am eager to deepen my skills and become more proficient.

My motivation for transitioning requires me to build front-end development skills and this stems from a strong desire to have a more holistic impact on the products I work on. I see myself evolving into a design engineer and a Creative Web Developer, someone who seamlessly blends user-centered design with the technical expertise required to build dynamic, high-performing web applications, and insanely creatively built websites. In today’s tech industry, the ability to both design and develop is increasingly valuable, and I believe this skill set will enable me to contribute more meaningfully to projects. The demand for skilled front-end developers is constantly growing. Many companies, when looking to build modern and interactive web experiences, often choose to hire specialized developers. For example, for projects requiring dynamic and responsive user interfaces, businesses might choose to hire React.js developers (https://hng.tech/hire/reactjs-developers). This allows them to leverage the component-based architecture and rich ecosystem of React. Similarly, when the focus is on server-side rendering and performance, companies might look to hire Next.js developers (https://hng.tech/hire/nextjs-developers) to build optimized and scalable web applications.

The HNG program, with its intensive, hands-on approach, is the perfect environment for me to advance my learning. Its emphasis on real-world projects, mentorship, and collaboration will provide the structure and support I need to refine my front-end skills. I’m especially excited about learning and connecting with other developers as exposure to different perspectives will challenge and enhance my problem-solving abilities.

My goals for this internship are clear. I want to strengthen my skills in core front-end technologies JavaScript, ReactJS and NextJS. Beyond technical expertise, I aim to develop a strong understanding of performance optimization, accessibility, and cross-browser compatibility, ensuring that the applications I build are not just visually appealing but also functional and inclusive.

To achieve these goals, I plan to fully immerse myself in the HNG program by actively participating in learning sessions, completing assignments diligently, and seeking feedback from mentors and peers. I recognize that continuous learning is key in this field, so I will also dedicate time to exploring new technologies and best practices outside the program. I’m eager to contribute to open-source projects and build a portfolio of real-world applications that demonstrate my growing expertise. With dedication, hard work, and the support of the HNG team, I am confident that I can successfully hit my career goals.

Simple way to build a Counter Functionality with ReactJS

Wunmi — Sun, 12 Jan 2025 20:17:59 +0000

Having counter buttons is very common in web apps like ecommerce app, etc. This functionality helps users to be able to increase or decrease a number of items. In this article, I will be sharing a very simple way to build this, using a product page as a use case. Of course, this knowledge can be helpful in some other projects.

The Steps

Install your react and tailwind CSS. I used ReactJS and Tailwind CSS in building this. To install,

Create a folder on your desktop or anywhere in your PC
Open that same folder in Visual Studio Code, then open your Terminal with shortcut CTRL + J. In your terminal, type in
npm create vite@latest
Put a dot . for project name so it creates automatically
Select react (for select framework)
Select JavaScript (for select variant)
Then, type in npm install, and then npm run dev afterwards

All of these steps can be found in the react documentation. For tailwind CSS installation you can follow the process here.

So, let’s get started with the build.

After building the structure of your app and styling, how do we make it work?

See below a snippet of mine

To make the increase and decrease button functional, create a counter function using useState . The useState hook allows us to manage state within our component. In this case, we'll use it to track the current count value. We will initialize the state to 1, which represents the minimum quantity. You can adjust this value as needed e.g. set it to 0 for a minimum quantity of zero.

const [counter, setCounter] = useState(1);

    const increment = () => {
      setCounter(counter + 1);
    };

    const decrement = () => {
      if (counter > 0) { 
        setCounter(counter - 1); 
      }
    };

With our variable name being counter and setCounter. Our useState has an initial value of 1

The incremental and decremental function is set to +1 and -1. You can always change this to be +2, +3, etc. depending on the increase and decrease progression you want on every click.

After this, you go to where the count value is, in this case, our p tag and include {counter} to display the count value automatically.

<div className='py-2 px-4 rounded-lg bg-[#eeeeee] border-[#dddddd] min-w-fit' onClick={decrement}>
        <FontAwesomeIcon icon={faMinus} />
        </div>

        <p className='font-semibold text-xl'> {counter} </p>

        <div className='py-2 px-4 rounded-lg bg-[#eeeeee] border-[#dddddd] min-w-fit' onClick={increment}>
        <FontAwesomeIcon icon={faPlus} />
        </div>

Testing our app

Ensure your changes is being saved. Go to your live server and test. You should see the Counter App rendered on the screen with an initial count and the two buttons to increase and decrease the count.

Clicking the Increase button or icon will increase the count, and clicking the Decrease will decrease it. The updated count value will be displayed on the screen.

Congratulations! You have successfully built a simple counter app using ReactJS.

You can view my live build here https://ecommerce-counter-orpin.vercel.app/

An article on CSS cascade, selector and specificity

Wunmi — Thu, 02 May 2024 20:43:15 +0000

CSS is what gives web pages their style and layout, making them look visually appealing and easy to navigate. But behind the scenes, there’s a system at work that determines how styles are applied, known as the cascade, selectors, and specificity.

Imagine CSS rules as a set of instructions telling your browser how to display elements on a web page. But what happens when multiple rules clash, or when styles seem to conflict? That’s where the cascade comes in.

The cascade is like a set of rules that determines which styles take precedence. It follows a hierarchy, where styles from different sources are applied in a specific order. These sources include:

User Agent Stylesheets: Every browser comes with its default styles, known as user agent stylesheets. These serve as the foundation for how elements are displayed.
Author Stylesheets: These are the styles you, as a web developer, apply directly to your HTML document using <style> tags or by linking an external CSS file.
User Stylesheets: Some users might have their own custom stylesheets, perhaps to override certain design choices or accommodate accessibility needs.
Inline Styles: These are styles applied directly to individual HTML elements using the style attribute. They have the highest specificity and will override any other styles.

When conflicting styles arise, the cascade decides which one prevails based on a set of rules. Generally, styles with higher specificity, importance, or order take precedence.

Selectors are the heart of CSS. They're the patterns you use to target specific HTML elements and apply styles to them. Selectors come in various forms, each with its own specificity:

Element Selectors: These target HTML elements directly. For example, p targets all <p> paragraphs on the page.
Class Selectors: Classes are reusable identifiers that can be applied to multiple elements. They're denoted by a dot (.) followed by the class name (e.g., .btn).
ID Selectors: IDs are unique identifiers assigned to a single element. They're denoted by a hash (#) followed by the ID name (e.g., #header).
Attribute Selectors: These target elements based on their attributes. For example, [type="text"] targets all elements with the attribute type="text".
Pseudo-classes and Pseudo-elements: These target elements based on their state or position in the document. For example, :hover targets elements when they're being hovered over by the mouse.

Specificity is what determines which CSS rule takes precedence when multiple rules target the same element. It's like a points system, where each selector carries a certain weight:

Inline Style*: 1000 points
ID Selectors: 100 points
Class Selectors, Attribute Selectors, and Pseudo-classes: 10 points
Element Selectors and Pseudo-elements: 1 point

When comparing two conflicting rules, the one with the higher specificity wins, regardless of the order in which they appear. If two rules have the same specificity, the one that appears last in the stylesheet takes precedence—a concept known as the "last rule wins" principle.

Understanding the cascade, selectors, and specificity is crucial for mastering CSS and creating well-organized, maintainable stylesheets. By grasping these concepts, you'll have better control over how your web pages look and behave, ensuring a smoother and more consistent user experience.