DEV Community: Jordan Kicklighter

What are your go-to tech podcasts?

Jordan Kicklighter — Fri, 18 Dec 2020 15:27:42 +0000

To get the ball rolling, here are some of my favorites:

The Bike Shed

On The Bike Shed, hosts Chris Toomey & Steph Viccari discuss their development experience and challenges at thoughtbot with Ruby, Rails, JavaScript, and whatever else is drawing their attention, admiration, or ire this week.

The Bike Shed is a podcast sponsored by thoughtbot, run by thoughtbotters, talking about tech challenges encountered during the work week. I've gained insight into so many technologies from just listening to Chris and Steph chat about topics that showed up during their development week. Conversation often involves Rails and JS, but nothing is off-limits. Elm and Scala have come up a number of times.

Syntax

A Tasty Treats Podcast for Web Developers.

Hostedy by Wes Bos and Scott Tolinski, Syntax is a podcast for learning about new things in web development. Since Wes and Scott are both educational content creators, episodes vary from topic introductions to somewhat deep dives on more specific concepts. Definitely less "in-the-weeds" than The Bike Shed, which isn't really a good or bad thing.

The Changelog

Conversations with the hackers, leaders, and innovators of the software world

Episodes of The Changelog are generally setup as conversations with interesting people from the tech industry. From developer relations experts to software architects, you may not enjoy the guest of every episode, but there are almost definitely some that will pique your interest.

What do you listen to?

These are a few tech shows in my podcast player, what's in yours?

Photo by Alexey Ruban on Unsplash

Pass props to dynamic Vue components

Jordan Kicklighter — Fri, 04 Sep 2020 17:20:00 +0000

This article is also posted on my blog.

While brainstorming some new Vue components (that sounds familiar), I thought it would be nice to loop over a list of items and dynamically render the correct component for each one. The problem is that the components being rendered do not take the same props.

Disclaimer: this article is a bit more complicated than my last one. I assume that you understand the basics of Vue components and that you have some knowledge of modern JS patterns such as Array.map.

In Vue, it's very common to loop over a list of items and render a component for each item. This is usually done by specifying the component that will be rendered and adding a v-for to its tag in the template.

<!-- Contacts.vue -->
<template>
  <contact-card
    v-for="person in people"
    :key="person.id"
    :contact="person" />
</template>

<script>
  import ContactCard from 'ContactCard.vue'

  export default {
    components: {
      ContactCard,
    },
    props: {
      people: {
        type: Array,
        default: () => [],
      }
    }
  }
</script>

This is a very straightforward pattern seen often in Vue apps. In the example above, we have a component ContactCard that is meant to display a person's contact information. Let's take a closer look at ContactCard.vue to get a feel for what's going on.

<!-- ContactCard.vue -->
<template>
  <article>
    <h1>{{ contact.name }}</h1>
    <ul>
      <li>Phone: {{ contact.phone }}</li>
      <li>Email: {{ contact.email }}</li>
    </ul>
  </article>
</template>
...

So as you can see, we have a very basic component for displaying details of a contact. The root level is an article tag (yay HTML5) with an h1 tag containing the person's name and an unordered list of some contact information. Nothing crazy, but there is a required prop called contact.

Dynamic Components

As we build more of the app, we get the idea to add a timeline that shows the order that data was added to the system, which includes creating contacts. Because we already have such a robust component for displaying contact information, we decided to re-use it in this timeline view. Let's take a look at a new component for that.

<!-- Timeline.vue -->
<template>
  <contact-card
    v-for="item in history"
    :key="item.id"
    :contact="item" />
</template>

<script>
  import { historyArray } from 'Data'
  import ContactCard from 'ContactCard.vue'

  export default {
    components: {
      ContactCard,
    },
    computed: {
      history () {
        return historyArray
      },
    },
  }
</script>

At first glance, the Timeline component probably looks great. But let's look at the structure of historyArray:

