DEV Community: Kenneth Mark

How to work with the Unsplash photo API and display it with Raycast

Kenneth Mark — Mon, 19 Dec 2022 16:31:55 +0000

Raycast is one of the best tools any modern developer should have at their disposal. It replacements spotlight but with the added benefit of having an extension store and custom allowing scripting.

The extension store has over 500 plugins that range from viewing your github pull requests, viewing the NBA official rankings to translating languages on the fly and etc.

The extensions marketplace is robust and contains any little utility and applets you can think of as a developer but one of the most understated features of Raycast is the ability to script your own commands

Before extensions became the talk of town in the Raycast dev space, commands was where it was at. Raycast has an extension API that permits any developer to create their own extension but after reading the API docs for custom extensions, it felt overwhelming and overkill if you wanted to create a simple script that retrieves some information.

In my case, I am a hobbyist photographer who post his pictures on unsplash.com and would love to view my total view count on Raycast without having to visit unsplash.com

You can write scripts in bash(sh), python, ruby, swift, javascript, typescript with deno etc. In this article I am going to write a script in typescript using deno as the runtime. To start, you need to pass certain parameters to let Raycast know its an executable script it should run:

#!/usr/bin/env -S deno run --allow-net

// Required parameters:
// @raycast.schemaVersion 1
// @raycast.title Unsplash View Count
// @raycast.mode inline

// Optional parameters:
// @raycast.icon 🌉
// @raycast.packageName Media

// Documentation:
// @raycast.authorURL https://github.com/kennymark
// @raycast.author Kenneth Coffie
// @raycast.description Get your unsplash total view count

The first line should always specify the runtime. By default deno with zero permissions so you might need to allow some permission. The rest of the parameters are Raycast specific commands to let Raycast know how to run your script.

const id = 'your_unsplash_id'
const { format } = new Intl.NumberFormat('en-GB', { maximumSignificantDigits: 3 })

async function getStats() {
  const req = await fetch(`https://api.unsplash.com/users/${YOUR_USERNAME}/statistics?client_id=${id}`)

  const resp = await req.json()
  const total = resp.views.total
  return format(total)

}

getStats()
  .then(console.log)
  .catch(console.log)

Before you rush to build your own script for Raycast, first check out https://scriptcommands.com. It contains a hundreds of custom scripts that you may find useful. You could also read the official scripting guide here.

Implementing ActiveLink in Next.js and Chakra

Kenneth Mark — Tue, 15 Jun 2021 12:29:43 +0000

I love Next.js, its speed, simplicity, tooling but one thing I hate about Next.js is its lack of a native active link component. Before Next.js, I was using create-react-app and react-router for most of my personal projects but once I switched over to Next.js one of my biggest pain point is that I have to pretty much write my own NavLink component every single time for every new project I made. There are a couple of tutorials and Stackoverflows on how to exactly solve this problem but none of them actually achieves the simplicity react-router offers out fo the box.

In react-router when you want to make use of an active link all you do is import the nav-link component and pass it an activeClassName prop and voila it works. Just like this:

<NavLink activeClassName='is-active' to='/about'>About</NavLink>

Most of tutorials on how to implement the ActiveLink api looks like this

// adapted from https://stackoverflow.com/questions/53262263/target-active-link-when-the-route-is-active-in-next-js
import { useRouter } from 'next/router'
import PropTypes from 'prop-types'
import Link from 'next/link'
import React, { Children } from 'react'

const ActiveLink = ({ children, activeClassName, ...props }) => {
  const { asPath } = useRouter()
  const child = Children.only(children)
  const childClassName = child.props.className || ''

  const className =
    asPath === props.href || asPath === props.as
      ? `${childClassName} ${activeClassName}`.trim()
      : childClassName

  return (
    <Link {...props}>
      {React.cloneElement(child, {
        className: className || null,
      })}
    </Link>
  )
}

export default ActiveLink

The only issue with this API is that, it still acts like the normal Next.js link component which requires you to implement a link tag() as the child of the link component. But what if you are not using a library like ChakraUI. The implementation in Chakra looks like this:

import { Link as ChakraLink, LinkProps, useColorModeValue } from '@chakra-ui/react'
import Link from 'next/link'
import { useRouter } from 'next/router'
import React from 'react'

