Tag: Webdev

Revamped Hybrismart: Engineering a Smoother E-Commerce Blog Experience | June 29 2026, 03:45

I completely redesigned and refreshed my hybrismart – an engineering blog about ecommerce. Yes, as you’ve gathered from this introduction, it’s in English. All 200+ articles have been revamped; no more style zoo, the font is easier on the eyes, illustrations are clickable, and there is now in-article navigation. It’s not perfect yet, but it’s enough to go public.

Search will be available. It’s already operational, but I temporarily hid it. Just need to finish it up.

A particular point of pride is the contextual article recommendation system. That is, next to a paragraph about drools, there will be a link to an article about drools explaining why it’s relevant in that context. On desktop, this will appear as a margin note, and on mobile, it will be an inset in the text.

The entire site is static and generated from markdown. Goodbye WordPress, you were very, very bad.

https://hybrismart.com/

https://hybrismart.com/

Innovative DIY Program for Live Transcription and Screen Capture Analysis | June 18 2026, 04:47

I made a really cool thing for myself. I launch a program, it turns on the microphone and listens. I switch to, say, a browser, comment on what I see on the screen, periodically pressing a hotkey to take a screenshot. Meanwhile, my program makes a time-stamped transcript of my comments, saves the screenshots with time stamps, then it recognizes the screenshots, extracting therefrom the spellings of various words, brands, identifiers, people’s names, so as to then transform the transcript of my speech into correct text. And all this – local models, running on my laptop, which means, absolutely free.

After I finish talking to the computer, I start processing the transcript, which takes the raw transcript and text-recognized screenshots as input and outputs a processed transcript, which now looks presentable (Gemini API is used here). One could even go a step further and automatically cut out fragments from the screenshots that were discussed, and insert them in the text exactly where they were mentioned.

Or here’s another thing I can do: just turn on a video on the speakers and the program immediately makes such a transcript for me. Google on YouTube the video “Angular HttpClient Under The Hood. Design Patterns & Source Code Overview” starting at 3:51 – I just put it on autopilot for a couple of minutes, then stopped my script.

Transforming Image Proportions with Generative AI: Smart Redesign Solutions | June 16 2026, 10:08

I published an article about how to transform images with changing proportions. Using generative AI, of course, because transforming a square into a rectangle can either result in data loss, their extrapolation, or by stretching and compressing the image itself. Here, I describe a method where smart extrapolation is performed. When processing hundreds and thousands of images, this approach is not without errors, but their number is relatively small, and it turns out to be much more advantageous to focus on manually correcting the erroneous ones than to do all the work manually right away.

This is specifically necessary during a redesign, when it turns out that the new design slightly mismatches the old one in size, for instance with banners, and the number of these banners is measured in hundreds and thousands.

Automating Banner Crop/Resize Across Breakpoints with Generative AI

Mastering Cross-Posting: From Facebook Frustrations to Dual Blogging Excellence | May 23 2026, 14:28

I have perfected the cross-posting from Facebook to my two blog sites [which almost no one visits] – beinginamerica.com and raufaliev.com. When a new post is published on Facebook, a mechanism is triggered to translate the post into English, process attached images, generate descriptions for them, create a title based on the text of the post and descriptions of the images, generate tags from the same basis, record the post in turso db – this is a cloud database, free up to certain limits, create embeddings via openai, record in qdrant cloud – this is also a cloud database, but vector-based, and finally, upload images to wordpress via API, and publish the post in English and Russian via API.

All would be well, but of all the APIs, the silliest one is Facebook’s. Firstly, for pages like mine, transitioned to New Experience, it’s almost impossible to use most of this API. Well, it’s possible, but you have to spend a long time proving to Facebook that you really need it, by showing startup documents, demonstrating the application, etc. Obviously, they are reluctant to deal with something that takes content out of their system. In addition, the token that gives access to the latest messages is relatively short-lived (possibly a few weeks), and it needs to be obtained anew through a browser only. So, any automation requires regular attention, otherwise it breaks.

If you mess up and don’t offload the latest posts through this Facebook Graph API in time, they just disappear from the list of recent ones and that’s it, no more API access to them. The only way is to request an archive download from Facebook. This download is also rather silly – it requires a lot of transformations and removing unnecessary stuff. For example, in the file containing posts, which I process, for some reason there are links that I sent in comments without accompanying text. And the comments are in a separate file!

