Part of every developers dilemma is deciding which approach to take in addressing certain problems. Genuine solutions require a certain amount of effort and steps to achieve and there exists acceptable “workarounds” that tests every developers way of thinking.

Here are some simple workarounds that you might find helpful and will help save time in cases you still haven’t figured out the right solution.

For you to follow along and experiment your use-cases or check the results yourself, here’s a quick guide.

npx create-react-app my-app
cd my-app
npm start

Optional

Install your favorite UI library (in this example, I used ant-design).

1. Force re-render by updating component key property

There might be instances that you need to reset your component state (e.g. form states) after a certain action (click event, keyboard event, after certain requests, you name them…) outside your form component, and realized you don’t have access to the form library’s reset function.

Form component (use your favorite form state library, react-hook-form in this example)

import React from 'react'
import { Form, Input } from 'antd'
import { useForm, Controller } from 'react-hook-form'

const FormComponent = () => {
  const { control, getValues } = useForm();
  const formValues = getValues()

  return (
    <Form>
      <Controller 
        name="firstname"
	control={control}
	defaultValue={formValues.firstname}
	render={props => <Input {...props} placeholder="First name" />}
      />
      <Controller 
	name="lastname"
	control={control}
	defaultValue={formValues.lastname}
	render={props => <Input {...props} placeholder="Last name" />}
      />
    </Form>
  )
}

Usage

import React, { useState } from 'react'
import { Button } from 'antd'

// use your favorite library (e.g. uuid)
const getUniqueFormKey = () => (new Date()).toISOString()

export default () => {
  const [key, setKey] = useState(getUniqueFormKey())
  return (
    <div>
      <FormComponent key={key} />
      <Button onClick={() => setKey(getUniqueFormKey())}>Reset form</Button>
    </div>
  );
}

Result

By changing the components key property, we were able to re-render the component completely and reset its state

2. Access react state in event listeners via useRef

There might be cases that you’ll need to add an event listener, override specific key binding, access react state from useState and trigger certain actions from there.

Sounds easy, right? It feels natural, but your state will most probably be empty. Let’s try.

Component

import React, { useState } from 'react'
import { Input } from 'antd'

const App = () => {
  const [formState, setFormState] = useState({ fname: '', lname: '' })

  return (
    <div>
      <Input
        value={formState.fname}
        placeholder="First name"
        onChange={e => setFormState({
          ...formState,
          fname: e.target.value,
        })}
      />
      <Input
        value={formState.lname}
        placeholder="Last name"
        onChange={e => setFormState({
          ...formState,
          lname: e.target.value,
        })}
      />
    </div>
  );
}

Then add keydown event listener via useEffect

import React, { useEffect } from 'react'
import { Input } from 'antd'

const App = () => {
  ...

  useEffect(() => {
    const onKeydown = e => {
      if (e.code === 'Enter') {
        // do whatever you want with the state
        console.log(formState)
      }
    }
    if (window) window.addEventListener('keydown', onKeydown)
    return () => {
      if (window) window.removeEventListener('keydown', onKeydown)
    }
  }, [])

  ...
}

With this setup, this is what the state looks like upon triggering the “Enter” key from the keyboard, it doesn’t contain anything but the default values.

To access the updated state in the event listener, add the following modifications to the code

1. Import useRef and set the default value with the state’s value
2. Add another useEffect that will keep the formStateRef value updated every time the state changes
3. Use the formStateRef.current on the onKeydown instead

import React, { useEffect, useRef } from 'react'
import { Input } from 'antd'

const App = () => {
  const [formState, setFormState] = useState({ fname: '', lname: '' })
  const formStateRef = useRef(formState)

  useEffect(() => {
    const onKeydown = e => {
      if (e.code === 'Enter') {
        // do whatever you want with the state
        console.log(formStateRef.current)
      }
    }
    if (window) window.addEventListener('keydown', onKeydown)
    return () => {
      if (window) window.removeEventListener('keydown', onKeydown)
    }
  }, [])

  useEffect(() => {
    formStateRef.current = formState
  }, [formState])

  ...
}

Result

And we can now have access to the updated state via useRef in our event listener.

It’s good to note that the above workarounds will work on any stateful components, and are not limited to form components.