interface NavLinkProps extends LinkProps {
  children?: string | React.ReactNode
  to: string
  activeProps?: LinkProps
  _hover?: LinkProps
}

function NavLink({ to, activeProps, children, _hover, ...props }: NavLinkProps) {
  const router = useRouter()
  const isActive = router.pathname === to
  const color = useColorModeValue('black', 'selected')

  if (isActive) {
    return (
      <Link href={to}>
        <ChakraLink
          fontWeight='bold'
          {...props}
          {...activeProps}
          _hover={{ color: 'selected' }}
          color={color}>
          {children}
        </ChakraLink>
      </Link>
    )
  }

  return (
    <Link href={to}>
      <ChakraLink {...props} _hover={{ color: 'selected' }}>
        {children}
      </ChakraLink>
    </Link>
  )
}

export default NavLink

And to use it:


<NavLink mr={4} to='/dashboard'>
   Dashboard
</NavLink>

<NavLink mr={4} to='/dashboard' activeProps={{fontWeight:'bold'}}>
    Dashboard
 </NavLink>

Intercepting http requests in Axios

Kenneth Mark — Tue, 15 Jun 2021 12:04:59 +0000

One of the first libraries I reach for when anything sort of web application is axios. Axios is an http client for making requests in the browser and Node.js. One might ask, why not use the fetch api that is already built into all modern browsers? My answer is always interceptors.

Having previously worked with Angular in my past jobs, one of the niceties its' built-in client offers is the ability to capture or intercept outgoing http requests. Since React doesn't care about which libraries we use with our UI, we have to make these decisions on our own.

This means choosing something like which http client we are using is left to us and luckily enough there are plethora of options in the Javascript eco-system. Some of these include got, axios, superagent, needle and the built-in fetch api. Chances are, any of the listed options will work fine for you but sometimes you might need to intercept outgoing requests.

Why intercept?

Sometimes you want to transform an outgoing request or read some data from an http response. To be more specific, one of the most common use cases for transforming requests is to attach a token to subsequent requests after signing in.

The code for this should look like this:

import axios from 'axios'

function getToken(){
    // code to retrieve jwt token from cookies or localstorage
}

axios.interceptors.request.use(req => {
 const token = getToken()

    req.defaults.common['authorisation'] =  `Bearer ${token}`
    return request

}, err => Promise.reject(err))

If you're using jwt tokens to authenticate users into your application, you might also be using refresh tokens to persist user session. A refresh token is a token that is sent by your server when the jwt token is expired. Once your server has sent over the token, you might want to accept it and return.

axios.interceptors.response.use(req => {
 const token = getToken()

    req.defaults.headers.common["Authorization"] =  `Bearer ${token}`
    return request

}, err => Promise.reject(err))

Aside from intercepting and reading the refresh token from the response headers, we could also intercept the response error incase there is any incoming error. You could also check for certain http codes in order to perform certain actions in your frontend when that error occurs at the interceptor level rather than call by call basis.

Gotcha

One of the most painful experiences I have ever had whilst working with axios interceptors was handling the error callback.

axios.interceptors.response.use(req => {

    return request

}, err => Promise.reject(err))

axios.interceptors.response.use(req => {

    return request

}, err => err)

Do you notice any difference between the two segments of code? The difference is that we are handling the error in the first segment and not handling it in the second. If you were to write a try/catch block around a normal request that had the second interceptor initiated, you would not see the error occur in the catch block. Instead the error will acts as a normal response in the try block. The internals of why this happens is beyond my purview but debugging it drove me crazy for weeks, dare I say months.

Conclusion

I hope you have learnt how to work with interceptors and the concept behind them. That said, interceptors aren't the other way to configure defaults for outgoing or incoming requests and response in JavaScript. Before you reach for an interceptor, try to see if what you are building can be implemented with an Axios instance or mutating the Axios object via axios.defaults. The syntax for an Axios instance looks like this:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});

If you prefer working with the fetch api but still love the concept of interceptors, you can check out fetch-interceptor or if you are up for it you can write your own.

6 free services for web developers

Kenneth Mark — Tue, 18 May 2021 12:44:12 +0000