[
  {
    id: 'contact-1',
    isContactItem: true,
    ...
  },
  {
    id: 'event-1',
    isSystemEventItem: true,
    ...
  },
  {
    id: 'contact-2',
    isContactItem: true,
    ...
  },
]

A closer look reveals that there are more than just "contacts" in this historical data. Indeed, we have contacts and system events to display. Luckily, someone has already created a SystemEvent component so we don't have to. Much like our ContactCard this component has a single required prop (event in this case) and displays relevant information about that prop. So let's change the Timeline component to dynamically decide which component to use for each item in the list.

<!-- Timeline.vue -->
<template>
  <component
    v-for="item in history"
    :key="item.id"
    :is="item.component"
    :contact="item" />
</template>

<script>
  import { historyArray } from 'Data'
  import ContactCard from 'ContactCard.vue'
  import SystemEvent from 'SystemEvent.vue'

  export default {
    components: {
      ContactCard,
      SystemEvent,
    },
    computed: {
      history () {
        return historyArray.map(historyItem => {
          if (historyItem.isContactItem) {
            // Return a new object that contains ALL keys
            // from `historyItem` and adds a `component` key
            return {
              ...historyItem,
              component: ContactCard,
            }
          } else if (historyItem.isSystemEventItem) {
            return {
              ...historyItem,
              component: SystemEvent,
            }
          }
        })
      },
    },
  }
</script>

You can see that instead of specifying contact-card in the template, we are now using a special tag called component. Along with this, there is a new is prop being passed in. Inside of the history computed value, we are checking each item to see if it is a contact or system event item (using some special helper functions that we assume exist), and we add the key component that contains the relevant component to render for that particular item. In the loop within the template, the is prop gets bound to that component key. The end result is that contact items cause a ContactCard component to be rendered and system event items cause a SystemEvent component to be rendered.

Note: you can read up on the component tag in the Vue docs.

If you're paying close attention, you may notice a slight problem: the SystemEvent component takes a prop called event, but the template is currently passing it a prop called contact. How can we get around that? Well one option is to pass both contact and event props to every component. This technically won't cause a problem, but it feels a bit messy. Regardless, let's see what that might look like.

<!-- Timeline.vue -->
<template>
  <component
    v-for="item in history"
    :key="item.id"
    :is="item.component"
    :contact="item"
    :event="item" />
</template>

...

Now every component in the list will be passed contact and event. They are both being passed the same variable, so the ContactCard component will see the contact prop and behave correctly, and the SystemEvent component will see the event prop and behave correctly. This will work fine, but as you can imagine could quickly get out of hand if we have components with numerous props needed. There has to be a better way...

Dynamic Props

Wait a minute! If we are dynamically declaring what component is going to be rendered, can't we dynamically declare what props that component should receive? If you read my last Vue post, then you already know that v-bind allows you to bind an entire set of props in one go. So let's see if we can apply that here.

Note: You can read more about passing an object's properties with v-bind in the Vue docs.

<!-- Timeline.vue -->
<template>
  <component
    v-for="item in history"
    :key="item.id"
    :is="item.component"
    v-bind="item.props" />
</template>

<script>
  import { historyArray } from 'Data'
  import ContactCard from 'ContactCard.vue'
  import SystemEvent from 'SystemEvent.vue'

  export default {
    components: {
      ContactCard,
      SystemEvent,
    },
    computed: {
      history () {
        return historyArray.map(historyItem => {
          if (historyItem.isContactItem) {
            // Return a new object that contains a `component`
            // key, an `id` key, and a `props` object
            return {
              id: historyItem.id,
              component: ContactCard,
              props: {
                contact: historyItem,
              },
            }
          } else if (historyItem.isSystemEventItem) {
            return {
              id: historyItem.id,
              component: ContactCard,
              props: {
                event: historyItem,
              },
            }
          }
        })
      },
    },
  }
</script>

Alright, I know the function for our history computed value is starting to get crazy, but it's really not doing much. If it's hard to follow, here is an example of what the resulting data structure would look like:

[
  {
    id: 'contact-1',
    component: ContactCard,
    props: {
      contact: {...}
    }
  },
  {
    id: 'event-1',
    component: SystemEvent,
    props: {
      event: {...}
    }
  },
  {
    id: 'contact-2',
    component: ContactCard,
    props: {
      contact: {...}
    }
  }
]

Take another look at the template now that you have an idea of how history is structured. Notice that the contact and event props were removed, and we just have a single v-bind instead. The value we give v-bind is item.props, which according to the snippet above, will contain the prop that is appropriate for each component. This is much cleaner than our previous approach, and keeps the template easy to read. If the components differed more, the history logic could easily be broken into multiple functions.

Summary

Sometimes there is a need to dynamically choose the component to display when looping over a list of items. This is very well supported by VueJS and made easy using the component tag. As complexity grows and components begin to be re-used throughout an application, these components may have prop interfaces that aren't really compatible with each other. Dynamically binding props to the component, just like dynamically declaring the component to be used, helps keep the template clean and readable.

Quick Tip: Disable Button On Click

Jordan Kicklighter — Thu, 10 Oct 2019 15:03:01 +0000

In a world full of JS frameworks and templating languages, there's still occasionally a need to write very simple pages. With a habit of leaning into Vue, React, etc. it can be easy to forget the basics when we don't need anything flashy.

Here's a tiny snippet to disable a button when it's clicked without the need for any extra JS scripts. It only takes a few words in an onclick attribute. Could be useful if you have some basic HTML form that submits on a button press.

What do you want to accomplish, unrelated to development?

Jordan Kicklighter — Fri, 04 Oct 2019 14:37:51 +0000

I've always found it enjoyable to hear what dreams, hobbies, interests, etc. other devs have. More often than not, there are similar interests that come up where you wouldn't expect. For instance, it always surprises me how many developers talk about their background in music performance when I share stories from high school/college marching band.

To get the ball rolling, my current life goal is to obtain a private pilot license. There are many reasons, and I'll likely do more research on ways to help the community such as the Civil Air Patrol, but the biggest draw is how much travel freedom that would provide. Imagine being able to fly from Orlando to Atlanta in the same time it takes to drive from Orlando to Tallahassee. (This is a random estimate, but I think my point still stands).

So what do you want to accomplish in life, outside of what you'd normally share on DEV?

Two-Factor Authentication

Jordan Kicklighter — Mon, 26 Aug 2019 00:00:00 +0000

