Dilshan Kelsen's RSS Feed

Adding E2E Setup With PlayWright And Cucumber In TypeScript Project

Mon, 01 May 2023 00:00:00 GMT

In this post, I'll demonstrate how to set up an end-to-end (E2E) testing framework using Cucumber and Playwright in your TypeScript project.

Installing dependencies

First, add the following libraries as dev dependencies to your project.

BASH

yarn add --dev @cucumber/cucumber @playwright/test # OR
npm install --save-dev @cucumber/cucumber @playwright/test

Setting up Cucumber

It should be noted that the testing framework is operated entirely by Cucumber, and Playwright is merely plugged 🔌 into it. Theoretically, you can switch it out for any browser automation tool such as Cypress or Selenium.

Features folder

All your E2E code will live in a folder named features at the root of your project.

Feature file

Inside of your features folder, you'll will have .feature files which represent your Cucumber 🥒 files. To test the entire setup, let's create an example file.

features/greeting.feature

GHERKIN

Feature: Greeting

  Scenario: Say hello
    When the greeter says hello
    Then I should have heard "hello"

Support file

In the background, your feature files are executed by TypeScript files located in a steps folder. Their file names must correspond to the name of the feature file they are executing.

features/steps/greeting.ts

TYPESCRIPT

import { When, Then } from "@cucumber/cucumber"

interface MyWorld {
  whatIHeard: string
}

When("the greeter says hello", function(this: MyWorld) {
  this.whatIHeard = "hello"
})

Then("I should have heard {string}", function(
  this: MyWorld,
  expectedResponse: string
) {
  // Make assertion here
})

Configuration file

What we have so far is enough to execute an E2E test. However, for that to happen we have to specify a host of parameters in the CLI, such as the Typescript execution engine, the location of the step definitions, etc. We can avoid repeating 🙏 these parameters on every test run by creating a cucumber.mjs file at the root of your project that stores theses parameters.

cucumber.mjs

JAVASCRIPT

const configuration = {
  requireModule: ["@swc-node/register"],
  require: ["features/steps/**/*.ts"],
  // Optional below
  format: ["summary", "progress-bar"],
  formatOptions: { snippetInterface: "async-await" },
}

export default configuration

Specify a TypeScript execution engine of your choice in requireModule, such as @swc-node or ts-node. Oddly, ts-node did not work for me. 🤔

I recommend checking out the overview of all the configuration options for further reference.

Installing Playwright

With the current setup in place, you can already execute 😲 the test with yarn/npm run cucumber-js with a pass. However, it's passing because we aren't making any assertions, for which we will use Playwright.

Returning to the step file, make the following changes:

DIFF

+ import { expect } from "@playwright/test";
# [...]

Then(
  "I should have heard {string}",
  function (this: MyWorld, expectedResponse: string) {
+   expect(this.whatIHeard).toEqual(expectedResponse);
  }
);

To check if the assertion actually works, simply change the casing of the string "hello" and you will receive a failed ❌ test after running Cucumber.

DIFF

- this.whatIHeard = "hello"
+ this.whatIHeard = "Hello"

While you are now capable of running tests, you are nevertheless missing the proper setup to keep each test independent of each other. Check out my walk-through on how to do so.

How To Set Up A Custom World For Cucumber/Playwright Tests In TypeScript

Mon, 24 Apr 2023 00:00:00 GMT

It's important to ensure that each test you run is independent of each other. Cucumber uses the concept of a World, which is an isolated scope for each scenario, exposed as this to each step.

TYPESCRIPT

import { CustomWorld } from "./custom-world"

Given("my color is {string}", function(this: CustomWorld, color: string) {
  const { pageUrl } = this // You may either access a variable set in this unique World,
  this.color = color // Or set a variable accessible to following steps.
  // [...]
})

GitHub user Tallyb has a good example project that implements a World setup. No need to reinvent the wheel, yet improving it wouldn't hurt. 😁

Hooks

There's a configuration file I won't focus on, as its content is quite straightforward. Rather, we should pay attention to the hooks file. This file does the grunt work of launching the test browser, storing traces (similar to log files) after a test has failed, instantiating variables, etc.

The Before hook is of particular to interest to us since this is where you would define any variables that you wish to use throughout any scenario.

src/support/common-hooks.ts

TYPESCRIPT

Before(async function(
  this: CustomWorldBeforeSetup, // used to be `ICustomWorld`
  { pickle }: ITestCaseHookParameter
) {
  this.startTime = new Date()
  this.pageUrl = "https://localhost:3000" // New variable

  // [...]
})

However, TypeScript will complain 👎 if we define any new variables in this hook. That's because it hasn't been defined in the CustomWorldBeforeSetup type. Note that I've replaced the original ICustomWorld with the aforementioned type. Read more to find out why!

Custom World

The "World" is nothing more than a JavaScript class that is instantiated on each test run. By default, only debug is set. I separated the typing of the "Custom World" into two:

CustomWorldBeforeSetup
CustomWorld

Before setup

I renamed ICustomWorld to CustomWorldBeforeSetup. For each scenario you test, the TestWorld class will be instantiated before any of the hooks run. This means, unless you declare the variables inside the class itself, as is the case with debug, you will mark most properties as optional.

src/support/custom-world.ts

TYPESCRIPT

/**
 * The "custom world" before the setup of a scenario.
 */
export interface CustomWorldBeforeSetup extends World {
  debug: boolean

  // Remaining properties are optional
  feature?: messages.Pickle
  context?: BrowserContext
  page?: Page
  pageUrl?: string // New property
  testName?: string
  startTime?: Date
  server?: APIRequestContext
  playwrightOptions?: PlaywrightTestOptions
}

class TestWorld extends World implements CustomWorldBeforeSetup {
  constructor(options: IWorldOptions) {
    super(options)
  }

  debug = false
}

setWorldConstructor(TestWorld)

However, this interface doesn't accurately reflect 🙅‍♀️ the custom world after the entire setup has run. Furthermore, you would have to always check if the variable is defined since it's marked as optional. Hence, why there's a second interface.

After setup

In this interface, we know for sure that all the listed properties below are defined since this represents TestWorld after the Before hook has run.

src/support/custom-world.ts

TYPESCRIPT

/**
 * The "custom world" after the setup of a scenario, i.e. with all of its
 * properties set.
 */
export default interface CustomWorld extends CustomWorldBeforeSetup {
  feature: messages.Pickle
  context: BrowserContext
  page: Page
  pageUrl: string // New property set in a hook
  testName: string
  startTime: Date
  server: APIRequestContext
  color?: string // New property set in a step
}

Consequently, at any step, assign this the CustomWorld interface, not CustomWorldBeforeSetup. Lastly, notice 🔔 color is an optional property as it is set in a scenario, i.e. step, not in a hook as is the case with pageUrl.

JavaScript Modules Explained

Mon, 17 Apr 2023 00:00:00 GMT

Nowadays, it's natural to split up a JavaScript program into multiple files, i.e. modules. However, until the ES6 revision in 2015, there was no official support for this. Consequently, unofficial standards emerged, such as CommonJS in NodeJS. Furthermore, a different standard called RequireJS emerged in the browser since CommonJS wasn't designed with browsers in mind.

Consequently, you may have seen import and export statements such as below, which belong to CommonJS.

JAVASCRIPT

var someModule = require("someModule")

function someFunc() {
  return someModule.doSomething()
}

modules.exports = someFunc

ES Modules

With the arrival of the official ECMAScript module standard, or short ES Modules, one could now accomplish the same thing in a more readable manner.

JAVASCRIPT

import someModule from "someModule"

function someFunc() {
  return someModule.doSomething()
}

export default someFunc

NodeJS

By now, NodeJS has added stable support for ES Modules. However, since CommonJS is the original module system of NodeJS, there is still widespread support for it in the ecosystem. Consequently, in order to not break support, NodeJS still uses it by default.

If you wish to use ES Modules, you can either use it in a .mjs file, set it as the project default with "type": "module" in package.json or use --input-type=module in the CLI. Likewise, NodeJS will treat .cjs files as CommonJS modules.

How To Prevent CLS From Image Rendering On Client Side

Mon, 10 Apr 2023 00:00:00 GMT

Cumulative Layout Shift (CLS) can negatively affect your user experience and SEO results. The most common cause is improper image rendering on the client side. Fortunately, this is easy to solve using the aspect-ratio CSS property.

CSS

image {
  aspect-ratio: "width / height"; /* e.g. 1200 / 800 */
}

By using this property, the empty image tag will occupy the necessary height from the get-go based on the provided aspect ratio and the possible image width. This prevents a sudden shift of content once the image has loaded.

How To Properly Add Google Analytics in NextJS

Mon, 03 Apr 2023 00:00:00 GMT

In NextJS, Google Analytics should be loaded using the Script component which optimizes loading performance of third-party scripts. As the script should be loaded on every page of your app, it's recommend to insert it into a root file of your app, such as _app.jsx.

_app.jsx

JSX

<>
  <Script
    src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
    strategy="afterInteractive"
  />

  <Script id="google-analytics" strategy="afterInteractive">
    {`
      window.dataLayer = window.dataLayer || [];
      function gtag(){window.dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'GA_MEASUREMENT_ID');
    `}
  </Script>
</>

The afterInteractive strategy option loads the script as early as possible after some hydration on the page has occurred. Be sure to replace GA_MEASUREMENT_ID by the measurement ID of your Google Analytics property.

Returning An Empty React Component

Mon, 27 Mar 2023 00:00:00 GMT

If you wish to return an empty React component, return either true, false, null, or undefined. These are all valid React nodes and are ignored when rendering the DOM.

JSX

<div>{true}</div>
// Is the same thing as:
<div></div>

A caveat to take note of is that certain "falsy" values are still rendered by React, such as the number 0 or an empty string "". Therefore, if you do conditional rendering with the && operator, you may run into some surprises.

JSX

<div>{props.messages.length && <MessageList messages={props.messages} />}</div>
// When `props.messages.length` is `0`, the number `0` is rendered instead of nothing.

To avoid these surprises, Kent C. Dodds recommends using ternaries rather than && in JSX.

JSX

<div>
  {props.messages.length ? <MessageList messages={props.messages} /> : null}
</div>
// Will render `MessageList` only if `props.messages.length` is not 0.

React Element vs JSX Element vs React Node vs React Component

Mon, 20 Mar 2023 00:00:00 GMT

Even for experienced React developers, the difference between a React/JSX Element, Node and Component can be somewhat elusive at first. So here's a clear breakdown of the terms.

React Element

A React Element is the smallest building block of a React application and is an object representation of a virtual DOM node. The creation of elements are cheap and are done as follows.

JAVASCRIPT

// React.createElement(type, [props], [...children])
const element1 = React.createElement(
  "div",
  { className: "italic" },
  "Basic Element"
)
const element2 = React.createElement(CustomButton, { color: "red" }, null)

The first argument of the createElement method describes the type of the element. It can either be a tag name (such as 'div' or 'span'), a React component or a React fragment. The 2^nd argument are the props of the element while the 3^rd its children.

In the end, createElement returns a plain JavaScript object that describe a virtual DOM node, which is not to be confused with a regular DOM node. For instance, element1 returns:

JAVASCRIPT

console.log(element1)

/**
 *  {
 *    $$typeof: [object Symbol] { ... },
 *    _owner: null,
 *    _store: { ... },
 *    key: null,
 *    props: {
 *      children: "Basic Element",
 *      className: "italic"
 *    },
 *    ref: null,
 *    type: "div"
 *  }
 **/

JSX Element

A JSX Element is really nothing else than syntactic sugar for createElement. The 2 previous examples can be rewritten with JSX, which ultimately results in the same thing, i.e. plain JavaScript objects.

JSX

const element = <div className="italic">Basic Element</div>
const element = <CustomButton color="red" />

React Component

A React component is a function that returns one or more React Elements. Nothing more, nothing less.

JSX

const Text = ({ children }) => (
  <div className="italic">
    <p>{children}</p>
  </div>
)

However, once we "call" this component using JSX syntax, it's actually an Element of type React component.

JSX

<Text>Greetings!</Text>
// Which is the same as React.createElement(Text, null, "Greetings!")

React Node

Lastly, a React Node is a more general term for anything that is returned by a component, which may be more than an Element. React nodes may be:

A React element created like <div /> or createElement('div')
A portal created with createPortal
A string
A number
true, false, null, or undefined (which are not displayed)
An array of other React nodes

JSX

const Number = () => <div>Woah! {[1, "world", true]}</div>
// This return statement of `Number` is considered a React node.

How To Add URL Parameters Using NextJS

Mon, 13 Mar 2023 00:00:00 GMT

NextJS makes it easy to add URL parameters with next/router.

JAVASCRIPT

const router = useRouter()

The router object, returned by the useRouter hook, accepts a URL of type UrlObject, which is a NodeJS module. In particular, the query property accepts an object which is transformed into a URL query string.

JAVASCRIPT

// `.push` is used as an example. This work with `.replace` and `.prefetch` as well.
router.replace({
  // Path of the URL
  pathname: "/menu",
  query: {
    fruit: "banana",
    softDrink: "fanta",
  },
})

The example above would yield the following result: /menu?fruit=banana&softDrink=fanta.

Running Automated Scripts In DigitalOcean

Mon, 06 Mar 2023 00:00:00 GMT

To automate any command in DigitalOcean, you need to find the Build and Run Command section of your project.

These instructions are for an App Platform project.

In your project, head to the Settings page and select the component (e.g. React app) to which you wish to add a command. You should then see a Commands section further down in the page.

How To Truncate Multiple Lines Of Text With CSS

Mon, 27 Feb 2023 00:00:00 GMT

Truncating, for example, any text beyond the 2^nd line is fairly simple with the following properties.

CSS

.text-box {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* From which line on to truncate */
  overflow: hidden;
}

Property -webkit-line-clamp does most of the magic, but needs to be used in combination with the properties above to work. This solution enjoys strong support among browsers, which makes it the most desirable method of achieving multiline truncation.

Is ForwardRef Necessary To Pass Down A React Ref

Thu, 23 Feb 2023 00:00:00 GMT

Whenever you wish to pass down a ref to a child component, React recommends to use forwardRef. But why? Actually, you don't have to. As stated 📝 in React's (older) official documentation about forwarding refs:

Ref forwarding is a technique for automatically passing a ref through a component to one of its children. This is typically not necessary for most components in the application. However, it can be useful for some kinds of components, especially in reusable component libraries.

Therefore, you may pass down a ref using any prop name, e.g. customRef={ref}. There is no difference in terms of functionality. However, if you attempt to pass it down using the prop name ref, you must use forwardRef, otherwise you'll receive an error.

So why is ref a reserved prop name? 🤔 The answer is to create a standardized and predictable API.

For instance, if you maintain a library, developers would need to be aware how they can pass down a ref to your component. Keep in mind, this would require additional documentation. In fact, this was the case before the hook's introduction in React 16.3, when innerRef had become a widely used convention.

Load Balancer Briefly Explained

Mon, 20 Feb 2023 00:00:00 GMT

A load balancer is a hardware or software unit that intercepts and distributes network traffic to a group of servers. It allows the application to scale up or down by being aware of which servers are under- or overutilized, and routes user traffic accordingly.

As found on the GitHub page of karanpratapsingh.

For instance, if a server were to drop out, the load balancer would be responsible for redirecting traffic to servers that are capable of serving them.

The importance of load balancers becomes particularly important during traffic spikes.

Traffic distribution

The distribution of traffic happens with the use of algorithms, with each having their own pros and cons. Common examples of algorithms are:

Distributing traffic load sequentially on every server (Round Robin),
Using the IP address of the client (IP Hash), or
Randomizing the distribution (Power of Two Choices).

UseImperativeHandle Hook Easily Explained

Thu, 16 Feb 2023 00:00:00 GMT

What does the useImperativeHandle hook do? In the simplest terms, it allows you to control what is returned by a ref prop, specifically the ref handle. The handle is usually a DOM node, but by using this hook, the handler would instead be replaced by an object with methods.

In what situations would you use this? As far as I can tell, its main use case is to restrict access to the DOM. Imagine you are the creator of a form library. You would want to maintain strong control over the form elements and prevent users from unnecessarily manipulating the DOM. It should be noted that this hook is quite advanced in its use case and is therefore rarely used.

Common Example

Take the example of an input field for which you solely expose the ability to focus it. The 1^st argument of useImperativeHandle accepts the ref passed in as a prop from the parent component. The 2^nd argument accepts the new handler, i.e. a JavaScript object with custom methods. Lastly, the 3^rd argument takes in an array of dependencies, the same as many other React hooks.

const MyInput = React.forwardRef((props, ref) => {
  const realInputRef = React.useRef(null)

  React.useImperativeHandle(
    ref, // Target the ref passed in by the parent.
    () => ({
      // Only expose focus and nothing else.
      focus() {
        realInputRef.current.focus()
      },
    }),
    [] // Add any dependencies the hook relies on.
  )

  return <input {...props} ref={realInputRef} />
})

function Form() {
  const inputRef = React.useRef(null)

  function handleClick() {
    // `current` contains a JavaScript object, not a DOM node.
    inputRef.current.focus()
  }

  return (
    <>
      <MyInput ref={inputRef} /> {/* Remove the ref and see what happens! */}
      <button onClick={handleClick}>Focus the input</button>
    </>
  )
}

render(<Form />)

const MyInput = React.forwardRef((props, ref) => {
  const realInputRef = React.useRef(null)

  React.useImperativeHandle(
    ref, // Target the ref passed in by the parent.
    () => ({
      // Only expose focus and nothing else.
      focus() {
        realInputRef.current.focus()
      },
    }),
    [] // Add any dependencies the hook relies on.
  )

  return <input {...props} ref={realInputRef} />
})

function Form() {
  const inputRef = React.useRef(null)

  function handleClick() {
    // `current` contains a JavaScript object, not a DOM node.
    inputRef.current.focus()
  }

  return (
    <>
      <MyInput ref={inputRef} /> {/* Remove the ref and see what happens! */}
      <button onClick={handleClick}>Focus the input</button>
    </>
  )
}

render(<Form />)

Get Local Time From UTC Timestamp In JavaScript

Mon, 13 Feb 2023 00:00:00 GMT

If you've got a UTC timestamp string,

JAVASCRIPT

const utcString = new Date().toISOString()
console.log(utcString) // "2022-10-30T15:15:41.471Z"

turn it into a Date object, and JavaScript will automatically convert it to your local timezone.

JAVASCRIPT

const localTime = new Date(utcString)
console.log(localTime) // `Date` Sun Oct 30 2022 16:15:41 GMT+0100 (Mitteleuropäische Normalzeit)

For a string representation of the date, use the toLocaleString method.

JAVASCRIPT

const localeString = localTime.toLocaleString()
console.log(localeString) // "30.10.2022, 16:15:41"

Learn How To Use Vuetify’s Grid System

Wed, 08 Feb 2023 00:00:00 GMT

Vuetify’s grid system is built on top of Flexbox, a CSS3 web layout model, which makes responsive web design a breeze. Those of you who are already familiar with Bootstrap‘s grid system will recognize many of the concepts below. However, if you aren’t, stress not! For you will learn how to use the Vuetify’s grid system in no time after reading this tutorial. 😉

This post covers version 1 and 2 of Vuetify, and by extension version 3 since there have been no changes to the Grid API.

Contain those grids, bruh…

Before we start talking about all the nitty gritty of the system, it’s important to understand that any grid system you create will usually be placed inside a container. In the case of Vuetify, it’s the <v-container> tags, which will automatically center itself on the page. You may even use the fluid prop, like so <v-container fluid>, to fully extend its width. ↔

It’s time to col and row

Vuetify’s grid system is made up of a 12 point system, meaning that each row in your grid is split equally into a maximum of 12 columns. Each row inside <v-container> is delineated with <v-row> (or <v-layout row> in v1.x) tags. By default, space is maintained between all the columns, i.e. 24px to be exact. You may reduce this space with the prop dense, or even eliminate it with no-gutters.

After creating a grid row, it’s time to fill it with content using <v-col> (or <v-flex> in v1.x), which are *spoilers* your columns. 😛 You can imagine them as a box or element of content (which I call henceforth as flex unit) that can occupy at least 1 column in said row.

Vuetify has its own set of breakpoints that you can use to determine the size of a flex unit depending on the screen size. For instance, inserting cols="12" as a prop means that the flex unit will occupy 12 columns in that row for all screen sizes by default. On the other hand, md="6" would render the flex unit 6 columns wide on a medium-sized screen and larger.

A code snippet can be seen below, in which two flex units are occupying 6 columns each for breakpoint md.

If you’d like to, you can play around with the code here.

HTML

<v-container>
  <v-row no-gutters>
    <v-col md="6">
      ...
    </v-col>
    <v-col md="6">
      ...
    </v-col>
  </v-row>
</v-container>

Figure 1. Two flex units occupying 6 columns

Wrap to the rescue!

So you might be asking yourself “What happens if I exceed 12 columns in total?”. 🤔

Well, in that scenario Vuetify will wrap any excess columns into a new line. For example, in Figure 2, the 1^st flex unit occupies 6 columns while the 2^nd one occupies 8, thus putting the total at 14. As the 2^nd column can’t fit in the existing line, it is pushed down to a new one.

Figure 2. Flex unit #2 pushed into a new line

Not that hard, is it? You may play around with the code here and try this out with more than 2 flex units.

In case you're interested in some ancient history, in the good old (rough) days of Vueitfy v1.x this wasn't the case. The grid system would actually attempt to squeeze all your flex units into one single row, giving some undesired results. Crazy shit, let me tell you. However, it could be solved with the prop wrap in <v-layout>. Thank God (and the developers) for these changes. Makes life easier for us, doesn't it? 😉

The good old days, am I right? 😂

Going down the rabbit hole

Did you know you can nest your rows and columns? Yes, a great feature indeed. But tread carefully! It can be dangerous (for maintenance) if you take it too far. 😅 So what conditions need to be fulfilled for you to be able to nest your grid? Well, the only condition that needs to be met is that <v-col> is a direct child of <v-row>.

Below is an example of how you could nest your grid. The possibilities are endless, really.

HTML

<v-row>
  <v-col md="12">
    <v-row no-gutters>
      <v-col md="6"></v-col>
      <v-col md="6"></v-col>
    </v-row>
  </v-col>
</v-row>

Figure 3. Nested rows and columns

Once again, you may play around with the code here and see how far the rabbit hole goes.

Now, if you've made it this far, congratulations! You already have a firm understanding of how Vuetify's grid system works and should make the documentation much more easier to understand. However, there are still a few other features I'd like to show you before you venture off into the wild.

Gimme some space, please!

Now what happens if we have less than 12 columns in total per line (remember, you can have multiple lines in a row)? Well, this is where things get interesting. By default, Vuetify's grid system will place all your flex units to the left. However, Vuetify provides a host of different props to align and/or justify your content to your desire.

In the example below, two different props were used on each of the <v-row> tags to get the output in Figure 4.

HTML

<v-container>
  <v-row justify="space-between">
    <v-col md="3">
      ...
    </v-col>
    <v-col md="3">
      ...
    </v-col>
  </v-row>
  <v-row justify="space-around">
    <v-col md="3">
      ...
    </v-col>
    <v-col md="3">
      ...
    </v-col>
  </v-row>
</v-container>

Figure 4. Flex units justified using props

Why not go ahead and try out some different props with the code here?

What about v-spacer and v-col?

Besides the props for justifying and aligning content, there are two other common features you might use when it comes to adding space.

The first one is the <v-spacer> tag. Imagine it as an invisible flex unit that will occupy as many columns as possible without triggering any wrapping. If you were to add a spacer at the beginning of a row, it will push everything to the right. If you add one between two flex units, they will be pushed all the way to both sides. What else is important?... Oh yeah, if you have more than 1 spacer, they will try to take up the same amount of columns.

So for example, you could center a single flex unit by placing a spacer on each side.

HTML

<v-container>
  <v-row>
    <v-spacer />
    <v-col col="3" offset="3">
      ...
    </v-col>
    <v-spacer />
  </v-row>
</v-container>

Last but not least, we can offset specific flex units using the prop offset-(size)="(1-11)" in <v-col>, with size referring to Vuetify's breakpoints and the numbers referring to the number of columns the flex unit is offset by. Another way to think of an offset is as an "invisible" flex unit.

The code snippet below is an example of using an offset on each flex unit and can be found here for your entertainment.

HTML

<v-container>
  <v-row>
    <v-col col="3" offset="3">
      ...
    </v-col>
    <v-col col="3" offset="3">
      ...
    </v-col>
  </v-row>
</v-container>

Figure 5. Each flex unit is offset by 3 columns

The end is nigh!

Vuetify's grid system offers so many features, it would take quite some time to explore every nook and cranny of it. Why not check out the documentation yourself? If you've made it this far, I'm sure you'll have no problem going on further without me! 😁

How To Format Dates In MUI DateTime Picker

Mon, 06 Feb 2023 00:00:00 GMT

The inputFormat prop allows you to specify a format for the MUI Datetime picker. By default, it uses the American date format of month/day/year. To change it to day/month/year, enter the following:

JSX

<DateTimePicker inputFormat="DD/MM/YYYY hh:mm A" />

The letters in the datetime format are case sensitive.

The capital A at the end is a placeholder for AM/PM (capitalized). If you didn't quite find what you came for, I highly recommend checking out the documentation of Moment.js on the many formatting possibilities.

How To Compare Two Dates In JavaScript

Thu, 02 Feb 2023 00:00:00 GMT

When it comes to comparing two dates, you should ask yourself: Do I want to include the time of the day in the comparison itself? If the answer is yes, the easiest way of performing a comparison is by using comparison signs (e.g. > and >=).

Comparing dates with time

JAVASCRIPT

const date1 = new Date()
const date2 = new Date()

return date1 < date2

However, be careful when checking for equality! An equality check of two different objects will always return false as JavaScript performs an equality of reference instead of an equality of value.

Instead, use the .getTime method to retrieve the Unix timestamp of the date.

JAVASCRIPT

return date1.getTime() === date2.getTime()

Comparing days only

On the other hand, if you wish to ignore the time in the comparison, .setHours is your guy! What to do? Simply set the time to midnight for any dates being compared.

JAVASCRIPT

const dateA = new Date(date1)
const dateB = new Date(date2)

dateA.setHours(0, 0, 0, 0)
dateB.setHours(0, 0, 0, 0)

return dateA > dateB

Notice how I copied both dates into new variables dateA and dateB. The reason for doing so is that setHours will mutate the original dates, which will cause undesired side-effects in your application if not accounted for. In addition, if you wish to check for equality, use .getTime as in the previous section.

How To Use Google Places API In React

Mon, 30 Jan 2023 00:00:00 GMT

Before you can use the Google Places API, you first need to ensure that the API is enabled.

Loading the library

To load the API library, I recommend using a custom hook, in particular 👉 this example. For the TypeScript lovers, you're covered as well.

In your Google Places Input, i.e. AutoComplete component, call the hook with the link below. Make sure to replace YOUR_KEY with the API key retrieved during the setup earlier.

AutoComplete.tsx

TSX

const scriptStatus = useScript(
  // By default, Google Places will attempt to guess your language based on your country.
  // However, you may specify it explicitly with the `language` parameter.
  `https://maps.googleapis.com/maps/api/js?language=en&key=${YOUR_KEY}&libraries=places`
)

Creating the AutoComplete component

In the Autocomplete component, we maintain 2 refs:

One is of the component itself, which will contain the Google Places AutoComplete class, and
The other is of the input field, inside the component, which Google Places uses to automatically 🙌 add dropdown options upon user input.

AutoComplete.tsx

TSX

const autoCompleteRef = useRef<google.maps.places.AutoComplete>()
const inputRef = useRef<HTMLInputElement>()

// Some code in the next example.

return <input ref={inputRef} />

Following that, a useEffect hook will take care of the ref setup, including data fetching. It should only run once upon the component mounting, hence the various checks 💂‍♂️ in the beginning.

What you should pay attention to is the initialization of the AutoComplete class, which accepts a reference to the input field and an options object. The latter allows you to apply restrictions such as countries and types of locations as well as the type of data you wish to receive.

Moreover, an anonymous function listens to the event place_changed, which occurs whenever a user selects a location from the Google Places generated dropdown.

AutoComplete.tsx

TSX

const options = useMemo(
  () => ({
    componentRestrictions: { country: "at" },
    fields: ["address_components", "geometry", "name"],
    types: ["establishment"],
  }),
  []
)

useEffect(() => {
  // Conditions to ensure that no multiple instances of the
  // Google Places API class and event listener exist.
  if (
    autoCompleteRef.current ||
    scriptStatus === "loading" ||
    !inputRef.current ||
    !window.google ||
    !window.google.maps ||
    !window.google.maps.places
  ) {
    return
  }

  if (scriptStatus === "error") {
    // Report error
    return
  }

  autoCompleteRef.current = new window.google.maps.places.AutoComplete(
    inputRef.current,
    options
  )

  autoCompleteRef.current.addListener("place_changed", () => {
    if (!autoCompleteRef.current) {
      return
    }

    // Retrieve the selected location with the `getPlace` method.
    onChange(autoCompleteRef.current.getPlace())
  })
}, [scriptStatus, options, onChange])

In this code example, onChange is simply a useState function that's passed in ⬇ from the parent component.

Gotcha

Lastly, you may want to set the value from the input field to null on any key stroke to ensure that only values retrieved by the API are accepted. For instance, the user may remove their selection or accidentally delete a character or two in the field.

DIFF

<input
    ref={inputRef}
+   onChange={() => onChange(null)}
  />
)

Getting Unit/Suite Numbers In Google Places Autocomplete

Thu, 26 Jan 2023 00:00:00 GMT

It is possible to get the unit/suite/door numbers etc. for any address in any country. This information is shared through the subpremise type returned by the Places API. Knowing this, it begs the question how does one get it when entering an address? 🤷‍♀️

Unfortunately, it depends very much on each country and I couldn't find any specifics on this (maybe you know better 👀). For instance, in Austria, it's common to write an address in the following format.

TEXT

Street address [house number]/[unit number]/[floor number]/[door number]

This will yield no result with Google Places and instead it will return Street address [house number]. However, there exists another more verbose format in Austria.

TEXT

Street address [house number], Stiege [unit number], Stockwerk [floor number], Top [door number]

If you were to provide it like this to Google Places (as I found out by coincidence 🤦‍♀️), you will receive the information correctly in subpremise.

'Types Of Property Are Incompatible' In GraphQL CodeGen

Mon, 23 Jan 2023 00:00:00 GMT

If you use GraphQL CodeGen to generate your types and Prisma on the backend, you will eventually come accross the following error due to a divergence in resolver types.

BASH

Types of property 'X' are incompatible.
Type 'import("...").X' is not assignable to type 'import(".../resolvers-types").X'.

To avoid this divergence, you will need to map your generated Prisma types to your defined GraphQL schema types. To accomplish this, add the following config properties in your CodeGen file.

codegen.yml

YML

generates:
  ./generated/resolvers-types.ts:
    plugins:
      - typescript
      - typescript-resolvers
    config:
      mapperTypeSuffix: Model
      mappers:
        X: "@prisma/client#X"

Under mappers, assign each GraphQL schema type its Prisma equivalent, e.g. User: "@prisma/client#User".

mapperTypeSuffix helps us avoid name collisions 💥 between your GraphQL and generated Prisma types.

How To Display JavaScript Date In Specific Time Zone

Thu, 19 Jan 2023 00:00:00 GMT

Given a value of type Date, you can get a date string representation of a certain time zone as follows.

JAVASCRIPT

const dt = new Date()
// Date Thu Jan 05 2023 21:12:29 GMT+0100 (Mitteleuropäische Normalzeit)

dt.toLocaleString("en-GB", { timeZone: "America/New_York" })
// "05/01/2023, 15:12:29"

Don't know the string value of a specific timezone? 🤷‍♀️ Intl.supportedValuesOf('timeZone') will return an array of all possible values.

How To Restart Numbering Of Ordered List In DOCX JS

Mon, 16 Jan 2023 00:00:00 GMT

To restart the numbering of an ordered list, we need to give each list a unique instance id throughout the entire document. This instance ID is set in the Paragraph object.

JAVASCRIPT

new Paragraph({
  text: "A single list item",
  numbering: {
    reference: "numbering-style-1",
    level: 0,
    instance: 1, // Unique for each list
  },
})

Gotcha

If you plan on implementing any nested lists, you will need to ensure a unique ID for them as well. Here's an example to visualize the potential problem.

TEXT

List A with a unique ID of '1'
1. (id 1)
-- a. (nested list A needs a new ID of '2')
-- b. (id 2)
2. (id 1)
-- a. (Nested list 2A needs another unique ID of '3' to avoid becoming 'c')

List B with a new ID of '4'
1.
2.
3.

Grouping An Array Of Objects By Key

Thu, 12 Jan 2023 00:00:00 GMT

Imagine the following dataset which we would like to group by type.

JAVASCRIPT

const food = [
  { type: "vegetable", name: "Spinach" },
  { type: "fruit", name: "Pear" },
  { type: "fruit", name: "Apple" },
  { type: "vegetable", name: "Carrot" },
  { type: "vegetable", name: "Broccoli" },
]

There are 2 ways to solve this task, either by using plain JavaScript or Lodash.

Plain JavaScript

The cleanest way to solve this problem with plain JavaScript is by using a reducer.

JAVASCRIPT

const foodTypes = food.reduce(
  (accumulator, food) => {
    // Retrieve any existing values that have already been categorized by `type`.
    // If none exist, start with an empty array.
    const existingValues = accumulator[food.type] || []
    // Assign the new `food` value and any existing values to their respective `type`.
    accumulator[food.type] = [food, ...existingValues]
    return accumulator
  },
  // Start with an empty object.
  {}
)

console.log(foodTypes)
// Object { vegetable: (3) […], fruit: (2) […] }

Using Lodash

Lodash provides a much more straightforward approach as the implementation details are hidden by the library.

JAVASCRIPT

const foodTypes = _.groupBy(food, food => food.type)
// Or _.groupBy(food, 'type')

console.log(foodTypes)
// Object { vegetable: (3) […], fruit: (2) […] }

Note that in the second argument of groupBy, you specify the property you wish to group by, either by passing a callback function or the property name as a string.

Unknown Type Date In GraphQL Schema

Mon, 09 Jan 2023 00:00:00 GMT

If you get an error ❌ similar to this,

BASH

Failed to load schema from graphql/schema.ts: Unknown type: "Date".

it means your scalar type Date has not been defined. Natively, GraphQL only supports 6 types out of the box:

Int
Float
String
Boolean
ID

As a result, any other types need to be defined by the developer themselves.

Creating a custom scalar type

A scalar type Date is quite common. To use one, first define the new scalar type in your GraphQL schema.

GRAPHQL

scalar Date

Next, GraphQL needs to know 🧠 how to treat this type. For that, the GraphQLScalarType class is to be used. You should pay attention to the following methods:

serialize - How the data should be converted from its back-end representation (i.e. the JavaScript Date type) to a JSON-compatible format for network requests.
parseValue - How the data should be reverted from its serialized form to back-end representation.
parseLiteral - How the data should be treated if it's hardcoded in an incoming query. It's helpful to know that this hardcoded value is part of the query document's (i.e. query graph) abstract syntax tree 🌳 (AST).

JAVASCRIPT

import { GraphQLScalarType, Kind } from "graphql"

const dateScalar = new GraphQLScalarType({
  name: "Date",
  description: "Date custom scalar type",
  serialize(value) {
    return value.getTime() // Convert outgoing Date to integer for JSON
  },
  parseValue(value) {
    return new Date(value) // Convert incoming integer to Date
  },
  parseLiteral(ast) {
    if (ast.kind === Kind.INT) {
      // Convert hard-coded AST string to integer and then to Date
      return new Date(parseInt(ast.value, 10))
    }
    // Invalid hard-coded value (not an integer)
    return null
  },
})

Lastly, add the custom scalar type in your resolvers, so GraphQL has access to its definition.

JAVASCRIPT

const resolvers = {
  Date: dateScalar,
  //...
}

When To Use Given Or When In Cucumber

Thu, 05 Jan 2023 00:00:00 GMT

It can be difficult to know whether a step should be defined as a Given or When step. However, a general rule of advice is to keep the scenarios as brief as possible. The goal is to be descriptive, not exhaustive. As a consequence, it's recommended to restrict yourself to a single When statement in a scenario.

Here's a common example:

GHERKIN

Given the user is unauthenticated
When the user provides incorrect credentials
And the user clicks on "Login"
Then the user is prevented from logging in

One can reasonably argue that entering a false username and password as well as submitting the credentials constitute actions of this scenario. However, if a scenario should only contain a single When step, this step should be responsible for the outcome. Taking this into consideration, one would rewrite the previous scenario as follows.

GHERKIN

Given the user is unauthenticated
And the user clicks on "Login"
When the user provides incorrect credentials
Then the user is prevented from logging in

The act of a user submitting their credentials should be part of the context, while entering false credentials should be the single When statement. That is because it is responsible for the outcome, i.e. being refused login.

How To Seed Your Database With Prisma

Mon, 02 Jan 2023 00:00:00 GMT

Create your script

The logic of your seed script (e.g. create user data) is contained within a main function. Once your script is finished executing, the prisma client is terminated in the finally method. Simultaneously, we keep an eye 👀 out for any potential errors using the catch method (e.g. due to an incorrect query).

seed.ts

TYPESCRIPT

const prisma = new PrismaClient()

async function main() {
  // Perform database queries here
  // await prisma.user.create(...)
}

main()
  .catch(error => {
    console.error(error)
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })

Run your script

To run your script, you will first need to have the following dependencies installed.

BASH

# NPM
npm install -D typescript ts-node @types/node

# Yarn
yarn add --dev typescript ts-node @types/node

Prisma expects any seed scripts to be executed via the seed field in the prisma key of your package.json file.

JSON

{
  "name": "my-blog",
  "version": "1.0.0",
  "prisma": {
    "seed": "ts-node <path to file>/seed.ts"
  },
  "devDependencies": {
    "@types/node": "18.7.12",
    "ts-node": "^10.9.1",
    "typescript": "4.8.0"
  }
}

You may then manually 💻 execute your script with:

BASH

# NPM
npx prisma db seed

# Yarn
yarn prisma db seed

Be aware that your seed script is run automatically with prisma migrate dev and prisma migrate reset. If you wish this not to happen, append --skip-seed.

Script execution in Next.js

If you are running, for example, a Next.js project, you will need to adjust your prisma seed field to include a compiler.

package.json

JSON

"prisma": {
   "seed": "ts-node --compiler-options {\"module\":\"CommonJS\"} <path to file>/seed.ts"
}

Creating A Scroll To Top Button With React MUI

Thu, 29 Dec 2022 00:00:00 GMT

There's a decent article by Henrik from Apollo Learn on how to create a Scroll To Top button. However, it contains a bug 🐛: namely, it uses the body tag instead of window as a target for scrolling.

The problem is that document will be undefined when useScrollTrigger is first run.

ScrollToTopFab.tsx

TSX

function ScrollToTopFab() {
  // Use `window` instead of `body` as `document` will be `undefined` when the
  // hooks first runs. By default, useScrollTrigger will attach itself to `window`.
  const trigger = useScrollTrigger({
    // Number of pixels needed to scroll to toggle `trigger` to `true`.
    threshold: 100,
  })

  const scrollToTop = useCallback(() => {
    window.scrollTo({ top: 0, behavior: "smooth" })
  }, [])

  return (
    <Zoom in={trigger}>
      <Box
        role="presentation"
        // Place the button in the bottom right corner.
        sx={{
          position: "fixed",
          bottom: 32,
          right: 32,
          zIndex: 1,
        }}
      >
        <Fab
          onClick={scrollToTop}
          color="primary"
          size="small"
          aria-label="Scroll back to top"
        >
          <KeyboardArrowUp fontSize="medium" />
        </Fab>
      </Box>
    </Zoom>
  )
}

export default ScrollToTopFab

The variable trigger is a boolean responsible for showing the button once the user has scrolled enough. If the user clicks on the button, scrollToTop will trigger a smooth scroll to the top of the window.

Why HTML Element Has Space Or Gap On Top

Mon, 26 Dec 2022 00:00:00 GMT

You may encounter a situation where an HTML element appears to be offset at the top, even though no top margin was set. You, my friend, have just experienced margin collapse! 👻

Here's a (personal) example: you've got a body element which for some reason has an offset at the top, with no visible margin upon inspection in the browser.

A scenario of margin collapse

It turns out that the offset comes from the child element inside the body. How is this happening? 🤷‍♀️

In CSS, when the vertical margins of two block elements meet, the largest margin out of these two is used instead of combining them.

The most common example of margin collapse. Image found on Firsthand Blog

How does this relate to the stated example problem?

As it stands, there is no padding or element with height at the very top of the body element preventing the top margin of the div tag touching the top margin of the body. This causes both margins to collapse 💥 and have the larger margin from the div stick out of the parent element.

Solution(s)

This problem can be solved by either:

Not setting a top margin for the div, or
Adding a top padding to the body.

Using An Array As A Key In A JavaScript Map

Thu, 22 Dec 2022 00:00:00 GMT

Unlike regular objects, Maps in JavaScript allow you to use any key type for your key value pairs.

JAVASCRIPT

// Using an Array as a key fails
const regularObject = {
  ["key1a", "key1b"]: "value", // Uncaught SyntaxError: missing ] in computed property name
}

const arrayKey = ["key1a", "key1b"]
const regularObject = {
  arrayKey: "value",
}

// Variable name is turned into a string
for (const key in regularObject) {
  console.log(`${key}:`, typeof key) // arrayKey: string
}

const mapObject = new Map()
mapObject.set(arrayKey, "value")

// Key remains an object
for (const key in mapObject.keys()) {
  console.log(`${key}:`, typeof key) // key1a,key1b: object
}

As the example above 👆 shows, using an Array in an object literal will simply fail or, in the case of a variable, convert the variable name into a string.

Caveat

This sounds great at first! 🤩 You can easily fetch the value with the appropriate object.

JAVASCRIPT

mapObject.get(arrayKey) // "value"

However, the key works by reference! This means you need to use the same object reference to retrieve the same value! As such, if you were to use a "different" Array, even with the same values, you would retrieve undefined.

JAVASCRIPT

const mapObject = new Map()
mapObject.set(["key1a", "key1b"], "value")
mapObject.get(["key1a", "key1b"]) // undefined

This makes Maps initially more difficult to use as you may not be able to save a reference to the original object that you used as a key.

Solution

How do we solve this? 🤔 You may resort to using a string by joining the elements of your Array.

JAVASCRIPT

const mapObject = new Map()
mapObject.set(["key1a", "key1b"].join("::"), "value")
mapObject.get(["key1a", "key1b"].join("::")) // "value"

However, this is only recommended if your Array only contains primitive types and if you know for CERTAIN that your separator (in this example ::) does NOT appear in your Array.

If that is not the case, I recommend using a library such as array-keyed-map where someone already figured out the problem.

Pagination Strategies Explained

Mon, 19 Dec 2022 00:00:00 GMT

There are two main approaches to pagination on a database-level:

Offset pagination: retrieves the content of a page by traversing items in a list (i.e. the offset). For instance, in a list of 20 items with a page consisting of 5 items each, the database would have to traverse the first 15 items before reaching the contents of page 4.
Cursor-based pagination: retrieves the content of a page by using a marker (i.e. cursor) where the last page ended. This allows the database to skip any items to reach the next page. Using the previous example, to retrieve page 4 one would reference the last item of page 3.

Which one to use

The main advantage of the offset strategy is that it enables users to jump to any page of content. However, it's biggest downside is its slow performance on large datasets as it needs to traverse the entire list to retrieve a page.

On the other hand, cursor-based pagination scales well at a database-level, which makes it the preferred choice for (large) applications. However, a downside of this choice is the inability to skip to any pages. Naturally, this makes it more suitable for apps that use infinite scrolling.

/> Next part

Pagination In React Apollo Client

Thu, 15 Dec 2022 00:00:00 GMT

Continuing with the theme of fetching hundreds of events: In this post, you'll learn how to implement pagination on the client-side with Apollo client and infinite scrolling.

This example describes the implementation details of cursor-based pagination on the client side. For more information on the database and GraphQL implementation, check out the previous pagination post.

/> Go to previous post

Query document

While the events query is defined in a separate GraphQL schema file, we need a query document to tell Apollo what event data we are requesting.

GRAPHQL

query events($filter: EventsInput!) {
  events(filter: $filter) {
    edges {
      id
      title
      # More fields, etc...
    }
    pageInfo {
      endCursor
      hasNextPage
    }
  }
}

Initial query

For the initial request, we only need to pass in the limiter as a variable to the EventsDocument query.

JSX

const {
  data,
  // Needed for paginating results later on.
  fetchMore,
  networkStatus,
} = useQuery(EventsDocument, {
  variables: {
    input: {
      // `LIMIT` may represent any number.
      first: LIMIT,
    },
  },
  notifyOnNetworkStatusChange: true,
})

Make note of notifyOnNetworkStatusChange. By setting it to true in the options parameter of useQuery, we get more fine-grained information on the network status with networkStatus. This is necessary to show the appropriate loading indicator, as we will make two different types of requests.

For the initial request, we would check for the network status loading. However, later on, when we fetch more data using fetchMore, we would check a status of fetchMore.

JSX

if (networkStatus === NetworkStatus.loading || !data || !data.events) {
  return <SpinningCircle />
}

Displaying data

Displaying the data is as simple as iterating it with the map method. No magic here.

However, keep in mind we would like to implement infinite scrolling. This means when we approach the final event in the list, we need to fetch more events. How do we do this?

There's a great library called React Waypoint that allows us to trigger a function as soon as a Waypoint element (i.e. after the final event) enters the viewport.

JSX

<div>
  {data.events.edges.map((event, index, thisArray) => (
    <div key={event.id}>
      <EventCard event={event} />
      {/* Add a Waypoint element after the last element */}
      {index === thisArray.length - 1 && <Waypoint onEnter={fetchMoreEvents} />}
    </div>
  ))}

  {networkStatus === NetworkStatus.fetchMore && <SpinningCircle />}
</div>

When the Waypoint element enters the viewport, it triggers the fetchMoreEvents function, which calls the fetchMore function from useQuery. Notice how we display a loading spinner when we fetch more data and check the network for a fetchMore status.

Fetching paginated data

After fetchMoreEvents is triggered, we call fetchMore only once we've confirmed that there is actually more data to be found using hasNextPage. Once we fetch, we pass in the cursor information in addition to the limiter.

JSX

const {
  events: { edges, pageInfo },
} = data

const fetchMoreEvents = () => {
  if (!pageInfo.hasNextPage) {
    return
  }

  fetchMore({
    variables: {
      first: LIMIT,
      cursor: pageInfo.endCursor,
    },
    updateQuery: (prevResult, { fetchMoreResult }) => {
      fetchMoreResult.events.edges = [
        ...prevResult.events.edges,
        ...fetchMoreResult.events.edges,
      ]

      return fetchMoreResult
    },
  })
}

Pay special attention to updateQuery. ⚠ By default, if we query new data, our existing events will simply be overwritten by the new data. We do not want this!

Instead, we want to merge the our existing data into to newly fetched set of data. In the function, we are merging our existing results prevResults.events.edges into our new results fetchMoreResult.events.edges, which we then return.

Pagination In Prisma And GraphQL

Mon, 12 Dec 2022 00:00:00 GMT

Assume we are retrieving hundreds of events for a website and we do so by paginating the results.

This example describes the implementation details of cursor-based pagination on the server side.

Designing the GraphQL schema, we would have an events query that:

Accepts an input of type EventsInput, and
Returns an output of type EventsResponse.

GRAPHQL

type Query {
  events(input: EventsInput!): EventsResponse!
}

Query input

The input would consist of two variables:

first - how many records to limit the query to, and
cursor - which record to start the query from (fundamental principle behind cursor-based pagination).

The cursor value is optional as it's not required to query the very first page of results.

GRAPHQL

input EventsInput {
  first: Int!
  cursor: ID
}

Query output

The output of the query would contain the queried results in the edges field. The pageInfo field contains info on whether there is another page/batch of events available as well as what the ID of the cursor (i.e. final record) of the current page is.

GRAPHQL

type EventsResponse {
  edges: [Event!]!
  pageInfo: PageInfo!
}

type PageInfo {
  endCursor: ID
  hasNextPage: Boolean!
}

Similarly, the cursor is nullable as we do not expect one in an empty events query.

Prisma

After defining the GraphQL schema of paginated event data, we need to take care of actually retrieving and returning the data. This happens in the events resolver.

The 1^st step consists of querying all events using the pagination properties the resolver receives.

TYPESCRIPT

// Resolver
async function events(_parent, { input }, _context) {
  const { first, cursor } = input;

  const events = await prisma.event.findMany({
    // Limit the number of events returned by this query.
    take: first,
    // Conditionally use a cursor if it exists.
    ...(cursor && {
      skip: 1, // Do not include the cursor itself in the query result.
      cursor: {
        id: cursor,
      }
    }),
  });

If no results are retrieved, it means we've reached the end of the pagination (... or perhaps there's no events in the database 😆) and we return early.

TYPESCRIPT

if (events.length === 0) {
  return {
    edges: [],
    pageInfo: {
      endCursor: null,
      hasNextPage: false,
    },
  }
}

If there is data, the next step is to identify the cursor of that batch of results. Then we use said cursor to peak into the next page. If that query contains any events, it means that there is another page of results.

TYPESCRIPT

const newCursor = events[events.length - 1].id;
  const nextPage = await prisma.event.findMany({
    // Same as before, limit the number of events returned by this query.
    take: first,
    skip: 1, // Do not include the cursor itself in the query result.
    cursor: {
      id: newCursor,
    },
  });

  return {
    edges: events,
    pageInfo: {
      endCursor: newCursor,
      hasNextPage: nextPage.length > 0,
    },
  };
}

Lastly, we return any information we retrieved (including the existence of a next page) in the GraphQL query.

A Simple Development SMTP Server For Linux

Thu, 08 Dec 2022 00:00:00 GMT

If you're looking for a simple SMTP server on Linux or WSL, MailCatcher is a great solution. To install it, you'll first need its dependencies, which includes Ruby.

BASH

apt-get update
apt-get install -y build-essential software-properties-common
apt-get install -y libsqlite3-dev ruby-dev

If these commands fail, you may need to prepend sudo. Then install MailCatcher as a Ruby gem,

BASH

gem install mailcatcher

and launch it with:

BASH

mailcatcher

The email client is then available at http://127.0.0.1:1080. The SMTP server itself is reachable at 127.0.0.1:1025. A password and username are not needed to use the server.

How To Set A Default NVM Node.js Version

Mon, 05 Dec 2022 00:00:00 GMT

You can set a specific Node version as your default with:

BASH

nvm alias default <version>

# nvm alias default 14
# nvm alias default 16.17.0

Of course, the specified version must already be installed. If not, run:

BASH

nvm install <version>

# nvm install 14
# nvm install 16.17.0

Sentry Not Receiving Any Error Logs

Thu, 01 Dec 2022 00:00:00 GMT

If you have Sentry set up correctly in your project and you are not receiving any error logs in the dashboard, your adblocker may be preventing ✋ Sentry from reporting any errors.

How To Get All AWS Resources Via API

Mon, 28 Nov 2022 00:00:00 GMT

AWS provides an SDK called @aws-sdk/client-config-service, which allows you to query all AWS resources using an SQL command.

To start off, install the SDK with a package manager of your choice.

BASH

$ npm install @aws-sdk/client-config-service
$ yarn add @aws-sdk/client-config-service

Then initialize the Config Service Client class which takes several arguments, with your account credentials and region being the essential ones.

TYPESCRIPT

const configClient = new ConfigServiceClient({
  region,
  credentials,
})

The next, and most important step, is to initialize SelectResourceConfigCommand by passing an SQL SELECT query into the class' constructor.

TYPESCRIPT

const params: SelectResourceConfigCommandInput = {
  Expression: "SELECT *", // Get ALL resources
}

const command = new SelectResourceConfigCommand(params)

In the AWS Config page under Advanced queries (located in the sidebar), you may play around with SELECT queries to figure out how to query the resources you need.

Click the "New query" button to start a query

Last, but not least, send your query to AWS and receive a response with your requested data of type SelectResourceConfigCommandOutput.

TYPESCRIPT

const response = await client.send(command)

How To Apply And Delete A Git Stash At The Same Time

Thu, 24 Nov 2022 00:00:00 GMT

One can apply and delete the latest stash simultaneously with the pop command.

BASH

git stash pop

If you wish to pop a specific stash:

BASH

git stash pop stash@{i}

How To Delete Database In Prisma From Terminal

Mon, 21 Nov 2022 00:00:00 GMT

In Prisma, you can delete and recreate your database with:

BASH

$ prisma migrate reset

Be sure to only use this command in development environments

How To Validate File Size With Yup

Thu, 17 Nov 2022 00:00:00 GMT

Yup does not provide any out of the box validation for files. Fortunately, one can use tests a.k.a assertions to provide custom validation. Let's take a look 👀 at the function definition of such an assertion.

TEXT

Schema.test(name: string, message: string | function | any, test: function): Schema

In the 1^st parameter, we pass in a name for the test, e.g. fileSize. The 2^nd parameter takes in a message that would be displayed in case of a failed ❌ assertion. Lastly, the final parameter is a function that evaluates the passed in value (in this case a file) and returns a boolean.

Here's a code example of how one would implement the custom file validation.

TYPESCRIPT

const schema: yup.SchemaOf<ExampleFormInput> = yup.object({
  // ... other fields
  fileUpload: yup
    .mixed<FileList>() // Pass in the type of `fileUpload`
    .test(
      "fileSize",
      "Only documents up to 2MB are permitted.",
      files =>
        !files || // Check if `files` is defined
        files.length === 0 || // Check if `files` is not an empty list
        Array.from(files).every(file => file.size <= 2_000_000)
    ),
})

We define the fileUpload field of type mixed and pass in a generic FileList type. If you were to inspect/log the file data you obtain from your input tag, it would look as follows: [ File, File ].

Concerning the validation logic, we first check if files is defined. If it is, then we check if any files exists in the list. Lastly, we convert the file list into an array so we can run the every method on it to check if all the uploaded files are below 2MB.

TypeScript "as const" explained

Mon, 14 Nov 2022 00:00:00 GMT

as const in TypeScript is known as const assertion. By appending it to a literal value (e.g. object literals, string literals or array literals), we tell the TypeScript compiler to assume the most narrow type definition for that value.

This can be best shown with an example:

TYPESCRIPT

const fruits = ["apple", "banana"]
// const fruits: string[]
const vegetables = ["lettuce", "broccoli", "beans"] as const
// const vegetables: readonly ["lettuce", "broccoli", "beans"]

In the first array, TypeScript assumes that fruits is an array of strings. However, in the 2^nd array with the use of a const assertion, TypeScript assumes vegetables is an array with 3 elements of type lettuce, broccoli and beans, in that exact order.

Most importantly, however, it will render them immutable.

TYPESCRIPT

vegetables[2] = "corn"
// Cannot assign to '2' because it is a read-only property.
vegetables.push("corn")
// Property 'push' does not exist on type 'readonly ["lettuce", "broccoli", "beans"]'.

Yet, be aware that there exist a few exceptions to this rule of immutability.

How To Solve NextAuth Error No Secret In Production

Thu, 10 Nov 2022 00:00:00 GMT

If you get the following error by NextAuth in production,

ZSH

MissingSecret [MissingSecretError]: Please define a `secret` in production.

it means you are missing a secret that is used for various cryptographic tasks such as signing cookies, creating keys, etc. By default, one does not need to set a secret in development mode as a hash is automatically generated using the options object passed into the NextAuth function.

In production, however, you must explicitly set one using the environment variable NEXTAUTH_SECRET. You can easily generate a secret with the command below.

ZSH

$ openssl rand -base64 32

The Difference Between Iterable And Enumerable In JavaScript

Mon, 07 Nov 2022 00:00:00 GMT

The main difference between iterable and enumerable is that the former applies to values and the latter to properties.

Let's start with an iterable object. When an object is iterable, it means that it has an iterator. An iterator is simply another object that gives you access 🔑 to the values of the object it's attached to. Examples of objects with an iterator are arrays and strings.

JAVASCRIPT

const animals = ["cat", "bear", "mouse"]

/* Iterate an array */
for (const animal of animals) {
  console.log(animal)
  // cat
  // bear
  // mouse
}

/* Iterate a string */
for (const letter of "cat") {
  console.log(letter)
  // c
  // a
  // t
}

Using a for...of loop, we can iterate all the values of the animals array and the string cat.

On the other hand, 👀 when we talk about enumerability, we talk about going over the properties of an object. Take again the first example from before and let's apply a for...in loop instead.

JAVASCRIPT

const animals = ["cat", "bear", "mouse"]

/* Enumerate over an array */
for (const animal in animals) {
  console.log(animal)
  // 0
  // 1
  // 2
}

Instead of getting the values of the array, we get the property, i.e. key, of each value instead. In an array or string, it's simply the index.

If we were to apply this to a regular object with string properties,

JAVASCRIPT

const person = {
   age: 19
   name: "Jack",
   weight: "70kg",
}

/* Enumerate over an object */
for (const key in person) {
  console.log(key)
  // age
  // name
  // weight
}

we would get back the names of the properties.

How To Refresh GraphQL Data After Mutation In Apollo Client

Thu, 03 Nov 2022 00:00:00 GMT

Imagine this: you have queried data and you just performed a mutation that alters the queried data. Naturally, you want the data to update after said mutation.

JAVASCRIPT

// `data` stays the same after `deleteEvent` is called.
const { data } = useQuery(EventsDocument)
const [deleteEvent] = useMutation(DeleteEventDocument)

By default, this will not happen. To enable it, you need to specify in the mutation's options field refetchQueries the appropriate values, i.e. the GraphQL document and query name.

JAVASCRIPT

// `data` updates after `deleteEvent` is finished executing.
const { data } = useQuery(EventsDocument)
const [deleteEvent] = useMutation(DeleteEventDocument, {
  refetchQueries: [
    { query: EventsDocument }, // Document node object used in the query
    "events", // Name of the query
  ],
})

Package-lock.json Rewritten After Dependencies Installation

Mon, 31 Oct 2022 00:00:00 GMT

If you find yourself having your entire package-lock.json file being rewritten after running npm install, you may be using an incorrect ❌ node version for your project.

You can check your currently used version with node -v in your terminal and compare it to the supported node version in the engines field of your package.json file.

Enum Arrays In PostgreSQL Explained

Thu, 27 Oct 2022 00:00:00 GMT

Enumerated types, a.k.a enums, represent a set of predefined values. For instance, you could represent programming languages with an enum.

SQL

CREATE TYPE programming_language AS ENUM ('java', 'ruby', 'javascript', 'php');
CREATE TABLE employees (
    # ...
    language programming_language
);

id	developer	language
1	Jack	java
2	Stan	ruby

Attempting to enter a value that is not defined in the Enum set will result in an error.

SQL

INSERT INTO employees VALUES ('Ellie', 'rust');
# ERROR: invalid input value for enum programming_language: "rust"

Storing enum arrays

Certain databases such as PostgreSQL support the storage of enum arrays. That is, instead of being restricted to storing a single enum value in a single cell, you may store multiple. To enable this feature, make the following changes in the CREATE TABLE query.

SQL

CREATE TABLE employees (
    # ...
    languages programming_language ARRAY NOT NULL
);

In the database, arrays are represented by {} curly braces.

SQL

INSERT INTO employees VALUES ('Jack', '{java,javascript}');
INSERT INTO employees VALUES ('Stan', '{ruby}');

id	developer	languages
1	Jack	{java,javascript}
2	Stan	{ruby}

Likewise, attempting to insert an invalid enum value into the array will be caught by the database constraint.

SQL

INSERT INTO employees VALUES ('Ellie', '{rust, javascript}');
# ERROR: invalid input value for enum programming_language: "rust"

Updating enum arrays

You can update your array with the following command:

SQL

UPDATE employees SET languages[2]='php' WHERE developer='Jack';

This will insert php in 2^nd spot and overwrite any pre-existing values.

id	developer	languages
1	Jack	{java,php}
2	Stan	{ruby}

Database Indexing Explained

Mon, 24 Oct 2022 00:00:00 GMT

During a query, a database will scan all the rows of a table to find the matching data. Indexing serves the purpose of speeding up SQL searches/queries and functions the same as a book 📚 index. With the latter, you would refer to the index to find out on which page your desired content is located.

Be aware that indexing comes at a cost. Any table with an index will take longer to update simply because the index itself needs to be updated as well.

In a database, you create an index for one or more columns as follows.

SQL

CREATE INDEX index_name ON table_name (column_name_1, column_name_2, ...)

Pay attention to the order of the columns when creating your index as it will look up the first column in the index, then the next one, and so on in a query. Depending on which column data you require, it can have an impact on your query speed 💨.

Furthermore, any non-indexed column will benefit from the increase in speed if it's looked up together with an indexed column.

SQL

SELECT COUNT(*)
FROM table_name
WHERE non_indexed_column = 'value 1' AND indexed_column = 'value 2'

How To Delete A Project In Google Cloud

Thu, 20 Oct 2022 00:00:00 GMT

In your Google Cloud console, select the project you would like to delete from the top left corner of the navigation bar.

Just a few clicks away!

Once selected, click on the 3 dots ⫶ in the top right corner next to your profile and select Project settings in the dropdown. You should then see the option SHUT DOWN 🗑️ appear below the navigation bar, which allows you to delete your project.

What Are RPC APIs

Mon, 17 Oct 2022 00:00:00 GMT

RPC stands for remote procedure call and simply refers to calling another function. Unlike REST, which is all about resources (i.e. data), RPC is all about actions, i.e. triggering remote functions.

As a great example, Slack's Web API consists of HTTP RPC-style methods where you call (e.g. POST) an action using a URL in the form of https://slack.com/api/METHOD_FAMILY.method.

Remove Table Borders In DOCX JS

Thu, 13 Oct 2022 00:00:00 GMT

Removing the borders of a table is not so obvious, 🤔 especially if you draw your experience from CSS. The existing solution to achieving this goal is to simply define the border color as white, giving the appearance that they have been removed.

In a DOCX table, borders are defined on a cell level.

JAVASCRIPT

new TableCell({
  borders: {
    top: { color: "FFFFFF" },
    bottom: { color: "FFFFFF" },
    left: { color: "FFFFFF" },
    right: { color: "FFFFFF" },
  },
})

Many-to-many SQL Relationship Explained

Mon, 10 Oct 2022 00:00:00 GMT

A many-to-many relationship is defined by many records in one table relating to many records in another table. As a typical example, take a school. Every class will have many students enrolled, but at the same time every student student will attend many classes.

If one were to represent this in a database, one would assume to add multiple foreign keys 🔑 in a single column as seen below.

A student table, and

Id	Name	Class Id
1	Dilshan	1, 2
2	Jessica	2

A class table.

Id	Name	Student Id
1	Finance	1
2	Accounting	1, 2

However, adding comma separated values is not possible in a database. Adding a second foreign key column instead for classes or students isn't possible either. Neither should we add another row, else we introduce data duplication.

Joining Table

To solve this issue, one must employ the use of a joining table (also known as a junction or bridging table). The point is to break up 💔 the many-to-many relationship into 2 one-to-many relationships. It's basically an intermediate table that records any combination of foreign keys of 2 tables. Furthermore, it's common practice to name the joining table after the tables it's linking, e.g. student_class.

To illustrate this, the example from above can be properly remodeled as follows:

A student (one-to-many with student_class) table,

Id	Name
1	Dilshan
2	Jessica

A student_class table, and

Student Id	Class Id
1	1
1	2
2	2

A class (one-to-many with student_class) table.

Id	Name
1	Finance
2	Accounting

Create An Ordered List In DOCX JS

Thu, 06 Oct 2022 00:00:00 GMT

Regarding ordered or numbered lists, I've found the DOCX documentation to be quite sparse, even differing 🙃 from provided examples on their GitHub page. Here's what has worked for me.

The configuration of your ordered list is set in the Document object:

JAVASCRIPT

const doc = new docx.Document({
  // numbering: { ... } - insert ordered list configuration here
})

In the configuration object, you may have one or multiple styles defined. Notice 👈 that the leveling starts at 0.

JAVASCRIPT

const numbering = {
  config: [
    // May contain multiple styles
    {
      reference: "numbering-style-1",
      levels: [
        {
          level: 0,
          format: "upperRoman",
          text: "%1)", // results in '1)', '2)', etc.
          alignment: AlignmentType.START,
          style: {
            paragraph: {
              indent: { left: 720, hanging: 260 },
            },
          },
        },
        {
          level: 1,
          format: "decimal",
          text: "%2.", // results in '1.', '2.', etc.
          alignment: AlignmentType.START,
          style: {
            paragraph: {
              // Increase indentation for nested levels
              indent: { left: 1440, hanging: 980 },
            },
          },
        },
        // And so on...
      ],
    },
  ],
}

In the body of your document, you need to explicitly inform your list to use your custom numbering style by referencing its ID. In addition, you also need to define the level of each list item.

JAVASCRIPT

new Paragraph({
  text: "Some ordered item",
  numbering: {
    reference: "numbering-style-1",
    level: 0,
  },
})

GraphQL Nodes And Edges Explained

Mon, 03 Oct 2022 00:00:00 GMT

Getting a rudimentary understanding of graph theory can go a long way in solidifying your understanding of nodes and edges in GraphQL.

What is a graph?

In simple terms, a graph is an interconnected web of data. Each data point (e.g. books or authors) represents a node and each of these nodes is connected by what are called edges.

A basic graph with nodes and edges

It's important to note that edges are just as important as nodes as they contain metadata about the relationship of two nodes.

How To Pretty Print Or Format JSON String In JavaScript

Mon, 26 Sep 2022 00:00:00 GMT

Unknown to many, JSON.stringify has 2 additional parameters that allow us to format a JSON string.

To start off, you will need to parse the string into a JavaScript object, then back into a JSON string.

JAVASCRIPT

const jsonString =
  '{"car":"Audi","pet":"Dog","location":{"city":"Vienna","country":"Austria"}}'
const parsedJsonString = JSON.parse(jsonString) // JavaScript object

const formattedJsonString = JSON.stringify(parsedJsonString, null, 2) 
console.log(formattedJsonString)
/**
  "{
    \"car\": \"Audi\",
    \"pet\": \"Dog\",
    \"location\": {
      \"city\": \"Vienna\",
      \"country\": \"Austria\"
    }
  }" 
*/

The 3^rd (i.e. space) parameter is of interest to us as it inserts whitespace into the output JSON string. It accepts a number (e.g. 2), which represents the amount of whitespace characters inserted at each line and indentation.

An Introduction To GraphQL

Mon, 19 Sep 2022 00:00:00 GMT

GraphQL is described as a query language for your API, but what exactly does that mean? To get a deeper understanding of this succinct description, let me explain why it was created in the first place.

The problem it solves

Before GraphQL, Representational State Transfer (REST) was the 👉 de facto architecture for APIs on your server. However, as time went on, it became unsuitable for most modern web development needs and caused 2 major issues known as under-fetching and over-fetching.

Let's illustrate these issues with an example. Assume you have two endpoints:

/directors/:id returns id, name, age, biography and movieIds given a specific director id.
/movies/:id returns id, title, description, rating and directorId given a specific movie id.

Under-fetching

To display information of a 🎬 director and all his movies, we would first need to fetch that director from the directors endpoint (e.g. /directors/14). Subsequently, we would then need to fetch each movie seperately that is listed in the movieIds property. Assuming it's only 1 movie, that's already 2 requests in total. But if it's an industrious film maker like Spielberg, there will be many more.

In this sense, the client side is under-fetching, as in not getting enough data in a single request.

Over-fetching

Over-fetching happens in the sense of receiving unnecessary data on each request, as each endpoint gives a predefined structure of data back. For instance, you might not care to show the description of each movie in the authors page, but only the title and rating.

Together, these issue can be noticeable and painful on low performance devices 📲 and slow bandwidth.

GraphQL approach

Knowing these issues, Facebook developed a more efficient alternative that would allow you to fetch only the resources you asked (i.e. queried) for in a single request. This is done by structuring your request in the form of a graph, also known as the Graph Query Language.

GRAPHQL

query DirectorInformation {
  director(id: 14) {
    name
    age
    biography
    movies {
      title
      rating
    }
  }
}

Adding Path Aliases In Gatsby

Mon, 12 Sep 2022 00:00:00 GMT

Similar to Webpack, adding path aliases in Gatsby is quite straightforward. To accomplish this, we need to add a plugin library.

BASH

$ npm i --save gatsby-plugin-alias-imports

Then in your gatsby-config.js file, add the following plugin configuration:

JAVASCRIPT

const path = require("path")

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-alias-imports`,
      options: {
        alias: {},
        extensions: [],
      },
    },
  ],
}

To specify your import aliases, simply add keys (i.e. the shortened paths) and values (i.e. the full paths) in the alias object.

JAVASCRIPT

alias: {
  "~components": path.resolve(__dirname, 'src/components'),
  "context": path.resolve(__dirname, 'src/context')
}

How To Run A Single Cucumber Scenario Or Feature

Mon, 05 Sep 2022 00:00:00 GMT

To run a single Cucumber scenario or feature, one has to use tags. Tags are keywords prepended with an @ sign, which are inserted before a section heading.

GHERKIN

@authentication
Feature: Authenticate user

  @login
  Scenario: User login
    ...

  @logout
  Scenario: User logout
    ...

If a tag is assigned to a feature, every scenario in it will inherit the tag. In other words, running a feature tag will run all of its scenario. Running a tag can be achieved as follows:

BASH

$ npm run cucumber-js --tags @login

Running multiple features or scenarios

To run more than one feature or scenario, simply append your tags to the command.

BASH

$ npm run cucumber-js --tags @login @logout @anotherTag

How To Share Common Steps Between Gherkin Scenarios

Mon, 29 Aug 2022 00:00:00 GMT

If you notice yourself writing the same Given steps over and over again in all scenarios of a feature:

GHERKIN

Scenario A:
  Given User is logged in
  And User did X
  ...

Scenario B:
  Given User is logged in
  When User goes to page Y
  ...

You can extract those steps using the keyword Background as follows:

GHERKIN

Background:
  Given User is logged in

Scenario A:
  Given User did X
  ...

Scenario B:
  When User goes to page Y
  ...

This keyword runs before each scenario, but after any Before hooks.

Conjugation in Given When Then Gherkin Steps

Mon, 22 Aug 2022 00:00:00 GMT

There are no hard and fast rules when it comes to writing Gherkin scenarios. Nonetheless, following the past-present-conditional tense structure is typically seen as good practice.

Given

Given statements are passive and set up a context or condition for the entire scenario. They indicate that something already happened and might still be taking place.

GHERKIN

Given User navigated to the login page (past tense)
Given User is on the login page (present continuous)
Given User has been granted admin privileges (perfect tense)

The exact tense to use is up to you!

When

When statements are active and indicate that an event is occurring. Naturally, this means the present tense should be used.

GHERKIN

When User enters their username and password (present tense)
When User clicks "Log in" (present tense)

Then

Then statements are passive and indicate an expected yet uncertain outcome, state or behaviour.

GHERKIN

Then User should be logged into website (conditional tense)

The keyword should is quite suited to indicate this sentiment.

How To Change A File Back To A Previous Commit

Mon, 15 Aug 2022 00:00:00 GMT

Assume you unintentionally made changes to a file a few commits ago. To revert it to an earlier file version, i.e. commit, you can first list the version history of said file.

BASH

$ git log --oneline <file>

Once you know which version to revert your file back to, pick its commit hash (e.g. 902744c) and run the following command:

BASH

$ git checkout <commit hash> -- <file>

Then stage and commit the changes.

How To Inspect A Disappearing Element In Browser

Mon, 08 Aug 2022 00:00:00 GMT

There are two ways you can achieve this. Both involve activating the debugger of your browser to freeze the DOM:

Pasting the following code snippet in your browser's console will automatically active the debugger in 5 seconds.

JAVASCRIPT

setTimeout(() => {
  debugger
}, 5000)

To manually trigger the debugger, open the Debugger tab in Firefox or the Sources tab in a Chromium browser and hit F8.

In either case, ensure that the element is showing before the debugger is triggered.

How To Update Node.js Dependencies

Mon, 01 Aug 2022 00:00:00 GMT

Recently, I decided to upgrade the Node.js environment of my blog. This meant updating npm packages that might have new breaking changes. Here's how I did it. 👇

Updating npm packages

By running npm outdated, you get a list of all your existing packages with information on the currently used version, the recommended version given your Node.js version and the latest publicly available package version.

Output of npm outdated

Those that require an update will be marked in red, as was the case with @fortawesome/react-fontawesome. To update them, simply run npm update.

Upgrading Node.js

Next up, upgrade your Node environment! The actual procedure itself depends on how you have it installed. If you use a version manager such as nvm, it's as simple as nvm install 16 and nvm use 16.

After doing this, list in package.json the new Node and npm versions under engines.

BASH

$ node -v && npm -v
v16.14.2
8.5.0

JSON

"engines": {
  "node": ">=16.14.2",
  "npm": ">=8.5.0"
}

Upgrading npm packages

By upgrading your Node.js environment, there will inevitably be packages that don't support it yet. It is up to you to identify these packages, e.g. by building the project.

It's highly recommended to focus on one package at a time and to commit locally regularly. Things can get messy real quick. 🙈

Here's an example of mine. When running my project again, I encountered several of these errors below.

Build error caused by an incompatible package version

In this case, node-sass was giving me troubles. What I did next was:

Identify which version of the package was compatible with which version of Node. This turned out quite easy, 😅 but it won't always be.
Install the correct version with npm install node-sass@6.
Afterwards, I deleted the node_modules folder and package-lock.json file, and attempted to reinstall everything. This makes it easier to spot if other packages are using an older version of node-sass, which I then I had to update as well.
Rinse and repeat.

Overall, there's no one-size-fits-all procedure. It comes down to trying things out and hoping for the best. 😬 If things get out of hand, you can always revert to an older commit.

Using A Debounce Function In JavaScript

Mon, 25 Jul 2022 00:00:00 GMT

A debounce function groups several function calls into one single call under the condition that they occur close enough to each other.

This is not to be confused with throttling, which limits function calls to a given time interval. Check out this visual example for the difference.

Debounce explained

Check this scenario out: Imagine your debounce function has a timeout of 300 milliseconds as specified below. If the same function is called 10 times with each call happening less than 300ms apart, the function will be executed on the 10th time, on the condition that the 11th function call does not occur or happens more than 300ms after the 10th one.

JAVASCRIPT

function debounce(func, timeout = 300) {
  let timer
  return (...args) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, timeout)
  }
}

Practical application

We can apply this scenario to the mousemove event. Our callback function will be triggered on the condition that the mouse event is, at some point, called more than 500ms apart.

JAVASCRIPT

window.addEventListener(
  "mousemove",
  debounce(() => console.log("Debounced!"), 500)
)

Opening File In Text Editor From Mac Terminal

Mon, 27 Sep 2021 00:00:00 GMT

You can open any file from your Mac's terminal with the following command.

BASH

open -a TextEdit filename.extension

There are a 2 things you should keep in mind:

The -a flag allows you to specify which application to use, and
This command is run in the same directory as the file. If not, prepend the path to the filename.

How To Hide Popper If Reference Outside View

Sat, 25 Sep 2021 00:00:00 GMT

The PopperJS element has an attribute which keeps track of the visibility of its reference element. Naturally, we can make use of this to conditionally hide our Popper.

SCSS

&[data-popper-reference-hidden='true'] {
  opacity: 0;
  pointer-events: none;
}

Optionally, we can add some animation to the transition.

CSS

transition: opacity .15s ease-out;

TypeScript Return Type For SetTimeout Function

Thu, 23 Sep 2021 00:00:00 GMT

Without actually knowing the return type of setTimeout, we can have TypeScript infer the type by using the utility type ReturnType<Type>.

TYPESCRIPT

const timer: ReturnType<typeof setTimeout> = setTimeout(() => {
  console.log('Hello World!') 
}, 1000)

Type of timer on hover

If you then hover over the timer constant, you'll see that it's of type number. In fact, setTimeout returns a numeric id.

How To Get Stock Price With MOEX API In Google Sheets

Mon, 20 Sep 2021 00:00:00 GMT

The Moscow Stock Exchange (MOEX) 🇷🇺 offers a great API to fetch any securities related data for free. However, it can be confusing at first to wrap your head around it.

Formula

This Excel formula is the key to it all. Pay attention to <ADD CODE HERE> towards the end. This needs to be replaced with the appropriate code of your desired stock.

EXCEL

=IMPORTxml("https://iss.moex.com/iss/engines/stock/markets/bonds/boards/TQOB/securities.xml?iss.meta=off&iss.only=securities&securities.columns=SECID,PREVADMITTEDQUOTE", concatenate("//row[@SECID='", <ADD CODE HERE> ,"']/@PREVADMITTEDQUOTE"))

Gazprom Example

Let's say you want to get the price of a particular stock, e.g. Gazprom. First off, search the stock on the MOEX website.

Search for your desired security on
the MOEX website

Once you're on the details page of your desired stock, locate its Security Code (e.g. GAZP). Then plug it into the formula and let the magic happen! Don't forget 🧠 to put the code in double quotes.

How To Create A Custom React Hook

Sat, 18 Sep 2021 00:00:00 GMT

First off, what is a custom hook? It's nothing more than a function that uses another React hook. If it doesn't use one, then it's simply a helper function.

It's common practice to prepend use to the function name. While it serves no technical ⚙️ purpose, it helps your linter warn for errors.

Example hook

To demonstrate just how simple and easy it is for a function to qualify as a hook, here's a an example:

JAVASCRIPT

const useNumber = (number) => {
  const [someNumber] = useState(number)
  return someNumber
}

Probably the most useless hook you've ever seen, 😅 but it perfectly demonstrates the point I want to get across: you need to use at a minimum 1 single hook.

It doesn't matter what you return. It may be a single value, an array, an object or even nothing at all.

JAVASCRIPT

const number = useNumber(10)
console.log(number) // 10

What To Watch Out For In JavaScript Symbols

Thu, 16 Sep 2021 00:00:00 GMT

In a previous article, I covered the basics of JavaScript Symbols. However, before using them, there are a few caveats you should be aware ⚠️ of.

Not always unique

As it turns out, Symbols aren't always unique, at least if you're using Symbol.for. If you create one using this method, a key 🔑 is required which acts as an identifier.

JAVASCRIPT

Symbol.for('key') === Symbol.for('key') // true

This means that any Symbols with the same key represent the same Symbol.

Keys are hidden

Symbols used as keys in an object are hidden 🙈 from methods such as

Object.keys, and
Object.getOwnPropertyNames()

as well as iterators like:

for...in, and
for...of

JAVASCRIPT

const fruits = {
  [Symbol('banana')]: 2,
  apple: 4,
}

Object.keys(fruits) // Array [ "apple" ]

for (const fruit in fruits) {
  console.log(fruit) // apple
}

To actually ☝️ retrieve all the Symbols of an object, use the getOwnPropertySymbols instead.

JAVASCRIPT

Object.getOwnPropertySymbols(fruits) // Array [ Symbol("banana") ]

Convert to string

Symbols can't be implicitly coerced to a string as this will throw a type error. You first need to convert it to a string with the toString method.

JAVASCRIPT

Symbol('') + '' // TypeError: can't convert symbol to string
Symbol('').toString() + '' // "Symbol()"

How To Scroll To Element In Nested Scrollable Element

Mon, 13 Sep 2021 00:00:00 GMT

Scrolling to an element using JavaScript isn't that difficult, no matter how nested the scrollable area is. Let's take the following layout as an example:

Example Layout

To scroll to any element in a scrollable view, we need to:

Get the distance (in pixels) of the element itself from the top of its parent, and
Scroll the parent view by said distance

How does this translate into code? First, fetch the DOM element you wish to scroll to and get its offset position.

JAVASCRIPT

const elementInScrollableDiv = document.getElementById('some-id')
const positionFromTopOfScrollableDiv = elementInScrollableDiv.offsetTop

Then apply the value to the scrollable parent!

JAVASCRIPT

const scrollableDivElement = document.getElementById('scrollable-div-id')
scrollableDivElement.scrollTop = positionFromTopOfScrollableDiv

JavaScript Symbols Simply Explained

Sat, 11 Sep 2021 00:00:00 GMT

Symbols are primitives that serve as unique identifiers.

JAVASCRIPT

const symbol1 = Symbol()
const symbol2 = Symbol()

console.log(symbol1 === symbol2) // false

Comparing two Symbols that appear identical will actually equate to false as they are both different. No two Symbols are ever the same.

JAVASCRIPT

const symbol3 = Symbol("Bananas")

console.log(symbol2) // Symbol()
console.log(symbol3) // Symbol("Bananas")

You may add a string between the parentheses of the constructor. However, this only serves as a descriptor for the developer.

JAVASCRIPT

new Symbol("12 Bananas") // Uncaught TypeError: Symbol is not a constructor

And despite being called a "constructor", it doesn't actually work with the new keyword.

Use cases

There are 2 common use cases for Symbols.

Property keys

Symbols are frequently used as keys in objects as they ensure that the property value is never unintentionally overwritten.

JAVASCRIPT

let person = {
  name: "Jack"
}

const name = Symbol("name")
person[name] = "Donny"
console.log(person) // Object { name: "Jack", Symbol("name"): "Donny" }

Even when attempting to overwrite the name property inside the person object, the new value is assigned to a new key instead. If you wish to add a symbol inline, make sure to surround with it square brackets.

JAVASCRIPT

person = {
  name: "Jack",
  [name]: "Donny"
}

As constants

Another frequent use case for Symbols are constants, i.e. unique concepts. We often identify these through strings, but how about Symbols?

JAVASCRIPT

const BANANA = Symbol("Banana")
const APPLE = Symbol("Apple")

function identifyFruit(fruit) {
  switch (fruit) {
    case BANANA:
      return "This whole thing is bananas!"
    case APPLE:
      return "An apple a day keeps the doctor away."
    default:
      return "Not a supported fruit!"
  }
}

identifyFruit(BANANA) // "This whole thing is bananas!"
identifyFruit("Apple") // "Not a supported fruit!"

By using Symbols, we can avoid any mixup between variables that have the same string value, but different semantic meanings depending on the context. For instance, Apple might refer to the company and not the actual fruit.

How To Change Background Opacity Without Affecting Children In CSS

Thu, 09 Sep 2021 00:00:00 GMT

The simplest way to create a transparent background, without affecting any child elements, is by using the rgba function. This only affects the color itself and has outstanding support among browsers.

CSS

background-color: rgba(255, 0, 0, 0.3);

The 4th and last argument of this function determines the color's opacity, with 1 being fully opaque and 0 being completely transparent.

Adding Borders To A CSS Triangle

Mon, 06 Sep 2021 00:00:00 GMT

To add a border to a triangle that was created through borders or a clip-path property, you simply have overlay a slightly smaller triangle that gives the illusion 🧙‍♀️ of a border.

Take this black triangle below as an example.

CSS

.triangle {
  width: 0;
  height: 0;
  
  border-bottom: solid 50px transparent;
  border-top: solid 50px black;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

Black triangle

The simplest way to overlay another triangle is by absolute positioning it as a pseudo-element. First, set the parent triangle to a relative position.

DIFF

.triangle {
  width: 0;
  height: 0;
+ position: relative;
  ...
}

Next, shave off some pixels from the overlaying triangle and try to position it inside the parent. There's no magic formula, just some good ol' 🧓 trial and error.

CSS

.triangle:before {
  content: "";
  width: 0;
  height: 0;
  
  position: absolute;
  border-bottom: solid 48px transparent;
  border-top: solid 48px white;
  border-left: solid 48px transparent;
  border-right: solid 48px transparent;
  top: -49px;
  left: -48px;
}

White overlaying triangle

How To Create A Triangle In CSS

Sat, 04 Sep 2021 00:00:00 GMT

There are 2 main ways to create a triangle in CSS: using borders or a clip path.

Borders

This method is the most battle-tested and enjoys support among virtually all browsers. Here's how it's done: Pick an element,

HTML

<div class="triangle"></div>

and apply a thick border to each side using a different colour. 🎨

CSS

.triangle {
  width: 0;
  height: 0;
  
  border-bottom: solid 50px red;
  border-top: solid 50px green;
  border-left: solid 50px blue;
  border-right: solid 50px yellow;
}

Each border resembles a triangle

Doing this, you get 4 triangles! The key is to have a collapsed element, i.e. no width or height. Of course, you only want 1 triangle to be visible, so you simply make the others transparent. Let's go for the green one! 🟢

CSS

.triangle {
  ...
  
  border-bottom: solid 50px transparent;
  border-top: solid 50px green;
  border-left: solid 50px transparent;
  border-right: solid 50px transparent;
}

Triangle using single border

Clip Path

Syntactically, clip-path is easier to write and maintain. However, it's support in older browsers may be lacking.

The polygon geometric shape takes any amount of arguments. Each argument 💬 represents a corner of your shape and takes 2 values: x and y.

X: x coordinate starting from the left to the right of the element
Y: y coordinate starting from the top to the bottom of the element

CSS

.triangle {
  width: 100px;
  height: 100px;
  background-color: red;
  clip-path: polygon(50% 0, 0 100%, 100% 100%);
  /* polygon(1[x y], 2[x y], 3[x y]) */
}

Triangle using Clip Path

The coordinates may be expressed in any unit, e.g. %, px, em, etc. I recommend checking out this awesome Clip Path generator whenever you wish to create a shape using clip-path.

Getting Started With React Popper

Thu, 02 Sep 2021 00:00:00 GMT

I've found the React Popper documentation to not be very comprehensive. This naturally lead to difficulties implementing the library. Here are my findings to help you get started. ⛑

What you'll quickly realise is that you will have to mostly refer to the base PopperJS documentation instead React Popper. The key is knowing how that documentation translates into React.

usePopper hook

This is undoubtedly the most important part of your Popper component. This is essentially a wrapper of the createPopper constructor function that allows you to configure everything.

The 3^rd argument of this hook is an object which can hold up to 3 options, i.e. placement, modifiers and strategy.

JAVASCRIPT

const { styles, attributes } = usePopper(referenceElement, popperElement, {
  placement: "right-start",
  modifiers: [{ name: "arrow", options: { element: arrowElement } }]
})

Modifiers

Modifiers are the real meat of this library. They allow you to configure 🔧 the behavior of your Popper, with each modifier being its own object in the modifiers array.

Be careful with using functions inside the configuration as they can cause a loop. Check out more about this in the FAQ section.

As you'd expect, PopperJS already has default behavior for many of these modifiers, e.g. Flip and Prevent Overflow.

Arrow

By default, an arrow ⬆️ is not enabled. A code example of one can be found in the documentation. Most notably, the styling of the arrow and it's placement relative to the Popper is your responsibility.

How To Make HTML Element Fill Remaining Space

Mon, 30 Aug 2021 00:00:00 GMT

The best way to approach this problem is by using Flexbox. Take this div container with two child elements:

HTML

<div class="container">
  <div>1</div>
  <div>2</div>
</div>

It has the following CSS applied where the first child has a fixed width.

CSS

.container {
  display: flex;
  width: 100%;
  border: 1px solid;
  color: white;
}

.container > div:first-child {
  background-color: red;
  width: 100px;
}

.container > div:last-child {
  background-color: blue;
}

Parent container with 2 child elements

By adding a flex property to the 2^nd child, we can make it fill up the remaining space in the parent container.

DIFF

.container > div:last-child {
  background-color: blue;
+ flex: 1;
}

2nd child filling up remaining space

Tuples In TypeScript Simply Explained

Sat, 28 Aug 2021 00:00:00 GMT

Tuples are arrays of a fixed minimum size and a specific element type order. Its type annotation resembles an array with elements of types.

TYPESCRIPT

let personTuple: [string, number] 

personTuple = 11 // Type 'string' is not assignable to type '[string, number]'.
personTuple = [28, 'Jack'] // Type error!
personTuple = ['Anna', 27]
personTuple = ['John', 35, 'Doe'] // Works as well! 😃

TypeScript throws an error whenever you assign an insufficiently sized array or the wrong type order. However, there is no size restriction beyond the required minimum as the last line demonstrates!

Adding elements

Whenever you add elements, you should be aware that array indexing is not permitted 🙅‍♀️ by the linter beyond the defined size.

TYPESCRIPT

personTuple[2] = 'Bob' // Type '"Bob"' is not assignable to type 'undefined'.
personTuple.push(1)
personTuple[3] // Tuple type '[string, number]' of length '2' has no element at index '3'.

console.log(personTuple) // ["John", 35, "Bob", 1]

Of course, the code will still work as it's all valid JavaScript.

Not arrays

While tuples are arrays in JavaScript, TypeScript considers them as 2 ✌️ separate entities. Consequently, assigning an array to a tuple will fail.

TYPESCRIPT

let personArray = ['Mark', 41]
personTuple = personArray // Type error!

Spread syntax

A common use case for tuples is spreading them as arguments to a function. This can be particularly useful for a large amount of parameters.

TYPESCRIPT

function printPerson(name: string, age: number) { console.log(name, age) }
printPerson(...personTuple) // "Mark",  41

How To Define Functions In TypeScript

Thu, 26 Aug 2021 00:00:00 GMT

Here's a quick rundown on functions in TypeScript. 💁‍♂️

Parameters

Parameters should always be followed by type annotations. The exception to this rule are default values as TypeScript is able to infer the type from the values themselves. Is a parameter optional? Mark it with a ? or else your linter will throw an error when calling the function.

TYPESCRIPT

function printName(firstName: string, lastName = 'Smith', middleName?: string) { 
  if (middleName) console.log(firstName, middleName, lastName) 
  else console.log(firstName, lastName) 
}

Return value

While TypeScript can infer a function's return type, it's good practice 👍 to explicitly state it as it serves as a form of self-documentation. The type annotation is written after the parentheses and before the function body.

If the function doesn't return anything, type void is used.

TYPESCRIPT

function getNumber(): number { return 6 }
function sayHello(): void { console.log('Hello!') }

Arrow functions

In arrow functions, type annotations follow the same syntax as in function declarations.

TYPESCRIPT

const isNumber5 = (value: number): boolean => value === 5

Bind In JavaScript Simply Explained

Mon, 23 Aug 2021 00:00:00 GMT

As the name implies, the bind method binds an object to a function and makes said object accessible in that function through the this keyword.

Take the example below. We define and call a function that is not yet bound to the object user. Consequently, this refers to the global window object instead.

JAVASCRIPT

const user = {
  1: 'John Doe'
}

function printUser() { console.log(this) }
printUser() // Window

After we bind user to printUser, we actually print out the user object.

JAVASCRIPT

printUser.bind(user)() // Object { 1: "John Doe" }

const func = printUser.bind(user)
func() // Object { 1: "John Doe" }

2 things to be aware of:

The bind method duplicates the original function with the new object bound to it. How you call it is up to you.
This will not work on arrow functions!

Adding extra arguments

You may also wish to pass additional arguments to your function while binding. Let's modify our existing function to accept and print a string.

JAVASCRIPT

function printUserAndText(text) { console.log(this, text) }
printUserAndText.bind(user, 'Banana')() // Object { 1: "John Doe" } Banana

It may be confusing at first, but parameters defined in your function must be passed into bind from the second argument onwards.

Button Inside Label Not Triggering Input

Sat, 21 Aug 2021 00:00:00 GMT

When you nest a button inside a label tag, with the latter targeting an input, clicking the button will not trigger the input. Take this checkbox as an example:

HTML

<input type='checkbox' id='potato' />

<label for='potato'>
  <button>Potato</button>
</label>

Clicking the button will not select the checkbox. What can be done? As far as I know, there are 2 possibilities:

Switch the button for a div that is styled like one, or
Apply the following style to the nested button:

CSS

label > button {
  pointer-events: none;
}

A great explanation on the possible cause of this issue can be found on Stack Overflow.

How To Animate HTML Accordion Opening

Thu, 19 Aug 2021 00:00:00 GMT

Animating an HTML Accordion is quite straightforward once you know how to target the pertinent elements.

CSS

details[open] summary ~ * {
  animation: accordion .5s ease-in-out;
}

For the animation, we target the opened state and any elements inside details that follow the summary tag - hence ~ *.

CSS

@keyframes accordion {
  from {
    opacity: 0;
    margin-top: -10px;
  }
  to {
    opacity: 1;
    margin-top: 15px;
  }
}

The keyframes themselves are nothing special: some simple vertical movement and change in opacity. To see everything in action, check out my Codepen snippet.

Feature Flags Simply Explained

Mon, 16 Aug 2021 00:00:00 GMT

A great way to understand what feature flags are is by contrasting it to an alternative: feature branches 🌳.

The main purpose of feature branches is to keep the main branch clean and releasable at all times while having incomplete and unreleasable features in separate branches. Of course, this approach has its own pros and cons.

And then there are feature flags. 🚩

Working in master

In a way, they are the opposite of feature branches: every developer is working in the master branch. However, incomplete features are "toggled" off so that they don't appear in production. This toggle is what's often referred to as a feature flag or feature toggle.

As an example, imagine you're working on some sort of widget for a webpage. 💻 Its feature flag is nothing more than an if statement that one can configure using an environment variable.

TEXT

if env.WIDGET_ACTIVE: showWidget() # Pseudocode

This allows you to dynamically switch on 💡 the feature at a later date once it's ready without having to redeploy the entire application.

How To Style Arrow Of HTML Accordion

Sat, 14 Aug 2021 00:00:00 GMT

To change the arrow of an HTML accordion, we need to use the pseudo-element ::marker on the summary tag.

CSS

summary::marker {
  content: '\f138' ' ';
  /* Required for FA icons */
  font-family: 'Font Awesome 5 Free';
  font-weight: 700;
}

To change the default, all you need to do is add a content property and an appropriate value. In this example, I'm using Font Awesome to get a Chevron icon. Notice how I've added a 2^nd empty string to create some right-hand spacing.

Custom Chevron icon

Opened accordion

To change the icon of an opened accordion, we must take advantage of the dynamically generated open attribute on the details tag.

CSS

details[open] summary::marker {
  content: '\f13a' ' ';
}

Check out the code snippets above in an interactive Codepen editor.

How To Redirect Your WordPress Site To A New Domain

Thu, 12 Aug 2021 00:00:00 GMT

For whatever reason, you've decided to redirect your WordPress traffic on domainA.com to domainB.com. Here's how you do it!

Install Redirection

Go to Plugins > Add New, search for the Redirection plugin, then install and activate it.

Enter a new domain

Access the plugin under Tools > Redirection and go to the tab Site. There you should see an input field for the domain you'd like to redirect to. Enter your new domain, click update, et voilà!

You're successfully redirecting your WordPress site.

Sorting An Array Of Numbers In JavaScript

Mon, 09 Aug 2021 00:00:00 GMT

JavaScript offers a built-in function called sort that makes sorting incredibly easy. Take numbers as an example.

JAVASCRIPT

const numbers = [150, 38, 2000, -4]
numbers.sort() // Array(4) [ -4, 150, 2000, 38 ]

By default, the function will treat any array elements as strings, and consequently sort them alphabetically. 🔤 To sort numerically, we need to pass in a callback function that compares two numbers at a time.

The sort method modifies the original array.

JAVASCRIPT

numbers.sort((a, b) => a - b) // Ascending sort
numbers.sort((a, b) => b - a) // Descending sort

The comparison happens by subtracting one number from the other, which will result in 3 possible outcomes:

If the calculation returns less than 0, nothing happens,
If greater than 0, a and b switch places, and
If equals to 0, the order of a and b with respect to each other remains unchanged, but changes in relation to the rest of the array.

Building An Accordion Without JavaScript And CSS

Sat, 07 Aug 2021 00:00:00 GMT

Gone are the days where you need to use JavaScript or an HTML and CSS hack to create an accordion. Why? Accordions are now native to HTML with solid browser support!

HTML

<details>
  <summary>Accordion Title</summary>
  <p>This will be in the accordion body.</p>
  <p>And this too!</p>
</details>

Accordion Title

This will be in the accordion body.

And this too!

Native HTML accordion

The details tag contains the content of your accordion, i.e. the expanded body. By default, it's closed. Inside of that, the summary tag shows the heading of your accordion.

Conditional Importing In JavaScript

Thu, 05 Aug 2021 00:00:00 GMT

To conditionally import a module or whatnot, you got to make use of dynamic imports. As an example:

JAVASCRIPT

// In async function
const module = await import('./someModule')

Pay attention to the import keyword. If used as a function, it returns a promise.

Knowing that, conditionally importing is then a walk in the park. 🌳

JAVASCRIPT

// In async function
let someModule 
if (someCondition) someModule = await import('./someModule')

How To Create A Custom Key In Firebase Database

Mon, 02 Aug 2021 00:00:00 GMT

In the realtime database of Firebase, whenever you push() a new node, a key/id is automatically generated for it. However, you can easily create a custom key the following way:

JAVASCRIPT

firebase.database().ref(`some/path/${customKey}`).set({})

If you've got no data to add, it's important to still push an empty object or else the node with the custom key will not be created.

How To Call Child Function From Parent Component In React

Sat, 31 Jul 2021 00:00:00 GMT

One way to call a child component's function from its parent is with the help of the useRef hook.

Here's the gist of it: We pass a Ref (e.g. childFunc) to a child 🧒 component and assign the desired function to the Ref's current key. This then gives you access to that very function in the parent component.

Take a look at this interactive example:

const Parent = () => {
  const childFunc = React.useRef(null)

  return (
    <>
      <Child childFunc={childFunc} />
      <button onClick={() => childFunc.current()}>Click me</button>
    </>
  )
}

const Child = ({ childFunc }) => {
  React.useEffect(() => {
    childFunc.current = alertUser
  }, [])

  function alertUser() {
    alert('You clicked!')
  }

  return null
}

render(<Parent />)

const Parent = () => {
  const childFunc = React.useRef(null)

  return (
    <>
      <Child childFunc={childFunc} />
      <button onClick={() => childFunc.current()}>Click me</button>
    </>
  )
}

const Child = ({ childFunc }) => {
  React.useEffect(() => {
    childFunc.current = alertUser
  }, [])

  function alertUser() {
    alert('You clicked!')
  }

  return null
}

render(<Parent />)

Pay attention to how childFunc is passed down: a custom props is used instead of ref as the latter would otherwise return a DOM element.

How To Check If User Is Offline Using JavaScript

Thu, 29 Jul 2021 00:00:00 GMT

The browser provides an API that allows us to check its connection to a network: navigator.onLine.

JAVASCRIPT

if (navigator.onLine) alert('Online')
else alert('Offline')

Be aware that I said to a network, not the internet! 🚨 To avoid a false positive, I therefore recommend adding a second check:

JAVASCRIPT

async function hasInternet() {
  try {
    await fetch('https://google.com')
    return true
  } catch (error) {
    return false
  }
}

This second check is done by carrying out a simple GET request to any website. In our example it's google.com, but in general the response should contain as little data as possible.

If we are unable ❌ to reach the site, the request throws an error, which means we're not connected to the internet.

Lastly, let's integrate our check into the IF statement:

JAVASCRIPT

// Inside async function
if (navigator.onLine && await hasInternet()) alert('Online')
else alert('Offline')

Changing Array Values Using ForEach Loop

Mon, 26 Jul 2021 00:00:00 GMT

Take this array as an example,

JAVASCRIPT

const numbers = [1, 2, 3, 4, 5]

and let's add 1 to each element. The forEach method makes this really easy.

JAVASCRIPT

numbers.forEach((number, index, array) => {
  array[index] = number + 1
})

console.log(numbers) // Array(5) [ 2, 3, 4, 5, 6 ]

The trick is to use a 3^rd argument in the callback function that gives you access to the array. Be aware that this operation mutates the original array.

Automatically Refreshing Google Sheets Formulas

Sat, 24 Jul 2021 00:00:00 GMT

To automatically refresh your Google Sheets and any included formulas, open File > Spreadsheet settings. From there, select the Calculation tab.

Once selected, you will then see a Recalculation option which determines how often your formulas are refreshed.

You can currently change it to:

On change and every minute, or
On change and every hour

Both will trigger an update even if nobody is viewing the sheet.

4 Tools To Debug Cumulative Layout Shift On Your Website

Thu, 22 Jul 2021 00:00:00 GMT

Let me guess, you've analysed your website's performance and you received a bad score for Cumulative Layout Shift (CLS). This means that during the initial page load, 1 or more HTML elements have visibly moved around more than the tolerated amount.

If you wish to read more about CLS and how it's calculated, I recommend this article. For now, let me show you a few tools 🛠 you can use to identify the culprit(s)!

The suggested tools are only available in a Chromium-based browser.

Lighthouse

To start off, Lighthouse gives some great pointers as to which elements are causing trouble. In your browser, open DevTools. Then select the Lighthouse tab and generate a report with Performance selected.

Once done, under Diagnostics, there should be a dropdown called Avoid large layout shifts that lays out (pun intended 😆) the issues.

Lighthouse report for CLS

I recommend using this over a third-party tool like GTmetrix solely for the reason that you can test your localhost as you try to improve your CLS score.

Visual feedback

Another neat way to debug CLS is through visual feedback 👀. You've got 2 options: either see it as it's happening or get a historical view of it.

Live

In DevTools, click on the 3 dots in the top right corner. Go to More tools > Rendering and then select the Layout Shift Regions option in the bottom window.

Rendering options in DevTools

Refresh your page and see the magic 💁‍♂️ happen.

History

In the Performance tab, you'll first need to record the performance of the page load. Click on the round grey circle ⃝ in the top left corner, refresh the page and then press Stop.

You end up seeing a bunch of strips and I want you to pay attention to the one name Experience.

Summary of a layout shift

Click on a red block, which represents a layout shift that happened.

You should then see more details about the shift in the Summary window below. If you hover over the Location coordinates, you will see red overlays appear on your site.

Layout Instability API

For a detailed examination 🧐 of the shifted elements, I recommend using the Layout Instability API. The easiest way to do so is through the Web Vitals extension. After you've installed it, enable logging under Options > Console Logging.

Next, open your browser's console and refresh the page. You should then see something similar to below. Look out for the word CLS.

Log from Web Vitals extension

Dig a bit deeper in the log tree and you will come across the following properties of the element:

JSON

"previousRect": {
  "bottom": 46,
  "height": 40,
  "left": 373,
  "right": 491,
  "top": 6,
  "width": 118,
  "x": 373,
  "y": 6,
},
"currentRect": {
  "bottom": 46,
  "height": 40,
  "left": 358,
  "right": 476,
  "top": 6,
  "width": 118,
  "x": 358,
  "y": 6,
}

Here are some things you should know about:

x and y correspond to the x and y coordinates of the elements top-left corner.
Similarly, top, left, bottom and right use the top-left corner as their point of origin. For instance, bottom is calculated by adding y and height.
If previousRect contains only 0, this means that the element has shifted into view. If that is the case for currentRect, the element has shifted out of view.

Get Width And Height Of HTML Element Using JavaScript

Mon, 19 Jul 2021 00:00:00 GMT

There are a few ways you can retrieve the width and height of an HTML element on your page. However, it's important to know what these measurements are made up of: the content, padding, border and margin.

Box model in HTML

In all the following methods, the margin is always excluded from and the content is always included in the height and width calculations.

Method 1

The offsetHeight and offsetWidth read-only properties return a value that includes the border, padding and scroll bar. If the element is hidden, then both properties will return 0.

JAVASCRIPT

const htmlElement = document.getElementById('some-id')

htmlElement.offsetHeight
htmlElement.offsetWidth

Sourced from MDN Web Docs

Method 2

Similarly, clientHeight and clientWidth are read-only properties. However, the returned value solely includes the padding. Take notice that for inline elements, these properties return 0.

JAVASCRIPT

htmlElement.clientHeight
htmlElement.clientWidth

Sourced from MDN Web Docs

Method 3

Another way to measure an element's dimensions is using getBoundingClientRect(). It's main advantage over the other 2 methods is that it gives you fractional values instead of rounding them to the nearest integer.

JAVASCRIPT

const elementDimensions = htmlElement.getBoundingClientRect()
elementDimensions.height
elementDimensions.width

It returns an object of type DOMRect that contains the height and width of the element. And like offset..., the border, padding and scroll bar are included in the measurements.

UseRef Hook In React Simply Explained

Sat, 17 Jul 2021 00:00:00 GMT

The useRef hook returns nothing more than a JavaScript object with a current key. And just like any other object, we can assign a new value to that key as we please.

JAVASCRIPT

const refObject = useRef('initialValue')

useEffect(() => {
  if (!refObject.current) return

  console.log(refObject.current) // initialValue
  refObject.current = 'newValue'
  console.log(refObject.current) // newValue
})

No rerenders with updates

Whenever you assign a new value to current, your component is not rerendered. Compare this in contrast to useState where any updates will trigger a rerender of your React component.

The reason for this is that Refs exist outside of a component's rendering cycle. This allows you to store and persist data across renders. Consequently, Refs are suited for avoiding stale closures.

Accessing HTML elements

Another frequent use case of this hook is gaining access to the DOM. This is done by passing in the Ref to a React element, which consequently assigns the DOM node to the current key.

JSX

useEffect(() => {
  if (!refObject.current) return

  console.log(refObject.current) // <div>Some HTML element</div>
  refObject.current.style.color = 'red'
})

return (
  <div ref={refObject}>Some HTML element</div>
)

How To Set Up A Local AWS Lambda Function

Thu, 15 Jul 2021 00:00:00 GMT

This is a quick, no frills guide to setting up your own Lambda function locally.

Step 1 - Install the SAM CLI

First off, you need the AWS SAM CLI to even get started. Instructions on how to install it for your respective operating system can be found here.

Grab a drink ☕️ as this might take a while.

Step 2 - Create a new SAM application

Some of you might be wondering, what the hell is a SAM application? Also called Serverless Application Model, it's basically a framework that hosts your Lambda function and any associated functionality (e.g. APIs, events and databases).

Once the CLI is installed, you can then create a new project with sam init. You'll be guided through the process. And in my case, I've chosen the Hello World application template with Node.js as a runtime.

BASH

-----------------------
Generating application:
-----------------------
Name: sam-tutorial
Runtime: nodejs12.x
Dependency Manager: npm
Application Template: hello-world
Output Directory: .

Step 3 - Understand the project structure

Open up your project in an IDE of your choice and you'll be greeted with the following structure. 🌳 Of course, file names may slightly differ depending on your configuration.

TEXT

sam-tutorial/
  ├── events/
  │   └── event.json
  ├── hello_world/         # Contains the Lambda function
  │   ├── tests/
  │   ├── .npmignore
  │   ├── app.js           # Contains the Lambda handler logic
  │   └── package.json
  ├── .gitignore
  ├── README.md
  └── template.yaml        # Configuration file of your SAM application

Step 4 - Run the Lambda function

In your terminal, change the directory to your SAM application and run sam build. Be aware that for any changes that you make in the Lambda function, you will need to re-run this command.

Next on the list, Docker! 🐳 Boot up that bad boy. Now, you've got 2 options regarding how to run your function.

Invoke it with an event

You can invoke the function using an event specified in events/event.json. To do that, simply run sam local invoke.

Run an API server

Or perhaps you prefer to host your Lambda function with an API server that listens to any incoming calls. For that, run sam local start-api.

How To Remove Word From String In JavaScript

Mon, 12 Jul 2021 00:00:00 GMT

You've got a string, e.g. Hello World!, and you want to remove a word from it, e.g. World!. This job can be done with replace() as follows:

JAVASCRIPT

const newString = 'Hello World!'.replace(' World!', '')
console.log(newString) // 'Hello'

The 1^st parameter of this function takes the value you want to replace, and the 2^nd parameter the value you want to replace it with. In our case, the latter is an empty string.

Multiple occurrences

How about removing a string that appears multiple times? Instead of a string value, replace also accepts regular expressions.

JAVASCRIPT

const newString = 'Hello World and outer World!'.replace(/ World/g, '')
console.log(newString) // 'Hello and outer!'

In the regular expression, we can pass in the word as is, including any special characters like a space. The g means global search, i.e. watch out for multiple occurrences.

What if the words have different cases? Simply add an i after g, and the search won't be case-sensitive.

JavaScript Closures Simply Explained

Sat, 10 Jul 2021 00:00:00 GMT

They key to understanding closures is scope, because closure is nothing more than the outer scope of a function.

Let's look at an example:

JAVASCRIPT

/* Outer scope */
let someVariable = 'someValue'

function printVariable() {
  /* Inner scope */
  console.log(someVariable)
}

printVariable() // someValue

The function printVariable has access to any variables defined outside of it, e.g. someVariable. The successful log of this variable proves so.

Nested functions

Closures are often discussed in the context of nested functions, using the following typical example:

JAVASCRIPT

function outerFunction(outerVariable) {
  return function innerFunction(innerVariable) { 
    console.log(outerVariable, innerVariable)
  }
}

const anotherFunction = outerFunction('outside')
anotherFunction('inside') // outside, inside

As you can see, innerFunction still has access to any variables from its parent function, even after the parent has been called.

However, whenever you work with closures, you should be acutely aware ⚠️ of the concept of stale closures!

Difference Between :last-of-type And :last-child

Thu, 08 Jul 2021 00:00:00 GMT

Starting off with the simpler :last-of-type pseudo-class, imagine this example.

HTML

<style>
  li:last-of-type {
    color: red;
  }
</style>

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li> <!-- Red -->
</ul>

In plain English, this rule simply means: select and color red the last element of type li inside a parent element. You can mix the group with as many other tags as you'd like and still get the same result.

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <p>Bus</p>
  <li>4</li> <!-- Red -->
  <p>Car</p>
</ul>

Gotcha

:last-child is not as straightforward and can cause quite some confusion if not understood properly.

HTML

<style>
  li:last-child {
    color: red;
  }
</style>

In plain English, this rule goes a bit differently: select and color red the last element of a parent if it's of type li. As opposed to :last-of-type, this pseudo-class actually contains a condition.

HTML

<ul>
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <p>Bus</p>
  <li>4</li> <!-- Not red -->
  <p>Car</p>
</ul>

If you were to apply it to our last example, 4 would not be colored red. The reason is that the last element of our ul parent is not of type li, but of type p.

Finding SQL Rows With Similar Values

Mon, 05 Jul 2021 00:00:00 GMT

Let me first clarify what I mean by similar values. Imagine the following Users table containing emails and names:

Id	Email	Name
1	jack@gmail.com	Jack
2	mike@gmail.com	Mike
3	anna@yahoo.com	Anna
4	stan@qq.com	Stan
5	sara@gmail.com	Sara

How would we go about retrieving all Gmail emails? Allow me to introduce you to LIKE. 🤗 This command enables you to perform some basic pattern matching.

SQL

SELECT * FROM Users WHERE Email LIKE '%gmail%';

Outputs:

Id	Email	Name
1	jack@gmail.com	Jack
2	mike@gmail.com	Mike
5	sara@gmail.com	Sara

After LIKE, simply enter the common value you'd like to find.

% serve as a catch-all symbol, meaning it will match any character. For instance, %gmail will only match with values that has any kind and any amount of characters preceding the word gmail, but none following it.

Understanding Stale Closures In JavaScript

Sat, 03 Jul 2021 00:00:00 GMT

Stale closures are difficult to avoid, therefore it's important to recognize its occurrence. In another article, I mentioned that closures are nothing more than the outer scope of a function.

However, there's one fine detail I left out: a closure resembles more a snapshot 📸 of the scope's data when the function is created. This means that there's a risk of accessing outdated data given the right circumstances.

An example

Things are always best explained through an example, aren't they?

JAVASCRIPT

let number = 0

const increment = () => {
  number += 1
  const message = `Incremented to ${number}`

  return () => {
    console.log(message)
    console.log(`Number: ${number}`)
  }
}

const log = increment()
increment()
increment()
log() // Incremented to 1; Number: 3

In this example, we have a function that increments a variable number and at the same time returns an anonymous function that prints out 📝 the value of said variable.

Yet, something strange happens on the final line where log is called: number is printed out with 2 different values (i.e. 1 and 3). One would instinctively think that it should be 3 in both cases.

What happened? In short: we are actually printing out and looking at two different number variables. In long: read on. 😛

Understanding in steps

It's critical to understand what's happening in the following lines of code.

JAVASCRIPT

const log = increment()
increment()
increment()
log()

Step 1

First off, the function increment and variable number are only ever created once in the entire program. However, anything declared inside of increment is actually created every time 🔁 the function is run.

When increment is first called, it:

Updates number to 1,
Creates a new variable called message. This last variable copies the value of 1 from number and stores the string "Number: 1" in a certain location in memory, and
Creates and returns an anonymous function. During the former, said function establishes a reference to each variable outside its scope. This reference is maintained even after the parent function is called. This is closure!

Suppose we now call log. This is what we get:

JAVASCRIPT

const log = increment()
log() // Incremented to 1; Number: 1

Nothing unexpected so far. 😉

Step 2

JAVASCRIPT

const log = increment()
increment()
increment()
log()

increment is called 2^nd time, it:

Updates number to 2,
Creates a new variable called message. This variable copies the value of 2 from number and stores the string "Number: 2" in a new location in memory, and
Creates and returns a new anonymous function which references the location in memory of the newly created message.

By now, you hopefully understood that our anonymous 👤 function is referencing a different message variable in memory whenever it's created.

JAVASCRIPT

const log = increment()
log() // Incremented to 1; Number: 1
const log2 = increment()
log2() // Incremented to 2; Number: 2

Solving stale closure

So how would we go about solving this issue? For this example, there are 2 possibilities.

Either move message to the root of the program, so that only one copy of it ever exists. It is then simply updated on every increment call. Or... 🤔

JAVASCRIPT

let number = 0
let message = ''

const increment = () => {
  number += 1
  message = `Incremented to ${number}`

  return () => {
    console.log(message)
    console.log(`Number: ${number}`)
  }
}

const log = increment()
increment()
increment()
log() // Incremented to 3; Number: 3

Move message into the anonymous function. Sure, it will still be created on every function call. However, the difference is that it is created when log is called, not increment. Thus, it "sees" the latest value of number as we intend it to.

JAVASCRIPT

let number = 0

const increment = () => {
  number += 1

  return () => {
    const message = `Incremented to ${number}`

    console.log(message)
    console.log(`Number: ${number}`)
  }
}

const log = increment()
increment()
increment()
log() // Incremented to 3; Number: 3

How To Make Styled Components Class Names Readable

Thu, 01 Jul 2021 00:00:00 GMT

As the class names of your styled components are generated, even attempting to debug them can be a nightmare. Fortunately, there is a way to make the names legible and more meaningful, for example from sc-AxgML to Header__StyledMainHeader-AxgML.

Add a plugin

If you're reading this article, you likely don't have the babel plugin installed - do so first.

BASH

npm install --save-dev babel-plugin-styled-components

In your .babelrc file, add the plugin.

JSON

{
  "plugins": ["babel-plugin-styled-components"]
}

And there you go! 🥳 By default, the plugin will generate more legible class names by using your component's name and the name of the file it's in.

Additional configuration

You can exclude file names from the generated class names by configuring your .babelrc file accordingly.

JSON

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "fileName": false
      }
    ]
  ]
}

However, if for whatever reason you wish to revert to unreadable 😛 class names, simple set displayName to false.

JSON

{
  "plugins": [
    [
      "babel-plugin-styled-components",
      {
        "displayName": false
      }
    ]
  ]
}

Adding Path Aliases In Webpack Projects

Mon, 28 Jun 2021 00:00:00 GMT

I generally prefer to use absolute paths over relative paths as the latter can be a nightmare 😱 to use at times. And Webpack offers a straightforward way to implement this with path aliases.

JAVASCRIPT

import { function } from '../../some/file' // From this,
import { function } from '~some/file' // To that!

Path prefixes

I haven't seen much discussion about whether you should prefix a symbol to a path or even which symbol it should be, for that matter (e.g. ~ or @). So let me briefly give my 2 ✌️ cents on this matter.

I prefer prefixing my paths with ~, aka a tilde. Why? Well, I want to make it clear that the module I'm importing is from the project itself. An @ gives me the impression I'm importing an external npm/Yarn package. Adding no prefix at all conveys the same thing.

What's left? The tilde isn't associated with anything in the JavaScript ecosystem. Fun fact, it's actually used in Unix/Linux to represent your home directory! 😆

Configuration

Enough talk. In your webpack configuration file, look out for the resolve property. In it, you can add as many aliases as you desire.

JAVASCRIPT

module.exports = {
  resolve: {
    // Add aliases here
    alias: {
      '~components': path.resolve(__dirname, 'src/components/'),
      pages: path.resolve(__dirname, 'src/pages/'),
      utils: path.resolve(__dirname, 'src/utils.js'),
    }
  }
}

The alias property takes an object, where

The key represents the path alias, and
The value the absolute system path to the folder or file.

Fortunately, __dirname returns the root directory of the project. Therefore, you only need to know the remaining path to your desired folder or file.

If you want to prefix a symbol to a path alias, make sure to wrap it in quotes.

How To Create An HTML5 Drawing App From Scratch

Sat, 26 Jun 2021 00:00:00 GMT

In this mini-series, you'll learn how to create a drawing app 🎨 with an HTML5 Canvas and JavaScript. The topics range from an introduction to the canvas element up to the addition of a spray tool.

Each article is accompanied by an interactive Codepen snippet ✏️ that includes the discussed code. Enjoy!

How To Create Global Styles With Styled Components

Thu, 24 Jun 2021 00:00:00 GMT

There are times where you want to style your React application globally and not each component individually. For this, we can make use of the createGlobalStyle API.

createGlobalStyle is a web-only API, i.e. it won't work in React Native.

Step 1: Create a global styles file

Create a file that contains your global styles, e.g. global.css.js.

JSX

import { createGlobalStyle } from 'styled-components'

export default createGlobalStyle`
  body {
    margin: 0;
    padding: 0;
    color: ${props => (props.darkMode ? 'white' : 'black')};
  }
`

You can apply string interpolations as expected. However, be aware that createGlobalStyle returns a component that doesn't accept any children. 🧒

Step 2: Add it to your React tree

At the root of your application, add the global styles component at the same level or deeper than your content (in this example App).

JSX

import React from 'react'
import ReactDOM from 'react-dom'
import { ThemeProvider } from 'styled-components'

import { App } from './App'
import { theme } from './theme'
import GlobalCSS from './global.css'

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <GlobalCSS />
    <App />
  </ThemeProvider>, document.getElementById('root')
)

Since GlobalCSS is a styled component 💅, it can also take advantage of ThemeProvider.

How To Find Value In Array Of Objects In JavaScript

Mon, 21 Jun 2021 00:00:00 GMT

Assume you've got an array of objects containing fruits.

JAVASCRIPT

const fruits = [
  { id: 1, title: 'Orange' },
  { id: 2, title: 'Banana' },
  { id: 3, title: 'Apple' },
]

And let's suppose you want to find the element containing Banana 🍌. There are 2 ways you can go about this problem, that I recommend.

Array.find()

The find method iterates through every element of an array (similar to map or forEach) and evaluates a statement you defined. If the statement is ever true, the iteration is stopped and that exact element is returned from the function.

JAVASCRIPT

const bananaObject = fruits.find(element => element.title === 'Banana')
console.log(bananaObject) // Object { id: 2, title: "Banana" }

Array.findIndex()

If you aren't interested in retrieving the element, but rather knowing if it exists, findIndex is your friend. 😋 It behaves the same way as find, but returns the index of the matching element (or -1 if not found).

JAVASCRIPT

const bananaIndex = fruits.findIndex(element => element.title === 'Banana')
console.log(bananaIndex) // 1

Adding A Spray Tool To An HTML5 Canvas

Sat, 19 Jun 2021 00:00:00 GMT

Adding a spray tool can seem complicated at first, but the logic behind it is relatively simple. A spray tool behaves very much like a pencil tool, but it differs in one simple way: 💁‍♂️ it adds additional random points around every point drawn.

Drawn dot (with gray border)
surrounded by randomly generated dots

Change draw style

Before we work on the logic of the spray distribution, let's first create a dropdown that enables a user 👩‍💻 to switch between drawing styles:

Spray
Pencil

HTML

<select onchange="changeDrawStyle(this.value)">
  <option value="pencil">Pencil</option>
  <option value="spray">Spray</option>
</select>

I've added a function called changeDrawStyle that listens to any changes in the dropdown. And it has access to these changes through the argument this.value.

The function

What does the function do? Simple really! 🤓 We first track the current drawing style with a variable called drawStyle. The function then simply changes the value whenever a new style is selected.

JAVASCRIPT

let drawStyle = 'pencil'
const changeDrawStyle = (newStyle) => drawStyle = newStyle

Spray logic

The backbone of the spray logic is called getRandomOffset. Now don't worry! 😰 You don't really have to understand the function in depth if you don't want to. If you google "Random points generator", you'll find plenty of code snippets accomplishing the same thing.

JAVASCRIPT

function getRandomOffset(radius) {
  const randomAngle = Math.random() * (2 * Math.PI);
  const randomRadius = Math.random() * radius;

  return {
    x: Math.cos(randomAngle) * randomRadius,
    y: Math.sin(randomRadius) * randomAngle
  }
}

The only thing you should know is that it randomly generates a coordinate inside the shape of a circle ⭕️.

Applying the random points

For every point that we "draw" (which we are actually not), let's add 20 other points around it. We add the random coordinates to the "drawn" central point and then apply every random point to the canvas with fillRect.

JAVASCRIPT

const generateSprayPoints = (event) => {
  const amountOfPoints = 20

  for (let i = 0; i < amountOfPoints; i++) {
    const offset = getRandomOffset(context.lineWidth * 2);
    const x = event.clientX + offset.x
    const y = event.clientY + offset.y

    context.fillStyle = context.strokeStyle
    context.fillRect(x, y, 1, 1)
  }
}

Yes, by using fillRect, each point is technically 😛 a square. However, it's so small you cannot tell. Furthermore, the color of the "square" should always be equals to that of the app state, i.e. context.strokeStyle.

Another point I should mention is that getRandomOffset is dependent on our custom line width so that the spray "grows" with a larger line width. You could also apply this to the amount of generated points so that smaller sprays don't look as concentrated.

JAVASCRIPT

const amountOfPoints = context.lineWidth * 2

Checking for draw style

To wrap it up, in our draw function, we always check if we want to use the spray tool. If yes, quit the function and generate the points. As mentioned previously, we don't draw the center line with a spray, hence we skip the stroke method.

JAVASCRIPT

const draw = (event) => {
  if (!isDrawing) return
  context.lineTo(event.clientX, event.clientY)
  
  if (drawStyle === 'spray') return generateSprayPoints(event) // new
  context.stroke()
}

As usual, you can check out the demonstrated code in an actual example right here.

Adding Search Functionality To A Gatsby Site

Thu, 17 Jun 2021 00:00:00 GMT

In this article I'll show you how I added search functionality to my Gatsby site. I decided to implement this using an API-based search engine, namely Algolia, for several reasons.

Opting for a client-side solution will eventually bloat the bundle size of your site as content increases,
Algolia offers a generous free tier and has great documentation for ReactJS/Gatsby, and
If I ever use up the free tier (which is a great problem to have 🤩), I can easily opt for a more affordable solution, such as a self-hosted Elasticsearch instance.

Adding Algolia

There's a handy-dandy Gatsby plugin for Algolia that will take care of the indexing of your pages. Indexing simple means creating a search-friendly list.

By default, the plugin uses the frontmatter field title from your Markdown files. If it's named differently in your site, you will need to configure the Algolia query, accordingly.

Account

First of all, make sure you have created an Algolia account.

Installation

Then, install the plugin in your project.

BASH

npm install gatsby-plugin-algolia

Connect the API

Next on the list, connect 🔌 the plugin to your Algolia account using your API keys.

API Keys dashboard in Algolia

Copy the values of Application ID, Search-Only API Key and Admin API Key, and paste them into a .env file at the root of your project. Of course, ⚠️ don't commit this file to your repository.

.ENV

GATSBY_ALGOLIA_APP_ID=<App ID>
GATSBY_ALGOLIA_SEARCH_KEY=<Search-Only API Key>
ALGOLIA_ADMIN_KEY=<Admin API Key>

Configure the plugin

While we have installed the plugin, Gatsby isn't aware of it yet. Therefore, in gatsby-config.js, make the following changes.

JAVASCRIPT

// Add this to the top
require("dotenv").config()

// ...
  plugins: [
      // ... existing plugins
      {
        resolve: `gatsby-plugin-algolia`,
        options: {
          appId: process.env.GATSBY_ALGOLIA_APP_ID,
          apiKey: process.env.ALGOLIA_ADMIN_KEY,
          queries: require("./src/utils/algolia-queries")
        },
      }
    ],
  }
// ...

The dotenv library, which is already installed in Gatsby, will make the variables from our .env file accessible in our configuration file.

Configure the query

The plugin also needs to know what content on your site is "searchable", which will be done using a GraphQL query. I've decided to define it in a separate file to avoid clutter 😌, though you may do so directly in the queries property if you wish to.

Most likely, you will also need to adjust the query and change pagePath (i.e. location of your Markdown files).

JAVASCRIPT

const escapeStringRegexp = require("escape-string-regexp")
const pagePath = `_posts`
const indexName = `Pages`

const pageQuery = `{
  pages: allMarkdownRemark(
    filter: {
      fileAbsolutePath: { regex: "/${escapeStringRegexp(pagePath)}/" },
    }
  ) {
    edges {
      node {
        id
        frontmatter {
          title
          tags
        }
        fields {
          slug
        }
        excerpt(pruneLength: 5000)
      }
    }
  }
}`

function pageToAlgoliaRecord({ node: { id, frontmatter, fields, ...rest } }) {
  return {
    objectID: id,
    ...frontmatter,
    ...fields,
    ...rest,
  }
}

const queries = [
  {
    query: pageQuery,
    transformer: ({ data }) => data.pages.edges.map(pageToAlgoliaRecord),
    indexName,
    settings: { attributesToSnippet: [`excerpt:20`] },
  },
]

module.exports = queries

After you run gatsby build, you should then see your pages indexed in your Algolia account under "Indices". 🥳

Indices page in Algolia

Adding the UI

As the user interface heavily depends on your website and design preferences, I won't go into too much detail about it. Rather, I'll try to provide an overview of the logic behind it.

Dependencies

To interact with the Algolia API from the UI, I'll be using 🙌

Algolia Search - provides the API client, and
React InstantSearch - a React component library from Algolia to easily build search interfaces.

BASH

npm install react-instantsearch-dom algoliasearch

The input field

The "search box", as Algolia calls it, is nothing more than a form with an input field. The connectSearchBox function takes care of all the interaction between the search query and on your indices.

JSX

import React from "react"
import { connectSearchBox } from "react-instantsearch-dom"

export default connectSearchBox(
  ({ refine, currentRefinement, className, onFocus }) => (
    <form className={className}>
      <input
        className="SearchInput"
        type="text"
        placeholder="Search"
        aria-label="Search"
        onChange={e => refine(e.target.value)}
        value={currentRefinement}
        onFocus={onFocus}
      />
    </form>
  )
)

The input value is exposed by the variable currentRefinement, while the refine function allows you to modify it.

Instead of creating a custom SearchBox, you can alternatively use a pre-made widget from the library.

Search results

The search results are displayed as a simple list 📃 of articles that feature a title and a snippet. Again, react-instantsearch-dom helps us out with most of the heavy lifting.

JSX

import React from "react"
import { Link } from "gatsby"
import {
  Highlight,
  Hits,
  Index,
  Snippet,
  PoweredBy,
} from "react-instantsearch-dom"

const PageHit = ({ hit }) => (
  <div>
    <Link to={hit.slug}>
      <h4>
        <Highlight attribute="title" hit={hit} tagName="mark" />
      </h4>
    </Link>
    <Snippet attribute="excerpt" hit={hit} tagName="mark" />
  </div>
)

const HitsInIndex = ({ index }) => (
  <Index indexName={index.name}>
    <Hits className="Hits" hitComponent={PageHit} />
  </Index>
)

const SearchResults = ({ indices, className, show }) => (
  <div className={className} style={!show ? { display: 'none' } : {}}>
    {indices.map(index => (
      <HitsInIndex index={index} key={index.name} />
    ))}
    <PoweredBy />
  </div>
)

export default SearchResults

By default, your entire search index will be shown, i.e. all your indexed pages. Thus, we hide everything using show until the user types in something, which in turn filters the results.

If you're using the free tier of Algolia, you're required to use the PoweredBy widget.

Similar to before, you can take advantage of a pre-made widget instead of creating a custom SearchResults component.

Creating a search component

Almost there, I promise! 😝 After creating the search box and search results, place them in a common Search component.

It will keep track of the search value, whether the input field is in focus as well as hook up everything to the client API of Algolia.

JSX

import React, { useState } from "react"
import algoliasearch from "algoliasearch/lite"
import { InstantSearch } from "react-instantsearch-dom"
import SearchBox from "./SearchBox"
import SearchResults from "./SearchResults"

export default function Search({ indices }) {
  const [query, setQuery] = useState()
  const [hasFocus, setFocus] = useState(false)
  const searchClient = algoliasearch(
    process.env.GATSBY_ALGOLIA_APP_ID,
    process.env.GATSBY_ALGOLIA_SEARCH_KEY
  )

  return (
    <InstantSearch
      searchClient={searchClient}
      indexName={indices[0].name}
      onSearchStateChange={({ query }) => setQuery(query)}
    >
      <SearchBox onFocus={() => setFocus(true)} hasFocus={hasFocus} />
      <SearchResults
        show={query && query.length > 0 && hasFocus}
        indices={indices}
      />
    </InstantSearch>
  )
}

Search in action

To finally use the search functionality, in a page of your choice, insert the following lines:

DIFF

+ import Search from "./search"
+ const searchIndices = [{ name: `Pages`, title: `Pages` }]
const SomePage = () => (
+ <Search indices={searchIndices} />
)

searchIndices specifies which indices Algolia should use from your account. If you followed my earlier instructions to the teeth 🦷, you can leave it as is.

What Are Docker Images, -Files And Containers

Mon, 14 Jun 2021 00:00:00 GMT

The best way to understand what Docker images, -files and containers are, is to understand how to they relate to each other. For that, I found an image (pun intended 😝) that does a great job of demonstrating this.

Process of creating a container

Dockerfile

A Dockerfile is simply a text file that contains instructions on how to build an image. In it, you specify the things you'd like to use, such as software dependencies and your custom code. The instructions look something like this:

TEXT

FROM ubuntu:18.04
COPY . /app
RUN make /app
CMD python /app/app.py

The software dependencies that you specify (e.g. Ubuntu in this example) will be Docker images themselves pulled from the official repository.

Afterwards, you run the docker build command to create an image from the file.

Docker image

In my mind, 🧠 images are simply idle containers that have everything installed (e.g. Node.js and my custom code) and include instructions on how to launch the entire application.

It's much like your laptop, which has a bunch of tools installed and contains your programming project, but it isn't running yet!

From an image, you then create a Docker container with docker run.

Docker container

With a better understanding of Docker images, containers are nothing more than a running instance of your image. Things are actually happening inside the container.

You can stop, restart, move or delete the container, and even create a new image based on the current state of your container.

Creating An Eraser For HTML5 Canvas

Sat, 12 Jun 2021 00:00:00 GMT

There are different ways to creating an eraser. ⌫ The simplest solution you will come across is an "eraser" that matches the background color. This might give you the impression that you are erasing the content, when in fact you are simply drawing on top of it.

Of course, this method won't work with a more complex background, such as a picture. 🏙 Therefore, let me show you the recommended solution.

Removing pixels

The key to all this is the context property globalCompositeOperation. This property dictates how the canvas behaves when new shapes are drawn. For our objective, 🎯 we are interested in setting it to destination-out.

JAVASCRIPT

const context = canvas.getContext('2d')
context.globalCompositeOperation = 'destination-out'

What this does is make way for any new shapes by removing existing pixels that overlap with it. More importantly, however - this new shape isn't actually drawn even if you have a color 👩‍🎨 set.

Creating a button

To trigger this eraser functionality at will, let's set the property through a function.

JAVASCRIPT

const erase = () => context.globalCompositeOperation = 'destination-out'

Afterwards, we simply attach it to an "Eraser" button's click event.

JAVASCRIPT

<button onclick='erase()'>Eraser</button>

Drawing again

But wait! ✋ Once erase is triggered, the "eraser" mode will stay on until it is removed. To do that, we need to revert the property back to its default value, i.e. source-over. The perfect time to do so is when a user changes the drawing color.

JAVASCRIPT

const changeColor = color => {
  context.strokeStyle = color
  context.globalCompositeOperation = 'source-over' // new
}

Check out my Codepen for the eraser in action!

Learn How To Use The UseCallback Hook

Thu, 10 Jun 2021 00:00:00 GMT

The useCallback hook in React is used whenever you want to prevent an inline function (i.e. a function inside a React component) from being created on each render. Let me show you what I mean by that.

Reference equality

How does React know whether a function is newly created or is memoized from a previous render. Reference equality is the name of the game. ✊

Take a look at the example below where we call a factory function that returns another function, much like useCallback! We store the returned functions and then compare them.

JAVASCRIPT

function factory() {
  return () => console.log('Woah...')
}

const funcA = factory()
const funcB = factory()

funcA() // Woah...
funcB() // Woah...

console.log(funcA === funcA) // true
console.log(funcA === funcB) // false

You might (wrongly ❌) presume that funcA and funcB are identical as they were returned by the same function. However, they are both stored in different places in memory, which is why the comparison equates to false.

Thus, comparing by reference simply means comparing the storage location of the function.

The issue

I created an interactive (yes, interactive!) example, made up of a Parent and Child component.

The parent contains a counter, and an increment function which is passed down to the child, while
The child has the function attached to a button's onClick event.

Pay attention 🚨 in particular to the useEffect hook that gets triggered whenever it detects a different copy of increment.

const Parent = () => {
  console.log('Parent component rendered.')
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(prevCount => prevCount + 1)

  return (
    <>
      <div>Count: {count}</div>
      <Child increment={increment} />
    </>
  )
}

const Child = ({ increment }) => {
  
  React.useEffect(() => {
    console.log('New "increment" function found.')
  }, [increment])

  return (
    <button onClick={increment}>Increment</button>
  )
}

render(<Parent />)

const Parent = () => {
  console.log('Parent component rendered.')
  const [count, setCount] = React.useState(0)
  const increment = () => setCount(prevCount => prevCount + 1)

  return (
    <>
      <div>Count: {count}</div>
      <Child increment={increment} />
    </>
  )
}

const Child = ({ increment }) => {
  
  React.useEffect(() => {
    console.log('New "increment" function found.')
  }, [increment])

  return (
    <button onClick={increment}>Increment</button>
  )
}

render(<Parent />)

Whenever you click on the "Increment" button, you'll see that our function gets created on every render of the parent.

Be sure to have your browser's console open so you can see the logs.

The solution

To prevent this from happening, simply wrap the function in a useCallback hook.

DIFF

- const increment = () => setCount(prevCount => prevCount + 1)
+ const increment = React.useCallback(() => setCount(prevCount => prevCount + 1), [setCount])

The 1^st function argument simply takes in our increment function from earlier, while the 2^nd argument accepts a dependency array, much like useEffect.

Once you apply these changes to increment, which I encourage you do in the live editor, you'll notice the function only gets created once (on page load).

When to use

If you aren't familiar with memoization in JavaScript, I recommend you check out 👉 my article. I point out how you shouldn't prematurely optimize as it might worsen performance, not improve it. The same principle applies to useCallback.

So when should you use this hook? In my opinion, when

Your inline function becomes noticeably expensive, or
If your function frequently or unintentionally triggers a re-render of other hooks and/or components

Memoization In JavaScript Explained

Mon, 07 Jun 2021 00:00:00 GMT

Memoization is a word you'll hear from time to time in JavaScript, especially if you use a library like React. It simply means memorizing, aka caching, the result of a function - the same way your browser 🧭 might cache the results of a GET request.

The benefit is quite straightforward: you improve performance by not running the same process twice. However, as you'll soon see, premature optimization isn't recommended.

Memoizing a function

Imagine you want to retrieve the h1 title of a page.

JAVASCRIPT

function getTitle() { 
  return document.getElementById('heading').text
}

It could be that you plan on calling this function many times, so you get the idea to cache the return value.

JAVASCRIPT

let cache = {}

function getMemoizedTitle() {
  if (cache['heading']) return cache['heading']
  
  const titleValue = document.getElementById('heading').text
  cache['heading'] = titleValue
  return titleValue
}

The memoized function first checks whether we already computed the result once before. If that is the case, we retrieve it and skip the rest of the function. If not, we proceed to retrieve the h1 title and store it in our cache object.

Premature optimization

Just because you can, doesn't mean you should memoize a function. In fact, our memoized function is less performant than the regular function! 😱

I've even prepared a Codepen snippet which tests the performance of both functions when run twice. What you'll notice is that most of the time, our memoized function is slower.

Be sure to perform the Codepen test in a Chromium-based browser as other browsers (to my knowledge) don't return time in fractions of a millisecond.

The reason

There's always a cost associated with memoization, which stems from the extra lines of code. In our case, the getTitle function wasn't computationally heavy to begin with. Therefore, the extra cost 💸 of optimization was greater than the potential amount of resources saved.

When To Use

As a rule of thumb, you should only apply memoization on a function that has become noticeably expensive to perform. Regex calls and recursions are part of that as well.

Likewise, this principle can be applied in JavaScript libraries/frameworks where memoization is prevalent (e.g. React).

How To Clear An HTML5 Canvas

Sat, 05 Jun 2021 00:00:00 GMT

How do you clear an entire canvas of its drawings? For that, there's a context method called clearRect. Let me show you:

JAVASCRIPT

const context = canvas.getContext('2d')
context.clearRect(0, 0, canvas.width, canvas.height)

clearRect takes in 4 arguments:

The 1^st two are the x and y coordinates, respectively. Above, we specified the origin of the canvas, i.e. the top-left corner.
The last 2 are width and height, respectively, which start from said coordinates. Here, canvas represents the canvas element.

Given those 4 parameters, anything inside those dimensions are removed from the canvas.

Trigger with button

Most drawing apps will implement this exact functionality using some sort of reset button. To mimic this, start off by wrapping clearRect in a function.

JAVASCRIPT

const resetCanvas = () => context.clearRect(0, 0, canvas.width, canvas.height)

Then simply attach it to a button's onclick event.

HTML

<button onclick='resetCanvas()'>Reset</button>

A working version of this can be found in my Codepen.

Cherry-Pick In Git Explained

Thu, 03 Jun 2021 00:00:00 GMT

The command cherry-pick allows you to copy a commit from one branch to another. Assume you have the following commit history in branch B, which you can retrieve with git log --oneline.

BASH

e061ddd Some commit message
e215bb2 Another commit message
e0401f2 Bananas

Back in branch A, you can then copy the 1^st commit from branch B with git cherry-pick e061ddd. This will apply the cherry picked commit as a new commit to the current branch head. 👤

Options

On top of this, cherry-pick offers a few neat options you might fancy to use.

Multiple copies

To copy multiple commits, simply append more hashes at the end of the command.

BASH

git cherry-pick e061ddd <another-commit-hash>

Each cherry-picked commit will be added as a new separate commit to your branch.

Stage instead of commit

Perhaps you want to copy a commit without directly committing it to the current branch? Don't worry, we got you covered. 😜

BASH

git cherry-pick e061ddd -n

Rename it

Likewise, you can rename a cherry-picked commit with

BASH

git cherry-pick e061ddd -e

What is Docker and why use it

Mon, 31 May 2021 00:00:00 GMT

Docker is an open-source platform that allows you to package an application along with its technology stack and dependencies into an isolated container that can be deployed and replicated in practically any environment.

Bit of a mouthful, isn't it? Don't worry, you'll get there.

The problem it solves

To properly understand Docker, you need to know why it exists, i.e. what problem it solves. The problem is called Dependency Hell. 😈

Imagine you've completed your backend web application and you deploy it to a server. Yet, for some reason it's not working as expected. Maybe your API is malfunctioning or suddenly you're missing a dependency.

But wait... I've installed and configured everything the same way as on my local development environment!, you proclaim.

Exactly, this is an issue that many developers have and will continuously encounter throughout their career.

The difference to a VM

In many ways, Docker is like a virtual machine (VM). However, there's one major way in which differ from one another. Let me explain... 😋

Emulation is key

So they both emulate an environment, but the question you should ask yourself is what environment do they emulate?

Sourced from Wikipedia

The image above shows the different layers of a computer.

The bottom layer represents the hardware, e.g. RAM, CPU and Hard Drive.
The middle represents the core of the Operation System (OS), 🍎 also known as the Kernel. It communicates between your hardware and applications layer.
The top layer represents the software of your computer. This can be "simple" things like a text editor or something more complicated like a file system.

So what's the difference in term of emulation?

Docker only emulates the applications layer of your computer, while a virtual machine emulates the OS Kernel AND applications layer. Consequently, Docker containers are much more lightweight and more compact than a VM.

How To Change Line Width Using Slider In HTML5 Canvas

Sat, 29 May 2021 00:00:00 GMT

A slider is one of those cool must-have features of any drawing app. And it's surprisingly easy to implement! Let's start off with a simple slider and some configuration.

HTML

<input type="range" min="1" max="10" value="2" />

Be sure to set the default value of lineWidth equals to that of the slider. In our example, that would be 2.

Whenever the user moves the slider, we want to update the canvas property lineWidth. For this, we attach a custom function to the onchange event attribute.

HTML

<input onchange='changeWidth(this.value)' type="range" min="1" max="10" value="2" />

We get the new value by explicitly passing in this.value. The function itself is pretty straightforward.

JAVASCRIPT

const changeWidth = value => context.lineWidth = value

Once again, check out my Codepen for the whole thing in action!

Different SQL Joins Explained

Thu, 27 May 2021 00:00:00 GMT

In a previous blog post, I covered the basics of an SQL JOIN statement. I'd like to further elaborate on the 4 different types of Joins that exist.

The Venn diagrams below give a great overview of how they work, which I recommend you use as a reference to my explanations below.

Sourced from W3Schools

I will also reuse from my previous post the -

Pets and

Id	Age	Name
1	12	Sandy
2	7	Odie

Owners tables to illustrate each JOIN statement.

Id	Name	Pet_Id
1	Dilshan	2
2	John	NULL

Be aware that not every SQL database supports a RIGHT JOIN and FULL OUTER JOIN.

INNER JOIN

Executing a JOIN statement without specifying the type will always default to an INNER JOIN. This type will only return rows that have matching values (i.e. pet IDs) in both tables.

SQL

SELECT * FROM Pets JOIN Owners ON Pets.Id=Owners.Pet_Id;

Query output:

Id	Age	Name	Id	Name	Pet_Id
2	7	Odie	1	Dilshan	2

LEFT JOIN

In a LEFT JOIN, the entire left-hand table is included even if a row doesn't have a match. Consequently, NULL values are used on the right-hand side to represent this missing match.

SQL

SELECT * FROM Pets LEFT JOIN Owners ON Pets.Id=Owners.Pet_Id;

Query output:

Id	Age	Name	Id	Name	Pet_Id
1	12	Sandy	NULL	NULL	NULL
2	7	Odie	1	Dilshan	2

RIGHT JOIN

A RIGHT JOIN is identical to a LEFT JOIN, but only reversed. That means the entire right-hand table is included along with matching (empty) rows on the left-hand side.

SQL

SELECT * FROM Pets RIGHT JOIN Owners ON Pets.Id=Owners.Pet_Id;

Query output:

Id	Age	Name	Id	Name	Pet_Id
2	7	Odie	1	Dilshan	2
NULL	NULL	NULL	2	John	NULL

FULL OUTER JOIN

A FULL OUTER JOIN, or simply OUTER JOIN, is basically a combination of the previous two. Here, all the records on both tables are included along with empty rows for any missing matches.

SQL

SELECT * FROM Pets OUTER JOIN Owners ON Pets.Id=Owners.Pet_Id;

Query output:

Id	Age	Name	Id	Name	Pet_Id
1	12	Sandy	NULL	NULL	NULL
2	7	Odie	1	Dilshan	2
NULL	NULL	NULL	2	John	NULL

How To Squash Existing Commits Into One

Mon, 24 May 2021 00:00:00 GMT

Git allows you to easily change any commit history and this includes merging multiple commits. Assume you want to merge your last 3.

BASH

git rebase -i HEAD~3

To achieve this goal, use the rebase command, which simply allows us to reapply our commits. -i makes the whole process interactive 🕹 and HEAD~3 represents the 3 latest commits.

Run the command and you'll be greeted by the following:

BASH

pick e061ddd Some commit message
pick e215bb2 Another commit message
pick e0401f2 Bananas

# Rebase 1b15b90..e0401f2 onto 1b15b90 (3 commands)
#
# Commands:
# p, pick <commit> = use commit
# r, reword <commit> = use commit, but edit the commit message
# e, edit <commit> = use commit, but stop for amending
# s, squash <commit> = use commit, but meld into previous commit
#
# [...]

Your IDE may default to a text editor like Vim or Emacs. If you aren't familiar with the editor, you will need to look up the pertinent keystrokes to interact with the text.

To merge several commits, squash everything into the most recent one. I also prefer to reword the latter to a more descriptive title. You can achieve this by changing the word in front of each commit message to the correct command (as shown in the legend above).

BASH

reword e061ddd Some commit message
squash e215bb2 Another commit message
squash e0401f2 Bananas

After you apply those changes, you will see another wall of text. 📃

BASH

Some commit message
  
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# [...]

Here you may rename your commit to something like Many commits and bananas. Apply the change and you'll be greeted by yet some more text.

BASH

# This is a combination of 3 commits.
# This is the 1st commit message:

Many commits and bananas

# This is the commit message #2:

Another commit message

# This is the commit message #3:

Bananas

# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
#
# [...]

I usually comment out all the remaining commit messages with a # as I already reworded the first message to something more descriptive. Of course, you may keep them if you prefer a more detailed commit history.

Apply the changes and Bob's your uncle! 👨‍🦳

How To Change Drawing Colors In HTML5 Canvas

Sat, 22 May 2021 00:00:00 GMT

Changing colors of a stroke isn't 🚀 rocket science. All you have to do is set the strokeStyle property to a color of your choosing.

JAVASCRIPT

const context = canvas.getContext('2d')
context.strokeStyle = 'red'

However, let's keep things interesting by adding some buttons that change the color for you.

Adding color buttons

HTML

<button>Black</button>
<button>Blue</button>
<button>Red</button>

404: Styling not found! 😆

Since we want to trigger a color change upon clicking a button, we have to listen to the click event with a function called changeColor.

HTML

<button onclick='changeColor("black")'>Black</button>
<button onclick='changeColor("blue")'>Blue</button>
<button onclick='changeColor("red")'>Red</button>

Then, in our function, we simply use the passed in color value and assign it to the context.

JAVASCRIPT

const changeColor = color => context.strokeStyle = color

You can check out a working version of it right here!

What Is Currying In JavaScript

Thu, 20 May 2021 00:00:00 GMT

I like to describe currying as nested functions that can be sequentially called whenever you like to. You may in fact have already encountered some so far. This is what they look like:

JAVASCRIPT

someFunction('some')('string')('parameters')

Currying is a concept that can be applied not only to JavaScript, but any programming language in general.

Nested functions

Any function that takes in 2 or more parameters can be recreated as a curried 🍛 function. Take this simple addition function.

JAVASCRIPT

function add(a, b) {
  return a + b
}

add(3, 2) // 5

To transform it into a curried function, apply the following changes:

JAVASCRIPT

function add(a) {
  return function(b) {
    return a + b
  }
}

add(3)(2) // 5

You'll notice that a nested function is called by appending parentheses (with or without a parameter) onto the outer function call, e.g. someFunction()(). Naturally, you'll call and pass down any parameters to the nested functions in the order that they are defined.

Call it whenever you like

Remember how I said that a curried function "can be sequentially called whenever you like"? This is where they really shine! ✨

You should always keep in mind that a curried function will return another function until you call the most inner nested one. Let's continue with our previous example.

JAVASCRIPT

const nestedFunction = add(3)
console.log(nestedFunction) // function add(b)

If we call only the outer layer of our add function, it returns the nested function we defined earlier. Of course, you have to store the function somewhere, like nestedFunction in our example, or else you won't be able to call it afterwards.

Now... you could theoretically take a break, drink some coffee ☕️ and complete the curried function 15 minutes later and still receive the same output as before.

JAVASCRIPT

nestedFunction(2) // 5

And this is why one would use a curried function. Not so you can go on a break, 😆 but because you don't need all the parameters upfront to call a function.

You might have the 1^st parameter ready, but it might take some time (and processing) until your 2^nd, or 3^rd parameter is available.

Joining Two SQL Tables

Mon, 17 May 2021 00:00:00 GMT

The JOIN statement allows you to combine the data from 2 or more tables. Imagine you've got two tables:

A Pets table, and

Id	Age	Name
1	12	Sandy
2	7	Odie

An Owners table.

Id	Name	Pet_Id
1	Dilshan	2
2	John	NULL

Suddenly, you got the brilliant 🤓 idea to combine both tables to view pet and owner data in a single place. So you execute the following command in your query window:

SQL

SELECT * FROM Pets
JOIN Owners
ON Pets.Id=Owners.Pet_Id;

This outputs:

Id	Age	Name	Id	Name	Pet_Id
2	7	Odie	1	Dilshan	2

What happened?

This is the way I like to go about JOIN statements:

Decide on a "base" table - SELECT * FROM Pets. For instance, you may think to yourself: "Who are the owners of these pets?".
Add the data from your "target" table - JOIN Owners.
Find the column that links both tables - ON Pets.Id=Owners.Pet_Id. This is often an id (by design) and in this case as well (Pet id).

By default, a JOIN statement defaults to an INNER JOIN statement. This means only rows that have matching Pet Id values in both tables will be returned. Notice how pets that do not have an owner (😭) and owners that do not have a pet weren't included.

SQL Joins can grow in complexity depending on what data you're looking for and the type of JOIN statement you're using. Concerning the latter, I plan on writing a blog post soon.

Dragging A Mouse Outside Of An HTML5 Canvas

Sat, 15 May 2021 00:00:00 GMT

In an earlier post, I showed you how to create some basic drawing functionality using a canvas. However, there's one edge case that I didn't cover: dragging your mouse outside and back into the canvas.

Current issues

In the current implementation, the mouse release outside the canvas isn't being registered, i.e. isDrawing remains true. And on top of that, once the mouse returns to the canvas, our drawing reconnects with our previous drawing.

Dragging mouse back into canvas

Mouse release

We are currently constraining the mouseup and mousedown events to the canvas itself. We should change this to the entire web page.

JAVASCRIPT

window.addEventListener("mousedown", startDrawing)
window.addEventListener("mouseup", stopDrawing)
canvas.addEventListener("mousemove", draw)

We can leave the last listener as is since we don't really care too much about mouse movements outside of the canvas.

Connecting points

To prevent the connecting bug I outlined earlier, we need to tell the canvas that we're starting a new drawing whenever the mouse enters the canvas.

There's a mouseover event that allows us to do that.

JAVASCRIPT

const enterCanvas = (event) => {
  context.beginPath()
}

canvas.addEventListener("mouseover", enterCanvas)

The improved functionality can be viewed in this Codepen.

How To Convert A File To A Byte Array

Thu, 13 May 2021 00:00:00 GMT

Let's say you've got a file (e.g. image) that you want to send to a server via REST API.

JAVASCRIPT

const inputNode = document.getElementById('upload_file')
const selectedFile = inputNode.files[0]

And for that you wish to first convert the file into a byte array. To start off, define an asynchronous function called getAsByteArray that returns it as such. Specifically, it returns a Uint8Array object.

JAVASCRIPT

async function getAsByteArray(file) {
  return new Uint8Array(await readFile(file))
}

To instantiate the object, the constructor accepts a number of different parameters. The one we care about is a buffer, i.e. an ArrayBuffer object. We can pass our file as one to the constructor with the help of the FileReader API.

Let's do that in a new function called readFile.

JAVASCRIPT

function readFile(file) {
  return new Promise((resolve, reject) => {
    // Create file reader
    let reader = new FileReader()

    // Register event listeners
    reader.addEventListener("loadend", e => resolve(e.target.result))
    reader.addEventListener("error", reject)

    // Read file
    reader.readAsArrayBuffer(file)
  })
}

This function returns a Promise that will resolve once the file as has been fully read from the readAsArrayBuffer() function. As this is an asynchronous operation, once done, it triggers a loadend event, hence why we've added an event listener to the reader object.

Now that everything's set up, converting your file to a byte array is as easy as:

JAVASCRIPT

const byteFile = await getAsByteArray(file)

How To Properly Use JSON Web Tokens

Mon, 10 May 2021 00:00:00 GMT

In a previous blog post, I explained what JSON Web Tokens are. However, when developers are first introduced to JWTs, they incorrectly assume that it can replace the battle-tested session ID in every aspect. The reality: it's only suitable for very specific use cases.

When to use

Let's get straight to the point. 😜 You should only use JWTs for:

One-time and/or short-lived (e.g. 15min) authorization, and
Server-to-server communication

Regarding the 1^st point, imagine that Server A issues a JWT that allows you to fetch some data from Server B for a limited time only. And as an example for the 2^nd point, using JWTs for API authorization is quite common. Even Google does it!

Security issues

Security is practically THE reason JWTs will never replace a session ID.

Storage methods

Local storage is often the go-to method for JWTs, even though it shouldn't be. It exposes your token to a multitude of attacks as it can be accessed by anyone using JavaScript. If there's one thing you don't want to bet against, it's the creativity of a hacker.

For this reason alone you should use an httponly cookie as it prevents anyone from accessing it, even you! But of course, this introduces a host of new issues as you are no longer able to access it on the client side... 💩

Revoking authorization

If for some reason or another an account gets compromised by a hacker, how are you going to revoke that users' session? The short answer: you can't. You'll simply need to wait until the token expires. The longer answer: you can by logging out everyone in your application as a result of changing your secret key. However, that's not exactly a desired solution for obvious reasons.

Logged in users

Speaking of logging out, how do you know who's logged in in the first place? I think you already know the answer 😉 (P.S. You can't know).

Stale data

Similar to revoking a token, it's impossible to change the payload of your token until the current one expires. Naturally, this will lead to an outdated payload which will then give rise to a host of other problems. For instance, image you downgraded a user's role from "admin" to "regular". Sadly, this change won't be reflected in the token.

Exposed user data

Another flaw of a JWT is the lack of encryption of its payload. Literally anyone who has access to the token will be able to read its contents by base64url decoding it. Granted, you may apply another layer of security by encrypting the payload itself.

Bandwidth consumption

Another minor, though not insignificant downside of a JWT is its size. It will certainly exceed that of a cookie session. And over the long-run, this can make a difference in bandwidth consumption as it is sent with every request. So yeah, size does matter. 😆

Drawing On An HTML Canvas Using A Mouse

Sat, 08 May 2021 00:00:00 GMT

Once you understand the basics of an HTML canvas, adding draw functionality isn't that difficult. But don't worry, I'll still show you how to do it step by step even if it seems out of reach to you. 🙌

Mouse actions

One part of the equation is knowing how to respond to user input. When drawing, there are only 3 possible actions:

Pressing a mouse button
Moving the mouse
Releasing the mouse button

Consequently, we will implement 3 listeners 👂 that will each listen to one of these actions.

JAVASCRIPT

canvas.addEventListener("mousedown", startDrawing)
canvas.addEventListener("mouseup", stopDrawing)
canvas.addEventListener("mousemove", draw)

I've already added the associated functions which I'm about to go through.

Track state

Let's first get the issue of state out of the way, specifically when the drawing should be done. Think about it... 🤔

The user might move his mouse and not intend to draw. For that, we need to know if any mouse movements by the user should be committed to the canvas. We can do that with the help of a simple boolean variable.

JAVASCRIPT

let isDrawing = false

Start drawing

The user clicks on a mouse button 🖱 which triggers startDrawing. We now know that the user intends to draw something, so we set isDrawing to true.

JAVASCRIPT

const startDrawing = (event) => {
  isDrawing = true
  context.beginPath()
  context.moveTo(event.clientX, event.clientY)
}

We then tell the context that we are starting to draw with beginPath and we add our first point with moveTo. The x and y coordinates of the point can be retrieved through the event object.

Moving the mouse

As I mentioned in the state section, we need to know whether the user intends to draw when he's moving the mouse. So for that, we simply quit 🚪 the function early if isDrawing is set to false.

JAVASCRIPT

const draw = (event) => {
  if (!isDrawing) return
  context.lineTo(event.clientX, event.clientY)
  context.stroke()
}

If drawing was the intention, we add a new point to the canvas context with lineTo. Then we make the distance between this point and the previous one visible with stroke.

Note that the previous point will either come from startDrawing at the very start or draw afterwards.

Stop drawing

Last but not least, 😌 when the user releases the mouse button, we simply set isDrawing back to false.

JAVASCRIPT

const stopDrawing = () => {
  isDrawing = false
}

You can inspect the functioning code in my Codepen.

How To Get URL Parameters Using JavaScript

Thu, 06 May 2021 00:00:00 GMT

First of all, it's important to distinguish between:

Query parameters: Key value pairs that follow a ? or & (e.g. ?key=value), and
Path parameters: Commonly known as slugs or permalinks (e.g. /param1/param2)

Query parameters

For query parameters, JavaScript offers a built-in interface called URLSearchParams that allows you to easily retrieve them. One initializes the interface by passing a string of the parameters to it.

As an example, let's assume we have the following link which filters through blog posts: https://dilshankelsen.com/blog/posts?year=2021&category=javascript.

JAVASCRIPT

const queryString = window.location.search
console.log(queryString) // '?year=2021&category=javascript'

const urlParams = new URLSearchParams(queryString)

As you see, we use the built-in property from the window object to extract all query parameters as a string, which we then use to instantiate a new URLSearchParams object. To then retrieve the values for each parameter is as easy as:

JAVASCRIPT

const category = urlParams.get('category')
console.log(category) // 'javascript'

Path parameters

While there isn't any fancy interface that allows the same degree of simplicity for path parameters, retrieving them is still relatively easy. Similarly to before, we first extract the path parameters as whole.

JAVASCRIPT

const pathString = window.location.pathname
console.log(pathString) // '/blog/posts'

Next, we split up the whole path using / as a reference. Remember to filter any empty strings that result from the split output.

JAVASCRIPT

const pathParams = pathString.split('/').filter(param => param.length > 0)
console.log(pathParams) // Array [ "blog", "posts" ]

Then, it's as simple as selecting the desired parameter from the array using an index.

Adding Data To An SQL Table

Mon, 03 May 2021 00:00:00 GMT

Assume you have the following table:

SQL

CREATE TABLE dog (
  name CHAR(20),
  age INT
);

To add data to it, use the INSERT INTO command.

SQL

INSERT INTO dog VALUES ('Sandy', 12);

If you wish to add more than on record at once, separate the values with a comma.

SQL

INSERT INTO dog VALUES ('Sandy', 12), ('Odie', 7);

An Introduction To HTML5 Canvas

Sat, 01 May 2021 00:00:00 GMT

The HTML5 Canvas is a fantastic tool that allows us to show graphics of any kind. Yet, one should be aware that it merely serves as the container that houses these graphics. 👩‍🎨 The actual creation is done using JavaScript.

Setting the size

You can set the dimensions of the canvas using the height and width attributes. By default, a canvas has a width and height of 300px and 150px, respectively.

HTML

<canvas id="canvas" width="500" height="400" />

However, in most cases, you'll prefer to set the size dynamically. Let's make it as big as the page it's in.

JAVASCRIPT

document.addEventListener('load', () => {
  const canvas = document.getElementById('canvas')

  canvas.height = window.innerHeight
  canvas.width = window.innerWidth
})

Retrieving the context

Let's keep things simple and create some shapes. 🔲 For that, we need to retrieve the 2D context.

JAVASCRIPT

const context = canvas.getContext("2d")

Imagine the context as an interface with properties and methods that allows us to perform the drawing. If we wanted to create a 3D graphic, we would instead have to pass in "webgl" as a value.

Drawing a square

To create rectangles and squares, the context offers the fillRect method. The first 2 parameters are the x and y coordinates (in that order) starting from the top-left corner. The 3^rd and 4^th are the width and height, respectively.

JAVASCRIPT

context.fillRect(0, 0, 100, 100) // Square fill

This function will fill in the body of the square. However, if you only want the outline, use strokeRect instead.

JAVASCRIPT

context.strokeRect(150, 0, 100, 100) // Square outline

Results of fillRect and strokeRect

For anything beyond a simple square, you will have to learn how paths work. 🙃

Paths explained

What's a path? I find MDN gives a pretty good explanation:

"A path is a list of points, connected by segments of lines that can be of different shapes, curved or not, of different width and of different color".

Creating a path

For this example, let's draw a triangle.

JAVASCRIPT

context.beginPath()
context.moveTo(100, 200) // x, y
context.lineTo(200, 200) // x, y
context.lineTo(200, 300) // x, y
context.stroke()

Execution order of points

Here's what happened: 👇

beginPath - tell the context that we want to create a path
moveTo - place our first point at the specified coordinates
lineTo - place the next point at the specified coordinates
stroke - draw the lines connecting the points

All that's left is to connect points 3 and 1, i.e. close the remaining path.

JAVASCRIPT

// [...]
context.closePath() // Add before stroke()
// [...]

Closing the triangle

Adding style

If everything were black, our lives would be quite dull, wouldn't it? 🥱 So let's give our triangle some style! We can set the thickness and color of our line using the properties lineWidth and strokeStyle.

JAVASCRIPT

context.lineWidth = 4
context.strokeStyle = '#2F7ED8' // Add before beginPath()
// [...]

It's important to remember that the styling has to be placed before the item(s) it should affect. In other words, if we were to place it after the final lineTo method, the above would not be applied.

To round it off, let's fill our triangle with another color.

JAVASCRIPT

// [...]
context.fillStyle = '#C0D8F3' // Add before fill()
context.fill() // Add before stroke()
// [...]

The function fill fills in the body of the shape with color. If the color's not specified, it defaults to black. Once again, order matters. ⚠️ If fillStyle were to come after fill, the styling would not be applied. Furthermore, these two lines of code are added before stroke so that the filling is not placed on top of the triangle outline, but underneath.

Styled triangle

If you wish to play around with the code in this article, go ahead!

How To Export And Import Modules In Node.js

Thu, 29 Apr 2021 00:00:00 GMT

Importing and exporting modules in Node.js works differently than in the front-end as this functionality was created before the introduction of ECMAScript Modules.

Unless you use a compiler like Babel or ECMAScript Modules finally become a stable feature in Node.js, we are stuck with it for now. 🤷‍♀️

Exporting a module

The important thing to understand with Node.js modules is that you export them using JavaScript objects.

JAVASCRIPT

module.exports = { 
  add: function(x, y) {
    return x + y
  },
  number: 7,
}

In the object, you may assign your keys anything from primitives (e.g. numbers) to other objects (e.g. functions). To actually export everything, you must then assign it to module.exports.

Variations

You can write the code snippet above in different ways. Here's one:

JAVASCRIPT

module.exports.add = function(x, y) {
  return x + y
}
  
module.exports.number = 7

Again, nothing unusual if you know how JavaScript objects work. You can rewrite this again in an even cleaner fashion.

JAVASCRIPT

function add(x, y) {
  return x + y
}
  
const number = 7
  
module.exports = { add, number }

Importing a module

Once you know that you're actually importing JavaScript objects, things become quite straightforward.

JAVASCRIPT

const helpers = require('./helpers')

In this example, we import a module (with the require function) from the helpers file, which is where defined the code from the previous section. This imported module is then assigned to a constant called helpers.

The most important thing to pay attention to is how to import local, core (Node.js) and external npm/Yarn modules.

Local modules: Use a path in the file name (e.g. './helpers')
Core modules and external modules: Enter the name without a path (e.g. 'example'). Node.js will know which one you're referring to. 😉

In all cases, you don't need to specify the extension.

After importing, you can then use the content of the module.

JAVASCRIPT

const sum = helpers.add(helpers.number, 1)
console.log(sum) // 8

Destructuring the import

You can apply some good ol' destructuring to limit what you import and access the function and variable immediately.

JAVASCRIPT

const { add, number } = require('./helpers')

const sum = add(number, 1)
console.log(sum) // 8

Now that looks much cleaner, doesn't it? 😄

How To Solve "EADDRINUSE - Address Already In Use"

Mon, 26 Apr 2021 00:00:00 GMT

If you ever run into this problem, you have 2 options:

Run your application on a different port, or
Terminate the existing process

Naturally, I'll be covering the latter. 😋

Find the process ID

First things first, we need to identify the process ID of the application that's occupying the port. You can do so with lsof -i :<port number>.

Terminate the process

Terminate the process with kill -9 <PID>.

Windows

If you're on Windows and aren't using WSL, the next best thing is to simply open up your task manager, find the process and end it.

Source from Stack Overflow

Renaming A Git Branch

Sat, 24 Apr 2021 00:00:00 GMT

You can rename a branch with

BASH

git branch -m <old branch name> <new branch name>

If you are already on the branch you wish to rename, you can skip the first argument.

BASH

git branch -m <new branch name>

In both cases, -m is shorthand for --move.

Renaming a remote branch

Unfortunately, 🙁 there is no direct way to rename a remote branch. As a work around, you can delete the remote branch and then push the new renamed local branch to your repository.

Assuming you've already renamed your local branch, you can do so in one fell swoop.

BASH

git push origin :<old branch name> <new branch name>

After that, you will need to reset the upstream branch,

BASH

git push origin –u <new branch name>

where -u is shorthand for --set-upstream.

How To Debug A Node.js App In Visual Studio Code

Thu, 22 Apr 2021 00:00:00 GMT

Debugging a Node.js app inside Visual Studio Code is quite straightforward.

Add a new script

In your package.json file, add a new npm script called "debug".

JSON

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "start": "node app.js",
  "debug": "node --inspect app.js"
},

debug is essentially a copy of start with --inspect added before the main application file. What this does is attach your debugger to the Node.js application.

Start the debugger

To launch your debugger, open the integrated terminal and create a new "JavaScript Debug Terminal".

Source from Visual Studio Code

Then run your debug command (e.g. npm run debug) and you're in!

Debug with configuration

You may skip the rest of this post if your debugging requires no configuration.

There are situations where you might want to configure your debugger (e.g. Nodemon). Create a new file called .vscode/launch.json at the root of your project. It should have the following content:

JSON

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "node",
      "request": "attach",
      "name": "Node.js",
      "processId": "${command:PickProcess}",
      "protocol": "inspector",
    },
  ]
}

Let's briefly go over the configurations properties one by one:

type: Debug in Node.js
request: Set up an 'Attach' configuration
name: Name of the configuration
processId: Use the selected process ID for debugging
protocol: Use the inspector debug protocol

Start the configured debugger

Instead of running your debug script in a special debug terminal, run it in a regular one this time. Next, head over to the debugger tab, select your configuration from the dropdown and click on the arrow button.

You will the be prompted to select the process you wish to debug. If you don't know the process ID of your Node.js program, check the terminal where you ran the debugger script.

Debugging Nodemon

If you're running your Node.js application with Nodemon, you should add the restart property to your configuration file:

JSON

"configurations": [
    {
      // ...
      "restart": "true",
    },
  ]

This tells the debugger to reattach whenever your Node.js process restarts.

How To Stop Custom Font Flickering On Page Load

Mon, 19 Apr 2021 00:00:00 GMT

When you use a custom font via @font-face, you tend to see unstyled text for a brief moment before your font files are fully loaded and applied. This issue has been coined the name "Flash Of Unstyled Text", or FOUT for short.

Fortunately, this can be fixed without much trouble.

CSS

@font-face {
  font-family: "My Font";
  src: url("/fonts/My-Font.otf");
  font-display: block; /* Fix flickering */
}

What this does is replace the unstyled text with an invisible placeholder until your custom font files have fully loaded.

What Are React Server Components

Sat, 17 Apr 2021 00:00:00 GMT

I recently came across the concept of React Server Components. Naturally, like any person, I wanted to know what they're all about. And in this article I will try to give you a quick explanation of it.

Should you care?

My guess is not yet. This feature is still in an experimental stage and it might take a while until it's added to the core of React. End of 2021, maybe in 2022? Only time will tell. 🙃

However, my first impressions are positive and I have a feeling that this will have a substantial impact on React in the future. Furthermore, you can bet your ass that frameworks like Gatsby and Next.js will adopt it as soon as it comes out.

Differences at first glance

The React team has provided a demo project that makes use of server components. Here are some differences you'll notice while inspecting it.

File extension

Server components use the file extension .server.js while client components (which is what we currently use) now have .client.js in their file name.

Files that have neither are shared between them.

No Hooks

Yes, you read that right! 🤪 Hooks or lifecycle methods don't work on the server, hence neither do they in server components. Consequently, this will keep your components rather simple.

Node.js API

But you know what? Because these components live on the server, they have access to the Node.js API and any server-side libraries, including ORMs. And that means your React component will be able to directly query a database, among other things.

Difference to SSG

Some of you might wonder how it's any different to server-side generation (SSG).

As a recap, SSG is where your HTML content is created on the server. Once sent to the client, your JavaScript bundle is then injected 💉 into it. However, server components are complementary and won't replace SSG.

Zero-Bundle-Size

The important thing to understand about server components is that they are fully rendered on the server. This means any associated JavaScript stays there and is no longer included in the bundle sent to the client. Hence, why they're referred to as Zero-Bundle-Size Components.

How they work

This is where they really shine! ✨ Given that server components are fully rendered before they reach the client, this allows you to individually request them from the server and then integrate them into the frontend.

As an example, this live demo shows a notes application. Whenever you click on a note on the left-hand side, the application will request the notes details component, which you then see on the right-hand side.

Screenshot of demo

The server sends the server component in a special format that allows it to be integrated into the front-end without disrupting any state.

TEXT

M1:{"id":"dBD0","chunks":[0,6],"name":""}
M2:{"id":"iQ/d","chunks":[0,4],"name":""}
S3:"react.suspense"
J0:["$","div",null,{"className":"container","children":[["$","div", [...]
J4:["$","ul",null,{"className":"notes-list","children":[null,null,null, [...]

I don't even know what kind of format this is. 😆

This article is really only meant to give you an idea and quick overview of React Server Components. If you wish you to have a deeper understanding, I recommend you check out Facebook's video presentation and RFC.

What Is Cross-Site Request Forgery (CSRF)

Thu, 15 Apr 2021 00:00:00 GMT

Imagine the following example: A user is logged into his online bank account which allows him to send money to another person by specifying an account number and amount in a form.

Suddenly, (s)he receives a dubious email from his/her bank and makes the foolish decision to click on a link inside the email. Before (s)he knows it, some money has been sent to another individual, all unwittingly! 😭

What happened? Cross-Site Request Forgery, that's what happened.

How it works

The idea behind this exploit is simple: the server cannot (easily) distinguish where a request is coming from. Even if it's from another tab, i.e. website, in your browser.

In the earlier scenario, the malicious hacker recreated the bank transfer form on another website. How? Well, maybe he's got access to the same bank and can therefore inspect the code in his browser.

All he needs to know is what kind of information the server is expecting (e.g. bank_account_number and amount) and which endpoint to send it to (e.g. /transfer?confirm=true).

Hypothetical bank transfer form

Hidden and ready to send

Okay, so the link that the user clicked on opened the hacker's malicious website which contains the duplicated form. Yet, all the user sees is a webpage full of cat pictures (why not? 😎).

What the user doesn't know is that there's a hidden form on the page, prefilled with values and ready to be sent (using JavaScript) as soon as the page is loaded.

Credentials abuse

Some of you might be asking, doesn't the request to the server need to be authorized? Well, yes. But remember that the user is already logged in. And in case you weren't already aware of it, the cookie containing the session ID is automatically sent to the server, even if the request is done from a completely different website.

That sucks... 😕

How to prevent it

As mentioned earlier, this exploit relies on the server not knowing where the request originated from. While in theory, it could figure that out with the Referer header in a request, in practice, it isn't always sent for various reasons such as security and privacy.

Using a token

The most common solution to this problem are CSRF tokens, which are used in all modern web frameworks. The idea is as follows:

Generate a random string of letters and numbers on the server-side (e.g. CIwNZNlR4Xbi1JF39I8yWnWX9wX4WFoz), then
Embed this token in the form when it's sent to the client, and
Only accept form submissions that contain this very token

More often than not, the token is single-use only, which makes it impossible to do any CSRF attacks.

How To Delete All Git Branches Except Master

Mon, 12 Apr 2021 00:00:00 GMT

If you wish to delete all Git branches except for one, run the command below. Replace "master" if your main branch is named differently.

BASH

git branch | grep -v "master" | xargs git branch -D

Of course, make sure not to be on a branch that will be deleted, or else you will run into an error.

How it works

Let's quickly cover some Unix basics to properly understand the logic of this command.

|, also known as the pipe symbol, serves to take the output of the previous command and feed it as an input to the next one. However, not every command like grep will understand the format of this input. That's where xargs comes into play.

Moving on to the list of subcommands, here's what they mean:

git branch: list all local branches
grep -v "master": filter out the word "master" from the list
xargs git branch -D: delete all branches in the list

Keeping more than 1 branch

Maybe you've got another branch called staging that you wish to preserve as well. To exclude it from the deletion process, simply add it as follows:

BASH

git branch | grep -v "master" | grep -v "staging" | xargs git branch -D

How To Ignore Library Code While Debugging In The Browser

Thu, 08 Apr 2021 00:00:00 GMT

All major browsers offer a way to ignore code from JavaScript libraries (e.g. jQuery and React) during debugging. Let me show you how! 😄

Chrome

While debugging in the Developer Tools, right-click on a stack in the "Call Stack" window and select Add script to ignore list.

Alternatively, you may open a file in the editor pane, right-click inside the file and select Add script to ignore list.

If you know upfront which files to ignore, head over to Developer Tools > Settings (Cog Icon) > Ignore List. Then add a file name or regex pattern you wish to exclude.

This should be the same for any other Chromium-based browser like Vivaldi or Edge. At most, the names may differ.

Firefox

With the exception of the last point, files can be ignored the same way as in Chrome. The only difference is the naming - Ignore source.

On top of that, you can right-click on a file in the File Tree View. Even cooler, you can click on that eye 👀 at the bottom of the file editor.

Sourced from Firefox.

Safari

In the File Tree View, you can ignore a script by either right-clicking on it and selecting Blackbox Script, or by clicking on the eye that becomes visible while hovering over it.

Similar to Chrome, you can specify a regex pattern that you wish to exclude under Settings (Cog Icon) > Blackbox.

How To Customize The Input File Button

Mon, 05 Apr 2021 00:00:00 GMT

Customizing the input file button used to be notoriously difficult. As such, developers had to come up with a creative workaround. Fortunately, things have changed for the better as CSS specifications evolved. Nonetheless, I'd like to cover both the workaround and the new way of customizing the button.

So let's start with the former! 😜

The old way

The idea behind the workaround is relatively simple. As you may or may not know, clicking on the label of an input of type file can trigger the file dialog as well. This allows us to simply place our custom button inside the label and then hide the original input button.

Layout does not matter

Regardless of whether you decide to wrap the label around the input or keep both elements separate, the solution works. And to hide the input element, simply add on the hidden attribute.

HTML

<input type="file" id="upload-file" hidden />
<label for="upload-file">Upload</label>

<!-- OR -->

<label>
  <input type="file" hidden />
  Upload
</label>

Styling the button

Depending on your circumstances, you may prefer to either:

Style the label so it looks like a button, or
Add an element (e.g. div) inside the label that acts and looks like a button

Adding a button element inside the input label will unfortunately not trigger the file dialog. Wacky, I know... 😅

You can play around with some code I've prepared on Codepen. It covers what I've just mentioned above.

The new way

Unknown to many, there's actually a CSS pseudo-element called ::file-selector-button, or ::-webkit-file-upload-button for WebKit/Blink compatible browsers, which allows you to effortlessly style the input button. It has finally garnered enough support by most browsers that it can actually be used.

CSS

input[type=file]::file-selector-button {
  /* Add properties here */
}

An Introduction To JSON Web Tokens

Thu, 01 Apr 2021 00:00:00 GMT

A JSON Web Token, or JWT for short, is an authorization web standard for client-to-server or even server-to-server communication. Authorization should not be confused with authentication, where:

Authorization: Checks whether a user has the permission to access a certain resource,
Authentication: Checks whether a user really is who they claim to be.

How it works

To understand how exactly it's used, let's imagine the following scenario on a website.

Image from Stack Overflow

Step 1

The user starts off logging in to the website by sending a POST request to the backend.

Step 2

Upon receiving the user credentials from the client, the server authenticates the user. If successful, it then generates a JWT using a secret key. The token includes some kind of user information such as a user id, so that the server can easily identify the client in future requests.

Step 3

The server sends a response to the client that includes the newly created JWT, with the token then stored in the browser.

Step 4

The client sends a new request, let's say, to access a page. The JWT is included in the request header in the Authorization field. Notice that the JWT is prepended by the keyword Bearer.

TEXT

Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI...2QT4fwpMeJf36POk6yJV_adQsw5c

Step 5

The server verifies the authenticity of the JWT with its secret key, making sure it has not been tampered with. If successful, any user information included in the token is used to identify the user's permissions.

Step 6

A response is sent back to the client, either containing the requested page or an error depending on the user's permissions.

The structure

Let's dive a level deeper. A JWT will typically have the following layout: xxxxx.yyyyy.zzzzz. The dots serve the purpose of separating 3 things:

The header (x),
Payload (y), and
Signature (z)

The header consists of a JSON Object which typically holds two types of data:

The signing algorithm (in this case HS256), and
The token type (in this case JWT... of course! 😆)

JSON

{
  "alg": "HS256",
  "typ": "JWT"
}

This JSON Object is then Base64url encoded and placed in the 1^st spot of the token layout.

Payload

The payload is yet another JSON object with more information. The important thing to notice here is that there are predefined property names: either as reserved names called registered claims, or through agreement, called public claims. A comprehensive list can be viewed on the IANA website, with the former names registered by IESG, and the latter by OpenID Foundation. Examples are iss (issuer), exp (expiration) and name (full name).

You may of course name custom properties if you wish to do so.

JSON

{
  "sub": "1234567890",
  "name": "John Doe",
  "iat": 1516239022
}

Once again, the JSON Object is Base64url encoded and placed in the 2^nd spot of the token layout.

Be aware that anyone who has access to your JWT can decode and read this information. If you decide to use sensitive data, make sure to encrypt it first.

Signature

The purpose of the signature is to be certain that none of the above-mentioned information has been changed. To obtain the signature, you simply add the encoded header and payload, and then encode (aka sign) it with your secret key using the specified algorithm.

JAVASCRIPT

HMACSHA256(
  base64UrlEncode(header) + "." +
  base64UrlEncode(payload),
  secret
)

JWT debugger

Jwt.io offers a great debugger with which you can play around and see how the encoded values and their validity change depending on different inputs. Give it a try! 🚀

How To Remove Specific Element From JavaScript Array

Mon, 29 Mar 2021 00:00:00 GMT

JavaScript does not currently offer any built-in array method(s) to remove a specific element. However, there are two main functions that allow us to achieve the same outcome: splice and filter.

Splice

Using the splice method, we first need to identify the index of an element we wish to remove, typically with indexOf. The splice function is then called on the array with the 1^st argument being the index we'd like to start at and the 2^nd argument being how many to remove.

JAVASCRIPT

const array = ['bananas', 'apples', 'pears']

const index = array.indexOf('apples')
array.splice(index, 1) // Array [ "apples" ]

console.log(array) // Array [ "bananas", "pears" ]

You may have noticed 2 things in the code snippet above. When called, the function returns an array with the removed element. But even more importantly, it modifies the original array itself.

Filter

Unlike splice, filter does not alter the original array, which should make it the preferred option in my opinion. 🤓 Similarly, the function is called on the array and iterates through each element of said array. However, while iterating, each element is compared to a statement we define and is included in the new array if the statement equals to true.

JAVASCRIPT

const array = ['bananas', 'apples', 'pears']

const filteredArray = array.filter(item => {
  return item !== 'apples'
})

console.log(filteredArray) // Array [ "bananas", "pears" ]

In each iteration, we simply make sure that the item of the array is not equals to apples.

How To Remove Gatsby Folder From Page Slug

Thu, 25 Mar 2021 00:00:00 GMT

By default, Gatsby's gatsby-source-filesystem plugin will create a page's slug based on its file path. However, what if you wish to use folders merely for organizing your files, therefore excluding them from the slug?

In my case, I wanted to organize my blog posts by year, yet have the year excluded from the slugs (for better SEO juice 😏). In other words, I wanted a slug like /2021/remove-folder-from-gatsby-slug/ to become /remove-folder-from-gatsby-slug/.

Regex removal

While I couldn't find a "plugin supported" solution, I came up with a workaround by removing the date from the slug right after it is generated and right before it is added to a page. So in my gatsby-node.js file in the onCreateNode function, I made the following change.

DIFF

const slug = createFilePath({ node, getNode, basePath: "" })
createNodeField({
   node,
   name: "slug",
-  value: slug,
   // Remove any subfolder in the slug
+  value: slug.replace(/^\/[0-9a-z]+\//, '/'),
})

What this regular expression does is basically look at the start of the slug for a /, followed by at least one or more letters and/or numbers, and then another /. If it finds a match, it replaces the find with a /, hence the 2nd argument in the replace() function. If it doesn't, nothing happens. 😄

This regex only works on folders that do not include any special characters. For example, a folder with a hyphen like bla-bla will not work.

Local User Authentication With Passport And Express 4

Tue, 23 Mar 2021 00:00:00 GMT

Setting up user authentication can be a tricky business. But fret not, I've got you covered! In this tutorial, I'll show you how to set up your own user authentication from scratch with Passport.js and Express 4, specifically implementing the local strategy with Mongoose and MongoDB.

How it works

Before we dive right into the code, let's take a minute to explain what we're exactly doing. I mean, the goal of this article is to make you smarter, not more confused.

First of all, what do we mean by "local strategy"? Well, Passport.js offers many login strategies, such as social media logins. However, the most common and simple strategy of them all, and the one we are considering in this tutorial, is using good ol' login with a username and passport.

The great thing about Passport.js is that most of the user authentication process is already taken care off. Nevertheless, we will still remain responsible for:

Storing and authenticating any user information with Mongoose in our database. Fortunately, there's a library that greatly simplifies this process.
The sessions and cookies, so users don't have to login every time they visit our page.

Setting up our Express app

To begin this tutorial, you'll first need Express 4 up and running. You can generate an Express app with the following command line in your project folder.

BASH

$ npx express-generator <express-app-name>

Subsequently, we need install all our dependencies with $ npm install and make sure that everything works fine with $ npm run start. You can find the app running by default on http://localhost:3000/.

Installing the MongoDB driver

If you don't have MongoDB installed yet on your computer, you can read on their site how to do so.

Then, install the Node.js driver with

BASH

$ npm install mongodb --save

and launch your db with

BASH

$ mongod

If mongod failed for you, double-check your installation guide as it may differ depending on your installation method and OS.
If you find yourself running into the error Failed to set up listener: SocketException: Address already in use, run $ killall mongod once before.

Installing the right dependencies

Alright, it's about time we get to the interesting bits! 🤩

The Mongoose ODM is the first library we'll need to install after setting up our basic project template.

BASH

$ npm install mongoose --save

For Passport.js, on the other hand, we will need to install several dependencies.

BASH

$ npm install passport passport-local passport-local-mongoose --save

And lastly, to handle sessions and cookies we require express-session.

BASH

$ npm install express-session --save

From the terminal, we next move on to our app.js file and include the following changes

JAVASCRIPT

var mongoose = require('mongoose');
var passport = require('passport');
var session = require('express-session');
var LocalStrategy = require('passport-local').Strategy;

Easy so far, ain't it? 👍

Oh! And before I forget it, we also need to connect our app to our database.

JAVASCRIPT

mongoose.connect('mongodb://localhost/<database-name>', { useNewUrlParser: true });

Including middleware

Our next step is to include any necessary middleware, which we certainly got a few of. Starting with express-session:

JAVASCRIPT

app.use(session({
  name: 'session-id',
  secret: '123-456-789',
  saveUninitialized: false,
  resave: false
}));

Immediately afterwards, we initialise our passport module and connect it to our session module.

JAVASCRIPT

app.use(passport.initialize());
app.use(passport.session());

Last but not least, we configure our Passport/Passport-Local modules using passport-local-mongoose.

JAVASCRIPT

passport.use(new LocalStrategy(User.authenticate()));
passport.serializeUser(User.serializeUser());
passport.deserializeUser(User.deserializeUser());

Creating our User model

If you've paid any particular attention to the Passport/Passport-Local configuration code, you'll notice that it relies on a certain User module. This module is essentially our Mongoose user schema with which we sign up and login all our users.

Let's continue and create a file called user.js in a folder called models. Our file will contain the following.

JAVASCRIPT

var mongoose = require('mongoose');
var passportLocalMongoose = require('passport-local-mongoose');

var UserSchema = new mongoose.Schema({
  username: {
    type: String,
    unique: true,
    required: true
  }
});

UserSchema.plugin(passportLocalMongoose);

var User = mongoose.model('User', UserSchema);
module.exports = User;

In our user model, we don't need to explicitly define a password or even a username as it is automatically taken care of by passport-local-mongoose. Pretty neat, right? However, in this example, I took the liberty of adding some requirements to the username. And in case you were worried about security, our library also takes care of this by hashing and salting our passwords. Double neat, right? 😲

After doing this, we have to require our model into our app.js file in order to ensure our Passport/Passport-Local configurations work properly.

JAVASCRIPT

var User = require('./models/user');

Configuring our routes

Still awake? Don't worry, we're almost done! 🤞

Moving on, let's open up the existing users.js file created by Express in the routes folder, and include the following changes.

JAVASCRIPT

const User = require('../models/user');
const passport = require('passport');

router.post('/signup', (req, res, next) => {
  User.register(new User({
      username: req.body.username
    }),
    req.body.password, (err, user) => {
      if (err) {
        res.statusCode = 500;
        res.setHeader('Content-Type', 'application/json');
        res.json({
          err: err
        });
      } else {
        passport.authenticate('local')(req, res, () => {
          User.findOne({
            username: req.body.username
          }, (err, person) => {
            res.statusCode = 200;
            res.setHeader('Content-Type', 'application/json');
            res.json({
              success: true,
              status: 'Registration Successful!',
            });
          });
        })
      }
    })
});

In this chunk of code, we're signing up a user whenever they access /users/signup with a POST request. As I've made it a requirement that each username is unique, our database will throw an error whenever we try to register a duplicate, thus never reaching passport.authenticate('local'), which then automatically logs in the newly created user.

JAVASCRIPT

router.post('/login', passport.authenticate('local'), (req, res) => {
  User.findOne({
    username: req.body.username
  }, (err, person) => {
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.json({
      success: true,
      status: 'You are successfully logged in!'
    });
  })
});

Similarly to before, whenever a user accesses /users/login with a POST request, Passport.js takes care of all the bothersome authentication details for us when we reach passport.authenticate('local'). Furthermore, Passport.js automatically creates a cookie and a session for the user logging in.

JAVASCRIPT

router.post('/logout', (req, res, next) => {
  if (req.session) {
    req.logout();
    req.session.destroy((err) => {
      if (err) {
        console.log(err);
      } else {
        res.clearCookie('session-id');
        res.json({
          message: 'You are successfully logged out!'
        });
      }
    });
  } else {
    var err = new Error('You are not logged in!');
    err.status = 403;
    next(err);
  }
});

Last but not least, a user can log out by accessing /users/logout with a POST request. We're using POST instead of GET as the browser might otherwise try to cache the response.

In this scenario, next to logging out the user with req.logout(), we have to manually destroy a user's session and clear any cookies. We also provide some error handling should someone try to logout who's not logged in.

Oof, we've finally made it! Why not give your code a try with Postman? 👏

How To Schedule Netlify Builds For Your Website

Mon, 22 Mar 2021 00:00:00 GMT

At the time of this writing, Netlify does not offer any feature that allows you to schedule builds and deployments. Fortunately, there are free tools that allow us to accomplish the same thing.

I previously wrote an article on how to create and schedule future blog posts in Gatsby, which complements this one.

Add a Netlify build hook

The first step to achieving out goal is to create a netlify build hook. You can do so under Site settings > Build & deploy > Continuous deployment > Build hooks. Simply give your hook a name and which git branch it should build, and Bob's your uncle! 👴

You should then see a link similar to this:

TEXT

https://api.netlify.com/build_hooks/xxxxxxxxxxxxxx

Make sure you have under Continuous deployment > Build settings "Activate builds" selected or else the build hook will not work.

Trigger the hook

There are a plethora of tools you can use to trigger your build hook, for example Zapier, IFTTT or EasyCron. What you choose is more a choice of preference as they all get the job done, with the free tier being completely sufficient for even daily builds.

In my case, I went for IFTTT.

Create a new applet and add a "If This".

No thanks, I shall stay with the free tier 😛

After that, you need to select a service which should go after the name "Date and Time".

Then you have the option to choose between the frequency of your posts. As I want to trigger a build every Monday and Thursday, I opt for Every day of the week at. Afterwards, you will have have to select a timezone for your cron job as well as define the exact time and day of its trigger. No rocket science so far, right? 🚀

You're greeted once again by the previous interface, only this time you choose "Then That".

However, this time you select the "Webhooks" service.

Click through some stuff and you'll finally land on this page.

In the URL field, paste your build hook URL that we discussed earlier and set "Method" to POST. For "Content Type", select application/x-www-form-urlencoded and lastly for "Body" enter {}. A few more clicks et voilà, you're done!

How To Create Future Blog Posts In Gatsby

Thu, 18 Mar 2021 00:00:00 GMT

As any blogger on a schedule will tell you, writing content in advance is important. Unfortunately, this isn't something that comes out-of-the-box with Gatsby and Markdown, so some tinkering is needed.

Filtering out future dates

The idea is relatively simple. With the help of GraphQL, whenever we build our site, we can choose to not include any posts that are newer than the current time and day.

In our markdown file, we define the publishing date of the blog post in the frontmatter, i.e. the part between the dashed lines 😋.

MARKDOWN

---
title: "How to create future blog posts in Gatsby"
date: 2021-03-18
---

However, GraphQL doesn't offer any time-based filter. So instead, we need to create a new dynamic field for each blog post that evaluates to true or false depending on the post date. And how do we do that? While Gatsby creates its nodes, of course!

So in your gatsby-node.js file, you may add the following:

JAVASCRIPT

exports.onCreateNode = ({ node, getNode, actions }) => {
  const { createNodeField } = actions
  if (node.internal.type === "Mdx") {
    // Create scheduled post
    const publishDate = node.frontmatter.date
    const isScheduledPost = !publishDate || (new Date(publishDate)).getTime() > Date.now()
    createNodeField({
      node,
      name: "isScheduledPost",
      value: isScheduledPost,
    })
  }
}

While Gatsby is busy creating its nodes, we want to make sure our isScheduledPost field is only created on nodes belonging to markdown files, hence the node type verification. If we happen to not find any publishing date associated with a markdown file, we will assume it's a draft and therefore schedule it forever (until you remember to add a date, naturally 😉).

The next step is to query blog posts during the page creation where isScheduledPost evaluates to false.

JAVASCRIPT

exports.createPages = ({ actions, graphql }) => {
  // ...

  const result = await graphql(`
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC },
      filter: {
        fields: { isScheduledPost: { eq: false } }
      }
    ) {
      edges {
        node {
          fields {
            slug
          }
          frontmatter {
            title
            date
          }
        }
      }
    }
  `)

  // ...
}

More likely than not, you probably have an overview page that lists all your blog posts. Evidently, you'll also want to filter out any scheduled posts there. So similarly, in your page query:

JAVASCRIPT

export const pageQuery = graphql`
  query BlogIndexQuery {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC },
      filter: { 
        fields: { isScheduledPost: { eq: false } }
      }
    ) {
      edges {
        node {
          id
          body
          excerpt(pruneLength: 180, truncate: true)
          timeToRead
          fields {
            slug
          }
          frontmatter {
            date(formatString: "DD/MM/YYYY")
            title
          }
        }
      }
    }
  }
`

You may have other instances where you need to filter out scheduled posts, such as an RSS feed. Make sure to apply the filter in those cases, too.

Access during development

But what if you're like me and want to see your beautiful blog posts in action before letting it off into the wild? 🥺 Well, I got you covered.

By default, Gatsby supports 2 environments:

Development, when you run gatsby develop, and
Production, when you run either gatsby build or gatsby serve

And it's as simple as switching out your GraphQL query depending on the environment. One that includes a filter (i.e.productionQuery) and one that doesn't (i.e. developmentQuery).

JAVASCRIPT

// ... (gatsby-node.js)

const developmentQuery = `...`
const productionQuery = `...`
let result

if (process.env.NODE_ENV === 'production') {
  result = await graphql(productionQuery)
} else {
  result = await graphql(developmentQuery)
}

//...

Refactoring the code

Unfortunately, string interpolations do not work in graphql tags, except for those in a gatsby-__.js file.

If you're like me, you might opt for a more elegant solution. In a separate file, I declared the following:

JAVASCRIPT

exports.allBlogPostsQuery = (queryBody) => {
  return process.env.NODE_ENV === 'production' ? getPublishedPosts(queryBody) : getAllPosts(queryBody)
}

const getAllPosts = (queryBody) => (`
  {
    allMdx(sort: { fields: [frontmatter___date], order: DESC }) {
      ${queryBody}
    }
  }
`)

const getPublishedPosts = (queryBody) => (`
  {
    allMdx(
      sort: { fields: [frontmatter___date], order: DESC },
      filter: {
        fields: { isScheduledPost: { eq: false } }
      }
    ) {
      ${queryBody}
    }
  }
`)

You may then go on and use it in your gatsby-__.js file.

JAVASCRIPT

const result = await graphql(
  allBlogPostsQuery(`
    edges {
      node {
        fields {
          slug
        }
        frontmatter {
          title
          date
        }
      }
    }
  `)
)

How To Iterate Through JavaScript Objects

Mon, 15 Mar 2021 00:00:00 GMT

Unlike arrays, JavaScript objects are not iterable. This means functions and statements like map(), forEach() or for..of will not work. If you attempt to do so, you'll be greeted with lovely errors such as TypeError: <Object>.forEach is not a function or TypeError: <Object> is not iterable.

However, there are a few ways to loop through an object, depending on whether you want its keys or values.

Let's take this object as an example:

JAVASCRIPT

const daysInMonth = {
  January: 31,
  February: 28,
  March: 31,
}

Iterating over keys

You can easily obtain the keys/properties of an object with Object.keys().

JAVASCRIPT

Object.keys(daysInMonth)
// Array(3) [ "January", "February", "March" ]

As the output is an iterable object (i.e. array), you may then apply one of the above-mentioned methods or statements. However, there is also a way to directly iterate over your object using for...in.

JAVASCRIPT

for (let month in daysInMonth) {
  console.log(month)
}
// January
// February
// March

Iterating over values

Similarly, to get the values of an object, you may use Object.values().

JAVASCRIPT

Object.values(daysInMonth)
// Array(3) [ 31, 28, 31 ]

Yet, to loop through the values, I prefer the following method:

JAVASCRIPT

for (let month in daysInMonth) {
  console.log(daysInMonth[month])
}
// 31
// 28
// 31

How To Add Lottie Animation Files In React

Sat, 23 Jan 2021 00:00:00 GMT

Lottie files are awesome. I consider them a big leap forward in the right direction for animations. If you weren't already aware of it, Lottie files are platform agnostic. This means they cannot only be run on the web, but on smartphone, eBooks, operating systems and more! But in this blog post, I'll focus on how to add Lottie animation files in React. It's not as difficult as it may seem. 😃

You can already have access and play around with the final code in my CodeSandbox example.

Step 1: Install Lottie

You know the drill, buddy! You can install the module using Yarn or npm. Choose your poison. 💉

BASH

$ npm i lottie-react #OR
$ yarn add react-lottie

Next, you simply import the library at the top of a React file of your choosing.

JAVASCRIPT

import Lottie from 'react-lottie'

Step 2: Choose a Lottie file

Don't have a Lottie file of your own you can try this out on? No problem! There's a vibrant 🍹 community of designers offering plenty of free and beautiful animations. Check them out at LottieFiles. You can even edit the Lottie file before you download it. Ain't that cool?

Now, equipped with your Lottie file, you want to import it into the same React file as the Lottie library.

JAVASCRIPT

import DancingBurger from "./dancing-burger.json"

Step 3: Add the Lottie animation

Let's take a look at the bare minimum to run the Lottie animation.

To do so, ☝️ we need to use the <Lottie /> component we imported earlier and pass in our configurations as a props.

JSX

<Lottie options={lottieOptions} />

To make the whole thing run, we only need to specify the Lottie file under the property animationData.

JAVASCRIPT

const lottieOptions = {
  animationData: DancingBurger
}

That's all folks! 🤷‍♀️

Step 4: Configure the Lottie animation

We could have left it at that, but we're ambitious developers, aren't we? 🤓 Let's go over them.

JAVASCRIPT

const lottieOptions = {
  animationData: DancingBurger,
  loop: true, // default: true
  autoplay: true, // default: true
  rendererSettings: {
    preserveAspectRatio: "xMidYMid meet"
  } 
}

Next to our initial animationData setting, we have the autoplay property. It contains a boolean that determines whether the animation runs as soon as it's ready.

loop can either be a boolean or number. In the former case, the animation goes on forever. However, the latter determines how many times it should run.

Last but not least, rendererSettings is a setting for the animation rendering... duh! 😂 There are quite a few options and you can check them out in the documentation. However, most individuals can safely ignore this option if they're not interested.

Step 5: Control the Lottie animation

Many of you will want to control the animation through external triggers such as a button click. Me too! Here's how we do it.

JSX

<Lottie
  options={lottieOptions}
  isStopped={true}
  isPaused={false}
/>

There are two props with which we can control the flow 🌊 of the animation, isStopped and isPaused. Both are of type boolean. As their names imply, the former stops and resets the animation, while the latter merely pauses it.

We can try to control these two props by toggling their state with buttons. Let's take a look at the following code snippet.

JSX

const [isStopped, setIsStopped] = React.useState(false);
const [isPaused, setIsPaused] = React.useState(false);

return (
  <div className="App">
    <button onClick={() => setIsPaused((prevState) => !prevState)}>
      {isPaused ? "Play" : "Pause"}
    </button>
    <button onClick={() => setIsStopped((prevState) => !prevState)}>
      {isStopped ? "Start" : "Stop"}
    </button>
    <Lottie
      options={lottieOptions}
      isStopped={isStopped}
      isPaused={isPaused} />
  </div>
)

We keep track of each respective states using the useState hook. Depending on the state, we also render different button texts. When clicking on a button, we simply toggle the state by inverting it.

In case you weren't aware of it, in a useState updater function, we can easily retrieve the previous state by passing in a callback function.

How To Create A Tiny Slider Carousel

Sat, 16 Jan 2021 00:00:00 GMT

Carousels are an amazing tool you can use to pep up your site and there's no shortage of JavaScript libraries that enable you to do so. Tiny Slider is one of them. It's a solid 💪 choice for most people since it is built on Vanilla JavaScript. This means a smaller file size as well as fewer risks of becoming deprecated due to its dependencies. And in this tutorial, I will show you how to create a Tiny Slider 2 carousel on your website.

Strap your seat belts boys and girls, cause you're in for a wild ride! (Get it? Cause it's about a carousel?... Okay, I'll stop... 😅)

I am not your father!

Installation

There are a few ways you can install this library on your site. However, for the purpose of this tutorial, the easiest and most straightforward way is to include it through CDN links in your document's head (Not your actual head, silly 😜).

HTML

// For CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.3/tiny-slider.css">

// For JavaScript
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js"></script>

Understanding the HTML

So, where shall we start, mate? How about the HTML, alright? 😋

Virtually all JavaScript carousels will require the same structure you see below.

HTML

<div class="my-slider">
  <div>Slide 1</div>
  <div>Slide 2</div>
  <div>Slide 3</div>
</div>

First, you need a wrapper which contains a class or an id with which you can identify your carousel to begin with. Then, inside the wrapper, each child 🧒 element is basically a slide of your carousel. However, for your slide content, I recommend you add another div (or any other tag) layer as such.

HTML

<div class="my-slider">
  <div>
    <div>Slide 1</div>
  </div>
  <div>
    <div>Slide 2</div>
  </div>
  <div>
    <div>Slide 3</div>
  </div>
</div>

This will allow you to style the slides to your heart's content without being interfered by the styling of the library.

Understanding the JavaScript

Most of the magic 🧙‍♀️ takes places in JavaScript. Quite obvious, right? Let's see what happens in the code snippet below.

JAVASCRIPT

let slider = tns({
  container: '.my-slider',
  items: 1,
  slideBy: 'page',
  autoplay: true
});

Above, we have a slider variable that receives the output from a function called tns. This function accepts an object with many possible key-value pairs. What happens with the variable isn't too important. Let Tiny Slider take care of that. 😆 What's more interesting to us is the object passed into the tns function. It's basically like the settings of our carousel.

How to configure Tiny Slider

Let's talk about how exactly these carousel "settings" work. For that we use the example from before. Probably the most important 🧐 setting is container. Here you need to give the id or class of your carousel wrapper. By default, Tiny Slider will look for the class slider.

Hasn't it happened to us all? 😭

Next up is the key items. This dictates how many slides are visible at once. Naturally, you should have at least as many slides in your HTML as you indicate in this option.

Closely related is slideBy, which refers to how many slides the carousel should 🏃‍♀️ move by. You can also pass in the value page, which simply refers to how many slides are visible on each "page" of the carousel. This value is identical to items.

Lastly, autoplay simply indicates whether the slides should move automatically without interaction by the user.

However, it would be pointless to go through all possible settings and values in this article since you can already read up on them in the documentation. Yet again, it won't hurt for me to go over some of the more important ones. 😉

What does node mean?

If you've already skimmed the documentation, you may have encountered the word Node under the Type column.

Node, shnode... 👀

Instead of typing the CSS selector, i.e. id or class, you can instead give the actual DOM Node itself to the container option. I hope you paid attention in JavaScript school 😝 for how this works. For example, we can get the node of our carousel wrapper with document.getElementsByClassName('.my-slider'). While I find the selector method way simpler, I haven't found a use case for the former yet.

Playing around

Before we move on, I'd like to congratulate you for making it this far. This would be a good time to start playing around with the carousel, trying out different settings. As a bonus, 🥳 you can check out and mess around with a live demo of Tiny Slider in my CodePen example.

Adding responsiveness

Ah yes, responsiveness. The bane of every front-end developer. Fortunately, Tiny Slider makes this a breeze to implement. Let's add to our initial carousel code some responsiveness.

JAVASCRIPT

let slider = tns({
  container: '.my-slider',
  items: 1,
  slideBy: 'page',
  autoplay: true,
  responsive: {
    640: {
      items: 2
    },
    1000: {
      items: 3
    },
    1400: {
      items: 4
    }
  }
});

To add responsiveness to your carousel, you simply add the option responsive with an object as its value. In this object literal, you specify the breakpoints ✂️ in pixels, which in turn accept an object with settings that we saw before.

However, not all options will work inside the responsive setting. To see what is possible, check out the list of responsive options.

Keep in mind the responsiveness in Tiny Slider works from a mobile first perspective (As it should 😏). For example, this means a breakpoint of 640 should be translated as 640px and above.

Adding custom buttons

Another important feature for many developers are buttons. Custom buttons are the way to go, you know what I mean? 😎 So how do we go about this?

In this article, I'll go over the next, previous and autoplay buttons.

HTML

<div id="controls">
  <button class="previous">Prev</button>
  <button class="next">Next</button>
  <button class="auto"></button>
</div>

As you can see above, we first need to create a container that holds all our buttons. You should know that the Prev and Next buttons need to be wrapped by a container. However, the autoplay button can be placed wherever you like. In addition to that, each element must have its own CSS selector.

Next, we pass the selectors to each respective property.

JAVASCRIPT

let slider = tns({
  ...
  controlsContainer: '#controls',
  prevButton: '.previous',
  nextButton: '.next',
  autoplayButton: '.auto'
});

Now, the autoplay button functions in a sightly different manner. And you may already have noticed 👀 earlier that I didn't add any text for this button. This is because Tiny Slider dynamically adds it based on the state of the autoplay, i.e. stop 🛑 or start.

JAVASCRIPT

let slider = tns({
  ...
  autoplay: true,
  autoplayText: ['Start', 'Stop']
});

You can of course change this text with the property autoplayText by passing an array with two strings. Be aware that the order matters 🚨. Last but not least, make sure you actually activate autoplay with true.

Don't forget, you can check out and mess around with a live demo of Tiny Slider in my CodePen example! 🤩

How To Use V-Model With Vuex

Sat, 09 Jan 2021 00:00:00 GMT

In my previous blog post "Learn Vuex Through A Tutorial", I demonstrated how to implement state management using Vuex. As you surely know, a central theme of Vuex is its unidirectional data flow. This means two-way binding is a no-go! Unfortunately, this means the Vue directive v-model will not work with it out of the box. 😣 "Oh no! What am I gonna do!?". Don't worry, I've got you covered. In this blog post, I'll show you how to use v-model with Vuex.

In case you were wondering, no matter if you're using Vue 3 or Vue 2, you'll encounter the same issue.

Make your choice

There are two ways of tackling this problem: creating a two-way computed property or "modifying", for lack of a better term, the v-model logic to accommodate Vuex. Both of these solutions work in strict 👮‍♂️ mode.

Let me first explain the latter in more detail.

Solution 1: Modifying v-model logic

As you may or may not know, the v-model directive is essentially syntactic sugar. 🍭 It can be rewritten in a more verbose manner using two other directives, as seen below. In this example, the two-way binding happens by calling updateMessage on any input change and updating message with the input value.

HTML

<template>
  <input v-model="message" />
  <!-- Is the equivalent of -->
  <input :value="message" @input="updateMessage">
</template>

<script>
export default {
  data() {
    return {
      message: 'Chunk Bytes is awesome'
    } 
  },
  methods: {
    /* Behind the scenes */
    updateMessage(event) {
      this.message = event.target.value
    }
  }
}
</script>

Now that we know how v-model actually works under the hood, 🚗 we can make some simple changes to the code in order to make it work with Vuex. Let me show you!

HTML

<template>
  <input :value="message" @input="updateMessage">
</template>

<script>
export default {
  computed: {
    /* Use a computed property instead */
    message() {
      return this.$store.state.message
    }
  },
  methods: {
    /* Call a mutation instead */
    updateMessage(event) {
      this.$store.commit('updateMessage', event.target.value)
    }
  }
}
</script>

The first change we need to make is using a computed property (or getter) to retrieve the state data. Alright, step one done. ✅ Next, we need to alter this state by calling a mutation through a method function. You may of course dispatch an action and then commit the mutation, if you prefer to do so.

In case you were wondering, here's what the mutation handler would look like in our store.

JAVASCRIPT

const mutations = {
  updateMessage(state, payload) {
    state.message = payload
  }
}

And really, that's all there is to it! 😊

Solution 2: Two-way computed property

"What's the other solution you talked about?". Glad you didn't forget dear reader! As I previously mentioned, we can tackle this issue by constructing a two-way computed property using a getter and a setter (⚠️ getter in this context is not referring to the actual getter function in Vuex).

HTML

<template>
  <input v-model="message">
</template>

<script>
export default {
  computed: {
    message: {
      /* By default get() is used */
      get() {
        return this.$store.state.message
      },
      /* We add a setter */
      set(value) {
        this.$store.commit('updateMessage', value)
      }
    }
  }
}
</script>

In this solution, we don’t actually mess around with the v-model directive, but with the property it’s bound to. By default, a computed property is a getter only. 😲 However, we have the option to also add a setter.

Inside of the computed property, we have a custom getter function called get() directly retrieving the state from our store. On the other hand, in order to alter the state, we use a setter called set(). This calls a mutation handler and passes in the input value that we automatically receive.

Review

Pay attention to the structure of both solutions. You'll see that they are both very similar. In the first one, you essentially have two functions, one as a computed property, the other as a method. In the second case, you have the same functions, just named differently and part of a computed property. Hmmm... 🧐

Using a library

It might not come as a surprise to you that many others have come across this problem and evidently tried to come up with a solution of their own. The most popular library at the moment is vuex-map-fields, with over a thousand stars at the time of this writing.

Its documentation is quite well written in my opinion, so I don't think a tutorial will be necessary (unless you ask me of course... 😋). Nonetheless, knowing someone's already made an easy to use solution should not discourage you from knowing the other alternative solutions I presented to you above.

In fact, you'll sometimes run into a problem with the library and might have to resort to the old-fashioned solution, as I had to do once.

Vuetify Tutorial: How To Create Cards

Sat, 02 Jan 2021 00:00:00 GMT

Cards are a wonderful way to group together related content, no matter if on the web, your mobile phone or computer. Actually, once you start watching out for them, you will realize that they're everywhere! 🤯 As such, knowing how to create them will serve as an indispensable tool in your arsenal. That is why in this Vuetify tutorial, I'll show you how to create cards.

The layout

A card in Vuetify is made up of five different components: v-card, v-card-actions, v-card-subtitle, v-card-text and v-card-title. Let's take a look at each one on its own.

The container

As the name implies, v-card serves as the body of your card, which gives it that distinctive card look. Technically, you could do without the other components and call it a day. 😂

Not so fast... buddy!

As with all Vuetify components, it's very customizable. The main way to customize components is through props. For the newbies among you, it's basically a custom CSS attribute with it's own value. One example can be seen below:

HTML

<v-card 
  id="card-1" 
  elevation=4
  outlined
  shaped>
  <p>This is an empty <code>v-card</code> 
    with some props styling
  </p>
</v-card>

Here, we are passing 3 different props: elevation, outlined and shaped. The first receives a number value of 4. The latter two, while we don't explicitly pass values to them, are the equivalent of outlined=true and shaped=true. Be sure to keep that in mind whenever you see that. 🤓

By the way, any examples I show you throughout the tutorial can be played around with in CodePen. Have fun!

How to read Vuetify documentation

Now that you know what props are and how they're inserted into the code, reading the documentation will not be such a challenge. Let's take a look at the documentation in the context of our previous examples.

Squinting your eyes won't make this bigger 😅

The first column is the name of the props, nothing difficult here. The second column defines the value type that is to be passed into the props. outlined and shaped both receive boolean values, so either true or false. On the other hand, elevation can receive either a number or a string, i.e. a string that contains a number. So doing elevation=4 or elevation="4" has the same effect.

The third column shows the default value of each props. This simply means, if you haven't inserted that specific props yourself onto the component, it will use the default value. As an example, <v-card> without any props would use the default values of all its possible props. Basically the equivalent of the code below:

HTML

<v-card
  active-class=undefined
  append=false
  color=undefined>
// ... etc
</v-card>

Last but not least, there's the last column. This one has a... description of the props. 😆 Not much else to say here, am I right?

The text

When it comes to writing text in your cards, v-card-subtitle, v-card-text and v-card-title are your go-tos. However, there's not too much to tell y'all here besides the basic theme styling 🎨 being applied to each component. There aren't even any props to use! It should go without saying that these components can only be placed in a card component.

Here's an example of these components in a card. Don't forget, you can play around with the code in this CodePen example.

HTML

<v-card>
  <v-card-title>Chunk Bytes</v-card-title>
  <v-card-subtitle>Learn Web Development In Chunks</v-card-subtitle>
  <v-card-text>Joke of the Day: debugging is removing the needles from the haystack.</v-card-text>
</v-card>

The action section

The final component on our list is v-card-action. This is where the action happens 💥 and users interact with your card through buttons, such as v-btn or v-menu. However, you may of course place non-interactive components like v-icon if you feel like a real rebel. 😎

As with the text components, this one can't be customized either. Instead, it serves to apply some basic styling, such as resizing and alignment.

Once again, let's take a look at an example!

HTML

<v-card outlined>
  <v-card-title>Chunk Bytes</v-card-title>
  <v-card-subtitle>Learn Web Development In Chunks</v-card-subtitle>
  <v-card-text>Joke of the Week: How many programmers does it take to change a light bulb? None, that's a hardware problem.</v-card-text>
  <v-card-actions>
    <v-btn color="red lighten-2" ripple text>
      Don't Click Me
    </v-btn>
  </v-card-actions>
</v-card>

Adding some basic spacing

While we're at the topic of v-card-actions, let me quickly show you a simple way to space your components. Everybody... meet v-spacer! 💃 It's a Vuetify grid component that takes up as much space as possible in a row without pushing other components out of view or in a new line. In case you didn't know, v-card-actions and v-card-title are based on Flexbox, which is why we can use it!

In this example, we place v-spacer in the middle and push components on either side away.

HTML

<v-card hover>
  <v-card-title>Chunk Bytes</v-card-title>
  <v-card-subtitle>Learn Web Development In Chunks</v-card-subtitle>
  <v-card-text>Joke of the Year: I never tell the same joke twice. I have a DRY sense of humor.</v-card-text>
  <v-card-actions>
    <v-icon>mdi-email</v-icon>
    <v-spacer />
    <v-btn color="blue lighten-3">I'm fake</v-btn>
  </v-card-actions>
</v-card>

Overriding styles

On a final note, while you may not have any options to style the v-card-... components through props, you may still override their default styles using classes.

For example, 💁 we could override the default styling of v-card-title by inserting a class .text-h2. This doesn't actually turn it into an h2 tag, but simple gives it that styling.

Learn Vuex Through A Tutorial

Sat, 26 Dec 2020 00:00:00 GMT

In my previous blog post "Introduction To Vuex And State Management", I explained how state management with Vuex works. If you haven't read it, I highly recommend you do since this will build on top of it. It's a quick read and will make this tutorial easier to digest, in which we'll learn Vuex through a walk-through tutorial. 👨‍💻

Vuex 3 or Vuex 4

Are you using version 3 or 4? You're in luck! No matter the version, they are pretty much identical. This means any code we go through in this article works for both of them.

The devil is in the detail! 😈

Any differences will be clearly be highlighted, so don't worry about that. 😋

Setting up Vuex

Talking about differences, here's already one! 😂 It concerns the setup of the library. However, there is good news. This is where the differences end... at least for anything discussed in this blog post. For a full list, I recommend you consult this Vuex web page.

Ahem... so back to the topic. How exactly do they differ in their setup?

Vuex 3

In version 3, we install Vuex plugin with the use() function in line 5. Then, we create a store instance by calling the constructor Vuex.Store(). Next, this store gets passed into Vue, which allows us to then access it within our Vue application.

JAVASCRIPT

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state() {},
  mutations: {},
  actions: {},
  getters: {}
})

new Vue({
  render: h => h(App),
  store, // <-- Pass it in here
}).$mount('#app')

Vuex 4

In version 4, the first difference is that we use a function called createStore() to instantiate the Vuex store. However, we still pass the same store configuration as an argument as we did in version 3. Likewise, we install the store with use().

JAVASCRIPT

import { createApp } from 'vue'
import { createStore } from 'vuex'
import App from './App.vue'

const store = createStore({
  state() {},
  mutations: {},
  actions: {},
  getters: {}
})

const app = createApp(App)
app.use(store) // <-- Use it here
app.mount('#app')

Keeping things consistent

In order to keep things consistent throughout the tutorial and avoid confusion as to whether I'm using version 3 or 4 syntax, I'll be using the following layout below. That is, I will be declaring any state, mutations, etc. outside of the store object. In general, you should do this as it lends to more readable and cleaner code. 🤓

In case you didn't know it yet, the store is basically a JavaScript object that contains all your getters, mutations, actions and state.

JAVASCRIPT

const mutations = {}
const actions = {}
const getters = {}
const state = () => {
  return {}
}

// Vuex v3 store
const store = new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

// Vuex v4 store
const store = createStore({
  state,
  mutations,
  actions,
  getters
})

Declaring and fetching the state

This entire tutorial will revolve around one simple task: incrementing and decrementing a number. Pretty simple, right? Of course we won't use local storage, otherwise this tutorial would be over on a whim. 😅

We'll first start of with declaring our counter variable in the state as follows:

JAVASCRIPT

const state = () => {
  return {
    counter: 0
  }
}

The next thing on our to-do list is to fetch the value using a computed property and display it in our App.vue component.

HTML

<!-- App.vue -->

<template>
  <div>
    <button>Increment</button>
    <button>Decrement</button>
    <p>{{ counter }}</p> 
  </div>
</template>

<script>
export default {
  computed: {
    counter() {
      return this.$store.state.counter;
    }
  }
}
</script>

On line 15, you may have noticed that we're using $store. It is essentially a Vue property that is available anywhere throughout the app, which we can use to access any properties and methods in our store. Notice we also added an interpolation to display counter on line 7.

An alternative to directly reading counter from our central state would be using a getter function. So how would we do that and why? 🧐

Using Getters

To retrieve our value using a getter function, we'd first have to create one in our store.

JAVASCRIPT

const getters = {
  getCounter(state) {
    return state.counter
  }
}

As you can see on line 2, getters automatically have access to the state from which we can return our counter value. Back in our App.vue file, we call the getter function getCounter in the computed 🖥 property named counter, replacing the line of code we wrote earlier.

HTML

<script>
export default {
  computed: {
    counter() {
      return this.$store.getters.getCounter
    }
  }
}
</script>

So again, what's the advantage of using a getter? Well, DRY code my friend! 😊 A getter is for all intents and purposes a centralized computed property that can be shared among all your Vue components. If you ever need to make changes to a getter, you only need to do it once! However, there's nothing really stopping you from just using computed properties in your App that all duplicate the same logic. 😕

Manipulating the state

Our next objective is to make the buttons work, so whenever we click on one, our number is either incremented or decremented. As you'll (hopefully) know from reading my previous Vuex article, any changes we make to our state should be done through a mutation, which itself is called by an action.

JAVASCRIPT

const mutations = {
  increment(state) {
    state.counter++
  },
  decrement(state) {
    state.counter--
  }
}

const actions = {
  increment(context) {
    context.commit('increment')
  },
  decrement(context) {
    context.commit('decrement')
  }
}

Starting with mutations, we have two functions for incrementing and decrementing counter. Mutations automatically have access to the state which allow us to directly change the state.

Next, we have to create two action functions increment ➕ and decrement ➖, which call, aka commit, the mutation functions of the same name. Contrary to mutations, actions automatically have access to a context object, which let's us use this commit method.

The only thing left to do now is to call, aka dispatch, the action functions from our App.vue file. Similarly, $store gives us access to the dispatch functions to do so.

HTML

<script>
export default {
  methods: {
    increment() {
      this.$store.dispatch('increment')
    },
    decrement() {
      this.$store.dispatch('decrement')
    }
  },
  computed: {...}
}
</script>

Don't forget to add @click="increment()" and @click="decrement()" to each respective button, otherwise nothing will happen. Et voilà, we've made it! 🤓

But the action doesn't end here yet, buddy...

Simplifying the code

Let's imagine you not only have to call two actions, but perhaps a few dozen, thousands or millions 🤯 (okay, maybe I'm exaggerating, but you get the point)! It's not hard to imagine that you will quickly lose oversight of what you're doing. But worry not, for there is a solution called mapActions. Similarly, equivalent maps exist for the other three.

HTML

<template>
  <div>
    <!-- Make sure to change the function names -->
    <button @click="incrementAction()">Increment</button>
    <button @click="decrementAction()">Decrement</button>
    <p>{{ counter }}</p>
  </div>
</template>

<script>
import { mapActions, mapState } from 'vuex'

export default {
  computed: {
    ...mapState([
      'counter'
    ])
  },
  methods: {
    ...mapActions({
      incrementAction: 'increment',
      decrementAction: 'decrement'
    })
  }
}
</script>

First of all, we have to import the relevant helpers into our Vue component, which are mapActions and mapState. Upon calling these helpers, we get access to Objects containing our state and actions. Notice ‼️ that they both make use of an ES6 syntax called the object spread operator (the ... if you weren't sure what I'm referring to).

You also have two options regarding how to reference your methods and properties. You can do so directly, as seen in mapState (pay attention to the square brackets), or indirectly through a custom name, as seen in mapActions (pay attention to the curly braces).

Adding function inputs

What if we want to pass in some arguments that our mutations or actions can mess around with? 🤾‍♂️ How would we do that in Vuex? It's quite simple, really. Going back to our store file, we do the following changes:

JAVASCRIPT

const mutations = {
  increment(state, payload) {
    state.counter += payload;
  },
  decrement(state, payload) {
    state.counter -= payload;
  }
},

const actions = {
  increment(context, payload) {
    context.commit('increment', payload);
  },
  decrement(context, payload) {
    context.commit('decrement', payload);
  }
}

We simply added another parameter called payload in each function. Naturally, we changed the code a bit in the mutations to make use of our new input. Next, we dispatch the actions giving an input with @click="incrementAction(2)" and @click="decrementAction(2)". In this scenario, whenever we click on a button, our counter will be either incremented or decremented by two.

In case you were wondering 🤔 how to pass in multiple inputs into our actions and mutations, you would simply pass in an object in the following manner: @click="incrementAction({ value: 2 })". Now, to get the value in your mutations, you would simply reference it with payload.value.

If you've made it this far, congratulations! 🎉 You're well on your way to mastering Vuex. However, it shouldn't come as a surprise that Vuex provides many other features I wasn't able to cover in this article, so why not go and check it out?

Introduction To Vuex And State Management

Sat, 19 Dec 2020 00:00:00 GMT

State Management can be a hard topic to grasp at first. However, once you start building larger applications with more components, you'll realize that it is an indispensable tool in many of your projects. Fortunately, I have found Vuex's implementation of Flux to be a bit easier to learn than other alternatives, such as Redux for React. So stay strapped and let me give you an introduction to Vuex and the world of state management. 😎

The importance of state management

When you first start out building your own Single Page Applications (SPA), you learn about the concepts of props and events to send data between various components. Initially, everything is fine and dandy. However, things can get really messy (and buggy) after you have dozens of components scattered throughout the applications sharing and modifying data.

You get a headache just thinking about it. 😓 Even worse, a global event bus in Vue doesn't really offer a proper long-term solution to your problem.

Just imagine this issue happening on a large scale. Something as big as Facebook... because it DID in fact happen! Luckily, Facebook already suffered for our sins and came up with a solution of their own: the Flux architecture.

Vuex is merely one of many other implementations of this solution.

The principles

Before we dive into the logic of Vuex, let's first try to understand the principles behind the Flux pattern. What exactly makes it so great?

First, there's a single source of truth. ☝️ That applies to shared data of course, which is stored in a centralized location. Whatever the state says, goes. Of course, this means that no components may save any copies locally.

Second, changes to this single source of truth are unidirectional! No two-way binding, you filthy peasant! If you wish to alter the state, you must go through a standard process that can be easily traced back, if needed.

This is the opposite to the traditional MVC design pattern where two-way binding isn't uncommon. But again, this gives rise to scaling issues that Facebook encountered.

What you should take away 😝

How Vuex works

Alright, with the introduction to state management behind us, it's time we start pounding Vuex into your brain. 🤪

The idea of Vuex is really simple and really similar: store your data in a centralized location that all your components can easily access and mutate. However, components can't just access and mutate the global state willy nilly. Rather, they need to follow a strict set of steps in order to do so. This will make any state changes predictable and traceable.

Vuex works with the following concepts: State, Getters, Mutations, Actions and Modules. Although, Modules will be left out in this article for some other time as they aren't necessary to the Vuex workflow.

State

The State essentially acts as that "single source of truth" I mentioned earlier in which your application data is stored. It's the equivalent of the data property in a Vue instance, but on a global level instead.

Getters

Getters, as the name implies, allow you to get any stored data from the State and are identical to computed properties. This means they are reactive to any dependency changes and can manipulate the output, but not the data itself.

Mutations

On the other hand, Mutations are functions that are able to update the Vuex state and are equivalent to method properties in a Vue instance (Hmmm, are you starting to see a pattern here? 🤔). However, we have a teeny tiny problem: Mutations only work synchronously.

Actions

So it seems that the previously discussed concepts strongly resemble Vue instance properties that we already know and love, but Actions is not one of them. Rather, it addresses the previously mentioned problem by allowing asynchronous operations, or any computations for that matter. Subsequently, Actions call and pass down any data changes to Mutations, as only the latter can mutate the state.

It is generally regarded as a best practice to have an action call a mutation even if it isn't necessary (e.g. you aren't performing any asynchronous operations).

Come again?

If you didn't understand everything on your first read, don't worry. Before I let you off the hook, I've got a pretty graph to make things easier to understand. 😄

In Image 1, the whole process starts off with a Vue Component calling, aka "dispatching", an action function. Said function might be doing some asynchronous API calls and computations with some data from the state. Next, the action calls a mutation function and "commits" any changes it made to it, i.e. it passes on the new values to it.

Finally, the mutation function updates the state with these changes, or in other words it's "mutating" the state. These changes are automatically updated and rendered in any dependent components.

Image 1. Vuex Process Visualised

How To Access Localhost On Another Device

Sat, 12 Dec 2020 00:00:00 GMT

So there you are, tapping away on your computer and running the next Facebook locally. You're in the final stages of development and you're about to do some testing on a few devices. However, then you realize: "How do I access my localhost on another device?". 🤔 Well, you're at the right spot, buddy (or budette...?). In this article I'll show you how this can be done not only through your local WIFI network, but through the internet as well! And the answer to the latter isn't staging...

What is localhost?

Some of you may know it already, others may not. It's something we use quite often as developers, but never really try to understand in depth. 😥 But don't get me wrong... I don't want to bore you with the details. There's a Wikipedia page for that. I simply want to give you a rough idea of what's going on in that beautiful computer of yours.

So starting off, did you know that localhost is a domain name just like chunkbytes? And just like any other domain name, it's a human readable version of its IP address, aka the location (i.e. the server) of your website. With that said, the IP address of localhost tends to be 127.0.0.1.

Whenever you look up a domain in your browser, it makes a call to a server over the internet, but this isn't the case with localhost. Oh no, my friend! 😛 Instead, the call gets looped back to the computer itself. So essentially, localhost is pointing to your own computer.

Fun fact time: Any IP that starts with 127 automatically loops back to your own device.

Reading through the networking section be like...

Through a local network

So where were we? Oh yeah, accessing localhost on another device. The solution is quite simple, really... If localhost represents, what I like to call, the "internal" IP address for your PC to access itself, then we simply need the "external" IP for other devices. 💁‍♂️

And how do we find this out? Alright boys and girls, whip out your terminals and run the following command:

Windows: ipconfig
Linux/Mac: ifconfig

Below are two examples of the terminal output with the IP address that we're after: 192.168.2.50.

POWERSHELL

/* Windows */

Wireless LAN adapter Wi-Fi:

   Connection-specific DNS Suffix  . : home
   IPv6 Address. . . . . . . . . . . : 2a02:8388:8881:c200...
   Temporary IPv6 Address. . . . . . : 2a02:8388:8881:c200...
   Link-local IPv6 Address . . . . . : fe80::1dc5:f047...
   IPv4 Address. . . . . . . . . . . : 192.168.2.50
   [...]

Unfortunately, I couldn't try this out on a Mac. 🍎 Nonetheless, look out for the keyword WiFi and the IP shouldn't be too far away.

BASH

/* Linux */

wifi0: flags=4163<UP,BROADCAST,RUNNING,MULTICAST>  mtu 1500
    inet 192.168.0.45  netmask 244.244.244.0 ...
    inet6 2a02:8388:8881:c200... 
    inet6 2a02:8388:8881:c200...
    [...]

So back the to the main question: "How do I access localhost on another device?". Knowing that the IP in this example is 192.168.2.50 and assuming you're running your project on port 3000, you can then access your project on another device 📱 with 192.168.2.50:3000 in your browser. That's it!

Through the internet

What if I told you... you can also share your localhost through the internet? Not joking! 😁 There are several tools, paid and free, that allow you to accomplish this marvelous feat of technology. The most well-known tool is ngrok, which is also the one we'll be using in this tutorial.

And how does it work? Again, without boring you with the technical details: tools like ngrok basically expose your localhost to the internet, which can then be accessed via a subdomain of ngrok.com. Even though ngrok has paid plans, their free version should be plenty for most developer needs.

Don't we all love free stuff? 😂

Sorry lads (and ladettes...?), but even using their free version will require you to create an account with them. But hey, at least you don't need to give them your credit card details, am I right? 😆

Download ngrok

Next, download the actual program that allows this magic goodness to happen and extract it from the zip file.

Setting it up

With the ngrok program extracted, navigate your terminal's directory to the same location. Then run the following command with your authentication token as the last parameter. This will basically save your authentication key to ngrok's yml configuration file.

BASH

./ngrok authtoken 1kK5xphsYvZGLpWsK2JVAB...

Almost there! Now, with your terminal in the same directory as before, run the final command below. The last parameter is the port you want to expose to the internet. In our example, it's 3000.

BASH

./ngrok http 3000

This will launch ngrok and display some information in your terminal. One of them will be the link under which you can access your localhost. Look out for this line: 👇

BASH

Forwarding      http://5fb075d.ngrok.io -> http://localhost:3000

And there you go, you can now access your local app through the internet with the help of ngrok! 🎉🥳

How To Install WordPress Using XAMPP

Sat, 05 Dec 2020 00:00:00 GMT

Do you want to install WordPress on your local machine using XAMPP? Do you need a simple and straightforward installation guide? Well, look no further! I've got you covered. Just follow the steps below and you'll have WordPress up and running in no time. ✊

In case you plan on following this guide on Windows, I recommend you opt for a more powerful and convenient development setup: Laragon. I have an article explaining its advantages over conventional tools like XAMPP. It even has a brief setup guide to get you started. Unfortunately, this tool is only available on Windows. Sorry Mac users... 😞

Step 1: Download and Install XAMPP

Alright! First thing to do: download XAMPP and install it. The installation process is quite straightforward, so you'll be on your own for that part. 😉 Just remember: when in doubt, leave the default installation settings as is.

Ignore any mentions of Bitnami that you encounter.

Step 2: Launch XAMPP

On Mac

After it has been installed, start the application and launch the server by clicking "Start".

Time to start the engine, boys and girls! 🚗

This should automatically start the 3 required services (Apache, MySQL, ProFTPD) in the Services tab. However, if they haven't, make sure to start them manually. Next, you want to choose a port for your server in the Network tab. I choose you, number 8080...

Lastly, in the Volumes tab, you want to mount the data volume /opt/lampp. At this point, if you visit localhost:8080 in your browser, you'll be greeted by a beautiful XAMPP page. 😍

On Windows

For the Windows folks, it's a little different...

First, make sure you start the XAMPP Control Panel as an admin. This can be done by right clicking on the program and choosing Run as administrator. Next, you'll be greeted by the following window.

The classic windows look we all know! 🤭

To launch the server, simply click on Start for both the Apache and MySQL modules, as shown in the image above. If you now visit localhost:80, you should be greeted by a XAMPP web page as well.

But wait! What if you want to change the port number like on Mac? Well... on Windows it's not as simple as a button click (as usual). 🙄 For the purpose of not having the explanation take up half the article, a detailed step by step guide 📃 can be found on Stack Overflow.

However, for the time being, I recommend you stick with the default port 80.

Pitstop

Bonus tip (for Mac) 🤓 - Something already occupying your chosen port? You can kill it by running kill -9 <<PID number>> in your terminal. You can find out the PID number with lsof -i @localhost:<<port number>>.

Step 3: Download and set up WordPress

On to the next task! We now have to download WordPress and set it up. For the Windows folks, make sure unzip the file after downloading.

The installation procedure isn't as straightforward since all you get is a bunch of files and folders. For this part, you want to return to your XAMPP application interface and click "Explore" in the Volumes tab. Windows users, however, will want to simply click the "📂 Explorer" button (no Volumes tab needed).

Time to explore the unknown... or not?! 👀

You'll now find yourself in the XAMPP (or Lampp) directory. From here, you want to open the htdocs folder and create a new folder in it named after your website. How about we name it tutorial, shall we? And it is in this newly created folder where you want to copy all your WordPress files and folders that you downloaded.

Here's what it should look like afterwards: 👇

Lo and behold!

Step 4: Set up the database

So far so good! Before we move on, we have to set up a mySQL database on which we would like to install our WordPress website. We can access the interface at http://localhost:<<port>>/phpmyadmin/. We then create a new database by clicking on "New" in the left-hand column. Give your database a name and then click "Create".

Here ya go!

Best not to touch anything else or you might end up messing things up... 😅

Step 5: Install WordPress

The final step is upon us where we install WordPress on XAMPP! Now that we have a server up and running as well as a database set up for our website, we can finally start installing our WordPress site by accessing it on localhost:<<port>>/<<website name>> (in our case localhost:8080/tutorial). You'll be greeted by a beautiful page to choose your language. 🔠

At one point, you'll be greeted by the following page:

The final boss...🤖

Here you'll want to you enter the name of the database you previously created as well as the admin's username and password. By default, an admin with the username root and no password exists. The rest you can safely ignore.

Bonus tip 🤓 - In case you run into a "Sorry, but I can’t write the wp-config.php file" error, you want to have the wp-config.php file placed in your website folder. In my situation, it would be htdocs/tutorial.

Alright, you did it! Beyond this point it's smooth sailing. I hope you enjoyed this guide on how to install WordPress using XAMPP. Good luck on your WordPress adventures and beyond. 😄

An Introduction To Styled Components

Sat, 28 Nov 2020 00:00:00 GMT

There are a couple of ways to style your React components. You may either choose to do inline styling, import your CSS from an external style sheet, or even include it in your JavaScript file. Particularly, in this article I will cover the last method with an introduction to the React library Styled Components. 💅 Let's get styling, mi amigos!

Why use Styled Components

Every library has its purpose and so does this one: improving the developer experience of styling React components! That's... kind of vague, right? 😅 So let's dig a bit deeper. What are its benefits?

Only relevant CSS is loaded as the styling is bound to its own respective component. So for instance, if you have a web page that doesn't have any button (component), you will not find any CSS concerning buttons. Naturally, this translates into less code on your live site. As a counter example, imagine loading a single style sheet that contains all your CSS, even if the page you're on only uses a fraction of it.
No more class name related bugs such as duplication and misspelling. Instead, class names are generated for you! 😎
Dynamic styling based on props is a simple, yet powerful option that gives way to many possibilities. Easily one of my favorite reasons to use this library!
Easier maintenance of your CSS code since you know exactly where the styles affecting your components are.
Automatic vendor prefixing... booyah! 🤩

The Basics

In order to use this library in your project, run either npm install --save styled-components or yarn add styled-components. Afterwards, import it into your pages with import styled from 'styled-components'... you know the drill. 😉

Alright, time to dig into the code by taking a look at an example:

JSX

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;
`;

In this code snippet, we declare a variable Title as an H1 tag with some CSS using the imported object styled and its method h1. There is an equivalent method for every HTML tag you can think of, e.g. p, button, section, div, etc. However, what follows afterwards with the back ticks `` may seem strange to some of you. 🤨 Many of you have probably seen it in the context of multi line strings. This feature is called template literals, or template strings, and was introduced with ES6.

Unfortunately, I won't be going into the details as its functionality merits a blog post of its own. However, for those who need to quench their undesirable thirst for JS knowledge, I recommend the blog post The magic behind styled-components by Max Stoiber 😁. For the... uhm, laid back people of us, here's what you can take away: the string in back ticks is actually passed as an argument to the function h1, which then parses its content and transforms it to pure CSS, including any JavaScript from interpolations (i.e. ${}).

All hail the magic conch shell!

Next, Title can be used as any other React component you're used to.

JSX

render(
  <div>
    <Title>
      All Hail Chunk Bytes!
    </Title>
  </div>
);

Dynamic Styling

One powerful feature of Styled Components is its ability to allow for styling based on props you pass to it. Let's build on the previous example, shall we?

JSX

<Title primary>
  All Hail Chunk Bytes!
</Title>

Remember, passing the props primary without a value, is the equivalent to primary={true}. This props is then available in our template literal through interpolation.

JSX

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: ${props => props.primary ? "red" : "black"};

  // Or with destructuring: 
  color: ${({ primary }) => primary ? "red" : "black"};
`;

For the CSS property color, we check if primary exists and then set the respective color accordingly. We do this IF statement with the help of a ternary operator. However, this isn't only restricted to one property. You may even conditionally render multiple CSS properties depending on the prop. 👆

JSX

import styled, { css } from 'styled-components'

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;

  ${({ primary }) => primary && css`
    color: red;
    text-align: left;
  `};
`;

In the example above, we load two additional properties if primary exists. However, to be able to use a template literal inside an interpolation, we need to import and use the function css. [Insert template literal Inception joke here] 😆

Reusing styled components

Don't Repeat Yourself - The philosophy all coders (hopefully) love to follow, and this isn't any different here! Styled Components allows us to reuse existing components and apply another layer of styling on top. Let's work with the most recent example, but implement the changes for a primary title another way.

JSX

const PrimaryTitle = styled(Title)`
  color: red;
  text-align: left;
`;

Et voilá! 🥐 We created another component called PrimaryTitle using Title and its styling as the base. For this, we simply need to pass it as an argument to styled.

Good to know

Before this tutorial comes to an end, there are a couple more things I'd like to show you that will really supercharge your Styled Components in your future project.

Pseudo-classes, elements and nesting

JSX

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: red;

  &:hover {
    color: blue;
  }
`;

You can apply pseudo classes and elements, by taking advantage of the ampersand (&), much like in Sass. Even better, you can nest your CSS logic just like in Sass. But don't got crazy! 😝

In case you're curious what other (S)CSS features Styled Components has to offer, I recommend checking out the preprocessor Stylis, which this library is based on.

Substituting the tag

What if I want to make the H1 component from our examples an H2? Easy peasy! Just pass your desired HTML tag as a props with as.

JSX

<Title primary as='h2'>
  All Hail Chunk Bytes!
</Title>

Adding a theme

No coding project is complete without its own theme. Keep it DRY, remember? Styled Components provides a wrapper component called ThemeProvider. Via the Context API from React, it propagates your theme through all its children 👶 in the application. The theme can then be accessed via props in the styled component.

JSX

import styled, { ThemeProvider } from 'styled-components'

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: ${({ theme }) => theme.colors.blue};
`;

const theme = {
  colors: {
    blue: '#4064d7'
  }
};

render(
  <ThemeProvider theme={theme}>
    <Title>
      All Hail Chunk Bytes!
    </Title>
  </ThemeProvider>
);

Hopefully this introduction to Styled Components has shown you the power of writing CSS in JavaScript and its possibilities. Maybe after this, you'll even become addicted to this way of writing CSS. 😂

There's no turning back 😛

React Routing Without React Router

Sat, 07 Nov 2020 00:00:00 GMT

Keep things simple, stupid! The motto of every developer, I hope... This can also be applied to the use of external libraries, which offer a plethora of awesome features and make our developer hearts go fuzzy. Yet, more often than not, we might not be able to take advantage of even a fraction of them. In that case, is it even worth including them at the expense of a more bloated web application? Well, not always... 😟 In this article, I'd like to demonstrate how simple React routing can be done in React using a custom solution instead of using an external library such as React Router.

A word of caution

Hey there! Before we move on, did you see how I made the word simple earlier 👆 bold? Well, that's what this solution is intended for. If you've only got a couple of pages you need routing for, then you'll surely benefit from a custom solution. But anything more complex than that? You'll probably want to start considering a more powerful tool 💪 like React Router where you can take advantage of its powerful features. Capiche?!

Billy, such a savage... 😏

The setup

The example I will go through in this article can be accessed on my GitHub repository. The project was created from the Create React App template and consists of three different pages: Home, About and Contact.

The routing logic

In Routing.js, the main part of our routing logic can be seen. Take note ⚠️ that this custom router uses React hooks like useState and useMemo as well as the Context API. If you aren't familiar with them, I recommend you brush up your knowledge about them before tackling the code below.

Now, without getting too hung up on the details 🧐, what are the main takeaways?

JSX

// Routing.js

import React, { useState, useMemo, createContext } from 'react'

/* Simple object which we use to set and 
 * identify the pages in our router 
 */
export const pagesMapping = { 
  home: "home",
  about: "about",
  contact: "contact"
}

With the help of useState, we keep track of the current page we need to route to. This is stored in the variable page, which by default will be set to whatever is specified in the URL path. In addition to that, we have the function setPage with which we can dynamically change the page, such as in a navigation bar.

Next ⏭, we store these the aforementioned variable and function within an Object Literal in a variable called value. You will notice that we do so using the useMemo hook. This makes our app a bit more efficient in reacting to any changes in our state.

Lastly, we want to make our state value (i.e. page and setPage) accessible to our entire application. We do so using the Context API. When we create the context RoutingContext, we can pass a default value, though you may leave it blank if you chose to do so (unless you use TypeScript! 😆).

JSX

// Routing.js

export const RoutingContext = createContext({ page: pagesMapping.home })

export default function Router({ children }) {

  /* Read the urlPath, e.g. '/about' or '/' */
  let urlPath = window.location.pathname.slice(1).toLowerCase()

  /* Set the default page to Home if not specified otherwise in the URL */
  const [page, setPage] = useState(urlPath || pagesMapping.home)

  const value = useMemo(
    () => ({ page, setPage }), 
    [page, setPage]
  )
  
  return (
    <RoutingContext.Provider value={value}>
      {children}
    </RoutingContext.Provider>
  )
}

Our component Router will return this context, which will be made accessible to all its children through the props value. And how do we ensure it's truly accessible to all components in the application? We insert it at the very root of the app, of course! 😋 This can be done in the index.js file as seen below.

JSX

// index.js

import Router from './context/Routing'

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

All clear so far?

Seriously though, leave any questions in the comment section 😊

Displaying the right pages

Alrighty then, we've go the routing logic set up. Now, what about showing the right pages depending on what the router wants? Easy peasy! For this we shall take a look at App.js.

To gain access to our RoutingContext we created earlier, we need to use useContext. From it, we can can destructure the variable page. Just to clarify, this is the same variable we passed into value along with the function setPage. Equipped with our omniscient power on the state of our app, we can then conditionally render relevant components, i.e. pages, depending on the value of page.

JSX

// App.js

import { useContext } from 'react'

import Home from './pages/Home'
import About from './pages/About'
import Contact from './pages/Contact'
import { pagesMapping, RoutingContext } from './context/Routing'
import './App.css'

function App() {
  const { page } = useContext(RoutingContext)

  return (
    <>
      {(pagesMapping.home === page) && <Home />}
      {(pagesMapping.about === page) && <About />}
      {(pagesMapping.contact === page) && <Contact />}
    </>
  )
}

export default App

That's all, really! Not much else to explain here. 😛

Manually changing the page

How do we go about changing the page manually, say by clicking on an element? To explain this, let's take a look Home.js as an example. Just as in the previous section, we need to gain access to our all mighty Context API with useContext. Instead of retrieving page like last time, we retrieve the function setPage instead.

The rest of the code should be quite familiar for you. We simply invoke the function with onClick and set it to the desired page using a property from pagesMapping.

JSX

// Home.js

import { useContext } from 'react'

import { RoutingContext, pagesMapping } from '../context/Routing'
import logo from '../logo.svg'

export default function Home() {
  const { setPage } = useContext(RoutingContext)

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Welcome to the <code>Home</code> page.
        </p>
        <p className="App-link" onClick={() => setPage(pagesMapping.about)}>
          About
        </p>
      </header>
    </div>
  )
}

Just the beginning

Yay! You've made it to the end of this article. 😁 Once you've understood the routing setup in Routing.js, the rest shouldn't be much of a challenge to understand. This custom example is by no means a complete solution. For example, I've not included a 404 page for an invalid URL path. Neither does the URL change when switching between pages. These are all things that can be included if you'd like to.

I hope with these basic building blocks you can do React routing without a library like React Router when the situation arises. 😉

How To Install PHPUnit for WordPress on Windows

Tue, 12 Nov 2019 00:00:00 GMT

Unit testing is an indispensable tool for any developer, regardless of the language they use. The same goes for WordPress plugin development. However, I'm not here to regurgitate its importance, benefits and bla bla bla... I would like to talk to you about a more pressing issue instead: getting the damn thing set up on Windows! The fact that Windows isn't a Unix based system can sometimes make even the simplest of tasks a nightmare. Likewise, attempting to install PHPUnit for WordPress on Windows was no exception. Fortunately for you, I'm about to share my super-duper installation guide, so you don't have to suffer through the same thing as I did. 🤪

Please note that this installation was performed on Windows 10. You may try it out on another version, but I can't guarantee it will work.

Requirements

No one should come to a battle unprepared and you shouldn't either. In order to pull this whole thing off, you will need the following tools: 🔨

Composer
Apache Subversion
WP-CLI

I'm going to assume you already have Composer installed, as any good PHP developer should have. If not... 🤨 you better download it before I whoop your ass. As for the other two, let me show you how it's done!

Installing Apache Subversion

WordPress uses a source version control system called Apache Subversion and you're going to need it to set up the test environment of your plugin. If you've already got it installed, color me impressed. You're a real tech wizard 🧙‍♂️, bruh! If not, follow these simple steps.

First off, download Apache Subversion command line tools. Next, extract the contents of the zip file into a folder called apache-svn and place it into the directory C:\Program Files. Now, open your control panel and head over to System and Security\System and click on "Advanced system settings" on the left-hand side. You should be greeted by the following window:

The first step of many...

In the "Advanced" tab, click on "Environment Variables". This will prompt you another window where you will select "Path" in the "System variables" section and click "Edit...".

Some privacy please 😆

Almost there, buddy! Hang on... In the "Edit environment variable" window, create a new variable by clicking on "New". Then give it the following name: C:\Program Files\apache-svn\bin. There you go! Mission complete.

Step #1 completed!

Installing WP-CLI

Looking at the subheading, you'd think this step is simple, right? Well, whatever you're thinking, wrong! Hint: it's not... 😬 If you're using a server setup like XAMPP, WAMP or whatnot, I recommend checking out this awesome blog post by Anh Tran. He'll guide you through getting WP-CLI installed on your Windows machine.

On the other hand, if you're a Laragon user like me, there's a super brief tutorial on the Laragon forum on how to install it.

Setting up plugin unit tests

At the time of this writing, WordPress is not yet compatible with PHPUnit's latest version 8.x, but version 7.x instead. So don't go downloading version 8, only to complain that nothing works (like I did), ya hear me? ಠ_ಠ

Installing PHPUnit

To install PHPUnit, cd to the root of your plugin directory and run the following command:

BASH

$ composer require --dev phpunit/phpunit:7.*

This will install the latest version of the 7.x release tree. 🌲 Then verify it's properly installed with the command

BASH

$ ./vendor/bin/phpunit --version

Please note that it's not considered good practice to install PHPUnit globally. Instead, PHPUnit should be managed as a project-local dependency. Although, there's nothing stopping you from you doing otherwise... 😐

Creating the plugin test files

Alright, still in your plugin directory? Great! This time we're going to use WP-CLI to create the plugin test files.

BASH

$ wp scaffold plugin-tests <insert-plugin-name>

By default, the following files are generated: 📁

phpunit.xml.dist - the configuration file for PHPUnit
.travis.yml - the configuration file for Travis CI
bin/install-wp-tests.sh - configures the WordPress test suite and a test database
tests/bootstrap.php - the file that makes the current plugin active when running the test suite
tests/test-sample.php - a sample file containing the actual tests
.phpcs.xml.dist - a collection of PHP_CodeSniffer rules

Creating a test database

Next, we are going to use the previously generated bin/install-wp-tests.sh file to create a test database.

BASH

$ bin/install-wp-tests.sh wordpress_db_test root '' localhost latest

Here's what you need to know about the command above. To start off, wordpress_db_test will be the name of your test database. You may name it however you like... well, except after the names that already exist. 😆 Furthermore, and in most cases, the default database user tends to be called root and has no password, hence root ''. You may need to change this if it isn't the case for you.

Now... if everything went well, run ./vendor/bin/phpunit in your plugin directory. This will execute any PHPUnit tests.

The problems

Chances are, in the previous section, everything didn't go as smoothly as you anticipated... But that's OK! I got you covered, mi hombre. 😏

Oh Laragon, what are thou doing?

If you're a Laragon user, you'll want to pay close attention to this section. If not... wait! You may find a golden nugget or two to solve your problems. 😀

Whenever I attempted to create the test database through the Cmder console emulator, Laragon would use Git Bash in the background to execute the install-wp-tests.sh file. As a result, the execution would fail because Git Bash couldn't recognize the command mysqladmin. Solution? Add it to the PATH environment variables. ➕

Remember when you added Apache Subversion to the PATH environment variables? 🤓 You're going to want to do the same, but specify C:\laragon\bin\mysql\mysql-5.7.24-winx64\bin as the path instead (or wherever your mysqladmin.exe executable is located).

Furthermore, I recommend that you use Git Bash instead of Cmder to create the test database, as the latter still appears to not execute it properly. Just remember to restart Git Bash after adding a new environment variable. And while we're at it, before rerunning the command for the test database, make sure to delete the folders wordpress and wordpress-test-lib in C:\Users\<username>\AppData\Local\Temp. Drop the test database as well if it was created.

require_once(...) errors

TEXT

Warning: require_once(/tmp/wordpress//wp-includes/class-phpmailer.php): failed to open stream: No such file or directory in C:\Users\dilshan\AppData\Local\Temp\wordpress-tests-lib\includes\mock-mailer.php on line 2

Fatal error: require_once(): Failed opening required '/tmp/wordpress//wp-includes/class-phpmailer.php' (include_path='.;C:/laragon/etc/php/pear') in C:\Users\dilshan\AppData\Local\Temp\wordpress-tests-lib\includes\mock-mailer.php on line 2

If you've got an error ❌ similar to that above, you can fix it by doing the following change. In C:\Users\<username>\AppData\Local\Temp\wordpress-tests-lib\wp-tests-config.php, on line 7, replace the relative path of /tmp/wordpress/ with an absolute path: C:/Users/<username>/AppData/Local/Temp/wordpress/. After making the change, it should look like below.

PHP

define( 'ABSPATH', 'C:/Users/dilshan/AppData/Local/Temp/wordpress/' );

Run ./vendor/bin/phpunit and... it wor- oh no! A warning. 😨

Finally finished... or not?

Fortunately, this is only a warning, which I (think I) fixed by adding the attribute name="..." to <testsuite> in the phpunit.xml.dist file. But at this stage, I'm happy to have finally installed PHPUnit for my WordPress plugin, and I hope you are too! 😋

An Introduction To The Sage WordPress Starter Theme

Tue, 05 Nov 2019 00:00:00 GMT

WordPress is an awesome and powerful tool. It's not without reason that more than a third of all websites are powered by it. Unfortunately, its development workflow feels quite outdated and clunky when compared to PHP Laravel and many front-end frameworks. This can be mainly attributed to the core development team striving to never break backwards compatibility. 🙄 Fortunately, a group of talented developers, working under the company name of Roots, have taken it upon themselves to make WordPress development much more modern and streamlined. In this article, I'll be giving you an introduction to the Sage WordPress starter theme, their most popular project.

I'll be discussing what Sage has to offer, how to install it and how to read its folder structure.

What Sage offers

If you're coming from a more traditional web development background, you'll be familiar with some of the tools Sage offers.

First, Sage is based on Webpack. For those of you who are unaware of what it its: it's a module blunder. In layman's terms, it's a front-end tool that takes your interdependent assets (e.g. JavaScript, images, HTML, CSS, …) and processes it into something usable by the client aka website visitor. 🧍‍♂️ This might involve processing Sass, checking JavaScript for errors, optimizing images, etc. But honestly, you rarely ever need to mess with Webpack, so it's something you may safely ignore for the time being.

Second, it comes preconfigured with Bootstrap, the most popular UI framework, making web design much easier for us grouchy developers. However, if Bootstrap isn't your jam, you can easily configure it with other frameworks such as Bulma, Foundation, etc. Or for the daring among us, you may not use one at all! 😱

You wish... 😉

Last but not least, Sage uses PHP Laravel's templating engine Blade for DRY (Don't Repeat Yourself) code. Now, while WordPress does provide DRY templating to a certain extent, I believe Blade's focus on creating more maintainable projects just make it a better option over its vanilla counterpart.

An example of the templating language can be seen below.

PHP

@extends('layouts.base')

@section('content')
  @while(have_posts())
    {!! the_post() !!}
    @include('partials/content-single')
  @endwhile
@endsection

Installation

Before you can install the Sage starter theme, you first need to make sure you meet the following dependencies in your development environment:

WordPress >= 4.7
PHP >= 7.1.3 (with php-mbstring enabled)
Composer
Node.js >= 8.0.0
Yarn

My preferred WordPress development environment uses Laragon, which comes with all these dependencies installed automatically. 😎 You may take a look at an article I wrote if you're interested in learning more about it!

Ahem, alright.... moving on. In your terminal, head over to the wp-contentthemes directory of your WordPress site. Then, execute the following command, replacing <your-theme-name> with a name of your choosing.

BASH

$ composer create-project roots/sage <your-theme-name>

Following this, Sage will be installed and you'll be prompted to answer several statements.

Regarding the prompt Path to theme directory (e.g., /wp-content/themes/tutorial) [/app/themes/sage], make sure to enter the path of your new theme, i.e. /wp-content/themes/<your-theme-name>. By default, it will suggest a different path that is used with one of Roots' other projects, namely Bedrock.

Last but not least, in your new theme folder, run yarn or npm install to install all the dependencies of your theme. Et voilà, the installation is complete! 💃

Aannndd don't forget, to run your site, type yarn start or npm run start.

TTY mode is not supported on Windows platform

For my fellow developers who are on Windows like I am, you'll likely encounter an error during the installation process: TTY mode is not supported on Windows platform. As a result, you won't be prompted any questions. However, if that's not the case for you, awesome! One less thing to worry about. 😀

Windows strikes, again!

To solve this problem, cd into your newly generated theme and simply run the following commands one by one:

BASH

$ vendorbinsage meta
$ vendorbinsage config
$ vendorbinsage preset

Folder Overview

Using any new tool can be daunting at first, 😥 which is why this section is dedicated to giving you an overview of Sage's project structure. To make this as digestible as possible, I'll go through each group of files one by one. And to make things more visually appealing, I'll be using the theme structure diagram from Roots' website.

App

TEXT

├── app/                  # → Theme PHP
│   ├── controllers/      # → Controller files
│   ├── admin.php         # → Theme customizer setup
│   ├── filters.php       # → Theme filters
│   ├── helpers.php       # → Helper functions
│   └── setup.php         # → Theme setup

You can consider the app/ directory as the PHP logic 👩‍💻 of your site. controllers/ contains your controllers... duh! But seriously, this is where your PHP logic belongs, e.g. sending a confirmation email after a visitor signs up for a newsletter. Now, the other files you can consider as a split up functions.php file. Instead of having all your code in one place, they are grouped separately instead. 👨‍👩‍👧‍👦

You'll find yourself visiting this folder once in a while.

Config

TEXT

├── config/

The name is pretty self-explanatory. This folder takes care of your theme's configuration, e.g. namespacing or the path to your assets. Frankly, you'll rarely ever touch this folder.

Resources

TEXT

├── resources/            # → Theme assets and templates
│   ├── assets/           # → Front-end assets
│   │   ├── config.json   # → Settings for compiled assets
│   │   ├── build/        # → Webpack and ESLint config
│   │   ├── fonts/        # → Theme fonts
│   │   ├── images/       # → Theme images
│   │   ├── scripts/      # → Theme JS
│   │   └── styles/       # → Theme stylesheets
│   ├── functions.php     # → Composer autoloader, theme includes
│   ├── index.php         # → Never manually edit
│   ├── screenshot.png    # → Theme screenshot for WP admin
│   ├── style.css         # → Theme meta information
│   └── views/            # → Theme templates
│       ├── layouts/      # → Base templates
│       └── partials/     # → Partial templates

Without a doubt, this is where you'll be spending most of your time. 🕐 The resources/ directory contains all your PHP pages, JavaScript, HTML, etc of your site.

First of all, the assets/ folder contains your images, fonts, JavaScript and CSS/SCSS files. The folder build/ you shouldn't touch at all and config.json/ can be safely ignored as you almost never need to edit it. On the other hand, you'll find yourself working in the scripts/ and styles/ folder quite often.

Next, views/ contains all your PHP view templates, or to be specific the Laravel Blade template files that Sage uses. As a result, you'll see your files ending with blade.php. It is common practice to use layouts and partials in Blade template development, hence the folders. The latter is similar to WordPress partials, too.

Apart from these two folders, there are a bunch of other files which you can safely ignore as well. Lot of ignoring, right? Well, you might want to change the screenshot.png image, so your WordPress theme has a nice cover. 📷

Miscellaneous

TEXT

├── composer.json         # → Autoloading for `app/` files
├── composer.lock         # → Composer lock file (never edit)
├── dist/                 # → Built theme assets (never edit)
├── node_modules/         # → Node.js packages (never edit)
├── package.json          # → Node.js dependencies and scripts
└── vendor/               # → Composer packages (never edit)

Lastly, I would call this the What? group, because that's the only thing you need to know about them. And by that I mean know nothing. 👉 Insert obligatory "You know nothing Jon Snow" joke here...

If you ever do need to edit the composer.json and package.json files, there are plenty of tutorials out there on how to do so. These files aren't specific to the Sage starter theme and hence I won't go into them.

Laragon WordPress Development Environment - The Hidden Gem

Tue, 22 Oct 2019 00:00:00 GMT

As a newcomer to WordPress development, finding an easy to use yet powerful development setup is easier said than done. After doing some research online, you're bound to run into the same tools over and over again. To name a few, there are DesktopServer, Vagrant, Local by Flywheel and any variation of the LAMP stack, such as XAMPP or MAMP. However, there's one tool in particular that I consider to be on par, if not better, than those aforementioned ones. Strangely enough, it's barely mentioned in any articles and videos, which makes it hard for people to discover. I should know it, since I randomly stumbled upon it in a Reddit post. So what's this mysterious ❓ development tool I'm talking about? Welcome to the Laragon WordPress development environment, my personal favorite among all of them!

A versatile tool

If there's one thing you should know from the start, it's that Laragon is not limited to WordPress alone. Yes, this article is about our all beloved CMS. 🙏 Yet, if you're occasionally developing in other technology stacks such as Node.js, Python, Java, Go and Ruby, Laragon is an option worth checking out. Even better though, it's also compatible with PostgreSQL & MongoDB right out of the box, providing you with even more options besides the usual MySQL/MariaDB.

This certainly is a step up from tools such as Local by Flywheel and DesktopServer, which restrict the customizability of your server setup to provide a more user friendly experience. But as you'll see next, Laragon shows that you can have it both ways!

The hidden gem!

Where Laragon excels

Now, by easy to use I don't mean that your grandpa would know how to use it. Rather, it makes many tedious processes much easier to execute along with fewer potential bugs and headaches! For example, Laragon offers a Quick app option that allows you to set up WordPress effortlessly. Need to add Yarn, MongoDB or Python to your development environment? Easy! 😎 Just click a button under Quick add et voilà. This alone will allow you to focus more on your development and less on setting up and tweaking your server to your liking.

Next to that, Laragon is fast 🏃‍♀️... and very lightweight. The core itself is less than 2MB and uses less than 4MB RAM when running. In an article by Athlone Harris-Compton, there's a wonderful speed comparison between Laragon, DesktopServer and Local by FlyWheel. It easily shows just how fast it really is. This alone may be reason enough for some to switch over.

There's a bunch of other awesome features you may be interested in, but instead of regurgitating everything in my article, why not check it out on their website instead?

Installing WordPress with Laragon

While I'm at it, let me show you how to get started with a local install of WordPress using Laragon. First off, head over to their site's download page and download the Laragon Full edition. It comes jam-packed with a bunch of tools. Oh no! Did I forget to mention that it's available on Windows only? 😭 Sorry, mac users...

After launching the installer, you pretty much want to accept all the default settings and click next, next, next... ⏩ However, depending on your preferences, you may want to de-active certain options like auto start.

The choice is yours ⏳

The dashboard and settings

The dashboard of Laragon isn't very intuitive at first since it lacks a traditional menu bar at the top. Instead, your menu is accessible via the word Menu (who would've thought that!) near the logo. On the other hand, your preferences are accessible through the cog icon in the top right corner.

Next, start your Laragon server by clicking on the Start All button in the bottom left. By default, your server will run on Apache without an SSL certificate. However, you may adjust that under Preferences (cog icon) > Services & Ports.

Installing WordPress

It's time for the real prize! 😏 To install a local WordPress copy, simply go to Menu (or right click on the dashboard) > Quick app > WordPress. Then, you'll be asked to name your project, which will also be used for your website's URL. Let Laragon do its magic... and done it is!

After finishing your WordPress installation

Now, your WordPress installation is ready to be set up by visiting your sites URL. Your database has already been configured to your installation, so that's one fewer problem to worry about during the setup. 😊

How To Use Slick To Create A Carousel

Tue, 08 Oct 2019 00:00:00 GMT

My favorite go-to CSS framework is Bootstrap and I'm sure it is for many others, too. However, once in a while the components of such a framework are too basic or don't fulfill your requirements adequately. In this case, it's best to use another more dedicated library which offers you more options. Recently, I came across such a situation while trying to build a carousel. I found a fantastic jQuery library called Slick, claiming it's the last carousel you'll ever need. A pretty bold statement if you ask me! 👀 Well, in this tutorial, I'll be showing you how to use Slick to create a carousel as well as point out some of its quirks and errors that I encountered along the way.

You saw nothing... 👻

Installation

Every journey must start somewhere and Slick is no exception! For the installation, there are two options: either using a CDN or a package manager.

CDN

Slick offers two option when it comes to using a CDN. Make a choice:

Afterwards, simply insert the CSS as links into the HTML page head and the JavaScript just before your closing body tag.

HTML

<head>
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.css"/>
  <!-- Add the slick-theme.css if you want default styling -->
  <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick-theme.css"/>
</head>
<body>
  <!-- Some other code right here -->
  <script type="text/javascript" src="//cdn.jsdelivr.net/gh/kenwheeler/slick@1.8.1/slick/slick.min.js"></script>
</body>

Et voilà! You're ready to use it. 😊

Package manager

If you prefer installing the library via a package manager, you've got several options as well.

BASH

# Yarn
yarn add slick-carousel

# Bower
bower install --save slick-carousel

# NPM
npm install slick-carousel

Next, you have even more options! Optionsception... 🤯 First, you can insert the relevant CSS and JavaScript files into your HTML page the same way as in the previous section. Only this time, you would be fetching the files from your node modules folder.

On the other hand, my preferred way is to directly import the files into the main (S)CSS and JavaScript files of your project. This is especially recommended in conjunction with tools like Webpack and Gulp.

SCSS

// main.scss -- I'm using Wepback sass-loader
@import "~slick-carousel/slick/slick";
@import "~slick-carousel/slick/slick-theme";

JAVASCRIPT

// main.js
import 'slick-carousel/slick/slick';

Alright, now that we've successfully installed it, it's time to show how things are actually done in Slick. 😋

Understanding the basics

With the Slick carousel 🎠 library, you have a ton of features at your disposal, yet a tad too many to actually go over them all. But honestly, that's not my goal! Instead, I want simply to help you understand how the library works and how to read its documentation.

The code

Let's assume you're starting off with several images and you want to turn them into a beautiful carousel. How do you proceed?

HTML

<img src="/image-1.png" alt="Image 1">
<img src="/image-2.png" alt="Image 2">
<img src="/image-3.png" alt="Image 3">

Well, first we have to prepare the HTML layout of our images in such a way that it allows Slick to turn it into a carousel. We do this by adding 2 div layers to our collection of images, with the most outer layer containing a class name your choice.

HTML

<div class="my-carousel">
  <div><img src="/image-1.png" alt="Image 1"></div>
  <div><img src="/image-2.png" alt="Image 2"></div>
  <div><img src="/image-3.png" alt="Image 3"></div>
</div>

The class of our outer div is particularly important ❗, because we use it to tell Slick where our carousel is, which we do so as follows.

JAVASCRIPT

$('.my-carousel').slick({
  // setting-name: setting-value
});

After selecting our carousel with the jQuery selector, we apply the slick() function to it and let the library do its magic... 🦄. By default, Slick will create a single item carousel with navigation arrows. But this isn't where the story ends yet, because we can still tell Slick how to configure our carousel. And we do so by passing in an object with key-value pairs of settings.

The features

Alright, so let's say I want to create a responsive multi-slide carousel. Which settings would I need to enable? 🧐

Slick slidesToShow setting

First off, let's enable multiple slides in our carousel. As shown above, the key slidesToShow is responsible for this feature and takes a value of type integer, which has 1 set as its default. How about we change that to 2?

JAVASCRIPT

$('.my-carousel').slick({
  slidesToShow: 2,
});

Slick responsive setting

Next up, making our carousel responsive! Again, as shown in the image above, the key responsive takes an object containing breakpoints and a respective settings object. At first, the structure of this object might be a bit difficult to guess, but fortunately we can consult a demo with some code on their page.

How about we only show 1 slide for mobile? 📱

JAVASCRIPT

$('.my-carousel').slick({
  slidesToShow: 2,
  responsive: [{
    breakpoint: 500,
    settings: {
      slidesToShow: 1,
    }
  }]
});

This little demonstration could go on forever, but at this point I think you get the gist (I hope 😅). I recommend taking a look at the documentation and exploring the various settings that are available.

Never stop learning!

Bugs galore!

No piece of software is without its flaws and while trying out Slick, I came across two bugs which provided me quite a few headaches...

Not rendering within a hidden div element

When I was first using Slick, I placed it in a hidden div element that could be toggled on and off. To my surprise, the carousel wasn't rendering until I clicked on one of the navigation buttons, as seen in this example. 👈

Luckily, someone else already experienced this issue. As it turns out, the width of the carousel slides are automatically computed based on the parent element, which turns out to be 0 if it is hidden. Unfortunately, this issue was never resolved! (╯°□°）╯︵ ┻━┻

However, I did come up with a quick and dirty workaround. Instead of initializing the carousel on page load, it will be initialized upon clicking the element responsible for making the carousel's parent element visible.

JAVASCRIPT

$('#button-toggle').click(() => {
  setTimeout(() => {
    $('.my-carousel').slick({
      // settings here
    });
  }, 200);

  setTimeout(() => {
    $('.my-carousel').removeClass('invisible');
  }, 250);
});

In my little hack, I had to add a teeny tiny delay or the code wouldn't run. Furthermore, in order to hide the jittery rendering from the user, the carousel itself is invisible by default and only made visible after the rendering has been completed. Now, whenever you click the button, it seems like there's a minuscule delay in showing the carousel. Another dirty 😏 trick is to introduce a fade-in, et voilà! It's like there never was a bug in the first place.

Webpack production build error

If you're importing Slick's SCSS with the @import statement and are using Webpack as well, you are in for a surprise when building your project for production.

TEXT

ERROR in ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss Module not found: Error: Can't resolve './ajax-loader.gif' in '/Users/Vishal/Documents/Work/nf-core/sass' @ ./node_modules/css-loader!./node_modules/postcss-loader/lib!./node_modules/sass-loader/lib/loader.js!./sass/app.scss 6:89679-89707

Zoinks! 😥 However, there is a solution!

Simply add these two lines before your import statements:

SCSS

$slick-font-path: "~slick-carousel/slick/fonts/"; // To add
$slick-loader-path: "~slick-carousel/slick/"; // To add

@import '~slick-carousel/slick/slick';
@import '~slick-carousel/slick/slick-theme';

How To Do HTTP Requests In PHP With cURL

Tue, 01 Oct 2019 00:00:00 GMT

Making HTTP requests is one of the most fundamental tasks that you can perform as a web developer. As such, it's important to know how to do them properly in the language of your choice. Having recently made the jump to PHP, it took me a while to understand how these were done. However, now that I've familiarized myself with it, I thought I'd share other newcomers 🤓 how to do HTTP requests in PHP with cURL, a built-in library.

What is cURL?

If you've spent some time in the web development sphere, you might have already heard of it. cURL, which stands for client URL, is an open-source command line tool that is used to transfer and receive data using internet protocols such as HTTP, HTTPS and FTP. Created by Daniel Stenberg in 1997, cURL is used in countless devices ranging from cars 🚗 and television sets to tablets and audio equipment. 🔉

So where does PHP come into play? Well, PHP has a module called cURL PHP that allows us to access the functionality offered by this awesome tool. Let me show you next how to use it, 'kay?

Time to get started! 😋

The Code

In this tutorial, I'll be showing you how to do the 2 most common HTTP request methods: GET and POST. However, regardless of which method you opt for (even PUT and DELETE) , they will all follow the same steps.

Initialize a cURL session
Set the URL and other various options for the session
Execute the request and save the response
Close the session to free up resources

Seems pretty straightforward, right? 😉 So how would this look like with code?

PHP

<?php
    // 1. Open cURL session
    $ch = curl_init();

    // 2. Set options
    curl_setopt($ch, CURLOPT_URL, "http://dilshankelsen.com");
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);

    // 3. Execute and save response
    $response = curl_exec($ch);

    // 4. Close cURL session
    curl_close($ch);
?>

Perhaps with the exception of the options setting (which we'll get into next 😁), everything appears to be quite straightforward. At the end of these 4 steps, you're left with a variable $response that contains the response of our GET request. This may be JSON, a string or a complete HTML page.

Understanding options

Next to error handling, options are where you will be paying attention most of the time. Options are set with the curl_setopt(resource $ch, int $option, mixed $value) function, which takes three parameters: the cURL resource/session, the option and its corresponding value.

So you may be wondering: "So what kind of options can I set?" 🤔 Ahem.... maannnnyyyy! Too many to even go through one by one. Fortunately, you will only need a handful for most of your requests:

CURLOPT_RETURNTRANSFER - Return the response as a string instead of outputting it to the screen
CURLOPT_CONNECTTIMEOUT - The number of seconds to wait while trying to connect
CURLOPT_TIMEOUT - The number of seconds to allow cURL functions to execute
CURLOPT_URL - The URL to fetch
CURLOPT_CUSTOMREQUEST - Set custom request method such as PUT or DELETE. cURL defaults to GET
CURLOPT_POSTFIELDS - An array of the data to send in a request
CURLOPT_HTTPHEADER - An array of HTTP header fields to set

A handy trick

Now, it doesn't take a genius 🤓 to realize that you'll be repeating curl_setopt() quite a bit if you need to set several options. Of course, the creators were well aware of this and have provided us two ways to cut down on the repetitiveness.

First, instead of setting the URL with curl_setopt($ch, CURLOPT_URL, "dilshankelsen.com"), we can pass in the URL immediately when initializing the cURL session, like so: $ch = curl_init("dilshankelsen.com").

Second, we can use curl_setopt_array(resource $ch, array $options) to set multiple options at once. An example would look as follows.

PHP

curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => 1,
    CURLOPT_URL => "dilshankelsen.com"
]);

Gotta love clean code! 💻

Receiving the response

As you surely noticed before, curl_exec($ch) is responsible for executing your HTTP request. In addition to that, it will return three different responses depending on the following conditions:

false if the request fails to execute
true if the request executes without error and CURLOPT_RETURNTRANSFER is set to false
The result (e.g JSON) if the request executes without error and CURLOPT_RETURNTRANSFER is set to true

Another useful function at your disposable is curl_getinfo($ch), which returns information about your request, such as the response code or total transaction time.

Error handling

Errors ❌ happen... there's nothing you can do about it. But at the very least, you should know how to properly handle them with cURL. For this task, we have two functions: curl_error($ch) and curl_errno($ch). If applicable, the former returns the error message, while the latter returns the cURL error code. The most common way to use these two functions is with an if statement.

PHP

if (!curl_exec($ch)) {
    die('Error: "' . curl_error($ch) . '" - Code: ' . curl_errno($ch));
}

POST request

So far, all examples I've been showing you were GET requests. In fact, when no request method is specified, cURL simply defaults to GET. To tell cURL you would like execute a POST method, simply set the CURLOPT_POST option to true. However, I prefer to use the option CURLOPT_CUSTOMREQUEST as any method may be specified with it. One less option to remember! 😏

Without further ado, let's see how you would preform a proper POST request, with error and JSON handling.

PHP

<?php
// Initialize cURL resource
$ch = curl_init("http://dilshankelsen.com/doesnotexist");

// Data to send
$payload = [
  "item1" => "value",
  "item2" => "value2"
];

// Header to send
$header = ['Content-Type:application/json'];

// Set cURL options
curl_setopt_array($ch, [
  CURLOPT_RETURNTRANSFER => 1,
  CURLOPT_CUSTOMREQUEST => "POST",
  CURLOPT_POSTFIELDS => json_encode($payload),
  CURLOPT_HTTPHEADER => $header
]);

// Execute the request and save the response
$response = curl_exec($ch);

// Check for errors
if (!$response) {
  die('Error: "' . curl_error($ch) . '" - Code: ' . curl_errno($ch));
}

// Decode the received JSON
$received_data = json_decode($response);

// Close session to clear up resources
curl_close($ch);

In this example, we attached a payload to our request. For this, we needed to encode our payload and set the appropriate headers in the options. If you're not familiar with JSON handling in PHP, why not check out my article on this topic (shameless plug 😅).

How To Handle JSON Objects With PHP

Tue, 24 Sep 2019 00:00:00 GMT

Working with JavaScript for an extended period of time can make you take many things for granted that aren't as easy to do in other programming languages, one of them being JSON handling. Since JSON is derived from the JavaScript language, they share much of the same syntax. Naturally, this makes them particularly well suited for each other. However, handling this data format in another language such as PHP isn't as straightforward as you might hope and it can take some time getting used to. 😥 In this article, I hope to give you an overview on this topic and help you get started on how to handle JSON objects with PHP.

Please note that I will not cover what JSON actually is and how it works. For that, I recommend this fine article by Copter Labs.

Encoding and decoding JSON

Since version 5.2, PHP features two built-in functions to transform your PHP data structures into JSON and vice versa:

json_encode(mixed $value); transforms a PHP data structure into a JSON object
json_decode(string $json); transforms a JSON object into a PHP data structure

Not so fast! ✋

Now, slapping any PHP data structure into the former function won't always work the way you expect it to. Here's what you need to pay attention to.

Watch out for indexed arrays

If you try to encode an indexed array in PHP, you'll fall flat on your face, my friend.

PHP

<?php
$myArray = array('Audi', 'Mercedes', 'VW');
echo json_encode($myArray); // ["Audi","Mercedes","VW"]

As you can see, trying to encode an indexed array in PHP by itself will just spit out another array. 😐 What if we try to encode other data structures. What can kind of results can we expect?

PHP

<?php
$associativeArray = array("Chunk Bytes" => true, "Awesome" => "Yes");
echo json_encode($associativeArray); // {"Chunk Bytes":true,"Awesome":"Yes"}

class Person {
    public $firstname = "Dilshan";
    protected $lastname = "Kelsen";
    private $blog = "Chunk Bytes";
}

$person = new Person();
echo json_encode($person); // {"firstname":"Dilshan"}

As seen in the example above, encoding an associative array will return a JSON string as expected. Nothing to worry about here. 😀 Conversely, encoding an object works as you would expect it to... with one small caveat: protected and private properties are left out from the encoding!

Pay attention to multidimensional JSON objects

On the other hand, when you decode a JSON string, PHP will return by default a standard class as seen in the snippet of code below.

PHP

<?php
$jsonString = '{"Chunk Bytes":true,"Awesome":"Yes"}';
$result = json_decode($jsonString);

var_dump($result); // object(stdClass)#1 (2) { ["Chunk Bytes"]=> bool(true) ["Awesome"]=> string(3) "Yes" }

However, if you'd like to convert it into an associative array instead, simply add true as a second parameter to the function as follows: json_decode($jsonString, true);. Furthermore, for multidimensional JSON strings, you can limit 🛑 the depth of the decoding by indicating it as an additional parameter.

PHP

<?php
$jsonString = '{"Chunk Bytes":{"Awesome":{"Yes":true}}}';
$result = json_decode($jsonString, true, 2);

var_dump($result); // NULL

Consequently, the function returns NULL if the depth of the given JSON object is deeper than what has been indicated.

How To Transfer A Live WordPress Site To A Localhost

Thu, 05 Sep 2019 00:00:00 GMT

After your website has been deployed to a hosting server, it's not uncommon to keep making changes to your website. However, it's never a good idea to do so directly while visitors still have access to it, for obvious reasons... 😅 Instead, you're better off working on a staging or testing site from which you can eventually push your changes to your live site. In this tutorial, I'll be showing you how to transfer your live WordPress site to a localhost manually. Not with a plugin, capiche?

Setting up a local WordPress site

Before we get started with all the migrating goodness, we first need to prepare a local WordPress site, which we can copy everything to. I've written an article on how to do so using XAMPP, if you're interested. However, my preferred method of creating a local WordPress site is using Local By Flywheel (those guys really need come up with a better name 😐), a dev tool specifically for WordPress. It's easy and convenient to use, and is able to set up your site in a matter of seconds. But even better... it's free!

Once you've set up your local WordPress site, it's time to start copying your live site! In this tutorial, I’ll be replicating all the steps with my website old WordPress site Chunk Bytes.

Copying your live website

Patrick knows what's up! 😉

In order to successfully replicate a WordPress website, whether it be locally or online, you will need three things:

The website's database,
It's frontend and backend files (such as HTML, CSS and PHP), and
It's configuration file(s)

Exporting the database

In your website's cPanel, head over to the Databases section and click on phpMyAdmin.

phpMyAdmin interface

Once you've accessed the interface, you want to first search for the database related to your website in the sidebar on the left. In my case it's chunkbyt_wp649. After you've found it, select it and then click the Export tab at the top. Next, make sure you've got the Quick 🏃‍♂️💨 export method selected and export your database by clicking on Go.

Copying the site's content

Next, we need to copy all the content that lives in the WordPress directory wp-content. To do this, access the File Manager under Files in your cPanel. From the home directory, enter the public_html directory and look for the wp-content folder. In order to download the entire folder, you'll have to select it and click on Compress at the top, as well as choose Zip archive as the compression type afterwards.

File manager interface

Depending on the size of your folder, it may take a few minutes. ⏳ Of course, you'll have to download the zip file once it's done. After the download has finished, you may delete the wp-content.zip file from the File Manager.

Copying the site's configuration

Last but not least, we also need to copy the site's configuration, which in this case lives in wp-config.php. Same as before, head over to the public_html directory and download the file to your computer.

Importing all the data and files

Awesome! We're almost halfway there! In this part of the tutorial, I'll show you now how to import all the data and files we've just collected, starting off with the database. 🤓

Importing the database

Head over to your local website's database administration panel. In most cases, that will be phpMyAdmin again. However, in my case, Local By Flywheel uses a database manager called Adminer. Nevertheless, these steps won't differ for you, regardless of what you use.

Adminer interface

First, you need to create a new database. You may name it the same as the original one or give it a completely new one. Frankly, it won't affect the process. After that, with your new database selected, import your sql file that we've exported from the previous section.

Before moving on, do make sure that a database user 👩‍💼 exists who has access and all the privileges to modify your newly created database. In particular, make sure to keep their name and password in mind. If you don't have one, be sure to create one!

Moving wp-content to your localhost

Next up, unzip your wp-content.zip file and move it to your local WordPress site's directory that contains its own wp-content folder. In this case, you may rename the original folder (e.g. old-wp-content) if you got content you want to keep, so it won't get deleted. However, you can also have it replaced 🗑 by your new folder if you'd like to. I've opted for the latter.

Moving wp-config.php to your localhost

Just as before, move the live site's wp-config.php file to your local site's directory, replacing the old one. Now, you may be tempted to leave it at that, but we still need to configure the file. If you actually try to access your site now, you will be greeted with Error establishing a database connection. 🚨 And why is that the case?

Simply, it has the wrong credentials to access your database, namely still those from your live site. That's why it fails to connect to your database. On top of that, if you decided to give your database a different name for your local site, you will have to adjust that in your configurations too. ☝️

Alright, for this step you'll want to open your local wp-config.php file in a text editor of your choice and change the following lines:

PHP

/** The name of the database for WordPress */
define('DB_NAME', 'chunkbytes');

/** MySQL database username */
define('DB_USER', 'admin');

/** MySQL database password */
define('DB_PASSWORD', '.........');

Make sure the right name of the database is written down, as well as the username and password of the user who has access to it (remember what I asked you to keep in mind? 😜). Once you've done that... we're still not completely finished!

Changing the URLs

While we may have successfully migrated the website to a localhost, there's still one tinsy winsy problem: our database still contains the URLs to our live website. This may cause some unexpected problems, so it's best to change them right away! 🧐

Luckily, I've come across a tool from Interconnect IT that will make this easy for us. Go ahead and download it, and then unzip the file. The creators recommend to obfuscate the name of the folder by giving it a different name. In my case, I'll rename it to chunk_sr. After you've done that, head over again to your local website's directory (where wp-content and wp-config.php are located), and move the folder there.

In order to run the search and replace tool, you'll need to navigate to it from your website. In my case, this would be the address http://chunkbytes.local/chunk_sr/. 😁 If you're not using Local By Flywheel, your address may be something like http://localhost:8080/{website_name}/{tool_name}/. Upon accessing it, you'll be greeted by a lovely screen.

Interface of search and replace tool by Interconnect IT

Fortunately, the tool automatically retrieves the database credentials from the wp-config.php file, so there's only a few things left for us to do. First of all, in the search for... field, you want to enter the full url of your live website. In my case, that's http://chunkbytes.com. In the replace with... field, you want to enter the full url of your local website. For me that is, http://chunkbytes.local.

In the actions, section you may then click on dry run to see it emulate the changes. This doesn't actually replace any of the URLs yet. Instead, to have it actually make changes to your database, you'll need to click on live run.

Et voilà! You've done it! Now you know how to successfully transfer a live WordPress site to your localhost! 😉

Houston, we have a problem

Don't worry! If you've followed along and encountered no problems, you're good to go. However, I encountered a peculiar problem after I migrated Chunk Bytes to my computer. Whenever I tried to access my local site, I would be redirected to my live site... 😫

WTF is going on?! What's this black magic?!

Keep in mind that I already had changed the URLs, so faulty links couldn't be the problem. As it turned out, my default browser (i.e. Chrome) had cached my live site due to a plugin of mine, causing it to redirect me to it whenever I tried to access chunkbytes.local. The solution? Delete the cache or use a different browser.

How To Create A Navbar With Bootstrap 4 In WordPress

Sat, 27 Jul 2019 00:00:00 GMT

The navigation bar at the top of a website is arguably the most important element of a website. And with Bootstrap, you can create a responsive and good looking navbar within minutes without breaking a sweat. However, if you're using WordPress in your backend, it can be a bit tricky to integrate the Bootstrap navbar into it. In this article, I'll show you how to create a navbar with Bootstrap 4 in WordPress in a few easy steps. 🤓

Need to install WordPress first? Check out my tutorial using XAMPP!

Integration with Bootstrap 3

I can explain! 😅

To understand what we're doing in detail, we first need to go back in time to the days of Bootstrap 3... 👀 As you may or may not know, a WordPress menu is generated on your web page using the built in wp_nav_menu() function. On its own, you simply have an unordered list. However, the function offers a wide array of parameters that the user can employ to customise the menu, like theme_location and item_spacing.

Furthermore, the real power of this function lies in its ability to let developers add custom classes and ids to the generated WordPress menu. 💪 Naturally, you could easily integrate Bootstrap 3 formatting into your navbar by adding the necessary classes and id attributes. Unfortunately, things aren't as straightforward with Bootstrap 4.

Changes in Bootstrap 4

When the 4th iteration of the UI framework was released, the formatting of the navbars was modified. The main difference? Now the menu list itself also had Bootstrap specific classes and ids, which was previously not the case. In the 3rd version, only the divs surrounding the unordered menu list required classes... So what's the big deal, you may ask? 🤔

Well, the wp_nav_menu() function only allows for custom attributes in the tags surrounding the menu list. Not for the menu itself. 😱 Fortunately, wp_nav_menu() allows for much deeper customisation by inserting a custom walker class (i.e. an object) as a parameter. And even better, someone already created a solution for our problem using this class, specifically for Bootstrap!

Installing WP Bootstrap Navwalker

The ready made solution I'm talking about is WP Bootstrap Navwalker. It's fully compliant with all Theme Review guidelines for wordpress.org submission. 😎 So how do we go about installing this baby?

Time to get to work!

First of all, download the zip file from its Github page. After you've extracted the folder from it, open your functions.php file in your website folder and insert the following line in it:

PHP

require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';

With this line you're registering WP Bootstrap Navwalker in your project. Next, go to your PHP file containing the wp_nav_menu(), usually in header.php, and make the following changes to it:

PHP

wp_nav_menu( array(
    'theme_location'  => 'primary',
    'depth'           => 2, // 1 = no dropdowns, 2 = with dropdowns.
    'container'       => 'div',
    'container_class' => 'collapse navbar-collapse',
    'container_id'    => 'bs-example-navbar-collapse-1',
    'menu_class'      => 'navbar-nav mr-auto',
    'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
    'walker'          => new WP_Bootstrap_Navwalker(),
) );

Et voilà! The deed has been done. 😁 As you can see above, we inserted the WP Bootstrap Navwalker class at the very end. We even have a navbar to fall back on in case it fails to load. Lastly, make sure that the container_id value matches the value for data_target in the surrounding div tag. Otherwise, you mobile navbar may not expand at all.

How To Query Elasticsearch Using JavaScript

Tue, 02 Jul 2019 00:00:00 GMT

Elasticsearch is an amazing open-source tool to store, search and analyse data. With an emphasis on search. Fortunately, this query goodness isn't restricted to Kibana alone and its dev tools section. Elastic, the company behind this search engine, has also provided us with a feature packed NodeJS API client, allowing you to query directly from any backend application. There are also several official Elasticsearch clients as well as community contributed clients for other programming languages. However, in this article, I'll be showing you specifically how to query Elasticsearch using JavaScript! So let's get started, shall we?! 😆

Let's talk about Kibana

When it comes to using Elasticsearch, Kibana is a natural choice as an analytics and visualisation tool. It's like the Robin to Batman. 🦇 Moreover, should you ever find it lacking certain features you need, you can always fill that gap by creating your own plugin. I also have a step-by-step tutorial on how to create a Kibana plugin, in case you're interested! Each plugin automatically comes equipped with NodeJS on the backend, with HapiJS as the framework.

Kibana plugins are probably the most common place for needing the API client to query Elasticsearch. However, what you're about to read can be done anywhere, even in a simple script file! 😋

Installation

To install the JavaScript API client, simply run one of the commands below. Keep note that the library requires you to have at least v8 of NodeJS running. Moreover, it's best that you install the same major client version as Elasticsearch. For instance, if you're working with Elasticsearch 7, you should install version 7 of the NodeJS API client.

BASH

npm install @elastic/elasticsearch@7

yarn add @elastic/elasticsearch@7

Next, you want to import the library into a file of your choice and instantiate a new client with which you can start querying Elasticsearch. Make sure it is observing the right port number upon instantiating! 👏

JAVASCRIPT

const { Client } = require('@elastic/elasticsearch')
const client = new Client({ node: 'http://localhost:9200' })

Configuration

Before moving on, the default configuration should suffice for most people. However, if you do need to configure your client, you can get further details on that right here!

Querying Elasticsearch

To search indices in Elasticsearch, you will be using the search function, which allows you to use the Elasticsearch Query DSL.

JAVASCRIPT

client.search({
  index: 'kibana_sample_data_ecommerce',
  body: {
    "query": {
      "match_all": {}
    },
    "size": 0
  }
})
.then(response => console.log(response))
.catch(error => console.log(error));

The search function receives at minimum an object with two properties: index and body. The former shows which index you would like to query, while the latter contains the instructions of your query. Afterwards, the function returns a promise for the results. Finally, the body property of the returned object contains the results of your query.

JAVASCRIPT

{ body: object | boolean,
  statusCode: number,
  headers: object,
  warnings: [string], 
  meta: object }

Endless possibilites

Querying Elasticsearch might only represent a fraction of what you might need to do. The client has an overwhelming 😱 amount of other APIs you might want to consider, such as for creating new indices, adding and removing documents, etc.

How To Use URL Parameters In React Router

Tue, 18 Jun 2019 00:00:00 GMT

When it comes to routing in any type of application, you will always come across two types: static and dynamic routing. Static routes are what most people are familiar with when they start out. These are predetermined routes such as /home or /about/history. On the other hand, your dynamic routes are determined as your app is rendering. This provides a number of advantages over static routing, which I will get into later on. Moreover, this tutorial will be specifically focusing on responsive routing, that is, how to use URL parameters in React Router.

New to React Router and need an introduction instead? Check out my article here to get started!

URL parameters explained

So what are URL or route parameters exactly? Well, let's imagine you are selling products on your website and each product has its own product page. How would go about programming this? Hard-code a product page for each product? Well, maybe if you have 1 or 2, but imagine you have 100 or more... that might not be the best idea. 😰

Rather, you should keep things DRY (Don't Repeat Yourself) and create a single product page that changes its displayed information depending on which product a user is currently looking at. And how would we do this? Well, with the use dynamic routing, i.e. responsive routing!

Responsive routing let's us use variables in our routes that can take on any kind string value. In our responsive route, we distinguish a route parameter or variable by placing : in front of it. For instance, the dynamic route /product/:id can now take the values /product/1 or /product/laptop_4. From these routes, we could then extract the product ID, retrieve any data related to that id from a database and consequently display it on our page.

On a side note: the end of a route parameter can be marked by a /. Thus, id would be valid parameter in /product/:id/price

Setting up responsive routes

Alright, it's time to code ladies and gents! 👩‍💻Below we have a small example of 2 routes with corresponding components. Nothing fancy here...

JSX

import React from 'react';
import { Route, NavLink } from 'react-router-dom';

function Product() {
  return (
    <div>This is our lovely product page!</div>
  );
}

function HomePage() {
  return (
    <div>Welcome to Chunk Bytes!</div>
  );
}

function App() {
  return (
    <div className="App">
      <header>
        <nav>
          <ul>
            <li><NavLink to="/">Home</NavLink></li>
            <li><NavLink to="/product">Product</NavLink></li>
          </ul>
        </nav> 
      </header>
      <div> 
        <Route exact path="/" component={HomePage} />
        <Route path="/product" component={Product} />
      </div>
    </div>
  );
}

export default App;

Let's make our product page a bit more dynamic with the following changes. First, let's add a parameter to our product route with path="/product/:id". Next, let's create two NavLinks, each pointing to two different products.

JSX

// Removing the regular product page
<li><NavLink to="/product">Product</NavLink></li>

// Adding two new NavLinks
<li><NavLink to="/product/laptop1">Laptop</NavLink></li>
<li><NavLink to="/product/car1">Car</NavLink></li>

With these simple steps, we already created a responsive route. Hooray! 😋 But of course, we're not done yet! 😤 Next, we need to extract our product IDs from the route, so our Product component knows which product information to retrieve and render. So how do we retrieve this information?

Retrieving URL parameter information

We all know that React components automatically receive a props parameter (I hope you do... 😳). This is also where we can find our route parameter value. Let's console.log our component's props and see what it has to offer.

Console Output Of Component Props

As we can see, props has several properties. However, there's one in particular that is of interest to us: match. This in turn has another property called params that actually contains the value we are looking for. Alright! So let's make some final changes to our code before we wrap things up.

JSX

function Product({ match }) {
  return (
    <div>
      This is our lovely product page!
      You are currently viewing {match.params.id}
    </div>
  );
}

Instead accessing our route parameter value with props.match.params.id, we can do some destructuring with { match }. You could even destructure a layer deeper to keep things simpler, e.g. { match: { params }}. Destructur-...ception? 🤨

A teeny-tiny gotcha

If you're rendering your component in a route using the render props, e.g. <Route path="/product/:id" render={() => <Product />} />, make sure to actually pass the props into your component as follows: render={(props) => <Product {...props} />} />. I've done this mistake myself 😬 and I've seen many others do it. If you don't, you will see errors such as TypeError: match.params.id is undefined.

An Introduction To React Router - Routing Basics

Tue, 04 Jun 2019 00:00:00 GMT

A nice perk of React being solely a library, as opposed to a complete JavaScript framework, is its learning curve. Unlike Angular, you aren't required to learn about a bunch of new concepts in order to use it. However, once your app starts growing in size, you'll soon realise that you need to import other functionalities from beyond the library itself. Naturally, this brings us to routing, particularly an introduction to React Router 4.

Routing in Single Page Applications

Before we start getting technical, let's first answer the question "What is routing?". However, if you're already familiar with this concept, feel free to skip ahead. 😉

In a traditional Multi Page Application (MPA) like Wikipedia, whenever you want to access another part of a website, you simply request a different HTML file from the backend server. You carry out this request through the address bar in your web browser. Imagine you want to access my Wikipedia page at https://en.wikipedia.org/wiki/dilshan-kelsen (doesn't exist... yet!). Accordingly, you would receive a rendered HTML file of that page which is then displayed in your browser.

But this isn't how Single Page Applications (SPA) work. Ohhhh no! I mean, how could they? You only have a single HTML file available from which the entire website is rendered. Instead, they way you navigate through a SPA is by swapping out components that are displayed on your screen. For example, imagine a HomePage component being swapped with an AboutUs component when clicking on About Us in the navigation bar. In a similar fashion as before, we tell our router what components we want to display by submitting information through the address bar. However, we actually never ⚠️ make a GET request to the server! Rather, we send this information to the router in our application.

Confused about Multi Page and Single Page Applications? Check out my article them to learn the difference!

React Router

As you might have guessed, React Router (RR) will act as the routing system of your React application. Doesn't take a genius to figure that out... 😬

Preparation and installation

I believe software development is best learnt through hands-on experience. Naturally, you can follow along using your own React project or you can simply create a new one with npx create-react-app <app-name>. And don't worry! npx is automatically equipped with npm 5.2 and higher, so you won't need to install anything else. Furthermore, you also want to have two or more components ready to fiddle with so we can practice some routing.

Following along with a newly created project? Here's some sample code that you can copy into your App.js file. Make sure to actually include these components into your App component with <HomePage /> and <AboutUs />.

JSX

// To include in App.js

function HomePage() {
  return (
    <div>Welcome to this fairly empty homepage!</div>
  );
}

function AboutUs() {
  return (
    <div>Howdy! This is the about page of the fairly empty website.</div>
  );
}

Furthermore, depending on the initial design of your Create React App, you may also want to activate your artistic abilities and change some CSS, such as the background colour and minimum height, in order to see your components. 👨‍🎨

Moving on! To actually install RR, you want to run the command line npm i react-router-dom. Next, we will focus on three main components: <BrowserRouter>, <Route> and <Link>. I will get into these next. 👇

BrowserRouter

RR has two main routers: BrowserRouter and HashRouter. You can imagine these as two separate systems for how your routing is managed. And which one should you use? Well, generally the former should be used for SPAs and the latter for MPAs in which you added a React application with routing functionality. This distinction is important since the routing of your backend server and that of RR can sometimes interfere with each other and cause some unexpected surprises.

For a better understanding of their differences, I recommend watching a YouTube video by RailCoding. Keep in mind that it contains an older version of React Router, so the names and code might look a bit different. However, the principle behind it remains very much the same. In this tutorial, I will be focusing on the former since most of you reading this will be developing SPAs (Right? 😅).

Now, in order for our application to make use of any routing functionality from RR, we need to wrap the entire application in a <BrowserRouter> tag. We can do this either in the index.js file...

JSX

// Don't forget to import BrowserRouter
import { BrowserRouter } from "react-router-dom";

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

...or the other alternative would be to use it inside our App component in App.js. The choice is yours!

JSX

// Don't forget to import BrowserRouter
import { BrowserRouter } from "react-router-dom";

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

It's time to decide, my friend...

Route

The next component we're looking at is <Route>. This is essentially where your desired component will be rendered according to what is specified in the address bar. Take the example below for instance.

JSX

// Don't forget to import Route
import { Route } from "react-router-dom";

<Route exact path="/" component={HomePage} /> // HomePage is rendered here
<Route path="/about" component={AboutUs} /> // AboutUs is rendered here

<HomePage /> // No longer needed
<AboutUs /> // No longer needed

Here, we specify two routes: / and /about. Whenever the first path is entered into the address bar, our <HomePage> component is rendered wherever the <Route> component is located. Similarly, when /about is entered, <AboutUs> is rendered. You may have also noticed that the first route has the attribute exact in it. Why's that? As the name implies, this is to make sure that RR renders the desired component only when the exact path is found in the address bar, rather than in a subset of the URL. For instance, if we were not to use it, even if we accessed <AboutUs> with /about, it would render <HomePage> as well since it found / in /about. Got it? 🧐

Now, technically you can place <Route> wherever you want in your application. However, it makes most sense to group them together as seen above.

Link

Alright, so we can access different components by typing different paths into the address bar. But as you probably learned in Web Development 101, no one navigates a website like that. Instead, we use internal links. And <Link> serves this purpose. Now, instead of passing an href, as we would to with an anchor tag, we pass in the props to with a path of our choice.

JSX

// Don't forget to import Link
import { Route, Link } from "react-router-dom";

<Link to="/">Home</Link>
<Link to="/about">About</Link>

In addition, we can also make use of <NavLink>. It acts pretty much the same as its other counterpart, except that it styles itself as “active” when its to prop matches the current location.

Handy tricks

Now, using what you've learned so far in this tutorial, you could last quite a while until you need to open up the documentation for further details. However, before I let you go, there are a two more handy tricks 🤓 that you might make use of when routing!

Redirecting users

You can redirect users on your site using the <Redirect> with a to props, as seen in <Link>. For instance, imagine a situation where a user clicks a button that triggers a function that in turn returns this component, thus redirecting the user.

Passing down props to children

Developers like to emphasise, oh so often, that your code should be DRY (Don't repeat yourself). Hence, the purpose of reusable components. Moreover, imagine reusing a component with slightly different props in various situations, i.e. depending which path you're on.

JSX

<Route path="/" render={() => <HomePage someProps={'Chunk Bytes'} />} />

How To Create A Plugin For Kibana

Tue, 28 May 2019 00:00:00 GMT

Since version 4.3 of Kibana, Elastic let's you create your own custom features through plugins. However, the company very much likes to point out that it's ELK stack is still rapidly evolving. As a result, you will need to verify and accordingly update your plugin's compatibility with each new version of Kibana. Alternatively, you could also just ignore any newer versions altogether and avoid that nuisance. 😂 Anyways... where was I? Ah yes!

Unfortunately, the rapid development cycles of these tools has led to a lack of proper documentation and outdated tutorials. Take Tim Roes' blog series Writing Kibana Plugins as an example, which is often cited as an excellent resource to Kibana plugin development. Since the series was posted, Elastic decided to slowly switch from AngularJS to ReactJS for development, essentially rendering them obsolete. 😢 Yet, a wise decision considering that AngularJS will only be supported until July 2021.

Note: AngularJS is different from Angular 2+. Check out my article to learn the difference.

In this tutorial, I'll be showing you how to create your very first Kibana plugin with ReactJS using version 7 or higher. However, while I haven't tried it myself, this tutorial should theoretically work for any version down to 6.3.

Installing Elasticsearch

So here I am talking about Kibana and then suddenly Elasticsearch pops up. What's the deal with that? 🤨

Well, if you aren't already aware of it, Kibana only runs on Elasticsearch. Unfortunately, there's no way around that. Now, how you install it can heavily depend on many things such as your OS, its version and whether you want to use any virtualisation tools like Docker or Kubernetes. So if in doubt, always consult the documentation for your preferred method.

If you're looking to install Elasticsearch 7.0 or above, you can safely follow the steps I'm about to show you, regardless of your OS. 👇

Download the latest version of Elasticsearch here as a .zip or .tar.gz
Extract the content from these files into a separate folder
Access this folder through your Terminal or PowerShell with cd </folder-location>
Once in the folder directory, launch Elasticsearch by running the command bin/elasticsearch

Et voilà! That's all there is to it. 🙃 To be 100% sure that it's actually working, you can simply access localhost:9200in your browser, after which you should get something like this:

TEXT

{
  "name" : "Chunk Bytes",
  "cluster_name" : "elasticsearch",
  "cluster_uuid" : "zJVzmZpkTdCCQurGqUol9Q",
  "version" : {
    "number" : "7.0.1",
    "build_flavor" : "default",
    "build_type" : "tar",
    "build_hash" : "e4efcb5",
    "build_date" : "2019-04-29T12:56:03.145736Z",
    "build_snapshot" : false,
    "lucene_version" : "8.0.0",
    "minimum_wire_compatibility_version" : "6.7.0",
    "minimum_index_compatibility_version" : "6.0.0-beta1"
  },
  "tagline" : "You Know, for Search"
}

Setting up the Kibana development environment

Downloading from Github

Alright, back to what you came for! This time we will be heading over to Kibana's Github page. Here you want to choose and download the same version as your copy of Elasticsearch which you can pick through the right git branch or tag. Elastic was so kind enough to create an illustration of the version compatibilities between ES and Kibana, as seen below. Ultimately, it's best to have the exact versions.

Version compatibility between ES and Kibana

Beware: The master branch does not represent the most recently released version, but rather an unreleased version under development.

Checking your NodeJS version

Moving on! 😃 Once you've cloned the git repository or downloaded it as a .zip, verify that you have the same NodeJS version installed as required by your Kibana project. You'll find the necessary version indicated in the .node-version or .nvmrc file. Likewise, run the command node -v to view your own installed version.

The most simple way to update your NodeJS version is to simply download and install the desired version from their website. However, if you find yourself needing to keep multiple NodeJS versions installed due to other projects, it's recommended that you use Node Version Manager to switch between them. There's a Linux/Mac version 🍏 and a Windows version that you can use.

Bootstrapping with Yarn

Before we move on, it's very important that your Kibana folder is named kibana and that's it! Not kibana-7.0.0 or something else. Simply kibana. If you fail to do this before you bootstrap, you won't be able to generate a plugin, as the plugin generator will be looking for a folder called kibana. Alright, let's continue...

Our next step is to bootstrap Kibana. For this we will need to use Yarn, so make sure you have it installed. You can easily verify this in your terminal or PowerShell with yarn -v. If this command fails, you don't have it installed and should get it right here.

Afterwards, you have to:

Initialise a git repository with git init in your project directory, and
Bootstrap Kibana with the command yarn kbn bootstrap

Didn't wait too long I hope?

And that's that! With all these steps, your Kibana development environment is ready to be used. Moreover, if you'd like to, you can already launch Kibana with yarn start or yarn start --oss for the open-source version. Make sure that Elasticsearch is running as well! However, this is not the one you will be working with.

Generating a plugin

Alright, the thing you've been looking for! It's time to create a Kibana plugin! 😋 Fortunately, we have the option to generate a base plugin rather than create one completely from scratch. Once again located in your Kibana project directory, run the command node scripts/generate_plugin <plugin-name> in your terminal. This should prompt you a few questions to which you can answer as you'd like to. However, make sure that you enter the right version of your Kibana project, otherwise you won't be able to launch it! 😱

Afterwards, the plugin generator will create another folder called kibana-extra next to your original Kibana folder, which contains all of your plugins. To launch it, go to kibana-extra/your-plugin and run yarn start or yarn start --oss to launch it in the open-source version.

Check your terminal for the exact address of your plugin, i.e. usually http://localhost:5603/ followed by 3 random letters. Lastly, you will be able to access your plugin on the sidebar and see something similar to this.

Your very first Kibana plugin!

Now, I won't show you how to actually program inside of your plugin since this is merely a ReactJS app, and that would beyond the scope of this tutorial. However, learning how to use the Elasticsearch API, the Elastic UI framework and Elastic Charts will prove to be indispensable tools in your plugin development.

How To Install Bootstrap 4 In Laravel 5.8 And Above

Tue, 21 May 2019 00:00:00 GMT

When you learn a new tool and find yourself in a new environment, even the simplest of tasks can seem very confusing to do. I found myself in that position not too long ago when I was tinkering with Laravel 5.8 and I wanted to make use of Bootstrap 4. A lack of proper documentation on how to access it, beside the usual "iT's aLReADy pRe-cOnFiguREd", made this whole process much harder than it should have been. But don't worry, I got you covered! I will show you how to install Bootstrap 4 in Laravel. I suffered for your convenience...🤣

In order to follow this tutorial, make sure you have a laravel project up and running. If not, you can easily create a new one with laravel new <project-name>.

Understanding Laravel

Hearing that Laravel comes already pre-configured with front-end tools like Vue.js and Bootstrap doesn't make you any wiser in how to access them. So naturally this begs the question as to how exactly Bootstrap is implemented in Laravel. The answer? Well, look no further than the resources folder. 👈 This folder contains all your uncompiled resources, such as your JavaScript, SCSS, images and views.

Resources folder in Laravel

Since Bootstrap is made up of both JS and CSS components, we will want to look into their respective subfolders in resources.

Examining the JavaScript

Oh look! There's a file called bootstrap.js. That must be what we're looking for, right? Well... yes and no! The name here is actually referring to the activity of bootstrapping rather than the UI library Bootstrap. That being said, this file bootstraps and configures any JS dependencies, whether it be Vue.js, jQuery or Bootstrap itself.

JAVASCRIPT

// bootstrap.js

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

Without getting into any details, we can see that popper.js and jquery, two Bootstrap dependencies, are being imported and assigned to variables. Afterwards, bootstrap itself is imported. Lastly, the file itself is imported into and accessed through the app.js file. 😯

In the end, when your application is launched from your server, all your JS is compiled into one single file in public/js/app.js. This is the script file you actually want to reference in your main HTML file with <script src="js/app.js"></script>.

Examining the Sass

In case you weren't aware of it, Bootstrap can be used with Sass, a preprocessor scripting language. Or in layman's terms, an extension of CSS. It's actually the recommended way over using regular CSS for a number of reasons. For example, it allow's you to easily and safely customise your Bootstrap components and import only the bare necessities rather than the entire library. But I digress... 😅

When we look at app.scss, we can see the entire Bootstrap Sass library being imported with @import '~bootstrap/scss/bootstrap'. Same as before, our Sass files are ultimately compiled down to regular CSS and can be found under public/css/app.css. This is the file you also want to reference in your HTML file with <link rel="stylesheet" href="css/app.css">.

Installing and running Bootstrap

Okay, wait! We haven't actually installed Bootstrap on our machine yet. We can do that simply by running npm install, as it's already listed in our package.json file. In Laravel, this file serves as the package manager for any front-end libraries and frameworks. On the other hand, back end tools are managed by Composer 🎼. You may also want to adjust the Bootstrap version that you will install, since it appears to default on version 4.0.0, at the time of this writing.

Alright, almost finished! The only thing left to do is to compile our front-end. Once again, php artisan ain't gonna help us here buddy. Instead, you want to run the command npm run watch. This will compile our front-end as well as recompile it on any changes.

It's time to get cracking with Bootstrap! 👩‍💻

Angular vs React vs Vue - A Framework Comparison

Tue, 30 Apr 2019 00:00:00 GMT

As a frontend developer, you've undoubtedly heard of the big three: Angular, React and Vue. These days, it's hard to come across a project that doesn't use one of them. As per usual, the developer is plagued with the decision of choosing one over the other. Particularly as a beginner, this can be a daunting task. But don't fret my friend! You'll no longer be pulling your hair out over this topic. 🤯 In this article, I'll be giving you a comprehensive comparison between all three frameworks so that you can finally make that decision of yours.

To be clear, this article provides a birds-eye analysis of their current state in 2019 rather than a detailed technical comparison. Furthermore, I’ll be covering the topics listed below. Feel free to click on any of them to skip ahead!

Introduction
Popularity
Job Demand
Technical Features
Future Prospects

Introduction

I'm assuming you have little to no knowledge on the frameworks I'm discussing here. So how about I introduce them to you first? Keep in mind that they are all open-source. 😋

Angular

Arguably the grand daddy of modern JS frameworks. Well, not exactly... Long story short: In 2009, Google released the first full-fledged framework for creating Single Page Applications called AngularJS or Angular 1. However, due to some imperfections, Google decided to completely rewrite the framework into what's now called Angular 2, or simply Angular. You can find a more in-depth introduction to Angular 👉 right here.

React

In the past, Facebook struggled to maintain their social media platform. Their solution? React! Released in 2013, it's technically a library and several other external libraries are needed to turn it into an MVC framework. Moreover, unlike Angular, React is a relatively unopinionated framework as it provides you with a lot of flexibility in how you do things. Well... that's quite frankly a defining feature of a library. 😆

Vue

Once upon a time, a Chinese Google employee worked with AngularJS and decided he could do better. 😤 Well, he actually thought the framework was a bit too heavy-handed and opinionated. In his own words: "What if I could just extract the part that I really liked about Angular and build something really lightweight without all the extra concepts involved?" And thus Vue.js was born! In many ways, Vue is very similar to React and is therefore often seen as a direct competitor.

Popularity

Now, popularity isn't necessarily the best indicator for quality. However, it does give you a fair indication of which tools developers enjoy working with. One metric that is often taken into consideration are GitHub stars.

GitHub stars

As found on star-history.t9t.io

As you can see in the figure above, Vue and React narrowly rank 1st and 2nd, respectively. At a distant 3rd we have Angular. Based on this figure, you might have the impression that Angular is falling behind and that Vue is the next hot framework we should be looking at, right? Well, we need some more data to confirm our suspicion as simple GitHub stars own their own aren't as reliable.

Npm downloads

Let's turn towards npm downloads instead. This should give us a far better indication of each framework's popularity.

As found on npmtrends.com

Surprisingly, here we get a different result. Over the past 2 years, React appears to have clearly cemented its existing lead, with Angular and Vue trailing far behind as 2nd and 3rd, respectively. Alright, this isn't really making things clearer for us. There's only one thing that can help us: more data! 😉

Website statistics

This time, we're taking a look at site visits using alexa.com. It should go without saying that these numbers below are only estimates. Nonetheless, they should be fairly reliable.

Oh, what the fuck now! 🙄 This part is showing the exact inverse of what we stated previously. Among themselves, Vue is ranked 1st, Angular 2nd and React 3rd. However, looking a little deeper into the stats, it appears that Vue's largest audience originates from China, making up a whopping 47% of their traffic. Conversely, India and the US represent Angular and React's largest audience, respectively. They are both hovering around 27%.

Subreddit community

What can we conclude so far about this section? Well, that's difficult to say... Let's take a quick look at more data! 😅 This time I'm looking at their subreddits in order to gauge the size of their international communities. This is what I've found:

React - 106.000 subscribers
Angular - 31.500 subscribers
Vue - 24.000 subscribers

Hmmm... so here we are seeing a similar pattern to that of npm downloads. React clearly has the lead, with Angular and Vue ranking as 2nd and 3rd, respectively. Honestly, I could keep going on showing more data, but we got to stop somewhere, right?

Taking everything into consideration, it would appear that React is the most popular framework by far with Angular at a distant 2nd. Unfortunately, Vue's popularity is particularly hard to guess and appears to be deflated since the Chinese community doesn't have access to the same resources as we do, due to its infamous Great Firewall. Alas, what you take away from these numbers is up to you. I'm just the messenger. 😜

Job Demand

Regular Jobs

Now, this topic is a tad harder to scrutinise since it heavily depends on where you actually live. However, I don't want to leave it at that. Instead, I've decided to analyse and contrast the two largest English speaking labor markets in the world: India and the United States. For this task, I'll be using indeed.com.

The results below were obtained by including 'developer' as a keyword in the search term. This way, we are sure to exclude other unrelated job postings. Might seem obvious, but this is something a popular Medium article neglected to do in their research, leading to highly skewed results in favour of React. Keep in mind, it's also impossible to prevent any AngularJS job postings from creeping in. Thus, it's best to adjust the numbers downwards accordingly.

Okay, it's not actually that high...

On the left we have 'Murica 🇺🇸 and on the right India 🇮🇳. In the US, both React and Angular are in high demand, representing 49% and 45% of all job postings, respectively. Unfortunately, Vue developers get the short end of the stick and are limited to only 6% of the jobs, i.e. 1,750 open positions (Not nothing, if you ask me! 😉). In India, we see a similar story: Vue developers only have a small pool of jobs available to themselves, while Angular and React enjoy plenty. However, it appears that Indian companies are more in favour of Angular than React.

Types of companies

While we're at it, I'd like to briefly clarify in which types of companies these frameworks are used. Technically, all frameworks can be used in large enterprise-scale applications, and they are indeed used for them. For example, Google with Angular, Facebook with React and Alibaba with Vue. However, when you look at the job market, you'll notice a pattern. Angular is almost entirely used in large companies (which it is primarily intended for), while Vue and React are mainly used in small to medium sized companies, particularly in startups.

As I said though, it all depends on your location. Whatever you choose depends, more often than not, on what is used in the area you want to work in.

Freelancing

However, regular jobs are only one part of the equation mon ami 🧐. Mind you, we also got freelancing! Since freelancing gigs are mainly online, this should perhaps be more representative regardless of your location (for English speakers that is!). For this task, I'll be checking out upwork.com and freelancer.com.

On Upwork, React is King. On the other hand, while it does indeed occupy the largest percentage on Freelancer, it's nearly not as dominant as on Upwork. Keep in mind that Upwork is much larger than Freelancer with over 1,400 listed React jobs compared to only 159. Furthermore, Vue appears to be faring much better than before. Unfortunately, this means that Angular is the biggest loser here. 😞 Yet, considering that you mainly freelance for SME, it would make sense that Angular isn't particularly popular here.

Technical Features

So we talked about which framework developers enjoy, which one company's want, but what about you? What do you think about them? Well, in this section I'll be giving a quick technical overview of each framework so you can answer that question for yourself.

Angular

TypeScript - Angular uses TypeScript, a superset of JavaScript that gives you optional static typing. It allows you to spot common errors as you type them and is a boon for maintainability in very large projects. Programmers coming from OOP languages will feel quite familiar with it.
Component-based Architecture - All three frameworks, including Angular, use components to build their application. A component is a visual part of your screen, such as a shopping cart 🛒. It can receive input, which generates some type of change, typically in the UI. In Angular, the logic behind a component and its visuals are kept separate, that is, the JavaScript and HTML.
Size - Angular's file size is the largest out of all the other frameworks with 566KB. Yet, unlike the others, it's a complete solution from the get-go.
Steep Learning Curve - Angular is particularly hard to learn for many reasons. 😫 First off, you have to learn TypeScript and there's no way around it. You are confronted with many new concepts and tools, such as modules, services, templates, RxJS, etc. Moreover, it's quite verbose and solely aimed at creating enterprise-scale web apps, thus confronting you with the MVC pattern right from the start.

React

JSX – I told you before that Angular likes to keep the visual and logic of a component separate. However, React likes to mingle it together. The entire app is practically written in JavaScript. To do this you use JSX, which is a syntax extension to JavaScript that allows you to write things like this: const element = <h1>Hello, world!</h1>;. And no, that isn't HTML. It's JSX. Oh, and you can also use TypeScript if you feel the need to!
Virtual DOM - React uses something called a virtual DOM. In layman terms, React keeps a lightweight copy of the DOM that it modifies as needed. Upon each modification, it checks for any differences between the virtual and real DOM and updates only these differences in the latter. This allows for an increase in performance.
Size - As opposed to Angular, React is only 97.5KB large. However, this is due to Facebook keeping the library bare-bones. Accordingly, in order to create a proper web application following a MVC pattern, you will need to import third-party libraries such as React router and Redux. On the other hand, unlike Angular, the framework isn't restricted to SPAs and can simply be added to an existing website to increase interactivity.
Moderate Learning Curve - The library itself does not have such a steep learning curve. JSX, while not fancied by all developers, isn't particularly hard to learn either. However, once you want to start building actual web applications, it can get a bit harder to learn. In particular, state management with Redux is known to be quite difficult to grasp.

Vue

Virtual DOM - Same as React, Vue uses a virtual DOM to manage and update visual changes in its application.
TypeScript - Vue offers developers the option to use TypeScript. However, unlike Angular, it doesn't have complete support yet. Fortunately, Vue is set to fully support TS in the future with its third iteration.
Size - Similarly to React, Vue is quite small compared to Angular with 58.8KB, as its core library only provides the bare 🐻 necessities. However, same as React, you can easily drop it into any existing website and you will have to import additional libraries to create a full-fledged Single Page Application.
Separation of Concerns - Unlike React, Vue does not mix the UI and logic of a component. Rather it keeps them separate, like Angular, yet does so in a more compact way, resulting in far fewer files for each component.
Easy to Moderate Learning Curve - Regarding the learning curve, it's very similar to React. However, it's arguably easier to learn due to its separation of concerns and its less convoluted state management library, Vuex.

Future Prospects

Before I let you go, it's important we talk about each framework's future potential. I mean, would you start using any rinky dink framework you come across for an application, especially for an enterprise? Of course not! There needs to be ongoing support for anyone to actually even consider using it.

Google has announced that it will keep supporting Angular for the foreseeable future. Particularly, after the fiasco of rewriting AngularJS without consideration of its user base, Google has pledged to do twice-a-year upgrades and that each version be backward-compatible with prior releases. So if you decide to use Angular, rest assured that in several years, it will still be actively supported. Likewise, Facebook has pledged to support React for many years to come. So there shouldn't be much of a problem here, right? What isn't safer than a multibillion dollar company supporting your favourite framework?

The problem of a framework's future becomes more apparent when we look at Vue. It's the brainchild of one individual: Evan You. What happens if he dies or suddenly abandons the project? Those are real concerns. However, if that were to happen the framework would still persist as there's an entire team behind the framework now. Yet, with its creator no longer in charge of it's long term vision, it's hard to say how much and how long it will stick to that vision.

Want to make a bet? 😏

A Beginner Introduction To Angular (2+) - An Overview

Tue, 16 Apr 2019 00:00:00 GMT

I've recently decided to pick up Angular 7, a JavaScript framework, as the company I'm working at is using it in its stack. It packs quite the punch in terms of its capabilities and can be quite overwhelming for many newcomers. I thought I'd share my view on how Angular operates and hopefully ease your way into the framework. 😉

AngularJS vs Angular (2+)

No discussion on Angular is complete without the conundrum that is AngularJS and Angular. In case you aren't aware of it or just confused about what's going, here's the gist of it.

Back in 2009, Google released AngularJS, arguably the world's first framework for creating Single Page Applications. Needless to say, it became quite the hit, even to this day. Yet, due to its imperfections, Google decided to rewrite the framework from scratch, and released it in 2016 under the name Angular (version 2). As you might have guessed, many invested companies and individuals didn't take this decision too lightly. Accordingly, Google will still support AngularJS till July 1st, 2021.

Whenever anyone talks about AngularJS or Angular 1, they are referring to the initial framework released in 2009. On the other hand, Angular 2 (or 7 at the time of this writing) is used to refer to rewritten one. However, don't be fooled! Despite the name, these are two completely different frameworks. Knowing one doesn't make you proficient in the other. Unfortunately, this confusion has also carried over into question and answer site where it can become difficult at times to differentiate between both frameworks. 😫

Tip: Search on google with `-angularjs` option to omit the search results with the 1.x version
@RisingStack

Oh! And in contrast to AngularJS, Angular 2+ implements Typescript into its projects, which is a superset of Javascript. Another way of saying Javascript with extra features. 🤓

Angular CLI

An indispensable tool for any Angular developer is the Angular CLI. It's a command-line interface tool that will automate many operations of the development process. Among others, this includes things ranging from routing, building components, configuring, deploying, testing and installing 3rd party libraries such as Bootstrap.

As found on https://cli.angular.io/

Here's a basic overview of the most common commands you're likely to use during your Angular development:

ng version; Indicates Angular CLI version.
ng help; Outputs available commands with short descriptions. Moreover, you can inspect any command in detail by following it with --help, e.g. ng build --help
ng new <name>; Creates a new Angular app
ng generate <schematic>; Generates files based on the specified schematic, which ranges from interface and component to module
ng build; Outputs the compiled app into a directory called dist
ng serve; Builds and serves the app, including rebuilding upon any file changes
ng lint; Executes linting tools on the app code
ng test; Runs unit tests in the project.

Furthermore, you can usually abbreviate each command (including schematics) by their first letter or two, e.g. ng h and ng g c ComponentName. Of course, you should check out the documentation for more details, particularly regarding the many options that follow each command. 🧐

Project structure

Compared to other libraries and frameworks such as React and Vue.js, Angular is known to be quite opinionated, that is, you need to do things the Angular way. Naturally, your project structure isn't an exception. Below are screenshots of an Angular project created with the Angular CLI, ranging from highest (leftmost) to the lowest (rightmost) directory level.

Angular Folder Structure

Don't be frightened by the number of files. You won't touch the vast majority of them during your app development. In fact, you'll be spending most of your time in the src/app directory, working on components, modules, services, etc. However, it doesn't hurt to do a quick rundown of some Angular specific files and folders, right? 🤷‍♂️ So, starting from left to right on the screenshots above:

Level 1

e2e/; End-to-end testing folder
angular.json; CLI configuration for all projects in the workspace
tsconfig.json; TypeScript configuration for apps in the workspace
tslint.json; TypeScript linting configuration for apps in the workspace

Level 2

app/; Contains the app's logic and data, e.g. components, services, etc.
assets/; Holds your app's assets such as image and CSS files
environments/; Contains configurations for your build and development environments
browserlist; Used by autoprefixers to adjust CSS browser support
index.html; The main HTML page that is served by your site
karma.conf.js; A test runner used in Angular
main.ts; The main entry point for your app during compilation
polyfills.ts; Provides polyfill scripts for browser support
test.ts; The main entry point for your unit tests
tsconfig.app.json & tsconfig.spec.json; Inherit from the workspace-wide tsconfig.json file
tslint.json; Inherits from the workspace-wide tslint.json file

As I've mentioned before, you won't have to deal with most of these files and folders until your application reaches a certain level of complexity. Rather, and particularly as a beginner, you will mainly focus on the src/app directory, which I'm about to get into. 👇

Application architecture

So how is an Angular app structured? Let's take a look at the image below.

Components, Services and Modules relation. Source: Dan Wahlin

Any Single Page Application is made up of components, whether it be a menu bar, header, buttons or a grid. However, components represent the UI of your webpage. On the other hand, Angular has services which represent the business logic of your app. This includes anything from form validation to API requests. Furthermore, these can be reused throughout your application in your components. Lastly, Angular uses modules to organise and register these components and services according to their functionality.

However, this is a very superficial explanation of what's going on. So let's dive in a bit deeper and take a look at the next image! 🏊‍♂️

Angular Application Architecture. Source: Dan Wahlin

Every Angular application contains at least one module, with each module corresponding to a feature of your app. Tied to these modules are your routes, which switches your components on your page depending on the URL the user is on. Moreover, components are made up of an HTML Template and TypeScript Code. The former can contain directives, Angular specific HTML attributes that provide additional functionality, and other components in your application. The latter, on the other hand, delegates any business logic to services and calls upon them when needed.

Wrapping things up

Naturally, this article is only meant to give you a simple overview of Angular and only represents the tip of the iceberg. For more details on what I've covered, you should definitely check out the documentation.

Understanding The Nuxt.js Folder Structure - The Basics

Tue, 09 Apr 2019 00:00:00 GMT

Building a Vue app is fun, right? And it just got better with Nuxt.js, which is a another framework for Vue.js (frameworkception?! 🤭). Its main purpose is to create a more streamlined development process. It's particularly powerful for creating a universal, static generated or single page application. In case you aren't familiar with these first two types of applications, I cover them in a separate article, including on how to implement them using Nuxt.js..., but I digress. 😅

The team behind the framework created a fantastic scaffolding tool you can initiate with $ npx create-nuxt-app <project-name>. And guess what! It automatically ships with NPM 5.2.0 and above. No installation needed!

After you generate your Nuxt project, you are greeted with the following folder structure below. I'll briefly cover all the main directories, with a focus on a select few. However, the .nuxt directory contains the compiled output of your application and isn't of particular relevance to us.

Nuxt.js Folder Structure

In case you are only interested in certain directories, I've got you covered my friend. Here's a list of the sections:

Assets
Static
Pages
Middleware
Components
Layouts
Plugins
Store
Nuxt Configuration File

Assets

The assets folder, as the name implies, holds your un-compiled assets, such as JavaScript, SCSS files and images. Nuxt.js uses webpack to process and serve these assets.

Static

On the other hand, if you don't want dirty webpack to process your precious assets, you can place them in the static folder. In your files, you can reference these assets with / as they are served by Nuxt from your root folder. For instance, you can access an image with /image.png instead of /static/image.png.

Pages

Arguably one of the most important directories in your project, as it automatically creates a route for any .vue file placed in it. In the image above, both files index.vue and inspire.vue would have their own routes set up. Baam, that's it! Nuxt takes care of that pesky vue-router configuration for you. 😏

To create a dynamic route, you simply need to create a .vue file or a directory prefixed by an underscore. Take a look at this example below.

TEXT

pages/
  index.vue
  _slug/
    index.vue
    comments.vue
  users/
    _id.vue

This directory structure would essentially create four different paths: /, /:slug, /:slug/comments and /users/:id.

Middleware

While we're on the topic of routing, let's talk about the middleware folder. It basically contains custom JavaScript functions that run right before a page or group of pages, i.e. a layout, is rendered. For example, imagine you want to check whether a user has the right credentials to access a page. In this case, you might have a file named middleware/auth.js containing the code below.

JAVASCRIPT

export default function({ store }) {
  // some code to check user authentication
}

However, simply placing a custom function in the middleware directory won't do any good. We also have to let Nuxt.js know where we want to apply it, that is, on all pages or a select few. Regarding the former, we would have to access our nuxt.config.js file and add the following:

JAVASCRIPT

export default {
  router: {
    middleware: 'auth'
  }
}

However, if you'd like to do the latter instead, that is, apply the middleware to select few pages and layouts, you do it as such:

JAVASCRIPT

export default {
  middleware: 'auth'
}

Components

As you might've guessed from its name, the components directory simply contains your single file Vue components. Not really much else to say here... 😬

Layouts

Assume you've got a navigation bar and a footer. How would you display them in all your web pages? Perhaps import them into each .vue file in your pages directory? Well... as you can imagine, that would be quite cumbersome and inefficient. And that's exactly what the layouts directory is for. Layouts allow you to easily change the look and feel of your web page.

Each Nuxt generated project has a default.vue file in the layouts folder, with the following minimum template structure:

HTML

<template>
  <nuxt/>
</template>

The </nuxt> component is very important as it displays page components, i.e. your .vue files from the pages folders.

Of course, you can also create your own custom layouts, including an error page. Consequently, we tell certain pages (e.g. pages/post.vue) to use a custom layout (e.g. layouts/blog.vue) by including the following code:

HTML

<template>
  <!-- Your template -->
</template>

<script>
export default {
  layout: 'blog'
  // page component definitions
}
</script>

Plugins

In any regular Vue project, you can globally register Vue libraries in the main.js file. However, this file doesn't exist in your Nuxt.js application and as such this responsibility falls on the plugins directory. As an example, let's take a look at the Vue plugin vue-notifications, which allows you to display notification in your application. After installing it via npm, you create the file plugins/vue-notifications.js containing the code below.

JAVASCRIPT

import Vue from 'vue'
import VueNotifications from 'vue-notifications'

Vue.use(VueNotifications)

Nothing strange so far, right? 😋Afterwards, we have to inform Nuxt.js that we would like to use this plugin, by editing the nuxt.config.js file. The ~ has the same function as an @, meaning it refers to the root folder.

JAVASCRIPT

export default {
  plugins: ['~/plugins/vue-notifications']
}

Et voilà! That's it! Usually, the documentation of any Vue plugin will layout these steps in detail, so you should be just fine. 😁

Store

One topic we haven't touched on yet is the application state. For this task, Nuxt.js implements Vuex in its core. At the time of this writing, Nuxt let's you chose between two store modes: classic and modules.

With the former, you simply create a store/index.js file in which you specify all your actions, mutations, etc. However, it's been marked as deprecated and will most likely be removed in future releases. Therefore, it's recommended to use the latter, in which you have multiple JavaScript files corresponding to different, automatically, namespaced modules.

If you'd like to understand in detail how to use the store directory, Todd Baur from ITNEXT has a great article on Medium explaining

Nuxt Configuration File

While not a folder, the nuxt.config.js file constitutes an important piece of your project. Without it, things just won't work the way you expect them to. However, diving into the configuration file goes beyond the scope of this article. It includes other configurations beyond the discussed directories, such as the mode and meta tags of your application.

However, this article is meant to give you an introduction to the folder structure of Nuxt.js and only covers the tip of the iceberg. I highly recommend that you check out their great documentation for further details.

Server Side Rendering And Pre-Rendering With Nuxt.js

Tue, 02 Apr 2019 00:00:00 GMT

In my previous article titled Single Page Applications vs. Multi Page Applications, I discussed the tradeoffs using each type of application. One major drawback to using SPAs is that they aren't particularly Search Engine Optimisation (SEO) friendly. This makes it hard for search engines such as Google to index them. Fortunately, two methods have been developed to address this issue: Server Side Rendering (SSR) and pre-rendering. In this tutorial, I'll give an overview of what each method has to offer and how you can implement them in your Vue.js app with Nuxt.js. 💁‍♂️

SSR and pre-rendering explained

While both methods address the issue of SEO, they both differ in many ways beyond that.

Pre-rendering

If you are solely interested in improving SEO for your SPA, then pre-rendering is the way to go. Sometimes it's also referred to as static site generation, and you're about to see why. The most fundamental difference between pre-rendering and SSR is that the former does not require any server whatsoever. Instead of being rendered on a server and then served to a client, static HTML files are generated for SPA components/routes of your choice when you build your project.

For instance, imagine you want to pre-render your home.vue and about.vue components. As a result, you will receive two static HTML files full of content named home.html and about.html, which will enable a web crawler to index your site. Afterwards, you can host these static files on a free hosting website like Github or Netlify.

Besides making your website more SEO friendly, pre-rendering also speeds up your initial load time and gets rid of any accompanying UI flickering (unless you were already using Nuxt.js 😜). However, the more routes you'd like to pre-render, the longer your project's build time is going to be.

Server Side Rendering

SSR is like pre-rendering, but more... and is quite often considered an overkill as it isn't easy to implement. So what advantages does this more include? Well, the most distinguishing feature of SSR, the server, is also its greatest asset. Namely, the server can re-render the application anytime and on the fly.

But in which cases is this useful? 🤔 Well, if you expect the content of your application to undergo a lot of changes after deployment, e.g. due to user generated content such as blog posts, SSR is undoubtedly the way to go my friend! On the other hand, you need to go through the process of setting up a server. Furthermore, it needs to be powerful enough to handle the processing, especially under high traffic. Add to this considerably more development time than if you were to simply implement a pre-rendering solution.

Lastly, server side rendered SPAs can also be referred to as "isomorphic" or "universal" apps since the majority of the app's code runs on both the server and the client.

Using Nuxt.js

Whether you're new to or experienced with Vue SPA development, if you haven't tried out Nuxt.js yet, you should consider doing so. It's a Vue.js framework that abstracts away quite a bit of complexity, including our two favourite topics: SSR and pre-rendering 🤓. Naturally, this will make our development experience much more enjoyable.

Pre-rendering

So how do we pre-render a SPA with Nuxt.js? To start off, let's first take a look below at a folder structure from an example project. In this SPA we've got two routes in the pages folder: index.vue and inspire.vue.

Nuxt.js Folder Structure

How would we go about pre-rendering these two routes? Amazingly, Nuxt.js automatically takes care of this task for static routes! By simply running the command npm run generate, we output the rendered HTML files in a dist folder as seen below. Nuxt also takes care of any asynchronous data for us during the static page generation. 😍

TEXT

// dist folder
index.html
inspire/
  index.html

However, for dynamic routes such as pages/users/_id/index.vue, we will have to inform Nuxt.js how to render these routes since it won't know what the value of _id is. To address this issue, we have to turn towards the nuxt.config.js file and add a generate property.

JAVASCRIPT

generate: {
  routes: function () {
    return [
      '/users/1',
      '/users/2'
    ]
  }
}

The code above tells Nuxt that it should generate two HTML pages with the _id 1 and 2. Pretty easy, right? But we're not done yet...

The issue with this solution is that you need to know all of your dynamic routes upfront. This can be difficult and quite a tedious task. Fortunately, we can fetch data, like user IDs, from a database and indicate our desired routes dynamically. In order to do this, we would have to change our previous chunk of code to something like this:

JAVASCRIPT

generate: {
  routes: function () {
    return fetch('http://chunkbytes.com/userlist')
      .then((res) => {
        return res.data.map((user) => {
          return {
            route: '/users/' + user.id
          }
        })
      })
  }
}

For more information on what the generate property has to offer, why not check out Nuxt's documentation?

Server Side Rendering

In order to enable SSR in your application, we need to head to our beloved nuxt.config.js file again and make sure that the mode property is set to universal. This tells Nuxt it should create an isomorphic application, i.e. execute SSR and Client Side Rendering. If the mode property isn't declared, it automatically defaults to universal. And that's all there is to it! Yes, I'm serious... 😅

To see your application in action, all that's left to do is build it with npm run build and launch it with npm run start.

Final thoughts

Nuxt.js is a powerful tool to easily enable SSR and pre-rendering. Yet, the ease of setting these features up should not stop you from thinking twice about whether you truly need them, in particular SSR. However, Nuxt provides a number of other powerful features that should definitely not be overlooked and should be worth your time and consideration.

Single Page Applications vs. Multi Page Applications

Tue, 26 Mar 2019 00:00:00 GMT

Single Page Applications (SPAs) are the hottest new craze in web development and they are increasingly replacing the traditional Multi Page Application (MPA). As a developer, you might be compelled to learn the latest and greatest JavaScript frameworks to stay on top of these new developments. But before you blow your brains out from information overload 🤪, how about we take a step back and see what it really has to offer…

Multi Page Applications

Since the internet's infancy, websites have existed as MPAs. But what exactly do we mean by that? Let's take a look at the image below.

Request-Response Cycle. Source: Ryan Kulp

Imagine we have a client, on the left hand side, making a request to a server at a certain domain (e.g. dilshankelsen.com). As a response, the server sends back a rendered HTML file along with other resources such as images and a CSS file. Each time you want to access a separate page (i.e. subdomain) on that website, you need to fetch a new HTML file with resources from the corresponding server. This is the defining feature that gives it the name "Multi Page".

However, there's one other important aspect of MPAs: server side rendering. In fact, you may have heard about the debate between Server Side Rendering (SSR) vs Client Side Rendering (CSR), which is essentially the one we're talking about right now, with CSR being synonymous for SPAs. But I digress... 😄 As I was saying, ahem, SSR is an important element of MPAs as the HTML is rendered (meaning it isn't bare bone and has content) by the server before being sent out to the client and consequently read by its browser.

Single Page Applications

On the other hand, SPAs are pretty much the exact opposite of what an MPA embodies. Rather than navigating through a site with multiple request messages, the client initially downloads the entire website at once from a single un-rendered HTML file. Naturally, this method has its drawbacks as we will discuss later.

I would also like to emphasise here that the website is not rendered on the server, but on the client's browser through JavaScript! ☝️ Hence, the name CSR. Generally, you'll use a JS framework or library such as Vue.js or React to do this work for you. However, keep in mind that the website cannot be rendered until ALL the JavaScript has been downloaded from the server.

Noticing the differences

So how do you spot the difference between these two types of applications? There are a few ways of noticing whether you're using a SPA or a MPA, but the easiest and most obvious one are page loads. Let's give it a try, shall we? 😉

Angular.io is a perfect example of a SPA and bbc.com of a MPA. If you try browsing a bit on each website, you'll notice the former is much faster and smoother without any page loads and feels very much like a desktop application. On the other hand, whenever you click on any internal link on BBC's website, your browser has to download an entirely new page from its web server.

Another simple, yet subtle way to discover the type of a web application is to inspect its source code. To access it on a Google Chrome browser, right click the website of your choice and select "View Page Source". The process should be quite similar in other browsers. Let's give it a try with our two previous website examples, shall we? 🤓

BBC.com

Bbc.com Page Source

My lord! 🤭 BBC has over 2000 lines of code on their homepage alone! Basically what you see here is a server side rendered HTML file that contains plenty of text and JavaScript. Although, on my screenshot you can only see JS...

Angular.io

Angular.io Page Source

Wait a minute, only 110 lines of code?! That pales in comparison to our previous example. Furthermore, if you ignore the content outside of the body tags, which are primarily Google Analytics code and asset links, you'll notice that there's almost little to no relevant code. How come? Because what we're seeing here is an un-rendered HTML file. If you want to view the client side rendered version, simply "Inspect" the page in your browser.

Advantages and Disadvantages

Probably the section you've been waiting for! I hope you didn't skip the rest. 😤 It should be fairly obvious that none of these applications dominates over the other. Rather, they each have their own strengths and weaknesses. So in which situations should you use them? Let's begin with MPAs.

Multi Page Applications

Strengths

Search Engine Optimisation: Arguably the greatest benefit that MPAs provide is compatibility with SEO. Search engines, such as Google and Bing, can easily request, crawl and index a rendered HTML file that is already filled with content. This dominant strength makes MPAs a perfect candidate for static and text heavy websites like news sites and blogs.
Maturity: As MPAs have existed since the dawn of civil-, I mean the internet, developers have access to more mature and established frameworks, solutions and best practices.
Faster Initial Page Load: As previously mentioned, SPAs require you to download the entire website at once and render it on your browser. However, with MPAs you only load what you need, which has already been rendered by the server.

Weaknesses

Slower and Frequent Page Loads: A downside of MPAs is the need to frequently load other pages as you browse through a website. Moreover, compared to a SPA, you'll definitely notice a difference in speed.
Server Side Intensive: Since all your content is rendered on and served to the client by the server, you need to make sure that it can handle any load, especially during high traffic. Simultaneously, SSR leads to a tightly coupled backend and frontend.
Less Interactivity: While JavaScript can be used to add some interactivity to MPAs, your ability to do so fairly limited compared to SPAs.

Single Page Applications

Strengths

Highly Reactive: Unlike MPAs, SPAs are very fast and highly reactive to user input, only needing to re-render certain parts of a website. Consequently, it feels very much like a desktop application.
Decoupled Front End: SPAs are backend agnostic, meaning they do not depend in any shape or form on the server. They can be easily attached to any backend server with the appropriate API. In turn, this makes it easier to develop SPAs as well, particularly if there is a lack of server side code.
Easier Debugging: In relation to the previous point, a decoupled front end makes it easier to debug your web application with frameworks such as React and Vue.js as they have their own debugging tools.

Weaknesses

Search Engine Optimisation: Unfortunately, as HTML files for SPAs are not server side rendered, search engines have a hard time indexing these sites; think back to the angular.io website example. Fortunately, Google has been getting better at scraping through JavaScript in SPAs. Likewise, SPAs have come up with a few minor solutions of their own to mitigate this issue. Yet, for the foreseeable future, MPAs are king in SEO.
JavaScript Dependent: Guess what? If a client's browser doesn't have JavaScript enabled, you're sorta screwed...
Client Side Intensive: With the website rendered on the client side, it should go without saying that SPAs can be resource intensive on browsers. Naturally, this restricts their usage to relatively newer versions.

The choice is yours

So what shall it be? A MPA or a SPA? Whatever you choose, it's important to keep the purpose of your website in mind. Are you trying to build a desktop like application similar to Twitter, Slack or Gmail that doesn't require much SEO? Perhaps a SPA is what you're looking for. However, if you're simply looking to build a static and/or text heavy website such as a blog or simple restaurant page, then a MPA might be the way to go.

Actually, why not combine the two if necessary? In fact, while angular.io itself is a SPA, it has a blog section that is a MPA. The best (and worst) of both worlds? 😜

Vue.js Form Validation With Vuelidate - An Introduction

Tue, 19 Mar 2019 00:00:00 GMT

Form Validation is one of those icky subjects that doesn't tickle my fancy and I'm quite certain many others feel the same way. While Vue.js enables you to implement form validation on your own, it can quickly become a hot mess the more fields and the more complex your validations become. But don't worry! Vuelidate is a great lightweight library that's going to make our task so much easier and more enjoyable. In this tutorial, I'll be giving you an introduction to Vue.js form validation with Vuelidate. So let's get started, shall we? 🤞

Installation

You can install Vuelidate in your project by running one of the following commands:

BASH

$ yarn add vuelidate

$ npm install vuelidate --save

After installing it via your package manager, you'll need to register the plugin in your main.js file.

JAVASCRIPT

import Vue from 'vue';
import Vuelidate from 'vuelidate';
import App from 'App.vue';

Vue.use(Vuelidate);

new Vue({
  el: '#app',
  render: h => h(App)
});

Adding Validation

So how does Vuelidate work? Let's start with a simple example below.

HTML

<template>
  <form @submit.prevent="onSubmit">
    <div>
      <label for="email">Email </label>
      <input type="text" id="email" v-model="emailField">
    </div>
    <button type="submit">Submit</button>
  </form>
</template>

<script>
export default {
  name: "HelloWorld",
  data() {
    return {
      emailField: ""
    };
  }
};
</script>

Above we've got a simple form with a single field in which you can enter your email. Note the two-way binding with emailField . Now, let's imagine we want the text input to be a valid email address as well as a requirement. How would we do this with Vuelidate?

Built-in Validators

Vuelidate has a number of built-in validators which we can easily implement into our form. However, to do so we will need to import these validators into our component. In particular, to complete our task we will want to import the validators required and email.

HTML

<script>
// New code
import { required, email } from 'vuelidate/lib/validators';

export default {
  name: "HelloWorld",
  data() {
    return {
      emailField: ""
    };
  },
  // New code
  validations: {
    emailField: {
      required,
      email,
    }
  }
};
</script>

Besides the import statement at the top of our script section, we've also added a validations property. In this property, we pass in an object containing the data that we would like to validate. In our case, we want to validate emailField. Next, we also pass in an object specifying the types of validators we would like, i.e. required and email.

Exposing $v

So far so good! However, this alone won't do anything. Rather, we need to make use of information on the validation state that is exposed to us through the Vuelidate property $v. In fact, by inserting {{ $v }} into your HTML you can see the entire object it returns, including its properties. Why not give it a try and see for yourself? Although, for the lazy ones of you... below you can see what it would look like anyways.

$v exposed 😳

As you can see, the entire object contains information about the state of emailField. Vuelidate has documented what all the $v values mean. Likewise, Vuelidate also features $v methods that you can make use of on events. These methods are built in and as such there's no need to import them.

Alright, let's move on!

First, let's add the $touch() method to our input field as follows.

HTML

<input type="text" id="email" v-model="emailField" @input="$v.emailField.$touch()">

With this piece of code, we basically want to change the property $dirty of our emailField to true on any input. $dirty basically indicates whether the field has been interacted with by the user at least once. You may be wondering why that's necessary, and you'll find out about it in the next section! 😜

Displaying errors

Let's insert two lines of text below our input field, each describing their respective error as seen below. Don't forget to colour them red! That makes them look more official. 🧐

HTML

<label for="email">Email </label>
<input type="text" id="email" v-model="emailField" @input="$v.emailField.$touch()">
// New code
<p class="error">An email is required!</p>
<p class="error">The email must be valid!</p>

Alright. How about controlling when they appear? For that we can use v-if and our beloved $v values. In particular, we want to access the required and email properties, which indicate true or false on the state of our validation.

HTML

<p class="error" v-if="!$v.emailField.required">...</p>
<p class="error" v-if="!$v.emailField.email">...</p>

Now, you may be tempted to call it a day. However, if you have been following this tutorial along on your own, you may have noticed that our required error displays even when our user hasn't entered anything. Well, this is where our handy dandy $dirty value comes in. By simply adding it to the v-if statement, we can get rid of this minor issue.

HTML

<p class="error" v-if="!$v.emailField.required 
&& $v.emailField.$dirty">...</p>

Custom Validator

Sooner or later, you might need a validator that Vuelidate doesn't have. In such a case, you can resort to creating your own custom validator. Let's continue with our previous email example and create a uniqueness validator for it. For instance, you may assume we are validating the input against an existing list of emails in our database. 📑

JAVASCRIPT

// Not in methods property!
let unique = (value) => value !== 'test@gmail.com';

// ...

validations: {
  emailField: {
    required,
    email,
    unique,
  }
}

In our script section, we first create a unique function that compares our input to the string 'test@gmail.com' and returns true or false accordingly. Fortunately, custom validators automatically receive our input as a parameter, which I named here as value. Afterwards, the only thing left is to add the function to the validations property under the emailField property.

If you've still got $v exposed in you HTML, you will see the addition of our unique validator. All that's left now is to add an error message for the user. 🚨

HTML

<p class="error" v-if="!$v.emailField.unique">This email is already taken!</p>