DEV Community: Chris

React - Testing Network Requests in 3 Simple Steps

Chris — Sat, 11 Sep 2021 19:47:12 +0000

Want to test your React app when making a fetch request? This article will go over how to integrate msw(Mock Service Worker) to intercept a specific network request made on your app. To test and make sure our app behaves as intended.

1. Creating our Component

The component that we will be testing will be simple. The component will fetch the randomuser API to retrieve a random first and last name. And then display a text on the screen The name is {firstname} {lastname}.

First, create a React App using npx create-react-app. Then run npm install axios msw in the terminal to install axios andmsw(Mock Service Worker) as a dependency. Lastly, we'll build our component in App.js.

import { useState, useEffect } from "react";
import axios from "axios";
const url = 'https://randomuser.me/api/?inc=name'

export default function App() {
  const [fullName, setFullName] = useState('')
  useEffect(() => {
    axios.get(url)
    .then(({data}) => {
      const {first, last} = data.results[0].name
      setFullName(`${first} ${last}`)
    })
  }, [])

  return (
    <div className="App">
      <p>The name is {fullName}</p>
    </div>
  );
}

We use useEffect to make our fetch request when the component mounts. Then we extract the first and last and update our fullName state. And at the end, we return our JSX to print out the text, including the full name from our state. If you run npm start everything should display correctly.'

2. MSW(Mock Service Worker) Setup

To set up our msw, we first create a new mocks folder in our src directory. Then create two files in our mock directory. The first file will be named server.js, and the second will be handlers.js.documentation reference

Now go into your handlers.js file and paste the code below.

import { rest } from 'msw';

export const handlers = [
  rest.get('https://randomuser.me/api', (req, res, ctx) => {
    return res(
      ctx.json({
        results: [
          {
            name: {
              title: "Mrs",
              first: "Chris",
              last: "Lemus"
            }
          }
        ],
      })
    );
  }),
];

Here we add the response data to any network request whenever we run our test. And the handlers array to store all of our mock server responses. For this demo, we only need to add a mock server response for a GET request made to https://randomuser.me/api/?inc=name.
The response will return an object containing data for the first name and last name, in the same format our randomuser API would respond.

Next, paste the code below into server.js to set up the server.

// src/mocks/server.js
import { setupServer } from 'msw/node';
import { handlers } from './handlers';

// This configures a request mocking server with the given request handlers.
export const server = setupServer(...handlers);

The last step to setting up our msw is to update our React test configuration; this will intercept all network requests specified in our handlers. So paste the code below into setupTests.js in the src directory. Reference to the code provided can be found on the msw documentation.

import { server } from './mocks/server.js'
// Establish API mocking before all tests.
beforeAll(() => server.listen())
// Reset any request handlers that we may add during the tests,
// so they don't affect other tests.
afterEach(() => server.resetHandlers())
// Clean up after the tests are finished.
afterAll(() => server.close())

3. write test

Finally, we write the test in App.test.js.

import { render, screen } from '@testing-library/react';
import App from './App';

test('displays name from api correctly', async() => {
  render(<App />);
  const text = await screen.findByText(/chris lemus/ig);
  expect(text).toBeInTheDocument();
});

The test ensures that the name is printed correctly after making the network request. Since we will be making a network request in our App.js component, we will provide an asynchronous callback function for our test.

The last step will be to run npm test, where our test should run successfully.

React, Jest, and Testing Library - Quick Overview

Chris — Sun, 05 Sep 2021 15:22:45 +0000

This is a quick overview of creating tests using React, Testing Library, and Jest. Below you will find all the code writing for this project.

Styles in `App.css`

.App {
  margin: 20px;
  font-weight: bold;
}

App Component in `App.js`

import './App.css';
import { useState } from 'react';

export const multiplyByTwo = (num) => {
  return num * 2;
};

export default function App() {
  const [value, setValue] = useState(null);
  const total = multiplyByTwo(value);
  const resultsColor = isNaN(total) ? 'red' : 'darkgreen';

  return (
    <div className="App">
      <label htmlFor="value">Enter value</label>
      <input onChange={(e) => setValue(e.target.value)} id="value" />
      <p style={{ color: resultsColor }}>
        {value || 0} * 2 is: {total}
      </p>
    </div>
  );
}

Tests in `App.test.js`

import { multiplyByTwo } from './App';
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import App from './App';

describe('multiplyByTwo function works correctly', () => {
  test('2 should equal 4', () => {
    expect(multiplyByTwo(2)).toBe(4);
  });
  test('15 should equal 30', () => {
    expect(multiplyByTwo(15)).toBe(30);
  });
});

test('displays correct sum and color for valid input', () => {
  render(<App />);

  const inputElement = screen.getByLabelText(/enter value/i);
  const totalElement = screen.getByText('* 2 is:', { exact: false });

  userEvent.clear(inputElement);
  userEvent.type(inputElement, '50');
  expect(totalElement).toHaveTextContent('100');
  expect(totalElement).toHaveStyle({ color: 'darkgreen' });
});