Conclusion

While it is always good to find a genuine solution to a problem, workarounds can be as creative as true solutions and I find some of them saving me from doing over-engineered solutions which convolute the codebase unnecessarily. Plus, it saves time!

Ethical Hackers

When you hear the word hacker what do you immediately think?

Is it the hooded guys that steal personal data from the internet using their insane computer skills?

If you do, you’re not entirely wrong, but did you know that there are also hackers that have good intentions and are actually allowed to hack into computer systems? They are called Ethical Hackers.

Have you seen Sylvester Stallone’s movie Escape Plan? In this movie, he breaks in and out of prisons as a profession. After a successful prison break, he then recommends improvements on the prison’s security system based on the methods he used during the prison break. Similarly, ethical hackers break into computer systems using the same methods used by criminal hackers, to help assess the security of a system.

As the saying goes, “It takes a thief to catch a thief” but in this case, we are dealing with hackers, not a thief and instead of catching them, we just want them out and away from our systems.

Unethical Hackers

Last time, I asked you “what comes to mind when you hear the word hacker?”. So now, we will talk about those shady guys that come to mind when talking about hackers. Since it’s common knowledge that hackers break into systems with ill intentions, I won’t get into that. Let’s talk about other things about them instead.

First, their motive. Most of the time, it’s money. I’m thinking of three ways how they can make money from what they are doing:

1. Sell the assets they obtained through hacking
2. Sell their services to people who want to hack a computer system
3. Collect ransom from owners of hacked computer system

When it’s not money, they hack the system for the same reasons why people hire them in #2.

Next, let’s talk about the different types of unethical hackers.

Some hackers break laws to fulfill their motives.

• Black hat hackers: A hacker who breaks into computer systems without the permission of the system owner. This is usually someone with malicious intent.
• Blue hat hackers: The vengeful spirits. A person who learns hacking to get revenge from an individual or an organization.

While some hackers break the law, their motives might be considered by other people as ethical, heroic, or justifiable.

• Grey hat hackers:  A hacker who breaks into computer systems without permission but reveals his findings to the system owner.
• Red hat hackers: The vigilante. Hacks through a black hat’s systems to stop the illegal activities and malicious intent of a black hat hacker.
• Hacktivists: A person who hacks through a system to broadcast their belief and ideals. Usually victimizes government systems and leaves political messages.

To sum up, ethical hackers hack on behalf of the company to find and cover the loopholes to the system’s security. On the other hand, unethical hackers hack to cause harm or loss to the company and take profit for themselves.

Hopefully this blog gave you some insight into the colourful world of hacking. More and more companies are taking data protection and security seriously, and are willing to invest heavily in securing their systems – including hiring ethical hackers.

Cost is more important than quality, but quality is the best way to reduce cost – Genichi Taguchi

This quote doesn’t just apply to projects or work. It certainly applies to all aspects of our life: whether it’d be something that we eat, we always tend to pick up the freshest produce we see; to online shopping, we often look at product reviews before checking the items out; to our relationship, there’s always that line of quality friends over quantity. It’s innate in people who want the best for themselves. If you lose quality in food, there’s a risk of getting sick if consumed. And for products, it tends to break easily in which you’ll have to spend more than what you paid for – that’s the price of poor quality.

For software, the importance of quality is monumental. An unstable product running in live production may lead to a loss in customer engagements, and while some projects run on the pre-production phase it also consumes a lot of time and resources. The more the build gets retracted from being pushed to live production, the higher the chances it creates more tension internally for the organization – which may then lead to it being discontinued.

As much as possible, we’d like to avoid that kind of situation as we have invested a great deal of time and money for a project to just go down the drain. And trust me, we’ve had a share of those experiences at work – some gains and losses. But a loss does not imply defeat; it just means we need to do better the next time the same problem occurs.

So here I’ve listed some of my thoughts on the important parts in supporting a project and its quality, which might be of use to some of you.

