Forem: William

DXC, we engineers hardly know ye

William — Thu, 27 Oct 2022 11:13:47 +0000

“Hey Alex, we have a Black Friday campaign coming up. Gotta update the content on a couple of product pages and create two marketing pages with promo content from the CMS.”

As a software engineer, you’ve probably been or will soon be Alex. Business practitioners, especially marketers, are insatiable with content requests to fulfill the never-ending demands for updating and enhancing the business strategies at play.

Those requests can be frustrating for us engineers. Even though the rise of Jamstack, headless, and microservice architectures afford us so-called “software soup” for interacting with valuable tools and technologies, each tool comes with domain-specific, mind-boggling complexities.

Ultimately, business users and engineers must agree on what to build and how and when to build it. Seamless team dynamics, however, hinges on how efficiently the players can implement the agreed-upon changes.

Here comes DXC, yet another cutting-edge, next-gen, fire-spitting buzz acronym. We skipped the adjective “blazing-fast” on purpose.

What is DXC?

With digital experience composition (DXC), cross-functional teams can build scalable applications with a focus on what the teams are tasked with. That is, engineers would stick to developing software, and content practitioners would do their job in a content-oriented environment. Other business folks can directly influence all the teams without diminishing overall productivity.

A disclaimer: The DXC-driven scenario has negligible impact on small applications or demos. For scalable applications, DXC makes a huge difference by abstracting content and data from multiple sources into a layer. Business users can then present the result in whatever form or channel they desire, hence the term composition.

Think of what an easier life you’d have as an engineer if all you had to do was create the presentation layer for structured content, whose schema maintains a specific format. The underlying content comprises data and content from CMSes, headless commerce systems, analytics tools, customer-data platforms, product information management (PIM) systems, search services, etc.

Simply put, once you’ve defined the page components for the website, other teams can determine the pages to present and their structure—without touching a line of code. For instance, they can identify the text and image sources, the transformations for the images, and the audiences for the various pages. They can personalize content on multiple facets, hold experiments, and update the presentation without help from engineers. Now that’s efficiency.

Separately, in addition to writing impactful code, engineers have time to explore innovative techniques that promise to optimize the user experience and deliver value faster. Also available is bandwidth to research modern application-rendering models, edge computing, and the techniques for scaling teams with more effective design systems.

How does DXC differ from Jamstack and headless technologies?

DXC is built on existing Jamstack and headless-development paradigms to raise cross-team productivity. However, leveraging them at scale risks generating what Tim Benniks calls a Mach Monolith. A case in point: Three Jamstack tools in one Next.js-based front end work perfectly fine. However, 10 services later, each communicating with the other, a monolith of headless services emerges. Thus, as much as Jamstack and headless tools are ideal for smaller applications, using them at scale is problem-prone and painstaking.

DXC is a remarkable workaround: You still use your favorite Jamstack tools, headless services, or even your own home-grown connectors without being locked into any of them. Business users can pick, choose, and swap content any time while engineers focus on building software.

What’s next?

DXC offers relief for engineers, who can bask in the newfound efficiency. Not to mention being able to ensure lateral stability across the application while solidifying the foundation for vertical growth.

A caveat with DXC solutions is that content orchestration from multiple sources is crucial but not universally available. Here, I unapologetically plug Uniform, where I work, a solution pioneer in this space. For a demo, sign up for a free account, pick data sources from the suite of integrations, create new components, and watch the orchestration magic unfold.

“Hey, Sam, how long will it take you to switch our legacy CMS from 2008 to a modern, open-source one?”

You’re probably not Sam but might be soon, and you need to think about how to handle questions like that.

For now, Alex is much happier. We are all Alex.

Handling Images in Gatsby with High Performance

William — Tue, 24 Aug 2021 23:15:31 +0000

Cloudinary is a cloud-based, end-to-end media-management platform on which you can store, dynamically optimize, and responsively deliver images and videos for both desktop or mobile apps.
The Gatsby-Source-Cloudinary plugin fetches optimized media assets from a folder on Cloudinary in a Gatsby project. Additionally:

You can declaratively query Cloudinary’s media assets alongside other application data with GraphQL.
Cloudinary delivers media assets through a content delivery network (CDN), reducing the app- bundle size on build.
Gatsby-Source-Cloudinary automatically optimizes the quality and format of the media files delivered by Cloudinary.

Thus, you have the best of two worlds: high-performance apps along with optimized delivery of media assets.
This tutorial steps you through the process of building a responsive image gallery with Gatsby and images from Cloudinary. Because Gatsby is written in React.js, you must have a working knowledge of JavaScript and React.js.

Installation of Node.js and Gatsby.js

You need Node.js and its package manager, npm, for this project. To check if they’ve been installed on your system, type the following command in your terminal:

    node -v && npm -v

If the output show no version numbers, go to Nodejs.org to download and install Node.js, which ships with npm.
Next, install the Gatsby.js CLI tool by typing this command in your terminal:

    npm install -g gatsby-cli

Creation of Cloudinary Account

To source images from Cloudinary, you must first set up an account there. Cloudinary offers a generous, free tier account that’s largely adequate for starter projects and that scales with the project.
Afterwards, do the following:

Upload the images for the image gallery to a folder in your media library on Cloudinary. Name the folder with a name of your choice, e.g., gallery.
Obtain your API key and API secret from your Cloudinary dashboard.

Creation of New Gatsby Project

Gatsby contains starters that quickly generate new projects with a base setup. To create a new Gatsby project in a folder of your choice with the default starter, type this command line:

    gatsby new cloudinary-site

Next, navigate to the project directory and start a new development server on http://localhost:8000 with this command:

    cd cloudinary-site && gatsby develop

Because it contains GraphQL, Gatsby simultaneously creates a GraphQL IDE on http://localhost:8000/___graphql, with which you will build GraphQL queries later.
Now go to http://localhost:8000 to see the new Gatsby project, which looks something like this:

Installation of Additional Packages

You need two other packages for this project:

The dotenv module: for loading environment variables from a .env file.
The gatsby-source-cloudinary plugin: for fetching optimized images from Cloudinary.

Install them with npm by typing this command line:

    npm i --save dotenv gatsby-source-cloudinary

Configuration of gatsby-config.js

You configure all plugins, including those that accompany the default starter, in the gatsby-config.js file, which resides in the root directory of Gatsby projects. Do the following:

Import the dotenv file you installed earlier to the gatsby-confi.js file and add the gatsby-source-cloudinary plugin with this code:

    require('dotenv').config();

    module.exports = {
      ...
      plugins:[
      ...
      {
          resolve: `gatsby-source-cloudinary`,
          options: {
            cloudName: process.env.CLOUDINARY_CLOUD_NAME,
            apiKey: process.env.CLOUDINARY_API_KEY,
            apiSecret: process.env.CLOUDINARY_API_SECRET,
            resourceType: `image`,
            prefix: `gatsby-source-cloudinary/` 
          }
        }
      ]
    }

gatsby-source-cloudinary takes these options:

cloudName, apiKey , and apiSecret. These are credentials from your Cloudinary console, stored as three separate environment variables for security.
resourceType This is the resource type of the media assets: either an image or a video.
prefix This is the folder (in your Cloudinary account) in which the files reside. In the example above, I named this folder gatsby-source-cloudinary. Assign a name of your choice. Other optional options are type, tags, and maxResult.

In the root of your project, create an environment file called .env to which to add your Cloudinary credentials and their values, like this:

    CLOUDINARY_API_KEY=xxxxxxxxxxxxxx
    CLOUDINARY_API_SECRET=xxxxxxxxxxxxxxxxxxxx
    CLOUDINARY_CLOUD_NAME=xxxxx

The `dotenv` package exposes those environment variables in the project.

Restart the Gatsby development server to see the plugin in action, as in this example:

Note the info log, which displays the CloudinaryMedia nodes. Those images are ready to be queried in Gatsby components.

Creation of Image Gallery

To create the image gallery:

In the src/components folder, create a component file called ImageGallery.js and add the React functional component to the file, as follows:

    import React from 'react'
    import './gallery.css'
    import {useStaticQuery, graphql} from 'gatsby'
    const ImageGallery = () => {
        const data = useStaticQuery(graphql`query CloudinaryImage {
                allCloudinaryMedia {
                  edges {
                    node {
                      secure_url
                    }
                  }
                }
              }`
        )
        const clImages = data.allCloudinaryMedia.edges
        return (
            <div>
              <div className="image-grid">
                {clImages.map((image, index) => (
                      <div className="image-item" key={`${index}-cl`}>
                        <img src={image.node.secure_url} alt={"no alt :("} />
                      </div>
                    ))
                }
              </div>
            </div>
          )
      }
      export default ImageGallery

Here, you query all the Cloudinary images sourced into the CloudinaryMedia nodes with the useStaticQuery hook. In turn, you map through those image URLs to create a gallery with the component.

Create a file called ./gallery.css in src/components for styling the component. Add the CSS styles to the file, as follows:

    .image-grid {
        display: grid;
        grid-gap: 10px;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        grid-auto-rows: minmax(50px, auto);
      }
      .image-grid .image-item:nth-child(5n) {
        grid-column-end: span 2;
      }
      .image-grid img {
        display: flex;
        width: 100%;
        height: 100%;
        object-fit: cover;
      }

