{
  "version": "https://jsonfeed.org/version/1.1",
  "title": "Spiralstack: Notes",
  "home_page_url": "https://spiralstack.com/notes",
  "feed_url": "https://spiralstack.com/feeds/json/notes",
  "authors": [
    {
      "name": "spiralstack",
      "avatar": "https://spiralstack.com/build/_assets/logo-512-LOD6LFU2.png"
    }
  ],
  "favicon": "https://spiralstack.com/build/_assets/logo-128-3RCJGPF7.png",
  "icon": "https://spiralstack.com/build/_assets/logo-512-LOD6LFU2.png",
  "language": "en",
  "items": [
    {
      "id": "https://spiralstack.com/notes/validate-schemas-and-declare-types-with-zod",
      "url": "https://spiralstack.com/notes/validate-schemas-and-declare-types-with-zod",
      "title": "Validate schemas and declare types with Zod",
      "content_html": "<div data-reactroot=\"\"><p>Zod is a Typescript package that lets you declare your data types and do runtime type checking.</p><p>Lots of possible utilities for this <a href=\"https://github.com/colinhacks/zod\">library</a>. Validation and <a href=\"https://spiralstack.com/articles/complex-type-guards-for-the-unknown\">type guards</a> come to mind first, but Zod also includes a lot of helpful methods such as <code>default</code> and <code>transform</code>.</p><h2>Quick example</h2><pre><code data-lang=\"typescript\">import { z } from &#x27;zod&#x27;\n\nconst Post = z.object({\n  id: z.string().uuid(),\n  title: z.string().min(1),\n  body: z.string()\n})\n\n// Declare the type\ntype Post = z.infer&lt;typeof Post&gt;\n\nconst myPost = {\n  id: &#x27;c2cffa40-8169-4e9b-bce4-af21bc17b033&#x27;,\n  title: &#x27;Validate schemas and declare types with Zod&#x27;,\n  body: &#x27;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x27;\n}\n\nPost.safeParse(myPost)\n\n// {\n//   success: true,\n//   data: {\n//     id: &#x27;c2cffa40-8169-4e9b-bce4-af21bc17b033&#x27;,\n//     title: &#x27;Validate schemas and declare types with Zod&#x27;,\n//     body: &#x27;Lorem ipsum dolor sit amet, consectetur adipiscing elit.&#x27;\n//   }\n// }</code></pre><p></p><p></p></div>",
      "summary": "Zod is a Typescript package that lets you declare your data types and do runtime type checking.",
      "date_published": "2022-02-12T21:32:50.863Z",
      "date_modified": "2022-02-12T21:55:14.606Z",
      "tags": [
        "Typescript"
      ],
      "language": "en"
    },
    {
      "id": "https://spiralstack.com/notes/syntax-highlighting-asts",
      "url": "https://spiralstack.com/notes/syntax-highlighting-asts",
      "title": "Syntax highlighting ASTs",
      "content_html": "<div data-reactroot=\"\"><p>Useful libraries for coloring programming language syntax.</p><p><a href=\"https://github.com/wooorm/lowlight\">Lowlight</a> and <a href=\"https://github.com/wooorm/refractor\">Refractor</a> are two interesting libraries that wrap <a href=\"https://highlightjs.org/\">highlight.js</a> and <a href=\"https://prismjs.com/\">Prism</a> respectively. </p><p>From <a href=\"https://wooorm.com/\">Titus Wormer</a>:</p><blockquote><p>Virtual syntax highlighting for virtual DOMs and non-HTML things.</p></blockquote><p>Instead of returning a HTML string with <code>&lt;span&gt;</code>s and <code>class</code> names, it returns an array of objects that you can use to create HTML or anything else really. Super useful for creating React components without using something like <a href=\"https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml\"><code>dangerouslySetInnerHTML</code></a>.</p></div>",
      "summary": "Useful libraries for coloring programming language syntax.",
      "date_published": "2022-01-28T22:24:07.663Z",
      "date_modified": "2022-01-28T22:46:00.477Z",
      "tags": [
        "React"
      ],
      "language": "en"
    }
  ]
}