Practicing and improving coding skills

I try to keep in good programming shape same as keeping your body in shape, by working it out. And just like exercising your body, the more you exercise your programming skills – which in itself isn’t that much removed as it is also a psychosomatic experience more towards the neural range – the better you get and find higher nuances and abilities which seem to appear out of nowhere. The inverse is true, you stop and results slowly deteriorate.

So to that end these are the main things I proactively try to do daily:

* This is a really really good course that dives beneath surface to examine the innards of the engine and how it feeds through to the idiosyncrasies of the language to exploring a library, building your own to ES6. First few sections are more theory laden and even after that you’ll need to follow along in an ide and repeat to keep pace and retain (you’ve been forewarned). Also I bought the course as part of another deal and not on Udemy but it’s the same author and seems to be same content.

** Only recently joined the group and members are relatively intermediate to superbly skilled in various functional languages. JavaScript doesn’t seem to be a popular one but I tend to stick to it :).

Now just want to touch upon why each of these types is relevant and how their synergies would yield better returns to learning and improving.

Website based Algorithm practice

This is crucial as most sites offer a varied mix of questions to try and solve. They also include tests which check various inputs to verify if the solution you passed it is actually valid. Downsides include that most of these are in browser and you miss the setting up and growing (head wrecking) potential of setting up project structure yourself. Another point is that unless if you know how to debug your own code or use browser tools you’re often left to the mercy of the sites test suites to verify your code – which might actually be right sometimes but a glitch or something might not let you pass.

Beyond the basics JavaScript lessons

One of the key issues with tutorials online is that they often tend to be geared towards the beginner and then go off explaining the basics ad nauseum then whatever tangential exposure the author(s) feels relevant. These are crucial in the beginning but however might be lacking in actual real world uses or scenarios – especially when it comes to higher level language function and usage.

Higher level courses like these are imperative for moving beyond a certain level where you might find yourself stagnating. This could be perennial beginner (moving on from one intro to another), tutorial collector (similar to the first one but often more project based work). So this would improve your semantic programming capabilities by improving your syntactic knowledge and structural paradigm.

Caveat, unless an ample process and repeated practice is used this will tend to fall into the tutorial ghosting syndrome (you pass through it or vice versa without hardly any residue). The onus is on ourselves to absorb the content and try elevate our own skills and by using it at higher levels of difficulty.

Meetups for programming

This is a great way to not only learn how to program but to network and meet people who not only share the same interests as you, but would have vastly different and varied experiences and skills.

The one I joined has a particular emphasis on meeting and splitting off into pairs and solving a programming challenge in an hour. Along with hearing about, being exposed to new languages or paradigms, you actually might start using a new language or an approach which otherwise you would never have come across. And the time constraint enables you to realise how to structure your approach and tooling for most challenges and gauge your own efficiency or lack thereof.

Of course to everything there is a downside. Often in the form of social settings or maybe not having as much skill as you’d like (or thinking that you don’t which is worse) to not being able to  physically make it to the meeting. But suffice to say the group I have is very welcoming, and although I was totally out of my comfort zone, programmatically, it gave me, in a very short session, areas to focus on to improve or learn further.

So this is my primary tact to practicing and improving, Let me know in the comments how you go about structuring your daily-weekly programming life. Keep on coding.

 

AngularJS To do App – Part IV

Following from the previous entry, there was just one feature remaining for the rudimentary functionalities of our app:

  • Check of an item

I added an input checkbox to the ngRepeat construct. And after some fumbling around and going through some forums + angularjs developer documentation, I managed to apply a simple class styling to the item in the list when the checkbox is checked.

// Class applied when model ticked is true
<input type="checkbox" name="tickbox" ng-model="ticked" />
<span ng-class="{'checked': ticked}"> {{ item }} </span>

// CSS style that's applied
.checked {
text-decoration:line-through;
color: gainsboro;
}

This accomplishes a somewhat crude implementation of a To Do list item being checked off. However, the styling seems to fall through to the next item when a checked item is deleted. Also a checked item should preferably be locked from being edited.

So that still needs to be worked on and possibly some extra refactoring of the code in terms of button states as extra conditions required to prevent the fall through will only add to the growing list of conditions on some of the buttons already:

<button type="submit" ng-show="updateShow" ng-click="update($index, editedItem); updateShow= false; showEditInput = false; editShow = true;">Update</button>

Apart from that some aesthetic tweaks to the design and form is warranted. So stay tuned and check out the latest:

App – To Do | Commit

AngularJS To do App – Part III

So out of the remaining features, what should I pick next to work on, hmm let me see. Edit an item, sure why not. Why not indeed.

  • Check of an item
  • Edit an item
  • Delete an item

It turned out more difficult than I had (not) anticipated. Not the most crucial feature but sure. Thought it would take a few days to figure out and slow down development as I couldn’t find much of a guide from scouring through a book or two and several forums.

Thought there might be some directive floating around I could use (didn’t find anything remotely close). Then I tried to do a simple update the array item in place technique.

But therein lay the difficulty as threading it through AngularJS wasn’t easy going. I cycled through a few ways to do it. Some of it involved  a straight ngClick using the $index as a parameter which would try and update the array item based on that index.

That didn’t work as the button I wired up to do the ‘in place’ editing simply cleared the value already present and just left the input field and buttons showing:

$scope.update = function(index){
  $scope.items[index] = $scope.item;
}

Or something along those lines as I’d changed code and banged my head so many times I can’t quite remember.

It did work eventually by recreating the first pattern I had for adding an item into the list – I needed to create a new model on the fly using ngModel and then passing the $index and that model to the function call within the controller code. Still peculiar how I couldn’t get it to work by referring to the newly created model from the $scope variable.

In hindsight the solution I came up with is very very simple and it works. The condition updating to show/hide buttons for editing purposes is verbose. Hopefully find a more succinct system or pattern online later for refactoring but for now it does the trick.

So now just one primary function left to complete to call it a mvp

  • Check of an item

For now here’s the updated demo To Do App & the latest commit.

AngularJS To do App – Part III

So continuing on and upwards, what every To do list should have, in no particular order are the following:

  • Check of an item
  • Edit an item
  • Delete an item

Incidentally the first thing that came to mind was the delete function (only when I had that did the rest occur, which arguably are more important features).

I somewhat implemented deleting by including a  button with a ngClick directive within the ngRepeat directive:

$scope.del = function() { $scope.items.pop(); }
<ul ng-repeat="items in items track by $index">
<li>{{ item }} <button type="submit" ng-click="del()">X</button></li>
</ul>

Sure, it should only affect the item it is (magically) tied to heh, heh… no. Pop didn’t go the weasel as it removes an array item from the end. And any other array method I’d come across didn’t seem to be able to remove items unless at the start or end. However, in that same post I had linked to ECMA-262 (Standards Document) which is the comprehensive language specification guide for ECMAScript, or JavaScript as its known as when not protecting Gotham city. That had fairly detailed (verbose) items about array methods – in particular Array.prototype.splice. I thought it was like slice but it seems similar to what a delete function should do:

Array.prototype.splice (start, deleteCount, ...items )
Note:  When the splice method is called with two or more arguments, start, 
deleteCount and zero or more items, the deleteCount elements of the array 
starting at integer index start are replaced by the arguments items. 
An Array object containing the deleted elements (if any) is returned.

Sounds about right, except I don’t want to want to replace anything with something else, nor return the deleted item. The language specification document is not the most user friendliest nor have any usable examples, but there’s tons of other information available on splice online.

W3schools.com states that the splice method adds AND removes items (holy utility belt stuffer Batman). Also it clearly states that second and third parameters are optional.

So our delete function is pretty similar to the add function:

$scope.del = function(index) { // parameter for index
  // start at index required and delete one item, which is itself
  $scope.items.splice(index, 1);
}

So in our HTML, we just need to just latch onto current index position of the item to which the delete button (with the ngClick directive which is iteratively assigned by ngRepeat) is attached.

Being the cool cat I am, I intuitively (counter it seems in hindsight) just threw in ‘this’ into the delete function as a parameter

...ng-click="del(this)">...

Because this is all powerful, this is better than that (except when you assign this to that). I should’ve known better than that – what I did was a total party foul, which I won’t get into at this moment. At that stage the list item was being removed from the top, like shift() would. The proper solution, it turns out, was staring at me all along.

I ran into the issue of not being able to create more than one item in the list, mentioned in the previous post, because AngularJS doesn’t like duplicates in the ngRepeat directive. The fix was add ‘track by $index’ – which assigns, and I quote, “each list item a key by virtue of its index…”

So now each added item has its own delete button which only applies to that item.

All the updates can be seen in the latest commit.
Updated functionality can be seen on the associated github page ‘ToDo’. (might need to do a hard refresh to get the latest working example).