1. Clear Business/Project Goals – if you have an idea, you must be able to convey your plans and intentions to other people involved. Now, a project may not have all its core functionalities listed from the start; but it must have at least something specific it wants to do or deliver. You mustn’t allow developers to create the specifics from the start. It must come from the business/project manager else it will create a traction point, wherein developers will have to redo their work because it wasn’t the exact business/project requirement.
2. Planning – once goals have been established, a project should have proper planning (from documentations, wireframes, user stories, event storming sessions, DevOps infrastructure, API and data designs, logical flows, etc.) before starting the development and targeting deadlines/the timeline for teams. Everyone should be clear on what needs to be achieved.
3. Team Composition – as much as people hate being in a hierarchy, it creates an order for the organization. Teams must have a POC of who’s who to chase for when something related to a problem happens – from the project manager, backend/frontend lead, infrastructure to QA. Someone needs to be responsible for a role and must be able to manage the team and its optimal performance.
4. Communication – “In teamwork, silence isn’t golden, it’s deadly.” The information being relayed doesn’t need to be perfect it just needs to be addressed properly by the people in the organization. To effectively deliver a good output, everyone must be able to communicate goals, issues, feedback, and suggestions.
5. Infrastructure – it’s important to have a solid infrastructure setup as it is the backbone of projects and the most critical part when the project is running. It should be able to handle downtimes, traffics, log monitoring, service build updates, data events, etc.
6. Quality Gates – now, this doesn’t solely depend on the QA team, it is apparent in all departments: project managers need to ensure the requirements are correct and detailed, developers will implement their own sets of code testing, DevOps will have the error log monitoring, and most importantly QA will have a set of tests that will fit the project/feature both manual and automation. The gates will have to block an unstable build from being released as a final output for a deadline/push and must ensure a much stable version is delivered throughout each cycle.

The list above is not the perfect guide to achieve better project quality, but will give you a good idea of what should be expected as a criterion. It will always depend on how well the organization manages its processes, workflow, and teams. That’s why here at HOV, we’re continuously learning from one project at a time and developing better tools/processes to ensure we deliver the most ideal outcome for our ideas.

We’re working on an exciting test project to help the company fill missing gaps in ensuring better quality and transparency for internal projects this year. I look forward to sharing it in my next post! Fingers crossed 🤞

Cyber Attacks

You start your day checking for emails and you spot a client email with “PROPOSAL” as the subject line. You try opening the attachment but nothing happens. You ask the sender to resend the mail, but you never get a reply. You continue your day as usual.

The next day, your company announces that a data breach occurred with 130 million customer data compromised. You receive an email from the IT department asking for any unusual stuff that happened the previous day and you remember the weird “PROPOSAL” email with an attachment that never opened. You were a victim of phishing.

Here’s how phishing.org defines it:

Phishing is a cybercrime in which a target or targets are contacted by email, telephone, or text message by someone posing as a legitimate institution to lure individuals into providing sensitive data such as personally identifiable information, banking, and credit card details and passwords. The information is then used to access important accounts and can result in identity theft and financial loss.

Phishing is among many other cyberattack methods that are being used by cybercriminals to acquire sensitive information for personal gains. Some of the most common attacks are:

1. Denial of Service (DoS)
2. Malware
3. Password attack
4. SQL injection
5. Cross-site scripting (XSS)
6. Man in the middle attack

Defending yourself and your organization from cyberattacks

Your IT Department conducts an information campaign on how to spot phishing emails and how to deal with them. All the employees are also required to join a Cyber Security Seminar so you are more equip to deal with other forms of attacks that may target you and your organization in the future. In the seminar, you learn that cybersecurity is the collection of methods, technologies, and processes aimed to maintain the confidentiality, integrity, and availability of computer systems, networks, and data against cyber-attacks or unauthorized access, and even natural disasters.

Defending yourself and your organization from cyberattacks is very much like defending a building from criminals. There are monitoring tools that record the activities happening in the system, much like what CCTV does in a building. There are also cybersecurity professionals that ensure the security of computer systems just like what security personnel does in a building. Cybersecurity should be implemented 24/7 as done in building security.

Why do you need to improve the security of a system?

After the phishing incident, the IT team has been pushing security updates to everyone’s computer regularly. Some employees are annoyed because they are forced to restart their computers while they are working on something. They even question why one security update is not enough to protect the systems from cyberattacks.

