“Learning to Code” Discord Channel

If you are just starting to learn to code, join my “Learning to Code” group on Discord. It’s for those who are starting to learn how to code, but all are welcome.

Join here

Start with an introduction, short bio and your goals in learning to code.

The intention is not to tell you what to do, but to tell you what I and others in the group have found out and maybe others will too.

I am no expert, I have only been seriously learning to code for the past 10 months, so still a noob. But I have thrown down pretty hard and have committed an average of 4 hours a day coding time. (on top of the day job)

Right now the group is as loose as it gets, only rule is don’t be an arse.

Not selling anything, no book, course, client relationship. It’s simply a human interaction thing, apparently mixing with other people is a good thing, at least that is what Siri told me.

Treat it as you want, it’s basically a hangout around a specific subject for like minded people, I expect some of you will drop in once a month whilst others, such as myself will be on every day.

I for one am very interested in others learning experiences and the projects you are making. Learning to code has been one of the most hardest things I have done, but I have stuck with it and now know my “for loop” from an “if then” statement.

This stuff is not natural for me, but it’s slowly being carved into my hippocampus. I have a mindset of a writer and although there are similarities I do not think like a natural coder. Some people pick this stuff up very quickly, it takes a while for things to soak in for me. So if you feel the same way, don’t worry there will be people who have the same issues.

You can ping me about this on Twitter or simply pop into the Discord server and chat there.

Hope to see you there and look forward to walking the path with you


Before you start to learn to code consider this

Mountain

 

How I thought learning to code would be

  1. I want to learn coding
  2. First I must learn one thing
  3. After learning one thing I learn the next thing
  4. Once I learn all the things I am finished.
  5. I have about 100 things to learn

Reality

  1. I learn the first thing in my “learn to code” plan
  2. After learning the first thing, I learn I must learn three extra things.
  3. I learn the first thing of the extra three things
  4. After learning the first of the three extra things I learn there are three extra things I must learn
  5. I start to learn the first extra thing that I learned I must learn after learning the first extra thing of the group of three things I learned after I learned the first thing I planned on learning.
  6. After learning the first extra thing that I learned I must learn after learning the first extra thing of the group of three things I learned after I learned the first extra thing of the group of three things I learned after I learned the first thing I planned…… I learn there are three extra things I must learn.

This is the reality of learning to code.
Once you make that realisation and can hold it in your head as an independent concept, rather than thinking, “I just need to learn a few bits and bobs, gimme a few days”, then I think you have learned the first lesson.

I’m 9 Months in on spending 3-4 hours a day on average in learning to code apps.

I’ve gone from:

CSS/HTML (update)
Javascript
Bootcamp
Materilize
Vue
Firebase (+nosql dbase)
VueCLI
Vuetify
and currently, Vuex (serious brain ache)
and next is Nuxt and then I am done.

I’m now building SPA’s (single page apps) in the cloud with a decent CRUD back end with which I can use as templates to build various apps. Of course nothing ever gets finished as I grab the next learning fix.
Also there are a quite a few other concepts I want to fully grasp, but I am on track to launch my first public app before the year is up.
That is if I can resist learning AWS, D3.js, Laravel, Mongodb….etc.

This is the journey I am on and I am not getting off till it is done.

Photo by Tory Morrison on Unsplash

Why coding has turned me into a drug addict

The brain does not play fairly when you learn coding. The brain should say, “well done, you have just learned how to use the Vue CLI effectively and you even know what CLI means.”

No, the brain does not say this, it says “Gimme more. Sure we can install stuff into our SPA using the CLI and NPM. But it’s now essential we learn Vuex, Nuxt, Vuetify and axios. This is the only way we can think of ourselves as successful.

It’s weird, because I set out on this path so I could deploy apps, slap tasty widgets on my web pages that the hordes will find too tasty to resist. But that goal seems to have been buried in the weeds off the New Jersey Turnpike. And holding the shovel is my brain.

I think what happens is that the buzz I get from learning – and you do get a buzz – gives you such a hit of dopamine that you get addicted to it and the only way you can get your next hit is to learn the next thing.

If I can learn how to deploy a RESTful API using Axios I can get another hit. I am addicted to the learning process because of the drug my brain delivers when I have success.

