DEV Community: Anatolii S.

Material‑UI Icons Built with SVGD Tooling

Anatolii S. — Mon, 21 Jul 2025 13:07:03 +0000

I’m delighted to share @svgd/icons-material — a single‑file Material‑UI icon pack I built with SVGD tooling! By leveraging @svgd/cli and @svgd/core, I’ve consolidated all 10,773 MUI icons into one optimised, tree‑shakable package complete with IDE autocomplete previews.

SVGD Tooling: Powering the Pack

@svgd/cli
A flexible command‑line tool that scans your SVG source folders, extracts and optimises path data, and emits JavaScript/TypeScript constants, HTML previews, Markdown tables, and more. Configure input/output, customise plugins, and generate assets in seconds.
@svgd/core
The runtime library that takes those path‑data constants and re‑creates valid SVG elements at render time. It provides TypeScript typings, embedded Base64 previews for instant IDE feedback, and a simple API:

  import { getPaths } from '@svgd/core';
  const paths = getPaths(iconName);

These tools helped me streamline icon generation, reduce bundle size, and offer immediate visual feedback right in the editor.

Why an SVGD Icon Pack?

IDE‑friendly: See Base64‑encoded previews in autocomplete tooltips.

Fewer requests: One .js and one .ts file instead of thousands of tiny files.

Zero runtime dependencies: Just string constants. You can use any UI framework.

TypeScript support: Complete .d.ts with embedded previews.

Faster builds: Reduced bundler overhead.

Tree‑shakable: Import exactly the icons you need—nothing more.

Installation

npm install @svgd/icons-material
# or
yarn add @svgd/icons-material

If you’re using React + MUI:

npm install react @mui/material

Usage Examples

React

import React from 'react';
import { getPaths } from '@svgd/core';
import MuiSvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
import { Abc } from '@svgd/icons-material';

export function SvgIcon({ icon, ...props }: { icon: string } & SvgIconProps) {
  return (
    <MuiSvgIcon {...props}>
      {getPaths(icon).map((attrs, i) => (
        <path key={i} {...attrs} />
      ))}
    </MuiSvgIcon>
  );
}

// Usage:
<SvgIcon icon={Abc} fontSize="large" color="primary" />;

Vue 3

<template>
  <svg :width="size" :height="size" viewBox="0 0 24 24">
    <path v-for="(attrs, i) in paths" :key="i" v-bind="attrs" />
  </svg>
</template>

<script setup lang="ts">
import { computed, defineProps } from 'vue';
import { getPaths } from '@svgd/core';
import * as icons from '@svgd/icons-material';

const props = defineProps<{ icon: string; size?: number }>();
const paths = computed(() => getPaths(props.icon));
</script>

Angular

// svg-icon.component.ts
import { Component, Input } from '@angular/core';
import { getPaths } from '@svgd/core';

@Component({
  selector: 'svg-icon',
  template: `
    <svg [attr.width]="size" [attr.height]="size" viewBox="0 0 24 24">
      <path *ngFor="let attrs of paths" [attr.d]="attrs.d" [attr.fill]="attrs.fill" />
    </svg>
  `,
})
export class SvgIconComponent {
  @Input() icon!: string;
  @Input() size = 24;
  get paths() {
    return getPaths(this.icon);
  }
}

Use in your templates:

<svg-icon [icon]="icons.Abc" [size]="32"></svg-icon>

Plain JavaScript

<!DOCTYPE html>
<html lang="en">
<body>
  <div id="root"></div>
  <script type="module">
    import { getPaths } from '@svgd/core';
    import { Abc } from '@svgd/icons-material';

    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    svg.setAttribute('viewBox', '0 0 24 24');
    svg.setAttribute('width', '48');
    svg.setAttribute('height', '48');

    getPaths(Abc).forEach(attrs => {
      const path = document.createElementNS(svg.namespaceURI, 'path');
      Object.entries(attrs).forEach(([k, v]) => path.setAttribute(k, v));
      svg.appendChild(path);
    });

    document.getElementById('root')!.appendChild(svg);
  </script>
</body>
</html>

Dive Deeper

@svgd/icons-material: https://www.npmjs.com/package/@svgd/icons-material
@svgd/core: https://www.npmjs.com/package/@svgd/core
@svgd/cli: https://www.npmjs.com/package/@svgd/cli
A Comparison of SVG Icon Management in React JS Projects

I’d love to hear from you: which icon set would you like to see in a similar format?

Revolutionize Your SVG icons Workflow: Store Only the "d" Attribute

Anatolii S. — Mon, 03 Mar 2025 22:00:19 +0000

Working with SVG icons in modern web applications can be a balancing act between design flexibility and bundle size. What if you could drastically reduce your bundle size by storing only the essential data? With @svgd/cli, you don't have to store the entire SVG markup — just the "d" attribute from the <path> tag is enough. This minimalist approach not only keeps your code lean but also boosts performance.

What Is @svgd/cli?

@svgd/cli is a powerful Node.js CLI tool that processes a folder of SVG files and generates exportable constants in multiple formats (JavaScript, TypeScript, Markdown, and HTML). Its standout feature? It extracts and stores only the "d" attribute of the <path> tag from your SVG files. By stripping away unnecessary markup, you can reduce the resulting bundle size significantly.

Why Store Only the "d" Attribute?

In many SVG icons, the vast majority of the visual information is contained within the "d" attribute of the <path> element. By storing just this attribute:

Smaller Bundle Size: The generated file is much smaller because it excludes redundant SVG elements, styles, and metadata.
Faster Load Times: Less code means a leaner bundle, which can improve the overall performance of your application.
Ease of Use: The generated constants are simple strings containing path data, which you can easily integrate with functions that render SVG paths.

For example, a generated constant might look like this:

/**
 * @filepath arrow_circle_down/materialicons/20px.svg
 * @var ![](data:image/png;base64,...) // Icon preview embedded in comment
 */
export const ARROW_CIRCLE_DOWN_MATERIALICONS_20PX = "M12 19.2c-3.972 0-7.2-3.228-7.2-7.2S8.028 4.8 12 4.8s7.2 3.228 7.2 7.2-3.228 7.2-7.2 7.2m0 1.2c4.644 0 8.4-3.756 8.4-8.4S16.644 3.6 12 3.6 3.6 7.356 3.6 12s3.756 8.4 8.4 8.4m.6-8.4V8.4h-1.2V12h-3l3.6 3.6 3.6-3.6z";

Only the essential path data is stored, which can then be used to reconstruct the icon in your application.

Note, each generated constant includes an image preview in its comment block.

Comparison with svgr

While svgr is a popular tool for converting SVGs into React components, it has its trade-offs:

Full SVG vs. Minimal Data: svgr converts the entire SVG into a React component, which often includes all SVG elements, attributes, and sometimes unnecessary metadata. This can lead to larger bundle sizes.
Flexibility vs. Efficiency: svgr is highly flexible, allowing for detailed SVG manipulation within React components. However, if your primary goal is to display icons, you might not need the extra baggage. With @svgd/cli, you get a lean representation by focusing solely on the "d" attribute.
Performance Impact: The minimalistic approach of @svgd/cli results in smaller output files, which means faster load times and a more efficient bundle — crucial for performance-sensitive applications.

In summary, if you’re looking to keep your bundle size down while still having a flexible way to render icons, @svgd/cli offers a compelling alternative to svgr.

Using @svgd/cli from the Command Line

Once installed via npm, the svgd command is at your disposal. Here are some practical examples:

Default Usage

Run the tool with default options:

svgd

This command processes SVGs from the default src/assets/icons directory and generates a JavaScript constants file at src/components/Icon/paths.js.

Custom Input and Output

Specify a custom input folder and output file:

svgd --input ./my-icons --output ./dist/icons.js

Custom Naming and Markdown Documentation

Generate constants in snake_case and produce a Markdown file for icon documentation:

svgd --input ./icons --output ./src/iconPaths.js --format snake_case --md ./icons.md

Single Quotes and TypeScript Declarations

Generate output with single quotes and create a corresponding TypeScript declaration file:

svgd --input ./assets/svg --output ./icons.js --quote --dts

HTML Preview Generation

Create both a JavaScript constants file and an HTML file for visual inspection:

svgd --input ./icons --output ./dist/icons.js --html ./dist/icons.html

