Forem: Oghenero Adaware

Hooks Introduced in React-Router v5.1

Oghenero Adaware — Fri, 27 Sep 2019 08:04:29 +0000

I am always excited when there is a new release of any of my favourite libraries/frameworks/languages, At about 6 pm yesterday while scrolling through twitter I saw that a new version of react-router was released so I went to look it up and the react-router team added some really nice new API's and functionality.
The react-router team added to the ongoing React hooks buzz by releasing some hooks API in its version 5.1 with the release of the useParams, useLocation, useHistory and useRouteMatch hooks. These hooks give us new ways to manage the router's state. Apart from the hooks added to the v5.1 there is now support for forwardRef in the <Link>and they reintroduced the ability to pass functions in the to prop of the <Link> and <NavLink>.

I will be walking through how those hooks work and how do they change the way we write our routes.

useParams

This hook gives us access to the params of that particular route. params are parameters whose values are set dynamically in a URL. Usually, the way we access the params in previous versions of react-router was through the match props passed to the component.

// <= V5.0

import { BrowserRouter as Router, Route, Switch, Link } from "react-router-dom";

const Portfolio = props => {
    const { match } = props;

    let {id} = match.params;
    return (
        <div>
            Portfolio component
            <p>Url params: {id}</p>
        </div>
    );
};

function App() {
    return (
        <div className="App">
            <Router>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>
                    <li>
                        <Link to="/contact">Contact</Link>
                    </li>
                    <li>
                        <Link to="/portfolio/6">Portfolio</Link>
                    </li>
                </ul>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route path="/portfolio/:id" component={Portfolio} />
                    <Route path="/contact" component={Contact} />
                </Switch>
            </Router>
        </div>
    );
}

Above is the approach we use to access the URL params in previous versions of react-router. But with the introduction of useParams hook, all users can get access to the params from the hook.

// > V5.1
import { useParams} from "react-router";
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

const Portfolio = () => {
    let { id } = useParams();
    return (
        <div>
            Portfolio component
            <p>Topic: {id}</p>
        </div>
    );
};

useLocation

This is another hook released in v5.1, if you use react-router a lot I assume that you have used the location object before either to get the pathname property or the state property. I usually pass state through the react-router Link so I think I will be refactoring my components to use the useLocation hook, this will probably be my first react hook in production 👀(I know I am late to the party).

Note: Passing state through react-router's <Link> isn't a new feature, it has been there since I started using React.

// > V5.1
import { useLocation} from "react-router";

const Settings = () => {
    let location = useLocation();
    console.log(location);
    return <div>settings component</div>;
};

function App() {
    return (
        <div className="App">
            <Router>
                <ul>
                    <li>
                        <Link to="/">Home</Link>
                    </li>

                    <li>
                        <Link
                            to={{
                                pathname: "/settings",
                                state: {
                                    fromNavBar: true
                                }
                            }}
                        >
                            Settings
                        </Link>
                    </li>
                </ul>
                <Switch>
                    <Route exact path="/" component={Home} />
                                       //
                    <Route path="/settings" component={Settings} />
                </Switch>
            </Router>
        </div>
    );
}

// console
// {
//   "pathname": "/settings",
//   "state": {
//     "fromNavBar": true
//   },
//   "search": "",
//   "hash": "",
//   "key": "x8vmq3"
// }

The useLocation hook returns the location object which contains the pathname, search, hash, key and the state properties of the current location.

useHistory

The useHistory gives us access to the history object which helps us programmatically navigate or change routes.

// > V5.1
import { useHistory } from "react-router-dom";

export const Profile = () => {
    let history = useHistory();
    return (
        <div>
            <button onClick={() => history.goBack()}>Back</button>
            <button onClick={() => history.push("/")}>Home</button>
            <section>
                <p>profile page</p>
            </section>
        </div>
    );
};

The history object also returns the location object as one of its properties but it is advised to not to use the location returned by it because history is mutable, so use the useLocation hook for that.

useRouteMatch

This is the final hook added to this release, useRouteMatch gives you access to the match property without rendering a <Route> component. It matches the URL just like a Route would and it accepts an exact, strict, path and sensitive options just like a <Route>. Before V5.1 the ways to access the match object are through:

Route component as this.props.match
Route render as ({ match }) => ()
Route children as ({ match }) => ()
withRouter as this.props.match
matchPath as the return value

// <= V5.0
function App() {
    return (
        <div className="App">
            <Router>
                <Route
                    path="'/Movies/:id/'"
                    strict
                    sensitive
                    render={({ match }) => {
                        return match && <Movies match={match} />;
                    }}
                />
            </Router>
        </div>
    );
}

// > V5.1
import { useRouteMatch } from "react-router";

function App() {
    let match = useRouteMatch({
        path: "/Movies/:id/",
        strict: true,
        sensitive: true
    });

    return (
        <div>
            {match && <Movies match={match} />}
        </div>
    );
}

useRouteMatch gives us a new way to access the match object and if you have an <Route> that is not inside a Switch it makes sense to use useRouteMatch. I mean it is hooks szn!!!

Conclusion

I really love these hooks added to the react-router API, they give us the ability to compose router state which opens new possibilities in term of building application. Excited to see what other new features and APIs are introduced in future releases also the react-router team is hoping to release version 6 early next year.

Using WebSockets in React

Oghenero Adaware — Mon, 19 Aug 2019 17:55:24 +0000

Recently I had to consume a WebSocket API in a React application I was working on, So in this article, I will briefly explain how to use it in a React Application.

What is Websocket

According to MDN, The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply, Simply WebSocket helps you maintain two-way communication between the client(in my case React app) and the Server.

Why did I need WebSocket

I worked on a project that required me sending a ping to the server every 30 seconds to tell the server that the application was still online and also keep track of a user that is logged on to the application and the duration they have been online. I don't want to go into too many details about that but I needed to constantly "communicate" with the server and using REST API's for that would have been inefficient.

Basic Setup for React

Usually, I try to use only one instance of WebSocket high up my component tree then pass it down to other components that need to use the WebSocket instance to either listen or send messages to the server; this is assuming that you listening to a particular WebSocket instance in your child components.

class Main extends Component {
    ......

    // instance of websocket connection as a class property
    ws = new WebSocket('ws://localhost:3000/ws')

