DEV Community: Linda Thompson

Project Breakdown - Snake

Linda Thompson — Thu, 15 Oct 2020 17:22:31 +0000

TL;DR - I made my own version of Snake! You can play the game here!

Background & Setting

While going through Wes Bos' Beginner JavaScript course, the first big project we did was creating an Etch a Sketch (here's my implementation)! It was so much fun, and gave me an idea - I could create the Snake game in a similar way!

If you've never heard of or played Snake before, it's an old phone game where you control a snake. You start off small, and you move around the board and try to eat pieces of food. For each piece you eat, your body grows a little bigger. If you hit the side of the game board or your body, the game is over. It sounds simple, but once your body gets long enough it can be tricky!

Since the Etch a Sketch also involves drawing lines on the screen, I figured I could use the same methods to create Snake! It's something I've wanted to play with making for awhile, but always seemed like too much work. Going through the course exercise made me realize that maybe it was more do-able than I thought!

Tech Used

The real star of this game is the HTML canvas element. This is an element that lets you draw complex shapes on the screen. I had heard of the canvas element before, but really hadn't had a use case for it. But once we used it in the course exercise, it seemed like the perfect "canvas" (get it?? lol) for building this game! This also uses some fairly straight forward vanilla JavaScript.

Lessons Learned

Holy buckets, I learned a lot while working on this - it turned out to be a bit more difficult than I thought! Here's a few of the little gotchas I ran into.

Setting the lineCap is important

I thought the food style was a good place to start - it's just a single small square that goes to one spot, then moves to a new spot when the snake triggers it.I set my lineWidth and fillStyle for the food, made a little random number function to get a random x and y, and put in the code that (I thought) would show a little square of food on the canvas. Saved and...nothing! This had worked in the Etch a Sketch project - why wasn't it working now?Turns out, you need to adjust the lineCap to be something *other* than the default for a single point to show. If you're drawing a full line it will work without the lineCap adjustment, but for this single point I had to set it to 'square', and then it showed up.

foodCtx.lineWidth = SIZE;
foodCtx.fillStyle = '#27ae60';
foodCtx.lineCap = 'square';

Making the snake grow properly

For this game, your snake starts as a single spot, then grows as it eats. The body also needs to stay a consistent length, until the food trigger makes it bigger. So it needs to move to new spots, and maintain it's length.Not really sure why it took me a bit to work out, but in the end I decided the best way to track the snake was to keep an array of my moves, as well as a variable storing the current length of the snake.

Basically, each time the snake moves, the moves array needs to update. It needs to add the new move to the array, and then it needs to remove the oldest move from the array. Then the line can be adjusted from the updated array list. This lets it always show as a certain length, and makes it relatively easy to grow as well!I also made sure to check the length of the moves array - when we first eat a piece of food, our array isn't going to be as long as the new body length needs to be yet, so we don't want to remove anything.

Covering the old moves

The other part of making the snake body move is covering up or removing the moves we no longer need. I felt like completely erasing and redrawing the snake each move would cause too much jumpiness. So my next thought was to just change the line color to white (the background color) and draw over the old moves. But I kept getting these ghosting artifacts, like it wasn't fully covering up the old moves.This was super weird to me, since the width and placement of the path were the same as before, and (at least from what I could tell) there wasn't a stroke on the path that I might be missing. I solved this by simply increasing the size of the path width to 5 points bigger than the regular snake size, and it covered it completely.

Though, now that I'm writing this, I'm seeing another option that might work nicely! Which ties into another decision I made in creating this...

Multiple canvases and z index

I had read that separating multiple drawings onto separate canvases and layering them over each other can be better for performance, especially if one needs to be adjusted a lot and one doesn't. I used this technique, putting the food on one canvas, and the snake on another. Since I stored the coordinate values for both and the canvases were the same size, detecting collisions was still easy.What I mentioned and didn't think of until now is that I might have been able to make a third canvas that stored the removed values! Then I could have had that line draw over the removed points in white, and I may not have run into the artifacting issues I had drawing on top of an already existing path. I'll have to test this out later!

I also ran into the importance of setting the correct z index for canvases. I layered the snake canvas over the food canvas at first, and when the snake would run over the edge of the food (if the new food generated next to the tail of the snake), when an old snake body part would be painted over it would also paint over a portion of the food. Setting the food canvas on top prevents this.

Detecting body hits

Detecting if the snake head has run into one of the game board edges was easy - I know the width and height of the board, so I just check for hitting zeroes or hitting the width/height numbers.Detecting the body hits was also seemingly easy - I had an array of all the locations of the body points, after all. But the thing that always seems to trip me up in JavaScript is searching through objects - and naturally, I was storing each coordinate as an object of x and y values.I thought the .includes method on arrays would work great for this - however, it can't read into the objects, so it didn't work. Turns out, what I needed was the .find method instead!

Using .find, you can look at each point in your array, and see if you have a particular key that matches a particular value. Using this, it was actually as easy as I thought to detect if the current head ran into a value in the body array - just had to find the right JavaScript method to do it!

if (body.find(point => point.x === headX && point.y === headY)) { gameStatusUi.innerHTML = ` Game over! Hit your body. `; 
endGame(); 
return; 
}

Setting canvas focus

