Eloquent JavaScript and THAT Chapter

“goonies never say die, me on the other hand…”

So Im feeling like the definition of “spoke too soon” right now…

Just as just I released the previous blog raving about how good Eloquent JavaScript is, I came across Chapter 6 and the infamous “Laying Out a Table”.

This wasn’t fun.

Its a very complicated description about how to use JS to create a table script that has an even more complicated JavaScript program to follow along with. After staring at it for about 10 minutes, I picked up my jaw and started looking online for help. Luckily enough i found another blog post that I wanted to share: http://tomi.io/eloquent-javascript-laying-out-a-table/

Whilst this post doesn’t go over the actual problem itself, it does give you a very in depth explanation of what is actually happening, and you will be the better for it. Just remember to go slow and understand what you are learning.

Id thoroughly recommend you having a look at it when you get to Chapter 6.

Back to it.

Luke

Slow and Steady Wins the Race to Learn JavaScript

the new trailer for Fast and Furious 8 was surprisingly underwhelming

Like any good skill set, if you want to be successful at web development and JavaScript, you need to put in the time.

Along with learning JavaScript, for the past 3 years I’ve also been studying Japanese (the Human Japanese App is a great way to learn if you’re interested). Nearly every day I sit down for at least 30 minutes and go through the Japanese language with flash cards in order to reinforce my knowledge of the subject.

With my JavaScript studies this wasn’t the case though, instead of putting in the time, all I had been doing was running though the exercises as fast as I could in order to get to the next. I never really revised and only times I ever bothered looking back was when I needed to re-learn how a function performed… because I had already forgotten it. This was a problem, my understandings of the concepts of the JavaScript language were weak at best and my confidence in my abilities nosedived.

I recently started trying to introducing some of the study techniques (along with a couple of new ones) I utilise whilst studying Japanese, into my JavaScript studies, the results have been very encouraging and I have included them below:

  • Write what you are learning down in a text book, make sure to put it in your own words so you aren’t just copying and pasting
  • When coding, write down in the window what the code is about to perform and why (see below)
coding explanations

adding explanations to your coding helps reinforce what you have learned and also helps you if you need to come back to the code later

 

  • Make sure you 100% understand what you are attempting to learn before moving forward, if you don’t, go back and keep at it until you do
  • Spend 5 minutes at the end going over what you have learned, try and summarise
  • Spend the first 10 minutes of the new study period going through what you went through the last
  • If you have trouble remembering something specific, make up some flashcards and test yourself in your spare time
  • Break up your study periods into blocks, the Pomodoro Technique can be great for this
  • Remove distractions, this is a killer for me, out of an hour of study I can lose nearly 60% of that time just wondering what people are tweeting about or what delicious foods my girlfriend is instagramming atm, you will be much more effective if your phone is off and you are focused on the task at hand.
  • Take it slow, take it slow, take it slow, this isn’t a race, the more time you take to reinforce your understanding, the stronger you will be

So after recognising my mistake (and after I had stopped crying) I decided to go back to the start, but I didn’t go back to free code camp, I picked up the book Eloquent JavaScript by Marijn Haverbeke.

Now the book Eloquent JavaScript, in my small amount of experience, is about as intimidating as JavaScript books get; by about the third or fourth chapter the dial is turned up to 11 and you are thrown into the deep end without any floaties. This book can be so scary that there is a significant chance you may just end up throwing the thing in the fire and calling the whole thing off (something that can be especially expensive if you’re reading it from a kindle).

But please, please, please trust me, this book is fantastic and I couldn’t recommend it more, there are mountains of information to gain here, if you feel overwhelmed, just trust the process and take it slow, if you fail to understand something read it again and write it out, and if you still don’t understand by then, then go and jump on stack overflow, google the problem or even send me an email, there are heaps of resources out there to help. This book takes you on a very smart path to learning JS and I’ve really enjoyed slogging through it. Also as a bonus the book is available free in electronic format from his website so you don’t have to spend a dime (or ten cents if you live in Australia like me).

Good luck and keep moving (slowly) forward!

Luke

toFixed or not toFixed, that is the question.. to rounding a number in Javascript

2be

“I could put a cactus on the top of this and sell it to hipsters”

freeCodeCamp has made me ask a grand number of questions about javascript and one of the more recent ones was “so how the %^@$ do I reduce the number of
^#$%ing decimal places in a this $@#$ing number?!?!” (this question came about just after realising that js thinks that 0.1 + 0.2 equals 0.3000000000000004.)

