Notes about web development from personal blog of Artem Riasnianskyi

Rasterize HTML in Browser

2021-01-02T00:00:00Z

Rasterize HTML in Browser: A Guide to Local Client-Side Solutions

Exploring how to transform HTML content into images locally using browser extensions.

Introduction

Rasterization, the process of converting HTML structure into an image, is akin to taking a screenshot of a web page. While there are services and libraries that enable webpage screenshots for purposes like testing and visual diffing, they often rely on server-side solutions. This article delves into client-side alternatives, offering cost-effective and user-specific rasterization techniques.

Why Client-Side Rasterization?

Client-side rasterization offers two key benefits: cost savings and user-specific rendering. Unlike server-side solutions, it avoids the need for expensive server infrastructure, especially for specific OS requirements like macOS. Moreover, it provides access to user-specific resources like fonts and authenticated pages, ensuring the rasterized image closely matches what users see on their screens.

The Challenges with Screenshots

Screenshots are the most straightforward method of rasterization, but they fall short in flexibility. They can't capture specific page elements conveniently, lack transparency support, and don't adapt well to different screen resolutions, such as retina displays.

Approaches to Rasterization

Canvas Method

Canvas-based solutions render HTML within a canvas element. This method's limitations include browser-dependent font rendering and antialiasing, and the inability to interact with iframe content due to security restrictions. Example: html2canvas.

WebGL Approach

Similar to Canvas, WebGL renders HTML with more intensive GPU effects, offering enhanced visual capabilities. However, it shares similar limitations regarding security and content rendering. Demo: WebGL Filters.

SVG Rendering

This technique involves rendering HTML within an SVG as a foreign object, then using SVG for image creation. It's effective but struggles with external images and styles, and like the other methods, can't bypass iframe security.

Browser Extension Method

Browser extensions can rasterize HTML while addressing color profile and transparency issues. They work by communicating with a client page that requests rasterization and a renderer page that performs the actual rendering.

Communication Steps

Inject a content script to send messages to the extension.
Use the content script to request rasterization.
The extension creates a new window and tab to render and capture the HTML content.

Rasterization Techniques

Tab Screenshot Method

This standard method involves:

Adjusting for screen resolution.
Using chrome.tabs.captureVisibleTab for image capture.
Tackling larger-than-screen images by tiling and scrolling.

Debugger Protocol Method

A more advanced technique using the Chrome Debugger Protocol, offering straightforward transparent background captures. However, it requires exclusive access to the DevTools and prompts a security banner in the browser.

Limitations

Transparency handling is complex.
The Debugger Protocol method impacts other browser functions and displays a prominent security banner.

Saving the Image

Once captured, images can be saved using the chrome.downloads.download function, making the process seamless for end-users.

Conclusion

Client-side rasterization offers a cost-effective, user-specific alternative to server-side solutions. Each method discussed has its own strengths and ideal use cases, with Canvas and WebGL being suitable for most general purposes, and the Debugger Protocol excelling in scenarios requiring transparency.

How to quickly see what was merged in a timeframe (with CLI)

2021-10-09T00:00:00Z

← Back Home

How to quickly see what was merged in a timeframe (with CLI)

Let's say you see some change in chart of your app performance on specific date, and want to know what might be the cause. You can go to Github and check manually merged pull requests sorted by date but you can also speed it up by simple script.

For that you'll need to use Github CLI client. Install it with your favorite package manager and then autorize by running gh auth login

After this go to the folder with repo with you want to check for merges. Then run following command to fetch all merged pull requests in JSON format:

gh pr list --state merged --json mergedAt,title,url --limit 100 >> prs.json

It will create prs.json file that we will use to filter using jq. If you don't have it installed find how to install it on this page To do so run the following command replacing dates with the timeframe you're looking for:

jq --arg s '2021-10-15' --arg e '2021-10-19' '
[($s, $e) | strptime("%Y-%m-%d")[0:3]] as $r
  | map(select(
        (.mergedAt[:19] | strptime("%Y-%m-%dT%H:%M:%S")[0:3]) as $d
          | $d >= $r[0] and $d <= $r[1]
    ))
' prs.json

Source: Stackoverflow

Use case for :has() CSS selector

2022-01-02T00:00:00Z

