7 Days of Javascript hell over a few lines of code

I wanted to create an original piece of code which did something.

And I did with Chop Wood.

Something simple, but something which took an input and then changed an attribute on the DOM. Or is it “element”, I am still not well versed in javaspeak.

This week has all been about learning a few simple things to the point of where I could actually use them:

  • querySelector
  • getElementById
  • function()
  • addEventListerner
  • Global variables
  • Function variables

I have spent 7 days or more studying the above, in various youtube video tutorials, books and wikis. All I wanted to do was present and object with a variable, click on that object which reduces that variable by one and then changes another variable. I then wanted the variable that had been changed to be clicked on and change again, as well as changing another variable and so on.
Cascading the effect down a list of objects.

It seems simple, well I thought it did and found it incredibly hard, but I stuck with it. Although causing my family to emit radioactive death rays towards me as I wouldn’t stop going on about it. Ever been there?

One of the problems is the much talked about issue of function variables and global variables, I thought it would be easy to pass a variable which originated in a function to play in the global scope, no no no, can’t do that.

I read you could create the variable outside the function and then pass it in, but still I couldn’t get it to work.

I then found a work around and came up with this:

let treecard = document.querySelector('.this-tree'),
count = 10,
logfun = 0;

//Tree counting function
treecard.addEventListener('click', function() {
//tree

if (count <= 0) { alert("You are out of trees, dumb dumb. Go find some more."); return } else { count--; document.getElementById('tree-score').innerHTML = count; logfun++; document.getElementById('log-score').innerHTML = logfun; } });

I absolutely expect there to be an easier work around and may even be schooled by another javascript noob, which I am fine with this. I have only been serious about learning javascript for a few months so any criticism from coders more experienced than me is welcome.

I still can't wrap my head around where the variable of "count" actually lives, is it on the DOM or is it in the script. And is a global variable(I assume it is) or a function variable?

I have read a number of code examples of global vs function variables and become even more confused, but I know clarity will come. As it has somewhat with querySelector and getElementById and I get a kick out of manipulating the DOM with them. My question is, why bother with getElementById anymore. Is it just habit that people still use it?

Also, getting to grips with ES6, which seems the wise thing to do. All the old tutorials still use var, whilst I am focusing on only using let and cost. Which seems to be the perceived wisdom. I realise it is worth getting to know the old way of doing things, especially if working on legacy cod.

So go look at what I did, yes, it will take you 17 seconds to get it and then get bored, but I am so proud that I got it to work. Real agony was spent on this.

I have new things to add updates to the Chop Wood game, which will continue my learning, like:

  • Animation of objects when performing
  • Sounds when objects performing
  • Time delay for better usability
  • Progress bar, time animated
  • Regrow trees button with cost to score variable
  • Market place to sell and buy items from the game, variable pricing
  • Save game to JSON
  • Save game to local storage on browser
  • Save game to Firebase
  • Save game to SQL

    A long way to go yet, but I have set myself the goal of learning javascript this year. I expect the above to take another 3 -4 months to complete. But I love learning this stuff and creating something where nothing existed before, even if the actual thing is so simple.

    Any comments or suggestions please make them in the comments. Would love to hear feedback.

    Chop Wood

    Thanks to the Youtube channels of Brad Traversy and Dylan Isreal, I bought Brad's Modern Javascript course from Udemy, highly recommend it.

Coding Resources I use learning to program and how not to learn coding whilst having a bath.

I am developing a methodology of learning, which I have found is crucial to help me move forward. Rather than simply picking up a book and working through it, I now use numerous points of information and move forward with daily and sometimes hourly goals.

I am 4 months into my “learning to code year” and here is a list of coding resources I am finding very useful.

Freecodecamp.org
Freecodecamp.org

This has been a game changer for my ability to progress.

It is a tutorial website, which has gamified the learning process and enabled you to get direct feedback with a simple progression score. As you work through the mini tutorials/problems you get a point. The points are gained very easily at first and progressively get harder. Before you know it you actually learn stuff.

As a way to get a basic HTML and javascript knowledge it worked very well for me. Although I already know HTML, I have never learned it in a formal way and although I already new the basics of javascript from reading a few books and watching video tutorials, it didn’t click in my head.

By allowing micro problems to be solve after the smallest amount of information is given it follows “a lot of little” type formula which you can come back to at your own pace.

I have slowed down with it as I am now on to learning algos, but dipping in for 15 mins a day really helps.