The above styling renders your image gallery into a beautiful, responsive masonry grid.

Replace the existing content of the index.js file in the src/pages folder with the newly created ImageGallery component, as follows:

    import React from "react"
    import Layout from "../components/layout"
    import SEO from "../components/seo"
    import ImageGallery from "../components/ImageGallery"
    const IndexPage = () => (
      <Layout>
        <SEO title="Home" />
        <h1>Image Gallery</h1>
        <p>Here's a Gatsby site with optimized images in a masonry grid, served from <a href="https:cloudinary.com" target="_blank" rel="noopener noreferrer">Cloudinary</a></p>
        <div style={{ marginBottom: `1.45rem` }}>
          <ImageGallery/>
        </div>
      </Layout>
    )
    export default IndexPage

Gatsby automatically creates dynamic routes for single pages in the  `src/pages` folder, with `index.js` being the root or home page.

Optional. Feel like tweaking the styles a bit? In the src/components/header.js file, change the background style property of the <header> element to #002954.

You might also like to rewrite the site title, which is pulled from the site metadata specified in gatsby-config.js. Update the title property of siteMetadata to Gatsby-Cloudinary Image Gallery.

Now restart the development server and have a look at the updated page. Here’s an example:

Next, create a deployable, optimized build by typing this command in your terminal:

    gatsby build

Deployment to Netlify

To deploy this JAMstack app to Netlify with a prebuilt continuous integration and continuous delivery (CI/CD) pipeline, follow these steps:

Push your code to a remote repository, such as GitHub or Bitbucket.
Create a Netlify account and log in.
Create a new project from your deployed repository on Netlify.
Type the build command and build directory in the text fields, in this case gatsby build and public, respectively. In most cases, Netlify detects the technology and auto-populates those fields.
Add the environment variables to the environment variables settings on Netlify. Omitting this step will cause the deployment to fail.
Run the deployment and voila! Your image gallery has taken shape.

Here’s the deployed version of this project.
And here’s the lighthouse audit of the deployed website, which showcases the power of Gatsby and Cloudinary with eight high-resolution images delivered on the page you just created:

For the complete code, see its GitHub repository.

Summary

Now that you’ve learned how to build an optimized and responsive image masonry with the Gatsby-Source-Cloudinary plugin on Cloudinary, you can apply the process to other websites and apps on the JAMstack architecture.
Also, do check out the Gatsby-Transformer-Cloudinary plugin, with which you can upload media assets to Cloudinary and create file nodes off them, ready for use in the robust gatsby-image component in React. Have fun!

11 Tools to Use as a Technical Product Manager

William — Thu, 25 Mar 2021 21:00:22 +0000

As a Technical Product Manager, one of the hurdles I had to pass was setting up and working with various tools to help speed up my work and boost my productivity.

Multiple product management tools abound on the internet. They mostly proffer the same solution of "defining actionable solution requirements and reporting outcomes within a certain timeline." Each tool has its strength, and just as the product management discipline doesn't follow one-size-fits-all, different combinations of tools are required to achieve specific desired outcomes.

I hope I don't say the word 'outcomes' too much ;)

"A good workman is known by his tools". Below is a list of eleven of mine in no particular order, and I hope I'm good. This list consists of tools used in strategy definition, product design, reporting, presentation, communication, and analytics.

This list is opinionated. If you find the tools useful, that's great. Else, could you not hold it against me?

Product Board

Productboard is one of my favorites. I use it to proritize product features against strategic intents/outcomes and development efforts. This is where strategic and operational product management happens. A cool part of Productboard is Portals. With portals, we prioritize product features with feedback from multiple data points, which users can send in via Slack, email, or any of the other data sources.

As a startup, we use multiple prioritization methods. Objectives exist in Productboard to handle prioritization with a sort of MoSCoW approach. Also, with Productboard, you can make a custom prioritization system using Drivers and Scores. Drivers are key metrics that we define and set the impact of the feature on the driver. A group of drivers with individual weights makes up a Score. I'd mostly sort features according to a score, powered by a group of drivers.

With Productboard, I get a holistic view of the roadmap (which I split into quarterly buckets). Having this view on the board showing Drivers, Objectives, and Scores quickly explains WHY and WHEN for any feature.

Trello

Good ol'Trello for product management had to make the cut. Trello is my favorite tool to manage our Kanban boards and task delegation for several reasons. This includes its clean interface and rich integrations.

With a small team shipping software, our sprint cycles are weekly, and releases are sometimes daily. A tool to manage this tactical product management process should help us do this seamlessly by defining requirements, acceptance tests, delivery dates, and assigning the task. Trello did just that.

With integration to GitHub, we're able to tie pull requests and issues to Trello cards. An excellent add-on for Trello is the Card numbers integration that adds the card number to a card. A card number makes for easy referencing in sprint plannings, standup, and sprint retrospectives.

If you exceed your power-up limit for Trello, you can explore this chrome extension to add card numbers to Trello cards.

Toggl Plan

Product managers can create roadmaps on Productboard. However, the experience with creating a Gantt chart on a calendar isn't as optimal (or maybe I don't find it aesthetically pleasing). I use Toggl plan to represent the roadmap stages on a calendar. Toggl Plan is visually attractive and effortless to drag and drop the timelines. A useful feature is also the ability to export a plan with various timelines and even share a link to a project so all stakeholders can see current progress and what's upcoming.

Traditionally, I would do something similar on Google sheets and spend a lot of time with stylings and updating progress.

Toggl has a free tier that doesn't include a lot of features in the paid plan. However, if you need a visual representation of your project/product roadmap on a calendar, then the free plan is enough.

Google Suite

Google Sheets, Google Docs, and Google Slides get the nod for creating spreadsheets, documents, and presentations, respectively. A significant win for these is the ability to collaborate on documents and export to any format.

As a technical product manager in e-commerce, Google sheets sometimes serves as an unlikely data source in development. Stakeholders in business teams are usually comfortable sharing data in sheets. This sheet is converted from a CSV export to JSON format and used in software development. It saves everyone time.

Notion

Creating processes and documenting them is a big part of building a successful engineering and product team. We use Notion to write all developed processes, create wikis and guides, and onboard new team members.

It feels better suited for a knowledge base, and we use it as such.

GitHub

GitHub is a platform to manage software development. As a lean distributed team, everything in development happens here, and as a Technical Product Manager, understanding the different parts cannot be overemphasized. You probably don't need to know the inner technical workings and features; however, making commits, pulling, pushing, making pull requests, and issues are some fundamentals you need to know.

GitHub enables efficient collaboration and automation between team members both in development and deployment.

Excalidraw

Design-focused Product managers would probably be skewed to using Figma and Sketch tools to make design mocks and rough sketches. As a technical product manager with little experience creating user interface designs, I found Excalidraw a handy tool to make sketches and rough prototypes of ideas quickly.

These go from screens to pages and charts. Also, a big win with Excalidraw is the gentle learning curve. Unlike most design tools with confusing toolbars and 16 menus (just kidding), Excalidraw keeps it pretty minimal.

Figma still deserves mention for collaborative prototyping if product design is among your strengths.

Draw.io

Draw.io is one tool I find super useful when communicating ideas to stakeholders. Draw.io allows you to create flowcharts and diagrams with multiple available elements. With draw.io, I'm able to make user and process flow diagrams in minutes.

With Draw.io, you can also make Entity Relationship Diagrams for databases.

Google Analytics

Feedback collection on product usage is at the heart of product development. Google Analytics provides data on multiple telemetries when appropriately integrated for free. I use it on websites to analyze automatically-collected data and also analyze custom data triggered through events.

With Google Analytics, we can analyze user acquisition, retention, conversion, anonymous audience information, and user behavior. Other features include creating paths and user funnels using custom events.

While Google Analytics gets some criticism due to privacy concerns, It gets a nod for the feature set at no cost.

Slack

The online office. Slack enables team communications in channels, direct messages, and group messages. Slack is a useful tool for teams to work effectively, featuring an excellent interface and rich text editor to communicate efficiently.

A strength of Slack is in the ability to extend its capabilities with integrations. For us, we use the following base integrations:

GitHub
Google Suite
Trello
Productboard
Uptime Robot (to track server uptime)

Notice how most of the tools already listed have Slack integrations always to keep everyone in the loop? That's the beauty of Slack. There are hundreds of Slack integrations for your team or product use-case.

Yea, we don't use the call feature on Slack too :)

Zoom

Zoom gets an honorable mention for being there for us when we needed to make calls with low internet bandwidth. We use Zoom for video communications as a distributed team.

Summary

In this post, I discussed 11 tools I use as a Technical Product Manager to develop and ship technology products. As this is an opinionated post, your choice may differ, or you may find that a tool eliminates the need for another. Whichever helps you do your most impactful work is the right tool.

This article was originally published on Hackmamba

Explaining Web Apps State Management like ABC

William — Fri, 12 Mar 2021 08:35:33 +0000

In building out web applications using React.js, I've had to manage both component and application state. While the component state is managed with built-in methods, the application state is managed using tools like Redux.

How does Redux work? The documentation talks about actions, constants, and reducers. Which I and much everyone else uses. However, I'd struggled to internalize this concept and how it's all put together.

