Forem: Amarachi Johnson-Ubah

Productivity Hacks for Developers

Amarachi Johnson-Ubah — Sun, 14 Feb 2021 17:06:26 +0000

For some people, productivity as a developer means the number of codes you can write in minimal time, while for some, it is the number of quality codes you can churn out in the barest amount of time. Whichever definition you choose is great. This is how I define mine: Productivity is the ratio between the output churned out and the volume of inputs.

Being a productive developer has its perks which include: Job satisfaction, higher pay, work-life balance, and a happy-boss.

There are a thousand and one things fighting for your attention on a daily basis, and knowing where and when to respond to them and with which tools, would place one developer in front of the other on the productivity radar (If there is anything like that).

In this article, you’ll learn how to set goals, take charge of your day, and become a super-productive developer.

Why does it matter?

Humans are not machines and even machines pack up if not serviced. You can use up will-power and mental resources - and become a vegetable.

Productivity != being busy. You can be busy a whole day, doing things with very little significance.

Whether you’re a newbie, intermediate, or a very experienced developer, you need to be more productive to become better.

Companies love to have productive developers in their team with the ever teaming competition on their neck daily, they want someone who can deliver quality codes in less time.

So, the question is, with the distractions flying around vying for one’s attention, how can one be more productive as a developer?

Set Goals

Without clear goals to drive you forward, you won’t know if you’re making progress in the activities you consider most important.
Map out what you want to achieve within a particular time frame, and outline how you're set to achieve them. When making a goal, bear the following in mind:

Your goals should be Specific. Make a list of what you want to achieve and in simple and straightforward terms too.
Saying "I'd build a full Vue application this week" is vague compared to when you say "I'll build a todo-app using Vue this week"
This specificity will help you in breaking the task further down to daily goals, and hourly goals as the case may be.