test('displays red color and NaN for invalid input', () => {
  render(<App />);

  const inputElement = screen.getByLabelText(/enter value/i);
  const totalElement = screen.getByText('* 2 is:', { exact: false });

  userEvent.clear(inputElement);
  userEvent.type(inputElement, 'dwed');
  expect(totalElement).toHaveTextContent('NaN');
  expect(totalElement).toHaveStyle({ color: 'red' });
});

Redux - Write less code with Immer

Chris — Fri, 27 Aug 2021 20:50:50 +0000

Thanks for watching. I am currently covering simple topics to optimize my production set up. And to find the best ways to visually display educational content.

Feel free to check out the project's repo here.

WebApp Sandboxing & Challenges of Executing User's Code

Chris — Fri, 20 Aug 2021 22:21:16 +0000

I've recently wanted to create a web app(in javascript) that has an online code editor and executes a user's code. I expected the code editor implementation to be a simple task. And that I could use the eval() JS function to evaluate the user's code. But I soon found out that there is a significant security flaw to this approach. So in this blog, I will go over some security challenges you need to think about when executing a user's code.

Preventing your app from crashing

Sandboxing is an excellent way to prevent your app from crashing and provide better security. Sandboxing refers to creating two separate environments, one for executing untested code and another for your production environment(your app). Failing to isolate the two environments will likely crash your app when the user's code throws an error. Or when the user manipulates the DOM in a way that is not intended.

Want to see how DOM manipulation could render your app useless? Visit any site on your browse and run the code below in the browser's developer tools console.

document.querySelector('body').innerHTML = ''

If you executed the code above, your browser's window would be blank, similar to the image above.

Avoid sharing malicious code

When it comes to security, you need to be careful if you plan on letting users share code similar to the CodePen site. The main concern with code sharing is that other users may accidentally run malicious code and expose sensitive data.

Want to see how easy it is to expose sensitive information on the browser? For our next example, I will visit Facebook's homepage and run the code below in the console. The code will add an event listener to all the inputs and extracts the value.

const inputs = document.querySelectorAll('input')
const logInputValue = (e) => console.log(e.target.value)
inputs.forEach(input => input.addEventListener('change', logInputValue))

Even though the code logs the login credentials to the console, a malicious user can instead send the login credentials to themselves, thus making the account vulnerable. Not only are we able to access input values, but there are also vulnerabilities you should be aware of, such as allowing access to local storage.

A simple solution to sandboxing

There are a couple of ways of creating a sandboxed environment. A common way that most online editors create a sandboxed environment is by running multiple servers. One server will run the app, and another will receive, bundle, and send back the code preview.

Luckily, you could also achieve similar results using the iframe HTML element. If you would like to follow along, open your favorite code editor and create a new index.html file. Then add the code below into your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>

</head>
  <body>
    <iframe sandbox="allow-scripts"  srcdoc="
      <html> 
        <body>
          <textarea></textarea>
          <button id='submit-btn'>Submit</button>

        </body>
      </html>">

    </iframe>
  </body>
</html>

Now let's go over the two attributes we've provided to our iframe element. The sandbox attribute adds multiple restrictions to the iframe element. By default, all restrictions will apply to the iframe if you provide an empty string to the sandbox attribute. And any value token provided to sandbox will lift the particular restriction. In this case, we just want to run javascript code, so we'll provide allow-scripts as a value to the sandbox attribute.

The srcdoc attribute is straightforward. Instead of providing an external link to the iframe content. We use srcdoc to provide the content directly to our iframe HTML element.

How can we confirm that both environments have restricted access?

Want to make sure that your iframe element has restricted access? Follow the steps below. Please note that I will be using google chrome as my browser for this demo.

Open the index.html file in your browser running a live server. If you are using VSCode, you can right-click on the HTML file and select Open with Live Server
Open the developer tools; Option + ⌘ + J (on macOS), or Shift + CTRL + J (on Windows/Linux). 3.Navigate to the Console tab.
If you run the localStorage command in the console, you will get information about your local storage.
Now select your iframe element in the Javascript Context dropdown and run the localStorage command once more. And this time, you will receive an error because we have successfully restricted access to the iframe element.

Sandboxing and executing the user's code using iframe is a fast and straightforward solution, though it might not be the best for all applications. Therefore, I advise that you do further research to provide a secured sandboxed environment for your users. I hope this article has helped you understand how sandboxing works and some things you should be aware of when building out your project.

Advice for Aspiring Software Engineers

Chris — Sat, 14 Aug 2021 13:49:53 +0000

As a junior software engineer, I wanted to share my personal experience and advice with other aspiring software engineers. Perhaps you may have a different perspective of some topics and might not agree with everything in this post. But I hope that you find some of the content helpful.

Programming Languages

Learning your first programming language can be overwhelming and exciting. But after some practice, it will all start to make sense. I had many failed attempts when trying to learn a programming language. I would start strong but constantly get ahead of myself and get discouraged when examining how long it would take to build a full-fledged web app.

Luckily one day, I committed to enroll and complete a four-month programming course. It was pretty challenging, and I wanted to back out at the beginning. But after a month of constant learning, I was hooked on software engineering and had no plans on stopping. One of the biggest motivators was that the course was rather expensive, $250 a month. So the pain of not completing the course was much more significant than following through with my commitment, even though I felt utterly lost initially.

The good news is that learning your second programming language won’t be as hard as your first programming language. And a large number of concepts, principles, and methods will transfer over.

