Three years since Russia invaded Ukraine. The current political situation in the USA made me think: is it possible to learn how to love and sympathize? Not sure. But there is still a chance to learn how to cooperate and be in solidarity.

I wanted to write: “before it is too late.” But it is too late. For three years of my life, I’ve been living with the feeling that regular time has ended. It’s not a football game we’re playing (not a card game either). But the match has gone into extra time, and the players, with the last bit of strength, kept moving, trying to defend the goal. Some of them are injured, and many of them are killed (to make it clear — by Russians). All of them are tired, but none of them are alone.

You might be watching us fight on TV, Instagram, or wherever. Maybe we’re your favorite team, and you donate to the Armed Forces of Ukraine. We’re grateful for your support, but the only path to victory is for you to realize that this isn’t just our fight — it’s yours. More than that, there is no “you” and “us” anymore — there is only “we,” standing together for dignity [гідність], justice [справедливість], and freedom [cвобода].

We speak various languages, grew up with diverse lullabies and stories, and are shaped by different social and natural landscapes. So much divides us — physical borders and mental stereotypes. Maybe this is your first time seeing Cyrillic words that aren’t Russian, or it isn’t. But if you understand their meaning and want that meaning to matter in the world, we can make it happen together.

How?

Stay curious. Politicians and regimes don’t last forever. There is plenty of evidence that things can be different — and better. This is not the time to give up but to shift perspectives. For years, Ukrainians wanted so desperately to resemble Westerners that we inherited an inferiority complex — one as strong as it was baseless. But when the Russian invasion happened, we were the first to stand and fight for democratic values.

A teenager in Connecticut graduated high school without being able to read or write. Meanwhile, kids in Ghana grow up speaking up to six languages.

Multiculturalism isn’t the problem. The problem is the endless pursuit of profit, which drains and scorches everything around. And once we become aware of this, we can build relationships with people as people — and for people.

It’s dark. I’m in a forest, running as fast as I can. My legs sink into the mud, each step heavier than the last. I’m inevitably slowing down, and then, it catches me. It always does, no matter how hard I try to get away. My heart pounds, my hands are slick with sweat, my tears are ready to fall.

I hit Esc.

I bought Snufkin: Melody of Moominvalley after quitting my job. I’m not a gamer, and my immersion in the Moomin universe is limited to a few books I occasionally read. But the game fascinated me — the visuals are stunning, and the music by Sigur Rós takes me back to carefree university days when I was borrowing music tastes the way my roommates borrowed dresses from one another — simply, casually, sometimes forever.

Are you asking yourself the right questions?

Yes, I quit my 9-to-5 programming job in August 2024. For those who read my blog, the signs were probably there. In April, I published a story with a striking headline: World on the Brink: Why Focus on My Tech Career? In June, I attended a JS conference in Amsterdam, where I met exactly zero people but still held on to some hope. By July, I dabbled in React, took a vacation, and then decided to quit.

After three months of unemployment and a dramatic career shift, I realized I had asked myself the wrong questions. Am I good at programming? Or: Is programming good for me? These might seem neutral, but when you’re a woman battling impostor syndrome and nearing burnout, it’s better to hold off on answers — and actions.

Now that the damage is done, I’m rethinking my work and life strategies while playing Snufkin. Its gentle pace and quirky characters gave me the space to disconnect and look at my life challenges from a new perspective. Finally, the game helped me ask the right question: How can I become better at doing my job (whatever it is) and caring for myself (and the people I love)?

What playing video games can teach you?

I wish I had started playing video games sooner. Gaming isn’t just a fun way to spend my free time (and money); it’s also been an unexpected remedy for my perfectionism, fear of failure, and self-doubt. Here are five lessons I learned from playing Snufkin. Though, I suppose these lessons could come from just about any well-reviewed game on Steam.

