<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Maxym Babenko</title>
    <description>The latest articles on DEV Community by Maxym Babenko (@maxym_babenko_40a0c9d9463).</description>
    <link>https://dev.to/maxym_babenko_40a0c9d9463</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2221867%2Fb4b6ca8b-fb8e-49e9-88bf-c04f57af8cb0.png</url>
      <title>DEV Community: Maxym Babenko</title>
      <link>https://dev.to/maxym_babenko_40a0c9d9463</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/maxym_babenko_40a0c9d9463"/>
    <language>en</language>
    <item>
      <title>Building VisualSnag and Why AI Tools Need Clear Visual Context</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Thu, 25 Jun 2026 08:05:53 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/i-5c49</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/i-5c49</guid>
      <description>&lt;p&gt;Hi! My name is Maksym. For a long time, my professional career was connected with UX/UI and product design, but over the last year I have been focusing more and more on building my own products.&lt;/p&gt;

&lt;p&gt;At first, I was building iOS and macOS apps with Swift. Later, I moved to JavaScript and built several apps for Jira and Confluence. After that, the logical thing would have been to stop, focus on marketing the products I had already built, and avoid opening a new repository for at least a few months.&lt;/p&gt;

&lt;p&gt;But in practice, when you work on your own ideas, things rarely happen that rationally. Very often, a new product does not start with a big strategy. It starts with a problem that repeats itself often enough that one day you can no longer ignore it.&lt;/p&gt;

&lt;p&gt;That is how the idea for &lt;strong&gt;&lt;a href="https://www.visualsnag.com/" rel="noopener noreferrer"&gt;VisualSnag&lt;/a&gt;&lt;/strong&gt; appeared.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgvyriq4530y95arut56y.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fgvyriq4530y95arut56y.png" alt=" " width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The idea
&lt;/h2&gt;

&lt;p&gt;Recently, I have been working a lot with AI tools for development and design: &lt;strong&gt;ChatGPT, Claude Code, Codex, Figma Make&lt;/strong&gt;, and other similar tools. They already help a lot with logic, application structure, component generation, code, and fast prototyping.&lt;/p&gt;

&lt;p&gt;But while working with these tools, I kept running into the same problem: the visual side of the generated interface often feels too generic. This is especially noticeable with tools like Claude Code.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The interface can be functional, responsive, and technically correct, but it often lacks a clear visual identity, a sense of brand, strong typography, color logic, rhythm, and composition.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;Phrases like “make it modern,” “make it beautiful,” or “make it premium” do not give AI enough specific direction. Even for a human designer, these would be weak instructions without references, context, and a clearer explanation of the expected result. With AI, this becomes even more obvious, because the model tries to fill in all the gaps on its own and often chooses the safest and most typical solution.&lt;/p&gt;

&lt;p&gt;I started thinking about how to make this process more precise.&lt;/p&gt;

&lt;p&gt;If a person already has a website or an image reference that communicates the right mood, style, or visual logic, why not turn that reference into structured rules for further work with AI?&lt;/p&gt;

&lt;p&gt;VisualSnag lets you paste a website URL or upload an image reference and get a ready-to-use visual system for AI-assisted building: colors, typography, layout rules, CSS variables, design tokens, a style brief, and AI prompts.&lt;/p&gt;

&lt;p&gt;The idea is not to copy someone else’s website. The goal is to understand its visual logic and turn it into practical materials that can be used in your own project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why not just another prompt generator?
&lt;/h2&gt;

&lt;p&gt;At first glance, VisualSnag could be described as a prompt generator for design. But I did not want to build another tool that simply returns a long text with generic phrases.&lt;/p&gt;

&lt;p&gt;The problem of visual direction in AI-assisted development is broader than that. Users do not need only a prompt. They need specific anchors that can be transferred into the development process:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;which colors to use;&lt;/li&gt;
&lt;li&gt;what role primary, secondary, accent, and background colors should have;&lt;/li&gt;
&lt;li&gt;what typography logic works for headings, body text, labels, and buttons;&lt;/li&gt;
&lt;li&gt;what border radii, spacing, and interface density are typical for the reference;&lt;/li&gt;
&lt;li&gt;what overall UI mood should be preserved;&lt;/li&gt;
&lt;li&gt;which CSS variables can be used right away;&lt;/li&gt;
&lt;li&gt;which prompt can be pasted into &lt;strong&gt;ChatGPT, Claude, Codex, Cursor, Lovable,&lt;/strong&gt; or another AI builder.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fynn3x7w6takg4yoccws3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fynn3x7w6takg4yoccws3.png" alt=" " width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;That is why I see VisualSnag not as a prompt generator, but as a translator between a visual reference and practical rules for AI-assisted development.&lt;/p&gt;

&lt;p&gt;A user may see a website or an image they like, but they cannot always quickly explain why it works. VisualSnag is meant to help extract not a surface-level similarity, but the visual structure behind the reference: colors, typography, composition principles, the character of UI components, and rules that can later be adapted to a new product.&lt;/p&gt;

&lt;h2&gt;
  
  
  Development
&lt;/h2&gt;

&lt;p&gt;The name VisualSnag came from the idea of “snagging” or “catching” a visual style. I wanted the product to avoid sounding like another technical analyzer and instead have a simple metaphor: the user gives the tool a website or an image, and the service catches the style logic behind it.&lt;/p&gt;

&lt;p&gt;After the idea, name, logo, and first screens were ready, I moved into development.&lt;/p&gt;

&lt;p&gt;The stack I chose was:&lt;/p&gt;

&lt;h3&gt;
  
  
  Frontend
&lt;/h3&gt;

&lt;p&gt;Vite, React, TypeScript, Tailwind CSS.&lt;/p&gt;

&lt;h3&gt;
  
  
  Backend
&lt;/h3&gt;

&lt;p&gt;Node.js, Express.&lt;/p&gt;

&lt;h3&gt;
  
  
  Database
&lt;/h3&gt;

&lt;p&gt;PostgreSQL.&lt;/p&gt;

&lt;h3&gt;
  
  
  ORM
&lt;/h3&gt;

&lt;p&gt;Prisma.&lt;/p&gt;

&lt;h3&gt;
  
  
  Hosting
&lt;/h3&gt;

&lt;p&gt;Railway.&lt;/p&gt;

&lt;h3&gt;
  
  
  URL analysis
&lt;/h3&gt;

&lt;p&gt;Playwright / Chromium.&lt;/p&gt;

&lt;p&gt;This stack made sense for several reasons.&lt;/p&gt;