What to Learn

Software Engineering requires non-stop learning. And there is an overwhelming amount of things you could learn. Initially, a big misconception was thinking that I had to memorize the documentation for a programming language or library. However, it's far more important to understand online documentations and getting in the habit of finding answers quickly.

If you plan to get a job as a software developer, the path can be a bit blurry sometimes. And there are countless suggestions online on what you should learn. But my advice would be to start by reading the job descriptions on the role that interests you the most. It would be best if you also took note of the job requirements. Then practice on a set number of technologies at a time.

If your role requires a specific web framework like React, you should constantly build projects using that framework. But for the most part, interviews may consist of algorithm problems. Or small problems/assessments that do not require external libraries/tools. Therefore, instead of learning multiple libraries, I would suggest sharpening your skills for particular programming languages and the environments they will run. Examples of javascript would be learning more about how classes are different from other languages, the event loop, or new ECMAScript syntax. In addition to how browsers interpret javascript, the DOM, rendering methods, performance, etc.

Learning Methods

Sometimes I would fall into the trap of binge-watching tutorials. But some things that have helped increase my productivity are constantly building projects, breaking things apart, teaching what I’ve learned, and using the Pomodoro Technique.

When learning new topics, I would start by writing small scripts to implement what I am learning. But my understanding significantly improves when I try to build out a rather large project where my thought process and planning have to be more organized.

If some things don’t make sense after a while, I will break things apart. An example of this is when I was working with ORM(Object Relationship Mapping) libraries. I would constantly revisit the docs and previous projects. But things became clear when I built out small projects, and instead of using an external ORM library, I would create my version of the library.

Teaching has also been scientifically proven to help with learning as well.

Lastly, I would suggest looking into the Pomodoro Technique. The technique suggests that you should work for a set amount of time, traditionally 25minutes, while taking a short break (between five to ten minutes). This technique helps me gain more clarity. Sometimes, my productivity declines whenever I am working non-stop or frustratingly trying to debug a problem. But a small break has helped boost my productivity.

I hope you find some of the advice helpful. And even though you may encounter many ups and downs in your journey as an aspiring software engineer. Just try to push through, and you reap the benefits in the end.

Array methods and callback functions for beginners

Chris — Sat, 07 Aug 2021 16:56:23 +0000

Callbacks functions and array methods can confuse some people when starting their journey as a developer. So let's reinforce our knowledge on Array methods and callbacks functions by breaking things down and going over some examples.

Callback functions

First, we'll go over callback functions. A callback function is a function passed to another function as a parameter.

const add = (a,b) => {
  return a + b
}

function multiply(a,b) {
  return a*b
}

const solutionLogger = (a,b, callback) => {
  const solution = callback(a, b)
  console.log('the solution is ' + solution)
}

solutionLogger(2,4, add) //the solution is 6
solutionLogger(2,5, multiply) //the solution is 10

In the code above add() and multiply() would be our callback function. Both functions are provided to solutionLogger(). solutionLogger() then calls the callback function and logs out the solution.

Breaking down Array.map()

Suppose we had a list of numbers [1,2,3]. And we want to add 2 to each number in our list. For now, let's create a function to solve our problem without using any array methods.

function addTwo(numberList) {
  const newList = []
  for(let i = 0; i < numberList.length; i++) {
    const currentNumber = numberList[i]
    const updatedNumber = currentNumber + 2
    newList.push(updatedNumber)
  }
  return newList
}

addTwo([1,2,3]) // [3,4,5]

Our solution works great right now. But is there a way to make the solution more flexible? And instead of just limiting ourselves to running math operations on each number in the list, what if we could mutate each number in various other ways? Luckily we can... with callback functions!

const addCallback = (number) => number + 2;

const multiplyCallback = (number) =>  number * 3;

const indexAndNumber = (number, index) => `${number} + ${index} = ${number + index}`

function mutate(numberList, callback) {
  const newList = []
  for(let index = 0; index < numberList.length; index++) {
    const currentNumber = numberList[index]
    const updatedNumber = callback(currentNumber, index)
    newList.push(updatedNumber)
  }
  return newList
}

const numberList = [1,2,3]

mutate(numberList, addCallback) // [ 3, 4, 5 ]
mutate(numberList, multiplyCallback) // [ 3, 6, 9 ]
mutate(numberList, indexAndNumber) 
//[
//  'index is 0 & number is 1',
//  'index is 1 & number is 2',
//  'index is 2 & number is 3'
//]

To better describe what our updated function does. We need to rename the function from addTwo to mutate. The two other minor changes we made to our mutate function were adding a callback parameter and using the callback's returned value to mutate each item in an array. We also provide the item's value and index to our callback.

I have also created three separate callback functions to test out the mutate function. addCallback and multiplyCallback are pretty straightforward; we run math operations on each item and return the new value. But what's more interesting is the indexAndNumber function. Not only does indexAndNumber uses the additional index parameter. But the function also changes the data type for all of the items in our array. Instead of having an array of numbers, we now have an array of strings.

Anonymous callback functions

function mutate(numberList, callback) {
  const newList = []
  for(let index = 0; index < numberList.length; index++) {
    const currentNumber = numberList[index]
    const updatedNumber = callback(currentNumber, index)
    newList.push(updatedNumber)
  }
  return newList
}