1. Don’t give up. It’s hard to describe how desperately I wanted to escape from The Groke on my first, second, and third try — and how miserable I felt when I failed. I pressed Esc and didn’t open the game for weeks. But when I finally did, I discovered that — Spoiler! — The Groke in Snufkin is a harmless creature.
2. Be curious. I came back to The Groke after replacing the inner pressure of “I have to beat this!” with a genuine curiosity: “What’s next?” It’s OK to lose interest when you’re stuck — I reminded myself to stay calm and patient. The unknown brings uncertainty. Uncertainty leads to mistakes. Mistakes are how we learn and grow.
3. Make mistakes. The police officers in Snufkin are super annoying. It’s almost impossible to remove a park sign without getting caught. The good thing? When they catch you, the sky doesn’t fall. The game goes on, and you get as many chances to succeed as you need. The hardest part here is accepting the feeling that you’re not perfect.
4. Take breaks. I’m taking one right now. I worked so hard to reach the final quest (I’m hoping it’s the final one), but those hyper Woodies keep blocking my progress. Instead of getting mad at them — or myself — I decided to shift my focus: take a walk, read a book, and enjoy life outside the game. I hope someday I’ll dare to use this approach in my work routine without the deep-seated sense of guilt.
5. Celebrate your success. I can’t wait to bring harmony back to Moominvalley. Excited and a bit overwhelmed by the level of responsibility, I tend to undervalue my small achievements. Learning not to take success for granted takes time, and I’m still practicing. Those little victories are a foundational part of the game — they make the experience fulfilling and enjoyable.

Keep calm and play video games (and smash the patriarchy)

As a little girl, I didn’t play video games. I was led to believe they weren’t for me. Computers and the entertainment they offered belonged to the boys’ world. I grew up unsure of myself, afraid to make mistakes or break an expensive piece of technology. The fact that I eventually found myself working in tech is fascinating — but not entirely fulfilling. It cost me years of effort and self-doubt.

This is my personal story about what happens when women don’t play video games — or, more accurately, when women are not expected or encouraged to play them. Later in life, they are often perceived as less capable in fields like math, programming, or engineering. The patriarchy, inequality, and sexism may not seem as obvious nowadays, but they remain deeply ingrained and powerful.

If you’ve made it this far into my story, consider giving Snufkin a try — even if gaming isn’t your thing. I promise there’s a good chance you’ll enjoy it.

And if you liked the article, you can support me on Contribee.

“How to filter todo items? Vue 3 Composition API” is the most popular article on my blog on Medium. It was published on April 10, 2022, and since then, it has received 12.8K views and 6.6K reads. That’s pretty impressive, especially considering that it wasn’t a real tutorial on how to build a todo app in Vue. The main reason I wrote that article was my desire to try how the Composition API works and explain it to myself. I am happy that my readers also found it helpful.

A few months later, in August 2022, I changed my job and joined a project just after its migration to Vue 3, which also meant tons of refactoring to the new setup syntax. The Composition API is something I learned and loved. So, you’re probably wondering why on earth you are reading my new article with ‘React’ in its title. I can completely understand your questioning and—if you are a passionate Vue developer—disappointment. The short answer: no, I am not going to change my favourite framework anytime soon, but I want to grow as a software engineer.

A bit longer explanation: For the last couple of months, I’ve been struggling with frustration about my future, including my career in tech. I tried to reflect on it in my recent article “World on the Brink: Why Focus on My Tech Career?” Despite feeling lost, I joined a BE Mentoring Program to assist Ukrainian women in launching IT careers. For eight weeks, I worked with five women whose strength and perseverance to overcome obstacles and move towards their goals were incredibly inspiring. I know it was supposed to be my role to motivate them, but they really became a great motivation for me.

One of the mentees had a very good technical background, and after my presentation on Vue, she managed to learn the main concepts of the framework in just two weeks. That was awesome. Now, I want to do the same, but with React. To start with, I decided to build exactly the same todo app and see what happens. First, I updated my Vue app with the setup syntax and moved it from StackBlitz to GitHub. For my brand-new React app, I used Vite as a build tool instead of the official Create React App, and it worked just fine. If you’re curious about my first impressions after trying React, here they are.

HTML-like Markup Inside a JavaScript File

I am not going to be original here: JSX felt like a bad dream. I am used to writing markup in a separate section, where it looks clean, simple, and understandable. So, creating my first React component as a function that returns some piece of HTML was quite challenging and a bit frustrating. They say rendering logic and markup living together in the same place ensures they stay in sync with each other on every edit. Sounds reasonable, but check how my code for a todo list differs in Vue and React, and choose your fighter:

<ul v-if="getTodos.length" class="todo-list">
  <li
    v-for="(todo, index) in getTodos"
    :key="index"
    class="todo-item"
    :class="{ done: todo.done }"
  >
   <span class="task" @click="doneTodo(todo)">{{ todo.content }}</span>
   <span class="label">{{ todo.type }}</span>
   <button class="remove-btn" @click="removeTodo(todo.id)" />
  </li>
</ul>

Versus:

const todoItemsList = filteredTodos.map((todo) => (
  <li key={todo.id} className={`todo-item ${todo.done ? "done" : ""}`}>
    <span className='task' onClick={() => toggleDone(todo.id)}>
      {todo.content}
    </span>
    <span className='label'>{todo.type}</span>
    <button
      className='remove-btn'
      onClick={() => removeTodo(todo.id)}
     ></button>
   </li>
));

React Hooks: useState, useEffect, useMemo

At first glance, useState and its syntax seemed alien compared to the good old ref. ref is a function that returns an object with the value property, which holds the actual reactive data. useState is a function that takes one argument, the initial state, and returns an array with two values: the initial state and a function used to change the state. Wait a second, you have a variable that can't be changed, and then a function whose sole purpose is to change that variable? Exactly!

You can read why it was designed like that in this article [1], but the short answer is: Vue and React deal with reactivity under the hood in different ways. Nevertheless, you can build your own useState Hook as a composable in Vue [2]. In the end, what matters is that both mechanisms can be used to accomplish the same functionality—ensuring that the UI always mirrors the current state and its updates. In my app, every time I wanted to modify my todo—add, toggle, or remove—I had to call setTodos inside all of the related functions.

const [todos, setTodos] = useState(() => {
  const savedTodos = localStorage.getItem("todos");
  return savedTodos ? JSON.parse(savedTodos) : defaultData;
});

// Example of usage
function toggleDone(id) {
  setTodos(
    todos.map((todo) =>
      todo.id === id ? { ...todo, done: !todo.done } : todo
    )
  );
}

Event Handling, Conditional and List Rendering

In Vue, there are directives (v-model, @click, @keyup.enter) that allow you to work with events in a declarative style. React uses attributes that resemble JavaScript event handlers (onChange, onKeyUp, onClick). I cannot believe I am writing this: Vue directives are easier to use, but React attributes are much easier to understand. A similar situation occurs with conditional and list rendering: in React, there are no special directives like v-if and v-for in Vue (I swear, I love them). Instead, it uses conditional operators in JSX (ternary operators, logical AND (&&)) and the map method for rendering lists. At first, it takes some effort to start thinking this way, but once you get used to it, there is no reason to overdramatise. It is just more like Vanilla JavaScript, after all.

Final Note

Here is the harsh truth: I built the simplest app one can imagine in React — a todo app — and it was tough. Given my solid background in Vue, instead of being helpful, it was a sort of obstacle for me. Sometimes, I felt more skeptical about React than I obviously should have been. I realise that this is just the tip of the iceberg I touched on in this article, and these are just my personal impressions and random thoughts. If you want to dive deeper into the topic, please check the links I refer to:

1. React Hooks API vs Vue Composition API, as explored through useState [Posted on 19 August 2020]
2. useState and useReducer with the Vue 3 Composition API [Posted on 18 October 2020]

Also, here are the GitHub links to my 💚 Vue and 🩵 React repositories. Please share your comments below. If you want me to write more on the topic, visit my Buy Me a Coffee page.

Final Final Note

I published my original article on the 46th day of Ukraine’s heroic resistance against Russian aggression. Back then, I never expected it to turn into 861 days of the full-scale war. I try not to think about how much we have suffered and lost. But we keep on fighting for our freedom and safety for all of Europe and beyond. Donate to the Ukrainian Armed Forces and #StayWithUkraine.

On the 28th of November, 2023, I received a newsletter from JS Nation with an invitation to apply for a Diversity Scholarship for the JS Nation 2024 Conference. Usually, I skip such letters, mark them as read, and forget about them. But not this time. One magical word — Amsterdam — caught my attention. I had been there only once, very briefly, right before the Covid pandemic, and the city impressed me. The desire to visit it again in the summer, far away from rainy and cold Warsaw, was irresistible. So, I did my best to write a good motivation letter and started waiting for a response.

