DEV Community: Patrik

Voice User Interface in tiny react project

Patrik — Sat, 23 Sep 2023 19:25:22 +0000

Sometimes during exercise, I want to track how long I’m able to hold the plank position or a certain stretch. However this situation makes it awkward to use my phone and this inspired me to explore Web Speech API and make voice controlled stopwatch in react. In this article, I’m focusing on adding voice commands to the existing react tiny project. You can follow along the codebase on github

Speech Recognition in browsers

The SpeechRecognition interface is part of the experimental Web Speech API and it makes it easy to implement voice user interface (VUI) in browsers. Official browser support looks great, however in practice, it is less optimistic. According to my tests with multiple browsers, it has been working reliably only in Chrome and Safari.

Tiny project with voice user interface

The only thing I want to render is the Timer component inside the App where I will add controls using voice commands. This is what the initial structure looks like:



export function App() {
  const lastCommand = useVoiceCommands()
  return (
    <Timer run={true} />
  );
}

// Placeholder for adding voice commands
function useVoiceCommands() {
  return "";
}

Note the placeholder hook useVoiceCommands which will be used to add - you guessed it, voice command functionality.

Lucky for me there is already a package available for speech recognition in react called react-speech-recognition.

This package offers an option to add 3rd party recognition service as a polyfill for full cross-browser support. For this project, I'm happy with Chrome and Safari support so I will not investigate this option.

Custom `useVoiceCommands` hook

Let's start building our useVoiceCommands hook by importing the building blocks from react-speech-recognition.



import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";

react-speech-recognition package exports useSpeechRecognition hook to read recognized speech in our component, and SpeechRecognition object to be used to start and stop the recognition service. I want to start the speech recognition when app renders so I will call it inside React.useEffect hook with an empty dependency array, including abortListening method in the clean up function.



function useVoiceCommands() {
    React.useEffect(() => {
        // Timeout fixes the error during live-refresh in development when listening
            // attempted to start before it has been aborted in a cleanup
        setTimeout(
          () => SpeechRecognition.startListening({ continuous: true }),
          500,
        );

            // Stop listening when component is unmounted.
        return () => {
          SpeechRecognition.abortListening();
        };
      }, []);
    return "";
}

Let’s define the commands for the stopwatch:

start - start the timer

pause - pause at the current time

stop / reset - stop and set the stopwatch back to zeroes.

These words will have to be recognized and used in the App to interact with the timer. At the moment our app starts listening to microphone input but we don’t read the output yet so let’s do this next. Add the useSpeechRecognition hook imported from react-speech-recognition package into the custom useVoiceCommands hook. Its output is an object containing properties indicating browser support and transcribe details.

If you want to learn more, I recommend consulting the API docs

In this use case, we will want to trigger state change when specific words are recognized so we can ignore the transcript properties and disable state update in useSpeechRecognition hook by adding a configuration object into its call with transcribing set to false:

useSpeechRecognition({ transcribing: false })

💡 Everything indicates browser support speech recognition in all major browsers (Firefox behind flag) but at the time of writing, it is operating correctly only in Chrome and Safari

React speech recognition has an excellent feature for exactly what we need. It is called “commands” and we can use it to define specific words we want to listen for, with fuzzy match and callback to be triggered upon recognition. In the command array, we put all the commands we want to be recognized, and as a callback, we will set the state value of the lastCommand. This is what the final version of the custom useVoiceCommands hook looks like:



function useVoiceCommands() {
  const [lastCommand, setLastCommand] = React.useState("");

  useSpeechRecognition({
    transcribing: false,
    commands: [
      {
        command: [
          "start",
          "stop",
          "reset",
          "pause",
          "pose" /* pose - catches misunderstood pause */,
        ],
        callback: setLastCommand,
        matchInterim: true,
        isFuzzyMatch: true,
      },
    ],
  });

  React.useEffect(() => {
    // Timeout fixes error during development when listenning attempted to start
    // before it has been aborted in a cleanup
    setTimeout(
      () => SpeechRecognition.startListening({ continuous: true }),
      500,
    );

    return () => {
      SpeechRecognition.abortListening();
    };
  }, []);

  return lastCommand;
}

Using the voice commands in app

By using the custom hook for getting the voice command we are keeping the body of the App function component concise and clean. This component will make use of lastCommand in the following ways.

