Forem: Nikita Makhov

New EyeDropper Web API

Nikita Makhov — Fri, 03 Sep 2021 14:21:30 +0000

So, there is new cool Web API which currently is in draft state, but has all chances to be released in all modern browsers. EyeDropper lets you pick colors not only in your browser, but in other windows, which is cool for online editors like Figma, for example.

You can look at specs here and here.

To try new API we need to download Chrome Canary (the exact support is starting from Chrome 95 version).

First, let's make classic check for Eyedropper support:

if (window.EyeDropper == undefined) {
    console.error('EyeDropper API is not supported on this platform');
}

This will ensure, that we have support of this feature and can go on.

Now, time for magic 🪄

await new EyeDropper().open()

To be more specific, I've prepared a little demo of how this might work.

Adding https to your localhost

Nikita Makhov — Wed, 01 Sep 2021 18:39:49 +0000

Had some troubles with configuring https certificate for my fresh local install of Next.js about a week ago. Luckily, I've found a way, how to deal with it.

First of all, you need to install (if not) Homebrew. Homebrew is a package manager for Mac OS. If you have it, let's install mkcert:

brew install mkcert

Then we need to create new local CA (Certificate Authority):

mkcert -install

After that we'll create certificates for localhost:

mkcert localhost

If everything is fine (usually it is), you will see something like this:

Then we need to install local-ssl-proxy. The package will proxy all requests from https to http with given certificates which we generated before.

npm install -g local-ssl-proxy

Final step. We must start local-ssl-proxy:

local-ssl-proxy --source 3010 --target 3000 --cert localhost.pem --key localhost-key.pem

And then you can navigate to your server via https://localhost:3010.

This guide will especially useful for those who already uses Storyblok Beta V2. They suddenly forbade http protocol and now you can only use https. But they made great instructions, which I've transformed into note for myself to remember.

How to use Cloudinary with Ghost.js

Nikita Makhov — Thu, 29 Jul 2021 12:41:50 +0000

Introduction

Ghost.js - is an open-sourced blog publishing platform built with Node.js (with great help of Handlebars, of course). It has amazing Medium-like inline editor, which is simple and inspiring for writing new content without any hastle.

Cloudinary is "a cloud-based SaaS that provides an end-to-end image and video management solution including uploads, storage, manipulations, optimizations and delivery. All your media resources are optimized and delivered through a fast CDN using industry best practices."

Cloudinary in Ghost.js

Why bothering with another post if everything is in the docs? That's because of specifity of my current task: I want to Ghost.js be on my local machine, uploading all images to Cloudinary and build static front with Nuxt.js.