    componentDidMount() {
        this.ws.onopen = () => {
        // on connecting, do nothing but log it to the console
        console.log('connected')
        }

        this.ws.onmessage = evt => {
        // listen to data sent from the websocket server
        const message = JSON.parse(evt.data)
        this.setState({dataFromServer: message})
        console.log(message)
        }

        this.ws.onclose = () => {
        console.log('disconnected')
        // automatically try to reconnect on connection loss

        }

    }

    render(){
        <ChildComponent websocket={this.ws} />
    }
}

In the snippet above I called it Main component because I assumed it should be like a parent to the child components that need to use the WebSocket instance. First of all, we create a new instance of the WebSocket as a class property ws. Then in the componentDidMount method we can subscribe and listen to some events provided to us by WebSocket.

onopen : The onopen event listener is called when the WebSocket connection is established.
onmessage: The onmessage event is sent when data is received from the server.
onclose : The onclose listener is called when the WebSocket connection is closed.

So all these are set up in the componentDidMount because we want these event listeners available when the component is rendered in the DOM. Also, we can pass the instance of the WebSocket as props to the child component as we did in the <ChildComponent/> so we could listen to any event on that WebSocket instance without having to create a new instance in every component we need to use that WebSocket in.

But there is a problem with this setup, once there is an error or the WebSocket connection closes for some reason i.e server is down or network issues e.t.c The connection won't be reestablished until you the componentDidMount is called again maybe through a refresh of that page. And I don't think this is what we want.

Advanced Setup

This setup was adapted from two StackOverflow answers, How to reconnect to WebSocket after close connection and WebSocket: How to automatically reconnect after it dies.

class Main extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ws: null
        };
    }

    // single websocket instance for the own application and constantly trying to reconnect.

    componentDidMount() {
        this.connect();
    }

    timeout = 250; // Initial timeout duration as a class variable

    /**
     * @function connect
     * This function establishes the connect with the websocket and also ensures constant reconnection if connection closes
     */
    connect = () => {
        var ws = new WebSocket("ws://localhost:3000/ws");
        let that = this; // cache the this
        var connectInterval;

        // websocket onopen event listener
        ws.onopen = () => {
            console.log("connected websocket main component");

            this.setState({ ws: ws });

            that.timeout = 250; // reset timer to 250 on open of websocket connection 
            clearTimeout(connectInterval); // clear Interval on on open of websocket connection
        };

        // websocket onclose event listener
        ws.onclose = e => {
            console.log(
                `Socket is closed. Reconnect will be attempted in ${Math.min(
                    10000 / 1000,
                    (that.timeout + that.timeout) / 1000
                )} second.`,
                e.reason
            );

            that.timeout = that.timeout + that.timeout; //increment retry interval
            connectInterval = setTimeout(this.check, Math.min(10000, that.timeout)); //call check function after timeout
        };

        // websocket onerror event listener
        ws.onerror = err => {
            console.error(
                "Socket encountered error: ",
                err.message,
                "Closing socket"
            );

            ws.close();
        };
    };

    /**
     * utilited by the @function connect to check if the connection is close, if so attempts to reconnect
     */
    check = () => {
        const { ws } = this.state;
        if (!ws || ws.readyState == WebSocket.CLOSED) this.connect(); //check if websocket instance is closed, if so call `connect` function.
    };

    render() {
        return <ChildComponent websocket={this.state.ws} />;
    }
}

The advanced setup above simply ensures the WebSocket is always trying to connect if the server goes down or if there is network failure, so whenever the server is back up the client is reconnected.

I will run through what this setup does, the connect method is called to initiate the WebSocket connection in the componentDidMount. A class property called timeout is declared and set to 250ms then we have two functions connect and check I will go into details about what these functions do.

check - This function is used to check if there is no WebSocket instance or the WebSocket connection is closed, if so the connect function is called.
connect - This function is basically managing the WebSocket connection, here we listen to the onopen, onclose and onerror events. In the onopen listener, the websocket instance is added to the state so it could be passed as props to child components that want to listen to it. Then the timeout variable is set back 250ms and the setInterval is cleared.

In the onclose listener the timeout value is increased and the check function is called in a setTimeout with the incremented timeout value, once the timeout value becomes greater than 10000ms(10 seconds) it stops incrementing. I did this to prevent aggressive attempts to reconnect to the server, instead it delays for a given period before it tries to reconnect.

There are libraries that help you achieve this like ReconnectingWebSocket but this library and my setup don't implement the Exponential Backoff algorithm which helps manage server flood when a lot of clients are trying to reconnect to the server. A library called @gamestdio/websocket implements the Exponential Backoff, so you could use it if you are dealing with a large number of client applications.

Sending a message with the WebSocket

There is gotcha in this advanced setup being that when the WebSocket connection is closed onclose listener the WebSocket instance is might be set to null for some moments, the reason for this is to ensure we don't open a new WebSocket instance anytime the connection is closed and it opens again. The problem here is that if you try to send data to the server when the websocket instance is null it might break your application, so how do we solve this? The answer is to use try catch block anywhere you need to send data in your components.



class ChildComponent extends Component {

    sendMessage=()=>{
        const {websocket} = this.props // websocket instance passed as props to the child component.

        try {
            websocket.send(data) //send data to the server
        } catch (error) {
            console.log(error) // catch error
        }
    }
    render() {
        return (
            <div>
                ........
            </div>
        );
    }
}

export default ChildComponent;

Conclusion

I hope this tutorial helps you setup WebSockets in your react application because that was my motivation to write this post. I am new to using WebSockets on the client-side so if you think there is anything that could be done better make a comment.

Generating Pdf documents in React Using React-pdf

Oghenero Adaware — Mon, 22 Jul 2019 11:09:45 +0000

This post was originally published on my Blog, check it out for more contents.

Introduction

I was working on a project recently and I got a unique(for me) requirement that needed me to generate pdf file from an array of values in the Browser, usually in my little experience in software development Pdf files are generated in the backend using Puppeteer for node js and FPDF for PHP e.t.c. So I had to look for a React library that could work for my use case, lucky for me I found React-pdf. I found other libraries like @progress/kendo-react-pdf but I decided to go with React-pdf because of its developer-friendly documentation.
The library was built by Diego Muracciole and also maintained by him.
So in the tutorial/ blog post, I will try to explain briefly how react-pdf works and also walk you through how to generate PDf from an array of objects coming from the Moviedb Api.

