DEV Community: Brian Maina

Higher Order Components.

Brian Maina — Sat, 16 Apr 2022 23:52:45 +0000

Have you ever used React and felt compelled to duplicate the same logic across numerous components? I'm sure you're wondering if there's a method to reuse logic across multiple components in React without rewriting it. Yes, there is! Higher-Order Components (HOCs). HOCs offer an advanced approach to dealing with such cross-cutting concerns.
In this tutorial, you'll explore HOCs in-depth, why there’s a need for HOCs, when to use the pattern, what's a HOC and finally, create a simple React app using HOCs.

Why’s there a need for a HOC?

Imagine a client approached you, then asked you to create an App with a button indicating the number of times it’s clicked. You create a component called ClickCounter, where you store the button and its counter functionality. Export, then import and render it in the App component.

After some time, the client comes back and asks you to add a heading indicating the number of times it’s hovered over. Basically a ClickCounter with click functionality replaced by hover functionality. You create a new component called HoverCounter which stores the heading and counter functionality. Export, then import and render it in the App component under ClickCounter.

Again, the client comes back and asks you to add an input that counts the number of keypresses in the project. For Example A key up in an input element to increment a counter value and display it. You can of course implement it the same way you implemented the counter in ClickCounter and HoverCounter. But realize you are duplicating code and not really reusing the counter functionality. So if 10 different components needed the counter functionality you would write the same code over and over again.
So how can you really reuse the counter functionality?
The immediate thought is to lift state from the parent component and pass it down the handler as a prop. Define the counter functionality in App component, provide the state and the handler as props to ClickCounter and HoverCounter. Since you only have two components, it would work. But imagine a scenario where the counter components are scattered across the React App. Lifting the state would definitely not be the correct solution. So there’s a need to share common functionality among components without repeating code. That’s where the concept of HOCs comes in.

So when do you really use the HOC pattern?

Basically HOCs allow you to share common functionality between components.

What’s a HOC?

Basically, a HOC is a pattern where a function takes a component as an argument and returns a new component.

A HOC adds additional data or functionality to the component. The new component can be referred to an EnhancedComponent.

From a non-technical point of view

withSuit is the function that will enhance TonyStark and return IronMan which is the EnhancedComponent.
From React's point of view we have function which accepts OriginalComponent adds functionality and returns the EnhancedComponent.
Consider implementing a basic HOC then implement it with the counter example-
Create a new file called withCounter.js within the components folder.

Consider this example-

In the above example, the UpdatedComponent is a function that takes a component called OriginalComponent as an argument. You have created a new component called NewComponent which returns the OriginalComponent with a name prop from its render function. While this actually adds no functionality, it depicts the common pattern that every HOC will follow.

Creating a simple React app using HOCs.

Apply the HOC pattern to the ClickCounter and HoverCounter. In ClickCounter you will import UpdatedComponent from withCounter while exporting it will call the UpdatedComponent function passing in the ClickCounter component. You’ll do the same for HoverCounter. Instead of exporting the ClickCounter or HoverCounter component you export the UpdatedComponent. The HOC in addition to being the ClickCounter or HoverCounter.
To modify your HOC so as to allow the counter functionality to be shared among components. You will cut the constructorand incrementCount function from ClickCounter into the HOC. Since it’s the common functionality we want to share, remove the same code from HoverCounter.
You need to pass down the state and incrementCount method as props so that the OriginalComponent can make use of that functionality.

In both ClickCounter and HoverCounter you will destructure count and incrementCount from this.props. If you look at the project, it functions as perfectly but the difference now is that you are reusing code instead of duplicating it.

Now, you can change the naming convention. The component and functions you have used are different from what you typically see. So change them. The function and file name is usually the same, it indicates the functionality being added to the components. The OriginalComponent is usually referred to as the WrappedComponent. The NewComponent is usually the same as the function name, but in Pascal case.

You’ll make the same changes to the naming convention while importing and exporting the HOC in the ClickCounter and HoverCounter.

Before winding up consider these two things:

Passing down the props. In App component you will pass a name prop in the ClickCounter component.

Render the name prop in ClickCounter.

