DEV Community: Nina

What can happen in 2 years?

Nina — Fri, 28 May 2021 17:06:02 +0000

I wrote for awhile on Dev.to 2 years ago.

What happened?

The short story is depression, but you're not my therapist, so let's not get deep into that. My second to last post on this site was a feeling of regret for not working hard enough.

Not Working is Death?

Nina ・ Jun 5 '19 ・ 1 min read

#discuss

I was upset at myself for playing video games instead of working on coding. But really, as Kasey Speakman discussed with me, it seems I was frustrated because I wasn't doing the right thing. I wasn't doing something fulfilling. During the times that I was working on projects as a newbie, it was especially rewarding because I was making little things move on the page and that made me happy!

I became unhappy because I could no longer find work that would challenge me. I was already feeling that, so that's why I had another article asking for advice of trying to get into the industry.

Pretty much after that post, I fell hard into that aforementioned depression and mental illness. After some hard work and consideration (and weirdly becoming much better and stable during the pandemic) in September of 2020 I just searched for "programming scholarships for women". I knew I needed guidance, but there was no way I could swing spending more money on school since I already went to fancy pants elite art college.

I happened upon a place called Kenzie Academy. It had a good payment plan (all on their website). I knew it was made for beginners and I had already surpassed that, but I wanted to solidify my web development experience and be able to create a web site from top to bottom and make connections to professionals in the industry.

Currently I have finished my Front-End Certificate (6 months). It was tough at times, but I learned a lot about React, MongoDB, and even Websocket for chat apps! I am now about a month into Quarter 3 where we learn Python for Backend.

I hate it.

So once again, I have been turning to video games and streaming as distractions.

But this time it feels different.

I've been using an app called Mix It Up to create alerts because I knew I could use images and have them more customized them Streamlabs that 99% of people use. What I didn't know is that you can almost have full control of the HTML/CSS of every single event that takes place.

I love it.

Warning I say a single bad word

Sadly you can not use javascript with it yet, but I'm learning lots of CSS tricks. I've been having so much fun doing this. When I make these silly little things, I think "This is kinda what I want to do". It's the exact same thing I liked when I was a beginner.

I was making little things move on the page and that made me happy!

It's the exact reason I love making games too. I'm a very visual person. It seems that manipulating data on the backend is just not what excites me. So now I have the make the decision of what I want to do, 6 months earlier then anticipated. I have been advised to stay in school, but look for jobs starting yesterday.

Which jobs? I'm not sure. Front-End Development is the easiest to pin down, but I was also told about UI/UX and CSS Animation Specialist. I'm not perfect yet, but I have a silly little digital certificate to my name now.

So how has Dev.to changed in 2 years? What kind of articles are most popular now? Where has your coding journey went since 2019?

Nina's Mini Experience With Game Development Pitches As A Freelance Artist

Nina — Tue, 17 Dec 2019 23:03:37 +0000

Strange random post here, but it's something I've been thinking about as I've been doing commissions lately. I know some programmers might aspire to be game developers here, so here's just a little mini guide from the other side!

Pitch

It's great to tell the artist you wish to hire about your game! It's better to give a brief synopsis and they'll ask you more about specifics as it pertains to the art.

What's more important to tell the artists is what you expect them to do. Knowing about your idea is all well and good, but you need to say what's needed, with what kind of art style, the size of the assets, if you expect character animations and/or backgrounds, things like that. It's less time you're waiting for a response and less stressful for the artist trying to pull questions out of you.

Artist Skills

It's important to know what you need to be done in your game and in what specifications because artists are not jack of all trades. There may be tasks they are not able to do, or can not do well, and you might need to use multiple artists to get what you want in the end. In addition, if you want to hire an artist early on because you don't know the art direction of the game, not all artists can act as directors. They too need guidance and do not inherently know what's best for your game. Only you can know that.

Budget

No, you don't actually have to talk about the strict numbers in the first conversation. Usually if you tell the artists the workload you have for them, they can give you a price or a per hour estimate. However, if you are not planning on paying the artist with direct monetary value you must tell them upfront. Waiting to pay until a kickstarter or doing revenue share are examples.

If you are offering the promise of exposure because your game will "make it big", just don't. If you game is really that great, it can make it just fine with placeholder assets. Don't ever expect anyone to do anything for your game for free or accuse them of not having enough passion. They are probably passionate about their own things, just not your specific idea.

Revenue-share is not impossible, but it's really shaky ground. You must have examples of previous games or programming experience, as well as extremely solid goals for your development.

Experience

If you really want to sell your game that you want the artist to work on, you should have some kind of experience. Many artists will take what's offered to them if you're paying, but it can be beneficial to both of you if your artist is convinced that this will be a successful venture. Required if doing rev-share or alternative payments.
Not a programmer? The programmer comes before the artist, and parts of the budget can apply to your programmer as well. Your game should really be already started before you bring an artist onboard.

Side Note

It's not in the artist's best interest to tell you this, but if this is your first game, don't get art done. It doesn't matter if this is your passion project you've been dreaming about for years (there's a whole bit that could be said about what a bad idea that is), unless you like dumping money in a hole or your game is 80% complete, there's no reason for you to get assets done now. It will take time, your tastes will change, the style could change, it may be held up for years with your own inexperience, anything could happen.

Not Working is Death?

Nina — Wed, 05 Jun 2019 15:53:38 +0000

I feel I'm not alone in feeling like if you're not working on something productive, you're dying a small death. Each moment could be something new, but if you're doing what I've been doing the past two weeks (playing EVE Online), those moments are dying and you'll never get them back, is what it feels like.

Is it healthy to think a little bit of this, to try and get motivation, or is it all bad? I wonder if my avoidance of seriously working on code is due to some kind of burnout from months of thinking like this, but I don't feel particularly re-energized from my break, mostly just guilt.

What do you do you personally do when you don't feel like coding? What kind of feelings do you get when you aren't actively working?

The Goldilocks Problem: Project Sizes

Nina — Fri, 24 May 2019 14:49:07 +0000

As someone who is trying to get a job, I'm constantly thinking of little apps I could make to enhance my skills and my portfolio. Because of this, I also try and weed out ideas that are too "big". They're something I want to do, and to accomplish someday, but I'm not sure if it's worthwhile to do so early in my journey. The other problem, is that I've started to run out of "small" projects. I find myself doing somewhat of the same things, and don't feel that they are noteworthy enough make posts on so I feel like I'm stagnating.

I can't find that "just right" size of project for me to tackle. Something bigger then a small standalone app, but not something as huge as involving a database and user accounts. What are everyone's thoughts about this?

Being New Is So Good It Might Hurt

Nina — Wed, 08 May 2019 13:05:45 +0000

It's been nearly a decade since I started college for illustration, and even longer since I was beginning to take art seriously. Being new is exciting, but I had just really forgotten what it was like until I got into coding again this past year. Even with a rocky start, coding has been so satisfying for me every time I could overcome and make things work. Being new means many things, but could it also be bad for me if I stay? Ideally I want to advance, I'm looking for jobs still, but I find myself a little lost at times. I still feel too new to give myself responsibility, but tired of self projects in a bubble. Here are my thoughts on positives and negatives of being a beginner, at my current stage.