Features

While going through the documentation when I was trying to pick the appropriate library for my use-case there were some features of React-pdf that convinced me to use it, I will briefly talk about them:

Components

React-Pdf uses React-Primitives spec to create custom components that you can use to create and structure your PDF documents.
These components include:

Document
Page
View
Image
Text
Link
Note
Canvas
PDFViewer
PDFDownloadLink
BlobProvider

You can checkout the docs for more details on what each component above does, Basically the components about help you create pdf using JSXesques syntax.

Styling

Now that we have an idea of how to create the PDF document how do we style it? React-pdf provides powerful styling solution using the StyleSheet API which helps you style your document using CSS, Media queries and Flexbox. Check the docs for the CSS properties they support.
What if you are a big fan of CSS-in-JS? well, they also support the entire styled-components API.

Fonts

React-Pdf has a Font API that helps you load fonts from different sources and use in your PDF document.

Those were some of the features that made me pick React-pdf. Also when I checked the Github Repository the maintainer Diego Muracciole is quite active and tries to respond to most issues opened.

Demo

So I will briefly work you through a simple example of generating pdf from the MoviesDB API. This demo is going to demonstrate generating the best movies of the year.

Folder Structure

project
│   package.json
│
│
└───Public
│   │   150.png
│   │   index.html
│   │   star.png
│
│
│
└───src
    │   Movie.jsx
    │   MovieList.jsx
    |   constant.js
    |   index.js
    |   styles.css

index.js(entry)

import React from "react";
import ReactDOM from "react-dom";
import MovieList from "./MovieList";

import "./styles.css";