To answer that question, I’m going back to my analogy between cybersecurity and building security, I will also throw in a reference that I have researched because I feel like those imaginary employees are hard to convince.

Taken from an academic paper that reviewed seven studies about the effectiveness of surveillance cameras in reducing crime;

Changes in total crime found crime reductions ranging from 24 to 28% in public streets and urban subway stations, but no desirable effects in parking facilities or suburban subway stations.

This implies that although crimes are reduced when surveillance cameras/CCTVs are installed, crimes still happen even when CCTVs are in use. The same thing is true for computer systems, a single security update will not eradicate the threat of cyberattacks. Cybercriminals/hackers will not be stopped by a security update, they will just look for other ways to break into your systems.

Key takeaway

Cybersecurity is the process of defending computer systems from cyberattacks. There are many forms of cyberattacks, one of which is phishing. Phishing is a technique used to obtain sensitive data where targets are contacted via email by cybercriminals posing as legitimate institutions. Cybercriminals/hackers cannot be stopped by just a single security update and as hackers continuously improve their techniques, your system’s security should improve as well.

Developers require different tools to help in their development cycle. There are countless options when it comes to softwares or platforms and choosing one is often difficult. With a never-ending supply of new resources to try and libraries for almost everything released daily, everyone has their own tool preferences.

In this article, we will focus on NextJS and break down the setup with Strapi. 

I will walk you through 5 simple steps to set-up an online store with product colour variation using the two tools mentioned above. It’s simple if you follow along! Let’s get started.

What is NextJS

NextJS is an open-source React framework created by Vercel that enables functionality such as server-side rendering and generating static websites for React based web applications.

The Project

We will be decoupling our project into frontend (NextJS) and backend (Strapi). Let’s begin by installing our NextJS packages into our frontend folder.

STEP 1 : Setup NextJS

yarn add next react react-dom @apollo/cilent

Inside the NextJS app, create a folder called pages and create a file index.tsx. Populate it with the code below:

import React from 'react'

const index = () => {
  return (
    <div>
      'Hello World'
    </div>
  )
}

export default index

Next, add the typescript support for this project. First, create your tsconfig file with the command

Touch tsconfig.json 

Then run yarn dev so NextJS can automatically install all the required packages to finish your setup.

You will also need to install bootstrap by installing 

yarn add reactstrap bootstrap

In order to implement bootstrap, add a global stylesheet or layout component to the project.

Create a _app.tsx under pages and put the code given below you in it. This will allow us to add a custom stylesheet and certain headers that we need in our project. We will also add our apollo provider and client for us to connect in our strapi. 

import type { AppProps } from 'next/app'
import Head from 'next/head'
import Layout from "../components/Layout"
import {InMemoryCache, ApolloClient } from '@apollo/client'
import { ApolloProvider } from '@apollo/client';

function MyApp({ Component, pageProps }: AppProps) {

  const API_URL = "http://localhost:1337"

  const client = new ApolloClient({
    uri: `${API_URL}/graphql`,
    cache: new InMemoryCache()
  });

   return (
    <>
      <ApolloProvider client={client}>
        <Head>
          <link 
            rel="stylesheet" 
            href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" 
            integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
            crossOrigin="anonymous" 
          />
        </Head>
        <Layout>
          <Component {...pageProps} />
        </Layout>
      </ApolloProvider>
    </>
  )
}

export default MyApp

Outside the pages folder, create a folder named components and create a Layout.tsx file. In this file, we will add the navigation header and meta tags. 

import React from 'react'
import Head from 'next/head'
import Link from 'next/link'
import {Container, Nav, NavItem} from 'reactstrap'

const Layout = (props) => {

    const title = 'Welcome to HOV'

    return (
      <div>
          <Head>
              <title>{title}</title>
              <meta http-equiv="X-UA-Compatible" content="ie=edge" charSet="utf-8"/>
              <meta http-equiv="X-UA-Compatible" name="viewport" content="initial-scale=1.0"/>
          </Head>
          <header>
              <style jsx>
                  {`

                      a {

                          color: white;

                      }

                  `}
              </style>

              <Nav className="navbar navbar-dark bg-dark">
                  <NavItem>
                      <Link href="/">
                          <a className="navbar-brand">Home</a>
                      </Link>
                  </NavItem>                    
              </Nav>
          </header>
          <Container>{props.children}</Container>
      </div>
    )
}