To assign tags, I had to solve a separate challenge. Here’s the thing: there are about 10,000 posts over all time. That’s a big chunk, and you can’t build tags from it because it doesn’t fit into the contextual window of the LLM. But you need to. So, I did this: a script takes random posts from the 10,000 in such a volume that their total size is just below the specified limit in tokens, and at the end of this block, it adds the prompt “generate the most common tags for me, 30 pieces” (I simplify the prompt used). In the end, I ran this 10 times and got 10 sets of tags with 30 pieces each, generated for different slices of the database. That made 300 tags, some of which are complete duplicates, while others are synonyms and closely related in meaning. All this is fed into the LLM, and we get a list of tags and a hierarchy of tags. Now we have a limited set of tags that reflect the 10,000 posts as closely as possible. Turns out, that in almost 20 years on Facebook, my breakdown is as follows:

Tag Posts

==================================================

#Russia 3412

#Thoughts 3146

#Tech 3105

#Culture 2765

#Hobbies 2726

#AI 1603

#Science 1367

#Software 1358

#Travel 1298

#Learning 1138

#Society 1050

#Nature 958

#Education 915

#Business 902

#Art 894

#Programming 889

#Humor 840

#History 807

#Gadgets 750

#Moscow 713

#USA 614

#Cinema 567

#Webdev 493

#Music 476

#Sports 473

#Mindset 443

#Auto 400

#Books 386

…

and so on. This list includes both tags from the limited list and tags that the LLM appointed to content simply because it didn’t find anything suitable in the limited one.

Tags from the limited list became categories on the site. The rest of the tags + these just became regular wordpress tags.

As for image search. I had two ideas on how to do it. The first – OpenCLIP. It’s pretty straightforward but requires hosting the model somewhere. Easy on my machine, but inconvenient to start it each time, plus I planned to move the migrator to a cheap server on Amazon. It’s also okay to calculate in cloud models, but you have to pay a bit, which is yet another dependency. But the main thing – it works quite well without it. I generate descriptions for images using OpenAI, which is used for translating into English anyway, and then create embeddings using a large model. So far, all search tests are a great success. Especially when there’s text on the image, and it’s a big question whether OpenCLIP would have interpreted it successfully.

In the end:

1) wordpress raufaliev.com – free

2) wordpress beinginamerica.com – free

3) turso db where all posts are stored – free

4) qdrant cloud where embeddings are stored – free

5) openai for translation and image descriptions – not free, but inexpensive (cost $30 for post processing over a year).

I attach two screenshots – how the search by images works, and by texts, as well as the migrator dashboard.

Smartfolio.me: Revolutionizing Knowledge Organization with Advanced Features | March 19 2026, 04:01

My creation – the knowledge organization tool Smartfolio.me – has gained new features. I’m attaching a five-minute video overview.

It’s like Google Docs, but you can embed documents within each other, creating a network of connected knowledge, and these documents can be PDFs and regular texts.

Upload a PDF, the program converts it into images, and you can highlight any sections right on the pages to leave a comment or ask a question.

If something in the text is unclear, you highlight the area and press “elaborate” — the LLM will detail everything thoroughly, taking into account the context of the entire document, and the explanation will stay linked to the highlighted fragment.

You can simply cut out a piece from a PDF, and the LLM extracts clean text or a ready-made formula from it.

In the PDF window, there is now a small panel — all comments and explanations are immediately visible there, so you can quickly jump to the necessary parts.

You can cut out a diagram or graph from a PDF, copy it as a picture, and paste it into your text. It will automatically crop “on the fly” and save in the database, not as a copy but as a link to the page with crop parameters.

If you delete the page link in the text, it won’t disappear completely but will go into a special list, from where you can reattach it somewhere else or delete it finally. The same document can be inserted in several places. If you add a comment to it, it updates everywhere where this document is linked.

Mathematics is fully supported — LaTeX formulas can be not only viewed but also clicked to adjust them in the editor.

You can generate formulas by description. Just write in words what formula you need (for example, “binomial distribution”), and the system itself outputs the ready formula code.

Now there is a system of plugins – essentially isolated experimental functions separate from the main program. For instance, there is a plugin that recursively collects all subpages into one long document — convenient if you need to read or print everything at once.

Or consider the “YouTube Transcript Cleaning” plugin. If there is a dirty lecture text from YouTube, the plugin will punctuate, paragraph, and create neat headers.

If you insert a link to a website, it opens in a column next to it — you can read the source and simultaneously take your notes. However, some websites do not allow embedding on foreign pages. The system recognizes such sites, and they open in a new tab.

