Sergey Todyshev's Blog RSS Feed

Resume

Mon, 16 Dec 2024 00:00:00 GMT

Sergey Todyshev
Senior Software Engineer | AI-Powered Systems | Cloud Architecture
Batumi, Georgia (open to relocation)
stodyshev@gmail.com | linkedin.com/in/sergeytodyshev | github/sergeyt

Summary

20+ years of full-stack engineering experience, specializing in AI applications, cloud-native systems (AWS), and high-performance data platforms.
Architected and delivered core features for AI sales tools at Regie.ai, directly contributing to a 40% increase in user adoption for the Co-pilot product.
Led technical teams of up to 15 engineers, modernized legacy systems to cut build times by 60%, and solved critical scalability bottlenecks for enterprise clients.
Expert in Node.js/TypeScript, Java/C#, React, Golang, and AWS with a record of shipping robust, cross-platform solutions.
Skills: Node.js, TypeScript, React, Java, C#, NestJS, Golang, Rust, AWS, MongoDB, PostgreSQL, ElasticSearch, Docker, CI/CD, Microservices, System Architecture, Performance Optimization.

Experience

REGIE.AI

Senior Software Engineer (Oct 2020 – Aug 2025)

As one of founding engineers built AI-native Sales Enablement Platform
Architected Auto-pilot backend with NestJS + MongoDB, powering automated multi-step campaigns for 1,000+ enterprise users.
Drove 40% adoption growth of Co-pilot by slashing API response times and streamlining React components.
Halved bug resolution times by rolling out standardized logging/monitoring with New Relic + Sentry.
Team size: 10+ (distributed team)
Tools: NodeJS, NestJS, TypeScript, React, Jest, Webpack, AWS, MongoDB, Metabase

GrapeCity

Tech Lead (Oct 2018 - Oct 2020)

Led a distributed team of 7 engineers in the development of DataViewsJS, a JavaScript data presentation library used by Fortune 500 clients.
Cut build times 60% and reduced pre-release bugs 40% by migrating from JavaScript to more modular TypeScript codebase and adding Jest & Playwright automated testing.
Proved a 5x performance gain with Rust + WebAssembly prototype for spreadsheet calcs, influencing product roadmap.
Tools: NodeJS, ExpressJS, TypeScript, React, Angular, VueJS, Jest, Webpack

Xored

Tech Lead (Jan 2016 - Jun 2018)

Led and mentored a team of 15 engineers developing Spirent Velocity, a Lab Automation Platform for a major telecommunications client.
Eliminated outages by re-architecting PostgreSQL transactions, hitting 99.9% uptime and preventing churn.
Cut feature cycles from 8 to 4 weeks by automating CI/CD and creating a shared React component library.
Team size: 20+ (distributed team)
Tools: Java, PostgreSQL, ElasticSearch, WildFly, Apache Kafka, React, AngularJS, Python, Golang

DataWorks - Reporting Solutions

Full-Stack Software Engineer (Jun 2007 - Jan 2016)

Boosted legacy report rendering 10x by re-engineering the C# engine and optimizing layout and data processing subsystems.
Authored PageFX compiler compiler, an open-source .NET → Adobe Flash compiler, enabling cross-platform reporting.
Team size: 20+ (distributed team)
Tools: C#, .NET, WinForms, JavaScript, React, Knockout, jQuery, Microsoft SQL Reporting Services

IAE - Research Lab

Software Engineer (Jun 2002 - Aug 2007)

Developed C++ and C# software for automated Circle Laser Writing Systems (CLWS), including hardware abstraction layers and client-server architecture for system control.
Tools: C++, Windows DDK, C#, WinForms

Education

Novosibirsk State University

Master’s Degree (Sep 1999 – Jun 2004)

Faculty: Information Technologies
GPA: 4.0+
Focus: Computers, Complexes, Systems, and Networks

Institute of Automation and Electrometry

PhD Student (Jun 2004 – Aug 2007)

Accomplishments:

Modernized software for Circle Laser Writing Systems (CLWS)
Developed hardware abstraction layers for CLWS
Designed and implemented client/server architecture and built desktop user interfaces using C++ MFC and C# WinForms
Built specialized tools for interferometry and tomography (voxcat)

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Small update of CV micro-app

Mon, 08 Nov 2021 00:00:00 GMT

TL;DR you can CV page at here

I’ve updated the CV micro-app I mentioned sometime ago in this post. The major addition is support of CodersRank profile as data source.

Now you can specify src query parameter to take data from CodersRank. After that the page can fetch the data and render it. For example, src=cr-sergeyt will render the data for sergeyt username. You can see it in action.

Enjoy! EOF :)

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Lets build mini Google Drive clone quickly

Sat, 24 Jul 2021 00:00:00 GMT

TL;DR you can find code at https://github.com/sergeyt/multidisk

I am going to show you how to relatively quickly build a small Google Drive app or kind of that. I know “Google Drive” may sound a bit provocative, but it is done just to raise some chunk of your attention 😄. Also believe me or not but I’ve done the app within few mornings (yep I am morning person 😄). Below is some details about what I’ve done and how.

High level idea

The idea is simple. I’d like to build a unified UI for all my drives. For sake of simplicity I selected only few platforms as a starting point:

Uploadcare - nice and quite new one with simple APIs and have free plan
Dropbox - I assume no need any introduction

Lets call it MultiDisk, it is like https://www.odrive.com/, but built for the Web using quite modern tech stack.

What I’ve done so far

In terms of features the app includes the following capabilities:

Allow managing multiple drives
Uploading, downloading and deleting files
At this point I’ve implemented drives for Uploadcare and Dropbox, but I’d like to add support for Google Drive, etc. Especially if the app gains some attention

You can just briefly watch this short video to have more vision about the features mentioned above.

Tooling

To build the app I’ve chosen the following tools:

TypeScript - I prefer having types from the start of any project nowadays. The reason for this could be discussed separately 😄. Maybe just because I started typed programming first
Uploadcare - new one for me, lets learn something new together
Next.js - no need any introduction as well
Material UI - good React framework with plenty of components. Maybe later I’ll refactor the app to use Chakra UI since it looking promising to me too

All tools are well known to me except Uploadcare and Dropbox APIs. Great, it is a learning opportunity then.

How I’ve done this

My steps were:

Project bootstrapping
Drive abstraction
Uploadcare Drive implementation
Dropbox Drive implementation
Few UI pages

That is it. Lets dive in and cover each step with some additional text.

Project bootstrapping

According to this Next.js doc it is easy peasy as just running npx create-next-app command in your shell and you are literally done 😄

Drive interfaces

It is time for pumping this post with some code 😄. I’ve come up with the following interfaces to abstract any drive and its objects. These abstractions are needed to unify different storage providers.

export type ItemType = "file" | "folder";

export interface Item {
  type: ItemType;
  id: string;
  name: string;
  path: string;
  driveId: string;
}

export interface File extends Item {
  size: number;
  createdAt: Date;
  url?: string;
  download?: () => Promise<any>;
}

export interface Drive {
  options: any;
  provider: string;

  getItems(folderId?: string): Promise<Item[]>;
  deleteFile(fileId: string): Promise<void>;
  deleteFolder(folderId: string): Promise<void>;
}

Implementation of UploadcareDrive

The API docs of Uploadcare can be found at https://uploadcare.com/api-refs/rest-api/v0.5.0/.

We will just use axios to make HTTP requests and I did not find any typed client for my needs. I happy to do a small NPM package for Uploadcare API client. I know about this one, but currently it is more focussed on uploading and downloading files and it does not cover all features of Uploadcare API. Maybe just need to request it on github 😄

import axios from "axios";
import { Drive, File, Item } from "../types";
import { checkResponseOK } from "./utils";

type Options = {
  type: string;
  id: string;
  name: string;
  publicKey: string;
  secretKey: string;
};

export default class UploadcareDrive implements Drive {
  private _options: Options;

  constructor(options: Options) {
    this._options = options;
  }

  get options(): Options {
    return this._options;
  }

  get provider() {
    return this.options.type;
  }

