Console.log for Images and Canvases

Dmitry Borody — Mon, 21 Sep 2020 16:01:39 +0000

🎉 Just published a tiny NPM library to print images in the browser console!

It's like console.log, but for images: you can print an image from a URL, a Canvas or Image element, or an ImageBitmap.

How to use it



import { initConsoleLogImg } from "console-log-img"

// Run this once to initialize the library
initConsoleLogImg({
  // Optionally, disable image dimensions logging (enabled by default)
  printDimensions: true,
})

// ... later in the code ...

// Print an image from a URI, at original size
console.img("https://openclipart.org/image/800px/5661")

// Print a Canvas at 30% zoom, also log canvas dimensions
const canvas = document.getElementById("my-canvas")
console.img(canvas, 0.3, true)

// Print a CanvasRenderingContext2D
const ctx = canvas.getContext("2d")
console.img(ctx, 0.5)

// Print an ImageBitmap at 100% zoom
const bitmap = await createImageBitmap(canvas)
console.img(bitmap, 1)

// Print an Image DOM element
const imgEl = document.getElementById("my-img")
console.img(imgEl)

DEMO

The code was adapted from various sources and wrapped up in a neat TypeScript library.

Under the hood, it uses some hacks with styled console.log to set the background to the passed image. Check out the source code if you want more.

Why would you want to print images to console?

Easier Debugging

I used it extensively when working on Canvas-heavy apps (e.g. Inkarnate – online fantasy maps editor) to make debugging of Canvas rendering easier.

I think it'll be especially helpful for those working on Canvas visualizations (e.g. generative artists) or other graphical apps like editors or generators.

Other Uses

Hiring banners. You can use it to show some fancy-pants hiring console banners to invite web devs to join your team.
Fraud prevention. Ever seen anti-fraud console banner on Facebook? That's to prevent bad guys from manipulating users into pasting bad things to their browser console.

That's it! Hope you'll find it helpful. 😃

Faster TypeScript compilation in VSCode

Dmitry Borody — Tue, 08 Sep 2020 17:55:28 +0000

TypeScript is slow in VSCode?

We all know how TypeScript can get slow in VSCode 🐌 . Ever found yourself waiting for the compiler to catch up with you as you type new code or fix errors?

This quickly gets frustrating, slowing down your feedback loops (and fast feedback loops are great to keep you happy and motivated!).

Here I'm sharing a simple tip that saved me hours of my life over the last 3 years working with TypeScript codebases (especially large ones!).

I wish I knew it earlier when I was just getting started with TypeScript…

How to fix slow TypeScript compilation

Here’s the trick:

Run a separate TypeScript process in watch mode in a terminal tab.

Keep it running as you write code — it’ll respond to changes and highlight errors a lot faster compared to VSCode.

In my experience, the difference can be striking (see the screenshot). It seems to depend on the project and npm libs it’s using, but the general pattern is pretty consistent across different projects and TS versions I worked with.

Now I don't know exactly how and why this hack works. What's important is that it makes my work life better! 😃

And hopefully yours too.

Integrate with your TypeScript project

Here’s how to make it more convenient to use this trick in your TypeScript projects:

Add these 2 NPM scripts to your package.json:

"scripts": {
  ...
  "typecheck": "tsc",
  "typecheck:watch": "tsc -w"
  ...
}

Now run npm run typecheck:watch in a terminal tab (I like to do it in VSCode’s Terminal panel to keep things in the same window).

This starts a separate TypeScript process in the watch mode. It’ll take some time to start, but it’ll be much faster to re-compile your code incrementally as you change your code.

Use npm run typechek if only need to do the check once. It’ll run faster than the watch mode. I find it handy e.g. before deploying to make sure the build will be succesful.

🙌 That’s it!

I hope this tip helps you to have a faster TypeScript workflow and to be more efficient and happier when coding (it certainly helped me).

Please share your own experiences — did it help you to speed up your workflow?

DEV Community: Dmitry Borody