The left panel with the list of pages can be hidden or resized with the mouse, so it doesn’t take up space on the screen.

You can simply copy and paste an image or screenshot, and it will not just insert, but also upload to the database.

It supports working from a mobile phone. On the phone, the interface switches to a single-column mode for convenient reading and commenting on the go.

Multiple databases are supported – you can switch between them. You can connect different databases and different LLMs and switch between them.

Navigating the Tricky Path of Online Donations: A User Experience Dilemma | February 20 2026, 19:02

Here we have the ultimate tricksters. If you accidentally choose an answer for “would you like to donate?”, getting to “oh, I don’t want to yet” takes about 10 minutes and is fraught with the risk of losing your seats. Because 1) there is no option for ‘don’t want to’ 2) any selection ranges from $5 to $9.60 3) refreshing the page results in an error, forcing you to reselect seats and try not to hit those radio buttons again. And by the way, these were the last two seats in the auditorium. They weren’t available yesterday, but showed up today.

Visualizing Volleyball Plays: A Glimpse into My App’s Functionality | January 01 2026, 21:37

Here is actually a quick screen capture of how my app for creating and visualizing volleyball schemes works.

Implementation details here: https://www.facebook.com/raufaliev/posts/pfbid0njrqH8oLcWGFsZcgE5o2pj3NcDNaYSQeCMY6twXNbZn6dc38m9kjhsBqA4YsMozcl

Crafting a Custom Volleyball Play Editor | December 23 2025, 21:39

Tomorrow is the flight to Costa Rica, and here I am creating (or created) a volleyball playbook editor for Nadya. As a coach, she prepares for her sessions and leaves behind hundreds of pages of text with diagrams on each page. The text is handwritten, and theoretically, it’s simple to convert to a digital format, but converting the diagrams into high-quality vector format is exhaustive—there are so many. So, I decided to make the software yesterday. And today, the first version is ready to use. This is a diagram editor, somewhat remotely similar to a diagram editor. Also got to dig into the fabric framework.

The process looks like this. Gemini/ChatGPT through an API can convert hand-drawn diagrams into a structure that my program understands. Then we open this file in the program, and tweak a bit if necessary. Or maybe even redraw from scratch – for simple diagrams, it’s even easier. There are four types of objects – player, cone, target, text. Any can be connected with arrows, solid or dashed, labeled with text or numbers or not, in any chosen color, straight or curved. If you touch an object with the mouse, all connected arrows will follow.

The result can be saved in a file. You can open a template and based on it create something new. You can generate a Python script – yesterday it was still relevant, today generally not needed anymore – high-resolution SVG/PNGs are made directly from this app (yesterday they were made separately in Python).

It’s clear why you wouldn’t just ask Gemini/ChatGPT to do something for ready-made vector editors: firstly, they are too flexible and limiting LLM’s imagination is quite difficult. As a result, you get stylized, unusable images. Here, instead, there is a framework consisting of four objects and that’s all, LLM knows about it and only generates what can be represented with them. Secondly, this framework operates with objects, not elementary vector primitives.

Overall, this is the first step towards my idea of an automatic diagramming system based on descriptions. Where you give an LLM a diagram description, and it consistently generates what is written in the description, and if you make any corrections, they will be taken into account during regeneration.

Exploring SingleFile: The Chrome Extension for Easy Web Page Sharing | November 05 2025, 17:45

I found a useful Chrome extension – SingleFile. It solves a problem like this – you need to share a browser page that is not public, for example, via iMessage or Telegram. This is not so trivial to do. For example, you can save a .mhtml file from the browser on your laptop, and send it, but only recipients on an iPhone cannot open it. Saving as a standard .html is also not an option, as images and styles are not preserved. Taking a screenshot only captures a small fragment. Installing an extension that creates a long, large PNG of the entire page – this PNG cannot be opened on an iPhone from Telegram at least, only the top renders. Printing to PDF is also not a solution – the result is very poor and highly dependent on the developers’ desire to make a print-friendly version.

SingleFile allows you to create a snapshot of a page from the browser, a regular .html, which can be opened anywhere, with embedded styles and images. But what is especially convenient, before exporting, you can remove anything you don’t want to share through the WebInspector, and it won’t appear in the final .html. The extension is open source on GitHub, and it doesn’t send anything anywhere. Apparently, if there was dynamic loading through JS on the page, it saves not the JS, but the result of the loading, and the JS is cut out.

In general, it’s convenient, a good thing, use it.

(I had an interview released on the internal portal today, and I needed to share it with my family in our family chat)