
Today while writing tests (shocking, I know), I came across an interesting and unknown (at the time) scenario. For the site, I wanted to test and make sure a certain element was showing up on the page. At the time, I was writing Behat tests to do some functionality and the tests are very simple to write, so I decided to try and create a simple test for my element. _Usually_ this is pretty straightforward:

    Given I am on "/" #the homepage
    Then I should see ".ad-block" element

As you can see above, I am checking to make sure an ad is showing up on the page. _However_ the problem is that the ads do not populate on first page load. They have to send a request to get the ads and populate them. So, this means for Behat, it is **not waiting** for those ads to load! The driver I am using is the Goutte driver, so any chance at creating a FeatureContext is not possible with javascript. Example:

    Given I am on "/"
    And I wait 4 seconds

That's what I learned today! Luckily, Behat is our **Behavior Driven Development** testing framework, but we also use CasperJS for our testing. In fact, there were already tests written for other ads on the site. The more you know!


Behat and JS? Go CasperJS


![](../images/5f05c1190149b0eac97e0572_0_-i6SHpZL8cxTO5_Q--1--1.png)

In today's tutorial we are going to set up a very basic Amazon Alexa Skill that uses Python, specifically a package called Flask-Ask. Today's sample data may seem a bit controversial and political - but it is an interesting set of data and one that could be extended much further than what we are doing today.

