docs(website): improve docs on optional typing

Author: christianalfoni

packages/overmind-website/examples/guide/getstarted/run_devtool.ts

@@ -1,5 +1,5 @@
 export default () => [
   {
-    code: 'npx overmind-devtools',
+    code: 'npx overmind-devtools@latest',
   },
 ]

packages/overmind-website/guides/beginner/02_definingstate.md

@@ -12,6 +12,39 @@ In JavaScript we can create all sorts of abstractions to describe values, but in
 
 Let us talk a little bit about what each value helps us represent in our application.
 
+### Undefined
+You might wonder why **undefined** is not part of the core value types. Well, there are two reasons:
+
+1. It is not a serializable value. That means if you explicitly set a value to *undefined* it will not show up in the devtools
+2. Undefined values can not be tracked. That means if you were to iterate an object and look at the keys of that object, any undefined
+values will not be tracked. This can cause unexpected behaviour
+
+```marksy
+h(TypescriptNotice, null, `When writing Typescript you should **not** use optional values for your state (**?**), or use **undefined** in a union type. In a serializable state store world **null** is the value indicating *"there is no value"*.
+
+\`\`\`ts
+type State = {
+  // Do not do this
+  foo?: string
+
+  // Do not do this
+  foo: string | undefined
+  
+  // Do this
+  foo: string | null
+  
+  // Or this, if there always will be a value there
+  foo: string
+}
+
+export const state: State = {
+  foo: null
+}
+\`\`\`
+
+`)
+```
+
 ### Naming
 
 Each value needs to sit behind a name. Naming can be difficult, but we have some help. Even though we eventually do want to consume our application through a user interface we ideally want to avoid naming things specifically related to the environment where we show the user interface. Things like **page**, **tabs**, **modal** etc. are specific to a browser experience, maybe related to a certain size. We want to avoid those names as they should not dictate which elements are to be used with the state, that is up to the user interface to decide later. So here are some generic terms to use instead:

packages/overmind-website/src/components/Introduction/introduction.md

@@ -313,7 +313,7 @@ export const overmind = createOvermind(config, {
 Go to your terminal and use the NPM executor to instantly fire up the development tool.
 
 ```
-npx overmind-devtools
+npx overmind-devtools@latest
 ```
 
 Refresh the sandbox preview and you should see the devtools populated with information from the application.