DEV Community: Declan Byrd

Get your last played Spotify track using Netlify Graph

Declan Byrd — Wed, 09 Mar 2022 00:00:00 +0000

Some Background

One feature I had been trying to add to my personal site for a long time has been to show my last played track from Spotify. The issue with consuming data from the Spotify Web API for this use case is that it uses OAuth 2.0 and so distributes access tokens which expire and therefore need to be refreshed. It is possible to achieve this using the Spotify Web API as Henry Desroches has shown in his tutorial for creating a now playing widget with Netlify functions.

Netlify Graph connects your Netlify site to a range of APIs and handles the authentication for you while only needing to grant access once. One of the APIs that it can connect to is the Spotify Web API.

Creating a Spotify application

As I only wanted to fetch my own data from Spotify and don't want to authenticate each request I created a Spotify application by accessing the Spotify Developer Dashboard. In the dashboard, I created an app using the name of my personal site and a description of getting the last played track for my personal site.

On the dashboard there are two important pieces of data to make note of. The client ID and Client secret, which are both needed to connect the Spotify application to Netlify Graph.

Netlify Graph

To access serverless functions during development I used the netlify-cli to start a development server and a netlify.toml file. In the netlify.toml file I added a section that would tell netlify and the netlify cli where my serverless functions are located. I chose to put my serverless functions inside .netlify/functions.

[functions]
  directory = ".netlify/functions"

Before starting a development server with netlify-cli, you may need to login to Netlify and connect your site.
npx netlify login
npx netlify link

To start the development server with Netlify Graph, I navigated to the project's directory and then started the netlify-cli with the graph flag.

npx netlify dev --graph

Connecting Spotify to Netlify Graph

To connect Spotify to Netlify graph, I opened my site page on Netlfiy and then navigated to the graph page. On the graph page I clicked the link to connect an API or service and then selected Spotify from the list of providers.

Connecting Spotify to a Netlify site with Netlify Graph.

I chose to add a client so that I could connect the Spotify application I created and use it to authenticate the requests. This is where I entered the client id and client secret for the Spotify application. Enabling the Graph Explorer will create a GraphQL playground to try out the Spotify connection.

Running the netlify-cli dev command with the graph flag has created a connection between the Netlify dashboard and my project so clicking the "Start querying Spotify" button showed one live connection which linked to the Graph Explorer.

Graph Explorer

As the Spotify connection requires authentication, I logged in to Spotify by clicking the "log in to Spotify" button in the authentication dropdown menu.

By selecting only the data I needed from the explorer, I ended up with the query below.

query GetLatestTracks {
  me {
    spotify {
      recentlyPlayed(first: 1) {
        nodes {
          track {
            artists {
              name
            }
            name
            externalUrls {
              spotify
            }
          }
          playedAt
        }
      }
    }
  }
}

This asks for the...

Last played track's name.
Last played track's artist(s).
Link to the track in Spotify.
Timestamp that the track was listened to.

The response looks like this:

{
  "data": {
    "me": {
      "spotify": {
        "recentlyPlayed": {
          "nodes": [
            {
              "track": {
                "artists": [
                  {
                    "name": "Daft Punk"
                  }
                ],
                "name": "One More Time - Radio Edit [Short Radio Edit]",
                "externalUrls": {
                  "spotify": "https://open.spotify.com/track/2Uy6EhQXAYkXA6MohPgjpV"
                }
              },
              "playedAt": "2022-03-08T15:44:29.362Z"
            }
          ]
        }
      }
    }
  },
  "extensions": {
    "metrics": {
      "api": {
        "avoidedRequestCount": 0,
        "requestCount": 2,
        "totalRequestMs": 141,
        "byHost": [
          {
            "host": "api.spotify.com",
            "requestCount": 2,
            "totalRequestMs": 141,
            "rateLimit": null
          }
        ]
      }
    }
  }
}

One of the really cool things about using Netlify graph is that after creating a query, it can be synced back to the codebase for that site. Clicking "Generate Handler" from inside the actions dropdown menu created a Netlify function in my project. This was really impressive!

The only part of the generated function that I changed was to uncomment the lines below so that the authentication is handled by the Spotify application that I had created, rather than using client side authentication.

// If you want to use the API with your own access token:
accessToken = event.authlifyToken;

Finally I added a redirect to netlify.toml so that the generated function would be available at /api/getLatestTracks.

[[redirects]]
  from = "/api/latestTracks"
  to = "/.netlify/functions/GetLatestTracks"
  status = 200

Wrapping up

I've used a HTML <template> to render the data, but getting data from netlify graph is client-agnostic so you can take your pick of client side framework (or of course no framework too).