Five months later, I received a confirmation saying that I had been selected as one of the recipients of the Scholarship. I was happy, but at the time, not that enthusiastic. Warsaw is beautiful in summer, and Amsterdam is super expensive, as I learned right after reserving tickets and accommodation. But the main reason for my mixed feelings was that I was struggling with burnout again. It was caused mostly by the full-scale war Russia unleashed in my country more than two years ago and me finally starting to identify myself as a refugee. ‘World on the Brink: Why Focus on My Tech Career?’ — this is the title of my latest article on Medium, where I try to reflect on my situation.

Before the flight, I felt stressed, sick, and miserable — a deadly combination when it comes to perceiving a lot of information and meeting new people. On the conference day, I pulled myself together and took the metro to Kromhouthal, a former ship engine factory, where the organizers were expecting to gather 1,500 JS developers. A big crowd, but the only person I managed to have a small talk with was a videographer from Amsterdam, who was very curious about secret Russian military bases somewhere in Europe. My networking mission failed, and it was sad, especially compared to how much I enjoyed my last offline conference in 2018 — NgTalks in Kharkiv.

Now, the speakers. There were two I wanted to see live — Evan You and Anthony Fu. Evan You gave the opening talk, 10 Years of Independent OSS: A Retrospective. The slides he presented were almost the same as those I had already seen at the Vue.js Live conference in April. But for me, it was a historic event to see the creator of Vue.js and Vite standing on the stage in front of 1,000 people like a real rockstar. As for Anthony Fu, his talk, ESLint One for All Made Easy, was fresh, informative, and straightforward. I am a big fan of him as an engineer and of the projects he contributes to: VueUse, Slidev, and Icones. His blog post on mental health in Open Source was a great discovery for me.

This is how the JS Nation Conference went for me. Tomorrow, there will be another day of online talks, but I need to go back to work. I didn’t manage to use my free ticket to the fullest, neither in terms of the official program nor the social part of it. But I did get a charge of motivation and inspiration. I will continue working with Vue, but I also want to build something with React. And the most ambitious goal is to grow in the direction of full-stack development. Let me know if you want to read my next article by leaving a comment and following me. Also, here is my Buy Me a Coffee page. Thank you for reading.

In March, I spent most of my free time watching a Vue.js course on Udemy. It was a comprehensive 32-hour-long learning program designed by Maximilian Schwarzmüller. I enjoyed it. Despite having worked with Vue.js for almost three years, this course, ‘Vue — The Complete Guide,’ shed new light on aspects of the framework for me, particularly the concept of reactivity. Schwarzmüller doesn’t just tell you how to do things; he also explains why, which I found incredibly beneficial for developers at any stage of their career.

The course was needed for my work’s Personal Development Plan, especially since my promotion was on the line. But after finishing it, I started questioning everything. Do I still want to keep being a frontend developer? Am I willing to spend another 5 years getting better at programming? What if it’s all for nothing? Without electricity or the internet, I couldn’t do my job, and my work would mean nothing. This isn’t just some story from a disaster movie. I’ve lived through this in Kyiv. And there’s no way to be sure it won’t happen again in Warsaw. The less help Ukraine gets, the more likely it is that the war could spread across Europe.

I wish I had spent more time at my grandma’s village in Ukraine. There, I could have learned to grow food, make clothes, and look after myself. In the city, I spend too much on things I don’t need, like a new smartwatch or extra shoes. It seems silly and wasteful now. I could use that money for something useful, like solar panels to provide my home with electricity. Yet, the stark reality hits: I don’t have a home to return to. I left Ukraine because it wasn’t safe. But now, I’m starting to wonder if there’s such a thing as a safe place anywhere in the world.

A couple of days ago, I met T., my friend from Syria. The stories he shared about the war in his country were shocking; I found myself struggling to breathe and fighting back tears. For a long time, my understanding of wars came from historical and fictional books, and later, television. Yet, it never felt entirely real to me. This changed dramatically two years after the Russian invasion of Ukraine. The daily news reports of casualties are no longer abstract numbers; they represent lives that are crippled, mutilated, or taken away by Russian military forces. But for what? Merely for being Ukrainian.