Confidence from Ignorance

There is a saying that goes a variety of ways and I can't seem to find it again, but it stuck with me and it works like this: A beginner knows that a mountain is a mountain. An intermediate knows that a mountain is not a mountain. An expert knows that a mountain is a mountain.

A beginner does not know all the things they don't know. Seems simple, right? How can you know everything you don't know? However, if you've reached an intermediate level, you know for a certain fact the breadth of knowledge you don't possess. There's a lot more thinking involved in trying to navigate what you're learning and what should be important, a lot of theory on how to best learn. Beginners just learn and learn without thinking because they can never run out of things to learn before they become intermediates. When you start running out of things readily available to learn at every corner and have to begin searching, you have reached the next level. But before then, you just simply don't know. Everything you learn is something you know and it's that simple.

Underestimating Yourself

The problem with this is that I feel like it can lead to underestimating of your knowledge. Because you don't have a clear sense of what you don't know, you can think you're such a newbie you shouldn't be trusted when in fact you are more then capable and should be held to increasingly higher standards. You might miss out on opportunities because you feel like you don't have the experience, when you really could do a job at your level.

Endless Possibilities

As you learn about code, you also learn about opportunities. I want to code! This is what I thought when I started, but now it seems like a silly sentiment. You want to code what exactly? Front-end, Back-end, websites, application, data analysis? Maybe I want to actually be a Developer Advocate as well. I simple just did not know the difference or the existence of these opportunities when I started, and while I still have endless possibilities, it might be time that I moved into a specific path.

Narrowing Your Search

While a newbie, the idea of a job or being a working professional seems like a far off dream. You can't really be preparing for a job you don't know about. Can you? I say that I want these jobs, but I haven't taken the time to consult someone and really analyze what's best for me, because I still feel so new. It doesn't seem like it's time yet, but it's possible that it's been high time to narrow your search for what you want to be for awhile, you're just not aware of it yet.

The Lessened Weight Of Making Mistakes

When you are new, you make a lot of mistakes. This is a natural part of learning, and fixing mistakes can help you accelerate your learning. Knowing what not to do is just as important as knowing what to do. If you make a mistake as a newbie, no one will (well some ruder people will) harm you for it. It's to be expected, and it seems like a lot of people are willing to help you see the light.

Fear Of Advancement

You have a lessened responsibility as a newbie. If you make a mistake it's because you're new. But what if it wasn't? What if you really are more capable then you think, and you're still making mistakes? This can be a fear that can stop you from advancing to the next level. The more you know, the more responsibility you have to make sure you're doing it right. That can be scary, and it's much more comfortable to call and declare yourself as a newbie for longer then you intend.

What does this mean for me?

It means I might be on the cusp of entering my developer's puberty. Realistically, if I'm looking for jobs I want to convince them that I'm not just some newbie, but why then do I still label myself as such to everyone else? Having grown up once before for a previous career, I am more aware of the difference between intermediate and beginners. I know, therefore I have fear. Growing up means more responsibilities, and it sure is more comfortable not having those!

What's the solution to this?

I don't know.
I'm still a newbie, remember? :p

In actuality though, I have an idea, I just haven't acted on it. I should be looking for guidance at this time, though I am hesitant to be a bother on anymore nor do I have the money for professional mentorships. Reaching out in a non-annoying way is almost as hard as having responsibility it seems.

Anyways, I was inspired somewhat by these articles about knowing what level you are, and I suggest you give them a read!

The Stages Of Your Software Development Career

James Hickey ・ Mar 1 '19 ・ 4 min read

#career #webdev #tips

I also want to give thanks to Ali Spittel for taking a look at my portfolio and helping to answer questions I had about where I should be at this moment. This moment of clarity helped me think harder about my current level.

Ali SpittelFollow

Passionate about education, Python, JavaScript, and code art.

If anyone has any advice for someone in this transitional period, please, I'm all ears!

PKMN Egg Moves with a side of acceptance

Nina — Sat, 20 Apr 2019 01:15:19 +0000

Project Here

Hey, it's been awhile! I'm sorry I didn't get to replying to the wonderful replies to my help thread, but it feels like I'm too late now, so I just want to say thank you here. I've been slowly working on another small project, with quite a few started and stopped inbetween. It seems I might be in a little bit of depression spell, but I'll try and work through it.

What are Breeding Chains/Why This Project

If you already know about pokemon breeding chains, or just simply don't care about the specifics, move past this section.

Pokemon can breed with each other, but only specific groups can do so. Pokemon also have the ability to learn special moves only through breeding with different species, and these are called egg moves. Sometimes, it takes a few generations of pokemon passing down a move to get the right egg group combination for the pokemon you want, and these are called breeding chains. For instance, Eevee is able to know the move Wish. No pokemon in Eevee's breeding groups (Field) can learn Wish just by level up. How does Eevee learn Wish then? We look for a pokemon that has a second egg group, such a Skitty, who learns Wish as an egg move, and while in the Field group, is also in the secondary Fairy egg group. From there, there are mutliple Fairy group pokemon who can learn Wish and breed with Skitty. Since Swirlix and Eevee can't breed, we get a mediator.

Thus we end up with a chain like this: =>

Female Skitty & Male Swirlix who learned Wish at level 45 -> Who then have a Male Skitty who know Wish at birth who breeds with a Female Eevee -> Eevee child with Wish as a starting move.

My notebooks back in high school have breeding chains written out, planning to get a desirable set of moves on a baby pokemon. So my thought would be a tool that could help with this creation. To be specific, I set out have the program make the chains for you, but we'll see why that didn't happen.

Goals

parse pokemon information, not with api because way too many pokemon and data (done)
display egg moves in an appealing manner (done)
match pokemon that fit into multiple egg move groups (done)
ability to make breeding chains in app (NOPE)

Data

First we want to figure out how we want to handle our data. PokeApi is available, but I was checking the specifics over 700 pokemon and the api is pretty complicated when it comes to listing moves. PokeAPI doesn't just have a list of moves, it has the data from all versions of the game for the move and how it's learned. For this reason, I went with a .json file of more basic pokemon information provided me by my friend Dakota that she's used for her projects. Here the moves are split into learned moves at what level, and a list of egg moves, which is perfect for all the data parsing we're going to do.

Working Outside of React

I knew I would have to be doing a lot of raw data parsing, so I started a normal javascript file that doesn't have anything to do with React. The takes care things as little as getting a moveset list from an object contain the levels and moves, and as big as comparing up to four arrays to find pokemon in the egg groups that learn a specific move. While there's a lengthy unused function, it ended up being around 250 lines long. There's a lot to parse! Things I learned about: the Set Object! This is a set of unique values, so it's good for getting rid of duplicates in an array, and just converting back by doing a spread operator on the set's contents.

I did it more in the unused function, but there's some light recursion happening as well. The problem is for baby pokemon, they are unable to breed so are listed in the undiscovered group with legendaries, so along their pages wouldn't be very useful as it's full of pokemon that can't breed. So if undiscovered, it looks for the pokemon's next evolution, and if it can't find any it just returns an empty array, which signals to react that it will display a message.