The last issue I ran into was starting a new game. The game starts automatically when you load the page, but once that game ended I wanted a way for people to start again. So I set up a restart button, and got the board clearing and the necessary values resetting, so you always start from a score of zero with fresh coordinates.But...I couldn't get the game to actually show moves on new rounds! It was the weirdest thing to me. And arrow keys, which had the default event prevented, were now not preventing the default (an arrow key's default is to move the viewport around). Something wasn't right.I stumbled on the answer to this by accident - during one of my attempts, I clicked on the screen, and suddenly the arrow keys were making the snake move! Then I had one of those "ah ha" moments - the canvas must be losing keyboard focus!

Turns out, this was exactly it! I adjusted my start game function to explicitly set the snake canvas to have focus as the last thing. And then everything worked just like I wanted it to. :)

Final thoughts

In all, this took me about 7.5 hours to create. Which...feels like a lot to me, honestly, but involves a lot of reading of the canvas specs, troubleshooting various things, and a little bit of styling, documentation, and code rearranging. So all in all, not that bad - and definitely faster than I could have created it a year ago. :) Progress is progress!

There's always room for improvement - I might eventually test out the third canvas idea, and I would like to make it so that once the game starts, the snake moves automatically in the last given direction (like the original does) - but overall, I'm very pleased with how this turned out. :)

You can view the code for the full game on my GitHub here.

Coding Practice - Counting Valleys (Hacker Rank)

Linda Thompson — Thu, 13 Aug 2020 20:28:37 +0000

Counting Valleys Problem

This is an easy rated problem on Hacker Rank, but I solved it on my first try so I'm fairly excited! All those years of doing Advent of Code has paid off! :) So here's the breakdown of this problem, and my solution.

The Setup

We're supplied with the number of steps someone takes on their hike, and an array that lists if each step is up or down. Their hike always starts and ends at sea level, and we're tasked with figuring out how many valleys (how many times they go down below sea level, and then come back up to sea level) they encounter during the hike.

My solution

To me, the main part is tracking what the person's sea level value is. Then, we just need to count the number of times the sea level value goes from -1 to 0! This is the only time they're coming out of a valley and back to equal. So we can basically read through the array and update the sea level value for each step, and then when it goes from -1 to 0 (which will only happen on an up step), we increase the valley count! Then return the valley count when we finish going through the hike array.

/* we have a few provided values: 
n - total number of steps 
s - the array of directional steps 
U - an up step 
D - a down step 
*/
function countingValleys(n, s) { 
  let seaLevel = 0; 
  let valleys = 0; 
  for (let i = 0; i < n; i++) { 
    if (s[i] === 'U') { 
      seaLevel++; 
      if (seaLevel === 0) { 
        valleys++; 
      } 
    } else if (s[i] === 'D') { 
      seaLevel--; 
    } 
  } 
  return valleys;
}

Pretty amazed this worked on the first try, in all honesty! lol Let me know if anything doesn't make sense, I'd be happy to walk through this with you!

Happy coding, friends!

Building an RSS Feed in Nuxt with Nuxt/Content

Linda Thompson — Sat, 08 Aug 2020 00:05:49 +0000

Update! Oct. 23, 2020 - Finally decided to look into why I always have to add all the line breaks back into my posts on my Dev account. Turns out, RSS feeds don't actually work well with pure Markdown? They expect the data in HTML. Then, Dev's converter puts it into Markdown. So, it parses the Markdown into, well, Markdown, and doesn't preserve the spacing and line breaks because it's expecting paragraph tags.

The Content module says that it can run the create function we make after the markdown is parsed into HTML, but to use it that way you have to set up a false page (so you don't get your header/footer info), read the entire file, and then use that. The work around I found is using a package called @nuxtjs/markdownit, which is used to parse Markdown into HTML in Vue files. It works in our config file, as well, which is where I used it! I don't fully get all the settings, but the defaults worked for me, so I've updated the info below to include this. This will them make your RSS feed have HTML files, so Dev's converter will read it properly and keep the spacing. Horray!

I like cross posting my blogs to Dev.to - I've got a little bit of community there already, so being able to have both my own place for my writing and a shared space is nice. Since I just migrated my blog to my new site, I needed to get an RSS feed set up so I could connect it to my Dev account.

It was pretty easy to do with my last blog that was built with Gridsome (another Vue framework), so I figured it shouldn't be too hard to do with Nuxt, which is what I built my current site on. Right? Well, it wasn't the most difficult thing I've done building this site, but it was a little more confusing than I thought! So I figured I'd write out the steps I took to get it to work.

First - Add the Feed Package to your Project

There is already a Nuxt package for managing RSS feeds, which is awesome! So I added that to my project with npm install --save @nuxtjs/feed. That part was easy. :)

Update Also, install the @nuxtjs/markdownit package and save it as well. npm install --save @nuxtjs/markdownit

Second - Configure the Plugin

This part took a little finagling on my end.My posts are stored and displayed on my site with the Nuxt Content module, which has been a really handy way to manage them! I'm using it to manage my project list for the portfolio part of my site as well, and it's worked really nicely.