← Back Home

Use case for :has() CSS selector

To highlight internal interactive elements of some bigger interactive element. For example post card that opens post, but button on that card will add post to favorites.

Previously for this was either using javascript or more complex layout trick with sibling layer overlaying bigger element.

Here is how to do it with few lines of CSS

.outer,
.outer:hover:has(.inner:hover) {
  background-color: white;
}
.outer:hover {
  background-color: #eee;
}
.inner:hover {
  background-color: #eee;
}

Although click event handler still should be captured and stop propagation.

Selector already available in Safari TP and should be added to Firefox and Chromium based browsers this year.

When to use SVG

2022-02-15T00:00:00Z

← Back Home

When to use SVG

SVG are great choose for UI elements like icons and graphic elements that will scale. But if you need to use it as illustration with known dimensions — consider first trying PNG with doubled dimensions (for retina screens) after OxiPNG compression using https://squoosh.app/. You can also reduce amount of colors if it makes sense. The app will show you difference in percentage and if it's not bigger then 25% increase good changes that PNG will perform better. The more elements you have in SVG the more changes that PNG will be better for that image.

The reason for this is performance of huge SVG elements might be not good — SVG adds a lot of complexity to the render pipeline and DOM structure.

If you need to animate or alter parts of SVG, consider extracting only those parts and render them over PNG.

How to programmatically get highlights from Apple Books

2022-02-20T00:00:00Z

← Back Home

How to programmatically get highlights from Apple Books

If you, like me using Apple Books for reading and making notes you may notice that getting highlights is not easy — you can’t just export them using Share Sheet.

Without using third party apps there only one option I know — open Apple Books on desktop, open book highlights in UI and using Command key select highlights and then in context menu use Copy. It will copy highlights in text format with book name, date and copyright info.

It is possible to parse that text data, but there is still manual step — you need to copy highlights from each book. Not cool. Let’s automate it using Javascript and Node.js (well, actually using Typescript and tsm).

First of all let’s create types that we will operate with:

// Book, but could be a sample or an article in PDF
interface Book {
  id: string;
  title: string | null;
  author: string | null;
}

interface Annotation {
  assetId: string; // pointer to Book.id
  quote: string | null;
  comment: string | null;
  chapter: string | null;
  colorCode: number;
  modifiedAt: number;
  createdAt: number;
}

Next step is to extract raw data from origin. It is relatively easy — Apple stores highlights from Apple Books in SQLite DB, so we can access files and read from them everything we want.

We would need to read from 2 sources — one for annotations and another for info about book. We well produce denormalized data — each highlight item will contain book name and author, so it would be easier to process. But in some cases normalized data might be better, feel free to edit.

Let’s prepare out source files:

import glob from "glob";
import os from "os";

const username = os.userInfo().username;
const ANNOTATION_DB_PATH = `/users/${username}/Library/Containers/com.apple.iBooksX/Data/Documents/AEAnnotation/`;
const BOOK_DB_PATH = `/users/${username}/Library/Containers/com.apple.iBooksX/Data/Documents/BKLibrary/`;
const annotationsFiles = glob.sync(`${ANNOTATION_DB_PATH}/*.sqlite`);
const booksFiles = glob.sync(`${BOOK_DB_PATH}/*.sqlite`);

Don’t forget to install dependency glob with

npm i glob

it will help to get all file names in the folders

Next, create SQL query for fetching data in the format we defined earlier. This one will produce Annotation

const SELECT_ALL_ANNOTATIONS_QUERY = `select 
  ZANNOTATIONASSETID as assetId,
  ZANNOTATIONSELECTEDTEXT as quote,
  ZANNOTATIONNOTE as comment,
  ZFUTUREPROOFING5 as chapter,
  ZANNOTATIONSTYLE as colorCode,
  ZANNOTATIONMODIFICATIONDATE as modifiedAt,
  ZANNOTATIONCREATIONDATE as createdAt
from ZAEANNOTATION
where ZANNOTATIONDELETED = 0 
  and ZANNOTATIONSELECTEDTEXT is not null 
  and ZANNOTATIONSELECTEDTEXT <> ''
order by ZANNOTATIONASSETID, ZPLLOCATIONRANGESTART;
`;

