DEV Community: Stu Finn

Gatsby's awesome new File System Route API

Stu Finn — Mon, 30 Nov 2020 22:23:45 +0000

I just implemented a very simple version of Gatsby’s new File System Route API* and I have to say, I love it.

Until now, the only way to dynamically create pages in Gatsby has been to use the createPages API inside of the gatsby-node.js file. While this works really well, and is still something you will have to use when you have have more complex conditions (e.g. if you only want to create pages for a subset of blogposts) the new File System Route API really simplifies things for most of page-creation use cases such as blog posts or in my case, photo albums.

Here’s the gist:

I have a bunch of photo albums that I created via my CMS. Which CMS I used isn’t important here (cough cough it was Sanity which you should definitely check out). What is important is how I queried for my blogposts using Gatsby’s GraphQL API. Your data will be structured differently, but this example will give you a sense of things:

query AlbumsQuery {
  allSanityAlbums {
    edges {
      node {
          title
        slug {
          current
        }
      }
    }
  }
}

I’m not going to go into the fine details of how this API works, I just want to show you that it does, and it’s pretty slick.

Ok, so now I want Gatsby to somehow loop through each of the SanityAlbums using the “edges” array that’s returned by the above query, then have Gatsby create pages for each album, or “node” and finally use slug.current as the page’s slug.

Looking at my Gatsby files in VSCode, I have created a folder called “Albums”, and inside that folder I create a React component file using a special syntax for the filename, ie. {SanityAlbums.slugcurrent}.js

This filename will result in a page with the following url:

Notice that I nested the file in the albums directory, which provides the url with the /albums/ structure, but you could just as easily make a top-level page by skipping that step and putting the file directly in the pages directory.

Ok, you have to admit that the filename looks pretty weird. Curly brackets? Take a breath ‘cause those curly brackets help make the magic happen. This filename tells Gatsby, “For each of my “SanityAlbums”, create a new page using the component in this file and set the slug to the value of slug.current. The double underscore is what indicates that we’re using a child property of SanityAlbums.slug. Why don’t we just write it as {SanityAlbums.slug.current}.js you ask? No idea but it works!

Inside the file is a simple React component that is going to render on each of the pages:

import React from “react”

const Album = ({ data }) => {
  return <div>{data.sanityAlbums.title}</div>
}

export const query = GraphQL`
  query($id: String!) {
    sanityAlbums(id: { eq: $id }) {
      title
    }
  }
`

export default Album

Gatsby automatically queries for the id for each of the nodes, so we can use it in our component’s Page Query in order to extract the data that we want to use in the component. To keep things simple, I have only queried for the page title but you can access any of your data here.

And that is seriously it! Honestly, just save your file and your new pages should be live. By adding this one file and a few lines of code I now have individual pages for each of my photo albums. Amazing.

Keep in mind that there are still plenty of use-cases when the createPages API is required, so this isn’t a complete replacement for that but it is sure a great way to get things built even faster.

More more info on the API, check out the Gatsby docs. The folks at Gatsby also have some really great example code for this .

Now go try it out and let me know what you think!

EDIT: To use this feature, you'll need to be using Gatsby version 2.26.0 or later.
EDIT: (Feb 17, 2021) A drawback of this approach is that you cannot currently pass custom data to the page via pageContext like you can with the createPages API. If you need to do that because, for example, you want to fetch data from an external data source (i.e. not Gatsby's graphQL layer) at build time, you should use the createPages API for now.

Write your first Google Apps Script with just a few Lines of JavaScript

Stu Finn — Thu, 23 Jan 2020 18:48:58 +0000

A few weeks ago I wrote my first Google Apps script.

Liquid error: internal

It took me longer than I'm willing to admit (mostly because I had no idea how to go about it at first) but by using the official docs as a guide combined with a bit of help from google/stack overflow, I was able to write a simple program that automates a menial task for me.

Google Apps Scripts allows us to programmatically create and customize Google services, from Calendars to Gmail to Spreadsheets and almost everything in-between. My small foray into the world of Google Apps Scripts has shown me just how powerful it can be, and I have barely scratched the surface so far.

Today I want to create a new script and I’m going to bring you along for the ride so you can see just how straightforward Google Apps Script writing can be with just a little knowledge of JavaScript.

The goal

I'd like become more consistent about writing daily notes re: what I’ve accomplished, what I’ve learned, and what has tripped me up. Credit to my dev coach, Gregory Brown for encouraging me in this practice and for his helpful article, “An Efficient Approach to Continuous Documentation”.

What we'll do

The script we are going to write together will:

A) Automatically update a “Daily Notes” survey in Google forms to reflect the current date, and