export default Layout

Now we are ready to create items in our strapi dashboard!

STEP 2 : Setting up Strapi

What is Strapi

Strapi is a nodeJS based headless cms that will save you a lot of API development time through a user-friendly admin panel anyone can use 

Before you install any dependencies, make sure you have at least NodeJS v12 and NPM v6 in your machine. 

Now lets create our backend folder by using this command:

yarn create strapi-app backend-strapi 

After running this command, strapi will let us choose what database we want to use. For this project, select MongoDB then fill all the database credentials. Default values should work if we have installed all the database drivers in our machine. We can also add a flag –quickstart which will use SQLite for the database.

We can now start our strapi project by running the command

yarn develop

You should see this screen show up in our browser; let’s fill it up with our credentials!

Now let’s create our content:

Select the Text field for the product name, Rich Text for the description and Media for all images.

Pro tip: For the description field, add minimum characters of 50 and max characters to 250 to avoid lengthy descriptions.

For the Name and Images fields we need to add a required parameter to make sure the data for these fields are not empty.

Now lets add entries on our Apparel Collection. Don’t forget to save and publish when you’re done. 

We should now have 3 items on our collection that we will display in our frontend. 

If we go to http://localhost:1337/apparels, you will see the url is still blocked with a 403 forbidden error. 

This is a good practice by strapi to make sure our data is secured. To fix this, change the permissions rule under settings in the top right third section of the dashboard. Click roles under Users and Plugin section and edit the Public role. Allow find and findOne in the permissions.

Now go back to the url and you should be able to see the data we created.

Since we are using graphql apollo in NextJS, in order for us to accept graphql queries, we need to add graphql plugin in strapi marketplace 

After we download the graphql plugin, restart the server by running yarn develop

Now if we try to get to the apparel collection using the url http://localhost:1337/graphql, you can see our entries in the query

STEP 3 : Displaying our Entries

Now let’s display the created entries into NextJS. 

Create a ApparelList.tsx file in your components folder and populate with this code snippet. 

import React from "react";
import { useQuery, gql } from "@apollo/client";
import {
  Card,
  CardBody,
  CardImg,
  CardText,
  CardTitle,
  Row,
  Col,
} from "reactstrap";
import Link from "next/link";

const GET_APPARELS = gql`
  query getApparels {
    apparels {
      id

      name

      description

      image {
        url
      }
    }
  }
`;

const ApparelList = (props: Record<string, any>) => {
  const { loading, error, data } = useQuery(GET_APPARELS);

  const filterApparels =
    data &&
    data.apparels.filter((item) => {
      return item.name.toLowerCase().includes(props.search);
    });

  if (loading) {
    return <div>Loading...</div>;
  }

  if (error) {
    console.log("Error");
  }

  return (
    <Row>
      {filterApparels &&
        filterApparels.map((res) => (
          <Col xs="6" sm="4" key={res.id}>
            <Card style={{ margin: "3rem 0.5rem 20px 0.5rem" }}>
              <CardImg
                top={true}
                style={{ height: "100%" }}
                src={`${"http://localhost:1337"}${res.image[0].url}`}
              />

              <CardBody>
                <CardTitle>{res.name}</CardTitle>

                <CardText>{res.description}</CardText>
              </CardBody>

              <div className="card-footer">
                <Link
                  as={`/apparels/${res.id}`}
                  href={`/apparels?id=${res.id}`}
                >
                  <a className="btn btn-primary">View</a>
                </Link>
              </div>
            </Card>
          </Col>
        ))}

      <style jsx global>
        {`
          a {
            color: white;
          }

          a:link {
            text-decoration: none;

            color: white;
          }

          a:hover {
            color: white;
          }

          .card-columns {
            column-count: 3;
          }
        `}
      </style>
    </Row>
  );
};

export default ApparelList;

In the code above, we added a filterApparels variable that we will use for filtering any entries. We used a Link component from nextJS that will be used in navigating into selected items. 

Go back to the index file under pages folder and import ApparelList.tsx file. Create an input field to search for any entries. 

