In Javascript projects it is important to keep your dependencies up to date. Updating dependencies should be done regularly so you don't end up in a situation where you have all your packages several major versions old. So what is the best way to update javascript dependencies? I like to use <code>yarn updgrade-interactive</code>.
<h2>Update Javascript dependencies with yarn upgrade-interactive</h2>
<a href="https://yarnpkg.com/">Yarn</a> provides a handy command for updating your packages – <code>yarn upgarde-interactive</code>. It prints all the outdated packages and lets you choose which ones to update. It will respect the version ranges set in your package.json file.
<img src="./images/yarn-upgrade-interactive-1024x477.png" alt="yarn upgrade-interactive output">
Running <code>yarn upgrade-interactive</code> does not update your package.json file with the new version number. This is quite logical if you think about it. Since it will respect the version ranges in the package.json file, there is no need to update the version to package.json. Because if <code>yarn install</code> is ran for a fresh install, the newest package for that version range is installed = same version that <code>yarn upgrade-interactive</code> installs.
<h2>Using --latest flag</h2>
If you wish to install the latest version that is found from the npm registry, you can achieve this by using <code>--latest</code> flag with <code>yarn upgrade-interactive</code>. It will make yarn ignore the version ranges in package.json file and install the latest version of given package. This will also update package.json file with information of the new versions of the updated packages.


In Javascript projects it is important to keep your dependencies up to date. Updating dependencies should be done regularly so you don't end up in a situation where you have all your packages several major versions old. So what is the best way to update javascript dependencies? I like to use `yarn updgrade-interactive`.

## Update Javascript dependencies with yarn upgrade-interactive