forEggMoves(move, pokemonName) {
  const relatedPokemonGroup1 = Search.byEggAndMove(move, Pokedex[pokemonName].egg_groups[0]);

  if (Pokedex[pokemonName].egg_groups[1]) {
    const relatedPokemonGroup2 = Search.byEggAndMove(move, Pokedex[pokemonName].egg_groups[1]);

    let combine = relatedPokemonGroup1.concat(relatedPokemonGroup2);
    return sortByID([...new Set(combine)]);

  } else if (Pokedex[pokemonName].egg_groups[0] === "Undiscovered") {
    if (Pokedex[pokemonName].evolutions) {
      let name = searchableName(Pokedex[pokemonName].evolutions[0][0]);
      return Search.forEggMoves(move, name);
    } else {
      return [];
    }
  } else {
    return sortByID(relatedPokemonGroup1);
  }
}

Realtively Light Top Level Component

For once, the top level component is very light weight. It does the job of importing, but besides that it lets the pokemon entry and the pokedex do all the work with the pokemon's name, gotten from react router's url.

class App extends Component {
  render() {
    return (
      <div className="app flex column h-center">
        <Header
          searchByPokemon={this.searchByPokemon}
        />
        <Route
          path={`${this.props.route}/:pokemon`}
          render={({ match }) => {
            return <PKMNEntry
              key={`${Pokedex[match.params.pokemon].display_name}`}
              searchName={Pokedex[match.params.pokemon].name}
              name={Pokedex[match.params.pokemon].display_name}
              eggGroup1={Pokedex[match.params.pokemon].egg_groups[0]}
              eggGroup2={Pokedex[match.params.pokemon].egg_groups[1]}
              eggMoves={Pokedex[match.params.pokemon].egg_moves}
              learnedMoves={Pokedex[match.params.pokemon].moveset}
              searchEggMoves={Search.forEggMoves}
              searchByPokemon={this.searchByPokemon}
              isEggChain={Search.isEggChain}
              createMultiEggChain={Search.createMultiEggChain}
            />
          }
          } />
      </div>
    );
  }

  searchByPokemon = (pokemon) => {
    window.scrollTo(0, 0);
    this.props.history.push(`${searchableName(pokemon)}`);
  }
}

The router in this project was actually quite tricky! The main method of finding pokemon is a select bar on the top of the page. It turns out the select bar doesn't like having Links inside of them, really only about onChange events. (note: put the on change on the select, not the options, firefox is okay with options but nothing else is learned that the hard way)

For this we needed to delve into the history. From my understanding, react router is a wrapper around the history package in the first place, but we can still do some forceful work towards it.

import React from 'react';
import ReactDOM from 'react-dom';
import { Router } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import './style.scss';

import App from './App';

let history = createBrowserHistory();

ReactDOM.render(
  <Router
    history={history}
    basename={process.env.PUBLIC_URL}
  >
    <App
      route={process.env.PUBLIC_URL}
      history={history}
    />
  </Router>
  , document.getElementById('root'));

From my testing and trying to get my site to work with github pages, the router holding it's history and basename are useless and helped nothing but I still kept them there. Originally I had App be a 'home' route at '/' to keep the history in the props, but that caused a lot of conflicts for the github pages project, so instead we just pass the route and history as props into the App component itself to work with it. Router is a little bit touchy, so it's going to be something I have to work with more on large "paged" projects.

Display Information

The most important part about the design is accessing the information in a quick manner. We could put all kinds of info, but at the end of the day this is a tool about getting the movesets, so we list the learned moves and then display what pokemon can help with learning egg moves at a glance.

The actual only use of state for this project is a live updater that finds pokemon in the egg groups of multiple moves with the checkboxes to the right. The goal of this is to get as many egg moves with one chain as you need, so you can use this to compare who's in what group quickly. In the more detailed egg move list, pokemon circled in red require a chain to complete the egg move pass down.

No Chain Maker

I have to admit that I reached a point that might have been out of my abilities. I've been sitting on this project for over a week trying to find a solution, but I couldn't find anything that worked well for me. I did make a function that will return the quickest path to a move, but usually we need to take into account specific pokemon we have and multiple move sets. To do this, I would need to stop input and get user feedback on every single stage of the chain. At that point, I think it's easier to click on the pokemon and go to the page to look at information then it would be filling out a forum at each stage of the chain and having to undo and redo each step. It would also be difficult to try and replace middle parts of the chain as well. For this reason, I decided that I wouldn't do a chain maker. Calculating ALL chains is a monstrous task that can very easily end up in a loop that I don't think I'm ready for yet, and the other option is cumbersome to what it supposed to be a simple display.

What's Next

I honestly don't know! I have a few other projects I was picking at, but I'm not in love with them. I didn't get a job yet, but the exciting news is I got a volunteer position for a pokemon fansite that I frequent to help with their design and other bigger plans, so that's really cool and hopefully I can learn a lot there. Again, thank you for any comments you've left that I didn't end up replying to before it's been an embarrassing long amount of days later, I'll perk up soon I think!

Internship/Unpaid or Hold out for Entry-Level?

Nina — Mon, 08 Apr 2019 01:10:12 +0000

I'm a self-taught developer who's looking to break through in the industry and I need to get experience somewhere. My living situation can take care of me as long as nothing goes wrong (no savings), but I feel like I'm lying when I apply for jobs that want years of experience for entry level even if I'm honest about my position. There's also opportunity in either internships or non-profits, but I went to a meeting for Central Arkansas Javascript Developers and they recommended I look for entry level jobs, not internships.

Do I hold out and wait until I'll find the right job that will take me as a newbie, or should I be hopping on with anyone who will trust me to get real experience right now?

If you look at it from a no school perspective, it's doing real experience without the debt if they'll take me, but also there's a chance I could get paid while getting experience too and not be as such a burden on my family.

Using Reddit's API to find Pokemon Trades

Nina — Sun, 07 Apr 2019 12:25:31 +0000

Project Here

Literally all my projects since starting React either are pokemon based or use pokemon art. does she like pokemon maybe??

An odd thing I've found out through coding is that sorting through data is kinda fun? It just so happens that pokemon contains lots of fun data tidbits to sort with, and match to other things. So once again, I am back with an API and some pokemon, but this time we're using Reddit's API.

Goals

Get data from various subreddits
Learn what Reddit's api terms are
Display what pokemon are mentioned in the title and post
Search by through trades by pokemon

Did we get all of them? Let's see what happened.

Reddit?

Reddit is a place on the internet, comprised of user run subreddits. There's a subreddit for everything, in fact there are probably multiples of each that all have differing rules. For this project, I want subreddits that are dedicated to the trading of pokemon, are updated frequently, and use similar pre-fixes. For the three subreddits I chose, they use LF (Looking For) and FT (For Trade) in most all of their lookups. Now we move on to how we use reddit's api. Let's break down my first call.

 axios.get(`https://www.reddit.com/r/pokemontrades/search.json?q=LF&q=FT&limit=30&restrict_sr=1&sort=new`)

