DEV Community: Rane Wallin

Let's make a Twitter bot! (Part I)

Rane Wallin — Fri, 18 Oct 2019 13:28:10 +0000

If you've spent much time on Twitter you've likely encountered a Twitter bot or two. A bot is merely a program that automatically interacts with the Twitter API.

Twitter bots can be useful, irritating, entertaining, or just plain silly. If you've ever thought of making your own Twitter bot but didn't know where to start, you're in the right place! We're going to make a simple Twitter bot using free resources.

In part I of this tutorial, we will focus setting up the various accounts you will need and getting your first automated status update posted to Twitter.

Things you'll need

A Twitter account
A Glitch account
Postman
Some basic JavaScript knowledge
(For part II) Some kind of content for your bot

Getting set up on Twitter

Before you can do anything else, you need a Twitter developer account. If you don't yet have one, here are the steps.

Create a new Twitter account or log into an existing one that you wish to use.
Once logged into a Twitter account, go to the Twitter Developer site at https://developer.twitter.com/
Click "Apply"
On the next page, click on "Apply for a developer account"
You'll be given a few different options. For the purposes of this tutorial, I recommend selecting "Making a bot" under "Hobbyist." Click "Next" after making your selection(s).
On the next page, verify your information is correct and fill out the required information (your country and name). Click "Next."
Next you will be asked to provide details about how you intend to use the API. Select the options you will need and answer the required questions. For this tutorial I have only selected "Yes" for the question "Will your app use Tweet, Retweet, like, follow, or Direct Message functionality?" Depending on your needs, you may select other options. Click "Next."
Verify everything is correct and click "Looks good!"
Read and agree to the developer agreement (or don't, end tutorial, have a nice day!)

NB: If you do not have a phone number connected to your Twitter account, you will need one to continue your setup at some point.

Once you have completed the developer application you will need to click a link in your email to verify your email address.

We are not done with the developer site just yet, but you will need to do some setup on Glitch (your bot host) before you can continue with the rest.

Setting up your bot host

Getting your developer application submitted and approved is just the first step. Now you need to create the app that will be connected to your bot, but in order to do that you need to have your bot's website URL. So, let's take a moment to set that up.

If you don't already have a Glitch account, go create one now and then come back here.

After you have your account, go to this template on the Glitch site.
In the top right corner, click the button that says "Remix to Edit" to create a copy on your account.
After Glitch is done creating your site, click the button in the top left that says "Show" and then "In a new window". Copy the URL from this page or keep it open while moving on to the next section.

Creating your Twitter bot's app

Okay, now that you have a URL for your bot's website, you can finish setting things up on the Twitter side.

Go back to developer.twitter.com and mouseover your name in the top right corner. Select "Apps."
On the Apps page, click "Create an app"
Fill out the information about your app, pasting your new URL in the Website URL box. For this project we do not need to use the Twitter sign in API. I recommend leaving any non-required fields blank.
Click "Create" and then "Create" again.

Awesome! Your app has been created. Now you just need to get the API keys for your app and add them to your configuration file on Glitch.

Connecting your bot to Twitter

Before you can actually interact with the Twitter API, you need to setup your Glitch environment with the API keys.

On the Twitter developer site, in your app's details page (the page you were taken to after creating the app) there is a tab at the top called "Keys and tokens," click it.
In another tab or window, open your Glitch project and click on the .env file. You should see a file opened in the right hand side that has a spot for all your API keys.
Copy and paste the keys from the Twitter developer page to the corresponding location in the .env file. You will need to click "Create" under the "Access token & access token secret" section to generate those values. You do not need to put the keys in quotes.
You will also see a spot in the .env file for BOT_ENDPOINT. This is what you will put after the slash in your URL to trigger your bot. This will be explained in more detail later. You can put anything you want for this value.

We're almost there, I promise!

Sending your first automated Tweet

Great news, you are done with all the configuration stuff. Now you can start using your server to interact with the Twitter API. The template you used already comes with some basic stuff set up, so we will focus on that for now.

In your Glitch project, click on the "server.js" file and read through the code that is already there. You will see that it's already set up to send a simple "Hello world" post. So let's do it!
Open Postman and select the get request type. Put in your project URL plus the bot endpoint you created. (Note: You can also just put this URL into your browser's address bar, but as you build out your bot it will be easier to use Postman.)
Click "Send." If everything has been set up correctly, you should see a "Hello world" post on your bot's Twitter timeline.

Congratulations, you've just successfully sent a Tweet using the Twitter API, but it's not a bot yet. In order to be a bot it needs to be automated, so let's do that.

Making it a bot

In order to make your app a bot, the process of hitting your endpoint needs to be automated. There are several free tools you can use to accomplish this. For this tutorial, I will be using UptimeRobot.com.

UptimeRobot allows you to access a URL at a set interval that you decide. It will provide a status result in the dashboard indicating if the URL was accessible or not. This is often used to verify that a site is active, but you are going to use it to automatically trigger your bot.

Go to UptimeRobot.com and create an account (or log in if you already have an account).
From your account dashboard, click the "Add New Monitor" button.
Select "HTTP(s)" for the monitor type
Provide a "Friendly Name," which is the name that will show on your dashboard, and your endpoint URL. Remember, the endpoint URL is your Glitch URL followed by slash and whatever you set for the BOT_ENDPOINT in your .env file (i.e. something like https://funky-ricecake.glitch.com/MyAmazingBot456).
Set an interval time. In order to comply with Glitch's terms of service, this should be an interval no less than 25 minutes. Depending on your bot, you can decide how often it should send a message. In the screenshot below, I have set the interval to once every 24 hours. This is the longest monitoring interval that UptimeRobot allows. If you want it to happen less often (i.e. once a week, once a month, etc) you may wish to find a different service.

As soon as you click "Create Monitor" UptimeRobot will send the first request to your bot and the first automated status will be posted (which, unless you've already made some changes, will still be "hello world"). If you are not ready for your bot to make a post, you can wait until you have finished setting it up to create the monitor.

That's it! At this point you should have a bot that can post a status update. Now, I'm sure that you would like your bot to do more than say "hello world" every day (or, maybe not, you do you). If so, please keep an eye out for part II of this tutorial where we will get some data from some open source APIs and use it to create slightly more interesting Twitter updates.

Cover image by Peyri Herrera on Flickr

How to keep your forked repository current

Rane Wallin — Thu, 03 Oct 2019 14:51:21 +0000

Are you new to open source? If so, hopefully you have taken advantage of Hacktoberfest to get your feet wet. It's an exciting feeling to get your first pull request merged into a big project, but what happens next? If you want to keep working on the project, you will need to keep your fork current.

Here are some quick instructions on how to do that from beginning to end.

h/t to GitHub for having very clear instructions on this already. Here's all the steps in one place.

# If you haven't already added an upstream source, set your upstream
# to the fork's original source
git remote add upstream <url_to_original>

# Verify upstream is correct, you should see the URL for the upstream fetch and push
git remote -v

# Get all recent branches and commits from the upstream
git fetch upstream

# Check out your current master branch
git checkout master

# Merge the branches and commits from the upstream
git merge upstream/master

# Push the updated master to your forked remote repository
git push origin master

That's it. You should be up to date and ready to make your next PR.

Cover image by Salvatore G2 on Flickr

This simple math hack lets you create an image carousel without any if statements

Rane Wallin — Wed, 25 Sep 2019 01:52:06 +0000

If you are a web developer or a web developer student, you have probably made at least one image carousel in your career. In fact, you've probably made a few. While there are plenty of image carousel libraries out there, sometimes you want (or need) to make it from scratch.

Most image carousels are made from arrays of image data. When some event triggers a change (a timeout, button click, etc) the current image data is replaced with the next element in the array. The tricky part for many comes when they reach the end of the array. Now what? If you've been writing complex if statements trying to check for this condition, I'm here to tell you there's a better way.

Observe the code below:

const imageData = [ 'image1.png', 'img2.png', 'img3.png' ];
let currentImage = 0;

const handleImageChange = () => {
  currentImage = (currentImage + 1) % imageData.length;
}

That's it. That's the whole thing. (Explanation below amazed Keanu.)

How it works

Let's assume we have an array of 10 elements. Modulo division (what happens when you use the % operator) returns the remainder of the division. If currentImage is 0, then (0 + 1) % 10 is the remainder of 1/10, which is 1. This is because we cannot actually divide 1 by 10, so the whole dang 1 is left over. The same is true of 2 - 9. None of these numbers can be divided by 10, so the number itself is the remainder. The magic happens when we get to 10.

Since our array is zero-index, there is no tenth element. This works in our favor! When you divide a number by itself, the remainder is 0, which means our currentImage will be set to 0. This means that as soon as we get past the end of our array, its going to go back to the beginning. Nifty, yeah?

In computer science, this is known as a circular array. The array itself is just a plain ole array, but we use this math trick to allow it to loop indefinitely.

But, wait! What if we want to go the other way? Don't worry, I got you!

We can do the same thing in reverse. The formula for this is (currentValue - 1 + totalElements) % totalElements. If we add this to the above example, it could look something like this.

const imageData = [ 'image1.png', 'img2.png', 'img3.png' ];
const currentImage = 0;

const handleImageChange = (direction) => {
  if (direction == 'forward')
    currentImage = (currentImage + 1) % imageData.length;
  else
    currentImage = (currentImage - 1 + imageData.length) % imageData.length;
}

I know, I know, I said there wouldn't be any if statements, and there aren't, at least not for actually moving forward and back through the elements. We just need to know which direction to go.

This isn't just great for image carousels. Any time you need to increment through an array one element at a time, this will eliminate any condition checking to see if you are at the end.

Cover image by Michael and Sherry Martin (flickr)

JS Bites: React hook is called in a function which is neither a React function or [sic] a custom React Hook

Rane Wallin — Tue, 24 Sep 2019 01:41:48 +0000

So, you've decided to dive into React Hooks. Things have been going well (hopefully) until you get a mysterious error similar to the one below.

import React, { useState } from 'react';

const landingPage = ({ user }) => {
  const [user, setUser] = useState(user);

  return (
    <div>
      <span> Your users is </span> { user.name }
    </div>
  );
}

export default landingPage;

Error: React Hook "useState" is called in a function "landingPage" which is neither a React function or a custom React Hook function.

Oh no! What happened? Setting aside the awful grammar in that error message, what else went wrong? It certainly looks like a React component. You've imported React. You've imported useState. You are exporting your function. Everything should be working, but it's not.

Here's the gotcha, when you are using React Hooks, your functional component's name MUST start with a capital letter. In this case, the function name is landingPage. If you change it to LandingPage it will work as expected.

Likewise, if you are going to use a hook inside of a hook custom hook, the name of the custom hook MUST start with "use" (lowercase).

If you are wondering why, check out the React documentation on the subject.

 JS Bites

 Have you ever need a quick solution to a problem, but when you search 
 Google you are met with pages of tutorials and detailed instructions that 
 bury the information you need? That's what JS Bites attempts to solve. 
 Each post is a small, bite-sized primer on a very specific JS topic. The 
 aim is to provide enough detail to boost understanding, but not so much that 
 you become overwhelmed or lost.

JS Bites: Could not read something of undefined

Rane Wallin — Sat, 21 Sep 2019 02:18:57 +0000

I tutor and mentor new developers in Javascript. By and large, the most common error they come across is "Cannot read some_property of undefined." An experienced developer will usually understand instantly what's gone wrong, but for new developers it can lead to sometimes hours of frustration.

So, what does it really mean?

In the most simple terms, this error means that a thing you are trying to access the properties on either does not exist or is not what you think it is.

Here are a couple of examples

const result = await axios.post(API_URL, user);

console.log(result.data.user.name + " has been added to the database!");

In the above example, the front end team thought the back end would return a copy of the new user data in its response. In reality, the back end was just returning "Success." This results in the console.log() returning an error that it Cannot read name of undefined.

let cats = [
    {
        name: "Grumpy",
        color: "Grey"
    },
    {
        name: "Heathcliff",
        color: "Orange",
    },
    {
        name: "Felix",
        color: "Black"
    }
  ];

console.log(cats.grumpy.color);

In the above example, a new developer did not properly understand how to work with objects, particularly arrays of objects.

What to do when you see this error?

Any time you are working with data, you should console.log() the data before you start working with it, even when you are sure you know what it is. Once you see the data, it's often immediately clear what is going wrong.

If I am passing data from one place to another (back end to front end, through React props, from one function to another, etc), I like to log out the data before it's passed and after. This allows me to confirm that things are passing through the way that I expect them to.

You can also use an extension like Quokka, which allows you to see live code coverage and your console.log()s right in your editor.

The most important thing, though, is just keep coding. The more errors you see, the more errors you will eventually know how to fix. People who have the answers have them because they once had the questions.

 JS Bites

 Have you ever need a quick solution to a problem, but when you search 
 Google you are met with pages of tutorials and detailed instructions that 
 bury the information you need? That's what JS Bites attempts to solve. 
 Each post is a small, bite-sized primer on a very specific JS topic. The 
 aim is to provide enough detail to boost understanding, but not so much that 
 you become overwhelmed or lost.

JS Bites: There might be a problem with the project dependency tree.

Rane Wallin — Fri, 13 Sep 2019 15:59:52 +0000

Sometimes when you try to install a React app you may get a long error that starts out like this:

There might be a problem with the project dependency tree. It is

likely not a bug in Create React App, but something you need to fix

locally.

You may also see the following bit of advice:

If prefer to ignore this check, add SKIP_PREFLIGHT_CHECK=true to an .env file in your project. That will permanently disable this

So, what does this mean?

The most likely cause is that you accidentally installed a package in a folder above your project folder. For instance, if you are in /home/projects/my-project you may have accidentally installed a package into /home/projects at some point. This is easy to do if you are on the command line and try to install a package before changing into the project directory.

To resolve this, cd ../ into the directory above and do ls. Do you see an incorrectly placed node_modules and package.json? If so, delete both. Otherwise, cd ../ and check again. Continue to do this until you find the errant installation.

Once the errant installation has been deleted, return to your project directory, delete the node_modules there and try your install again.

 JS Bites

 Have you ever need a quick solution to a problem, but when you search 
 Google you are met with pages of tutorials and detailed instructions that 
 bury the information you need? That's what JS Bites attempts to solve. 
 Each post is a small, bite-sized primer on a very specific JS topic. The 
 aim is to provide enough detail to boost understanding, but not so much that 
 you become overwhelmed or lost.

Getting started with the Waveshare 2.7" ePaper HAT on Raspberry Pi

Rane Wallin — Fri, 30 Aug 2019 18:53:31 +0000

Introduction

I have been curious about the Raspberry Pi for a long time, but I only started working with one recently when it was provided to me for a class I have this semester. The model I received is the Raspberry Pi 3 B+. RaspberryPi.org describes it as:

The Raspberry Pi 3 Model B+ is the latest product in the Raspberry Pi 3 range, boasting a 64-bit quad core processor running at 1.4 GHz, dual-band 2.4 GHz and 5 GHz wireless LAN, Bluetooth 4.2/BLE, faster Ethernet, and PoE capability via a separate PoE HAT

As soon as I received it I started looking at the various accessories and add-ons available. The selection of available displays caught my eye, and I decided I wanted to play with an eInk display. There are numerous eInk displays available for the Raspberry Pi. For my purposes, I chose the cheapest one I could find that didn't have terrible reviews.

The eInk display

Waveshare Electronics offers a wide variety of add-ons for the Raspberry Pi, as well as other electronics. I was drawn to the 2.7" ePaper HAT because it was relatively cheap and offered plug and play compatibility. The version I bought is version B, which is the three-color black, white, and red display.

The display is only $19.99 and was easy to install on my Raspberry Pi. It does have one big drawback, though. The refresh takes 15 seconds, which is a very long time. It also needs a full refresh between screens, so that is 15 seconds every time the image changes in any way. Waveshare also offers a black and white version for the same price that takes 6 seconds to refresh.

Initial setup

Installing the display is very straight forward. Just line up the female header (black lego-looking thing) on the HAT with the male header (black spiky-looking thing) on the RPi. I find the easiest way to get it to connect is to pushed down on the two white circles with my thumbs once it is lined up. It should slide right on. No additional connections are required. The HAT comes with an SPI interface, but this is only needed if you are not connecting using the GPIO header.

Waveshare has also provided schematics, example code, and libraries for working with the display. All of this can be found in the wiki. It's important to note that the drivers and libraries are different for each display. The code in the wiki above only works with the 2.7" 3-color display. If you are working with a different display, the code will be similar but not the same.

Drawing to the screen

To get started, make sure you are connected to your Raspberry Pi, either directly connected with keyboard, mouse, and monitor or remoting into the RPi using VNC (or similar service). The ePaper display does not interfere with the regular HDMI input, so you can connect a monitor to it while working with the ePaper display without any issues.

You may also need to install the libraries below if they are not already on your Pi (they probably are).



sudo apt-get install python3-rpi.gpio python-imaging python-smbus python-dev

Create a folder for your ePaper projects. I put mine in ~/pi/epaper/, but you can put yours anywhere you want. Waveshare provides library files in C, python2, and python3. For this project, I am working with python3. You will need two files from the example code provided by Waveshare for any projects you do; they are epd2in7b.py and epdconfig.py. We will call these the drivers.

You can put a copy of the drivers in every project you make, or you can put them into a dedicated folder and import them into your project from there. I chose the latter. This was my first python project, so it took me a minute to figure out how to make that work, but it's actually pretty simple:

Create a folder in your project directory called lib
Place copies of both files into that folder
In any project file that needs the drivers, import sys and then append the lib folder to sys so python knows where to find it. (Example code below)
Import epd2in7b into the project file. You do not need to import epdconfig, as this is imported into epd2in7b already.



import sys
sys.path.insert(1, "./lib") # Adds lib folder in this directory to sys

import epd2in7b

To draw an image to the screen, we also need Image, ImageDraw, and ImageFont from the Python Image Library (PIL).



from PIL import Image, ImageDraw, ImageFont

Before we can work with the display, we need to create a variable for it and initialize the display. We also want to clear it before doing anything else. With the 2.7" display, we need to pass a color in hex to the Clear function. Even though Clear requires a color, I have not seen any difference from passing in different values, so just stick with 0xFF.



epd = epd2in7b.EPD() # get the display
epd.init()           # initialize the display
print("Clear...")    # prints to console, not the display, for debugging
epd.Clear(0xFF)      # clear the display

This is now a fully functioning program! If you run it, you should see the display turn black and then flash several times before clearing to "white," which is actually a greyish color similar to a book page.

To print to the display, we are going to create a function that accepts a string.



def printToDisplay(string):

This version of the display has both red and black pixels. Each color is rendered as a separate layer, the black is rendered first and then the red. When we create anything on the red layer, we still use black and white for our colors on that layer, but it will render the black pixels in red.

We have to create a separate image for red and black, even if we are only printing in one color. To do this, for each color we call Image.new() and pass in the height and width of the display and a color to use for the display, which in this case is 255 (white).



    HBlackImage = Image.new('1', (epd2in7b.EPD_HEIGHT, epd2in7b.EPD_WIDTH), 255)
    HRedImage = Image.new('1', (epd2in7b.EPD_HEIGHT, epd2in7b.EPD_WIDTH), 255)

Passing in the height first, and then the width, for the display dimensions, as above, will cause the text to display horizontally. To display the text vertically just swap the heights and widths in the above statements.

For this demo we are just printing text to the screen. We first need to get a draw object and then set our font. We will only be drawing to the black layer. The red layer will stay blank.



    draw = ImageDraw.Draw(HBlackImage) # Create draw object and pass in the image layer we want to work with (HBlackImage)
    font = ImageFont.truetype('/usr/share/fonts/truetype/google/Bangers-Regular.ttf', 30) # Create our font, passing in the font file and font size

The Bangers font is from Google Fonts. If you don't have this font and don't want to install it, you can use any other font you like.

Once we create the draw and font objects, we can use them to create our text. The first argument is the starting position of the text in pixels, then the string, the font, and the fill.



   draw.text((25, 65), string, font = font, fill = 0)

We need to add our images to the screen. We use display() and getbuffer() from the epd2in7b drivers to do this.



    epd.display(epd.getbuffer(HBlackImage), epd.getbuffer(HRedImage))

Even though we didn't do anything with the red layer, we still have to pass it to the display() function.

Finally, to see what we have done, we need to invoke our printToDisplay() function.



printToDisplay("Hello, World!")

Now save and run the program. It will clear the screen first, then after a couple of seconds the screen will start flashing again to place the text. If you watch your console, you will see that the screen remains busy a few seconds after it is cleared. Once the screen is released, the text starts to render.

Here is a link to this complete program

Awesome! You can write to your display. But what about those buttons? Let's talk about that.

Accessing the buttons

For this part of the project we will use the gpiozero library provided by RaspberryPi.org to access our buttons and use them to interact with the program. Start by importing the Button module from the gpiozero library.



from gpiozero import Button

The trickiest part about working with the buttons is figuring out which pin goes with which button. Waveshare offers a schematic. Since this was my first time working with RPi, python, and schematics, it took me a bit of time to work out what it was telling me. I'll save you some trouble and tell you right now, the corresponding pins, from top to bottom are 5, 6, 13, 19.

To use the button, first assign it to a variable. You can use the Button() function imported from gpiozero and pass in the pin number from above. For this demo, we are only working with the first button, at pin 5.This assignment will be near the top of the file right below the imports.



    btn = Button(5) # Assign btn to the button on the HAT at pin 5

To perform an action when the button is pressed, we will assign a function to the when_pressed property on the button. This should happen at the bottom of the file.



btn.when_pressed = handleBtnPress

Now we need to make our handleBtnPress() function. We will do this directly above the previous assignment and we will move the line where we invoked printToDisplay() into that function.



def handleBtnPress():
    printToDisplay("Hello, World!")

To test your program, run it and wait for the console to show that the display is not busy. It will show the message e-paper busy release. Once that is done, press the first button. If everything is correct, it should update to display "Hello, World!"

A complete version of the updated program is here

Putting it all together

Now you can print to the display and use a button to cause the display to update. But, there are four buttons! /picard

If you want each button to do a different thing, you have some options. You can create functions for each button and assign those functions to when_pressed as above or you could even have a single function that changes the behavior depending on which button is pressed. To do this, look for the pin number of the button and use a switcher to decide what to do. The when_pressed function passes the button as an argument automatically. To get the pin number, you need to access btn.pin.number.

Don't forget, you need to wait for the display to release before pressing the next button.

See the example below.



btn1 = Button(5)
btn2 = Button(6)
btn3 = Button(13)
btn4 = Button(19)

def handleBtnPress(btn):
    pinNum = btn.pin.number
    switcher = {
        5: "Hello, World!",
        6: "This is my first \nRPi project.",
        13: "Hope you lik it.",
        19: "Goodbye!"
    }
    msg = switcher.get(pinNum, "Error")
    printToDisplay(msg)

btn1.when_pressed = handleBtnPress
btn2.when_pressed = handleBtnPress
btn3.when_pressed = handleBtnPress
btn4.when_pressed = handleBtnPress

The complete code for the multi-button project is here

Final thoughts

This was my first Raspberry Pi project and my first time working with python. It was a lot of fun, but it was also hard to find resources for working with the ePaper display. Even though Waveshare has a lot of information, they don't have any tutorials or real documentation around working with the display.

The long refresh time matters a lot. It's fun to play with, but it would be too frustrating to use for any real projects. After some extra research, I believe that 2.9" flexible eInk HAT from Waveshare would have been a better option. It is a 2-color display and has a refresh time of 2 seconds. This one is only a few dollars more at $23.99. For a more production-ready version, the 800x600 6" display has a refresh time of less than 1 second, but is a bit more pricey at $74.99.

When school and work collide: Surviving the perfect storm

Rane Wallin — Tue, 23 Jul 2019 20:28:42 +0000

July 8 marked an exciting day for me. After complete Lambda School's Full Stack Web curriculum, I started my third and final build week. For those not familiar with Lambda School, the core curriculum is broken into 3 - 5 sections with a build week at the end of each section. During the build week, you work with students in all sections toward to the goal of completing a full, production-ready project. It's a great opportunity to reinforce mastery, work in a team, and build something to add to your portfolio.

In the part time program our build "week" is actually two weeks. Ideally, we restrict our build time to the same class schedule that we hold for lectures, though it doesn't always work out that way. As the final hours approach it is not uncommon to sacrifice at least one weekend day to polishing and refining your code.

Like most part time students, and probably many full time students, I have a full time job. I work for Nordstrom in a hybrid tech support/help desk position. I work directly with customers facing technical challenges, I open tickets to other departments, escalate problems, and work directly with those departments to find the best solutions for our customers. Our team also supports our contact center employees with system issues in the same manner.

Working and going to school is never easy, but as this build week approached, it lined up with another big, important, and time consuming event in my life Nordstrom's annual Anniversary sale. For Nordstrom, this sale is as big as the Holiday season, if not bigger. During the first hours of the sale we move millions of dollars of merchandise every minute. With so much traffic, there are bound to be challenges that our customers face, and that's where my team comes in.

Our small team of 10 people is on the front line when it comes to supporting our customers when these issues arrive. As such, big events like Anniversary and Holiday require extra dedication and time; and, by that, I mean ample overtime.

Build week started July 8th, Anniversary started July 12th. Two big, exciting, and stressful events colliding at just the right time to create a perfect storm. All of this made even more challenging by the fact that I start work at 3:00 AM and have my Lambda class until 9:00 PM Monday - Friday.

Nordstrom is an awesome and supportive company, and our customers are truly the best. I've worked in customer service for more than 10 years, and I've never worked with better customers than our Nordstrom customers. But, no matter how great the customers and the company, customer service is mentally and emotionally exhausting. Talking to people for 10 - 12 hours straight can wear down the most resilient people. Finishing a 12 hour day talking non-stop to customers and then finding the emotional fortitude to say "okay, let's get to back to work on this project" is a greater challenge than one might image.

It wasn't enough to survive, I needed to thrive. I needed to build an amazing project to ensure I would have something great to add to my portfolio, and I needed to kill it at work, because that's what I'm there to do. I've been with Nordstrom for 5 years and there's no slowing down now! Getting through it all required developing some strategies.

Get outside

Since I work from home and my classes are all online, it's easy to stay in the house all day, but it's not wise. I've fallen into that trap before and it leads only to depression and fatigue.

Being in Arizona, where it's been 105° - 115° F during the past two weeks, added an additional layer of difficulty. I needed to find ways to get out early or late. Fortunately, I have an awesome and understanding boss. Since I start work at 3 AM getting out before work is pretty much impossible, but my boss arranged for me to get an hour for lunch early in the day. During which time, I could go out for walks or quick bike rides. The sunshine and fresh air made a huge difference.

Do it for the team

It can be easy to get focused on your own needs and challenges, but whether at work or during build week, I was always working with a team. Focusing on the team's needs gave me extra motivation to keep pushing through.

At work, if I'm late, slow, or unprepared it would impact my team and my customers. Likewise, for build week, the backend I built needed to support the frontend developers. If I didn't complete my milestones in a timely manner, it would get them off track, as well. Keeping these things in mind helped me stay motivated when all I wanted to do was take a nap.

Take a nap

Okay, I know what I just said, but, at the same time, I needed to be alert and mentally strong whether working with customers or working with my build week team. Working 19-hour days gets absolutely exhausting, I know, I've been doing it for months even before now. Sometimes you just need to take care of yourself or you won't be any use to your teammates. A couple of days, when I knew my milestones were met, I took the time to take short naps before getting back to the build week schedule.

Do it for yourself

Anyone who is working and going to school is doing it because they imagine a better, more satisfying life for themselves (and their families). When it gets overwhelming, it's important to remember that. Focus less on how hard it is now and more on how much better it will be when it's done. I want nothing more in my life right now than to transition into a full time developer role. Meeting these challenges is just one more part of meeting that goal.

In the end, I kicked build week's butt. I created an amazing backend server that I am proud of and thrilled to add to my portfolio. I also kept up with the demands of work and banked a load of overtime, which is always nice to see on the paycheck!