What did I just say?

When I was at The Iron Yard in Austin, I struggled with using the language of coding language. It felt hokey. I was embarrassed to say things like “passed in” or “instance”. I felt like a poseuse. I also was nervous about being called out for it. Hear me out.

Language is often used as a way to exclude others. It is the secret handshake. Doubt me? Misuse a word that belongs to a certain group. I dare you to say “between him and I” (yes, Grammarly, I know. I’m making a point; don’t make me sic you). to a group of English teachers. Mispronounce “meme” to a teen. Tell a scientist that you have the “stomach flu”. How else can people better identify who is in and who is out? As a dual US-Australian citizen, I deal with this all the time when I choose to keep my Aus/UK spelling when I do my own writing. It’s my way of keeping my Australian identity while in Texas.

To protect my ego, I resisted. I can’t misuse the terms if I just don’t use them or if I use my own slangy terms. The problem is that the language is part of that culture. My instructors pointed out that if I want to be a developer, I have to use the right words. It stung. It felt like a criticism. Ok. It was. We need to not be so sensitive about criticism and using “critique” to soften it. I was not doing the right thing by me if I wanted to become a developer. If my instructors had let that slide, they’d have failed me. I got that. I was a teacher once and loathe letting things slide because it might hurt feelings. If seasoned developers laugh at me for using the word in the wrong situation, then they are the jerks. I had to let that go.

Still, new vocabulary doesn’t happen overnight. I had to hear the words, read the words, use and misuse the words until I didn’t realise I was no longer thinking about them. After I left the boot camp, newly minted and freshly scrubbed, I read coding blogs, logged hours in video tutorials, and talked to others about code. Somewhere along the way, these terms became a part of my own language. I noticed it when I was explaining functions to a middle school student. For some reason, after saying “passed in”, I paused. I don’t think the child noticed, but I had to take a breath.What did I just say? When did that happen? When did it become natural and not something I actively thought about? One day I hope to be the mentor to someone switching careers to become a software engineer. I want to be the safe person to practice speaking the language of code. Excluding is easy and all over the place. Let me not be that person.

Pure CSS fun

Because I needed another challenge …

I do not know why I signed up for the Daily CSS Challenge. All I know is that I saw someone’s 100-Days-of-Code tweet that had some cute image and this hashtag I had not seen before: #dailycssimages. What is that? I had been using CSS and CSS3 to place boxes of paragraphs and images onto my screen. What is this new tasty candy I see? I looked it up and found myself taking The Coding Artist‘s (Mike Manialardi) tutorial on making a pure CSS image. I was hooked. I signed up for the (week) daily challenge.

I feared that I would use this as a way to avoid other projects when they got difficult. I also worried that this would soon become something that was glorified doodling.

Wrongo, Falsetta von Falshenberg.

Here’s what I thought I’d be doing: making boxes, making circles, using background colors.

Here’s what I have done: learned how to use mixins, used box-shadow to make pixel pictures, become familiar with Pug, used for-loops in Pug and SCSS, improved my ability to animate features and coordinate the timing.

And I am not even done. I just found this YouTube account from following other people in the challenge: Eleftheria Batsou. Now that I am used to how I break ideas down into shapes and concepts, I would like to see how others do it. I can’t lose when I see what other people do.

I keep a bucket of my entries, but these are some of my favourites:

 

 

 

My inner toddler

Until I have a full-time job, my job is finding that job, and my day is broken into looking for it and preparing for it. In some ways, looking is easier. Writing a cover letter and fretting over a typo I may have missed exhausts me, but I am limited to the résumé and the cover letter. When those are done for the day, I look at a number of things I need to learn to back up those documents I send out.

To-do:

  1. Improve upon my current skills
  2. Learn more frameworks and libraries
  3. Learn more languages
  4. Don’t forget how to do the old stuff while you’re acquiring new stuff.
  5. Repeat this loop until 2090.

I’m no longer in a boot camp, so I do most of my learning, relearning, and refreshing with tutorials. I have a list of tutorial class names on graph paper. I colour in a square for every new lesson. These tutorials cover languages, frameworks, updates (ES6), UI to backend. As I watch the progress bars grow stall grow, I notice that my tutorial pattern is a lot like the eating habits of a finicky toddler: Nothing but ES6 except bite of HTML5 for a while, then vanilla JavaScript only with maybe a bite of ES6, then ONLY REACTJS!!!, then Python and node, BACK TO ES6!!, oooh, Flexbox. Nom nom nom …

This used to stress me out, but as long as I circle back, I’m good. If I never want to see a topic again, that’s also good. That language or framework is not for me. I need to know this. If I’m on a roll, why stop just to have balance? If I’m in a ReactJS mood, why deny myself that and force PHP on me because I should?

We are incredibly lucky to have the internet and the means to have online-tutorials, blogs, and challenges. We can sample and choose our style and pace. There is no right way to consume these new skills except what works for yourself. So if all you want to do are ReactJS tutorials, go for it, shuggatoots. The others will be there for you when you’re ready.

 

ES6 makes the Hokey Pokey easy

As I make my way through various tutorials, some topics stick out more than others. This is especially true for tutorials that cover change. These are different from those that are about a new (to me) language or framework. For those, almost everything is sparkly and sticking out like a neon porcupine. There are the ah-ha moments, short for “Ah-ha, so that’s why this framework came to be needed”, but that’s not the same ah-ha I get when I learn about improvements to something that exists.

I’m following Wes Bos‘s ES6 for Everyone and had to stop for a few days after the section on swapping variables with destructuring. My first reaction was THANK CHEESES! My second was “Srsly, it took them this long to find their inner hatred of var temp?!” I always found this not only to be a pain for the extra lines but also for just the logic. I am all about logic puzzles like the River Crossing problem, but your code shouldn’t be a logic problem. It should be a logical solution.

Out with the old:

let footOut = "left foot";
let footIn = "right foot";
var temp = footOut;
footOut = footIn;
footIn = temp;
"That's no way to live your life!" - Wes Bos (my favourite Bosism)

I hated that. I can see it, but it doesn’t flow when I type it, and it’s never become automatic the way other things have (for-loops, named and anon functions, etc.). If I have to think about it every time, my time is wasted. I majored in German. I can get my head around change like shoving a conjugated verb to the end of a subordinate clause. I don’t need simplicity. I need speed, Ms. Mead. I need a flow, Moe.

Thus spake JavaScrusthra:

let footOut = "left foot";
let footIn = "right foot";
[footOut, footIn] = [footIn, footOut];

Short. Sweet. Complete. If this doesn’t matter to you, imagine writing an app for the Hokey Pokey. Too much? Then a function for shuffling.

Or don’t change at all. Stick with var temp = “Edsel”.

 

A little ambushed by grief

When people my dad knew let me know that a cancer’s returned angrier, I am both sad from within as I think these people are terrific but am ambushed by grief as I know my dad would be sad as well. It’s odd. Of course, I miss him every day, but I’m surprised that part of missing him is wishing he were around to be sad about a dying friend.

I don’t know what this means. I’m just putting it out there. Ambushed.

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.