&lt;p&gt;First, I already had experience with JavaScript and TypeScript after building apps for the Atlassian Marketplace. Second, I needed speed and flexibility, not an overly complex architecture for the first version of the product. Third, Railway made it possible to quickly deploy both the application and PostgreSQL in one environment.&lt;/p&gt;

&lt;p&gt;Vite and React gave me a fast frontend. Tailwind CSS helped me build the interface quickly while keeping control over the visual system. Node.js and Express covered the API layer.&lt;/p&gt;

&lt;p&gt;Of course, this does not mean everything worked on the first try. Especially after Playwright and server-side Chromium entered the project.&lt;/p&gt;

&lt;h2&gt;
  
  
  How the product works
&lt;/h2&gt;

&lt;p&gt;In the first version, I tried to make the user flow as clear as possible.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsitx0a25idjikw8u6kpx.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fsitx0a25idjikw8u6kpx.png" alt=" " width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;A user can:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Paste a website URL.&lt;/li&gt;
&lt;li&gt;Upload one or more image references.&lt;/li&gt;
&lt;li&gt;Start the analysis.&lt;/li&gt;
&lt;li&gt;Receive a structured result.&lt;/li&gt;
&lt;li&gt;Copy the needed blocks.&lt;/li&gt;
&lt;li&gt;Download files for further work.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;As an output, the product generates several types of results.&lt;/p&gt;

&lt;h2&gt;
  
  
  Style Brief
&lt;/h2&gt;

&lt;p&gt;This is a short description of the visual direction. It explains the general character of the reference: mood, density, typography logic, color behavior, composition approach, and overall UI mood.&lt;/p&gt;

&lt;h2&gt;
  
  
  Colors
&lt;/h2&gt;

&lt;p&gt;The service identifies the main palette and tries to distribute colors by role: background, surface, text, primary, accent, border, and so on.&lt;/p&gt;

&lt;p&gt;This is important because a random set of HEX codes is not very useful on its own. It is much more helpful to understand what each color is responsible for.&lt;/p&gt;

&lt;h2&gt;
  
  
  Typography
&lt;/h2&gt;

&lt;p&gt;A separate section describes the typography direction: headings, body text, buttons, labels, and accents.&lt;/p&gt;

&lt;p&gt;It is not always possible or necessary to copy the exact font from a reference. More often, it is more important to understand the typography logic: geometric, editorial, tech, playful, minimal, high-contrast, or neutral.&lt;/p&gt;

&lt;h2&gt;
  
  
  Layout rules
&lt;/h2&gt;

&lt;p&gt;This block describes the principles behind the interface layout: spacing, grid, density, container width, the character of cards, sections, CTAs, and visual rhythm.&lt;/p&gt;

&lt;h2&gt;
  
  
  Component DNA
&lt;/h2&gt;

&lt;p&gt;This is an attempt to describe how UI elements behave within the style: cards, buttons, badges, inputs, sections, and navigation.&lt;/p&gt;

&lt;p&gt;I wanted the output to be useful not only for simple landing pages, but also for more complex interfaces.&lt;/p&gt;

&lt;h2&gt;
  
  
  CSS Variables
&lt;/h2&gt;

&lt;p&gt;The service generates &lt;code&gt;variables.css&lt;/code&gt;, which can be used as a starting point for the frontend. It is not a final design system, but it gives a useful base layer for fast prototyping.&lt;/p&gt;

&lt;h2&gt;
  
  
  Design Tokens
&lt;/h2&gt;

&lt;p&gt;&lt;code&gt;tokens.json&lt;/code&gt; provides a structured format that can be used in AI tools, custom scripts, or design processes.&lt;/p&gt;

&lt;h2&gt;
  
  
  AI Prompts
&lt;/h2&gt;

&lt;p&gt;VisualSnag also generates prompts for AI-assisted building.&lt;/p&gt;

&lt;p&gt;The idea is that the user does not have to write the style instructions from scratch. They can immediately paste the generated description into ChatGPT, Claude, Codex, Cursor, Lovable, Figma Make, or another AI tool.&lt;/p&gt;

&lt;h2&gt;
  
  
  Downloads
&lt;/h2&gt;

&lt;p&gt;The result can be viewed on the website, but it can also be downloaded as working files:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;code&gt;STYLE.md&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;variables.css&lt;/code&gt;&lt;/li&gt;
&lt;li&gt;&lt;code&gt;tokens.json&lt;/code&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This is important because these files can become part of a real workflow. They are not just text on a screen. They can be copied into a project, sent to another AI tool, saved as documentation, or used as a starting point for further design and development.&lt;/p&gt;

&lt;h2&gt;
  
  
  Architecture
&lt;/h2&gt;

&lt;p&gt;At the architecture level, I did not try to build a complex system in the first version. The main task was to create a stable path from input to output.&lt;/p&gt;

&lt;p&gt;The flow looks roughly like this:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;The user submits a URL or uploads an image.&lt;/li&gt;
&lt;li&gt;The backend receives the request and creates a database record.&lt;/li&gt;
&lt;li&gt;For a URL, the page analysis process starts.&lt;/li&gt;
&lt;li&gt;For images, visual data is processed.&lt;/li&gt;
&lt;li&gt;The data is transformed into an internal structured format.&lt;/li&gt;
&lt;li&gt;A style brief, tokens, CSS variables, and prompts are generated.&lt;/li&gt;
&lt;li&gt;The result is returned to the frontend.&lt;/li&gt;
&lt;li&gt;The user copies the blocks or downloads the files.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;PostgreSQL is used to store users, requests, statuses, results, and technical metadata.&lt;/p&gt;

&lt;p&gt;I also spent time thinking about what data should and should not be stored. VisualSnag works with references, and references can be work-related, private, or temporary. I did not want the product to become an uncontrolled storage for everything a user had ever uploaded.&lt;/p&gt;

&lt;p&gt;So I decided to store only what is needed for the product to work: authentication, exports, and access to previous results. Anything unnecessary should not end up in the database just because it is technically possible to store it.&lt;/p&gt;

&lt;h2&gt;
  
  
  Problems and solutions during development
&lt;/h2&gt;

&lt;p&gt;During development, I ran into several technical and product challenges. They showed that even a tool that looks relatively simple from the outside can have many internal details.&lt;/p&gt;

&lt;h2&gt;
  
  
  1. AI output must be structured, not just nicely written
&lt;/h2&gt;

&lt;p&gt;The problem: if you simply ask AI to describe the style of a website or an image, the result is often too general. It may be well-written, but not practical enough.&lt;/p&gt;

&lt;p&gt;For example, a phrase like “modern and clean interface with strong visual hierarchy” sounds fine, but it does not provide enough material for actual development.&lt;/p&gt;