The lastCommand state variable will be used to conditionally set the run prop of timer. If its value is start - the run will be true which starts the timer. When we say pause, run prop will change to false and timer will pause displaying the time that has passed since start.
Same thing actually happens when you say "stop" or "reset", but for these commands we will set the time back to zeros.

In order to reset the Timer back to zero, we will force the component to re-initialize by adding the key prop and change its value when either “stop” or “reset” commands are recognized.



export function App() {
  const [resetKey, setResetKey] = React.useState(0);
  const lastCommand = useVoiceCommands();

  React.useEffect(() => {
    if (["reset", "stop"].includes(lastCommand)) {
      setResetKey((x) => x + 1);
    }
  }, [lastCommand]);

  return (
    <Timer key={resetKey} run={lastCommand === "start"} />
  );
}

Changing the value of the key prop will force react to unmount the existing instance and mount new one which coincides with our goal to reset the timer.

Now the app utilizes all of the commands we set to use for this tiny project. Remember when you test this, that indicated browser support for SpeechRecognition API is not reliable and it is best to run this project in Chrome. At the moment react-speech-recognition does not reveal the error state (I have submitted PR for this).

To help you check the support for your browser I have added an error listener on the demo of this project along with the display of debugging information. After you enable microphone permissions and start talking it will either display recognized commands or the error code on the screen, so you don’t end up talking to your computer for no reason 🙂

Hopefully, this tiny project walkthrough gave you an idea of how to start adding a voice user interface to your projects. Let me know in the comments all your questions or your feedback on this walkthrough or what you are going to use the speech recognition for. If you see something that could be done better feel free to submit a PR and I will be happy to post an update.

Useful resources for your projects using speech recognition:

MDN SpeechRecognition

react-speech-recognition

Can I use SpeechRecognition

This project on github and live demo

Cover photo by Jason Rosewell on Unsplash

How to use apollo client cache for local state management

Patrik — Sat, 17 Dec 2022 20:25:27 +0000

Apollo client is popular tool of choice for communicating with graphQL API. With its build-in cache capability it is also a good choice for state management. Let's take a look at how to perform CRUD actions on an example to-do app, using apollo client cache for local state management.

This walkthrough uses TypeScript, react (18.2.0) and @apollo/client (3.7.1). User interface is purposefully basic to allow us to focus on interacting with the state. It is composed of four parts:

AddTodo a component with a text input element for adding to-dos
TodoList which displays all TodoItems that will toggle completed state on click
ClearCompleted button that removes completed to-dos from cache

Complete code is available on codesandbox

Initial config

Let's start by defining our apollo client using InMemoryCache:

// client.ts
import { ApolloClient, InMemoryCache } from "@apollo/client";

export const client = new ApolloClient({
  cache: new InMemoryCache(),
});

And make it available to react via ApolloProvider:

// App.tsx
export default function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <h1>Todo list</h1>
        <AddTodo />
        <TodoList />
        <br />
        <ClearCompleted />
      </div>
    </ApolloProvider>
  );
}

Setup initial state

useQuery has default fetch policy set to cache-first. This policy means that apollo client will check the cache before attempting to send a network request to fetch the data. We want to use only a local state (in a cache) without using network, so initial state will need to be written into the cache before client requests the data.

Going back to the client.ts file, write the initial data before the react app is mounted.
Call writeQuery on apollo client instance, defining the query to write into and the value of initial data.

// client.ts
client.writeQuery({
  query: gql`
    query {
      allTodos
    }
  `,
  // initially an empty array
  data: { allTodos: [] }
});

Structure of the data property must conform the structure of the query. In the code above, query defining allTodos field expects data object containing property with the same name.

If the data property does not contain all the fields defined in the query, apollo will log the error in a console

This call creates canonical field allTodos on the root Query type. We can confirm this by opening apollo devtools and viewing the 'cache' tab.

Type policies

By default all query writes for allTodos will replace its content. Our goal is to use allTodos field for overwriting all stored to-dos and for adding individual to-dos into the cached array. The default write behaviour can be changed by defining the type policy on the root Query type, specifying allTodos field with the object containing the merge method.

export const client = new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {
      // type we want to define the policy for
      Query: {
        fields: {
          // field for which we want to customize the behaviour
          allTodos: {
            // how we want to merge existing data with the incoming
            merge(existing = [], incoming) {
              if (Array.isArray(incoming)) {
                return incoming;
              }

              return [...existing, incoming];
            }
          }
        }
      }
    }
  })
});