I left my country, which is now besieged by drones and rockets from Russia in every region. Tragically, Ukraine lacks the weapons to repel all these attacks, and civilians are perishing — whether sleeping in their homes, walking their dogs, or simply grocery shopping. I moved to Poland seeking safety, to continue working, and to support my family. Here I’ve learned another thing about war: you can’t escape from it, no matter how hard you try. This isn’t because I stay updated with news from Ukraine and donate to the Ukrainian Armed Forces. It’s because I am now a refugee. Have you ever really considered what that word means?

After six months in Warsaw, I’ve learned that the refugee experience is far from being a long vacation in the EU or simply relocating to another country. The homesickness is acute, a deep and all-consuming pain. Regardless of how comfortable or happy a refugee’s life might seem on social media, it’s crucial to remember that their homes could be in ruins, their hometowns obliterated. Refugees find themselves unmoored, their past erased, and their future uncertain. It feels as though the war has excised a part of my essence; I am cut off, vulnerable.

It’s incredibly hard to explain my feelings and fears to someone who lacks this experience, to someone who never knew how to wake up in the middle of the night from their mom’s call saying the war has started. You have no time to cry and panic, trying to accumulate all your resources to survive, all while knowing life will never revert to its previous state. The horrors witnessed — people tortured, raped, and killed, the discovery of bodies days, weeks, months later, the tears of rescuers, and the sight of crippled, frightened pets — are etched into memory, an indelible mark beneath the skin.

“A constant balancing between ordinary life, in which you have to do ordinary things, make decisions, feel and show all possible emotions; and hidden somewhere in the back of the head the vile existential horror of what we are experiencing and can potentially experience…”

This quote from a Bluesky profile vividly captures the new Ukrainian reality, a life lived on the edge yet striving for normalcy. One can be surprised or even get angry with the fact Ukrainians do not give up. Facing job loss, they pivot to learning new skills and seeking new opportunities. Starting anew, particularly under such dire circumstances, is daunting. Therefore, I joined the БУДЬ mentoring program as a volunteer to assist Ukrainian women in launching IT careers. Though my future in frontend development remains uncertain, sharing my skills and aiding others has become my purpose, the one thing that now makes sense to me.

Do you also have the feeling the world is going to collapse? How do you cope with it? Is there something that motivates you and gives you the strength to move on? Please, share your thoughts in the comments below and #StandWithUkraine. If you want to support my work, here is the link to my Buy Me a Coffee page. Thanks for reading.

On that radiant Saturday in July last year, my mom and I were at a small restaurant in Warsaw. He walked up to our table, said hello, and asked if we were enjoying everything. I thanked him and asked if he remembered me. Yes, he did. I used to visit often in the summer of 2022 with my sister. It had been a year since then, and I was about to head back to Kyiv in a few hours. ‘Why?’ he asked. I told him I didn’t want to miss the victory celebration. He then told me he felt the same for six long years in Syria. We were quiet for a moment, looking at each other, when my mom started to cry, and I got goosebumps. He shook my hand, mentioned he had a brother in Berlin, and said it was a great city with good food and lots of refugees. He suggested I should visit. Not right now. We said goodbye with a hug, and I asked for his name. Samir. He used to own an antique shop in Damascus and now ran a vegan restaurant with the best falafel I had ever tasted. There was even a documentary made about him. I promised to come back to Warsaw again soon.

I kept my promise, and now it’s been five months since I moved here. I often see Samir, and he never fails to bring a smile to my face. We’ve stopped discussing the war, yet our shared experiences help me feel less isolated in this city. Warsaw has grown on me. My mother and sister are here, and I’ve made a few close friends. My therapist is pleased with my decision to relocate to Poland. I feel more at ease, confident, and relaxed now. It’s true, but there are still nights when I lie awake, missing Ukraine deeply, and find myself talking to ChatGPT about it.

2023 was a hard year for me, but it taught me a lot about myself, what I need, and what I can do. Facing tough times in Kyiv during the war with others from my community made me feel strong and like I belonged. But, I almost lost my job because it was hard to focus on work after nights with no sleep due to air raid sirens and bombings. I only wrote one article on Medium last year, and it wasn’t even about Vue or programming. Surprisingly, it got a lot of attention, and I was asked to speak at Medium Day in August. My talk was about war-life balance, and you can watch it on YouTube.