This article aims to showcase a subjective diverse list of services and applications that make our lives simpler. As developers, specifically developers in the web development world, we are bombarded by a large amount of open source projects and services that aim to make our lives simpler in one way or another but these same tools can end up causing fatigue. Not to add to the cognitive overload web developers already suffer, the list of services below are quite helpful and come without any sort of complexity that requires learning anything new.

Upstash (Redis)

So you've built a fullstack application application in your favourite stack and then you realise that you need a very fast in-memory datastore to either store temporary data, some user info or store sessions for logged in users. You could perhaps create a new redis server locally and deploy it, but then again you would have to care about security and do some work to get it online and functioning well with very little downtime. Unless you're a very skilled backend/devops I would advise that you should use a service that handles all of these edge cases. There are many services that could do that for you but upstash.com offers a beautiful and simple product that makes working with Redis a pleasure. Upstash is serverless hosting service for redis. It is very easy to get it set up. You register for an account, create a project and get the connection url and voila. You have your own redis instance hosted somewhere in the cloud.

Vercel

Most web developers today have either heard of Vercel directly or indirectly. They are responsible for the creation of the most popular fully featured React framework called Next.js.

Vercel.com is a hosting service that allows you to host static websites regardless of which framework they were built on. At first, this isn't anything unique since services like Netlify and AWS Amplify offers similar features. Vercel begins to shine when you're embedded in the React ecosystem and you wish to build server side rendered or statically built applications with serverless support. But even if you're not into the React ecosystem you could just use Vercel because it has a beautiful UI, webhooks support and git integration that automatically builds and deploys your application on successful pushes to any branch etc.

Railway.app

If you like to build hobby projects that require any type of backend, you are more than likely to have used Heroku to host these projects. Heroku is a great platform and I use it for a couple of my apps but anyone who uses Heroku knows that it automatically sleeps your dynos when your application hasn't received any requests in less than 30 minutes. If you don't mind this inconvenience then you can keep using it. Railway.app is a very similar service to Heroku, it offers the same easy ease of use plus several niceties such bulk importing of enviromental variables, deploy preview urls etc. but its best feature is allowing continous running on your applications without sleeping them after x amount of time. Railway, just like Heroku, can run your application using Procfile or even docker file. You can create a new project on Railway by visiting dev.new. Railwap is not completly analogous to Heroku, it lacks the vast array of plugins that the Heroku ecosystem has. It rather offers an essential list of plugins such Mongodb, Postgres, MySQL and Redis.

Nodemation

Nodemation is an automation service which allows for inter-communication between API's. Most popular web services such as Google Calendar, Dropbox, Twitter etc. allows developers to connect to their platform via public APIs, but sometimes one might want to have these APIs interact with each without having to create different apps or writing many lines of code. Think of nodemation as an open source cloud base complex if-this-then-that application akin to Zapier. If you love to automate things, give this a try.

Calendso

So imagine you're really good at this development thing and you proceed to become a contract developer who gets paid handsomely for their work. You're officially a self-employed businessman and something self-employed business people love to do is manage their time. Being a contract dev means you have to schedule calls with your stakeholders frequently to update them on the progress of their application. Services like Google calendar are good tools to manage your appointments but one feature Google calendar lacks is the ability to share your availability to your stakeholders and therein comes a popular service called Calendly which with a link lets you book and share availability with anyone. But you're a developer and you treat privacy like its the most important thing in the world and you love your self hosted apps. Calendso is an open source alternative to Calendly which you can self host. Many companies use services like Calendly to schedule meetings and interview with people external to the company.

Caprover

Some of the services that I have listed do very similar things. They allow you to host and monitor your web apps. What if you had a service that allowed you to build, deploy, monitor and run multiple applications without having to switch between multiple services. Caprover doesn't necessarily replace vercel or upstash but it allows you to combine all these services into one UI and run them all from there.

Caprover defines itself as:

CapRover is an extremely easy to use app/database deployment & web server manager for your NodeJS, Python, PHP, ASP.NET, Ruby, MySQL, MongoDB, Postgres, WordPress (and etc...) applications!

Caprover acts as your own Heroku. There might be a little overhead in getting it set up if you're uncomfortable with setting up a linux box but the docs they offer are quite good and walk you through the process. Once set up, it should look like this and voila, your application

Conclusion

