<a href="http://www.youtube.com/watch?v=gDWoQwyI4Vk"><img src="http://img.youtube.com/vi/gDWoQwyI4Vk/0.jpg" alt="How to add MENTIONS to React.js Text Input Component (w/ Draft.js)"></a>
Almost all modern React applications with chatting features have the mentions functionality built in. You type @-character and as you continue to type the person's name you want to mention, you see a list of suggestions narrowing down and you can choose the right person.
This is a feature that has become a norm in all chat applications. Nowadays, if you create a chat application and deploy it to production, you should have mentions functionality built in it. If you don't, I bet that sooner than later you will start to get messages like "Why don't I see my friend's name when I type @ and her name?" or something of that sorts. That is because in people's minds, it is a feature that is required in a chat application. It is non negotiable.
But when I was trying to implement this kind of functionality to my own application for the first time, it was very hard to find any tutorials or guides on how one can actually implement it. Which was pretty surprising since it is so common functionality and feature.
I might just be bad at researching or there actually is very few tutorials about it. Nevertheless, since I now know how it can be done, I decided to create a video, where I teach step by step how you can use <a href="/blog/react-for-beginners-complete-guide-to-mastering-react-fundamentals/">React</a>, <a href="/blog/getting-started-with-draft-js/">Draft.js</a> and <a href="/blog/introduction-to-draft-js-plugins/">Draft.js plugins</a> to create text input component that has a mentions functionality. I hope this video will save you some of the trouble I went through when I was figuring this out.
You can see the video <a href="https://www.youtube.com/watch?v=gDWoQwyI4Vk">here</a>.