const numberList = [1,2,3]

mutate(numberList, (number, index) => {
  return `index is ${index} & number is ${number}`
})
// [
//   'index is 0 & number is 1',
//   'index is 1 & number is 2',
//   'index is 2 & number is 3'
// ]

In our previous example, we've stored one of the callback functions in a variable called indexAndNumber. But another way of obtaining the same results without declaring a new variable is by using an anonymous function. In the example above, we provide an anonymous function directly as a parameter to our mutate function.

Putting everything together

function mutate(numberList, callback) {
  const newList = []
  for(let index = 0; index < numberList.length; index++) {
    const currentNumber = numberList[index]
    const updatedNumber = callback(currentNumber, index)
    newList.push(updatedNumber)
  }
  return newList
}

const numberList = [1,2,3]

mutate(numberList, (number, index) => {
  return `index is ${index} & number is ${number}`
})
// [
//   'index is 0 & number is 1',
//   'index is 1 & number is 2',
//   'index is 2 & number is 3'
// ]

numberList.map((number, index) => {
  return `index is ${index} & number is ${number}`
})
// [
//   'index is 0 & number is 1',
//   'index is 1 & number is 2',
//   'index is 2 & number is 3'
// ]

Finally, let's compare our solution Array.map(). We've created a function that mimics Array.map(). Like many other helper methods available for different data types, like Arrays or Objects. Helper methods basically allow us to manipulate our data while writing less code.

Thanks for reading! And I hope this breakdown was helpful.

React Hook Form - Simple Todo List

Chris — Sun, 01 Aug 2021 22:54:04 +0000

Today we'll play around with React Hook Form library and build a simple to-do list project.

Creating a form using React is straightforward. But things start to get more tricky when the form requires multiple inputs/validations, responsive UI, validation, and external data. Luckily React Hook Form is one of many libraries that improve the developer experience when creating web forms. The library promises to make it easier for developers to add form validation and build performant forms.

So let us test out the React Hook Form library by building a simple to-do list project. This quick guide will not go over styling/CSS but instead focus on building out the components. Feel free to clone and play around with the finished project here.

File structure

The image above illustrates how our file structure will look like, so feel free to remove any additional files that come included after creating a new react app.

Styling

The styling is quite long and will take too much space on this page. So feel free to copy/past the styling from the project's repo into the app.css file.

And make sure to import the stylesheet by adding the code below into index.js.

import React from 'react';
import './styles/app.css';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

Building our Components

For the structure of our project, we will have our parent component, app.js. And two child components, TaskList.js and NewTask.js. So let's get started with the app.js.

Parent Component - App.js

import { useState } from 'react';
import NewTaskForm from './components/NewTaskForm';
import TaskList from './components/TaskList';

const defaultTasks = [
  { id: 1, completed: false, label: 'buy pickle' },
  { id: 2, completed: true, label: 'buy ketchup' },
];

const uniqueId = () => Math.floor(Math.random() * Date.now());

export default function App() {
  const [tasks, setTasks] = useState(defaultTasks);

  const completeTaskHandler = (taskId) => {
    const updatedTasks = tasks.map((task) => {
      const completed = !task.completed;
      return task.id === taskId ? { ...task, completed } : task;
    });
    setTasks(updatedTasks);
  };

  const deleteTaskHandler = (taskId) => {
    setTasks(tasks.filter(({ id }) => taskId !== id));
  };

  const newTaskHandler = (label) => {
    const newTask = {
      id: uniqueId(),
      completed: false,
      label,
    };
    setTasks([...tasks, newTask]);
  };

  return (
    <div className="container">
      <NewTaskForm newTaskHandler={newTaskHandler} />
      <TaskList
        tasks={tasks}
        completeTaskHandler={completeTaskHandler}
        deleteTaskHandler={deleteTaskHandler}
      />
    </div>
  );
}

First, we will import our child components and the useState hook. Then as the name implies, our defaultTasks variable will store our default tasks. Each task will require an id, completed, and label property. Since we need a unique id for each task, we will create a helper function called uniqueId to generate an id.

Now let's use the useState hook to store all of our tasks. And create three separate functions for creating, deleting, and marking a task as complete. Lastly, we will return our JSX containing our child components. While making sure we provide the required properties for each component

Child Component #1 - TaskList.js

export default function TaskList({
  tasks,
  completeTaskHandler,
  deleteTaskHandler,
}) {
  tasks.sort((a, b) => a.completed - b.completed);
  return (
    <div>
      {tasks.map(({ label, completed, id }) => (
        <div key={id} className={`task ${completed && 'task--completed'}`}>
          <button
            className="task__complete-button"
            onClick={() => completeTaskHandler(id)}
          />
          <p className="task__label">{label}</p>
          <button
            className="task__delete-button"
            onClick={() => deleteTaskHandler(id)}
          >
            🗑
          </button>
        </div>
      ))}
    </div>
  );
}

The TaskList component will use object destructuring to use the props provided by the parent component. And the 'sort' method will be called on our tasks array to display the uncompleted tasks at the top and the completed tasks at the bottom. Finally, we will iterate through each task to create our HTML elements.

