DEV Community: Karma

Add GraphCMS to your Web App

Karma — Tue, 02 Mar 2021 10:09:30 +0000

I talk about GraphCMS — a headless CMS; and how to add it to your web app.

Introduction

Content often needs maintenance. By integrating a headless CMS like GraphCMS, you can offload content management and focus on delivering the content.

GraphCMS has some great features that you will appreciate:

It is GraphQL-based, so it solves the problem of under-fetching and over-fetching
It caches your content to over 190 locations around the globe for faster delivery
It supports roles so you can choose to give full or limited control to teammates
It allows you to transform your image content during fetching for optimised delivery
It has an interactive API playground to test your queries and mutations
It has a generous, free-forever tier

Installation

Once you are done creating your project and a schema to begin with in GraphCMS, go to “Settings > API Access” page of your project and generate a new token for “Content API Access”. Copy this and the “Endpoint URL” to your web app’s environment files. Next.js example:

// .env.local

GRAPHCMS_ENDPOINT=https://api-xxx.graphcms.com/v2/xxx
GRAPHCMS_TOKEN=xxx.xxx.xxx

Angular CLI project example:

// src/environments/environment.ts

export const environment = {
  graphcmsEndpoint: 'https://api-xxx.graphcms.com/v2/xxx',
  graphcmsToken: 'xxx.xxx.xxx'
};

Caution: Do not forget to add these environment variables to your deployment system (Vercel / Netlify / elsewhere).

To send GraphQL queries and mutations, you can opt to use a library instead of forming these requests yourself. graphql-request is a good, lightweight option.

// Command

npm i graphql-request graphql

Set-up graphql-request to include GraphCMS token in authorization header of every request:

// Anywhere

import { GraphQLClient } from 'graphql-request';

const graphcmsEndpoint: string = ENVIRONMENT.GRAPHCMS_ENDPOINT;
const graphcmsToken: string = ENVIRONMENT.GRAPHCMS_TOKEN;
const headers = { authorization: `Bearer ${graphcmsToken}` };
const graphqlClient = new GraphQLClient(graphcmsEndpoint, { headers });

Once you’ve tested a query in GraphCMS’s interactive playground, you can paste it into your web app and make the request:

// Anywhere

import { gql, GraphQLClient } from 'graphql-request';

let products: Product[] = [];

const getProductsQuery = gql`{
  products(where: { isAvailable: true }) {
    rate
    name
  }
}`;

try {
  const getProductsResponse: { products: Product[] } = await graphqlClient.request<{ products: Product[] }>(getProductsQuery);
  products = getProductsResponse.products;
} catch { products = []; }

To transform image content, add the necessary transformations to the query like so:

// Anywhere

import { gql } from 'graphql-request';

let informationCards: InformationCard[] = [];

const getInformationCardsQuery: string = gql`{
  informationCards {
    id
    image {
      url (
        transformation: {
          image: { resize: { fit: crop, height: 800, width: 800 } }
        }
      )
    }
  }
}`;

That’s it! You can see GraphCMS in action on a simple farm-produce pricing web app I made called Sumran: https://sumran.in. Because I’m using Next.js to prerender the content, you won’t see the requests go out on the client. The source is open: https://github.com/karmasakshi/sumran.

Cheers!

Low-Hanging Fruits of Web Security

Karma — Fri, 12 Feb 2021 06:35:09 +0000

I talk about implementing common headers in your web app to increase its security.

Headers

Access-Control-Allow-Origin: Defines domains that can access your content. MDN link.
Permissions-Policy: Defines permissions your web app can request for. W3C link.
Referrer-Policy: Defines how much information you share with link B about link A when you go from link A to link B. MDN link.
Strict-Transport-Security: Defines whether or not https:// should be compulsory when accessing your web app. MDN link.
X-Content-Type-Options: Mandates content to be of the type defined. MDN link.
X-Frame-Options: Defines whether or not your web app can be loaded within an iframe or other embed elements. MDN link.
X-XSS-Protection: Defines Cross-Site Scripting filter level. MDN link.