Generated Markdown Documentation

One of the neat features of @svgd/cli is the ability to generate a Markdown file that not only lists your icons but also embeds preview images. For instance:

# List of icons
| Source | Name | Path |
|---|---|---|
|  ![](../assets/icons/arrow_circle_down/materialicons/20px.svg) | ARROW_CIRCLE_DOWN_MATERIALICONS_20PX | arrow_circle_down/materialicons/20px.svg |
|  ![](../assets/icons/arrow_circle_down/materialicons/24px.svg) | ARROW_CIRCLE_DOWN_MATERIALICONS_24PX | arrow_circle_down/materialicons/24px.svg |

Integrating Generated Constants in Your React Project

With @svgd/cli, your generated constants are ready to be imported into your React projects. Here’s a brief example:

import { getPaths } from "@svgd/core"
import * as icons from "./icons/icons"

function App() {

  return (
    <>
        <Svg icon={icons.ARROW_CIRCLE_DOWN_MATERIALICONSOUTLINED_20PX} />
        <Svg icon={icons.ARROW_CIRCLE_DOWN_MATERIALICONSTWOTONE_20PX} />
    </>
  )
}

const Svg = ({ icon}: { icon: string }) => (
  <svg width={24} height={24}>
    {getPaths(icon).map((attributes, i) => <path key={i} {...attributes} />)}
  </svg>
)

export default App

In this example, the getPaths function (from @svgd/core) parses the stored "d" attribute to render the icon. The result? A highly efficient way to manage and display icons in your React application.

Example Usage

For a complete example of how to use @svgd/cli, check out the GitHub repository with detailed usage examples and source code:

@svgd/cli Example Usage

Conclusion

By focusing on storing only the "d" attribute, @svgd/cli offers a streamlined, efficient approach to managing SVG icons that can significantly reduce your bundle size without sacrificing quality. When compared to tools like svgr — which convert entire SVGs into React components — @svgd/cli gives you a lean, performance-optimized alternative that’s perfect for icon libraries and design systems.

Give @svgd/cli a try to simplify your SVG workflow, lower your bundle sizes, and enhance your development experience.

Happy coding!

New Rule for Developers: "4096 Tokens" 😊

Anatolii S. — Thu, 06 Feb 2025 15:30:53 +0000

The semantic volume of a module should not exceed 4096 tokens.

In today’s fast-paced development world, creating code that is both efficient and maintainable is more critical than ever. With the increasing integration of AI-driven tools in the development process, ensuring that our code is easily digestible by language models has become an important consideration. Enter the "4096 Tokens" Rule — a simple yet powerful guideline for designing modular software.

What Is the "4096 Tokens" Rule?

At its core, the rule states that the semantic volume of a module should not exceed 4096 tokens. But what does that really mean?

Semantic Volume: Think of it as the meaningful content within a module — the functionality, logic, and purpose wrapped together in a compact, coherent package.
4096 Tokens: This number is inspired by current limitations in language models, which typically can process up to 4096 tokens in one go. By aligning module complexity with this limit, we ensure that each module is small enough to be fully processed and understood by these models.

In practice, adhering to this rule means that developers are encouraged to create modules that are concise, self-contained, and focused on a single responsibility.

Why Adopt This Rule?

1. Self-Containment

When each module handles a distinct piece of functionality independently, it becomes much easier to isolate, test, and maintain. This self-containment promotes:

Easier Debugging: With a smaller, well-defined scope, locating bugs becomes simpler.
Enhanced Reusability: Self-contained modules can be reused across different parts of an application or even in different projects.

2. Clarity

Restricting the semantic volume to a manageable size makes the code more understandable. Clear, concise modules reduce cognitive overload, which is beneficial for both human developers and language models:

Improved Readability: Other developers can quickly grasp what a module does without wading through a sea of code.
Simplified Onboarding: New team members can get up to speed faster when the codebase is modular and well-organized.

3. Seamless Integration

Modules that are digestible by language models can be easily incorporated into automated workflows. This enhances:

Automated Code Analysis: Tools and scripts can analyze code more efficiently when the units are well-defined.
Code Generation: AI-driven code generation becomes more reliable, as the models can fully comprehend the modules they’re working with.

Final Thoughts

The "4096 Tokens" Rule is more than just a numerical guideline — it's a philosophy aimed at creating code that is efficient, clear, and future-proof. By keeping modules compact and focused, we not only make our code easier for language models to process but also improve maintainability, readability, and overall software quality.

Embrace this rule to help guide your modular architecture, and watch as your projects become more scalable and robust. Happy coding!

Feel free to share your thoughts about this rule! :)

Clean Architecture: The Unattainable Ideal – A Parable for Developers

Anatolii S. — Mon, 14 Oct 2024 15:56:29 +0000

Master, how can I achieve perfect cleanliness in my architecture if my use cases are always tied to the language in which they are written?

High in the serene mountains of Tibet, nestled within the quiet halls of an ancient monastery, there lived a young Apprentice. He was deeply devoted to the pursuit of harmony—not only within himself but also in his craft of programming. His goal was to create a perfect application, one that would embody the profound principles of Clean Architecture, like the clarity of a mountain stream. But sensing the immense difficulty of this path, he sought the wisdom of a venerable Master.

The Apprentice approached the Master with humility and asked:

— “Oh, wise Master, I have built an application to manage purchases. Is my architecture clean and pure?”

The Master, observing the student with patient eyes, replied:

— “Show me what you have created, and together we shall discern the truth.”

The Apprentice revealed his work, where the database logic and the flow of use cases were intertwined—business logic woven tightly with the technical framework, like threads in a tangled net.

// app.ts
import sqlite3 from 'sqlite3';
import { open, Database } from 'sqlite';

interface Purchase {
    id: number;
    title: string;
    cost: number;
}

async function initializeDatabase(): Promise<Database> {
    const db = await open({
        filename: ':memory:',
        driver: sqlite3.Database,
    });

    await db.exec(`
    CREATE TABLE purchases (
      id INTEGER PRIMARY KEY,
      title TEXT,
      cost REAL
    )
  `);

    return db;
}

async function addPurchaseIfCan(db: Database, purchase: Purchase): Promise<void> {
    const { id, title, cost } = purchase;
    const row = await db.get<{ totalCost: number }>(
        `SELECT SUM(cost) as totalCost FROM purchases WHERE title = ?`,
        [title]
    );
    const totalCost = row?.totalCost || 0;
    const newTotalCost = totalCost + cost;

    if (newTotalCost < 99999) {
        await db.run(
            `INSERT INTO purchases (id, title, cost) VALUES (?, ?, ?)`,
            [id, title, cost]
        );
        console.log('Purchase added successfully.');
    } else {
        console.log('Total cost exceeds 99999.');
    }
}

(async () => {
    const db = await initializeDatabase();
    await addPurchaseIfCan(db, { id: 3, title: 'rice', cost: 2 });
})();

After contemplating the code, the Master said:

— “Your code is like a river where the clear water of purpose is mixed with the mud of implementation. Business and technical concerns have become one, when they should flow separately. To achieve true purity in your architecture, you must divide them, as the sky is divided from the earth.”

The First Steps on the Path

Heeding the Master’s words, the Apprentice set about the task of restructuring his code. He began to separate the layers, drawing distinct boundaries between the database and the flow of business logic. He also introduced interfaces, aligning his code with the principle of Dependency Inversion, one of the sacred teachings of Clean Architecture. Now, his application no longer depended on specific implementations but on the abstraction of ideas.

// app.ts

import { initializeDatabase } from './db/init';
import { PurchaseRepository } from './db/purchaseRepository';
import { addPurchaseIfCan } from './useCases/addPurchaseIfCan';

(async () => {
  const db = await initializeDatabase();
  const purchaseRepository = new PurchaseRepository(db);

  await addPurchaseIfCan(purchaseRepository, { id: 3, title: 'rice', cost: 2 });
})();

// useCases/addPurchaseIfCan.ts

import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export async function addPurchaseIfCan(
  purchaseRepository: IPurchaseRepository,
  purchase: Purchase
): Promise<void> {
  const { id, title, cost } = purchase;

  const totalCost = await purchaseRepository.getTotalCostByTitle(title);
  const newTotalCost = totalCost + cost;

  if (newTotalCost < 99999) {
    await purchaseRepository.add(purchase);
    console.log('Purchase added successfully.');
  } else {
    console.log('Total cost exceeds 99999.');
  }
}