I recently asked Meabed to explain to me in his terms, how state management works and he did just that. I'm writing to you to explain using an HTML file and the browser window object, how state management tools possibly like Redux work, with stores, constants, actions, subscriptions & updates, and reducers.

All these will be done on Codesandbox and you can find the final sandbox here.

Create the HTML file

I created a simple index.html file and opened it in the browser (no bundler required). The file contains the following:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Static Template</title>
  </head>
  <body>
    <h1>Building out state from Scratch using a counter and input</h1>
  </body>
</html>

Create static HTML elements

We require 2 script tags, one before the body element to load Javascript before the document loads, and another after the document is loaded. The first will manage the state logic and the second will update the page. Also, we will demonstrate the state update using a counter with 2 buttons and an input field. With these we have:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <script>
      // Handle State management
    </script>
    <h1>Building out state from Scratch using a counter and input</h1>
    <button id="increment">Increment</button>
    <hr />
    <p id="counter_data">{counter} - {name}</p>
    <hr />
    <button id="decrement">decrement</button>
    <hr />
    <input type="text" placeholder="Enter your email" />
    <script>
      // Update DOM
    </script>
  </body>
</html>

We created a simple HTML document with 2 buttons, a counter - name display, and an input element. The goal is to increment and decrement a counter value (which we will assign shortly), and update the {name} value with whatever is entered in the input.

You may wonder why we have to go through this long process to handle increments and decrements. You are right. For small applications like counters, handling an application state is trivial, as a single JS file is sufficient. However, in larger projects, there is a need to organize and manage the flow of data throughout the components.

How state management works (theoretically)

In clear steps, we will handle the state in this app with:

Creating a data store in the window object that is accessible everywhere in the browser
Create a function to update the DOM (the fancy term is 'render engine')
Create functions to update the store data (these are actions)
Define a new store data in the function to update the store (this is a reducer)
Create a global function that receives function calls to update the store along with any provided data. It updates the store and re-renders the webpage.

Technologies like React and Redux work to optimize this process and enhance the development experience.

Creating a data store

In the opening script element, we will create an object as a data store in the window object.

[...]
<body>
    <script>
      // Handle State management
      window.store = {counter: 0, name: "William"}
    </script>
    <h1>Building out state from Scratch using a counter and input</h1>
    <button id="increment">Increment</button>
    <hr />
    <p id="counter_data">{counter} - {name}</p>
    <hr />
    <button id="decrement">decrement</button>
    <hr />
    <input type="text" placeholder="Enter your email" />
    <script>
      // Update DOM
    </script>
  </body>
[...]

Create a render function for the DOM

A quick render function will replace specific portions of an identified DOM node value with variables from the store. In the second script tag before the closing body tag, we have:

<body>
    <script>
      // Handle State management
      window.store = { counter: 0, name: "William" };
    </script>
    <h1>Building out state from Scratch using a counter and input</h1>
    <button id="increment">Increment</button>
    <hr />
    <p id="counter_data">{counter} - {name}</p>
    <hr />
    <button id="decrement">decrement</button>
    <hr />
    <input type="text" placeholder="Enter your email" />
    <script>
      // Update DOM
      window.originalData = window.originalData || document.getElementById("counter_data").innerHTML; // Store original state before state changes, required for rerender

      // Render function
      function renderData() {
        document.getElementById(
          "counter_data"
        ).innerHTML = window.originalData
          .replace("{counter}", window.store.counter)
          .replace("{name}", window.store.name);
      }
      renderData();
    </script>
  </body>

We created a render function with a basic template engine (hell yeah!) which replaces {counter} and {name} with data from the global store. With the data from the store, the page looks like:

Create functions(actions) and reducers to modify data

To increment, decrement, and update the page, we will create functions that update the store data. In the first script element, we create 3 functions having:

<script>
      // Handle State management
      window.store = { counter: 0, name: "William" };

      // Create functions
      function increment() {

        // reducer
        window.store.counter += 1;
      }

      function decrement() {
        window.store.counter -= 1;
      }

      function setName(newName) {
        window.store.name = newName;
      }
</script>

We have increment, decrement and setName functions to increment, decrement, and update the name data respectively. Also, for now, the expression in the actions is just to update the store data.

Call actions on button click and input change

The next step is to call the actions on button click and input change. We update the buttons and input then rerender the element for each action completion. We now have:

<script>
      // Handle State management
      window.store = { counter: 0, name: "William" };

      // Create functions
      function increment() {
        // reducer
        window.store.counter += 1;
        renderData();
      }

      function decrement() {
        window.store.counter -= 1;
        renderData();
      }

      function setName(newName) {
        window.store.name = newName;
        renderData();
      }
</script>
    <h1>Building out state from Scratch using a counter and input</h1>
    <button id="increment" onclick="increment()">Increment</button>
    <hr />
    <p id="counter_data">{counter} - {name}</p>
    <hr />
    <button id="decrement" onclick="decrement()">decrement</button>
    <hr />
    <input type="text" placeholder="Enter your email" onchange="setName(this.value)"/>

At this time, the counter works as well as the input object.

Immutability is a core part of how tools like Redux and React work, with those, the state is not mutated as we do at the moment. Here, we re-render the elements for every action, this has a huge performance overhead when managing a large application. Also with state-controlled from multiple app points, there is multi-directional data flow which could lead to data inconsistencies in an app.

Following these, state data should not be mutated, however, a new version of the state is created. This way, efficient render engines like in React.js know from comparing the previous state object and the new state object, when to render, and what portion of the app to rerender. Subsequently, you can look up "Shallow compare" and "Deep equality" of objects in JavaScript.

Create a sample redux store

To achieve immutability, we will create a store which has a function that:

Dispatches an action
Takes a data returned in the action (reducer)
Merges it with the store data (root reducer) In the opening script element we add the window.reduxStore object with:

[...]
<script>
      // Handle State management
      window.store = { counter: 0, name: "William" };

      // redux store with dispatch
      window.reduxStore = {
        dispatch(action, data) {
          const newData = window[action](data);
          window.store = { ...window.store, ...newData };
          renderData();
        }
      };
    [...]
</script>
[...]

In the dispatch method, we receive action and data as parameters. Each action function to be 'dispatched' has a unique name, and when used in the dispatch function, it is used to call the action and assign it to a new variable called newData.

The data sent in the dispatch function is passed to the action which is in turn used in the reducer. The result is spread along with the existing store data into new value for the store, rather than mutating/modifying the store itself.

With the re-rendering out of the way, we can clean up the action functions to:

<script>
      // Handle State management
      window.store = { counter: 0, name: "William" };
      window.reduxStore = {
        dispatch(action, data) {
          const newData = window[action](data);
          window.store = { ...window.store, ...newData };
          renderData();
        }
      };

      // Create functions
      function increment() {
        // reducer
        return { counter: (window.store.counter += 1) };
      }

      function decrement() {
        return { counter: (window.store.counter -= 1) };
      }

      function setName(newName) {
        return { name: newName };
      }
</script>

Also, update the buttons and input to dispatch the actions while passing only the action name, which seems like a constant, sound familiar from react-redux? hehe.

<h1>Building out state from Scratch using a counter and input</h1>
    <button id="increment" onclick="window.reduxStore.dispatch('increment')">
      Increment
    </button>
    <hr />
    <p id="counter_data">{counter} - {name}</p>
    <hr />
    <button id="decrement" onclick="window.reduxStore.dispatch('decrement')">
      decrement
    </button>
    <hr />
    <input
      type="text"
      placeholder="Enter your email"
      onchange="window.reduxStore.dispatch('setName', this.value)"
    />

At this point, we have the data flowing from application state to components and state management completed using the window object as a store. The buttons manipulate the resulting number on increment or decrement, whereas the input element updates the name field when you click out of the form input after a form entry.

Recap

We have:

A button triggers a defined action function
The action returns a reducer
A new store is created with the new state data as the previous store data is immutable
The DOM elements are re-rendered to reflect the updated state.

Tools like Redux and React-redux work to optimize every step of this process by having abstracted and clearly defined,

Actions
Constant
Reducers
Subscribers
Rendering, as well as a host of optimization techniques.

You can find the complete code sandbox to this here

I hope this gives you a better understanding of how state management works. Also, this is just the base of the concept and you can read through multiple state management libraries for more insights.

Till next time.

William.

This article was originally published on Hackmamba.

Dynamic JavaScript Object Keys

William — Tue, 09 Mar 2021 06:32:52 +0000

Excuse the barrage of doggos in the banner image. I searched for a stock image on unsplash for "Puppies with different colors being named by their mom". I do search in the tackiest of ways 😃

I hope they brighten your time also.

Recently, I found a 'funny' JS syntax when reviewing a pull request by Sigo, a colleague. I hadn't used it previously. It looks like this:

const dataFromAPI = 'age';

let existingObject = {
  name: 'John',
  [dataFromAPI]: 25
};

// Output {age: 25, name: "John"}

Amazing!

I looked up variables in object keys and decided to share it with you.

Keys and Values in Objects

In JavaScript, object keys and values are created in numerous ways either in object literals during initialization, or assignment using dot or bracket notation.