[![How to add MENTIONS to React.js Text Input Component (w/ Draft.js)](http://img.youtube.com/vi/gDWoQwyI4Vk/0.jpg)](http://www.youtube.com/watch?v=gDWoQwyI4Vk)

Almost all modern React applications with chatting features have the mentions functionality built in. You type @-character and as you continue to type the person's name you want to mention, you see a list of suggestions narrowing down and you can choose the right person.

This is a feature that has become a norm in all chat applications. Nowadays, if you create a chat application and deploy it to production, you should have mentions functionality built in it. If you don't, I bet that sooner than later you will start to get messages like "Why don't I see my friend's name when I type @ and her name?" or something of that sorts. That is because in people's minds, it is a feature that is required in a chat application. It is non negotiable.

But when I was trying to implement this kind of functionality to my own application for the first time, it was very hard to find any tutorials or guides on how one can actually implement it. Which was pretty surprising since it is so common functionality and feature.

I might just be bad at researching or there actually is very few tutorials about it. Nevertheless, since I now know how it can be done, I decided to create a video, where I teach step by step how you can use [React](/blog/react-for-beginners-complete-guide-to-mastering-react-fundamentals/), [Draft.js](/blog/getting-started-with-draft-js/) and [Draft.js plugins](/blog/introduction-to-draft-js-plugins/) to create text input component that has a mentions functionality. I hope this video will save you some of the trouble I went through when I was figuring this out.

You can see the video [here](https://www.youtube.com/watch?v=gDWoQwyI4Vk).


I teach step by step how you can use React, Draft.js and Draft.js plugins to create text input component that has a mentions functionality.

React Mentions - How to Add Mentions to React Component

<a href="http://www.youtube.com/watch?v=WotbsEIjqrs"><img src="http://img.youtube.com/vi/WotbsEIjqrs/0.jpg" alt="If you use GIT and VS Code... WATCH THIS!"></a>
I am, like many other developers nowadays, using Git and VS Code as my version control and code editor. Couple of weeks ago I wrote about the <a href="/blog/best-extensions-for-vs-code-in-2020/">Best extensions for VS Code in 2020</a>.
In that post I mentioned GitLens as one of my favourite plugins. This was mostly because I use Git and I need to see Git commit history and changes for a given file and VS Code itself doesn't offer a good tool for that. Well not until March 2020 update.
<h2>Introducing Timeline</h2>
In the <a href="https://code.visualstudio.com/updates/v1_44#_timeline-view">March 2020 update</a> Timeline view was out of preview and enabled by default. Timeline view is a unified view for visualising time-series events (for example, Git commits, file saves, test runs, etc.) for a file.
So basically you can select different sources for the timeline and if you for example select Git as a source, you get nice view of Git commit history for a file. You can also view the commits and see a diff view for the file.
Here is a quote from the release notes: In this release, the built-in Git extension contributes a timeline source that provides the Git commit history of the specified file. Selecting a commit will open a diff view of the changes introduced by that commit. A context menu provides commands to Copy Commit ID and Copy Commit Message. There is also a new Open Timeline command on the File Explorer's context menu, to quickly show the timeline for the selected file.
<img src="./images/vscode-timeline.gif" alt="Timeline view in VS Code">
I have been using the timeline view quite a lot for the past few weeks and personally I think it's a great and very needed addition to VS Code. What do you think?


[![If you use GIT and VS Code... WATCH THIS!](http://img.youtube.com/vi/WotbsEIjqrs/0.jpg)](http://www.youtube.com/watch?v=WotbsEIjqrs)

I am, like many other developers nowadays, using Git and VS Code as my version control and code editor. Couple of weeks ago I wrote about the [Best extensions for VS Code in 2020](/blog/best-extensions-for-vs-code-in-2020/).

In that post I mentioned GitLens as one of my favourite plugins. This was mostly because I use Git and I need to see Git commit history and changes for a given file and VS Code itself doesn't offer a good tool for that. Well not until March 2020 update.

## Introducing Timeline

In the [March 2020 update](https://code.visualstudio.com/updates/v1_44#_timeline-view) _Timeline view_ was out of preview and enabled by default. Timeline view is a unified view for visualising time-series events (for example, Git commits, file saves, test runs, etc.) for a file.

So basically you can select different sources for the timeline and if you for example select Git as a source, you get nice view of Git commit history for a file. You can also view the commits and see a diff view for the file.

Here is a quote from the release notes: _In this release, the built-in Git extension contributes a timeline source that provides the Git commit history of the specified file. Selecting a commit will open a diff view of the changes introduced by that commit. A context menu provides commands to **Copy Commit ID** and **Copy Commit Message**. There is also a new **Open Timeline** command on the File Explorer's context menu, to quickly show the timeline for the selected file._

![Timeline view in VS Code](/blog-posts/if-you-use-git-and-vs-code-read-this/images/vscode-timeline.gif)

I have been using the timeline view quite a lot for the past few weeks and personally I think it's a great and very needed addition to VS Code. What do you think?


If you are using Git as your version control and VS Code as your code editor, you will love this new VS Code feature! The feature is...

If you use Git and VS Code - Read This!

One of the most difficult things in programming is coming up with variable names. If the situation is even a bit more complex, I always end up either coming up with bad non-describing name or just taking way too much time thinking of the name.
Variable naming is hard. But one thing that is maybe even harder is thinking of dummy data I can input and test my application with. Lorem ipsum can only do so much. When I need to create for example dummy users, it is just difficult to make up a user name or email, not to mention other info that a user might have, say for example an address.
I have a feeling that I am not alone with this. That is why I wrote this post. Because to be honest I no longer have this issue, thanks to Faker.js.
<h2>Faker.js</h2>
<a href="https://github.com/marak/Faker.js/">Faker.js</a> is a fake data generator for JavaScript. We can use it to generate massive amounts of fake data in the browser and node.js. They have a long list of properties we can generate and I won't list all of them here (you can check it out <a href="https://github.com/marak/Faker.js/#api-methods">here</a>) but to mention few, you can e.g. generate user names, avatars, emails, location, address, etc.
Usage and the API is very easy and straight forward to use. If we want to use Faker.js in the browser and generate a user name and email, we can do it as follows.
<pre><code class="language-html">&#x3C;script src="faker.js" type="text/javascript">&#x3C;/script>
&#x3C;script>
 var randomName = faker.name.findName(); // Caitlyn Kerluke
 var randomEmail = faker.internet.email(); // Rusty@arne.info
&#x3C;/script>
</code></pre>
So first we include faker.js file and then generate the name using <code>faker.</code> and the respective method name (you can find all the available methods from the <a href="https://github.com/marak/Faker.js/#api-methods">documentation</a>).
If we want to test Faker.js out, they have a demo site where we can poke around and get a better understanding of all the kind of data we can generate with it. The demo site is found <a href="https://rawgit.com/Marak/faker.js/master/examples/browser/index.html">here</a>.
I hope you found this post helpful and learned something new. I have a <a href="https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw">YouTube channel</a> where I consistently upload more videos and tutorials about web development. Go ahead and <a href="https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw?sub_confirmation=1">subscribe</a> to the channel to get posted on all the new uploads!

One of the most difficult things in programming is coming up with variable names. If the situation is even a bit more complex, I always end up either coming up with bad non-describing name or just taking way too much time thinking of the name.

Variable naming is hard. But one thing that is maybe even harder is thinking of dummy data I can input and test my application with. Lorem ipsum can only do so much. When I need to create for example dummy users, it is just difficult to make up a user name or email, not to mention other info that a user might have, say for example an address.

I have a feeling that I am not alone with this. That is why I wrote this post. Because to be honest I no longer have this issue, thanks to Faker.js.

## Faker.js

[Faker.js](https://github.com/marak/Faker.js/) is a fake data generator for JavaScript. We can use it to generate massive amounts of fake data in the browser and node.js. They have a long list of properties we can generate and I won't list all of them here (you can check it out [here](https://github.com/marak/Faker.js/#api-methods)) but to mention few, you can e.g. generate user names, avatars, emails, location, address, etc.

Usage and the API is very easy and straight forward to use. If we want to use Faker.js in the browser and generate a user name and email, we can do it as follows.

```html
<script src="faker.js" type="text/javascript"></script>
<script>
 var randomName = faker.name.findName(); // Caitlyn Kerluke
 var randomEmail = faker.internet.email(); // Rusty@arne.info
</script>
```

So first we include faker.js file and then generate the name using `faker.` and the respective method name (you can find all the available methods from the [documentation](https://github.com/marak/Faker.js/#api-methods)).

If we want to test Faker.js out, they have a demo site where we can poke around and get a better understanding of all the kind of data we can generate with it. The demo site is found [here](https://rawgit.com/Marak/faker.js/master/examples/browser/index.html).

I hope you found this post helpful and learned something new. I have a [YouTube channel](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw) where I consistently upload more videos and tutorials about web development. Go ahead and [subscribe](https://www.youtube.com/channel/UC34UXFLKqdW3cpk5CBu2Siw?sub_confirmation=1) to the channel to get posted on all the new uploads!

This is very common developer problem. But the funny thing is that developers don't even realise this being a problem and thus are not looking for solution!