DEV Community: Kaloyan Yosifov

Dealing with Floating Point Numbers in JavaScript: Lessons Learned

Kaloyan Yosifov — Fri, 17 Mar 2023 11:09:33 +0000

Dealing with Floating Point Numbers in JavaScript: Lessons Learned

I recently faced a well known issue related to floating point numbers. The experience reminded me of the importance of handling correctly monetary values in JavaScript and to not overlook details.

The problem

A user had reported that when attempting to refund an order with a specific amount, the amount entered was off by one cent. After investigating the issue, I discovered that it was caused by how JavaScript handles floating point numbers.

The IEEE 754 standard is supported by almost every computer through software or hardware. Dedicated hardware to handle floating points was added in 1985 with the Intel 8087 CPU. The standard provides a way to represent a wide range of values, including very large and very small numbers, but it can also lead to rounding errors when working with certain decimal values. Vast majority of programming languages utilize the FPU (Floating Point Unit component) instead of implementing the standard in software.

The number 19.9 was one of those floating point numbers that had this issue (there are numerous more, see title 🤣). Since cents are used in the backend and database, and not decimals, conversion from decimal to cents (integer) was required.

For an example in the BE the value is represented as 1990 and in the FE 19.9 is used for input elements and certain display features.

In this case the refund amount was multiplied by 100 to convert it to cents, the rounding issues caused the return value to be 1989.9999999999998, instead of the expected 1990.

Simple solution

To solve this issue, there were options available:

I could have used (19.9 * 100).toFixed(0)
Or round Math.round(19.9 * 100)
Or rely on a library like decimal.js or big.js

I decided to go with the second approach, as the return value had to be a number still. The first approach required to parse it from string to integer again and the third approach was a big step for a small problem.

Avoiding the issue getting to production

There were unit tests to verify the logic,however it did cover only the happy paths (1 or 2 values) with one invalid value being tested. While it was an OK test coverage it was not enough to reveal the floating point problem. So property testing.

Property testing is a testing method that generates random inputs to test if a program behaves correctly for a range of inputs. By using property testing in addition to unit tests, we can ensure that our code is robust and handles edge cases appropriately. In the case of the decimal precision issue, had we used property testing, we might have discovered the issue earlier.

Here is an example. I am using Vitest as a testing library and Fast-Check for property testing:

// essentially we are using `fc` from `fast-check`, but we have
import { test, fc } from '@fast-check/vitest';
import { it, describe, expect } from 'vitest';

function toCents(value: number) {
    return Math.round(value * 100);
}