Youtube

Information is now free.
Mostly. I have caved and bought a course from Udemy

It seems if you want to learn anything now, Youtube is the place. Why buy a £30 book when you can hit Youtube for free, there are valid reasons for buying a book, more on that later.

After much watching and investigating, I have a list of favourite, expert Youtubers who appeal to me. This list is my list and not necessarily the best in the world, but it’s the best for me.

Traversy Media


I am currently watching this guys videos the most. He is clear, explains the little details which others gloss over expecting you to already know. His tutorials are well planned out and he is very responsive to the needs of his audience.

Also, he has a Boston accent, which I find one of the most interesting American accents, plus he has an inspiring back story and seems like a thoroughly good chap.

Traversy Youtube channel

Dylan Isreal
Youtube channel

I like the backstory of Dylan, I think it’s important to look at the journey other people are taking to be able to be realistic about your learning plan. My problem in the past has been, “I just need to read this book and I can build the new Facebook.”

Learning to code is hard, especially for me as I find it hard to focus and keep going to an end point. If that end point is unrealistic it’s impossible to reach it and you give up thinking you’re just thick (I may be one of those thickos who learns despite).

Dylan has taken the path from novice to professional and is able to communicate a lot of the non-programming skills essential to being a progammer, along with the ability to teach coding.

Jon Sonmez

This guy cracks me up, he teaches a video in a stringy, workout vest (can’t remember what Americans call them) and often talks about his workout. He’s another one for teaching the soft skills essential as a programmer and is not afraid to say that coding “is hard”. A lot of people selling learning make it sound like you can “learn in a day”, when the reality is a lot different. This is of course to get people to hand over the readies. Which is one reason I think free, ad supported Youtube videos can work, watching is paying.

Jon has probably the biggest experience as a software developer and really knows his stuff. It’s very useful to learn from someone as battle hardened as this cap.

Although I am expecting one tutorial to be given from a hot tub with a couple of gym ladies serving him cold beer. Jon if you’re reading this, this is the idea for the next video.

Net Ninja

Not just here because he has a British accent (always good to here your own accent), but because his tutorials are informative, professional and clear. He covers quite a lot of ground in his tutorials and presents in a well designed way.

The above are the ones I visit regularly, but others of note are:

Program With Erik
CodingPhase
Academind
Chris Hawkes

All the above will teach you what you need to  know with regards to coding. They all seem to cover javascript and HTML and the popular frameworks. It’s really about personal choice and which voice connects with regards choosing who to follow.

Websites I use often

Learning and tutorials
Freecodecamp.org
Codeacademy
Codeschool

w3schools.com

Hosting/cloud
Heroku-Cloud application platform
Google developers
Codepen

Communities
Stack overflow
github.com
stackoverflow.com

Reference
devdocs.io

Tools and other
Colorzilla
What Font extension

Blogs

Books

Books I like:

Head first Javascript
Simple Programmer
Eloquent Javascript
Clean Code

If I did one thing different it would be to buy less books and do more real life coding projects.
But here are a few positives of paper books.

  • Usually written by an expert in the field.
  • Highly portable, I once read a Php book in the bath, I dropped the book into the water and from then on the pages crinkled. You can’t do that with a laptop (although I have heard stories).
  • You can notate them, paper books are best for this. Yes you can note and highlight with e-books, but it’s just not the same as your personal squiggles
  • You can lend or give to others
  • They make excellent doorstops. The php books I had were massive, but after a few years they were out of date, but still came in useful as a heavy weight doorstop for my drafty, attic, coding den.
  • E-books over paper books? I think it depends on what does it for you, I like the heft and smell of a real programming book. But I also like the ability to read on my iPad, or quickly consult my iPhone to look up something on a Kindle book.

    Books have fallen out of fashion, but they have their niche and I think will always stick around in some form.

    All the above can be seen as tools for the transference of information. However I think there is another element at play and that is putting you in the mindset, or getting you in the mood. Being in the right frame of mind I think is crucial to successful learning time. It’s taken me a while to develop the right aspects of learning and mix them in the right amount.

    I do a lot more actual tapping the keyboard these days, and have weaned myself of simply ingesting information, which I always find easy to get into and hard to get our of. Implementing and building stuff is my main focus these days.

    Hope this blog post has been useful to you. What are your favourite, learning to code tools? Let me know in the comments below.

My journey from Coding Noob to Coding Expert.

