Kata :: One move at a time, sequentially

Dealing with disappointment

Problem solving can sometimes be a frustrating process. My 2yo boy started walking just around his 1st birthday, which is when all the fun really started!

He would regularly wander into my office, pick up my wireless mouse, and would then proceed to get distracted by something else, dropping my mouse in the weirdest places!

Realising this penchant for behaving like a magpie, when my car keys went missing one day, I was certain that our little darling was behind it. I decided that in order to find these keys, I'd need to change my thinking to that of a 1yo and look in places that he liked to frequent. It involved trying things like crawling on my hands and knees in order to get his perspective on life...

Car keys (along with house and other keys) are valuable, so I was stressed throughout the process. I did however appreciate what kind of situations the little tike faced on a daily basis.

Unfortunately, even the best laid plans can come undone. To this day I haven't found the keys, so either my thinking wasn't quite right, I made an incorrect assumption or I'm to blame for the disappearance. We ended up having to make a copy of our spare key, not an ideal solution, but one that gets the job done.

In the same way when tackling the deBee function this week, I wanted to nail those bees in one line of code. I was trying to avoid using the toLowerCase() method, as I figured I could filter out the buzz words by using a case insensitive match, but unfortunately I couldn't quite figure out how to do it yet.

Thus I relented and used the toLowerCase() method to convert all instances of buzz to be the same. It only took 2 lines of code, so was quite elegant, and I think I could have still changed it to one line of code, but sometimes you just have to settle for what works! Elegance comes with experience, so will look forward to the day that I can craft elegant code on a regular basis.

Figuring it all out

Rubber Ducky :: is a fascinating method, as it invokes some interesting psychological processes. I haven't really used it much, but I think I will in future kata practice.

Pseudocode :: is my go-to method for working through a problem. I find more often than not that I can get through 90% of solving the problem with this approach.

Trying something :: is the next cab off the rank. Sometimes it works, somtimes it doesn't.

Reading error messages :: is my next port of call if the previous approaches fail. I've started to learn about things that I regularly get wrong, and the error messages are very usefull in determining where I'm found lacking. If I can't figure it out, I tend to reach for uncle...

Google :: is a valuable tool in this regard. There’s a scripture in the bible that states:

"there is nothing new under the sun” - Ecclesiastes 1:9 NIV.

If you run into a problem, chances are someone has done so before you and solved it. So rather than reinvent the wheel, research can help you save time, if you know how to utilise a search engine well.

Asking a peer for help :: is something I do when I get really stuck. This sometimes helps, and sometimes not. But I think it's really valuable collaborating with someone to solve a problem.

Asking my coach for help :: is my absolute last resort. Joseph has been great in asking me questions to help me figure out the problem on my own, rather than just spoonfeeding it to me. Sometimes I need some spoonfeeding if I just don't understand, but it's a lot more edifying if I don't have to go down that route.

Reflection :: is what I'm doing here, and it's very valuable, as I've figured out that I do have a sequence that I do things in. Reflection also helps identify what things I should practice more and what I should do some further research on.

Overall, I've enjoyed this sprint, and going into the Kata I was quite confident. The first 4 kata took about 5.5 hours to finish, but the built-in methods kata knocked my confidence slightly. I think I'll leave the JS Olympics for the summer break.

Content + Interactivity = Fun!

HTML & CSS: The journalist and the designer

Journalists are good at informing the public through dissemination of facts, in the process giving meaning to people's lives by clarifying what the consequences of those facts are.

Designers amplify this meaning by interpreting the story and presenting it in a manner that improves the uptake of the facts and helps generate emotions in the reader.

HTML is like the journalist, in that it supplies a browser with details of what specific pieces of content on the page are meant for. CSS is like the designer in that it helps create visual hierarchy and structures the layout of that content in aid of consuming and understanding the content more readily.

Flow control: The dreaded nappy

A computer program's code is read from top to bottom, same as a list of instruction. Certain portions of the code can however be repeated by using loops.

I'm a parent with a 2-year-old boy that's still in nappies. The nappy changing process would go something like this:

1. Smell funky smell
2. Look over at son who's giving me a naughty grin
3. Pick son up and take him to the bathroom and get nappy supplies on the way
4. Put peg on nose
5. Undo nappy
6. Grimace in disgust
7. Get toilet paper/some form of wipe
8. Start loop:
   If (bum is dirty)
   
   • Wipe
   • Check
   Else
   • Rejoice!
   • Put dirty nappy and wipes in bin
9. Wash hands
10. Dress boy again
11. Go help him to learn by playing with him

DOM: Trees, wonderful trees

The DOM represents the hierarchical structure of a document type using a tree diagram to present the location and order of specific elements/components of said document type. We can then use this tree diagram to directly interact with/manipulate these elements/components/objects through the use of the browser's DevTools interface.