  get id() {
    return this.options.id;
  }

  get name() {
    return this.options.name;
  }

  axios() {
    return axios.create({
      headers: {
        Accept: "application/vnd.uploadcare-v0.5+json",
        Authorization: `Uploadcare.Simple ${this.options.publicKey}:${this.options.secretKey}`,
      },
    });
  }

  async getItems(folderId?: string): Promise<Item[]> {
    const resp = await this.axios().get("https://api.uploadcare.com/files/");
    checkResponseOK(resp);
    return resp.data.results.map(
      (f) =>
        ({
          type: "file",
          driveId: this.id,
          id: f.uuid,
          name: f.original_filename,
          createdAt: new Date(f.datetime_uploaded),
          url: f.original_file_url,
          size: f.size,
        } as File)
    );
  }

  async deleteFile(fileId: string): Promise<void> {
    const resp = await this.axios().delete(
      `https://api.uploadcare.com/files/${fileId}/`
    );
    checkResponseOK(resp);
  }

  deleteFolder(folderId: string): Promise<void> {
    return Promise.resolve(undefined);
  }
}

Implementation of DropboxDrive

Dropbox has a wonderful docs with even interactive playground called API explorer. I’ve implemented the version of DropboxDrive that used short-lived token without refreshing token capability. Sorry about that, maybe next time I’ll find a time to revise that.

Here a code of current version:

import axios from "axios";
import trimStart from "lodash/trimStart";
import { Drive, Item, File } from "../types";
import { checkResponseOK, downloadBlob, trimPrefix } from "./utils";

type Options = {
  type: string;
  id: string;
  name: string;
  accessToken: string;
};

export default class DropboxDrive implements Drive {
  private _options: Options;

  constructor(options: Options) {
    this._options = options;
  }

  get provider() {
    return "dropbox";
  }
  get id() {
    return this.options.id;
  }
  get name() {
    return this.options.name;
  }
  get options() {
    return this._options;
  }

  async getItems(folderId: string = ""): Promise<Item[]> {
    if (!folderId.startsWith("/")) {
      folderId = "/" + folderId;
    }
    const resp = await this.axios().post(
      "https://api.dropboxapi.com/2/files/list_folder",
      {
        path: folderId === "/" ? "" : folderId,
      }
    );
    checkResponseOK(resp);
    return resp.data.entries.map((entry) => {
      if (entry[".tag"] === "file") {
        return {
          type: "file",
          id: trimPrefix(entry.id, "id:"),
          name: entry.name,
          path: entry.path_display,
          createdAt: new Date(entry.server_modified),
          driveId: this.id,
          size: entry.size,
          download: async () => {
            const resp = await this.axios().post(
              "https://content.dropboxapi.com/2/files/download",
              undefined,
              {
                headers: {
                  "Dropbox-API-Arg": JSON.stringify({ path: entry.id }),
                },
                responseType: "blob",
              }
            );
            downloadBlob(resp.data, entry.name);
          },
        } as File;
      }
      return {
        type: "folder",
        id: trimStart(entry.path_display, "/"),
        name: entry.name,
        path: entry.path_display,
        driveId: this.id,
      } as Item;
    });
  }

  async deleteFile(fileId: string): Promise<void> {
    const resp = this.axios().post(
      "https://api.dropboxapi.com/2/file_requests/delete",
      {
        ids: [fileId],
      }
    );
    checkResponseOK(resp);
  }

  deleteFolder(folderId: string): Promise<void> {
    return Promise.resolve(undefined);
  }

  axios() {
    return axios.create({
      headers: {
        Authorization: `Bearer ${this.options.accessToken}`,
        "Content-Type": "application/json",
      },
    });
  }
}

Application UI

MVP version of the app has only few pages and few dialogs:

Home page with list of drives
Drive detail page with list of files
New drive dialog
Confirmation dialog for delete actions

Home Page

We will use SWR for data fetching recommended by Next.js folks. The home has straightforward implementation. Here a full script of the Home Page:

import isEmpty from "lodash/isEmpty";
import useSWR from "swr";
import { getDrives } from "../core/store";
import Loader from "../components/Loader";
import Placeholder from "../components/Placeholder";
import DriveList from "../components/DriveList";

export default function Home() {
  const { data: drives } = useSWR("/drives", getDrives);
  if (!drives) {
    return <Loader />;
  }

  if (isEmpty(drives)) {
    return (
      <Placeholder>
        You don't any drives, but you can create one clicking on ADD DRIVE
        button
      </Placeholder>
    );
  }

  return <DriveList drives={drives} />;
}

Where DriveList component is coded as follow:

import Link from "next/link";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import { SiDropbox as DropboxIcon } from "react-icons/si";
import { FiHardDrive as DriveIcon } from "react-icons/fi";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import List from "@material-ui/core/List";
import { Drive } from "../types";
import DriveMenu from "./DriveMenu";

export default function DriveList({ drives }: { drives: Drive[] }) {
  const items = drives.map((d, k) => (
    <Link href={`/drive/${d.id}`} key={k}>
      <ListItem style={{ cursor: "pointer" }}>
        <ListItemAvatar>
          <Avatar>
            <Icon type={d.provider} />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary={d.name} secondary={d.provider} />
        <ListItemSecondaryAction>
          <DriveMenu driveId={d.id} />
        </ListItemSecondaryAction>
      </ListItem>
    </Link>
  ));
  return <List>{items}</List>;
}

const Icon = ({ type }) => {
  switch (type) {
    case "dropbox":
      return <DropboxIcon />;
    default:
      return <DriveIcon />;
  }
};

Drive View page

Also it is simple as it is:

import { useRouter } from "next/router";
import useSWR from "swr";
import { Box } from "@material-ui/core";
import { getDrive } from "../../core/store";
import Loader from "../../components/Loader";
import ItemList from "../../components/ItemList";
import Uploader from "../../components/Uploader";

export default function DriveView() {
  const router = useRouter();
  const { driveId, folder: folderId } = router.query;

  const key = folderId
    ? `/drive/${driveId}?folder=${encodeURIComponent(String(folderId))}`
    : `/drive/${driveId}`;
  const { data } = useSWR(key, async () => {
    const drive = await getDrive(String(driveId));
    const items = await drive.getItems(folderId ? String(folderId) : "");
    return { drive, items };
  });
  if (!data) {
    return <Loader />;
  }

  return (
    <>
      <Box m={2} mb={2}>
        <Uploader drive={data.drive} />
      </Box>
      <ItemList data={data.items} />
    </>
  );
}

Where Uploader component is coded as:

import { mutate } from "swr";
import { Widget } from "@uploadcare/react-widget";
import { Drive } from "../types";

export default function Uploader({ drive }: { drive: Drive }) {
  if (drive.provider === "uploadcare") {
    return (
      <>
        <label>Upload a file:&nbsp;</label>
        <Widget
          publicKey={drive.options.publicKey}
          onChange={() => {
            mutate(`/drive/${drive.id}`);
          }}
        />
      </>
    );
  }
  return null;
}

And ItemList component is implemented as:

import isEmpty from "lodash/isEmpty";
import List from "@material-ui/core/List";
import { Item, File } from "../types";
import FileItem from "./FileItem";
import FolderItem from "./FolderItem";
import Placeholder from "./Placeholder";

export default function ItemList({ data }: { data: Item[] }) {
  if (isEmpty(data)) {
    return (
      <Placeholder>
        This drive is empty, but you can fill it out with something :)
      </Placeholder>
    );
  }

  const items = data.map((item, k) => {
    switch (item.type) {
      case "file":
        return <FileItem key={k} item={item as File} />;
      case "folder":
        return <FolderItem key={k} item={item as Item} />;
      default:
        return null;
    }
  });
  return <List>{items}</List>;
}

As you might noticed uploading file is implemented just using Uploadcare widget - another big time saver which is nice.

How I’ve done Dialogs?

Do you really wanna read the code for dialogs? It should be boring. And maybe it should be enough for this blog post 😄

Anyway you can be gone to the github repo and have some fun consuming additional bits of information 😄

Next Steps