Value returned by merge will be stored as a new value for allTodos. It will be invoked for all the query writes into allTodos field, even for the initial state write.

merge defined above returns the incoming value as-is if it is array, overwriting previously cached value which was our first goal for this field. In any other case incoming will be returned as a last item in an array of existing data.

Apollo suggests that merge function is 'pure' - not mutating the input arguments since internally the objects are passed as references and mutating them can cause unexpected side-effects.

Adding a to-do item

Adding a to-do is done similarly to setting the initial state. This time the query will define all the fields that will construct the to-do object.

// AddTodo.tsx
const todoQuery = gql`
  query {
    allTodos {
      __typename
      id
      title
      completed
    }
  }
`;

Including the __typename is necessary for data normalization in apollo. If you are not familiar with this concept I recommend learning more about it from this article. In short - it allows deduplication of data, enables recognition of correct type for using type policies, updating objects using writeFragment and other useful stuff.

After our todoQuery is defined we will use it in a helper function which is invoked when you press "Add Todo"

// AddTodo.tsx
function addTodo(client: ApolloClient, title: string) {
  client.writeQuery({
    query: todoQuery,
    data: {
      allTodos: {
        __typename: "Todo",
        id: crypto.randomUUID(),
        title,
        completed: false
      }
    }
  });
}

As before it is necessary for the structure of the data to match the structure of the query. __typename is set to Todo which will be important later when we get to updating the completed state.

You have probably noticed that for value of allTodos we have set a single object and not an array as before when writing the initial state. This is when the merge field policy on allTodos that was defined earlier comes in useful. Let's review it again:

// client.tsx
    merge(existing = [], incoming) {
      if (Array.isArray(incoming)) {
        return incoming;
      }
      return [...existing, incoming];
    }

existing is always the current value of the field and incoming will be set to the value of the to-do object we want to add using writeQuery. incoming fails the isArray test and is appended to the array of existing to-dos - in simpler terms: new to-do is added to the end of the list of existing to-dos.

Query To-dos

If you have used react apollo client, the following code will be familiar. Requesting data from cache is the same as requesting them from graphql server. First you define the query and then use it as a first argument in useQuery hook

// TodoList.tsx
const allTodosQuery = gql`
  query getAllTodos {
    allTodos {
      id
      title
      completed
    }
  }
`;

export function TodoList() {
  const { data } = useQuery(allTodosQuery);
  // data: { allTodos: [{...}] }
  /* rest of the component body */
}

The default fetch policy for useQuery (cache-first) means that cache will be queried for data and it returns the empty array that was setup as initial state.

If cache had no data for this query it will attempt to request if from the server. We can prevent this behaviour by changing the fetchPolicy to cache-only.

Additionally to getting the data from cache, useQuery will set up subscription on the cached data. This means that whenever the value of allTodos is changed, component will be re-rendered with the latest cached value.

Now that TodoList can get the data from cache it can render individual items as TodoItem components so now we can see the them in the UI.

Updating to-do

TodoItem takes to-do object as a prop and display its data. In this component we will want to add a functionality of toggling the completed state when user clicks on it. We will use writeFragment method to-do the update, which will require a fragment on a type that we want to edit:

// TodoItem.tsx
const fragment = gql`
  fragment ToggleComplete on Todo {
    completed
  }
`;

This code creates a fragment on Todo type, which matches the value of __typename we have used when adding to-do.

In a fragment we need to specify the properties that we will want to change, in this case it is just completed field. As a next step we will define toggleComplete helper that we will call when user clicks on the to-do:

// TodoItem.tsx
function toggleComplete(client, todo) {
  client.writeFragment({
    id: client.cache.identify({ __typename: "Todo", ...todo }),
    fragment,
    data: {
      completed: !todo.completed
    }
  });
}

Notice the client.cache.identify({ __typename: "Todo", ...todo }) utility used that reads the object id and __typename. The output will look something like: Todo:123. This is the 'ref' of the normalized object stored in a cache which tells the cache what object will be updated.

Now when you click the to-do item and toggleComplete is called, it will update the completed property of the to-do object in cache. Cache change in turn triggers subscription set by useQuery in TodoList causing it to re-render with the new data that are being passed as a props into TodoItem. In the UI you will see to-do item that was clicked get crossed out.