B) Email it to us at the end of each work day as a reminder to fill it in.

Nothing too crazy, right?

Step 1: Manually create a survey in Google Forms

While it is entirely possible to programmatically create a new survey, for our purposes we are going to set up our survey manually. Our script will then modify it each day.

My survey has the following five questions:

What did you accomplish today?
What did you learn today?
What did you get stuck on today?
How did you feel today? (scale of 1-5)
Additional notes/thoughts

Each day at around 4:00pm I want the title of the survey to be updated to reflect the current date, and then I want it sent to my inbox.

Step 2: Fire up the the Google Apps Script Editor

With our survey open and editable, click the drop down menu and select the Script Editor.

You will now be taken to a blank script page. Rename it to something like “Modify Daily Survey”.

Google Apps Scripts allows us to create standalone scripts, as well as scripts that are tied to specific files from the start. Because we created the script from within our Google Form, it is already connected to the survey we just created. More on that later!

Step 3: Start slinging code

For reference, you can find the docs for scripts for Forms here, and scripts for Gmail here.

Let's create three functions. The first will be the main “app” that will get things initialized. The second function will modify the title of the survey and the third function will send the survey to a specified email address.

The first function will stay as myFunction for simplicity’s sake. Now we need assign a variable to the active google form. We can do that with:

var dailySurvey = FormApp.getActiveForm();

Now let’s grab today’s date and assign it to a variable:

var currentDate = new Date();

You may have noticed that I used var instead of const or let. As far as I understand, Google Apps Scripts uses ES5 and thus it doesn't include all of the cutting-edge ES6 features you may be familiar with. Keep that in mind as we proceed!

If you are used to using console.log() to check your work in the browser, that won’t work here. What you can use instead is Logger.log(). After you run a script you can view the log from the View menu (Cmd + Enter on a Mac).

Here's what we've got so far:

function myFunction() {
    // get the active Form that's associated with this script
    var dailySurvey = FormApp.getActiveForm();

    // assign today's date to currentDate
    var currentDate = new Date();

    // convert the date object into a string, 
    //and assign the first 15 characters to a variable (to use in our survey's title)
    var dateString = currentDate.toString().slice(0,15);

}

The first time you run a script you may get an “authorization required” pop-up. Follow the instructions to authorize your script (PSA: The script will be granted access to your google account, so use this with caution if you aren’t the only author of the script!).

Now that we have access to the survey through dailySurvey and we have the date as a string in dateString, let’s modify the title of the survey to reflect today’s date. We will do this in a separate function, changeDate().

function changeDate(survey, date) {

    // Assign text that we'll use in the title with the current date to a variable
    var titleText = "Daily Survey for " + date;

    // Set the title of the survey!
    survey.setTitle(titleText);
}

Boom! We are now able to modify the survey title on command! Next up, we want to email the updated survey to ourselves. Let’s create the sendSurvey() function.

function sendSurvey(survey, dateString) {
    // grab the URL where the survey is published
    var surveyUrl = survey.getPublishedUrl();

    // the content of our email
    var emailBody = "<p>Stu, it's time to take <em>just a few moments</em> to reflect on your day.</p>
                "<p>Here's the link: " + surveyUrl + "</p>;

    // the subject line content
    var subject =  "Daily Survey for " + dateString;

    // send the email! Note that we can use html in the body of the email using the {htmlBody: emailBody} syntax below.
    GmailApp.sendEmail("[destination email address goes here]", subject,'',{
        htmlBody: emailBody});
}