And another one for Book

const SELECT_ALL_BOOKS_QUERY = `select 
  ZASSETID as id, 
  ZTITLE as title, 
  ZAUTHOR as author 
from ZBKLIBRARYASSET`;

store them in corresponding variables.

Now time to install something that will actually run this queries:

npm i sqlite sqlite3

Now we can create few helper functions that will handle connection to DB

import sqlite3 from "sqlite3";
import { open } from "sqlite";

async function createDB(filename: string) {
  return await open({
    filename: filename,
    driver: sqlite3.Database,
  });
}

async function getBooksFromDBFile(filename: string): Promise<Book[]> {
  const db = await createDB(filename);
  return await db.all<Book[]>(SELECT_ALL_BOOKS_QUERY);
}

async function getBooks() {
  const books = await Promise.all(booksFiles.map(getBooksFromDBFile));
  return books.flat();
}

async function getAnnotationsFromDBFile(filename: string) {
  const db = await createDB(filename);
  return await db.all<Annotation[]>(SELECT_ALL_ANNOTATIONS_QUERY);
}

async function getAnnotations() {
  const annotations = await Promise.all(
    annotationsFiles.map(getAnnotationsFromDBFile)
  );
  return annotations.flat();
}

And before we can combine everything in one function we need to create another helper for timestamps. Apple uses weird starting point for date, from 2001-01-01, in order to get more conventional unix epoch timestamp we need to convert them:

const APPLE_EPOCH_START = new Date("2001-01-01").getTime();

function convertAppleTime(appleTime: number): number {
  return new Date(APPLE_EPOCH_START + appleTime * 1000).getTime();
}

Alright, now we’re ready to put everything together. We’ll start with fetching Books, then we’ll get Annotations, iterate over them to enrich with Book info and at the end will write JSON with results to output.json file.

(async function main() {
  const books = await getBooks();
  const annotations = await getAnnotations();
  const booksByAssetId: Record<Book["id"], Book> = {};
  const output = annotations.map(
    ({ assetId, modifiedAt, createdAt, ...annotation }) => {
      if (booksByAssetId[assetId] === undefined) {
        booksByAssetId[assetId] = books.find((b) => b.id === assetId);
      }
      const book = booksByAssetId[assetId];
      return {
        ...annotation,
        modifiedAt: convertAppleTime(modifiedAt),
        createdAt: convertAppleTime(createdAt),
        author: book.author ?? "Unknown Author",
        title: book.title ?? "Unknown Title",
      };
    }
  );
  fs.writeFileSync("output.json", JSON.stringify(output));
  console.log("Exported", output.length, "items");
})();

That’s it.

You can find full script at Github Gist

Thanks for reading

How I setup NextJS project

2022-05-28T00:00:00Z

← Back Home

How I setup NextJS project

Quick guide on decoupling from framework's nudged approach

What

I use NextJS for building a web application. It is not a blog or set of landing pages — it is more-less interactive. It has some API, client-side requests and so on, potentially can be even an Electron or React Native app.

NextJS is a remarkable framework to start. It provides countless features out of the box: perfect build system, performance optimization, routing and many others. Plus, using Vercel as hosting is a delightful experience — it provides many nice features even on the free account.

Why

For the web application I want to keep some freedom. In case NextJS will not be the perfect match. Currently it's a full vendor lock. Which is not good for many reasons. Some of them:

What if Vercel will rise prices?
What if Vercel go bankrupt?
What if Vercel decide to focus on some specific features and drop development of ones my project relies on?

These are just a few, but I believe they are important enough to play a bit safer and plan a bit more future-proof architecture for the project.

How

My approach is simple — keep pages as small as possible. And it is inspired by domain-driven design and layered architecture.

So, I put in page files only code that should be there. And all other code that contains business logic, goes into outside files and folders.

Let's check flow from a data/backend perspective:

With clear boundaries, I can change underlaying technologies with less friction. Not only NextJS, but also DB (currently I use Supabase) because all communication with DB is limited to models. And I can even add new clients, like mobile apps.

From frontend side it is a similar situation:

Separating NextJS features (files for Page, App and Document) from the rest of the app.

Page Component only accepts props that needed for rendering, exposing types and unaware of the parent features. Some components down the line might use React Context created in App component.

