DEV Community: Jake Varness

Adding Social Media Images to a Gatsby Site

Jake Varness — Fri, 17 May 2024 00:00:00 +0000

When you post links on social media, sometimes the links generate a card that looks really really nice. I say sometimes because… Well… My blog never had good ones. I basically took that little “JV” logo I made in Gimp and set that as the image. It worked, but it wasn’t great.

When my links get posted online, I wanted to make sure that they looked at least somewhat professional. I may be the only one ever posting them, but I at least wanted them to look good! Not just a couple letters.

So today, I’m going to tell you about the methods I researched to be able to add social media images to my site, and how I landed on using a Gatsby plugin called gatsby-plugin-satorare.

Alternative Solutions

Let’s start off by pointing out how others solved this: there are quite a few people who have solved this issue in the past, and many of the solutions involve a similar process: build a component using React that you will use in tandem with puppeteer to be able to render the images in a browser window and then have it take a screenshot of the preview page. Here were some of the posts that I had found:

These solutions work just fine, so if for whatever reason you don’t like the way that I did this, you could try one of these. These solutions do have an easy way for you to test out that your generator is working. The solution I used did not have the easiest way of testing out that things worked, but once I got it working it’s smooth sailing.

In doing the research for which plugin/solution I ultimately wanted to use, I went to search for plugins on Gatsby for social images, andgatsby-plugin-satorare came up as a potential option. It uses another library from Vercel called satori that can take JSX syntax and convert it into an image. They also have this really greatPlayground where you can take the code you want to use to generate the image and you can test out how the end product looks. If I were you, and you want to use gatsby-plugin-satorare, I would probably start there.

The OG Image Playground

Vercel’s OG Image Playground uses satori to be able to generate images using JSX syntax. However, this library does have it’s limitations in terms of the types of styling that it supports. Before diving into this, I would recommend taking a look at the list of supported CSS propertiesthat you can use to create an image. One of the things I ran into when I was doing this was that border styles weren’t working the way I expected them to.

My blog uses border styles quite a bit to make some of the elements look like they have slanted edges. For example, this is the style used in a couple of different places on the site:

border-left: 3em solid transparent
border-bottom: 3em solid #e5e02d

By using combinations of border-* styles and defining one as a solid colored border and the other as a solid transparent border, you can cut a little of the colored border off on either side. I wanted to use this type of styling in my images, but satori doesn’t have the ability to do this when it’s generating the images.

If you wanted to try playing around with this effect, try heading to this codepen.

If you were to try this same effect in the playground, however, you would notice that this simply doesn’t work. I’m assuming this is because of how satori works: it converts JSX syntax into an SVG, and I’m guessing that the translation from CSS styles to SVGs isn’t perfect.

The workaround I used was that I just essentially created a little box that was filled with a black color that would cut off a little piece off the end of the date line on my images, and that ends up working ok.

If you want to see the actual HTML/JSX I’m using to generate the image, I was able to create a shareable link on the OG Playground where you can see it.

Once I had the image working, it was time to configure the plugin!

Configuring `gatsby-plugin-satorare`

The first thing you’re going to want to do is create a small JavaScript file that acts as the “component” of the image. I say “component” because it’s not so much a React component as much as it’s just something that uses JSX syntax to define how the image is supposed to look.

You’ll want this file to export default a function that takes an argument that is a Gatsby Node. You can change the behavior of how the image is rendered based on the type of node it is. In my case, all of my blog posts are generated using the gatsby-transformer-remark plugin, so they are all of type MarkdownRemark. I decided not to generate images for all of the pages yet, so I’m only configuring the plugin to targetMarkdownRemark nodes. In the end, this is how my little component looked:

// src/components/social-image-card.js
export default function (node) {
  const postedDate = new Date(node.frontmatter.date).toLocaleDateString(
    undefined,
    { month: "long", day: "numeric", year: "numeric" },
  )
  return (
    <div
      style={{
        display: `flex`,
        flexDirection: `column`,
        width: `1200px`,
        height: `630px`,
        backgroundColor: "black",
        border: "solid 15px #e5e02d",
        borderRadius: "25px",
        padding: "3em 1.5em",
        fontFamily: "BlinkMacSystemFont",
      }}
    >
      <h1 style={{ color: "#e5e02d", fontSize: "4em" }}>
        {node.frontmatter.title}
      </h1>
      <h2 style={{ color: "#e5e02d", fontSize: "3em" }}>
        {node.frontmatter.description}
      </h2>
      <div
        style={{
          display: "flex",
          borderTop: "3em solid #e5e02d",
          height: 0,
          width: "75%",
        }}
      >
        <h2
          style={{
            color: "black",
            position: "relative",
            bottom: "1.75em",
            marginLeft: ".5em",
            fontSize: "2em",
          }}
        >
          Posted on {postedDate}
        </h2>
        <div
          style={{
            borderTop: "5em solid black",
            width: "5em",
            height: "5em",
            transform: "rotate(45deg)",
            position: "absolute",
            top: "-40px",
            left: "800px",
          }}
        ></div>
      </div>
      <div
        style={{
          display: "flex",
          margin: "1em",
          position: "absolute",
          bottom: 0,
          right: 0,
          borderBottom: "2px solid #e5e02d",
        }}
      >
        <h2
          style={{
            color: "#e5e02d",
            alignItems: "flex-end",
            fontSize: "2em",
          }}
        >
          jvarness.blog
        </h2>
        <img
          src="https://jvarness.blog/images/myself.jpeg"
          width={128}
          height={128}
          style={{
            borderRadius: "50%",
            margin: "1em",
            border: "solid 5px #e5e02d",
          }}
        />
      </div>
    </div>
  )
}

As you can see here, it’s a little different from my example code in the OG Playground, but the key differences are mainly that it’s templated using the frontmatter contained within all my blog posts. Other than that, it’s pretty much exactly what I put in the playground.

One thing that is important to note here as well: you may notice that for the whole component I’m using a font style fontFamily: "BlinkMacSystemFont". In order to get a custom font into the plugin to resolve correctly, you’ll need to download the fonts you want to use. I was abel to find these fonts in this github repo and I was able to get it in .otf format. I’m not sure if that matters or not, but the author of the satorare plugin was using .otf in their example, so that’s what I did.

Anyway, now that I’ve got the fonts I wanted to use and I’ve got the component created that I wanted to use, it’s time to modify mygatsby-config.js with the correct configuration:

resolve: `gatsby-plugin-satorare`,
options: {
  path: `${__dirname}/src/components/social-image-card.js`,
  fonts: [
    {
      name: "BlinkMacSystemFont",
      path: `${__dirname}/content/assets/BlinkMacSystemFont.otf`,
    },
  ],
  target_nodes: ["MarkdownRemark"],
},

Now that this is configured, the plugin, at build time, will:

Load the font(s) you want to use
Load up all the node types contained in the target_nodes array
Call the social-image-card.js function for each of the nodes, which will then create images for the pages.

Perfect. We’re almost done! Now that we have the images generating, now we need to actually start using them.

Actually Using the Images

gatsby-plugin-satorare will create new schema within the GraphQL store that Gatsby uses to generate your site for each node type that you target. In this case, it generated a markdownRemarkOgImage type in GraphQL that we can use to reference the location of each image. We are able to do this using the IDs of each blog post.

For my blog posts, this was what the query used to look like:

export const pageQuery = graphql`
  query BlogPostBySlug($id: String!) {
    markdownRemark(id: { eq: $id }) {
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
      }
      timeToRead
    }
  }
`

To be able to get the image data, I am now able to add a small snippet below the markdownRemark query block:

export const pageQuery = graphql`
  query BlogPostBySlug($id: String!) {
    markdownRemark(id: { eq: $id }) {
      /* ... */
    }
    markdownRemarkOgImage(parent: { id: { eq: $id } }) {
      attributes {
        publicURL
      }
    }
  }
`

Now when my blog posts render, the data prop will have the publicURL that can be used for the image!

const BlogPostTemplate = ({ data, pageContext }) => {
  const { publicURL } = data.markdownRemarkOgImage.attributes
  // the rest of the code...
}

I’m using the images mainly in a Helmet to be able to set the appropriate meta tags for these to show up on social media. If you are ever unsure of whether or not you’re using the right tags for this, I was able to use socialsharepreview to test them.

Conclusion

Well now my blog looks a little more professional! I’m pretty happy with the way they turned out, and now hopefully social card links will look a little nicer than they used to! Thanks for reading if you made it this far, and let me know on DEV or LinkedIn if you tried this out at all and if it was helpful to you!

Creating a Radio Using HTML Canvases

Jake Varness — Sun, 20 Dec 2020 20:00:00 +0000

Hey everyone! It’s been a solid month since my last post, but I’m back again, and this time I want to focus on finishing up that crappy little radio we made last time. For context, here is what I left off with from this post.

This little project started out as a submission for a programming competition, where I had to use 32 lines of code to make… Something, anything. But now that the competition is over, I can make this little project of mine whole with more code, specifically with CSS to draw a little radio on the screen, and some more JavaScript to make this project a little more robust than it is.

But before we add play and pause functionality, we need to actually render something that resembles a radio. While it might not actually be a radio, I’m going to try to render something that looks like ACNH’s Tape Deck, because I like the way it looks.

Drawing a Radio

First, I need to draw a radio. Most people would likely just… Draw one in Paint, Gimp, or their other favorite image manipulation program. However, this is a coding blog, and drawing a .png file doesn’t require writing any code, so instead we’re going to use a HTML canvas element, which are really cool little elements you can use to draw things with using JavaScript.

This was pretty tough for me to do because I didn’t fully know what methods were available to me in order to be able to draw the radio. I mostly needed to be able to draw shapes, but for the face of the radio I also wanted it to have some textures. I decided to go ahead and start with a box for the body of the radio. In order to do this I need a canvas:

<canvas id="radio" width="500px" height="300px"></canvas>

Easy. Now, I want to draw a box representing the body of the radio. In order to do that, I have to get the 2-dimensional context from the canvas and start drawing shapes:

const canvas = document.getElementById('radio');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.fillRect(25, 50, 450, 250);

The code gets a little bit boring from here. It’s mostly repeating setting the fillStyle property and calling fillRect to draw most of the body. I also drew a couple of circles by calling the arc function to create a tape deck looking box, but the circle-drawing code is a little different. fillRect draws rectangles and fills them in with a pattern or solid color, whereas arcs can be drawn differently depending on whether or not you call fill or stroke:

ctx.beginPath();
ctx.fillStyle = '#aaa';
ctx.arc(128, 210, 10, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.arc(128, 210, 8, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#aaa';
ctx.arc(170, 210, 10, 0, 2*Math.PI);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = '#ddd';
ctx.arc(170, 210, 8, 0, 2*Math.PI);
ctx.fill();

This code will draw gray circles below much lighter-gray circles. Using fill here will create a circle filled in with a particular color based on what fillStyle is set to. stroke, however, has a different effect. Rather than just drawing a circle of the specified color, it draws a circle with a black outline.

I wanted the stereo of the radio to have a textured look, but I didn’t want to repeat a ton of code to write little lines, so what I did is I created a tiny little image with the texture I wanted, and used the context’s createPattern function to create a pattern with that image:

var radioTexture = new Image();
radioTexture.src = 'radio_texture.png';
radioTexture.onload = function() {
  var radioPattern = ctx.createPattern(radioTexture, 'repeat');
  ctx.fillStyle = radioPattern;
  ctx.beginPath();
  ctx.arc(350, 175, 100, 0, 2*Math.PI);
  ctx.fill();
};

This made it really easy to create the texture I wanted without drawing it all using the canvas.

After a little added CSS, I’m starting to like what I created. The radio is a little less ugly now, and it… Actually looks like a radio!

Conclusion

I still have a lot more that I want to add to this, but this is a pretty good start for something looking a little bit better. To see the product as it is now, you can click here. I think at some point in 2021 we’ll start to add more functionality, and hopefully by… 2025 we’ll have a finished product!

This is probably going to be the last blog post I make this year, so I just wanted to say that if you enjoyed any of my posts that I’ve written this year, first off thanks so much for reading, and let me know what your favorite one was and why on social media!

Happy Holidays and a Happy New Year to you and your family and friends! I’ll see you all again in 2021!

Building an ACNH Radio using HTML5 Audio Tags

Jake Varness — Sun, 08 Nov 2020 09:14:00 +0000

Cerner, the company I’m currently employed at, holds an annual hackathon called 2^5, where every day for 32 days, you can make 1 submission of code that is 32 lines long or less. I’ve blogged about this previously on dev.to, and you can check out the post here.

I’ve been a participant for 4 years, and it always surprises me how much folks are able to do using only 32 lines of code. This year was one of my favorite years to participate because I themed all of my submissions around Animal Crossing: New Horizons. Like millions of other Nintendo Switch gamers out there, ACNH became daily therapy as I caught bugs and fish, dug up fossils, and built an island full of really awesome villagers (the best overall being Cherry, as I’m sure everyone who has ever had her as a villager would agree).

What excited me even more was to find a community-supported REST API for the new game that would allow you to query for a lot of in-game items and get information about those items in the form of a JSON body, and almost every submission for 2^5 that I made this year revolved around this free API.

There’s one submission that I made though that… Bothers me. A lot. I’ve thought about it non-stop since I submitted it, not for any reason other than the fact that it is visually one of the ugliest things I’ve ever concocted. That submission is the radio that plays K.K. Slider songs. For brevity, I’ve deployed this file to Vercel here so that you can see what it does.

As you can see, this is really really not visually appealing in any sense of the word. The JavaScript that was needed to make this work correctly made the file so large that there wasn’t really enough time leftover to make it pretty…

I’m working on making it prettier right now, so for now, I’ll focus on what the audio tag in HTML5 can do for you, and how I used it to make a little mvp of a radio!

Retrieving Music

First thing we need to discuss is: how are we going to be retrieving the music we want to play? Well first I needed to go retrieve a song to play. The ACNH API has a Songs endpoint that makes this easy. Since I’m buildling a radio, I just want to go get random songs to play, so I’ll first start by generating a random integer in JavaScript between 1 and 95:

Math.floor(Math.random() * 94) + 1

This is one of those quirky things about JavaScript that I really dislike: unlike other modern languages that can actually generate a random integer, us JavaScript developers have to use a combination of Math.random (which generates a random decimal number between 0.0 and 1.0) and Math.floor (which will round a number down to it’s nearest whole number value, so numbers like 3.9, 3.7, and 3.0000001 all become 3). My intention here is to generate a random number between 1 and 95, because the ANCH API uses positive integers for the IDs, and currently the only way to get songs from the API is to use ID numbers within that range as query parameters:

const req = new XMLHttpRequest();
req.open('GET', `https://acnhapi.com/v1/songs/${Math.floor(Math.random() * 94) + 1}`);
req.onload = function () { setSong(req.response); };
req.send();

I’m not using NPM for this project, so just using XMLHttpRequest works for my needs. Now… What is that setSong and what does it do? Well, I use that to set some attributes on an HTML5 audio tag. Using this tag will help me answer the next conundrum:

Playing Music

The audio tag, when provided with a music source, can play audio media straight from a browser once the browser has loaded the audio! So we can take our response from the API call, extract the URL of the MP3 from it, and begin to play it:

<audio autoplay>
  <source type="audio/mpeg"/>Looks like your browser doesn't support audio tags :(
</audio>

function setSong(resp) {
  const json = JSON.parse(resp);
  document.querySelector('#text').textContent = json["name"]["name-USen"];
  document.querySelector('source').setAttribute('src', json["music_uri"]);
  document.querySelector('audio').load();
}

This code will set the src of the source tag, which will then allow the audio tag to start playing music, once it’s told to start playing. Before I go any further, I want to address how this code actually plays music, and why if you’re on a Chrome-based browser, the autoplay attribute likely isn’t causing the song to auto-play like you would expect:

From the Mozilla docs I linked above, the audio tag has many attributes. The two main ones I want to focus on are autoplay and controls. Many browsers will honor autoplay if the controls attribute is included here, the reason being that controls asks the browser to supply music controls for the media. For this project, I don’t want to render the default controls, and I want it to still autoplay where available, which is why I left it in.

However, Chrome refuses to autoplay any media without controls being present to play/pause said media. Because of this, I had to introduce something into the UI that would allow it to play the media based on a user-action, so I just added an onClick handler on the body tag, the entirety of which ends up looking like this:

<body onclick="document.querySelector('audio').load();" onload="loadNextSong()">
  <div class="content">
    <h2 id="text"></h2>
    <h2>Click here to start playing music.</h2>
  </div>
  <audio autoplay>
    <source type="audio/mpeg"/>Looks like your browser doesn't support audio tags :(
  </audio>
</body>

Now, when the page loads, the user is prompted to click somewhere in order to start playing music. Now, we’re building a radio, so when the first song we loaded stops, how do we load the next one?

Continuously Playing Music

The audio tag comes with very convenient event handlers that we can take advantage of. The main one that we’ll be able to take advantage of for our radio is the ended event. So far, the JavaScript we’ve written looks like this:

function setSong(resp) {
  const json = JSON.parse(resp);
  document.querySelector('#text').textContent = json["name"]["name-USen"];
  document.querySelector('source').setAttribute('src', json["music_uri"]);
  document.querySelector('audio').load();
}
function loadNextSong() {
  document.querySelector('#text').textContent = "Loading...";
  const req = new XMLHttpRequest();
  req.open('GET', `https://acnhapi.com/v1/songs/${Math.floor(Math.random() * 94) + 1}`);
  req.onload = function () { setSong(req.response); };
  req.send();
}

We have functions for retrieving the next song, and loading it into our web page. However, this code will stop playing after the first randomly selected song. We can’t have it stop. What would K.K. Slider think of us if that happened?

Luckily, we can just load the next song when the audio tag has ended the playing of media. We can do this by adding an event handler for the ended event:

document.querySelector('audio').addEventListener('ended', loadNextSong);

When the song stops playing, we’ll query up another song, set all the appropriate tags, and then document.querySelector('audio').load() will play the next song for us! Because we added autoplay to the audio tag, and the user had to click on the body of the page in order to start playing, songs will continue to play even in Chrome until the browser is closed!

Conclusion

This is not a bad start for an ACNH radio, but the internet deserves better! So far, I don’t have a way to turn the radio off once it’s on, and it… Really doesn’t look so much like a radio.

Stay tuned for an upcoming post where I use some CSS magic to turn this blob of text on a screen into something we can all be proud of. Until then, I hope you liked learning a little bit about how you could use the audio tag! If you have any questions or feedback for me, links to my social media can be found on my profile. Thanks for reading, and have a good one!

Adding serverless APIs to Gatsby projects in Vercel

Jake Varness — Sat, 31 Oct 2020 15:00:00 +0000

Hey everyone! It’s been a solid two weeks since I’ve actually written a blog. I’ve been feeling really under the weather, so I’ve been mostly taking the last few weeks easy (don’t worry, it wasn’t/isn’t COVID). That, and Pokemon Crown Tundra got released, so I’ve been playing a lot of that lately, but it feels nice to be back to writing some blogs!

In the blog I wrote about how I created my blog, I briefly mentioned that one of the reasons that I didn’t need to use Next.js for this site was because of the fact that it offered more functionality than I needed. All the pages on this site are built statically, and Next.js can do that too, but it also has great support for dynamic routes and APIs.

I’m not convinced that this point that I’ll ever need dynamic routing built into this site since it’s using Gatsby. However, I might want to create APIs later for mailing lists, forms, etc. If I ever do need those APIs, Vercel actually makes it really easy to add APIs to any project.

Originally this post was going to be about how easy making microservice APIs is using micro, but then I discovered that micro was designed to be ran within a container, and that Vercel has better support for adding APIs to any Node project using it’s Serverless Helper Functions.

Adding an API

Adding serverless APIs to Vercel projects is dead simple. You can review the link above and find some instructions. What I’ve done on this site is I’ve deployed the example shown in the link to a route on my website at api/examples/hello-world. For posterity, the code just looks like this:

module.exports = (req, resp) => {
  const { name = "World" } = req.query;
  resp.json(`Hello ${name}!`);
};

This is a fairly straight-forward function: it accepts two objects, one representing the request, which contains all the query parameters and any applicable bodies, and then an object we can use to send the response with.

I added this route by simply creating an api folder at the root of my project. Vercel will build out serverless API routes using the file structure defined within the api folder, and will serve any .js, .go, .py, or .rb files defined within as serverless lambda functions.

Consuming in Gatsby

I was really hoping to consume the API directly from this blog post, but I’m not using mdx for my posts quite yet, and injecting JavaScript in-line on a markdown file didn’t really seem like a very safe thing to try and do, nor did I think it was feasible. SO, instead, I created an example page of how a Gatsby page might consume a serverless function.

You can view the demo here, but I’ll talk more about the code here. You might consider opening the demo page up on another tab.

In order to get the query parameters, Gatsby passes in location data to each of it’s pages. We can use this, along with the fetch API to grab the query params, can call our serverless function with the parameters:

import React, { useEffect, useState } from 'react'
import { Link } from "gatsby"
import Layout from "../../components/layout"
import SEO from "../../components/seo"
import queryString from "query-string"

export default ({location}) => {
  const { search } = location
  const { name = "World" } = queryString.parse(search)
  const [greeting, setGreeting] = useState('Loading...')

  useEffect(() => {
    fetch(`/api/examples/hello-world?name=${name}`)
      .then(resp => resp.json())
      .then(greet => setGreeting(greet))
  }, [name])

  return (
    <Layout>
      <SEO title={`Hello ${name}`}/>
      <section className="hero is-white is-large">
        <div className="hero-body">
          <h1 className="title">{greeting}</h1>
        </div>
      </section>
      <section>
        If you stumbled upon this page not knowing what it was, go <Link to={`/adding-serverless-apis-to-gatsby-projects-in-vercel`}> here.</Link>
      </section>
    </Layout>
  )
}

We’re able to use fetch to call an API using query parameters that were read from location data, and then render that data client-side once the server responds! Neato!

The one thing you might notice when loading the page is that while the page rendering is pretty quick, there’s a bit of a delay in loading the actual information from the serverless function created by Vercel, hence our page says “Loading…” first before getting the actual greeting. I will say that this is one thing that Next.js does pretty well that Gatsby does not: all pages in Gatsby are static, whereas Next.js can actually create lambdas of pages, so the loading and rendering of the data is handled server-side. If we were using Next.js, we could use it’s getServerSideProps API to render everything server-side so that the client doesn’t have to load any data itself. No need for loading indicators.

Conclusion

Hopefully you’ve found some of this information useful! As always, links to my social media are located below if you want to ask questions about this post or if you want to suggest a future post. Thanks for reading!

Trying Out One-Line Dark Mode Tricks

Jake Varness — Tue, 13 Oct 2020 00:00:00 +0000

I’ve read a few articles on the internet about how you can implement dark mode on your website in one line of CSS. Honestly, it’s a really nifty trick. For reference, here are the articles I have seen:

It’s a neat trick, really it is. I’m a fan, and it works pretty well… For some websites. Since I now have a website, I thought to myself “self, why don’t you also include some kind of toggle for dark mode on your website using this trick!“.

So I tried it… And uh… Well, let’s get into why I don’t really like the idea very much.

Trying with 1 CSS Style

Let’s just start with figuring out what this website looks like if we apply this filter style on my website in Chrome dev tools. Adding this CSS property on the <html> element yields interesting results for the site:

filter: invert(1) hue-rotate(180deg);

All the colors are inverted, but it turns out the yellow color I chose doesn’t look all that great when it’s inverted:

The whites turn black, the blacks turn white, and the yellow turns… Brown? Ew… Well, what if I just tried it without the hue-rotate style and just had filter: invert(1)? The result is a little bit better:

This looks a little bit better, even some of the posts don’t look too bad: the code snippets and inline highlighting don’t look all that bad. However, there are other subtle elements of the site that don’t really look right. The footer, for example, has a really poor contrast ratio between the links I have there and the now white background:

My fear here is that users who have colorblindness might not be able to easily see some of these links. The icons look pretty good inverted though, so what I can do is make the links the same color as the icons, and that’ll solve that problem pretty easily, because they’ll turn the same blue as the icons:

So this isn’t too bad still… But I’m not sure I really like the blue color still. I picked that yellow because I like it. I want it to stay that way. Plus, this is just a style: I still need to figure out a way to turn it off and on again, which will require some JavaScript on my part.

I’ll eventually get a dark mode added to my website, but I don’t think I’ll be using this method for it. I think for other websites that have simpler color schemes this might be a great technique to use! But for my website, it’s just not working the way I want it to.

Other Examples

Other websites have great examples of how their dark mode is implemented. One notable one is Dan Abramov’s site overreacted.io. Dan is the creator of React, and this blog was created using Gatsby! You can check out the source code here.

Dan’s implementation is very elegant: the base color scheme for all the text and content just looks visually appealing regardless of whether or not the background is light or dark. The background becomes a different color based on classes added to the body of the page. Dan also has some code in here that will persist the selected theme between sessions so that the next time the site is visited it’s using the same theme.

The Gatsby community seems to agree that this is a pretty good implementation! Someone from the community decided to create a plugin that implements much of the code that Dan uses to persist the theme state and trigger updates to the theme. Source code for that plugin can be found here. For anyone looking to implement similar themes or triggers, this is a good starting point!

Wrapping Up

So what does this teach us about dark mode? You can certainly use a CSS style like filter to invert all of the colors on your website to achieve the desired effect, but as the color scheme I’m using can prove, it can be a little difficult to implement it using filter.

In a later blog post, if I’m ever going to be able to figure out how to make this work for my site, I’ll discuss how I overcame all these different challenges, and how I was able to actually implement it.

How I made jvarness.blog

Jake Varness — Wed, 07 Oct 2020 00:00:00 +0000

A colleague of mine reached out to me and asked if I could spend a little bit of time blogging about how I created this blog. I told that colleague I would soon, so hopefully they’ll enjoy this.

Aside from being asked by a colleague: I want to talk about what my needs currently are for the blog, the technologies I’m using to create the blog, and why I chose those technologies over competitors.

Bear Bare Necessities

First things first: this is a blog. It’s a website, not an app, and I knew I didn’t need or want to maintain any kind of app. That helped narrow down my tech search. I wanted this to just be a website that I could post my thoughts and ideas and projects to.

There were things I could have done that would have made the site much more complicated to setup initially, but I could have added more features over time: I could have created some kind of Ruby on Rails application and served my content via a CMS such as Strapi, but there were two major concerns that I had about that:

First thing is that I would have needed to setup and deploy both the website in Rails, as well as a Strapi instance somewhere like Digital Ocean or on Heroku, but for something like a blog there are cheaper options.

The second concern I would have had about that is performance: Rails screams, but only if you have the hardware an infrastructure to help it scale. I didn’t want to worry too much about performance with this, because in the end it’s just a blog, and you could end up paying big with that kind of server side rendering architecture… Or really any kind of rendering for that matter.

I knew that I could achieve better performance through static rendering and generation than I could if I hosted my content on a CMS and loaded that content in for each page hit, and because I know how to write JavaScript (and I like to write JavaScript code), it became pretty clear what I wanted to do: JAMStack it!

JAMStack

In the world of JAMStack, there are many technologies and companies that make it extremely simple to make a website. In fact, on the JAMStack site, there are a ton of options listed here that can help you achieve what you’re wanting to do. I’m not going to talk about all of the options that you have, but I will talk about a few that I did consider:

Next.js

Next.js is a React framework for building websites, created by Vercel (formerly Zeit), with the aim of being extremely flexible: site pages can be generated statically, they can render dynamically using microservice APIs, it’s easy to add your own microservices into the same code base, and code-splitting is built-in, meaning that your JavaScript isn’t bundled into one big blob, but rather just the JavaScript that each individual page needs.

For pages that are dynamically rendered, Next.js creates a lambda function, which is a huge plus for anyone who wants to create dynamically rendered pages: lambda functions are a great way to keep the costs of deploying a website down, and it doesn’t require a server to be constantly running.

I’m a huge fan of using Next.js to build applications and websites. I would recommend it to a lot of people. However, I didn’t really feel as if I needed all of the power that Next.js had to offer: I don’t have a need to create any microservices, and if I did I can always create and deploy those very easily. If I did feel as if I needed them though, Next.js would be what I would reach for.

One other thing I don’t find particularly convenient about Next.js is the ability to create posts using Markdown: Kendall Strautman made a blog that you can find here on how to setup a Markdown blog using Next.js. I spent a good long while trying to get this to work with NetlifyCMS, but Next.js just isn’t elegant for this because I believe at it’s core it’s trying to solve a completely different use-case: quickly rendering pages through the use of microservice architectures. But like I said, I don’t really need those, I just want to write Markdown and get a site working.

Nuxt.js

Nuxt is another JavaScript framework that looks to solve many of the same use-cases as Next, but instead of using React it uses Vue.

I don’t really have more experience with Nuxt than I do with Next, but of the experience that I do have, I can tell you that Nuxt’s plugin system is pretty elegant. With Next, there tends to be a lot of webpack configuration you have to go through in order to get things exactly how you want them if you’re deviating from use-cases that Next tries to solve. In my opinion, Nuxt has a lot more intuitive configuration and plugin setup, and there are so many nice conventions in Nuxt that make organizing the source code very easy.

For more complex websites, Nuxt is a great option for those who want more configurability in their site, or for those who just love Vue more than they love React. Nuxt really was a close second for this site.

Gatsby

Gatsby is considered to be the defacto static site generator for React developers by many in the React/JAMStack community. It’s primary goal is to utilize APIs to create static pages. It heavily utilizes GraphQL and plugins curated by the Gatsby community to query data sources and build a site. It’s also very easy to learn if you have a good understanding of React. In fact, much of the groundwork for this website was laid using the tutorial on Gatsby’s website, found here.

The main difference between Nuxt/Next and Gatsby to me is that Gatsby makes it extremely easy to source information from files within a repository in order to build the content, whereas Nuxt/Next make it easy to create small services that can be used to dynamically render pages. To me, this was the simplest and easiest way to create a blog: I wrote posts in Markdown, and Gatsby turns it into a website!

The one caveat about Gatsby, that I think I’m willing to compromise on at the moment, has to deal with build times. Next and Nuxt are both best tailored to load content from REST APIs, which means that your build times are only as long as it takes to build each lambda or static page that your site requires. You sacrifice a small portion of load times to have extremely fast builds.

As of the publishing of this post, there are only a total of 4 blog posts, and as such, Gatsby’s build times are extremely quick. However, with my current implementation, Gatsby won’t be able to scale as I continue to add more and more posts. My builds will start to take longer because Gatsby will have to build every single post as a new page.

However, loading times for statically rendered sites are significantly faster than those backed by services. In this case, I’m willing to sacrifice slower builds to be able to host the same content and have that content be really fast to load.

Hosting

There are about as many options for hosting as there are for actually generating your site. I already mentioned Digital Ocean and Heroku, but those fit different use-cases than what I was really needing. I didn’t want to have to manage an OS, or hardware resources, or whether or not I wanted my site to be scalable… I just wanted to deploy a website.

There are a few platforms I’m aware of that make this extremely easy to do. I’ll discuss two of them that I didn’t use, and what I ultimately decided to utilize.

Surge

Surge is a platform you can use to deploy static sites quickly and easily. It offers a CLI that can be easily installed via NPM, and the free tier is extremely generous in terms of being able build as many projects into Surge as you want. It’s really easy to use.

However, Surge is almost too simple: your website has to be built first in order to deploy it. The project has to be in a pre-built state before being published to the Surge network. This means that if you want to automate deployments when you push to a repo, you’ll need to setup some kind of continuous integration service to take care of getting the CLI and publishing for you. If you’re interested in Surge but you want automated deployments, there should be a guide in the docs on how to set it up with an old favorite of mine, Travis.

Sadly, I did not choose Surge for my deployments and hosting.

Netlify

Oh boy… I’m sure I’m going to get some flak for this… I’ll admit it: I’ve actually never tried using Netlify. For those of you reading this who love Gatsby, you must think I’m crazy. You might be right.

Netlify is a big favorite amongst many in the JAMStack community, and it’s not hard to understand why: Netlify deploys sites to a super fast CDN, and is capable of deploying static pages, as well as lambdas. It’s a really great choice for anyone who is creating a website with Nuxt, Next, Gatsby… Really, any static site generator.

Netlify also has an easy-to-integrate CMS aptly named Netlify CMS. The way that Netlify CMS works is that the data is actually all hosted in GitLab or GitHub, and Netlify CMS will load posts from those sources. Then, when a post is edited or added, those updates will be pushed to the repository from Netlify CMS on your behalf, and can be stored as JSON, Markdown, whatever is supported.

This is Gatsby’s strong suit: since the data that Gatsby uses to generate all of the pages is held within the repo itself, it’s possible to easily add Netlify CMS to any Gatsby site.

Netlify, Netlify CMS, and Gatsby, would all be extremely attractive options if you wanted to create a website for practically no money down, and you wanted multiple people to be able to contribute to it, or if you wanted people who were not engineers to be able to contribute without having to understand Markdown or code. Couple that with things that developers care about, like Git integration and built-in site generation and deployments, and you have a match made in heaven.

… Or at least for other people. Not necessarily for me. There’s another platform I’ve been using for quite some time now that I just can’t stop using.

Vercel/Zeit

Vercel (Zeit) is a company that you may or may not have heard about: I don’t think they get nearly the amount of praise that Netlify does or the kind of attention that Netlify typically does, but they are just as good as Netlify for building and deploying sites. The company itself owns a lot of really neat open-source software that you may already be using, such as the Hyper terminal emulator, and they’re also the minds behind Next.js, Mongoose… My main point is that they do a lot of really neat stuff.

There are so many great things about Vercel that make it an excellent platform for developers: a free pricing tier that allows you to deploy all kinds of projects is just the start. Actually, fun fact about Vercel: as of the writing of this article, ALL personal accounts are FREE, meaning you don’t have to pay anything to deploy your personal projects. Accounts only become paid if they are team accounts, where you want multiple contributors to join your project.

Next are the different features: full integration with GitLab, GitHub, and Bitbucket, easy to use integrations to other sites through their integrations marketplace, but probably my favorite feature of all is the CLI.

With the Vercel CLI, it’s possible to take advantage of all the power Vercel has to offer right at your fingertips. You can buy a domain name, manage DNS records for your domains, deploy a node project straight to the Vercel platform (regardless of whether or not it’s stored in a Git repository), manage deployments… Literally anything you would normally want to manage through a web client, you can do on the command line. You never have to leave your development environment to manage your projects in production. Like Surge and Netlify, Vercel will also deploy your site with every push, can can create vanity URLs on it’s platform for every Git branch you create.

For me, having used Vercel for many years, this wasn’t a difficult decision to make.

That’s About All Folks

And that’s all she wrote! These are the decisions that lead me to develop my website the way you’re currently experiencing it. Hopefully these insights and thoughts that I’ve expressed have perhaps inspired you to consider creating your own blog, or experimenting with creating any kind of static website. Like I said before: there’s not much risk involved with using these platforms. It’s very easy, and almost always free, to create and experiment with different technologies and ways of creating websites. If you have any questions, please reach out to me on social media! You can find links below. I’d be happy to answer your questions or hear your feedback. Thanks for reading!

My Gripes about C-Style for-loops

Jake Varness — Fri, 25 Sep 2020 00:00:00 +0000

One of the most useful (and often one of the most fundamental) concepts when learning to code is looping. Loops are all around us, in virtually every language we know, and even if your language of choice doesn’t include primitive loops, there is likely a way to achieve executing the same block of code a fixed number of times, or by implementing some kind of basic means of iterating.

The first programming language that I ever wrote code in was Python, but the first programming language I really got a firm grasp on, and that I still use to this day, is Java.

Over Java’s history, it’s evolved immensely: JDK 11 has introduced modules, which is another way of organizing a codebase, JDK 8 introduced lambda functions (a feature which existed in many other langauges including C# and JavaScript for some time), and JDK 5 was when the enhanced for-loop was introduced.

JDK 5’s last update was over a decade ago, but regardless of how old it is, I can’t help but notice that sometimes people are continuing to use C-Style for-loops, and not only that, but I can find very heavy usage of C-Style loops in a lot of code bases in other languages as well, such as C#. I want to write this blog post as a caution to those who are continuing to use this loop, and provide reasons as to why whenever I see C-Style loops in a code review, I’ll almost always ask someone to refactor it.

Stability

My first big gripe about C-Style for-loops is that they are extremely prone to bugs. For every line of code you write within a C-Style for-loop, there could be an error in almost every line, and there can be potentially a number of bugs that are present before you even start talking about what’s in the loop. Let’s look at a simple example, printing numbers in an array:

int[] nums = new int [] { 1, 2, 3, 4, 5 };

for (int i = 0; i < nums.length; i++)
{
  System.out.println(nums[i]);
}

There’s technically nothing wrong with this code. We created an array, looped over each of the elements in that array, and printed each number out to the console. However, this loop is prone to all kinds of bugs. This code works without defects or error IF and ONLY IF:

i is not mutated within the loop, and nothing is stopping it from being manipulated either temporarily or permanently
i is always incremented by 1 after each execution of the loop
The < condition doesn’t change
i’s initial value does not change

If any of these things changes for any reason, we run the risk of encountering ArrayIndexOutOfBoundsExceptions,not looping over each element, or skipping elements within the array. For having the simple task of iterating over 5 numbers, this seems like a lot of risk to impose at runtime.

We can mitigate all of these issues by using alternative methods to looping over this structure. Since JDK 5,developers have been able to take advantage of enhanced for-loops, also referred to as for-each loops (yet again another construct that’s always been available in C#).

Using an enhanced for-loop, the code now looks like this:

int[] nums = new int [] { 1, 2, 3, 4, 5 };

for (int num : nums)
{
  System.out.println(num);
}

This code will iterate over the array, and on each invocation of the loop it will assign the a value to the variable num, then we can use that number without having to access the array! This addresses all of the concerns we had about C-Style for-loops in terms of stability.

Enhanced for-loops can be used with any data structure that implements Java’s Iterableinterface, and because the Collection interface extends Iterable, we can use it for every List and Set in our code.

Speaking of Collections, let’s discuss my next big gripe:

Time Complexity

Let’s start this discussion with another example. I have a List that I’m iterating over and I want to print each element in the List, and let’s start with a C-Style loop:

List<Integer> nums = new ArrayList<>();
nums.add(1);
nums.add(2);
nums.add(3);
nums.add(4);
nums.add(5);

for (int i = 0; i < nums.size(); i++)
{
  System.out.println(nums.get(i));
}

Again, same as before: nothing too fancy about this code, and it works fine. Now, let’s switch from using ArrayList to LinkedList:

List<Integer> nums = new LinkedList<>();
nums.add(1);
nums.add(2);
nums.add(3);
nums.add(4);
nums.add(5);

for (int i = 0; i < nums.size(); i++)
{
  System.out.println(nums.get(i));
}

This is the exact same output, and at face value the only real difference is the fact that we’re using a different implementation of the List interface. However, that’s an extremely crucial difference in this situation.

ArrayList is what it sounds like: it’s an implementation of the List interface that uses an array as it’s underlying structure. This means that extracting data out of the list can happen in constant time.

However, LinkedList is a linked data structure. With an ArrayList, the compromise for performance happens when adding elements to the list: the array has to “grow” by creating a new array with a larger size than the current underlying array, and moving all the elements to that new reference, and then garbage collection will take care of the rest. LinkedLists are really efficient during the population of the list because the structure can be created in such a way that growing the list can happen in constant time. However, this comes at a cost of accessing the data by index: each .get call will yield an n^2 time complexity, n being the index you’re trying to access.

Just by switching from ArrayList to LinkedList, we exponentially increased the time complexity of this code. However, enhanced for-loops can help mitigate this issue:

List<Integer> nums = new LinkedList<>();
nums.add(1);
nums.add(2);
nums.add(3);
nums.add(4);
nums.add(5);

for (Integer num : nums)
{
  System.out.println(num);
}

But why is this more beneficial in terms of time complexity? Remember: Lists are Collections which are Iterable. Each implementation of a List comes with a built-in Iterator which can be used to efficiently iterate over the list. Normally, Iterators are designed to be as efficient as possible. Iterators can be scoped to the class implementing them to allow them to have scope to the internal members of the data structure, which allows them to do things like access links within a LinkedList directly so that the next link can be fetched without having to loop over them like most .get operations would normally do.

Why wouldn’t we just use ArrayList everywhere if this was the case though? You can control whether or not your API uses ArrayList, sure, but that won’t stop other engineers from using some other kind of implementation in theirs, so guard yourself against these types of caveats by using the right loops.

Alternatives to Enhanced for-loops

What are some other ways we could achieve the same kind of results without using for-loops? In JDK 8, Java was introduced to lambdas andStreams, which aim to vastly improve our code by allowing us to manipulate structures by passing function references to Streams to perform work. We can write code like this to do the same kind of work:

nums.forEach((num) -> System.out.println(num));

This is a lambda that just calls System.out.println on a variable called num that gets initialized to a new element in the Liston each invocation. We can also simplify this code even further with some syntactic sugar:

nums.forEach(System.out::println);

Apart from enhanced for-loops and lambdas, the only other thing I could recommend is using the actual Iterator class in conjunction with a while loop:

Iterator<Integer> numIterator = nums.iterator();

while (numIterator.hasNext()) {
  System.out.println(numIterator.next());
}

This has less issues than a C-Style for-loop does, but it can still pose issues if .next is called more than once within the while block. Nevertheless, it’s just as efficient as an enhanced for-loop. If I remember correctly… I think Java bytecode compiles down in such a way that a while-loop with an Iterator and an enhanced for-loop are equivalent.

Cases for C-Style

So now that I’ve gone on and on about how you shouldn’t use a C-style for-loop, let’s talk about when you should actually use one.

There might be some cases when you simply cannot use an enhanced for-loop, or where the other methods I outlined don’t make logical sense. Maybe you code has to execute a finite number of times, and it’s not based on a collection or data structure of any kind. Maybe it’s based on some count, or a requirement stating that something needs to be done X-times.

I spoke about time complexity in this post, but truth be told enhanced for-loops are not the single most efficient loop there is. In cases involving the need to iterate over data, yes, enhanced for-loops are your best bet, but they come at a slight performance cost of needing to keep track of the state of the Iterator, as well as the additional calls to get the info out of the Iterator. For applications where performance, both in terms of memory and time consumption, it might not be wise to utilize Iterators or enhanced for-loops.

Conclusion

Thanks for letting me air out my grievances about one of our oldest language constructs! If you enjoyed this post,I’d love to hear your feedback on Twitter or Dev! Be sure to check out my blog for other posts like this!

Why I love Bulma

Jake Varness — Wed, 23 Sep 2020 00:00:00 +0000

I’ve never been good at styling things. My new blog might be some evidence of that! 😁 But styling a website isn’t just about picking color schemes: fonts, spacing, icons, etc… There’s a lot to consider when all I really want to do is create a few pages that look decent.

I’ve tried Bootstrap before, which has been a staple of the internet for many years, and Tailwind has gained significant traction over the last few years, but my go-to library for my CSS needs has been Bulma.

I think I discovered Bulma through Twitter. I think someone tweeted about it, and the more I looked into it the more interested I became. Hopefully just talking about some of the things I like about Bulma might spark more interest in it!

Components/Elements

Bulma has many components built into it that are very easy to setup, and are well documented! One big selling point that Bulma pushes is that it’s all in one CSS file. In the big world of programming, you can always take a bunch of different CSS files, and minify them into one file. The selling point here is mainly to emphasize that Bulma comes with no javascript bundle.

90% of the time, this isn’t a problem: all of the components Bulma has to offer work without any javascript. There is one exception to this rule though, which you can find in the documentation here.

TL;DR: navbar elements require some javascript to get them to appropriately collapse in mobile. The example they have on their site has a pretty extensive javascript that’ll handle multiple navbars. I’m usually only creating one as part of my layout, so I just slap some IDs on the elements I care about:

<a id="burger" onClick={toggleStyles} role="button" 
  class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
  <span aria-hidden="true"></span>
</a>

<div class="navbar-menu" id="navbarmenu">
  <!-- other elements here -->
</div>

Toggling whether or not to make the menu visible becomes trivial using a few selectors and an onClick eventbound to that burger:

/*
* Added this to toggle the is-active class. See:
* 
* https://bulma.io/documentation/components/navbar/#navbar-menu
* https://github.com/jgthms/bulma/issues/856
*/
const toggleStyles = () => {
  document.querySelector('#burger').classList.toggle('is-active')
  document.querySelector('#navbarmenu').classList.toggle('is-active')
}

One other quick tip: Microsoft Edge has issues with how Bulma has implemented navbars, but this can be fixed with CSS. Multiple work-arounds can be found here depending onyour use-case.

Customization

Bulma is very variable-oriented. Pretty much everything that has a default in Bulma can be customized. Colors, responsive breakpoints, fonts, you name it, anything can be customized!

This comes in handy when you have a site that has a very particular color scheme. It’s possible to customize the colors and sizes of a lot of elements just by setting a variable.

You can check out the full list of variables here. I’m one of those individuals who tries not to put CSS in too many places. As a stylistic preference, I’m not normally a fan of styles within HTML or JSX. I’ll normally write one Sass file, and overwrite Bulma’s variables as needed, and that way it gets applied throughout the whole site:

$primary: #c01045
@import '~bulma/scss/bulma.scss'

That color I chose was as close as I could get to spelling out “colors” in hexidecimal format, but in this example, we’re changing the $primary color of Bulma. Bulma has a variety of colors that are available by default, and they can be used for a variety of purposes, including denoting success or indicating something that the user should give some attention to. Other colors like $danger and $warning can be customized to help apply the same color across multiple components.

Responsiveness

Bulma is responsive right out of the box. There are a number of breakpoints that Bulma comes packaged with, and they can be used in conjunction with styles to ensure that elements are displaying only when they’re supposed to be.

Here is where an entire list of classes can be found that can help with displaying/hiding elements based on sceen size. For example, the following element displays differently based on screen size:

Please see the example on my blog here. This blog post was sourced from my blog and the embedded source won't work here :)

Depending on your use-case, this could be a very nifty trick up your Bulma sleeve.

Conclusion

I hope that I’ve sparked a little bit of interest in Bulma with this post. If you’ve got any feedback for me, I’d love to hear back from you!

Why was 0110 afraid of 0111?

Jake Varness — Wed, 03 Jul 2019 21:05:01 +0000

Because 0111 1000 1001!!! 😂

Talking to the Internet with the ESP32 Feather

Jake Varness — Fri, 08 Mar 2019 00:50:37 +0000

I've been away from a little bit, but I'm back to discuss what I've been working on offline!

My super awesome wife purchased some super awesome little development boards for me for Christmas a couple of months ago! I tweeted this a few weeks ago:

// Detect dark theme var iframe = document.getElementById('tweet-1097868615762804738-708'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1097868615762804738&theme=dark" }

The project currently displays random information about random Magic: The Gathering cards, but I'm eventually turning this into a little weather station for my desk. I figured I'd come over to my favorite little corner of the internet and show it off.

Let's Talk Hardware

Let's start with the board and other tech I'm using. All of these components are from Adafruit, an electronics company that makes and sells all kinds of interesting little components for tinkering and making anything your heart desires!

Specifically, this project uses:

ESP32 Feather
- A microcontroller packed with WiFi and Bluetooth capabilities, and a myriad of other things that make this board extremely versatile for IoT projects.
- Mine is the one that came with stacking headers.
OLED Featherwing
- A breakout board with a 128x32 OLED screen attached.
3D-printed case designed for Adafruit Feathers (link to thingiverse)

One of the neatest things about the Adafruit Feather line is the Featherwings that you can optionally purchase for the board. In the tweet, what you're seeing is the OLED Featherwing that's attached to the ESP32 Feather using the stacking header pins.

The 3D printed case is just cool :D

Why did I choose the Feather for this project? For multiple reasons. First and foremost, the Feather line has many options for breakout boards that follow the same form factor as the boards themselves. All are stackable, and can change the capabilities of your board simply by switching them out!

Another reason is the size. I have a number of different boards: an Arduino Uno, Arduino Micro, Raspberry Pi Zero, and a couple Raspberry Pi 2s. Raspberry Pi is an excellent choice if you need the full capabilities of a Linux OS in a tiny space, and the newer boards even come with built-in wireless receivers. I didn't really need Linux though, and thought that the Feather offered a little more than my Arduinos did, for a smaller or comparable size.

The third main reason has to do with the software involved.

How About the Software?

Feather boards can be programmed with the Arduino IDE, and you can utilize many popular Arduino libraries right out of the box. Writing Arduino code feels a lot like writing code for a Pebble watch: you can write a small C program that does a lot!

Here's a link to the code. (Please don't actually use SSID as your actual SSID or password123 as any password ever.)

Of the libraries I'm using, the most notable ones are:

ArduinoJson
- A magical library that allows you to parse JSON objects elegantly on the Arduino platform.
WifiClientSecure
- Allows you to connect to the WiFi and make HTTPS calls.
Adafruit OLED Driver
- Makes writing text to the OLED really easy.
Scryfall
- An online reference for Magic: The Gathering cards that has a REST API.

Honestly, the most difficult part of writing the code was just getting the board to connect to the WiFi and making an HTTPS call!

In a lot of programming languages, internet-related tasks are abstracted away to the point where you don't normally have to think about creating the connection to the internet and hand-writing an HTTP packet.

ArduinoJson makes it really easy to parse JSON bodies in Arduino though, so that part wasn't so bad.

The code is still pretty rough, and I haven't commented it, and it actually has a flaw in it that I need to fix:

After a while, the client becomes unavailable and stops making HTTP calls. I think I might have to figure out how to reconnect the client if it becomes unavailable. At first I may have thought Scryfall was disconnecting me due to rate-limiting, but I don't think that's what it is since I'm only hitting it every 1/3 of a second. If you know what I'm doing wrong, lemme know!

Final Product

The result is pretty cool I think: a small board that displays random information from the interwebs.

While this is just a small example of what this board is capable of, it's a good starting point for me, and it's going to be reminiscent of what my goal is for the board!

That's all I got for now guys. If you guys have any questions or if you know what I did wrong in my code, or if you liked the post, drop a comment and lemme know your thoughts!

32 Lines of Code

Jake Varness — Sun, 28 Oct 2018 16:04:14 +0000

At Cerner, we engineers work really hard to deliver innovative health care solutions. However, we also play (and hack) hard too!

// Detect dark theme var iframe = document.getElementById('tweet-1055902128353488896-353'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1055902128353488896&theme=dark" }

Among a list of Cerner's internal hackathons is a programming competition called 2^5. The rules for this competition are fairly simple: for 32 days you can make one submission per day that's 32 lines or less of code.

// Detect dark theme var iframe = document.getElementById('tweet-1055560488594087940-226'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1055560488594087940&theme=dark" }

This was my second year participating in the competition, and I gotta say... It's super fun. Here are a couple things I learned this year during the competition:

32 lines can be powerful

Ever deploy an enterprise application that was 32 lines or less that you never had to maintain? Me neither.

However, it's incredible how you can make simple applications using 32 lines of code. Take my submission that uses Vue as an example. Todo App is a pretty classic app to write as a hello, world! replacement for web development.

This little app just uses Vue and bootstrap to create a small application to list out all the things you have to do in a way that looks somewhat visually appealing. Will it sync up to the cloud? No. Was I able to add a button to each item that would allow you to delete it? No (would have made the submission more than 32 lines). Is it a good starting point for learning two extremely popular web technologies? Yes indeed.

Even if your 32 lines doesn't really do anything that's "cool" or "noteworthy", it can still act as a foray into expanding your knowledge. That's what a lot of my 2^5 submissions were meant to help me do: learn things I didn't know before.

The web now owns your favorite language

Don't believe me? Just look at my submissions:

Kotlin

If you write any Kotlin code or have read the docs, you know that Kotlin can be compiled into JavaScript to allow you to write front-end web application code, and it's also becoming (if not already) the defacto standard for writing native Android applications.

But did you know that you can use Kotlin to create web services as well? I certainly didn't until I found ktor, a Kotlin web framework for making web services.

I was able to write small snippets of code using Kotlin to write web services as well as web sockets.

For those of you who might use Kotlin to write applications, this is really great, as it means that your whole technology stack can be written front-to-back in Kotlin!

Swift

I wasn't going to write about Kotlin without giving at least a little bit of attention to the Apple fanboys/fangirls out there!

If you write code in Swift already, you probably know that you can write iOS and macOS applications using Swift and Apple's native libraries. However, did you also know that you can create a web service using Swift as well?

One of my submissions in Swift uses a library called Vapor to write a small microservice that calculates the Nth fibonnaci number.

Apple engineers can now also write their whole tech stack in Swift as well! All of this innovation is great news for developers because they don't have to make investments in multiple languages in order to perform the work they need to do.

Others

Of course Kotlin and Swift aren't the only languages that could bode good news for developers. I didn't have time to make submissions in all these other languages, but .NET Core is another great option, as well as Dart for all you Flutter enthusiasts out there.

If you look hard enough, you'll probably find a way to create a web application or microservices using your favorite language. Is it going to always be practical to do that? Not necessarily, but it's possible at least!

Technology is growing and becoming more diverse

When I graduated from college in 2014, 90% of my skillset involved experience in Android, WPF, and Java services. C# and Java was really all that I knew.

Looking back on the last few years of my career, I have learned so many different langauges. I have all of my submissions from the last two years in this Github repo:

jvarness / cerner-2-to-the-5th

Submissions for 2^5

cerner-2-to-the-5th

Submissions for 2^5.

Assume MIT license for all submissions.

View on GitHub

I went from knowing... Really only 2 languages to learning a little over a dozen in a couple of years!

Many of the languages I know now seem to really only have gained traction over the past couple of years: Go, Dart, and Elm have been in active development for quite some time, and each have grown in popularity drastically since I graduated.

Even if I haven't really developed full-fledged applications in these languages, I have at least had opportunities to learn them. Participating in competitions like 2^5 gives me an chance to become a little more diverse in my skillset.

Thanks for taking the time to read this, and I hope you guys enjoyed all the little snippets and stuff I shared today! If you have questions about anything I've written about, or about the code I wrote, drop a comment!

What Nursery Rhymes Teach Us About The DRY Principle

Jake Varness — Tue, 15 May 2018 17:23:04 +0000

For those of you who don't know, I'm a father! I have a son who was born just last year!

As a result, I've had to listen to a lot (and I mean A LOT) of different nursery rhymes. Some I've never heard before. Some I have, but I never really paid much attention to them.

That is until I heard the song 5 Little Monkeys Jumping On The Bed.

I googled it for you

The Plot

The premise of this nursery rhyme is very simple: there are a total of five ill-behaved monkeys that are jumping on a bed.

During the group's collective effort to jump as high as they can and cause as much ruckus as possible, each monkey takes turns falling off of the bed, causing bodily injury requiring the mother of the monkeys to call a doctor, who subsequently tells the mother "no more monkeys jumping on the bed".

The mother, whilst diligently attending to the monkey who is currently injured, neglects the fact that many other monkeys are also jumping on the same bed. As each monkey falls off, the mother tends to each child individually, one-by-one, until there aren't any monkeys jumping on the bed.

The Breakdown

There are multiple things at play here:

First, each monkey is performing a similar action, and each monkey subsequently fails in a similar fashion as well.

Second, rather than instructing all of the monkeys to behave, the mother decides to only focus on the monkeys that have demonstrated the problem until all are tamed.

Finally, once each are tamed, the monkeys each stop jumping on the bed. However, because each monkey is still sentient and each have a disposition to poor behavior, each monkey is likely to perform actions that could cause further harm to themselves and those around them.

Possible Solutions

We can't solve the mother's problem of having 5 monkeys that enjoy getting themselves into trouble, and try as we might to correct their behavior, they are still prone to misbehaving.

We also can't mitigate this issue by consolidating the monkeys and reducing them to 1 monkey, so unfortunately the mother might just have to live with her 5 little monkeys until they move out of the house.

For us programmers, however, reducing the amount of monkeys in our code is very possible!

The DRY Principle

Contrary to what the name might suggest, the DRY Principle has nothing to do with how wet ~~water~~ your code is.

DRY is an acronym that stands for Don't Repeat Yourself. This stems from the idea that your codebase shouldn't have duplicated code in it.

But why not? I mean, if the code works for what you need it for, why not just copy/paste it wherever you need it?

For the same reason that the mother should have stopped all her little monkeys from jumping off the bed: you're just going to keep getting hurt by it.

When you duplicate code, you duplicate all previous issues the code had, and gain none of the future benefits that future code changes can provide. All you get when you duplicate code is a monkey jumping on the bed that is your source code.

Take this code for example:

const isPrimeNumber = (number) => {
    return number % 2 !== 0;
}

Obviously this JavaScript code is problematic for a number of reasons: first, it assumes that if a number is not evenly divisible by 2 that it's a prime number. Second, it assumes that the variable passed in is always some kind of numeric value that you can perform integer division on.

Other engineers who see this code might decide that to keep the same behavior throughout the rest of the system, the code needs to be duplicated to other places.

Now that this function exists in multiple places within the codebase, the problem has spread to other places in the system. The monkey that used to be isolated has now multiplied and they are running rampant throughout the system.

What would have been better is if this function were extracted into it's own reusable component and updated to have the correct functionality in later versions. That would have tamed the monkey from the start!

Duplicating later versions of this function, however, does not remedy this problem. Duplication also causes a lot of manual intervention and unnecessary work to maintain and update in the future. Every time the original function is updated, the clones of it would need to be updated as well. If your code is going to have a monkey in it, ensure there's only one monkey: don't repeat your monkeys.

Conclusion

I hope that this article has been very informative and enlightening. As silly as this example is, it just goes to show you that you can find good programming advice and lessons in a lot of different places!

DEV Community: Jake Varness

Adding Social Media Images to a Gatsby Site

Alternative Solutions

The OG Image Playground

Configuring gatsby-plugin-satorare

Actually Using the Images

Conclusion

Creating a Radio Using HTML Canvases

Drawing a Radio

Conclusion

Building an ACNH Radio using HTML5 Audio Tags

Retrieving Music

Playing Music

Continuously Playing Music

Conclusion

Adding serverless APIs to Gatsby projects in Vercel

Adding an API

Consuming in Gatsby

Conclusion

Trying Out One-Line Dark Mode Tricks

Trying with 1 CSS Style

Other Examples

Wrapping Up

How I made jvarness.blog

Bear Bare Necessities

JAMStack

Next.js

Nuxt.js

Gatsby

Hosting

Surge

Netlify

Vercel/Zeit

That’s About All Folks

My Gripes about C-Style for-loops

Stability

Time Complexity

Alternatives to Enhanced for-loops

Cases for C-Style

Conclusion

Why I love Bulma

Components/Elements

Customization

Responsiveness

Conclusion

Why was 0110 afraid of 0111?

Talking to the Internet with the ESP32 Feather

Let's Talk Hardware

How About the Software?

Final Product

32 Lines of Code

32 lines can be powerful

The web now owns your favorite language

Kotlin

Swift

Others

Technology is growing and becoming more diverse

jvarness / cerner-2-to-the-5th

Submissions for 2^5

cerner-2-to-the-5th

What Nursery Rhymes Teach Us About The DRY Principle

The Plot

The Breakdown

Possible Solutions

The DRY Principle

Conclusion

Configuring `gatsby-plugin-satorare`