Deleting Todos

To complete the CRUD implementation we will add delete functionality of the completed to-dos.

In order to delete completed to-dos we need to get the list of to-dos, filter out the completed ones and write the new list back. All of this can be done with updateQuery method, so let's start by defining the query:

// ClearCompleted.tsx
const queryTodos = gql`
  query Todos {
    allTodos {
      id
      completed
    }
  }
`;

The update needs id so cache can recognize what to-dos are written back and completed to let us filter out completed to-dos.

Update helper will look like this:

function clearCompletedTodos(client: ApolloClient) {
  client.cache.updateQuery(
    { query: queryTodos },
    (data) => {
      return { allTodos: data.allTodos.filter(({ completed }) => completed === false) };
    }
  );
  client.cache.gc();
}

This time the function signature is a little different. In a first parameter query must be defined in an object and the second parameter is update function. It receives data from the query in a shape as requested and it is expected to return the data we would like to have stored on that query. Code above returns object with allTodos property (again matching the shape of the query) with filtered to-dos. This update, same as previous writes, will invoke the merge field policy and because we are writing an array it replaces all of its content.

If you're wondering how are the titles of the to-dos preserved when it is not requested in the update query, it is because of the data normalization that happens internally. The to-do objects that are written back to the query contain id and __typename - which is requested implicitly, and those two properties are enough to match the object to normalized version stored in cache.

After the update query, cache garbage collection is invoked to clean up now unreachable normalized objects.

This currently doesn't work as expected so I have logged this issue in apollo client repo.

Summary

We've covered the cache policies and when they are invoked, setting up the initial state, writing objects into an array and the importance of __typename, querying the data from cache, using fragment to update the normalized object and finally deleting the completed to-dos.

Thank you for reading this article, I hope you found it helpful. When you have a minute to spare I would love to hear your feedback on the information in the article, whether you have learned something new or any suggestions how to improve in my future writing.

Failing as a team leader

Patrik — Thu, 30 Sep 2021 21:32:44 +0000

Becoming a good leader is a journey that takes time and patience. There is plenty of articles out there about how to become one but what about looking at common mistakes most new leaders make? Even if you strive to be the best you will not be able to avoid some failures on your journey. Here I'm sharing mistakes I made in my first leadership role so that you can learn from them too.

Backstory

I've been building websites for some time (I was learning doing layouts with tables to give you an idea) but only had 4 years of professional experience before my promotion. I knew the team and the product we worked on quite well. After being in the company for a year I have confidently accepted promotion to a team leader role. I knew it will be exciting experience, yet I was not prepared for the amount of mistakes I was going to make along the way.

You don't become a leader by getting promoted!

This is not a breakthrough realization but many people including me is oblivious to the fact until it is verbalized to them. After promotion I did not suddenly become smarter, more capable or gained superpowers. I knew this but it did not stop me to act like it. I was trying to have an answer to every question and come up with solution to every problem which was not only overwhelming but also became frustrating when those answers and made up solutions turned out to be incorrect. Lot of bad decisions were made as I was trying to cover up that I do not have the correct answers.

Looking back at this time I wish I had been more open about my lack of experience and used the opportunity to learn from other more experienced colleagues in leadership roles. It would allow me to learn more and be better in my role earlier.

Scared of delegation

It is not an understatement when delegation is referred to as art. Same as art it needs understanding, personal touch, experience and lot of patience. While I was aware of the concept, I was actively trying to avoid it and take 'shortcuts' by using it as a last resort.

By doing this I was unknowingly taking away growth opportunities from other team members and passively indicating they don't have my trust. As a result they were losing confidence in their own work and grew doubtful of their own skills. And I instead of helping others to grow, was drowning under the workload that could be with appropriate support handled by anyone on the team.

Delegation is hard but it is effective tool to getting more done and enabling leaders to focus their time where it is most impactful. Getting it right takes practice and some experimentation but when done correctly it is invaluable skill.

Giving too little freedom (micromanagement)

When I actually delegated some work I resorted to the worst management approach of all - micromanaging. Incorrect assumptions about my role led me to believe that I have (or need to have) the best idea how things should be done. Again communicating lack of trust in my team members I repeatedly commanded every step of the project, what is the order of tasks and timing expectations without proper discussions.