If you go to the browser the name value is not displayed. This is a common mistake when starting off with HOCs. The problem here is that when you specified props on the ClickCounter component, the props are passed down to the HOC and not ClickCounter. If you log out the name from in the HOC in the render method. You can see you do have the name prop for ClickCounter and undefined for HoverCounter.

To fix this issue you need to pass down the remaining props to the WrappedComponent using the spread operator. Basically the HOC adds two props to the App component then passes down the remaining specified props.

Passing parameters to the HOC function. In the HOC instead of incrementing the value by 1. You would want to increment it by different numbers for both Counter components. You can do that by passing a parameter to the HOC function. First WrappedComponent and second incrementNumber. You will now increment the incrementCount by the incrementNumber parameter.

In ClickCounter you will add a second argument 5 and HoverCounter You will add 10.

Conclusion

Congratulations! 🚀 You’ve reused common functionality within components in your application. Following the methodology in this tutorial can reduce errors caused by duplicating code. I hope you enjoyed this tutorial!

Creating a Simple Horizontal Switchable Tabs Panel Using HTML, CSS & JavaScript.

Brian Maina — Tue, 08 Jun 2021 08:04:31 +0000

Tabs are ideal for singular page web apps or websites with multiple subjects to display. In this tutorial, we shall create a simple web application with a horizontal switchable tabs panel. The web application can do the following:

Show the active tab.
Switch between the tabs.
Display the contents of each tab.

We will define the structure of the web application using HTML. Then render the elements on the screen using CSS and finally, add the functionality using some bit of Vanilla JavaScript. That's right, no fancy JavaScript framework is needed, just the simple Vanilla JavaScript we all know. Let's begin!

Prerequisites

Before getting into the coding part of this project, ensure you have the following:

Intermediate level knowledge in HTML, CSS & JavaScript.
Text editor or a codepen account.

Step 1: Setting up the HTML

Essentially the HTML has a few levels of elements:

The wrapper of the tabbed panel.
The sidebar
The tab contents
The actual tab buttons.

Begin by constructing the tab panel wrapper. Create a div, give it a class, and call it tabs; this will be the wrapper for the tab panel. Create a new div inside the wrapper, give it a class, and title it sidebar; this will contain the tab buttons. Create three buttons in the sidebar, then give each one the tab-btn class. To the first button, add a tab-btn-active class. The active class will come in handy when specifying in the CSS and JavaScript what happens to the tab when the tab button is clicked. Add HTML, CSS, and JavaScript as the names of the buttons, respectively. Add a data for-tab=' ' attribute to each of these buttons now. Add a tab number to the data element to specify which button corresponds to which tab. Tab 1, tab 2, and tab 3 are examples. In the JavaSript, the tab number is used to read the properties and select which tab to open.

Create a parent div underneath the sidebar and give it the class content to act as a wrapper for the tab contents. Create a new div and give it the tab-content class. Also, give the tab content div a class called tab-content-active. The active class will be used in CSS and JavaScript to indicate what happens to the tab when the tab button is clicked.

We'll map the data-for-tab attribute within this div, so add a data-tab='1' property to it and give it a tab number of 1 to represent the first tab. You may now go ahead and fill the div with some content. Do the same for tab two and three, but remove the tab-content-active class and name their data-tab attribute 2 and three respectively. Finally, add some bit of content.

If you're loading the page from the server, you might want to utilize loops or export the data so that the data-tab values for tabs 1, 2, and 3 matches the data-for-tab values. Make sure the data-for-tab and data-tab numbers match if you're not using any server-side code.

Step 2: Styling the page

We will first style the tab wrapper. Apply the following styles to the tab wrapper:

Thereafter apply the following styles to the sidebar and tab buttons:

Afterwards, specify what will happen to the button once it gets clicked; that will be the tab-btn-active class. When the button is clicked, it will apply the following styles to the button element:

The following styles will be applied to the content, tab-content and tab-content classes:

The position absolute applied in the tab-content class will stack the content the all the tabs. After that, display none the contents of all the tabs.

A display block style is applied to the tab-content-active class so as to display the content in the default tab, which is the first tab.

Step 3: Add JavaScript

Part 1:

To begin the coding, create a method called setupTabs. Then pick all the components with the tab-btn class with a querySelectorAll. When the button is clicked, utilize the forEach method on it to fire a clickeventListener or a function. The content of the selected tab will be displayed using the button function.

