Fi Fi Foe Fum, Tic Tac Toe Makes You Feel Mighty Dumb

See the Pen Tic Tac Toe by Luke (@escrew7) on CodePen.0

Well I finally did it, this project was probably the hardest that I have faced so far, getting your head around the challenge and the idea of AI was super stressful and actually made me walk away from freeCodeCamp for quite a while, if anything I would suggest that people tackle Simon before taking this bad boy on (although now with the new update to FCC that isn’t even necessary).

I will say that this is a very basic AI version of the project using a random number generator to calculate the computers next move, I couldn’t seem to get my head around the MinMax algorithm that everyone is talking about on the forum and I really just wanted to get some runs on the board, so if you are up for a challenge, my game isnt it. Hopefully somewhere down the line I can come back to it and make it a little tougher than playing against your 3 year old sister.

I have returned to using jQuery as I find it a little easier than having to write plain javascript which can sometimes get a bit messy and easy to get lost when looking through code previously written.

As for advice regards the project I would say just start from the ground up, make a simple two player version first so you can get your head around the project and from there you can start working on creating an AI to play against. This is a real challenge and its easy to get stressed out but if you work slow and look for advice around the place you can build yourself a decent little program.

All the best.

Where Am I?

Mental note: never piss off Tiger’s ex

Ok its been a while… a long while in fact, but blogging is hard!

I also ran into a brick wall with free code camp right at one of the final hurdles with tic tac toe, the idea of programming an AI algorithm really spooked me and caused my anxiety to shoot for the moon.

So I took a little time off the site to take a couple of Udemy courses, Andrew Mead’s Complete React Web Developer Course, Complete NodeJS Developer Course and Stephen Grider’s Javascript ES6: The Compete Developers Guide.

All three were fantastic albeit very extensive (both of Andrew Mead’s courses were around 36 hours of video a piece) and really cheap at AU$13 each, so for a small investment I got to really dig into Node and React whilst getting a quick update on the Javascript update ES6.

ES6 is really interesting and I would either recommend this or Andrew Mead’s new course on JS. You will find some new things on there that can be pretty helpful and some stuff I have aalready started implementing! It can also be really helpful when looking at Codewars as solutions people give on there are generally chokkers with ES6 and might cause confusion if you dont have a decent base of knowledge.

As for when I will actually start using react and node, Im not sure… its definitely something that I need to follow up as it is fast becoming an important tool with developers and as the saying goes “use it or lose it”, I know that if i havent done anything with react in 3 months time, all the work I did will become gobbledegook.

So after about 4 months of slogging through these I came out a little refreshed and ready to take another look at the tic tac toe excersise, which I have finally managed to complete and will blog about soon hopefully.

Thats it for now!

Luke

ConfUser Experience

The user manual didn’t inspire confidence

So after spending the larger part of the last 3 weeks putting together the code for my latest fCC project I finally have it performing to a standard that could be classified as “functioning”. But there still remains a problem, it looks like a dog’s breakfast. Picasso would have had more luck understanding the functionality of my project than any normal end user would.

When I first started free Code Camp I would generally by this point be so over the project that I would just tick it off and move on to the next. These days I have come to realise that having a Ferrari engine can be sexy as hell, but if its under the hood of a Toyota Yaris, people probably aren’t going to take much notice.

I want my work to look as good as I feel about it, I know just how much effort went into it and I want people who see that. Simply spending a little bit of time thinking about the design of your project and coming up with some concepts of how you would like it to look can go a long way.

Usually I use Adobe Illustrator to create these concepts (as can be seen below), but there are a heap of decent free programs out there that can be used just as easily, baring that, a pencil and a piece of paper is your best friend. I usually try and create different ideas for desktop, tablet and mobile and then try and implement them using basic media queries.


When you spend so much time and effort on building and creating a project on free Code Camp, its worth spending just a little bit more on making it look as good as it performs.

Luke

Code Wars!!

I will fight anyone who calls this movie stupid.

https://www.codewars.com/

I recently came across this site whilst looking for more opportunities to practise javascript problems. Ive found that this site is great for pushing you to the peak of your abilities and really helps you improve your coding as it shows you the top solutions after you have solved the problem.

I warn you though, it can get pretty tough and sometimes they arent looking for just a javascript solution.

Get ready to dust off your old math books.

Object.defineProperty() – There’s More Than One Way to Skin a Cat

private property sign

definition: sketchy

I thought Id try and do something different for this blog and post some code that runs through how a specific piece of JavaScript Works

The Object.defineProperty() is a method that can create or modify a property of an object with a couple of special caveats added. Using this method you have the ability to make the property and the method read-only (writable and configurable) or invisible (enumearble).  For a more in depth explanation the Mozilla page can be found here and another very helpful blog on the method can be found here.

But this page is the copy of a JSFiddle post that I have been playing around with in an attempt to strengthen my understanding of it, you should give it a shot too. The link to the actually JSFiddle page can be found here.

 

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.

 

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.