Author Archives: donyd

ScrollMagic – Pinning Tutorial

So I didn’t quite start on what I had previously said I would – rebuliding one of my first apps ‘Luas App‘ using React.js. Instead I got sidetracked by my many a feathered, tutorial hell and tumult of life. I did however been meandering through various endeavours in the social media space focused on coding. First being my latent programming youtube channel

And the other being my new instagram page (channel, space?):

So in the midst of all that, I came across yearly periodical “The Ultimate JavaScript Manual 2019.”

Some interesting reads, good for getting to see what’s what from the who’s who on web development – I think. Apart from the tooling section, the frameworks and examples aren’t my cup of tea. You still fall into the tutorial trap.

One that I picked was Scrolling animations using ScrollMagic. Looking back at the article, I HIGHLY doubt I did the tutorial mentioned. Instead I just made a quick tutorial video while I was trying to pick apart the items they had mentioned and trying it out on my own.

These are the key points:

  • ScrollMagic works on the concept of controllers and scenes.
  • Controllers set the stage for the animation objects and global settings of any contained scenes.
  • Scenes define the settings for the item being referenced e.g. a floating indicator, or navigation bar that needs to be pinned to the viewport.
  • Once the scene is set, it is passed onto the controller to take effect.

I only used jQuery and the ScrollMagic library and plugins – the latter two is shown when you first visit the ScrollMagic site.

For the setup and walkthrough, check out my video tutorial:

I’m hoping to get back into ScrollMagic animations soon and do some more explorations and tutorials. So stay tuned. Until then, adios.

My Path to learning JavaScript: The story so far…

It’s been a lean period for this blog and plans to add extra sections and improve the design has been pushed to the back – way back. So in the meanwhile I thought I’d reflect on the path that I’d taken on learning JavaScript:

Often the road(s) taken to learning something is usually clear cut, unless if you happen to undertaking becoming a programmers (aka developer, coder, coffee conversion engine). Even with a particular language or technology stack that is not often quite as linear as one would hope.

In this case I want to focus on just a language, which happens to be the main topic of this blog (how dare I). So usually, people tend to become what they are either through planned coincidence – studying to be become a software engineer – or through some other non traditional ways.

I want to elucidate on how I have approached JavaScript as in the steps, tools and systems which have helped me – as far as I can remember and any pitfalls or fog of war that I may have encountered. So these are what I can retroactively recall –

Codeacademy

This is probably the earliest one where I started learning JavaScript. Most of you might be familiar with this – an in browser tutorial which walks you through the fundamentals, syntax and usage of JavaScript. It has a host of other languages and used to be completely free; currently offers a mix of free and paid PRO courses which lets you gain verifiable skills in a particular category.

My experience

I have had completed the full web dev fundamentals i.e HTML, CSS, JavaScript. But after the first run came out feeling like I’d gained or retained nada after it was done. I’m pretty sure most people do.

Fog of war anecdotes

One complaint I hear from beginners is how they tutorial, book, site etc they are using has come to an end and most inarguably feel like they’ve not learned anything. This is the experience of most, usually ones who’ve not had previous exposure to programming or similar… er, experience. It is normal, you can’t and shouldn’t expect to grasp something, let alone master it, after just one pass. Most of the pratice was having to complete a few lines of code with the rest being auto generated or copied from previous lessons.

Take away

What this should be is a primer, nothing more than an introduction to the topic. Browser based systems are great for on the go, quick stab at a tutorial or solving a few algorithms, but for the most part, everything is setup for you – the environment, files etcetera.
You aren’t going to be able to retain much where you only altered or added very little in terms of new content or ideas. But don’t downplay it, it’s meant to be an easier way for beginners to get used to the terminology and ways. Use it for what it is.

JavaScript in 24 hours

I’m pretty certain I’ve used SAM’s 24 hour series, at this point can’t remember if it was Java or JavaScript, pretty sure it’s JS. Either way, the outcome was I didn’t stick to it, wasn’t motivated, wasn’t appealing not sure what it was. It was the book’s fault, yeah that’s what it was ūüėČ

My experience

Having had no prior proper experience to learning programming or computer science, I think I might’ve just glossed over it and couldn’t maintain the enthusiasm for this tome. Mind you this was back when there weren’t all the cool frameworks, ide’s, udpates to JavaScript, heck don’t even Node was barely even released yet. Mind you it wasn’t the wild unruly west of JavaScript days, but it wasn’t where it is now