Part 2:

Define the following constants to represent the tabs wrapper, sidebar, tab number and tab content to activate:

const sidebar = button.parentElement will start at the button, then go to the parent element, the sidebar. const tabs = sidebar.parentElement selects the parent element of the sidebar, which is the tab wrapper. const tabNumber = button.dataset.forTab, the dataset refers to any attributes that start with a data- attribute. The JavaScript will convert the snake-case format of the dataset into camel-case. The forTab refers to the value in the data-for-tab attribute. Now to get the actual tab content to activate, we use the const tabActivate =tabs.querySelector() then inside the querySelector we pass .tab-content[data-tab="${tabNumber}"] to select the tab content element with data-tab equals to the number gotten after clicking the tab.

Part 3:

Add a DOMContetntLoaded eventListener and call the setupTabs function once the DOM content has been loaded.

Part 4:

First, you will set all the buttons to be inactive, then set the active button. You will do the same for the tab content. Select all the buttons and for each button, remove the tab-btn-active class, in doing this it will reset and no button will have an active state, then set the clicked button to have the tab-btn-active class.

After that, select all the tab contents and for each tab, remove the tab-content-active class, in doing this it will reset and no tab will have an active state, then set the active tab to have the tab-content-active class.

Now simply add the tab-btn-active class so that whenever the button is clicked, it becomes active. We will do the same for the tab content, using the tabActivate constant add the tab-content-active class.

And that's it!

Conclusion!

The purpose of this tutorial was to give you the most detailed instructions on how to make a horizontal switchable tabs panel using HTML, CSS, and JavaScript. I hope this tutorial guided you through the process of creating a horizontal switchable tab panel. To reach a larger audience, please like or share the article. In the comments section, feel free to make a comment or ask a question.

Guide to Serverless Contact Form Using Netlify Forms

Brian Maina — Mon, 31 May 2021 18:35:18 +0000

What is a Serverless site?

Serverless is a phrase that implies many of the difficulties you as the developer might face or have faced while managing and maintaining your sites server-side that have been largely removed. Serverless services facilitate developers with a huge spectrum of insanely amazing stuff and open up countless opportunities that would have been too expensive to deploy, manage, and sustain while using conventional server architectures. As a frontend developer with no backend or DevOps knowledge, how incredible is it to set up an API that manages all production traffic?

What is Netlify?

Netlify is an intuitive Git-based workflow and powerful serverless platform to build, deploy, and collaborate on web apps.

What is a form?

A form is a standard requirement for any business or personal portfolio since it provides a way through which users can reach out to the business. In most cases, it is found on the contact page of the website. In this tutorial, I will guide you on how you can set up a form using Netlify Forms.

Prerequisites

Before getting started, ensure you have the following:

Basic understanding of HTML forms.
A basic HTML form.
Basic Knowledge on Git & GitHub.
A starter Netlify account

Netlify's Pricing

It's definitely worth getting the pricing conversation out of the way before we get into the coding. Netlify offers a variety of plans to meet your needs. The plan you choose is by default determined by the size of your project. The starter Nelify plan is free to use, but the free plan only allows for 100 submissions per site each month. If you have a small website, whether if it is yours or a client's and they do not expect more than 100 submissions a month, this should be sufficient. Netlify also provides Pro, Business, and Enterprise plans. See the Pro, Business, and Enterprise plans pricing details.

Building the Form.

The ease with which Netlify forms can be implemented is a big part of their appeal. Consider a simple contact form that you may see on a standard website.

You can be as creative as you want with it. It's entirely up to you, whether you utilize Bootstrap or CSS. A contact form usually contains three fields: name, email, and message. For my contact form, I utilized a free HTML5 template from HTML5 app.net. After that, I made a GitHub repository and uploaded the code to GitHub. Finally, I set up Netlify to host the site. Here's how mine looks:

To add some functionality to it, simply add a data-netlify="true" attribute to the form element to make it function with Netlify.

That's it for now. If you fillout the form....

.....it will redirect you to Netlify's default thank you page...

...and the form submission will be accessible from your Netlify dashboard.

Features of the advanced form