Next time probably I’ll try adding more features in the application like:

Google Drive
AWS S3 Drive
Framework-agnostic File Manager web component. Maybe using Angular elements
Folders
Just improving UX like making wizard to create a drive
Better authorization, maybe making official Dropbox or Google apps
Storing drive connections in Mongo Cloud to persist config across different devices (maybe paid feature 😄)

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

My CodersRank Profile

Sun, 02 May 2021 00:00:00 GMT

CodersRank is nice auto-profile for developers based on open source contribution. I have one generated for me. Please take a look at https://profile.codersrank.io/user/sergeyt/.

Also CodersRank is capable to generate beautiful CV. Here is mine in PDF format.

It is not an add of CodersRank. It is kind of ad for my profile 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

About JavaScript at CompTechNSK 2019

Sun, 25 Apr 2021 00:00:00 GMT

I did workshop for JavaScript at CompTechNSK 2019. Slides are available at the following internet address (warning: content is in Russian).

Also I was a mentor of a group students which was capable to build a mobile app (kind of Messenger) in one week using Flatter framework and using Pandora as backend.

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

About golang at CompTechNSK 2018

Sun, 25 Apr 2021 00:00:00 GMT

It was second time I was invited to CompTechNSK and decided to speak about golang since at that time I was kind of small Golang fan. BTW I am still fan of Golang, but now it is a bit a small love 😄

My presentation was quite funny enough. Slides are available at the following internet address (warning: content is in Russian).

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

LinguaBook March Update

Sat, 20 Mar 2021 00:00:00 GMT

TL;DR;

As you might know I am building micro application called LinguaBook. I’ve updated it and now it it is more usable.

Major Updates

UI is composed using Chakra UI library
Added Multiple word lists. Also you can build your own word list for learning
Improved data scraper adding new source like compromise

Next Updates

Make Chrome Extension to use LinguaBook on many sites
Try package LinguaBook as KaiOS web app

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Micro app for learning languages

Sun, 24 Jan 2021 00:00:00 GMT

I am building a micro app for learning Ogden’s Basic English. It is open source project with code available on github.

Under the hood it is heavily using my Just-in-Time scraper (my another open source project). This scrapper parses HTML pages from multiple sources in the browser and the parsed results are displayed on the page.

Here are some ideas for making the app even better:

infinite feed with all words displayed as instagram-like cards
ignoring known words
wrapping it into mobile app using React Native or KaiOS
multi-language support
adding more word lists for advanced users

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Micro app to render your JSON resume

Sun, 10 Jan 2021 00:00:00 GMT

Last time I’ve quickly made a React component to render JSON resume. Now I’ve extended the CV page to consume external resumes making the page to be a micro application. And now you can specify src query parameter to specify your resume. You can simply store your resume as Github Gist like mine one. For example src=c9dcfa1b37dec07fb2ee7f36d7278105 is an url to display Thomas Davis’s resume.

Next possible steps:

support more sections from JSON resume
make the page to be mobile friendly
make the page to be ready for printing

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

React component to render JSON Resume

Sun, 03 Jan 2021 00:00:00 GMT

In this post I am going to show a React component to render JSON Resume. As usual enough words, see the code 😄

import React from 'react';
import { Github, Linkedin } from '@icons-pack/react-simple-icons';
import { DateTime } from 'luxon';

const Resume = ({ resume, style }) => {
  return (
    <div
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        ...style,
      }}
    >
      <div style={{ display: 'flex' }}>
        <div style={{ width: 300, marginRight: 80 }}>
          <div style={{ display: 'flex', justifyContent: 'center' }}>
            <img
              src={resume.basics.picture}
              style={{ height: 150, borderRadius: '100%' }}
            />
          </div>
          <div>
            <h3 style={{ marginBottom: '0.5em' }}>SUMMARY</h3>
            <p>{resume.basics.summary}</p>
          </div>
          <div style={{ marginBottom: '0.5em' }}>
            <h3 style={{ marginBottom: '0.5em' }}>CONTACT &amp; PROFILES</h3>
            <div>
              <a href={`mailto:${resume.basics.email}`}>
                {resume.basics.email}
              </a>
            </div>
            <div>{resume.basics.phone}</div>
            <div>
              <a href={resume.basics.website} target="_blank">
                {resume.basics.website}
              </a>
            </div>
            {(resume.basics.profiles || []).map((p, k) => (
              <div key={k}>
                <a
                  href={p.url}
                  target="_blank"
                  style={{ display: 'inline-flex', alignItems: 'center' }}
                >
                  <Icon url={p.url} />
                  {p.username}
                </a>
              </div>
            ))}
          </div>
          {isEmpty(resume.languages) ? null : (
            <div style={{ marginBottom: '0.5em' }}>
              <h3 style={{ marginBottom: '0.5em' }}>LANGUAGES</h3>
              {(resume.languages || []).map((item, k) => (
                <div key={k}>
                  <span>{item.language}</span>
                  <Tag>{item.fluency}</Tag>
                </div>
              ))}
            </div>
          )}
          {isEmpty(resume.interests) ? null : (
            <div>
              <h3 style={{ marginBottom: '0.5em' }}>INTERESTS &amp; HOBBIES</h3>
              {(resume.interests || []).map((item, k) => (
                <div key={k}>
                  <span>{item.name}</span>
                  <div>
                    {(item.keywords || []).map((tag, k) => (
                      <Tag key={k} color="secondary">
                        {tag}
                      </Tag>
                    ))}
                  </div>
                </div>
              ))}
            </div>
          )}
        </div>
        <div>
          <div style={{ marginTop: 40 }}>
            <h1>{resume.basics.name}</h1>
            <h5 style={{ textTransform: 'uppercase', marginTop: -20 }}>
              {resume.basics.label}
            </h5>
          </div>
          <div style={{ marginTop: 70, marginBottom: '1em' }}>
            <h3 style={{ marginBottom: '0.5em' }}>SKILLS</h3>
            {(resume.skills || []).map((item, k) => (
              <div key={k}>
                <div>
                  <strong>{item.name}</strong>
                  <Tag>{item.level}</Tag>
                </div>
                <div>
                  {(item.keywords || []).map((tag, k) => (
                    <Tag key={k} color="secondary">
                      {tag}
                    </Tag>
                  ))}
                </div>
              </div>
            ))}
          </div>
          <Education education={resume.education || []} />
          <Experience items={resume.work || []} />
          <Experience items={resume.volunteer || []} />
        </div>
      </div>
    </div>
  );
};

const Icon = ({ url }) => {
  const size = 20;
  const style = { marginRight: 4 };
  const u = url.toLowerCase();
  if (u.indexOf('github') >= 0) {
    return <Github size={size} color="black" style={style} />;
  }
  if (u.indexOf('linkedin') >= 0) {
    return <Linkedin size={size} color="black" style={style} />;
  }
  return null;
};