Well, there is adapter solution which will allow us/me/you to automatically fetch ALL (that's the pit) uploaded images to Cloudinary. It's a good solution except lack of control for my images at the front.

My solution

I've dig Internet a bit/a lot and found my way to fetch images to Cloudinary. First of all, I've modified Ghost config. As it is my local installation, I've used dev config.

"imageOptimization": {
    "cloudinary": {
      "baseUrl": "https://res.cloudinary.com/summertimesadness/image/fetch/f_auto,q_auto"
    }
}

This config is using default imageOptimization object, so there is no need to double-check it's presence in the guts of Ghost.js. Cloudinary settings object is WIP, but it's working fine already.

The second step is to modify/fork/make pr into several Ghost packages, responsible for image set generation. This is not the best way to deal with this problem, but certainly it gives you more control over image content in your blog then using adapter (correct me, if I'm wrong).

So, you'll need to find this package: @tryghost/kg-default-cards/lib/cards/image.js. Then you'll need to change render method a bit:

const { cloudinary } = options.imageOptimization;

const payloadSrc = cloudinary ? `${cloudinary.baseUrl}/${payload.src}` : payload.src;
img.setAttribute('src', payloadSrc);

This will prefix every image src inside your post with Cloudinary fetch url with chosen params.

Next step, you will change the way srcset is generated. Find @tryghost/kg-default-cards/lib/utils/set-srcset-attribute.js module.

srcsetWidths.forEach((width) => {
  if (width === image.width) {
     // use original image path if width matches exactly (avoids 302s from size->original)
     srcs.push(`${image.src} ${width}w`);
  } else if (width <= image.width) {
     // avoid creating srcset sizes larger than intrinsic image width
     if (options.imageOptimization.cloudinary) {
        srcs.push(`${options.imageOptimization.cloudinary.baseUrl},w_${width}/${imagesPath}/${filename} ${width}w`);
     } else {
        srcs.push(`${imagesPath}/size/w${width}/${filename} ${width}w`);
     }
   }
});

After making this code modifications you'll need to ghost restart and reupload images in your posts. Then you'll get (in your static site front) such piece of code in api response:

...
<figure class="kg-card kg-image-card">
  <img src="https://res.cloudinary.com/summertimesadness/image/fetch/f_auto,q_auto/http://localhost:2368/content/images/2021/07/aspect-ratio-3.png" class="kg-image" alt="" loading="lazy" width="944" height="444"
    srcset="https://res.cloudinary.com/summertimesadness/image/fetch/f_auto,q_auto,w_600/http://localhost:2368/content/images/2021/07/aspect-ratio-3.png 600w, https://res.cloudinary.com/summertimesadness/image/fetch/f_auto,q_auto,w_944/http://localhost:2368/content/images/2021/07/aspect-ratio-3.png 944w"
    sizes="(min-width: 720px) 720px">
</figure>
...

PS

This is proof of concept and I'm still searching for ways to achieve my result in better ways. Every ghost update will destroy your code changes (or better say, it will stay in older versions folder). But if you want better PageSpeed Insights metrics, free static site hosting and amazing post editor hosted locally on your laptop - may be this is the way.

Also I hope to read in comments if you had anything related with your static site generator and Ghost.js and how you've solved it. May be together we'll find better way to integrate Cloudinary (or such) service with Ghost.js.

Tailwind 2.0 Dark Mode and Typography

Nikita Makhov — Thu, 19 Nov 2020 21:48:03 +0000

Two days ago new version of Tailwind 2.0 was released with native 'Dark Mode' support. Before 2.0 I used tailwindcss-dark-mode plugin to achieve dark mode support in my home page. And when I tried to upgrade to the latest version, everything broke, especially for @tailwindcss/typography. Why?

First thing that I did - I followed official upgrade guide. The key moments are:

don't forget to change default key to DEFAULT in typography section
dont't forget to move all your settings to extend section of your tailwind.config.js
don't forget to add variant for official tailwind-typography. This was the reason I've created this issue

To be clear, this is my config BEFORE Tailwind 2.0:

// tailwind.config.js
module.exports = {
  purge: {
    enabled: true,
    content: ["./_site/**/*.html"],
  },
  theme: {
    extend: {
      screens: {
        dark: { raw: "(prefers-color-scheme: dark)" },
      },
      colors: {
        dark: "#24283b",
      },
    },
    typography: (theme) => ({
      default: {
        css: {
          color: theme("colors.gray.900"),
          a: {
            color: theme("colors.blue.700"),
            "&:hover": {
              color: theme("colors.blue.700"),
              textDecoration: "none",
            },
          },
        },
      },

      dark: {
        css: {
          color: "#7982a9",
          a: {
            color: "#9ECE6A",
            "&:hover": {
              color: "#9ECE6A",
            },
          },
        },
      },
    }),
  },
  plugins: [
    require("tailwindcss-dark-mode"),
    require("@tailwindcss/typography"),
  ],
};

And this is the Tailwind 2.0 config with full native dark mode support:

// tailwind.config.js
module.exports = {
  darkMode: "media", // you can use 'class' here or turn it off with 'false'
  purge: {
    mode: "all",
    content: ["./_site/**/*.html"],
  },
  theme: {
    extend: {
      colors: {
        dark: "#24283b",
      },

      typography: (theme) => ({
        DEFAULT: {
          css: {
            color: theme("colors.gray.900"),
            a: {
              color: theme("colors.blue.700"),
              "&:hover": {
                color: theme("colors.blue.700"),
                textDecoration: "none",
              },
            },
          },
        },

        dark: {
          css: {
            color: "#7982a9",
            a: {
              color: "#9ECE6A",
              "&:hover": {
                color: "#9ECE6A",
              },
            },
          },
        },
      }),
    },
  },
  variants: {
    typography: ["dark"],
  },
  plugins: [require("@tailwindcss/typography")],
};