Borys Turchyk Personal Blog

All Hail The New Blog!

2021-06-05T00:00:00Z

I used to have a WordPress blog hosted on DreamHost, but since I moved my website out to Netlify (for totally mercantile reasons, as DreamHost hiked the price, and so I thought that was unreasonable money for my humble little page), I decided that keeping the blog the way it is made no sense - and I reckoned there's no value in converting existing articles to a new platform (as those pages were mostly of sentimental value to me), so I decided to just start anew.

This new attempt is mostly about product updates and personal development details, and perhaps also some random thoughts on IT world, book reviews and other random things.

Introducing Pidging: A Travel Communication Helper App

2021-06-06T00:00:00Z

The problem

Have you ever been in a situation when you walk into a small grocery store in a foreign country, you want to buy some local produce, but you can't say a word the shop owner would understand - because they don't speak any of the languages you do, and you don't speak any languages they do?

You have probably ended up pointing to things saying "this" and "that" in English, and showing your fingers indicating quantity, and you got away with some of the things you wanted - but if you're anything like me, you might've retreated without buying half of the thing you'd like (or getting something else entirely) and feeling frustrated with yourself for not being able to communicate.

In comes the Pidging!

So is it possible to have more fulfilling experience with journey communications? Well, certainly, you could study the language, understand grammar, proper pronunciation, build up vocabulary and start speaking it - but for most of us, that's not a feasible solution for a one-week trip to a foreign country.

Pidging is aiming to help in another fashion, by providing a vocabulary of simple words and phrases you could use in any situation, and a rapid translation to over 90 languages with an ability to store selected translations offline. Sure, you won't be able to maintain an elaborate conversation, or even build a grammatically correct sentence, but you'd certainly help people understand what you want exactly (and not get champagne instead of coffee in the morning; unless that's a desirable effect), ask for directions, read signs and so on - and also (at least partially) understand what people are saying back to you.

The provided vocabulary is by no means complete, because everyone considers different words and phrases more important than others, so Pidging also offers an ability to add your own word/phrase collections and translate them in new languages automatically!

Where to get

If that sounds helpful, give it a try - the app is free and available for both iOS and Android. Download links are on its web page: https://hydralien.net/pidging/

Bon voyage!

Moving the blog to Eleventy

2021-07-08T00:00:00Z

It finally happened!

For a long while, I was thinking of moving the blog to some static page generator, so I would preferably write pages in Markdown or some other simple formatting.

But since the rest of my website is in Vue and I quite like it that way as I'd rather have more flexibility when adding more projects to it, I first decided to just move away from Wordpress and write pages in raw HTML.

Because why not.

But since I had some time today and wanted to dig into something new, I moved the blog to Eleventy. Well, I first tried to plug in some Markdown plugins for Vue so I cou;d maybe just write Vue components in Markdown, but that didn't work - so I decided to dedicate some efforts to get me some Eleventy experience.

It also neatly builds as a single project (Vue and 11ty) on Netlify, so I'm glad.

Traject - New Project In The Making

2021-11-06T00:00:00Z

Idea

Traject is an adventure planner, route marketplace and safety notifier.

Vision

We are aiming to make outdoor activities safer and less worrisome by sharing plans with friends and family, return/overdue notifications, offline route info storage, and a place to get and share route information.

Problem

Outdoors are awesome but also dangerous, and when nobody knows where you’re going and when you’re expected to be back it’s equally worrying for both you and people close to you. Precise and detailed route information also greatly helps potential rescue efforts. Additionally, having all the details with you makes you more informed and helps making better decisions.

Pitch

Traject is an adventure planner, route marketplace and safety notifier. We are developing a platform (web and mobile apps) to help outdoors adventurers stay safe, track and share their achievements with return/overdue notifications to selected contacts, sharing location and route status/results, storing offline route plan and a marketplace to get reliable route details.

Reason

I'm a passionate adventurer (climber, hiker, cyclist, runner and alpinist) and have first-hand interest in the project as its future customer, as first of all I want to make my own adventures safer, more reliable and informed. I've been using a set of odd tools such as calendar, Google Docs, written and verbal notes, paper books and so on, and I'd like to have a tool to have it all at my fingertips.

Competition

Cairn and MountainHiking Project - first requires paid subscription and provides very limited route details, second has good free route information but no notification. We're going to do both plus tracking and sharing for free, plus a marketplace.

Current state

The project is live in a form of a landing page at https://traject.online/, but I'm hoping to get some funds to build it into a real thing - or get some time to do it myself, at least to a somewhat usable point.

Perpetually Drunk Mondrian, An Art Project

2021-11-08T00:00:00Z

Art Driven Development

A pure fun art project I've been thinking about for quite a long time and finally got some time to make: https://hydralien.github.io/drunk-mondrian/.

The original idea was just randomly moving the pen on paper without thinking about it (preferably thinking about something completely different) and then filling some random parts with equally random colors. I originally wanted to use real pen, paper and watercolor but then thought of one of my favourite fabric prints and decided to make it a development exercise.

It's essentially a bunch of randomization stringed together in a fairly inefficient manner, but it works and I kinda like the results:

The code is open and could be found here: https://github.com/hydralien/drunk-mondrian

Yet Another Interview Rant, Or My Thoughts On The Process

2021-11-22T00:00:00Z

Who needs another rant?

This is really a set of notes and key consideration points for myself, and I'll grow and expand it as I go through the interviewing process.

As someone that hasn't attended interviews (especially from the candidate side) for a long while, getting back into the process produces surprisingly a lot of unexpected negative experience and reveals a number of inefficient practices, which I want to list here along with what I think works better.

There's no shortage of talks and ideas about how to improve the interview process. One of the most useful thoughts, that interview performance does not equal job performance, was recently covered here: https://blog.professorbeekums.com/2021/interview-performance/ - and even though I have my reservations about some parts of it (like 2-hour interviews), its overall message is really thoughtful.

Things to consider (from the candidate side)

Ask to thoroughly elaborate on the interview process to understand all steps.
Beware of tasks that take "whatever you think is enough" time or over 4 hours: large scope and lots of work.
Ask if the assignment requires specific stack or any other prior knowledge.
If the interview looks or feels surprising or not going well, speak up and potentially stop early: the outcome is unlikely to be positive so it's a waste of time.
Unless you're early in the interviewing process or haven't done it in a while - then failing is also important as it gives you knowledge and experience for next attempts.
If the interview is long, ask to break down. If they're back-to-back, ask to schedule on different days.
If possible, ask to give you feedback after each interview so if one step is blown the others could be avoided. Unless the goal of interviewing is learning.
Do not close up to the questions you don't like; asking clarifying questions or reasons behind the question might help to relax and form a better answer.

Red flags

Separate coding and/or system design interviews after elaborate take-home assignment (not related to the assignment).
More-than-one-hour interviews should be split or break provided.
Time-constrained coding in front of something is stressful and restricted.
Several coding interviews instead of one or take-home task.
Take-home assignment subject/goals are unrelated to company business.
Any IQ-kind-of-test (called "aptitude test" nowadays) is a huge no-no, as it's a repetitive blunder that doesn't really assess any personal qualities.
Tests or forms to fill without prior personal communication or clear explanation of hiring process.

Process pitfalls

Live coding interview of any kind is stressful and many people don't perform well. If questions is purely algorithmic or irrelevant to the company it's also frustrating.
Take-home assignment without follow-up.
Looking for an all-round ready-made candidate without considering that engineers learn and adapt quickly.
Requiring by-the-book knowledge of development and design patterns.
Very specific system design question with expectations of follow-up questions - questions implying more information or discussion should be open and vague.
Making engineers do HR's job by asking behavioral questions for the sake of it (often just reading them).
Asking the candidate to describe their solution while coding or talking to them while they code (breaks focus).

Better options

Meaningful take-home assignment that are relevant to what team/company does.
If the team is fixed on live coding, at least coding problems could be relevant to the company domain.
Technical interview is a review of the assignment plus touching on follow-up subjects like performance, scaling, monitoring, security and so on
Merge request review with comments as it resembles real life.
Breaking assignment into several small tasks building on each other or exploring different areas.
Presenting the candidate with established project and infrastructure to build on, or clearly mention infrastructure is the (potential) part of the assignment.
Provide excessive set of problems to solve in flex-limited time ("no more than 3-4 hours"), clearly mentioning that solving all is not required, just as many as candidate feels reasonable within given time.
Another option: let candidate prioritize which problems to solve, mentioning that that's the part of the assignment (so solving all is inherently not the goal)

Little Book Of Calm

People usually mean well - they want to hire ideal candidates, people who know the most, who could start contributing right away. And it's their right and choice - so as long as I'd wish interviewers would consider that candidate could learn whatever is missing or perform better in non-time-constrained environment, I understand the other side as well. It's OK.
The interview is a lengthy process - collecting feedback takes time, people are busy, things get forgotten and abandoned for no ill reason. Things happen, and it's OK.
I will fail to pass interviews, I will pass but still considered not a good fit, my application will not be considered, another candidate will get hired before me, some outcomes will not satisfy me and I'll bail, and many other things will get in the way. That's OK, everyone will find the right place/candidate in the end.

Follow-up

This page is to be updated with more thoughts, findings and ideas.

Key Points Of A Philosophy Of Software Design

2021-11-23T00:00:00Z

"It's a great feeling to discover a solution that is both simple and powerful. A clean, simple and obvious design is a beautiful thing"

What Philosophy?

This is about the book "A Philosophy Of Software Design" by John Ousterhout that I read at some point and wanted to save some key thoughts in a succinct and structured way. I found the principles described in the book really thoughtful and applicable to the real life - and even though I have some reservations about certain points, the difference of opinions does not make this book any less useful or relevant (perhaps the opposite, even more so).

Key thoughts (in no particular order)

Make deeper modules, hiding technical details inside and exposing simple interface with minimal required functionality. Also use many defaults so only required values would be provided.
Do not use order of operations as a principle for module structure, instead focus on what pieces are required to perform an operation and put them together.
Generalise - the less specific method user needs to remember the better. If method is designed for just one case, maybe or can be merged with another similar functionality?
Do not over generalise - trying to build a very generic interface leads to more cognitive load, more complexity and harder to maintain/easier to break systems.
No simple pass through method, they indicate that something is wrong with abstraction.
"Most modules have more users than developers, so it's better for the developed to suffer thant the users" :)
It's more important to have a simple interface than a simple implementation.
"Pull complexity downwards" - meaning to the lower implementation level, where fewer people would need to deal with it.
Don't overdo things, keep abstractions native to a specific area at that very level only.
"Define errors out of existence", as error handling causes unnecessary complicated code, and "overall, the best way to reduce bugs is to make software simpler". Just die if it's bad, if it's important enough. (IMO the best way is to throw typed exceptions and catch them at higher level where they could be converted in interface/user-visible errors).
Design it twice - outline pros and cons of the first approach, check how it would work in a few month/year and see if you can come up with something better. "Eventually, everyone reaches a point where your first ideas are not good enough"; also, "it isn't that you aren't smart; it's that the problems are really hard!".
"The process of writing comments, if done correctly, will actually improve a system's design". Also, "inadequate documentation creates a huge and unnecessary drag on software development" and "if I must read the code of a method on order to use it, there is no abstraction". Inline comments should describe things that are not immediately clear from the code and not repeat the code itself.
If finding a simple yet descriptive and clear name for a thing is hard then maybe the design of the thing itself is not clear.
Names should be clear, common, consistent and same name should server same purpose.
Readability should be determined by readers, not writers.
Delaying the documentation (commenting the code) often means it will never be written.
"If you are not making [software] design better, you're probably making it worse".
Don't change existing connections (unless you're changing everything) - keeping consistency is better than better style in some places but not all.
TDD usually divides attention on specific features rather then design; when tests-first approach makes sense is fixing issues: you replicate it with failing test, then fix it.
"Measure before modifying" - mostly about performance here, but a good principle on general for any changes or improvements.
"It's a great feeling to discover a solution that is both simple and powerful. A clean, simple and obvious design is a beautiful thing"

Summary

It's a great book - clear, concise, very relevant and applicable, and of very palatable size. Great read for anyone related to a software systems design.

Stopping Python socketserver.ThreadingTCPServer On Keyboard Interrupt

2021-12-02T00:00:00Z

socketserver.ThreadingTCPServer

