diff --git a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md index 219c72c8..ecf0eb30 100644 --- a/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md +++ b/src/posts/2023/displaying-listening-data-from-apple-music-using-musickit.md @@ -18,22 +18,22 @@ Second, we need a `music-user-token` to send in our request headers. This is obt ```html - - + + ``` @@ -204,7 +204,7 @@ The templating for my site is all written in [liquid.js](https://liquidjs.com) a We have an object containing arrays of objects — we iterate through each object for the appropriate section (tracks aren't displayed at the moment) and build the resulting display[^3]. This isn't perfect by any means, but, it does provide a nice little visualization of what I'm listening to and `240` tracks feels adequate as a rolling window into that activity. -{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'w-full', '600px' %} +{% image 'https://cdn.coryd.dev/blog/albums-artists.jpg', 'Albums and artists', 'w-full', '1200px' %} [^1]: There are some good options to do this, but there aren't a _ton_ and the age of some of the apps is concerning. [Marvis](https://appaddy.wixsite.com/marvis) is far and away your best choice here. [^2]: Making sure that you update the values you obtained, including the path to your downloaded `.p8` file. diff --git a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md index e591b638..24dd89d7 100644 --- a/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md +++ b/src/posts/2023/fastmail-handling-inbound-email-with-regex-filters-now-with-chatgpt.md @@ -10,7 +10,7 @@ I've been using Fastmail for years now and have explored a number of different a For now, I've approached filtering my mail by applying regular expressions to reasonably broad categories of incoming mail[^2]. My thinking with this approach is that will scale better over the long term by applying heuristics to common phrases and patterns in incoming mail without the need to apply rules to senders on a per address or domain basis. -{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'w-full', '600px', 'eager' %} +{% image 'https://cdn.coryd.dev/blog/fastmail-workflow.jpg', 'A diagram of my Fastmail workflow', 'w-full', '1200px', 'eager' %} ## Alias-specific rules diff --git a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md index 9607f587..11325ecb 100644 --- a/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md +++ b/src/posts/2023/from-ics-to-json-surfacing-anticipated-albums.md @@ -34,10 +34,10 @@ We surface the url, require the ICS conversion library, cache and convert the re ```json { - startDate: '20180505T020000Z', - endDate: '20180505T060000Z', - location: 'url', - summary: 'Artist - Album' + "startDate": "20180505T020000Z", + "endDate": "20180505T060000Z", + "location": "url", + "summary": "Artist - Album" } ``` @@ -65,6 +65,6 @@ Rendering the output is as simple as: {% endraw %} Leaving us with: -{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'w-full', '600px' %} +{% image 'https://cdn.coryd.dev/blog/album-releases.jpg', 'Albums I\'m looking forward to', 'w-full', '1200px' %} [^1]: At this point, a dev playground. diff --git a/src/posts/2023/now-page-grouping-episodes-of-same-show.md b/src/posts/2023/now-page-grouping-episodes-of-same-show.md index d70e7fa4..6930e555 100644 --- a/src/posts/2023/now-page-grouping-episodes-of-same-show.md +++ b/src/posts/2023/now-page-grouping-episodes-of-same-show.md @@ -1,6 +1,6 @@ --- -date: "2023-09-06" -title: "Now page: grouping episodes of the same tv show" +date: '2023-09-06' +title: 'Now page: grouping episodes of the same tv show' draft: false tags: - JavaScript @@ -8,13 +8,15 @@ tags: - development image: https://cdn.coryd.dev/blog/grouped-tv.jpg --- + I made a minor update to how I'm normalizing TV data for display on my now page. -By *minor* I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show. +By _minor_ I mean one of those things that may well break inexplicably depending on where the data lands. Instead of returning a normalized array based directly off the data returned by [Trakt](https://trakt.tv)'s API I'm instead collecting episodes in an array, checking as I iterate through the response to see if an episode of the same show exists and replacing that object with a mutated object designed to display the range of episodes watched for the show. -{% image 'https://cdn.coryd.dev/blog/grouped-tv.jpg', 'Grouped TV episodes', 'w-full', '600px' %} +{% image 'https://cdn.coryd.dev/blog/grouped-tv.jpg', 'Grouped TV episodes', 'w-full', '1200px' %} {% raw %} + ```javascript const EleventyFetch = require('@11ty/eleventy-fetch') @@ -99,4 +101,5 @@ module.exports = async function () { return episodes.reverse() } ``` -{% endraw %} \ No newline at end of file + +{% endraw %} diff --git a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md index dd2b4928..c31e22ff 100644 --- a/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md +++ b/src/posts/2023/now-playing-eleventy-netlify-edge-functions-emoji.md @@ -107,7 +107,7 @@ The client side JavaScript to display the retrieve data is pretty straightforwar content.classList.remove('hidden') } - // try and retrieve cached track data + // try and retrieve cached track data try { const cache = JSON.parse(localStorage.getItem('now-playing')) if (cache) populateNowPlaying(cache) @@ -115,13 +115,13 @@ The client side JavaScript to display the retrieve data is pretty straightforwar /* quiet catch */ } - // fetch now playing data from our edge function + // fetch now playing data from our edge function const res = await fetch('/api/now-playing', { type: 'json', }).catch() const data = await res.json() - // cache retrieved data + // cache retrieved data try { localStorage.setItem('now-playing', JSON.stringify(data)) } catch (e) { @@ -130,7 +130,7 @@ The client side JavaScript to display the retrieve data is pretty straightforwar if (!JSON.parse(localStorage.getItem('now-playing')) && !data) nowPlaying.remove() - // update the DOM with the data we've retrieved from the edge function + // update the DOM with the data we've retrieved from the edge function populateNowPlaying(data) } })() @@ -139,6 +139,7 @@ The client side JavaScript to display the retrieve data is pretty straightforwar The template to be populated looks like the following: {% raw %} + ```liquid

@@ -150,6 +151,7 @@ The template to be populated looks like the following:

``` + {% endraw %} Finally, if the page this all lives on is loaded by a client without JavaScript enabled, it will be hidden by the `client-side` class which is simply: @@ -157,15 +159,15 @@ Finally, if the page this all lives on is loaded by a client without JavaScript ```html ``` All of this, yields the single line at the bottom of this image — updated on each visit. -{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'w-full', '600px' %} +{% image 'https://cdn.coryd.dev/blog/now-playing.jpg', 'Now playing', 'w-full', '1200px' %} -[^1]: Plus explicit conditions matching David Bowie and Minor Threat. \ No newline at end of file +[^1]: Plus explicit conditions matching David Bowie and Minor Threat. diff --git a/src/posts/2023/optimizing-for-performance-with-eleventy.md b/src/posts/2023/optimizing-for-performance-with-eleventy.md index 905a656b..0837f2a9 100644 --- a/src/posts/2023/optimizing-for-performance-with-eleventy.md +++ b/src/posts/2023/optimizing-for-performance-with-eleventy.md @@ -140,6 +140,6 @@ For this page in particular, the images that are rendered above the fold are set All of these boilerplate steps leave us with a quick to load, accessible and resilient site: -{% image 'https://cdn.coryd.dev/blog/page-speed.jpg', 'Pagespeed scores for coryd.dev/now', 'w-full', '600px' %} +{% image 'https://cdn.coryd.dev/blog/page-speed.jpg', 'Pagespeed scores for coryd.dev/now', 'w-full', '1200px' %} [^1]: It's easy, flexible and helps mitigate my lack of an eye for design by providing safe baselines. diff --git a/src/posts/2023/road-to-madness-apple-music-charts.md b/src/posts/2023/road-to-madness-apple-music-charts.md index ef6d513f..a0f0f7fb 100644 --- a/src/posts/2023/road-to-madness-apple-music-charts.md +++ b/src/posts/2023/road-to-madness-apple-music-charts.md @@ -5,6 +5,7 @@ draft: false tags: ['development', 'music', 'Eleventy', 'Apple', 'JavaScript', 'API'] image: https://cdn.coryd.dev/blog/charlie.jpg --- + I've written before about [displaying my listening data from Apple Music](https://coryd.dev/posts/2023/displaying-listening-data-from-apple-music-using-musickit/) but, recently, I've attempted to take things a bit further. The Apple Music is API is cool because it gives you data about your music, it's not cool because well, it's missing some things. It sends back a whole host of handy-dandy track metadata that you'd expect from a music service and that's great. But it doesn't provide data you'd normally expect like, well, a time stamp of when the recently played track was recently played. @@ -31,7 +32,8 @@ So, we're dealing with JSON and a static site generator. We want to persist our ```json { - "i.rXXXdmUa6Nme-1689970612847": { // that's an id + a timestamp, not a leaked key + "i.rXXXdmUa6Nme-1689970612847": { + // that's an id + a timestamp, not a leaked key "name": "Sacrificial Blood Oath In The Temple Of K'zadu", "artist": "Gateway", "album": "Galgendood", @@ -131,7 +133,7 @@ _Cool_[^4]. GitHub triggers a rebuild of the site every hour, Netlify builds it, There are some significant issues with this approach: it doesn't capture listens to an album in a loop (like me playing the new Outer Heaven record today — hails 🤘). It can get wonky when my diff function hits a track order that elicits a false positive return value. -{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of "charts"', 'w-full', '600px' %} +{% image 'https://cdn.coryd.dev/blog/charlie.jpg', 'Charlie Day standing in front of "charts"', 'w-full', '1200px' %} "But Cory there's last.fm." I hear this, I love last.fm, but I've got concerns about its age, ownership and maintenance. I don't want to be on the wrong end of a scream test when the wrong (right?) server rack gets decommissioned.