More on the other features coming shortly…

ps I renamed my html file from ‘todo.html’ to ‘index.html’ which shows up in github diff as two different pages.

AngularJS To do App – Part II

When we last left, our intrepid developer in the making, he had had completed the shell and basic setup of his AngularJS app. Lets see what he’s upto this week…

The To do list has so far taken shape and the basic structure and logic was coded. However adding an item presented two issues:

  1.  We couldn’t add more than one item
  2.  The added item was bound to the new input field

Issue ‘1’ turned out to be Angular pointing out that the ngRepeat directive does not allow duplicates – the message could be seen in the console.

Angular error: Duplicates in repeater are not allowed.

This happens when there are duplicate keys in an ngRepeat expression. Also not having any key implies all items have the same key – food for thought. The resolution is adding  ‘track by $index’ to the ngRepeat attribute value

ng-repeat="item in item track by $index"

This assigns each list item a key by virtue of its index where there is no explicit key defined. This fixes issue ‘1’ and more items can be added to the model, however all of those added items are all bound together and in turn to the input box. So every time the value is updated, all instances are updated as well. [see commit]

After scouring the interwebs for a bit and running through a few related but not similar issues on stackoverflow and old old tutorials, I tried a few things

  • Changing the array of objects to just an array of strings [not much different but when you’re going crazy and it’s nearly bed time might as well]
  • Tried using different versions of angular [static library was used, an old version 1.2.16, then the latest and something in between]

Finally what worked was not passing in the new object created using the ngModel directive as a parameter in the ngClick directive on the button and then getting the object from the $scope directly within the add function call.

Before:

<input type=text ng-model=new.name/>
<button type=submit ng-click=add(new)>Add</button>$scope.add = function(item){
$scope.items.push(item);
…}

After:

<input type=text ng-model=new/>
<button type=submit ng-click=add()>Add</button>$scope.add = function(){
$scope.items.push($scope.new);
…}

Not entirely certain why it was fixed, but assuming that somehow accessing the object from the $scope ensures that each one is separate from the others and doesn’t end up being tied to the same instance as before.

For now it’s doing another aspect of what we intended to do – adding items to the list correctly without duplication.

I’ve pushed the changes [see commit] and added a github page to see it in action – To Do App

 

AngularJS To do App – Part I

So as outlined in my previous post AngularJS Single Page Application (SPA), I’ve started working on the bare bones (first commit) of the To do list app – so little that a Hello World tutorial would have had more moving parts [Zing].

I’ve started fleshing out the AngularJS aspects, particularly the module, controller and associated data holder (an array) and a function to add to that array (fingers crossed).

So far it’s not working. I pre-populated the array with an object literal containing a ‘Sample Item’ value in the hopes that it will render in the expression statement {{ }}. But nada. Some things I thought was the cause:

  • I’d placed all of the script tags at the bottom of the HTML page, so it would load only after the DOM was rendered. [moved it up]
  • I’d referred to the angular.js file in script tags and within those tags placed all the code. [moved the code to its own script tag]

So still trying to figure out why AngularJS isn’t initializing.

[UPDATE] Ok so turns out I missed the ngApp directive, woops¯\_(ツ)_/¯, which meant that it was just a plain old HTML file with odd little tags which mean nothing and displayed the double curlies as just content – {{ item.name }}.

With that done, I was able to get the array with the pre-populated object literal to appear and and… the ability to add a new item (One of the most main functions on a to do list). Unfortunately, the new input box is bound to the previously added item – it updates when you type in another item and can’t seem to add anything further.

Check out the code [ commit ] until now and stay tuned as I go scratch my head some.

AngularJS Single Page Application (SPA)

So for my next quest, I’ve decided to go with a Single Page Application for the following reasons:

  • To start exploring JavaScript frameworks
  • Get some much needed interactivity on screen
  • Increase the complexity of the projects I am going after to move out of my comfort zone

I’ve decided to test the water with AngularJS. Why you might be asking? Well the previous mini project I completed was using PHP, and to further build on that language I chanced upon a course on pluralsight Building a Site with AngularJS and PHP. Since tacit conditions mean I can’t write about non JavaScript related builds, it made sense to do a crossover. Granted, I doubt I will be using a PHP/AngularJS combo for what entails.

The pluralsight tutorial was interesting but the nature of tutorial videos and instructor bias of students understanding and assimilating information at the same level as they proffer the instructions, means that certain aspects would be glossed over with the student being none the wiser.