Though this isn’t a new topic, I originally posted this on a different blogging platform and later moved it to Medium. It felt like a good idea to move it here (and to my blog.

This article is geared toward being understandable by less tech-savvy folks. If that describes you, or if you've ever tried to touch on the subject with anyone in that category, this article should provide some good basic info on the topic of Two Factor Authentication.

What Is It?

Generally speaking, the online services that we use regularly only require one form of authentication: a password. You tell the website who you are (your username) and then verify that you actually are who you said you are (with your password). Two factor authentication is exactly what it sounds like. Rather than having a single authentication factor, you have a second piece of information to identify yourself. Depending on the use, this may be a physical key that must be present when you type your password, it could be a fingerprint scan, or it could be a specially generated code that changes over a period of time. The most common two factor authentication for online services involves a 6-digit numeric code that gets regenerated every 30 seconds or so. Your phone or other device knows a secret about creating this code, and the online service you're using knows the same secret. When you go to a website to login, you enter your username and password. You are then prompted for the 6-digit code that is valid for that exact moment in time. Google, Facebook and many other popular sites both this method. Other services, such as Twitter, opt to send your phone a text message with a unique code when you try to login, which still requires access to your personal device.

Why Should I Use It?

If you haven't noticed, data breaches are getting a little too common these days. We're living in an era of technology and in a time when "data" is a buzzword among tech companies and news stories. Tech giants have your data, and everyone else wants to take it. Until the last several years, we have relied on passwords (and weak ones at that) to verify identities. With fast computers, it takes much less effort to crack passwords than it used to. The beauty of two factor authentication is that it doesn't matter who has your password. In order to login to my Gmail account, someone must know my username, password, and have physical access to one of my electronic devices during the exact moment he/she is trying to login.

Where Do I Start?

Some services have different solutions to this security problem, but luckily most of them support an open authentication standard. Google has created an app on iOS and Android called Google Authenticator. Getting started is as simple as going into the settings of whatever site you want to enable authentication on (Gmail, Facebook, etc.) and scanning a QR code on your computer with the Google Authenticator app. While this app does a great job of keeping things simple, it's just a little too simple for me. For instance, if I ever lose my device I have to reset all of the authentication codes for every service I use. You're also out of luck if you don't have an iPhone, iPad, or Android device.

Enter Authy. Google Authenticator did a great job of getting people to stop making excuses and start using better authentication, but that’s about as far as it went. Authy creates an account that stores all of your authorization codes so that you can get them on multiple devices. I know it seems odd to enable two factor authentication to make things more secure than a password, and then turn around and store them in an account that’s only protected by a password. The key here is that you use one lengthy, confusing, hard-to-crack password for this account. The benefit is removing the negatives from using two factor authentication and securing your online accounts. Authy has apps for Android, iOS, Blackberry, and Chrome, and they all stay synchronized with each other (and password protected). It’s also worth mentioning that the apps look infinitely nicer than the bland Google Authenticator apps.

Some sites, such as Twitter and Facebook*, offer their own solutions as well. But most places that offer two factor support the Google Authenticator/Authy standard. So go download Authy on your main device and read how to enable two factor for your Google account. What are you waiting for? You can't afford not to be secure anymore.

*With Facebook, you can use the Facebook mobile apps to generate codes, as well as using Authy or Google Authenticator.

Bash Quick Tips

Jordan Kicklighter — Thu, 22 Aug 2019 20:59:54 +0000

This was originally posted to my blog with some photo examples included.

This is a collection of bash aliases/functions and git aliases that make my life a little easier and save me keystrokes. Hopefully you find something useful in here, let me know what tips you have!

Bash

Aliases and functions for bash (although technically I use zsh). Some are mine, and some were collected from the internet. Credit is provided where relevant.

For organizational purposes, I have my aliases in .zshrc and most of the functions in a separate file callked .zsh_functions that is included near the top of my .zshrc. Some functions are in separate bash files that are available in my path, and I am in the process of moving most functions into there to lower the amount of functions zsh has to load into memory at start.

Current IP

Get your current external IP address.

alias ip=`dig +short myip.opendns.com @resolver1.opendns.com`

Usage: ip

Credit: Linux Training Academy

Make Directory and Go There

Pretty straightforward, this makes a new directory and does a cd into it, saving a command and saving retyping.

mkc () {
  mkdir -p "$@" && cd "$@"
}

Usage: mkc [Directory Name]

Git

Git Checkout Search

This function opens an fzf fuzzy-search prompt for your git branches, allowing you to find the branch you want with fuzzy search. Since the zsh alias for git checkout is gco, adding the s for "search" made sense to me.

Note: this requires fzf to be installed and in your path.

gcos () {
  git fetch
  local branches branch
  branches=$(git branch -a) &&
  branch=$(echo "$branches" | fzf +s +m -e) &&
  git checkout $(echo "$branch" | sed "s:.* remotes/origin/::" | sed "s:.* ::")
}

Usage: Type gcos, hit enter, and then start typing your branch name

Credit: Christoffer Skeppstedt's post on Coderwall

Done with Branch

On projects using Pull Requests/Merge Requests heavily, I found myself constantly clearing out old branches after they were finished. This git alias will checkout master and delete the branch you were just using, but only if it has been merged somewhere. So if it's been pushed to a remote branch or merged to another local branch, it will be removed.

# in .gitconfig
[alias]
  done = "!f() { git checkout master && git branch -d @{-1}; }; f"

Usage: Type git done, hit enter, and be transported to master while your old branch is annhilated (from your machine only)

Push New Branch

On those same projects, there end up being many branches made locally that need to be pushed to a remote. This bash alias pushes your current branch to origin, creating a branch with the same name as your local branch. (I used gpu because gp is the zsh alias for git push. So I think "git push upload" in my head.)

alias gpu='git push -u origin $(git rev-parse --abbrev-ref HEAD)'

Usage: gpu

Pretty Git Log Tree

Display the git log in a tree format.

alias gl='git log --all --graph --decorate --oneline --simplify-by-decoration'

Usage: gl

Credit: someone on Twitter several years ago.

Kubernetes

Execute Commands in Pods

For some of my work, I will have a Kubernetes cluster with debug pods for developers to connect to. I was getting annoyed by having to use kubectl get pods to find the current pod name when I knew that some part would always be consistent (e.g. maybe the word "debug" is present).

This function is used like so:

kube_exec [STRING IN POD NAME] [CONTAINER IN POD] [COMMAND]

So for example, if we have a Kubernetes pod called app-debug-pod-12345 with a container inside called rails, the command kube_exec debug rails bash will start a bash session in the rails container running in the first pod that is found containing the string debug.

kube_exec () {
  exec_pod=`kubectl get pods --field-selector 'status.phase!=Failed' | grep ${1} | cut -d" " -f 1 | head -1`
  echo "Executing ${2} in ${exec_pod} at `kubectl config view -o=jsonpath='{.current-context}'`"
  echo ""

  kubectl exec $exec_pod -c $2 -it $3
  unset exec_pod
}

Usage: kube_exec [POD NAME] [CONTAINER] [COMMAND]

Pass all props to children in Vue

Jordan Kicklighter — Fri, 16 Aug 2019 17:15:25 +0000

This article is also posted on my blog.

While brainstorming some new Vue components, I wanted to have a way that a single wrapper component could fetch all of the data needed for the children views, and pass that data through (around 5 layers of) children down to the the bottom.

So I did some experimenting, and here’s a way to pass all component props down through child components. Link to codepen.

Vue actually makes this very easy for us. All component props are available in the $props object (this.$props if you're not in the template), and we can use the Vue directive v-bind without specifying a specific prop name in order to bind a whole object of props to the child.

Example

Let's assume we have some wrapper component that is going to render a child comp1 component and pass it both propForComp1 and propForComp2 as props.

Here's Comp1.vue:

<template>
  <div class="comp1">
    <span>{{ propForComp1 }}</span>
    <comp2 v-bind="$props" />
  </div>
</template>

<script>
  export default {
    components: Comp2,
    props: [
      'propForComp1',
      'propForComp2'
    ],
  }
</script>

Notice that comp1 is only using propForComp1 and doesn't really care about propForComp2. But since it needs to be included in the props passed to comp2, propForComp2 still needs to be declared inside the props object. If not, $props will not contain it.

You can do this for many levels of components, but remember that the props any child needs must be declared in all parents. So if you have 5 layers, propForComp5 must be declared as a prop in prop1, prop2, prop3, prop4, and prop5. You can make this a little easier by using a Mixin, which is the route I took in the codepen.

UPDATE: You actually don't have to do this last bit! Just like Vue gives up $props, the $attrs object includes all of the passed attributes that the component doesn't declare as props. This means, that we can simply use v-bind="$attrs" to pass down the attributes that children would care about, even if the component doesn't specify them itself.

The previous example would turn into:

<template>
  <div class="comp1">
    <span>{{ propForComp1 }}</span>
    <comp2 v-bind="$props" v-bind="$attrs" />
  </div>
</template>

<script>
  export default {
    components: Comp2,
    props: [
      'propForComp1'
    ],
  }
</script>

A diff to see the changes:

<template>
  <div class="comp1">
    <span>{{ propForComp1 }}</span>
-   <comp2 v-bind="$props" />
+   <comp2 v-bind="$props" v-bind="$attrs" />
  </div>
</template>

<script>
  export default {
    components: Comp2,
    props: [
      'propForComp1',
-     'propForComp2'
    ],
  }
</script>

Thanks to @morficus for pointing this out!