And as we are talking about Javascript, one question can only ever lead to another, this time being “so do you want a string or a number in response?”

“I want a string response!” (the toFixed() method)

Ok then, this is probably the easiest way of reducing a number to a fixed number of decimal places. You simply add the toFixed() method to your variable with the desired amount of decimal places as the parameter and bob is your uncle.

  • //create a variable ‘x’ with 3 decimal places
  • var x = 3.146;
  • //create a new variable ‘y’ with the toFixed() method with 2 as a parameter to reduce the number to 2 decimal places
  • var y = x.toFixed(2);
  • //call the y variable
  • console.log(y);
  • ‘3.15’

“I want a number response!” (the Math.round function)

Then let’s get to it, this is a simple and easy way of rounding a number with decimals to the nearest whole number. You just need to call the Math.round() function with your desired number/variable as the parameter.

  • //create a variable ‘x’ with 3 decimal places
  • var x = 3.146;
  • //create a new variable ‘y’ with the Math.round() function and the variable ’x’ as the parameter
  • var y = Math.round(x);
  • //call the y variable
  • console.log(y);
  • 3

“But I need to create a number with 2 decimal places” I hear myself saying time and time again whilst chewing my entire fingernail off. Fear not! There is back way to countering Math.round’s rather depraved need to cut the number’s entire tail off, and it involves just a simple bit of math.

  • //create a variable ‘x’ with 3 decimal places
  • var x = 3.146;
  • //create a new variable ‘y’ with the Math.round() function and the variable ’x’  times 100  then divided by 100 as the parameter, shifting the decimal place back a couple of spots.
  • var y = Math.round(x * 100) / 100;
  • //call the y variable
  • console.log(y);
  • 3.15

So there you have it, a couple of ways to round a number down and a great way to solve the Javascript issue with binary and floating point numbers. If there are any errors in this post, apologies, I’m still learning and I find that writing about this stuff as I go helps reinforce it. Any questions about the subject are more than welcome but will most likely be reposted as a question on the StackOverflow website by yours truly.

 

Extra Time!

If you want to use the toFixed method and still have the result as a number, then just convert it via the parseInt() function post toFixed() conversion as seen below.

  • //create a variable ‘x’ with 3 decimal places
  • var x = 3.146;
  • //create a new variable ‘y’ with the toFixed() method with 2 as a parameter to reduce the number to 2 decimal places
  • var y = x.toFixed(2);
  • //query the type of y variable
  • console.log(typeof y);
  • string
  • //create a new variable ‘z’ with the parseInt() function and the variable ’z’ as the parameter
  • y = parseInt(y);
  • //query the type of z variable
  • console.log(typeof y);
  • number

week.length = x;

A weekly update of what I’m currently reading, watching and listening to.

ein

x = reading

Einstein – Walter Isacson

An interesting book by the same author of the Steve Job’s Biography “Jobs”. I’m not much of a science person, but this is a great chance to learn just who Einstein was and what drove him to reach such incredible heights.

Isacson is a pretty amazing writer too and despite its controversy, I’d also recommend the Jobs book 100 percent.

 

x = listeningzooz

Too Many Zooz

Great funk bank that apparently still busks in the New York subways, heaps of fun and a great pick me up in times when I’m ready to put a brick through my computer.

Also has made me add “learn trumpet” to my bucket list.

 

westx = watching

Westworld

If you haven’t heard of this show yet then you must have been living under a rock for the last 3 months.

Robots + Cowboys = take my money.

 

 

 

 

shop-talkx = podcasting

Shop Talk Show

Dave Rupert and Chris Coyer talk
everything about web development, a ton of the stuff can go straight over your head, but it can still be a great podcast to pick up an interesting tidbit or two whilst trying to climb the mountain of learning code.

JavaScript and Decimal Places, A Shortcut to Insanity

Uhhhh, who invited Gottfried to the Party?

Uhhhh, who invited Gottfried to the Party?

 

So after spending a couple of days trying to work through the freeCodeCamp algorithm script Exact Change I came across a rather unexpected issue.

In JavaScript (0.1 + 0.2 === 0.3) is false.

After running around in circles crying foul and threatening my laptop with a number of things that would break the Geneva Convention I had a look around the internet to see if anyone else had experienced the same problem.

It turns out that my anger was misdirected at my laptop (apologies); in fact it should have been aimed at a young man by the name of Gottfried Lebiniz, the inventor of binary.

The problem is that computers speak in the language called binary (a sequence of Zeros and Ones) meaning that numbers have to be stored in a format called “binary floating point”. This format is designed in such a way that it is unable to actually represent the true value of some decimal places.