// Creating an object literal with keys and values
let newObject = {
  name: 'Jane',
  age: 24
};

// Adding a new key - bracket notation
newObject["location"] = "Peru"

// Adding a new key - Dot notation
newObject.height = '1.95m'

// Output {age: 24, height: "1.95m", location: "peru", name: "Jane"}

This is pretty much standard stuff. For values of keys, we are able to assign results from complex computation operations as a value. For keys, we can do something similar and even run the computation in the key.

Dynamic Object Keys

A way to handle dynamic keys in objects prior to ES6 is to do something like:

let newObject = {
  name: 'Jane',
  age: 24
};

const newData = "location";

newObject[newData] = "Nicaragua"

// Output {age: "24", location: "Nicaragua", name: "Jane"}

A shorthand form introduced in ES6 using brackets lets us assign the variable in the object literal directly like this:

const newData = "location";

let newObject = {
  name: 'Jane',
  age: 24,
  [newData]: "Nicaragua"
};

// Output {age: "24", location: "Nicaragua", name: "Jane"}

While this shorthand form is proffering cleaner code, this scenario applies in multiple cases, where existing data (object) is augmented with data from a different source with a dynamic key.

Moving on to computed keys, the value of object keys can be computed directly in the object literal using the same bracket notation in the literal.

const newData = "lottery";
const didUserWin = true;

let newObject = {
  name: 'Doug',
  age: 42,
  [newData + (didUserWin ? 'Winner': 'Loser')]: "Assign any value or data here"
};

// Output {age: "24", lotteryWinner: "Assign any value or data here", name: "Doug"}

This illustration also shows the use of conditions in the form of ternary operators.

This post is mainly to show the dynamism of both Object keys and values.

Let me know if you have any feedback using this.

Here's to becoming better 🥂

William.

This article was originally published on Hackmamba

Top 5 Rich-Text React Components

William — Wed, 03 Mar 2021 18:07:28 +0000

Top 5 Rich-Text React Components

Content is at the heart of web interfaces. Rich text makes up the crust of creating text content with differently formatted parts.
In this article, we will illustrate five rich text components for creating content in React applications.

We will also look at the pros and cons of each component.

Lastly, we will discuss the future of the dynamic presentation of content using Portable Text and how to use Portable Text from Sanity Studio.

Rich text is used in various forms of presentations on the web, including blog posts, articles, listings, and more robust interfaces like e-commerce product descriptions and social media.

Below are 5 top rich text components for React.js.

Draft.js

Draft.js is a robust, extensible, and customizable React.js framework for building rich text editors. It provides the building blocks for building rich text inputs with an immutable approach to managing data.

Draft.js follows the same paradigm as controlled components in React and provides an Editor component that renders a rich text input.
Draft.js exposes an EditorState API to handle/store state updates in the Editor component.

Installation
Draft-js requires React and React-DOM. We install them using npm or yarn with:



    npm install draft-js react react-dom
    yarn add draft-js react react-dom

Usage



    import {Editor, EditorState} from 'draft-js'

    const RichtextEditor = () => {
      const [editorState, setEditorState] = useState(()=> EditorState.createEmpty())
      return (
        <div>
          <Editor editorState={editorState} onChange={setEditorState}/>
        </div>
      )
    }

The onChange handler overwrites the editorState data with the new data in the editor. editorState holds an immutable Record with all changes and events in the editor and is simply a snapshot of its state.

Draft.js provides props to manage various configurations, including editor styling on event triggers and block styling for singular rich text entities like headers and blockquotes.

With the content created in the editor, we want to convert this to HTML, which we can display on a page. There are libraries to handle the conversion of this data, including draft-convert and draftjs-to-html.

Pros

Robust and customizable data on a document level and lower level into blocks of various text elements
Uses immutable-js to manage performant state updates
Supports custom controls
Ships text directions for RTL languages and spell-checker
EditorState contains undo/redo stacks and any other action done on the editor

Cons

Requires setup from scratch, plus controls to set up a full-fledged editor
Requires a parser installed to render entered markup ## React-Draft- WYSIWYG

React-draft-wysiwyg is an editor built on Draft.js. Suppose you don’t want the hassles of building your own rich text editor UI from scratch. In that case, react-draft offers a fully fitted editor with options to customize the editor even further.

React-draft also provides the ability to use the editor as a controlled or uncontrolled component. React-draft provides the option to customize the toolbar options and add custom react components to it.

Installation
React-draft depends on Draft.js, React, and react-dom. We install React-draft using npm or yarn with:



    npm install react-draft-wysiwyg draft-js react react-dom
    yarn add react-draft-wysiwyg draft-js react react-dom

Usage
With react-draft, EditorState, an immutable Record of the editor’s state, is imported from draft-js and Editor from react-draft-wysiwyg.

Here’s usage on a React page:



    import React, { useEffect, useState } from "react";
    import { Editor } from "react-draft-wysiwyg";
    import { EditorState } from "draft-js";
    import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";
    export default function App() {
      const [editorState, setEditorState] = useState(() =>
        EditorState.createEmpty()
      );
      useEffect(() => {
        console.log(editorState);
      }, [editorState]);
      return (
        <div>
          <h1>React Editors</h1>
          <h2>Start editing to see some magic happen!</h2>
          <div style={{ border: "1px solid black", padding: '2px', minHeight: '400px' }}>
            <Editor
              editorState={editorState}
              onEditorStateChange={setEditorState}
            />
          </div>
        </div>
      );
    }

The resulting editor looks like this:

The above code snippet shows the usage of React-Draft-WYSIWYG as a controlled component. In an uncontrolled behavior, the initialEditorState prop is used instead of the editorState prop in <Editor/>.

Pros

Provides ready-made UI out of the box
Allows for UI enhancements and customizations, including emoji support
Accepts props of CSS class names for speedy editor styling
Easily set up hashtags and mentions with suggestions from a dataset

Cons

Requires a parser to convert EditorState to HTML or any other markup.
Parsers for draft-js to HTML or any additional markup could be inadequate in handling the different block/element types.

React Quill

Quill.js is a fast and lightweight rich text editor built with cross-platform and cross-browser support in mind.
Its strength also lies in its extensibility and configurability using themes.
React-Quill is a Quill component for React with support for TypeScript. React-Quill ships with a full-featured editor with the option to customize the toolbars and set up themes.

React-Quill is seamless to integrate. React-quill touts a hybrid input of controlled and uncontrolled behavior, using the component's value prop bound to its state.

React-Quill also features an uncontrolled mode that uses defaultValue to instantiate the editor data.

A theme specification and a function passed to the onChange prop of the component are only required to render the editor and handle data input.
React-Quill outputs HTML and can be used in JSX elements with dangerouslySetInnerHTML.

Installation
React-quill is installed via npm or yarn with:



    npm install react-quill
    yarn add react-quill

Usage
Import the React-quill component along with the theme required. The default theme Snow is used when a theme is not specified.



    import ReactQuill from "react-quill"
    import 'react-quill/dist/quill.snow.css'

    export default function App() {
      const [convertedText, setConvertedText] = useState("Some default content");
      return (
        <div>
          <ReactQuill
            theme='snow'
            value={convertedText}
            onChange={setConvertedText}
            style={{minHeight: '300px'}}
          />
        </div>
      );
    }

Pros

Allows complete toolbar customization with HTML & JSX elements support
Ease of setup and use
It outputs HTML, so it serves simpler use cases like blog posts and content presentation layers with precise data requirements.
Theming support for preset editor styling

Cons

Limited customization of content blocks
Security vulnerabilities of primarily rendering HTML

Slate

Slate.js, currently in beta, is a framework for building robust, rich text editors. Slate is made to be highly extensible, thus improving its native capabilities to create rich text editors. Slate is built with inspiration from tools including Quill and Draft.js.

Slate poses to solve several bottlenecks with managing rich text content, some we have seen previously in this post.
Slate aims to solve these challenges:

Serialization to HTML & Markdown doesn’t ship out of the box
Collaborative content creation is an afterthought
Restrictive schema definition of document models
Dynamic content creation should transcend beyond text, links, and media content

Installation
Slate is distributed as a monorepo and can be installed along with its React plugin using npm or yarn with:



    npm install slate slate-react
    yarn add slate slate-react

Slate also requires the installation of react and react-dom as peer dependencies.

Usage
A Slate editor’s essential representation is a fundamental contentEditable element, customized further until the desired functionality is achieved.

To use Slate, we import the slate editor composer and components from its React plugin.



    import React, { useState, useMemo } from "react";
    import { createEditor } from "slate";
    import { Slate, Editable, withReact } from "slate-react";

In the imports we have:
Slate: A context provider component for the Slate editor. It’s a controlled component that tracks the full editor state and updates.
Editable: Renders an editable rich text document, similar to contentEditable.
withReact: Provides the editor with React specific functionalities

Creating an <SlateEditor/> component and rendering a simple editor, we have:



    import React, { useState, useMemo } from "react";
    import { createEditor } from "slate";
    import { Slate, Editable, withReact } from "slate-react";
    import "./styles.css";

    export default function SlateEditor() {
      const editor = useMemo(() => withReact(createEditor()), []);
      const [value, setValue] = useState([
        {
          type: "paragraph",
          children: [{ text: "We have some base content." }]
        }
      ]);
      return (
        <div className="App">
          <h1>React Editors</h1>
          <h2>Start editing to see Slate in action!</h2>
          <Slate
            editor={editor}
            value={value}
            onChange={(newValue) => setValue(newValue)}
          >
            <Editable style={{ border: "1px solid black" }}/>
          </Slate>
        </div>
      );
    }