For a quick rundown - it works with multiple types of files (I'm using Markdown for the blog posts and JSON files for the projects), so I can keep my files on GitHub with my code. Content pulls them in, parses them, and displays them pretty nicely. It's got a MongoDB-like format for fetching the data, and uses it's own Vue components for displaying them.

There's also an example on their docs for a possible RSS integration setup, which seemed really promising. However, there were a few things that weren't clear to me, but by combining that example with the one on the feed-module site, I got it figured out.

I had two main problems:

I wasn't quite sure where to put the code I needed to add, outside of adding the module name.
I struggled with getting the actual body text of my post, to add it to the feed.

Part One: Where to Put it

You can put all of the code you need inside the nuxt.config.js file. I'll show you the code I ended up with after I cover how to get the data, so it will all make sense.

You'll need to add the feed-module package to the modules list, and then there's a feed option where you can add some functions and variables to get the data you need for each post.

Important side note! Make sure you list the @nuxt/content module BEFORE you list the @nuxtjs/feed module. That way, the feed can access your content.

Part Two: Getting the Body of Posts

Honestly, the way I went with this may not be the best way. But it works! Which is good enough for me for now. I'll update here if I end up moving it around a bit, to try and keep this relevant.

When you want to display the body of your post on your page, Content provides a component to use - <nuxt-content>. You pass that component the document you want, and it parses the JSON the body's been converted to and returns your information, and then you can style that as you see fit.

This is great for displaying the posts - but doesn't work as well for getting the text of the post to your RSS feed!

The only way to access just the text of the document, before it's converted into JSON, is by using a hook: content:file:beforeInsert. Inside that hook, you'll have access to an internal property called text that has just the plain text of the document. Content uses an example of this hook in the advanced section of their docs to show how you could get the reading time of your posts. (I also did this today, because I love seeing the reading time! But that's another story.)

Conveniently, this piece can also go in your nuxt.config.js file! I used this hook to access the document.text property, and simply created a new field on my posts called bodyPlainText, that I can then access anywhere I can access my posts.

Update - I modified this last part - I'm now pulling in the markdown-it package in this hook, and passing the document.text into the markdown parser, then passing that result into a new field (which I renamed to bodyText). You'll see this in the code below.

Third - Putting it All Together

With these two parts figured out, here's what I ended up with, with comments to add context (hehe):

export default {
  // This is the start of your config file. There's other parts here, like mode, target, head, etc that aren't important for what we're talking about. But you'll find a part called modules, which is where we start:
modules: [
  // content listed before feed!
    '@nuxt/content',
    '@nuxtjs/feed',
    '@nuxtjs/markdownit',
  ],
  // This is a new piece you'll need to add, it won't be in the default file.
feed: [
  {
    // this sets up where to find your rss feed - mine will be called feed.xml, and located in the root of my project
    path: '/feed.xml',
    // this function will be what sets the data that goes into feed.xml
    async create(feed) {
      // the main options of what the page is called, desc, and where to find it as a full path
      feed.options = {
        title: 'LindaKat Blogs',
        description: 'Tech Writings from Linda Thompson',
        link: 'https://www.lindakat.com/feed.xml',
      };

      // we're going to require the content module so we have access to $content, then we're going to fetch all of our posts. If you're using eslint in your project, you might need to ignore this line because it's requiring something inside a function. Will work just fine, it might yell at you though. :)

      // eslint-disable-next-line global-require
      const { $content } = require('@nuxt/content');

      // get all the posts we have
      const posts = await $content('blog').fetch();

      // then, we'll loop over each post and grab the data fields we want to show in our feed. The name of your fields might be different than mine - that depends on how your data is set up in your Content settings.
      posts.forEach((post) =&gt; {
        // the url of the post is set first
        const url = `https://www.lindakat.com/blog/${post.slug}`;
        // then we do addItem, and give it all the details we want. You'll often see a date field here too - I don't have one because I don't post my dates on my posts.
        feed.addItem({
          title: post.title,
          id: url,
          link: url,
          description: post.blurb,
          // this is what we did in part two! Accessing that body text, that we converted into HTML
          content: post.bodyText,
        });
      });
    }, // this is the end of the create function

    // cacheTime sets how long the feed is cached - this is what they had in the feed-module example, and I've left it as is for now. Type sets what kind of feed it is - you can do atom or json as well.
    cacheTime: 1000 * 60 * 15,
    type: 'rss2',
  },
], // this is the end of the feed settings

// This is our hook! We check if the document is a markdown file (meaning it's a blog post in this case), and if so we get the reading time and set it to a property on the document, and also set our plain text of the post to a property.
hooks: {
  'content:file:beforeInsert': (document) =&gt; {
    // first, we're going to bring in our markdownit file - in JS, it's written as markdown-it, but in the package.json and modules bit, there's no dash - hence the eslint-disable line. It will work fine - it just doesn't get that the package name is written differently
    // eslint-disable-next-line
    const md = require('markdown-it')();
    if (document.extension === '.md') {
      // ignoring eslint again :) same warning as earlier
      // eslint-disable-next-line global-require
      const { text } = require('reading-time')(document.text);

      document.readingTime = text;
      // Now we pass our post's plain text into the md.render file, which will convert it into HTML
      // Then we store that value in our bodyText variable on our post
      const mdToHtml = md.render(document.text);
      document.bodyText = mdToHtml;
    }
  },
}, // end of the hook setting
// We'll also need to add in some default settings for the markdown-it package - this part I don't quite understand yet as far as what everything's doing, they're just the default settings listed on the package's GitHub page
markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    use: ['markdown-it-div', 'markdown-it-attrs'],
  },
// a few other default options here
} // end of export

Here's a link to my full nuxt config file without the comments, if that helps you see it better!

So we set up the RSS feed onto the root of our project, set the data we want to show for each post, and pass it to the feed. And we've got our hook, so we can access the plain text body of our post and get that data to the feed as well. Then, all you should have to do is add the link for your feed to your Dev.to settings, and it will automatically pull in your posts!

It won't carry over any style settings, so Dev saves it as a draft first so you can go in and make any fixes you might need, but it's a lot easier than copy pasting the whole text, or having to re-write it completely!

I think this stuff tends to fall into the land of "most devs know where this goes and how to do this" in examples. As a fairly new person, I try to write about it when I come across these situations, because it's not as clear as someone more experienced might think!

I hope this helps someone! Please feel free to reach out if anything is unclear or you need some help.

Happy coding, friends!

TIL - Text-decoration Shorthand!

Linda Thompson — Thu, 06 Aug 2020 23:26:04 +0000

While I was testing my new dev site on different browsers today, I noticed that some of my links didn't have their text decoration showing. This was odd to me, since text decoration has been a thing for a long time. So I did a little investigating, and learned a bit about the text-decoration shorthand.

It combines a few different properties:

text-decoration-line
text-decoration-color
text-decoration-style

And a new property: text-decoration-thickness! However, the thickness property is only supported in Firefox right now - it's part of CSS4, so not officially, fully available yet. So it doesn't work in Chrome or ~~Safari~~ yet. (Actually, thickness is available for Safari right now too - just not as part of the shorthand. It has to be declared separately.) Just happens to be my luck that Firefox is my current browser of choice. :)