Boy that's long. Easy part:

  `https://www.reddit.com/r/pokemontrades/search.json?`

We go through reddit, then we specify the subreddit, and then initiate a search to come up with a .json file with all out info.

  `/search.json?q=LF&q=FT`

We ask two question of the search. Does it contain LF? Does it contain FT? If so great. We could also not query and get all posts, but we want to weed out if there's something not following the format to ask a question or mod updates.

  `limit=30&restrict_sr=1`

There's a harder limit of 100, but I didn't really want people to pour through 300 entries total, so we're only going to pull 30 per subreddit, for a total of 90 listings. The nice thing about the limit is that this is all one api call! The next part, we restrict our search to the specific subreddit we've defined. Why? I don't know. It looks in all subreddits if you don't, which we really don't need.

  `&sort=new`

If you're familiar with reddit, this one is easy. Reddit has modes to sort by top of all time, hot for a current time, and then by newest, among others. We want the freshest trades possible, so we want to get them not by relevancy, but newest.

What's in this data?

A lot. And not enough, unfortunately. We can go through the data, into the 30 children that have been requested and get tons of data! We can get the post title, body, flairs, mod actions, and...

Not the date?

The created field's date is when the request was made. As in I just requested it, so that's the created date, or created utc. From what I researched there is no timestamp given to posts available to the api. This threw a wrench in my plans.

The Original Plan

I was going to use queries to look up pokemon related entries! So instead of normal query, we would have this:

axios.get(`https://www.reddit.com/r/pokemontrades/search.json?q=Vulpix&limit=30&restrict_sr=1&sort=new`)

And that does work. It will gather all the posts it can find about vulpix in that subreddit up to 30. Some of them are months old though. While I've had practice in simply serving up data, as a more static resource, I wanted this to be at least somewhat useful. Sure, I could search specific pokemon, but without a way to have a cutoff date it's just white noise to make it look more robust then useful.

The New Plan

Cache the data! Not really like cache in the local browser as for once our content is dynamic, but take our original call and use that data. So instead of finding a bunch of old stuff about some pokemon, you see which pokemon is mentioned in the newest 90 threads.

return general.map((listing, i) => {
        let post = listing.data;
        let pkmnMentioned = this.getPKMNMentioned(post);
        if (pkmnMentioned.includes(pokemon, i)) {
          return <Entry
            key={post.title + i}
            subName={post.subreddit_name_prefixed}
            title={post.title}
            url={post.url}
            text={post.selftext}
            searchPokemon={this.state.searchPokemon}
            setSpecificAndPokemon={this.setSpecificAndPokemon}
          />;
        } else {
          return "";
        }
      });

The key is important to use a unique identifier, which is turns out the title itself is not, as during testing someone double posted and it really messed up my rendering. Lesson learned. searchPokemon is a state variable that holds which pokemon we're currently searching for so we can pass that down and highlight the sprite we're looking for. We also pass down the ability to set that state and a bool if we're searching for a specific pokemon or not.