Examples

Say you have a web app hosted on https://example.com:

const HEADERS = [
  {
    key: 'Access-Control-Allow-Origin',
    value: 'https://example.com'
  },
  {
    key: 'Permissions-Policy',
    value: 'autoplay=(), camera=(), fullscreen=(), geolocation=(), microphone=()'
  },
  {
    key: 'Referrer-Policy',
    value: 'no-referrer'
  },
  {
    key: 'Strict-Transport-Security',
    value: 'max-age=63072000; includeSubDomains; preload'
  },
  {
    key: 'X-Content-Type-Options',
    value: 'nosniff'
  },
  {
    key: 'X-Frame-Options',
    value: 'DENY'
  },
  {
    key: 'X-XSS-protection',
    value: '1; mode=block'
  }
]

On Next.js apps deployed on Vercel, you set the headers in next.config.js like so:

// next.config.js

const headers = async () => [
  {
    source: '/(.*)',
    headers: // Paste HEADERS here
  }
];
module.exports = {
  headers
};

On SPAs deployed on Firebase Hosting, you set the headers in firebase.json like so:

// firebase.json

{
  "hosting": {
    "headers": [
      {
        "source": "**",
        "headers": // Paste HEADERS here
      }
    ]
  }
}

You may want to change the value of Access-Control-Allow-Origin header to allow CORS.

You may also want to change the value of Permissions-Policy header based on permissions you intend to ask for.

CSP: The King of Security Headers

Content-Security-Policy (MDN link) is an extremely powerful header since it combines various policies, allowing you to define the security policy of your web app in a fine-grained fashion. It is difficult to get right in the first attempt, so it behoves to not be included in the “low-hanging fruits” list above — but you shouldn’t skip it. It guarantees visitors have a safe time on your web app.

To build the tightest CSP for your web app, it is recommended to start with locked-down policies and open them up as you proceed. Chrome is very descriptive about CSP violations so it is easy to know which policy to open-up next. It is essential to test all features of your web app to ensure there are no violations. Use a new Incognito window every time you make changes to any policy to ensure you aren’t working with cached results.

It is common to disable CSP during development to allow tools to work properly. You can use an environment variable to disable CSP during development. Here’s an example of a CSP header configuration of a Next.js app that uses Google Fonts (note the usage of environment variable NEXT_PUBLIC_IS_PRODUCTION):

// next.config.js

const HEADERS = [
  ...,
  {
    key: 'Content-Security-Policy',
    value: process.env.NEXT_PUBLIC_IS_PRODUCTION === 'true' ? "connect-src 'self'; default-src 'self'; font-src https://fonts.gstatic.com; img-src 'self' data:; manifest-src 'self'; object-src 'none'; script-src 'self'; style-src 'self' https://fonts.googleapis.com 'unsafe-inline'; upgrade-insecure-requests;" : ''
  },
  ...
]

You can evaluate the strictness of your policy using Google’s CSP Evaluator.

Quantifying the Result

Mozilla Observatory is to Web Security, what Lighthouse is to Web Performance. It rates the security of your web app and provides suggestions to improve that rating. It also integrates 3rd party scanners like Security Headers so you can have multiple opinions.

Was I able to help you increase your web app’s security score? Let me know on my Twitter. Cheers!

Make Your PWAs Look Handsome on iOS

Karma — Wed, 10 Feb 2021 10:35:43 +0000

I talk about how to embrace the notch to make your PWAs cover the entire screen on iOS devices.

The Problem

To avoid content being hidden under notches, Apple limits the viewport of PWAs by default:

Apple also limits the viewport on iPhones and iPads without a notch to the area below the Status Bar:

If you want your PWA to embrace the notch and make it cover the entire screen, you will need a small hack.

The Solution

Set your document to flow to the notch area:



// index.html

<head>
  ...
  <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width"></meta>
  <meta name="apple-mobile-web-app-capable" content="yes"></meta>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>
  ...
