ES6 Node Script Template Repo

Jeff Wilkey — Fri, 31 Jul 2020 01:08:30 +0000

I've been tasked with writing a ton of one-off scripts for work lately and most of the time they're handling emergencies. Due to the urgent nature of these tasks I'm left with a local collection of scripts that really should have similar file and code structure but alas this is not the case.

So in an effort to start addressing this issue I've created a template repository for node scripts that I thought I would share with the dev community. It's dead simple and allows use of any package manager.

I'm hoping this helps me clean things up a bit and might even help you.

If you have any suggestions feel free to drop them in the comments

Github Repo

100x50 Tour of the Solar System #codepenChallenge

Jeff Wilkey — Wed, 04 Sep 2019 19:04:10 +0000

I've been on kind of a space kick this week and decided to participate in this week's Codepen challenge.

Thank you for checking out my take on it, look forward to seeing what everyone else comes up with.

A Simple Pokedex App in React

Jeff Wilkey — Tue, 03 Sep 2019 07:55:26 +0000

The Goal

Have a searchable list of the original 150 pokemon, when a list item is clicked display the associated card and readable information about it.

Execution

I decided to build the project on React since it's fast and being able to separate different elements into components will help significantly. Then as far as the layout goes I went with a very simple UI (no CSS framework) and utilized the React-Select package for a searchable dropdown:

I also added a flat logo I found on google images, (couldn't find the author but, kudos!) and added a little bounce animation. While it's unimportant to the functionality of the site I really like adding little quirks like that. Heres a pen demonstrating the bounce animation (infinitely):

Utilizing an API

I was initially going to webscrape the original 150 pokemon names but luckily I found this Gist by octalmage which turned out to be exactly what I needed for React-Select. And with a simple map:

// ./utils/pokemonOptions.js
const Pokemon=new Array("Bulbasaur","Ivysaur","Venusaur","Charmander","Charmeleon","Charizard","Squirtle","Wartortle","Blastoise","Caterpie","Metapod","Butterfree","Weedle","Kakuna","Beedrill","Pidgey","Pidgeotto","Pidgeot","Rattata","Raticate","Spearow","Fearow","Ekans","Arbok","Pikachu","Raichu","Sandshrew","Sandslash","Nidoran","Nidorina","Nidoqueen","Nidoran","Nidorino","Nidoking","Clefairy","Clefable","Vulpix","Ninetales","Jigglypuff","Wigglytuff","Zubat","Golbat","Oddish","Gloom","Vileplume","Paras","Parasect","Venonat","Venomoth","Diglett","Dugtrio","Meowth","Persian","Psyduck","Golduck","Mankey","Primeape","Growlithe","Arcanine","Poliwag","Poliwhirl","Poliwrath","Abra","Kadabra","Alakazam","Machop","Machoke","Machamp","Bellsprout","Weepinbell","Victreebel","Tentacool","Tentacruel","Geodude","Graveler","Golem","Ponyta","Rapidash","Slowpoke","Slowbro","Magnemite","Magneton","Farfetch'd","Doduo","Dodrio","Seel","Dewgong","Grimer","Muk","Shellder","Cloyster","Gastly","Haunter","Gengar","Onix","Drowzee","Hypno","Krabby","Kingler","Voltorb","Electrode","Exeggcute","Exeggutor","Cubone","Marowak","Hitmonlee","Hitmonchan","Lickitung","Koffing","Weezing","Rhyhorn","Rhydon","Chansey","Tangela","Kangaskhan","Horsea","Seadra","Goldeen","Seaking","Staryu","Starmie","Mr. Mime","Scyther","Jynx","Electabuzz","Magmar","Pinsir","Tauros","Magikarp","Gyarados","Lapras","Ditto","Eevee","Vaporeon","Jolteon","Flareon","Porygon","Omanyte","Omastar","Kabuto","Kabutops","Aerodactyl","Snorlax","Articuno","Zapdos","Moltres","Dratini","Dragonair","Dragonite","Mewtwo","Mew");
export default Pokemon.map(p => ({
  value: p.toLowerCase(),
  label: p
}));

I was able to add a dynamic searchable select field with 150 Pokemon:

Next, I did some research on different Pokemon related API's. (There's a few out there). Eventually, pokemontcg.io made itself apparent as the best option for what we'll need.

After some tinkering around with the pokemontcg SDK, I figured out that I wanted cards from the "Base" series and needed to filter results returned from the API to make sure I receive the exact card I'm looking for.

Utilization of the pokemontcg SDK looks something like this:

// pass handleChange in as the onChange prop for the React-Select field
handleChange = e => {
    if (this.state.selected !== e.value) {
      pokemon.card.where({ name: e.value, series: "Base" }).then(cards => {
        // filter out cards that dont match name exactly
        cards = cards.filter(card => card.name === e.label); 
        this.setState({
          selected: e.value,
          index: 0,
          cards
        });
      });
    }
  };

Then finally with this call we receive a few cards and select the one at index 0. Which up to this point has been completely accurate but is definitely not foolproof. However, it's good enough for this application and we use this data (shown below) to display information on the page:

"card": {
  "id": "base6-3",
  "name": "Charizard",
  "nationalPokedexNumber": 6,
  "imageUrl": "https://images.pokemontcg.io/base6/3.png",
  "imageUrlHiRes": "https://images.pokemontcg.io/base6/3_hires.png",
  "types": [
    "Fire"
  ],
  "supertype": "Pokémon",
  "subtype": "Stage 2",
  "evolvesFrom": "Charmeleon",
  "ability": {
    "name": "Energy Burn",
    "text": "As often as you like during your turn (before your attack), you may turn all Energy attached to Charizard into R for the rest of the turn. This power can't be used if Charizard is Asleep, Confused, or Paralyzed.",
    "type": "Poké-Power"
  },
  "hp": "120",
  "retreatCost": [
    "Colorless",
    "Colorless",
    "Colorless"
  ],
  "convertedRetreatCost": 3,
  "number": "3",
  "artist": "Mitsuhiro Arita",
  "rarity": "Rare",
  "series": "Base",
  "set": "Legendary Collection",
  "setCode": "base6",
  "attacks": [
    {
     "cost": [
       "Fire",
       "Fire",
       "Fire",
       "Fire"
    ],
     "name": "Fire Spin",
     "text": "Discard 2 Energy cards attached to Charizard in order to use this attack.",
     "damage": "100",
     "convertedEnergyCost": 4
    }
  ],
  "resistances": [
    {
      "type": "Fighting",
      "value": "-30"
    }
  ],
  "weaknesses": [
    {
      "type": "Water",
      "value": "×2"
    }
  ]
}

Then after some styling, we end up with the following product shown in the image and codesandbox. I've also hosted it on heroku here.

UPDATE Jan. 2021: If no one has visited the site recently it'll take about 30 seconds to spin up and may require a refresh if you hit the heroku error screen. I'll try to fix this as well as update codesandbox when I have time. It's really worth checking it out on Heroku though because I've added support for hundreds more pokemon as well as the ability to flip through cards from different series for each one.

Thank you very much for reading, I hope this article helps or inspires someone. I will be continuing to contribute to this project via this GitHub Repo feel free to star if you want to keep up with progress or contact me if you'd like to contribute.

Things to add or be worked on

A lot of refactoring
~~Support for all Pokemon~~
~~Show all versions of cards~~

Solar System

Jeff Wilkey — Sun, 01 Sep 2019 18:06:13 +0000

First time I've built something like this, had a lot of fun with it and thought I'd share.

** UPDATE: ** By popular demand, Pluto has been added

DEV Community: Jeff Wilkey