So, in keeping with the familiar thread throughout my journey, one of the best ways to learn is to attempt to build something yourself. And after much head scratching the best thing I could think of doing was a simple to do list. Yes partly because I have been drawing blanks and the fact of using something I have almost no clue about is daunting to say the least. Also this is a priming exercise to test the waters, so something overly complex isn’t the end goal.

So I shall start with the minimal of outlays and setups and progress from there as usual. Check out my ‘awesome’ concept sketch. Mind blowingly simple.

To do list concept sketch

Caveat: AngularJS is the first version that was released with Angular 2 onwards being a complete rewrite of the framework. So pursuing AngularJS is pure curiousity and what’s transferable to learning Angular2+ (currently Angular6 beta) might only be an exercise in comparative analysis.

What’s this? Second Anniversary for JavaScript: ‘Unscripted’

It seems the the world has gone around the sun completely once again. And this happens to be the two year mark for JavaScript: ‘Unscripted’.

A lot has happened since last year. The last few months were pretty hectic in more ways than one, which meant not a lot of work could be done on this blog. Just finished up a simple weather app today but since it was done in PHP (shh, not so loud) a write up didn’t happen here. See the app in action here weatherGetter [simple app, simpler name see git repo if you’re so inclined].

But all is not lost, it’s all part of the plane. One of which is to iterate on the design/functionality of this blog, which, surprise surprise, is built on PHP. Another facet of that is launching a sub-site which will focus on all matters which are not specifically JavaScript.

So here’s to another great year which will:

  • Push harder on the route to JavaScript mastery
  • Added focus on loftier goals such as design patterns, frameworks etcetera
  • More entries on learning styles, techniques and tips
  • More complex apps
  • And much more…

So stay tuned and have a great year.

 

Hoisting in JavaScript

Everyone’s heard the all too familiar, JavaScript is an interpreted language spiel. That’s only partly true. Certain instances  can catch unwary developers out about this idiosyncratic run-time behaviour.

When a JavaScript engine parses a code file, a global execution environment called the execution context is created. This occurs before the file is executed where functions, variables etcetera are ‘hoisted’ into memory. Think of this as instantiation in other languages.

Hoisting is what allows function calls, which occur before the function definition, to run without throwing an error – as the entire function will be hoisted to memory.

This causes issues where function expressions are used. Function expressions are anonymous functions which are assigned to a variable as opposed to a function statement:

// Function Statement
function doSomething(){
   console.log("something done");
}

// Calling 
functionHolder();

// Function Expression
var functionHolder = function() {
   console.log("doing something else");
}

In this case the variable functionHolder will be hoisted into memory, however it will be ‘undefined’ until the interpreter reaches the actual line where the anonymous function is assigned. At this instance a function object is created and assigned to the variable functionHolder.

For more details about functions expressions, see:
the official description on MDN
JavaScript functions
JavaScript callback functions

JSON and JavaScript Objects

JavaScript Object Notation (JSON) is the lightweight alternative to tag laden XML used as data exchange format. What it is, precisely, is a method of data transmission based on JavaScript’s object literal syntax.

JavaScript objects are containers which store key value pairs of attributes, functions and other objects of the following appearance:

var anObject = {
 firstProperty: 'someString',
 secondProperty: 111,
 aFunc: (parameter) {
         // some code
     };
 isJSON: false
}

JSON follows the same exact pattern:

{
  "firstProp": "someString",
  "secondProp": 222,
  "isJSON": true
}

Few items of note that distinguish between JSON and plain old JavaScript objects:

  • JSON requires that properties by enclosed in quotes, while JS Objects can do it either way.
  • JSON only contains key value pairs, no functions

Back and forth

Although not part of the language, its ubiquity means that JavaScript has helper methods to handle JSON. Most common function is to convert from an object literal to JSON and vice versa:

///////////////////////////////
// Object literal to JSON
///////////////////////////////
var myObject = {
   firstProp: "someString",
   secondProp: 222
}

var JSONresult = JSON.stringify(myObject); 
// Result
//  {"firstProp": "someString", "secondProp": 222 }

///////////////////////////////
// JSON to Object literal 
///////////////////////////////
JSON.parse(JSONResult);
// result
// { firstProp: "someString", secondProp: 222 }

So although similar, JS objects and JSON are not the same. In essence JS objects is how you might be normally at home, relaxed and casual versus while JSON is like being in public with more formalised rules.