Child Component #2 - NewTaskForm.js

import { useForm } from 'react-hook-form';
export default function NewTaskForm({ newTaskHandler }) {
  const { register, handleSubmit, reset, formState, clearErrors } = useForm({
    shouldUnregister: true,
    defaultValues: { label: '' },
  });

  const onSubmit = (data) => {
    newTaskHandler(data.label);
    reset();
    clearErrors();
  };

  const errors = Object.values(formState.errors);
}

We will now import the useForm hook from the React Hook Form library, which takes optional arguments. The shouldUnregister will be set to true to unregister input during unmount. And for the defaultValues property, we will set the default value for the task label input.

The useForm hook returns an object containing information about our form and helper functions to manipulate our form. Therefore destructuring assignment is used to access the register, handleSubmit, reset, formState, and clearErrors property.

Next, an onSubmit function is created to handle the form submission. First, the function will trigger the newTaskHandler while passing down the new task label from our form data. Then reset will reset the input values in our form. And finally, clearErrors as the name states will clear out all the form errors.

  return (
    <form className="new-task-form" onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="task">New Task</label>
      <input
        id="task"
        {...register('label', {
          required: 'task cannot be blank',
          validate: {
            lessThanTwenty: (v) =>
              v.length <= 20 || 'Task cannot be longer than 20 characters.',
          },
        })}
      />
      <ul className="error-messages">
        {errors.map((error) => (
          <li>{error.message}</li>
        ))}
      </ul>
      <button type="submit">add</button>
    </form>
  );

The last step will be to return the JSX. The React Hook Form's handleSubmit function is passed down to the form's onSubmit property; notice we also provide the onSubmit callback function to hadleSubmit as well.

For the input element, we will use the React Hook Form's register function. The first argument will be the name of the input, label. And the second argument is a configuration object. In our case, we will only set the validation settings, the field cannot be blank, and the field length cannot be longer than twenty. The last step is to use the spread operator to give the input access to all the properties provided by React Hook Form.

Here is how the final code for the NewTaskForm should look.

import { useForm } from 'react-hook-form';
export default function NewTaskForm({ newTaskHandler }) {
  const { register, handleSubmit, reset, formState, clearErrors } = useForm({
    shouldUnregister: true,
    defaultValues: { label: '' },
  });

  const onSubmit = (data) => {
    newTaskHandler(data.label);
    reset();
    clearErrors();
  };

  const errors = Object.values(formState.errors);

  return (
    <form className="new-task-form" onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="task">New Task</label>
      <input
        id="task"
        {...register('label', {
          required: 'task cannot be blank',
          validate: {
            lessThanTwenty: (v) =>
              v.length <= 20 || 'Task cannot be longer than 20 characters.',
          },
        })}
      />
      {errors.length > 0 && (
        <ul className="error-messages">
          {errors.map((error) => (
            <li>{error.message}</li>
          ))}
        </ul>
      )}
      <button type="submit">add</button>
    </form>
  );
}

Merge Sort

Chris — Sat, 24 Jul 2021 00:43:09 +0000

Currently going over some algorithms and wanted to create a short walkthrough video.

Here is the code used in this video.

function merge(arr1, arr2) {
  let results = [];
  let idx1 = 0;
  let idx2 = 0;
  while (idx1 < arr1.length && idx2 < arr2.length) {
    if (arr1[idx1] < arr2[idx2]) {
      results.push(arr1[idx1]);
      idx1++;
    } else {
      results.push(arr2[idx2]);
      idx2++;
    }
  }
  while (idx1 < arr1.length) {
    results.push(arr1[idx1]);
    idx1++;
  }
  while (idx2 < arr2.length) {
    results.push(arr2[idx2]);
    idx2++;
  }
  return results;
}

function mergeSort(arr) {
  if (arr.length <= 1) return arr;
  let mid = Math.floor(arr.length / 2);
  let left = mergeSort(arr.slice(0, mid));
  let right = mergeSort(arr.slice(mid));
  return merge(left, right);
}

Heroku Free Plan: How to improve user experience

Chris — Sun, 18 Jul 2021 18:17:37 +0000

Do you have multiple projects hosted on Heroku? Today, I will show you a workaround for dealing with Heroku's 10-30 secs load times and provide a better experience for your users.

Heroku can be a great PaaS solution for quickly deploying your projects/portfolio and sharing it on the web. But a significant drawback is that your app will go to sleep after 1 hour of inactivity. So unless you are planning on paying for the service, users viewing your project will often have to wait between 10-30 seconds before your app wakes again. You can find more information on this topic here.

There's nothing worst than putting lots of work on a project to have most of your users clicking away. So today, I will show you how to improve the user experience of slow loading times and increase your user retention rate in three simple steps.

Step 1: Setup

You will need to create a loading page to provide user feedback(eg. progress bar) and redirect the user to your app once your Heroku app has woken up. You should host the loading page on a site that will respond to a user request right away, such as Netlify or Vercel. And the page must handle dynamic routing to retrieve the project id from the URL parameters. I decided to add a loading page to my portfolio site that I've built using NextJS and hosted on Netlify.

Step 2: storing your data and routing