That was simple, although it might not be precisely what you were looking for. For example, you might wish to create a custom confirmation page and prevent robots(bots) from submitting your form. You may even submit the form using JavaScript instead of a conventional HTML form post. Or perhaps you might want to be notified when the form is submitted to your personal email address instead of having to read the submissions from your Netlify project's dashboard.

Each of these things are feasible, although I'll only go over a few of the options.

How to create a custom confirmation page?

Instead of using Netlify's standard confirmation page, you'll most likely want to create a customized one. To do so, simply add an action attribute to your form. The action must include the path to your site's form confirmation page in relation to the root. Please note that this is the route to the webpage, not the file path, whenever the website is generated.

You will then have to create a new HTML page and use any name of your own choosing. Then add a thank you message.

Now after you submit the form...

...You can then add some CSS styling to customize the page.

How to configure your form for additional spam filtering?

Askimet already runs a spam filter with Netlify Forms, but for additional spam protection, you can modify them. A honeypot field is supported, which can be used to recognize bot submission of a form. It's as simple as sipping margaritas on the beach! Simply include a field in your form that isn't accessible to the users and thereafter identifying the field's name in a data-netlify-honeypot="bot-field" property to the form tag.

The above action functions similar to adding a reCAPTCHA challenge protection to your form functions. To begin, add a data-netlify-recaptcha="true" attribute to your form element then a data-netlify-recaptcha="true" div within the form.

Below is the identical contact form after adding the reCAPTCHA challenge.

Configuring The Notification Settings.

When a form is submitted, you'll almost certainly want to be notified or enter the message into some form of workflow to handle it. In your project's Netlify dashboard, go over to Settings > Forms > Form notifications to configure this.

And thats it!

Conclusion

This article's goal was to provide you with the most comprehensive guide on creating serverless contact forms using Netlify. If you are intrigued to learn more about the subject check out Netlify's documentation. Also, if you have any queries help through Netlify support forums. I hope you found this article useful in creating a serverless contact form. Leave a like or share the article to reach a wider audience. Feel free to leave a remark or ask a question in the comment section.

Easy Guide To Dark Mode Toggle Using HTML, CSS and JavaScript.

Brian Maina — Mon, 24 May 2021 08:36:22 +0000

In this post, I'll show you how to use HTML, CSS, and a little JavaScript to add a light to dark mode toggle. I'll walk you through the entire coding process, including how I use a checkbox and a label tag to construct the layout of the elements in HTML. Then I write all of the functionality for monitoring when the input is tested, and its status in JavaScript. Finally, I use CSS to add styling transition effects and a::before pseudo-element to reflect the toggle.

Step 1: HTML & CSS code

I already have all of the website's code in place, as well as some styling. I declared all of the colour variables for the light mode under root in the CSS.

I then added a different class for the dark mode.

Afterwards, I added a toggle to the page that, when it's clicked, applies the dark mode class to the body.

To do that, first, go to the HTML code, and under the div tag with the class of toggle, add a new div and set the class to dark mode; basically, this is the dark and light mode container. Under that class, create an input type checkbox and set the class and id to checkbox to reference the input. Then add a label. The label will be for the input, so under the for, write the same name as the id and class for the input so that when you click on the checkbox to activate it, you can also click on the label to activate it. This will be an added advantage in your code.

Afterwards, you'll need to add some styling to this, but for now, get the functionality first then you can add some styling to it so that it looks a little bit better. So right now, you have an input and a label and your dark-mode identified in the CSS as a different class.

Step 2: The JavaScript Code

The next step will be to change the colour of the website, for that, follow a few steps. In your JavaScript, you will monitor if the checkbox is tapped, and if it is, you want to check which state the checkbox is in. If the checkbox is checked, the dark mode should turn on, and if it is not checked, the light mode should be visible.

Setting up JavaScript Variables

First create a variable that will reference this input type of checkbox.

JavaScript add EventListener

Afterwards add a click eventListener to the input.

When it is clicked, the checkbox should basically check its own status to know if it's checked or unchecked, then create a function for that called checkMode. The function will check which state the checkbox is in. If it is checked, the dark-mode class will be enabled, and if it's unchecked, the dark-mode class will be removed. For that, use a conditional statement.