I originally had the Entry component determine which pokemon was mentioned, but as seems the case with React, you usually find a reason to move your handling up a level. The getPKMNMentioned just runs through the pokemonArray (an array of all pokemon, seriously it's long) and searches both the title and the self text (the body) to see if the pokemon comes up in it's data. Search returns the number of where the data is, and -1 if it's not in there, so we just see if the number is greater then -1 to push to the pokmemon mentioned array. Since most of the mentioning goes on in the body, I decided to do that first, and if the body doesn't return that particular pokemon, it will then do a search for the pokemon in the title so we don't double up and cover our bases.

{this.state.general[89] ? listings : "Loading..."}

As a quick note, because we know that we're only searching for 90 entries, we can use that as a determination of if we're done loading the three calls we do. I like this api. Note of a note, I don't actually write this.state.value for everything, I just have it in the article code so you can see what's going on. I should do a more involved loading animation, but it seems too trivial compared to how long it actually takes to load.

The Entry Component

Since we took out search for pokemon mentioned out of our Entry (or rather, I forgot to actually take it out as of writing this, thanks reviewing code!) is rather sparse. The most important part is that the name for our images gets rid of special characters and decapitalizes them, so we have to do a bit of RegEx magic to get that to work. A little extra magic to turn what is & in the self text back into an &.

import React from 'react';
import Sprite from './Sprite';

export default function Entry(props) {
  props.pkmnMentioned.forEach(pokemon => {
    let spriteName = pokemon
      .replace(/\s+/g, '-')
      .replace(/[.,':\s]/g, "")
      .replace(/♀/g, "-f")
      .replace(/♂/g, "-m")
      .toLowerCase();
    spritesMentioned.push(
      <Sprite
        key={pokemon}
        fullName={pokemon}
        name={spriteName}
        isSearched={pokemon === props.searchPokemon}
        setSpecificAndPokemon={props.setSpecificAndPokemon}
      />
    );
  })

  return (
    <div className="entry">
      <div className="subname">{props.subName}</div>
      <a
        href={props.url}
        target="_blank"
        rel="noopener noreferrer"
        className="title"
      >
        {props.title.replace(/(&amp;)/g, "&")}
      </a>
      <div className="sprites-container">
        <h3>Pokemon Mentioned:</h3>
        <div className="sprites">
          {spritesMentioned.length ? spritesMentioned : "None"}
        </div>
      </div>
    </div>
  );
}

rel="noopener noreferrer"

Let's take a minute and acknowledge the things I do because React yells at me if I don't. If I open in a target blank, React tells me that doing that without rel="noopener noreferrer" is a security risk. Let me google for a moment and maybe we'll all learn something new.

"The page we're linking to gains partial access to the linking page via the window.opener object.". So it's possible to insert javascript on what looks to be a legit link on hover to redirect to a bad site. The most interesting part of that article is that google just accepts this as "inherent to the current design of web browsers and can't be meaningfully mitigated by any single website".

The Sprite Component

Even smaller then the Entry is the Sprite component. It's possible to just insert this into Entry without it being it's own component, but I feel like the Sprite display is an important enough job to warrant it's own component.

import React from 'react';

export default function Sprite(props) {
  return (
    <div
      className={`circle ${props.isSearched ? 'highlight' : ""}`}
      key={props.name}
      onClick={() => props.setSpecificAndPokemon(true, props.fullName)}
    >
      <img
        src={`${process.env.PUBLIC_URL}/regular/${props.name}.png`}
        alt={props.fullName}
        title={props.fullName}
      />
    </div>
  );
}

In the full version, you can select which pokemon to search through via drop-down, but I also wanted to be able to just click on the sprite to search for more with those pokemon as well. We keep the full name for the alt text, title (so you can hover over if you forgot the name of the pokemon but know what it looks like), and most importantly so when we change our search terms, we use the proper name of the pokemon. The circle class and highlight class give us the look for the circles I put around them, and if that pokemon is the current one being searched.

    circle {
      background-color: rgba(white, 0.3);
      border-radius: 50%;
      margin: 5px;
      cursor: pointer;
    }

    .highlight {
      background-color: rgba($link-color, 1);
    }

Small Return vs. Bloat

I've started doing a thing, which I'm not enitrely sure is good? I want small return statements in my render.

    return (
      <div id="app">
        {this.state.specific ? lookSpecific : all}
        {searchAll}
        <div id="listing-container">
          {this.state.general[89] ? listings : "Loading..."}
        </div>
      </div>

That's nice. However, it's preceded by this:

    const { general, specific, searchPokemon } = this.state;
    let listings = this.listings(specific, searchPokemon) || 0;
    const all = <header>Searching last 30 results of 3 subreddits...</header>;
    const lookSpecific = <header>Searching last 90 results for trades containing {searchPokemon}...</header>;
    let cantFind = listings.length ? "" : "Couldn't find any trades!"
    const lookups = pokemonArray.map((pokemon, i) => {
      return (
        <option
          key={pokemon + ` option`}
          value={pokemon}
        >
          {`${pokemon} #${i + 1}`}
        </option>
      );
    });
    const searchAll =
      <select
        onChange={e => this.setSpecificAndPokemon(true, e.target.value)}
      >
        <option
          key='none'
          value={null}
          onClick={() => this.setSpecificAndPokemon(false, null)}
        >
          None
        </option>
        {lookups}
      </select>

The alternative is to just define it in the return statement itself, but then you'd get something like this: which is hard to read in my opinion.

    const { general, specific, searchPokemon } = this.state;
    let listings = this.listings(specific, searchPokemon) || 0;

    return (
      <div id="app">
        {this.state.specific ?
          <header>Searching last 90 results for trades containing {searchPokemon}...</header>
          : <header>Searching last 30 results of 3 subreddits...</header>}
        <select
          onChange={e => this.setSpecificAndPokemon(true, e.target.value)}
        >
          <option
            key='none'
            value={null}
            onClick={() => this.setSpecificAndPokemon(false, null)}
          >
            None
    </option>
          {pokemonArray.map((pokemon, i) => {
            return (
              <option
                key={pokemon + ` option`}
                value={pokemon}
              >
                {`${pokemon} #${i + 1}`}
              </option>
            )
          })}
        </select>
        <div id="listing-container">
          {this.state.general[89] ? this.listings(specific, searchPokemon) || 0 : "Loading..."}
        </div>
      </div >
    );
  }

Is it wrong to separate them like this, or should the render statement just read in order of what's in it? Using an immediately returning function for if statements is pretty ugly, but so is using really long ternary operators.

   {(() => {
     if (ugly) {
       return <div> Man this is {`ugly`}.. </div>
     } else {
       return <div> But it's more informative? </div>
     }
   })()}

Final Thoughts

I feel like I've done variations of the same project three times now, but I did learn something each time. At least for me, coming up with good ideas that are within my reach is hard. I have ideas thanks to friends for some games, but I'm hesitant to jump into React for game purposes, though I think it will help my React skills quite a bit. I guess the ideas are a bit too large, so I need to find a bite sized game idea. Or stop doing React and make Wordpress themes for that specific experience but that's just not as fun. Maybe, just maybe, I'll do something not pokemon related next time.

Art Versus Code

Nina — Tue, 02 Apr 2019 03:17:52 +0000

2 articles in one day? To be fair, this one is less technical and more...feelsy.

I will preface this with 2 things: I'm a failed artist and a newbie coder. And yes, coding is art, but it is a different kind of art than the work I've done and I wanted to share some of my thoughts about it all. Maybe one day this will all change and I'll hate coding and not want it as a job, but as of right now I am enamored with it, and this will give some insight into why.

Isolation vs Collaboration

What I didn't know about coding before I got into it was how much people work there was. I will get into more details about it in other sections, but even if you jam with friends and try and gather inspiration, at the end of the day it's you and your canvas. It's rare that artists actually fully participate in each other's psychical work outside of mental stimulation. It's common to get critiqued and red lined, but in the end you are the only one working on your work of art. Asking someone to help you with part of it is seen as a failure on your part, even if they are better at it than you, and you might be able to make something even greater with both of your specific skills. With code, from what I understand, this kind of collaboration is encouraged and at times mandatory. I can say the comics industry probably has it closer, in that people are sketcher, liners, colorists, and work together to make an end product, and I find that kind of teamwork both fascinating and freeing. You are not as expected to be a...

Superstar vs Teamplayer

What is a superstar? That is the end goal of freelance illustration. You want to be a name, and you have a brand and a style that should be yours and yours alone. People come to you because of your look that only you can do and the easier someone can work in your style the harder time you're going to have. A coding guru on the other hand, is not someone who does one thing really well, but does a lot of things proficiently. While still mixed up with being a "wizard" who should be able to do everything themselves, their skills are most valued when they can integrate with another's style.

Style vs Adaptation

Cribbing someone else's style is the worst thing you can do as an illustrator, even if it's a great style of a master. Conforming to a coding style and directly learning and implementing from great code is just common sense here. I'm actually quite good at mimicry, but illustration is about being a super unique star, so that doesn't really help me there. Being able to add something to someone's art in their own style isn't as helpful as being able to add to working code in the proper guidelines. Open source encourages collaboration and adaptation, and the fact that most of this is free is absolutely amazing!

Reusability and Plagiarism

For illustration referencing from photos too closely is bad. Reusing backgrounds is bad. Reusing poses is bad. Using something already resolved for you is bad. This goes beyond bad for beginners, as in your will be disowned and not seen as very good if you lean on anything but rigid anatomical studies from your brain and life drawing, unless it fits in with your unique style, but it's still gotta flow. Someone already did what your trying to do with coding? Not only should you use it, they usually want you to use it and have given it freely. In fact it's probably already a npm package ready to install. Again, with the bad for beginners, you should always learn why something works, but when you've got it, what handy tools there are! Reusing code is efficient, and you can make it better along the way.

Big to Small vs Small to Big

Speaking of reusability, the way you build is also different. Each of them will require a bigger picture, but the way you build them is different. Flow comes first in art, and you must find the composition first. You might be in the mood to draw a fine bow on someone's head, but if you don't nail down the right look, shape, perspective or fluffiness you've got to redo it. After you've done that great bow, you can realize everything needs to move and now the bow needs to come from a different angle. This is why you work from big to small, because small details are only details and not an integral part of the bigger picture or feeling of a work. And remember, you can't just take that bow and stick it on another place, it's lazy to reuse things especially if they were not specifically crafted for this piece. On the other hand, I quite like React and it's components. Self encapsulating modules, I find myself copying over sass mixins that I reuse often and have a dedicated file for utility classes. The smaller pieces you use to build you code, the better it can be maintained, by not just you, but others as well. The hard work you put into the details can be measured in the end, wither it's readability, performance, or reusabilty.

Personal

Good art is what I do in my high periods, when I can envision a grand thing and work out a flow. Unfortunately, I am afflicted with mental illness so I have many low periods. As of this year, steady code is what I do in my low periods. It just suits that step of my life and lets me work on the small things without the torment of not being big enough. Each little cog is, or at least feels, important. So if I make little things, that's okay, because I can use them to make bigger things whenever I come back to my high periods.

For those of you who switched jobs (or passions) into programming from another career/hobby, how do you think those two compare? What fundamentals differ, and how do you see coding? Am I just too green?

Natural Pokedex Refactor

Nina — Mon, 01 Apr 2019 17:13:58 +0000

Project I'm Talking about: Here
Original Article:

Small Project Reflection: Natural Pokedex (React)

Nina ・ Mar 30 '19

#beginners #react #100daysofcode

What went wrong?

I feel a little embarrassed! It seems I was very much mismanaging and over pulling from the API in my last build. I was given a very informative comment on all the issues and I set out to attempt to address all of them.

guico33 • Mar 31 '19

One big issue with your app is you are literally sending hundreds of requests to the poke api when someone lands on your page (two requests for each pokemon). That is inconceivable for a real app and even here it's likely that it's taking a toll on the poke api server(s).
You normally want a single requests for multiple pokemons (like "https://pokeapi.co/api/v2/pokemon?offset=20&limit=20", the offset and limit parameters are useful for pagination).

Apart from that, the code itself has room for improvement, among other things:

the variables entries, filteredEntries... at the top level don't belong there. In react, if the UI depends on some data, this data should be in state. Now your app may seem to be working but you're actually lucky that the UI somehow remains in sync with the data, as only changes to state or props trigger a rerender (UI update). At the top level of a react app, you normally find static data which is not related to the UI.
you should follow the principle of minimal state (reactjs.org/docs/thinking-in-react...) i.e store the minimal amount of data in state and do not store data that can be computed. For instance here you'd store the entries in state but you wouldn't store the filtered entries. Instead, store the filter itself and compute the filtered entries from the data and the filter. That way it's much easier to keep everything in sync, otherwise you might update the filter in state but forget to update the filtered data, etc.
promises in js resolves asynchronously and here there's no telling which one will resolve last (even if the request for pokemon 199 is fired last, the response might come back earlier than pokemon 1), hence the setMainLoading fn is flawed. Here to check that all the data has been loaded you could verify that each entry has been populated, or increase a counter when every response come so when it reaches 199 you know everything is loaded.

Starting from (almost) scratch

I realized I need to do all my information handling from the top most parent and pass down the attributes instead of letting the entry itself handle the data calling. The embarrassing part is that the comment doesn't reach the fact that the data call was refetching everytime it reloaded the components, which was every time you did a search. I don't know how I missed this really, I should have realized that having each component rerender on search was stupid, and honestly just wastes a lot of time.

So let's start using states, and only states! I can store all the information I gather from the top level, and only call the data to store once. The offset and limit were a good tip for other apis in the future, but unfortunately this pokedex isn't in a sorted listed in the api, and to sort by type I need to match against the data I've collected, not just which ever one is displaying at the time. Anyways, I decided to cut out the types, as it was the only attribute I was getting from the original dex entry, and not the species dex, so I also got to cut out that gross filter for my initial calls.

fetchPokemon = (name, id) => {
    axios.get(`https://pokeapi.co/api/v2/pokemon-species/${name.toLowerCase()}/`)
      .then( res => {
        const info = res.data;
        let eggSecond;
        info.egg_groups[1] ?
          eggSecond = info.egg_groups[1].name : eggSecond = null;

        let enEntries = info.flavor_text_entries.filter(entry => {
          return entry.language.name === 'en'
        });
        const data = {
          name: name,
          id: id,
          color: info.color.name,
          eggGroups: [
            info.egg_groups[0].name,
            eggSecond,
          ],
          genus: info.genera[2].genus,
          shape: info.shape.name,
          flavorText: enEntries[0].flavor_text,
        }

        this.setState(prevState => {
          const allEntryInfo = [...prevState.allEntryInfo, data];
          return {allEntryInfo};
        });

        this.setState({ counter : this.state.counter + 1 })
      }).catch (err => console.log);
  }

}

Fetch less

Since we'll be storing the data ourselves and calling upon it, might as well format it before we put it in. One thing about states is that they should be immutable, so I had some figuring out to do to do that, and I flailed around a bit to do it, but I think I get it now.

When you setState, you can instead pass a function with the current state's snapshot in time as a variable. So you set the new state to be an array of all previous entries, plus a new one with the data we've collected, then return that new setup for the setState to take in. The spread (...) was a tricky one when I first saw it, but it basically means that it can be zero or any number of items, which is handy! In addition to this, we have another state variable that counts up each time an entry is gone through.

Once we have our data, we can move on to actually rendering, and figuring out when to render. Because setState rerenders each time it's called, we're actually rerendering a blank page 200 times, which I don't know if it has actual performance issues, but it's somewhat annoying feeling. For this reason, we can edit our shouldComponentUpdate feature.

  shouldComponentUpdate() {
    if (this.state.counter >= 199) {
      return true;
    } else {
      return false;
    }

If the counter hits 199, then the component should update when it receives new props or states. Easy enough, now let's add on to our fetchPokemon call to make an object containing the JSX elements we need to render.

const entry = <Entry
          id={id}
          name={name}
          key={name}
          color={data.color}
          egg1={data.eggGroups[0]}
          egg2={data.eggGroups[1]}
          genus={data.genus}
          shape={data.shape}
          flavorText={data.flavorText}
          setSorting={this.setSorting}
        />;
      this.setState(prevState => ({
        allEntryComponents: {
          ...prevState.allEntryComponents,
          [name] : entry
        }
      }))

Out of Order

I make this an object with the name as a key for a reason. The reason is this.

It really is true, the calls do get out of order and return at different times. This is a mess, but I don't know of a way to force them to go in order, and is it worth the wait? We can just sort them after, but for the components we need them to be named to know which pokemon is stored where as we can't access their id number once they're sorted as an element.

  sortBy(type, value) {
    const { allEntryInfo, allEntryComponents } = this.state;
    let sorted = [];
    if (type === 'all') {
      GPOKEDEX.forEach(pokemon => {
        sorted.push(allEntryComponents[pokemon]);
      });
    } else if (type === "eggGroups") {
      let typeSorted = allEntryInfo.filter(pokemon => {
        return pokemon[type][0] === value || pokemon[type][1] === value ;
       });
       typeSorted
         .sort((a, b) => a.id - b.id)
         .forEach(pokemon => {
           sorted.push(allEntryComponents[pokemon.name])
         });
    } else {
      let typeSorted = allEntryInfo.filter(pokemon => {
       return pokemon[type] === value;
      });
      typeSorted
        .sort((a, b) => a.id - b.id)
        .forEach(pokemon => {
          sorted.push(allEntryComponents[pokemon.name])
        });
    }
    return sorted;
  }

While we're sorting by number, we can be smarter about how we do our searches for different types. First, for all, we just take the order from the GPOKEDEX listing, and push to the corresponding name in allEntryComponents. For the other ones, when setting the sortBy, we take arguments 'sortType and sortValue', meaning we want to do sortBy('color', 'green') for example. These are also stored in the top-level state, so the component rerenders when called, and also displays what you're looking at in the header. For egg groups, the only difference is that we OR compare two of the values, as they can match the first or second place.

While we are trying to sort the components, we use the info placement first so we can get at the inner data. We filter to only get the ones where the type matches the value set. One we have that, we call two things, sort and a forEach. Sort compares each entry with the other, and sees if the the id is higher or lower then each of them, and then returns them in proper order. So now we have our data, filtered by the type, and sorted by ID, but now we need the related components! For each element in the array, we push to the sorted array the corresponding entry component with the pokemon's name again.

Now we're getting somewhere!

Etc.

I had some troubles with a missing value, or rather a missing level in an object, so it was returning an object and React really doesn't like that, but can't pinpoint what line it's on so I had some time figuring it out. Since I had all the styling done, that's about it! Just had to reset a few things, and because react is react, I could just reuse a lot of components.

So now instead of an embarrassing amount of api calls (400 x whenever it reloaded), we call 200 for the entire limetime you are on the page. Also the searches are very fast because they're already loaded!

What's next?

I still haven't been able to wrap my head around Redux, but I was seeing some stuff about sorting the information, possibly in local storage, so it wouldn't even need to recall that 200 until you cleared your data. I need to research a bit more about it.

Small Project Reflection: Natural Pokedex (React)

Nina — Sat, 30 Mar 2019 19:32:17 +0000

Edit: I fixed some issues, which I detail here

Project Here

More Pokemon! 100 Days of Code Days 11 - 13

I probably should have done a bit bigger project by now, but I like the idea suggested to me by my friend, that I do the pokedex of the hack(?) we're working on called Gnosis! (Is it still a hack when it's using the decomp & disassembly of emerald?) These are the native pokemon you can find in the Tenso region. There are some different forms and mega evolutions, but for the purpose of this dex we're just pulling from the vanilla entries once again from PokéAPI. While there is a lot of data that I can pull from, I decided since some will vary in a new game, I would just pull the natural qualities and typing from them. Other than that my only goal is to be able to 'search' for related entries, so let's get started!

Displaying Sprites

At first I wanted to use this resource in it's entirety, but I couldn't quite figure it out, so I just ended up grabbing the main list of named menu sprites for the pokemon to display. I'm really picky about having everything match, and since the transition to 3D models, sprite resources and split between the 3D models and the old sprites, while PokeApi links to a sprite resource that uses both. There's also fanmade resources to spriteify them all, but quality varies. That's just no good to me, so the one consistent image source for Pokemon is the menu sprites, no matter if the game is in 3D or not. Here's hoping Sword and Shield don't break the trend!

At this stage, I just have an array of the 200 pokemon in the dex. I iterate over my entry component 200 times, and store them in an array of JSX elements. This will attempt to rerender in it's lifecycle, so instead of pushing to the array, we set the specific instance based on it's ID. In the entry we have a PKMNSprite component that just grabs the related name array to it's ID, and uses that as a name for the .pngs of the sprites I saved.

    for (let i = 0; i < 200; i++) {
      entries[i] =
        <PKDEXEntry
          pkmnID={i}
          key={`entry-${i + 1}`}
        />
    }
...
export default function PKMNSprite(props) {
  return <img
    src={`${process.env.PUBLIC_URL}/regular/${GPOKEDEX[props.pkmnID].toLowerCase()}.png`}
    alt={GPOKEDEX[props.pkmnID]}
  />
}

Getting from PokéAPI

While it may not be ideal, I've let the child component handle the request for information. The reason this isn't ideal as it was fine when it was just the entry getting it's own information, I have to report back to the App component about what information was received for the search criteria. More on that later.

Omitting some of the functions for controlling the parent's state, this is what our API call looks like:

   axios.get(`https://pokeapi.co/api/v2/pokemon/${name.toLowerCase()}`)
      .then(res => {
        this.setState({ info: res.data });
        return axios.get(res.data.species.url);
      }).then(res => {
        this.setState({ species: res.data });
        this.setState({ loading: false });
      }).catch(err => {
        console.log(name + err);
      })
  }

PokéAPI stores it's general information in pages just for the forms of each pokemon, then goes into specifics about the species in another place, which is nicely linked from the information page. Note: The code will continue even if setState is still loading in. For this reason I use the response data to find the species url instead of this.state.info. The annoying part is however, the pokemon who have different forms and don't have a 'regular' state, put it in their name for the API call. So, I can't have it be as elegant as I want and have to add an exception before the call.

    let name = "bulbasaur";
    if (GPOKEDEX[this.props.pkmnID] === "Minior") {
      name = "minior-red-meteor";
    } else if (GPOKEDEX[this.props.pkmnID] === "Aegislash") {
      name = "aegislash-shield";
    } else {
      name = GPOKEDEX[this.props.pkmnID];
    }

At this point, I just had the colors alternate for entries. Later I would make them be connected to their color in the pokedex.

Searching

Just displaying the dex is easy enough, but I wanted to be able to group the pokemon by similar attributes. This is where things get a little messy. The initial entries components just contain the blank components with no data about what's actually in the entries.

The PKMNEntry component sends back the info from it's calls back to the parent App Component. We create two variables to store the info data and the species entries and pass these functions down as props to the Entry to fill out once it collects it's data. I could have also only made it send the data I need instead of two arrays for the two calls, but I didn't feel like that would have changed much in the end.

  setInfoEntry = (pkmnID, data) => {
    infoEntries[pkmnID] = data;
  }

  setSpeciesEntry = (pkmnID, data) => {
    speciesEntries[pkmnID] = data;
  }

A problem I was having is that if you try and use the buttons to search before the page has loaded all of the data, it errors out as some of the search terms are undefined. For this reason, the PKMNEntry components are loaded, but hidden, while the entire page is on a loading screen, then once the 200th pokemon loading entry in a loading array is set to true it then loads the entries properly. This is unfortunate as it loads twice, but I wasn't sure the best way around besides calling axios in the parents for each entry and passing along as props. It's a case of where you want your data to be. I might refactor it to do so, I'm not sure right now.

Once we have all the data in two arrays, the search functions bound to the parent are passed down as props into the PKMNStats Component and added to buttons. This specific one will take the color that is was given and input it into this function. We clear any previous filtered entries first, then iterate through our 200 entries array, looking to see if they match the path in the relevant information array. For this reason, search types are all different functions. I feel I could have made one function that accounted for them all, but it would be a mess of if statements for each condition, so I'd rather have them be separate.

  showColorEntries = (color) => {
    filteredEntries = [];
    entries.forEach((entry, i) => {
      if (speciesEntries[i].color.name === color) {
        filteredEntries.push(entry);
      }
    })
    this.setState({ showAll: false, showFiltered: true });
    this.setPageFilter('Color', color);
  }

I then swap if either the all entries, or the filtered entries are showing. A button at the top will take us back to all entries so we can try again. In the end the design was pretty simple, I didn't feel the need to make it so complex as we're just trying to display easy and quick data.

Conclusion

I really need to do a more medium sized project, but it's hard to find something interesting that hasn't been done. I say that, but my last to-do app failed spectacularly so I still need to redo something as supposedly simple and overdone as that. I'm happy with this though, I like thinking about the natural attributes of the pokemon instead of just the relevent stats. Finding all the squiggly pokemon and reading the hilariously terrifying dex entries is always a joy!

Small Project Reflection: React, TypeScript and PokéAPI

Nina — Wed, 27 Mar 2019 15:46:20 +0000

Project Here

100 Days of Code Day 8 - 10

This is a personal reflection post detailing the process I went through to create my two and a half day project, which is a Pokemon Berry stats page using PokéAPI! A quick note that I am a junior coder, so if you think I've done something strange please tell me. This reflection post is so that I can expand upon my thought process and try and solidify what I've learned.

Objectives

Use an API to gather and display data visually
Use data from one API to look up another entry and get data
Learn TypeScript/use it for React

Planned Features

Flavor Levels
Relative sizing scales
Growth Cycle Display with timing?

Bugs & Regrets

Meter for growth hours out of day not showing up on Chrome
~~setInterval timing weirdness??~~ got it to work with what feels like a hack
Not taking in process screenshots
No uses for CSS transitions/no interactivity

TypeScript

This is the first time I didn't directly follow a tutorial for my introduction into a concept or language. I already know the basics of C#, so I just found examples of TypeScript used in a React setting and worked by searching what errors I got. So here's how in it works from my understanding.

In TypeScript you must type all of your variables. Easy enough. You need to know what types are going in. Well, it's not always the easiest. It became cumbersome when dealing with a lot of data being passed through to the state for my berry look ups and having to define what was in every part of it. Maybe I'm doing it wrong, but from what I saw I have to essentially define things twice. Once in the interface, and then once more giving initial values in the constructor. I'll be honest, I don't know the deeper meaning of the interface, it's just necessary to define your state and props in an orderly manner.

Growth Cycle Component:

import React, { Component } from 'react';

interface IProps {
  id: number,
  growth_time: number
}

interface IState {
  timer: any,
  stage: string,
  x: number
}


class Growth extends Component<IProps, IState> {
  constructor(props: IProps) {
    super(props);
    this.state = {
      stage: '/growth/AllTreeSeed.png',
      timer: setInterval(this.setTimer, 0),
      x: 1
    }
  }

  render() {
    const { stage } = this.state;
    return (
      <img src={stage} />
    )
  }

  setTimer = () => {
    if (this.props.growth_time != 0) {
      clearInterval(this.state.timer);
      this.setState({ timer: setInterval(this.changeDisplay, 1000 * this.props.growth_time) });
    }
  }

  changeDisplay = () => {
    if (this.state.x >= 5) {
      this.setState({ x: 0 });
    }
    switch (this.state.x) {
      case 0: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/AllTreeSeed.png` }); break;
      case 1: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/AllTreeSprout.png` }); break;
      case 2: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Taller.png` }); break;
      case 3: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Bloom.png` }); break;
      case 4: this.setState({ stage: `${process.env.PUBLIC_URL}/growth/${this.props.id}Berry.png` }); break;
    }
    this.setState({ x: this.state.x + 1 })
  }

  componentWillUnmount() {
    clearInterval(this.state.timer);
  }
}