const Experience = ({ items }) =>
  isEmpty(items) ? null : (
    <div style={{ marginTop: '0.5em' }}>
      <h3 style={{ marginBottom: '0.5em' }}>WORK EXPERIENCE</h3>
      {items.map((item, k) => (
        <div key={k} style={{ position: 'relative' }}>
          {items.length === 1 ? null : (
            <Timeline isLast={k === items.length - 1} />
          )}
          <h3 style={{ marginBottom: 0 }}>{item.position}</h3>
          <h5
            style={{
              margin: '2px 0',
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <a href={item.website} target="_blank">
              {item.company || item.organization}
            </a>
            <Period startDate={item.startDate} endDate={item.endDate} />
          </h5>
          <p>{item.summary}</p>
        </div>
      ))}
    </div>
  );

const Education = ({ education }) =>
  isEmpty(education) ? null : (
    <div style={{ marginTop: '0.5em' }}>
      <h3 style={{ marginBottom: '0.5em' }}>EDUCATION</h3>
      {education.map((item, k) => (
        <div key={k} style={{ position: 'relative' }}>
          {education.length === 1 ? null : (
            <Timeline isLast={k === education.length - 1} />
          )}
          <h3 style={{ marginBottom: 0 }}>{item.institution}</h3>
          <h5
            style={{
              margin: '2px 0',
              display: 'flex',
              justifyContent: 'space-between',
            }}
          >
            <a href={item.website} target="_blank">
              {item.website}
            </a>
            <Period startDate={item.startDate} endDate={item.endDate} />
          </h5>
          <p>{item.area}</p>
        </div>
      ))}
    </div>
  );

const Timeline = ({ isLast }) => {
  return (
    <>
      <div
        style={{
          position: 'absolute',
          width: 24,
          height: 24,
          border: '1px solid var(--textLink)',
          borderRadius: '100%',
          left: -30,
          top: 3,
          padding: 6,
        }}
      >
        <div
          style={{
            width: 10,
            height: 10,
            backgroundColor: 'var(--textLink)',
            borderRadius: '100%',
          }}
        ></div>
      </div>
      {isLast ? null : (
        <div
          style={{
            position: 'absolute',
            width: 2,
            left: -19,
            top: 26,
            bottom: -31,
            backgroundColor: 'var(--textLink)',
          }}
        ></div>
      )}
    </>
  );
};

const Period = ({ startDate, endDate }) => (
  <span style={{ width: 130 }}>
    <span>
      {DateTime.fromFormat(startDate, 'yyyy-MM-dd').toFormat('MMM yyyy')}
    </span>
    <span>&nbsp;-&nbsp;</span>
    <span>
      {endDate
        ? DateTime.fromFormat(endDate, 'yyyy-MM-dd').toFormat('MMM yyyy')
        : 'now'}
    </span>
  </span>
);

const Tag = ({ color, children }) => {
  return (
    <span
      style={{
        backgroundColor: color === 'secondary' ? '#48BFE3' : 'var(--textLink)',
        color: 'white',
        borderRadius: 4,
        padding: '0px 4px 2px 4px',
        marginLeft: 4,
        boxSizing: 'border-box',
        fontSize: 'smaller',
        fontWeight: 'bold',
      }}
    >
      {children}
    </span>
  );
};

function isEmpty(a) {
  return !a || a.length === 0;
}

The final result can be seen here.

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

How to wait for animations to complete in Playwright script

Tue, 15 Sep 2020 00:00:00 GMT

In this post I am going to show a function to wait for animations to complete in Playwright test script. As usual enough words, just try to apply the code below 😄

async function waitNoMutations(page, selector) {
  return await page.evaluateHandle(function (selector) {
    var list = document.querySelectorAll(selector);
    var elements = [].slice.call(list);
    var config = { attributes: true, childList: true, subtree: true };
    var mutations = 5; // wait at least five intervals

    var observer = new MutationObserver(function () {
      mutations += 1;
    });
    elements.forEach(function (target) {
      observer.observe(target, config);
    });

    var decrementInterval = setInterval(function () {
      mutations -= 1;
      if (mutations <= 0) {
        clearInterval(decrementInterval);
      }
    }, 5); // this quant might be reduced?

    function complete() {
      return mutations <= 0;
    }

    return new Promise(function (resolve) {
      var count = 0;
      var completeInterval = setInterval(function () {
        if (count >= 1000) { // timeout?
          clearInterval(completeInterval);
          observer.disconnect();
          resolve("timeout");
          return;
        }
        if (complete()) {
          clearInterval(completeInterval);
          observer.disconnect();
          resolve(true);
          return;
        }
        count += 1;
      }, 5);
    });
  }, selector);
}

This works, but not in 100% cases 😄

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Telepromter Sample

Fri, 07 Aug 2020 00:00:00 GMT

Hey, I’m Sergey. I’ve been busy in software engineering for over 20 years, working on everything from AI-driven systems to large-scale cloud platforms. Most recently I was one of the first engineers at Regie.ai, where I helped build and scale their AI-native sales enablement platform.

Over the years, I’ve worked with a wide range of technologies — Node.js, TypeScript, React, Golang, AWS - you name it. I like solving tricky problems especially around performance and scalability, and I really enjoy building things that people actually use.

Along the way, I’ve led teams, modernized legacy systems, and built tools relied on by Fortune 500 companies. Earlier, I even built a binary-level cross-compiler and helped evolve Spirent Velocity - a lab automation platform that powers 5G network delivery accross Europe with partners like Nokia.

Excited to connect, share ideas, and work on cool projects together.

Thank you for watching, and have a great day!

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

How to add style loaders to webpack

Wed, 05 Aug 2020 00:00:00 GMT

In this post I am going to show how to configure webpack adding support for SASS and CSS files. It is slightly inspired by this post, but implemented as standalone module that you can easily to add your project.

Install dependencies

Step one.

Single line script for NPM:

npm install --save-dev autoprefixer css-loader mini-css-extract-plugin postcss-loader postcss-preset-env sass-loader source-map-loader style-loader

Single line script for Yarn:

yarn add --dev autoprefixer css-loader mini-css-extract-plugin postcss-loader postcss-preset-env sass-loader source-map-loader style-loader

Webpack Configuration

Step two. Copy below code to file and name it as webpack.sass.js;

const path = require("path");
const ExtractPlugin = require("mini-css-extract-plugin");

const NODE_ENV = process.env.NODE_ENV || "development";
const isDevelopment = NODE_ENV === "development";

const postcssLoader = {
  loader: "postcss-loader",
  options: {
    plugins: [require("autoprefixer")({}), require("postcss-preset-env")({})],
  },
};

const sassOptions = {
  outputStyle: "expanded",
  includePaths: [path.resolve(__dirname, "node_modules")],
};

const sassLoader = {
  loader: "sass-loader",
  options: { sassOptions },
};

const rules = [
  {
    test: /\.css$/,
    use: [
      "source-map-loader",
      isDevelopment ? "style-loader" : ExtractPlugin.loader,
      "css-loader",
      postcssLoader,
    ],
  },
  {
    test: /\.scss$/,
    use: [
      "source-map-loader",
      isDevelopment ? "style-loader" : ExtractPlugin.loader,
      "css-loader",
      postcssLoader,
      sassLoader,
    ],
  },
];

module.exports = function withSass(config) {
  if (!config.module) {
    config.module = {};
  }
  if (!config.resolve) {
    config.resolve = {};
  }
  config.resolve.extensions = [...(config.resolve.extensions || []), ".scss"];
  config.module.rules = [...(config.module.rules || []), ...rules];
  config.plugins = [
    ...(config.plugins || []),
    new ExtractPlugin({
      filename: isDevelopment ? "[name].css" : "[name].[hash].css",
      chunkFilename: isDevelopment ? "[id].css" : "[id].[hash].css",
    }),
  ];
  return config;
};

Step three. Modify webpack.config.js as following pattern:

const withSass = require("./webpack.sass.js");

// your base webpack config goes here
const baseConfig = {
    /// ...
};

// extend webpack config
const config = withSass(baseConfig);

module.exports = config;

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Sponsor

Tue, 04 Aug 2020 00:00:00 GMT

You can support my work I am doing for free in free time by the following ways:

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

createState function using React Context and ImmerJS

Mon, 03 Aug 2020 00:00:00 GMT

In this post I am going to show a function for global state management in React applications using React Context and ImmerJS. It is heavily inspired by this post.

Enough words, please read the final code :)

import React, { useContext, useEffect, useReducer } from "react";
import { useRouter } from "next/router";
import produce from "immer";
import mapValues from "lodash/mapValues";

type Children = { children?: any };
type ProviderFC = React.FC<Children>;

type MutationFn<T> = (state: Partial<T>) => void;
type Mutations<T> = {
  [name: string]: (state: T, ...args: any[]) => void;
};

type Update<T, M extends Mutations<T>> = { setState: MutationFn<T> } & M;
type UseStateResult<T, M extends Mutations<T>> = [T, MutationFn<T>, M];
type UseStateFn<T, M extends Mutations<T>> = () => UseStateResult<T, M>;

export default function createState<T, M extends Mutations<T>>(
  {
    initialState,
    loadState = () => Promise.resolve(initialState),
  }: {
    initialState: T;
    loadState?: () => Promise<T>;
  },
  mutations?: M
): [ProviderFC, UseStateFn<T, M>] {
  const StateContext = React.createContext<T>(initialState);
  const UpdateContext = React.createContext<Update<T, M>>(null as any);

  function Provider({ children }) {
    const router = useRouter();
    const [state, update] = useReducer(produce, initialState);
    const mutate = update as any;

    const setState = (newState: Partial<T>) => {
      mutate((target: any) => {
        Object.assign(target, newState);
      });
    };

    const actions = mapValues(mutations, (fn) => (...params: any[]) => {
      mutate((target: any) => {
        fn(target, ...params);
      });
    });

    const loadAsync = async () => {
      const newState = await loadState();
      mutate((target: any) => {
        Object.assign(target, newState);
      });
    };

    // TODO avoid this effect if loadAsync is not defined
    useEffect(() => {
      loadAsync();
    }, [router.pathname]);

    return (
      <UpdateContext.Provider value={{ setState, ...actions } as any}>
        <StateContext.Provider value={state as any}>
          {children}
        </StateContext.Provider>
      </UpdateContext.Provider>
    );
  }

  function useState(): UseStateResult<T, M> {
    const { setState, ...mutations } = useContext(UpdateContext);
    return [useContext(StateContext), setState, mutations as any];
  }

  return [Provider, useState];
}

The createState function can be used as follow:

// auth state
const initialState = {
  id: "",
  name: "",
  email: "",
  is_owner: false,
  is_admin: false,
  is_authenticated: !!getApiToken(),
};

type State = typeof initialState;

const [UserProvider, useUser] = createState({
  initialState,
  loadState: fetchAuthState,
});

export { UserProvider, useUser };

async function fetchAuthState(): Promise<State> {
  if (!getApiToken()) {
    return initialState;
  }
  try {
    const resp = await api.me();
    return {
      ...initialState,
      ...resp.data,
      is_authenticated: true,
    };
  } catch (err) {
    return initialState;
  }
}

// example login page
function LoginPage() {
   const [_, setUser] = useUser();
   const handleSubmit = async () => {
       const resp = await api.login(form);
       setUser({
            ...omit(resp.data, ['token', "token_expired_at"]),
          is_authenticated: true,
       });
   };
   return <div> Login Form </div>
}

The example is truncated a bit to save your time.

This function allows specifying custom typed mutations as an object with functions accepting current state to be mutated. This can be optionally used to decompose a reducer function with big switch into smaller mutation functions. And you don’t need to define actions, just define functions with parameters.

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Jamstack comments

Fri, 24 Jul 2020 00:00:00 GMT

My site is a Jamstack site. It is built using GatsbyJS powered by ReactJS. In this post I gonna show how you can add a free comments to your site with the following pretty simple steps.

Use Reddit as a service that stores comments.
Implement React component that shows reddit Comments.
Integrate component to the blog post template

React Component

We gonna use NextJS useSWR hook to fetch comments from reddit re-post. Here a code snippet of this component.

import React from 'react';
import useSWR from 'swr';
import moment from 'moment'; // to render relative time of the comment
import ContentLoader from 'react-content-loader'; // to render nice loader

export default function RedditComments({ reddit }) {
  if (!reddit) {
    return null;
  }
  const { data, error } = useSWR(reddit, fetcher);
  if (error) {
    // TODO render error
    return null;
  }
  const comments = data ? (
    data.map((item, i) => <Comment key={i} data={item.data} level={0} />)
  ) : (
    <Loader />
  );
  return (
    <div className="reddit">
      <a className="heading" href={reddit} target="_blank">
        Comments
      </a>
      {comments}
    </div>
  );
}

The full source code is available here.

Component Integration

I’ve added a reddit metadata to each post having a reddit re-post. After that I’ve extended a blog post template to render comment block.

// ...
import Reddit from '../components/Reddit';

const BlogPostTemplate = ({ pageContext }) => {
  let {
    // ...
    // new metadata
    reddit,
  } = pageContext;

  // ... computing more state like translations

  return (
      <Layout>
        {/* main content is omitted */}
        <footer>
            <Reddit reddit={reddit}/>
            {/* other footer blocks */}
        </footer>
      </Layout>
  );
};

And voila it amazingly works.

Enjoy! 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Efficient parsing of JSON record sets in Rust

Fri, 17 Jul 2020 00:00:00 GMT

JSON record set is an array of objects. serde_json crate does not provide fast solution to parse it out of the box, but you can do something I came up with. I use StreamDeserializer and custom handling to skip array symbols like ’[’ or ’,‘.

The code:

use crate::Error;
use async_std::io::SeekFrom;
use byteorder::ReadBytesExt;
use serde_json::{Deserializer, Map, Value};
use std::io::{Read, Seek};

type Record = Map<String, Value>;

pub struct JsonRecords<'de, R>
where
    R: Read + Seek,
{
    reader: &'de mut R,
    is_array_start: bool,
}

impl<'de, R> JsonRecords<'de, R>
where
    R: Read + Seek,
{
    #[inline]
    pub fn new(reader: &'de mut R) -> Self {
        Self {
            reader,
            is_array_start: true,
        }
    }

    #[inline]
    fn skip_array_start(&mut self) -> Result<(), Error> {
        self.skip_char(b'[')?;
        self.is_array_start = false;
        Ok(())
    }

    fn skip_char(&mut self, val: u8) -> Result<(), Error> {
        self.skip_ws()?;
        let c = self.reader.read_u8()?;
        if c != val {
            return Err(Error::Parse(format!(
                "expect '{}', but was '{}'",
                val, c
            )));
        }
        Ok(())
    }

    fn skip_ws(&mut self) -> Result<(), Error> {
        loop {
            let c = self.peek()?;
            match c {
                b' ' | b'\n' | b'\r' => {
                    self.discard();
                    continue;
                }
                _ => break,
            }
        }
        Ok(())
    }

    #[inline]
    fn peek(&mut self) -> Result<u8, Error> {
        let result = self.reader.read_u8()?;
        self.reader.seek(SeekFrom::Current(-1))?;
        Ok(result)
    }

    #[inline]
    fn discard(&mut self) {
        self.reader.read_u8().unwrap();
    }

    #[inline]
    fn read_record(&mut self) -> Option<Result<Record, Error>> {
        let de = Deserializer::from_reader(&mut self.reader);
        let mut stream = de.into_iter();
        match stream.next() {
            None => None,
            Some(t) => match t {
                Ok(v) => Some(Ok(v)),
                Err(e) => Some(Err(e.into())),
            },
        }
    }
}

impl<'de, R> Iterator for JsonRecords<'de, R>
where
    R: Read + Seek,
{
    type Item = Result<Record, Error>;

    fn next(&mut self) -> Option<Self::Item> {
        if self.is_array_start {
            match self.skip_array_start() {
                Err(e) => return Some(Err(e)),
                Ok(()) => {}
            }
        }
        match self.skip_ws() {
            Err(e) => return Some(Err(e)),
            Ok(()) => {}
        }
        loop {
            match self.peek() {
                Err(e) => return Some(Err(e)),
                Ok(c) => match c {
                    b']' => {
                        self.discard();
                        let _ = self.skip_ws();
                        return None;
                    }
                    b',' => {
                        self.discard();
                        self.skip_ws().unwrap();
                        continue;
                    }
                    b'{' => return self.read_record(),
                    _ => {
                        return Some(Err(Error::Parse(format!(
                            "expected '{{' or ']', but got '{}'",
                            c as char
                        ))))
                    }
                },
            }
        }
    }
}

#[cfg(test)]
mod tests {
    use crate::json_records::JsonRecords;
    use crate::Error;
    use std::io::Cursor;

    #[test]
    fn test_json_array() -> Result<(), Error> {
        let json = "[{\"a\": 1}, {\"a\": 2}]";
        let mut cursor = Cursor::new(json.as_bytes().to_vec());
        let array = JsonRecords::new(&mut cursor);
        for rec in array {
            println!("{:?}", rec?);
        }
        Ok(())
    }
}

This allows to avoid allocation of intermediate vector for a bit faster processing of large datasets.

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Data Miner

Wed, 15 Jul 2020 00:00:00 GMT

TL;DR see the code at https://github.com/lingvograph/dataminer/blob/master/Program.cs#L18

This small program takes YAML file that defines how to parse HTML page and outputs tuples of structured data.

Sample YAML file to extract data from Macmillan Dictionary:

- selector: .PRON
  term: transcription
# tags
- selector: .PART-OF-SPEECH
  uniq: true
  term: tag
- selector: .SYNTAX-CODING
  unique: true
  term: tag
- selector: .DEFINITION
  term: definition
- selector: .EXAMPLES
  term: in
- selector: .PHR-XREF
  term: in
- selector: .synonyms .theslink
  exclude: "..."
  term: synonym
- selector: .audio_play_button
  audio:
    - "@data-src-mp3"
    - "@data-src-ogg"

And the core part of parser looks like:

private static async Task Parse(DataSource src, Input input)
{
    var url = src.Url(input);
    var config = Configuration.Default.WithDefaultLoader();
    var context = BrowsingContext.New(config);
    var doc = await context.OpenAsync(url);
    var root = src.Schema.RootNode as YamlSequenceNode;
    if (root == null)
    {
        throw new InvalidOperationException("Expect list of nodes");
    }

    IEnumerable<object> Exec(YamlMappingNode query)
    {
        var selector = query["selector"].ToString();
        var term = query.Get("term");
        var audio = query.Get("audio");
        var exclude = query.Get("exclude")?.ToString();
        var uniq = query.Get("uniq")?.ToString() == "true";
        var set = new HashSet<string>();
        foreach (var elem in doc.QuerySelectorAll(selector))
        {
            if (term != null)
            {
                var name = term.ToString();
                var text = elem.TextContent.Strip();
                if (exclude != null && text.Equals(exclude)) continue;
                if (uniq && set.Contains(text)) continue;
                yield return $"({name},lang={input.Lang},text=\"{text}\")";
                if (uniq) set.Add(text);
                continue;
            }

            if (audio is YamlSequenceNode seq)
            {
                foreach (var cmd in seq.Children.Select(t => t.ToString()))
                {
                    var val = (cmd.StartsWith("@")
                        ? elem.GetAttribute(cmd.Substring(1))
                        : elem.TextContent);
                    val = val.Strip();
                    if (string.IsNullOrEmpty(val))
                    {
                        continue;
                    }

                    yield return $"(audio,url=\"{val}\")";
                }
            }
        }
    }

    foreach (var child in root.Children.OrEmpty())
    {
        var query = child as YamlMappingNode;
        if (query == null)
        {
            Console.Error.WriteLine("skip node {0}", child);
            continue;
        }

        foreach (var result in Exec(query))
        {
            Console.WriteLine(result);
        }
    }
}

Status

It is prototype and pretty much experimental code. It can be easily modified for your needs

Tools

It is done with:

.NET - it needs dotnet runtime for execution
CSharp - yeah it is implemented in C# language
AngularSharp - core thing to parse HTML and traverse the document tree
YamlDotNet - YAML parser

Enjoy! EOF 😄

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

ActiveReports

Tue, 05 May 2020 00:00:00 GMT

I have amazing time working on ActiveReports products together with talented guys from dataworks.co.

This report generator is fastest and built using heavily functional programming techniques like lazy computations. It is even capable to generate infinite report from infinite data source.

Tools

.NET
C#

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Institute of Automation and Electrometry

Tue, 05 May 2020 00:00:00 GMT

At IAE I contributed a lot writing different kind of software for interesting devices like:

I was major driver doing more modern version of such specialized software.

Tools used for implementation

C++
C#
WinForms
OpenGL

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Interferometry

Tue, 05 May 2020 00:00:00 GMT

At IAE I contributed significantly to interferometry software they design. I was major driver doing more modern version of such specialized software.

Tools used for implementation

C#
WinForms
OpenGL

Screenshots

TDB sorry no images atm

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

PageFX

Tue, 05 May 2020 00:00:00 GMT

It is cross compiler from .NET byte code to Adobe Flash Player (now dead) instructions. It operates on binary level. Now it is open sourced for education purposes mostly I guess. Please read a story behind the project.

Features

It has own lazy parser of CLR metadata tables
It has incremental nature to compile only things needed to the application

Status

Dead, but interesting

Tools used for implementation

.NET
C#

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

SOLIDless

Tue, 05 May 2020 00:00:00 GMT

Some of SOLID principles are less important for me, here is why?

I’m used to write more functional coding atm, so OOP is less important practice for me
Immutable, purity, composobality matters for me more than knowing how each symbol in SOLID abbreviation is decoded 😄
It is not magic, knowing how they are stated does not help you on practice

So I am solidless coder, sorry recruiters 😄

Fun story

I even failed some interview saying that I don’t remember SOLID principles exactly what they states 😄

Footnote

I do think SOLID principles are useful. But knowing them are not that important to use them on practice without noticing that you apply some principle.

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Table tennis

Tue, 05 May 2020 00:00:00 GMT

I can play table tennis on middle level. You can find my TTW rating here.

Chart

Rewards

TBD

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Merlin

Mon, 04 May 2020 00:00:00 GMT

Originally it is supposed to be a open-source competitive solution for Ambar. But it is going with crazy ideas like NPL search.

Features

Live demo built with React
More less code than in Ambar

Status

Incomplete, but many parts are in pretty good shape
Implemented using Pandora in one week

Tools

It is used pretty modern tech:

DGraph
Apache Tika
Golang
Kotlin
and many more

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Pandora

Mon, 04 May 2020 00:00:00 GMT

It was started as learning new tech staff. It is collection of solutions that can be easily composed to build concrete system. Please find code on github.

Basically it is incomplete BaaS (Backend-as-a-Service) without UI and crafted during random hackathons and challenges I was involved occasionally.

Use Cases

Pandora has been already used in the following hackatons/challenges:

Messenger Android App on CompTechNSK 2019
Merlin - challenge I was doing in one week requested as part of hiring process
LingvoGraph - long-term challenge to build large-scale Social Knowledge Graph for Linguistics

Status
Work in progress

Tools

It is used pretty modern tech:

DGraph
Golang
Python
and many more

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

About

Sun, 03 May 2020 00:00:00 GMT

TL;DR 18 years of experience in server and client-side development. Areas of expertise: Architecture, Web and API development, .NET, C#, SQL, Web API, HTML, CSS, TypeScript, Java, Go, Rust, Git, Agile. I don’t afraid to learn and try new things and make crazy stuff like a cross compiler

Hey there! I am Sergey Todyshev. I am software engineer with over 15 years of professional experience making software products for humans. Usually I play full-stack roles. You can email me to get technical support or maybe even hire me.

I can do

pretty complex huge web apps like Velocity
complex distributed systems like Velocity
complex report generators like ActiveReports
HTML to PDF generators like CarbonDocs
low level cross compilers like PageFX
tomography analysis software like voXcat for DiOptic
interferometry software
LabView like visual programming system
hardware abstraction layers like Device Manager for IAE

in short both application-level and system-level programming with any kind of complexity

Tools used to built this site

It is fork of overreacted.io.

What kind of content can you expect to find here?

Obviously about programming, table tennis and other things that I decided to write about 😄

Footnote

Please note that content in this blog and opinions are my own.

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

LingvoGraph

Sun, 03 May 2020 00:00:00 GMT

It is supposed to be a replacement of WordNet. WordNet can be absorbed by LingvoGraph. It can also absorb all other language dictionaries. It can be pretended to be a universal language database. You can find more info in this landing page too. It is mainly built by programmers being just graduated or and me :)

Features

Nice mobile app looks like instagram with the focus on helping with language learning
It is a store of visual associations between language elements
It is a store of multiple audio recordings per word, phrase

Status

Most parts are implemented by NSU students and me :)
Incomplete, but many parts are in pretty good shape