&lt;p&gt;I needed an output that could be used immediately. Not just a description, but specific blocks: colors, typography, layout rules, CSS variables, tokens, and prompts.&lt;/p&gt;

&lt;p&gt;The solution: I made the output as structured as possible. Each block has its own role and expected format.&lt;/p&gt;

&lt;p&gt;If it is colors, the colors should have roles. If it is typography, there should be a breakdown by text types. If it is CSS variables, they should be ready to use. If it is a prompt, it should be written in a way that can be pasted into an AI builder without extra editing.&lt;/p&gt;

&lt;p&gt;The main takeaway: AI inside a product should not simply generate text. It should return a predictable and useful artifact.&lt;/p&gt;

&lt;h2&gt;
  
  
  2. It is important to explain that the product does not copy websites
&lt;/h2&gt;

&lt;p&gt;The problem: any tool that analyzes the visual style of a website can be misunderstood. I did not want to build a service for copying other people’s websites. That would not only be legally and ethically wrong, but also less interesting from a product perspective.&lt;/p&gt;

&lt;p&gt;The goal is different: to help users understand the visual logic of a reference and adapt it to their own project.&lt;/p&gt;

&lt;p&gt;The solution: I deliberately avoid phrases like “clone any website.” Instead, I use terms like visual system, style brief, design rules, and AI-ready prompts. These describe the product more accurately.&lt;/p&gt;

&lt;p&gt;The service is not meant to transfer someone else’s website into your own project. It is meant to help read the style principles and turn them into a clear foundation for your own interface.&lt;/p&gt;

&lt;h2&gt;
  
  
  3. Running Chromium in production
&lt;/h2&gt;

&lt;p&gt;The problem: for URL analysis, it is not enough to simply fetch HTML. The tool needs to work with the page as an actual rendered website. Styles, loaded fonts, computed styles, visual structure, responsiveness, and the way a page looks after JavaScript execution all matter.&lt;/p&gt;

&lt;p&gt;For this, Playwright / Chromium is needed.&lt;/p&gt;

&lt;p&gt;Locally, this approach works fairly smoothly. But in a production environment with containers, additional issues appear: system dependencies, fonts, permissions, memory, timeouts, and browser launch stability.&lt;/p&gt;

&lt;p&gt;The solution: I configured the environment for Chromium, added the required dependencies, limited concurrency, and made timeout handling more careful. I also had to account for the fact that different websites load at different speeds, use different numbers of scripts, and behave differently during rendering.&lt;/p&gt;

&lt;h2&gt;
  
  
  4. Websites have very different structures
&lt;/h2&gt;

&lt;p&gt;The problem: there is no single universal way to extract visual style from a website.&lt;/p&gt;

&lt;p&gt;One site has well-structured CSS variables. Another uses Tailwind classes. A third one has inline styles. A fourth builds many visual elements through JavaScript or SVG.&lt;/p&gt;

&lt;p&gt;Colors can be in CSS, background images, gradients, SVGs, or decorative elements. Fonts can load from different sources. Layout can change significantly depending on viewport, cookies, or A/B tests.&lt;/p&gt;

&lt;p&gt;The solution: I did not try to build a system that perfectly understands every property of every website. Instead, I chose a practical approach: collect the most useful signals from the DOM, computed styles, visual structure, and page screenshot, then convert them into a clear style format.&lt;/p&gt;

&lt;p&gt;For this type of product, absolute technical reproduction of every pixel is less important than a useful interpretation of the visual system.&lt;/p&gt;

&lt;h2&gt;
  
  
  5. The interface must make sense to both designers and developers
&lt;/h2&gt;

&lt;p&gt;The problem: VisualSnag sits between design and development.&lt;/p&gt;

&lt;p&gt;For designers, references, style, colors, composition, and typography are important. For developers, CSS, tokens, prompts, exports, data structure, and the ability to use the result quickly in their workflow are important.&lt;/p&gt;

&lt;p&gt;If the product is too design-oriented, developers may find it less clear. If it is too technical, it may lose users who think through visual references.&lt;/p&gt;

&lt;p&gt;The solution: I split the output into two levels.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnutq5nl1c502ad6o9zg3.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fnutq5nl1c502ad6o9zg3.png" alt=" " width="800" height="479"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;The first level is human and visual:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Style brief&lt;/li&gt;
&lt;li&gt;Colors&lt;/li&gt;
&lt;li&gt;Typography&lt;/li&gt;
&lt;li&gt;Layout rules&lt;/li&gt;
&lt;li&gt;Component DNA&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The second level is practical and technical:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;CSS variables&lt;/li&gt;
&lt;li&gt;Design tokens&lt;/li&gt;
&lt;li&gt;AI prompts&lt;/li&gt;
&lt;li&gt;Downloads&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;This way, the user can either quickly understand the style or immediately take concrete materials for work.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I did not build in the first version
&lt;/h2&gt;

&lt;p&gt;I deliberately did not try to turn VisualSnag into a large platform right away.&lt;/p&gt;

&lt;p&gt;The first version does not include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;team workspaces;&lt;/li&gt;
&lt;li&gt;a full project library;&lt;/li&gt;
&lt;li&gt;a Figma plugin;&lt;/li&gt;
&lt;li&gt;a browser extension;&lt;/li&gt;
&lt;li&gt;a marketplace of ready-made style systems;&lt;/li&gt;
&lt;li&gt;complex collaboration features;&lt;/li&gt;
&lt;li&gt;automatic generation of a finished website from a reference.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At the start, it was important to test the main hypothesis:&lt;/p&gt;

&lt;p&gt;Do people need a tool that turns a website or image reference into a practical visual system for AI-assisted development?&lt;/p&gt;

&lt;p&gt;That is why the first version focuses on the core scenario:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Provide a reference.&lt;/li&gt;
&lt;li&gt;Get structured style output.&lt;/li&gt;
&lt;li&gt;Copy a prompt or download &lt;code&gt;STYLE.md&lt;/code&gt;, &lt;code&gt;variables.css&lt;/code&gt;, and &lt;code&gt;tokens.json&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;Use it in an AI-assisted workflow.&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;During development, I once again became convinced that AI needs not only a functional task, but also clear visual context.&lt;/p&gt;

&lt;p&gt;A reference is not an instruction by itself. It needs to be broken down into specific rules: colors, typography, rhythm, layout, components, spacing, and accents.&lt;/p&gt;

&lt;p&gt;That is why useful AI output must be structured, not just presented as a long text without clear sections. When the result is separated into Style Brief, CSS variables, design tokens, and AI prompts, it becomes much easier to use in a real project.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is next
&lt;/h2&gt;

