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

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.

Critisism

Et Tu Grande?

Et Tu Grande?

So I’ve just finished creating a business site for a client and it has been a serious lesson in:

  1. Not taking criticism to heart; and
  2. Acknowledging that your own vision for a project may not match your clients.

After proudly showing the site off, there seemed to be quite a few questions of why I put certain things in places and why certain functions were needed. I believe I may have taken somewhat personally as I then proceeded to spend the next couple of hours brooding over a tub of café grande.

To be honest though, the criticism wasn’t actually that bad, in fact a lot of it was probably rather warranted. After looking over the site, comparing it to a number of others and skimming through a couple of design books, I realised that I needed to get back to the drawing board.

The revised site now looks and performs 100% better and my client is much happier.

The problem was not that the customer had decided to point out a couple of flaws; it was that I had invested so much of myself into the site that any small criticism felt like a stab in the back. If I want to reach the goal of actually turning this hobby into to any sort of career, that is not a position to put myself in.

What I now understand (and didn’t back then) was that I wasn’t just creating a piece of art for myself. I was solving a client’s problem by designing a web page to promote their business.

If they aren’t satisfied with the outcome, then I definitely can’t be.

 

Side Note:  whilst a litre tub of café grande may be great for the soul, your stomach may have a couple of counterpoints on the subject.

A Full Plate

cries in spanish

So I’ve got a lot to learn… literally.

My current to do list:

  • Become compliant with languages html, css and javascript;
  • Look into how SASS can improve a website;
  • Learn how to utilise WordPress as a CMS for builds;
  • Improve on my knowledge of graphic design and writing copy;
  • Build a social network presence;
  • Finish the 5 books I’m reading right now, 3 of which are related to work web design;
  • Update this blog;
  • And finally I have to squeeze in my actual day job somewhere.

Just writing all that out makes me want to crawl into a ball with a big mac, a whopper; some kfc fries, and a bakers dozen of krispy kreams (the doughboys podcast might have something to do with that too).

Even meditation is stressing me out (now I have to find 15 more minutes in the day just for that!).

First world problems yo.

Luke