[Yarn](https://yarnpkg.com/) provides a handy command for updating your packages – `yarn upgarde-interactive`. It prints all the outdated packages and lets you choose which ones to update. It will respect the version ranges set in your package.json file.

![yarn upgrade-interactive output](/blog-posts/best-way-to-update-javascript-dependencies/images/yarn-upgrade-interactive-1024x477.png)

Running `yarn upgrade-interactive` does not update your package.json file with the new version number. This is quite logical if you think about it. Since it will respect the version ranges in the package.json file, there is no need to update the version to package.json. Because if `yarn install` is ran for a fresh install, the newest package for that version range is installed = same version that `yarn upgrade-interactive` installs.

## Using --latest flag

If you wish to install the latest version that is found from the npm registry, you can achieve this by using `--latest` flag with `yarn upgrade-interactive`. It will make yarn ignore the version ranges in package.json file and install the latest version of given package. This will also update package.json file with information of the new versions of the updated packages.


How to update javascript dependencies in package.json? The easiest way to do it is...

Best way to update Javascript dependencies

I attended GraphQL Finland which was held little over a week ago (Thursday &#x26; Friday 18-19.10.2018) in Helsinki at Paasitorni. The first day was for workshops and the second day for the actual conference. So the structure was similar for <a href="/blog/react-finland-2018/">React Finland</a> with the difference that React Finland had two days of talks instead of one.
At Thursday, which was the workshop day, I participated <a href="https://www.freiksenet.com/">Mikhail Novikov</a>'s "Building a GraphQL API with node.js" workshop. It was very beginner friendly, which was nice because I am quite a noob when it comes to GraphQL. It was a whole day workshop lasting 7-8 hours. After the workshop I felt that I understood the basics of GraphQL pretty well and I was pumped with motivation for the actual conference day of GraphQL Finland.
<img src="./images/IMG_9618-copy-e1540891544595-300x265.jpg" alt="GraphQL Finland 2018 - Building a GraphQL API with node.js workshop">
There was also a little informal get together at Thursday evening. It was great to see that many people who came to Helsinki on Thursday, either for workshops or just for the conference, decided to get together for some food and drinks at Thursday evening. We had interesting conversations and it was great to meet some GraphQL people before the actual conference.
<img src="./images/graphql-finland-opening-tweet.png" alt="Time to begin the conference!">
Friday was full of talks and quite a few interesting ones. I think the talks were good mix of more advanced stuff and then again something for more of beginners like me. I had few "ahaa" moments and really enjoyed listening the talks and taking it all in.
Overall the conference gave me a good picture of what GraphQL is about and ideas on where and how to use it. I also got a lot of motivation and met great people during the conference, which is always nice!


I attended GraphQL Finland which was held little over a week ago (Thursday & Friday 18-19.10.2018) in Helsinki at Paasitorni. The first day was for workshops and the second day for the actual conference. So the structure was similar for [React Finland](/blog/react-finland-2018/) with the difference that React Finland had two days of talks instead of one.

At Thursday, which was the workshop day, I participated [Mikhail Novikov](https://www.freiksenet.com/)'s "Building a GraphQL API with node.js" workshop. It was very beginner friendly, which was nice because I am quite a noob when it comes to GraphQL. It was a whole day workshop lasting 7-8 hours. After the workshop I felt that I understood the basics of GraphQL pretty well and I was pumped with motivation for the actual conference day of GraphQL Finland.

![GraphQL Finland 2018 - Building a GraphQL API with node.js workshop](/blog-posts/graphql-finland-2018/images/IMG_9618-copy-e1540891544595-300x265.jpg)

There was also a little informal get together at Thursday evening. It was great to see that many people who came to Helsinki on Thursday, either for workshops or just for the conference, decided to get together for some food and drinks at Thursday evening. We had interesting conversations and it was great to meet some GraphQL people before the actual conference.

![Time to begin the conference!](/blog-posts/graphql-finland-2018/images/graphql-finland-opening-tweet.png)

Friday was full of talks and quite a few interesting ones. I think the talks were good mix of more advanced stuff and then again something for more of beginners like me. I had few "ahaa" moments and really enjoyed listening the talks and taking it all in.

Overall the conference gave me a good picture of what GraphQL is about and ideas on where and how to use it. I also got a lot of motivation and met great people during the conference, which is always nice!


GraphQL Finland which was held little over a week ago (Thursday & Friday 18-19.10.2018) in Helsinki at Paasitorni. I think the workshops and talks were...

GraphQL Finland 2018

When looking through Draft.js docs there is much talk about how you can modify the editor's state in many different ways. Draft.js also provides us with <code>convertToRaw</code> function that we can use to convert the state to plain JSON. But there is little information on how to actually display Draft.js content. Do you need to implement some custom parsing for the state JSON? Or is there some existing library or way to take the state JSON and display it nicely?
I just published a class where I teach more about Draft.js. Best part is that you can get it for free! <a href="/blog/rich-text-editing-in-react-with-draft-js-course/">Read more</a>.
This is what the <a href="https://draftjs.org/docs/api-reference-data-conversion">docs</a> say about displaying the content: "Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. We instead provide JavaScript objects that can be converted to other formats as needed."
So Draft.js provides utility functions for converting the state to raw JS (<code>convertToRaw</code>) and raw JS to ContentState object (<code>convertFromRaw</code>) but not to markdown or markup. This has led to birth of separate markdown/markup converting libraries. I wrote a post on how to use one of these libraries to <a href="/blog/how-to-display-draft-js-content-as-html/">display Draft.js content as HTML</a>.
<h2>Using the Draft editor for display</h2>
Converting the state JSON to a markdown/markup is not however the only way to display your state. Another way is to initialise a Draft.js editor with the saved state JSON and put the editor into <code>readOnly</code> mode. This way the editor component will handle all the styling and there will less likely be bugs or inconsistencies in the styling of the contents than there would be when using external converting libraries because the converting is done by Draft.js itself. Here is an example on how to do that.
For the purposes of this example we are going to load the stored state from a JSON file. Our <code>storedState.json</code> file looks like this:
<pre><code class="language-json">{
 "blocks": [
 {
 "key": "8i090",
 "text": "Hello CodePulse!",
 "type": "unstyled",
 "depth": 0,
 "inlineStyleRanges": [
 {
 "offset": 0,
 "length": 16,
 "style": "BOLD"
 }
 ],
 "entityRanges": [],
 "data": {}
 },
 {
 "key": "42ncd",
 "text": "This text should be underlined.",
 "type": "unstyled",
 "depth": 0,
 "inlineStyleRanges": [
 {
 "offset": 0,
 "length": 31,
 "style": "UNDERLINE"
 }
 ],
 "entityRanges": [],
 "data": {}
 },
 {
 "key": "327r6",
 "text": "And this text should be italic.",
 "type": "unstyled",
 "depth": 0,
 "inlineStyleRanges": [
 {
 "offset": 0,
 "length": 31,
 "style": "ITALIC"
 }
 ],
 "entityRanges": [],
 "data": {}
 }
 ],
 "entityMap": {}
}
</code></pre>
Here is the actual component that we use to display the stored state:
<pre><code class="language-jsx">import React from "react";
import ReactDOM from "react-dom";
import { Editor, EditorState, convertFromRaw } from "draft-js";
import storedState from "./storedState.json";

class App extends React.Component {
 render() {
 const contentState = convertFromRaw(storedState);
 const editorState = EditorState.createWithContent(contentState);
 return (
 &#x3C;div className="App">
 &#x3C;Editor editorState={editorState} readOnly={true} />
 &#x3C;/div>
 );
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(&#x3C;App />, rootElement);
</code></pre>
On the lines 3 and 4 we import everything related to Draft.js and also the stored state (again, we import the state from a file to keep this example simple).
In the render method we create a <code>contentState</code> object by passing the JS object for the state as a parameter for <code>convertFromRaw</code> method (line 8). Once we have the <code>contentState</code> object we create an <code>editorState</code> object out of it with <code>EditorState.createWithContent</code> (line 9).
Finally we render our <code>Editor</code> component with the <code>editorState</code> we just created (line 12). We also set <code>readOnly={true}</code> for the editor component so it is displayed nicely and the content cannot be modified.
<img src="./images/Screenshot-2018-11-13-at-15.31.56.png" alt="Draft.js editor displaying content in readOnly mode">
You can find a codesandbox for this example <a href="https://codesandbox.io/s/72z9l42l1">here</a>.
<h2>Conclusion</h2>
As we saw using the Draft editor component with readOnly set to true, it is quite simple to display Draft.js content. You don't necessarily need to convert the state to e.g. HTML or markdown in order to display it. I must add though that I am not sure if this is the most optimal way of displaying Draft.js content. What I can say is that I have used this approach in projects that are in production and it has worked well for me.
If you have an idea of another approach or have used a different solution for displaying Draft.js content, please leave a comment below! I would like to hear from you! And of course if you have any questions or thoughts be sure to comment them below too!

When looking through Draft.js docs there is much talk about how you can modify the editor's state in many different ways. Draft.js also provides us with `convertToRaw` function that we can use to convert the state to plain JSON. But there is little information on how to actually display Draft.js content. Do you need to implement some custom parsing for the state JSON? Or is there some existing library or way to take the state JSON and display it nicely?

_I just published a class where I teach more about Draft.js. Best part is that you can get it for free! [Read more](/blog/rich-text-editing-in-react-with-draft-js-course/)._

This is what the [docs](https://draftjs.org/docs/api-reference-data-conversion) say about displaying the content: "_Note that the Draft library does not currently provide utilities to convert to and from markdown or markup, since different clients may have different requirements for these formats. We instead provide JavaScript objects that can be converted to other formats as needed._"

So Draft.js provides utility functions for converting the state to raw JS (`convertToRaw`) and raw JS to ContentState object (`convertFromRaw`) but not to markdown or markup. This has led to birth of separate markdown/markup converting libraries. I wrote a post on how to use one of these libraries to [display Draft.js content as HTML](/blog/how-to-display-draft-js-content-as-html/).

## Using the Draft editor for display

Converting the state JSON to a markdown/markup is not however the only way to display your state. Another way is to initialise a Draft.js editor with the saved state JSON and put the editor into `readOnly` mode. This way the editor component will handle all the styling and there will less likely be bugs or inconsistencies in the styling of the contents than there would be when using external converting libraries because the converting is done by Draft.js itself. Here is an example on how to do that.

For the purposes of this example we are going to load the stored state from a JSON file. Our `storedState.json` file looks like this:

```json
{
 "blocks": [
 {
 "key": "8i090",
 "text": "Hello CodePulse!",
 "type": "unstyled",
 "depth": 0,
 "inlineStyleRanges": [
 {
 "offset": 0,
 "length": 16,
 "style": "BOLD"
 }
 ],
 "entityRanges": [],
 "data": {}
 },
 {
 "key": "42ncd",
 "text": "This text should be underlined.",
 "type": "unstyled",
 "depth": 0,
 "inlineStyleRanges": [
 {
 "offset": 0,
 "length": 31,
 "style": "UNDERLINE"
 }
 ],
 "entityRanges": [],
 "data": {}
 },
 {
 "key": "327r6",
 "text": "And this text should be italic.",
 "type": "unstyled",
 "depth": 0,
 "inlineStyleRanges": [
 {
 "offset": 0,
 "length": 31,
 "style": "ITALIC"
 }
 ],
 "entityRanges": [],
 "data": {}
 }
 ],
 "entityMap": {}
}
```

Here is the actual component that we use to display the stored state:

```jsx
import React from "react";
import ReactDOM from "react-dom";
import { Editor, EditorState, convertFromRaw } from "draft-js";
import storedState from "./storedState.json";

class App extends React.Component {
 render() {
 const contentState = convertFromRaw(storedState);
 const editorState = EditorState.createWithContent(contentState);
 return (
 <div className="App">
 <Editor editorState={editorState} readOnly={true} />
 </div>
 );
 }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
```

On the lines 3 and 4 we import everything related to Draft.js and also the stored state (again, we import the state from a file to keep this example simple).

In the render method we create a `contentState` object by passing the JS object for the state as a parameter for `convertFromRaw` method (line 8). Once we have the `contentState` object we create an `editorState` object out of it with `EditorState.createWithContent` (line 9).

Finally we render our `Editor` component with the `editorState` we just created (line 12). We also set `readOnly={true}` for the editor component so it is displayed nicely and the content cannot be modified.

![Draft.js editor displaying content in readOnly mode](/blog-posts/simple-easy-way-display-draft-js-content/images/Screenshot-2018-11-13-at-15.31.56.png)

You can find a codesandbox for this example [here](https://codesandbox.io/s/72z9l42l1).

## Conclusion

As we saw using the Draft editor component with readOnly set to true, it is quite simple to display Draft.js content. You don't necessarily need to convert the state to e.g. HTML or markdown in order to display it. I must add though that I am not sure if this is the most optimal way of displaying Draft.js content. What I can say is that I have used this approach in projects that are in production and it has worked well for me.

If you have an idea of another approach or have used a different solution for displaying Draft.js content, please leave a comment below! I would like to hear from you! And of course if you have any questions or thoughts be sure to comment them below too!

There is little information on how to actually display Draft.js content. Here is simple and easy way to display saved Draft.js content!