&lt;p&gt;The nearest goal for VisualSnag is to collect feedback from people who actually use AI tools to create websites, applications, and interfaces.&lt;/p&gt;

&lt;p&gt;I want to understand:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;how useful the Style Brief is;&lt;/li&gt;
&lt;li&gt;whether the CSS variables are accurate enough;&lt;/li&gt;
&lt;li&gt;whether &lt;code&gt;tokens.json&lt;/code&gt; is convenient to use;&lt;/li&gt;
&lt;li&gt;which export formats are missing;&lt;/li&gt;
&lt;li&gt;which prompts work best for different AI builders;&lt;/li&gt;
&lt;li&gt;whether users need to compare several references at once.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Potentially, the product can move in several directions:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;deeper URL analysis;&lt;/li&gt;
&lt;li&gt;better screenshot processing;&lt;/li&gt;
&lt;li&gt;comparison of multiple references;&lt;/li&gt;
&lt;li&gt;separate output formats for Cursor, Claude, Codex, Lovable, Bolt, Framer, and Webflow;&lt;/li&gt;
&lt;li&gt;a library of saved visual systems;&lt;/li&gt;
&lt;li&gt;team workspaces;&lt;/li&gt;
&lt;li&gt;a Figma plugin;&lt;/li&gt;
&lt;li&gt;a browser extension for quickly analyzing the style of any page.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;VisualSnag is not meant to copy other people’s websites. It is an intermediate layer between a visual reference and AI-assisted development. Its goal is to make visual direction clear, structured, and usable in a real project.&lt;/p&gt;

&lt;h2&gt;
  
  
  Links
&lt;/h2&gt;

&lt;p&gt;Try VisualSnag here:&lt;br&gt;
&lt;a href="https://www.visualsnag.com/" rel="noopener noreferrer"&gt;https://www.visualsnag.com/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Contact me directly:&lt;br&gt;
&lt;a href="mailto:max.babenko@typeswitch.net"&gt;max.babenko@typeswitch.net&lt;/a&gt;&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>webdev</category>
      <category>ai</category>
      <category>programming</category>
    </item>
    <item>
      <title>I built a simple way to publish Confluence pages to the web</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Thu, 07 May 2026 08:27:08 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/i-built-a-simple-way-to-publish-confluence-pages-to-the-web-10en</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/i-built-a-simple-way-to-publish-confluence-pages-to-the-web-10en</guid>
      <description>&lt;p&gt;Hey DEV community 👋&lt;/p&gt;

&lt;p&gt;I recently built &lt;strong&gt;Public Pages for Confluence&lt;/strong&gt;, a small app for teams that write content in Confluence but need an easier way to publish some of it publicly.&lt;/p&gt;

&lt;p&gt;The idea came from a simple problem: Confluence is great for writing internal docs, product notes, guides, and knowledge base content, but publishing that content to the public web often means using another CMS, a heavy site builder, or copying the same content somewhere else.&lt;/p&gt;

&lt;p&gt;I wanted to make that workflow simpler.&lt;/p&gt;

&lt;h2&gt;
  
  
  What it does
&lt;/h2&gt;

&lt;p&gt;Public Pages for Confluence lets you publish selected Confluence pages as public web pages.&lt;/p&gt;

&lt;p&gt;It is useful for things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;help center articles&lt;/li&gt;
&lt;li&gt;knowledge base pages&lt;/li&gt;
&lt;li&gt;product guides&lt;/li&gt;
&lt;li&gt;release notes&lt;/li&gt;
&lt;li&gt;public documentation&lt;/li&gt;
&lt;li&gt;customer-facing content&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal is not to replace a full documentation platform. It is more focused: keep writing in Confluence, choose which pages should be public, and publish them to the web.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why I built it
&lt;/h2&gt;

&lt;p&gt;A lot of teams already have useful content inside Confluence, but it stays hidden from customers, prospects, or search engines.&lt;/p&gt;

&lt;p&gt;Native public sharing can work for simple access, but it often feels limited when you need a more polished public page, SEO metadata, analytics, branding, or a custom domain.&lt;/p&gt;

&lt;p&gt;So I built a lighter workflow for publishing Confluence pages externally without moving content into another system.&lt;/p&gt;

&lt;h2&gt;
  
  
  Current features
&lt;/h2&gt;

&lt;ul&gt;
&lt;li&gt;publish selected Confluence pages publicly&lt;/li&gt;
&lt;li&gt;clean public URLs&lt;/li&gt;
&lt;li&gt;SEO title and meta description&lt;/li&gt;
&lt;li&gt;Google indexing controls&lt;/li&gt;
&lt;li&gt;automatic sitemap support&lt;/li&gt;
&lt;li&gt;GA4 analytics&lt;/li&gt;
&lt;li&gt;Search Console verification&lt;/li&gt;
&lt;li&gt;logo and site name branding&lt;/li&gt;
&lt;li&gt;custom domain support&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It is also free for teams up to 10 users.&lt;/p&gt;

&lt;p&gt;Marketplace link:&lt;br&gt;
&lt;a href="https://marketplace.atlassian.com/apps/356517983/" rel="noopener noreferrer"&gt;https://marketplace.atlassian.com/apps/356517983/&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I would love feedback from anyone who uses Confluence for documentation, help centers, product guides, or public knowledge bases.&lt;/p&gt;

&lt;p&gt;Especially curious about this question:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Would you prefer a lightweight publishing tool like this, or do you usually need a full site builder for public documentation?&lt;/strong&gt;&lt;/p&gt;

</description>
      <category>showdev</category>
      <category>saas</category>
      <category>productivity</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Essential macOS Apps for Developers in 2025</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Thu, 29 May 2025 07:28:20 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/essential-macos-apps-for-developers-in-2025-3kop</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/essential-macos-apps-for-developers-in-2025-3kop</guid>
      <description>&lt;p&gt;MacOS has always been a solid choice for developers. It combines the stability of Unix underpinnings with elegant design and powerful hardware. But what really supercharges your workflow isn’t just the system itself — it’s the apps you run on it.&lt;/p&gt;

&lt;p&gt;In 2025, the developer toolset on macOS is richer than ever. Whether you're coding, testing APIs, writing notes between sprints, or just living in the terminal, there’s an app that can make your day smoother. Here's a curated list of four standout tools every developer should consider. &lt;/p&gt;

&lt;h2&gt;
  
  
  &lt;strong&gt;1. &lt;a href="https://code.visualstudio.com/" rel="noopener noreferrer"&gt;Visual Studio Code&lt;/a&gt;&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;The All-in-One Code Editor for Every Stack&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F02amugfofituhp0hqeo2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F02amugfofituhp0hqeo2.png" alt="Image description" width="800" height="500"&gt;&lt;/a&gt;&lt;br&gt;