Hopefully, you have tried one or more of these services. It is important to mention, some of these are free and open source and some remain freemium. Uptash offers a generous free plan with up to 256mb of free storage, railwap.app offers 3 projects for free which should be good enough for most solo hobbyists out there Vercel is virtually unless you are medium or big company with lots of requests.

How to send serverless emails with Next.js and Sengrid.

Kenneth Mark — Sat, 01 May 2021 10:07:44 +0000

Prerequisites

Next.js knowledge
Vercel account
Github account
Sengrid account and its API keys
Sendgrid's npm package

One of the biggest disappointments I encountered whilst learning web development, is that you can't send emails on the frontend. I later discovered that you needed a server to accomplish this task. Today, luckily enough for us, there are a variety of technologies and libraries that enables us to achieve this without having to set up a server, hosting, ssh just to send an email.

In this tutorial, I will be accepting emails in my inbox sent to me by anyone on my website. There are 3 main parts to this, the frontend, backend and Sendgrid. The frontend is built on the Next.js which includes features such as SSR (server side rendering), ISR(incremental static regeneration) and SSG(static site generation). The main goal of this article is going to be achieve with another of Next.js known as API routes. API routes or serverless functions are functions that are invoked only when called. In Next.js, api routes sits in your application in the pages folder in a folder named api. Each file in that folder exports a default anonymous function and you can make requests to the route by is by making requests to /api/{filename}. The end result should look something like this.

export async = (req, res) => {}

If you have ever written a server in express before, the code above should look family because it acts exactly as the route handlers for express routes.

Before you proceed ensure you have stored the API keys in the .env file. It should look like this:

EMAIL_API_KEY="your-sendgrid-api-key"

Form

The first step of sending an email, is designing and developing the form as you wish. In my case. I am using ChakraUI with React-hook-form, but you can use any UI component library of your choice. Here's how my form looks like:

<form onSubmit={handleSubmit(sendMail)}>
  <Stack>

    <FormControl >
      <FormLabel htmlFor="subject">Subject</FormLabel>
      <Input id='subject' type="text" name="subject"  {...inputProps} ref={register(setValidation('Subject', false, 2))} />
      <ErrorMessage errors={errors} name='subject' as={<Text color='red.600' />} />
    </FormControl>

    <FormControl>
      <FormLabel htmlFor="name" >Name</FormLabel>
      <Input id='name' type="name" name="name" ref={register(setValidation('Name'))} {...inputProps} />
      <ErrorMessage errors={errors} name='name' as={<Text color='red.600' />} />
    </FormControl>

    <FormControl>
      <FormLabel htmlFor="email" >Email address</FormLabel>
      <Input id='email' type="email" name="email" ref={register({ ...setValidation('Email') })}  {...inputProps} />
      <ErrorMessage errors={errors} name='email' as={<Text color='red.600' />} />
    </FormControl>

    <FormControl>
      <FormLabel htmlFor="message">Message</FormLabel>
      <Textarea id='message' type='textarea' name="message" ref={register(setValidation('Message', true))} {...inputProps} h={300} resize='none' />
      <ErrorMessage errors={errors} name='message' as={<Text color='red.600' />} />
    </FormControl>

    <FormControl>
      <Button type='submit' color='white' bg='gray.900' width='100%' h={55} mt={5}>
        Submit
        </Button>
    </FormControl>
   </Stack>
</form>

Send request to api route

Now send the data from the form to the api route.

const sendMail = async (data) => {

    try {
      await fetch("/api/contact", {
        "method": "POST",
        "headers": { "content-type": "application/json" },
        "body": JSON.stringify(data)
      })

            //if sucess do whatever you like, i.e toast notification
      setTimeout(() => reset(), 2000);
    } catch (error) {
        // toast error message. whatever you wish 
    }

  }

Receiving email and sending it off

Once you have sent the email from your frontend, its time to capture it and send it to yourself. This is achieved by first installing sengrid' via npm install @sendgrid/mail. Once done, ensure you have created a contact.js in folder api folder and paste this in.

import sgMail from '@sendgrid/mail'
import { NextApiRequest, NextApiResponse } from 'next';

sgMail.setApiKey(process.env.EMAIL_API_KEY);