Fog of war anecdotes

There was nothing but fog of war with very low visibility in all directions and the radius of view very small.

Takeaway

Often times you will come across books and material which aren’t exactly great and would have grandiose titles such as learning something in 24 hours – the print version of click bait. But it serves to remind that this is the nature of the landscape. I can’t definitely say if this book is good or not as I haven’t gone past probably the first half of chapter one so you’re intrepertation might vary.

One skill you need, apart from being able to learn to shorten the time to learn and absorb new things, is that you will inarguably also have to separate the wheat from the chaff.

Microsoft JavaScript book

Now this is probably the first one that I came across that had substance. It seemed content heavy but did delve into aspects and nuances of the language which would lead to more than just a superficial glance.

My experience

The step by step nature, as the title suggests, does walk you through not only the explanation but also practical demonstrations which helped to see what each concept was referring to.

Fog of war anecdotes

As a standalone take on a language, that is a much misunderstood as¬† reviled, this was starting to lay down solid foundations for future development, pun intended. Atleast I was able to see what JavaScript was at this point as opposed to the all previous attempts and stil coming away thinking the JavaScript was just an ephemeral, ethereal notion which I still couldn’t even manage to get a tenuous grasp on.

Takeaway

Regardless of what my previous experiences were and having only made miniscule advances and understanding from this book, it is key to note that only through persistence and repeated effort can one sometimes understand something, let alone master it. In terms of a free floating language as JavaScript this is more so.

 

Free Code Camp

If codeacademy was the drive down to the nearest village to get supplies, this is the trip up to the basestation of K2 to get started.

My experience

A very noble effort to not only instill the basics but also almost all concepts and theories that would be required to become a full stack developer.

Fog of war anecdotes

This site has given the best in terms of the lay of the land. The Curriculum section showcases the entire journey, broken down by sections and a rough estimate of the amount of time taken to complete them. Each section builds upon the previous one and has a very good section on JavaScript and Algorithms. A highly valuable resource for learning and practicing.

Takeaway

This site also suffers from the “I’ve completed it yet don’t know what to do next or remember next to naught” syndrome. The caveat is as usual with¬† code along sites – everything is setup for you and you might only be required to change or update certain parts.

There are projects at the end of each, some of which might seem insurmountable to those with very little experience or problem solving aptitude/attitude.

The algorithms challenge is strictly solve it yourself and has taken me atleast two iterations to be able to actually be self assured to be able to approach and solve them. The very first time I broken through 4-5 and then was stuck beyong relief. The next time I came back I was able to more easily break down, assess and try and solve it. Words of wisdom – console.log is your friend, for anything you think is happening, usually it’s not.

There was an issue of content updates inbetween sessions – usually for the slower of us who take several weeks, if not months, to accomplish each section as opposed to those who just seem to be able to complete it anywhere from 3-6 months, while also taking care of a business, children, side taco truck business, enrolled in med school, computer science undergrad, painting and this site.

So the problem was you would either have to go back to complete the newly added bits (for those of us who hate having an unticked box in the midst of other ticked boxes). Or there would be a complete revamp of the site (atleast 2 that I can remember) or even a completely different beta site which seems more coherent and worthwhile. End result being you switch and completely ignore the one you started. At this point in time I have probably restarted, from scratch, atleast 3 times (including projects) and one attempt at beta which seems to have been locked down so had to come back to the original. Ending ramble now.

JavaScript: Understanding the weird parts

This is one worthwhile course lesson which ‘takes a look under the hood’ of JavaScript. This isn’t a primer, but shouldn’t be considered so advanced that a novice can’t understand it. It focuses on concepts such as closures, dynamic typing, prototypal inheritance with brief primer to ES6 and finally ending in creating your own javascript framework.

My experience

Certain aspects will aid immensely in how you start programming or handling tasks, but that is in comparsion to practice you’ve been putting in. The content of this subject to the same as¬† all others, you can’t just breeze through – consistent practice and repeptition is needed.

You will need to take notes, try out the topics mentioned and revisit to reinforce the concepts mentioned here – I actually blog about topics to get my head around them and as references later on [1, 2, 3]. Especially when it comes to topics such as bind(), apply() etc which you might not readily see their utility or how you might incorporate into your repertoire, especially if you’ve never programmed at this level before.

Fog of war anecdotes