I assume most have this addiction. It may be that those who are expert in the field and actually build stuff know far more than they needed to, but managed to get off the learning treadmill.

Udemy, Udacity, Freecodecamp are all dealers of this stuff. Although as a user I would say that they deliver fantastic product.

When we say we love learning, we are really saying we love that hit.

I do want to build, there are things in my head that need to be removed and placed in a server somewhere. It’s getting way too crowded and very noisy in my head these days.

For me, learning to code is my drug, it is my addiction. But I am aware and I am introducing things into my routine to reduce the cravings, one of them is writing this blog post.

After 9 months of focused learning I am currently learning/struggling with:

  • Firebase functions
  • RESTful api via Axios
  • Firebase storage
  • Vue 2

After that I am looking at Nuxt, as I want the SPA to have a decent SEO score and then it will be on to Phonegap to be able to send my app mobile.

Optional learnings are Vuetify (do I need this if I know Materialize and Bootstrap) and NodeJS (I already know a bit of PHP so should I stick with this)

It seems you can only know what you need to learn after you have learned it. It’s tricky for others to give you advice as everyone not only has a different menu but are sitting in a different restaurant with their own set of digestive intolerances.

I had dreamed it was going to be as simple, as “learn stuff, do stuff”. But it’s way more complex than that.

Which is why I love it.

Simplest Way to Create a Vue Instance

A step by step guide to the simplest Vue.js app with no fluff.

Current cdn used:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

Other places to get the cdn, https://cdnjs.com/libraries/vue

Create app.js containing a data element with the label of “title”

vue hello world

“new Vue” creates the Vue instance

“el” creates the Vue element, which is labeled “app”, this is referred to in the HTML page to create the view instance with the element of “app”.

“data:” creates a property which will store the data the Vue instance will use.

“title:” this is the property which contains the string, ‘Hello World’. This property gets called in the HTML using the double curly braces, {{}}.

The HTML page of “Hello World”

Vue html page hello world

The Vue library is called with the cdn

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

The Vue code we created is added by:

The specific Vue element is called and a Vue instance created by

<div id”app”>

Everything between the <div id”app></div> is within the Vue instance.

Anything that is outside the specific Vue instance will be treated as HTML, Note: multiple Vue instances can be run on one webpage, although not quite sure what the benefit is.

What we see in the browser.

simple-vue-app

We see the variable which has the property of “title”, in the browser it becomes a HTML element.

Code for this app:

app.js

new Vue({
el: ‘#app’,
data: {
title: ‘Hello World’
}
})

index.html

<!DOCTYPE html>
<head>

<title>Document</title>
<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>
</head>
<body>
<h1>Simple Vue App</h1>
<div id=”app”>
<h2>{{ title }}</h2>
</div>
<script src=”app.js”></script>
</body>

</html>

The essential steps when learning to code

The pivot continues:

As I continue to increase the velocity away from the world of SEO, content marketing, linkbaiting and fake news consultant to large media organisations, I get ever closer to Planet Code. I discover there are a few steps in the “learning to code”, journey..

Relating to learning a framework or programming language it goes like this.

1. I have no idea what the hell is going on, this stuff is complete voodoo and those who make it work are genius.

2. Learning this stuff is so hard my brain is being trampled on by a stampede of overweight orangutangs.

3. Watching Netflix and playing Slither.io is far easier than learning javascript.

4. What the hell, I just coded something and it did the something I wanted the something to do. I have entered the garden of heavenly cool people.

5. This framework/language is amazing, I just found out it could do stuff in ways I never even knew stuff could be done.

6. This framework is absolute garbage, I just found out the creator is no longer updating it and has emigrated to an ashram in Thailand, leaving holes in the framework.

7. You then find out a Google Firebase, dbase cannot be searched, erm…. (it can but you have to go to Burning Man to do a 36 hour shamanic dance and suffer involuntary celibacy)

8. You lick your lips at the React vs Vue debate and resist the temptation to tap the primal brains of innocent coders for links.

9.You master, Webpack, Babel, SASS, Vue CLI, Bootstrap, Materilize, Firestore cloud functions, ES16, mongoDB…etc and then you forget why you were learning all this stuff in the first place.