export default async (req: NextApiRequest, res: NextApiResponse) => {
  const { email, subject, message, name } = req.body
  const msg = {
    to: '<your-email@example.com',
    from: email,
    subject,
    name,
    text: message,
  };

  try {
    await sgMail.send(msg);
    res.json({ message: `Email has been sent` })
  } catch (error) {
    res.status(500).json({ error: 'Error sending email' })
  }
}

Thats it, the code for sending the email via Sendgrid is quite simple and self explanatory. We first set the api key for Sengrid and after, we create our handler for the route and extract out the email, subject, message and name and then wrap our sgMail.send in a try/catch block.

Deployment

Before deployment, ensure you code is up on Github or Gitlab, also test it and make sure it runs well locally .After these steps, log into your vercel account and start a new project with that Github repo. And thats it, Vercel will build your app and deploy it statically and give you a url to view the project.

Conclusion

You can repurpose the knowledge and send any type of email you want. Sendgrid allows you to create custom and great looking emails using templates. You can also swap Sengrid for your favourite transactional email sending tools such Mailgun, Postmark, Amazon ses or even use gmail via nodemailers SMTP support

If you like this post, please sign up for my newsletter at https://buttondown.email/kennymark or visit my website for more info at https://kennymark.com

Deploying your Adonis v5 applications on Heroku

Kenneth Mark — Wed, 24 Mar 2021 17:02:55 +0000

Pre-requisites

Introduction

Once you have created your account and installed the Heroku CLI, log into your Heroku account with

heroku login

After logging into your Heroku account, create an application in Heroku and add the Heroku git remote origin url since Heroku will be using git to deploy your application.

heroku git:remote -a {APPLICATION-NAME}

If you have enabled automatic deploys with Github then you can skip this step.

Configure Package.json

To ensure your application runs smoothly on Heroku we need to tell Heroku or any other hosting provider to use the right version of Node to effectively run our application. Our application is written in typescript and some features it uses aren’t available in older versions of Node. The version of Node best suited our typescript application is v12.18.3 which is the current stable version as of today.

"engines": {
    "node": "12.18.3"
}

Copy and paste this in your package.json file

Scripts

Adonis.js comes default with scripts for running our application in development but not in production. The scripts below show does the job. Please replace the scripts in your package.json with the one below.

 "scripts": {
    "build": "node ace build --prod",
    "start": "node ace serve --watch",
    "start:prod": "node ./build/server.js"
  }

Procfile

The Profile tells Heroku how to run our application. Firstly create a file named Procfile in the root of your profile and paste the script below inside.

release: ENV_SILENT=true node ace migration:run --force && node ace db:seed 
web: npm run start:prod

There are 2 main commands here. The release and web command/phase.
The release commands run right after the application has been built or in this case transpiled to raw JavaScript and the web command runs the application on the server. In the release command we tell our application to silent the Env errors because Adonis expects a .env file to run the application smoothly and then we run our migrations and do some seeding in case we have some. The seeding part is optional
In the web command we just run the npm run start:prod we wrote earlier in our package.json file. With this command, Heroku runs the production JavaScript version of our application.

Database connection

Your application will more than likely use a database to store data. Adonis.js provides us with different database providers to perform CRUD operations with. Your database could be hosted with any provider of your choice but Heroku allows us to append DB service to our deployment.

SQLite

You should not be using SQLite in production but if you are only running small app that nobody but yourself uses then you can choose to use SQLite. If you choose to run SQLite in production, there is nothing you have to do but run migrations.

MySQL

First and foremost, please ensure you have installed the MySQL node driver in your project, using npm i mysql to do it.
Heroku provides us with different a MySQL addon/service we can use in conjunction with our application. To use it, go the resources tab in your heroku dashboard and start typing MySQL in the add-on input. You would see a select dropdown with a ClearDB MySQL option.

Please select it and proceed. This provisions a MySQL database that you can use with your application. To use the database in your application, go the settings tabs in your Heroku dashboard and click the Reveal Config Vars button and copy the CLEARDB_DATABASE_URL value.

Now in your local .env file create a new entry called CLEARDB_DATABASE_URL and paste the copied value.

Usage

Firstly, install url-parse with npm install URL-parse. This package allows us to parse the database url we copied from the Heroku dashboard into a JavaScript object we will later use. Once installed, find the config/database.ts file and paste the code below in your imports.