function App() {
    return (
        <div className="App">
              <MovieList />
        </div>
    );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

The index.js is the entry point of the application. It renders the <MovieList/> which is the parent component of our application.

MovieList.jsx

import React, { useState } from "react";
import Axios from "axios";
import { PDFDownloadLink } from "@react-pdf/renderer";
import { API_KEY } from "./constants";
import { PdfDocument } from "./Movie";

const years = [
  { value: "2010", text: "2010" },
  { value: "2011", text: "2011" },
  { value: "2012", text: "2012" },
  { value: "2013", text: "2013" },
  { value: "2014", text: "2014" },
  { value: "2015", text: "2015" },
  { value: "2016", text: "2016" },
  { value: "2017", text: "2017" },
  { value: "2018", text: "2018" },
  { value: "2019", text: "2019" }
];

export default function MovieList() {
  const [year, setYear] = useState("");
  const [movieDetails, setDetails] = useState([]);
  const [show, setHide] = useState(false)

  const fetchMovie = async e => {
    setYear(e.target.value);
    try {
      let res = await Axios(
        `https://api.themoviedb.org/3/discover/movie?api_key=${API_KEY}&primary_release_year=${year}&sort_by=vote_average.desc`
      );
      setDetails(res.data.results);
      setHide(true)
    } catch (error) {
      console.log(error);
    }
  };

  return (
    <div className="container">
      <h2>Best movies of the year</h2>
      <label htmlFor="movies">Select Year</label>
      <select id="movies" className="select" onChange={fetchMovie}>
        <option defaultValue="" disabled>
          Select your option
        </option>
        {years.map((year, index) => {
          return (
            <option key={index} value={year.value}>
              {year.text}
            </option>
          );
        })}
      </select>
      {show &&<PDFDownloadLink
        document={<PdfDocument data={movieDetails} />}
        fileName="movielist.pdf"
        style={{
          textDecoration: "none",
          padding: "10px",
          color: "#4a4a4a",
          backgroundColor: "#f2f2f2",
          border: "1px solid #4a4a4a"
        }}
      >
        {({ blob, url, loading, error }) =>
          loading ? "Loading document..." : "Download Pdf"
        }
      </PDFDownloadLink>}
    </div>
  );
}

The MovieList.jsx component contains most of the logic in this application. we import PDFDownloadLink from @react-pdf/renderer, this is basically an anchor tag that enables us to generate and download PDF documents. PDFDownloadLink accepts a document props which are the PDF template we will be creating soon using some of the React-primitives listed early in this post. It also accepts a filename prop that can be used to define the filename of the PDF document, a style prop to add inline styling to the link tag, a className prop if you prefer using classes to style and children prop which is the anchor tag contents.

Movie.jsx

import React from "react";
import {
    Page,
    Text,
    View,
    Document,
    StyleSheet,
    Image
} from "@react-pdf/renderer";
import moment from "moment";

const POSTER_PATH = "https://image.tmdb.org/t/p/w154";

const styles = StyleSheet.create({
    page: {
        backgroundColor: "#ffffff"
    },
    section: {
        margin: 10,
        padding: 10,
        flexGrow: 1
    },
    movieContainer: {
        backgroundColor: "#f6f6f5",
        display: "flex",
        flexDirection: "row",
        padding: 5
    },
    movieDetails: {
        display: "flex",
        marginLeft: 5
    },
    movieTitle: {
        fontSize: 15,
        marginBottom: 10
    },
    movieOverview: {
        fontSize: 10
    },

    image: {
        height: 200,
        width: 150
    },
    subtitle: {
        display: "flex",
        justifyContent: "space-between",
        flexDirection: "row",
        width: 150,
        alignItems: "center",
        marginBottom: 12
    },
    vote: {
        display: "flex",
        flexDirection: "row"
    },
    rating: {
        height: 10,
        width: 10
    },
    vote_text: {
        fontSize: 10
    },
    vote_pop: {
        fontSize: 10,
        padding: 2,
        backgroundColor: "#61C74F",
        color: "#fff"
    },
    vote_pop_text: {
        fontSize: 10,
        marginLeft: 4
    },
    overviewContainer: {
        minHeight: 110
    },
    detailsFooter: {
        display: "flex",
        flexDirection: "row"
    },
    lang: {
        fontSize: 8,
        fontWeight: 700
    },
    vote_average: {
        fontSize: 8,
        marginLeft: 4,
        fontWeight: "bold"
    }
});

export function PdfDocument(props) {
    console.log("pdf props", props.data);
    return (
        <Document>
            <Page style={styles.page}>
                {props.data
                    ? props.data.map((a, index) => {
                            return (
                                <View key={index} style={styles.movieContainer}>
                                    <Image
                                        style={styles.image}
                                        source={
                                            a.poster_path !== null
                                                ? `${POSTER_PATH}${a.poster_path}`
                                                : "150.jpg"
                                        }
                                    />
                                    <View style={styles.movieDetails}>
                                        <Text style={styles.movieTitle}>{a.title}</Text>
                                        <View style={styles.subtitle}>
                                            <View style={styles.vote}>
                                                <Image source="star.png" style={styles.rating} />
                                                <Text style={styles.vote_text}>{a.vote_count}</Text>
                                            </View>
                                            <View style={styles.vote}>
                                                <Text style={styles.vote_pop}>{a.popularity}</Text>
                                                <Text style={styles.vote_pop_text}>Popularity</Text>
                                            </View>
                                        </View>
                                        <View style={styles.overviewContainer}>
                                            <Text style={styles.movieOverview}>{a.overview}</Text>
                                        </View>
                                        <View style={styles.detailsFooter}>
                                            <Text style={styles.lang}>
                                                Language: {a.original_language.toUpperCase()}
                                            </Text>
                                            <Text style={styles.vote_average}>
                                                Average Votes: {a.vote_average}
                                            </Text>
                                            <Text style={styles.vote_average}>
                                                Release Date:{" "}
                                                {moment(a.release_date, "YYYY-MM-DD").format(
                                                    " MMMM D Y"
                                                )}
                                            </Text>
                                        </View>
                    </View>
                    </View>
                );
                })
            : ""}
            </Page>
        </Document>
    );
}

This Movie.jsx component is the template of the PDF we are generating, Here we define how the structure of the PDF using React-primitives(VIEW, DOCUMENT) and also style. So I'd briefly talk about the some of React-pdf API's I used here.

StyleSheet.create() : It helps you define the styles you want to use in the document, It accepts an object containing all the CSS you want to use in the Document and it returns an object which you can apply to any of the PDF elements via the style prop.
Document : The PDFDownloadLink document prop accepts only a component of type Document so this must be the root of your components when creating the PDF template and accepts only child of type Page, The Document is simply a wrapper around your PDF template and it accepts some optional props
Page : This indicates a Page in the document and you can have multiple Pages in a document. It accepts some props to define the size of the page, orientation or if you want page wrapping wrap. props
View : I will like to compare this component to the HTML div, it helps you section or divide the document. props
Text : This component is used for displaying text on the document and applying styles to it. props
Image : This component is used for displaying images(network or local) on the document, these images could be PNG, JPG or base64.

Demo Application

Conclusion

Before I used this library I never thought it was possible to generate PDF on the client-side, Not only does react-pdf allow you do that but get to use JSXesque syntax to structure and design the PDF document. I know the demo is quite trivial but I think this library might be useful in some use cases.

How do you anxiety during Interviews?

Oghenero Adaware — Thu, 13 Jun 2019 11:14:24 +0000

I always have to deal with anxiety when I go for an on-site interview and this makes me struggle to give the best impression of myself also it makes it difficult for me to think clearly to provide solutions to "simple" coding exercises that I'd solve on a normal day.
So I want to know how you deal with anxiety in this situation.

How I was able to move past tutorials

Oghenero Adaware — Tue, 14 May 2019 13:06:32 +0000

As a person starting out learning software development you might get to a point where you keep on watching tutorial after tutorial, reading technical books hoping that one day you will know enough to get your first developer job. A lot of newbie programmers find themselves in the endless loop of watching tutorial videos and reading programming books, unfortunately, some of them give up because they never felt ready enough to build their own software(I almost gave up too).

In this article, I will share my struggle and how I have overcome them.

The Struggle

I started out learning to code in 2017 and after a few months, I noticed that I kept on watching different tutorials(Udemy courses and youtube) while reading some books but I never felt ready to start a project or create a simple side project without the guidance of a video tutorial or book. This made me wonder if I was ever going to be a programmer.

I continued in this tutorial hell for several months, watching tutorials and coding along hoping that one day I will be the developer. The reason I kept on watching tutorials was that I was afraid of leaving my comfort zone. Luckily I ran into an article about escaping the tutorial purgatory. This was a turning point for me because the writer described the exact situation I was currently in and also listed some things that helped.

What worked for me

After reading that article, I made up my mind to reduce the amount of time I spent watching tutorials and invest that time in building applications. But it wasn't easy to start building applications because it took me out of my comfort zone of being walked through building an application by a video tutorial or book. I also had to think of what to build because I could never build the next Facebook. I had ideas of simple applications to build but they all felt difficult and I didn't know where to start from.
So I decided to build a personal website, I spent the last 6-7 months before now learning Javascript and React so the obvious choice for me was to build with React, after a couple of research I found out about Gatsby(I wrote about Gatsby in my previous article) which is built on top of React.

The process of building my website was an eye-opener for me because I had to learn a somewhat new technology while trying to create something of value. It was a very intimidating process for me but it made me understand a bit of what software development is about.

Building my own application taught me somethings which have helped me so far in my career.

Reading error messages : This is one thing a lot of newbie developers overlook, initially when I faced an error message when coding I immediately go into panic mode looking through my code trying to figure out what broke it without paying attention to the error message and more often than not the error message is your biggest clue to figuring out what broke your code.
Google/ Asking the right question : I always felt I needed to get the answer/solution to my coding problems without searching google or StackOverflow, so I'd spend hours trying to figure it out on my own and get frustrated, when I could have easily done a google search or ask for help on StackOverflow/similar platforms. Also in order to a response to your question, you have to learn how to ask technical questions and Gordon Zhu provided a guide in his article How to be great at asking coding questions.
Problem Solving : I learnt how to breakdown my problem into pseudocode, I may not write down the pseudocode but I know the steps I need to convert to code so I can achieve a particular result.

When I was done I had a working website despite the fact that the design was terrible. In that process I was able to learn Gatsby, React and a CMS(content management system i.e Contentful)

After this, I was lucky enough to have a software developer friend who was working on a couple of freelance projects so he delegated some tasks to me which also helped me get my hands dirty and this also helps me grow my confidence(confidence is important). A couple of months and 10+ interviews later I was able to land my first developer job.

What could I have done differently

Code along while watching Tutorials: Initially, when I started watching tutorial videos I didn't code along, I just binge watched like it was Netflix or Lord of the Rings but soon enough I started coding along, googling any syntax/code I didn't really understand and building my own copy of the tutorial application. Also after watching a video tutorial I think it is a good idea to go a step further by adding a new feature to the tutorial application based on the knowledge you got from that tutorial or change/break something so you can get used to problem-solving, googling and debugging because these are some of the core things involved in software development.
Try building an application : This can be intimidating at first but this is the best way to hone your skills. Just pick the language/framework you are interested in, learn the basics and maybe watch a video tutorial then try to build something simple like a Todo application(yeah yeah not another todo app). Well if you are tired of build todo apps you can check out this list of awesome alternatives or you can build a CRUD(create, read, update, delete) application then progressively add new features like authentication, authorization e.t.c. Just build stuff, you will grow faster that way.
Try to get experience with production applications: I was lucky to have a friend Isah Ibrahim who gave me a chance to learn while working on freelance projects with him. If unfortunately, you don't have a friend like that then you can look for an open-source project that you could give you that experience. Lucky me I also found a React open source project called Coding Coach where we are building a platform where people can find mentors. This project helped me learn more about React because I worked with some really really good software developers. The project is currently in its Alpha release.
This is a very interesting open-source project for a javascript developer(React) and we are open to new contributors.

Finally, If you are still looking for your first developer job my advice to you is to start applying for junior/mid-level developer roles because there is no harm in trying and these interviews if conducted properly helps you identify the areas you need to improve and also skills that are needed by companies.

Redux Devtools: Actions Stack Trace

Oghenero Adaware — Tue, 23 Apr 2019 14:22:10 +0000

I recently watched on Youtube Mark Erikson's talk 'The State of Redux' in Reacthaton 2019. Apart from talking about the current state of redux(Yes!! Redux is not dead) he also spoke about a new feature added to the Redux developer tools. This is called the action stack trace, it helps you track where a particular Redux action was dispatched from. This feature is disabled by default when enabled a Trace tab is added to your Redux devtools and when you click on a particular action it shows you the stack trace of where that action was dispatched from.

I think this is a big addition to the Redux devtools because not long ago I had to deal with a bug where an action was dispatched in my application but I didn't know where or what dispatched that action.

The above image was gotten from Redux Devtools Extension Docs

To enable this feature set the trace option to true when you are setting up the redux devtools. Examples are below on are to enable this feature.

// Without middleware

//import { composeWithDevTools } from "redux-devtools-extension";
//import * as actionCreators from "./actions/index";

const composeEnhancers = composeWithDevTools({
  actionCreators,
  trace: true,
  traceLimit: 25,
})
const store = createStore(reducer, composeEnhancers())

// With thunk middleware 

//import { composeWithDevTools } from "redux-devtools-extension";

const composeEnhancers = composeWithDevTools({ 
    actionCreators, 
    trace: true, 
    traceLimit: 25 
}); 
const store = createStore(reducer, preloadedState, composeEnhancers(
    applyMiddleware(invariant(), thunk) 
));

// With redux-saga middleware 
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ &&

    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({ 
    trace: true, 
    traceLimit: 25 
}) || compose; 
const store = createStore( reducer, composeEnhancers(applyMiddleware(sagaMiddleware))

You can check out the docs for examples

I use create react app for most of my React application so I don't need any additional setup but if you setup your own application using webpack configuration you will need to set the devtool in your webpack config to source-map for development. This helps Redux devtools provide a mapping between the original code and the transformed source code.

Gatsby is Awesome

Oghenero Adaware — Mon, 15 Apr 2019 09:24:58 +0000

This article was originally published on my personal blog, you can check it out for more related posts.

What is Gatsby js?

Gatsby is simply a static site framework built on top of React. It is similar to other static site generators like Hugo, Jekkyl, Nextjs, Nuxtjs e.t.c. If you don't know what a static site generator is then it is a framework or library that generates the HTML, CSS and javascript files at build time. Gatsby is also excellent in building web applications because you get to enjoy the benefits of a static site like speed(blazing fast) and also be able to build dynamic websites.
Gatsby for web applications

What interested me in Gatsby

Less than Two years ago I started out my journey to learn how to code, after 6-8 months of learning Javascript and React, I felt I needed a portfolio/personal website where I could showcase my side projects and also show my ability to build a website, I first considered building it with React but it was overkill and I needed a backend in case I needed to start blogging, so I continued my search, looking at different developers personal sites trying to figure out which technology they used to build it and there was one that caught my eye(honestly I can't remember the dev's name/website...my bad) it was simple and at the bottom I saw "built with Jekkyl", After a google search that was when I first heard of a static site generator.
What is a static site generator? I asked myself, You know the rabbit hole of google searches you can get into as a developer looking for answers, I never really understood what static site generators were at that point but I ran into Gatsby and the best thing about it was that it was built on React so I had a chance to hone my React skills while learning a need technology and still try to figure out what static site generators are.

The documentation is one of the best amongst all the libraries and frameworks I have used, it provided a starter pack that really helped me understand how it worked and it gave me a working Gatsby application to build upon. That time I used the Gatsby-blog-starter built by Kyle Matthews(himself, I think).

That is the homepage of my first Gatsby portfolio/blog.

The design wasn't the best in the world but it was working. I learned a lot building the project, for the first time I used a CMS(content management system), it also gave me a basic understanding of Graphql while I was able to improve my understanding of React. I used styled-components for components for the styling and contentful as my CMS.

Rebuilding my portfolio site

When Gatsby v2 came out I decided to rebuild/redesign my portfolio, which was 2 months after I finished my portfolio site. I updated some API's that changed in v2, ditched styled-components for SCSS and contentful for markdown. I made it responsive but I could do much about the design because I was still terrible at designing.

Well, I started getting a lot of interviews for my first developer job so I didn't have time for work on my portfolio site. My terrible/not-so-terrible portfolio helped me a lot in my interviews(newbies in this coding journey, if you can try to build a portfolio, it doesn't have to be beautiful and it helps showcase your mini/side projects to prospective employers. And if you can use Gatsby because it is awesome) and I was lucky enough to get my first developer job in November 2018. Fast forward four months later I decided I should do a proper redesign of my portfolio because My design skills had improved a bit(still terrible though) and I had written a couple of blog posts that I wanted to publish. I made a Figma sketch of how I wanted it to like then I started building. While building with Gatsby I notice some of its strength that I did like to talk about.

Datasource(Source plugins)

Gatsby supports data from almost anywhere you can think of CMS(contentful, wordpress, netlify CMS), Markdown, Api's, local sources e.t.c. The only time Gatsby confused me was when I had to pick a data source for my blogs, I had multiple options available to me that I had to deal with decision fatigue, at the end of the day I just went with markdown because... I don't know I just had to make a choice. The best thing is that integrating a data source is as easy as npm install whatever-data-source or yarn add my-favorite-datasource and add the configuration to your gatsby-config.js. I used markdown so I added the gatsby-source-filesystem plugin because it is used to source data from your local file system(local computer). The gatsby-source-filesystem plugin can source files like images, markdown, JSON e.t.c. At this point, Gatsby is aware of the data but this raw data needs to be transformed into what can be used by the website. Gatsby again provides a seamless way of doing this through Transformer Plugins.

Transformer Plugins.

Yeah like transformers that change from a normal car to an Autobot that is like what transformer plugins do, transform raw data from source plugins to usable data by your website through Graphql queries. Since I was using markdown, all I had to do was npm install gatsby-transformer-remark or yarn add gatsby-transformer-remark and then add gatsby-transformer-remark to the array of plugins in the gatsby-config.js. Now all my blog posts are available via a graphql query.

Graphql

Most people I know that have used graphql know it's awesome. I haven't used graphql outside Gatsby but I love the fact that data is available on demand. Gatsby v2 also added the StaticQuery API to the normal graphql tag to help make graphql queries in Components.

Routing

Routing in Gatsby is built on top of Reach router but you don't need to add any configuration to use the router and define a route. Defining a route in Gatsby is as simple as creating name-of-route.js file in the page folder in your Gatsby application, so the name of that file is the route i.e blogs.js produces a /blogs route. In my application, I have five routes currently.

Plugins I used in my site.

Gatsby has a plugin for almost anything you need for your website. I call it WordPress for developers because it has a lot of plugins. apart from the source plugins(gatsby-source-filesystem) I used for sourcing my data I also used some other plugins created by Gatsby and the community.

@weknow/gatsby-remark-codepen: I added this plugin to my personal website so I could embed codepens in my markdown.
@weknow/gatsby-remark-twitter: I used this so I could embed tweets in my markdown.
gatsby-plugin-sass: Sass/Scss is like my go-to technology for my styling needs so this plugin enables me use Sass in my application.
gatsby-remark-prismjs: This plugin provides code/syntax highlighting in my markdown using Prismjs.
gatsby-plugin-offline: This plugin makes my website work offline when used alongside the gatsby-plugin-manifest plugin.
gatsby-plugin-robots-txt: This plugin helps in generating a robot.txt, which help with your SEO(Search engine optimization) by telling web engines/search engines which page to crawl.

These are some of the plugins I use for my site. This just shows you one of Gatsby's strengths, that is you are only a plugin away from almost any feature your want.

I know y'all are wondering what my new personal site looks like but it isn't as terrible as the first design(i think). you can check it out

Personal website

These are some of the reasons I love Gatsby and also it helped me learn React and Javascript.

What do you use to handle side effects in React-redux

Oghenero Adaware — Tue, 26 Mar 2019 12:22:08 +0000

I am about to start a project where I will be using react and redux, In previous applications I have built I used redux-saga to handle side effects like api calls e.t.c but the fact that redux-saga has so much boilerplate code I didn't really enjoy using it. I have used redux-thunk but not in production.

Please what other libraries do you use to handle side effects and why did you choose them over the available alternatives?

Accessible Emoji's

Oghenero Adaware — Wed, 20 Mar 2019 14:06:57 +0000

I recently published an article on building accessible forms and this is kind of a sequel, OK not a sequel but it is a post you might need if you want to build accessible applications.

So I was working on my portfolio site today and I needed to add an emoji to a paragraph, I thought of using font awesome icons but I didn't want to use them because I was going to add an extra dependency to my site so the obvious option for me was to use Unicode because it has the exact icon I needed.

A lot of other times I have used Unicode in my HTML I just dumped it in the markup without even thinking of the accessibility concerns.

I was about to repeat that today until I held myself back and said this doesn't look accessible, I made some research and it actually isn't.

First of all, the emoji is an image and there is nothing that indicates that it is in the above demo. So we have to use ARIA: img role attribute to identify the element as an image. Secondly, use the aria-label attribute to give the emoji an accessible name.

Remember it is important the internet and its contents remain accessible to everyone.

SCSS Cheatsheet

Oghenero Adaware — Mon, 11 Mar 2019 11:08:34 +0000

What is SCSS

SCSS simply means Sassy CSS. Sassy CSS is a CSS preprocessor that gives you access to use features that are not available in Vanilla(normal) CSS.
In this article I will list, explain and give Examples of some of those features.

Variables

In SCSS you can declare variables easily. To create a variable just add a $sign to the variable name and set them like a normal CSS property.

// Font-weight for a project

$font-light : 400
$font-thick: 500
$font-heavy: 600

.element{
    Font-weight: $font-light;
}

//color palette for a project to maintain consistency

$product-dark-blue: #324e85
$product-light-blue:#4c7396
$product-lighter-blue:#9bb7cf

.element{
    color: $product-dark-blue;
}

Nesting

SCSS allows you to nest CSS rules

// vanilla CSS

.container {
  Width: 100%;
  Color: grey;
  Background-color: green;
}
.container div {
  Border: 1px solid black;
}
.container div a {
  text-decoration: none;
  color: #f2f2f2;
}
.container div a::hover {
  color: #b2b2b2;
}

// SCSS

.container {
  width: 100%;
  color: grey;
  background-color: green;

  div {
    border: 1px solid black;

    a {
      text-decoration: none;
      color: #f2f2f2;
      &::hover {
        color: #b2b2b2;
      }
    }
  }
}

Sassy isn't It? SCSS helps you write cleaner and concise CSS.

Inheritance(Using `@extend` or `@mixin`)

@extend

@extends helps you inherit the properties of another class.


// SCSS
.header {
  color: grey;
}

.sub-header {
  @extend .header;
  font-size: 40px;
}

Below is what the SCSS compiles to


// Compiled CSS

.header, .sub-header {
  color: grey;
}

.sub-header {
  font-size: 40px;
}

Mixin

Mixin is another way SCSS implement inheritance using @mixin. You can achieve the same effects of @extend using mixin. You first create the mixin using @mixin then add it to any class that needs that property using @include

// SCSS

//create mixin
@mixin red-color{
  color: grey;
}

.header{
  @include red-color;  /* add mixin */
}

.sub-header{
  @include red-color;
  font-size: 40px;
}

.header {
  color: grey;
}

.sub-header {
  color: grey;
  font-size: 40px;
}

Can you see the different between the compiled css of @extend and @mixin, @mixin puts the style in both selectors(header and sub-header) while @extend seperates both seletors with a comma and then apply this style to them.

There is one thing though @mixin can do that @extend cannot, That is pass parameters and use it. @mixin can also take default values for the parameter.

// SCSS

@mixin fontSize ($params: 10px){
  font-size: $params;
}

.header{
  @include fontSize(20px);
}

.sub-header{
  @include fontSize(20px);
}

// Compiled CSS
.header {
  font-size: 20px;
}

.sub-header {
  font-size: 20px;
}

You can use any of them if you need to inherit a class but the best practice according to CSS tricks is to use @extend when you are not passing parameters.

Import

SCSS allow you to import other SCSS stylesheet into a SCSS file using @import

@import “button.scss” or @import “button”

Partials

Partials are SCSS files you don’t what to be compiled to CSS but you want to import them(using @import) into another file. To create a partial you just need to add an underscore to the beginning of the file name _font.scss, then you can import them with or without the underscore.
Partials helps to modularize your code and separate concerns.
For example in my projects I partials for colors, fonts, buttons e.t.c then I import them into a main.scss file.

/* _colors.scss(partial) */

$light-gray: #F2F2F2
$dark-gray: #737373
/*EOF colors.scss*/

/* _buttons.scss(partial) */

.button-primary{
  color: #4c7396;
  background-color: #ffffff;
}
.button-secondary{
  background: #4c7396;
  color: #FFFFFF;
}
/*EOF buttons.scss*/

/* main.scss */
@import "_buttons.scss"
@import "_colors.scss"

Operators

Scss offers you different kind of operators that you can use in your CSS. Arithmetic operators like :

Addition(+)
Subtraction(-)
Division(/)
Multiplication(*) e.t.c


// SCSS
@mixin top-margin ($margin){
  margin-top: 30px + $margin;
}

.container{
  width: 800px - 80px;
  @include top-margin(10px);
}

//Compiled CSS

.container {
  width: 720px;
  margin-top: 40px;
}

Note that arithmetic operators only work when both values use the same unit i.e rem, em, px

They also support comparison operators like ==, !=, <, >, >=, <= and logical operators and, or, not.

You can check out this article for more on Operators

SASS Operators

Sarah Chima ・ Nov 24 '17

#sass #css #beginners

Color Functions

Scss provides some function that can be used to manipulate colors. Some of them include:

mix($colorX, $colorY, weight) : This function is used to mix two color together. First argument is the first color, second is the second color and the third argument is the percentage of first color you want to mix.

mix(blue, grey, 30%) /*results 30% blue and 70% grey*/

lighten($color, $amount): this function is used to return a lighter color. The first argument is the color and the second is the percentage of how much you want to lighten it.

lighten(#ff0000, 30 ) /*results #ff9999/*

darken($color, $amount): Takes similar arguments as lighten function but this returns a darker color specified.

darken(#ff0000, 30 ) /*results #660000*/

opacify($color, $amount): This function returns a color with the opacity increase. The first argument is the color and the second is value between 0 and 1.
transparentize($color, $amount): This function makes a color more transparent, it takes similar arguments to opacify. It returns a color with the opacity reduced. You can say it is the opposite of opacify.

These are just some of the color functions available in Scss, you can check the docs for more.

Other functions

Scss still offers other functions that might be useful to you

str-length($string): This function returns the number of characters in a string.
percentage($number): This function converts number without unit to a percentage.
round($number): This function rounds a number to the nearest whole number.
min($number1, $number2, $number3, …..): this function returns the minimum value from a set of numbers.
random(): This returns a random number and takes no arguments.
quote($string): This function adds quotes to a string.
unquote($string): This function removes quotes from a string.
to-lower-case($string): This function converts a string to lowercase.
to-upper-case($string): This function converts a string to uppercase.

Loops

We can use for loops in our css thanks again to Scss. This can be really useful in creating utility class. You can create classes for your color, font-size , margin , padding and a lot of other properties.

Below are some examples of loops I used to create utility classes in my projects

/* Generate utility classes for font-size */

@for $x from 1 through 70 {
  .font-size-#{$x} {
    font-size: 0px + $x;
  }
}

So I can easily have a class of font-size-20 if I need that on an element.

/* Generate utility classes for margin */

@for $i from 0 through 500 {
  .m#{$i} {
    margin: 0px + $i;
  }
  .mt#{$i} {
    margin-top: 0px + $i;
  }
  .mb#{$i} {
    margin-bottom: 0px + $i;
  }
  .ml#{$i} {
    margin-left: 0px + $i;
  }
  .mr#{$i} {
    margin-right: 0px + $i;
  }
}