// useCases/IPurchaseRepository.ts

export interface IPurchaseRepository {
  add(purchase: Purchase): Promise<Purchase>;
  getTotalCostByTitle(title: string): Promise<number>;
}

export interface Purchase {
  id: number;
  title: string;
  cost: number;
}

// db/init.ts

import sqlite3 from 'sqlite3';
import { open, Database } from 'sqlite';

export async function initializeDatabase(): Promise<Database> {
  const db = await open({
    filename: ':memory:',
    driver: sqlite3.Database,
  });

  await db.exec(`
    CREATE TABLE purchases (
      id INTEGER PRIMARY KEY,
      title TEXT,
      cost REAL
    )
  `);

  return db;
}

// db/purchaseRepository.ts

import { Database } from 'sqlite';
import { IPurchaseRepository, Purchase } from 'useCases/IPurchaseRepository';

export class PurchaseRepository implements IPurchaseRepository {
  private db: Database;

  constructor(db: Database) {
    this.db = db;
  }

  async add(purchase: Purchase): Promise<Purchase> {
    const { id, title, cost } = purchase;
    await this.db.run(
      `INSERT INTO purchases (id, title, cost) VALUES (?, ?, ?)`,
      [id, title, cost]
    );
    return purchase;
  }

  async getTotalCostByTitle(title: string): Promise<number> {
    const row = await this.db.get<{ totalCost: number }>(
      `SELECT SUM(cost) as totalCost FROM purchases WHERE title = ?`,
      [title]
    );
    const totalCost = row?.totalCost || 0;
    return totalCost;
  }
}

The Apprentice returned to the Master and asked:

— “I have separated the layers and used interfaces for my repository. Is my architecture now clean?”

The Master, reviewing the code once more, responded:

— “You have taken a step forward, but the calculation of total cost still dwells in the infrastructure, where it does not belong. This is not where such wisdom should reside. The knowledge of total cost belongs to the realm of business, not the tools of the earth. Move it into the use case, where the wisdom of the process may be preserved in its purity.”

The Lesson of Separation

With this insight, the Apprentice realized that the calculation of total cost was part of the business logic. He refactored his code again, moving the logic into the use case, keeping the business concerns free from the grasp of technical infrastructure.

// useCases/IPurchaseRepository.ts

export interface IPurchaseRepository {
  add(purchase: Purchase): Promise<Purchase>;
-  getTotalCostByTitle(title: string): Promise<number>;
+  getPurchasesByTitle(title: string): Promise<Purchase[]>;
}
...

// useCases/addPurchaseIfCan.ts

import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export async function addPurchaseIfCan(
  purchaseRepository: IPurchaseRepository,
  purchaseData: Purchase,
  limit: number
): Promise<void> {
  const { id, title, cost } = purchaseData;

  const purchases = await purchaseRepository.getPurchasesByTitle(title);

  let totalCost = 0;
  for (const purchase of purchases) {
    totalCost += purchase.cost;
  }

  const newTotalCost = totalCost + cost;

  if (newTotalCost >= limit) {
    console.log(`Total cost exceeds ${limit}.`);
  } else {
    await purchaseRepository.add(purchaseData);
    console.log('Purchase added successfully.');
  }
}

// db/purchaseRepository.ts

import { Database } from 'sqlite';
import { IPurchaseRepository } from './IPurchaseRepository';

export class PurchaseRepository implements IPurchaseRepository {

  ...

  async getPurchasesByTitle(title: string): Promise<Purchase[]> {
    const rows = await this.db.all<Purchase[]>(
      `SELECT * FROM purchases WHERE title = ?`,
      [title]
    );
    return rows.map((row) => ({
      id: row.id,
      title: row.title,
      cost: row.cost,
    }));
  }
}

Returning once more to the Master, he asked:

— “I have moved the total cost calculation into the use case and separated the business logic from the infrastructure. Is my architecture now pure?”

With a gentle smile, the Master replied:

— “You have made great progress, but beware—just as the mountain winds carry the chill of winter, your calculations may carry hidden errors. The arithmetic of JavaScript, like the mind of a novice, can be imprecise when dealing with large or small numbers.”

The Encounter with Impermanence

The Apprentice understood that the flaws of floating-point arithmetic in JavaScript could lead to subtle but dangerous mistakes. He revised his code, turning to a more reliable tool, a library designed for accurate calculations, seeking clarity in his work.

