JSON Feed Validator

Check whether your feed is valid. For more information about JSON Feed, see the specification.

{
  "version": "https://jsonfeed.org/version/1",
  "title": "Paul Jones",
  "home_page_url": "https://pauljones.io",
  "feed_url": "https://pauljones.io/feed.json",
  "description": "A little corner of the web, by Paul Jones",
  "author": {
    "name": "Paul Jones"
  },
  "items": [
    {
      "id": "https://https://pauljones.io/articles/2021",
      "content_html": "<p>I was planning to do a review of 2020, but honestly 2020 was a bit crap and the less said about it the better, so I’ve decided instead to review what I want to do in 2021.</p><p>You might think this is just new year’s resolutions, but it’s completely different, because new year’s resolutions never work.</p><p>So here’s what I’m hoping to do more of in 2021.</p><h2 id=\"go-out-or-failing-that-see-people\">Go out (or failing that: see people)</h2><p>Obvious one really, but I’m hoping to go out, maybe even see some people. Even before the whole pandemic thing, having a young child and working from home had basically turned me into a hermit, so in 2021 I’m going to make an effort to actually see other humans. Hopefully that will be in person, but if not then at least some more online conversations.</p><h2 id=\"do-more-open-source\">Do more open source</h2><p>I’ve even moved over from Gitlab to <a href=\"https://github.com/pjnes\">Github</a> in anticipation for this one. I’ve used open source for years, and occasionally contribute a patch or pull request, but this year I’m hoping to get a bit more involved in some projects, open source more of my own projects (like this site!), and generally just give a bit more back.</p><h2 id=\"more-fun-little-projects\">More fun little projects</h2><p>I want to do some more little projects like my <a href=\"/destiny\">Destiny reset timer</a>. They’re generally an excuse to play around with tech and concepts that doesn’t really come up in my day-to-day work, they only take a few days to throw together, and they’re good fun.</p><h2 id=\"write-more\">Write more</h2><p>I wrote a massive 3 articles on my site in 2020 (not counting several drafts that might end up getting posted this year instead), and I think I can do better. I’m not committing to a post every day, or even 1 a week, but there will be more of them. Actually getting my thoughts down into words and then publishing them for all to see is something I <em>really</em> struggle with, so let’s see how well I do.</p><h2 id=\"and-thats-it\">And that’s it</h2><p>I presume I’ll do more than 4 total things in 2021, at least from a personal point of view. We’ve got a second baby on the way and the first one will be going to nursery, so that’s a whole other side of 2021 I’ll be looking forward to.</p>",
      "url": "https://https://pauljones.io/articles/2021",
      "title": "2021",
      "summary": "I was planning to do a review of 2020, but honestly 2020 was a bit crap and the less said about it the better, so I've decided instead to review what I want to do in 2021. You might think this is just new year's resolutions, but it's completely different, because new year's resolutions never work. So here's what I'm hoping to do more of in 2021. Go out (or failing that: see people) Obvious one really, but I'm hoping to go out, maybe even see some people. Even before the whole pandemic thing, having a young child and working from home had basically turned me into a hermit, so in 2021 I'm going to make an effort to actually see other humans. Hopefully that will be in person, but if not then at least some more online conversations. Do more open source I've even moved over from Gitlab to…",
      "date_modified": "2021-01-01T00:00:00.000Z"
    },
    {
      "id": "https://https://pauljones.io/articles/dark-mode",
      "content_html": "<p>I’ve had a dark mode for this site for a <a href=\"/changes#17042020\">little while</a> now, but it’s been controlled by the OS color scheme, rather than being something that can be changed on the site. An article I read on how to do it <em>properly</em> gave me the nudge to do the same here.</p><h2 id=\"required-reading\">Required Reading</h2><p>Step one: go read <a href=\"https://joshwcomeau.com/gatsby/dark-mode/\">Josh Comeau’s “The Quest for the Perfect Dark Mode”</a>, or at least skim it over before you dig in here. It’s an incredibly detailed and well explained dive into how he implemented dark mode on his site, and I <del>stole</del> borrowed about 90% of it.</p><p>I’m not going to go into all the details of how I’ve implemented everything, just the bits where I decided to change the implementation, so it’s not going to make much sense without that context. It’d be like reading Star Wars fanfiction before you watch Star Wars.</p><h2 id=\"setting-classes\">Setting Classes</h2><p>Rather than setting the individual colours through JS, I decided to reflect the current theme with a class on the <code class=\"language-text\">&lt;html&gt;</code> element. This means our JS only needs to change 1 thing in order to toggle the theme, rather than setting each colour value, and also means components can define their own colours rather than them all being stored in one place.</p><div data-language=\"jsx\" class=\"gatsby-highlight\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token function-variable function\">setDark</span> <span class=\"token operator\">=</span> <span class=\"token parameter\">dark</span> <span class=\"token operator\">=&gt;</span> <span class=\"token punctuation\">{</span>\n  <span class=\"token keyword\">const</span> classes <span class=\"token operator\">=</span> document<span class=\"token punctuation\">.</span>documentElement<span class=\"token punctuation\">.</span>classList\n\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>dark<span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    classes<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;dark&quot;</span><span class=\"token punctuation\">)</span>\n    classes<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;light&quot;</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span> <span class=\"token keyword\">else</span> <span class=\"token punctuation\">{</span>\n    classes<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;light&quot;</span><span class=\"token punctuation\">)</span>\n    classes<span class=\"token punctuation\">.</span><span class=\"token function\">remove</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;dark&quot;</span><span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div><p>I’m curious what the trade offs are here in terms of performance, but I want to actually publish this article tonight, not wake up at 4am with a keyboard imprint on my face and 86 tabs about JS performance profiling open (realistically it’ll probably be both).</p><h2 id=\"using-classes\">Using Classes</h2><p>The downside is repetition in the main styles, as we need to define the colours 4 times:</p><ol><li>The initial defaults.</li><li>The dark defaults, in case our JS doesn’t fire.</li><li>The light styles for <code class=\"language-text\">html.light</code>.</li><li>The dark styles for <code class=\"language-text\">html.dark</code>.</li></ol><div data-language=\"scss\" class=\"gatsby-highlight\"><pre class=\"language-scss\"><code class=\"language-scss\"><span class=\"token selector\">:root </span><span class=\"token punctuation\">{</span>\n  <span class=\"token property\">--color-background</span><span class=\"token punctuation\">:</span> #fefefe<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">--color-background-alt</span><span class=\"token punctuation\">:</span> #ededed<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">--color-foreground</span><span class=\"token punctuation\">:</span> #212121<span class=\"token punctuation\">;</span>\n  <span class=\"token property\">--color-accent</span><span class=\"token punctuation\">:</span> #a40802<span class=\"token punctuation\">;</span>\n\n  <span class=\"token atrule\"><span class=\"token rule\">@media</span> <span class=\"token punctuation\">(</span><span class=\"token property\">prefers-color-scheme</span><span class=\"token punctuation\">:</span> dark<span class=\"token punctuation\">)</span></span> <span class=\"token punctuation\">{</span>\n    <span class=\"token property\">--color-background</span><span class=\"token punctuation\">:</span> #212121<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-background-alt</span><span class=\"token punctuation\">:</span> #323232<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-foreground</span><span class=\"token punctuation\">:</span> #fefefe<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-accent</span><span class=\"token punctuation\">:</span> #fbb829<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token selector\"><span class=\"token parent important\">&amp;</span>.light </span><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">--color-background</span><span class=\"token punctuation\">:</span> #fefefe<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-background-alt</span><span class=\"token punctuation\">:</span> #ededed<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-foreground</span><span class=\"token punctuation\">:</span> #212121<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-accent</span><span class=\"token punctuation\">:</span> #a40802<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n\n  <span class=\"token selector\"><span class=\"token parent important\">&amp;</span>.dark </span><span class=\"token punctuation\">{</span>\n    <span class=\"token property\">--color-background</span><span class=\"token punctuation\">:</span> #212121<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-background-alt</span><span class=\"token punctuation\">:</span> #323232<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-foreground</span><span class=\"token punctuation\">:</span> #fefefe<span class=\"token punctuation\">;</span>\n    <span class=\"token property\">--color-accent</span><span class=\"token punctuation\">:</span> #fbb829<span class=\"token punctuation\">;</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">}</span></code></pre></div><h2 id=\"sometimes-just-use-css\">Sometimes, just use CSS</h2><p>We could probably skip #2 and just default everyone to light mode, and that would mean that #3 wouldn’t be needed either. By relying on the native CSS support for the OS dark mode, our initial inline JS that reads the colour scheme only has to worry about stored preferences, the browser natively handles my less picky readers.</p><div data-language=\"jsx\" class=\"gatsby-highlight\"><pre class=\"language-jsx\"><code class=\"language-jsx\"><span class=\"token punctuation\">(</span>\n  <span class=\"token keyword\">const</span> storedDark <span class=\"token operator\">=</span> localStorage<span class=\"token punctuation\">.</span><span class=\"token function\">getItem</span><span class=\"token punctuation\">(</span><span class=\"token string\">&quot;dark&quot;</span><span class=\"token punctuation\">)</span>\n  <span class=\"token keyword\">if</span> <span class=\"token punctuation\">(</span>storedDark <span class=\"token operator\">!==</span> <span class=\"token keyword\">null</span><span class=\"token punctuation\">)</span> <span class=\"token punctuation\">{</span>\n    document<span class=\"token punctuation\">.</span>documentElement<span class=\"token punctuation\">.</span>classList<span class=\"token punctuation\">.</span><span class=\"token function\">add</span><span class=\"token punctuation\">(</span>\n      <span class=\"token constant\">JSON</span><span class=\"token punctuation\">.</span><span class=\"token function\">parse</span><span class=\"token punctuation\">(</span>storedDark<span class=\"token punctuation\">)</span> <span class=\"token operator\">?</span> <span class=\"token string\">&quot;dark&quot;</span> <span class=\"token operator\">:</span> <span class=\"token string\">&quot;light&quot;</span>\n    <span class=\"token punctuation\">)</span>\n  <span class=\"token punctuation\">}</span>\n<span class=\"token punctuation\">)</span><span class=\"token punctuation\">(</span><span class=\"token punctuation\">)</span></code></pre></div><p>As an added bonus, users without JS will still get their preferred theme.</p><h2 id=\"fun-experiments\">Fun experiments</h2><p>Now that I’ve got a system wide colour scheme I can do some fun things with it. This site is more of a sandbox to play around in than anything, and I’ve had the message</p><blockquote><p>This is where my under-construction.gif would go.</p></blockquote><p>on my home page for a while now, so I figured “Why not have an actual construction sign that respects the colour theme”.</p><div data-language=\"svg\" class=\"gatsby-highlight\"><pre class=\"language-svg\"><code class=\"language-svg\"><span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>svg</span> <span class=\"token attr-name\">xmlns</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>http://www.w3.org/2000/svg<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">aria-label</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>Under Construction<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">strokeLinejoin</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>round<span class=\"token punctuation\">&quot;</span></span>  <span class=\"token attr-name\">width</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>70px<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">viewBox</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>6 9 186 162<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>path</span> <span class=\"token attr-name\">fill</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>none<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">stroke</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>var(--color-accent)<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">strokeWidth</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>17<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">d</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>M99 18L15 162h168z<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">/&gt;</span></span>\n  <span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;</span>path</span> <span class=\"token attr-name\">fill</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>var(--color-text)<span class=\"token punctuation\">&quot;</span></span> <span class=\"token attr-name\">d</span><span class=\"token attr-value\"><span class=\"token punctuation attr-equals\">=</span><span class=\"token punctuation\">&quot;</span>M101 121a2 2 0 01-3 1l-2-3v-16l-6 10-11-6 9-18h-6l-8 14-3-3v-3l8-14h20a4 4 0 014 4zm16 12L76 99l1-3 42 35 8-10a5 5 0 019 0l22 29h-57l13-16zm-28-18l7 10 1 25a8 8 0 01-6-4l-1-17-8-11-18 31a4 4 0 01-2-2l-1-6 17-32zm13-36a7 7 0 0114 0 7 7 0 01-14 0<span class=\"token punctuation\">&quot;</span></span><span class=\"token punctuation\">/&gt;</span></span>\n<span class=\"token tag\"><span class=\"token tag\"><span class=\"token punctuation\">&lt;/</span>svg</span><span class=\"token punctuation\">&gt;</span></span></code></pre></div><p>Most of that isn’t really important, it’s just the SVG markup for a construction sign, but look! It’s using our CSS variables inline to set the colours. The end result is a fun little throwback to the 90s internet with some modern CSS tricks.</p><div></div>",
      "url": "https://https://pauljones.io/articles/dark-mode",
      "title": "Dark Mode",
      "summary": "I've had a dark mode for this site for a  little while  now, but it's been controlled by the OS color scheme, rather than being something that can be changed on the site. An article I read on how to do it  properly  gave me the nudge to do the same here. Required Reading Step one: go read  Josh Comeau's \"The Quest for the Perfect Dark Mode\" , or at least skim it over before you dig in here. It's an incredibly detailed and well explained dive into how he implemented dark mode on his site, and I  stole  borrowed about 90% of it. I'm not going to go into all the details of how I've implemented everything, just the bits where I decided to change the implementation, so it's not going to make much sense without that context. It'd be like reading Star Wars fanfiction before you watch Star Wars…",
      "date_modified": "2020-05-19T00:00:00.000Z"
    },
    {
      "id": "https://https://pauljones.io/articles/1-month-in",
      "content_html": "<p>It’s been a month since I started to <a href=\"/articles/rebuilding-my-corner\">rebuild my corner</a>, so I wanted to review how it’s all going. I’ve got a <a href=\"/changes\">changelog</a> (which I should probably link to somewhere…) which covers everything I’ve fiddled with, but as a general run down:</p><ul><li>I’ve added some basic styling, that I’m quite liking.</li><li><a href=\"/projects\">My side projects</a> now have their own section on the site.</li><li>I’m tracking my latest attempt at <a href=\"/12in12\">12 in 12</a> with a fancy page with progress bars.</li><li>The site has a dark mode, because every developer’s website needs a dark mode.</li></ul><p>There’s still a lot more I want to do. I want to start writing things that other people might actually want to read, rather than just writing about the site that I’m writing on. I want to start sharing screenshots and such of various game playthroughs. I want to keep a reading list of other blogs and articles I find interesting. I want a bunch of other things I’ve not fully figured out yet.</p><p>But more importantly I’m having more fun playing around with web dev than I have in a long time. </p>",
      "url": "https://https://pauljones.io/articles/1-month-in",
      "title": "1 Month In",
      "summary": "It's been a month since I started to  rebuild my corner , so I wanted to review how it's all going. I've got a  changelog  (which I should probably link to somewhere...) which covers everything I've fiddled with, but as a general run down: I've added some basic styling, that I'm quite liking. My side projects  now have their own section on the site. I'm tracking my latest attempt at  12 in 12  with a fancy page with progress bars. The site has a dark mode, because every developer's website needs a dark mode. There's still a lot more I want to do. I want to start writing things that other people might actually want to read, rather than just writing about the site that I'm writing on. I want to start sharing screenshots and such of various game playthroughs. I want to keep a reading list of…",
      "date_modified": "2020-05-12T00:00:00.000Z"
    },
    {
      "id": "https://https://pauljones.io/articles/rebuilding-my-corner",
      "content_html": "<p>I have 12 different half finished rebuilds of this site stashed away in various git repos. None of them ever launched because my personal site has always been a low priority, and mostly an excuse to play around with new things. </p><p>So I think I’m going to embrace that, and just push this live, and work on it in the open. My little corner of the internet doesn’t need to be perfect. It’ll never be “finished”, and that’s fine. It’s a place for me to put things. </p><p>And at the moment this is the only thing, but that’s probably fine too.</p>",
      "url": "https://https://pauljones.io/articles/rebuilding-my-corner",
      "title": "Rebuilding my Corner",
      "summary": "I have 12 different half finished rebuilds of this site stashed away in various git repos. None of them ever launched because my personal site has always been a low priority, and mostly an excuse to play around with new things.  So I think I'm going to embrace that, and just push this live, and work on it in the open. My little corner of the internet doesn't need to be perfect. It'll never be \"finished\", and that's fine. It's a place for me to put things.  And at the moment this is the only thing, but that's probably fine too.",
      "date_modified": "2020-04-12T00:00:00.000Z"
    }
  ]
}