As expected others became uncomfortable to share their own ideas and would suppress their opinions and creativity. In one of the meetings upon my request for ideas my colleague replied: "Why don't you just tell us the solution?". At first this lack of interest in cooperation made me angry, until I realized that this was the working relationship I have established.

Giving too much freedom

In a poor attempt to improve on my micromanagement approach I chose the other end of the extreme scale. Instead of outlining the specific methods and solutions I've disengaged completely. After giving the loose project brief to my team, I would let everyone work on their own and only check-in for updates on a progress.

Initially this made everyone little bit happier (comparing to being micromanaged) but frustration was back towards the end of the project when we realized that work in progress not only goes far beyond deadline but does not fully meet project requirements. This was complete failure in my core responsibility - being a leader.

Lack of clear communication

"Communicate, communicate, communicate!" were the words of wisdom from my colleague manager after another missed deadline due to miscommunication of the project brief. English is not my native language and same applies to most of my colleagues, however I do not think this was the problem. I simply assumed it is enough to say everything only once. Whatever the outcome was from the management meeting I only communicated directly relevant bits to the team without the rest of the details. No one else had any idea why do we work on this specific thing, how are the priorities set or how is the rest of the company affected by our work. I thought those details were not important to do the work so I kept them to myself. Same applied to communication to higher ups. I assumed all issues within my team or technology we were working with, were to be solved only by me and my team. Keeping the details to myself blocked my colleagues from making informed decisions. Lot of time was lost because incorrect priorities were set due to lack of communication and inherent failure to plan.

Best communication practices suggest to communicate the same message on multiple channels, reinforce by repetition, varying formulation and even ask the other party to confirm what was agreed to avoid misunderstanding. Communication is a critical tool that makes everything much harder when neglected.

Making changes without thinking

It was clear to everyone that our existing workflow did not work well. Some of the bugs were not being reported through our bug tracker so when someone else came across the same bug it was unclear whether it is being worked on or not. When I investigated why is this happening, few people reported that system for reporting bugs is too complex so they preferred to report it directly to individual developers. To fix the complex bug tracker I have decided to change the software completely for next shiny new thing. This new system was an improvement but because I have fixed the wrong problem it only made the whole situation worse. Now everyone complained that they don't know how to use the new bug tracker and other people wanted to go back to 'old ways' of doing things. I have not considered how impactful this change is and that it can be more difficult to adjust to.

Before making such a changes evaluate what improvements it brings. Consider who will get affected, time investment required to make the change and cost of training. Then weigh these improvements against cost of implementation and training to make sure it will be worth to implement. Remember you don't need to (and probably should not) do this alone. Get input from other departments to help with final decision.

Conclusion

Being a team leader for the first time is hard. Your safety net becomes much smaller and your decisions have bigger impact. If you are due to be promoted to leadership role do not get scared by my experience. Even though it might sound like I was only failing, there were lot of bright moments too.
You probably will not make the same mistakes as I did but chances are you are gonna make some. And that's all fine, as you already know everybody makes mistakes. However it is important to learn from those mistakes as that is what moves you forward and makes you a better leader.

Running for productivity

Patrik — Sat, 28 Sep 2019 08:24:23 +0000

As developers we often do not consider our physical fitness to be important for our work. While not essential, it makes a big impact on our performance and overall productivity. I started with running to improve my health but soon discovered other benefits.

One hour from start to finish

Often it’s not easy to find yourself time for exercise. Knowing it only takes an hour of your time and you come back refreshed, makes it easier to fit in your schedule. Have 5 minutes for a warm up, 30 for a run, 10 post run stretch and you’re still left with 15 minutes for a shower.

Quality AFK time

Sometimes the day just isn’t going well. Everything you touch breaks, nothing is making sense and your colleague Greg didn’t merge your PR because you used let instead of const. Getting away from keyboard and going for a run can help you focus better when you get back to a given task. You’ll see it with fresh eyes and mind, and it will be easier to focus again. This way you can get much more done than if you try to force yourself to do something you just don’t feel like doing.
Many times I struggled to fix the bug or find a solution to ‘unsolvable’ problem for hours only to figure it out in my head during the exercise. When I’m running my brain is relaxed and my mind wanders to mysterious areas of humanity and life on the earth. If there’s something nagging me in the back of my mind, it naturally dissolves into clear solution or series of small steps to take, that will help me to solve the mystery.