If you have used loops to create utility classes in your projects please share in the comments so others can adopt them. Loops are like my favorite scss feature

Conditionals

Another awesome feature of scss is the ability to use If/else statements in css. I have not really used this feature in any of my projects but I think they are awesome.

$bg: pink;
$bg-mobile: red;

p {
  @if $bg == pink {
    color: blue;
  } @else if $bg-mobile == red {
    color: green;
  } @else {
    color: grey;
  }
}

This is just a simple use case for if else statements, if you have used it in a project please share a code snippet in the comment.

Scss has a lot more features than what is covered in this article but these are the commonly used ones. You can check out their docs.

Building Accessible(A11y) HTML Forms

Oghenero Adaware — Mon, 18 Feb 2019 14:15:50 +0000

What is Accessibility(a11y)?

According to Wikipedia, It is the design of products, devices, services or environments, for people with disabilities. Accessibility in software development is simply building applications that are usable by everyone.

This might be the first time you have heard or read about accessibility in relation to software development or you might have heard about it but you haven't really looked into it, Accessibility is an important part of any application you are building. It shouldn't be some feature but should be a standard when building web applications because it is important the web remains equally accessible to everyone irregardless of their abilities, disabilities or language. Before now I haven't been building the most accessible web applications and I will like to apologize to anybody who had to use my terrible applications. Making your web applications accessible is not difficult to implement, it just requires you to use Semantic HTML in most cases.