So in my code, what I had was

text-decoration: 2px solid underline var(--lightBasic)

But the 2px part is the thickness property, so wasn't showing properly. Removed that, and all three browsers looked the same!That's my interesting tidbit for the day. 😎 Happy coding, friends!

Do I Own This? A New Project!

Linda Thompson — Wed, 19 Feb 2020 04:45:14 +0000

I have this very first world problem.

You see, I love nail polish. Can't get enough. And so, most times when I'm at the store, I browse through the polish to see if anything is speaking to me.

The problem is, I often see colors that I like - but I have so many at home, that I can't remember the names of them all! And so every time, without fail, I wonder - "Do I own this"?

I do this with shirts, too - I'm a fan of basic, solid colors of shirts, but can never remember which colors I already have when I'm out at the store. I try to remember to take a picture of my closet before I leave, but almost always forget, or eventually lose the photo or don't update it once I buy new things.

So! I want to make an app that can help me quickly & easily check when I'm at the store, and never have to not buy something because I can't remember if I already own it or not.

I have a few ideas on this, but I'm still uncertain on how I want to do things. So this is a bit of a brainstorming session, in the hopes that I either make some decisions and/or can get some advice. 😊

UI Factors

For the main page, I want to keep it simple. I'm envisioning a nice, clean grid, that just shows color swatches of each color. Rounded corners, probably, because I love rounded corners and think it looks a bit more polished that way. (HA! What a punny joke. Sorry, I couldn't resist.)

I'll need to have a search/filter bar somewhere, so that I can view just a particular shade or brand if desired. I can't decide if I want this to always be visible, or if it should be behind a little menu option? I'm leaning towards always visible as I think that's both more accessible & faster - but I can't see it in my mind's eye. I want the color grid to be the most obvious, visible thing, but I think a filter bar should be on the top if it's going to be visible all the time. Maybe I can make a little side tray that comes in and out when needed? I don't know. Both would look nice, but I can't see this part in my mind yet.

Then I want a way, when a particular color is clicked, to show it's name, brand, color group, etc. Normally when I'm at the store, I'm looking at a particular brand at a time, so if I can filter my view to just that brand it's often easy to get an idea of if I've got a particular color or not. Then I can click on it to verify before I write it off. Or I can filter by color group, so I can decide if I've already got enough purple shades (I do) or if the shade that's calling to me is missing from my group. I don't think the color's name or brand needs to be visible on the main view, but it needs to be easily accessible for verification purposes. Hmmm...or maybe I can fit the color name underneath each swatch? I don't know, some of these names are weird and long and I don't know that they'll fit nicely.

Lastly, I'll need a way to add new colors, so I can keep my collection updated. This can definitely be stowed away in a menu, or in a small button somewhere. A simple form for filling in the information will work, then it'll need a way to upload a picture. I'll have to think on the pictures, as I'll want them to stay as uniform as possible, but that will really be up to the person taking the pictures (me).

Back-end Factors

This is where I'm struggling the most. I'll definitely need a database to store all of this data. But I'm trying to think now about how it might be used in the future - and I think it's possible, if I can get the UI stuff down, that others might want to use this as well. So I want to consider writing this in a way that it can be hosted somewhere, and a database can be kept up. Which is not something I've really had to deal with on any projects I've done so far.

