Gimme some state, shugga.

Eleven months ago, I was in love with ReactJS. I quit working with it when I felt that I needed to review material I didn’t understand as much. That led to forgetting a lot of React. I forgot the details, not the gist. I have returned following a tutorial that’s done in a way that is best for my style of learning: many smaller clips and not one chunk. It’s easy to watch and move on with topics I remember but revisit ones that are rustier to me.

Yesterday and today, I reviewed state and loading state into JSX. Watch watch watch. Take a lot of pretty notes. Apply it to my own. It is not in my head if I’m just coding along. I know I get it when I apply it to my own app.

When I saw this, I kissed my screen:

Screen Shot 2017-04-20 at 9.09.54 PM

Man. I love React!

State the Rainbow of Fruit Colors

When I first started to learn ReactJS, state and props did my head in. I was learning mounds in a short time. Too short for a visual learner who likes to see the connections. I need time between lecture and homework to do my doodles. I did get it, though, and I learned to love React. I still do, but it is something that fades if I do not keep it up.

After too much time had gone by, I felt insecure with my understanding of state, so I revisited ReactJS with React for Beginners by Wes Bos. My instructors at The Iron Yard were clear and (ERMAHGERD) patient, but they were teaching live, so I could not stop them whenever I wanted, rewind what they said exactly, pause, repeat until I made sure my notes were clear to me. Sure, I could have recorded them myself, but what we see online has been scripted and edited. I want to repeat and review edited lectures. Online tutorials solve that problem for me. I sure miss my instructors helping me via conversation, though. I don’t get that in a tutorial. There are pros and cons to both. Apples and oranges, to use a cliché.

After many viewings of the section on state (clip 13), I was ready to write it out for reference. Although colouful, I crammed too much on a small piece of paper. By the time I realised it, it was too late to plan for scissors and tape. No big deal. The more I do this, the more it sets in.

beforenotes
Problem: State on one wee page

Solution: make state big and colourful like a jacked unicorn at a Skittles factory.

Step 1: Write the finished code in a bluhblah colour. No offense to navy blue. Optional step 1b is to make it look like real screens. If you do step 1b, then it’s mandatory that you do step 1c: quit stalling by colouring.

codedone
Code done: 1 page per js file

Step 2: Get comfy with your lap desk, relegate laptop to your shins, have a sentient being who thinks you hang the moon in case you need the ego boost.

armedandready
Getting read: Tutorial and Audience

Step 3: Go to town with colours, arrow, and notes. Know how you learn and learn that way. I kept my numbers in one colour but used other colours to separate my notes by theme or topic. I highlighted or underlined my code as needed. I gave all of zero rat arses for whether this makes sense to anyone but myself. My brain; my rules.

addfishform
Page 1: AddFishForm.js
app
Page 2: App.js
inventory
Page 3: Inventory.js

Et voilà! I glued and taped the sheets together and used tape to reinforce the edges. I am keeping The State Scroll forever!

afternotes
Final: State all gussied up
 While I was doing this, I got Vanilla Ice stuck in my head (you may have guessed from the start) and had “State state, baby” in my head for a few days. There is really only one way to get it out of my head. This is horrible, but it’s therapy:
Yo, VIP, let’s get it!
State state baby
State state baby
All right stop
Colour-code and listen
State’s not bad but I need intervention.
Something’s off; my notes are unsightly
Then I code like a zombie daily and nightly.
Will I get it?
Yo, I don’t know
Turn off the rules and I’ll flow.
To the extreme, I colour and I doodle
Fill up a page and scribble from my noodle.
Dance
Bum numb. Sittin on cushion.
The bigger the state the sweeter the pushin’.
Deadly, when my app gets stately,
So anyway I learn improves it greatly.
Colour and draw it
This is my own way
I better git push now
Don’t got all day.
React’s state was my problem
So I solved it.
Check out my notes while my colors resolve it:
State state baby. React. Jay. Ess.
State state baby. React. Jay. Ess.
State state baby. React. Jay. Ess.
State state baby. React. Jay. Ess.
Now let’s make an AddForm component

Render return and put a form on it.
Adding refs makes my form breathtaking
They hook up inputs to the object I’m making.

Refs takes in (input) and then fat arrow
this dot name is input, straight n narrow.
And I make an object with this info:
like name colon *this* dot name dot value.

Object is in this form, you know