The data source we are going to be using is called Drone Stream - [**http://dronestre.am**](http://dronestre.am/) - "real-time and historical data about every reported covert United States drone strike." We are going to use this data and Alexa to get updates and facts about Drone Strikes by the United States. Like I said, a bit controversial and political, but hopefully something new is better.

Here's an example of the structure returned:

    {
      "status": "OK",
      "strike": [
        {
          "_id": "55c79e711cbee48856a30886",
          "number": 1,
          "country": "Yemen",
          "date": "2002-11-03T00:00:00.000Z",
          "narrative": "In the first known US targeted assassination using a drone, a CIA Predator struck a car, killing 6 people.",
          "town": "",
          "location": "Marib Province",
          "deaths": "6",
          "deaths_min": "6",
          "deaths_max": "6",
          "civilians": "0",
          "injuries": "",
          "children": "",
          "tweet_id": "278544689483890688",
          "bureau_id": "YEM001",
          "bij_summary_short": "In the first known US targeted assassination using a drone, a CIA Predator struck a car killing six al Qaeda suspects.",
          "bij_link": "http://www.thebureauinvestigates.com/2012/03/29/yemen-reported-us-covert-actions-since-2001/",
          "target": "",
          "lat": "15.47467",
          "lon": "45.322755",
          "articles": [],
          "names": [
            "Qa'id Salim Sinan al-Harithi, Abu Ahmad al-Hijazi, Salih Hussain Ali al-Nunu, Awsan Ahmad al-Tarihi, Munir Ahmad Abdallah al-Sauda, Adil Nasir al-Sauda'"
          ]
        }
      ]
    }

Let's get started.

## Amazon Setup

First things first, we need to setup an Amazon Developer account. Head on over to [**http://developer.amazon.com**](http://developer.amazon.com/) to register!
![](../images/5f05c0e08ed6335ebb009ae3_0_JSrqNIDgHZ5GOOmT.png)
After you've logged in, click on the "Alexa" tab in the top menu bar, and then click on "Alexa Skills Kit".
![](../images/5f05c0f217eba924515af929_0_K19zjGzj0xQ-Uyh8.png)
In the top right, you should see a button that says "Add a New Skill" - click on that and it will bring you to the setup screen for our app!
![](../images/5f05c0fea64e9126a934919f_0_3FS1GaOp-djhTCMf.png)
Since we are doing an Alexa app based on drone strikes, I'm going to name mine Drone Strike with the "invocation name" of drone strike. If you are building your own app just know that the Name is what shows up in the Amazon store and the Invocation Name is what a user has to says to open your app. i.e. "Alexa, open Drone Strike"
![](../images/5f05c109a139434253f3d5ce_0_xPZ9Jw_SqfPvPwOO.png)
Lastly, we need to setup our Interaction Model. Today's tutorial is not about what is an intent or utterances. To get a better understanding of that, here are a couple resources that I've found helpful:

- [**Defining the Voice Interface**](https://medium.com/r/?url=https%3A%2F%2Fdeveloper.amazon.com%2Fpublic%2Fsolutions%2Falexa%2Falexa-skills-kit%2Fdocs%2Fdefining-the-voice-interface%23The%2520Intent%2520Schema) - by Amazon
- [**Defining Utterances for Alexa Skills Kit**](https://medium.com/r/?url=http%3A%2F%2Fwww.makermusings.com%2F2015%2F07%2F21%2Fdefining-utterances-for-the-alexa-skills-kit%2F) - by Maker Musings
- [**Understanding How Users Invoke Custom Skills**](https://medium.com/r/?url=https%3A%2F%2Fdeveloper.amazon.com%2Fpublic%2Fsolutions%2Falexa%2Falexa-skills-kit%2Fdocs%2Fsupported-phrases-to-begin-a-conversation) - by Amazon

For today's session, here are the intents:

    {
      "intents": [
        { "intent": "GetRecentDroneStrike" },
        { "intent": "AMAZON.HelpIntent" },
        { "intent": "AMAZON.StopIntent" },
        { "intent": "AMAZON.CancelIntent" }
      ]
    }

And here are the sample utterances:

    GetRecentDroneStrike recent drone strike
    GetRecentDroneStrike what was the most recent strike
    GetRecentDroneStrike recent strike
    GetRecentDroneStrike what was the last drone strike
    GetRecentDroneStrike last drone strike

Go ahead and past them in like you see below.
![](../images/5f05c1190149b0eac97e0572_0_-i6SHpZL8cxTO5_Q.png)

## On to Code!

Up to now, we haven't written any code but are already halfway there!

Here's what we are going to need to run our Alexa app:

1. A Python script
2. Ngrok - a local tunnel for quick testing

That's it!

Let's get started then!

First off, go ahead and create a folder on your local machine to store your code. I called mine alexa-drone-strike in a folder on the Desktop.

Next head on over to [**https://ngrok.com**](https://ngrok.com/) to download ngrok. When you download it, it'll be a Unix Executable file - copy and paste (or move) it to the directory you just created for this project. Your folder should look something like this.
![](../images/5f05c1250196dc21d16351be_0_DwGp1JqXVj0N-xQw.png)
I'm a personal fan of virtualenv to manage my python environments. I do not want to have to mess with system level python whenever I do a pip install. If you are unfamiliar with virtualenv think of it like a quick environment where you can change and install python packages without affecting your computer's setup. Here is a quick resource tutorial on how to get it going that I would highly recommend: [**http://docs.python-guide.org/en/latest/dev/virtualenvs/**](http://docs.python-guide.org/en/latest/dev/virtualenvs/)

Let's go ahead and open up our terminal and migrate to our directory. For me, that would be cd ~/Desktop/alexa-drone-strike

To install virtualenv, run pip install virtualenv.

\*Note, you may get a "permission denied" error. Since we are going to be using virtualenv in other projects and on our computer, we are going to have to run it as sudo. If you get a permission denied, you can run sudo pip install virtualenv or, as a fun trick, if you do sudo !! it will run the last command as sudo.

Now that we have virtualenv installed, let's create an environment with the command virtualenv venv - it should look something like this:
![](../images/5f05c12f09db12bd090081d1_0_3a6V2ipw4QNaqOzc.png)
Now, to activate this environment, run source venv/bin/activate. You will now be in the virtual environment called venv.

\*Note, to get out of the virtual environment, just type in deactivate in your terminal.

At this point we can go ahead and install our main package for this tutorial flask-ask. In your terminal, run pip install flask-ask. Hopefully it succeeded and it installed a bunch of dependencies along the way.
![](../images/5f05c1384a68cdc747c14564_0_Mywf2Hi1Qx0F0rfQ.png)
With flask-ask installed, we can finally create our python file!

Open up this folder in your favorite code editor (mine is Atom), and you will need to create a new file — I called mine drone_strike.py

At the very top of the file, we are going to start out with the basics that we need — imports.

    from flask import Flask
    from flask_ask import Ask, request, session, question, statement

Next up, let’s get the server setup done with:

    app = Flask(__name__)
    ask = Ask(app, "/")

And lastly for this setup, we need to bind it to a port:

    if __name__ == '__main__':
       # Bind to PORT if defined, otherwise default to 5000.
       port = int(os.environ.get('PORT', 5000))
       app.run(host='0.0.0.0', port=port)

So right now, our drone_strike.py should look something like this:

    from flask import Flask
    from flask_ask import Ask, request, session, question, statement
    app = Flask(__name__)
    ask = Ask(app, "/")
    if __name__ == '__main__':
       # Bind to PORT if defined, otherwise default to 5000.
       port = int(5000)
       app.run(host='0.0.0.0', port=port)

Woo! We are almost at the point where we can talk to Alexa to test.

To get a quick function going, we are going to add a launch command - the command that runs whenever you say Alexa open (name of your app)

Right below where we initialized ask with ask = Ask(app, "/") add in this code:

    @ask.launch
    def launch():
       speech_text = "Hello, welcome to Drone Strike"
       return question(speech_text).reprompt(speech_text).simple_card('Welcome', speech_text)

Let’s diagnose what we just put in. First off @ask.launch is the intent that runs whenever we launch the app. It then calls the function launch(). Inside launch() we are defining what we want the app to say and then we return a question and a simple_card.

The question allows it so that once Alexa finishes saying the speech_textit listens for more information. This is different from a statement where once Alexa finishes saying her bit, she closes the app.

The simple_card is what shows up inside the official Alexa app on your phone!

Okay, now that we have our first function in there, let’s get it up and running to test it all out. To start our application, in the terminal run python drone*strike.py and it should start it up like below.
![](../images/5f05c15fa8f27fa27a5d1234_0*-2t8M1zOkcwcYnSl.png)
Open another terminal, move into your directory and type in ./ngrok http 5000. This will open up a local tunnel session and you are going to need the http url that it assigns you. It should look something like this:
![](../images/5f05c166e260464349c9672f_0__07mA9p29mg36FQt--1-.png)
Head back on over to the Amazon Developer website, click on “Configuration” on the left hand side. Under “Endpoint”, choose “HTTPS” for the “Server Endpoint Type”, check “North America” and then past in the ngrok url. It should look something like the image below:
![](../images/5f05c16f09db1275bf0081e8_0_-OwqMQVZQHZUPmJv.png)
Go ahead and click “Save” in the bottom left, and then “Next”. For SSL Certificate, for now, choose the middle one like shown below:
![](../images/5f05c1777ef2663e46e076be_0_SbCRmQJRsNFgXzd3.png)
Click next and you should now be on the “Test” screen. Woo! We can now test our app!

So to test our app you are going to need your Amazon Alexa device up and running. The device needs to be connected to the same Amazon account as you are developing on. If you need to change the account for it, open up the Alexa app on your phone and go through the process there (or search online).

Quick check before we say something:

1. The python server is running in one terminal with python drone_strike.py
2. Ngrok is running in another terminal
3. You copied the ngrok url over to the Alexa Developer dashboard
4. You Alexa device and app are hooked up to the same account as your developer account

If that is all good and done, go ahead and say: **Alexa, open Drone Strike**

Hopefully Alexa responds with “Hello, welcome to Drone Strike”! Progress!

If all the steps above have been done and you’re still not getting a response, open up the Alexa app on your phone, open the hamburger navigation, go to skills, and then in the top right go to “My Skills.” Make sure Drone Strike is there and enabled. If it isn’t there then the account on your phone/alexa device is not the same as the developer account and you’ll need to fix that.

If it did work, then congratulations! You’ve got your first Alexa app (technically) running!

## App Functionality

Alright so right now our Alexa app can’t do much at all. We basically just coded the “Hello World” for Alexa, let’s do better than that.

Remember above when I had you copy and paste the intents and utterances in? Well let’s go back to those and discuss them a little more.

### Intents & Meanings

**GetRecentDroneStrike** — the goal of this intent is to go through the data and just find the last element in the array — aka the most recent drone strike

As you can see, our intents are pretty simple and also leaves some great room for improvement if you were to take this further. Think about some of these intents — the “this year” intents are only for the current year, there is no “for 2016” or “for 2010.” Same for month. Also, what if you wanted to know more about a drone strike? If you look back at the data above, there’s more to it than just numbers and counts. But, I’ll leave that up for you to develop after this tutorial!

### Utterances

We also have our utterances above. These are example phrases that trigger each intent. So for example, the phrase “what was the most recent strike” triggers GetRecentDroneStrike intent. But you also need to include variants of the phrase - the more you include, the better Alexa can get at responding to you.

Let’s get back to coding.

## Coding our App

Okay, nitty gritty coding. Here we go.

First off, we need a couple mor python package — requests - to send a GET request to the Drontstream API. Go ahead and install it in your terminal with pip install requests

After it’s done installing, add it to the top of drone_strike.py with import requests. We are also going to need some dateutil packages, so after import requests add import dateutil.parser and from datetime import date

Below all the import statements, let’s also create a variable for our API url: url = 'http://api.dronestre.am/data'

Let’s knock out our first intent GetRecentDroneStrike

The beginning of our function should look like this:

    @ask.intent('GetRecentDroneStrike')
    def get_recent_drone_strike():
       response = requests.get(url).json()

The response is the data coming back from the API. Let’s parse that data and get the strikes out of it.

    strikes = response["strike"]
    strikes_count = len(strikes)
    last_strike = strikes[strikes_count-1]

The last_strike variable is the last element in the array, aka the most recently add strike. For this intent, we want to output the **date, location, and narrative**

Let’s grab those fields from the data with

    // l_s stands for last_strike
    l_s_narrative = last_strike["narrative"]
    l_s_date = dateutil.parser.parse(last_strike["date"])
    l_s_location = last_strike["location"] + " in " + last_strike["country"]

Next, let’s display the date in a more voice friendly way.

    l_s_date_text = l_s_date.strftime("%A") + " " + l_s_date.strftime("%B") + " " + l_s_date.strftime("%d") + ", " + l_s_date.strftime("%Y")

Lastly, we need to output all of this using flask-ask helper functions:

    last_strike_output = "The last drone strike was on " + l_s_date_text + " in " + l_s_location + ". " + l_s_narrative
    return statement(last_strike_output).simple_card('GetRecentDroneStrike', last_strike_output)

So what is this going to sound like?

The* last drone strike was on Tuesday September 13, 2016 in Al Bayda Province in Yemen. Missiles struck a car in Rada’a, killing 5 people.*

Alright, so at this point your file should look like this:

    from flask import Flask
    from flask_ask import Ask, request, session, question, statement
    import requests
    import dateutil.parser
    from datetime import date
    app = Flask(__name__)
    ask = Ask(app, "/")
    url = 'http://api.dronestre.am/data'
    @ask.launch
    def launch():
       speech_text = "Hello, welcome to Drone Strike"
       return statement(speech_text).simple_card('Welcome', speech_text)
    @ask.intent('GetRecentDroneStrike')
    def get_recent_drone_strike():
       response = requests.get(url).json()
       strikes = response["strike"]
       strikes_count = len(strikes)
       last_strike = strikes[strikes_count-1]
       l_s_narrative = last_strike["narrative"]
       l_s_date = dateutil.parser.parse(last_strike["date"])
       l_s_location = last_strike["location"] + " in " + last_strike["country"]
       l_s_date_text = l_s_date.strftime("%A") + " " + l_s_date.strftime("%B") + " " + l_s_date.strftime("%d") + ", " + l_s_date.strftime("%Y")
       last_strike_output = "The last drone strike was on " + l_s_date_text + " in " + l_s_location + ". " + l_s_narrative
       return statement(last_strike_output).simple_card('GetRecentDroneStrike', last_strike_output)
    if __name__ == '__main__':
       # Bind to PORT if defined, otherwise default to 5000.
       port = 5000
       app.run(host='0.0.0.0', port=port)

And hopefully that’s all we need!

Head on over to your terminal **that is running python drone_strike.py**, cancel the process with CMD-C, and then run it again with python drone_strike.py. \*Note, if you accidentally close the ngrok process, you'll have to run it again, copy the url, and paste it in the configuration.

If the process is up and running, go ahead and ask Alexa! Hopefully she will respond with the correct text!

Congratulations, you’ve made your first Alexa app!

## Recap & Final Thoughts

Congratulations! Like I said above, there are many many more ways you can use this data. Today was all about getting your first introduction into Alexa apps and building them. If you wanted to deploy this app, Heroku would be a great service or you can follow this tutorial using Zappa and Amazon AWS: [**https://www.youtube.com/watch?v=mjWV4R2P4ks**](https://www.youtube.com/watch?v=mjWV4R2P4ks)

Here are some more resources:

- Flask-Ask: [**https://github.com/johnwheeler/flask-ask**](https://github.com/johnwheeler/flask-ask)
- AWS in Plain English: [**https://www.expeditedssl.com/aws-in-plain-english**](https://www.expeditedssl.com/aws-in-plain-english)
- Getting started with Skills Kit:[**https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/getting-started-guide**](https://developer.amazon.com/public/solutions/alexa/alexa-skills-kit/getting-started-guide)
- Build your first Alexa Skill: [**https://medium.com/@bthdonohue/build-your-first-alexa-skill-8a37dc3103d6#.9ys55u201**](https://medium.com/@bthdonohue/build-your-first-alexa-skill-8a37dc3103d6#.9ys55u201)

Let me know if you have any questions or problems below. Also be sure to checkout the Github repo for the final product: [**https://github.com/kevinguebert/alexa-drone-strike**](https://github.com/kevinguebert/alexa-drone-strike)


Build Your First Alexa App


The first installation of Coding After Hours is complete with some mild success. This week we tackled a problem from our friend [@thederril](https://twitter.com/thederril) to build out a weather app.

Did we complete the task? _Technically_
![](../images/Screen-Shot-2021-03-03-at-3.11.00-PM-1.png)Our basic website
Can be it be improved? _Absolutely_

## What Went Well

- For this evenings stream, I tested out some new software from Twitch that is their OBS competitor/wrapper that worked out fairly well. I enjoy using that interface over the OBS one as it's cleaner and more "one-click" friendly that I like.
- We were able to get our weather API integrated fairly quickly using [openweathermap.org](https://openweathermap.org) and calls were successfully being made right off the bat
- We integrated the Google Maps Geocoding API fairly well even though it was an after-thought-feature.

## What Can Be Improved

- My personal 2015 Macbook may not be the computer to stream on. Everything happening at once made it..._struggle_
- Although I went in with a plan, I should have also gone in with a design. I had one in mind but I should have workshopped it more.
- I laid out some of the requirements for building the app but didn't account for everything, this lead to integrating Google Maps Geocoding on the fly!
- My camera looks out of focus?

## Overall Thoughts

If I were to give it a rating from 1-10 without using 7, I'd probably give it a 5 or 6. The stream was overall way better than the day before but I still can work on improving preparation and quality.

Until next time!

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/mD_U_-NSPkw"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>


Coding After Hours - Episode 1 Recap


> Mnemonic: a device such as a pattern of letters, ideas, or associations that assists in remembering something.

While following my Python for Everybody course, I learned about _mnemonic variable names_, what that means, and how it can enhance programming. If you have been programming for a while now, you were probably taught this at one point in your history. For me, it was instilled in me in my first co-op job. Mnemonic variable naming is simple creating variable names that are indicative of the data they are holding. For example, x = 40 is pretty basic, but if you change it to hours_per_week = 40, you can clearly understand that the value 4 relates to how many hours one may work in a week. If you are a new programmer and starting off, I would recommend trying to use mnemonic variable names as much as possible. It will help with debugging, sharing code, and help deliver better quality code in the end!


Coding Mnemonically


![](../images/5f05c487f0081ef56c8ff7a1_rJin049-1.png)

Let me preface this by saying I am not a designer, I am a developer at heart. My "design process" is usually taking Bootstrap or Foundation and applying it to my latest project to get a pretty basic design. This process more or less gets the job done but never has anything that makes you say "wow." For my latest project [**Harvy**](https://harvy.app/), I decided I wanted to take it further than I had with any other project. What this meant was I was spending more time doing research, development, and marketing...but I still kept my generic Bootstrap theme.

If you had checked out [**Harvy **](https://harvy.app/)_one day ago_, this is what you would have seen:
![](../images/5f05c4878bb4b9d8b4526c1a_U3okKSh.png)
Now that isn't a _terrible_ design. There's some hierarchy(ish), a couple images, some icons, a consistent tone (neutral colors), and a basic call out area. Pretty darn basic though - it is a Bootstrap-designed website and it looks like it.

I knew that wasn't good enough though. I knew it could be better and in my heart it didn't feel like a finished product with that design. Now if you've been around IndieHackers for a bit you probably have heard of [**ManyPixels**](https://www.indiehackers.com/product/manypixels), a designer service where you pay a monthly fee for designs. I was originally looking at 99designs and Upwork but decided to try out ManyPixels due to the IndieHackers creating it and the price.

Let me tell you, it's worth it. If you are at all on the fence about design and can afford a month of ManyPixels, do it. Why? Check out version 2.0 of [**Harvy**](https://harvy.app/):
![](../images/5f05c487f0081ef56c8ff7a1_rJin049.png)
Now **that's a design**. I cannot applaud the ManyPixels team enough and I could not recommend them enough. My confidence in launching [**Harvy**](https://harvy.app/) has definitely improved and I am excited about what the future holds. [**Check out the whole homepage**](https://harvy.app/) and you can see all that they did to help me out - all under 2 weeks (including logo, illustrations, and homepage redesign). [**ManyPixels even does a referral program**](https://manypixels.co/referral/m0hfdkk) (not the original intent of this article) that can get you [**20% off your subscription**](https://manypixels.co/referral/m0hfdkk). **Design is important**. **Design should be a priority**.

Don't be like me and think you can "fake it till you make it" when it comes to design. Use a landing page builder, use ManyPixels, use 99Designs, use something! (Unless you are a designer, then you already have the skills!)If you want to see all the original designs compared to now, [**send me a message**](https://twitter.com/kevinguebert) and I can share them with you.

Unfortunately I can't put the two side by side here. I'll tell you this though, it's a big change.

[**Be sure to visit Harvy & let me know if you have any feedback on this new design!**](https://harvy.app/)


Don't think design is a priority? Look at this.


**Explore/Exploit:** In the explore phase, we _gather_ all the information, and the exploit phase is _using_ that information you have to make the best decision.

### Decisions

If we look at the Explore/Exploit algorithm, we can see that an old phrase is actually has some truth behind it:

> The grass is always greener on the other side.

We have all heard that saying before, but, did you know that there is some mathematically proof that supports it? If you do not have much data, then the unknown has a higher chance of success, even if we expect it to be no different, or "if it's just as likely to be worse" (41). Brian Christian and Tom Griffiths state it as the "untested rookie is worth more than the veteran of seemingly equal ability, precisely because we know less about him." Therein lies the kicker though - once we have enough data, then we make a decision based with the provided data that could possibly change the scenario around. So next draft you see - whether it is football, baseball, basketball, or any sport - remember that the rookies getting the huge contracts are getting the huge contracts because of the chance that they are the best (a higher chance of success).

### Regret

> "To try and fail is at least to learn; to fail to try is to suffer the inestimable loss of what might have been" - Chester Barnard

Another way to look at Explore/Exploit is to frame it in the light of trying to live "**a life with minimal regret**" (43). The authors share a story about how Jeff Bezos, founder of Amazon.com, took the risk of moving from his well paying job to the online bookstore. They quote him as saying it was an easy decision. Why? Well Bezos used the idea of living a life with minimal regret and did an exercise with it: he imagined himself at 80 years old and then thought back on his life and knew he wanted to have minimal regrets. In this exercise, he knew that not taking the risk would lead to regret, thus, he took the risk.

Researchers have then spent years looking to find a way to guarantee minimal regret - the most famous algorithm is called the **Upper Confidence Bound.** This algorithm makes a decision not based on what has performed best in the past, but what _could_ perform the best in the future. To explain it, the authors share that "if you have never been to a restaurant before, then for all you know it could be great. Even if you have gone there once or twice, and tried a couple of dishes, you might not have enough information to rule out the possibility that it could yet prove better" (44).

The Upper Confidence Bound algorithm has a sense of optimism about it - the optimism that what you are trying could be the best. "By focusing on the best that an option could be, these algorithms give a boost to possibilities we know less about" (45). What does that mean for you and me? If we think about the world in the terms of these algorithms, then "you should be excited to meet new people and try new things - to assume the best about them, in the absence of evidence to the contrary" (45) because the chances of finding the best that way are better than not even trying at all.

Post inspired from: **Algorithms to Live By** by Brian Christian and Tom Griffiths.


Explore/Exploit Algorithm in Decisions & Regret


### Fac, si facis: "Do it, if you're going to do it"

What is the difference between working for a company and owning a company with employees? What is the difference between a snowboarding going to the Olympics and an amateur riding in the terrain park?

**Work**

When looking at the two people - the professionals vs amateurs - the difference between the two is the amount of work put into the craft. Sitting down and saying "I'm going to be a professional athlete" is **not enough.** Thinking and accepting this idea that you may have is not enough to get you to that level. You **must work.**

Along the way though, our ego is going to get in the way. Our ego wants our ideas, wants us to aspire to something, it wants that attention and glory of saying you are going to do something (echoing a previous post, The Dope Addiction). But in saying something, we are not progressing - there is no work being done.

"When you are not practicing, someone out there is, and when you meet him, he will win"

Bill Bradley

Practice. Work. Improve. Every time you sit down to work on that side project, to study, to prepare for an exam, to do your homework, remind yourself that the work you are doing is an investment in yourself. Do the work.


Fac, si facis


_Post inspired by this morning's journal_

When you are deep into a workout, whether it is your final half mile of a run, last repetition of your squat, or last minute of your AMRAP, what pushes you to finish? What is it that you dig into to keep you going?

Late at night when everyone else is asleep, what keeps you working on your side project? You spend all day working a 9-5 and come home to work _more_. What pushes you to do that?

Lately I've been struggling with both these scenarios. The last round in the gym and I don't dig deep, I stay comfortable. The opportunity to work on [**Harvy**](https://kevinguebert.com/2018/07/11/www.harvy.app) but instead I stay comfortable, I go to bed early. In these times, I lose my "why." Why do I want to go to the gym? Why am I working out? Why do I want to build Harvy? Why am I working more?
![](../images/5f05c4109352a54b1903d173_photo-1484069560501-87d72b0c3669.jpeg)
Photo by [**Emily Morter**](https://unsplash.com/@emilymorter?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit) / [**Unsplash**](https://unsplash.com/?utm_source=ghost&utm_medium=referral&utm_campaign=api-credit)

Finding your own "why" is tough - I am constantly searching, refining, rebuilding, and redefining what mine is seemingly week by week. But having your "why" is important - it is what keeps you going when you don't want to push anymore. It wakes you up early in the morning, it keeps you up late at night, it pushes you to hit that last rep, it helps you stay focused and disciplined.

The "why" gives you purpose, a goal, a reason to do it incessently.

The question though is _how do you find your why?_ I don't have an answer to that. I don't fully know mine so giving an all-in solution would be frivilous. It takes knowing yourself, knowing your aspirations (deep aspirations, not surface level), and knowing the kind of person you want to be. For some it may be as simple as being a better person that you were yesterday or a year ago - that definitely applies to me.

A good starting point would be to write about it. It doesn't have to be every day or every morning, but take some time this weekend, make a good cup of coffee or tea, sit on a porch outside and start writing. Don't have a time limit either, write until you feel like you've gotten everything out on the page. You may not have a full-blown "why", but I would bet that you have a place to start.


Find Your Why


Want to learn how to use MySQL? This post will share how to get started with the basics!

## Before You Start

- I am using a Mac, so all my commands and applications are for a Mac. If you would like to understand how to use it on Windows, let me know on [\***\*Twitter\*\***](http://twitter.com/kevinguebert) and I can try and help you out!
- This is coming from a developer, so this will be done using the command line. If you are looking for a more "one click install", visit [\***\*mysql.com\*\***](https://dev.mysql.com/downloads/mysql/) to download.

## Getting started

First off, most Mac computers do not come with MySQL installed, so we actually need to install it on our computer. So let's start with that.

### Installation

#### Install MySQL

1. We are going to be using [\***\*Homebrew\*\***](https://brew.sh/) to help us with the installation. If you do not already use it, I would recommend learning about it and discovering how powerful it is.
2. Let's open up the terminal and paste the line below to install Homebrew:

   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

3. Note, you may need to close and restart your terminal for this next step, but let's make sure it works by typing in:

   brew info mysql

4. Hopefully that works successfully! If it does, you should see something like below:

   mysql: stable 5.7.20 (bottled), devel 8.0.3-rc Open source relational database management system https://dev.mysql.com/doc/refman/5.7/en/

5. Now to install MySQL, all we need to do is:
6. Congratulations! That was a quick and easy way to install MySQL! However, for those keen eyed out there, you will see in the output from the previous command that there are some recommended steps for us to take.
7. If you would like to make your MySQL connection more secure on your computer, you can run mysql_secure_installation. This will ask you to change the root password for MySQL because when it originally installed, it did not supply one. That is up to you!
8. Lastly, you will see at the bottom of the output these lines:
9. To have launchd start mysql now and restart at login: brew services start mysql Or, if you don't want/need a background service you can just run: mysql.server start

Above it states you can either have MySQL running all the time or start it only when you need it. I personally use MySQL more often than not, so I ran brew services start mysql. If you don't use it as much, mysql.server start works just as well - just make sure to remember to start it each time you need it!

#### Install SequelPro

One of my favorite admin tools to work with MySQL. Visit [\***\*SequelPro.com\*\***](https://www.sequelpro.com/) to download.

##### Setting up SequelPro and MySQL

Now that we have SequelPro installed and MySql running (from mysql.server start), we can connect!

1. Go ahead and open up SequelPro on your computer.
2. You should be on a screen where in the top middle is says "Enter connection details below, or choose a favorite" - we are going to go ahead and enter connection details.
3. In the input boxes in the middle, make sure "Standard" is select. Then you can input the follow:
4. Host: 127.0.0.1
5. Username: root
6. If you entered a password, put that in the next field.
7. Go ahead and click "Connect" and you should be connected!

## Working with SequelPro

Now that we are connected, we could start working with some data! For this next part of the tutorial, we are going to use some dummy data.

1. Head one over to [\***\*https://www.mockaroo.com/\*\***](https://www.mockaroo.com/), change the "Format" to SQL and also check "include create table". Click "Download Data" but also make note of the "Table Name" - it is mostly likely "MOCK_DATA"
2. Head back to SequelPro and go to Database->Add Database
3. In the Database Name field, make sure you have the same name as from mockaroo.com - most likely "MOCK_DATA". When you have confirmed that, click "Add"
4. Next up, go to File->Import
5. Find the file you downloaded in step 1 from Mockaroo and click "Open"
6. After it has imported, you should see on the left hand side under "Tables" your table of "Mock Data".
7. If you click on the "Content" tab in the top of SequelPro, you should be able to see all the data within the MOCK_DATA table.

Congratulations you have successfully setup and installed MySQL!

More tips:

- If you want to query the database, click on the "Query" tab in the top and type in your command. For out data, if you do SELECT \* from MOCK_DATA WHERE gender="male", you should get all the male results!
- Have your own sql file? Go ahead and create a new database and import your data!

Have any more questions? Let me know on [\***\*Twitter @kevinguebert\*\***](http://twitter.com/kevinguebert)!


Getting started with MySQL


"To-do lists are great if you use them correctly, but when people say things like 'I sometimes write down easy items I can cross off right away, because it makes me feel good,' that's exactly the _wrong_ way to create a to-do list" - Timothy Pychcyl (129)

We've all heard of SMART Goals - **S**pecific **M**easureable **A**chievable **R**ealistic and **T**imeline. I think I recall first hearing about them when I was in school. I don't recall what age, but it may have been in middle or high school. In talking about SMART goals, we lay out a plan for a goal we want to achieve and break it down into those 5 pieces - Specific, Measurable, Achievable, Realistic, and Timeline. With these 5 parts created, we then have a plan laid out in front of us that helps us tackle any goal. Charles Duhigg in _Smarter Faster Better_ argues that SMART goals are not enough. With SMART goals, one can get in this mindset of only focusing on the short term achievable goals. Like the quote above, if someone is just creating SMART goals and wanting to check off the items in the list, that person then loses sight of other aspects that can be improved. Setting a smart goal to improve sales by 20% this quarter is a good goal, but if in doing that goal one loses sight of a bigger picture, maybe building a network that will last many years to continue selling to, then the long term progress of SMART goals is missed.

Duhigg then crafts a better way to create goals by combining two different systems - creating a Stretch goal and then combining that with SMART goals. He wants you to think big, to dream big - "if you do know how to get there - it's not a stretch target" (125). Stretch goals should be goals that seem _almost_ impossible. If you try and lay out the steps right now, you wouldn't quite know the path to get there. But, at the same time, they also need to be a little in reach too. There is a fine line between a Stretch goal and an impossible goal. When a Stretch goal is created, then you can start crafting the SMART goals that would go along with it. You can start creating "proximal goals" - smaller ambitions and tasks that help one build up to succeeding. So if your stretch goal is to run a marathon, a very good proximal goal would be to 5 miles without stopping. Then when that is completed you run 10 miles without stopping, so on and so forth. These proximal goals build upon each other to help reach the Stretch goal.

What does this all mean? Next time you do a yearly review with your boss or you are trying to accomplish something, set a Stretch goal first. Something that seems almost impossible. Then break that down into smaller SMART goals that will build up and help you achieve that Stretch. You've got to Stretch and be SMART about it.

Post inspired from: **Smarter Faster Better. The Secrets of Being Productive in Life and Business** by Charles Duhigg.


How to Stretch and Be SMART


![](../images/5f0726c3d304273233b4a763_5f05c4878bb4b9d8b4526c1a_U3okKSh.png)

A couple months ago, [**Harvy**](https://harvy.app/) launched to the world after spending a couple weeks as a prototype and a very simple minimal viable product. After the launch, there was a little fanfare with some small bursts in traffic that helped validate the idea enough for me to continue working on development. However, even though people were interested...I had lost some of my motivation and interest in coding [**Harvy**](https://harvy.app/). So as the summer months went on and my deadline for new features grew nearer, the amount of work being done on [**Harvy**](https://harvy.app/) diminished. This decrease in motivation unfortunately didn't stem from one event that I could push past. To figure out the root cause of my lack of motivation, we have to go back to my first ever job, 5 years ago, in 2013.

### Backstory

My first job experience in the world of web development and programming taught me a large number of skills that I still use today. Learning VIM was tough at first, but boy did it pay off. The company I worked for was a LAPP shop - I don't know if that is actually a phrase, but we used Linux, Apache (I think), Postgres, and PHP. The frontend was custom built but also leveraged jQuery as the main Javascript framework. I worked as a middleware developer so I was largely tasked with the communication between the backend database and the frontend design. For example, if a user wanted to see their profile image on a page, my job was to write the middleware code that communicated with the database team and returned it to the frontend team. All in all, it was a great learning experience. The LAMP/LAPP stack then became my stack of choice if I ever wanted to prototype something really quickly and get up and running fast. That's what I knew well and did daily during the job, so using those tools was an easy transition. The following positions I held after that mostly then dealt with content management systems such as Wordpress and Drupal (and a brief stint in iOS development) that already had much of the behavior and libraries baked in.

### The Problem

Well, come a new idea and a new project in 2018, I wanted to get up and running as quickly as possible...so I went with what I know (but with some twists). I used MongoDB instead of MySQL or Postgres for my database, I used ExpressJS as my backend, and then Handlebars and some jQuery for my frontend. That may sound all nice and dandy, but remember when I said "prototype something really quickly and get up and running fast"? Well, that was the extent of my knowledge in those areas - I could get up and running fairly quickly, but **that doesn't mean I could scale it well.** So come post-launch of [**Harvy**](https://harvy.app/) back in May...and my code was a humble-jumble of a mess. I didn't know how I could grow and make it better because all my prototypes never made it past the prototype stage. I was becoming deeply frustrated and stressed with how not-reusable my code was. For example, [**Harvy**](https://harvy.app/) has the opportunity to add songs in two places - the first time when you chose your base song and then another on the playlist page to add more songs. Well in [**Harvy**](https://harvy.app/) version 1, that was two different code chunks, and I was unable to reuse the "search tracks" code because of how messy it all was.

### Decision

Come end of June and beginning of July, I knew I needed to start over and start fresh. I could reuse most of the design and experience, but I knew if I wanted to grow and add features to [**Harvy**](https://harvy.app/), I had to switch. Now React has always been on my radar as one of the exciting new technologies of the past few years. Even though I was working mostly with content management systems and iPhone apps, I still kept up to date with the latest news and frameworks. I decided then to watch a course on React, follow along, and see what the benefits could be. I learned about making components and different lifecycle methods while still analyzing if it would be right for [**Harvy**](https://harvy.app/). I did actually spend a day analyzing Vuejs to see if that was a better alternative. In the end, I decided to leave the infinite indecisiveness loop and decided on moving forward with React. Decision made, time to learn.

### Making Progress

If I were to recommend one course, video series, tutorial, or intro into React, I would without a doubt recommend [**Tyler McGinnis's React.js Bootcamp on Youtube**](https://www.youtube.com/watch?v=8GXXGJRDMdQ)[**.**](https://kevinguebert.com/2018/08/24/) Four videos and each around an hour and a half each, Tyler does the best job at explaining the basics and beginnings of React. Other tutorials I looked at started with using Components in the design, but Tyler shares how you really _don't_ need all of the fancy React components to get started - you really can just import the script in the bottom of an HTML page and get going. If you are hesitant about React or feel at all overwhelmed, [**check out the series**](https://www.youtube.com/watch?v=8GXXGJRDMdQ)[**,**](https://kevinguebert.com/2018/08/24/,) you won't regret it.

From there, [**Harvy**](https://harvy.app/) cruised. I put more hours coding during the past two weeks into [**Harvy**](https://harvy.app/) than I had during the months of May, June, and July combined. Working with React has made [**Harvy**](https://harvy.app/) come to life in ways I didn't think were possible. Remember that searching problem I had before? Not a problem anymore! I am able to reuse the same component in two separate areas of [**Harvy**](https://harvy.app/) with zero configuration changes. Write once, use multiple times. Splitting different sections of [**Harvy**](https://harvy.app/) off into smaller pieces has allowed me to iterate faster, code more efficiently, and push changes out quicker. Turn around time for bugs is now minutes instead of hours or days. I've hopped on the React rocket and am all in. Now don't get me wrong, I'm no React expert. My code isn't the cleanest, best looking code around - I know there is still work to be done - but the biggest benefit is I am no longer worried about being bogged down by bad code. I'm excited about opening up the codebase instead of anxious. I can add features and refactor bad design all within one component without have to worry too much about how it will impact the rest of Harvy.

If I were to sum up some of the key points I've learned over the past couple weeks, I would share these four tips:

1. Sometimes trying out the "unknown" may be better for you - sure I knew how to build a site, but I didn't know how to build one well.
2. Making your codebase reusable is key to success.
3. Give React a try, you may just like it 😉
4. Also,[** Tyler McGinnis **](https://tylermcginnis.com/)- couldn't give him enough thanks

So what is [**Harvy**](https://harvy.app/)? [**Harvy**](https://harvy.app/) is a web application to help you create a playlist for your next run. If you want to run for 25 minutes and are feeling "Sugar We're Going Down" by Fall Out Boy, you can input that into Harvy and you'll receive a 25 minute playlist will similar songs to keep you going ([**we made one, check it out**](https://open.spotify.com/user/rmqaqkapk81kb1r70se0plo42/playlist/7fso4LtmEOOqzurnpEtJQa)). In upcoming releases you'll also be able to create playlists based on the difficulty of your route and your pace - all with [**Harvy**](https://harvy.app/).

The future of Harvy looks extremely bright. The days of poor code architecture and messy code design are gone. I've become a proponent of [**component based architecture**](https://medium.com/@dan.shapiro1210/understanding-component-based-architecture-3ff48ec0c238)and I'm not looking back. Harvy went from a downward projection to on the up-and-up in a matter of weeks, and I cannot be more excited. So [**check out the new and improved Harvy**](https://harvy.app/)[**,**](https://kevinguebert.com/2018/08/24/,)[**let me know if you have any feedback**](https://harvy.app/feedback), [**subscribe for updates in the future**](https://www.producthunt.com/upcoming/harvy-2), and [**follow Harvy on Twitter**](https://twitter.com/getharvy) - you won't want to miss out.

[**Visit Harvy**](https://harvy.app/)

‍


How React Saved Harvy


My first launch of a product within the Harvy family, I'm happy to share the BPM Explorer. This website has one simple goal - return the BPM of whatever song you are searching for. From there you can go ahead and play the song of Spotify to jam out to.

‍BPM Explorer is a simple React app built with Firebase and Spotify's API.
![](../images/5f1856c4746d7e02885b3e2c_jDahcK1IWC.gif)
Visit it at [https://bpm.harvy.app](https://bpm.harvy.app)


Launching Harvy BPM Explorer


**Look-Then-Leap Rule:** "You set a predetermined amount of time for 'looking' - that is, exploring your options, gathering data - in which you categorically don't choose anyone, no matter how impressive. After that point, you enter the 'leap' phase, prepared to instantly commit to anyone who outshines the best applicant you saw in the look phase." (13)

## Explanation

Scenario: You are interviewing for a new secretary and want to pick the best applicant. Once you have passed on a candidate, you cannot go back and pick them. You are interviewing at random.

#### 1 Applicants

Hire them!

#### 2 Applicants

For 2 applicants, you have a 50/50 shot at hiring the best one. Either pick the first one, or, if you don't, you have to pick the second one.

#### 3 Applicants

Let's say you have 3 applicants, ranked as the best being 1, second best being 2, and worst being 3. With 3 applicants, there are 6 possible scenarios in which you can interview:

1-2-3 (that is: best, second best, worst)

1-3-2

2-1-3

2-3-1

3-1-2

3-2-1

With the 3 applicants, _we can actually do just as well as we did with just 2 applicants - a 50/50 shot._

How?

When we see the first applicant, we don't have any baseline information so we pass up on them to gather more data (the "look") phase. When we see the final applicant, we only have one person so we have to pick them.

With the second option, there is more room. With the "Look-Then-Leap" Rule - **if the second option is better than the first one, then you leap. If it is not, then you move to the next one.**

Let's visualize this - remember, you are on the second candidate because the first candidate was your "look" - or information gathering:

**1 - 2 - 3**

In this scenario, we have already passed up on the best candidate (1), so this would be a Failure.

**1 - 3 - 2**

Similar to the one above, we have already passed up on the best candidate (1), so also a Failure.

**2 - 1 - 3**

In this scenario, the second candidate is better than the first one (1 is better than 2), so you would leap on this candidate - Success!

**2 - 3 - 1**

The second candidate is _not_ better than the first one (3 is worse than 2), so you would then move on to the 3rd candidate. The 3rd candidate is better than the first one, so you would then leap - Success!

**3 - 1 - 2**

In this scenario, the second candidate is better than the first one (1 is better than 3), so you would leap on this candidate - Success!

**3 - 2 - 1**

In this last scenario, the second candidate is better than the first candidate (2 is better than 3), so that means we would leap by the rules. Unfortunately that means we miss out on the last candidate, the 1 - Failure.

Looking at the data above we have 3 successes and 3 failures - thus a 50/50 chance when we have 3 candidates - tada!

Successes: [2,1,3], [2,3,1], [3,1,2]

Failures: [1,2,3], [1,3,2], [3,2,1]

To continue on an enumerate more candidates - 4, 5, 6, etc. - the place where you end up drawing the line between looking and leaping is actually 37% (the 37% Rule).

#### 37% Rule

When choosing the best candidate, you only have a 37% chance of hiring the best possible applicant.

**How it works:** You look at the first 37% of the applicants, not choosing any of them, then after that, leap for anyone that is better than all those you have seen so far.

Next time you are making a decision over a large amount of data and you are trying to decide the "best", it may be worth it to consider this algorithm!

--

Post inspired from: **Algorithms to Live By** by Brian Christian and Tom Griffiths.

‍


Look-Then-Leap Rule - Explained


For the past 2 years, I've been struggling with a fairly simple problem. Whenever I would get ready to run a race, whether it is a 5k or a marathon, I would also frantically struggle at the end crafting the perfect playlist. I wanted a playlist that fit parameters for that race - a 5k is quick, short, and needs to be pumpup music the whole way while a marathon is a long haul, and you need more a variety to sustain you.

This idea has been on and off for a bit but this past Spring I've finally sat down and tried to make it happen. Harvy is a simpler version of that idea though - put in how long you want to workout for, how long your run is, or how long you want to listen to music for, and a playlist will be generated to match that time. Going for a 25 minute run? Receive 25 minutes of music to help push you each step of the way.

[**Check out the site and leave some feedback.**](http://harvy.app/) There is still a loonnngg way to go, but this is a basic beta product. More features are on the way!

[**Meet Harvy**](http://harvy.app/)


Meet Harvy (Beta)


At this point, I've lost track of the number of different iterations of my personal websites I've created. The goals change over time and the most recent iteration was more to "sell" rather than to showcase. When building out a personal website, how and what you build really comes down to **what is the goal**. Like I said, the last version was to "sell" - sell myself as a way to potential clients as a contractor. But there are other reasons for websites, such as building a brand, a simple segway to other products, building an audience, or just being for your hobbies like photography. I'm of course coming from the angle of a developer when mentioning creating one's personal website.

The last iteration of my personal site was built with Webflow. I'm a huge fan of Webflow, especially in the Nocode industry. The *power *and _ease_ at which one can create, build, and grow using Webflow is extraordinary. Why did I move then? Well, to be honest, the price. With my personal website, it clocked in at a solid $15 a month. That isn't _terrible_, but 15\*12 = $180 a year to host my personal website....which doesn't really do much? It is basically a landing page for me -a $180/year landing page though? Maybe not. Especially when there are free sites that can easily be setup with Github (not taking into account paying for a domain name).

The "free" options are great as well - there are many examples of sites using the latest framework out there (i.e. Gatsby). That was my personal site two iterations ago using Gatsby and Netlify. That version _technically_ worked but I never _felt_ a desire to work on it/blog/do anything more with it. I never remembered how to deploy, where to write, where to host images, etc. It was a bit _too much_ for me.

So now I'm back to the Ghost blogging platform. This will cost me a much easier to digest $5 a month on a simple DigitalOcean droplet. $60 a year is a bit better than the $180. Ghost also has a beautiful interface to write and blog without having to worry about social images, meta tags, tagging, editing, publishing, etc. Using ghost also alignest with my next goal, my **_purpose_**for building my personal site is now to share, learn, and write about what I've learned! Add in the new beta features for membership and I foresee my relationship with Ghost to be a longer-term one. Why? Well that's a secret (but coming soon)!


Migrating (back to) Ghost


![](../images/5f072709b853bce18d28fd4c_1b3a5b00-ae72-4ad6-a30a-fd492a2bb9c0.jpeg)

Hopefully by now you've had the chance to [**Meet Harvy**](https://kevinguebert.com/2018/06/02/meet-harvy/). In its very starter and simple phase, Harvy uses your songs in your playlists to determine the playlist for you. There are some pros and cons to this approach:

Pro:

- The playlist will be filled with songs you most likely already know because they live in playlists
- Saving playlists to your account is fairly personal, it means you like the selection of songs enough that you think you'll come back to it

Cons:

- Harvy is fairly "dumb" right now and does not have many filters or customizations. The playlist is coming from what Harvy thinks is the best mixup, which is predefined in the code
- Creating, organizing, and manipulating all the music for a person takes a fair amount of processing

Yesterday however, I came across [**Noiseblend**](https://www.producthunt.com/posts/noiseblend) on ProductHunt. They are doing a fairly similiar idea while also using the Spotify API. So I asked them a fairly simple question - "how are you creating your playlists so well?" I received a simple response - the developers don't do the magic of creating the playlist, they leverage Spotify's algorithms to do that. Well hot dang, I didn't know that was possible!

Thankfully it is! The framework I'm using allows Harvy to pass in a "seed" song, artist, or genre, and from there it will leverage Spotify's intelligence to create a basic playlist. Check out the [**very simple code**](https://github.com/thelinmichael/spotify-web-api-node/blob/340ddada99b1c245bc528004f556ee1198fef697/src/spotify-web-api.js#L872) or [**read the documentation**](https://developer.spotify.com/documentation/web-api/reference/browse/get-recommendations/).

Right now I'm working on updating the flow of a user through Harvy then. An additional step will be added for a user to select songs, artists, or genres that the user is "feeling" for that workout/run/activity, and then they will get an **even better** playlist than before. I've tried it out already in prototype form, I can't wait to share it with all of you.


Offloading Work to Spotify


![](../images/5f0725e3d8a42e41db319cd3_5f05c4c6fd4f252cfd130ca8_Screen-Shot-2019-06-07-at-2.52.06-PM.png)

_A few weeks late..._

The Product Hunt Maker's Festival 2019 No-Code edition was a blast to work on a a great challenge to all makers.

I'm psyched to [**share that I was chosen as "Maker in Chief"!**](https://www.producthunt.com/newsletter/2700)[**Emoodji**](https://coda.io/d/Emoodji_d2tRkelpm2c/History_suC_k?viewMode=play#_luQOO) was chosen as the grand prize winner - a no-code tool I built using Coda.io to track your mood.

What makes [**Emoodji special?**](https://coda.io/d/Emoodji_d2tRkelpm2c/History_suC_k?viewMode=play#_luQOO) Emoodji is based on the PANAS Scale:

_The PANAS Scale or Positive and Negative Affect Schedule (PANAS) is a self-report questionnaire. The list is split up into two segments, or mood scales. One scale measures a person’s positive emotion and the other scale measures the negative. Each segment has ten terms, which can be rated on a scale of 1 to 5 to indicate the extent to which the respondent agrees that this applies to him. The PANAS Scale was developed in 1988 by three American psychologists: David Watson, Lee Anna Clark and Auke Tellegen_

And the Maker-in-Chief is none other than [**@kevinguebert**](https://twitter.com/kevinguebert?ref_src=twsrc%5Etfw), who created Emoodji, a personal mood tracker complete with randomized GIFs, automated reminders, and mobile-friendly buttons. Congratulations! 👏[**https://t.co/Gvnu4b6Oer**](https://t.co/Gvnu4b6Oer)[**pic.twitter.com/rIrEnV5aYl**](https://t.co/rIrEnV5aYl) — Coda (@coda*hq) [April 9, 2019](*[**_https://twitter.com/coda_**](https://twitter.com/coda)hq/status/1115683821871980544?ref_src=twsrc%5Etfw)
![Screen Shot 2019 06 07 at 2 52 06 PM](../images/5f05c4c66fe78e227212dde6_Screen-Shot-2019-06-07-at-2.52.16-PM.png)
Thank you [**@coda_hq**](https://twitter.com/coda_hq?ref_src=twsrc%5Etfw) and [**@ProductHunt**](https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw) for the great [**#makersfestival**](https://twitter.com/hashtag/makersfestival?src=hash&ref_src=twsrc%5Etfw)! Loved all the fun and seeing what everyone built! 🙌🙌🙌 [**https://t.co/ZlIe5aGSpP**](https://t.co/ZlIe5aGSpP) — Kevin Guebert (@kevinguebert) [**April 9, 2019**](https://twitter.com/kevinguebert/status/1115688820643586048?ref_src=twsrc%5Etfw)

All the swag! Thank you [**@coda_hq**](https://twitter.com/coda_hq?ref_src=twsrc%5Etfw) 🙏 🎉🎉

Thanks to Coda and [**@ProductHunt**](https://twitter.com/ProductHunt?ref_src=twsrc%5Etfw) for the awesome Makers Festival! 🙌 [**pic.twitter.com/9JSIw2DFqM**](https://t.co/9JSIw2DFqM) — Kevin Guebert (@kevinguebert) [**May 23, 2019**](https://twitter.com/kevinguebert/status/1131644977744760832?ref_src=twsrc%5Etfw)

‍


Product Hunt Maker's Festival No-Code Maker in Chief!


While reading this new book, my posts may become more programming based. I will try and throw in some other more personal-growth posts in along with it, but today's posts is from the verrrryyy first chapter of _Design It!_.

When talking about a software architect (SA), Keeling points out 5 specific responsibilities:

- Define the problem from an engineering perspective
- Partition the system and assign responsibilities
- Keep an eye on the bigger picture
- Decide trade-offs amont quality attributes
- Manage technical debt
- Grow the team's architecture skills

One of the first things I've noticed so far is that it has said nothing about programming. Does a software architect program? I'm not quite sure. From previous experiences, it seems like they know and understand coding, but maybe not syntax of specific languages or nuances? There's more to learn!

Post inspired from: **Design It! From Programmer to Software Architect** by Michael Keeling.


Responsibilities of a Software Architect


## Constructing

With the introduction of ES6, creating classes in Javascript has improved. Even though the new syntax boils down to the same as it was previously done, coming from other OOP languages makes it easier to understand.

Previously, for creating classes before ES6 we would do it this way:

```js
function Pet(type, name) {
  this.type = type;
  this.name = name;
}
var winnie = new Pet("cat", "Winnie");
```

Now with ES6, we can use the class syntax:

```js
class Pet {
  constructor(type, name) {
    this.type = type;
    this.name = name;
  }
}
var toby = new Pet("dog", "Toby");
```

If you want to check and see whether these are the same, you can run a typeof on both of them and you will see that both are of type function!

## Inheritance

Inheritance with Javascript works very similarly to other languages:

```js
class Pet {
  constructor(name) {
    this.name = name;
  }
  feed() {
    console.log(`Feeding ${this.name}`);
  }
}

class Cat extends Pet {
  constructor(name) {
    super(name);
    console.log("Cat created");
  }
  meow() {
    console.log("Meow!");
  }
}

class Dog extends Pet {
  constructor(name) {
    super(name);
    console.log("Dog Created");
  }
  bark() {
    console.log("Woof!");
  }
}

const winnie = new Cat("Winnie"); // Cat created
const toby = new Dog("Toby"); // Dog created
winnie.name; // "Winnie"
toby.name; // "Toby"
winnie.meow(); // "Meow!"
winnie.bark(); // Uncaught TypeError: winnie.bark is not a function
toby.bark(); // "Woof!"
toby.meow(); // Uncaught TypeError: toby.meow is not a function
winnie.feed(); // Feeding Winnie
toby.feed(); // Feeding Toby
```

As you can see above, both Cat and Dog inherit the same feed() method, but they both have their own methods meow() and bark() that only those instances can reference!

Hope you enjoy this little JS snippet!


Simple Object Oriented Programming with Javascript

Over the past year, many of us have been working from home with most of our communication happening on Slack. We can use our status to update our current situation whether it is in a heads down coding mode (do not disturb), out at lunch, at a doctors appointment, on vacation, not feeling well, or whatever emoji and text you are feeling.

The idea for this came from a simple question "what if people could know your status just by viewing your profile picture?"

## The Idea

**Update my profile picture in Slack throughout the day based on the time without being too disruptive**.

A key part of this plan is that some people use other people's profile picture as a quick "who am I talking to" reference. Instead of reading names in the sidebar or the chat, they have become accustomed to one's profile picture. The images needed to update often enough to change "state" but not be too dramatic of changes to interrupt coworker's "flow."

**Slack Stop Motion was born.**

<img alt="Slack Stop Motion" src="../images/slack-gif.gif" width="100%" />

## Implementation

From my initial idea and my requirements, I started brainstorming _how_ to implement the idea. What I landed on was pretty simple:

- A set of photos of me coming into the office and then a set of photos of me leaving the office
- A cron job
- Slack API
- Github Action

### Images

I've taken so many images with my webcam to try and figure this part out. I have a Logitech C920 that I thought would work but kept on running into small but frustrating issues. I used a terminal command to take pictures every 1 second to slowly move out of the camera, but the images there were quite grainy and low resolution. I tried using my Bluetooth mouse to click "capture" once I was in place, but those images ended up not being cohesive enough.

The last thing I did was put my iPhone on this $10 Amazon selfie stick that contains a Bluetooth button to trigger the capture. This solution worked out best in terms of quality and ease of use.

### Cron Job

A cron job was the simplest solution and the one that immediately came to mind. I wanted to have the photos update on a fairly defined cadence and on certain days of the week (I am excluding weekends). Cron can do all that for you - and more!

### Slack API

Integrating the Slack API took some messing around with but their documentation is easy to follow and click through to get what you need. The only things you need to get the Slack API working are:

- A Slack App installed on your workspace
- The `users.profile:write` role grant for the app

From there, it's just like calling an API!

### Github Actions

I thought about looking into more defined solutions from Google, AWS, and Microsoft, but at the end of the day, remember this is just a simple cron job. I didn't want to over architect a cron job. I learned that Github Actions can do a simple cron that can run whenever you define it - perfect!

## Tutorial

Below is the step-by-step guide of how to set up your instance. I also have a [public Github repository](https://github.com/kevinguebert/slack-stop-motion) of what I'm using now if you'd like to visit that as well.

### Gather Images

The first thing to do is to grab all your photos and map out _when_ you want to update your profile and to _what_ picture. This can be a fairly intensive task as it depends on the number of photos you have, your work hours, how often you want to update, etc.

:::note

**I am not including this in part of the tutorial.** Take your own photos! It's fun to do and you can spice it up to however you like.

:::

:::tip

- You'll want to think about **how many** pictures you want to take and **what time** they would appear. The number of photos determines **when** the cron job should run.
  - If you want it to run on the hour every hour from 8:00AM to 5:00PM, you'll need about **10 photos**.
  - If you want it to run every 30 minutes, you'll need about **20 photos**.
  - You can do the math for your situation. (I had to break out the counting on my hand for this.)
- Name your images what time you want them to show up. This will make it easier when we build out the script.

:::

I created a folder on my Desktop, I named it `images`, and I added my images in there.

![Images folder desktop](../../images/imags-folder-desktop.png)

Here are all my images in gif form to help get an understanding of how I flowed them:

<img width="50%" alt="Slack Stop Motion" src="/images/slack-stop-motion.gif" />

### Create a Slack App

In this tutorial, we are only creating a one-off Slack app. If you want to look into how to create one that other people can sign in with, capture their tokens, be secure, and market, be my guest.

1. Visit your Slack workspace, click on the workspace name in the top left and then go to Settings & Administation -> Manage apps

   ![Manage App](../../images/slack-1.1.png)

2. From there, in the top right, click on "Build"

   ![Build](../../images/slack-2.1.png)

3. Click "Create New App", give it a name, and add it to your Slack Workspace

   ![Create App](../../images/slack-3.1.png)
   ![Name App](../../images/slack-4.1.png)

4. From here, on the left-hand side under "Features" click on "OAuth & Permissions"

   ![Oauth and Permissions](../../images/slack-oauth.png)

5. Scroll down to "Scopes" and find "User Token Scopes"

6. Click "Add an Oauth Scope" and search for `users.profile:write`
   ![Scopes](../../images/slack-5.1.png)

7. Now scroll back up to the top and under the "Oath Tokens & Redirect URLs" click on "Install to Workspace"

   ![Scopes](../../images/slack-7.1.png)

8. Allow the app to be installed on your workspace
   ![Install](../../images/slack-8.1.png)

9. After installation, you will see the title "User Oauth Token" - **this is very important** - this is how we access the Slack API. Copy and save this to a safe location for now.
   ![Important Token](../../images/slack-9.1.png)

### Creating the Script

1. Now that we have our images and our Slack API key, we can go ahead and create our script locally to test it out. The script is **really, really basic**. Here's a brief overview:

   - Get's the current hour
   - Get's the current minute
   - A lot of `switch` and `if` statements.

   Super basic, I know.

2. To create our script, let's create a file called `slack-stop-motion.sh`

3. Open up the file in your favorite code editor and add we are going to add our code to get the current hour and the current minute:

   ```bash
   #!/bin/bash

   hour=$(TZ=":America/New_York" date +%H)
   minute=$(TZ=":America/New_York" date +%M)
   ```

4. With those two values, we can do our math/configuration of "at what time we want certain photos to display:.

5. I have **30 images** and I want them to change **every 20 minutes**. So I did some sweet calculations, determined what image I wanted when and made those `if` statements work. All I'm doing is checking the hour and then checking what minute it currently is to determine if it is the 0th, 20th, or 40th minute. 🙃

   :::note

   Your images and timing will be different than mine! Probably _very_ different. Unless you have the same image name and timing structure, this won't work. I also use `America/New_York` as my timezone.

   :::

   :::note

   I set my "default" image to be when I am "away".

   :::

   ```bash {6-108}
   #!/bin/bash

   hour=$(TZ=":America/New_York" date +%H)
   minute=$(TZ=":America/New_York" date +%M)

   img="1740.jpg"

   case $hour in
   7)
   if (($minute < 20)); then
      img="0700.jpg"
   elif (($minute < 40)): then
      img="0720.jpg"
   else
      img="0740.jpg"
   fi
   ;;
   8)
   if (($minute < 20)); then
      img="0800.jpg"
   elif (($minute < 40)): then
      img="0820.jpg"
   else
      img="0840.jpg"
   fi
   ;;
   9)
   if (($minute < 20)); then
      img="0900.jpg"
   elif (($minute < 40)): then
      img="0920.jpg"
   else
      img="0940.jpg"
   fi
   ;;
   10)
   if (($minute < 20)); then
      img="1000.jpg"
   elif (($minute < 40)): then
      img="1020.jpg"
   else
      img="1040.jpg"
   fi
   ;;
   11)
   if (($minute < 20)); then
      img="1100.jpg"
   elif (($minute < 40)): then
      img="1120.jpg"
   else
      img="1140.jpg"
   fi
   ;;
   12)
   if (($minute < 20)); then
      img="1200.jpg"
   elif (($minute < 40)): then
      img="1220.jpg"
   else
      img="1240.jpg"
   fi
   ;;
   13)
   if (($minute < 20)); then
      img="1300.jpg"
   elif (($minute < 40)): then
      img="1320.jpg"
   else
      img="1340.jpg"
   fi
   ;;
   14)
   if (($minute < 20)); then
      img="1400.jpg"
   elif (($minute < 40)): then
      img="1420.jpg"
   else
      img="1440.jpg"
   fi
   ;;
   15)
   if (($minute < 20)); then
      img="1500.jpg"
   elif (($minute < 40)): then
      img="1520.jpg"
   else
      img="1540.jpg"
   fi
   ;;
   16)
   if (($minute < 20)); then
      img="1600.jpg"
   elif (($minute < 40)): then
      img="1620.jpg"
   else
      img="1640.jpg"
   fi
   ;;
   17)
   if (($minute < 20)); then
      img="1700.jpg"
   elif (($minute < 40)): then
      img="1720.jpg"
   else
      img="1740.jpg"
   fi
   ;;
   esac
   ```

6. Could this be more efficient? Oh you betcha. But that's for another time.

7. Let's make sure we set the current image path based on our folder structure:

   ```bash {6}
   

   img="./images/${img}"
   ```

8. Finally, we can now send our request to Slack! We will be making a simple `curl` `POST` request.

   ```bash {5}
   

   img="./images/${img}"

   curl --location --request POST 'https://slack.com/api/users.setPhoto' --form "token=xoxp-XYZ" --form "image=@${img}"
   ```

   :::note

   Be sure to replace `xoxp-XYZ` with your actual Slack API token from before!

   :::

9. Return to your terminal and we can now safely run the script:

   ```shell
   sh ./slack-stop-motion.sh
   ```

10. Hopefully there is a successful response like below. If not, [tweet at me](https://twitter.com/kevinguebert) and I will try and help you out!

    ```json
    {
      "ok": true,
      "profile": {
        "image_24": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_24.jpg",
        "image_32": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_32.jpg",
        "image_48": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_48.jpg",
        "image_72": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_72.jpg",
        "image_192": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_192.jpg",
        "image_512": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_512.jpg",
        "image_1024": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_1024.jpg",
        "image_original": "https://avatars.slack-edge.com/2021-03-24/1919928028576_d0f5e53078c3e08fbcd3_original.jpg",
        "avatar_hash": "d0f5e53078c3"
      }
    }
    ```

    :::note

    Depending on the time of day, the image that shows up may not be what you "expect". Be sure to double-check!

    :::

11. Here's our full script that we will then use later on:

    ```bash
    #!/bin/bash

    hour=$(TZ=":America/New_York" date +%H)
    minute=$(TZ=":America/New_York" date +%M)

    img="1740.jpg"

    case $hour in
    7)
    if (($minute < 20)); then
       img="0700.jpg"
    elif (($minute < 40)): then
       img="0720.jpg"
    else
       img="0740.jpg"
    fi
    ;;
    8)
    if (($minute < 20)); then
       img="0800.jpg"
    elif (($minute < 40)): then
       img="0820.jpg"
    else
       img="0840.jpg"
    fi
    ;;
    9)
    if (($minute < 20)); then
       img="0900.jpg"
    elif (($minute < 40)): then
       img="0920.jpg"
    else
       img="0940.jpg"
    fi
    ;;
    10)
    if (($minute < 20)); then
       img="1000.jpg"
    elif (($minute < 40)): then
       img="1020.jpg"
    else
       img="1040.jpg"
    fi
    ;;
    11)
    if (($minute < 20)); then
       img="1100.jpg"
    elif (($minute < 40)): then
       img="1120.jpg"
    else
       img="1140.jpg"
    fi
    ;;
    12)
    if (($minute < 20)); then
       img="1200.jpg"
    elif (($minute < 40)): then
       img="1220.jpg"
    else
       img="1240.jpg"
    fi
    ;;
    13)
    if (($minute < 20)); then
       img="1300.jpg"
    elif (($minute < 40)): then
       img="1320.jpg"
    else
       img="1340.jpg"
    fi
    ;;
    14)
    if (($minute < 20)); then
       img="1400.jpg"
    elif (($minute < 40)): then
       img="1420.jpg"
    else
       img="1440.jpg"
    fi
    ;;
    15)
    if (($minute < 20)); then
       img="1500.jpg"
    elif (($minute < 40)): then
       img="1520.jpg"
    else
       img="1540.jpg"
    fi
    ;;
    16)
    if (($minute < 20)); then
       img="1600.jpg"
    elif (($minute < 40)): then
       img="1620.jpg"
    else
       img="1640.jpg"
    fi
    ;;
    17)
    if (($minute < 20)); then
       img="1700.jpg"
    elif (($minute < 40)): then
       img="1720.jpg"
    else
       img="1740.jpg"
    fi
    ;;
    esac
    img="./images/${img}"

    curl --location --request POST 'https://slack.com/api/users.setPhoto' --form "token=xoxp-XYZ" --form "image=@${img}"
    ```

### Setting up Github Repository

1. Be sure you have a [Github Account](https://github.com);
2. Next, create a new repository. I named mine `slack-stop-motion` but you can name yours whatever you like. Click the green "Create" button at the bottom of the page.

![Create New Repository](../../images/new-repository.png)

3. On the next page, there will be a bunch of information about adding files to your Github repository. Under the "Quick Setup" headline, there is a link that says "uploading an existing file". This is how we will add our images.

![Upload Existing File](../../images/upload-existing.png)

4. It will probably be easier to drag and drop your whole folder in on this UI to add your images to the repository.

![Add Files](../../images/add-files.png)

5. **Make sure to scroll to the bottom to commit your changes!**

![Commit Images](../../images/commit-changes-2.png)

6. Once they are finished uploading, you should be taken back to your repository homepage with your images folder.

![Repository Homepage](../../images/images-github.png)

7. The last thing we are going to do is to add our `slack-stop-motion.sh` script to the repository as well.

<a href="#edit-bash-before-upload" />

:::warning

Edit your `slack-stop-motion.sh` file and **remove your key** from the file and replace it with `${TOKEN}`. The `curl` command should look like the following:

```bash
curl --location --request POST 'https://slack.com/api/users.setPhoto' --form "token=${TOKEN}" --form "image=@${img}"
```

:::

9.  Next, go through the same process of uploading your file like you did with the images.

![Upload Individual File](../../images/add-file.png)
![Repo with Script](../../images/uploaded-script.png)

### Adding Your Slack Key

1. In order to safely and securely use the Slack API, we need to add our Slack API key to our repository. Thankfully, Github has thought of this problem and solved it for us!

2. Click on "Settings" and then click on "Secrets" in the sidebar.

![Settings & Secret](../../images/settings.png)

3. Click "New Repository Secret"

![New Repository Secret](../../images/add-secret.png)

4. Create a secret with the name: "TOKEN" and paste in your Slack API Key from above. (Hint, it should start with `xoxp` if you followed the steps correctly.)

![Slack API Token](../../images/token-secret.png)

### Creating Your Github Action

1. Our Github Action will be the foundation of our project. To get started, click on "Actions". (Don't see Github Actions? [Visit the Documentation](https://docs.github.com/en/actions) to learn more about how to get started.)

![Github Actions](../../images/actions-tab.png)

2. Click "set up a workflow yourself"

![Set up a workflow yourself](../../images/set-up-own-action.png)

3. Now we are onto some coding! This is where some of your custom configuration may come in; I run my cron job every 20 minutes between the hours of 7AM and 5PM. Here is the start of what my workflow looks like:

   ```yaml
   name: Slack Stop Motion
   on:
     schedule:
       - cron: "*/20 11-21 * * mon-fri"
   ```

   :::note

   Cron can do some marvelous things. Visit [https://crontab.guru](https://crontab.guru) to schedule to your heart's desire!

   Also note - check the timezone for cron on Github! It isn't Eastern 😬 that's why the cron is from 11-21 to account for the time difference.

   :::

4. The next part of our workflow is calling the script we made earlier. There are a couple steps here that we want to make sure to hit:

   - Make sure the system has permissions to run the script (`chmod`)
   - Make sure our `TOKEN` from our environment secrets is defined in the environment
   - Call our script _with the token_.

   :::note

   Make sure the `slack-stop-motion.sh` script doesn't contain your actual Slack key but instead is replaced with `${TOKEN}`. [Revisit the previous steps](/#edit-bash-before-upload) if you're confused.

   Slack will turn off the key if you do accidentally make it public. If that happens, reinstall your app in your workspace.

   :::

5. We can add those steps to our workflow with the following:

   ```yaml
   name: Slack Stop Motion
   on:
   schedule:
     - cron: "*/20 11-21 * * mon-fri"
   jobs:
     cron:
       runs-on: ubuntu-latest
       steps:
         - uses: actions/checkout@v2
         - run: |
             chmod +x "${GITHUB_WORKSPACE}/slack-stop-motion.sh"
             export TOKEN=${{ secrets.SLACK_TOKEN }}
             "${GITHUB_WORKSPACE}/slack-stop-motion.sh"
   ```

6. Our workflow is complete! **Make sure you commit** your file by clicking "Start Commit" on the right side.

With any luck, we've made it through this tutorial with a running cron job in Github Actions. You can leave your Action alone and it will all work for you. If you check the Actions tab you will see it running every 20 minutes between 7:00AM and 5:00PM.

![Final Workflow](../../images/final-workflow.png)

<Heading as="h3" size="xl" textAlign="center">
  🎉🎉🎉 You did it! 🎉🎉🎉
</Heading>

<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>

<lottie-player src="https://assets9.lottiefiles.com/packages/lf20_pkanqwys.json" background="transparent" speed="1" style={{width: '100%', height: '300px'}} loop autoplay></lottie-player>

With your Slack API Key, your images, and your Github actions, you can now enjoy your very own Slack Stop Motion!

<img alt="Slack Stop Motion" src="/images/slack-gif.gif" width="100%" />

## Feedback and Questions

You can find me on Twitter [@kevinguebert](https://twitter.com/kevinguebert) and I am open to all questions! You can also find the [Github repo](https://github.com/kevinguebert/slack-stop-motion) where I have my images and code available for reference.

<LinkBox as="button">
  <Button variant="outline">
    <LinkOverlay href="https://twitter.com/kevinguebert">
      Tweet at me
    </LinkOverlay>
  </Button>
</LinkBox>

<LinkBox as="button">
  <Button variant="outline">
    <LinkOverlay href="https://github.com/kevinguebert/slack-stop-motion">
      Visit Github
    </LinkOverlay>
  </Button>
</LinkBox>

## Twitch Livestream

:::note

The livestream on Twitch was done at the start of the project while I was still learning. Don't follow this word-for-word as things have changed!

:::

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/iEcwb8Tay40"
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>
```

Stop Motion Videos...in Slack? Spice Up Your Profile Picture with Cron Jobs & Github Actions!


**_Job Perks:_**

- **_Unlimited Vacation Days_**

Is that not something all of us want to see when applying for jobs? _Unlimited Vacation Days_ - it sure does sound perfect. But what if I told you that oftentimes that in the companies that implement the unlimited vacation day policy, employees actually take **less** vacation time. Sounds impossible right? How could that be?

Blame it on Game Theory.

Now I can't say that all people are like this, many people I know are so I think it applies well, but when we are working at a job what is one of the main goals? Besides delivering good work and pleasing your boss, _most people_ I know have a larger goal in mind: getting a promotion and moving up. We all want to move up, right? More pay, more benefits, more responsibility.

As we, individually, are trying to move up in our positions and work towards that next promotion, well, so are your coworkers. Your coworkers also want that promotion, they also want more responsibility.

Well that's where the problem with Unlimited Vacation Days comes into view. When you have unlimited vacation days, what do you want to do? Well, if you are gunning for that promotion, you are trying to seem "better" than your coworkers. You want your boss to know you are working harder, spending more time, contributing more, and encompassing yourself more with work _more than your coworkers._ Not a lot more, just a little more to have that edge. Say your coworker takes a 14 day vacation - well, to prove you are "harder working", you may one up it a little and just take a 12 day vacation. "I'm working harder and giving more to the company" you may think. You have that edge.

...But then flip it for your coworkers. Your coworker also wants that edge - so when they see you taking a 12 day vacation, well they just might only take a 10 day vacation. And then you see your coworker taking a 10 day vacation and think "shoot, they are doing better than me, I need to work harder", so you take less vacation. When you take less vacation that means that your coworkers take less vacation...

In the end, there is the problem. No one is taking enough vacation. Since everyone is vying to get that promotion, to get better, to "climb the ladder", the Unlimited Vacation Days are not being used. You don't want to come off as a slacker or not putting in your time, and, in doing so, everyone ends up taking less time off.

What's the solution? I don't have it - maybe a required minimum to start. Otherwise, those 2-week policies aren't looking too bad anymore.

Post inspired from: **Algorithms to Live By** by Brian Christian and Tom Griffiths.


The Myth of Unlimited Vacation Days


My list of "things I need to learn" in the world of programming is growing every day. Most recently, while working on a side project, I have fallen into the hole of poor application architecture and design. Why did this happen? Well, part of the reason why is because I oftentimes get too excited about starting to code that I don't take a step back to figure out what the actual underlying pieces are. Then, as I start going down one path I realize that maybe it isn't the best path and have to start over. Software architecture is on the list! (Included in architecture is also design patterns. I think of them as being hand-in-hand). Next up on the list is creating applications that are object-oriented. Most of my work is done for the Web and the web oftentimes doesn't have much object-oriented parts to it. But, when developing larger backend applications, object-oriented principles can make life a whole lot easier. Reduce code duplication, leaner and faster, and easier to update! Lastly, implementing test driven development. This goes a little with object-oriented programming, but how nice would it be if I knew my code worked before it was tested? If I was able to run tests to make sure everything operated as I expected? That sounds ideal.

My action items:

- Find courses in each of those 3 areas. If they are good courses that cost a little bit amount of money, invest in them!
- Have patience when building applications - starting off with a good design will help in the long run!

Time to learn more!

‍


Things I Wish I Knew (Coding Edition)


You may have noticed a new look for my potfolio. Well in this Twitch stream I share my thoughts about the current state, why I decided to change it up, and work in progress along the way.

---

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/SN0vEgK63WU"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>


[Twitch] Building a portfolio with nextjs and mdx


Skeleton loaders have always been a beautiful way to showcase to a user that 'something is happening'. Turns out it isn't as hard to implement as I thought! I was able to utilize a simple `npm` library to help us out in this endeavour. From there, thanks to our `useSWR` hooks, we were able to quickly implement our `loading` states based off of the status of our requests. Easy peasy!

---

<iframe
  src="https://player.twitch.tv/?video=926877695&parent=kevinguebert.com"
  frameborder="0"
  allowfullscreen="true"
  scrolling="no"
  height="378"
  width="620"
></iframe>


[Twitch] Implementing Skeleton Loaders 💀 in React


It has been a hot minute since we took a look at Harvy, the running app I built with React and Swift. Let's check it out in this week's installment of Coding After Hours.

---

<iframe
  width="560"
  height="315"
  src="https://www.youtube.com/embed/_yCyioyFyJU"
  title="YouTube video player"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>


[Twitch] Coding After Hours - Let's check in on our running app built with #react


Usually with logical operators in Javascript, one would use boolean checks. For example:

```js
if (true) {
  // do this
} else {
  // do that
}
```

With these operations, we can easily condense the above code:

```js
var x = 1;
var result = x > 0 ? "x is greater than 0" : "x is not greater than 0";
```

The above situations are fairly straight forward because we have a defined and known value that evalues to true or false. What happens though when you introduce values that could be truthy or fasly?

The same logic applies, one needs to be more careful though with the output. Remember, that many variables may be considered truthy depending on their type. Objects _always evaluate to truthy even if they are empty_.

```js
var sO = {};
const opt = sO || { name: "Default" };
const opt2 = !sO || { name: "Default" };
const opt3 = !!sO || { name: "Default" };

opt = {};
// opt2 = {name: 'Default'}
// opt3 = true
```

So be careful if you are every checking against non-boolean objects! Make sure you know what the expected boolean output of that object is, it may not be what you think logically.

Here's a couple examples of things that come out to be truthy:

- Any object (even if it is empty)
- Any array (even if it is empty)
- Strings containing only whitespace (" ")
- The string "false"

Some falsy objects:

- undefined
- null
- false
- 0
- NaN
- '' (empty string)


Understanding Logical Operators with Non-boolean Objects in Javascript


This past week while integrating Zapier and Webflow, I became surprised to learn that updating reference and multi-reference fields did not work right out of the box. After spending more time than I wanted on it, I was able to make it work for both single reference and multi-reference. This post is only about multi-reference as single-reference is actually "easier."

## Overview

![Zapier](../images/5f05c50d583e229dee5181d7_screen-shot-2020-02-21-at-9.22.09-am.png)
To do this in totality will take 4 steps. I use Google Sheets as my intermediary of choice but you can use Airtable or any other spreadsheet software.

### Step 1

In my "Lookup Spreadsheet Row in Google Sheets", I am looking up the corresponding row to see if there are already referenced items. For a User that has multiple Posts, I would be looking up the User and return the column for Posts reference.

That column will either be empty or be a string of referenced IDs like `"1234"`, `"ABCD"`, `"34543"`

### Step 2

Here I run some Javascript to clean up what I am looking for. I have the new Post ID coming in and a list of current IDs already attached to the user.

```js
let result = [];
if (inputData.articles != null && inputData.articles.length > 0) {
  result = inputData.articles.split(",");
}
result.push('"' + inputData.newArticle + '"');
result = result.join(", ");
output = [{ articles: result }];
```

The code goes through the Post column. If there is currently data there (already has posts), it splits the string into an array from `"1234"`, `"ABCD"`, `"34543"` into `["1234", "ABCD", "34543"]`.

Then, with the new Post ID, I push that onto the end of the array so it then becomes `["1234", "ABCD", "34543", "NEW*POST*ID"]`.

Lastly, because I can't have an array and actually need a string, I concatenate it all together into `"1234", "ABCD", "34543", "NEW*POST*ID"`.

### Step 3

Now I go back and update the same Google Spreadsheet with the updated posts reference. This is for next time and Post is added, it will be the correct references.

### Step 4

Lastly, a PUT request to the Webflow API. I follow the documentation [https://developers.webflow.com/#update-live-collection-item](https://developers.webflow.com/#update-live-collection-item) to understand a little bit more how the request should be built and ended up with something fairly simple in Zapier.

**Key Points from the Screenshot below:**

1. Make sure to update the `{CollectionID}` with your collection.
2. The `{Webflow_ID}` is the ID of the Webflow item you are trying to update. In this scenario, it would be the User
3. The fields `"name"`, `"slug"`, `"*archived"`, and `"*draft` are all _required_ in the request.
4. For the "articles" field (this is the Posts), we want to pass in the Javascript output from the previous step into an array. So that is literally [{Result from previous step}] with the "[ ]" around the output. This is the format that Webflow accepts in their API
5. Don't forget the Headers at the bottom along with your authorization token which you can find at [https://webflow.com/dashboard/sites/{website}/integrations](https://webflow.com/dashboard/sites/%7Bwebsite%7D/integrations)

![Zapier](../images/5f05c50da64e9141ad34b4b0_screen-shot-2020-02-21-at-9.32.32-am.png)


Updating Multi-reference Fields with Zapier & Webflow


If you've been following along on a little series I've had here on the blog, you will know that recently I've been looking into ways to improve my coding skills. It started off with **Things I wish I Knew (Coding Edition)**, followed by **Things I Wish I Knew - Progress**, and then **A New Coding Course** if you would like to check out the timeline of events.

Well, I am proud to say that I have officially completed the [**Python for Everybody**](https://www.py4e.com/) course this past weekend, and, if you want to learn how to program, I would **highly recommend** taking this class. The videos are broken up into manageable chunks, the lessons aren't too long, and Chuck Severance goes through all the topics extremely well. If you take an hour out of your day to go through a lesson or two, you would be up and running in no time.

Topics Covered:

- Functions, variables, expressions, loops, strings, & conditions (basics of programming)
- Working with files
- Lists & Dictionaries
- Tuples (which I thought was pronounced with a toop and not a tup)
- Regular Expressions
- Networks
- Web Services & APIs
- Object Orient Programming
- Databases
- Some data visualization

If you're a beginner programmer or want to get a quick refresher, check out [**Chuck Severance's Python for Everybody**](https://www.py4e.com/), a free course!
