Category: Code

I listen to music most of the day while I work. It helps me focus, and it makes me happy. When thinking of ideas for my new site, I wanted to show off my recently played tracks to give visitors a sense of my musical taste. After spending some time looking into the Apple Music API, I decided it would be easier to use the Last.fm API instead.

Installing Our Packages

First, let’s install two packages we’ll need to make this work.

npm install @11ty/eleventy-cache-assets dotenv

First, @11ty/eleventy-cache-assets will let us fetch data from an external API and cache the results so that we’re not requesting data every time we build the site.

Second, dotenv will make it easy to handle our local environment variables. Last.fm requires us to send an API key with each request. Which reminds me, get your API key here. If you’re using Netlify, you can read the documentation on how to set environment variables.

Setup Your API Key

Before we begin, you’ll need to get your API key. Next, create a .env file in the root of your project and put your key in it. For example:

API_KEY=token_goes_here

Remember to add your API key to the server where you host your site. If you’re using Netlify, you can read the documentation on how to set environment variables to do it.

Fetching Data

Create a file in your _data folder. I called mine lastfm.js. We’ll add the following to it:

// _data/lastfm.js

const Cache = require('@11ty/eleventy-cache-assets');
require('dotenv').config();

const API_KEY = process.env.LASTFM_KEY;
const USERNAME = 'timothybsmith';
const API = 'http://ws.audioscrobbler.com/2.0/'

module.exports = async () => {
 try {
 const json = await Cache(
 `${API}?method=user.getrecenttracks&user=${USERNAME}&limit=10&api_key=${API_KEY}&format=json`,
 {
 duration: '2h',
 type: 'json',
 }
 );
 return json;
 } catch (ex) {
 console.log(ex);

 return [];
 }
};

And just like that, we have access to the last ten recently played tracks in JSON form. I have the cache set to two hours, but you can set it to whatever you’d like. I couldn’t find the rate limit for Last.fm, but I don’t want to hit the API multiple times while I work.

Displaying the Data

Now that we have our data, we can render it in our template. I created a partial called recently-played.html in the _includes/partials folder. Now we’ll add the following:

<!-- _includes/partials/recently-played.html -->
{% set recentlyPlayed = lastfm.recenttracks.track %}

{% if recentlyPlayed.length %}
<ul class="recently-played">
 {% for item in recentlyPlayed %}
 <li class="recently-played__track">
 <a href="{{ item.url }}" class="track__url">
 <div class="track__media">
 <img
 src="{{ item.image[3]['#text'] }}"
 alt="Album artwork for {{ item.name }} by {{ item.artist['#text'] }}" />
 </div>
 <span class="track__name">{{ item.name }}</span>
 <span class="track__artist">{{ item.artist['#text'] }}</span>
 </a>
 </li>
 {% endfor %}
</ul>
{% endif %}

So we’re doing a few things here. We’re using Nunjucks to set which array we want to loop over. lastfm is the name of the data file, recenttracks is the object that contains our tracks, and each track has our necessary items. From there, we only render the rest of the template if there are songs to display.

You’ll then want to include this partial in your template like this:

{% include "partials/recently-played.html" %}

Conclusion

And just like that, we’ve fetched our data and rendered it in our template! Now it’s your turn to add some style. This is the moment I felt like a total badass, hope you’re feeling it too.

If you need some help or end up using this on your site, please let me know! You can find me on Twitter as @smithtimmytim. Happy coding!

One of my favorite new parts of my site is my Film Diary. I love to watch movies, and I thought it would be fun to prominently display diary entries from Letterboxd.

Letterboxd is a wonderful film community where you can keep track of films you want to watch and one’s you’ve watched, rate and review films, create lists of films, and the list goes on.

While Letterboxd does have an API, I found the authentication methods a bit more advanced than what I knew how to do. I found a cool NPM package that parses the RSS feed that Letterboxd creates for public profiles and returns that information in JSON.

Let’s make this thing.

Install the Package

Oops! I forgot to do this in the video, but you’ll need to first install the package in your terminal.

npm i letterboxd

Pulling in Our Data

Let’s create a new data file. I store mine in ./src/_data/. We’ll call it letterboxd.js. Inside this file, we’ll write the following:

// ./src/_data/letterboxd.js

const letterboxd = require('letterboxd');

module.exports = async () => {
 const items = letterboxd('ttimsmith', (error, items) => {
 if (error) {
 return console.log(error);
 }
 });

 return items;
};

First, we’re pulling in our package into the file by requiring it at the top. Then, we create a constant that’ll contain our items. We call the letterboxd() function and pass in our username. You’ll want to substitute ttimsmith for your username.

Next, if there’s an error, we’re printing out the error with console.log(). If everything goes well, we return our items.

Displaying the Films

Now let’s create a partial for our film diary. I put my partials in ./src/_includes/partials/. We’ll call it film-diary.html. Inside this file, we’ll write the following:

<!-- ./src/_includes/partials/film-diary.html -->

{% set letterboxdItems = letterboxd.slice(0,5) %}

<div class="film__items">
 {% for item in letterboxdItems %}
 <article class="film__entry">
 <a href="{{ item.uri }}" class="film__url">
 <div class="film__media">
 <img
 src="{{ item.film.image.tiny }}"
 alt="Poster for {{ item.film.title }}">
 </div>
 <div class="film__info">
 <span class="film__title">{{ item.film.title }}<span class="film__rating">{{ item.rating.text }}</span></span>
 <span class="film__watched-date">{{ item.date.watched }}</span>
 </div>
 </a>
 </article>
 {% endfor %}
</div>

First, we’re creating a variable called letterboxdItems which returns the first five entries. The function gives us the last fifty entries, and that’s way too many for our homepage.

Next, we loop letterboxdItems and display the poster, the title of the film, the rating, and the date it was watched.

You’ll want to include this partial in your template like this:

{% include 'partials/film-diary.html' %}

Wrapping Up

And there you have it! You’re pulling in your last five diary entries from Letterboxd and displaying them on your site. Now’s the time to add your own styles and make it look great.

If you need help, or end up using this tutorial to create your own film diary, please let me know! I’m @smithtimmytim on Twitter.