10. You buy a small farm in Cornwall, and grow goats.

Screen Grab of the Javascript game I am coding

When coding you spend most of the time inside your own head. But you also get to off-load what is going on in your head and put it on a screen. Another person comes along, looks at the screen and puts what they see into their own head. You then get a reaction, the worse being indifference and the best being joy, hate is not worthless as at least it shows something has been processed.

Standing back from your coding to observe the points you came from and the point you are going to is very hard.

Having that wide view is crucial, this is where social media can be important because you get to invite real time feedback which needs to be processed and then fed back into the coding process.

Here is a screen grab of my first Javascript game, which is still in production and just got started. Bearing in mind I am at the beginning of a “learning to code”, journey I am pleased with current progress.

learning to code chop wood

I think it’s useful to capture progress in time, visually and within the version control.

Looking back at progress made in the past helps motivate for progress in the future.

Learning to code has the possibility of taken me to a place in the future that I have not yet thought of.
How cool is that?

After Animated clicks and Dynamic Progress Bars, Chop Wood V.03 is available

Chop Wood v.03

You can now play Chop Wood V.03 Click here

One thing that is surprising me about learning to code is the joy you get from it. Yes you do spend your days gnawing on trying to understand a concept and then getting it to work. But when it does work, wow it’s a real hit.

Doing this makes me feel like a kid again it’s very liberating.

So I have figured out how to animate an object when clicked, I used Animate.css and it’s pretty easy to do. Add a bit of javascript to it to give the best user experience and work it into a clicked object which already impacts variables, a little thought required but not much.

I know I can animate in vanilla Javascript now, but I want to keep the project forward, so may come back to that.

Progress Bars, or rather dynamic progress bars. I wanted a click on an object to trigger a progress bar which filled to 100% over a period of time, and then changed another variable when it was finished. I also want to add more animation to this.

This took all day, most of the progress bar tutorials are for Jquery, which goes against the ethos of this project being coded as much as possible in vanilla Javascript.

I finally got the progress bars to do what I want, this was down to experimenting and using the knowledge learned over the past few months to make educated guesses.

It became a game of fitting two big chunks of jigsaw pieces to complete a bigger part of the picture.

My understanding of the concept of functions has gone up a notch and am now able to understand complex nested functions and loops.

It doesn’t feel as hard as it did and I now know things I didn’t use to know. which seems like voodoo, it’s so long since I learned something on this scale.

I feel the game of Chop Wood is now starting to reveal itself. Of course it will always be pretty simple, but I want to get it to the point where someone decides to play it and gives the minimum of 5 minutes of their life.

Yes the front end and UX is awful, merely to allow me to see the back end function, but that will improve.

Very interested to get local storage as an option and then to login and save your game to Firebase.

From a gameplay POV I want to bring in mining and the ability to search and mine a map. Even owning parts.

You can probably tell, but I am absolutely loving doing this.

Problem solved on chop wood with Object Literals

Chop wood game icons

My first ever attempt at creating my own app from scrap was Chop Wood, which I can now call, Chop Wood, v.0.1

It didn’t work, I couldn’t think how to create a variable which could be accessed by numerous functions whilst keep a true account of itself.

The solution now seems so easy I am slightly embarrassed but still proud of my first creation.

Using object literals I have solved the issue with scope and keeping proper track of the values of the variables. Although I am still not clear about values and references of variables. Let and const are one ways this is defined, I have read a number of articles on the subject but the concepts have not yet clicked.

Progress with my learning has been made.

I have realised it’s very hard, in the sense that when you try to understand something and can’t, it feels you can never understand the thing. But you have to keep moving forward and that is the hard bit, it’s the recognition that despair and running to stand still are perfectly normal feelings to have and do not mean you are not getting anywhere.

Which is weird, because normally if you try to go somewhere and don’t, you go another route.

So now I can unveil Chop Wood v.02

It now does everything I wanted it to.
Now I have to add more features and build out the mechanics.
My inspirations is obviously all those crafting games which are played, I find the gathering, crafting, building mechanics very interesting. As well as an in-game economy.

Long way to go yet, my time line is I would have something to put on the app store in three months. In the meantime I will have learn a lot.

Go check out Chop Wood v0.2 and share thoughts.

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.