“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?

What would the biggest crafting game in the World look like?

Big complex games

Part of dealing with life is to gamify it.

There are a lot of people a lot brainier than myself who have written thousands of words on the matter of why we play games. One theory is it provides a sand pit where we can test out ideas and work through things with less of an impact on our real lives or RL as gamers like to call it.

Gamification is a useful tool for many different reasons, which we wont go into here as such a subject is easily found in great depth on the Web.

A crafting game has the potential to introduce complex systems which need to be thought out and creatively deployed for maximum results. Why do people watch football games when the outcome has no actual impact on their lives apart from social and emotional. Why do people collect trains, or bird watch or play chess.

A social argument can be made, “it’s a great way to meet people”, or “it’s great for business”. But if known to be using it for simplistic, social gain, any community will soon have you labeled and out goes the social benefit.

Those who love to play a game are much more likely to earn “extra benefits”, such as increased social network or the ability to make millions of Dollars video streaming game play.

To love a game it has to have specific aspects personal to the gamer. This makes whether a game is good or bad entirely relative to the needs of the gamer.

By developing a game that is addresses the specific needs of a particular type of game it is possible to create a game that people will love. Albeit a finite amount of people who find such a thing engaging.

To develop a game which people will love it helps that the developer loves it too. And thus it is with Chop Wood. I love a game that is all about crafting, something about research, development and building in a game context has always attracted me. And if you take a look at some of the games on offer in app stores, it engages people too.

To develop a great game it has to have some aspect which is unique. The “biggest” is often use as a way of differentiating a game from competitors. So what would the biggest crafting game in the World look like?

You could argue “real life”, is the biggest game we can play. But we are creating worlds where, this is what game developers do. We are creating a world where we define the goals, consequences and everything else. This is where the creativity comes in.

Would biggest be about the different types of stuff you could gather, learn, craft. It could be quite simple in game play but having a depth which created a complexity, a puzzle to solve.

Factorio does this very well, enabling simple concepts to be deployed to build an extremely complex world.

Minecraft also gives that ability to allow the user to create complexity whilst providing basic tools, resources and actions.

Eve has incredible complexity and size due to the way stuff can be put together to make more stuff to do specific actions.

The biggest game doesn’t necessarily have the largest amount of stuff, but allows you to build an utterly massive and complex world.

I mused with the idea of making Chop Wood the most massive crafting game ever, where you could build the most different types of stuff.

But to what point?

Amount of stuff doesn’t always create complexity and depth, but it can help. It’s more what direction the stuff can take you and it could be argued the limits of that type of game has already been touched upon.

Another direction to go is a multi-user component, the simplest of games can become massive if enough people are playing. Chop Wood is designed from the ground up to allow interaction with other players for trade and communication, although my technical skills are a long way from making that happen right now.

In conclusion:
Benefit of size is not just about the amount of stuff you can gather or even the amount of stuff you can craft or build, but about the depth and complexity you can develop using the basic stuff of the game.

What is the game Chop Wood?

Do you respect wood?

Chop Wood is a crafting game written in vanilla Javascript, using the Bootstrap 4 framework.
Providing game-play based on gathering, building, crafting and follows the best practices of such types of game. The aim is to make a fun game, but fun to a specific type of person who is into such games.

It has an open ended structure to allow the game to have multiple options during development. Meaning we could get a little crazy and offer a “hire a cat to dance whilst you chop wood”, option. Probably wont, but it’s nice to have that option.

Although the game will be published in its own right, I am using development of the game to teach myself Javascript coding and to be wise in a number of HTML5 frameworks. This is why the game initially is extremely basic and first, but will increase in complexity as more updates happen.

I hope you enjoy following me on this journey, there will be failures and disasters on the way, but also success and the opportunity to learn from my mistakes. So pass the popcorn and hope I can add a little fun to your day.

Chop Wood, Version updates.

Version updates for Chop Wood:
Latest version

This will now be the page where updates are published in consecutive format.
Updated 29th May 2018

To do:

  • Workers to be able to be hired to automate bulk actions.
  • Bootstrap 4 modals investigate, design for the game
  • Add progress bar for each object action with slight time delay
  • Replenish seeds with each tree chopping to issue random number of seeds, number to be determined with regards to balance.
  • Replicate object tree with mining and farming
  • Skill based system where a skill is increased each time an object is actions, this skill will open up further action and increase the amount and quality of resource gathering and building.
  • Ability to purchase land, which regularly produces resources passively.

Version 0.07

  • Worker button added, with a worker selection, not yet fully fleshed out with worker attributes.

Version 0.06

  • Dynamic progress bar added to trees, logs, timber and planks. Need to correct this function to allow only one item to be actioned at a time.
  • Forest skills added, these will be spent to progress to farming and mining.
  • Modals added to some actions, however needs to be modified to bring them in line with Bootstrap’s 4 syntax.
  • Jquery added to aid Bootstrap 4’s framework, everything else still in vanilla Javascript

Version 0.05

  • Forestry skills added: This is a skill which increases each time you work on wood
  • A buy seeds button added, currently it’s 2 credits for one seed.
  • Facebook page for Chop Wood set up
  • Persistent game link added so the url does not move around, will now always be https://www.lyndonantcliff.com/forest-mood/chop-wood.html

Note: After researching Local Storage option further, decided not to go with it, but to use it in another app as this app does not need it. Plus it has certain restrictions and security issues. For a persistent game it will go straight to a JSON based dbase, probably a cloud based solution such as Firebase.

Version 0.04

  • Modal introduced to replace alert box for when seeds reduced to 0.
  • Due to modal being designed in vanilla CSS and the game running on a Bootstrap 4 framework, the design of the modal needs optimising.
  • Bootstrap 4 element added to the seed progress bar, visual improvement.

Version 0.03

  • Animation to object icons added with animate.css. Slight bounce onClick.
  • Add seed button added, increases number of trees grow
  • Progress bar added to simulate time taken to plant seed and growth of tree.

Version 0.03

  • Issue with variables of objects updating on a global scope after updates within functions. Solved with the introduction of of object literals. This forms the basis of when the data will be held in a JSON format.

Version 0.02

  • Introduction of click on element and the amount increases
  • Bootstrap 4 css framework introduced

Version 0.01

  • Basic game mapped out, chop trees, trees into logs, logs into timber, timber into planks. Everything open ended to enable further growth.
  • Main aim of game is to learn Javascript and a CSS framework.

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.