You should have a place to store all the information about your projects. I decided to create a separate JSON file. Each project must have a unique ID and a link to your app hosted on Heroku. Every time a user visits your loading page, we will use the project's ID to retrieve the app's URL hosted on Heroku.

Step 3: Fetch and Redirect

Now that we have the Heroku URL, we will make a fetch request to this URL and wait for a response. In the meantime, we can show a loading progress bar to the user. Then redirect the user once Heroku responds to our fetch request. And that's all!

Progress bar animation

Here is how I configured my progress bar animation to provide user feedback.

On average, a Heroku app will take 10-15 seconds to wake up. Therefore I configured my progress bar to fill up to 97% within 15 seconds. If the Heroku app responds before the 15 seconds are up, I will redirect the user to my Heroku app. And if that Heroku takes longer than 15 seconds to load, I would redirect the user either way. I figured that after 15 seconds have gone by, the user will most likely click away due to the long wait time.

And the final product...

Thanks for reading, and I hope this article helps you showcase your projects to more people.

Advantages of using Bulma CSS framework

Chris — Wed, 12 May 2021 21:28:25 +0000

Reusable styling is extremely helpful for developers that want to focus on their program logic while providing a pleasing interface to the end-user. While Material UI is a popular styling framework that offers a great array of styled-components. Here is why I often lean towards using Bulma CSS Framework.

Smaller package size

Since Bulma is a pure CSS/SCSS styling framework, the total file size is much smaller compared to other styling frameworks that included Javascript for functionality.

Here is a comparison of the total package size for different styling frameworks.
Bulma 1.3 MB entire project file
bulma.css.min 204 KB the minified filed used in production

material-ui-next 48 MB

Customization

When it comes to customizing styles, less work is needed when using Bulma.

customizing a primary style color on Bulma

$purple: #3f51b5;
$primary: $purple;

customizing a primary style color on Maerial UI

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    }
  }
})


function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>,
  );
}

Awesome helper classes

With styling frameworks that are not purely SCSS/CSS like Material UI, you will need to import the component from wherever they are stored in your project.

But with pure CSS/SCSS styling frameworks you can style your HTML elements by simply adding a class attribute.

<button class="button">Button</button>

What if I want to add margin to the top and bottom of my HTML element? I simply add a my-3 to my class attribute!

<button class="button my-3">Button</button>

The best thing about Bulma is that it will work on any front-end project environment because its pure CSS. Personally, it doesn't feel natural to use a programming language to customize CSS styling quite often, especially when doing so requires 20 times more typing compare to if I just edit the CSS directly. Even if you are not confident with CSS I recommend giving Bulma a try, the styles are great, and the documentation is awesome!

stopwatch using javascript - accurate and easy

Chris — Fri, 02 Apr 2021 15:16:47 +0000

Overview

On a recent project, I needed to create a stopwatch. My initial thought was just to run javascript setInterval to keep track of time. While setInterval will be useful in our case, I made the mistake of depending on the setInterval alone to estimate time. Here is an example of what my code looked like in the beginning.

let totalSeconds = 0
setInterval(() => {
   totalSeconds += 1
}, 1000)

The problem was that the code above is not a good way to keep track of time. Because, even though our setInterval will call our callback function every second, it won't always execute the function at exactly one-second intervals. This is because our callback function will only be added to our call stack, but if the call stack has other work to execute, it will cause a delay in our time. Instead, let's build a more accurate stopwatch using javascript Date() constructor.

HTML and CSS

First, lets create a canvas we can work on. Here are the HTML and CSS used for this exercise.

HTML

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>

    <div class="stopwatch-wrapper">
      <p class="stopwatch">00:00:00:00</p>
      <div class="control-buttons-wrapper">
        <button id="main-button" class="control-buttons">Start</button>
        <button id="clear-button" class="control-buttons">Clear</button>
      </div>
    </div>
    <script src="/stopwatch.js" ></script>
  </body>
</html>

CSS

* {
  font-family: sans-serif;
}

.stopwatch-wrapper {
  display: flex;
  justify-content: center;
  flex-direction: column;
  margin: 100px auto 0;
  width: fit-content;
  padding: 10px;
  box-shadow: 0 0px 2.2px rgba(0, 0, 0, 0.031), 0 0px 5.3px rgba(0, 0, 0, 0.044),
    0 0px 10px rgba(0, 0, 0, 0.055), 0 0px 17.9px rgba(0, 0, 0, 0.066),
    0 0px 33.4px rgba(0, 0, 0, 0.079), 0 0px 80px rgba(0, 0, 0, 0.11);
  border-radius: 5px;
}

.stopwatch {
  margin: 0 auto;
  text-align: center;
  font-size: 60px;
}

.control-buttons-wrapper {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}
.control-buttons-wrapper button {
  outline: none;
  cursor: pointer;
  color: #fff;
  border: none;
  border-radius: 5px;
  font-size: 25px;
  margin: 0 10px;
  padding: 3px 8px;
}
.control-buttons-wrapper button:active {
  opacity: 0.7;
}
#clear-button {
  background: rgb(187, 187, 187);
}
#main-button {
  background: rgb(0, 146, 231);
}

Writing our program

We will break down our program into four steps

Creating our variables
Add event listener to our buttons
Creating our stopwatch function
Creating a function to display our time to the DOM