So in this article I will briefly explain how to make your (terrible) forms accessible.

Labeling form controls.

This can be done using the label element <label>. Form label are important because they tell users what to input in that form control, imagine a form without any labels, how would you know what you need to enter into that field. You might be thinking "What of placeholders?", placeholders are not replacements for label because screen readers do not treat placeholder text like labels and placeholder text are not widely supported by assistive technologies.

So it is important to provide labels for all form controls in your form, this includes text inputs, checkboxes, radio buttons e.t.c. Simply putting a label above/below a form control is not enough, Sematic HTML provides a way for us to associate a label with a particular form control, to do this the Id of form control must match the for attribute of the label.

The above demo shows how to label form controls. You might not have noticed but the label acts as a clickable area which focuses the form control.

Grouping form controls.

It is important to group related form fields because it is easier for users to understand the form and also enter the appropriate values.
Take a look at the example below


            <form>
               <p>Do you prefer remote work</p>

               <input type="radio" id="yes">
               <label for="yes">Yes</label>

               <input type="radio" id="no">
               <label for="no">No</label>


            </form>

Visually it looks like there is nothing wrong with that form but if you use a screen reader to navigate the form you will hear the form labels "Yes" or "No" but you won't know what question is being asked.

You can easily group related form fields using the fieldset element and the legend element as a title for that group.