</head>

Note that this will set the font color of the iOS Status Bar to white.

The hack: Set the minimum height of the document to 100% plus the height of the safe area on top. This will prevent a white bar in the bottom which gets shown since you moved the document “up”.

Also, add safe area padding to all 4 sides to ensure content is never hidden under the notch regardless of the device orientation:



/* styles.css */

html {
  min-height: calc(100% + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  ...
  background-attachment: fixed;
  background-image: url('/bg.svg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

The Result

Bonus Tip

If you have elements with position: fixed (e.g. toast, sidebar, bottom navigation, etc.) add the safe area padding to their containers or themselves, whichever is relevant. You only need to pad the sides where the notch can possibly be positioned.



/* styles.css */

.left-sidebar {
  padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);
}

For fixed headers, you can either choose to display the header below the notch area (like Share By Cam does) or pad relevant sides of the header instead of html to fill the notch area.

I developed this hack after several retries way back on iOS 12, but never shared hoping it would be fixed by Apple. Looks like this quirk is here to stay, so be it. Cheers!

Shout-out to MockUPhone for the brilliant phone mocking tool!

Add Splitbee Analytics to Your Next.js App

Karma — Wed, 03 Feb 2021 20:11:18 +0000

I talk about Splitbee — a new analytics tool; and how to add it to your Next.js app.

Introduction

Analytics, for the most of us, does not have to be as complicated as Google Analytics. Splitbee takes a fresh approach to analytics and you’ll find reasons to appreciate it in addition to these:

It has a clean, responsive and user-friendly UI with features like live updates and journey view
It does not need additional setup for SPA routing
It has the simplest onboarding process

However, unlike Google Analytics, Splitbee isn’t free. Unless you don’t have any visitors on your app, sooner or later, you will run into this message and your custom event data will be redacted:

You can learn more about their pricing here.

A Note About Next.js Rewrites

Next.js supports Rewrites, which enable you to remap URLs on-the-fly. By routing Splitbee communication through your own domain, you get to:

Reduce DNS lookups
Circumvent ad-blockers that prevent loading content from external domains
Clean-up CSP header — from connect-src https://hive.splitbee.io; script-src https://cdn.splitbee.io; to connect-src 'self'; script-src 'self';

We will be configuring Rewrites in each of the two approaches below.

“Just Add Water” Approach

Add the script directly from Splitbee:

// ./pages/_document.tsx

...
<Head>
  <script async src="https://cdn.splitbee.io/sb.js"></script>
</Head>
...

You can now track events like so:

// Anywhere

if ((window as any).splitbee) {

  const action: string = 'action';
  const data: any = {};

  (window as any).splitbee.track(action, data);

}

You can set data against a user like so:

// Anywhere

if ((window as any).splitbee) {

  const data: any = {};

  (window as any).splitbee.user.set(data);

}

A disadvantage of this approach is that it is possible the library is not loaded when track() or user.set() is invoked; thereby needing the if() wrap.

Configure Next.js Rewrite by pointing the script tag to relative paths instead:

// ./pages/_document.tsx

...
<Head>
  <script async data-api="/sb-api" src="/sb.js"></script>
</Head>
...

Then, add the Rewrite for those relative paths:

// ./next.config.js

const rewrites = async () => [
  {
    destination: 'https://cdn.splitbee.io/sb.js',
    source: '/sb.js'
  },
  {
    destination: 'https://hive.splitbee.io/:slug',
    source: '/sb-api/:slug'
  }
];
module.exports = {
  rewrites
};

NPM Package Approach

Using the Splitbee NPM package is beneficial in several ways:

It automatically makes the library available to the client
It makes writing synchronous logic possible
It provides typings to be used with TypeScript

Install the package from NPM:

// Command

npm i @splitbee/web

Initialize Splitbee:

// ./pages/_app.tsx

import splitbee from '@splitbee/web';
import type { AppProps } from 'next/app';
import { useEffect } from 'react';

const MyApp: (props: AppProps) => JSX.Element = ({ Component, pageProps }: AppProps): JSX.Element => {

  useEffect((): void => { splitbee.init(); }, []);

  return <Component {...pageProps} />

}

You can now track events like so:

// Anywhere

import splitbee from '@splitbee/web';

const action: string = 'action';
const data: any = {};

splitbee.track(action, data);

You can set data against a user like so:

// Anywhere

import splitbee from '@splitbee/web';

const data: any = {};

splitbee.user.set(data);

Configure Next.js Rewrite by first passing a configuration object of relative paths to init():

// ./pages/_app.tsx

import splitbee from '@splitbee/web';
import type { AppProps } from 'next/app';
import { useEffect } from 'react';

const MyApp: (props: AppProps) => JSX.Element = ({ Component, pageProps }: AppProps): JSX.Element => {

  useEffect((): void => {

    splitbee.init({
      apiUrl: '/sb-api',
      scriptUrl: '/sb.js'
    });

  }, []);

  return <Component {...pageProps} />

}

Then, add the Rewrite for those relative paths:

// ./next.config.js

const rewrites = async () => [
  {
    destination: 'https://cdn.splitbee.io/sb.js',
    source: '/sb.js'
  },
  {
    destination: 'https://hive.splitbee.io/:slug',
    source: '/sb-api/:slug'
  }
];

module.exports = {
  rewrites
};

Cheers!

Atomic Increment/Decrement in FaunaDB

Karma — Wed, 03 Feb 2021 19:54:40 +0000

I talk about how to atomically increment/decrement values in FaunaDB.

Credit

Original answer here: https://news.ycombinator.com/item?id=24618998.

Code

Suppose you have an article schema like so:

// Schema

Article {
  slug: string;
  likes: number;
}

To atomically increment likes, you need to invoke Update() with two parameters:

Document reference
Part of the document to be updated

For the value of the key to be updated, invoke Add() with two parameters:

Select() with the path to the key, to get the current value
Value to increment/decrement by (1 in our case; pass -1 to decrement)

// Query

documentReference; // Assuming this is available
Update(
  documentReference,
  {
    data: {
      likes: Add(
        Select(['data', 'likes'], Get(documentReference)),
        1
      )
    }
  }
)

In situations when the document reference is not known, and you’re obtaining it as an output of another function, call Update() in Lambda(). For example, suppose you have an Index allArticles with terms as data.slug in order to be able to find documents by slug. To atomically increment likes in all matched documents:

// Query

Map(
  Paginate(
    Match(
      Index('allArticles'),
      'article-about-faunadb'
    )
  ),
  Lambda(
    'X',
    Update(
      Var('X'),
      {
        data: {
          likes: Add(
            Select(['data', 'likes'], Get(Var('X'))),
            1
          )
        }
      }
    )
  )
)

Cheers!

The Correct Way of Adding Tailwind to Your Next.js App

Karma — Mon, 25 Jan 2021 21:56:54 +0000

I list steps to add Tailwind to a Next.js app and highlight what some are doing wrong.

TL;DR

The correct way of adding Tailwind to a Next.js app is by following the steps mentioned in the Tailwind Docs.

Steps

Navigate into the Next.js app directory and follow these steps:

Install Tailwind dependencies:
npm install tailwindcss@latest postcss@latest autoprefixer@latest
Generate tailwind.config.js and postcss.config.js:
npx tailwindcss init -p
Configure Tailwind to remove unused styles from production builds:

// ./tailwind.config.js 
module.exports = {
  purge: ['./pages/**/*.jsx'],
  ...
}

Besides ./pages, ensure all paths of components that use Tailwind are also added; e.g. purge: ['./pages/**/*.jsx', './components/**/*.jsx'],
Ensure the extension is appropriate; e.g. your file extension may be different if you’re writing TypeScript: purge: ['./pages/**/*.tsx', './components/**/*.tsx'],

Include Tailwind styles along with your own in the global stylesheet:

// ./styles/global.css
@tailwind base;
@tailwind components;
// Add Tailwind's @apply styles here
@tailwind utilities;
// Add other global styles below
html {
  ...
}
body {
  ...
}

Add the global stylesheet to all your pages via ./pages/_app.jsx:

// ./pages/_app.jsx
import '../styles/global.css';

function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />
}

export default MyApp;

What Some Are Doing Wrong

Besides referring to an older, outdated article, you could be doing the following mistakes:

Saving Tailwind dependencies as devDependency:
Tailwind is a collection of classes that go into your production app. They are not used for developing the app, but are a part of one. In an ideal scenario, you would want to skip installing devDependency in a CI/CD process to save bandwidth and time. Your app won’t build then.
Adding additional dependencies:
Tailwind doesn’t need any other dependency like postcss-preset-env, @fullhuman/postcss-purgecss or others.
Adding a CSS reset along with Tailwind:
Tailwind already uses Preflight as the base, which resets browser styles to ensure consistent look across all browsers. However, if you prefer to use your own reset, you should first turn Preflight off:

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
  ...
}