Ever since the russian invasion of Ukraine began on February 24, 2022, I’ve been trying to mix my knowledge about Vue with what I’ve learned from the war in Ukraine. However, at some point, I found I couldn’t continue like this. I’m still passionate about Vue and want to keep growing as a software engineer. But I realised that I couldn’t stay quiet about the war anymore and needed to shift my focus in writing. Sharing these difficult experiences might be hard for my readers, who are used to coming to my blog for technical insights. But I think it’s necessary to talk about it. The Ukrainian people are fighting for freedom and safety, not just for our country, but for all of Europe.

In the last year, Russians have targeted Kyiv with over 300 various types of cruise missiles, 14 ballistic missiles, and nearly 400 ‘Shahed’ type attack UAVs. In 2023, Kyiv had 302 air raid alerts, with the total time of these alerts adding up to 16 days. You can find all these statistics on a website called Alerts Wrapped, which starkly highlights our new reality. My friends, family, and colleagues face this every day. Those working for international companies often have to keep quiet about these attacks to keep their jobs. They are feeling downhearted, worn out, and uncertain about what the future holds.

It seems like the war won’t end soon. On January 2, 2024, Ukraine faced another widespread attack. We urgently need more weapons to defend our skies and fight on the ground. My friends and I are continuously raising funds for the Ukrainian Armed Forces, knowing this is a marathon, not a sprint. Today, I’m reaching out for your support. Please follow Ukrainian news on social media, share these stories with your followers using #russiaisaterroriststate, and urge your governments to assist Ukraine. United we stand, divided we fall.

It is my first post on Medium this year. And it has nothing to do with Vue.js. That doesn’t mean I suddenly quit programming. I have a full-time job, which regularly provides me with coding challenges. Recently I was writing the E2E tests for the first time, which was painful. Also, I am currently working on a small pet project, where I’m trying to implement new features more flexibly and less stressful. I have a project board on GitHub, but no sprint goals or strict deadlines. Besides, I am a participant in the WWCode Kyiv Mentoring Program, where I met a talented and motivated mentee. I’ve been consulting her on her way to becoming a web developer, and I hope the process is insightful for both of us.

Today I want to talk about mental health and motivation during the war. It is hard to believe and accept, but more than a year has passed since the russian troops invaded Ukraine. Over this time, Ukrainians learned what russian people were capable of: while their propaganda machine was spreading lies, the opposition kept silent, and the whole world was watching how their ordinary young men were looting, raping, and mutilating innocent civilians. But it isn’t a movie — we cannot press a stop button or leave a cinema anytime we want.

I’ve been staying in Kyiv for half a year now. The winter here was severe: the residents faced and courageously endured frequent shelling, several total blackouts, and the risk of potential evacuation. As for me, for the last couple of months, I mostly stayed at home, suffering from fear and apathy. Every time I went shopping, I couldn’t get rid of the thought: what if the russian missiles target my building next time?

That affected my productivity and daily routine. After doing some work, I spent the rest of the day in bed. I couldn’t eat. I couldn’t read books or watch movies. I couldn’t even use social media to distract myself. My feeds on Twitter, Facebook, Instagram, and even Linkedin are full of messages about someone’s death on the battlefield. When I look at their pictures, those brave women and men, lots of them were younger than me, my heart clenches in pain.

The human body reacts differently to stress. I’ve read an article where Ukrainian IT specialists describe how the war affected their productivity. Most of them say that they experience difficulties focusing on tasks. Many people had to leave their homes and look for new places to live and work. That caused a loss of a favorable working environment and a general worsening of working conditions. Some people complain about problems with concentration and memory. They procrastinate, continuously read the news, and worry about the safety of their family. Some specialists lost their jobs.

Admitting a problem

At the same time, fewer people claim their productivity, on the contrary, increased. Work helped them to distract from the news; they felt enough energy and motivation to earn more money to support the Ukrainian Armed Forces. I wanted to be one of them, but how? The first and hardest step was to admit the problem. I spent day after day trying not to think about the future, eating sweets to reduce stress, until one day, I weight myself. The number I saw shocked me. All at once I realized I needed to change my way of life.

Creating a plan