And I also prefer to separate UI kit layer, so it can be extracted, reused or replaced with less friction.

And my preferred folder structure is looking similar to this:

backend
  ⎣handlers
  ⎣models
client
  ⎣components
  ⎣pages
  ⎣api
pages
  ⎣_app.tsx
  ⎣posts.tsx
package.json

Using manual diagrams to learn new codebase

2022-06-21T00:00:00Z

← Back Home

Using manual diagrams to learn new codebase

When exploring a new codebase, it is difficult to get all the entities and relations between them at the same time. Everything is new, and with each opened file, the brain gets bombarded with new information. That's why I think it is important to unload part of the information to an external carrier. Some kind of map, that will help to navigate the codebase.

Why not automated?

In the past, I was trying to solve this with automated tools. I was looking for something that check all imports/exports and build an interactive graph of dependencies. My primary focus was Javascript (Typescript). And I managed to find tools that partially deliver, but then I realize that they have 3 big downsides.

Limited coverage

Firstly, tools cover only one part of the codebase. Most of what I found was focused on building just dependencies graph. So If you change language or build system — you need to find another solution.

Unidirectional

Tools are also limited because they are mostly unidirectional. They only generate something and that's it — no comments, no questions, no additional connections (the one that are not expressed directly via import/export, but for example calls via HTTP API). Feedback is limited. It is hard to add some additional layer of information.

Informational overload

Another thing, is that automated generation creates more information than needed. There is simply too much stuff happening on the map, and it's not helpful to learn or navigate. The connections in our brain cannot build so quickly, so I found it natural to slow down and to use manual diagrams.

Manual

For each new task or project, I create a new diagram. I try to add some code pointers, like filenames, so I can easily open related files when required. I connect them with labeled lines, that represents call name or relationship status (for example: "extends", "implements", "generates").

Furthermore, I also like to add actors, or people that solving some problem with this code — is it a customer who wants to buy new car insurance, or is it a designer who would like to share their prototype? Sometime actors are mechanical — timer, or some other external event, but it is still helping to understand what is the starting point in the context of the task. And it also helps to understand what are the data shapes.

Tooling

For quick start I use tldraw, it's a simple and lightweight, but well-designed instrument. The downside — no way to share or embed diagram from website. Storage is limited to browser local storage or to file (which is handy to put in code repository and use it with VS Code plugin). Ah, and sometimes bugs occur during image export, not critical, but a bit annoying.

For something more sophisticated, I prefer diagrams.net — it is a powerful, yet adjustable instrument for any kind of diagrams. It's even supporting SQL schema imports. I use it with "sketch" theme and created a set of elements to match ones from tldraw (basically using Caveat Brush font for all texts).

I used to make diagrams with mermaid, but moved away from it, since it's very limiting expression. It's nice to be able to move something with mouse during exploration phase, to add some questions and comments. But it might be a good choice for documenting something established and well known, and put it in code repository — its text format is more readable than tldraw's.

Process

I don't follow any strict process, but there are a few ideas I try to follow in each of the diagrams.

Start

Diagrams should have a start. If I document some process, and it has one or multiple entry points it is crucial to mark the where to start looking at diagram, it is the same place where process starts, or at least the most important part of the process. It can be form submission, it can be a webhook call, template for code generation, message from the message queue, etc.

Roles

Second — show roles or actors. As mentioned above. It's important to show (or at least imagine) goals of each actor in the process. For simple flows or codebase, it can be only one actor.

Questions and answers

Questions are a critical part of learning. If something is not clear, I immediately put a sticky note next to it with a question. I use yellow for questions. Later, when I continue to explore the system, I can find the answer to my question and just put a new sticky note (green one) next to the question with answer. Occasionally, I can't find a clear answer — then I try to find somebody more knowledgable in the area and setup a meeting to follow all remaining question stickies.

Don't confuse signals with answers

2024-07-15T00:00:00Z

← Back Home

Don't confuse signals with answers

Is 100% test coverage an answer that you code has no bugs? No. It's a signal that certain parts of the system behave in a way that is not broken. It is not guarantee that system as a whole works, even if you have some integration tests. There are still some edge cases. But having good test coverage is preferrable, because it is usually a strong signal that codebase is well treated.