export default Growth;

setInterval & Hacks

The goal of this is that the growth cycle graphics update slower based on how long it takes to grow. Each 'hour' is 1 second.

Just now fixed the issue I was having before, couldn't let it sit while I was writing this article. Originally I set the timer in the state to 5000 * this.props.growth_time, but the problem is that in my containing component, when initializing my values growth time is set to 0. So when the component begins, the interval is set to update every 0 miliseconds, and will update like crazy until we clear that timer and start a new one. This problem has persisted before, where I need to update a function once the correct props are received, however componentDidUpdate() will now allow me to set a state as it will cause a recursion and is defunt. Likewise, while it doesn't completely error, calling setTimer in the render function gives you a warning about trying to update things every time it renders.

The solution, which feels like a hack, is to keep calling setInterval (as the original timer is set to 0) until we've received the growth_time props at not 0, and once it does have it's props (or rather the props are what I want it to be) clear the interval, as I learned it will keep going even if I change the timer state, and set a new interval for changeDisplay to go.

Math

Ew, math. I would say I'm too dumb to get math, but that's what I said about coding and now look where I am! However I do still struggle with the best solution for a lot of things even simple, so let's take a step through it.

From the API we are given a potency in a number/40. This number will either be 10 or 5's place for each flavor of the berry, so per our representation we can end up with half stars. We will have a star be worth 10 points, so we take out potency and divide it by 10 to just get the 1's place and how many filled in AND half-filled in stars we will have, despite being named fullStars. The stars are executed with a for loop, so if we are .5 over we still will create another star.