I asked myself: what can I do besides working and sleeping? The first thing that came to my mind was to increase physical activity. I set myself a goal to spend more time outside walking and running. On the 1st of March, I went for my first run this season. 2 km for 14 minutes — that was the result. I used to run 10km+ daily a few years ago. Now I had to start from the beginning. So I tried to be patient. Two weeks later, I was able to run 4 km. On the days free of running, I go to the gym or walk. I plan to get 8000 steps per day no matter what.

Sharing tiniest progress

Daniel Lieberman, a paleoanthropologist best known for his research on the evolution of the human head and body, wrote a book about physical activity. He claims that sharing information about what you do can help to save motivation and not give up. So, I posted a thread on Twitter about my progress and got a lot of positive feedback. Also, I use apps to visualize my work and get some stats. I loved Avocation: you can plant a tree and watch how it grows after you do a planned activity. Awesome.

Asking for help

This week I am having a short vacation. I have a job where management cares about the wellness of employees, but not everyone is so lucky. Many people in my country cannot afford a break during the war. They have to make for living and support their families. That is why the advice to quit a job and go to Peru does not make sense. At the same time, physical exhaustion and permanent fear of your life cause anxiety, sleep disorder, and other mental health issues. It seems like a blind corner, and the only one who can help is a psychotherapist. War experiences for soldiers and civilians are different, but there is one thing we have in common — we all are traumatized.

I did not mean to write a positive article. The honest answer to the question in the title is: there is no way to keep productivity and motivation while your nation suffers from violence you cannot imagine. I described a personal attempt to preserve the remains of mental health. I gained weight, and that was a signal for me to change my habits. I accept the possibility that my plan may not work. But I will enjoy the process, as long as I can, and that is what matters.

After spending some time in Warsaw, I came back to Ukraine. That wasn’t an easy decision. Russian missiles constantly attack my country. Winter has come, and this time their goals are power plants. As a result, all regions faced emergent and scheduled power outages. Here, in Kyiv, we experienced the first total blackout last week. I hadn’t had electricity, water, heating, and mobile communication in my apartment for two days. To be able to work, I had to go to the office. My daily routine changed. I couldn’t go to the gym, meet my friends for a walk or a drink, read books, listen to music or watch Netflix as I usually do. Apart from that, I started smoking; I spend more money on donations to the Armed Forces of Ukraine; I try to call my relatives more often. Every day could be your last day. It is a war reality Ukrainians have been dealing with for nine months.

Those are the circumstances I’ve been going through right now. Nevertheless, I do my best to keep being concentrated and productive. I take care of my physical and mental health. I try to learn something new when it is possible. Today I want to show you my new Vue 3 project, written with Composition API. It is a simple personal library manager where you can register your book, rate it and leave a comment. I created it to test modern Vue.js libraries — Pinia and VueUse. When it was ready, I showed it to my colleague. He left some comments and inspired me to write this post. So, here are a few tips on how to improve the user experience of your application.

Your application runs fast. Good for you. But not always for users

The first version of my app ran fast, and I was proud of it. It took me less than a second to register or delete a book. But the truth is that it may be confusing for a user to understand what’s going on. Where is a record I’ve just created? What should I do if I want to undo the deletion? In my app, all books were sorted by date, from the oldest to the newest one. And if there were a lot of books, a user wouldn’t be able to see the one they just created. Also, there were no warnings about removing a book and no possibility of restoring it. That meant a lot of work ahead.

Users need visual hints. Try to add some animation

First, I created a new computed, which solved a sorting issue. Now a user could see a new record in the first place in the list. That was easy, but not enough. I needed to add some animation, which helped to make user actions more noticeable. I managed to achieve this with the Vue.js TransitionGroup. Check the BookList component for more details.

Modals can be nasty. But users do need them

The only modal I added to my project is connected to the delete action. A user got a chance to think twice before removing a book from their library. After seeing the popup message: “Are you sure you want to delete this book?”, you can choose between two options — keep the book in your library or delete it. Also, you can close the modal and continue working with your library.

Netflix uses toast messages. And you should

I’ve borrowed one fancy feature from Netflix. When you remove a movie from your list, the service first tells you that the action was successful and then allows you to restore it. I tried to do the same in my application. In the BookList component, I created a toast message with a button. If you click it, the undoRemoving function will fire. Now you can have your book back. Happy end.