Visual Studio Code (VS Code) has been at the top of every developer’s list for years — and it’s still going strong in 2025. Created by Microsoft, it’s more than a text editor; it’s a full-fledged development environment that’s still lightweight, customizable, and shockingly fast.&lt;/p&gt;

&lt;p&gt;VS Code supports pretty much every modern programming language out of the box or through extensions — from JavaScript and Python to Rust and Go. Its built-in Git tools, powerful debugger, and intelligent autocompletion (thanks to IntelliSense) make it ideal whether you’re building websites, automating tasks, or diving into machine learning.&lt;/p&gt;

&lt;p&gt;The 2025 updates brought even more polish: security improvements like mandatory extension signature verification, smarter sidebar controls, and deeper workspace customization. It also runs natively on Apple Silicon, which means performance is smooth even on the most intensive projects.&lt;/p&gt;

&lt;p&gt;If you want one editor that can handle it all — VS Code still wears the crown.&lt;/p&gt;

&lt;p&gt;**&lt;/p&gt;

&lt;h2&gt;
  
  
  2. &lt;a href="https://apps.apple.com/ua/app/peeknote/id6743180165" rel="noopener noreferrer"&gt;Peeknote&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
&lt;em&gt;Quick Notes and Snippets Without the Noise&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy25na7hmxtwiobhsimv2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fy25na7hmxtwiobhsimv2.png" alt="Image description" width="800" height="500"&gt;&lt;/a&gt;&lt;br&gt;
Sometimes you don’t need a sprawling knowledge base. You just need a clean space to think, write, and move on. That’s where Peeknote shines.&lt;/p&gt;

&lt;p&gt;Peeknote is a minimalist macOS app designed for developers who want to quickly jot down ideas, to-dos, or snippets of code — without getting lost in tabs, folders, or settings. It's built to be fast, native, and pleasant to use. The interface is distraction-free, but smart: it supports syntax highlighting for multiple programming languages, making it great for saving and reusing code fragments.&lt;/p&gt;

&lt;p&gt;There are no overwhelming features, no clutter — just a reliable companion always ready to open and capture a thought. And because it’s lightweight, it doesn’t hog your memory or CPU. Keep it open while you code, and you’ll forget it’s even there — until you need it.&lt;/p&gt;

&lt;p&gt;For devs who live in ideas and jump between tasks, Peeknote is like a digital sticky note... only better.&lt;/p&gt;

&lt;p&gt;**&lt;/p&gt;

&lt;h2&gt;
  
  
  3. &lt;a href="https://iterm2.com/" rel="noopener noreferrer"&gt;iTerm2&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
&lt;em&gt;The Terminal, Leveled Up&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb1saartbjz7av9eyyq8e.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fb1saartbjz7av9eyyq8e.png" alt="Image description" width="800" height="500"&gt;&lt;/a&gt;&lt;br&gt;
The default Terminal on macOS is... fine. But developers who spend a lot of time in the command line know there’s a world of difference between fine and fantastic. Enter iTerm2 — the terminal replacement you didn’t know you needed (until you use it).&lt;/p&gt;

&lt;p&gt;iTerm2 packs a punch with features like split panes (finally!), session restoration, hotkey windows, extensive customization, and even support for advanced scripting. You can search across terminal output, bookmark sessions, and tweak the visual design down to your liking.&lt;/p&gt;

&lt;p&gt;The latest 2025 release, version 3.5.13, brought fixes for annoying bugs and better compatibility with macOS Ventura and Sonoma. Whether you're SSH-ing into servers or running Docker containers locally, iTerm2 helps you do it all faster and more comfortably.&lt;/p&gt;

&lt;p&gt;It’s one of those tools that quietly improves your daily routine — and once you switch, there’s no going back.&lt;/p&gt;

&lt;p&gt;**&lt;/p&gt;

&lt;h2&gt;
  
  
  4. &lt;a href="https://www.postman.com/pricing/" rel="noopener noreferrer"&gt;Postman&lt;/a&gt;
&lt;/h2&gt;

&lt;p&gt;**&lt;br&gt;
&lt;em&gt;Master Your APIs Without Leaving Your Mac&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3citeyixsnrlnxrkjuc6.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3citeyixsnrlnxrkjuc6.png" alt="Image description" width="800" height="500"&gt;&lt;/a&gt;&lt;br&gt;
If you work with APIs — and let’s be honest, who doesn’t in 2025 — Postman remains a must-have. It’s no longer just a tool for testing GET requests; it’s a full API development and collaboration platform.&lt;/p&gt;

&lt;p&gt;Postman lets you build, test, document, and monitor APIs in a visual and intuitive way. You can organize endpoints into collections, share them with your team, automate tests, and plug it all into your CI/CD pipeline. The new Spec Hub helps centralize and manage your API specs. And with the Postman CLI, you can now lint, test, and secure APIs directly from the command line.&lt;/p&gt;

&lt;p&gt;This year’s updates also improved performance and reliability on macOS — with full support for macOS Catalina and newer. Whether you’re building backend services or just trying to debug a webhook, Postman makes the process easier, faster, and more collaborative.&lt;/p&gt;

&lt;p&gt;Final Thoughts&lt;br&gt;
Choosing the right tools makes all the difference in a developer’s day. Some apps help you code better. Others help you think clearer. And a few make the whole experience more enjoyable.&lt;/p&gt;

&lt;p&gt;Whether you’re living inside VS Code, managing servers through iTerm2, sketching ideas in Piknote, or wrangling APIs with Postman — each of these apps earns its place on your Mac. They don’t just help you get work done — they help you do your best work.&lt;/p&gt;

&lt;p&gt;So if you haven’t tried them yet, maybe it’s time to see what your Mac is truly capable of.&lt;/p&gt;

</description>
      <category>programming</category>
      <category>productivity</category>
      <category>development</category>
      <category>swift</category>
    </item>
    <item>
      <title>Time in Status for Jira: Best Practices That Actually Work in 2025</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Tue, 20 May 2025 07:33:47 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/time-in-status-for-jira-best-practices-that-actually-work-in-2025-284</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/time-in-status-for-jira-best-practices-that-actually-work-in-2025-284</guid>
      <description>&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6zbccj7mo7celfgqvjda.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6zbccj7mo7celfgqvjda.png" alt="Image description" width="800" height="454"&gt;&lt;/a&gt;&lt;br&gt;
Agile teams often look productive on the surface. Standups are happening, boards are moving, everyone is busy. But then the sprint ends and a large chunk of the work is still not finished.&lt;/p&gt;