But it’s not in state, so my App don’t know
Build a constructor()
and quick call super()
Why do that?!
Because you need *this*!
Keep on coding to the next step:
*this* dot ‘n’ state and I’m building me an object.
That state was bare.
Yo so I continued to create one much-needed method.
I update state, spread a copy in a new state,
but it’s not yet there so I update with a setState.
Jealous of this method of mine?
When I started out it was barely more than slime.
Ready for this method and kiss.
Constructor’s acting chill because it’s got bind(this)!
Now props, like a wave they’re swell
They send stuff to state, like a bat from hell.
Addin’ to the child component
make now a prop, this dot method
Bumper to bumper the App file’s packed
I’m moving to the child before my mind goes slack
Props on the scene
You know what I mean
I use props now, between the *this* and method.
React’s state was my problem
So I solved it.
Check out my notes while my colors resolve it:
State state baby. React. Jay. Ess.
Too bad, I’m not a talented poet.
I Googled my rhymes in case you didn’t know it.
AddForm, that created this here smackdown
Gets *this* dot props dot method all around.
‘Cause my style’s like a sewage spill
Queasy dull rhymes worse than a pneumonic drill.
Constructor, props, state:
They’re a hell of a concept.
I make it mine and you want to do your own.
Memories can fade, so I do what I can now.
Save like a git commit so fast
Better young devs say, “damn”
If my rhyme made you pissed.
I would take it on the lam.
Keep my composure when it’s time to code live.
Mesmerised by the job and I might nosedive.
React’s state was my problem,
So I solved it.
Check out my notes while my colors resolve it:
State state baby. React. Jay. Ess.

Yo Katy, let’s get out of here
Word to your developer.
State state baby. No toast. No toast.
State state baby. No toast. No toast.
State state baby. No toast. No toast.
State state baby. No toast. No toast.

Unstucking

I have narrowed it down to these for my last Sketch illustration for my trip-planning app:

Screen Shot 2017-04-18 at 11.38.08 AM

It has to be iconic enough to be recognisable and easy enough to make into a scene with eggs. I’m leaning towards 101 Dalmations or Life of Pi. I have not seen the movie, but I read the book. I do not care if you like the movie or not. I do care about making this less taxing for me. I could do The Lion King, but I am one of the few who did not like being beaten over the head with the symbolism. Subtlety, please. That goes for you, too, The Lion, the Witch, and the Wardrobe. 101 Dalmies might be a cop out. Life of Pi is the only one that is about traveling with an animal. Sadly, most of the dog and cat flicks set off my cheesedar. I also have to consider making the eggs look like their counterparts without too much help. Lesson learned from my Harry/Sally scene. Babe and Charlotte’s Web might be too complicated. We’ll see.

Stuck.

I’ve done all the pictures for my ReactJS app except the one that supports the radio button group for the question about my pets. I can’t think of a movie that supports it. I’m thinking Pee Wee’s Big Adventure and the pet store fire scene, but I’m not in love with it. I am not sure everyone will know the scene.

Until then I have a gap.

Screen Shot 2017-04-17 at 9.43.38 PM

I’ve also learned a lesson about doodling and saving. My first go was just to play with Sketch App. In doing so, I built the scene from Jaws. I did not save it. I put it on Instagram and moved on. I cannot find the original, so when I export it by svg, one part fades. Maybe this isn’t something I can’t fix, but I can’t fix for now.

lernin hurtz.

I over re-React-ed

A while back, I started this little trip planning app for me: Unscrambled. With my dad diagnosed with acute myeloid leukemia, I was heading to Dallas a lot. I’d always forget something. This was for me in two ways: it solved one of my own problems, and I needed to practice ReactJS. I built it with Webpack. Or started to. I let it go when I got stuck. I wanted to deal with it in React Meet-ups, but not all Meet-ups are equal (the Dallas ReactJS group is stellar). I was also chicken as a junior developer to ask the well seasoned (“Hi. *picks nose* My name is Katy and I like kitties and doggies and sunshine and coding and I maked dis app will you look at it I also eat paste.”). I felt naked and naive, and not in the sexy ingenue portrayed by a dewy French actor sort of way.

Then my stepsister died.

Then my dad died.

I did not want to stop or abandon the project, but I could not concentrate. I can now. Of course, I still miss them, but now I think “Oh, they’d love this” when I design or build. I’m good. I’m sad; I miss them, but I am good.

What was not good was the app. I also wanted to try the Create React App tool so I could avoid the builds. If I let too much time go, I just forget the process: npm do this, cd into this npm do that to build then cd out to save to GitHub. Schtaaahp. I build an app with Webpack and Perk framework before (Critter Sitter) and was happy with it. I just have a simpler app to build. I have no backend. I have a set list of places I stay in Dallas and my packing list is set. Could I build a component to add to my packing list? Sure. But by now, I have that list down. It’s checking it off that matters. Should I want to add a component called AddItem, I will deal with it later.

Version 1 was not even complete when I opted to move it over. I have been following Wes Bos’s React for Beginners (aka Notorious RFB), coding along, then practicing my own in parallel: Teacher show, Katy copy, Katy do her own. It works for me. Next thing I know, it’s late. I’m still excited, but I’m fading physically. I should have gone to bed, but—no—I was going to move it all over when my brain and body were cooked. (Jeenyiss) My old format is not in the same style as Create React App. Of course, it isn’t. I should have taken the time to move one at a time. It’d be like starting over, but the components are already thought out and built. But no. I moved everything over. Not one thing was horrible, but there were many little things that need changing: paths, ES6, …
I am using this:
class SteveBuscemiIsMyMan extends React.Component {render: function(){yada yada yada}}
export default SteveBuscemiIsMyMan;
when before I had this:
export default React.createClass({render: function(){yada yada yada})}