import Url from ‘url-parse’
const CLEARDB_DATABASE_URL = new Url(Env.get(‘CLEARDB_DATABASE_URL’))

Once you have pasted the code above, replace the MySQL object with the one below

    mysql: {
      client: 'mysql',
      connection: {
        host: CLEARDB_DATABASE_URL.host as string,
        port: Number(''),
        user: CLEARDB_DATABASE_URL.username as string,
        password: CLEARDB_DATABASE_URL.password as string,
        database: CLEARDB_DATABASE_URL.pathname.substr(1) as string
      },
      healthCheck: false,
    },

Configure for production

To make use of our new MySQL database in our application, we can dynamically set the default connection based on the environment we are running our application in. Ensure you import the Application module using import Application from '@ioc:Adonis/Core/Application' before you copy the code below.

connection: Application.inDev ? ‘sqlite’ : ‘mysql’

Once pasted, the application will use SQlite in development and MySQL in production. You can configure this to your liking.

Postgres

Just like with MySQL, please ensure you have installed the Postgres node driver in your project before you proceed., You can do so by using npm i pg to do it.

Configuring database access for Postgres is very similar to the doing the same for MySQL so please first read it diligently before you read the Postgres section. To use Postgress, go to the resources tab in the Heroku dashboard and select a Heroku Postgres. Go the settings tab and copy the DATABASE_URL and paste it in your .env file. Append ?ssl=no-verify to the DATABASE_URL in both .env file and in your settings tab under Reveal Config Vars. This ensures you do not run into any SSL issues. Only remove it if you know what you are doing.
Lastly, to configure Postgres for production replace your connection string with the code below

connection: Application.inDev ? ‘sqlite’ : ‘pgs’

Dynamicity

Since will be running on application in both the development and production environments it important to make sure values being used in the application are dynamic. They can be hard-coded and check with if statements but that will introduce a lot of repetitive boilerplate code and you will disregarding the DRY principles of programming. To solve this problem, Adonis.js has an Application module that contains properties with information about your application and one of the properties on the Application class is inDev. You can for example use it to set a default database connection as seen above or set a default email address for to send emails in development.

const email = Application.inDev ? 'test@test.com' : 'johndoe@company.com'

Mail.send((message) => {
  message
    .from(email)
    .to('test@adonisjs.com')
    .subject('Welcome Onboard!')
    .htmlView('emails/welcome', { name: 'John Doe' })
})

Deploy

Once the you completed everything above. You can now joyfully deploy your application to heroku.

git add . 
git commit -m "initial commit"
git push -u origin master
git push heroku master

Once deployed, the application will show you a link to the application if deployed correctly. Click on the link and voila, you should see your application running just fine.

Conclusion

Deploying Adonis on Heroku is quite similar to deploying to deploying other node applications. You can use the steps in this tutorial and apply it to other Adonis.js applications you build.

How to write a simple CLI in Node.js

Kenneth Mark — Wed, 24 Mar 2021 16:27:17 +0000

I recently took it upon myself to write a simple CLI for code generation for an enterprise application for my current employer. The goal of the CLI was to make it easy to create files and components as we were using the atomic design system. Not to explain in depth, but atomic design consists of breaking down your components into atoms, molecules, organisms,templates and pages, all of which were nested in the components folder located in the src folder at the root of the project.

So to make it easy for the developers on our team to follow this design system, it was suggested a CLI be implemented to make this process enjoyable for all developers and encourage adoption.
The goal of the CLI, was to prompt questions and then use the answers to generate the a file, a storybook story and then copy default templates into these files so the component is already set up with the basics such as the default imports, defaults exports and component name.

In pseudocode:

- Ask what type unit do you want to create. Could be one of atom, molecule, organism etc
- Ask for name of the file and format it
- Get answers above and create a folder and file based on these answers 
- Use created templates and replace

Using Inquirer

In the Node.js ecosystem, there are a lot of CLI libraries such as inquirer, commander, yargs, args etc. They all serve different purposes and sometimes share funtionality but inquirer seemed the most appropriate for this project. It's API looks very human readable and subjectively easy to implement.

const inquirer = require('inquirer');

inquirer
  .prompt([
    /* Pass your questions in here */
  ])
  .then(answers => {
    // Use user feedback for... whatever!!
  })