Stress relief

No matter how much pressure is on me it always goes away during the run. Tomorrow’s deadline for impossible task suddenly doesn’t matter at all when you are short of breath and fighting the thirst. Even after the exercise, stress levels can’t compete with load of endorphins in your body.

Mental health

When you successfully beat stress and have regular ‘top-up’ of endorphins, you become a much happier person. In my case I became more optimistic. There’s no more long term stress that could have a bad effect on my mental health. And after you became happier, you’re more capable of spreading happiness too which will make you more likeable person. Of course there are other causes than stress that can make you depressed, but I found that running helps me cope a little better with anything life throws at me.

More energy than you expect!

If you think morning run means you’ll be drained for the rest of the day, expect the opposite. Your body will wake up much more quickly and the energy will last for the whole day. It might get some time getting used to earlier wake-ups but benefits that come with it are worth it. Eventually exhaustion will catch you up in the evening when it’s time for bed, which guarantees better sleep.

Final mile

Lot of people say that running is boring and not for them. That’s fine I don't argue with them, I used to say the same. However when I started I found it enjoyable and now consider it part of my routine. There are many ways to keep yourself motivated. I recommend keeping track of your personal bests and try to beat them (shadow race your previous time using endomondo), race your friends times, escape from zombies or if you like beer try doing both!
If you are a runner too let me know in the comments other productivity benefits you have discovered.

My running dev story

Patrik — Sat, 21 Sep 2019 10:20:56 +0000

It was just before 9am, I was walking up the stairs, catching my breath while cursing the elevator that was out of service for the third time that month. I wondered if I became unfit over the last couple of months. “No, it must be the steep stairs” inner voice tried to convince that fat angel in my head. Out of nowhere, noise of someone running up the stairs overlapped discussion in my head: “Morning! I’m in a hurry!”. It was our nearly 50 year old sales manager who just run up like a teenage gazelle, not paying attention to my fitness crisis. That made me realise it’s time to admit the harsh truth. Programming isn’t physical job and using stairs three times a month doesn’t count as a healthy workout.

Slow and short beginnings

Coming home from a busy day at work it gets hard to convince myself to go out for a run. It helps when I consider that my mind can be tired but the rest of the body didn’t get the workout it needs. On my first run I felt little embarrassed how slow my pace is and despite that fact I was still sweating. Good thing about running is when people see you sweat they are more likely to think you’re on your fifteenth kilometer rather than recognising you just left the house. In fact I only started with as little as one kilometer. Next day I only ran one again and tried to compare my time to see if I got better.

Help with motivation

To keep myself motivated I started tracking my runs using endomondo app. I aimed to do at least three runs a week and on every run I tried to beat my previous time. After building up my distance to 5K I had to get better shoes for running. Until then my pair of old sneakers served the purpose. With new more suitable running shoes, things became easier. My pace has improved and I was able to increase the distance too. As a result of my regular runs my sleep got better because I was getting to bed tired, I felt more energised at work, got better at handling stress and became more positive overall. These side effects motivated my to continue running.

All the way to the marathon

Photo: www.mo-running.com

For my first running challenge I signed up for 10K race and supported the fight against cancer by participating. Fundraising runs are always a lot of fun, you can see people in funny costumes and if you’re lucky like me, you might get to race with sausage!

After some time I wanted to step-up a challenge and committed to running a half-marathon. Training became more challenging but still enjoyable. The big day came as a reward after a couple of weeks of preparations.

Completing a half-marathon was my first success as a runner which motivated me even more. I wanted to see if I could run a marathon. The idea of running 42K appeared crazy and impossible, which was a good incentive for me to sign up. About twelve weeks of training preceded my biggest sporting achievement. As well as my physical health I exercised my mental strength when waking up early for a run and resisting burgers for late night dinner. Finishing this long race gave me an amazing feeling of (pain and) accomplishment. Since then my confidence grew and now I know that any seemingly impossible task can be done with the right approach.

It can help you too

Without running, most likely I wouldn’t have enough mental energy to work on side projects, learn new technology, wouldn’t be able to cope with stress and as a result of that I wouldn’t progress in my career. You don’t even need to run marathon to enjoy the benefits and increase your productivity - which I’ll talk about more next time.
If my story inspired you, grab a pair of sneakers and give running a go. There’s a big chance it will help you too.