useMemo hook maintains a consistent editor object during the component update. We initialized the Slate controlled component’s state data with an array containing an object with a block and children.

Slate uses the default renderer, which outputs a div to render the default paragraph content. The editor can be extended further using events, custom renderers, custom elements, and commands to include controls, filters, and much more.

You can find out more on using Slate to build a fully-featured rich text editor similar to Medium and dropbox paper here.

Pros

Ships robust APIs and handlers to build out fully featured rich text editors
Dynamic content blocks with types to further customize or abstract portions of the content
Outputs plain JSON; hence serialization to other data formats is seamless
Extensible with the use of plugins

Cons

Requires setup with a steep learning curve to handle simple content use cases
Requires UI setup to operate controls in the editor

Jodit-React

Jodit is an open-source WYSIWYG editor written in TypeScript. Jodit-react, a wrapper for Jodit, is a great WYSIWYG rich text editor that ships with controls to handle most rich text formatting, links, and tables.

Installation
Install Jodit and jodit-react using npm and yarn with:



    npm install jodit jodit-react
    yarn add jodit jodit-react

Usage
Here’s the sample usage below to render a rich text editor with default controls and a handler to update the component state using the onBlur event.



    import React, { useState, useRef } from "react";
    import JoditEditor from "jodit-react";
    import "./styles.css";

    export default function App() {
      const editor = useRef(null);
      const [content, setContent] = useState("Start writing");
      const config = {
        readonly: false,
        height: 400
      };
      const handleUpdate = (event) => {
        const editorContent = event.target.innerHTML;
        setContent(editorContent);
      };

      return (
        <div className="App">
          <h1>React Editors</h1>
          <h2>Start editing to see some magic happen!</h2>
          <JoditEditor
            ref={editor}
            value={content}
            config={config}
            onBlur={handleUpdate}
            onChange={(newContent) => {}}
          />
          <div dangerouslySetInnerHTML={{ __html: content }} />
        </div>
      );
    }

We imported the required modules and set up a basic config for the editor. You can find more editor config options here.
We proceed to create a function to handle state updates with data from the editor. <JoditEditor/> renders the editor, which looks like this:

Pros

Provides themes and custom theme creation
Easy to setup WYSIWYG editor for simple content requirements
Provides custom controls and buttons to enhance the editor
Allows the creation of custom plugins for editor extensibility

Cons

Absence of block content with types for more in-depth content control
It doesn’t support robust data requirements like embeds and collaborative content creation
The content output is in HTML as typical with WYSIWYG editors, with potential security vulnerabilities when rendering the data using dangerouslySetInnerHTML in React.

Portable Text

Portable text is a JSON-based open specification with a renewed approach to handling and presenting rich text in modern applications. Portable text is created to solve challenges in creating rich content and its presentation in various differing interfaces.

Portable text content can be serialized into any content format. Its customizable and extensible data structure serves a limitless approach to constructing multi-level content either with data entities as siblings or children.

Portable text returns content in the form of an array containing blocks of child content with a style, types, and mark definitions - these are formats applied to content types. The JSON formatted portable text content is further transformed into any standard data format, including HTML and Markdown with serializers.

Sanity Studio

Sanity Studio is an open-source CMS with real-time collaboration on modern data requirements. Sanity utilizes portable text to serve block content created in the Sanity Studio. Portable text and the structured content approach of the Sanity Studio allow users to create various content models bordered on solving both domain and generalized content problems.

Sanity Studio also offers the ability to extend content solutions with plugins, integrations, and interfaces.

Sanity studio installation

Sanity has multiple official starters to get started on a project quickly. These include starters for JAMStack frameworks like Gatsby.js, Next.js, Eleventy, and Gridsome. There are starters for Blogs, E-commerce, Portfolio website, and a landing page with data from Sanity Studio. We can find all starters here and even community starters.

Alternatively, we can create a new project from scratch using sanity init.

To do this, install sanity CLI globally with:



    npm install -g @sanity/cli

On sanity CLI installation completion, proceed to create a Sanity account or login from the CLI with:



    sanity login

Once we log in, we run sanity init, follow the CLI prompts to create a new project. We’ll choose the default dataset configuration and any of the project templates. Here, we choose the blog template that ships with the schema.

With the project’s successful setup, we change the directory into the project folder and run sanity manage to open the project in the browser, and it looks like this:

To open the studio locally, in the project directory, we run:



    sanity start

This command creates a local development server on http://localhost:3333. The local studio looks like this with the blog data schema:

In the studio’s Post menu, we click the plus (+) icon on the top right corner to open the blog creation page. The blog editor contains a Portable Text rich text editor for structured block content. We create a sample blog content with title and text content.

We’ll deploy a GraphQL API for the studio. This way, we can query data from the studio. We’ll do this with:



    sanity graphql deploy

A GraphQL API is created and deployed to sanity with a default data tag. We’ll click the presented URL to see the schema in the GraphQL playground. Here’s a sample query to fetch the title and JSON Portable text content in bodyRaw of all blog posts:

Sanity Studio Content in Gatsby.js
Gatsby.js is a tool for building super-fast single-page JAMstack applications. To use data from Sanity studio in a gatsby project, we require a source plugin for Gatsby.js. gatsby-source-sanity solves this.

We’ll install it with:



    npm install gatsby-source-sanity

In a gatsby project (different from the sanity studio project), we specify the plugin configuration in the plugins array of gatsby-config.js with:



    module.exports = {
      plugins: [
        [...]
        {
          resolve: "gatsby-source-sanity",
          options: {
            projectId: "enter your project id",
            dataset: "production || any other dataset on sanity",
            token: "enter your sanity read token",
          }
        }
      ]
    }

Refresh the gatsby development server and open the graphql playground to see the source data from sanity.

We can pull the content we want from sanity into our gatsby project, along with other content created on Sanity.

In Gatsby projects, we use block-content-to-react to serialize Portable Text.

Summary

In this post, we discussed five popular React.js rich text editors. We discussed robust editors with block content to WYSIWYG editors for simple content requirements. Each of these is fit for specific use cases depending on the complexity of the project.

We discussed portable text and the problems it solves in dynamic content creation - lastly, we setup Sanity studio with a blog schema that uses Portable Text. We created a GraphQL API for the content and utilized gatsby-source-sanity to source the GraphQL data into a Gatsby.js project.

Setup Redux for Large React Projects - without Tears

William — Mon, 01 Mar 2021 15:56:31 +0000

For small React projects, it's cool passing props between React components, from the Arctic to Antarctica 😃. With increasing complexity, we pass a bit more props and possibly throw in React Context to manage some state data between nested sibling components.

As the project grows, the need for a proper state management tool becomes unavoidable. This is the sweet spot for a tool like Redux in React projects. However, setting up Redux is considered herculean due to the amount of boilerplate required.

In this post, we'll set up a redux store suitable for large projects without shedding tears. This post's scope doesn't cover setting up Thunk middleware for async actions or persisting a store.

We'll focus mostly on store creation, project composition, entity reusability, and manageability. A considerable concern amongst developers using Redux in React projects is the convolution of the codebase with the increase in state variables.

What is Redux?

Quick director cut for those unfamiliar with Redux. Redux is a robust state container for JavaScript applications. Peep the barrels in the banner image. Like they hold wine possibly in your cellar, Redux creates a box for application data in your JavaScript application.

Redux creates an application data store and provides logic to retrieve and modify the stored data. Wondering how state management works on the bare minimum? I wrote this post about it using HTML and JavaScript.

With accompanying tools like React-Redux, state management in React apps becomes seamless. With state hoisted from components into the application layer, interactivity in your frontend app becomes almost limitless.

Prerequisites

Knowledge of JavaScript and React.js is required to follow through with this post. We'll create a simple counter app on CodeSandbox with data from the application state.

Create a React Project

Create a new CodeSandbox using the React starter by CodeSandBox. You can find the final code for this post here.

The created project comes with boilerplate code with the app entry point in src/index.js and the home page in src/App.js. Basic CSS styles are written in src/styles.css.

Create the base HTML structure for the counter app with 2 buttons and a counter display in App.js. Modify the file to:

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Counter is 0</h2>
      <button>Increment</button>
      <button>Decrement</button>
    </div>
  );
}

We wrapped all the app with Provider and passed it props of the imported store.

Consume State

If you made it this far, you have setup redux and can utilize the app state's data.

react-redux provides two super useful hooks to store and retrieve data from redux. They are useSelector and useDispatch, to retrieve data and dispatch actions respectively. We'll modify src/App.js to utilize these hooks in making the counter interactive. Do this with:

import React from "react";
import "./styles.css";
import { useSelector, useDispatch } from "react-redux";
import { IncrementCounterAction } from "./redux/counter/increment-counter-action";
import { DecrementCounterAction } from "./redux/counter/decrement-counter-action";