The key to understand and using inquirer is passing in questions to the prompt method. A question is an object that should look like this:

{
  message: "What is your name?",
  type: input | number | confirm | list | rawlist |  expand | checkbox | password | editor,
  choices: ["Kenny","James"],
}

Here is an actual example of a complete implementation adapted from here

const inquirer = require('inquirer');

inquirer
  .prompt([
    {
      type: 'rawlist',
      name: 'theme',
      message: 'What do you want to do?',
      choices: [
        'Order a pizza',
        'Make a reservation',
        'Ask opening hours',
        'Talk to the receptionist',
      ],
    },
    {
      type: 'rawlist',
      name: 'size',
      message: 'What size do you need',
      choices: ['Jumbo', 'Large', 'Standard', 'Medium', 'Small', 'Micro'],
      filter: function (val) {
        return val.toLowerCase();
      },
    },
  ])
  .then((answers) => {
    console.log(JSON.stringify(answers, null, '  '));
  });

THe example above is a bit self explanatory, it should initially prompt the user what if wants to and upon selecting their choice, it would move on the next question which is asking for the size of the chosen pizza. The answers would return an object that should look like this:

{
  theme:"Make a reservation",
  size:  "jumbo"
}

The answers object would look slightly different is the type of prompt is something like a checkbox, in that question the value would be an array instead of a string.

To run this, ensure you first have the library installed and then put it in a file are the root and then run node [file].js
If inquirer doesn't suffice, you can look into combining it with a couple of the libraries I have mentioned above such as commander or yargs. These libraries allows you to accept arguments, produce default help menu, versioning etc.

Using custom fonts in react native

Kenneth Mark — Tue, 16 Jun 2020 06:49:38 +0000

Blog original posted here by kennymark

Using custom fonts in react native can be tricky or hacky to say the least. If you search for how to use custom fonts in react native on Google, the top results are filled with long blog posts or tutorials that are either outdated or overly complex. Most of these tutorials also seem to ignore setting up fonts on Android.
What if I told you there was a simple way to get custom fonts working on both IOS and Android with minimal set up?. Let’s say you want to use the Work Sans font from Google Fonts in your new application.

Let starts by first downloading the font from Google Fonts.

After downloading the font. Follow the steps below

Create an assets folders in the root of your project with command mkdir assets.
Go to the asset folders and create a fonts folder with command cd assets && mkdir fonts.
Go back to the root of your folder and a create a file named react-native.config.js if it does not already exist.
Copy and the paste the code below into your react-native.config.js file

  module.exports = {
    assets: [‘./assets/fonts’]
  }

Ensure the fonts folder contains all the fonts you are going to need for your project in a ttf format. In my case, I will be only using the Work Sans font.
Once that is done, just run react-native link from the root of the project.
Voila!. You now have custom fonts set up.

Verify your fonts work properly

The best way to first verify if your fonts are going to work is to first if they have been successfully migrated to the each platform. For IOS, navigate to ios/{project}/Info.plist. Open the plist file and scroll to the bottom of the page. You should see the name of the font in a key called UIAppFonts. This is how mine looks like:

    <key>UIAppFonts</key>
    <array>
        <string>Ionicons.ttf</string>
        <string>Spartan.ttf</string>
        <string>WorkSans.ttf</string>
    </array>

On Android this works slightly differently. We need to navigate to android/app/src/main/assets/fonts. Once in that folder you should be able to see all the fonts. If not it means something has gone wrong.

Gotchas

Please ensure you are using react native v0.60 or greater. This only works on React Native version 0.60 and up.
Check your font names. Ensure the font name you are using in your project is the actual name of the font. For example, when you download the Work Sans font and extract it from the zip file, all the files will most likely have different file names. It might look like Work+Sans-Bold.tff but using the exact file name in your react native font-family might cause issues because that might actually not be the font name. To ensure you actually are using the real font name, you can double-click the font. When the corresponding app opens on your machine, the name you see there will mostly likely be the name of the font.

Conclusion

Using custom fonts in react can be really simple if done right but can also be a hassle if you don't dont do the right things in order. Download the font, extract it and move the fonts using are going to use into the root/assets/fonts in your project, create a react-native.config.js and paste in the snippet above and then run react-native link in your terminal or console.