In JavaScript 0.1 + 0.2 actually equals 0.3000000000000004.

Confused? Yeah me too, until I chanced across this video, it’s about 30 mins long but if you can get through it, you’ll no longer be preparing to hang your computer’s toes over some burning coals, but quickly googling good old Gottfried in order to put a curse upon him (he died in 1716 just fyi, I guess someone else got to him first). Also you might just learn a thing or two about how binary floating point works.

 

 

If you’d like some more information on the floating point format I’d recommend the website http://floating-point-gui.de.

As for the freeCodeCamp’s Exact Change … move over Ben Affleck, Math.round() has just become my new best friend.

 

pain in the… back

plank of wood

me yesterday

So for my current day job I sit at a desk for 7-8 hours a day, and when I get home from that and hit the coding books, I’m back at another desk for 1-2 hours. This ongoing routine of sitting awkwardly has resulted in my back becoming stiffer than a 2×4 plank of wood.

Recently some kind soul who’s name I cannot for the life of me remember now (forgive me mystery angel) passed me a link to this video and it’s been a real boon to both my spine and sanity.

So I thought I would pass on the favour.

I might suggest that you try and find a quiet, discrete spot to perform these exercises, as you may get a funny look or two when flapping your arms up and down or climbing an imaginary ladder.

Good luck and keep climbing!

I Built This!

 

See the Pen Free Code Camp Weather App by Luke (@escrew7) on CodePen.

This is my version of the Free Code Camp Weather App written up on Codepen. I’m pretty happy with how it has turned out. A couple of things I am particularly stoked about are the toggle on the degrees <div> where you can click to change from Farenheight to Celsius; and the minimal design of the app, which I think is suited to its purpose.

Free Code Camp along with Khan Academy have, to me, been two of the better free web development learning platforms. Both boast strong challenges along with great support networks for when you run into coding problems. Free Code Camp has really pushed me to my limits with JavaScript and on more than one occasion I’ve stormed off complaining about how the site is cheating me, only to realise that I’ve spelt “function” wrong.

One feature I’ve really enjoyed about Free Code Camp is that you can enter into a “contract” with the Camp, where each month you donate a sum of money to a choice of charities until you finish your selected certificate. It’s really rewarding knowing that you are achieving your goals of learning code whilst also giving others less fortunate a leg up in achieving their own dreams. I decided to donate monthly to the http://www.blackgirlscode.com/ school and have been 9 months.

freeCodeCamp is no walk in the park by any means, but if you really push yourself, the rewards that come from completing algorithms and projects is legit.

https://www.freecodecamp.com/

Give it a shot.

Like Riding a Bike?

bike

I recently took a little bit of time off of studying JavaScript to attempt the construction of some actual websites. So now that I had a couple of sites under my belt I decided to dive back into the Free Code Camp Front End Certificate.

Have you ever left a video game for a couple of months and then come back with absolutely zero idea of what is going on? Because that’s exactly what happened to me, I had no idea how to create a function, looping was lost on me and I couldn’t even remember the difference between an array and an object. Studying JavaScript is just like riding a bike… if that bike had no wheels and a cat for a seat.

But complete and utter despair at my lack of ability isn’t something that gets me down for (too) long and after a couple of weeks of persevering I was running through the intermediate problems with increasing confidence. As intimidating as stuff like this can be when you first look at it, once you have a basic grasp of the fundamentals, the world is your oyster.

I hate that saying… I don’t even like oysters.

The world is your oyster deep fried mars bar.

Fixed.

week.length = x;

A weekly update of what I’m currently reading, watching and listening to.

Freakonomics

 

x = reading

Freakonomics – Steven Levitt and Stephen J. Dubner

This book is a really interesting read that gives you a different perspective on the world and what’s going around you. Their answer to the reasons behind the drop in crime in the USA still feels ridiculous to me.

 

 

tourist-u

 

x = listening

Tourist – U

This seems to by my go to music when trying to figure out JavaScript. Tourist is music that manages to relax and invigorate you at the same time.

 

 

Bloodline

 

x = watching

Bloodline

Defines the term ‘slow burn’, but crazy good acting and a super gritty storyline keeps you on-board and clamouring for answers. Ben Mendleson is the GOAT.

 

 

doughboys

 

x = podcasting

Doughboys

Two comedians that review fast food restaurants in the USA. Thanks to these guys I’m this close to selling everything I own, moving to the USA and living the short, yet enjoyable dream of hyper-obesity.