Creating the dark mode on and off functions.

First, you will create functions to add the dark-mode class. If it is checked, create a function and call it darkModeOn, and if it is unchecked, create a function and call it darkModeOff.

If the input is checked, assign the dark-mode class to the body, to overrule the root's light colour styles. This will add a class to the body, and the name of the class is dark-mode.

The off function is almost similar. For the function of darkModeOff again, you want to reference that body, but in this case, you want to remove the dark-mode class.

If the checkbox is checked, add the darkModeOn function, and if it is unchecked, which is the else state, add the darkModeOff function.

The hardest part is over! All that's left is to add the CSS styling to the checkbox.

Step 3: CSS styling

First, reference the darkmode class which basically houses the entire checkbox.

Styling the darkmode container

The first step will be to write the display flex, then align items to the centre. Afterwards, apply a font size of 16px and a font-weight of 700 for the dark mode text. Also, use one of the colour variables to set the dark mode text colour.

Creating the ball class in the HTML

The next step will be to add some styling to the label. In the label tag, you want a toggle that looks like it is moving backwards and forwards. So create a div and add a ball class; this will represent the actual toggle that will move backwards and forwards. For that label, add a class of label.

Styling the label

First, reference the label class. Set a particular width and height, next set a border-radius of 30px, and use one of the colour variables to set the background colour, then set the position to absolute. Finally, you'll want the cursor to be a pointer so that it looks interactive.

Styling the ball

Add that toggle; you will reference the class of ball. And again, set a particular width and height for this, set the background colour using one of the colour variables, position it to be absolute, set a border-radius of 50%, set a margin-top and left positioning. Also, add a cursor pointer to this. Finally, add a transition because you will add an animation here as well.

Adding text before the toggle icon

Now add a before property to show the Dark mode text. So you will use the label class then add a before property. The content of it will be Dark mode. Set the position to be absolute, display inline-block, width to 90px, and finally fix the left and top positioning.

Toggle animation

So now you want to verify the state of the checkbox and apply some styling to the toggle. Use the checkbox id so that you can verify when it is checked. When it is checked, you want it to affect the sibling element, so use the tilde sign then reference the ball class. You now want this element to transform, therefore translate it in the Xdirection by 3em.

Finally reference the checkbox id and set it to display none.

And that's it! You've created a light and dark mode switch that works perfectly. It's easy and fast. I hope you found this tutorial useful. Feel free to comment and explore what types of tutorials or examples you'd like to see more of.

JavaScript Journey

Brian Maina — Fri, 30 Apr 2021 18:37:30 +0000

For the past three months, I've been studying JavaScript and applying it to web applications to better practice and improve my skills. Formerly having learned HTML and CSS, the experience has been quite exciting with many good and bad times. With javascript, many things are simplified as a few lines of Js code could achieve what CSS couldn't in too many lines. What fascinates me are the quirks that come alongside coding using js and its functionality when added to HTML and CSS codes.

My journey was full of exciting and frustrating times. I'm happy as I had an opportunity to learn a language with cool features. Secondly, the learning the basics experience was enjoyable because it was some sort of "honey moon"😅. Lastly, I can't express the pleasure i get after of solving bugs and errors.

The surprising part was that the frustrations made the journey fun. I will refer to the first project I did, as it had me working through challenges in Js and Github. my endurance was put to the test with sleepless nights and days where I almost smashed my machine.

The 1st project was quite simple; therefore, it amuses me of how much I encountered Js errors. I'd get numerous bugs, and the worst part was that I didn't understand most error code messages. Luckily, with the end of my tutorial classes, I felt confident enough to begin personal projects.
It's easier said than done since things got quite harder than I expected.

I got tempted to look for codes online to avoid a repetition of my first experience with Js. So I began to code with constant occurrences of bugs and error messages that had me thinking about researching source codes for previously done projects rather than going through my hustle.

Regardless, I reminded myself that I was on a learning streak, and I worked my way through the errors, late debugging nights, and consultations. The funniest parts of my journey were when I experienced bugs and decided to google solutions online on Stack overflow and youtube, but the result was negative. I would often work with solutions from more experienced developers. However, implementing the same technique on my code and still experiences poor workability made me disappointed. I mean, how is it that my code was irresponsive when I followed everything correctly? Or maybe there was a problem with my machine and IDE.