To determine if we have a half star or not, we use the modulo operator to see if when divided with 10, do we have a remainder? Using a ternary operator (fancy small if statement) if the remainder is 0 (false), we say we have no half stars. If the remainder is any number that is not 0 (true), we know we have one half star.

We calculate the empty stars with what's left over, then use another ternary operator to see if there are halfStars. If there are, we want to replace one of the full stars with it.


    let potency = this.props.potency;
    let fullStars: number = potency / 10;
    let halfStars: number = potency % 10 ? 0 : 1;
    let emptyStars: number = 4 - fullStars;
    halfStars ? null : fullStars--;

PokéAPI

I've used PokéAPI for gathering most of the berry data. I hand saved (200+) images for the growth cycle and the size comparisons, but I actually got the berry icon by chaining get requests with axios. The berry information is separate from the item listing for the berry, which contains a url to the item image for it.

  fetchBerry() {
    axios.get(`https://pokeapi.co/api/v2/berry/${this.props.berryID}`)
      .then(res => {
        this.setState({ info: res.data });
        return axios.get(`${this.state.info.item.url}`)
      }).then(res => {
        this.setState({ item: res.data });
      })
  }

Design

I've seen a bit of debate on if you should have your CSS inline with your code, or have it outside it's own file. I think I prefer outside in it's own files, but I find that it's handy to declare dynamic styles inline. For the size of each berry, we are given a number, and I've directly translated that into the height for the images, then divided by 3 so some of the largest ones don't break the design. You still end up with extremely small berries, but as long as the relational sizes are the same, I think this is okay as long as we have the icon sprite to show it's intended design.

        <img 
          src={`${process.env.PUBLIC_URL}/size/${this.props.id}.png`}
          style={{ height: `${this.props.size / 3}px` }}
        />

What's next?

I need to bolster my CSS Animation skills, so I need something interactive, but I'm not sure what yet. I've adopted the use of Notation from a recommendation I found in the comments here, so I've been keeping track of what I want to learn and what project ideas I, or my friends have. I read about live share for VSCode, and tried it out with my very good friend/mentor and I'm really excited about it!

Localhost isn't local anymore

Jonathan Carter ・ Mar 26 '19

#webdev #javascript #beginners #productivity

We've been pair programming for awhile without it, but I really want to do some kind of project with her using this, I just have to come up with a good idea!