Note that you will once again be asked to verify the app when it tries to send you an email. You may also get a warning that the app isn’t verified. Again use an appropriate amount of caution but if you have created it yourself and you know exactly what the script does, by all means proceed.

And here is the full app in all of it’s 39 lines (including blank space & comments!) of glory:

function myFunction() {
  // assign the active form (Daily Survey) to daily Survey
  var dailySurvey = FormApp.getActiveForm();
  var currentDate = new Date();

  // convert the date object into a string, and assihn the first 15 characters to a variable
  var dateString = currentDate.toString().slice(0,15);

  //call the updateDate() function
  changeDate(dailySurvey, dateString);

  // call the sendSurvey() function
  sendSurvey(dailySurvey, dateString);

}

function changeDate(survey, date) {

  // Set the text that we'll use in the title with the current date
  var titleText = "Daily Survey for " + date;
  Logger.log(titleText);
  survey.setTitle(titleText);

}

function sendSurvey(survey, date) {

  // grab the URL where the survey is published
    var surveyUrl = survey.getPublishedUrl();

    // the content of our email
  var emailBody = "<p>Stu, it's time to take <em>just a few moments</em> to reflect on your day.</p><p>Here's the link: " + surveyUrl + "</p>";

    // the subject line content
    var subject =  "Daily Survey for " + date;

    // send the email! Note that we can use html in the body of the email useing the syntax below
    GmailApp.sendEmail('[destination email address goes here]', subject,'',{
        htmlBody: emailBody});

}

Magic! Now when you run the script myFunction() you should get an up-to-date survey in your inbox!

Step 4: Schedule the app to run each day

I have avoided saying any of this is “easy” since what is easy for me today seemed impossibly complicated just a few months ago but I'm not going to lie, this next step is legit easy.

To schedule the app to run at a specified interval simply go to “Edit/Current Project’s Triggers” and add a custom trigger. That’s it!

Step 5: Celebrate!

You have now created your first Google Apps Script! Let me know in the comments how it goes for you, and what wondrous things you create with your new superpowers.

How to iterate over objects using array methods

Stu Finn — Fri, 22 Feb 2019 21:16:01 +0000

Arrays are so freaking handy! They are a great way to store data and they have some really amazing “array methods” like .forEach() and .map() (and more) that allow us to easily iterate over an array. Sweet!

const sampleArray = [“I”, “love”, “technology”];

sampleArray.forEach( (word) => {
    console.log(word);
});

// I
// love
// technology

Objects are super too, in my humble opinion. With key/value pairs we only need a key name and we can get the associated value.

const sampleObject = {
    word1: "Always",
    word2: "and",
    word3: "forever"
};

// We can use either dot- or bracket-notation to access values:

console.log(sampleObject.word1);    // Always

console.log(sampleObject['word3']);    // Forever

Boom!

What seems less awesome, though, is that array methods like .forEach(), .map(), etc… don’t work on objects. Noooooo!

[Insert sad-face here]

But don’t despair! There is a way to use array methods to easily iterate over objects, using the Object.keys() method. Let me explain:

What's Object.keys( ), you say?

Object.keys() is a built in Javascript method that takes any object as a parameter, and returns an array of that object’s keys.

For example:

console.log(Object.keys(sampleObject));

//  [“word1”, “word2”, “word3”]

Right on!

So as a workaround, we can use the returned array of keys to iterate over our object using an array method such as .forEach(). Sick!

Let me show you:

// here we now have an array of sampleObject’s keys
const arrayOfKeys = Object.keys(sampleObject);  