describe('Money value', () => {
    test([fc.float({ min: 1, max: 1000000, noNaN: true })])(
        'is converted correctly to cents',
        floatValue => {
            const value = parseFloat(floatValue.toFixed(3));

            // using another approach in the test to get the correct value
            // so that we can confirm that `toCents` works correctly 
            const expectedValue = parseInt((value * 100).toFixed(0));

            expect(expectedValue).toEqual(toCents(value));
        }
    );
}

Conclusion

The lesson to be learned from this experience is that when working with money in JavaScript, it’s important to be aware of the limitations of the IEEE 754 standard and try to prevent similar issue from occurring in the future.

I hope that the post has been helpful and has given some insights on working with floating point numbers. 🙌

Your extraordinary one time secret

Kaloyan Yosifov — Fri, 27 Jan 2023 13:06:53 +0000

Your extraordinary one time secret

In this post we will go through our new project we created and open sourced at Tapro Labs. Let this post be a brief introduction of our project and elaboration on our agenda.

What is it about? (Brief introduction)

In our company we used a really interesting way of sharing secret. For starters when we wanted to share usernames or passwords, we would upload them in k8s secrets resource, then the other party would just fetch the secret through the Command Line.

For a small company of engineers that is fine, but when we have to send passwords or files to non engineers it gets tricky.

So instead, we decided to create our own custom solution for sharing secrets in our company.

Why not use an already built in open source solution?

We looked at other solutions at the time like Luzifer’s OTS and Sniptt’s OTS.
Which fit nicely into our use case, but since we considered adding more unique features and wanted to wet our feet with Rust, we decided to start from scratch.

What is OTS

Let’s start by first explaining what is one time secret sharing:

Ideally a one time secret app allows people to share private info without the server ever having knowledge of what that info is.
Encrypted secret is stored for a short period of time on the server
Server cannot know about the encryption key

Basic implementation:

User sends an encrypted secret to the server
Server returns a unique id to reference that secret
User then sends the id along with the decryption key to the recipient
Recipient queries the server with the secretId
Server responds with the encrypted secret and removes it from it’s storage system.
Recipient decrypts the secret with the decryption key

The secret is stored by default for **24 hours **or until someone views the secret.

Why are we doing it (Agenda)

To make password, confidential documents and secrets easy to share for both developers and non developers alike
To improve our skills
To open source our first project and help people who would need the additional custom solutions we built.

What makes it so special?

Let’s check the features of both mentioned packages above and compare them to our OTS.

Luzifer’s OTS:

Secrets are encrypted by the client
Server has no knowledge of the encryption/decryption key
Secret is destroyed after being viewed or after a period of time.
Multilingual

Sniptt’s OTS:

Secrets are encrypted by the client
Server has no knowledge of the encryption/decryption key
Secret is destroyed after being viewed or after a period of time.
Documentation for self hosting
Sharing secrets through the CLI
Specify time to live period

And here is what our OTS support:

Secrets are encrypted by the client
Server has no knowledge of the encryption/decryption key
Secret is destroyed after being viewed or after a period of time.
Slack app integration
File uploads (up to 40MB)

With more features on the way:

Command line integration
Specify time to live period
Self-hosting helm chart
Chrome extension

Use Cases

Most of the time we are sharing passwords or environment variables, but it didn’t took long enough for us to want to send files as well.

Usually when we interview people we get their CV. After the interview, this file must not be located anywhere in our company systems or personal computers. Most of the time we would send these files through slack, but we had to remember to delete them afterwards along with us trusting that Slack is not breaching their policy or no hacker is in their servers.
This is where the file integration comes into place. It still has the same security features as sending plain text, but it allows us to not forget to delete the file from the messaging system (Slack).

Short Demo

Here is a short demo displaying how it works in the browser:

Conclusion

We host our application at https://ots.techatom.de . While it is secure enough to use, we would recommend that you go with self-host approach. At the moment it is not documented, but we will create a helm chart ready for use in the future. You can watch for update in the repository here

Remember to keep secrets a secret 😉 and thanks for reading! 🙌

Become a Vim success story

Kaloyan Yosifov — Fri, 11 Nov 2022 13:28:41 +0000

Become a Vim success story

I’ve seen some people fall short when they try to learn Vim. They get frustrated and give up. The excuses is that they slow down or that there are too many commands to learn, and so they fallback to their “good old days”.

In this post I will give you my 2 cents on why learning Vim is a good challenge and why it would benefit you in the long run.

Here is what we are going to go through:

What is Vim
My experience
How to get started
What are the next steps

All good? Let’s start 🔥

What is Vim?

Vim is one of those scary editors that you enter by accident when you merge with git in the terminal and have a conflict. There is no close button like in our modern editors and the closest way to get out of the horror is to close your terminal or to

When we google this we might stumble to the first StackOverflow result “How to exit Vim?” with about 2.7 million views🔥.

But Vim shouldn’t be and isn’t all that scary when you start to get the feel for it. And I would like to share my experience on how I started with this beautiful editor.

My experience

I have been working with Vim for almost 3 years now and would recommend it to any developer if they want to spice up their code writing. While I am typing it feels really smooth and fast … and I really enjoy it 😅.

But it wasn’t always that smooth. Before I started to work with Vim most of my experience was to get out of it quickly and never look back.

But later on I started to feel unsatisfied when writing code and wanted to spice it up.

I am not going to lie, at the beginning it’s really hard to get used to Vim. The muscle memory of clicking shift and ctrl for selecting text will be a problem. **You must fight that urge, **it’s beneficial in the long run!

So after my unsatisfaction, I stumbled on a post for 10 finger typing and how it helps with Vim. It piqued my curiosity, so after work I spent about 15–20 minutes every day for a week with 10 fingers. At first it felt really weird, my pinky didn’t like being used for typing 😃, but I went on until I felt more comfortable.

After those 20 minutes, I would go into Vim to edit a text to get comfortable with some of the basic commands.

Next week I tried Vim at work. You bet if you think the first two days were frustrating and annoying. The times I wanted to switch back to my good old days was a lot, but I kept on pushing.

Working for two whole days with Vim, made me get comfortable with it faster and I was actually catching up to my old speed of writing.

Then after that the rest is history. The more I got to learn how Vim works and how to utilise it, the faster I got and easier it became.

I know for developers writing speed doesn’t matter that much as we read code more than we actually write. But when you have that sudden “Aha” moment and know exactly what you need to type, that moment is really satisfying while you are writing and editing.

How to get started

I would recommend starting with https://www.typingclub.com, I would even say it’s essential for practicing with 10 finger typing.

Even if you do not start using Vim, the practice will help you to write lighting fast messages to your colleagues.

TypingClub

TypingClub is a web application with challenges to test your writing skills and how fast you can type.

It is really fun and engaging, because it’s not just writing some random text, but you are also learning. The content they provide is informative and filled with facts. You are really hitting 2 birds with one stone here.

Starting with Vim

Okay now you feel convinced and are eager to start. But to satisfy your curiosity, I would like to first recommend the tutorial below for you to start with Vim. It covers the basics and will keep you entertained! 😁

Setup

Now with the basics covered 🤣 (Actual Vim tutorials are left on the bottom of the page as references).

If you are used to your IDE (like I am) you wouldn’t want to start coding on the terminal like a madman. And luckily for all of us there are Vim plugins for most of the popular IDEs on the market.

*JetBrains IDEs *— I would recommend the first-party plugin called IdeaVim. It integrates really well and it is semi configurable, which allows you to install some of the popular Vim plugins and adding custom mappings.
**VSCode - **To be honest I am not a fan of VSCode anymore, but I can recommend two of the popular choices from my colleagues. VSCodeVim or VSCode Neovim. Both seem to be pretty good, but do take these recommendations with a grain of salt.

What’s next

After you get comfortable with Vim on your IDE you might want to try out Vim on your terminal.

Personally I am in love with my IDE and couldn’t find a good setup to completely migrate to vim on the terminal.

I completely love that Vim is very configurable and can be made to look and feel to one’s personal style. What I do is when I have to change some configuration files in a remote server, I first upload my Vim configuration. With a couple of plugins (FZF, CoC Vim and some syntax plugins) I can have an editor in the remote server equivalent to VSCode. Which is awesome!

Wrap Up

Here is a recap:

Practice makes perfect. Try to find some time every day to practice your 10 finger typing.
Make sure to commit yourself to Vim to get the most benefit.
Watch a quick tutorial. 🤣
Install it in one of your commonly used IDEs.
Unleash Vim when you ssh to remote servers.

Wish you all the best when learning Vim and happy Vimming! 🔥

References

How we build and deploy updated packages with Lerna and Jenkins + K8s deployments

Kaloyan Yosifov — Fri, 15 Jul 2022 16:06:42 +0000

How we build and deploy updated packages with Lerna and Jenkins + K8s deployments

Quick intro

Our setup for our app is pretty much straight forward. We use GitHub with Jenkins and Kubernetes for deployment.

The picture above displays a standard Lerna monorepo example project we created (similar to ours), to give more insights on how everything should look like.

We have three apps:

my-first-react-app
my-second-react-app
my-third-react-app

They are a showcase on how we can build only packages that have changed.

The other two “shared” packages:

shared-components
shared-configs

They have code that is reused in the three main apps specified above. You can see more details on the repository here.

The problem we wanted to solve was that we build all our packages (4 at the moment) no matter if they have been changed or not. This wastes resources and time to deploy.

Also worth mentioning is that we use the standard packages directory structure for Lerna for our standalone applications. So “App” and “Package” in this context is interchangeable.

Lerna to the rescue

Lerna is a really awesome tool to use when we want a monorepo architecture that simplifies our workflow. As an example, let’s say we want to start the server on all of our packages, so we can go into the browser and check them out. We have three options here:

Open the same amount of terminals as we have packages and run the script on them
Create a bash script the runs the command on every package
Or use lerna run watch which does the same as the above 👆but with one single command and less bash scripting 😁

Also worth mention is that the run command accepts an argument that is referring to a script in the package.json of each app. In our case this is the start script.

Now we instead of start we can run build and build for production all of the packages. The other cool thing about the run command is that it has a nice argument that runs the command only on packages the have been changed given a commit id in the past. In our case we want to set it to the previous commit. The argument we are referring to is --since .

To get the last commit we use a handy git command git rev-parse HEAD~1 .

And to make it a one liner: lerna run build --since $(git rev-parse HEAD~1) . AWESOME 🍹

With all this in place let’s look the MAGIC.

The Magic

stage('Build updated packages') {
  env.NODE_OPTIONS = '"--max-old-space-size=768"';
  sh './node_modules/.bin/lerna run build --since "$(git rev-parse HEAD~1)" --concurrency 1'
}

That’s it, nothing more nothing less! The magic pretty much is one line if we exclude the stage function (which is the build stage in Jenkins) and setting an environment variable! With this you build only the packages that have changed from the current to the previous commit.

You can ignore the NODE_OPTIONS environment if you have a server with more than 2 GB.

You can also remove the --concurrency 1 option as for us it was useful, because we had a really small server.

Bonus

The blog post ends here, the command above is pretty much what you need to make it build only packages that have changed. But to increase the value we have bonus content! In this next section we are reviewing how we can use what we’ve learned and utilise it to build Docker Images and deploy with Kubernetes.

The things we need to do are separated in steps that are easy to follow. The first couple of steps are tedious but important preparations for us to start building Docker images and deploying to Kubernetes.

Step 1 — Getting changed packages

// get updated packages using lerna's ls command
 packagesChanged = sh(
  script: './node_modules/.bin/lerna ls --since "$(git rev-parse HEAD~1)" | xargs printf \\'%s\\\\n\\'',
  returnStdout: true
 )
 .trim()
 .split('\\n')
 // remove everything before /
 // so that we get the folder name only and not the full path
 .collect{ value -> value.replaceFirst(/@tapro-labs\\//, '') }
 // skip names that are empty
 .findAll{ value -> value != '' && value != null && value != ' ' }

Let’s split the code above piece by piece to understand what is happening.

./node_modules/.bin/lerna ls --since "$(git rev-parse HEAD~1)" | xargs printf \\'%s\\\\n\\'

Output example is:
[@tapro](http://twitter.com/tapro)-labs/package1
[@tapro](http://twitter.com/tapro)-labs/package2

The ls command is similar to run , but instead of running a script in the package.json of an updated package, it returns a list of updated packages.

.split('\\n')

Since the output is just a glob of string returned we split the string into list containing the package names only.

.collect{ value -> value.replaceFirst(/@tapro-labs\\//, ‘’) }

We loop through the list and remove the prefix @tapro-labs . This is just handy so we do not repeat ourselves later when building the Docker images.

.findAll{ value -> value != ‘’ && value != null && value != ‘ ‘ }

We filter out values that are empty or null

Step 2 — Defining our deployments and Docker images

// we use deployment name if our deployment names in Kubernetes do not match in our repository
// Sometimes these names do not match
def deployments = [
  "my-first-react-app": [
    deploymentName: "first-react-app",
    dockerImageName: "tapro-labs/first-react-app",
  ],
  "my-second-react-app": [
    deploymentName: "second-react-app",
    dockerImageName: "tapro-labs/second-react-app",
  ],
  "my-third-react-app": [
    deploymentName: "third-react-app",
    dockerImageName: "tapro-labs/third-react-app",
  ]
]

Since our app names do not match the ones we have as docker images and deployments in k8s, we create a deployments variable where we map based on the apps we have on our repo to the deployments and docker images.

Of course if your app names match you wouldn’t require this map variable.

Step 3 — Building Docker images

def dockerRegistry = env.PRIVATE_DOCKER_REGISTRY
def dockerImagePrefix = env.DOCKER_IMAGE_PREFIX

packagesChanged.each { packageName ->
    stage("Building docker image for ${packageName}") {
      def dockerImageName = deployments.get(packageName).get('dockerImageName');
      sh "docker build -t ${dockerImagePrefix}/${dockerImageName}:${environment} -f ./packages/${packageName}/Dockerfile"
    }
}

Here we loop through the changed packages, fetch the docker image name from our mapping in deployments variable and build the image of each updated app.

Step 4 — Pushing the images to a registry

stage("Push docker image") {
    docker.withRegistry(dockerRegistry) {
        packagesChanged.each { packageName ->
            def app = docker.image(dockerImagePrefix + "/" + deployments.get(packageName).get('dockerImageName') + ":" + environment)

// we push the image with two tags
            // one for the production or staging tag
            // the other one is a tag with the current docker build
            app.push(environment) // @tapro-labs/frontend:production
            app.push(env.BUILD_TAG) // @tapro-labs/frontend:job-132
        }
    }
}

Here we just push the docker images to our registry. You can see that the images are tagged with two different labels.

First tag is the environment production or staging . Making it the new image for one of those environments.
The second tag is the Jenkins build number, so that we can reference on which build the docker image has been built. This allows us to revert to previous builds on the server if the current one is broken. And also helps us when deploying to k8s

Step 5 — Deploying to kubernetes

stage('Deploy to cluster') {
    def kubernetesServerUrl = env.KUBERNETES_SERVER_URL
    def deploymentNamespace = env.DEPLOYMENT_NAMESPACE

    withKubeConfig([credentialsId: 'monorepo-example-kubernetes-service-account', serverUrl: kubernetesServerUrl]) {
      packagesChanged.each { packageName ->
        def deployment = deployments.get(packageName)
        def deploymentName = deployment.get("deploymentName")
        def deploymentDockerImageName = deployment.get("dockerImageName")

        sh "kubectl set image deployment/tapro-labs-${deploymentName} -n ${deploymentNamespace} ${deploymentName}=${dockerImagePrefix}/${deploymentDockerImageName}:${env.BUILD_TAG}"
      }
    }
}

After all the docker stuff, we initiate our deployment to Kubernetes!

We construct the deployment name and docker images variables to pass into the Kubernetes command and after all that we start our deployment:

${deploymentName}=${dockerImagePrefix}/${deploymentDockerImageName}:${env.BUILD_TAG}"

You can see we do not use the production tagged image, but the build number version.

We do this because the initial deployment already has a docker image with the same name and same tag @tapro-labs/frontend:production, so us setting it to the same name will not make k8s restart the deployment and will do nothing. Therefore we use the unique tag @tapro-labs/frontend:job-132 and k8s detects that and upgrades the deployment’s pods to the new docker image.

What we did

We got ourselves to a point where we build only one app instead of every app in the Monorepo
Building images for updated apps only
Deploy those apps to Kubernetes

And that concludes our tutorial on setting up a build on updated packages and deploying them. With this improvement our build times take less time and we do not push unnecessary docker images to the registry.

Let us know if this post was helpful and enjoyable by clicking on the like button!

Cheers 🍻

A quick tip!!!

Kaloyan Yosifov — Wed, 10 Mar 2021 19:18:14 +0000

Hello everybody 👋

I am reallllllllly tired of writing the same code on every component when making a request. I want to make things simple and my guess is that you want too. Check out my examples to see my tips on such things 😃.

Currently, when we want to get something from an API, we write the code below ... at least I did 😃

<template>
  <div class="section-orders">
    <ul v-if="!loading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="loading">Loading...</span>

    <span v-if="errorMessage">{{ errorMessage }}</span>
  </div>
</template>

<script>
/**
 * External dependencies.
 */
import axios from 'axios';
import { ref } from '@vue/composition-api';

export default {
  name: 'OrdersSection',

  setup() {
    const errorMessage = ref('');
    const loading = ref(false);
    const orders = ref([]);
    const fetchOrders = async () => {
      if (loading.value) {
        return;
      }

      errorMessage.value = '';

      try {
        loading.value = true;
        const response = await axios.get('/orders');
        orders.value = response.data;
      } catch (error) {
        errorMessage.value = 'An error has ocurred!';
      } finally {
        loading.value = false;
      }
    };
    fetchOrders();

    return {
      orders,
      loading,
      errorMessage,
    };
  },
};
</script>

This is ok if we are only going to use it on one component. But if we want to retrieve the orders in a different component, we can either copy the code above or create a composition function to extract the logic for it.

It can look something like this.

<template>
  <div class="section-orders">
    <ul v-if="!loading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="loading">Loading...</span>

    <span v-if="errorMessage">{{ errorMessage }}</span>
  </div>
</template>

<script>
/**
 * Internal dependencies.
 */
import useOrders from '@/components/bank-form/use-orders';

export default {
  name: 'OrdersSection',

  setup() {
    const { loading, errorMessage, orders } = useOrders();

    return {
      orders,
      loading,
      errorMessage,
    };
  },
};
</script>

and the useOrders composition function:

/**
 * External dependencies.
 */
import axios from 'axios';
import { ref } from '@vue/composition-api';

export default function useOrders() {
    const errorMessage = ref('');
    const loading = ref(false);
    const orders = ref([]);
    const fetchOrders = async () => {
        if (loading.value) {
            return;
        }

        errorMessage.value = '';

        try {
            loading.value = true;
            const response = await axios.get('/orders');
            orders.value = response.data;
        } catch (error) {
            errorMessage.value = 'An error has ocurred!';
        } finally {
            loading.value = false;
        }
    };
    fetchOrders();

    return {
        orders,
        loading,
        errorMessage,
    };
}

Great!!!!!

But after some time you need to do the same logic for another request and it becomes tedious to write the same, "loading, errorMessage and data" state.

This is so much easy with @cytools/vue-query.

Here is an example


<template>
  <div class="section-orders">
    <ul v-if="!isLoading && orders.length" class="orders">
      <li v-for="order in orders" :key="order.id">{{ order.name }}</li>
    </ul>

    <span v-if="isLoading">Loading...</span>

    <span v-if="error">{{ error }}</span>
  </div>
</template>

<script>
/**
 * Internal dependencies.
 */
import axios from 'axios';
import { useQuery } from '@cytools/vue-query';

export default {
  name: 'OrdersSection',

  setup() {
    const { isLoading, error, data: orders } = useQuery(
        'orders',
        async () => {
          return (await axios.get('/orders')).data;
        },
        {
          defaultData: [],
        },
    );

    return {
      orders,
      isLoading,
      error,
    };
  },
};
</script>

We've done everything with less code and get free caching of the data based on the key.

Here is a link to the library for more details -- https://github.com/cytools/vue-query

There is a lot more fun than just the example above.

How to build Vue composition apps.

Kaloyan Yosifov — Wed, 03 Mar 2021 17:58:04 +0000

Hey everybody!!!

Last month I was working on a new project at my work and was using the Vue composition API. I had about 6-7 months of experience on the new composition API of Vue and was ready to tackle it.

As I was writing the new requirements, a colleague came by and looked at how I was writing code for retrieving data from the server. On 3 or more components I had used the same features like loading, error handling, and handling data. I give it another thought and started creating a new composition function, to encapsulate the logic of fetching data from an API.

He stopped me and showed me how the React community is doing it with React Query.

I was pretty pumped up and wanted to use it on my Vue project, but with no luck. Because there is no such thing for Vue. I was like WHAT!?!??!

Then I started working on Vue Query. It has the same concepts as React Query, but it is written with support for both Vue 3 and the composition API library.

Currently, the features that are integrated are:

Key Caching
Pagination Support
Mutating Cache State
and more.

Check out the video below, to see a quick tutorial on how everything is working. And most importantly give us your feedback on what we should improve or if you like the idea for Vue support.

Vue Query Tutorial Video!!!!!
Vue Query
Vue Query Examples
Vue Query Example site

Mentoring - the dream of a lifetime

Kaloyan Yosifov — Tue, 17 Sep 2019 18:59:19 +0000

Well, gotcha with that little title haven't I? It is a dream it was a dream!

Enough of the utter nonsense I've written let's start on the real part.

I started my programming journey when I was 15 years old. Got interested at school and started to write my own programs and games. Two years later did web development at home improving my skills and eventually did my first paid website (which was a complete mess). Soon after the little job I had stopped programming for 6 months and started working as a cashier in a gym in the summer so I can make a quick buck for school. Great! I got the money, last year at school came and I didn't know what I was going to do with my life. Yes, I did programming, but I never viewed is a job opportunity rather as a hobby. While still in school, I thought I would give a programming job a try and applied for only one interview. They contacted me and gave me some tasks and PSD(HTML and JS) on mail. I was shocked at first and tried to google how to do HTML(i was making PHP websites, but at styling, I was not that proficient) and found a tool on making a site from PSD(this is how I thought site were made). Confident in my converter tool I put my files into my USB stick and went on the interview. It was quite embarrassing as I wasn't aware that I went with a death trap in my pocket. As I was giving the USB stick to my interviewer I told him what I've done and then they immediately said I wouldn't cut it. I was kinda sad and thought that I wouldn't become a good programmer so I quit searching.

The mentoring dream process

Eventually, I graduated and got myself a job as a waiter. I was really into it like I tried to learn how to get and serve plates faster etc. But I was thinking to myself is this really where I want to be. After six months I couldn't stand it anymore as I started to not like my job. I was doing it to make the buck and get home. Soon I started to look for other jobs at other areas and thought on applying for the last programming job I tried as they were still searching for candidates, but this time with PHP. At first, I was scared, that I shouldn't bother even applying, but with the help of self-development and my parents, I tried it. (There was a lesson I learned that I should and you should try to remember! You should keep trying no matter the cost. And never accept "NO" as an answer.).

Three days later I got a phone call from the interviewer and was very excited. They tested my skills and hired me. I was very excited to start the job then and I am still excited working at HTMLBurger. Here is where my career as a developer started. All the past programming experience was to build the base structure and here is where I started on grinding and developing it.

After I got the job they assigned me a mentor. I was pretty excited as I was going to learn new stuff and I did. That is when I started to dream to become a mentor! I was making great progress at my projects: meeting deadlines, gaining experience and most importantly building trust with my Manager, Mentor, and colleagues.

Two years in my workplace and I've learned a lot. Started making projects with (Laravel, Vue, React and AWS) and these projects let me think more outside of the box and learn Linux and Shell. And it helped me a lot.

Three weeks ago, the main Mentor at work quitted their job and it meant that the spot is clear. But I wasn't inclined at first, over they two years I stopped dreaming big about being a mentor.

Soon I was offered the job and was like "no,no,no i am not ready". Then I had a talk with my Mentor and my Manager, which I think of as close friends, and got me motivated to fulfill my dream and thereafter I was READY.

Next day went to mentor a mentee left from our Main mentor and at first, it was kind of an awkward experience:

At first, the socializing was awkward :D
Then I tried to tell him not to do rather than advising him why and what is considered better.

But a week into it I got the hanging of it and as I am teaching, I reinforce my knowledge and heck of it even learn something from the mentee.

And now I am going to say what I've learned from the past three weeks. Never stop learning, if you have the chance to start mentoring (or even help people online with StackOverflow, or help a colleague).

Thank you for all the readers which reached to this point, this is my first like Post like ever and I am really glad I got this off my chest.

So stay humble and strive to learn and DREAM BIG