Everything so far has just been for me, so it's been hosted on Heroku or a Github page. And if I've needed a database I've used a MongoDB free cluster and just tinkered around, or I've used a JSON file. Which, I could probably set it up to use a JSON file - I know it's easy and fast to pull the data from, & I'm sure I could work out how to write the data to it so that it stays clean and organized. It would be personal for each person who uses it, which (since I don't intend to add any shared items) would be fine, but then each person would have to store the site somewhere on their own.

However, it feels like I should use a legit database for this, where each person can just have their own collection stored. Plus, more real world practice for me! But I don't have much real experience with actual databases, in a production sense. I don't have the funds to pay for a lot of data storage (on the off chance this somehow turns out amazing and goes viral), but I don't think there's much that's really free in terms of data storage or server options. So I'm not really sure where to go with this.

It might honestly be worth it to only worry about myself for now, and host it on Heroku with either a JSON file or a MongoDB cluster. For my own data, it'll be free, which is a big concern at the moment. But I would like to consider releasing this for the public in the future, if I can get this really finished. So I want to think about how I can set it up so that, even if I do it just for me for now, it'll be relatively easy to be able to expand the hosting. I don't want to completely rewrite anything if I can help it!

I'm also concerned, if I'm able to push it live to others, about it responsibly using data & phone storage - since mobile will be a main use case. So I'll have to look into that, as well. This, along with collections potentially being large, is a main factor that keeps me from considering something like local storage for the database. Plus, the data will need to persist so someone's collection doesn't just disappear, and I don't think local storage is the best option for that.

Alright, so the idea is out there! Now to actually build the dang thing. 😎

If anyone has any suggestions, please reach out & let me know! Especially if you've got thoughts on the back-end part of this, which is what's holding me back the most! It's entirely possible I'm way overthinking this, and should just focus on building for me and getting a working version up before I worry too much about the world at large. But I'd love to hear your thoughts on anything I've mentioned here! I intend to write about my process as I go along, so this is just the beginning. 💅

AoC (Advent of Code) - 2019 Day 1!

Linda Thompson — Sun, 01 Dec 2019 10:11:50 +0000

Advent of Code is finally here, and I'm so excited!! This is such a fun code challenge, and I was really bummed when I couldn't keep up with it last year, so I'm determined to stay on it this year and follow through until the end!

Spoilers will follow from here on out - avoid until you've solved the problems if you want!

This year is set in space! I think it'll be really fun to see how the story unfolds.

Day 1, thankfully, felt pretty good!

I was able to refresh on how to use the array methods map and reduce, along with some recursion practice, which was good! One of the rare days where I felt like I knew what I was doing, which is always nice.

I'm including these in today's post, but might start to exclude the first few lines in future posts. Basically, each day will start with reading in the input file, and parsing it as an array of either strings or numbers, or otherwise setting it up to be read. Think that will be a given once enough of these posts are done!

// Read in the input file, get it into an array format, 
// & store the test input as well
const fs = require('fs');

const data = fs.readFileSync('../2019 Solutions/inputs/day01input.txt').toString();

const input = data.split('\r\n').map(Number);

const testInput = [14, 1969, 100756];

// The formula needed to calculate the required amount of fuel
//  - mass / 3, round down, -2
function formula(mass) {
  return Math.floor(mass / 3) - 2;
}

// Part 1 - perform this formula on each input value, 
// then add all of those values together
const fuelOfMass = input.map((curr) => {
  return formula(curr);
});

const totalFuel = fuelOfMass.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(`Part 1: ${totalFuel}`);

// Part 2 - turns out, we need to process each input value through 
// the formula until the number is as low as it can get 
// and still be above 0, then add all of a single input's values together

const totalFuelOfMass = input.map((curr) => {
  let value = curr;
  let accumulator = [];

  do {
    value = formula(value);
    if (value > 0) {
      accumulator.push(value);
    }
  } while (value > 0);

  return accumulator.reduce((acc, curr) => {
    return acc + curr;
  }, 0);
});

// then, we take all of the combined values and add those together
const newTotalFuel = totalFuelOfMass.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(`Part 2: ${newTotalFuel}`);

If you'd like to read the full breakdown for what today's puzzle required, you can check it out on the main site. You should be able to see it, even if you're not signed in.

Part of this year's new changes on the official subreddit is a poem contest! Each day, you can submit a poem about the challenge itself, the creator, or general programming, and every few days they'll reward some people with reddit points and make a collection of their favorites for an end-of-year collection. I love poetry, so couldn't resist getting in on the fun for at least one day! Enjoy!

Adventure awaits!
Discover the cosmos
Venture into the unknown
Earn fifty stars to save Christmas!
No one goes alone, however
There's friendly folks to help

Overly dramatic situations await
Find Santa and bring him home!

Come code with us!
Outer space is calling
Don't be afraid
Elves will guide the way!

Anyone planning on doing Advent of Code this year?

Linda Thompson — Wed, 20 Nov 2019 01:21:44 +0000

I wasn't able to keep up last year, but really love the challenge & intend to try again this year! Anyone else participating or interested? Check out the site if you've never heard of it before: Advent of Code

Stamp Inventory Refactor - part 1!

Linda Thompson — Wed, 06 Nov 2019 06:30:53 +0000

As the title suggests - tonight was spent making some reasonable progress towards updating my stamp inventory site!

A little background on this - I currently work for a print shop, and am the only person who makes self-inking stamps. A few years ago, when I first started learning to code, I decided I wanted to make a little site that could help me keep track of how many of each size stamp I have left in inventory, so it would be a bit easier to see when I needed to reorder things.

At the time, I had taken a few online courses on spreadsheets and SQL, and felt like I might be able to make something that would work well. After a few failed attempts, all I was left with was frustration and a broken site.

Finally, I managed to figure out how to hook my site up to a Google spreadsheet, and had a real working site! I was so stoked. It took a lot of hair pulling and it wasn't the absolute best, but it worked and updated properly and I showed it off to everyone I could.

Fast forward a few years. I want to make stylistic changes to it, but remember the frustration and haven't touched the Google sheets API since the first time I made this work. I've finished a few courses that used MongoDB. I need new projects on my portfolio to help with the job search.

And so, the decision to refactor my site was made!

I've been slowly attempting to work on this off and on for a few weeks - I was able to dismantle all of the jQuery and Google sheets things I wasn't going to need, and through following some FreeCodeCamp material (and my memory of my other courses) got the basics of the Express server in place. But I hadn't really made much progress on actually putting in the database and getting the site to talk to it.

Well, tonight I finally really got down to it, and made some progress! I fleshed out the Express server part a bit, got my MongoDB cluster set up on Atlas and the connection string saved in my project, and cleaned up the last bit of the file structure. Doesn't feel like much to spell it out, but it's more direct progress than I've made since I started working on it again, so I'll take it!

Mind you, I can't get it started on my local testing site yet. 😜 But I'm fairly certain I can get that working tomorrow (🤞). I just ran out of time tonight, since I was working in the local library and they were about to close.

What I still can't decide on, is how I want to do my schemas. We carry 5 different sizes of stamps, and for each size I keep track of the die box (the actual stamp part), and the mount (the holder for the die box). I'm also loosely keeping track of the 3 ink colors, and the gloves and 2 sheets we use to actually print the design and flash it onto the stamp.

Do I want to keep each individual piece as it's own type, that just has a name and a quantity? This seems like it might be the best option. However, I do want to have some check boxes for if some of the accessory parts are used, and would need a way to grab the current value for those and decrease them by the same amount (or automatically decrease it by 1 or 2, for the gloves and print sheets). Seems like I should be able to do that....but I'm not sure how difficult it will turn out to be.

I could also count each size as it's own thing, with a value for the die box and a value for the mount. This might make it easier to associate those 2 parts together, since more often than not they'll be used in the same quantity. But for some customers, we make new die boxes but reuse the mounts, so it won't always be equal in usage. And I still want a check box for the print sheets.

Though I could maybe work in a double tap / hold functionality to the space where I show those quantities, and change them that way....wouldn't be quite as nice as changing it at the same time as the stamp option, but we do have times where people order more than one size so it wouldn't be that big of a deal to change each item separately. That make actually work really nicely, since I'm currently using a form to mark each item so anything will be better than that.

I would also really like a nicer way to keep track of the inks....still trying to decide on the best way to do that. It's basically eye balled each time a die box gets filled, so it's not an exact, pre-filled amount that goes into each one. Which makes keeping track of how much is used a bit more difficult.

Clearly I have some more thinking to do! First task is to get it so I can actually view the site and access the database at all. Then I can make a decision on the schema so I can start putting actual data into it! 😊

Have you ever moved to a new state for work?

Linda Thompson — Wed, 11 Sep 2019 05:01:24 +0000

I want to move to CO in the relatively near future - I'm fairly certain there's some good opportunity there, and I really want a change of scenery in general.

However, I've never moved to another state before as an adult. How do you find and land a job in a place you don't live close enough to for in person interviews? How do you find a place to live if you don't already live nearby?

Any tips or gotchas would be appreciated! Plus, I'd love to hear your stories on how the journey went, what worked and what didn't, and if you're pleased with the move!

100DaysOfCode R2D27 - Rockin' (Web)Sockets!

Linda Thompson — Wed, 31 Jul 2019 05:29:23 +0000

This is a cross post from my personal blog. Comments are welcome below!

I started the last project in my Node course - a chat app! I did the groundwork videos yesterday - getting libraries installed and new files/directories set up.

Tonight, I started getting into the actual code. For this project, the main library we're using is Socket.io, which has been really cool so far! It's got me learning a little bit about web sockets, which is a term I've heard before but haven't really paid attention to.

To my understanding - web sockets are an upgrade to HTTP request/response patterns. They create a connection between a server and a client (or multiple clients!), and keep that connection open so that both sides can send data to each other even faster than you're able to with standard requests. I don't fully understand HOW it does this - just that it does.

Socket.io builds on top of this, providing some nice API magic to make it even easier to work with server/client connections. What's really been cool to me is that it's centered around sending (emitting) custom events - so you can name your events anything you want! And then you can send along whatever data you want with it, and just set the other side to listen for that custom event. (It does have a few built ins as well, like connection and disconnect.)

Let me share a simple example we worked on to play around with this. This will show us a basic counter value - then once a button is clicked, it will update the value and show us the new value.

We started with an index.js file (our server file), which is running an Express app. (The io word you see is the variable that's set to our Express server, which socket.io is controlling.) In this file, we set up a variable for a counter, and then when a new client-side connection comes in, we send (emit) a custom named event, and the current value of our count variable.

let count = 0;
io.on('connection', (socket) => { 
  socket.emit('countUpdated', count); 
})

The socket.emit phrase is the key - that's what sends the data off to our client / browser side of things.

On our client, we set up a listener function that listens for the custom event name we just created. When it detects that event being sent, it grabs the data that was sent along with it, and does something with it (in this example, just logs it to the console). (I should note - socket, in this instance, is also a variable defined in our file, which accesses the server we've got running.)

socket.on('countUpdated', (count) => { 
  console.log('The count has been updated!', count) 
})

So now, when we first connect, our server is calling an event and sending the initial value of count, and our client is picking that event up and logging the value to the console.

Then, if we click a button (which is set up in an html file) on the client side of things, we want to increase the value of count. So we grab the button click event in our client file, and fire off an event to our server, to signify the button was clicked. Again, the name of our event is custom - it could be called whatever! It just has to match on both sides.

document.querySelector('#btnIncrease').addEventListener('click', () => { 
  socket.emit('increment') 
})

Once our server detects this event, we then want to increase the value of count, and send that first event back with the new count value. (This little call takes place inside the io.on('connection') call we did earlier.)

socket.on('increment', () => { 
  count++; 
  io.emit('countUpdated', count) 
})

And that's it! Now when we first open the browser to our site, we get a message with the initial count value. And each time we click the button on the page, our client side detects the button click, sends an event to our server, adds 1 to the counter, and the server sends the new value back to the client!

You might have noticed that sometimes I used socket.emit, and sometimes io.emit. There's 3 basic ideas / use cases that were introduced in the course (so far):

socket.emit - The socket keyword ties to a specific client, so it'll send events only to that particular client.
io.emit - Using the io keyword will send the events to all active, connected clients
socket.broadcast.emit - This isn't in the examples above, but this will send an event to all connected clients EXCEPT the specific client you're in (we use this in the course for when a user logs in or out - you want others to see that a new user has joined or left, but you yourself don't need to see when you joined a chat!)

It's been really fun tonight, building out the core functionality for our app. It takes so little code to send and receive information on both ends of the app! It's boggling my mind. 🤯 I'm excited to get back to it, and keep working on this project! I already have ideas for how I'd like to use this information. 😊

100 Days of Code - R2D18 & 19

Linda Thompson — Fri, 19 Jul 2019 02:51:05 +0000

This is a cross post from my personal blog. Comments are welcome below!

I've uncovered two new things about Gridsome this week!

First - it's not going to tell you when something's failing on it's own (Vue fails silently).

Second - how to change the first thing.

So - the past two days, I've been struggling to figure out why I couldn't run the development command on my blog code, which is set up using Gridsome. It made no sense to me. The last time I'd used it, it had worked! But now, when I'd run the develop command, it would get about 43% of the way through building everything....and just freeze. Often on a different file name, so it didn't seem to be related to any of the specific files it listed when it froze.

I deleted the .cache folder, as it suggested in the docs, as well as uninstalling and reinstalling the node modules. No change. I tried an older version of Gridsome, in case a new change had caused it. Nothing. I tried it on my desktop (since I'd noticed the problem on my laptop), which is where I'd last run it successfully. Same problem.

Wtf?

So I broke down, found the Gridsome Discord group, and asked my question in the help channel. And blissfully, a user came to my rescue! They had a screenshot of the error message they were getting (which I'd never seen), which showed the file that was causing all the trouble.

When I'd last worked on my blog, I'd mostly commented out a page that wasn't working right (I wanted to keep the code so I could keep working on it, but it wasn't working on it's own). I didn't realize it, but I didn't actually run the develop command after I did that. It built just fine, so I didn't think anything of it. But the way I'd commented it out, I had left the template tag open (commenting out the closing tag), which it apparently hated. I would too! 😝

So I moved the closing comment tag up so that the template tag closed, and learned that a template also has to have at least one element in it. So I moved the comment tags again and just left a (seemingly) blank layout element in it - and miraculously, the develop command worked again!

So. Dang. Thankful! I'm decent enough with trouble shooting, but with a framework I'm not familiar with, that uses a JavaScript framework I'm not familiar with, and with no obvious error message....I was so lost. So glad I found the Discord group and got a response!

So the next thing was to learn how the heck I get Vue to show me an error message when something goes wrong, so I can have a better shot at fixing it on my own! The Gridsome docs, in the trouble shooting section, mention a line of code to inject to show errors instead of it failing quietly....but no mention about where that codes goes.

Luckily for me, I was able to figure this one out pretty quickly! I did this by starting to click on the Gridsome config pages in my project until I found one that looked promising, then looked up the docs for that page's API. lol 😉 And lo and behold, I found a command that looked awfully familiar!

So, in the gridsome.server.js folder, inside the module.exports function, I wrote this line of code:

api.chainWebpack(config => { 
  config.mode('development') 
});

After saving and running the develop command again, everything still works! And when I stopped the server, moved one of my comment tags in the problem file from before, and tried to run develop again, I got the error message when it failed to build!

So now, should I have future errors in my files, I'll be able to actually see the error messages, which will help A LOT in trouble shooting! 🙌 Hooray for learning new things!

Hosting an App with Heroku and Netlify (if you've never done it before)

Linda Thompson — Mon, 19 Nov 2018 03:24:31 +0000

Over the past 7 months, I've been hard at work on the Google / Udacity Mobile Web Specialist scholarship program. It's been an intense, and rewarding, experience, and I learned a ton of interesting things!

All 3 of the projects we had were centered on creating a Restaurant Review app. We were given the starter code and a local server, and gradually made the project more accessible, more responsive, and allowed it to work offline. We dealt with service workers, local cache, and IndexedDB. A user needed to be able to mark a restaurant as a favorite and post new reviews of restaurants, either online or offline, and have those offline edits post to the server when re-connected.

Naturally, having done all of this and graduated from the program, I wanted to be able to share this hard work with others on my portfolio. I've got to be able to show that I got this to work with a working prototype, right? This site has a client facing section, and a server section (though we never connected to a database - simply had a db file that our server code could access and store information on).

Now I've never hosted an 'app' before - any site that's had a back-end server to deal with. I had no idea where to start.

After seeing a similar question in my classes' slack group, it seemed like using Heroku for the back-end and Netlify for the front-end was a pretty common solution. I currently use Netlify to host my portfolio site, so that seemed like a good solution. But I've never used Heroku before.

I was first given this site, on how to deploy a Sails app (which is what the server repository we were given is made with) to Heroku...

....but to be honest, it didn't seem to make a lot of sense to me. It's straight forward, but definitely geared more towards people who might already have some experience working with hosting or production sites.

So I did some Googling, and found these two posts:
Deploying JavaScript Apps Part 1
Deploying JavaScript Apps Part 2

These posts had a TON more information than what my project required, but it gave me what I needed to get running. All of the images I'm linking here are from those blog posts, so all image credit to them!

I figured that others might be in the same position as me - a newb to hosting an app on more than one site, and connecting them to each other. So here's my walk-through, in beginner's terms, for how to set up a simple connection between a Heroku back-end site and a Netlify front-end site!

1. Create a Heroku Account

First things first - go to Heroku's site and make an account, if you don't already have one.

2. Grab your Back-End Code from GitHub

I didn't have my server code hosted under my own name, so I made a fork of the final project server to have a repository under my name. This way, I know the repo won't suddenly disappear or change without my knowledge.

3. Hook Up your Repository with Heroku

Alright, this was a tricky part for me. These images should help!

a. Once you're logged into your account, you'll click New in the upper right corner and click Create new app.

b. You'll give your server a name, and click Create app at the bottom.

c. This will take you to a page with some options. Because we're hosting a simple site with one contributor, you don't have to worry about pipelines for now (that's how you'd work with a project that's regularly maintained by multiple people, so you can push things through a staging process and do testing and all that goodness).

What you'll want to do next is connect this to your GitHub account, so we can access the back-end code.

d. Once you're connected, you can search for the name of your server repository, and click connect so it, as you might guess, connects to that repo.

e. The last thing here is to set up deployment. You'll pick the branch you want it to use (for my case, the master branch is what I wanted), and you'll want to click on Enable Automatic Deploys. (You won't need the 'wait for CI' link checked that shows in this image, unless you have tests set up that you want to run before your code updates.)

f. Then, the part I missed at first: you'll want to run a manual deploy by clicking Deploy Branch, to get your site up and running! Once this completes, there will be a button at the bottom to view your site. Congrats - your server is now up and running!

4. Test your New Site!

Now, you'll probably want to test this and make sure it's connecting properly. So I'd go to one of the end points you have set up for getting information, and make sure that it shows you the data you expect. For my project, I grabbed the restaurants endpoint and made sure that I could see the list of restaurants. (This will look something like my-server-name.herokuapp.com/restaurants.)

5. Update Front-End Code with the New URL

Okay, halfway done! Now you'll go to the GitHub repository that hosts your front-end code. Anywhere that you linked to the localhost version of your server, you'll update with the Heroku link that now hosts your server. (Remember when we clicked view up above? The link that takes you to is your new endpoint.)

Do a search on any page that you think linked to your localhost - I missed a few spots the first time around!

6. Create Netlify Account

Okay, so now we'll set up an account on Netlify.

7. Launch your Netlify Site

Another multi-part step here - this one is easier, though!

a. Once your account is created, you'll click New Site from Git in the upper right corner.

b. From here, you'll again choose to deploy from GitHub and connect your account.

c. Then, you'll pick your front-end repository....

d. ...And choose your settings. I again used my master branch as the main branch for Netlify to read from.

You'll also set up two other things:
If you have a build step (I used gulp in my project, to compile my CSS and JS files), then you'll enter in the task that builds your project.

And you'll also set (or create) a folder that Netlify will use as your main / root folder. To my understanding, this is the only folder that Netlify will be able to see, so you'll need all of your files here - HTML, CSS, JS, images, service worker files, manifest.json....anything your front-end site uses to work, you'll want in this folder. I called mine dist like the image does, but you could name it whatever you want.

e. Then click Deploy Site at the bottom and let the process begin!

8. Rename Your Project

Netlify, by default, picks a random name for your site. You can click Site Settings on your dashboard page (pictured below) and change it if you'd like.

9. Congrats - the Main Steps are Done!!

Take a peek at your Netlify site, and see if your site shows up as you expect! Now the troubleshooting begins. :)

Final Notes

My biggest issue was realizing that I needed to adjust my build step to include all the files I needed. At first, I'd only had my compiled files in there - so when I visited the Netlify link, nothing was showing up. So I had to add both of my HTML files, and my images and random other files that had been in my root folder. So I modified my gulp build task to do a copy of those files whenever I made changes. This was the step that held me back the most - so make sure you add all of the files your front-end needs to your dist folder (or whatever you named it) so that everything displays correctly!

I also missed a few of the localhost calls I'd been making, so had to go back and replace my new Heroku URL a few times as well. So make sure you check all the functionality your site uses and confirm that they work. :)

The nice thing about hosting with Netlify is that any time you push changes to GitHub, it automatically runs a new build and updates your site, so it's super easy to see your new changes. :) The same goes for using Heroku - I barely had to do anything once I realized I had to do a manual deploy to get it started, and the few small changes I made (mostly minor changes to the database I'd made locally and forgot about) were automatically pushed and updated as well!

I made some minor tweaks to my layout as well - since I had it hosted online now, I tested it on my phone and realized that some things didn't quite display right. Gotta get those styles looking good!

I hope this all makes sense! Please feel free to ask me any questions you have, and I'll do my best to help. Also feel free to give me any pointers for improving my work flow the next time I have a project to host.

Happy building!

(And if you'd like to check out my project, it's hosted here!)