That’s it. I hope you enjoyed reading my post. Here you can play with my application, and here you can check the project repository on Github. If you have any comments or suggestions, text me on Twitter @ni4yja.

I haven’t been publishing new stories on Medium for a while. Lots of things happened in my life over the last couple of months. I moved to another country, changed my job, and felt lost and disoriented most of the time. Approximately 20% of Ukrainian territories are under Russian occupation, where civilians are being kidnaped, tortured, raped, and killed. My beautiful Kharkiv is being bombed days and nights. Russian missiles strike Ukrainian schools, hospitals, and malls, and you never know who will be next. Nobody is in safety, and that breaks my heart. While abroad, I participated in demonstrations for recognizing Russia as a terrorist state. Those events take part in many European cities; if you support Ukraine and want to join, keep an eye on the hashtag #RussiaIsATerroristState.

Do you use Twitter? I do not tweet a lot, but I love it. News, memes, jokes, and cats — all you need is in one place. After the 24th of February, Twitter became a platform for Ukrainian volunteers and journalists to share the truth about the war with the world. If you can follow one account today, let it be @serhiyprytula, an activist who collected around UAH 600 million to order four Bayraktars in a couple of days.

One day I came up with the idea to replicate a famous Tweet Box on Vue.js. But I was late. Markus Oberlehner did the same four years ago. Besides, he wrote a brilliant article and shared the source code, so I just copied it into my new Vue project. Surprise! It didn’t work. The reason for that was the Vue 3 breaking changes, including v-model. Therefore, I had to do some quick fixes.

Firstly, I changed textareafrom this:

<textarea
  ref=”textarea”
  :class=”`${$options.name}__textarea`”
  :value=”value”
  rows=”1"
  @input=”updateValue”
/>

To this:

<textarea
  ref="textarea"
  :class="`${$options.name}__textarea`"
  :value="modelValue"
  rows="1"
  @input="updateValue"
/>

Method updateValue was transformed from:

updateValue(e) {
  this.textareaGrow();
  this.$emit(`input`, e.target.value);
}

To:

function updateValue(e) {
  textareaGrow();
  this.$emit('update:modelValue', e.target.value);
}

It may seem like a piece of cake, but I was super happy to cope with it. For more information, please, check the documentation.

My migrated application worked, but this didn’t stop me from coding. I rewrote my components with Composition API. That turned out to be more challenging than my previous project with filtering todo items, as I was dealing with props and refs. But after a while, I managed to accomplish it as well. Follow this link, if you want to see my version of Tweet Box on Vue 3. That’s all for now. Stay tuned.

One day I was thoughtlessly surfing the Internet and suddenly found an SCSS framework that deeply touched my heart. At first sight, Cirrus CSS seemed to be ideal for rapid prototyping, and I was eager to try it out. If you’ve been reading my blog for some time, you should know that I love Bulma.css and use it in my every second project. But this time, I was ready to try something new. Cirrus CSS didn’t disappoint me. Furthermore, I liked it so much that I built a simple website to test as many of its components as I could.

After all, my brand new Vue App received the Header, the Hero, the Footer, Cards, and Tabs. Each component looked great on different screens, and I didn’t have to add a single line of CSS code. There was a challenge, though — I wasn’t sure how to make Vue Router work with the Cirrus CSS structure for the Tabs component. Yes, I chose the possibilities of Vue Router to build tabs, as I often did at my daytime job. So, after reading some documentation for Vue Router 4, I came up with a solution. Today I want to share it with you.

The first thing is to set everything up. Notice how I import Vue Router and Cirrus CSS in my main.js file:

The second step is to set up the router.js file. I created three routes and three separate pages for them: Home, News, and Donate.

The challenging part is to make it all work together in TheTabs.vue. Here is the component’s template:

This is where Vue Router 4 shows its power. I passed the custom option to <router-link> to prevent it from wrapping its content inside of an <a> element. Then I used <router-link>'s v-slot to customize my tabs. For more information, read the documentation.

In the second part of my component, I defined tabs in the data function. Keep in mind, that you can pass tabs as props if you want to make your component reusable.

The last thing I want to show you is the template of my App.vue. But don’t forget to import and set up all the components you need in your app.

Finally, here is what I managed to build:

The source code is here. Please, leave a comment if you have any questions or suggestions. Thank you for reading, and #StandWithUkraine.