Your goals should be measurable. If you can't measure your goals, then it'd be difficult to monitor progress or digress. Instead of saying "I'll become a better developer this year" ("better" is relative and can't be measured) say, I'll build 20 applications using Vue, NuxtJs, and GraphQl. This way, if you're able to build 10, you'd at least discover that you achieved a percentage of your goals.

Your goals should be attainable. Don't make goals you and your guts clearly know you can't achieve. You'll only be setting yourself up for disappointment and sap your motivation when you don't achieve them.

Your goals should be relevant.
The goal you pick should be pertinent to your field or should benefit you directly. It would be awkward for me to want to be the best actress in Nigeria in 2020 when I've not starred in a local drama concert for once.

Your goal should be time-bound. Adding a timing to your goals gives you a sense of urgency needed to wake you up to do something even on days you don't feel like it. Example #100daysofCode

Avoid Distractions

Distractions come in a number of ways, with social media being the all-time enemy of developers. As a developer, it is given that you spend a lot of time with your laptop, iPad, and phone. Notifications could pop up just the time you're about testing a feature with your phone🤦🏼 and this minute, you're deciding to check out this one notification, and in the next 1 hour, you're wondering what made you pick up the phone in the first place. Tragic!

These are a few things that have worked for me against social media distractions:

Putting a considerable distance between me and my phone. Keeping my phone a room or 2 away from me makes it difficult for me to reach for it, and aids in resisiting the impulse to check one message.
Turning off social media notification. All of them, except my email and Slack. This ensures that I do not get tempted to "check" a notification.
Calendar blocking. In my daily calendar, I have times designated for my daily activities including social media.
You may be wondering, so how can one be active on social media and be a good developer at the same time? This is your answer.
Those who you consider active on social media may be spending considerably lesser amount of time on social media than you do. They schedule posts and engage with people during their "social media times" and then log off while you spend 5 hours doom scrolling. Please don't.

Have a good project structure

Breaking down your project into chunks or sprints helps you set up systems to execute them in sprints.

Bring in Automations

Automate the small stuff. There are a few tasks that could be cleared off your table if you cease to do them manually. Eg, using schedulers for social media posts, labeling emails.

Sleep more

A lot of eyes would have had to stay open 24hours everyday, if there were nothing like sleep. A lot of developers still consider sleep a luxury or a phenomenon for the "weak".

According to the National Sleep Foundation, healthy adults need between 7 and 9 hours of sleep per night.

I inserted this fact to encourage you to sleep more. An unaccredited source also discovered that sometimes, it only takes few hours of sleep and a walk in the park to solve the bug that had kept you awake for days.

Don’t burn out

Burn out is a chronic state of exhaustation at which point you lose the will to do all the things that usually fascinate you. At this point, productivity would be alien to you, because it takes a vibrant mind to be productive.
Burn out is mostly caused by stress and can be prevented via regular exercise, social activities, taking both mental and physical breaks.

By all means, do not burn out.

Keep learning

The more you know, the more productive you become. Take new courses, try new methods of achieving a thing, be a lifelong learner. Make it a habit to learn something new each day.

Read books

Reading can be both relaxing, educating, and entertaining (Depends on what you're reading).
If you're looking to learn, relax or simply entertain yourself, a good book could bring that along with good vibes for maximum productivity.

We've been able to go through 8 ways of becoming more productive as a developer. Which ones will you be practicing first?

I hope you found these tips useful. If so, follow me on Twitter.

This is an excerpt of my talk at the VueJs Nigeria Meetup.

A Beginners Guide to Web Accessibility

Amarachi Johnson-Ubah — Fri, 04 Sep 2020 20:41:30 +0000

Making the web accessible is essential for everyone, including developers and organizations because, it means that everyone can use the products and services you create.

What is Web Accessibility?

Web accessibility simply means building websites, tools and technologies in such a way that people with disabilities can use them.
The web is designed to work for everyone, irrespective of their hardware, language, ability or location and when this goal is met we can say that accessibility has been achieved.
However, when websites or applications, technologies or tools are built such that there is a barrier that exclude some people from using it, we can say such product failed accessibility test.

Few weeks ago, twitter launched a voice tweet feature , which was met with a lot of complaints pertaining accessibility (Those with hearing impairments can't use this features and twitter created no other means for them join in the audio conversations)

// Detect dark theme var iframe = document.getElementById('tweet-1273306969953222660-897'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1273306969953222660&theme=dark" }

Twitter has however apologised for its slack in accessibility and as we hope they come back with a more accessible feature, it's good to understand how important this is.
Accessibility should be considered even while building, and not as an after thought.

Considerations for Accessibility

While building, here are some disabilities accessibility encompasses which should be taken note of

Neurological: People who have been affected by a brain injury that can begin during the development process
Cognitive: People with limitations in mental functioning in skills such as communicating, taking care of themselves-, and social skill. There may be some things they cannot learn.
Visual: Blind people, color blind or people with partial vision loss.
Speech: People who are mute, have communication disorder or whose normal speech is disrupted (stuttering, lisps etc)
Auditory: People with hearing impairments, deaf or partially deaf.

Web accessibility also benefits people without disabilities, for example

People using mobile phones
People with temporary disabilities, such as broken glasses
People with slow internet connections

Why is Web Accessibility Important?

Web accessibility is important as the web and internet have become important parts of our lives. Making sure the web is accessible allows people with disabilities to be able to have equal access to the important services/features the web provides, such as education, online shopping, recreation, health services and others.
Web accessibility ensures that everyone is carried along in trends, innovations and no one is left behind.

Simple Ways of Making the Web Accessible

Use Alt Tags

<img src="./images/img1" alt="description of image">

An alt tag is used on images to allow a description of the image to be output if the image can’t be displayed/seen. Making sure this alt-tag is as descriptive as possible will help screen readers to relay the information you are trying to portray.

Keyboard ShortCuts

Some users do not have access to a mouse or are unable to use a mouse.
What this means is that the only way they can get around your website is by using keyboard shortcut, hence it is important to enable them to do so.

Title Tags

<title>A Beginners Guide to Accessibility<title/>

Making sure you have a short yet descriptive title tag on all pages will allow visitors to know what the page is about which is especially helpful for people using a screen reader.

Test your websites on mobile devices

A lot of people access websites on their phones rather than a PC. So it is important to build websites that are user friendly across both PCs and phones. To ensure a website is user friendly, you have to test it across multiple devices.

Provide Captions for Videos

This is helpful for those who do not have access to audio. They can understand the videos through the texts provided.

Conclusion

We just looked at what accessibility is and how to implement it basically.
Remember to always consider accessibility during you design process and not as an afterthought.

Other Relevant Materials on Accessibility

Web Accessibility Initiative

WebAIM’s Introduction to Web Accessibility

a11y stands for
ACCESSIBILITY

Enjoyed this article? Follow me on twitter

Building a Palindrome Checker using Split, Join and replace methods

Amarachi Johnson-Ubah — Thu, 13 Aug 2020 13:20:19 +0000

So, recently I embarked on building the projects on the FreeCodeCamp JavaScript course, and I've decided to write about the steps I took to build them out as I proceed.

So, first, I created a palindrome identifier- a function that can be able to figure out if a word is a palindrome irrespective of whether it has non-alphanumeric characters or spaces.

First, what is a palindrome?

Palindrome are words or sentences that spelled the same way both forward and backward, ignoring punctuation, case, and spacing, this means that the words are exactly the same even when they are turned upside down. For instance, the word eye looks the same even when turned both ways.

So, in the next few minutes, you'll be building along with me a function that returns true if a word is palindrome and false if it's not, ignoring spaces and non-alphanumeric characters.

Prerequisite

Before we proceed, you should have a knowledge of the following JavaScript methods:
split
replace
join
If you don't have an idea, take few minutes to read up this articles on split , reverse, replace and join methods.

Getting Started

Let's write our algorithm

Remove spaces and alphanumeric characters from the string and store in a variable
Reverse the string and also store in a variable.
Compare the string and the reversed string
Return true if they are same and false if they are not equal

Let write our code

First,we'll define our function. Our function will be taking a string str as argument

function palindrome(str){

}

Secondly, we have to eliminate spaces and alphanumeric characters from the string. We'll be using regex for this.
We'll also convert the word to lowercase. You can choose to change yours to uppercase
The aim of this is to keep all the alphabets on the same case to ease comparison.

function palindrome(str) {
let palindrom=str.replace(/[^0-9a-z]/gi, '').toLowerCase();

}

Having done this, let's create another variable reversed where we'll store the reversed string. (We'll be reversing the variable palindrom above)

function palindrome(str) {
let palindrom=str.replace(/[^0-9a-z]/gi, '').toLowerCase();
let reversed=palindrom.split("").reverse().join('');

}

Let's compare

function palindrome(str) {
let palindrom=str.replace(/[^0-9a-z]/gi, '').toLowerCase();
let reversed=palindrom.split("").reverse().join('');

if(reversed===palindrom){
    return true;
  }else return false;
}

palindrome(racecar)

Quite a short one, but yeah, we have a function here which can detect palindromes.

I'd love to entertain feedback from you. Thanks for reading.

CSS Selectors, Simplified

Amarachi Johnson-Ubah — Wed, 12 Aug 2020 20:52:55 +0000

When I started out with CSS, I always used the class and Id selectors and nothing else.
With time I learnt about some other ways of selecting items in CSS and I'll be sharing them with you with illustrations of how they work.

So, let's get to it.🎾

What are CSS selectors?

CSS selectors are a means through which we're able to identify, find or call up elements in HTML so we can style it.
The most common selectors are the name of element , class selectors(.) and id selectors (#) which are also referred to as simple selectors.

<html>
  <head>
     <style>
        body{
        background-color:#000;
        }
        .title{
         color:dodgerblue;
         }
        #wrapper{
        display:flex;
        justify-content: center;
        margin:0;
        padding:0;
    </style>
  </head>
       <body>
       <div id="wrapper">
       <div class="title">
       <p> This is the first text. </p>
       <p class="second-paragraph"> This is the second text. </p>
       </div>
       <p>This is the third paragraph</p>
       </div>
       </body>
</html>

In the example above, body, title class and wrapper id were used to refer to the div elements bearing them.
We can also combine these selectors if we want to:

p .second-paragraph{
color:red;
}

In the code above, a name and class selector were used to ensure that only the p element with a class second-paragraph will be selected.

There are other selectors as well, which are the main focus of this article.
Let's take a look at the *, >, ~, space, , and nth-of-type selectors, shall we?

The `*` Selector

This selector is called the universal Selector because it is used to select all the elements in a page. This means that any style given to the universal selector, affects every element in that very page.
The code snippet below will style every element of the page to have grey-colored and right-aligned texts.

*{
color:grey;
text-align:right;
}

The `>` Selector and The `~` Selector

This selectors are also known as combinators. Both are used to achieve different selection results.
While the > is used to select children of a particular element, the ~ selector is used to select all the siblings of a particular parent element.
An example to illustrate.

div > p{
color:blue
}

The code above is used to select all <p> elements that are the children of the div elements.

Now, look at this one

div~p{
color:red;
}
Here, every `<p>` element which is a sibling to a `div` element is styled red. In our previous example (the first code snippet), the paragraph which is on the same level and shares the same direct parent with any `<div>` will take up the red color.

The `Space` Selector

A lot of people confuse > selector and the space selector.
I'll try to clarify that.
The space selector is used to select every of a particular element which is inside another element.
For instance

div p{
color:green;
}

The code above will select all <p> tags which are inside the <div> element, even if other elements are in between them.
Now, the difference between this and the > selector is that the > is only used to select a particular element which is a direct descendant.

So if we have

div>p{
color:green;
}

Only <p> elements which are direct descendants of the <div> will be colored green.

The `,` Selector

This, also called the group selector is used to group classes or names with the same styles to avoid repetition of codes.
The code below,

h3{
color:blue;
text-align:center;
font-weight:100;
}
p{
color:blue;
text-align:center;
font-weight:100;
}
.mid-text{
color:blue;
text-align:center;
font-weight:100;
}

can be rewritten as

h3,p,.mid-text{
color:blue;
text-align:center;
font-weight:100;
}

The `nth-of-type` selector

This selector can be used to select the nth child of parents elements of a particular type. n can be a number or keyword.
Consider having the following codes:

<html>
       <head>
              <style>
                   div:nth-of-type(1){
                    color:red;
                    }
                    div:nth-of-type(2){
                    color:blue;
                    }
                    div:nth-of-type(3){
                    color:green;
                    }
              </style>
       </head>
       <body>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
             <div>
                 <p>This is the first paragraph</p>
             </div>
       </body>
</html>

Yes, feel free to reach out to me on twitter , and thanks for reading.

Positioning in CSS

Amarachi Johnson-Ubah — Tue, 11 Aug 2020 20:00:35 +0000

Hello there,
In this article, I'll be explaining CSS positioning and why we use them.

Here's a little twist. CSS positioning has been a difficult concept for me to grab, and that's why I'm writing about it while learning at the same time.

What are positions in CSS?

When placing elements on a web page or document, it is important to specify how they are displayed in relation to each other or their parent elements. Positions help you to set this.

Syntax

The syntax for CSS positioning is;
position: position-property

Types

There are 5 main positions in CSS, but for this article, we'll be looking at these 4;

Static
Relative
Absolute
Fixed

I'll be explaining them in the next few lines.

Static:

Every element has the static position by default. We can say an element with position static is an unpositioned element because it flows in the normal rendering sequence of the web page or document. It is easy to think the static position is the same as the relative position. Uhhmm, that could be true except that static elements don't obey the left, right, top and bottom rules.

Relative:

When a child element has the position:relative property, it takes up a position which is relative to its parent element.

In this example, we have a parent and a child element.

For the child element, we added this

.container-child{
position:relative;
}

This enables the child element to take up a position which considers the dimensions of the parent element.

In the pen below, we'll see the outcome of this

Try changing the position to absolute and notice what happens.

Also try changing the height of the child element to 50% and notice what happens as well.

Absolute:

If a child element is given the position:absolute property, it will behave like the parent element is not there, and will be positioned automatically to the starting point (top-left corner) of its parent element. If it doesn't have any parent elements, then the initial document <html> will be its parent.

Let's add a position:absolute property to a child element with class container-child

.container-child{
position:absolute;
}

In the code below, the child element will display in relation to the dimensions of the document <html>and not the dimension of its parent container.

Try adjusting other properties of the child element such as margin-left, margin-right and you'll discover that this element isn't adjusting in response to its parent's dimensions.

For this child element to respond relatively to the position of its parent, we need to set the parent to this;

.container{
position:relative;
}

And we'll have the following

Fixed

Fixed positioning restricts an element to a specific position in the viewport, which stays in place during scroll.

Let's add another element to our project, and this time, we'll be giving it a position of fixed.

.container2{
position:fixed;
}

Let's see how it looks

So you can see how the element with a fixed position stayed glued to its position even when the page is scrolled.

Try fixing up the child element with the class container-child to stay under the fixed element on scroll.

Conclusion

CSS position has always been a tricky topic for me, but overtime I'm beginning to get a hang of it through subsequent usage. So I'll advise you implement these positions often in order to find out for yourself, what they really do.

Yup! This is where we wrap it up. I'll subsequently edit this article when I implement the position property in other lights.

If you enjoyed this article, do connect with me on twitter 😍

Burnout is Real: How to deal with it

Amarachi Johnson-Ubah — Sun, 09 Aug 2020 19:53:22 +0000

In this article, I'll be addressing a very common problem among developers which a lot of people usually neglect, and which if left unchecked could result to devastating long term problems.

Let's look at Burnouts, how to know you're going through one and how to bounce back.

Introduction

Burnout is REAL! And Burnout !=Stress, but could be stress-induced.
Just in case you're hearing about burnouts for the first time, let's quickly see a definition.

Burnout is a serious state of chronic exhaustion that can have a whole range of negative impacts on your mind and body, and hence your entire life, including your ability to write code.

Burnouts can happen to anyone, and is usually less easy to detect in some than other people. However it is important for everyone to understand their symptoms in order to detect when your body is exhausted and needs hibernating.

Burnouts is what happens when you try to avoid being human for too long.

What Causes Burnouts?

Burnouts are basically caused by

Stress

When you've stressed up yourself mentally or physically up to the point of exhaustion and yet you don't pause to refill, more like driving on an empty tank, your engine will definitely get worn out or even clogged.

Negativity

When you consciously or unconsciously keep feeding your mind with negative thoughts or words, or allow the negativity of others really get to you, it grossly affects your mental state which can result to very unhealthy self esteem, inferiority syndrome, self hate and subsequently mental health problems.

Perfectionism

For each time you struggle to make things perfect, you procrastinate and feel dissatisfied with yourself which in turn causes a mental strain.

Work-Life Imbalance

When your work takes up most of your time and you struggle to find some time off for yourself, friends or family, you find yourself exhausted, tired and extremely stressed most of the time.

Lack of social life

Some techies have a not-so-admirable social life. This could make one a recluse, which means less fun time, which also means more stress.

How can you know you're having Burnouts?

You seem to lack motivation such that you mostly have to drag yourself to do the things you usually do with ease.
Irritability. Most times when we experience burnouts we seem to be more irritable, jumpy and easily angered.
Frequent headaches and changes in sleep patterns (insomnia may even set in)
Difficulty to concentrate.
Dissatisfaction even when a milestone is reached. You basically find no joy in doing the things that used to make you happy.
Lack of energy, zeal and enthusiasm.

There are other ways to discover when we're having burnouts, as everyone have different symptoms to show for it.

So, how can we deal with burnouts when it sets in?

Relax: Well... If you're having a burnout because of stress, the next best thing to do is to take some time off to cool off and relax (relas and be taken kiaroff😄) It will do you much good. Deadlines can wait, your mental health first ❤
Engage in more social activities: Make friends, have fun, get social, attend events, mingle with actual people, gist, let off some of those steams, hang out with friends, go see some movies or anything... This could help clear your head a bit.
Be more intentional about your life: Yes, obviously you're already very intentional about your career, but without maintaining a balance, your career can try to rob you of family/friends time.
Sometimes work-life balance can be impractical, and at such times, you've got to set up strategies to maintain harmony between both sides.
Be more strategic about timing. You can decide to block off some days/time as reserved for family, so you can have time for yourself too. If the pressure is coming from your workplace, try reaching out to management (if you're not management of course) to discuss better terms that could work which wont necessarily mean you throwing in your life.
Try to set goals for what must get done and what can wait.
Take social media breaks sometimes, especially if you feel mentally exhausted. Trust me, the world will remain as it were when you get back. Take some media break and rebound saner and better.
Sleep more: Techies are said to be nocturnal beings, however you have to sleep more especially when you're experiencing burnouts.
Travel (vacation): If you can, move, see places, change environment, forget about everything and just breath😌.
Exercise: Exercise is not something we do just to lose weight, we exercise to keep fit (mentally and physically). You don't need to register with a Gym center, there are several apps you could use to begin your exercise routines at home.

By now, you should have guessed if you're already having a burnout or not.
Well, if you are, that's not too bad, go back up and check out some of those tips again. You'll also find more helpful tips here

And if you're not having a burnout yet, awesome, let's look at some of the ways to avoid having burnouts in the first place.

How to Prevent Burnouts

You can prevent burnouts by doing everything listed above (under how to deal with burnouts). The difference would be that in your case, you're not doing them to bounce back, rather in order to maintain mental and physical fitness.

Almost everything will work again if you unplug it for a few minutes and plug it again, including you.

Conclusion

Thing is, we don't need to wait till our body screams to take a break or go on vacation and all that, this is something we all need to fit into our schedules and follow them as religiously as we take #100daysofcode. It's all a matter of intentionality and priority.

Thanks for reading my article and don't forget to take a break. Do follow me on twitter 🙌🏽

New Syntax Improvements in ES6

Amarachi Johnson-Ubah — Fri, 26 Jun 2020 18:39:25 +0000

Let and Const

Previously (in older versions of ES6), var was the only way to declare a variable, but let and const were added as an improvement.
I wrote this article in my early months of learning ES6 in order to understand hoisting and destructuring better and I never quite hit publish. Today, I hit the publish button. Hope it helps someone out there.

Let's get to it.

To understand why the improvemenes in ES6 was made, let us look at the following example:

function eatFood(willeat){
   if(willeat){
      var food = "Chicken and goat meat peppersoup";
   }else{
      var drink = "Hollandia Yoghurt";
   }
}

When you run

eatFood(false)

it will give the value
javascript
Undefined

This is because of what we call Hoisting.
Hoisting is as a result of the way the browser interprets JavaScript. This means that when the code is executed, the variables food and drink will be moved to the top of their scope leaving the assignments behind.

So what Let and Const helps us to do is that the variable scope are bound to their blocks and not the function scope. Also, the const keyword was introduced to JavaScript to allow immutable words. That is, variables declared as const cannot be modified once assigned.

Destructuring

Data from arrays and objects can be broken down into distinct elements. Destructuring helps you to extract specific elemetns you want to extract from a given array or object.

Consider the code snippets below:

const names = [Joe, Mary, Matt];

const [a, b, c] = names;

console.log(a, b, c);

prints: Joe Mary Matt

In the example above, [] shows the array being destructured and a,b,c represents the variables where you want to store the values extracted from the array.
You can see that we didn't have to specify the indexes for the names before they knew exactly were to apply.

Also, place values can be ignored when destructuring arrays.
For instance, you can have

const[a, , c] = names;

Objects can also be destructured. Consider the following example:

const name{
firstname:Mary,
middlename:Josephine,
lastname:Thomas
};

const {first, middle, last} = name;

console.log(first, middle, last);

This will print: Mary Josephine Thomas

In the example above {} represents the objects to be destructured and first, middle and last represent the variables where you want to store the property of the objects.

I hope this short article helped you find what you're looking for.

Setting up Your React Project on Windows.

Amarachi Johnson-Ubah — Sat, 09 May 2020 17:15:55 +0000

This article is for beginners who needs some help setting up their react projects or oldies who needs a reference article each time (I check out my notes each time for the setup guide I noted down for a long time)

Alright, quickly.
Open up your command prompt or bash.

Remember: you need to have node installed before you can continue.
Download node here.

Step 1:
CD into the parent directory you would want to house your react project.
In my own case, my documents



Step 2:
Run npm install.

Step 3:
use npm -v to check out the version of node in your system and to ensure your node package manager installed successfully.

Step 4:
Now its time to create our react app.

Use create-react-app -g myapp





-g installs the create-react-app globally so you don't have to run it each time you want to create an app inside that directory.

Myapp can be any name you want to give your project.

If your project was created successfully, you'd certainly see something similar to what I have here.

<img>

Step 5: 
You can also check out the version of your create-react-app

Step 6: 
Change directory into your app.

Step 7:
Run npm start to get your node running.

You've successfully compiled your first react project.

Congratulations🎉🎉🎉

Creating a Simple Form Using React

Amarachi Johnson-Ubah — Sat, 09 May 2020 17:14:32 +0000

Let us create a simple form using React. This is going to be a follow along and would be best if you work alongside the tutorial.

By now you should have set up your project using the create-react-app.

You can check out this article link to do that.

On our app.js insert the following code.

import React from 'react';
import Form from './Form';
import './App.css';


class App extends Components{
  render(){
    return(
      <Form />
    );
  };
}

export default App;

Now, let's go ahead and create the Form Component, which we've already added to the app.js.
This is where the bulk of our form is going to be created.

import React from 'react';
import Form from './Form';
import './App.css';

class Form extends React.Component {
  state ={
    firstName: '',
    lastName: '',
    username: '',
    email: '',
    password: ''
  }

  render(){
    return(
      <form>
        <input placeholder ='firstname' value = {this.state.firstName} />
      </form>
    );
  }
}


export default App;

Stat here is going to hold all the values (your first name, last name, username, email and password)

Then you go ahead and render the form.
The input value would be anything you want it to be and in this case, we want our first input to have the value of first name.

The input we have above can only accept values passed into it from the state. The user cannot be able to enter an input on the form.

So, we'll add an onChange function which we'll pass a parameter of whatever the user types.

Our input would be

        <input 
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.setState({firstName:e.target.value})}
        />

Do this for the next 4 fields and we'll have

      <form>
          <input 
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.setState({firstName:e.target.value})}
        />
          <input 
        placeholder ='lastname' 
        value = {this.state.lastName}
        onChange={e => this.setState({lastName:e.target.value})}
        />
          <input 
        placeholder ='username' 
        value = {this.state.username}
        onChange={e => this.setState({username:e.target.value})}
        />
          <input 
        placeholder ='email' 
        value = {this.state.email}
        onChange={e => this.setState({email:e.target.value})}
        />
          <input 
        placeholder ='email' 
        value = {this.state.email}
        onChange={e => this.setState({email:e.target.value})}
        />
      </form>

But there's a better way to do the onChange action, to make the code a bit DRY (Do not repeat yourself).
We can go ahead and write our own change function.

  change =e => {
    this.setState({
      [e.target.name]: e.target.value
    });
  };

Our input now looks like this

          <input 
    name = 'firstName'
        placeholder ='firstname' 
        value = {this.state.firstName}
        onChange={e => this.change(e)}
        />

The change function grabs what the name value is in the input and passes it down to the onChange function.

Do this across all other inputs.

Let's create a button now for submitting the fields.

<button onClick={() => this.onSubmit()}>
Submit
</button>

The button uses the onClick method to listen for a click event after which it executes the function onSubmit

Let's write our onSubmit function

  onSubmit = () => { 
      console.log(this.state);
  }

Here, we are only logging our state to the console (our values)
But also notice how the values also displayed in the address bar.

You can prevent that by passing the event parameter e into your functions and the button.

Then, set the parameter e to prevent default e.preventDefault(); to your code.

Now, your inputs can conveniently display on the console.

You can view the full work here: github

A Techie's Baby Step Guide to Taking the Stage

Amarachi Johnson-Ubah — Sat, 18 Apr 2020 13:32:35 +0000

Have you listened to @unicodeveloper, @aniediudo @kentckodds speak at events?

How do you feel afterwards? Probably you do wish to speak the way they do? Hold your audience captivated, in awe, attentive while laughing and giddy at the same time. You want to be able to own your stage and pass on your message without feeling intimidated, just the way they do.

Having attended a couple of tech events and seeing a pattern repeat, again and again, I decided to put together this crash article of things you should know before taking the stage to deliver a speech at any tech events. I'm not promising it will rid you of the stage frights and the shiver that envelopes you and threatens to make you drop your mic, But I'm pretty sure it'll help.

Now, in case you're wondering why I've chosen this topic especially at this time, May I remind you that a lot of tech events which were laid off due to the pandemic will be happening as soon as the pandemic and lockdown is behind us.
Various communities will be holding tech events and I believe you've equipped yourself so much and have probably designed your slides and contexts ready for submission at the sound of ready...go!

But hold on a little moment.

You've probably been at events where the speaker can't seem to hold the crowd together, constantly fiddling with his/her buttons and sometimes staring at the screen in order not to behold the searching and judging eyes of the crowd. You sit there bored and tired, waiting earnestly for the session to be over with. Well, it could be you up there.

We are always amazing speakers when we are talking to ourselves in our closets or with friends, and that I've realized is one of the problems. You feel you've known enough, you know how to code and hence everybody must sit and listen, no matter how boring.

In fact, you do not even know you were that boring especially when you get tagged in a few tweets quoting a few things you said. Not to burst your bubble, but that's not feedback.

The word "taking the stage" means having control over the entire audience and not a few people seating in front as I've noticed with some people who speak in such low tone that people seated at the second row can hardly hear them. Not that this is your fault entirely, but it will be okay to genuinely ask someone about how you did. Demand the person to really tell you the truth so you can take pride in the things you did right and try making amends for the ones poorly done.

As a developer who really wants to share knowledge, you need to learn the art of public speaking, even if not professionally, but enough to capture your audience's moods, keeping them glued and informed throughout your speech and until your message is totally passed. Remember communication is not complete until it has been received from the sender. Hence, when delivering a speech you need to be sure that the audience are grasping your message if they aren't then I'm sorry, your communication wasn't effective.

Here are a few things you should do before and during your speech:
1.. Prepare: No matter how conversant you are with your subject topic and the number of times you have spoken in the past, it is still vital that you take your time to prepare for your speech. Some of the things you should consider while preparing:

a. Know your audience: You should be able to ascertain the type of audience you'd be engaging with. If the are males only, females only, beginners, intermediates, experts or a mixture of all the above. Knowing this will not only help you know the tone of your conversation but will also be helpful in determining your content.

b. Be conversant with your slides: Now, I've been at events where the speakers totally back the audience in order to read from their slides. The worst is when there are technical difficulties and the slides delayed for a few minutes before coming up, then you see the speaker lacking for words to hold the crowd while the issues are resolved.
It is important you make out time to study your presentation before the D-day to avoid the lapses that may result from not doing so. There's never any of your favorite speakers who doesn't take his/her time to study, and you have to do so as well.
Also, send in your slides early.

c. Rehearse: Rehearse your presentation, especially if it is your first time delivering a particular speech. An efficient way to present would be present in front of a mirror, but I usually choose to present to a real live person, get feedback and make corrections. Better to fail privately than in a room full of people.

d. Prepare: If you'd be live coding, ensure you installed all software and extensions you'd be needing in the system you'd be presenting with. Test your codes alone and ensure they're working fine before the D-day. Double-check a few hours to the d-day to avoid using the words "Coding will embarrass you" at the end of your speech.

2.. Think conversion, not presentation or demo: You have to get the fact that you are standing on the stage to communicate with the audience in a conversational way. Remember, communication is never complete until the receiving end properly receipts the information being communicated. Having a conversation with the crowd puts you ill at ease, reduces the jitters and improves communication.

3.. Be empathetic about your speech: You must have heard these lines "Effective communication is 20% what you know, and 80% how you feel about what you know." Your audience are more likely to feel captivated by your speech if your speech comes as an extension of your feeling rather than just words without expression.

4.. Hook your audience early: People's attention span is reducing terribly and if you're not able to hold their attention in the first few minutes, the hall might erupt into a state of frenzy with people staring at their phones and PCs all through your speech (Techies and gadgets thing). Hence, it is important you make them interested in the subject you'd be talking about. Remember, they came to hear you, but you have to show them why. Try using the following to hook their attention:\\

a. A story

b. An example

c. A strong statement that makes people think, “tell me more.”

d. Ask a question

e. A visual metaphor

f. Get straight to the point and jump right into the issue.

Have you ever spoken at a tech event in the past? Do share your favorite speaking hacks!

Steps to Becoming a Front End Developer

Amarachi Johnson-Ubah — Sat, 01 Feb 2020 20:13:00 +0000

A front end web developer as we know it (or maybe don't) is someone who uses HTML, CSS and JavaScript for a website or Web Application so that a user can see and interact with them directly.

But is that all there is to know? How can you become a better front-end developer? Let's dig in.

Learn HTML & CSS And become good at it.

I guess there’s no way around it. Learn HTML & CSS. Why? Because the basics matter.

HTML allows you to add content to a website while splitting it into headings, paragraphs, and tables. CSS lets a decent developer style the content and change things like colors, sizes, and borders.

There are different online courses available on how to get started with HTML and CSS.
You can sign up at Online courses like

Coursera
Team Treehouse.
Codecademy
FreeCodeCamp
Udacity
Udemy

And while there are so many free resources out there, also try to invest in your learning by purchasing premium learning content and getting some certifications.
After finishing some initial courses, go ahead and create some static web pages and iterate over and over again.

Build things

Now that you've gotten the basics, it's time to create real stuff, to strengthen your tender hands.
You can start by creating a simple landing page or website. Don’t forget to challenge yourself by building first responsive elements.
You can sign up with platforms like

Codewars
WesBos (JavaScript30)

to get daily or weekly tasks to build to practice what you've learnt.
So there’s only one way to becoming better at what you’re doing: Keep learning, keep building.

Putting these two together, build to learn! There’s no better way to learn than to get your hands dirty.

Read

Believe it or not. Your reading skills greatly influence your path to becoming a great front-end developer. As a beginner, you'd have to do a lot of reading. Why?
At first you’ll probably read a lot of articles, guides and manuals on how to do different things. You’ll also start reading other people’s code.
Some good books and blogs I recommend

Eloquent JavaScript
You don't know JS
CSS tricks (blog).
Free Code Camp (blog)
Code burst (blog)
Hashnode
Dev.to
Frontend masters

There’s more to front-end development than building a website

Knowing how to build a website isn't all there is to being a front end web developer. Knowing how to build a website is a very small part of the front-end puzzle.

There is a whole load of topics that you still should learn about. If we consider performance, testing, Project management, QA and many other areas, then you really need to become a deep diver as a front-end developer.

Know some other tools

Learning about the different tooling options is an important thing. Great tools will help you enhance and automate your front-end development workflow.
One of those tools will definitely be the Chrome developer tools. Why? Because you can play with HTML, CSS and JavaScript in real-time and this will give you immediate feedback you need to learn quickly.
Additionally, node, npm, bower and many more excellent tools are there to facilitate your daily work. And don’t forget about versioning. 😉

Learn Version Control

Version control will save you some sleepless nights.
With git you are always assured of having your work intact without fear of system failure or theft.
You'd also be able to collaborate with people on a project in real time.
So make sure to become an expert at Git - or at least, be git-friendly😉

It won't hurt to learn how to use a collaboration tool

Collaborations will come in handy especially hen you're working on large products or as part of a team.
Some collaboration tools I recommend

Trello
Pivotal Tracker

Do not rush.

Along the way, you will ask yourself why you do this and you may want to just stop. It may be tempting to just give up. But don’t. If you’re at that point, I have only one piece of advice for you:

Do. not. give. up.

Code Everyday

This is more like a command than a statement.

Set aside one or two hours every other day to learn. Take a lot of breaks and make sure that you really know the basics. And never rush.

Ask questions

Whenever you feel stuck, you'd definitely do, don’t be afraid to ask questions. Everyone goes through this phase.
Here's a tweet by a popular tech pro and evangelist

// Detect dark theme var iframe = document.getElementById('tweet-1171820499661402112-563'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1171820499661402112&theme=dark" }

It happens to the best of us.
You just have to stick to it knowing that you'd get better with time.

Dive deep into frameworks

Now you've acquainted yourself with some front end technology, it's time to delve into any of the frameworks in front end web development.
We have

React
Vue
Angular
Next

Knowing which framework to delve into is totally dependent on you and you convictions.

Get involved with open source projects

Getting involved with various projects, especially open source, will not only make you a better front-end developer, but it will also help you build up your very own online brand as an active, experienced developer.

Check out madeinnigeria.devfor some Nigerian Open Source Projects you can contribute to. Thanks @acekyd for putting that together.

Tech twitter can be your friend 😂

Well, this one might seem a little bit weird, but tech twitter has helped me a lot in my journey as a front end web developer.

Check out this tweet by @hacksultan, under the thread you'd see some amazing tech persons in front end you can follow and continuously learn from.

// Detect dark theme var iframe = document.getElementById('tweet-1143186098820194304-578'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1143186098820194304&theme=dark" }

In summary,
Being a front end web developer isn't just about the building of websites and learning of frameworks, it also involves the roles and interaction as a front end web developer.

Because the web is a rapidly evolving universe, great front-end developers should never stop learning. Even little things like following front-end experts on twitter will have an impact on your learning curve.

You need to have some patience to get there.
The path to becoming a front-end developer will definitely take some time.
And lastly, please try to have fun while learning and experimenting.

All the best🤩

Did you find this article useful? Please share!

Forem: Amarachi Johnson-Ubah

Productivity Hacks for Developers

Why does it matter?

Set Goals

Avoid Distractions

Have a good project structure

Bring in Automations

Sleep more

Don’t burn out

Keep learning

Read books

A Beginners Guide to Web Accessibility

What is Web Accessibility?

Considerations for Accessibility

Why is Web Accessibility Important?

Simple Ways of Making the Web Accessible

Use Alt Tags

Keyboard ShortCuts

Title Tags

Test your websites on mobile devices

Provide Captions for Videos

Conclusion

Other Relevant Materials on Accessibility

Building a Palindrome Checker using Split, Join and replace methods

First, what is a palindrome?

Prerequisite

Getting Started

Let write our code

CSS Selectors, Simplified

What are CSS selectors?

The * Selector

The > Selector and The ~ Selector

The Space Selector

The , Selector

The nth-of-type selector

Positioning in CSS

What are positions in CSS?

Syntax

Types

Static:

Relative:

Absolute:

Fixed

Conclusion

Burnout is Real: How to deal with it

Introduction

What Causes Burnouts?

Stress

Negativity

Perfectionism

Work-Life Imbalance

Lack of social life

How can you know you're having Burnouts?

So, how can we deal with burnouts when it sets in?

How to Prevent Burnouts

Conclusion

New Syntax Improvements in ES6

Let and Const

Destructuring

Setting up Your React Project on Windows.

Creating a Simple Form Using React

A Techie's Baby Step Guide to Taking the Stage

Steps to Becoming a Front End Developer

Learn HTML & CSS And become good at it.

Build things

Read

There’s more to front-end development than building a website

Know some other tools

Learn Version Control

It won't hurt to learn how to use a collaboration tool

Do not rush.

Code Everyday

Ask questions

Dive deep into frameworks

Get involved with open source projects

Tech twitter can be your friend 😂

The `*` Selector

The `>` Selector and The `~` Selector

The `Space` Selector

The `,` Selector

The `nth-of-type` selector