export default function App() {
  const counter = useSelector((state) => state.counter);
  const dispatch = useDispatch();

  const _handleIncrement = () => {
    dispatch(IncrementCounterAction());
  };

  const _handleDecrement = () => {
    dispatch(DecrementCounterAction());
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <h2>Counter is {counter}</h2>
      <button onClick={_handleIncrement}>Increment</button>
      <button onClick={_handleDecrement}>Decrement</button>
    </div>
  );
}

Here, we imported the actions which will be dispatched on increment and decrement. We created two functions to handle the dispatch. The counter data is also retrieved from the redux state with an initial value of 0. In the case there is a payload, this is passed as an argument to the action call.

The increment and decrement functions are passed to the onClick handler of the buttons to increment and decrement the counter variable, respectively.

You can test out the buttons on end.

Here's what it looks like now:

You can find the CodeSandbox demo here.

Summary

In this post, we set up a redux store with constants, reducers, and actions. The store data is utilized in a counter application.

A key takeaway from this post is in the redux store setup and the separation of concerns. This ensures that when the application size increases and state variables abound, setting up new actions and reducers are seamless. Also, the codebase is maintainable.

Here's to becoming better, and wearing a mask, for now. 😃

William.

This article was originally published on Hackmamba.

AI Product Manager

William — Tue, 23 Feb 2021 20:42:52 +0000

I recently completed the Artificial Intelligence Product Manager Nanodegree Program on Udacity and I'd like to share a summary of everything I learned with you. This also includes bits from my experience as a technical product manager.

This all a huge dump from my mind, written from the first stroke to last on my keyboard so kindly excuse any details I may miss or depths I didn't hit.

Why the AI program?

It would be great to start with "why" and what motivated me to complete this program. In the past year, I've been working as a full-time product manager, sitting at the intersection of engineering and business and it's been fun. Solving problems is fun. However, I'd recently been thinking deeply about the future of technology and what turns it could take. No doubt, artificial intelligence will play a huge part in this future.

With this in mind, I set to learn how artificial intelligence could directly solve human problems which in turn would drive the growth of businesses. The AI for Product Managers Nanodegree program on Udacity seemed a good fit. The recommended study by Udacity is 2 months. I completed it in 3 weeks, you can too if you try it out. 😃

Overview of the program

Along with building a real-world project proposal, the program focused on imparting knowledge of the following:

What is AI and its use cases
When is utilizing Machine Learning relevant
The business cases of AI solutions
Machine learning models
Data Annotation and Training
Model assessment and model performance
Business metrics assessment
Designing AI products for longevity

In the following sections of this letter, I'll give a succinct explanation of each of the above-listed points.

What is AI and its use cases?

AI, short for artificial intelligence is the ability of machines to carry out actions that previously required human intelligence or knowledge. Simply put, if a machine is able to look at your face and tell if you're smiling or frowning and how happy you seem, then that's artificial intelligence.

AI is used in numerous cases, anything that previously required human effort could be augmented or replaced with AI. The key here is performance. Which is more performant, humans or machines? Advancements in the field have seen tremendous improvements in the performance of AI models where humans previously excelled. I expect the uptick to continue exponentially.

While AI is a body of work on intelligent machines and systems, Machine learning is a subset of artificial intelligence where machines are able to learn and make decisions based on data fed to the machine. AI and ML will be used interchangeably throughout this text.

An example use case of Machine learning is in identifying distinct defining patterns in images. This could be health X-rays, traffic signs, chemical color, substance visible quality, etc. These would normally require human effort, but with the computing power of machine learning systems, it's done faster.

ML is currently employed in object recognition, audio/speech recognition, language detection amongst others.

When is it relevant to use Machine Learning?

You may wonder, why should I bother with the ML buzz when I can get someone to do the same thing for half the cost of the technology.

You are right.

Technology by itself enhances existing solutions or proffers solutions entirely impossible previously. AI is utilized where higher efficiency is required to replace an existing process. For example in sorting mail during transport, a single person could properly identify and sort packages at 20 packages a minute. However, an AI-assisted system would perform text recognition on the destination address on each package and sort the packages at 50 packages a minute. More than doubling performance.

If the introduction of artificial intelligence like any other technology doesn't improve the performance of your system and/or business then you could look to other optimization methods.

The business cases of AI solutions

What good is an AI system introduced to enhance a solution, if it doesn't contribute to the improvement of a business objective? No good you must think too. A crucial part of developing AI solutions for businesses as a product manager is to understand what key objectives are affected by the solution. Both positively and negatively. These form the business case.

An AI solution could improve user experience but cost much more than the business can afford. Trade-offs have to be considered before deciding the usefulness of a solution.

What do you intend to achieve with an AI product or solution and how will this drive a business objective? These objectives are listed and the impact on business outcomes is evaluated.

Business objectives are specific and can be easily identified. Examples include:

To improve user experience in the checkout process
To increase conversion on the search page
To reduce the number of call center agents required to assist customers.

These business objectives are beneficial to the business and/or users.

Machine learning models

To use machine learning solutions, a model is required. A machine learning model comprises a series of complex instructions trained using to produce specific outcomes. A model takes an input and returns an output after running the input through algorithms to make complex decisions.

Excuse the french, a model is a system that is trained with data, given input, and it returns an output depending on its training and decision process.

Examples of ML models include speech to text models, object character recognition models, and computer vision models.

Models can either be built from scratch or a process called transfer learning is used to retrain an existing model. Transfer learning is a process whereby an existing trained model is retrained using the same model algorithms but with different data sets. In transfer learning, the expected inputs are similar and the predicted outcomes are based on the data used in retraining the model.

Transfer learning is used over developing a model from scratch for multiple reasons. Building a machine model from scratch requires more resources and technical complexities. Transfer learning systems on the other hand are offered by various 3rd party providers including Google and IBM. Setting up transfer learning models require less setup overhead. However, transfer learning comes with a deficiency in customizing and extending the capability of the model. Also, there is the issue in transfer learning models of cost and managing the model when huge datasets are fed through.

For the purpose of the nanodegree, transfer learning is used. Google AutoML is the platform of choice to generate a model to detect pneumonia in X-ray images, for the model development exercise. The AutoML Vision model is used to classify the images.

A machine learning model is to be created to differentiate between two classes of images, normal and pneumonia. When an image is fed into the system, it should return the class of the image with the level of confidence it has in its prediction.

A class is a decision outcome of the model. A model is fed an input (image) and a class is expected as output.

To achieve this, the model is to be trained with data from both classes and tested before use.

The following important data considerations are made when setting up a model.

Unbiased Data

The data must be unbiased. The same amount of each required outcome class is to be used in training the model. Bias in the data leads to overtraining or under-training of one class over the other. This is also reflected in the confidence of the model when making predictions.

Quantity of Data

The more the data class, the more the ML model is able to accurately predict the same class with high confidence.

Data Disparity

For each class, all kinds of data within the class should be provided. All possible edge cases and forms of that kind of data should be provided. Also, these individual subset groups should also be unbiased and in large quantities to improve the confidence of the model in making predictions.

Data Accuracy

The model is only as accurate as the data it is trained with. Avoid using the wrong data in training the model. Wrong data will lead to confusion of the model thereby reducing its performance.

Data annotation and Training

Depending on the model outcome, the data required for training may require annotation. Annotation is the process of properly assigning labels to uncategorized or scattered data. These labels are required in training the model. Other forms of data may already be annotated through other means and do not require annotation by physical methods or human input.

Annotation is done by humans or existing systems (possibly AI-powered too) to accurately label the training data with the required classes. Services like Appen, provide systems to annotate data.

After data is annotated and prepared with the right considerations, it is fed to the model to be trained.

Test data is set aside to test the performance of the model. This data isn't used in training the model and is entirely new to the trained system. With this test data, the performance of the model can be accurately assessed. The test data is also required to be unbiased and should cover all test cases to ensure all outcomes and edge cases of the model are tested.

Model assessment and model performance

How well is the model able to predict the desired outcome? This is measured using various parameters. Two important measures are Precision and Recall.

Precision is the ability of a model to predict an outcome from all predicted outcomes. Recall is the ability of a model to identify the occurrence of a relevant outcome.

Precision is calculated as the ratio of true positives (correct predictions) to total predictions where Recall is the ratio of true positives (total correct predictions) to the total number of the class data (ie the total possible occurrence of the class - true positives + false negatives).

For a model with multiple classes, the Recall of the model is the average of all the recalls of its individual classes. This is the same for model Precision.

The recall and precision are important values in measuring model performance. For certain models, you would need a high precision value, for example, in ID verification systems. Whereas in X-ray scanning systems for detecting pneumonia, you would need to have a high recall value, as you would want more false negatives in the pool (true values but predicted as false). This way even patients with a slight chance of pneumonia are sent to the doctor for further evaluation instead of leaving them out.

Another metric for model evaluation is the F1 score which combines Recall and precision. The formula for F1 score is (2 * precision * recall)/(precision + recall).

Business metrics assessment

Once an AI product or feature has been developed, it needs to be tested against defined business metrics. These metrics are formulated from the business cases stated earlier. The product metrics must be specific and measurable. Examples of good metrics are:

Increase user acquisition by 10% month on month
Reduce operating expenditure in customer service by 30%
Improve the NPS score by 40%