// we can use the key to call up each piece of Object data 
arrayOfKeys.forEach( key => console.log( sampleObject[key] ); 

// Always
// and
// forever

WHAAAAAT?! Beautiful! *wipes away a single tear*

Now you know how to easily iterate over an Object using at least one array method. Please use your new powers responsibly!

For more information on array methods see the MDN webdocs.
To learn about some of the best array methods out there, check out this handy article.

Many thanks to Wes Bos for pointing this out in his React for Beginners course. It's a really great course.

100(-ish) Days of Code

Stu Finn — Fri, 19 Oct 2018 22:03:51 +0000

If you have an interest in developing a coding habit or if you want to take your skills to the next level, I highly recommend participating in the #100DaysOfCode challenge. The challenge, created by @ka11away, is designed to help participants develop a daily habit of coding. It also immediately connects you with a global network of people who are also trying to become better developers (or like me developers, period).

There are only a few main rules for #100DaysOfCode:

Code every day for 100 days for at least an hour.
Tweet your daily progress to the #100DaysOfCode hashtag.
Connect with and encourage at least two other people who are also doing the challenge.

For many people, coding for an hour every single day might seem unrealistic. Maybe you work or study long hours and some days it's just not possible to carve out the extra time. Or maybe like me, you have kids and/or a partner who understandably demand a lot of your time. Whatever your reason, if you're feeling overwhelmed by the idea of coding ever day, I have some good news for you: you're allowed to break the rules! It is ultimately up to you to define your own metrics of success. In the end, the #100DaysOfCode challenge is about finding the best way to develop a solid coding habit. For some people that means coding every single day. And for others it necessarily means breaking the rules.

"It's very flexible, it's up to you. You can definitely do anything you want with it. You don't have to re-start it every time you make a mistake. […] If there is a certain limitation that you know up front, you can write it into the rules of your challenge."
- Alexander Kallaway, creator of the #100DaysOfCodeChallenge in Ep. 46 of the FreeCodeCamp podcast

People who know me best know that I love to play by the rules. My wife can't handle playing board games with me because I am constantly referring to the rule-book when others are treating the rules as mere suggestions. I appreciate structure and routine and I tend to be more successful when there's a clear framework that I can follow (maybe that's why I like coding so much?). With this in mind, it makes sense to me that I was eager to participate in the #100DaysOfCode challenge when I saw it appear in my Twitter timeline last year.

One of my main life goals is to have the flexibility to spend ample time with my partner and our kids. Yet when I started the #100DaysOfCode challenge, I routinely found myself taking time away from my family to make sure that I got my coding in on weekends and holidays. I worried that if I skipped a day or two of the challenge, I would have to start over at day one. Eventually I realized that even though I already had the flexibility to spend time with my family, I was sacrificing it while striving to achieve the same flexibility in my future career as a developer. That didn't make a whole lot of sense to me.

As a result, I decided to align my goals for the #100DaysOfCode challenge with my longer-term goals. I made a conscious decision to code daily as often as possible but to also spend guilt-free time with my family whenever I needed (or wanted) to. I ended up taking most weekends and school holidays completely away from coding, but I made sure to get back to daily coding as soon as it was possible - usually on the following Monday. And for me, that worked great. I am convinced that this relaxed approach to the challenge helped me to finish all 100 days (even if many of them weren't consecutive), and to establish a habit of coding regularly.

I realize that everyone's life-demands are unique which means that everyone's criteria for success will be too. And I'm certainly privileged to be able to take time off with my family whenever I want to. Whatever your circumstances are, I hope that you won't be discouraged by the idea of coding for 100 days straight but that you will be willing adjust the challenge so that it works best for you, in order to accomplish your goals.

In the end, I completed my first round of the 100 days of code in 166 days. And I'm super happy about it, so much so that after a break over the summer holidays (my kids we're home every day, after all) I started round #2.

If you are considering doing the #100DaysOfCode challenge and you're anxious about coding every single day, my advice is to give yourself some slack. Think about why you want to do challenge, and as long as you're achieving the goals that you set for yourself, in my opinion you're doing it right.

Massive thanks for @ka11away for creating the challenge, @practicingdev for reading this over for me, and to the #100DaysOfCode Twitter community for you continued encouragement and motivation.
Follow me during my second round of the #100DaysOfCode @stufinn!