Tools

It is used pretty modern tech:

Dgraph
Golang
Python
Flatter
and many more

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Rust

Sun, 03 May 2020 00:00:00 GMT

I am learning Rust atm and as usual I am:

learning by doing
trying to make useful bits using it

I might blog about it too, please don’t expect too much :)

Also note there is only one efficient way to learn Rust. It is by talking with Rust compiler. It seems it is only way to become proficient in it. Reading books is not enough.

Good luck to me in this way to be yet another Rustacean :)

Posts

Footnote

It would be nice to have an auto generated post index by given tag with single markdown placeholder

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Velocity

Sun, 03 May 2020 00:00:00 GMT

What is it?

It is amazing piece of software developed by distributed team of engineers across the globe. It is called Velocity and owned by Spirent.

It helps AT&T and other telecom monsters to manage their labs massively equipped by miscellaneous telecommunication devices. While being employed by Xored I was part of talented team who doing major part of this system.

Overview of my role

I had tech lead and team lead duties, but 50% of time helping team with real code. As the team lead, I led a team of 10-15 full-stack engineers doing code review and consulting on daily basis. As the tech lead, I had involved in finding efficient solutions especially to tackle customer-faced scalability issues. I had made initiatives make more scalable development of huge frontend. I had direct communication with customers investigating and fixing incidents on production systems. I was the first point of contact with the product owner and management groups helping solving business problems using the full spectrum of technologies available and knowledge of the product capabilities. And eventually we have made one of the best LaaS (Laboratory as a Service) solutions.