Business metrics should be measured before and after deploying a model. A way to ascertain the impact of an ML system on a product is to conduct A/B tests. These tests are run on sampled live users. A competing portion (new model or process) is put in a test with an existing portion. The winner after evaluation against set metrics is used as the final version in production.

Designing AI products for longevity

Like every other product, multiple factors are considered to ensure that multiple strategic intents defined by all stakeholders are met. Also, product development efforts must align with the high-level product vision.

In developing ML-powered products, the data is largely considered when building for the long term. The following questions come to mind:

How will the data change over time? What is the cost of acquiring the data? Does running the model in the long term align with the product vision or multiple changes have to occur at certain stages in the life of the product? What does the roadmap for the AI solutions look like?

These and all other product management questions have to be answered and all should be within the frame of the product vision.

Building out successful products requires a strong feedback loop from the customer and the business, informing the product. There should be adequate mechanisms in place to ensure this feedback is incorporated in every step of an AI product iteration. From data annotation, model training, and testing to model iteration for performance.

Human in the loop (HITL) is normally introduced in ML systems to serve as feedback mechanisms where an ML system is deficient. The data from the human is used in further training the ML system for improved performance.

Lastly, like I would say, "there is no one defined route/blueprint to building and shipping every product", however, certain entities are common in all products. Pick out the 'useful commons', hone your process, track performance, and ship better!

Here's to becoming better.

William.

This article was originally published on Hackmamba.

Deploy a Gatsby Site to Digital Ocean in 7 Steps

William — Wed, 17 Feb 2021 17:26:45 +0000

Asides the smooth development experience of using JavaScript, APIs, and Markup to build out JAMstack apps, the deployment process is also splendid. Multiple providers are available to deploy JAMstack, and we will discuss a preferred top 5.

In this post, we'll deploy a sample Gatsby.js application to Digital Ocean using the App Platform for static sites, in seven steps.

You can find the sample Gatsby repository with the default starter here.

Like most hosting providers for JAMstack apps, Digital ocean provides a generous free tier to host and manage web apps. Digital Ocean issues a $100 credit on signup. The free plan covers the requirements to try out the platform. However, two offerings stood out, which are:

Unlimited team members
DDoS protection We'll proceed to the seven steps required to deploy a Gatsby.js app to Digital Ocean.

Step 1: Create an account

Create a Digital Ocean account or sign in to an existing one here.
Once you create a new account, you'll receive $100 free credits.

Step 2: Create a new app deployment

On the top right corner, click the "Create" button to select an option. For our JAMstack use case, we'll use the "Apps" option.

Step 3: Add a repository source

App platform deploys applications from remote repositories (currently GitHub and GitLab). This also ensures we can set up a standard CI/CD pipeline that redeploys the code changes in the repository.

In this step, select your repository provider. We use GitHub as that's the source of the project repository. A prompt is opened in a new window to install Digital Ocean to an organization on your verified GitHub account. Follow the prompts and proceed to the next step.

Step 4: Select a project repository

With Digital Ocean installed, select a repository from the dropdown of repositories. Only repositories you have access to, belonging to organizations with Digital Ocean installed are displayed.

Step 5: Configure the app

Next, select a name, server region, and deployment branch for your app. An important option to choose is the auto-deployment option on code changes. Tick the checkbox if you want this.

Digital ocean detects the application technology and prefills the next page with the application options.

Step 6: Configure build settings

Set up your build command for this project, yarn build, which is prefilled, will suffice. Add your environment variables to the project, if any. Include the output/build directory. An omission will lead to an auto option selected, which detects the project's build directory. Click the next button to proceed.

Step 7: Select a plan and deploy

On this page, select a plan for the project. The starter plan is just enough for this demo. You can explore other available paid plans if it matches your requirement. Click the launch starter app button to deploy the app.

The application deployment took about 9 minutes to complete. Several build, and optimization improvements can be made to deploy in lesser time.

The resulting app is served super fast, customary with Digital Ocean deployed sites served over a CDN.

You can find the bare deployed Gatsby site here.

Summary
In this post, we deployed a starter Gatsby site to Digital ocean in seven steps, from account creation to live site. In the next post, we'll deploy to another hosting provider. If you're reading this, you could share with me your preferred provider to be featured.

This article was originally published on Hackmamba

Never 'Why?' but 'How?'

William — Mon, 15 Feb 2021 17:57:16 +0000

Working with people can get pretty tough. It could be on a school project, at work, or even by just a normal casual conversation.

The persistence of differing views is a key contributor to multiple disagreements between people. Over time working with people and currently on my product team, I encounter numerous unavoidable challenges with both internal and external stakeholders.

Previously, I thought we have different interests and views. However, after a thorough empathetic retrospective, I realize we sometimes have similar interests only humanity in me won't let me see beyond my nose and to their view.

How does "Why" make people feel?

Humans are in touch with their emotions and are inherently irrational beings. This drives our conversation and decision process. We love to be heard and like my dad would say "No one likes to be told that their food tastes bad".

Try asking 'why' for every ask you get in a conversation. I hope you don't get punched in the face. People would likely pick offense or feel some resentment at the very least when you ask 'why'. Even when asked reasonably.

Working with teams and on calls, I would ask "Why" for a lot of requests. I mean, that's what the books say is the Job of a product manager. I got stuff done but with more friction. I realized the following when speaking about a feature proposal or suggestion:

Reduced buy-in from the proposer of the idea or the team
Lowered confidence to validate the suggestion
Less enthusiasm to even explain the reason behind the idea
Overall resentment and pushback from the other party.
Less room for collaboration.

Something just seemed aggressive with the word 'Why'. Especially if you're a key decision-maker.

I did a lot of retrospective and some research on how to approach requests and negotiating to a "that's right" from all parties. I read the book "Never Split the Difference" by Chris Voss. I picked a very clever tactic that worked almost instantly.

Here comes the savior.

The Important "How"

Chris Voss in his book stated the need to use How instead of Why in negotiations. It instantly displays empathy and a form of agreement to see reason before commitment.

I sorted to apply this negotiation skill to product development with my teammates and it worked almost instantly. I reframed feature questions from something like "Why should we create an invoice generator at this time?" to "How will an invoice generator benefit us at this time?".

With 'How', it's clear I'm no longer questioning the request on the surface but trying to understand the underlying reason behind the request. Also, it is an instant call for collaboration, the other party does have the work to validate the idea by providing specific reasons.

Little change, big difference.

I changed "Why do you think this is important to our business?" to "How will this benefit our business?". A common interest is declared and we move from what seems like an accusation to a call for an investigation. The collaboration between teams increased and everyone is always rallied around a shared interest.

A common use of "Why" by product managers and leaders is "Why are we delayed on this?" "Why are we here on the timeline". These are instantly aggressive. Replacing those with "How are we delayed on this" and "How are we here on the timeline", still shows the importance of the situation but requests valid causation which leads to a viable line of action.

Another alternative to using "How" is its sibling, "What". This also produces an open-ended question and provides an investigative stance rather than a pushback accusatory stance. "Why should we put the button on the left" becomes "What do we intend to achieve with the button on the left".

Be careful not to sound dumb when asking "How" without context. Plainly throwing "How?" to the wind could be returned with "How what?". Paradise of confusion yeah.

"Why" still has its place, however, it's used sparingly, and understanding the emotional triggers it plucks when used, cannot be overly emphasized.

Here's to becoming better 🥂

William

This article was originally published on Hackmamba.

Aggregate Multiple API Requests with Promise.all()

William — Thu, 11 Feb 2021 07:37:29 +0000

I promise you’ll get a summary of this post at the end.
Asynchronous operations are at the backbone of implementing interactivity in modern JavaScript applications. These are used when making API calls, network requests, or even via a basic delay function.

Asynchronous operations utilize promises, callback functions, or async/await. Commonly, these operations are singular and do not require aggregation of multiple async operations into one.
Recently, I started working to build an aggregation service that utilizes multiple 3rd party APIs and aggregates the resulting data. In this post, we’ll learn how we make concurrent async requests using Promise.all() in JavaScript. Also, we'll learn how to limit these requests to run in certain groups/portions at a time.

Using Promise.all()

An async function to fetch data from an API typically looks like this:

async function fetchData() {
  const res = await axios.get("./names.json");
  console.log(res.data);
}

Here we utilize Axios, a promise-based HTTP client, to make an HTTP request to retrieve data in a local json file. An alternative to using async/await is to use the .then() method of a promise.

With Promise.all(), we handle multiple similar requests concurrently and return a single aggregated response. Promise.all() takes an iterable (an array) of promises. It returns an array containing each promise resolution in the same order.

If any of the promises in Promise.all() is rejected, the promise aggregation is rejected. Here's an example below:

const fetchNames = async () => {
    try {
      const res = await Promise.all([
        axios.get("./names.json"),
        axios.get("./names-mid.json"),
        axios.get("./names-old.json")
      ]);
      const data = res.map((res) => res.data);
      console.log(data.flat());
    } catch {
      throw Error("Promise failed");
    }
  };

This code sample is more elaborate and in a try/catch block to catch any failure in the promise resolution.