In terms of fog of war, this one would seem to shrink whatever increases in sight you have gained as the topics mentioned might not seem entirely relevant to whatever you might have encountered so far. But that’s just misleading as you’ve not yet experienced such advanced usages and capabilities. So the myopia you experience is only because you have levelled up and into an expanded realm where your latent abilities seem lacking in comparison.

Takeaway

Prior to learning all the fancy frameworks or even JavaScript on the server, i.e. Node.js, this is one very crucial area of the language that needs to be learned. I’m somewhat surprised that this isn’t mandatory part of learning JavaScript. Taking this, or similar courses, which delve deeper into how JavaScript functions from the perspective of its engine will serve well into any application of JavaScript.

Conclusion

This is just choice parts of my journey in learning JavaScript. There are various others that I plan on taking and will need to take, but hopefully this can serve in some way to guide others who might be starting their journey or stuck at particular stages or frames of mind.

By being consistent and journey through, even though where you are right now doesn’t make much sense what needs to be done and where to go will get clearer.

“One does not accumulate but eliminate. It is not daily increase but daily decrease. The height of cultivation always run to simplicity.”¬† Bruce Lee.

JavaScript: remove leading and trailing spaces

Ramble Preamble

Hot on the heels of finishing off one of my non-JavaScript mini projects – the reason why there’s a lull of late on this blog – I’d come to the weary conclusion that somethings you just need JavaScript for. The project in question is a web port of a simple csv convertor desktop app built with python and tkinter.

The web version was done using flask – a python based micro web framework. Most of the logic required was done with the desktop version, which was just simply transferred to the server side code and worked without a hitch. The snag was that the user input had to be sent via a HTTP POST message that would be picked up by the flask routing system, processed and then sent back, not ideal in of itself but stuck with it as I couldn’t find any alternative. The problem was that the post message had a size limit and thereby dropped anything over 1567 rows…

…what can be done in the browser should be done in the browser.

Enter the JavaScript

Realisation slowly dawned that JavaScript is needed, as what can be done in the browser should be done in the browser. Everything was fine until I found out that JavaScript was limited in terms of being able to trim leading or trailing spaces, or so I thought.

A quick search of something similar to Python’s lstrip or rstrip brings up several articles which talk about either using the trim() function introduced with ES5 (ECMAScript 5), extending it using the prototype chain or, prior to that, just crafting your own function using regex expressions.

It just so happens that there are native functions built in that accomplish what I need –

String.trimStart() – Remove trailing spaces from the start

String.trimEnd() – Remove trailing spaces from the end

It’s great for removing any and all trailing white space, including new lines which was causing¬† trouble with my output. However, unlike their counterparts in Python, these functions do not allow passing any character inputs as filters. For e.g. in python, specific characters such as trailing commas or formatting tags like carriage returns or new lines can be passed for removal

Convert to CSV

In my case my code would append a space followed by a comma ” ,” to the end of each row input. This presents a trailing comma which the Python rstrip would take care of in one swoop, of the fell kind. However, thanks to finding the trimEnd() method, the solution that presents itself is very simple if not crude. Come of think of it, I could have easily solved the problem of trailing space with just the trim() function. Anyway here’s the sols:

After having to troubleshoot why my slice wasn’t working as it should – there was still trailing white space – I came to the sobering relisation that the split function does in fact split everything into a new comma separated list (doh). Anyway the extra formatting on line 10, as it was renamed to later on, does exactly that now, but wasn’t needed. Ah well, hindsight is 1 they say…which is what I calculated 20/20 to be – true.

So here’s to polishing off this project with just the bare minimum functionality for the moment, which is convert to CSV.

Quick Update

It’s been nearly 4 months since I’ve last blogged. Partly because I’d been spread thin by flinging myself into project or two that weren’t my own, trying to get to grips with intermediate computing topics as well as the pangs and doldrums of life.

I’ve been trying to set up a framework to ensure everything is tracked, to ensure that all projects that have started and will start, as well as lofty visions, scheming and goals will have a centralized, easy to manage repository from where progress can be tracked, left off and picked up at a later stage and not just have become a swirl of ephemeral brain static and shorts.

Besides that, working on non JavaScript based systems means that whatever I’ve been working on was by default in exclusion of this blog. All of that will be rectified shortly as I hope to create a sub-site for this blog which will encompass all non JavaScript based topics and musings. Also more focused learning paths and more lucid and pragmatic transcribing of those efforts coming soon. Till then, stay classy.red-and-black-typewriter

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