Scalability Challenges

Like any large-scale enterprise Java project this system has given me and my team quite interesting challenges. This takes about two years of incremental changes to evolve this software from one that having issues to serve 10 operators up to 100-1000 operators running using the same hardware resources.

Changes can be break down into the following categories:

Database optimizations
- Concurrent mutations of same table rows using writes with optimistic locking
- Faster queries. Scheme re-design for some use cases
- Reduce load on database delegating some tasks into separate micro services like:
- Search powered by ElasticSearch
- Large objects moved to S3 by (Minio)[]
Computational optimizations (i.e. faster algorithms)
- In-memory computing (faster resolving of abstract topologies)

Tools

PostgreSQL
ElasticSearch
Apache Kafka
Spirent iTest
Java 8
Java EE
WildFly JBoss
Spring
JavaScript
ReactJS
Redux

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Notes on Parsing in Rust - Part 1

Sun, 03 May 2020 00:00:00 GMT

I am writing few parsers in Rust. And here are few notes about that atm.

nom is good to make lexers, but it is quite verbose than logos
good tutorials on pratt or shunting yard algorithms

Zero allocations

I’d like to try interning strings to have zero-allocation lexer and expressions used in the app. Each token just a slice to interned string in the global cache.

Interesting links

Parsing series of integers with SIMD

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Skills

