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

GraphCMS Schema management
GraphCMS Schema management
GraphCMS Schema management of Sumran

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…

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

Photo by Martin Olsen on Unsplash
Photo by Martin Olsen on Unsplash
Photo by Martin Olsen on Unsplash
  1. Access-Control-Allow-Origin: Defines domains that can access your content. MDN link.
  2. Permissions-Policy: Defines permissions your web app can request for. W3C link.
  3. 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.
  4. Strict-Transport-Security: Defines whether or not https:// should be compulsory when accessing your web app. MDN link.
  5. X-Content-Type-Options: Mandates content to be of the type defined. MDN link.
  6. X-Frame-Options: Defines whether or not your web app can be loaded within an iframe

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

Photo by Tyler Lastovich on Unsplash

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

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

FaunaDB logo
FaunaDB logo
FaunaDB logo

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

Suppose you have an article schema like so:

// SchemaArticle {
slug: string;
likes: number;

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

  1. Document reference
  2. Part of the document to be updated

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

  1. Select() with the path to the key, to get the current value
  2. Value to increment/decrement by (1 in our case; pass -1 to decrement)
// QuerydocumentReference; // Assuming this is availableUpdate(…

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

Splitbee Dashboard of Share By Cam
Splitbee Dashboard of Share By Cam
Splitbee Dashboard of Share By Cam

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…

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

Next.js and Tailwind logos
Next.js and Tailwind logos
Next.js & Tailwind logos

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

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…

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.

Photo by David Marcu on Unsplash
Photo by David Marcu on Unsplash
Photo by David Marcu on Unsplash

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:

I talk about common oversights in implementing service workers for PWAs, so you can be prepared when you implement yours.

Cover photo
Cover photo
Photo by Joshua Earle on Unsplash

My dad bought his first vehicle, a scooter, in 2002. On the day of its delivery, as the agent handed over the keys to my dad, he said to us, “Be safe. Ride like your scooter doesn’t have brakes or horn.”

My advice to someone implementing a service worker is somewhat similar — “Deploy it as if it is the last deployment you’ll do.”

I speak from the experience I gained over the past few months building Cinepotato, a serverless…

Karmasakshi Goyal

Here to talk about the Web.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store