I did find during development that there were a few times where the function would return an authentication error. This has become much less frequent and I haven't seen it all lately, but re-running npx netlify dev --graph seemed to fix it.

The album art for the last played track was the only piece of data that I found was missing from the Spotify API. You could get the album art from the player but this would return null if no track was being listened to when the data was requested.

While Netlify graph does create vendor lock-in, the benefits of using it in this case made it an easy choice given that my site was already being hosted on Netlify. The overall experience with Netlify graph was positive and it will be interesting to see which other services/APIs are added in the future.

Checking conditions using Array.some()

Declan Byrd — Thu, 22 Apr 2021 00:00:00 +0000

Today I learnt how to use Array.some().

The problem I was facing involved a function that took a user input of type string and the purpose of the function was to loop through an array containing strings, returning true if the user input contained a string from the array or false if there were no matches. The user input string would represent a hierarchical structure similar to "continent/country/city" while the items in the array could be a continent, country or city.

In pseudo code the problem looks like the snippet below:

function doSomething(userinput) {   
  for each string in the array { 
    does userInput contain the string? 
    if yes { 
        return true; 
    } 
    else { 
        check next string 
    }
  }
  if userInput did not match any string in the array { 
    return false
  }
}

While the pseudo code could have been translated into JavaScript, writing the logic and then verifying it works correctly would have been worthy of its own unit test - something I don't mind doing but would rather not if there is an existing API that can be used. I then started looking through the MDN Web Docs. Ideally I wanted an API similar to string.includes() that would allow me to pass an array of strings as a parameter.

Array.some()

The Mozilla documentation for Array.some states that:

"The some() method tests whether at least one element in the array passes the test implemented by the provided function. It returns true if, in the array, it finds an element for which the provided function returns true; otherwise it returns false. It doesn't modify the array."

This was ideal an idea solution to my problem. By using some() I could then pass a function that would check if the user input string contained any of the strings from the array.

I was then able to apply the some() method, resulting in JavaScript code that looks like the snippet below:

const filters = ['England', 'France', 'Spain'];
const test1 = 'Europe/England/Brighton';
const test2 = 'Europe/Italy/Rome';

function doSomething(userInput) { 
  return filters.some((filter) => userInput.includes(filter));
}

doSomething(test1);    // returns true
doSomething(test2);    // returns false

Syndicating blog posts from an 11ty site to Dev.to using RSS

Declan Byrd — Fri, 02 Apr 2021 00:00:00 +0000

While hosting content on my website allows me to own the content I post, it does not generate the exposure that community based blogging websites would. One such website that is popular within the developer community is Dev.to.

Dev.to includes an option to publish posts by monitoring an RSS feed. Each time the feed is updated with new content, Dev.to will then store the new content as a draft post ready to be published with canonical URLs that link to the source of the original content. This ensures that the posts can be checked for formatting issues before being posted on the Dev.to website.

11ty RSS

One of the great things about using 11ty as a static site generator is that it can be extended using plugins such as the 11ty RSS plugin. This plugin will allow 11ty to generate an RSS/Atom feed using the Nunjucks templating engine. To use this plugin in a project, it first needs to be installed using a JavaScript package manager such as npm.

npm install @11ty/eleventy-plugin-rss --save-dev

Once installed, the plugin should be added to the eleventy config inside the project's .eleventy.js file.

const pluginRss = require('@11ty/eleventy-plugin-rss');

module.exports = (eleventyConfig) => {
  eleventyConfig.addPlugin(pluginRss);
};

The last step for the 11ty site is to add a template file that will output an RSS feed when the site is built. My website uses the template shown below which is also found in the 11ty documentation.

---
permalink: 'feed.xml'
eleventyExcludeFromCollections: true
metadata:
  title: My blog
  subtitle: Writing about things I do
  url: 'https://example.com'
  feedUrl: 'https://example.com/feed.xml'
  author:
    name: 'Joe Blogs'
    email: 'me@example.com'
---

<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
  <title>{{ metadata.title }}</title>
  <subtitle>{{ metadata.subtitle }}</subtitle>
  <link href="{{ metadata.feedUrl }}" rel="self" />
  <link href="{{ metadata.url }}" />
  <updated>
      {{ collections.posts | getNewestCollectionItemDate | dateToRfc3339 }}
  </updated>
  <id>{{ metadata.url }}</id>
  <author>
    <name>{{ metadata.author.name }}</name>
    <email>{{ metadata.author.email }}</email>
  </author>
  {%- for post in collections.posts %} 
  {% set absolutePostUrl %}
    {{ post.url | url | absoluteUrl(metadata.url) }}
  {% endset %}
  <entry>
    <title>{{ post.data.title }}</title>
    <link href="{{ absolutePostUrl }}" />
    <updated>{{ post.date | dateToRfc3339 }}</updated>
    <id>{{ absolutePostUrl }}</id>
    <content type="html">
        {{ post.templateContent | htmlToAbsoluteUrls(absolutePostUrl) }}
    </content>
  </entry>
  {%- endfor %}