So let's get started!

1.Creating our variables

create our constants variables to store the elements we'll be using. And an additional object variable called stopwatch to store all data required for our program.


const time = document.querySelector('.stopwatch')
const mainButton = document.querySelector('#main-button')
const clearButton = document.querySelector('#clear-button')
const stopwatch = { elapsedTime: 0 }

2. Adding Event Listiners to buttons

for our main button we will create a condition based on the text of the button. If the user clicks our mainButton with Start text; we will call our startSTopwatch() function and update the button text. Else we will keep track of our elasped time in stopwatch.elapsedTime and stop our stopwatch interval.

mainButton.addEventListener('click', () => {
  if (mainButton.innerHTML === 'Start') {
    startStopwatch();
    mainButton.innerHTML = 'Stop'
  } else {
    stopwatch.elapsedTime += Date.now() - stopwatch.startTime
    clearInterval(stopwatch.intervalId)
    mainButton.innerHTML = 'Start'
  }
})

Our second event listener will trigger when our clear button is clicked.

clearButton.addEventListener('click', () => {
  stopwatch.elapsedTime = 0
  stopwatch.startTime = Date.now()
  displayTime(0, 0, 0, 0)
})

3. Creating our stopwatch function

Here is our stopwatch function. I've added inline comments for a better explanation.

Instead of relying solely on the setInterval(), we are comparing the start time and calculation the difference based on the current time. I have set the interval to 100 milliseconds, but you may change this if you wish. If accuracy is not an issue, you can increase the interval to 1,000; otherwise, the shorter the intervals, the more accurate your time records will be. I

function startStopwatch() {
  //reset start time
  stopwatch.startTime = Date.now();
  // run `setInterval()` and save the ID
  stopwatch.intervalId = setInterval(() => {
    //calculate elapsed time
    const elapsedTime = Date.now() - stopwatch.startTime + stopwatch.elapsedTime
    //calculate different time measurements based on elapsed time
    const milliseconds = parseInt((elapsedTime%1000)/10)
    const seconds = parseInt((elapsedTime/1000)%60)
    const minutes = parseInt((elapsedTime/(1000*60))%60)
    const hour = parseInt((elapsedTime/(1000*60*60))%24);
    displayTime(hour, minutes, seconds, milliseconds)
  }, 100);
}

4. Creating a function to display our time to the DOM

Lastly, we need to display our time to the user. First, I am adding a leading zero if any time measurement is less than 10(optional). Then I am updating the text within our time HTML element.

function displayTime(hour, minutes, seconds, milliseconds) {
  const leadZeroTime = [hour, minutes, seconds, milliseconds].map(time => time < 10 ? `0${time}` : time)
  time.innerHTML = leadZeroTime.join(':')
}

Final Code

const time = document.querySelector('.stopwatch')
const mainButton = document.querySelector('#main-button')
const clearButton = document.querySelector('#clear-button')
const stopwatch = { elapsedTime: 0 }

mainButton.addEventListener('click', () => {
  if (mainButton.innerHTML === 'Start') {
    startStopwatch();
    mainButton.innerHTML = 'Stop'
  } else {
    stopwatch.elapsedTime += Date.now() - stopwatch.startTime
    clearInterval(stopwatch.intervalId)
    mainButton.innerHTML = 'Start'
  }
})

clearButton.addEventListener('click', () => {
  stopwatch.elapsedTime = 0
  stopwatch.startTime = Date.now()
  displayTime(0, 0, 0, 0)
})

function startStopwatch() {
  //reset start time
  stopwatch.startTime = Date.now();
  //run `setInterval()` and save id
  stopwatch.intervalId = setInterval(() => {
    //calculate elapsed time
    const elapsedTime = Date.now() - stopwatch.startTime + stopwatch.elapsedTime
    //calculate different time measurements based on elapsed time
    const milliseconds = parseInt((elapsedTime%1000)/10)
    const seconds = parseInt((elapsedTime/1000)%60)
    const minutes = parseInt((elapsedTime/(1000*60))%60)
    const hour = parseInt((elapsedTime/(1000*60*60))%24);
    //display time
    displayTime(hour, minutes, seconds, milliseconds)
  }, 100);
}

function displayTime(hour, minutes, seconds, milliseconds) {
  const leadZeroTime = [hour, minutes, seconds, milliseconds].map(time => time < 10 ? `0${time}` : time)
  time.innerHTML = leadZeroTime.join(':')
}

Though this is a pretty simple exercise, it's a great exercise for programmers new to javascript. We follow the Unobtrusive JavaScript principle by using event handlers. And most importantly, we went over some gotchas of working with javascript call stack and some workarounds.

Here is the repo for this exercise: https://github.com/chrislemus/stopwatch-using-javascript

Rails Pagination & Search Functionality - Without a Gem

Chris — Thu, 11 Mar 2021 20:39:28 +0000

Today we'll go over how to add pagination to your Rails app using URL parameters and no external gems.

Creating our files