There are two things wrong with that headline. Only two?
Already I am writing clickbaity headlines for a programing blog, I just can’t help myself.

Here’s the thing, I feel I am only just getting started and so certainly am not an expert, but I’m not really a noob.
I started to learn to code in 1981, in BASIC on a Commodore Vic20 with 3.5k. I didn’t  get past a simple GOSUB “Hello World” and spent most of my time copying game code from magazines. At the time that is what you did.

Forwards to 1998 and a friend and I set up a website, it was a stock market game with celebrities in the news rather than companies. He did all the coding, I did everything else. Php 3, Mysql, a bit of javascript and even some PERL. The site ran just fine, I tried to keep up with the coding and learn, but I got into managing the site, building content and SEO. I had a spin off site which was getting 30k visits a day through SEO work.

The site eventually crashed and burned, my partner and I parted coding pathways and I delved into the art of content marketing, SEO and then social media.

I have got by in my web dev career by learning coding to the “just need to know”, level. This involved plugging in pre-written scripts with no real modification. Mostly PHP, a bit of javascript, lots of WordPress sites and plugins, but no real code learning.

Around 2008 I decided I wanted to learn php, so read a few books the size of large house bricks, tinkered around, got distracted and moved on. At the time I was doing major consultation on content marketing for the biggest companies around so I had not commercial need to learn to code.

Around 2015 I wanted to get into to game creation, which is something I have always wanted to get into right from the beginning. I now realise this is the route most interested people like myself take. But of course coding games and playing games are two different mindsets. I bought a book on learning Unity, it seemed learning a game engine was the way to go. I got pretty far in the book, but again got distracted with client work and the gaming industry is probably the hardest to break into as most coders head there like herds of starving beasts to the feeding trough.

Fast forward to this Christmas. Burnt out with content marketing, although still have enough SEO and general online marketing skills to help clients. So decide to have another run at becoming an expert coder.

This time I stick with what I know, which is the web. Mostly front end, but in reality Full Stack. I aim my sights at Javascript, read a few books, watch a lot of videos.

I find things have changed a lot since 1981, no duh. Actually, things have changed a lot since 2015, even 2017.

Frameworks, or libraries (take your pick, most seem to interchange the term) seem to come in and out of fashion with quick regularity. Last time I looked it was all Ruby on Rails, now it’s Laravel, Vue2, React, Nodejs…etc.

Not only that, there are things like Webpack, NPM, Markdown, Bootstrap (this one is cool), Gatsby,  Yarn, Babel, CamanJS…etc. It seems to go on forever, and depending on who you talk to depends on which is the must set of stuff you should go for.

After investigation, Vanilla Javascript is my main focus, which means just plain javascript, I guess vanilla sounds cooler than, plain.

The plan as it stands.
Learning Vanilla Javascript to a professional level. Professional means I can look at any code and not have my head explode and be able to sell javascript services to the highest bidder. Having someone hand you cash to do something is sometimes the best metric to know you have arrived.

Primary skill I have set out to learn:

Vanilla Javascript

Secondary skills:

Vue2
Php
HTML/CSS
Bootstrap

Vue2 is the javascript library I am going to focus most on. It’s lightweight and quick to deploy, React is more popular but is more clunky to deploy.

Php seems to be falling out of favour to Node.js. But for server side it’s still popular. WordPress is in php and is my main CMS. It’s now on version 7, so I am hoping things have improved a lot, it was never elegant, but with frameworks like Laravel it may be more easy to work with.

HTML/CSS, although I am not a noob in these areas I do need holes filling in. I should be able to put a sophisticated front end together, but don’t have the organisational skills, I only know bits.

Bootstrap is a lot of fun. A HTML/CSS library it makes throwing up responsive web pages quick and easy. Flexibox is also something I need to add.

And the rest

Animate.css is very interesting as I want to create animated infographics.
Node.js, running javascript could be very interesting as I am learning vanilla javascript. It could be a replacement for php, I need to learn more on this before I can commit.
Visual Studio, not a language but a code editor. I have finally ditched Dreamweaver (ugh, the bloat) and am going text only. VS is great and with a ton of plugins.
AWS, Firebase, MongoDB…etc. I want to go as cloud based as I can and I want to scale as easy as I can. Also try out other databases than MySQL

Conclusion

Success consists of going from failure to failure without loss of enthusiasm.

Winston Churchill

I’ve probably failed at learning to code than anything else I have tried. But I keep at it, and will till I get it.