This is just an introduction to making forms accessible, you can get more information from the below links

W3C Web Accessibility Initiative
Web Accessibility in Mind
a11ymatters

What Tutorials Would I Use If I Started Learning Javascript Again

Oghenero Adaware — Thu, 17 Jan 2019 15:20:33 +0000

In this era of information boom the assumption is that you can pick up any skill(technical or creative) because there are a lot of materials available but It is quite the opposite.
// Detect dark theme var iframe = document.getElementById('tweet-1083339757336363008-726'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1083339757336363008&theme=dark" }

A lot of options/alternatives might lead to decision fatigue. This is where a lot of beginners waste time and some end up giving up on learning that skill. Maybe some of them successful overcome decision fatigue and pick a learning material, half way through it they discover that this is not giving them the knowledge they seek, here again is another point where they might give up.

In my process of learning Javascript my technique for filtering the good from the bad was to check the reviews for positive comments related to what I am looking for from the course/book. This will go a long way in helping but this doesn't guarantee that it will offer you what you want.

So in this article I will be sharing learning materials(books & courses) that helped me learn Javascript.

Codeacademy's Learn Javascript Course (Free)

Codeacademy is interactive website that teaches programming in different languages. I love their approach to teaching Javascript because they explain the topics then give easy to understand example and then tasks to complete before you move to the next topic and it builds on your previous knowledge.
I strongly suggest this course if you are just starting out with programming because it is tailored for beginners and it gets you familiar with the basics.