For instance, we can isolate a button in our HTML, give it a class, and change its styling dependent on that class in the css, all from within the browser's DevTools thanks to the DOM.

Data access: Simpler than the Dewey Decimal system

An array is like 1 column bookCase[], one object per 'cubicle'. In order to access data in the array, you have to specify the position (using integers from 0 upwards) of the cubicle you want to access, which returns the value stored in that cubicle, so that return bookCase[cubicle#].

An object is similar to an array, as it contains a certain amount of properties and values, but you can target those properties by stating its key (in the form of a string) using either dot or bracket notation. For instance, let's take the object:

schoolLocker {
text book: Science,
lunchBox: empty
}

If you want to see what text book is in your locker, you'd write return schoolLocker["text book"];. Checking the status of you lunchbox would be return schoolLocker.lunchbox;.

The notation you use is important though. Whilst dot notation looks a lot cleaner and easier to read, it relies on you know the property beforehand. I you are accessing an objects data in a function by getting passed a property, you'd be best to use bracket notation, otherwise with dot notation you'll get an undefined error if that property doesn't exist.

JS functions: The automaton

Functions are great for automating repetitive tasks. They are reusable pieces of code, that whenever they are invoked (called), they perform a series of tasks dependent on their inputs and conditions. There is no limit to how many times a function can be called on a specific page.

Configuration & Customization

Configuration with classes

Classes and ids are wonderful things. They allow you to do some pretty nifty things and can be reused endlessly for specific applications within your html. They do however need to be used correctly. You can compare their differences to buying a brand new Audi off their website.

Classes can be thought of as configuration options when buying your Audi. Let's think of car models as different html text elements. For this example we'll be comparing the Audi A1 and A4.

We can apply red paint class="paint-red" to both of them. They are different cars, but they're styled the same way.

Next we can create paint option that is unique to the different models: <A1 class="paint"> and <A4 class="paint">. In the the CSS file, you'd create a selector that targets these specific elements to give them their unique color: A1.paint { color: bright-gold;} and A4.paint { color: pearl-charcoal;}.

Now, we haven't specified a generic paint class in our CSS, so applying class="paint" to anything other than an A1 or A4 in this example, will leave it devoid of styling.

Building on existing Classes

Let's give the A4 a butt-lift. If we build a new class="Avant", this changes the A4 'element' from a white Sedan to a red Station Wagon. The CSS would look like .Avant { color: red; shape: wagon;}.

Now let's change things up by making the car more sporty. We can give it a different colour, add window tints and call it an S4 Avant. The html would be <A4 class="Avant S4"> and the CSS would be .Avant.S4 {color: midnight-blue; windows: tinted;}.

The S4 isn't racey enough, so let's make an 'R' model. We want to keep both the body shape - .Avant - and the tinted windows .S4, but we want to change the colour and add a wide body kit. The html would be <A4 class="Avant R S4> and the CSS would be .Avant.R.S4 { colour: green; kit: wide-body;}.

By combining classes like this, you can build a base style (.Avant) with all the necessary attributes, and just add to and/or change attributes for different effects, but keeping some things in tact.

Customization with an id

An id selector is used in the same way as a single class <A1 id="look-custom">, but should only be used once on a single item for an entire page.

This can be thought of as getting a custom paint job and contrasting roof colour for your Audi A1. The CSS would look like this: #look-custom { paint: lime; roof: contrast;}.

Customising something means it should be unique, and trying to emulate it can lead to disappointment. Going to a body shop that uses sub par paint that looks the same as a custom job will end up with problems down the line. In the same way, "Using the same ID multiple times in a document may appear to work for styling purposes, but don't do this. It results in invalid code, and will cause strange behavior in many places." So be careful when you use id's. One of the most usefull ways to implement id's is to create page anchors. Click the link below to see how that works.

The Story of Te Houtaewa

E kore e mau i a koe, he wae kai pakiaka. A foot accustomed to running over roots makes the speediest runner.

Te Houtaewa was the fastest runner of his day and played many pranks on his peoples enemies. One morning his mother wanted kumara for the hangi (earth oven) and asked Te Houtaewa to go to the gardens at Te Kao, a short distance away. He agreed to fetch the kumara and told his mother to prepare the hangi.

Instead of going to the nearby gardens, Te Houtaewa set off for Ahipara as he wanted to annoy some Te Rarawa people who lived there. Carrying two large baskets for the kumara, he ran like the wind, completing the journey over the hard sands of Te Oneroa a Tohe (Ninety Mile Beach) in the few hours it takes a good hangi to heat up properly. On reaching Ahipara, he went straight to the people's kumara pataka (storehouse for the sweet potatoes) situated at the foot of the hill Whangatauatia.

While Te Houtaewa was filling his baskets with kumara he was spotted stealing the kai (food). He was immediately recognised.