&lt;p&gt;If this sounds familiar, you’re not alone. You open your Jira board and see issues scattered across “In Progress,” “In Review,” or “Waiting for QA.” It's frustrating, because the team was working. So what happened? Where exactly did the process slow down?&lt;/p&gt;

&lt;p&gt;&lt;code&gt;This is where tracking Time in Status can become one of the most useful things your team does.&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Time in Status Is More Than a Nice-to-Have
&lt;/h2&gt;

&lt;p&gt;At first, measuring how long an issue sits in each status might seem like overkill. But it often reveals things your team didn’t realize were happening.&lt;/p&gt;

&lt;p&gt;Instead of relying on memory or assumptions, you get actual data to help you:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Identify where issues are spending too much time&lt;/li&gt;
&lt;li&gt;Catch slow or unclear handoffs&lt;/li&gt;
&lt;li&gt;Spot hidden bottlenecks&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Plan future sprints based on what really happened, not what you expected&lt;/p&gt;

&lt;p&gt;Here are a few common patterns teams notice once they start tracking this:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The "In Review" column gets crowded at the end of each week&lt;/li&gt;
&lt;li&gt;QA only starts testing in the last days of the sprint&lt;/li&gt;
&lt;li&gt;Some tasks stay “In Progress” even though they’re actually blocked and no one notices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;code&gt;Once you can see these patterns, it becomes easier to address them.&lt;/code&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  What Real Teams Have Discovered
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Case 1: Too Much Time Waiting for Review&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;One team realized that some issues were spending more time in “Ready for Review” than in development. The reason? Developers didn’t want to stop coding to do reviews, so they postponed them. QA ended up getting a flood of issues on Friday.&lt;/p&gt;

&lt;p&gt;How they fixed it:&lt;/p&gt;

&lt;p&gt;Set up a daily 30-minute “review time”&lt;br&gt;
Encouraged devs to do reviews earlier in the sprint&lt;br&gt;
Balanced the testing load more evenly&lt;/p&gt;

&lt;p&gt;✅ Result: Reviews started happening faster. QA got a steadier flow. And the team felt a lot less pressure on Fridays.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Case 2: No One Noticed the Blockers&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Another team committed to 10 stories. Only 4 were finished. The others were scattered across statuses like “Blocked,” “Ready for QA,” and “In Progress.”&lt;/p&gt;

&lt;p&gt;When they looked at the time data, they saw:&lt;/p&gt;

&lt;p&gt;Two tasks had sat in “Blocked” for three days&lt;br&gt;
A few tickets were ready for review, but no one was tagged&lt;br&gt;
Everyone had been focused on their own work and missed what was stuck&lt;/p&gt;

&lt;p&gt;What they changed:&lt;/p&gt;

&lt;p&gt;Started tagging the next person responsible in comments&lt;br&gt;
Added a short daily sync focused just on blockers&lt;/p&gt;

&lt;p&gt;✅ Result: In the next sprint, the average waiting time dropped by nearly half.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Manual Tracking Isn’t Worth the Effort
&lt;/h2&gt;

&lt;p&gt;Some teams try to track Time in Status with spreadsheets, filters, or Jira exports. That usually doesn’t work well.&lt;/p&gt;

&lt;p&gt;Why? Because it’s:&lt;/p&gt;

&lt;p&gt;Easy to forget or update late&lt;br&gt;
Not integrated into the real workflow&lt;br&gt;
Too slow to be useful in real-time&lt;/p&gt;

&lt;p&gt;💡 That’s why more teams are turning to tools that track it for them, right inside Jira.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Simpler Way to See What’s Really Going On
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbe4s2a4w39y12hhvqb55.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbe4s2a4w39y12hhvqb55.png" alt="Image description" width="800" height="454"&gt;&lt;/a&gt;&lt;br&gt;
&lt;a href="https://marketplace.atlassian.com/apps/1237782" rel="noopener noreferrer"&gt;Flow Time Report&lt;/a&gt; is a lightweight Jira Cloud app that automatically shows how long an issue spent in each status, who moved it, and when.&lt;/p&gt;

&lt;p&gt;Right in the issue panel, your team can see:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Total time in each status&lt;/li&gt;
&lt;li&gt;Entry and exit timestamps&lt;/li&gt;
&lt;li&gt;Who transitioned the issue&lt;/li&gt;
&lt;li&gt;Visual indicators that show whether a task is on track, at risk, or overdue&lt;/li&gt;
&lt;li&gt;Export options to CSV, JSON, Markdown, or plain text&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;No setup. No dashboards. You immediately see how work moves through your Jira workflow.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fve8xt730aqhagpiyogej.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fve8xt730aqhagpiyogej.png" alt="Image description" width="800" height="454"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  How Teams Use This in Daily Work
&lt;/h2&gt;

&lt;p&gt;This kind of visibility helps improve more than just reports.&lt;/p&gt;

&lt;p&gt;➡️ During Sprint Planning&lt;/p&gt;

&lt;p&gt;Look at timing from past sprints to set more realistic expectations for each issue type.&lt;/p&gt;

&lt;p&gt;➡️ At Daily Standups&lt;/p&gt;

&lt;p&gt;If something has been “In Progress” for more than two days, bring it up. Is it stuck? Does someone need help?&lt;/p&gt;

&lt;p&gt;➡️ In Retrospectives&lt;/p&gt;

&lt;p&gt;Discuss issues that spent the most time in any single status. Why? And what could make that faster next time?&lt;/p&gt;

&lt;p&gt;➡️ For Team Conversations&lt;/p&gt;

&lt;p&gt;Use the data to support better conversations about process, collaboration, and ownership. &lt;/p&gt;

&lt;p&gt;Not About Micromanagement — It's About Flow&lt;br&gt;
Some people get nervous about tracking things like Time in Status. It might feel like someone is watching over their shoulder.&lt;/p&gt;

&lt;p&gt;But when used well, this kind of tracking actually gives teams more control. It lets people see how the process works as a system, and where it breaks down.&lt;/p&gt;

&lt;p&gt;In one case, a QA team mentioned they were always the last to know when something was ready. After looking at the time data, the devs started tagging them directly in comments. A small change, but it made a big difference.&lt;br&gt;
You Can Try It for Free&lt;br&gt;
Зміст статті&lt;br&gt;
Flow Time Report&lt;br&gt;
Flow Time Report is free for small teams (up to 10 users) and has a 30-day free trial for everyone else.&lt;/p&gt;

&lt;p&gt;🔗 Try it on the Atlassian Marketplace&lt;/p&gt;

&lt;p&gt;If your team cares about improving how work flows, cutting down stress, and finishing what gets started, this is a good place to begin.&lt;/p&gt;