Sat, 02 May 2020 00:00:00 GMT

Programming Languages

Language	Years
TypeScript	5+
JavaScript	10+
C#	10+
F#	~1
Java	3+
C/C++	~5
Go	5+
Python	5+
SQL	10+
Rust	0.5
Bash	5+

Backend Technologies

Technology	Years
.NET	10+
ASP.NET	10+
Spring	3+
Azure Service Fabric	0.5

Frontend Technologies

Technology	Years
ReactJS	5+
Redux	3+
Angular	1
VueJS	1

Databases

Name	Years
PostgreSQL	5+
ElasticSearch	5+
MongoDB	1+
SQLite	5+
MS SQL Server	1+
Dgraph	1+

Tools

Name	Years
Docker	5+
Git	10+
Mercurial	10+
Jest	5+
Webpack	5+
GulpJS	5+

Cover letter

Thu, 26 Mar 2020 00:00:00 GMT

Hey,

TL;DR 20 years of experience as full-stack engineer. Areas of expertise: Architecture, Web and API development, .NET, C#, SQL, Web API, HTML, CSS, TypeScript, Java, Go, Rust, Git, Agile. I don’t afraid to learn and try new things and make crazy stuff like a cross compiler

I am SergeyT. I am software engineer with 20 years of professional experience making world better by writing useful computer programs. Usually I play full-stack roles. I’ve been programming with passion for half of my life. I solved a ton of puzzles and fixed no end of bugs. And I am still writing code almost every day.

I love working on complex projects with positive and smart people around me. I’ve been involved in challenging projects ranging from

I tend to solve problems pragmatically and proactively. And also I care about:

finding efficient and simple solutions.
making friendly interfaces that are easy to use correctly and hard to use incorrectly.

I’m just keep doing and doing it with calm and passion, usually having fun :)

Device Manager

Fri, 20 Mar 2020 00:00:00 GMT

What is it?

Device Manager is a set of software components that helps to abstract devices for Circle Laser Writing System. I was doing this project in laboratory of diffractive optics at IA&E SB RAS as part of my education at NSU. I have fantastic time here learning system-level programming and I produced amazing work that is still used. Most of user interfaces I implemented are used without major changes.

Architecture

Device Manager consists from:

SDK to implement devices in C++
Core module that loads device libraries and manages their configurations
TCP server with custom command-based protocol for remote control and configuration
UI client implemented in C#

Features

Device Manager is very useful :)

It allows multiple configurations of virtual devices (aka virtual machines). The whole CLWS is represented as single virtual device with multiple device interfaces that can be linked to interfaces of real or software-emulated devices
It can load and apply configurations at runtime without recompiling control program

Device Manager Screenshots

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Circle Laser Writing System

Thu, 19 Mar 2020 00:00:00 GMT

What is it?

It is a complex machine with a lot of software and hardware components that can write holograms and different diffractive optical elements. During part of my education at NSU I was working on modernization of software components of this system at IA&E SB RAS at laboratory of Diffractive Optics. Moreover I have an amazing opportunity to work these genius people:

Dimitri Denk (http://www.denktech.de/)
Ruslan Shimansky (https://www.researchgate.net/profile/Ruslan_Shimansky)
Viktor P. Korolkov
and other scientists

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Projects

Thu, 19 Mar 2020 00:00:00 GMT

This page lists projects that I’ve been involved as software engineer. Some of them are still being used by somebody.

LinguaBook

📆2020 - now

All in one dictionary that helps you searching more semantics when working with words. More about it.

Merlin

📆2019 - now

An open-source document search engine with full-text search, thumbnails and many other cool features. More about it.

Fint

📆2019 - now

It is compact .NET CIL interpreter written in pure F#. See this post to get more details about this project.

LingvoGraph

📆2018 - now

Student driven project for learning second languages and approaching latest technologies. More about it.

Pandora

📆2018 - now

Student driven project for learning second languages and approaching latest technologies. More about it.

Spirent Velocity

📆2016 - 2018

I had a great opportunity to be a developer of Spirent Velocity automation platform. Talented dev team. I had a fun time.

ActiveReports

📆2010 - 2015

I had a great opportunity to be a developer of ActiveReports - one of the advanced and complete reporting platform for .NET. Talented dev team. I had a fun time.

Here I was one of major driver to dramatically boost performance of this report generator.

PageFX

📆2007 - 2008

It is binary-level compiler from .NET CIL to Adobe Flash Player VM byte code used in ActiveReports. It is recently open sourced. It was extremely interesting and one of the challenging project I’ve ever worked on. It was used to build Flash Viewer component. This component was quite popular some days. I am proud how this compiler was stable and it worked without changes for years.

This GitHub page lists all contributors to the project I’ve worked with.

CarbonDocs

📆2004 - 2010

CarbonDocs is used by .NET developers to create dynamic PDFs. It enables developers to use HTML and CSS along with inline ASP.NET-style scripts to generate dynamic content. With just a few lines of code, CarbonDocs inserts tabular data, charts, barcodes, and sparklines. CarbonDocs supports right-to-left text, font embedding, forms, scripting, attachments, viewer options, security, digital signatures and more. I’ve been developing it almost solely after being graduated university. More information can be found here.

Circle Laser Writing Systems

📆2002 - 2007

At IAE at laboratory of diffractive optics I’ve been developing different software components to manage CLWS resources. One of the major component is Device Manager. It is a component to manage hardware drivers called devices.

See this post to get more details about this project.

Status still-used in the laboratory of diffractive options.

voXcat for DiOptic

📆2002 - 2003

CAT means Computer Aided Tomography. It is tomography analysis software. Implemented in C++ using Microsoft Foundation Classes. It was first paid contract. See this post to get more details about this project.

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

voXcat for DiOptic

Thu, 19 Mar 2020 00:00:00 GMT

What is it?

It is tomography analysis software implemented during my education at NSU.

Implementation details

Implemented using:

C++
Microsoft Foundation Classes
OpenGL

Screenshots

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Support

Sat, 18 Jan 2020 00:00:00 GMT

Does your company or team need help, advice, and direct assistance with coding or software design issues?

If you want to chat about getting a support contract or hire me for your company, email me at stodyshev@gmail.com.

One Hour Consultation

Get support and advice on things where I have strong expertise
One or more hours of dedicated time with an expert
$50 secure one-time payment through PayPal

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

.NET CIL interpreter in F#

Fri, 01 Nov 2019 00:00:00 GMT

I’ve prepared a compact .NET CIL interpreter called Fint in pure F# for NskDotNet Meetup #6.

It can run C# programs with the following features at this point:

all control flow statements (if, for, switch, etc)
arithmetic operations including bitwise one
boolean algebra operators
string concatenation
static function calls
Console.WriteLine calls

It can be easily extended with other features.

Some code in this project is just ported from PageFX project I wrote about recently.

It would be nice to try porting Fint to JavaScript using Fable and run .NET binary code right in a browser. Later we can try to port Roslyn C# compiler to WASM with Blazor compiler and build online tutorial that:

compiles small C# program to .NET PE file in browser
runs .NET PE file in browser
shows CIL code for given method
provides debugging experience of CIL instruction set

This could be a great web resource to help learning .NET code at low-level.

If you like Fint project please stargaze it on github.

Here is a recording of my presentation. Sorry for speaking so boring 😄

Enjoy!

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Why PageFX is interesting for compiler writers?

Mon, 12 Aug 2019 00:00:00 GMT

TL;DR PageFX compiler is really interesting because it is compiler

In my previous post I’ve shortly written about PageFX cross compiler. Its code is available on github now.

What makes this project interesting for compiler writers?

Here is my top reasons:

Compilers are complicated things and so it is interesting for learning
It has a lot of IL code generation (only getting native strings support were not easy to do)
It has direct instruction-level translation between byte code formats
It incrementally compiles only classes and methods called from program entry point
It has smart linker that resolves dependency graph and emits only required resources extracted and transcoded (deserialized and serialized) from SWF files
It has experimental generation of JavaScript code by implementing a little CIL interpretter in JavaScript
It has experimental CIL interpretter written in C#

So please go ahead and learn PageFX reading its codebase.

You might also find interesting this old project available on github. It has declarative CIL reader written in JavaScript. This could be a starting point for full CIL interpreter in JavaScript. You can take this CIL interpretter as example and complete it. Feel free to fork and play anyway.

If someone interested to get more details about PageFX project please email me. I can write a series of blog posts perhaps someone may find it interesting.

P.S. Anyone wanted to compile PageFX with latest C# compiler? Please send pull request :)

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

How did we make Flash Viewer at ActiveReports

Sun, 11 Aug 2019 00:00:00 GMT

TL;DR GrapeCity open-sources dotnet to flash bytecode cross-compiler

It was not easy path. First we implemented a cross compiler from dotnet to AVM bytecode.

And this post is about this cross compiling tool. It is called PageFX. I can use PFX for reference too.

History

This project started in the early days of WPF. It was intended to allow building multi-platform internet applications using C# and the Adobe Flash Player VM. The project was pivoted for internal use at Data Dynamics after the release of Microsoft Silverlight.

I joined this project in June of 2007. My first experience with this technology was an attempt to build a real-world applications on the initial prototypes, which were unsuccessful. We decided to rewrite the compiler based on the following:

.NET CLI ECMA-335 spec - this doc describes format of .NET executable files
AVM overview doc - this doc describes format of byte code parsed and executed by ActionScript Virtual Machine
AVM source code - initial version was hosted at Mozilla
also I’ve showed CIL, SWF, ABC readers I’ve done so far as artifact of my learning CIL and ABC executable file formats

I made few major iterations to make the compiler. First iteration was not successful though a lot of test cases worked. I’ve tried to build .NET decompiler first and then translate it to AVM bytecode. I don’t remember why I’ve decided to deny approach with decompiler, but idea with binary translation won and I’ve quickly implemented first prototype.

Then it took about 6 months to get working a lot of Mono tests for bytecode generated by C# 2.0 CLR 1.0 format (basically no generics).

With the availability of more resources the following were added:

Almost full support of CLR 2.0 byte code format including generics
Interop with libraries built by ActionScript compiler (ASC)
Debugger for Visual Studio 2008

The project was successfully used to build our multi-platform report viewer as part of the ActiveReports Server platform and ActiveReports product lines.

Going open source

This project might be interesting for education purposes for Microsoft Research students or any other universities.

I’ve made an experimental branch with additional changes that were not used in production:

PFX compiler to be cross-platform/runnable on Mono VM and compatible with Mono C# compiler
Reuse of Mono MDB reader, i.e. managed reader of debug symbols. Previously we use COM library runnable only on Windows
Multi-targeting on Flash Player 9.0 and higher, i.e. Flash APIs are declared in separate assemblies auto-generated as part of build process
Multi-targeting on Flex SDK 3.3 and higher. Interop assemblies for Flex SDK are also auto-generated
Faster lazy parsing of assemblies into immutable data structures with less memory consumption

In addition master branch includes these interesting experiments:

JavaScript code generation (many tests were passing)
CIL interpreter written in pure C# on top of PFX infrastructure
Port of Starling game engine

You might also find interesting this old project available on github. It has declarative CIL reader written in JavaScript. This could be a starting point for full CIL interpreter in JavaScript.

If someone interested to get more details about PageFX project please email me. I can write a series of blog posts on the topic.

Funny facts

Initial prototype of Flash Viewer was hacked by olegzee in July 2008 in few weeks during his vacation
PFX compiler was used almost ten years after discontinue of development. Without any fixes it compiled flash report viewer on build machines until drop of its support. I know it had bugs, but it was enough for this report viewer

P.S. All dates might be a little bit wrong. Sorry for that

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Restarted my blog

Sat, 10 Aug 2019 00:00:00 GMT

Here I will write some words from time to time

(This is an article posted to my blog at tsvbits.com. You can read it online by clicking here.)

Sergey Todyshev's Blog RSS Feed

Resume

Summary

Experience

REGIE.AI

GrapeCity

Xored

DataWorks - Reporting Solutions

IAE - Research Lab

Education

Novosibirsk State University

Institute of Automation and Electrometry

Small update of CV micro-app

Lets build mini Google Drive clone quickly

High level idea

What I’ve done so far

Tooling

How I’ve done this

Project bootstrapping

Drive interfaces

Implementation of UploadcareDrive

Implementation of DropboxDrive

Application UI

Home Page

Drive View page

How I’ve done Dialogs?

Next Steps

My CodersRank Profile

About JavaScript at CompTechNSK 2019

About golang at CompTechNSK 2018

LinguaBook March Update

TL;DR;

Major Updates

Next Updates

Micro app for learning languages

Micro app to render your JSON resume

React component to render JSON Resume

How to wait for animations to complete in Playwright script

Telepromter Sample

How to add style loaders to webpack

Install dependencies

Webpack Configuration

Sponsor

createState function using React Context and ImmerJS

Jamstack comments

React Component

Component Integration

Efficient parsing of JSON record sets in Rust

Data Miner

Status

Tools

ActiveReports

Tools

Institute of Automation and Electrometry

Tools used for implementation

Interferometry

Tools used for implementation

Screenshots

PageFX

Features

Status

Tools used for implementation

SOLIDless

Fun story

Links

Footnote

Table tennis

Chart

Rewards

Merlin

Features

Status

Tools

Pandora

Use Cases

Status

Tools

About

I can do

Tools used to built this site