Curiously enough, Python documentation suggests writing async TCP server using mixins (see https://docs.python.org/3/library/socketserver.html#socketserver.ThreadingMixIn) while there's existing class that does it already hence not requiring boilerplate code - ant it's socketserver.ThreadingTCPServer.

Its usage is pretty much like socketserver.TCPServer in the documentation - here's an echo-like server example:

class TCPServerHandler(socketserver.StreamRequestHandler):
    def handle(self):
        data_line: str = "_"
        data_processor = DataProcess()
        while data_line:
            data_line = self.rfile.readline().strip().decode('ascii')
            if data_line == '.':
                print("Connection terminated by client request")
                self.finish()
                return
            self.request.sendall(data_line)

with socketserver.ThreadingTCPServer(("localhost", 5000), TCPServerHandler) as server:
    try:
        server.daemon_threads = True
        server.serve_forever()
    except (KeyboardInterrupt, SystemExit):
        log.error("Shutdown signal received")
    finally:
        print('Stopping server')
        server.server_close()

Stopping the server

And it's all nice and fine, with one exception - the using code from the documentation doesn't stop on the keyboard interrupt. Which is annoying as the search for the problem brings many (valid) discussions on how the keyboard events are relevant to the main thread only so the server isn't responsible for it, but there was no valid solution - setting the recommended server.daemon = True flag did nothing.

The solution was surprisingly simple and intuitive, but not really described anywhere - to use the server.daemon_threads = True flag instead! Oh well...

I'll leave it here in case it pops up in someone's search and helps with the problem.

Hitting The Books: Short Review Of The "Building Microservices" Book

2021-12-15T00:00:00Z

What Book?

One of the recent curiosity-induced reads I went through (significantly influenced by outcomes of the job search and the current IT development market conditions) is the "Building Microservices" book by Sam Newman.

General Impression

I was at first concerned with the size - it's almost 600 pages (586 to be precise), and large books usually mean lots of too specific details (think code listings) or too diluted information (think lots of stories and repetition of ideas). But it was highly recommended, so I decided to give it a try (although it's not the cheapest book either).

And I have to say I don't regret my decision - even though the book is titled "Building Microservices", it's actually about building distributed systems in general. Or even broader, it's about making decisions for the system design: monolithic architectures are mentioned in the book almost as often as service-oriented ones, and it's emphasised repeatedly that the reader might not need to consider neither SOA in general nor microservices in particular, as solid monolith might work just fine (for instance, if the project in a startup with rapidly changing directions, uncertain future and a small team where everyone works on everything).

So in the end the size of the book was well justified as it covers a variety of subjects - storage, deployment, monitoring, scaling, UI decomposition, team scope and responsibilities and so on and so forth. And it also does in a fairly succinct yet clear fashion, which makes it really easy to understand and inject the information. Additionally, it has a lot of references to other useful materials with more specifics on each subject.

Conclusion

It's still a lot of information, and in some parts it's still too specific and detailed, while in the others it's vague and imprecise. Not everything will stick and be easy to recall after time, and not every chapter has a clear action points to extract. But it's a good reference to come back to when needed, and I feel like I've learned a lot from this book - even when it describes the already known techniques and aspects, it still does that in a way I wouldn't be able to do myself.

TIL: Less Known Semantic Elements In HTML

2021-12-15T00:00:00Z

Semantic Formatting