Cheers!

Coronavirus Lockdown: I Learnt More About QR Codes and Made a Generator PWA

Karma — Sun, 05 Apr 2020 01:13:41 +0000

I talk about my journey of discovering QR code detection in iOS and Android and developing a feature-rich QR code generator PWA using this knowledge.

Knowingly or unknowingly, we all have been using QR codes for a while now — to make payments, to open WhatsApp Web or open links from a print ad. In case you didn’t know, they look like this:

This pattern contains some information that one can read by pointing their phone camera at it. I recently discovered that my iPhone could detect QR codes of WiFi configurations and connect to them instantly. I sat down in amazement and wondered how much time had been wasted by all of humanity in sharing WiFi name and password with others.

Recent versions of both iOS and Android support QR code scanning in their native camera apps. I discovered the various types of QR codes supported by them — contacts, events, location, phone call and SMS to name a few — and made a PWA that generates codes for all these types. I named it Share By Cam because I figured it was a great way of sharing common data; and because a camera is required to complete the circle of sharing.

I looked up existing solutions and found one or more of the following problems with them:

They didn’t cover all types
They had complicated forms
They served too many ads
They sent data to a server
They did not work offline
They were not responsive

This list gave birth to the primary list of features of Share By Cam.

1. Covers Most Types

I couldn’t find any official documentation from Apple or Google that listed the types of QR codes their OS could detect. I scoured the internet for all available QR code generators and made a union list and built them:

Contact (vCard)
Email
Event (iCalendar)
Link
Location
Phone Call
SMS
Text
WiFi

A developer can also embed an app’s deeplinks (via Text) and initiate actions, making the possibilities infinite.

I also added WhatsApp Message via deeplinking since it is a popular activity that people do.

2. Simpler Forms

I added descriptive pre-filled values and verbose labels wherever necessary. I also attached short videos that explained the process succinctly.

3. No Ads

Clean, focused UI.

4. What Happens On Your Device, Stays On Your Device

I used this library to generate QR codes on the device itself. The data isn’t stored or sent anywhere — not to the URL, not to the local storage and most importantly, not outside your device.

5. Progressive Web App (PWA) for Offline Experience

By making the app a PWA, I enabled installing it as a native app. It also gained the ability to work in airplane mode.

6. Responsive Both Ways

Most people worry about just laptop, tablet and phone screens. I ensured that Share By Cam looked great on larger screens too.

QR codes speed-up the process of data sharing and also remove human error in doing so. Besides using a WiFi QR code to help guests join your network, I also recommend you have an emergency phone call QR code on your fridge or your desk, so you can call it during emergencies instead of looking for the contact buried in your phone. A contact QR code stuck at the back of your phone will also help others save your name and number properly.

I enjoyed writing this PWA and hope you will automate some aspect of your life using it.