import React, { useState } from "react";

import { Col, Input, InputGroup, InputGroupAddon, Row } from "reactstrap";

import ApparelList from "../components/ApparelList";

const Home = () => {
  const [query, updateQuery] = useState("");

  return (
    <div className="container-fluid">
      <Row>
        <Col>
          <div className="search" style={{ margin: "3rem 0.5rem 20px 0.5rem" }}>
            <InputGroup>
              <InputGroupAddon addonType="append"> Search</InputGroupAddon>

              <Input
                onChange={(e) => updateQuery(e.target.value.toLowerCase())}
                value={query}
              />
            </InputGroup>
          </div>

          <ApparelList search={query}></ApparelList>
        </Col>
      </Row>
    </div>
  );
};

export default Home;

Accessing the url http://localhost:3000/, you should now able to see entries and a search field for to filter.

STEP 4 : Adding Variations to Items

By clicking the view button, we receive a white screen error. This is because we haven’t added entries for each item yet. To fix this, go back to the strapi dashboard and add the colour availability for each item. For example, if we navigate into t-shirt there will be a variety of colors to choose from.

To do this, create a new content type called colors. Since we already know how to create a content, just repeat the steps we did earlier with properties name(required), description, price(required), image(required).

We will add a special field called garments with a type of relation. Select the one-to-many-relation where every color added should have a relation with our apparel list. 

Now we are ready to add a variation to our apparels! Let us add black and white variation for each item. 

STEP 5 : NextJS Dynamic Routing

Go back to our code and display our variations. We will now use NextJS dynamic routing with route /apparels/id 

Inside the pages folder, create another folder called apparels. Then create a dynamic file [id].tsx. This will match any route like /apparels/1 or /apparels/random-id 

Now populate the dynamic file with this code snippet

import { useQuery, gql } from "@apollo/client";

import { useRouter } from "next/router";

import {
  Button,
  Card,
  CardBody,
  CardImg,
  CardText,
  CardTitle,
  Col,
  Row,
} from "reactstrap";

const GET_APPAREL_COLORS = gql`
  query($id: ID!) {
    apparel(id: $id) {
      id

      name

      colors {
        id

        name

        description

        price

        image {
          id

          url
        }
      }
    }
  }
`;

const Colors = () => {
  const router = useRouter();

  const { data, loading, error } = useQuery(GET_APPAREL_COLORS, {
    variables: { id: router.query.id },
  });

  if (error) return "Error Loading Colors";

  if (loading) return <h1>Loading ...</h1>;

  if (data) {
    const { apparel } = data;

    return (
      <>
        <h1>{apparel.name}</h1>

        <Row>
          {apparel.colors.map((res) => (
            <Col xs="6" sm="4" style={{ padding: 0 }} key={res.id}>
              <Card style={{ margin: "0 10px" }}>
                {res.image.map((img) => {
                  return (
                    <CardImg
                      key={img.id}
                      top={true}
                      style={{ height: 250 }}
                      src={`${"http://localhost:1337"}${img.url}`}
                    />
                  );
                })}

                <CardBody>
                  <CardTitle>{res.name}</CardTitle>

                  <CardText>{res.description}</CardText>
                </CardBody>

                <div className="card-footer">
                  <Button outline color="primary">
                    + Add To Cart
                  </Button>

                  <style jsx>
                    {`
                      a {
                        color: white;
                      }

                      a:link {
                        text-decoration: none;

                        color: white;
                      }

                      .container-fluid {
                        margin-bottom: 30px;
                      }

                      .btn-outline-primary {
                        color: #007bff !important;
                      }

                      a:hover {
                        color: white !important;
                      }
                    `}
                  </style>
                </div>
              </Card>
            </Col>
          ))}
        </Row>
      </>
    );
  }
};

export default Colors;

The view button should work now! You can also see all the colour variations.

That’s it! We’re now done building out the functionality of the app. 

Conclusion

The main objective of this article was to show you how to build apps in NextJS and Strapi. 

You’ll see that most of the implementation was pretty easy because of the flexibility and structured layout that NextJS provides. 

Use this as a base to build your own NextJS application in the future. If you found it helpful, share it around and tag us in your creations!