Head First Javascript Programming ($37)

This is my preferred book for reference because there are a lot of examples and illustrations to get the message across. Usually I don’t enjoy using books to learn because I get bored of books and most of them don’t use a project-based approach. Head first javascript programming is not project based but they make up for that with a lot of examples and puzzles to help you get familiar with Javascript.

JavaScript and JQuery: Interactive Front-End Web Development - Jon Duckett ($34)

This is a unique book because it engages right from the beginning, building different things. This book offered me a unique experience because before this I havent really made anything with Javascript and also you will get to learn a lit bit of Jquery. I can’t recommend this book any more, if there is one material you should use out of the four I listed then this is it. I will advise you to read this book cover to cover.

Watch and Code - Practical javascript (free)

This is a video tutorial that walks you through building a todo application(yes another TODO app). This is one of the best free Javascript video tutorial out there. The instructor Gordon Zhu covers the building blocks of Javascript that you will encounter a lot as a professional developer. He covers functions, arrays, objects, loops while building a todo application. The best thing is that it’s not all about code, he also gives tips on refactoring, how to approach a problem as a beginner and how to debug.
When you finish this course you should be ready to pick any Javascript framework(😉 React) and continue your learning.

One thing I will suggest is not to worry about remembering the syntax but make sure you understand the concept behind it, you can always google the syntax or head over to Stackoverflow.

Forem: Oghenero Adaware

Hooks Introduced in React-Router v5.1

useParams

useLocation

useHistory

useRouteMatch

Conclusion

Using WebSockets in React

What is Websocket

Why did I need WebSocket

Basic Setup for React

Advanced Setup

Sending a message with the WebSocket

Conclusion

Generating Pdf documents in React Using React-pdf

Introduction

Features

Components

Styling

Fonts

Demo

Folder Structure

Demo Application

Conclusion

How do you anxiety during Interviews?

How I was able to move past tutorials

The Struggle

What worked for me

What could I have done differently

Redux Devtools: Actions Stack Trace

Gatsby is Awesome

What is Gatsby js?

What interested me in Gatsby

Rebuilding my portfolio site

Datasource(Source plugins)

Transformer Plugins.

Graphql

Routing

Plugins I used in my site.

What do you use to handle side effects in React-redux

Accessible Emoji's

SCSS Cheatsheet

What is SCSS

Variables

Nesting

Inheritance(Using @extend or @mixin)

@extend

Mixin

Import

Partials

Operators

SASS Operators

Sarah Chima ・ Nov 24 '17

Color Functions

Other functions

Loops

Conditionals

Building Accessible(A11y) HTML Forms

What is Accessibility(a11y)?

Labeling form controls.

Grouping form controls.

What Tutorials Would I Use If I Started Learning Javascript Again

Codeacademy's Learn Javascript Course (Free)

Head First Javascript Programming ($37)

JavaScript and JQuery: Interactive Front-End Web Development - Jon Duckett ($34)

Watch and Code - Practical javascript (free)

Inheritance(Using `@extend` or `@mixin`)