export const nullVsUndefined = `
<h1>NULL VS UNDEFINED</h1>
<p>
    Prefer not to use either for explicit unavailability
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
//Yep
let foo: {{'{'}}x:number,y?:number{{'}'}} = {{'{'}}x:123{{'}'}};

//Nope
let foo = {{'{'}}x:123,y:undefined{{'}'}};
    </pre>
</div>

<p>
Use <strong>undefined</strong> in general (do consider returning an object like
    <strong>{{'{'}}valid:boolean,value?:Foo{{'}'}}</strong> instead)
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
<pre>
//Yep
return undefined;

//Nope
return null;
    </pre>
</div>

<p>
    Use <strong>null</strong> where its a part of the API or conventional
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
//Yep
cb(null)

//Nope
cb(undefined)
    </pre>
</div>

<p>
    Use truthy check for <strong>objects</strong> being <strong>null</strong> or
    <strong>undefined</strong>
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
//Yep
cb(null)

//Nope
cb(undefined)
    </pre>
</div>

<p>
Use <strong>== undefined</strong> / <strong>!= undefined</strong>
(not <strong>===</strong> / <strong>!==</strong>) to check for <strong>null</strong> / <strong>undefined</strong>
on primitives as it works for both <strong>null</strong>/<strong>undefined</strong>
but not other falsy values (like <strong>''</strong>,<strong>0</strong>,
<strong>false</strong>) e.g
</p>
<div style="background-color:#444; color:#fff; padding: 16px; position: relative; width: 50%; ">
    <pre>
//Yep
if (error != undefined)

//Nope
if (error !== null)
    </pre>
</div>


`;