I realized my CSS code was holding me back, but the issue was still there after the transitions.

So I decided to get help from one of my Js guru friends. I had to come up with a repo for my project, then add and commit it to push it to Github finally and include him as my collaborator. After inspection, he asked me to create branches separate from my primary branch, where he would have access to view the changes made to my code and edit it. It was at that moment where I realized I was not fully skilled in GitHub. Don't get me wrong, I mean, I could separate branches before and make changes on my master branch. So I set out to employ working with separate branches, which led to me deleting my repo and creating a new one.

Js had me struggling with codes, and Github stressed me out but turned out to be very helpful for me. Most of the time, I was stuck in between making changes on my master branch and committing them so that I could switch them to a separate branch, only to find that I had not committed the changes. So I resorted to pushing the code to Github using a separate branch to experience the same error repeatedly. I repeated the process quite a lot, and though tedious, it was quite educative.

Eventually, I understood how to work with Git land earned the git commands justifying my whole encounter.

I have learnt that it's normal to make mistakes and it is very okay to learn things slowly. I have made a lot of tiny mistakes that have made me end up starting a project all over again. I always take mistakes as a chance to learn. However if you make a mistake, don't keep it to yourself; first try to fix it on your own; if that doesn't work, Google the problem; and if that doesn't work, you can now seek assistance from someone more experienced than you.

Lastly, don't be too hard on yourself. It's always good to take a break from the screen from time to time. I always take some time away from my screen to play football or just do some physical stuff since this really helps in clearing my mind.

HTML & CSS - My Journey

Brian Maina — Sun, 28 Mar 2021 03:13:35 +0000

I started my software development journey on 1st December 2020 as a student at Frond-End Masters an online Bootcamp. When I began this journey, I aspired to become a full-stack web developer. It has been two months since I embarked on this journey and although there have been some setbacks, I can say it has been fun and worth it. All the setbacks I have encountered have made me learn a lot of new stuff. I decided to document my journey since in the short time I have was learning have been seen a lot of success stories and I felt like I had to also share my journey. To do this I plan to be writing and posting an article in every two weeks covering what I have been learning and working on during this period. This article won’t just cover the stuff I build but the challenges I went through, how I overcame them and the experience I gained.

When I set out to be a full-stack web developer, I did some research before starting my classes and discovered it is divided into two categories:

Front-end web development - A front-end web developer is responsible for implementing visual elements that users see and interact with within a web application.
Back-end web development - They are responsible for server-side application logic and integration of the work front-end developers do.

To actualize my goal of becoming a full-stack web developer, I had to start by learning the front-end bit and becoming a front-end developer. Front-end development requires one to have a foundation in the following front-end skills:

HTML: Hypertext Markup Language; creates the content of a webpage.
CSS: Cascading Style Sheets; describes the style of a webpage.
JavaScript: A programming language used to describe a web page's behavior.
CodePen: An online code editor for HTML, CSS, and JavaScript where users can highlight their work and get it debugged.

It took me a week to learn practice and fully understand HTML. After that, I immediately started my CSS course where I spent a month and three weeks learning and practicing. I wanted to take time and care to learn and understand CSS properties and their uses. Using this approach made my learning process fun and enabled me to learn a lot of new things. So far, I have fully learned HTML and CSS and I’m currently learning JavaScript and I have built my portfolio as my first project.

Throughout my journey of learning, I have encountered some challenges, but the major challenges encountered have been balancing my schoolwork and my Bootcamp work and maintaining consistency in my learning process. I overcame these challenges by creating my schedule where I would have time allocated for attending to my schoolwork and sometimes allocated to learn in my Bootcamp course. At first, it was hard, but once I got used to it keeping to a schedule became easy. The biggest thing I have learned out of it is that the pain of disciple lasts for a short time and with proper utilization of my time I can achieve everything I have set my mind towards. I also started documenting my daily progress of learning JavaScript on Twitter to ensure that I’m consistent in my learning process and so far, I can proudly say I have been consistent in my learning and that it has had a lot of benefits. If you made it to the end of the post thank you for reading it through. And I look forward to sharing my journey as I go along.