&lt;h1&gt;
  
  
  Jira #Agile #Scrum #Kanban #TimeInStatus #WorkflowOptimization #TeamPerformance #ProductivityTools #JiraApps #SoftwareDevelopment #AgileDelivery
&lt;/h1&gt;

</description>
      <category>jira</category>
      <category>atlassian</category>
      <category>timeinstatus</category>
      <category>scrum</category>
    </item>
    <item>
      <title>Best Risk Management App for Jira (Scrum &amp; Agile teams)</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Mon, 17 Mar 2025 09:52:23 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/risk-radar-assess-and-track-risks-in-jira-issues-4mba</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/risk-radar-assess-and-track-risks-in-jira-issues-4mba</guid>
      <description>&lt;p&gt;👋 Hey everyone!&lt;/p&gt;

&lt;p&gt;I’m excited to share Risk Radar, a powerful Jira Cloud app that helps teams assess and manage risks directly within Jira issues.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;🔍 What is Risk Radar?&lt;/strong&gt;&lt;br&gt;
Risk Radar helps you identify potential risks associated with Jira issues right when they are created or edited. By assessing risks early, you can prioritize issues more effectively, reduce setbacks, and make smarter decisions.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;br&gt;
▶️  Instant Risk Check: Evaluate risk levels as you create or update Jira issues.&lt;br&gt;
▶️  Clear Risk Levels: Automatically classify tasks as low, medium, or high risk based on likelihood, impact, and complexity to fix.&lt;br&gt;
▶️  Easy Jira Integration: Works effortlessly within your existing Jira setup—no hassle.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Use Risk Radar?&lt;/strong&gt;&lt;br&gt;
✅  Assess risks early: Evaluate and address risks when creating or editing issues.&lt;br&gt;
✅  Make Smarter Decisions: Prioritize tasks with real-time risk insights.&lt;br&gt;
✅  Enhance Team Collaboration: Improve transparency with clear risk indicators for every issue.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Get Started:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;📥  Download: &lt;a href="https://marketplace.atlassian.com/apps/1237030?tab=overview&amp;amp;hosting=cloud" rel="noopener noreferrer"&gt;Risk Radar on the Atlassian Marketplace&lt;/a&gt;&lt;br&gt;
🎥  Quick demo: &lt;a href="https://youtu.be/GJZC2IsqfWA" rel="noopener noreferrer"&gt;Watch the Video&lt;/a&gt;&lt;br&gt;
📖  Documentation: &lt;a href="https://meltedmensoftware.atlassian.net/wiki/spaces/RR1/pages/4751753/Getting+Started" rel="noopener noreferrer"&gt;Read the Guide&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I’d love for you and your team to give Risk Radar a try and share your feedback. Your insights will help me continue to improve and make the tool even more useful!&lt;/p&gt;

</description>
      <category>atlassian</category>
      <category>javascript</category>
      <category>productivity</category>
      <category>management</category>
    </item>
    <item>
      <title>Issue with Empty Window Appearing on App Launch for macOS App - Help Needed</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Sat, 23 Nov 2024 09:03:55 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/issue-with-empty-window-appearing-on-app-launch-for-macos-app-help-needed-33na</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/issue-with-empty-window-appearing-on-app-launch-for-macos-app-help-needed-33na</guid>
      <description>&lt;p&gt;I've been struggling with a problem for the past couple of weeks, and I can't seem to figure out the cause. I'm developing an app that allows users to easily switch languages on macOS. The app is ready, and I submitted it for review, but the problem is that Apple has been unable to approve it for the past two weeks due to an issue.&lt;/p&gt;

&lt;p&gt;Upon launching the app, an empty window/container appears, but I cannot reproduce this issue on my own Macs (M1, M2, M3). On my machines, the app works perfectly and launches without the empty window appearing.&lt;/p&gt;

&lt;p&gt;Does anyone know how I can identify and resolve this issue? I’ve attached a screenshot of the empty window that needs to be removed from the code, as well as a snippet of the code that might be responsible for it.&lt;/p&gt;

&lt;p&gt;I would greatly appreciate any advice or suggestions on how to fix this, as I’m unable to reproduce the error on my end.&lt;/p&gt;

&lt;p&gt;Thanks in advance for your help!&lt;/p&gt;

&lt;p&gt;&lt;a href="https://ibb.co/hynrgyw" rel="noopener noreferrer"&gt;Screenshot:&lt;/a&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;@main
struct LanguageSwitcherApp: App {

    @NSApplicationDelegateAdaptor(AppDelegate.self) private var appDelegate

    var body: some Scene {
        Settings {
            EmptyView()
        }
        .commands {
            CommandGroup(after: .appInfo) {
                Button("Show Language Switcher") {
                    appDelegate.showLanguageSwitcher()
                }
            }
        }
    }
}

class AppDelegate: NSObject, NSApplicationDelegate {
    private var statusItem: NSStatusItem?
    private var languageSwitcherPanel: LanguageSwitchPanel?

    func applicationDidFinishLaunching(_ notification: Notification) {

        statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.variableLength)
        if let button = statusItem?.button {
            button.image = NSImage(named: "icon_top")
            button.action = #selector(showMenu)
            button.target = self
        }