Here is another example. How much code did you ship in the last month? If you didn't write much, is it an answer that you didn't work? No. But it's a signal that shows that you might need more attention — maybe you're blocked, or maybe you're working on a big project and most of contributions are to the RFCs.

When you ask for advice you don't ask for definitive answer. For example you might ask a friend, do I look good in this jacket? Their answer is a signal. You might agree or disagree with it. It might be possible that 1 friend said the jacked does not suit you, but 5 other said it sits perfectly. It's up to you to decide for yourself.

Same with AI answers — it can provide some signal (opinion) to the question asked, but it might be missing some important context details or it might have more context then needed. So it's again up to you to how you gonna use that signal, if you agree or disagree with it.

Similar with performance metrics for the website. If we improve it would it result in better sales? Was it only the performance or also the marketing campaign with 50% discounts that happened at the same time? Or maybe it was our competitor's website that was down for 10 hours? Some metrics are too abstract to give an answer. Having multiple levels metrics helps to identify stronger signal, and A/B testing also helps to improve signal strength.

For a lot of questions we only have signals. Some strong, some weak, but it's rarely a definitive answer. It takes time to shift to this mindset, but it helps to understand world better and helps to keep calm in unexpected situations.

On the impact of AI on the software engineering industry

2026-01-18T00:00:00Z

← Back Home

On the impact of AI on the software engineering industry

Share on Mastodon

As someone who used LLMs for coding since 2023 I've seen insane progress with that tools. To the point of existential threat to software engineering occupation.

AI generated code is extremely cheap. And currently it is used to solve problems that are relevant for the time when we didn't have extremely cheap AI generated code. Some problems won't be relevant anymore, some approaches to monetization won't be relevant anymore. If company didn't have a moat like a network effect, market dominance, huge regulatory compliance, etc — it's cooked. It feels like we are heading to the market correction in coming years.

Hiring

New companies starting today don't need new engineers in the amounts before. The founders think differently, they might need product designers and AI enabled engineers at 1-1 ratio. Designers will create high fidelity prototypes, and engineers will mostly productionize these prototypes (with help of AI of course). I believe 1-10 ratio from the previous times is over. On one hand it seems positive, as it reduces risks of starting a new business, but one the other hand the competition will be severe and many companies might just not get big enough to compete with established giants.

The established giants will adapt AI coding assistance on unprecedented pace. It will help them to keep and widen their moat. The inertia will help here to keep current jobs, but hiring will be drastically reviewed. In the markets with less job protections layoffs will continue. To hire new engineers teams will have to proof that they need a new problem solver, new AI orchestrator, that currently they are at their capacity and spinning another cloud agent AI will not help.

Personal apps

Additionally to that we might not even need that many software. Like how many personalized fitness plans apps are out there? How many of them actually adapting to user needs (like traveling or recovering after sickness)? Can it be solved with AI better?

It might not be the best interface and not best advice, but it is already good enough for many use cases. And critique will only serve as a direction of improvement for AI apps.

Productivity

My assumption here is that AI tools indeed increase productivity in the medium to long run, not just being useful for flashy demos. Last year I heard a lot on this, and information was a bit skeptical, meaning companies running AI pilots reported improving productivity only by 10% in best case.

Will see how it will have this year, as I observed tools quality increased dramatically in practical cases (e.g. I don't care how good it is for solving PhD math problems, but I care how good it is in solving my problems and it is usually solving them quite well).

Also I've seen how good local models can be, just running Mistrals 8b on my old MacBook Air M1 with 16Gb RAM — quite comparable to state-of-the-art a year ago. Other open source and open weights models also available to run on own hardware.

This year I've already seen change in opinions from the industry heavyweights like Linus Torvalds or DHH. And some other notable people like Kent Beck, Martin Fowler, the whole O'Reily publishing house are already on board. The question now is not if AI tools are useful, but what impact they will have have on the industry.

Future

And it does not look good. Software industry is reminding agriculture industry before industrial revolution. We definitely need it and it will definitely grow, but we won't need that many people working there. But the problem that change is happening much faster, and people won't be able to adopt. I've been working as a software engineer for past 17 years, but right now it feels that the industry in the current state have maybe just a couple of years left.