// useCases/addPurchaseIfCan.ts
+ import Decimal from 'decimal.js';
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export async function addPurchaseIfCan(
  purchaseRepository: IPurchaseRepository,
  purchaseData: Purchase,
  limit: number
): Promise<void> {
  const { id, title, cost } = purchaseData;

  const purchases = await purchaseRepository.getPurchasesByTitle(title);

  let totalCost = new Decimal(0);
  for (const purchase of purchases) {
-    totalCost += purchase.cost;
+    totalCost = totalCost.plus(purchase.cost);
  }

- const newTotalCost = totalCost + cost;
+ const newTotalCost = totalCost.plus(cost);

- if (newTotalCost >= limit) {
+ if (newTotalCost.greaterThanOrEqualTo(limit)) {
    console.log(`Total cost exceeds ${limit}.`);
  } else {
    await purchaseRepository.add(purchaseData);
    console.log('Purchase added successfully.');
  }
}

Once again, he asked the Master:

— “I have refined my calculations, using a better tool to avoid the errors. Has my architecture now reached its purity?”

The Master, his gaze steady as the mountains, replied:

— “You have done well, yet still, your architecture remains bound. Your business logic now depends on the details of this new tool decimal.js. Should you one day need to change this tool, the foundation of your logic will tremble. True purity is freedom from such bonds.”

The Wisdom of Dependency Inversion

Realizing the depth of the Master’s words, the Apprentice sought to free his code from such attachments. He abstracted the arithmetic operations, inverting the dependencies so that his business logic would no longer be tied to any one tool.

// useCases/calculator.ts
export abstract class Calculator {
  abstract create(a: number): Calculator;
  abstract add(b: Calculator | number): Calculator;
  abstract greaterThanOrEqual(b: Calculator | number): boolean;
}

// useCases/addPurchaseIfCan.ts
+ import { Calculator } from 'useCases/calculator';
- import Decimal from 'decimal.js';
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

// decimalCalculator.ts

import Decimal from 'decimal.js';
import { Calculator } from 'useCases/calculator.ts';

export class DecimalCalculator extends Calculator {
  private value: Decimal;

  constructor(value: number | Decimal) {
    super();
    this.value = new Decimal(value);
  }

  create(a: number): Calculator {
    return new DecimalCalculator(a);
  }

  add(b: Calculator | number): Calculator {
    return new DecimalCalculator(this.value.plus(b.value));
  }

  greaterThanOrEqual(b: Calculator | number): boolean {
    return this.value.greaterThanOrEqualTo(b.value);
  }
}

// useCases/addPurchaseIfCan.ts

import { Calculator } from 'useCases/calculator';
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export class addPurchaseIfCan {
  private purchaseRepository: IPurchaseRepository;
  private calculator: Calculator;
  private limit: string;

  constructor(
    purchaseRepository: IPurchaseRepository,
    calculator: Calculator,
    limit: number
  ) {
    this.purchaseRepository = purchaseRepository;
    this.calculator = calculator;
    this.limit = limit.toString();
  }

  async execute(purchaseData: Purchase): Promise<void> {
    const { id, title, cost } = purchaseData;

    const purchases = await this.purchaseRepository.getPurchasesByTitle(title);

    let totalCost = this.calculator.create(0);
    for (const purchase of purchases) {
      totalCost.add(purchase.cost);
    }

    totalCost = totalCost.add(cost);

    if (totalCost.greaterThanOrEqual(this.limit)) {
      console.log(`Total cost exceeds ${limit}.`);
    } else {
      await this.purchaseRepository.add({
        id,
        title,
        cost: parseFloat(cost.toString()),
      });
      console.log('Purchase added successfully.');
    }
  }
}

Returning to the Master for what he hoped would be the final time, he asked:

— “I have abstracted my operations using dependency inversion, ensuring that my business logic is no longer tied to the implementation. Is my architecture now truly clean?”

The Master spoke:

— “You have traveled far on this path. But remember, even as you strive for purity, your use cases still depend on the language in which they are written. You walk with JavaScript and TypeScript now, but one day these tools may be no more. When that day comes, will you rebuild everything in a new language?”

The Embrace of Imperfection

The Apprentice, puzzled by this realization, asked:

— “Master, how can I achieve perfect cleanliness in my architecture if my use cases are always tied to the language in which they are written?”

The Master, with a soft smile of understanding, answered:

— “Just as a bird cannot leave the sky, architecture cannot be fully separate from the tools of its creation. True independence is a noble dream, but it is unattainable. The pursuit of it, however, brings harmony to your architecture. The goal of Clean Architecture is not to escape all dependencies, but to create a system where change is met with ease, and where the wisdom of business is separated from the workings of the earth. Understanding this balance is the key to true wisdom.”

The Apprentice, feeling the light of understanding dawn within him, said:

— “Thank you, Master. Now I see that perfection is not in isolation, but in the harmony of responsibility and purpose.”

The Master, rising from his seat, replied:

— “Go in peace, Apprentice. Your journey is just beginning, but you have already found your way.”

Epilogue

As time passed, the Apprentice noticed that his application had begun to slow. Confused, he wondered how a system that once ran so smoothly now struggled with its tasks.

It became clear that the issue was not the growing size of the code, but the fact that the total cost calculation was happening outside of the database. The application was spending its strength transferring vast amounts of data, only to perform a task that could have been done at the source. If the calculation had been done within the database, there would have been no need to send thousands of records between layers, and the performance would have remained strong.

The Apprentice wanted to ask the Master about this, but the Master had vanished, and the question remained unanswered.

Looking out over the quiet monastery, the Apprentice picked up a new book and, with a smile, said:

— “It seems my path to enlightenment has led me to a new challenge — the art of performance optimization.”

Чистая Архитектура: Недостижимый Идеал

Anatolii S. — Tue, 08 Oct 2024 16:40:35 +0000

Мастер, как же мне достичь идеальной чистоты архитектуры, если мои сценарии использования всё ещё зависят от языка программирования?

Начало пути

В горах Тибета, в уединенном монастыре, жил молодой Ученик, стремящийся постичь глубины программирования и достичь гармонии в своём коде. Он мечтал создать приложение, которое отражало бы принципы Чистой Архитектуры. Однажды он решил обратиться к мудрому Мастеру за советом.

Ученик подошёл к Мастеру и спросил:

Ученик: "О, мудрый Мастер, я создал приложение для управления покупками. Моя архитектура чиста?"

Мастер: "Покажи мне своё творение, и мы вместе узнаем истину."
Ученик продемонстрировал свой код, где база данных и сценарий использования были объединены.

Код Ученика:

// app.ts
import sqlite3 from 'sqlite3';
import { open, Database } from 'sqlite';

interface Purchase {
  id: number;
  title: string;
  cost: number;
}

async function initializeDatabase(): Promise<Database> {
  const db = await open({
    filename: ':memory:',
    driver: sqlite3.Database,
  });

  await db.exec(`
    CREATE TABLE purchases (
      id INTEGER PRIMARY KEY,
      title TEXT,
      cost REAL
    )
  `);

  return db;
}

async function addPurchaseIfCan(db: Database, purchase: Purchase): Promise<void> {
  const { id, title, cost } = purchase;
  const row = await db.get<{ totalCost: number }>(
    `SELECT SUM(cost) as totalCost FROM purchases WHERE title = ?`,
    [title]
  );
  const totalCost = row?.totalCost || 0;
  const newTotalCost = totalCost + cost;

  if (newTotalCost < 99999) {
    await db.run(
      `INSERT INTO purchases (id, title, cost) VALUES (?, ?, ?)`,
      [id, title, cost]
    );
    console.log('Покупка успешно добавлена.');
  } else {
    console.log('Общая стоимость превышает 99999.');
  }
}

(async () => {
  const db = await initializeDatabase();
  await addPurchaseIfCan(db, { id: 3, title: 'рис', cost: 2 });
})();

Мастер, после изучения кода, задумчиво произнес:

Мастер: "Твой код подобен реке, где смешаны чистые и мутные воды. Бизнес-логика и детали переплетены. Чтобы достичь истинной чистоты архитектуры, раздели их, как небо и землю."

Первые шаги к чистой архитектуре

Поняв наставление, Ученик решил разделить код на уровни, выделяя базу данных и сценарий использования в отдельные модули. Он также ввёл интерфейсы, чтобы следовать принципу инверсии зависимостей, который является краеугольным камнем Чистой Архитектуры. Теперь addPurchaseIfCan будет зависеть от интерфейса, а не от конкретной реализации репозитория.

// app.ts
import { initializeDatabase } from './db/init';
import { PurchaseRepository } from './db/purchaseRepository';
import { addPurchaseIfCan } from './useCases/addPurchaseIfCan';

(async () => {
  const db = await initializeDatabase();
  const purchaseRepository = new PurchaseRepository(db);

  await addPurchaseIfCan(purchaseRepository, { id: 3, title: 'рис', cost: 2 });
})();

// useCases/addPurchaseIfCan.ts
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export async function addPurchaseIfCan(
  purchaseRepository: IPurchaseRepository,
  purchase: Purchase
): Promise<void> {
  const { id, title, cost } = purchase;

  const totalCost = await purchaseRepository.getTotalCostByTitle(title);
  const newTotalCost = totalCost + cost;

  if (newTotalCost < 99999) {
    await purchaseRepository.add(purchase);
    console.log('Покупка успешно добавлена.');
  } else {
    console.log('Общая стоимость превышает 99999.');
  }
}

// useCases/IPurchaseRepository.ts
export interface IPurchaseRepository {
  add(purchase: Purchase): Promise<Purchase>;
  getTotalCostByTitle(title: string): Promise<number>;
}

export interface Purchase {
  id: number;
  title: string;
  cost: number;
}

// db/init.ts
import sqlite3 from 'sqlite3';
import { open, Database } from 'sqlite';

export async function initializeDatabase(): Promise<Database> {
  const db = await open({
    filename: ':memory:',
    driver: sqlite3.Database,
  });

  await db.exec(`
    CREATE TABLE purchases (
      id INTEGER PRIMARY KEY,
      title TEXT,
      cost REAL
    )
  `);

  return db;
}

// db/purchaseRepository.ts
import { Database } from 'sqlite';
import { IPurchaseRepository, Purchase } from 'useCases/IPurchaseRepository';

export class PurchaseRepository implements IPurchaseRepository {
  private db: Database;

  constructor(db: Database) {
    this.db = db;
  }

  async add(purchase: Purchase): Promise<Purchase> {
    const { id, title, cost } = purchase;
    await this.db.run(
      `INSERT INTO purchases (id, title, cost) VALUES (?, ?, ?)`,
      [id, title, cost]
    );
    return purchase;
  }

  async getTotalCostByTitle(title: string): Promise<number> {
    const row = await this.db.get<{ totalCost: number }>(
      `SELECT SUM(cost) as totalCost FROM purchases WHERE title = ?`,
      [title]
    );
    const totalCost = row?.totalCost || 0;
    return totalCost;
  }
}

Ученик вернулся к Мастеру и спросил:

Ученик: "Я разделил свой код на уровни, выделив базу данных и сценарий использования в отдельные модули, и использовал интерфейсы для репозитория. Моя архитектура стала чище?"

Мастер, глядя на код, ответил:

Мастер: "Ты сделал шаг вперёд, но вычисление totalCost всё ещё происходит в инфраструктурном слое. Однако totalCost относится больше к бизнес-логике твоего сценария использования. Перенеси это вычисление внутрь сценария использования, чтобы отделить бизнес-правила от деталей хранения данных."

Осознание разделения

Ученик осознал, что totalCost должен быть частью бизнес-логики. Он изменил код, чтобы получать список покупок и вычислять totalCost в сценарии использования.

// useCases/IPurchaseRepository.ts
export interface IPurchaseRepository {
  add(purchase: Purchase): Promise<Purchase>;
  getPurchasesByTitle(title: string): Promise<Purchase[]>;
}
...

// db/purchaseRepository.ts
import { Database } from 'sqlite';
import { IPurchaseRepository } from './IPurchaseRepository';

export class PurchaseRepository implements IPurchaseRepository {

  ...

  async getPurchasesByTitle(title: string): Promise<Purchase[]> {
    const rows = await this.db.all<Purchase[]>(
      `SELECT * FROM purchases WHERE title = ?`,
      [title]
    );
    return rows.map((row) => ({
      id: row.id,
      title: row.title,
      cost: row.cost,
    }));
  }
}

// useCases/addPurchaseIfCan.ts
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export async function addPurchaseIfTotalCostLessThanLimit(
  purchaseRepository: IPurchaseRepository,
  purchaseData: Purchase,
  limit: number
): Promise<void> {
  const { id, title, cost } = purchaseData;

  const purchases = await purchaseRepository.getPurchasesByTitle(title);

  let totalCost = 0;
  for (const purchase of purchases) {
    totalCost += purchase.cost;
  }

  const newTotalCost = totalCost + cost;

  if (newTotalCost < limit) {
    await purchaseRepository.add(purchaseData);
    console.log('Покупка успешно добавлена.');
  } else {
    console.log(`Общая стоимость превышает ${limit}.`);
  }
}

Ученик снова подошёл к Мастеру:

Ученик: "Я перенёс вычисление totalCost в сценарий использования и отделил бизнес-логику от инфраструктуры. Моя архитектура стала чище?"

Мастер, с теплотой в голосе, сказал:

Мастер: "Ты сделал значительный прогресс, но арифметические операции могут приводить к неточностям. При работе с десятичными числами обычные операции JavaScript могут быть ненадёжными."

Встреча с деталями реализации

Ученик понял, что работа с числами в JavaScript может вызывать ошибки из-за особенностей представления чисел с плавающей точкой. Он обновил код, используя decimal.js для точных вычислений.

// useCases/addPurchaseIfCan.ts
import Decimal from 'decimal.js';
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';

export async function addPurchaseIfCan(
  purchaseRepository: IPurchaseRepository,
  purchaseData: Purchase,
  limit: number
): Promise<void> {
  const { id, title, cost } = purchaseData;

  const purchases = await purchaseRepository.getPurchasesByTitle(title);

  let totalCost = new Decimal(0);
  for (const purchase of purchases) {
    totalCost = totalCost.plus(purchase.cost);
  }

  const newTotalCost = totalCost.plus(cost);

  if (newTotalCost.greaterThanOrEqualTo(limit)) {
    console.log(`Общая стоимость превышает ${limit}.`);
  } else {
    await purchaseRepository.add(purchaseData);
    console.log('Покупка успешно добавлена.');
  }
}

Ученик вернулся к Мастеру:

Ученик: "Я скорректировал арифметические операции с помощью decimal.js, чтобы избежать неточностей. Моя архитектура стала чище?"

Мастер ответил:

Мастер: "Ты проделал хорошую работу, но твой сценарий использования всё ещё содержит детали реализации. Прямая зависимость от decimal.js привязывает бизнес-логику к конкретной библиотеке. Если ты захочешь изменить библиотеку в будущем, тебе придётся менять бизнес-логику."

Инверсия зависимостей

Понимая проблему, Ученик решил абстрагировать арифметические операции, используя инверсию зависимостей, чтобы бизнес-логика не зависела от конкретной реализации.

// useCases/calculator.ts
export abstract class Calculator {
  abstract add(a: string, b: string): string;
  abstract greaterThanOrEqual(a: string, b: string): boolean;
}

// decimalCalculator.ts
import Decimal from 'decimal.js';
import { Calculator } from 'useCases/calculator';

export class DecimalCalculator extends Calculator {
  add(a: string, b: string): string {
    return new Decimal(a).plus(new Decimal(b)).toString();
  }

  greaterThanOrEqual(a: string, b: string): boolean {
    return new Decimal(a).greaterThanOrEqualTo(new Decimal(b));
  }
}

// addPurchaseIfCan.ts
import { IPurchaseRepository, Purchase } from './IPurchaseRepository';
import { Calculator } from 'useCases/calculator';

export class addPurchaseIfCan {
  private purchaseRepository: IPurchaseRepository;
  private calculator: Calculator;
  private limit: string;

  constructor(
    purchaseRepository: IPurchaseRepository,
    calculator: Calculator,
    limit: number
  ) {
    this.purchaseRepository = purchaseRepository;
    this.calculator = calculator;
    this.limit = limit.toString();
  }

  async execute(purchaseData: Purchase): Promise<void> {
    const { id, title, cost } = purchaseData;

    const purchases = await this.purchaseRepository.getPurchasesByTitle(title);

    let totalCost = '0';
    for (const purchase of purchases) {
      totalCost = this.calculator.add(totalCost, purchase.cost.toString());
    }

    const newTotalCost = this.calculator.add(totalCost, cost.toString());

    if (this.calculator.greaterThanOrEqual(newTotalCost, this.limit)) {
      console.log(`Общая стоимость превышает ${this.limit}.`);
    } else {
      await this.purchaseRepository.add({
        id,
        title,
        cost: parseFloat(cost.toString()),
      });
      console.log('Покупка успешно добавлена.');
    }
  }
}

// app.ts
import { initializeDatabase } from './db/init';
import { PurchaseRepository } from './db/purchaseRepository';
import { AddPurchaseIfCan } from './AddPurchaseIfCan';
import { DecimalCalculator } from './decimalCalculator';

(async () => {
  const db = await initializeDatabase();
  const purchaseRepository = new PurchaseRepository(db);
  const calculator = new DecimalCalculator();
  const limit = 99999;
  const addPurchaseUseCase = new AddPurchaseIfCan(
    purchaseRepository,
    calculator,
    limit
  );

  await addPurchaseUseCase.execute({ id: 3, title: 'рис', cost: 2 });
})();

Ученик снова обратился к Мастеру:

Ученик: "Я абстрагировал арифметические операции с помощью инверсии зависимостей. Теперь моя архитектура чиста?"

Мастер ответил:

Мастер: "Ты сделал значительный прогресс. Но помни, что твои сценарии использования всё ещё зависят от деталей языка программирования. Ты используешь Javascript и Typescript, но если эти технологии перестанут быть актуальными, то тебе прийдется полностью все переписать на другой язык."

Принятие и понимание

Ученик в недоумении задумался, а потом спросил:

Ученик: "Мастер, как же мне достичь идеальной чистоты архитектуры, если мои сценарии использования всё ещё зависят от языка программирования?"

Мастер, улыбаясь, ответил:

Мастер: "Как птица не может отделиться от неба, так и архитектура не может быть полностью независимой от среды. Полная независимость невозможна, но стремление к ней обогащает твою архитектуру. Цель Чистой Архитектуры — создать систему, где изменения могут быть внесены с минимальными усилиями, и где бизнес-логика отделена от деталей реализации. Понимание этого баланса — ключ к истинной мудрости."

Ученик почувствовал просветление и сказал:

Ученик: "Благодарю тебя, Мастер. Теперь я понимаю, что совершенство не в абсолютной изоляции, а в гармоничном разделении ответственности."

Мастер: "Иди с миром, Ученик. Твой путь только начинается, но ты уже нашёл направление."

Эпилог

Спустя некоторое время, Ученик заметил, что его приложение стало работать медленнее. Он был озадачен: почему программа, которая раньше работала быстро, теперь еле справляется со своей задачей?

Оказалось, что это вовсе не из-за того, что исходный код увеличился в 3 раза, а из-за того, что вычисление totalCost выполняется не в базе данных. Приложение тратило много ресурсов на пересылку больших объёмов данных из базы данных в приложение и на их обработку. Если бы расчёт происходил непосредственно в базе данных, не требовалось бы передавать тысячи строк между слоями, что значительно ускорило бы процесс.

Ученик хотел обсудить это с Мастером, но тот куда-то пропал, и вопрос остался без ответа.

Увидев пустой монастырь, Ученик достал новую книгу и сказал: "Похоже, мой путь к просветлению привёл меня к новому испытанию — оптимизации производительности."

Simplify SVG Management: Convert Paths to a Single JS File of Constants

Anatolii S. — Sun, 11 Aug 2024 20:02:30 +0000

When building React.js applications, managing SVG icons efficiently is crucial. SVGs provide the scalability and flexibility needed for responsive design, but handling them in large projects can become cumbersome. That’s where svg-path-constants comes in, a CLI tool designed to streamline your SVG workflow by converting SVG paths into reusable constants.

Why SVGs and Why Constants?

In a previous article, "A Comprehensive Comparison of SVG Icon Management Options in React.js Projects", I discussed various methods for managing SVG icons, including inline SVGs, SVG sprites, and using React components for each icon. While each method has its pros and cons, one challenge remains: keeping your SVG paths organized and reusable.

Using constants for SVG paths provide small bundle size and fast build time.

What is `svg-path-constants`?

svg-path-constants is a CLI tool that helps you generate constants from SVG files, making it easier to integrate and manage SVG icons in your React projects. It converts SVG paths into JS constants, supports flexible naming conventions, and allows for customizable output.

Key Features:

Generate Constants from SVG Files: Quickly convert SVG paths into constants.
Flexible Naming Conventions: Supports camelCase, PascalCase, snake_case, and SCREAMING_SNAKE_CASE.
Customizable Output: Generate constants with custom templates and file paths.
Attribute Conversion: Automatically converts SVG attributes like opacity, fill-opacity, stroke, and fill into path strings.
Single or Multiple Outputs: Generate a single output file or multiple files based on your input structure.

Getting Started with `svg-path-constants`

You can start using svg-path-constants immediately with npx:

npx svg-path-constants@latest

Alternatively, you can install it globally or as a dev dependency:

npm install -g svg-path-constants
npm install --save-dev svg-path-constants

Example Usage

Basic Usage

Let’s say you have SVG files in src/assets/icons and want to generate constants in src/components/Icon/paths.js:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

Output Example:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Custom Naming Format

Specify a different naming format, like PascalCase:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js -f PascalCase

Output Example:

// src/components/Icon/paths.js
export const FolderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const FolderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Using a Template for Output

Control the naming and file output with a custom template:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/{-2,-1}/{0}.js -t "{1,-3}"

Output Example:

// src/components/Icon/folder/icon1.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path

// src/components/Icon/folder/icon2.js
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Handling SVG Attributes

svg-path-constants can convert SVG attributes like opacity, fill-opacity, stroke, and fill into components of the path string.

Example SVG:

<svg>
    <path d="M10 10 H 90 V 90 H 10 Z" opacity="0.5" fill-opacity="0.8" stroke="#ff0000" fill="#00ff00"/>
</svg>

Generated Path Constant:

export const myIcon = "o0.5 O0.8 fff000 F00ff00 M10 10 H 90 V 90 H 10 Z";

opacity="0.5" becomes o0.5
fill-opacity="0.8" becomes O0.8
stroke="#ff0000" becomes fff000
fill="#00ff00" becomes F00ff00

This feature allows you to keep essential style information directly within the path string, maintaining a compact and informative representation.

Example: Using SVG Path Constants in a React Component

Once you have generated SVG path constants with svg-path-constants, you can easily integrate them into your React components. This not only keeps your code clean but also allows for easy reuse of SVG paths across your application.

Step 1: Generate SVG Path Constants

Let’s assume you’ve already run the following command to generate constants from your SVG files:

npx svg-path-constants@latest -i src/assets/icons -o src/components/Icon/paths.js

This command generates a file src/components/Icon/paths.js with constants like:

// src/components/Icon/paths.js
export const folderIcon1 = "M10 10 H 90 V 90 H 10 Z"; // Example SVG path
export const folderIcon2 = "M20 20 H 80 V 80 H 20 Z"; // Example SVG path

Step 2: Create a React Component to Render SVGs

Now, let’s create a React component that renders these SVG icons using the generated constants.

import React from 'react';
import { folderIcon1, folderIcon2 } from './paths'; // Import the generated SVG path constants

const parsePathData = (d) => {
    const pathElements = [];
    const pathCommands = d.split(/(o[\d.]+|O[\d.]+|f[0-9a-fA-F]+|F[0-9a-fA-F]+)/); // Split by style commands
    let attributes = null;

    pathCommands.forEach((text, i) => {
        const isCommand = Boolean(i % 2);
        if (isCommand) {
            if (!attributes) {
                attributes = {};
            }
            const match = text.match(/^(o([\d.]+))?(O([\d.]+))?(f([0-9a-fA-F]+))?(F([0-9a-fA-F]+))?$/);

            const [, , opacity, , fillOpacity, , stroke, , fill] = match;
            if (opacity) attributes.opacity = opacity;
            if (fillOpacity) attributes["fill-opacity"] = fillOpacity;
            if (stroke) attributes.stroke = `#${stroke}`;
            if (fill) attributes.fill = `#${fill}`;
            return;
        }
        if (text.trim().length) {
            pathElements.push({ ...attributes, d: text });
        }
    });

    return pathElements;
};


const SvgIcon = ({ d, size = 24, color = 'currentColor', ...props }) => {
    const pathElements = parsePathData(d);

    return (
        <svg
            width={size}
            height={size}
            viewBox="0 0 24 24"
            fill={color}
            xmlns="http://www.w3.org/2000/svg"
            {...props}
        >
            {pathElements.map((attrs, index) => (
                <path key={index} {...attrs} />
            ))}
        </svg>
    );
};

const IconDemo = () => (
    <div>
        <h2>SVG Icon Examples</h2>
        <div>
            <h3>Folder Icon 1</h3>
            <SvgIcon path={folderIcon1} size={48} color="blue" />
        </div>
        <div>
            <h3>Folder Icon 2</h3>
            <SvgIcon path={folderIcon2} size={48} color="green" />
        </div>
    </div>
);

export default IconDemo;

Step 3: Use the Component in Your Application

You can now use the IconDemo component anywhere in your React application to display the SVG icons:

import React from 'react';
import ReactDOM from 'react-dom';
import IconDemo from './components/Icon/IconDemo';

ReactDOM.render(
    <React.StrictMode>
        <IconDemo />
    </React.StrictMode>,
    document.getElementById('root')
);

Explanation:

parsePathData Function:
- It is needed only if you have opacity or multiple colors in the SVG file.
- The parsePathData function processes the extended d attribute string, extracting commands like o (opacity), F (fill color), and f (stroke color).
- It splits the string based on these commands, applies the corresponding attributes, and returns an array of path elements.
SvgIcon Component:
- This component takes a d attribute string, parses it with parsePathData, and renders the SVG paths.
- The component allows customization through props like size and color.
IconDemo Component:
- This is a demo component that shows how to use the SvgIcon component with different d strings, sizes, and colors.

What's Next? Adding Raster Images to Constants

I’m currently working on an npm library that will enhance svg-path-constants by adding raster images (PNGs) as comments above each generated constant. This will provide a visual representation of the icon directly in your code, making it easier to identify and manage SVG paths.

Conclusion

Managing SVG paths in React projects doesn’t have to be a hassle. With svg-path-constants, you can keep your icons organized, your code clean, and your workflow efficient. And soon, with the upcoming library for adding raster images to icon comments, you'll have an even more visual and intuitive way to manage your SVG assets.

Try svg-path-constants today:

npx svg-path-constants@latest

And stay tuned for more updates!

Constants in JS and what do Plato and Aristotle have to do with it

Anatolii S. — Thu, 08 Aug 2024 18:41:36 +0000

It seems to me that juniors view code components as material things, while seniors deal more with ideal categories.
Or maybe it depends on a person's worldview rather than their professional level?

Sometimes during code reviews, I come across code where instead of the constant CAR_WIDTH, the developer used the constant TABLE_WIDTH because it was the first constant he found with a suitable value.

This is a common problem when developers choose a constant based on its value rather than its name. It turned out that the developer doesn't understand the primary purpose of constants. In his view, constants are only for reuse and readability.

Let's recall what Plato and Aristotle had to say about this.

They had their own constant called SHIP_OF_THESEUS.
https://en.wikipedia.org/wiki/Ship_of_Theseus
It was probably named differently in Greek, but we'll write it in Latin and therefore translate it into English.

const SHIP_OF_THESEUS = {
    name: "Ship of Theseus",
    parts: ["mast", "hull", "sail"]
};

The constant SHIP_OF_THESEUS in this example symbolizes the unchanging identity of the Ship of Theseus. Its value, which changes over time, represents the material changes.

// Day 1: Initial state of the ship
const SHIP_OF_THESEUS = {
    name: "Ship of Theseus",
    parts: ["mast", "hull", "sail"]
};

// Day 2: Developer changes one part of the ship
const SHIP_OF_THESEUS = {
    name: "Ship of Theseus",
    parts: ["new mast", "hull", "sail"]
};

// Day 3: Developer changes another part of the ship
const SHIP_OF_THESEUS = {
    name: "Ship of Theseus",
    parts: ["new mast", "new hull", "sail"]
};

// Day 4: Developer changes structure of the part of the ship
const SHIP_OF_THESEUS = {
    name: "Ship of Theseus",
    parts: {
        mast: "new mast",
        hull: "new hull",
        sail: "sail"
    }
};

Ideal (Constant):

SHIP_OF_THESEUS: Every day, this constant represents the ideal essence of the Ship of Theseus. Despite changes in its value, the concept of the ship remains unchanged.

Material (Value of the Constant):

parts: The list of parts of the ship that changes every day. This reflects the material embodiment of the ship, which changes over time.

Plato on Ideal and Material:

The constant SHIP_OF_THESEUS as an ideal form remains unchanged: every day it represents the Ship of Theseus. However, its value (the parts) may change, reflecting material changes.

Aristotle on Form and Matter:

Aristotle would say that the identity of the ship is preserved through its form and function (very similar to duck typing in JS, isn't it?). In our example, although the parts of the ship change, the form of the object (its structure and function) remains unchanged. Every day it is still the same Ship of Theseus, despite changes in its parts.

So what are the actual benefits of using constants?

The main benefit is not readability and reusability. The main benefit is the separation of code into ideal and material (according to Plato) or form and matter (according to Aristotle).

By making this separation, we can change the matter without changing the form.
And we can use the form throughout the program without worrying about matter.

A Comparison of SVG Icon Management in React JS Projects

Anatolii S. — Sun, 04 Aug 2024 19:19:18 +0000

In this article, I'll share the results of an experiment comparing four different methods for working with SVG icons in React projects. The goal was to determine which approach offers the best balance of output file size, build time, and development convenience.

Setup and Methodology

To conduct this comparison, I created four empty projects using Vite and installed the necessary modules for each method. For the icons, I utilized Material UI icons, which are ideal for projects without a need for custom designs, such as admin panels. When custom designs are required, designers usually create unique icon sets. The four methods I explored are:

Pre-built Icon Libraries: Importing icons from the Material UI npm package.
SVG as a Component: Using SVG files directly as components.
SVG Sprite: Compiling icons into a single SVG sprite.
SVG Paths: Storing the path data of SVG icons as constants.

Exclusion of Icon Fonts

Before diving into the comparison, it's important to note that using icons as fonts was not considered in this analysis. While this method was popular in the past, it has become outdated due to various limitations, such as lack of scalability and accessibility issues. Modern projects generally avoid this approach in favor of more flexible and accessible options.

Method 1: Using Pre-built Icon Libraries via npm

For the first method, I imported all the icons from the Material UI npm library and displayed them on the page in a loop. Each icon in the library is exported as a set of JavaScript files. This method is straightforward but doesn't allow for customization.

Method 2: SVG as a Component

In this approach, I used the SVGR plugin to import SVG files as React components. This method is useful when you have custom icons and need to use them as components within your application. However, it resulted in a longer build time due to the need to process a large number of icons.

Method 3: SVG Sprite

SVG sprites are an older but still relevant technique. I generated a sprite file containing all the icons and a JavaScript file with constants for referencing each icon. This method offers quick build times but requires an initial setup script for sprite generation.

Method 4: SVG Paths

The fourth method involves storing only the d attribute of the tag for each icon as a constant. This innovative approach reduces the file size significantly by omitting other SVG elements. However, handling transparency can be tricky, as semi-transparent elements are merged with the main path.

Comparison and Results

Bundle Size

Material UI npm Library: The main part of the bundle consists of minified code, leading to a relatively small size.
SVG as a Component: Slightly larger due to less effective minification.
SVG Sprite: Similar size to SVG components, with additional mapping to sprite IDs.
SVG Paths: The smallest bundle size, as only path data is stored.

Build Time

Material UI npm Library: Built in 20 seconds for 10,000 icons.
SVG as a Component: Slowest, taking a minute and a half for 14,000 icons.
SVG Sprite: Fast, with 14,000 icons built in 13 seconds.
SVG Paths: Fastest, with a significant reduction in build time compared to the other methods (14,000 in 6 seconds).

Development Convenience

Material UI npm Library: Least convenient, as icons are only identified by names.
SVG as a Component: Highly convenient, with the development environment displaying the SVG content.
SVG Sprite: Convenient, as a set of constants with JS documentation and icon images is generated.
SVG Paths: Potentially convenient with proper documentation generation, which could be automated with a script.

Conclusion

Each method has its pros and cons:

Material UI npm Library: Ideal for projects where the provided set of icons is sufficient, with minimal impact on build time.
SVG as a Component: Standard and convenient for React projects, albeit slower in build time.
SVG Sprite: Fast in build time but requires setup for sprite generation.
SVG Paths: Promising for its small bundle size and fast build time, with potential for further optimization.
For simplicity and standard usage, the SVGR plugin is recommended. However, if bundle size and build time are critical, the SVG Paths method is worth exploring further.

Thank you for reading! Let me know in the comments what you think of these methods and if there are other comparisons you'd like to see. If this post receives enough interest, I'll consider publishing the script used for generating SVG Paths.

Supercharge Your SVG Sprite Icons Library with This GitHub Template

Anatolii S. — Mon, 18 Sep 2023 18:34:57 +0000

Hello, awesome developers and designers! 🚀

Ever grappled with the challenges of managing, generating, or publishing your SVG icons as sprites? I've got a gem for you. Introducing a GitHub repository designed for generating and publishing SVG icons. It's a fantastic tool that can automate your icon workflow, and the best part? You can use it as a template for your own projects!

🌟 Features:

SVG Sprite Generation: Automatically generate an SVG sprite from individual SVG icons.
Documentation: Auto-generates documentation for the SVG sprite.
NPM Publishing: With every push to master, the package is updated with a new version on npm.
GitHub Actions Automation: Everything from generation to publishing is automated!
Use your npm library: After publishing, the generated npm module can be easily imported and used in any of your other projects, ensuring consistent iconography across all your applications.

🧠 Under the Hood: react-svg-sprite-generator

Now, the real magic behind this is the module react-svg-sprite-generator. If you're curious about diving deeper into its functionalities, check out my detailed article where I've explored its capabilities extensively.

🛠️ How It Works:

Push to Master: Upon pushing to the master branch, the magic begins.
SVG Generation & Documentation: The SVG sprite is generated along with associated documentation.
NPM Versioning & Publishing: The module version is bumped, and then it’s published to npm with the new version.
Dynamic README.md: The repository README is crafted from a template, followed by a table of the SVG icons generated.

🚀 Getting Started:

This repository is designed not only for immediate use but can also be used as a template for your projects. Here's how:

Using the Repository as a Template:

Visit the simprl/svg-icons-sprite-example repository.
Click on "Use this template" to start a new repository based on this structure.
Modify as required, push your SVG icons, and watch the magic happen!

Some Customizations You Might Consider:

Update the readme.template.md with project-specific details.
Add your SVG icons in the src/assets/icons directory.
Adjust GitHub Actions workflows if you have specific nuances in mind.
Setup NPM_TOKEN if you're looking to publish to npm.

💡 Why Use This?

Managing SVG icons can be daunting. With design changes, icon additions, or removals, managing these manually can be error-prone. With this setup:

Consistency: Maintain a uniform set of icons.
Efficiency: Streamline the icon update process.
Automation: Reduce manual errors and increase productivity.
Collaboration: Designers can push new icons, and the system takes care of the rest!

🤝 Contribution:

Open-source thrives with collaboration. Found a way to enhance this setup? Pull requests are welcome! Let's make this the go-to solution for SVG icon management.

📣 Conclusion:

Icons play a pivotal role in UI/UX design. With this SVG Icons Sprite Generator & Publisher repository, you're not just managing icons; you're crafting an experience. Give it a spin and let the automation simplify your workflow.

Feel free to ask questions, share your experiences, or suggest improvements in the comments below. Let's revolutionize the way we handle SVG icons together! 🌍🌟
Link to the repository

Streamline SVG Sprites in Your React Applications

Anatolii S. — Mon, 28 Aug 2023 19:29:41 +0000

Hello, wonderful devs! If you frequently work with SVG icons in your React projects and find the process of managing and referencing them a bit cumbersome, today's your lucky day. I present to you the react-svg-sprite-generator!

What is react-svg-sprite-generator?

The react-svg-sprite-generator is a CLI tool designed for React.js developers. It helps generate SVG sprites from a directory filled with SVG files, automatically preparing them for use within React applications. The real magic, though? The generated names.js file, which not only contains the constants for your SVG icons but also inline Base64 encoded previews!

Why Use It?

Ease of Use: With a simple command, transform your directory of SVG icons into an organized sprite with accompanying JS and markdown documentation.
IDE Support: In IDEs like VSCode and Webstorm, benefit from autocompletion with actual image previews. It boosts your development speed, especially when selecting icons.
No Memorization: Say goodbye to remembering exact SVG paths or names. With autocompletion and inline previews, pick the right icon every time.

Getting Started

Installation

npm i --save-dev react-svg-sprite-generator

Generate SVG sprite

Simply run:

svgsprite

Or specify source and destination:

svgsprite --src ./path/to/your/svg/directory --dest ./path/for/generated/files

Structure

After the command runs, your icons are now structured in a neat manner, with accompanying JS and markdown documentation.

For instance, with two icons icon1.svg and icon2.svg, you get:

src
└── components
    └── Icon
        ├── sprite.svg
        ├── names.js
        └── Readme.md

Usage in React

import * as IconNames from './names.js';
import spriteUrl from './sprite.svg';

interface IconProps {
    name: (typeof IconNames)[keyof typeof IconNames];
}

const Icon = ({ name }: IconProps ) => {
    return (
        <svg>
            <use href={`${spriteUrl}#${name}`} />
        </svg>
    );
};
export default Icon;

import * as IconNames from './names.js';
import Icon  from './Icon.js';

<Icon name={IconNames.ICON1} />

Wrapping Up

The react-svg-sprite-generator is here to revamp how you deal with SVG icons in React. Try it out and let's make icon management in React a breeze!

If you find the library useful, consider giving it a star ⭐ on GitHub. Feedback, PRs, and issues are always welcome!

Don't Distract Developers

Anatolii S. — Fri, 25 Aug 2023 14:25:59 +0000

Working memory (or operational memory) is a temporary storage of information used for current cognitive tasks. It allows holding and manipulating necessary information while performing various tasks, such as reading, solving mathematical problems, or planning actions.

Main characteristics of working memory

Limited capacity: typically, a person can hold from 5 to 9 pieces of information simultaneously, although this number can vary depending on individual characteristics and the nature of the information.

Temporary storage: information in working memory is retained only for a short period if it isn't used or transferred to long-term memory.

Active processing: working memory doesn't just store information, it also allows for active work with it.

The influence of working memory on a programmer's productivity

Complex tasks: In programming, especially when solving complex problems, one needs to hold many pieces of information at once (e.g., data structures, algorithms, task objectives, etc.). The limited capacity of working memory can make this challenging.

Multitasking: Programmers often switch between different tasks or parts of the code. Constant switching can lead to loss of focus and reduced productivity due to the need to "reload" the working memory.

When a programmer is distracted by tasks not related to programming, it affects their working memory, which in turn impacts productivity. Here's how it happens, taking into account working memory:

Filling up working memory: Working memory has a limited capacity, and a person can only hold a certain number of "units of information" in it at once. When the programmer is distracted, new tasks and information fill up this memory, pushing out the information related to programming.

Context-switching costs: After the distraction, the programmer needs to return to their initial task. This requires "loading" relevant information back into working memory, which can take time and effort.

Loss of focus and 'flow': Distraction can break a state of deep concentration, known as "flow". Returning to this state after distraction takes time and can be complicated due to the load of other tasks in working memory.

Risk of errors: Due to the limitations of working memory and loss of focus, there's an increased risk of making errors when returning to the programming task.

Mental fatigue: Constant distractions and the need for frequent task-switching amplify cognitive load on the brain, leading to rapid mental fatigue.

Thus, distractions, especially those not related to the current programming task, can significantly reduce a programmer's productivity due to the impact on their working memory and ability to retain and process information.

Thanks! Stay productive. Don't distract developers. :)

Redefining List Design: A Bold Approach

Anatolii S. — Sun, 13 Aug 2023 17:12:24 +0000

I asked friends what a line above the blocks signifies.

On one hand, everyone guessed what I meant, but on the other, they all said it's very unintuitive. I agree with that sentiment. I've never come across such a solution before.

Here's one of the responses:

When a programmer comes up with a design, it ends up looking something like when a designer codes algorithms.

Most likely, such a list looks unintuitive because people aren't used to it. I hope over time it will become more familiar, because otherwise I can't fit enough information on a mobile screen.
For instance, compare:

As you can see, on a mobile device with a narrow screen, the fourth level barely fits, and the text is so short that its meaning gets lost. There's no even talking about the fifth level. With my approach, the space for text doesn't decrease.

Essentially, we split the list into two layers and then merge them:

Here are a few more experiments with layering levels onto blocks:

And a few more:

A designer showed me a similar approach on some website, but there the level was shown as a number, not a line. I believe lines are still more illustrative.

I liked this version the most:

Judging by the feedback, it's still too early to use such an approach in a commercial project. But I'll give it a try in my personal project.

What do you think about this method of displaying levels?

DEV Community: Anatolii S.

Material‑UI Icons Built with SVGD Tooling

SVGD Tooling: Powering the Pack

Why an SVGD Icon Pack?

Installation

Usage Examples

React

Vue 3

Angular

Plain JavaScript

Dive Deeper

Revolutionize Your SVG icons Workflow: Store Only the "d" Attribute

What Is @svgd/cli?

Why Store Only the "d" Attribute?

Comparison with svgr

Using @svgd/cli from the Command Line

Default Usage

Custom Input and Output

Custom Naming and Markdown Documentation

Single Quotes and TypeScript Declarations

HTML Preview Generation

Generated Markdown Documentation

Integrating Generated Constants in Your React Project

Example Usage

Conclusion

New Rule for Developers: "4096 Tokens" 😊

What Is the "4096 Tokens" Rule?

Why Adopt This Rule?

1. Self-Containment

2. Clarity

3. Seamless Integration

Final Thoughts

Clean Architecture: The Unattainable Ideal – A Parable for Developers

The First Steps on the Path

The Lesson of Separation

The Encounter with Impermanence

The Wisdom of Dependency Inversion

The Embrace of Imperfection

Epilogue

Чистая Архитектура: Недостижимый Идеал

Начало пути

Первые шаги к чистой архитектуре

Осознание разделения

Встреча с деталями реализации

Инверсия зависимостей

Принятие и понимание

Эпилог

Simplify SVG Management: Convert Paths to a Single JS File of Constants

Why SVGs and Why Constants?

What is svg-path-constants?

Key Features:

Getting Started with svg-path-constants

Example Usage

Basic Usage

Custom Naming Format

Using a Template for Output

Handling SVG Attributes

Example SVG:

Example: Using SVG Path Constants in a React Component

Step 1: Generate SVG Path Constants

Step 2: Create a React Component to Render SVGs

Step 3: Use the Component in Your Application

Explanation:

What's Next? Adding Raster Images to Constants

Conclusion

Constants in JS and what do Plato and Aristotle have to do with it

Let's recall what Plato and Aristotle had to say about this.

Ideal (Constant):

Material (Value of the Constant):

Plato on Ideal and Material:

Aristotle on Form and Matter:

So what are the actual benefits of using constants?

A Comparison of SVG Icon Management in React JS Projects

Setup and Methodology

Exclusion of Icon Fonts

Method 1: Using Pre-built Icon Libraries via npm

Method 2: SVG as a Component

Method 3: SVG Sprite

Method 4: SVG Paths

Comparison and Results

What is `svg-path-constants`?

Getting Started with `svg-path-constants`