Tuesday, 2 December 2014

HTML5 CSS Javascript

The browser in becoming increasingly important in computing. 

This seems to be inline with the rise of cloud based computing and storage. The fracturing of the smartphone market has also made HTML5 apps more attractive for phone application developers. As HTML5 apps can be be run in any modern browser and smartphones run those browsers, HTML5 apps are automatically supported on any smartphone OS.

Last year I played with the Bitalino board and was surprised by how responsive their HTML5 based application was with the Bitalino connected by Bluetooth. It looked good and the non-blocking nature of Javascript made the interface very responsive. Python in the back end to do the serial communication and hardware interfacing made for a slick and reliable experience.

With the arrival of the OpenBCI headset imminent, I'd like to know more about the possibilities of coding in the browser.

When I came to the conclusion that programming was a necessary part of neuroscience, I started looking for the perfect language. One that would do all the things I needed so I wouldn't waste time learning inferior languages. After a lot of reading and a little experience, I understand why more experienced programmers don't spend a lot of time answering that question. There is no one best language, they all have their tradeoffs.

Except for Matlab..... Matlab is just bad. ;-)

You will probably end up learning a few languages.

Please excuse my explanations of Javascript, I'm not experienced with it and my knowledge is growing all the time. I'll reread this in a few months and see if I can make it clearer and fix up any mistakes.

Javascript has emerged as the Queen of the browser, it has nothing to do with JAVA despite the name, and is probably the most widely used languages due to this. It is an event driven, asynchronous (or non-blocking) language, meaning that unlike other languages where each instruction is performed in turn in a single thread, Javascript has a system of requests and callbacks that allow other work to be done while waiting for a requested resource (typically disk or network resources).

When I want to learn a programming language, I look around for articles on the nature of the language. Not tutorials but discussions about what it looks, feels and smells like. I try to get a feel for the personality of the language so I have some framework to piece together the information I will acquire. Next I do some online tutorials involving guided coding in a browser. Something like codeacademy. or Didacto

I have been doing a lot of reading and video watching about web frameworks. One web page and video that really open my eyes up is Pixel Monkeys piece on lightweight web frameworks. In it Andrew Montalenti talks about the connection between HTML CSS Javascript and light web frameworks like Flask. Flask is a Python framework that does templating and handles connections. Along with these tools, integration with databases and a lot of nifty editors like Emmet are mentioned.

But first a little HTML. Why? Because we want to use Javascript in the browser, and HTML is the markup language that makes a place for the Javacript to live and display it's results.

This material is taken from the codeacademy site.

the basic syntax of HTML is

< something >  ....... < something />

With the somethings (tags) defining what goes between these markers (thus the term - markup language).

It can be headers (h1 - h6)

<h2> This is a heading </ h2>

Or what we're interested in, a javascript file

<script src="js/all.min.js"></script>
<p> Text can go between paragraph tags </p> 
In the opening tag we can also state some attributes. 
In the next line, the 'a' tag denotes links and 
the 'href' is an attribute.
In this case it is a web address and notice it is in quotation marks. 
The text between the tags 'links' will be what the user sees and clicks on.

<a href='http://www.codecademy.com'> links </a>
images are also bracketed by tags and look a lot like the javascript markup.
Images have an attribute 'source' which gives the path to an image file. 
<img source="picture.png"></img>


The styling of the different elements of the html page are defined by the CSS file.


The 'h1' part is a selector, the 'color' part is a property and the 'red' is it's value. A property:value pair is called a CSS rule.