Tag Archives: HTML5

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.

HTML5 enhancements

Now it’s been some time since HTML5 came on the scene. It’s shiny new glean has been replaced with a well worn veneration and stability.

Although it’s made some marked improvements over its predecessors in terms of not requiring laboured attributes or overly strict syntax, one of its tenets means a certain level of backward compatibility still exists. And owing to the certain habits or strict requirements in the past, some developers simply would’ve stuck to those habits or not realised that with the latest iteration, that some items were no longer needed. This lists the obvious, and not so obvious items.

DOCTYPE

This is the most obvious one and one which is required. So, without delving into all the iterations and variances, the last two major branches, XHTML and HTML 4 series required a lengthy declaration of the schemas used for the document type defintion (DTD). HTML5 did away with all the cumbersome description and replaced it with the all too popular and well received

 <!DOCTYPE html>

Linking to external files

A CSS style sheet is referenced in an HTML file by using the <link> tag, while JavaScript is referenced via a src attribute in a <script> tag. Where the JavaScript reference required an attribute to specify it was of type ‘text/javascript’, and similarly with CSS being ‘text/css’, is no longer required.

<script src="js/script.js" type="text/javascript"></script>

Async

HTML5 enables asynchronous loading of scripts without locking the other processes from loading in a browser. This is done by using the async tag

<sript src="js/script.js" async></script>

How? By using the async attribute preventing users from having to worry about script link placement and all the consequences the decision imbues.

Defer

Defer is similar to the Async attribute, however, it can be used when multiple scripts are needed and should be loaded in order. Scripts with this attribute will wait to execute until the page has finished loading.

These are some of the enhancements for the moment. If there are ones that I have missed, especially major ones, let me know in the comments.