        showLanguageSwitcher()
    }

    @objc private func showMenu() {

        let menu = NSMenu()

        menu.addItem(NSMenuItem(title: "Close Type Switch", action: #selector(closeApp), keyEquivalent: "q"))

        statusItem?.menu = menu
        statusItem?.button?.performClick(nil)
        statusItem?.menu = nil
    }

    func showLanguageSwitcher() {
        guard languageSwitcherPanel == nil else { return }

        let panel = LanguageSwitchPanel()
        let hostingController = NSHostingController(rootView: LanguageSwitchView())
        panel.contentView = hostingController.view
        panel.makeKeyAndOrderFront(nil)
        NSApp.activate(ignoringOtherApps: true)

        languageSwitcherPanel = panel
    }

    @objc private func closeApp() {
        NSApp.terminate(nil)
    }
}


&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;I tried testing the app on my MacBook models (M1, M2, M3) and all of them functioned as expected, launching the app without any additional windows appearing. I also checked the code for any unintended window launches or containers and could not find any issues.&lt;/p&gt;

&lt;p&gt;I expected the app to launch without any extra empty windows or containers, but when Apple tested it, they encountered an issue with an empty window appearing upon launch.&lt;/p&gt;

</description>
      <category>swift</category>
      <category>swiftui</category>
    </item>
    <item>
      <title>Type Switch: A Convenient Language Switcher for macOS</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Mon, 11 Nov 2024 16:51:54 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/type-switch-a-convenient-language-switcher-for-macos-almost-ready-2b0</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/type-switch-a-convenient-language-switcher-for-macos-almost-ready-2b0</guid>
      <description>&lt;p&gt;As a long-time Apple enthusiast who works with English, French, and Polish, I’ve always found macOS's default language-switching tools to be less than ideal for managing multiple languages. &lt;/p&gt;

&lt;p&gt;The process feels clunky, and I wanted something more intuitive and efficient. That’s why I decided to create Type Switch — a simple, powerful language-switching tool designed to make multilingual typing effortless.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;What is Type Switch?&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Type Switch allows users to quickly and easily switch between all languages installed on their system. With a customizable button that can be adjusted for size, color, and opacity, the app is designed to offer a seamless and intuitive experience tailored for multilingual users.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key Features:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Quick toggling between installed languages.&lt;/li&gt;
&lt;li&gt;Customizable button (size, color, opacity).&lt;/li&gt;
&lt;li&gt;Optional sound and speech feedback for each language.&lt;/li&gt;
&lt;li&gt;Clean, minimal design with a floating switch panel.&lt;/li&gt;
&lt;li&gt;Launch at startup for easy access.&lt;/li&gt;
&lt;li&gt;Keyboard hotkey [⌃ Ctrl] for quick switching.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;&lt;strong&gt;Download app&lt;/strong&gt;: [&lt;a href="https://apple.co/3ZmYZXH" rel="noopener noreferrer"&gt;https://apple.co/3ZmYZXH&lt;/a&gt;]&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Video&lt;/strong&gt;: [&lt;a href="https://youtu.be/RjXJG9876Zs" rel="noopener noreferrer"&gt;https://youtu.be/RjXJG9876Zs&lt;/a&gt;]&lt;/p&gt;

</description>
      <category>productivity</category>
      <category>programming</category>
      <category>swift</category>
      <category>product</category>
    </item>
    <item>
      <title>iOS Game “POP FRENZY!” Launches Today!</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Wed, 30 Oct 2024 13:18:07 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/ios-game-pop-frenzy-launches-today-2i51</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/ios-game-pop-frenzy-launches-today-2i51</guid>
      <description>&lt;p&gt;🎉 Hey everyone! 🎉&lt;/p&gt;

&lt;p&gt;I just released my new iOS game, POP FRENZY! It’s a fast-paced game that invites players to engage in the art of popping, inspired by the fascinating physics of particle movement.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fktpzbhqo1b1pr9rq3o0b.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fktpzbhqo1b1pr9rq3o0b.png" alt="Image description" width="800" height="1731"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Game Features:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;Physics-Inspired Gameplay: Interact with elements that reflect the dynamics of particle movement for a distinctive experience.&lt;/p&gt;

&lt;p&gt;Fast-Paced Action: Quickly pop matching elements within a time limit, testing your reflexes and quick thinking.&lt;/p&gt;

&lt;p&gt;Multiple Game Modes: Enjoy various modes, such as the original mode and "Ghost" mode, each offering different challenges and strategies.&lt;/p&gt;

&lt;p&gt;Accessible for All Ages: Easy to pick up, the game provides enjoyment for all skill levels while offering depth for those seeking mastery.&lt;/p&gt;

&lt;p&gt;I’d love to hear any comments or feedback! If anyone is interested in downloading it for free, feel free to message me for a promo code!&lt;/p&gt;

&lt;p&gt;Download Game: &lt;a href="https://apps.apple.com/ua/app/pop-frenzy/id6736933847" rel="noopener noreferrer"&gt;https://apps.apple.com/ua/app/pop-frenzy/id6736933847&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Gameplay : &lt;a href="https://youtube.com/shorts/RZ_eloa6c_4?si=fDG16KGj0j_4tOBN" rel="noopener noreferrer"&gt;https://youtube.com/shorts/RZ_eloa6c_4?si=fDG16KGj0j_4tOBN&lt;/a&gt;&lt;/p&gt;

</description>
      <category>gamedev</category>
      <category>mobile</category>
    </item>
    <item>
      <title>Mergeometry! a new iOS game reimagining 2048</title>
      <dc:creator>Maxym Babenko</dc:creator>
      <pubDate>Wed, 16 Oct 2024 19:16:37 +0000</pubDate>
      <link>https://dev.to/maxym_babenko_40a0c9d9463/mergeometry-a-new-ios-game-reimagining-2048-3agg</link>
      <guid>https://dev.to/maxym_babenko_40a0c9d9463/mergeometry-a-new-ios-game-reimagining-2048-3agg</guid>
      <description>&lt;p&gt;Hey everyone! &lt;/p&gt;

&lt;p&gt;I just released my puzzle game called &lt;strong&gt;Mergeometry&lt;/strong&gt;, and I’m pretty stoked about it. I wanted to give a fresh take on the classic 2048 game, and I think I’ve done just that with two unique merging modes:&lt;/p&gt;

&lt;p&gt;Form Merging Mode: You combine shapes and try to outsmart the game to score points.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1bulm9pvr22ur7leo6mf.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F1bulm9pvr22ur7leo6mf.png" alt="Image description" width="800" height="1731"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6ars8nfhkqiadaw5ldre.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F6ars8nfhkqiadaw5ldre.png" alt="Image description" width="800" height="1731"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0d4gabczozs4zgz7asin.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F0d4gabczozs4zgz7asin.png" alt="Image description" width="800" height="1731"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Evolution Mode: Here, you merge elements and guide the evolution of life, starting from molecules and going all the way to humans and beyond.&lt;/p&gt;

&lt;p&gt;I also added some fun features:&lt;/p&gt;

&lt;p&gt;You can customize the grid size and throw in a bomb mode if you’re feeling adventurous.&lt;br&gt;
There are several game modes like Classic, Timed, and Reverse to keep things fresh.&lt;/p&gt;

&lt;p&gt;Would love any thoughts or feedback if you decide to give it a go!&lt;/p&gt;

&lt;p&gt;Download: &lt;a href="https://apps.apple.com/ua/app/mergeometry/id6736862420" rel="noopener noreferrer"&gt;https://apps.apple.com/ua/app/mergeometry/id6736862420&lt;/a&gt;&lt;br&gt;
Demo: &lt;a href="https://www.youtube.com/watch?v=pvWXsenawP4" rel="noopener noreferrer"&gt;https://www.youtube.com/watch?v=pvWXsenawP4&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I just launched it, so I’m still figuring things out. Would love any thoughts or feedback if you decide to give it a go!&lt;/p&gt;

</description>
      <category>ios</category>
      <category>mobile</category>
      <category>gamedev</category>
      <category>2</category>
    </item>
  </channel>
</rss>