To get started we need to create our controller and set up our root route, for convenience I will use rails generator and execute rails g controller Home index in my terminal. Feel free to use another name for your controller, instead of Home. Rails will generate a few files for you and provide a detailed summary of where they can be found

 create  app/controllers/home_controller.rb
  route  get 'home/index'
 invoke  erb
 create    app/views/home
 create    app/views/home/index.html.erb
 invoke  test_unit
 create    test/controllers/home_controller_test.rb
 invoke  helper
 create    app/helpers/home_helper.rb
 invoke    test_unit
 invoke  assets
 invoke    scss
 create      app/assets/stylesheets/home.scss

Optional: I will set my home#index as my root path by going to config > routes.rb and replacing get 'home/index' with root 'home#index'

Setting up our Controller

For demonstration purposes, I am using a class method #database instead of using an actual database.

class HomeController < ApplicationController
  # number of results to be shown per page
  @@results_per_page = 2 
  def index
    # params will be used in views for input and links
    @params = params.permit(:query, :page)
    # current page will be 1 by deault unless
    # user clicks on another page 
    @current_page = params[:page].try(:to_i) || 1
    # create a fetch request to database and retrieve the results
    @results, @pages_count  = database(@params, @current_page)
  end

  # sample database
  def database(params, current_page)
    # dummy data
    data = [ 'apple', 'cake', 'candy apple', 'car',
      'friend', 'run', 'hunt', 'ship', 'tip'
    ]
    # filter data using provided parameters. You can filter the data 
    # with as many parameters as you'd like
    results = data.filter{|i| i.include? params[:query].to_s} 
    # total number of pages that should be displayed
    pages_count = (results.length/@@results_per_page.to_f).ceil

    # results to display based on current page and result limit
    start = @@results_per_page * (current_page - 1)
    results = results[start, @@results_per_page]
    [results, pages_count]
  end
end

Here is what your code could look like if you were using Active Record. Please note this will only return the results for the page selected. You may need to create a separate call to your database which will return the total number of results, which is needed to calculate the number of page items that need to be created.

SampleModel.where("name LIKE ?", "%#{query}%") 
  .limit(results_per_page)
  .offset(results_per_page * (current_page-1))

Our Views

We'll break down the views in three steps. Our search field, pagination items, and result items.

1. Search field

At the top we will have a form to allow users to search for item by name. The form will be submitted to our root_path. For our search field I've added JavaScript to our onkeydown attribute. If the search field is empty, it will not have a name assigned. This will prevent our URL from having a query parameter, and make things a bit cleaner.

*I've added inline javascript for demonstration purposes. But adding javascript to your javascript folder is better. Or you could add an event listener to iterate through the form inputs before submitting.

  <%= form_with url: root_path, method: :get do %>
  <input onkeydown="if(this.value == '') {this.name = 'query'} else {this.name = 'query'}" value=<%="#{@params[:query]}"%>>
  <%= submit_tag "Search", name:nil %>
  <%end%>

2. Pagination Items

The pagination items will be wrapped in an unordered list. When making each item, we will update the params page value to match the corresponding item. And the rest of the parameters will be passed along as well. A .active class is used to add styling to pagination item if it matches the @current_page

  <ul>
    <%[*1..@pages_count].each do |page|%>

    <%@params[:page] = page%>
    <li class=<%="#{@current_page == page ? 'active' : ''}"%>>
      <%= link_to page, root_path(@params)%>
    </li>

    <%end%>
  </ul>

3. Result items

We will iterate through all the results and display on the page.

  <%@results.each do |result|%>

  <div class='results'>
    <%=result%>
  </div>

  <%end%>

This is how your final result should look like. I've wrapped all my code in a div element.

<div class='demo'>
  <%= form_with url: root_path, method: :get do %>
  <input onkeydown="if(this.value == '') {this.name = 'query'} else {this.name = 'query'}" value=<%="#{@params[:query]}"%>>
  <%= submit_tag "Search", name:nil %>
  <%end%>

  <ul>
    <%[*1..@pages_count].each do |page|%>
    <%@params[:page] = page%>
    <li class=<%="#{@current_page == page ? 'active' : ''}"%>>
      <%= link_to page, root_path(@params)%>
    </li>
    <%end%>
  </ul>

  <%@results.each do |result|%>
  <div class='results'>
    <%=result%>
  </div>
  <%end%>
</div>

Here is the styling used in this demo, incase you want to follow along.

.demo {
  margin: 80px auto 0;
  width: 400px;
  display: flex;
  flex-direction: column;
  input:first-of-type {
    width: 200px;
    padding: 5px 10px;
    border-radius: 10px;
    outline: none;
    border: 1px solid black;
  }
  input:last-of-type {
    margin-left: 5px;
  }
  ul {
    display: flex;
    margin-bottom: 20px;
    margin-top: 30px;
    // width: 100%;
    li {
      display: flex;
      justify-content: center;
      border: 1px solid rgb(194, 194, 194);
      font-size: 15px;
      border-radius: 8px;
      padding: 5px 10px;
      margin-right: 20px;
      &.active {
        background: cornflowerblue;
        a {
          color: white;
          font-weight: bold;
        }
      }
    }
  }
}

.results {
  border-radius: 8px;
  box-shadow: 0 0px 2.5px rgba(0, 0, 0, 0.05), 0 0px 20px rgba(0, 0, 0, 0.1);
  font-size: 20px;
  padding: 5px;
  margin-bottom: 5px;
  padding-left: 20px;
}