Recent episode "Is The Web Dead?" of Smashing Podcast (it's a very good discussion BTW) highlighted some things in modern HTML markup I was unaware of. I can't really position myself as any sort of frontend specialist, although I've been creating web pages of various complexity for as far as my IT career goes, so any extra knowledge around it is still highly relevant.

The podcast touched specifically on details/summary elements, however that got me thinking there must be more, and there definitely is. This list is based on a portion of W3Schools article, plus some extra s I also missed.

The Elements

From that same article,

"Semantic elements = elements with a meaning."

which means a lot of HTML elements fall under this category - form, article, header and so on. Those are better know though, so here I'm listing several examples of lesser known elements in the category, namely:

details / summary
figure / figcaption
dl / dt / dd (although I guess these are a tad bit less semantic)
time
mark

And so,

Details / Summary

Specifics of the element

Specify details that the user can open and close on demand. Closed by default, and can nest any sort of content.

<details style="border: 1px solid; padding: 0.3em; border-radius: 5px;">
    <summary>Specifics of the element</summary>
    Specify details that the user can open and close on demand. Closed by default, and can nest any sort of content.  
</details>

Figure / Figcaption

Specifies the self-contained content (images, illustrations, code) along with the caption:

<figure>
    Specifies the self-contained content (images, illustrations, code) along with the caption
    <figcaption>
        Figure/figcaption code example
    </figcaption>
<figure>

Figure/figcaption code example

Description List / Description Term / Description Details

Or dl / dt / dd. Typical usage to implement a list of terms with description (e.g. glossary). An example:

dl: a description list.: The element encloses a list of groups of terms and descriptions.
dt: a term in a description or definition list.: Must be used inside a dl element.
dd: description details.: Provides the description, definition, or value for the preceding term.

<dl>
    <dt>
        dl: a description list.
        <dd>
            The element encloses a list of groups of terms and descriptions.
        </dd>
    </dt>
    <dt>
        dt: a term in a description or definition list.
        <dd>
            Must be used inside a <dl> element.
        </dd>
    </dt>
    <dt>
        dd: description details.
        <dd>
            Provides the description, definition, or value for the preceding term.
        </dd>
    </dt>
</dl>

Time

Used for a formatting of time (e.g. 12:22), and also to make it machine-readable for any automated actions related to teh page (e.g. mark in a calendar)

<time datetime="2021-12-15 12:22:00">12:22</time>

Mark

Used to highlight a portion of text.

Used to <mark>highlight</mark> a portion of text

What's next

Jumping back to the beginning, one of the important ideas mentioned in the podcast was that going forward we'll likely see more elements and technologies supported by browsers that we're now using libraries for - think native browser support for variable reactivity, modal dialogues, other markup languages and so on.

The future is bright, but also the future is now.

Hitting The Books: Short Review Of The "NoSQL Distilled" Book

2021-12-16T00:00:00Z

What Book?

Another result of an effort to keep the personal knowledge base up-to-date (and a reference from another recent read, Building Microservices) is the "NoSQL Distilled" book by Martin Fowler and Pramod Sadalage.

It's a fairly short and concise read of 152 pages, and it was published almost a decade ago in 2012 - which made me somewhat cautious about how relevant and useful it is for the modern day systems.

General Impression

I'll start with a summary - the main idea of the book can be put as promoting the Polyglot Persistence - in the book's own words,

"Polyglot persistence is about using different data storage technologies to handle varying data storage needs"

To achieve the goal, the authors first cover basic principles of distributed systems such as distribution models, consistency, data models and so on. After that they describe main types of the NoSQL storages: key-value, document, column-family and graph (also mentioning some others like filesystem). The book finishes with a short guidance on the storage selection, which could be summarized like this (quote from the book):

The two main reasons to use NoSQL technology are:
- To improve programmer productivity by using a database that better matches an application's needs
- To improve data access performance via some combination of handling larger data volumes, reducing latency, and improving throughput.

It's essential to test your expectations about programmer productivity and/or performance before committing to use NoSQL technology.

There's definitely much more than that in the book, namely the overview and suggestions of what's the best use cases for each storage type, and what are the options of the specific storage systems (such as Riak, Cassandra, MongoDB, DynamoDB and so on).

There's also a part that says that most of the application should still stick to relational DBs "at least until the NoSQL technology ecosystem becomes more mature", which after a decade of active usage and development it definitely is - but I think that consideration is still valid: it's totally fine to use a relational database if it fits the data model (or if the data model is not clear yet). I would definitely start with PostgreSQL for any common project, as it provides a lot of functionality in a very mature and highly supported package.

One more important thought shared on those pages is to encapsulate the database work inside an abstraction - could be a class, could be a service - to make switching storage if not smooth then at least possible in future (and likely transparent for the system's user.

Conclusion

After almost 10 years of its publication, it's still impressively relevant and useful. And the format is really good - it's very palatable and yet rich on ideas and details. There's certainly much more to learn about specific database technologies (preferably by using them), but this book provides a great guidance on the basics and gives ideas on where to go next.

MacOS Monterey Port 5000 Already In Use

2022-01-03T00:00:00Z

Development port

Many web development frameworks are using some abstract port on local machine for development purposes, such as serving the results (pages, API endpoints) locally for the testing/validation purposes. Those ports are usually chosen to be easy to remember, for instance 8080, 8000, 3000, 5000 etc. And since (somewhat) standardised port range is only those below 1024, the port usage was always a bit of a chaos.

The problem I faced recently was with a default development port (5000) suggested by Python Flask framework.

New conflict

I recently updated my laptop to OSX Monterey, and when trying to launch the Flask development server I faced the "Port 5000 already in use" error. At first, I thought it might be a previous dev server instance hanging around, but looking at it with

lsof -i tcp:5000

showed that it's something else:

[halien@airhydra:~/devel]# lsof -i tcp:5000
COMMAND     PID   USER   FD   TYPE             DEVICE SIZE/OFF NODE NAME
ControlCe 18536 halien   19u  IPv4 0x4008cac8d519c5c9      0t0  TCP *:commplex-main (LISTEN)
ControlCe 18536 halien   20u  IPv6 0x4008cad72f646471      0t0  TCP *:commplex-main (LISTEN)

After some googling, turned out that OSX Control Center is now listening on port 5000 as an AirPlay server. According to the comments in this thread, port 5000 usage for AirPlay is nothing new, it's just the OSX now supports it:

The Remote Audio Output Protocol, AKA AirTunes, AKA AirPlay, has been using port 5000 since the year 2004. This is nothing new. All AirPlay receivers including AirPort Express and Apple TV use port 5000. If you've ever used Airfoil on your Mac (Airfoil Speakers was released in 2008), that also uses 5000 for the same reason. AirPlay receiving is new to macOS Monterey, but AirPlay itself is very old, predating Flask and these other web development environments.

The solution

A more robust solution would be to use a different development port - even a small change like using 5001 would do. However, that could mean changing it in a lot of places, and if you're working in a team that could potentially (depending on the collaboration setup) affect other developers.

Another way is to disable AirPlay server via System Preferences › Sharing, and unchecking AirPlay Receiver

Problem With flutter_tts No Sound / Low Volume In iOS

2022-01-14T00:00:00Z

The problem

I'm using flutter_tts plugin for the text-to-speech capabilities in my travel vocabulary app, and it worked everywhere until recently - last time I tried building and deploying it, it worked everywhere except iOS on device - meaning Android emulator, Android device and iOS emulator were OK, but iOS device had no sound when trying to play the text. From searching around, some folks report low volume problem which might be relevant.

The solution

I couldn't figure out when it started and what's causing it, so it took really a lot of googling till I finally found a short thread that described a solution:

 await flutterTts.setIosAudioCategory(IosTextToSpeechAudioCategory.playback, [
  IosTextToSpeechAudioCategoryOptions.defaultToSpeaker
]);

It should be done after creating the FlutterTTS instance and before playing. The important parts are both IosTextToSpeechAudioCategory.playback and IosTextToSpeechAudioCategoryOptions.defaultToSpeaker - I couldn't make it work without either of those.

While I was at it, I've also added several other flags to make it more future-proof and integrated with other audio being played, as apparently the problem is in some defaults changing at some point, so the final solution looks like this:

let flutterTts = FlutterTts();
await flutterTts.setSharedInstance(true);
await flutterTts.setIosAudioCategory(IosTextToSpeechAudioCategory.playback,
    [
      IosTextToSpeechAudioCategoryOptions.allowBluetooth,
      IosTextToSpeechAudioCategoryOptions.allowBluetoothA2DP,
      IosTextToSpeechAudioCategoryOptions.mixWithOthers,
      IosTextToSpeechAudioCategoryOptions.defaultToSpeaker
    ],
    IosTextToSpeechAudioMode.defaultMode
);

Using JSON Web Tokens For Userless Mobile Authentication

2022-01-29T00:00:00Z

The problem

For my travel vocabulary app Pidging (created with Flutter/Dart), I'm using an API (written in Python) that manages requests to actual translation service (Microsoft Azure Translator), cache results in memory and DB and also manage a built-in vocabulary. There's no concept of user though, as all user-generated content remains on user device, and server-side only caches translations.

But even though the API is simple and no user info or content is exposed, I still want to protect it from being abused, be able to control any unwanted user behavior and potentially store user data on server to remedy the situation where app is removed and then reinstalled, or migrated to a new device.

Considerations

I thought about introducing user authentication, but I really don't want to impede the access or introduce any extra steps to the app usage. So I decided to go with an identifier-based approach - but not with device id, because I don't control its creation/change, and it also is considered a PII.

So I decided to generate app ID (UUID v4) when app id launched for the first time, and store it in the keychain - as keychain content is the most persists content storage on the phone, and I'm not abusing it much (as I'll mention further on, there's also access and refresh tokens, but it's still a negligible amount of data). I'm using https://pub.dev/packages/flutter_keychain to manage the process.

The next consideration was to how to use it in the App-API communication. I first thought of doing something sophisticated like generating cryptographic key pair on the app, register public key on the server and then pass encrypted tokens with the API calls to ensure authentication. That would work (even though I'd still need to maintain some token expiration mechanism), but it was unnecessary complex and would involve bringing A LOT of dependencies. So I decided to keep the encryption to server and just use a tried JWT (JSON Web Token) approach, which has established libraries in many languages (I'm using Flask-JWT-Extended).

The flow

Currently, the logic sequence diagram looks like this (thx https://sequencediagram.org/):

Next steps

The next steps would be to utilize this mechanism not only for a stricter access control, but also to save/restore user data at the server side.

Hitting The Books: Short Review Of The "Get Your Hands Dirty on Clean Architecture" Book

2022-03-19T00:00:00Z

What Book?

I recently started on a new software development position, and was immediately faced with an unexpected architectural choices - the team used something called "Hexagonal Architecture" which was new to me.

So I was suggested (among other materials) to read the "Get Your Hands Dirty on Clean Architecture" book by Tom Hombergs.

General Impression

The gist of the idea could be simplified as "Dependency Inversion Everywhere" - meaning it heavily abstracts everything to interfaces/abstract clasees: abstractions between API and business logic, abstractions between database ("persistent layer") and business logic, abstractions between any external dependency and anything that uses it.

The book heavily advocated for using this architecture, emphasizing that clear structure and abstractions galore would mean any changes would be isolated to a specific area and would not require changing other places, such as replacing one DB with another or changing DB storage structure would not require changes anywhere else.

To me (especially after few weeks working with a system designed over these principles) this all sounds nice but comes with a steep price: build all the abstractions is a lot of extra work, and implementing adapters between layers is a lot of tedious boilerplate-creation work, because it's mostly same-fields-to-same-fields, with maybe a few naming or type differences, but it all has to be clearly typed. And then the most common changes, such as adding new field to the data structure, would still require changes in ALL places, including several sets of tests implemented to test each side of abstraction.

So to me, it's an extremist approach to the software architecture - structure is good, but too much structure means a sacrifice in velocity and fun, because following all the guidelines and rigid structure requirements is slow and sucks fun out of creation.

Additionally, even though the author tries to point out that it's not the only way to create things, he immediately emphasises the benefits of this specific approach, which comes as a somewhat unbalanced opinion.

Conclusion

I think it's an interesting read to understand another perspective and get familiar with ideas being used in software architecture today. I don't necessarily agree with those ideas, or like the delivery - but some of the thoughts are valid, and reasonable usage of the dependency inversion is a useful practice.

That said, it's good to understand and use the principles, but it's equally good to disregard them if the price is high but benefits are dubious - clear naming of classes and variables, comments at puzzling places and some structure in the code IMO brings 80% of the maintainability, with the rest being heavily opinionated and costly in learning for insignificant benefits.

This might differ in larger scale though, when structural rigidity with component exchange flexibility means multiple teams could collaborate without causing each other troubles - but it contradicts the idea of service-oriented architecture, when we're dividing responsibilities to a stand-alone services, and I like that approach much better (see my "Building Microservices" book review).

Learning About Git Worktrees

2022-05-26T00:00:00Z

Git Worktrees

A colleague of mine shared his article about Git worktrees on the work chat, and I thought it's an interesting tool worth reflecting in my blog for own educational reasons.

Essentially it's a way to work on several branches concurrently without a need to clone the whole repository, given that each branch is i a different (temporary) directory. For instance, if I'm currently working on a branch named new-product-page and I need to change something in a blog branch, I can do

git worktree add ../blog-update blog

to create a blog-update that would point to a blog branch (I could also use -b new-blog-branch to create a new branch).

Then here's how it'd look like in the listings:

># git worktree list
/Users/halien/devel/my/hydralien.net  1ec7851 [new-product-page]
/Users/halien/devel/my/blog-update    483c934 [blog]

># git branch
+ blog
  master
* new-product-page

And when the changes in the worktree are done, and it's no longer required, removing it is as easy as

git worktree remove blog-update

Here's also an official documentation page for it: https://git-scm.com/docs/git-worktree

Robo 3T / Robomongo export to CSV and returning more than 50 records

2022-05-28T00:00:00Z

What problems

Robo 3T (aka Robomongo) is a simple little query tool for MongoDB. It's perhaps not crazy convenient, and it looks like MySQL tools used to look about a decade ago, but it does its job well, and it's free.

Due to its simplicity some functionality is either not there, or it's unclear how to get it. Two problems I faced recently were:

How to return more than default 50 records
How to export returned records to CSV

What solutions

50 records limit

The more-than-50-records problem had a fairly straightforward solution: add a batch size declaration before the query:

DBQuery.shellBatchSize = 500;

So setting this to something really high does the trick.

Note: it's persistent, so to return it to 50 you need to set it to 50 explicitly, otherwise it'd use the defined batch size even when the declaration is removed.

Export to CSV

This other problem of getting results in CSV format was more interesting - at first I tried to find online services for that, though most of the JSON-to-CSV solutions only work with a complete JSON object (and not separate JSON blobs per document). There's one resource that supports this case - this JSON to CSV Converter - but it starts asking for money pretty quick, and its copy-to-clipboard function seems to be broken.

After some extra search, turned out that there's a way of extending Robo 3T functionality with Javascript, so missing functionality could be added to it (to some extent).

Essentially if a file .robomongorc.js exists in home directory, Robo 3T will execute it on start (so restart it to load it), and the functions defined in this file will be available for the query processing.

From the article on Studio3T wiki, adding the following function to ~/.robomongorc.js file adds a CVS conversion functionality:

// Export to CSV function
function toCSV (deliminator, textQualifier)
{
var count = -1;
var headers = [];
var data = {};

    var cursor = this;

    deliminator = deliminator == null ? ',' : deliminator;
    textQualifier = textQualifier == null ? '\"' : textQualifier;

    while (cursor.hasNext()) {

        var array = new Array(cursor.next());

        count++;

        for (var index in array[0]) {
            if (headers.indexOf(index) == -1) {
                headers.push(index);
            }
        }

        for (var i = 0; i < array.length; i++) {
            for (var index in array[i]) {
                data[count + '_' + index] = array[i][index];
            }
        }
    }

    var line = '';

    for (var index in headers) {
        line += textQualifier + headers[index] + textQualifier + deliminator;
    }

    line = line.slice(0, -1);
    print(line);

    for (var i = 0; i < count + 1; i++) {

        var line = '';
        var cell = '';
        for (var j = 0; j < headers.length; j++) {
            cell = data[i + '_' + headers[j]];
            if (cell == undefined) cell = '';
            line += textQualifier + cell + textQualifier + deliminator;
        }

        line = line.slice(0, -1);
        print(line);
    }
}
DBQuery.prototype.toCSV=toCSV; //regular find
DBCommandCursor.prototype.toCSV=toCSV; //aggregates

To use it, add .toCSV() at the end of the query, like e.g.

db.getCollection('somecollection').find({}).toCSV()

Neat!

ASAP is a swear word

2022-05-29T00:00:00Z

The ASAP acronym is something I have a strong opinion about. I haven't encountered it in a work relationship for quite a while (and was very happy about it), but it reared its ugly head recently, and so I decided to put my opinion into words to understand it better myself.

Resorting to the usage of ASAP in professional communication is similar to resorting to violence when resolving problems in personal communication - it's a tool that should never be used, yet it's really easy to use and thus can be appealing. It's an imperative top-down application of unquestionable urgency that doesn't allow any space for discussion. It also comes hand-in-hand with the mentality of "bringing the solutions" management approach, when managers are telling people what to do and often also how to do it, hence when something doesn't go according to plan, addressing the issue also becomes an imperative command instead of raising and relying on employees' situational awareness.

There are much better ways of getting things done quickly, such as helping employees to understand the project plans and problems, maintain open and two-way communication and feedback channel and share the decisions, plans, problems and their background, so that everyone could relate to the product and act on solving problems vast on their own volition, and recognise and address the priorities. Apart from making people more informed and thus making more relevant decision when building the product, it also raises the responsibility and passion for the things they do, for the product they build and a loyalty to the company - while telling people to do things ASAP does the very opposite.

So no ASAP, please. Let's raise awareness and prioritise things together instead.

P.S.: Also promoted on https://meetingless.io/against-asap

Flutter iOS App Building Problem "CocoaPods requires your terminal to be using UTF-8 encoding"

2022-05-30T00:00:00Z

The problem

After another update, trying to build Flutter app for iOS started throwing an error:

WARNING: CocoaPods requires your terminal to be using UTF-8 encoding.
Consider adding the following to ~/.profile:

export LANG=en_US.UTF-8

And refusing to build.

After some search and failing attempts to solve it, I finally managed to get it right. Basically as this bugreport says, ~/.bash_profile or ~/.zshrc (depending on default shell) should be updated with following:

export LANG=en_US.UTF-8
export LANGUAGE=en_US.UTF-8
export LC_ALL=en_US.UTF-8

Tricky parts are:

error message mentions only LANG=en_US.UTF-8, but it actually should be all 3
it has to be in ~/.bash_profile and NOT in ~/.profile
~/.bash_profile has to be functional (try it with source ~/.bash_profile and see that variables were set) - in my case it was long neglected because I mostly used ~/.profile and so it was not operational till I removed unused stuff

Hope I remember this blog post next time it happens, as this is already a second time and I had to Google it all over again.

Sequence Diagrams Overview

2022-06-04T00:00:00Z

Sequence Diagrams

...or another article to address the problem of desperately searching for something because I can't recall how it's called 🤣

So I sometimes need to display a workflow or a chain of events in the software system (or any system or a set of), and then I remember that "there's this sthing with a parallel lines connected with arrows".

That thing is a Sequence Diagram, and, to quote the Wikipedia article,

It depicts the processes involved and the sequence of messages exchanged between the processes needed to carry out the functionality

There are various ways and tools to create one, and some more elaborate diagram tools have it in their arsenal - though I find this resource most convenient: https://sequencediagram.org/.

It lets to create the diagram with a sequence of simple command, adding entities automatically as they're mentioned in commands, e.g.

title Sequence Diagram Example
UI->API:request user data
API->DB:get data from DB
DB->API:return data
API->UI:return user structure

which displays

What's nice is this tool allows me to be as simple or as sophisticated as I want - there's a lot of bells and whistles available, such as various line types, notes, colors, icons, interactive elements and so on: https://sequencediagram.org/instructions.html.

Introducing Picturevert: An Image Color Inversion App

2022-06-19T00:00:00Z

The app

It's a fairly small thing - a one-page app that loads a picture from photo gallery, inverts the colors and allows to store the result back to gallery.

Built for two reasons - first, I wanted to update my Flutter/Dart experience a bit, as I haven't dome much with it since releasing Pidging; but in addition to that, I wanted a tool to make photo negatives out of my photos (because it looks cool and entirely strange), and I couldn't find anything suitable and free available.

So here it is, the Picturevert - I'm in the process of uploading it to the app stores (it's always a huge pain), but once I do it will be freely available there.

Oh, and its code is also free (though not very pretty): https://github.com/hydralien/PictureVert

Preparing Flutter App For Android Release (Google Play)

2022-06-19T00:00:00Z

The Problem

Flutter app is surprisingly unprepared for the production release on Google Play - the iOS release is a relatively straightforward matter, where XCode (mostly) tells you what's missing, while Android app happily builds but then Google Play store starts throwing errors like "You uploaded an APK or Android App Bundle that was signed in debug mode" or "Keystore file not set for signing config release".

So here's what needs to be done.

The Solution

android/app/build.gradle should have defaultConfig.applicationId set to actual identifier, like e.g. net.hydralien.pictuvert - otherwise the store will complain that it's unavailable.
If you're uploading a new build, it's number should be incremented after "+" in pubspec.yaml (e.g. "version: 1.0.0+1")

android/key.properties file should exist (it's hidden from the version control), and have e.g.

storePassword=YourPassword
keyPassword=YourPassword
keyAlias=upload
storeFile=/Users/halien/upload-keystore.jks

android/app/build.gradle should have keystore definition at the top, before "android" section:

  def keystoreProperties = new Properties()
  def keystorePropertiesFile = rootProject.file('key.properties')
  if (keystorePropertiesFile.exists()) {
      keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
  }

it also needs to define prod signing config before "buildTypes" section, like so:

  signingConfigs {
      release {
          keyAlias keystoreProperties['keyAlias']
          keyPassword keystoreProperties['keyPassword']
          storeFile keystoreProperties['storeFile'] ? file(keystoreProperties['storeFile']) : null
          storePassword keystoreProperties['storePassword']
      }
  }

and then inside the "buildTypes" section, igningConfig signingConfigs.debug should be changed to igningConfig signingConfigs.release

With all that in place, running flutter build appbundle should produce a valid production-signed bundle at build/app/outputs/bundle/release/app-release.aab

Hope this saves me some time next time I face this.

Include Git Commit Id In Docker Container Build

2022-07-08T00:00:00Z

The Problem

When working on containerizing an API service with Docker for the CI/CD pipeline, I needed to include into container current Git commit ID and branch - so I could know what code is running in production by just asking the API to return these values.

Essentially there are two simple ways to do it:

store anv variables in a .env file, which would be easily recognisable by modules like dotenv for Node.js architecture or python-dotenv in Python.
set them into regular environment variables with Dockerfile ENV instruction

The first is kinda simpler to implement and looks contained to Dockerfile (becasue I can bake Git commands and file creation inside Dockerfile), but has several downsides:

it requires loading .git inside Docker image, even if only for build stage - it takes time. And it's easy to let the whole repo to slip through into container image.
.git might be restricted in .dockerignore, and removing it from there might have undesirable consequences later.
storing things in .env promotes storing env in file, which is not too bad for a git commit ID, but a larger potential security issue for credentials.

The Solution

So I chose to store in env variables, which required following:

Specifying input parameters via ARG instruction, like so:
```
ARG GIT_COMMIT_BRANCH
ARG GIT_COMMIT_ID
```
Setting them into environment variables inside the container image:
```
ENV GIT_COMMIT_BRANCH=$GIT_COMMIT_BRANCH
ENV GIT_COMMIT_ID=$GIT_COMMIT_ID
```
Note: if you have several stages in Dockerfile, ARG and ENV should be at the same stage as final CMD instruction.
Identifying Git commands to get branch name and commit ID:
```
git branch --show-current
git rev-parse --short HEAD
```

provide arg values as input parameters for docker build, like so:

docker build --build-arg GIT_COMMIT_BRANCH=`git branch --show-current` --build-arg GIT_COMMIT_ID=`git rev-parse --short HEAD` -t containername

And that did it - I get the required information when launching docker build inside Git repository, where I invariably have repository information, and pass it to the build process that bakes it into the container image so it stays the same for each instance and is available for the application code inside container to use however it pleases.

Docker Build - Include Files Outside The Build Context

2022-10-02T00:00:00Z

The Problem

When building a Docker image, and trying to include files from a directory outside current context (context being where Dockerfile is), e.g.

    COPY ../code/ ./

the build fails with a Forbidden path outside the build context error.

There's not often a case for this, but my circumstances were that I had an app with several interconnected parts, and needed to run a part of it as a kind of "cronjobs" (one-off launch), and the other part as a web server. So I needed two different Dockerfiles, but also some helping scripts for both - keeping it all in one directory could be possible, but a bit messy. Besides, I'd still need to specify which Dockerfile to use for which build.

The Solution

The trick is to change the context (as also described in this article), and to essentially run docker build inside the directory where required files are.

So if, for instance, I want to keep Dockerfile in images/ directory but get files from the code/ (but both are at the same hierarchy level), I edit the Dockerfile to include files from current directory:

    COPY ./code/ ./

and then run build from the one directory up, like so:

    docker build -t node-app -f images/Dockerfile .

Success!

Useful IntelliJ Idea Shortcuts (For OSX)

2022-10-14T00:00:00Z

WIP

This page is updated now and then when I find new useful shortcuts

What Shortcuts

I've started using the IntelliJ Idea several years ago when a colleague of mine strongly suggested it'd be way more effective way of writing code, especially for a strongly typed languages. And it definitely was (well, at least comparing to the Emacs I've mostly used before). I've been using it ever since, and it's definitely worthy the annual subscription.

One thing that makes IDEs powerful is the keyboard shortcuts, and there's usually a plenty - and Idea is no exception. I've been using some of them from day one, created or modified a few but then thought that I'm probably not using (and don't even know about) some other useful built-in shortcuts.

So I went through some articles about the subject and gathered me a list of shortcuts I should start using, for they are handy. Posting the list here mostly for my own reference (it's easier to manage than a piece of paper the list is currently on).

The shortcuts here are for OSX only, although I believe it's not hard to map them to PC keyboard. Also there's no order to them.

The List (in no specific order)

⌘⇧V History of copy-paste buffer. I have similar thing in OSX (thx Albert), but it's useful to have something specific to IDE to see specific code-related items.
⌥⇧M String manipulation plugin - not a standard thing (meaning it must be installed separately as an add-on), but it's worth having for the functionality it provides.
Fn⌥F7 Usage of the current thing in code; same as ⌘+click, but easier to navigate to explore multiple entries.
⌘B Jump to the declaration of the current thing.
⌘E Recently visited files (you can also type to filter).
⌘⇧E Recently visited locations (specific places in code).
⌃T "Refactor this" context menu.
⌃⇧J Join multiple lines - useful to concatenate strings or make code a one-liner.
⌥Enter Context help actions.
⌘Backspace Remove current line (also ⌘+X without selection cuts the entire line to buffer).
⌘Fn F12 Class/file structure roster.
Fn ⇧F2 Jump to the next problem in the code.
Fn ⇧F6 Rename current thing (with propagation to all usage cases).
⌘D Duplicate current line.
⌃⇧↑ or ⌃⇧↓ Move to the previous/next block start.
⌥⇧↑ or ⌥⇧↓ Move current line up/down.
⌥↑ or ⌥↓ Select increasingly larger/smaller block of code.
⌘[ or ⌘] Jump to previous/next visited place.
⌥⌘[ or ⌥⌘] Jump to next/previous matching parenthesis/bracket.
⌘⇧O Search for files in project (type random parts of file name and it'll find it!).
⌘⇧F Search for text in project.
⌘⇧C Copy the current file path. It's not necessarily useful as it copies the path from root, which is not always desirable.
⌘⌥⇧C So there's also "Copy Reference" which copies a relative path to file plus line number. Which is nice, but also not quite the thing.
⌘+ / - Expand (+) or collapse (-) current code block. ⌘⌥+ / - does the same for the whole current file.
⌘ b Jump to the current entity declaration (same as ⌘-click). ⌥⌘ b jumps to implementation.
So there are more shortcuts that could be configured: "Path from repository root" and - most impressive - "Github Repository URL", which copies a link with a line reference. These need to be configured manually in Settings -> Keymap:
.

Shit Yourself In The Food

2022-10-18T00:00:00Z

A more fecal version of "Shoot yourself in the foot". Just saying.

On Importance Of HTTP Redirect In Single-Page Applications

2022-11-05T00:00:00Z

The Important Part

Single-Page Applications (SPA) are by design operating within the scope of one entry point (URL). Though they usually do have pages (or screens or other ways to structure interfaces and information), and they do have a way of navigating through them via various routing libraries (e.g https://reactrouter.com/en/main or https://router.vuejs.org/) that also manages (and reacts to changes in) browser's history API.

The problem with that is the entry point: as long as the app is loaded, changes in URL in browser's history do not require page reload, and the application's code reacts to them and displays the page accordingly. But when the URL is loaded anew (or the whole page is reloaded in browser), the HTTP request goes to the new entry point which is just not there.

An example

Let's say I have an SPA on my website, which is served from index.html - meaning there's an index.html that launches JS code for the app. So because web servers interpret index.html as a default content for the directory, requests to https://mysite.net/ would serve index.html and everything would work.

Now if I have a "Contacts" tab in my SPA that uses /contacts path for routing, while SPA is open and manages the browser history its router will handle https://mysite.net/contacts and it will work. But when URL is (re)loaded by browser, it will ask the webserver for /contacts - and there's no such file on the webserver, so it will result in 404.

Things to remember

So unless there's a server-side rendering involved, SPA need rewrite rules on server to serve index.html on every URL, so the SPA could launch and its router could take care or URL parsing and displaying the desired page/tab.

Vue docs have a good selection of recipes for various web-servers: https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations - for instance, for Apache it'd be adding following to .htaccess:

    <IfModule mod_rewrite.c>
        RewriteEngine On
        RewriteBase /
        RewriteRule ^index\.html$ - [L]
        RewriteCond %{REQUEST_FILENAME} !-f
        RewriteCond %{REQUEST_FILENAME} !-d
        RewriteRule . /index.html [L]
    </IfModule>

for Nginx

    location / {
        try_files $uri $uri/ /index.html;
    }

For Node with Express could be a middleware and so on.

In Netlify case, there's also a dedicated documentation page for rewrites: https://docs.netlify.com/routing/redirects/rewrites-proxies/ - but in short, you need following in _redirects file in SPA root (make sure it's copied to target directory on build):

    /*    /index.html   200

IMPORTANT: if you

Good thing would be to know about it before it hits you, though being able to quickly solve it after the fact (like what made me write this) is OK too 😄

Ideas For Remote Teams

2022-11-19T00:00:00Z

A new article on meetingless.io about working remotely and how to make it better for everyone involved: https://meetingless.io/remote-collaboration

I've been working on remote and hybrid teams ever since the beginning of the pandemic - much like many of us, though because I switched several teams and companies along the way and had various insights from friends and colleagues, I decided to put some thoughts together and publish them for the potential future reference (and generally to organise thoughts in my head).

It's not a comprehensive guide - in fact, it's not a guide at all: it's a short collection of (maybe a bit random) thoughts and ideas that I experienced or observed working in real life.

Everybody Nose

2022-11-28T00:00:00Z

Since one of the benefits of my current employment is the free 1-year subscription to Adobe Creative Cloud, I decided to enjoy that and shake dust off my (very) rudimentary Photoshop skills.

The result is a visualisation of the "Everybody Nose" word play:

Meter And Progress HTML Elements Demo Using SolidJS

2023-01-06T00:00:00Z

Why

As someone who started dealing with HTML since it was (IIRC) version 3.2, much of my knowledge and usage of the HTML tags dates back if not to 1998 then to 2004 for sure - like, it's still easier for me to think page structure in tables than in grid and flex.

Nonetheless, when I encounter a new tag, it's always fascinating to gie it a try - even if it's not immediately useful. So when I read about <meter> and <progress> tags, I decided to do a little interactive demo out of those. I originally wanted to use Svelte, but since this blog is essentially Markdown rendered by 11ty, that would require changing template engine for one page, so maybe some other day. Instead, I remembered about SolidJS and it seemed like a good option so here we are.

There's deliberately very little styling involved, the only thing that's applied is

    meter, progress {
        width: 500px;
        height: 50px;
    }

Meter

<meter> is intended for a metric-like information display, a number that could go up and down and have a different states (high/low).

The thresholds are specified with min, max, low, optimum and high parameters, like e.g.

    <meter value="20" min="0" max="100" low="25" optimum="50" high="75" id="metric-display" title="Meter Demo"/>

To quickly see the different states, you could or or .

Progress

<progress> element is intended for displaying the state of some process as it progresses from start to end, like a loading or saving status indicator.

However, it could also display a general "in progress" state when no parameter provided:

    <progress max="100"></progress>

When it's more parameterized, it looks different:

(press "Reset" to put it back to 0).

SolidJS

And what about SolidJS? It proved to be a useful and simple way to add reactivity to the page - for example, meter part looks like this inside the <script> tag:

    import { createSignal } from "https://cdn.skypack.dev/solid-js";
    import { render } from "https://cdn.skypack.dev/solid-js/web";
    import html from "https://cdn.skypack.dev/solid-js/html";

    const [metric, setMetric] = createSignal(20);

    const MeterApp = () => {
    
        const metricFromEvent = (event) => {
            setMetric(parseInt(event.target.value));
        };
    
        return html`
            <label for="metric-input">Metric value: </label>
            <input type="number" id="metric-input" min="0" max="100" value="${metric}" step="1" onchange="${metricFromEvent}"/>
            <br/>
            <meter value="${metric}" min="0" max="100" low="25" optimum="50" high="75" id="metric-display" title="Meter Demo"/>
        `;
    };
    render(MeterApp, document.getElementById("meter-demo"));

React Hook Testing Pass Reactive Variable To Hook

2023-01-07T00:00:00Z

The Problem

I'm still fairly new to React, and especially to the ways of testing it. So when I faced a hook that received a reactive variable and did different things depending on its state, I was puzzled how to test it as useState cannot be called outside of React context.

Additionally, due to some conditions I can't identify, tests were just hanging if I passed non-reactive variable - it might be a combination of software versions or something else, as I couldn't replicate it in simplified environment.

The Solution

Obvious in retrospect, the useState() could be called inside renderHook! So the solution looked like

    it('should return length', async () => {
        const {result: hookResult, waitForNextUpdate} = renderHook(() => {
            const [inputData, setInputData] = useState(["one"]);
            const hookResult = MyHook({inputValue: inputData});
            useEffect(() => {
                setInputData(["one", "two"]);
            }, []);
            return hookResult;
        });

        await waitForNextUpdate();

        expect(hookResult.current.result).toEqual(2);
    })

NOTE: waitForNextUpdate is needed only if the component is expected to re-render, it might not be required.

Reacting On Page Button Click In SolidJS

2023-01-07T00:00:00Z

What

SolidJS is a nice little reactive framework that allows to add reactivity to the page without the need to have the whole page rendered by it. Not that it cannot be, but my use case was specifically that - to add a dynamic element to a page without changing rendering engine or writing much raw JS.

It all works nicely (example below), but I was confused how to change variable state when I click on buttons that are not rendered by SolidJS - because I wanted to have most of the page in Markdown/HTML, as it's easier to manage.

It could be done via assigning functions wo window object like e.g.

    window.myFunc = () => {...}

inside SolidJS code, and then call them from onclick() handler in button elements, but that would pollute the window namespace so not nice.

Instead, there's a way to find all required DOM elements and add event listeners to them like so:

    function sliderClickSetter(event) {
        setSliderValue(event.target.value);
    }

    document.querySelectorAll('button.set-slider').forEach((item) => item.addEventListener('click', sliderClickSetter));

Here I select them by element type and style class (button.set-slider) and use element's value, but it could be ID selector as well (and querySelector instead of querySelectorAll, as it'd return just one element).

Example

Buttons in HTML code:

Set slider or

Rendered by SolidJS:

Code

HTML part (without styles)

    <div class="frame">
        Set slider <button class="set-slider" value="90">to 90</button> or <button class="set-slider" value="20">to 20</button>
    </div>
    
    <div class="frame" id="slider-app"></div>

Javascript

    import { createSignal } from "https://cdn.skypack.dev/solid-js";
    import { render } from "https://cdn.skypack.dev/solid-js/web";
    import html from "https://cdn.skypack.dev/solid-js/html";

    const [sliderValue, setSliderValue] = createSignal(50);

    const SliderApp = () => {
    
        const valueFromEvent = (event) => {
            setSliderValue(parseInt(event.target.value));
        };
    
        return html`
            <input type="range" id="slider" min="0" max="100" value="${sliderValue}" onchange="${valueFromEvent}">
            <p>Slider value: <em>${sliderValue}</em></p>
        `;
    };
    render(SliderApp, document.getElementById("slider-app"));

    function sliderClickSetter(event) {
        setSliderValue(event.target.value);
    }

    document.querySelectorAll('button.set-slider').forEach((item) => item.addEventListener('click', sliderClickSetter));

React: Why Not To Use act() (In Most Of The Cases)

2023-01-08T00:00:00Z

The Problem

As someone new to the React and its testing, I was reviewing some tests we have and (perhaps obviously) noticed a lot of usage of act() function.

And so I went along with it until I found a construct that looked suspiciously excessive:

    await act(async () => {
        render(<App />);
    });

I simplify it here, but the gist is wrapping component in async function inside act().

So I started to digging for why to we need act at all, and turned out that in most cases we actually don't need it. There's a very good article about it, "You Probably Don’t Need act() in Your React Tests" - it explains what act() does, and turns out most of the functions provided by React testing library are already doing what act() does - so things like render, userEven, fireEvent already wrap the code in act().

The code mentioned above tries to cope with An update to App inside a test was not wrapped in act(...) error, which happens due to asynchronous code running in component and being executed in event loop after the test code. So wrapping it in async looks like it solves the problem, but it really doesn't.

From the aforementioned article, the solution above is equivalent to

    render(<App />);
    await act(async () => {});

and only works because new await() happens in the next tick of the event loop.

The solution

The right way to address this would be to use either waitFor:

    await waitFor(() => expect(screen.getByText("something")).toBeInTheDocument());

or the async variants of search in rendered document, e.g.

    expect(await screen.findByText("something")).toBeInTheDocument();

When to use act()

There are certainly still cases where act() might be needed, here's a large collection that I'm yet to go through - though at least some cases (related to hooks) could be handled by renderHook and the waitForNextUpdate that it returns.

UPD: A short overview of the use cases for the act(): https://hydralien.net/blog/posts/react-when-to-use-act/

Add Svelte App To 11ty Page With Help From ChatGPT

2023-02-26T00:00:00Z

The Goal

When I was writing the article about Meter And Progress HTML Elements, I wanted to make it interactive and so to use some simple reactive JS framework for it - originally I thought of Svelte because I haven't really used it before, but when I tried to turn one blog page into a Svelte app it didn't look promising - I thought I'd need to redefine the renderer for one page somehow (the blog is in Markdown), so I ended up juts loading SolidJS by CDN URL and using it on the page.

I kinda still wanted to try Svelte so I thought that'd make an interesting exercise of trying ChatGPT - because I wanted to try it and I couldn't come up with anything reasonably relevant.

Look Ma No Hands!

And so I went asking ChatGPT for how to do it - first how to create a Svelte app, by asking "How to create simple Svelte app", and then "Show me simple Svelte app please".

Interestingly enough, first request only gave some command-line suggestions on how to scaffold the app, and second provided actual example:

    <script>
      let count = 0;
      
      function increment() {
        count += 1;
      }
      
      function decrement() {
        count -= 1;
      }
    </script>
    
    <button on:click={increment}>+1</button>
    <span>{count}</span>
    <button on:click={decrement}>-1</button>

and

    <script>
      import Counter from './Counter.svelte';
    </script>
    
    <Counter />

Which resembles Svelte tutorial examples from https://svelte.dev/examples/reactive-assignments as well as sample app created by npm init vite.

And that's good, however the problem was that scaffolding instructions ChatGPT suggested were all outdated - svelte create my-app doesn't work, and neither does npx degit sveltejs/template my-svelte-app - however when googling for the latter, it mentions to use npm init vite.

Then to find a solution to the problem of adding Svelte app t 11ty, I formulated it as "how to add Svelte app to 11ty page". It suggested yet another obsolete scaffolding mechanism, npx create-svelte-app my-svelte-app - it didn't work, but I already help ViteJS-based app operational.

The instructions to add the app to the page were also not entirely correct:

Create your Svelte app: You can create a new Svelte app using a tool like create-svelte-app, or you can use an existing Svelte app.

Build your Svelte app: Once you have created your Svelte app, you need to build it. Run npm run build in your Svelte app directory to build your app. This will create a public/build directory containing your app's JavaScript and CSS files.

Add Svelte files to 11ty project: Copy the Svelte public/build files into your 11ty project directory.

Include Svelte files in 11ty template: In the 11ty template where you want to include your Svelte app, you can include the Svelte JavaScript and CSS files that you copied in step 3.

    <!-- Example 11ty template -->
    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8" />
        <title>My 11ty Page</title>
        <link rel="stylesheet" href="/path/to/svelte-app.css" />
      </head>
      <body>
        <div id="svelte-app"></div>
        <script src="/path/to/svelte-app.js"></script>
      </body>
    </html>

In the example above, the link tag references the CSS file generated by your Svelte app, and the script tag references the JavaScript file generated by your Svelte app.

Initialize Svelte app: Finally, you need to initialize your Svelte app by adding the following code to your JavaScript file:

    import App from './App.svelte';
    
    const app = new App({
        target: document.getElementById('svelte-app')
    });

Which is a mix of a correct instructions (building an app and copying build files and adding them to a page) and incorrect ones (importing the App.svelte is already a part of a compiled code).

All In All

In the end, the information direction is legit - make an app, build an app, add build to the page (kinda the same as with a pre-built framework, but the whole app instead). But it's not really reliable - which I actually wasn't expecting it to be, but to outline the impression: it's a nice toy, and I imagine the less precise tasks (like writing a CV or any sort of generic text) would yield a better result, but any strict factual requests are not usable - or not immediately usable, anyway.

So as a result, here's the sample Svelte app - not doing much, but it's working:

Liar Liar Pants On Fire

As a bit of fun, I also tried asking a lesser known but still fairly strictly factual information, such as "Who founded Moscow State University?", to which I received a bunch of pleasantly delivered nonsense:

Moscow State University was founded by Prince Nikolay Ivanovich Lobachevsky and Count Sergey Semenovich Uvarov in 1755. The university is one of the oldest and largest universities in Russia and has a rich history of scientific and academic excellence.

Of which the real thing is only a founding year (and, well, "one of the oldest and largest" part). Which is OK because the way the prediction model works does not promise any correct information - but to emphasise the importance to take it for it is.

The results of "Tell me a fairy tale about a red bug on a shiny platypus in a blue forest of death" were pretty satisfactory though ;)

Full Page Screenshot In Google Chrome (With Inner Scroll)

2023-02-27T00:00:00Z

Usually

How to make a full-page screenshot (if the page doesn't fit the screen) in Chrome is a fairly known (or at least easily google-able) trick:

With the web page open, press ⌘⌥I to launch Developer Tools (Shortcuts are for Mac; Windows shortcuts could be googled accordingly, I can't validate them unfortunately).
Then, press ⌘⇧P, or select "Run Command" item in the menu:

In the search bar, type "screenshot", and select "Capture full size screenshot", and Chrome will automatically save a full-page screenshot to your Downloads folder.

Less Usually

The issue arises when the content is in a container within a page - so the whole page is not really larger than browser's viewpoint, but the content is still large and is scrollable within a component - like in the case of ChatGPT answers.

In such case, you need to open the Developer Tools, and find the component that holds the scrollable part. It might be tricky, but usually using the picker (arrow button on top-left of the console, or ⌘⇧C combination) helps with that.

Then, make sure you set a large height (or width, if that's the case) for the element (e.g. 1000%), and that it's "overflow" setting is disabled (or set to "visible") - here's the ChatGPT case:

Once done, follow the screenshot-taking sequence mentioned above.

Passing Moment, Or Moment.js Replacement

2023-03-04T00:00:00Z

The problem

At some point while dealing with date/time in JS code and searching for some clues, I stumbled over an advice "just use Moment" - and at that time, it was quite revelatory - I wasn't much used to the npm "package for everything" attitude, and haven't really thought that so many problems could have been solved by just using the right library.

And Moment.js stuck with me ever since - not that I needed day/time parsing or manipulation every day, but when I did need it, the answer was clear - just use Moment!

So it was quite a surprise to me that it's being deprecated - in fact, has been for quite some time already. The obvious questions were "why?" and "what now?".

Why?

Apparently Model.js has aged and doesn't do as good a job as it did before - as the maintainers say at the https://momentjs.com/docs/#/-project-status/future/,

Moment was built for the previous era of the JavaScript ecosystem. The modern web looks much different these days. Moment has evolved somewhat over the years, but it has essentially the same design as it did when it was created in 2011.

Some of the problems one could fin on the Web is slowness, large size, mutability and debugging problems. For instance, there's a good comparison of the Moment against other libraries (and native solution) at https://inventi.studio/en/blog/why-you-shouldnt-use-moment-js - it's actually from pre-deprecation times, but I'd expect it still holds true:

What now?

There's a "recommendations" section on the Moment's website itself: https://momentjs.com/docs/#/-project-status/recommendations/, which list several alternatives, such as:

It's almost too much choice, but luckily that pre-deprecation article I've mentioned earlier has als a comparison of these alternatives considering certain functionality and size:

Which (among some suggestions elsewhere) points out that for general cases, Day.js or date-fns are probably the best choice, while for tricky cases and error-prone data Luxon might be a better choice.

React: When To Use act()

2023-03-04T00:00:00Z

Long story short

In another article before (React: Why Not To Use act() (In Most Of The Cases)), I've outlined why the act() is probably not something one should use when faced with a "not wrapped in act(...)" warning in tests using React Testing Library (TL;DR most of the React Testing Library functions are already wrapped in act() internally).

But then, why does it exist and when to use it? There's a long and detailed article on the subject: https://kentcdodds.com/blog/fix-the-not-wrapped-in-act-warning#other-use-cases-for-manually-calling-act but in short, when the status update in the code executed asynchronously is not going to be executed within React's callstack - for instance,

When using jest.useFakeTimers() to manipulate the timers and timer-controlled functionality, so e.g. jest.advanceTimersByTime(1000) should be called as act(() => jest.advanceTimersByTime(1000)) (there's a detailed example in the aforementioned article).
When testing custom hooks: if a hook returns a function that could manage a state later, its call might need to be wrapped in act() as act(() => result.current.functionThatSetsState()) for the const {result} = renderHook(() => useHookThatReturnsStaetSetterFunction()).
When using useImperativeHandle hook - I'm not familiar with it, but to quote the article, "you only run into this if you're calling methods directly on a component which do internal state updates and you're outside of React's callstack".

On Conducting Technical Interviews

2023-03-05T00:00:00Z

Yet Another Opinion

I've recently started conducting technical part of the software developer interviews again (I did quite a bit of it before as IPONWEB and Booking.com), and thought I'd summarize some thoughts and ideas on how it works best for me, from the interviewer's side - but also from the candidate's side, too - as I've been on that side a lot last year, I have a fairly solid opinion on that too.

Being real

What I think works best for both sides is being real in the choice of assignment and questions about the results - meaning, solving problems and using techniques that would apply to a real day-to-day job. It's best when it could relate to what company does - e.g. if company builds an online email platform, a question about how to structure and store and search through email tags/categories is very relevant. But it doesn't have to be that specific - any sort of realistic hands-on task is good, as long as:

it doesn't hinge on specific language quirks, like e.g. using this in function vs arrow function;
it doesn't imply just one correct solution (there might be a limited set of ways to do it optimally, but there shouldn't be only one way to do it);
it's not an algorithmic puzzle of "you either know it or you don't" kind;
it doesn't heavily relies on candidate following any by-the-book principles such as SOLID or any other.

I think there's many real-world scenarios that could lead to a discussion of efficient algorithms, data structures, coding practices, design principles, collaboration and so on and so forth - but it needs ho be realistic, it needs to be relevant.

The way I like it

The interview flow I enjoyed as a candidate - and I try to employ as an interviewer - looks (roughly) like this:

Starting with a simple hands-on task, like parsing a CSV data or reading structured data from a source or aggregating provided data - for the interviewer, it provides a way to estimate the communication detail level required for the interview, the pace, maybe some areas where candidate might require hints; for the candidate, it's a simple and focused start without a need to understand the large scope and a chance to shake an anxiety and get into the flow.
Once initial scaffolding is done, expand the requirements to process the data or introduce additional variables to the system - e.g. for the data parsing task, it could be calculating total amounts per column and ordering it, or extracting unique values. This stage could be iterated several times over, adding extra columns to the data processing (ordering by several columns is a good exercise), or adding several steps to data processing/filtering/transformation. It provides an understanding on how well candidate build on the foundation, how they expand the problem perception and if they can keep up with changing complexity - and also if their solution is flexible enough to accommodate new requirements, their coding style is readable, they can modularise the code to make it reusable and understandable and so on. For the candidate, it's often the part with the most fun because it requires to really think how to adjust and adapt and make it work, which closely resembles how things evolve in real-life projects.
When enough iterations have passed and the solution provides sufficient insight in the candidate's skills, or the interview time is running out, I find it useful to leave enough time to discuss the solution and potential improvement points, and also ask the candidate why they used specific data structures or approach - it's nice to have a conversation, and it gives the candidate an opportunity to express themselves and maybe explain things they've struggled with or provide extra insight into how things should work.
In the end, leaving some time for a free-form Q&A for teh candidate to ask any questions is also a useful part: they might want to learn more about teh company and teh people they will potentially work with, and what questions they ask might also be a useful information.

The unexpected

Sometimes, things don't go smooth, for various reasons. What's important is to provide the candidate enough space to think and try things, but also to be there for them to answer any questions they have (and encourage to ask those questions), and to tot let them hanging - if they're struggling, providing some hints or asking them to elaborate on whet they want to achieve is really helpful. And just being polite and professional and compassionate - interviews are hard and stressful and exhausting, it's a MUCH harder work for the candidate than for an interviewer.

One Word At A Time, Or A Note About ChatGPT Principles

2023-03-14T00:00:00Z

Hot topic

ChatGPT is indeed a hot topic nowadays - so when I shared a note about Slack jumping on ChatGPT bandwagon at the work chat, a colleague recommended an article about why and how it works.

I gave it an attempt (because it's A LOT, for me at least) and even though I honestly skipped through a large part of it, I think it's still a worthy read - even if just those parts that still make some sense.

Hard Things Simple (Or Not)

So the article itself is here: https://writings.stephenwolfram.com/2023/02/what-is-chatgpt-doing-and-why-does-it-work/

As I've mentioned above, it's a lot - and I'm not going to replicate any of it here. Instead, here's why I think it's worth reading and how it could be consumed if it gets overwhelming at some point.

It emphasises an important idea that (also as my attempts to use it highlight) it's not a search engine or knowledge base or anything that we humans might think it is given the results it produces. Instead, it's a complex probabilistic model that selects what next word to put in the sentence based on probabilities calculated from a very large amount of text it's been trained on.

However, it's based on a neural networks, so it a way the mechanisms it's built upon are trying to replicate how human brain works, so in certain sense it actually is based on what we humans might think it is.

Consumer's Guide

The article goes - at least for someone without any neural networks background, like myself - fairly deep into the theoretical part, which at some point becomes overwhelming and incomprehensible.

So I found it useful to start from the beginning and go as far as one's understanding of the text gets them, and when it becomes too much skip to the last part of the article - roughly around "So … What Is ChatGPT Doing, and Why Does It Work?" chapter.

That last chapter provides ome important thought on the subjects - such as (just a few quotes):

it’s just saying things that “sound right” based on what things “sounded like” in its training material.

and

this suggests something that’s at least scientifically very important: that human language (and the patterns of thinking behind it) are somehow simpler and more “law like” in their structure than we thought.

and also

unlike even in typical algorithmic computation, ChatGPT doesn’t internally “have loops” or “recompute on data”. And that inevitably limits its computational capability—even with respect to current computers, but definitely with respect to the brain.

The End

Even though it's easy to disregard the ChatGPT phenomena as "just a probabilistic model", it's an impressive achievement that is quite certainly a huge milestone in the development of the language processing, neural networks and the AI efforts.

Hitting The Books: An Impression Of The "4000 Weeks" Book

2023-03-15T00:00:00Z

What Book?

The 400 Weeks by Oliver Burkeman was one of the things recommended to me by a friend when I asked for an advise on work/life situation and daily routines and focus and prioritisation of the daily tasks.

I've listened to it in an audiobook format - which might not have been the best medium for this book given the weight of the subject at hand, but it was good enough as the narrator's voice and pace was great, and the book is written in a very voice-readable way: it's easy to engage with, even given the fairly sobering subject that on average we have 4000 weeks of time in our lives.

Overall it resonated with the core motive of "The Subtle Art of Not Giving a Fuck" by Mark Manson, in a way that there's a limited amount of things we could attentively care about - and there's a limited amount of time we have to care about things. So essentially the goal is to focus on what we really care about and spend our precious resources on things that are dear to us, and not on amount of work we can do per day, or getting more efficient at time management - the latter, specifically, because if we focus on getting work done more efficiently, there will just be more work to do, so instead it's more rewarding to focus on doing the meaningful and rewarding work/activities/communication/relationships.

The Gist

It's well worth reading, and it's not a good idea for me to try to lay it out here - but what I wanted to save here for future reference is some questions and hints found at the end of the book.

Questions...

...are things to ask yourself to decide how to choose and prioritise things in life:

Does this choice diminish or enlarge me? Choose uncomfortable enlargement over comfortable diminishment. The "choice" being anything from work to friendship to relationships.
Impossible standards are impossible. Face it. Choose several achievable tasks and focus on those. The "standards" being what we think we can do - or rather, what we thing we must do.
Nobody cares what we’re doing with our lives, so don’t struggle to prove it to anyone. How do you really enjoy spending your days? We often have ingrained obligation to prove ourselves to parents, peers, society and so on - but nobody really needs that.
In which areas are you waiting till you know what you’re doing? Nobody ever does, so don’t wait. We want to be certain we have enough skills or knowledge or control to start doing something or pursuing an opportunity - but that's never sufficient, so no reason to wait.
What actions might be meaningful today if you accept that you might never see the results? There's certain fatalistic but liberating thought that we might never see the results of our efforts - but so what? What if we don't have to?

Hints...

...are things that might help to get what answers to the questions above imply:

Fixed volume approach to productivity: “eventual” todo list with everything, and “current” todo list win N tasks max, no adding new till some are done. Maybe one more for “blocked” things waiting on something.
Focus on one or at most two projects at a time, till you’re done or it’s evidently not working.
Accept that some things will have to be postponed/abandoned: work or sport when ill, renovation when changing jobs etc.
Focus on things you did, not on what you need to do. Small wins are still wins, and they’re very encouraging.
Limit and prioritize what you give a fuck about. There’s just so many fucks to give.
Make devices boring. Remove social media, for instance. Make the gadgets a tool, not an escape from your reality. (I'm leaving it here, though it sounds dubious to me; sounds like addressing the symptom rather than problem)
Embrace the mundane: everyday tasks could be engaging if you accept them as part of life they are and not as a burden.
Curiosity over worry: instead of fearing what comes next or how tantalising the experience is going to be, be curious about what it actually is going to be and the process/conversation/surroundings. It most probably is going to be much better than you think.
Be generous immediately: don’t delay giving a praise or make a donation or encourage someone.
Learn to do nothing. Worry about nothing, just be for a spell.

All of the above is not a literal quote, rather my own impression/interpretation of the book's text - though I think it reflects the book's sentiments fairly well.

On Conducting One-On-One Meetings

2023-03-18T00:00:00Z

The Problem

There are various processes in the team day-to-day work that require personal communication - and communication is a hard thing to get right. One of such communication types is one-on-one meetings (1x1, 1/1 and so on) - a format used to discuss personal matters, deliver (or ask for) the feedback, discuss problems, establish growth direction and steps and so on.

1x1 or 1 vs 1?

When done right, it's a very useful part of the process - when communication is open and mutually respectful and responsive, it really helps the personal and professional development, and especially to early detect and address any problems the individual might have.

But when teh manager (or whoever is playing more senior role in the meeting) is not engaged or not interested or would rather be elsewhere, it turns into an annoying chore and causes much harm as it makes the team member's distrust to the management, caging problems rather than discussing them, and eventually making team a dysfunctional rather than efficient.

Expert opinion

There's a great article about the subject by my former Booking.com colleague: https://medium.com/@xsawyerx/perfectly-simple-and-simply-perfect-one-on-one-meetings-1a85cf695078 - he has a lot more experience with it than I do, also from the managerial point of view - and I totally agree with what he has to say about the subject.

Typescript Export Was Not Found Error

2023-03-19T00:00:00Z

The Problem

I recently encountered a fairly obscure error in a Typescript project, where I was exporting a type (via export type TypeName ...), and then importing it in another place with import {TypeName} from ... - and when running the project (it was actually a package), I encountered a strange error that TypeName was not found in the file where it was defined. It seemed very strange.

The solution

The way to solve it is to do import type {TypeName} from ... - note the "type" part. That's pretty much what was required.

But why?

There's a great article that explains the problem in understandable details: https://javascript.plainenglish.io/leveraging-type-only-imports-and-exports-with-typescript-3-8-5c1be8bd17fb but in short, types are not saved in transpiled code, but import can't always identify it's a type so the import might remain in place - so when transpiled code tries to import the type, it's not available because types are removed when transpiling the code.

The import type directive tells transpiler that the type is imported, so it will be removed from the transpiled code as well and the code will not try to look for it - more details at https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export.

Importing SVG Files In Typescript React Project

2023-03-26T00:00:00Z

Howto

To display SVG files on the page (as e.g. icons or images or other elements), there are several ways depending on circumstances and requirements. For this case, I'm mostly concerned with React project written in Typescript - though for JS (and non-React) projects some of the below options apply as well.

Perhaps the simplest way is to just add it to the component "as is" - because it's a valid markup, things like

    export const ComponentWithSvg = () => (
        <div>
            <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="120px" height="120px" viewBox="0 0 120 120" enable-background="new 0 0 120 120" xml:space="preserve">
                <path d="M60,19.089C22.382,19.089,0.053,60,0.053,60S22.382,100.91,60,100.91S119.947,60,119.947,60S97.618,19.089,60,19.089z M59.999,84.409C46.54,84.409,35.59,73.459,35.59,60c0-13.459,10.95-24.409,24.409-24.409c13.459,0,24.409,10.95,24.409,24.409 C84.408,73.459,73.458,84.409,59.999,84.409z"/>
                <circle cx="60" cy="60.583" r="14.409"/>
            </svg>
        </div>
    );

would do just fine. Not reusable, not structured, not viewable independently - but it'd work.

If the project was created with Create React App or uses Parcel v2 or was appropriately configured to process assets automatically, another option is to import it like e.g.

    import iconPath from './iconFile.svg';

    export const ComponentWithSvg = () => (
        <>
            <img src={iconPath}/>
        </>
    );

or in case that imports file data as string, it should be possible to use it as a variable inside the component as e.g.

    import icon from './iconFile.svg';

    export const ComponentWithSvg = () => (
        <>
            {icon}
        </>
    );

There's also an option to turn the icon into a ReactComponent and use it as such - though a bit more work, I think it's the most structurally sound way:

Add type declaration for the .svg files by creating ./src/@types/assets/index.d.ts file with content:

 declare module "\*.svg" {
     import React = require("react");
     const ReactComponent: React.FC<React.SVGProps<SVGSVGElement>>;
     export default ReactComponent;
 }

In tsconfig.json, configure typeRoots parameter to include the types:

 {
     ...
     "typeRoots": ["./src/@types", "./node_modules/@types"],
     ...
 }

Import and use it as a component:

 import React from "react";
 import { ReactComponent as SVGIcon } from "./icon.svg";

 export const ComponentWithSvg = () => (
     <>
         <SVGIcon />
     </>
 );

React: Using CSS Module Stylesheets

2023-05-02T00:00:00Z

What Module CSS

Back when I was working on certain Vue.js projects, the styling came bundled with Vue modules, and was either inherently bound to the module (i.e. in the same file as markup and code), or modularised but still coupled with the markup.

The result was, styles were local to thw component by default (well, "by default" being mostly a scaffolding defaults, but still), so style classes were automatically getting unique names via adding unique identified to the DOM element and changing style classes from e.g. .example into .example[data-v-f3f3eg9] - so getting a common style actually required some work and consideration.

React is more "manual" in this regard - a lot of code I've seen just includes the CSS (or SCSS) like

import * from ./styles.css

and then using className="MyClassName" classes in elements.

Which is OK, but it often covers much more ground than needed - so if I'm dealing with several similar components on the page that need different styling (like if the component comes from a package that is used in several sub-components independently), we got ourselves a problem, as whoever defined the styling for the class last, reigns supreme.

And so

There's a way to do things similar to Vue approach: https://create-react-app.dev/docs/adding-a-css-modules-stylesheet/

Essentially, it's a way to make CSS class names unique per component instance, so each would have independent styles. To re-use examples found in React docs, let's say we have styles in Styles.module.css, and component in Component.js:

.error {
    background-color: red;
}

and

import React from 'react';
import styles from './Styles.module.css';

const Button = () => {
    return <button className={styles.error}>Error Button</button>;
}

export default Button;

What will ensue is className will be unique, e.g. Button_error_ax7yz, and specific styles will only be applied to this instance.

Caveats

There's a couple of nuances to this:

Styles file has to have .module. in its name - Something.module.css or Whatever.module.scss, but .module. needs to be there.
Class names shouldn't have dashes - .error or .errorButton would work, but .error-button would not (in my case, IDE tries to be helpful and remove the dash, but it leads nowhere)

Keeping It Simple - Essential YC Advice And Thoughts

2023-05-14T00:00:00Z

Personal Experience

I didn't have that much of an experience with startups and young projects myself - though I tried to build one with friends and work for another one afterwards. But the ideas I want to cover here, even if immediately relevant to the startup kind of projects, are also applicable to the teams and projects in the enterprise realm.

I think the problem generally boils down to "over-engineering" and focusing too much on "doing things right". In any project, there should be a balance between how stable and properly done things are, and how fast the project is moving and changing: if the focus is primarily on following (software) design methodologies, or building an uber-reusable solutions, the actual evolution of the product would suffer, which essentially could lead to product's irrelevance and demise, which would render all efforts pretty much useless.

And in case of young products/projects specifically, till there's a steady revenue and profitability, the product has to evolve and change rapidly and constantly - so any elaborate "by-the-book" solution will just bog it down, and become irrelevant very soon - especially if the goal of the development efforts is to create something super-flexible and adaptable. No amount of flexibility and adaptability will suit the reality of a project that tries to find its place on the market, so spending efforts on it are counter-productive.

On the other side of the spectrum would be building something very patchy and ad-hoc - but if that's a POC or a system that has no guarantee to live long, it's very well justified: it will, most probably, be changed immensely quite soon - and in a super-rare case when it wouldn't it's easy to dismantle it and introduce a solid replacement later on. There's no need to scale till there absolutely is.

Another aspect specifically relevant to the startups is they attract a skilled and opinionated individuals that are not necessarily experienced in team work, and are eager to pursue a new solutions and fresh technologies, which are not necessarily meant for the small projects, and would mean spending a lot of time on finding and solving issues. Boring is good, in this case - so at some point someone has to step up as a technical leader and people manager, and the sooner the better (also good if that person has a relevant experience).

YC Advice

That brings me to the YC advise part - YCombinator has this article on their website, YC’s Essential Startup Advice, which is a very useful advice altogether, but also has a succinct advice in the "The Pocket Guide of Essential YC Advice" section.

Here's a copy of that section with comments in some places:

Launch now (the sooner you do it, the sooner you'd know what needs to change; building something longer means spending efforts on something that will not be relevant)
Build something people want
Do things that don't scale
Find the 90 / 10 solution
Find 10-100 customers who love your product
All startups are badly broken at some point (and that's OK)
Write code - talk to users
"It’s not your money" (meaning, in the article's words, "You have a fiduciary and ethical/moral duty to spend the money only to improve the prospects of your company")
Growth is the result of a great product, not the precursor
Don’t scale your team/product until you have built something people want
Valuation is not equal to success or even probability of success
Avoid long negotiated deals with big customers if you can
Avoid big company corporate development queries - they will only waste time
Avoid conferences unless they are the best way to get customers
Pre-product market fit - do things that don’t scale: remain small/nimble
Startups can only solve one problem well at any given time
Founder relationships matter more than you think
Sometimes you need to fire your customers (they might be killing you)
Ignore your competitors, you will more likely die of suicide than murder
Most companies don't die because they run out of money
Be nice! Or at least don’t be a jerk
Get sleep and exercise - take care of yourself (This one is super important - it's too easy to get into the "I have to do it all" mode, which burns you out in no time)

Reddit RSS Feed Parsing/Proxying In Python

2023-07-29T00:00:00Z

The problem

I like reading news via feed aggregators - and after the demise of Google Reader, I've migrated to Feedly. Which is great by itself, and doesn't even need me to provide an URL of teh feed - it can use site URL, or even site name, to provide one.

Also, I read some (very limited) streams on Reddits, such as r/programming/ - but the problem is, if I use just the feed directly, it points me to a post on Reddit, which I find fairly useless: I don't care about comments, I mostly care about the content of the articles people post.

So I wanted clicks on the item to lead me directly to the article, skipping the Reddit post.

The solution

The solution I came up with was to host a simple proxy that would accept feed name, get the feed XML from Reddit, parse it, replace the post URL with article URL, and return the results. Since I have some apps running here and there, I could put it on a server, so I didn't need to be concerned about CORS requests or any other browser security constraints.

So the result is a simple Python app that uses Bottle as HTTP server framework. It doesn't do much, but it does what I need it to: https://github.com/hydralien/tools/tree/master/reddit-streamline.

Example: https://pidging.hydralien.net/direddit/?rss_path=r/programming/.rss.

NOTE: I had to change the path handling from regex to query parameter in thw example app because conflicts in my Flask app with some other route handling mechanisms.

It actually existed for a few years now, I just finally decided to upgrade it to Python3 and thought of posting it here.

Reviving Stale Flutter App For iOS and Android

2023-09-29T00:00:00Z

The problem

I have a Flutter app I developed couple years back, PictureVert (source code: https://github.com/hydralien/PictureVert). It had been collecting proverbial dust for a while, so I decided to build ad deploy fresh packages for both iOS and Android.

So I needed to figure out how to update everything and make it work again.

Flutter

Install fresh Flutter and set its path in the PATH variable (in e.g. ~/.profile)
Run flutter pub outdated and flutter pub upgrade (I had to do those iteratively because one points to another, but once is actually enough)
Add new versions of stale packages via flutter pub add packagename anotherpackagename ...
Check flutter pub outdated again - it seemed to have different concerns this time around
Add what's missing via flutter pub add and flutter pub upgrade
Check flutter doctor to see all is well

iOS

Building for iOS got simpler, though requires some pre-steps:

Accept XCode license agreement

    sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
    sudo xcodebuild -runFirstLaunch
    sudo xcodebuild -license

Prepare dependencies

    xcodebuild -downloadPlatform iOS
    open -a Simulator
    cd ios; pod install; cd ..

Build and install

    flutter build ipa

At the end of teh build, some useful guidance is provided:

    Built IPA to /Users/halien/devel/picturevert/build/ios/ipa.
    To upload to the App Store either:
        1. Drag and drop the "build/ios/ipa/*.ipa" bundle into the Apple Transporter macOS app https://apps.apple.com/us/app/transporter/id1450874784
        2. Run "xcrun altool --upload-app --type ios -f build/ios/ipa/*.ipa --apiKey your_api_key --apiIssuer your_issuer_id".
           See "man altool" for details about how to authenticate with the App Store Connect API key.

I decided to use the "Apple Transporter" way (#1) and it worked surprisingly smooth - the build appeared in the App Store Connect immediately, ready for testing and being plugged to a release, so I just needed to provide an info about teh update and submit it for review.

Android

First, Google Play Store Console required updating the SDK versions, so in android/local.properties I needed to set

    flutter.minSdkVersion=24
    flutter.targetSdkVersion=33

Then, things with Android were not that smooth - flutter build appbundle started complaining seemingly about one of the dependencies:

    * What went wrong:
    A problem occurred evaluating project ':share_plus'.
    > No signature of method: build_bkr51e9abrzl3n3k84uhu79f3.android() is applicable for argument types: (build_bkr51e9abrzl3n3k84uhu79f3$_run_closure2) values: [build_bkr51e9abrzl3n3k84uhu79f3$_run_closure2@94bf7f9]

But that's a deception: apparently the problem is incompatibility with old Gradle plugin, but to which version to update was unclear.

So I ended up doing flutter create newproject elsewhere, and then copying the supported versions from it:

from android/gradle/wrapper/gradle-wrapper.properties, the distributionUrl=https\://services.gradle.org/distributions/gradle-7.5-all.zip
from android/build.gradle, the ext.kotlin_version = '1.7.10' and the classpath 'com.android.tools.build:gradle:7.3.0'

After that, flutter build appbundle had finally succeeded.

I also copied sdk: '>=3.1.3 <4.0.0' from pubspec.yaml of a fresh Flutter app, just to be sure.

Bun React JSX-Dev-Runtime Cannot Find Module / jsxDEV Is Not A Function Error

2024-10-02T00:00:00Z

Preface

We're using Bun (https://bun.sh/) for some repositories - and as a still young project, it has some quirks. Recording one of those in case it's encountered elsewhere.

Error case

We had a situation when an NPM package built with Bun was working fine while using locally, and build that included the package passed well, but when the final build (of the app that used the Bun-built package) was loaded from CDN, it failed with following:

TypeError: (0 , yK.jsxDEV) is not a function
at C$ (index. )s:1:46881)
at of (react-dom.production.min.js:167:137) at s (react-dom.production.min. js:290:337) at sZ (react-dom production.min. js: 280:389) at react-dom.production.min.js:280:320
at sx (react-dom.production.min.js:280:325) at sB (react-dom.production.min.js:271:88)
at sW (react-dom-production.min.js:273:300) at iu (react-dom.production.min.js: 127:105) at react-dom.production.min.js:267:273

When investigating locally, somewhat different behaviour was observed - the package was failing with the following error (package names generalised):

@parcel/core: Failed to resolve 'exportedThing' from './node_modules/somepackage/dist/index.js'

  /Users/user/devel/project/node_modules/somepackage/dist/index.js:1:34428
  > 1 |  from"exportedThing";import{a as hs,b as ms}from"somePackage";import{jsxDEV as gs}from"react/jsx-dev-runtime";var Di=({children:i})=>{const{locale:e}=ms();return gs(hs,{locale:e,localeData:us,children:i}
  >   |      ^^^^^^^^^^^^^^^^^^
    2 |

@parcel/resolver-default: Cannot find module 'exportedThing'

Those were somewhat obscure and misleading - the keywords are "jsxDEV" and "react/jsx-dev-runtime" - the app was running on production, yet required some dev resources.

Solution

The solution was to prefix the Bun build command in package.json (for the package build) with NODE_ENV=production, like e.g. in our case:

 "build": "NODE_ENV=production bun build.ts",

Git Merge Conflict Resolution And Learning Resource

2024-11-22T00:00:00Z

Merge conflicts

When merging branches in Git repository, conflicts sometimes emerge. There's certainly a way to solve them manually, but sometimes they're too large and don't actually matter (like e.g. yaml-lock in a Node project), and sometimes they should be resolved by picking everything from either branch.

There's a way to use specific merge strategy to resolve everything either way:

git merge --no-ff -X theirs branchname

git merge --no-ff -X ours branchname

But sometimes it's not that trivial - sometimes some changes need to be resolved one way, and some the other. In that case, when merge encountered conflicts, it's done like so:

git checkout --theirs [path/file]

git checkout --ours [path/file]

(also, git add [path/file] still required afterwards to mark resolution)

Learning resource

There's a great resource that explains these - and much more, like what's --no-ff - in great details: https://craftquest.io/guides/git/git-workflow-tools/git-merge

Philips 65OLED Disable Factory Logo Screensaver

2024-11-29T00:00:00Z

The background

I recently got a Philips 65OLED708 TV, based on Google TV. Gorgeous large screen, bright and vivid. And since it's Google TV, it also has an "ambient" mode that can display, among other things, photos from Google Photos. And I have plenty of those, so on the previous TV Chromecast did a good job displaying that.

"So far so what, but here's the thing"

The damn thing starts displaying black screen with white Philips logo jumping around after two minutes of inactivity! And there's no way to set longer timeout or disable it in conventional settings, because they decided to safeguard users from OLED Burn-In. So much for using the beautiful screen for anything apart from watching videos... Now, Ambient mode has elements that can remain at one-ish place for a significant time (weather, time, album name), but unlike that pesky Philips screensaver, they can all be disabled to leave just constantly changing images which would NOT cause burn-in.

Luckily, there are ways

After some googling, I found two reliable ways to do it - one (hopefully) more permanent, and another temporary but with more access to the system.

The (seemingly) permanent way

is to revoke the "Display over other apps" permission from the "Tv System UI" app, by following this path in TV menu:

Settings
System
Storage
Internal shared storage
Apps
Special app access
Display over other apps
Finding "Tv System UI"

and disabling it. It still triggers (there's a temporary notification when it does), but it doesn't overlay the Ambient mode slideshow anymore.

The temporary way, on TV

is to stop the Tv System UI app by navigating to:

Settings
System
Storage
Internal shared storage
Apps
See all apps
Scroll to the bottom to find "Show system apps"
Scroll all the way down to "Tv System UI" (NOT "System UI")
Force-stop it

It will come up on system restart though. And it's A LOT of scrolling.

The temporary way, on remote device (OSX laptop, in my case)

is unnecessary complex, but I'll leave it here in case I'd ever need to do more with the TV, as is provides a way to connect to its internals with Android Debug Bridge.

First, installing ADB:

Install homebrew
Install adb: brew install android-platform-tools and check that it's available with adb devices (result would be empty for now)

Then (from https://www.reddit.com/r/Chromecast/comments/s96moi/how_to_connect_to_ccwgtv_via_adb_using_only_wifi/):

Find your Google TV's IP address and write it down to use later. Go to Settings > System > About > Status. Your IP address will be something like this made up example: 192.162.3.4 (ignore the long number that you'll see above the IP address).
Enable Developer Options on your Google TV:
- Settings > System > About.
- Scroll down to “Android TV OS Build” (Make sure it says BUILD not VERSION).
- Tap seven times. You’ll see a message that says you’re now a Developer.
Enable USB Debugging on your Google TV:
- Settings > System > Developer Options (if you don’t see this, then the previous step did not complete successfully)
- In Developer Options, ensure Enable Developer Options is toggled on.
- Scroll down to USB Debugging and toggle it on.
Make sure your Google TV and your computer are on the same WiFi network.
In shell, run adb connect [your Google TV IP address from Step 1].
On the TV, you'll see a message like this: "Allow USB debugging?"; allow it (with TV remote).
Back in the command window, you'll probably see something like this: "failed to authenticate to 192.162.3.4". That's OK - if you try e.g. adb connect 192.162.3.4 again, it'd say "already connected to 192.162.3.4"
To check that you're connected, list the connected devices with adb devices - should be e.g. "192.164.3.4:5555 device"
To disconnect (when needed): adb disconnect 192.162.3.4. Reconnection would require confirming it on TV again.
Run adb shell am force-stop org.droidtv.tvsystemui

That does pretty much the same as what could be done manually - benefit is, it could be done faster than in UI once everything is set up, and ADB would allow a lot more if needed.

Tada!

Here's one of the photos to emphasise the importance of having the ambient mode:

Picturevert Update And New Features

2024-12-19T00:00:00Z

Update

Since I had some time and wanted to try some ideas, I've updated the Picturevert app with some new features - so now it's capable of:

Selecting any image from the photo gallery.
Taking an instant photo and applying effects sto it immediately.
Inverting image colors with a variable degree of color shift.
Making a multi-direction color trail from any point of picture with varied jitter and thickness.
Mirroring halves of the picture in 4 directions.
Exporting the result by using standard sharing mechanism.

Most fun was to implement color "smudge", since I wanted to make lines of variable width but with averaged color, and also with some jitter of starting point. Given that image comes as a list of values for pixels, but each pixel is actually 3 elements in array (RGB), that required some thinking.

Mirroring was fun too, because it wasn't just reversing half of the list - had to be done for each line and in iterations of 3 (because RGB).

Results

In Vitest, Order Of Import Matters For Mocks

2025-02-06T00:00:00Z

Cutting to the chase

In Vitest, this would work:

    import {test, expect, vi} from "vitest";
    import round from "lodash.round";
    
    vi.mock("lodash.round", () => {
        return {
            default: (value) => 33
        }
    })
     
    test("roundup", () => {
        const no = 5.7;
        expect(round(no)).toBe(33);
    });

however if the mock is extracted to another file (say, to be reused across several tests), test will fail if it's imported after actual package it mocks:

    import {test, expect, vi} from "vitest";
    import round from "lodash.round";
    import _ from "./roundmock";
    
    test("roundup", () => {
        const no = 5.7;
        expect(round(no)).toBe(33);
    });

because the mock is imported after the actual package. This, however, will pass (note that the only difference is the order of imports):

    import {test, expect, vi} from "vitest";
    import _ from "./roundmock";
    import round from "lodash.round";
    
    test("roundup", () => {
        const no = 5.7;
        expect(round(no)).toBe(33);
    });

I guess that's because Vitest is hoisting mocks withing the file to happen before the imports, but if they're in separate files - the import will happen in actual import order.

Picturevert Update Two Way Mirroring

2025-02-08T00:00:00Z

Update

Added two-way image mirroring to the Picturevert - even more fun now:

My Own Short Fiction Collection

2025-02-12T00:00:00Z

The Gist

For since I can remember, I've been collecting some ideas from everywhere that I was hoping one day to turn into something - but I wasn't sure into what, exactly. So I decided to try it with text - and here's the result, a set of short fictional stories.

No particular connection between the stories, nothing sophisticated - but I kinda like the result.

Failure In Complex Systems

2025-05-20T00:00:00Z

"The potential for catastrophic outcome is a hallmark of complex systems"

This is primarily a set of quotes from a great (and short) manifesto-like paper "How Complex Systems Fail" by late Dr. Richard I. Cook.

I fully agree with the points gathered in that paper, so I thought I'd save it here along with most powerful (IMO) quotes.

And as another reference, this paper came to my attention via another article, "Not causal chains, but interactions and adaptations", which IMO is a little vague but still touches an important point that the Root Cause Analysis (RCA) is an obsolete and misleading practice that masks the actual nature of failures in any complex system.

So here goes.

"The complexity of these systems makes it impossible for them to run without multiple flaws being present ... The failures change constantly because of changing technology, work organization, and efforts to eradicate failures"

"The potential for catastrophic outcome is a hallmark of complex systems"

"no isolation of the ‘root cause’ of an accident is possible. The evaluations based on such reasoning as ‘root cause’ do not reflect a technical understanding of the nature of failure but rather the social, cultural need to blame specific, localized forces or events for outcomes."

"Hindsight bias remains the primary obstacle to accident investigation, especially when expert human performance is involved."

"all practitioner actions are actually gambles, that is, acts that take place in the face of uncertain outcomes ... in general, post hoc analysis regards these gambles as poor ones. But the converse: that successful outcomes are also the result of gambles; is not widely appreciated. "

"Recognizing hazard and successfully manipulating system operations to remain inside the tolerable performance boundaries requires intimate contact with failure."

And one more, not as a reason against new technology, but as an observation of potential impact that needs to be considered:

"When new technologies are used to eliminate well understood system failures or to gain high precision performance they often introduce new pathways to large scale, catastrophic failures. Not uncommonly, these new, rare catastrophes have even greater impact than those eliminated by the new technology."

Flickr Alternatives And DIY Option

2025-12-29T00:00:00Z

Also available as a LinkedIn article!

The Background

I've been using Flicks as a place to host my annual photo galleries for quite some time, since 2013. And as ancient and rigid Flickr is, it still does few things well, or at least well enough. Namely, the gallery display - it's not ideal but it does what it should: shows photos and related information such as title, description etc. Sure, there are ads, and it's clunky, but it's tolerable, and my photos are not that important to make a fuss over the presentation; I just like them being available to view.

The Problem

Flickr's free tier limit of 1000 items worked for me for a long while as I only add some 50-80 photos a year, but it wsa inevitable that it runs out some day. And so the day has come. I don't mind paying for services, but given that Flickr interface and UX is not great, IMO it's not worth the price, and other extras they include in the Pro tier do not interest me: I just need a photo gallery, that's all.

The Solutions That Were Not

There are quite a few alternatives out there, and I've tried several - but none worked for my case, for various reasons:

Google Photos

I already use Google Photos for personal photo storage (its key advantage is, it serves as a image source for the smart TV screensaver), so having a dedicated album for annual "best of" collection was a logical choice. However, the problem with Google Photos is when public link is created, it automatically shares the album with people who view it, if they're logged in to Google (and many people are), and so not only the album appears as shared in their Photos, I also see them in the shared list - and that's not at all what I want.

500px

Looked promising, good price, but editing photo title/description after upload was a major pain, and then what killed this option for me was gallery view mode - even though I chose paid account, for the non-logged-in viewers the gallery showed a blocking ad pop-up that required to wait for a few seconds, and then click a "Proceed" button, and then after a few photos it appeared again. That's just utter disrespect to both viewers who'd like to see the photos, and authors who want their photos viewed. I get the ads, but not blocking adds. That's just abhorrent.

Photobucket

Nice and clean photo upload, but viewing gallery looks like a stock NPM photo library and doesn't show any photo caption/details till user finds the info icon. For the price that tops the Flickr, that looked underwhelming.

Ente

Good price and generally simplistic interface (which is good), but viewer experience was more like a management interface than a photo gallery. This would've probably been my option had the DYI approach (described below) failed.

Others (Instagram, Dropbox, Shutterfly etc.)

There were other options too, but they all had downsides - too much a social network, too business-oriented, too fearmongering marketing strategy (I'm looking at you, Dropbox) etc.

The Solution

With the research above yielding unsatisfactory results, I thought that I already have another place to put the photo assets, that being Cloudinary - I use it for photos, screenshots and various images I use here in blog or on website or elsewhere. I knew that Cloudinary has a rich image/video transformation/presentation layer, so I gathered it must have plenty of libraries I could use to build own solution. And on top of that, open-source image gallery libraries were always abundant for any platform, so I was certain there'd be something for Vue (which is what my portfolio website is using).

And both were certainly true:

Cloudinary has guidance for Vue (among other systems such as React, Angular, pure JS and more): https://cloudinary.com/documentation/vue_sample_projects
There's a lot of photo galleries for Vue to pick from - Galleria, PhotoSwipe, vue-gallery and so on. I've picked lightGallery as the one that seemed most suitable for my needs OOB.

With a bit of Cursoring (which essentially did exactly what I'd done with copy-pasting, only much faster) and certain amount of cursing (see caveats below), it all worked out, so here it is, my best photos of 2025 here on personal website.

Caveats

The solution is very rudimentary as I had very little time, so the year is hardcoded, there' no galleries list (and there's no other galleries yet), and there's no dedicated upload.
Cloudinary's internal upload is good, and tagging is easy, but adding extra information such as caption and description is tedious. Not much tedious than 500px though, but this one's for free.
The solution uses Cloudinary CDN listing functionality, which required un-disabling "Resource list" resource in Security settings, and is not the best approach as it allows anyone to list all my public resources. Works for my case, but anything more complex would need a backend.

Pros

Cloudinary is a generous platform for non-profit creators, and the functionality they provide is amazing. So for now, it's free.
The technology is well known to me, so I have a freedom to adjust is as I please, expanding however I want. With modern LLM tools, it's also fast.
It's all within my website now, which is a set of static pages hosted on Netlify (another amazing service with a great free tier)