Promise.all() doesn't resolve the promises and only aggregates the promises into an array with a single resolution. I'll cut the crap; this means you need to use Promise.all() with an await or .then() to resolve it. 😁

.flat() is a useful array method that flattens the array. Previously, this would be done with a forloop or reduce function.

An alternative with the fetch API looks like this:

const fetchNames = async () => {
      try {
        const res = await Promise.all([
          fetch("./names.json"),
          fetch("./names-mid.json"),
          fetch("./names-old.json")
        ]);
        const data = await Promise.all(res.map(r => r.json()))
        console.log(data.flat());
      } catch {
        throw Error("Promise failed");
      }
};

After using fetch(), .json() is required to parse the response and it also returns a promise! Multiple promises, this is becoming a telenovela!

Another promise.all is required to aggregate the response.

To better understand the effect of Promise.all, we'll create a timing function that resolves a promise after a certain period.

Observing with timing functions

We'll create three promises with:

const promise1 = new Promise((resolve, reject) => {
    setTimeout(() => {
      const newValue = Math.floor(Math.random() * 20);
      resolve(newValue);
    }, 5000);
  });

  const promise2 = new Promise((resolve, reject) => {
    setTimeout(() => {
      const newValue = Math.floor(Math.random() * 20);
      resolve(newValue);
    }, 8000);
  });

  const promise3 = new Promise((resolve, reject) => {
    setTimeout(() => {
      const newValue = Math.floor(Math.random() * 20);
      resolve(newValue);
    }, 2000);
  });

Each promise resolves at different times of five, eight, and two seconds respectively.

Calling each function separately in an async/await will return the resolved value of each after the set period. Aggregating the result will require further JavaScript operation to build an array.

Calling all in Promise.all() will resolve them all at the same time. In this case, in the time the function requiring the most time executes - 8 seconds.

Using Promise.all(), we have:

const fetchAsyncData = async () => {
    const res = await Promise.all([promise1, promise2, promise3]);
    console.log(res);
  };

It's an efficient and cleaner code for me. 😃

Limiting concurrency

Still, on efficiency, you may want to make large numbers of concurrent requests. Rather than make them all at once, it would be efficient to chunk them.

A useful npm package I found to do this is p-limit.

You can add it to your project using npm or yarn with:

npm install p-limit

yarn add p-limit

Create a limit and specify concurrency count with:

import pLimit from 'p-limit'

const limit = pLimit(2)

Use this limit in the promise with:

const res = await Promise.all([
      limit(() => promise1),
      limit(() => promise2),
      limit(() => promise3)
]);

This block runs two promises at a time.

Here's a CodeSandbox link with all the code blocks running in a React app and logging data to the console.

Summary

Just like promises in JavaScript, you knew this summary was coming. I told you at the beginning. This is just like promises in JavaScript. In this post, we saw how to make aggregated promise resolutions using Promise.all() and limit the concurrency where necessary using p-limit.

Other promise methods to check out include:

Promise.allSettled()
Promise.any()
Promise.race()
Here's to becoming better. 🥂

William

Manage Functionalities in Large Apps using Custom React Hooks

William — Tue, 09 Feb 2021 16:14:07 +0000

Since the introduction of React hooks, the creation and utilization of functional components became even more seamless. With useEffect and useState lifecycle methods previously available to class components are also available in functional components.

React's very purpose is to provide reusable blocks of code that form the various parts of an application. In this post, we'll explore how to use custom hooks to abstract component functionality reusable across a React application.

To follow through with this post, you should be conversant with React.js.

Why use custom hooks

You may wonder why you should even bother with writing custom React hooks when we can write your state and effect logic in the component and get to building the UI.

You are right.

It would be best if you mostly used a custom hook when you need to abstract a frequently used component functionality utilizing state and effect logic. Custom hooks are primarily present in large applications with multiple repetitive portions.

For example, in a b2b e-commerce marketplace application, you may require fetching order data or seller information in multiple components. You can handle this particular fetching operation every time a component requires the data, or you can make a hook to handle it. The same applies to fetching location data in an application where user location is required in multiple components. Here are some reasons why I use custom hooks in large projects:

Provides useful abstraction as the same hook can be used across multiple components.
Side effects like utility function calls, application state update, and singular hook requirements are managed independently with cleanups.
You can use multiple hooks in one component without clutter.
In Typescript, you want to have all the types in one place also, and not bloat the component code for readability.

If you don't have to handle this reusability, excuse my firm opinion, avoid the hasty abstraction, and don't use custom hooks.

Structure of custom hooks

Custom hooks are simply functions that encapsulate React useEffect and useState APIs.
They take parameters as specified and return data. The data could be an array, object, and primitive data types as specified.

Within the hook, all the magic happens. This hook is used across components. The result is a cleaner and well-organized codebase.

Here's what a custom hook looks like that fetches data for an order, showing the various parts in comments:

import { useEffect, useState } from "react";

// hook definition
function useGetOrder(input) {
  const { id } = input;

  // component state creation
  const [orderId, setOrderId] = useState(id);
  const [isLoading, setIsLoading] = useState(false);
  const [hookData, setHookData] = useState(undefined);

  // Function to run on first load
  useEffect(() => {
    setIsLoading(true);

    // fetch data
    const fetchData = async () => {
      let orderData;
      try {
        orderData = await getOrder(orderId);
      } catch (e) {
        throw Error(e);
      }
      setHookData(orderData);
      setIsLoading(false);
    };

    fetchData();

    // handle cleanup
    return async () => {
      await unMountFn();
    };
  }, [orderId]);

  // hooks return array
  return [{ isLoading, hookData }, setOrderId];
}

// export hooks
export { useGetOrder };

From the snippet above, we can see the hook has the following parts:

Module import (useState & useEffect)
Function arguments restructuring
State creation
Component mount logic in useEffect
Component unmount logic (returned in useEffect)
Component update variable
Hooks return data
Hooks export

This hook depicts a data fetching operation on receipt/update of an input variable orderId.

Instead of fetching data in useEffect, you could use a web API to transform data, and you could store data in the application state (if it's a valid use case) or call a utility function.

Custom hooks in action

Below is the hook we shared earlier to fetch an order data in use. With a familiar file name of useGetOrder.js, we have the following content:

import { useEffect, useState } from "react";

// API call to get data
async function getOrder(id) {
  const res = await fetch("./order.json");
  const data = await res.json();
  return data;
}

// unmount Function
async function unMountFn(data) {
  // handle any cleanup process
}

// hook definition
function useGetOrder(input) {
  const { id } = input;

  // component state creation
  const [orderId, setOrderId] = useState(id);
  const [isLoading, setIsLoading] = useState(false);
  const [hookData, setHookData] = useState(undefined);

  // Function to run on first load
  useEffect(() => {
    setIsLoading(true);

    // fetch data
    const fetchData = async () => {
      let orderData;
      try {
        orderData = await getOrder(orderId);
      } catch (e) {
        throw Error(e);
      }
      setHookData(orderData);
      setIsLoading(false);
    };

    fetchData();

    // handle cleanup
    return async () => {
      await unMountFn();
    };
  }, [orderId]);

  // hooks return array
  return [{ isLoading, hookData }, setOrderId];
}

// export hooks
export { useGetOrder };

In the hook, we created functions to fetch data from a local json file, a function to be called on component destruction, and the hook's definition.

The hook function takes an input, and in the hook definition, we create state variables to hold the input data, loading state, and hooks data.

NB: The input data in this function is for reference and not utilized in the hooks logic

The hook returns an array containing an object in the first index to retrieve the loading state and the hook data. setOrderId, which modifies the input data, is assigned the second index.

This hook is used in a component to fetch order data like this:

import React from "react";
import { useGetOrder } from "../hooks/useGetOrder";

const HomeOrder = () => {
  const [{ isLoading, hookData }, setOrderID] = useGetOrder(123);

  return (
    <div>
      <h3>Home Order</h3>
      {isLoading && <p>Fetching order ⏳</p>}
      {hookData && (
        <div>
          <p>ID: {hookData.id}</p>
          <p>Payment Captured: {hookData.paymentCaptured ? "True" : "False"}</p>
          <p>Amount: ${hookData.totalAmount}</p>
          <p>Shipping Fee: ${hookData.shippingFee}</p>
          <p>Shipping Address: {hookData.shippingAddress}</p>
          <p>User ID: {hookData.userId}</p>
          <h4>Order Items</h4>
          {hookData.products.map((product, key) => (
            <div key={key}>
              <p>
                {product.title} - ${product.price}
              </p>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export { HomeOrder };

The data, once fetched, can be used in the component. Rather than have the full state and mount logic in the component, we now have it as a hook that can be used by multiple components.

NB: Just as you cannot use native React hooks outside of a React component, custom hooks containing useState and useEffect also cannot be used outside a react component

Here's the final Codesandbox with the demo.

For large projects, you could do several optimizations and customizations to improve user experience and flexibility. These include:

Having a wrapper for custom hooks with Types and generic configurations.
Abstracting mount, unmount, error, and loading functions as parameters in the hooks definition.

Summary

In this post, we saw how to create a custom hook to handle reusable component logic in a React app. We also learned why we use custom hooks and how custom hooks look.

To a better 2021, and happy new year!

William.

This article was originally published on Hackmamba