</feed>

This template will add each blog post within the post collection to the RSS feed with the most recent post shown first. Each time the 11ty site is built a new feed is generated showing the most up-to-date content from the site.

RSS on Dev.to

With the 11ty site now outputting an RSS feed, Dev.to can now monitor the feed. To connect the RSS feed to Dev.to visit the extensions settings. Inside the extensions settings, there is a section titled "Publishing to DEV Community from RSS" which contains an input box for the URL of the RSS feed.

Once entered, click the "Save Feed Settings" button and Dev.to will now be able to subscribe to all blog posts made on the 11ty site. To check it works, click the "Fetch Feed Now" button at the top of the section and head to the Dev.to dashboard page. There should now be all blog posts from the 11ty site saved as drafts ready to be published.

Wrapping up

With this workflow I can now publish my content to my website and publish to Dev.to while providing canonical URLs that point to my website. You don't need to use 11ty for this workflow, it can be any website as long as an up-to-date RSS feed is generated when a change is made.

Responsive sizing with CSS

Declan Byrd — Mon, 20 Jul 2020 00:00:00 +0000

When I first started learning web development at university, I was taught that a media query should be used to modify styles to target a specific screen size. For example, if a site made the heading text smaller on mobile devices to show more content on the user's screen. This would involve writing CSS similar to the snippet below.

.heading { 
  font-size: 16px;
}

@media screen and (min-width: 480px) { 
  .heading { 
    font-size: 48px; 
  }
}

To summarise the code above, if the device used to view the page has a screen width of greater than 481 pixels, then all elements with a class of heading will have a font size of 48 pixels. Therefore, on any device with a screen width of 480 pixels or less, all elements with a class of heading will have a font-size of 16 pixels.

Using media queries to change styles based on different device dimensions can be problematic for a few reasons:

Breakpoints need to be set for every device that will view the website. This often causes overlap between devices such as a small tablet and a large phone.
The CSS becomes less readable when styles are defined multiple times for each breakpoint.

One way that styles like font size can be more responsive is to use the clamp() function in CSS. This function takes three parameters which define the minimum value, the in-between value and the maximum value.

.heading { 
  font-size: clamp(16px, 2vw, 48px);
}

For the font size to scale based on the size of the device's screen, viewport widths are used in the code above. Viewport widths (vw) are a unit that is used to measure fractions of the browser window, so 2vw is equivalent to 2% of the width of the browser window. So to summarise the CSS snippet, the font size will be 2% of the width of the browser window unless it is smaller than 16 pixels or greater than 48 pixels.

The good news is that clamp() is largely supported by most major browsers as shown in the image below. However, recent versions of Safari and iOS Safari did not provide support for clamp() so a fallback option is required.

From the data provided by can I use, we can see that the min() and calc() functions are supported in the versions of Safari and iOS Safari where clamp() is not supported. Therefore, the two functions can be combined to create a fallback which is shown below.

.heading { 
  font-size: min(calc(16px + 1vw), 48px);
}

For the fallback option, the font size will be no smaller than 16 pixels plus 1% of the device's screen width and no larger than 48 pixels. This method will still allow the font size to scale with the size of the screen while maintaining a maximum value of 48 pixels that the font size should not be larger than and a minimum value of 16 pixels that the font size should not be smaller than.

As there are still some browsers that do not support the min() and calc() functions, it is always good to provide an additional fallback to guarantee that the font size will still be set to a minimum value. This results in the snippet shown below.

.heading { 
  font-size: 16px; 
  font-size: min(calc(16px + 1vw), 48px); 
  font-size: clamp(16px, 2vw, 48px);
}

The unit values can also be changed to use rem and em, as shown below.

.heading { 
  font-size: 1rem; 
  font-size: min(calc(1rem + 1vw), 3rem); 
  font-size: clamp(1rem, 2vw, 3rem);
}

While the snippets on this page have focused on making the font size respond to the width of the screen, other properties such as padding and margin can also be set using the same methods. This creates scalable web pages without using hard-coded breakpoints that are tailored to specific device widths.

Useful Resources

Using Media Queries from the Mozilla Developer Network (MDN) documentation.
clamp() from the Mozilla Developer Network (MDN) documentation.
min() from the Mozilla Developer Network (MDN) documentation.
This tweet from Heydon Pickering on an accessible clamp() fallback.