Which brings us to this entertainment center that I use as a bookshelfstoragething. When I got it, I move all my things into and on to it in a day. I didn’t take the time to have a little crowding in order to put the books in the order I want them to and the craft boxes and bags where I want them to be and the knickknacks where they should be. I have had this mess for a long time. I now do a section at a time when I have the time, but looking back, I should have taken the time to slow down and just do it piecemeal.

What I did last night was similar: I over React-ed. Over re-React-ed, really, but that sounds too much like ovary acted.

a messy bookshelf
The gap is for the iMac that’s in the hospital. Fibre crafts, books, computers are my interests. Clearly not television.

I went to bed frustrated and tweeted about it. My frustration, however, was with me. I’ve posted enough about being an adult with ADHD. I won’t go into it, but this is sort of typical. The good news is that I can sit back and plan. Before I went to bed, I started over (again) and did not let my excitement get in the way. I slowed down. I read more (I read before but in the OHMYGODIAMSOEXCITEDTODOTHIS mindset). I moved one component over at a time and dealt with the styling. I’m not done, but I have a plan. I feel guilty tweeting that I found this frustrating. I was not clear. I was the one who was frustrating as well as frustrated. Create React App is a good thing. It’s easy. It’s there for me. It still expects me to calm t.f. down before I start though. They never mention that in the README file.

Overwhelmed goat

I’ve bitten off more than I can chew.

When I finished boot camp, I was in a mad rush to do two things: make a portfolio and practice coding daily. I was quick to build the portfolio but then got the idea to do a project a day. A small project. Start and stop in a day. I didn’t have a plan on where to store it, so I tacked it on to the portfolio. Eventually, I’d make its own place. “Eventually” became “never” until yesterday (11 months later).

Now I have to recreate a portfolio page so that it’s static and neat, take the projects I had stored with that page into another file, fix all the links that would be broken, and then separate them into their own little files with their own little Surge addresses, and their own little scoops of ice cream. No. Wait. Ice cream is for me. I also have to do all of this without breaking any links to and within the current portfolio until I’m ready to redeploy.

Good times.

And there’s the look. I don’t want the old look. My want-list is growing. The task is big—doable but big. I’m feeling overwhelmed and am napping or resting my eyes a lot. I feel like one of those fainting goats:

The difference is that they stay down for about 3 seconds. Ha! Novices. I flip out, snap into the foetal position, and shut my eyes for 10 minutes. I’d stay in that position longer, but I have just enough strength to shout to Alexa, the lonely goatherd, to set a timer for 10 minutes.

 

It’s the little things

Honestly, it is the every single thing: the big, the medium, the little. I only have a little time, so this post is about the little things.

I am looking for a job, continuing to learn front-end dev skills, and making what I do know look better. Yes, it would be great to write cleaner code from the first time I learned it, but the Olympian gymnasts started off as tumblers.

I don’t want to be the person who says that they do nothing but all day. Boring. What do you talk about? Don’t suck up and say code. Honestly. Imagine that you have a client who needs your skills but whose business or interests are in camping, or art, or studying the migration patterns of the monarch butterfly. Please please please be able to talk about something else. Who cares if you’ve got the gift of gab.

While I was immersed in the boot camp, I ignored my other interests. No more. But where is the time? I should be getting better with writing code, practice old, learn new, practice new, tweet about it, eat a div, wash my face with jQuery, and moisturise with ReactJS. Chilling out is step one. Realising that I don’t have to read The Decameron is step two.

In the mornings, I read one entry from Never Built: Los Angeles, a book that accompanied the exhibition at the Architecture and Design museum on the same topic and one from Lost in Translation: an Illustrated Compendium of Untranslatable Words from Around the World by Ella Frances Sanders. It doesn’t take long. Evenings are for fiction.

Morning reads
Morning reading

Another little thi — two little things are these pages in my bullet journal. Yes. I have succumbed. It works wonders for me as I have ADHD and love to colour. I have never done will with wordy journals, but I do love to doodle. I don’t care if my handwriting is a mess. I’ll never be (nor do I want to be) an Instagram bujo artist. I love what they do, but let’s not kid ourselves. These are two pages I do for me. I take the time to make Code Noms for every hour that I work on something code related. After this blog post, I’ll add a lollypop. I may not be exact. I’d rather underestimate my hours than exaggerate. I like taking a little break and thinking about the time I’ve spent. It also shows where I lack. Not enough read-mochi or blog lollypops. On the other page I write down ideas so I don’t forget them later. I keep it simple. I just want the idea down so that I don’t interrupt a current code session to start another just so that I don’t forget.

FullSizeRender
Cojo: when bujo meets code.

I’ll combine these soon. I see myself putting the words I’ve learned in a project that I’ll illustrate on my own with Sketch App. Ella Frances Sanders has wonderful illustrations, and I’ll look at hers as an influence, but I will not photograph them to share in my project. It’s not right. Buy her book. While you’re at it, buy Ben Schott‘s Schottenfreude, too. It’s similar to Lost in Translation, but focuses on German words. Oooh … I’m adding that tomorrow for my morning reads.

Enough with the little things today. I have some whoppers (job applications) to do. Mmmm… Whoppers.