JavaScript: some lessons learned

Checking for valid dates

A naive solution:

Minimal web server

As discussed yesterday, and not related to JS as such, but useful:

Get a count of the instances of a given “class” in the DOM

You have to walk those instances 1 by 1, getting the innerHTML or innerTEXT. As far as I can see, you can’t just aggregate it all up:

ES6 syntax: for / let /of

Sorting an array of objects by a single attribute, in this case:

Templates…

Do stuff with an object, then add it to the array:

The 2 parts needed to make sense of a linked HTML:


'use strict';
// entry point...
(function () {
var link;
var content;
var composers = [];

importComposers();

var composerSetCount = content.getElementsByClassName("ComposerSet").length;

for (var index = 0; index < composerSetCount; index++) {
var composerSet = content.getElementsByClassName("ComposerSet")[index].innerHTML;
var composersAsElements = htmlToElements(composerSet);

//https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for...of
for (let composerAsElements of composersAsElements) {
convertComposerTextToObject(composerAsElements, composers);
};
}

composers.sort(function(a,b) {return (a.lastName > b.lastName) ? 1 :
((b.lastName > a.lastName) ? -1 : 0);});

for (let comp of composers) {
var dates = [];
dates = validateComposerDates(comp);

document.writeln("
<h1>" + comp.lastName + "</h1>
");
document.writeln("
<h4>" + comp.firstNames + " " + comp.lastName + " " +
dates["Birth"] + " " + dates["Death"] + "</h4>
");
}

// functions...
function htmlToElements(html) {
var template = document.createElement('template');
template.innerHTML = html;
return template.content.childNodes;
}

function convertComposerTextToObject(composer, composersx) {
var composerText = composer.innerText;
if (composerText === undefined) {
return;
}
// Treat the characters , and [ and - and ] as delimiters for splitting the string into tokens.
// An example of a string to be split:
// SMITH, John [4/21/1712-7/9/1768]
var separators = [',', '\\[', '\\-', '\\]']
console.log(composerText);
var composerParts = composerText.split(new RegExp('[' + separators.join('') + ']', 'g'));

var theComposer = {};
theComposer.lastName = composerParts[0];
theComposer.firstNames = composerParts[1];
var dob = new Date(composerParts[2]);
if (dob.isValid()) {
theComposer.dateOfBirth = dob;
}

var dod = new Date(composerParts[3]);
if (dod.isValid()) {
theComposer.dateOfDeath = dod;
}

composersx.push(theComposer);
console.log(theComposer);

} // convertComposerTextToObject

function importComposers() {
link = document.querySelector('link[rel="import"]');
content = link.import;
}

function validateComposerDates(currentComposer) {
var composerDates = [];
composerDates['Birth'] = currentComposer.dateOfBirth === undefined ? "[unknown]" : currentComposer.dateOfBirth.toLocaleDateString('en-GB');
composerDates['Death'] = currentComposer.dateOfDeath === undefined ? "[unknown]" : currentComposer.dateOfDeath.toLocaleDateString('en-GB');
//console.log(composerDates);
return composerDates;

}

})();

HTML5: Referencing one HTML page from another HTML page

I was trying to reference a HTML file B from an HTML file A, without using a server (“server” in this context as in Node or IIS), because I wanted something very lightweight. However, while HTML5 introduces the ability to do such referencing, when trying to do it via a File protocol, it constantly fails with errors stemming from (quite reasonably, I think) restrictions imposed by Cross-Origin Resource Sharing:

In the end, I gave up, and used Node and Express as a light-weight server. Diagram with the key points here – you can download it as SVG for the detail.

Credit due for the Node/Express example here, and for the pointers on HTML5 HTML links here.

 

 

CSS: useful linter for VSCode

This is a simple test after installing this linter in VSCode:

Now fixed, gives this:

 

CSS: simple example – external file


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
	<link rel="stylesheet" type="text/css" href="index.css">
</head>
<body>
This is what we find
<h2>second level heading</h2>
<ol>
	<li>First entry</li>
	<li>Second entry</li>
	<li>Third entry</li>
</ol>
<ul>
	<li>First entry</li>
	<li>Second entry</li>
	<li>Third entry</li>
</ul>
</body>
</html>

p {
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
color: #FF00FF
}
ul li {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 10px;
color: #FF9500
}

&nbsp;

CSS: simple example – inline


&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;
&lt;head&gt;
&lt;meta charset=&quot;UTF-8&quot;&gt;
&lt;title&gt;Document&lt;/title&gt;
&lt;style type=&quot;text/css&quot;&gt;
p {
font-family: Arial, Helvetica, sans-serif;
font-size: 60px;
color: #FF00FF
}
ul li {
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 10px;
color: #FF9500
};
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
This is what we find
&lt;h2&gt;second level heading&lt;/h2&gt;
&lt;ol&gt;
	&lt;li&gt;First entry&lt;/li&gt;
	&lt;li&gt;Second entry&lt;/li&gt;
	&lt;li&gt;Third entry&lt;/li&gt;
&lt;/ol&gt;
&lt;ul&gt;
	&lt;li&gt;First entry&lt;/li&gt;
	&lt;li&gt;Second entry&lt;/li&gt;
	&lt;li&gt;Third entry&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

Bootstrap: simple example

useful online CSS formatter here.

Here for the code:

main.css:

.section-content {
 margin: 10px;
 padding: 1px;
 background-color: maroon;
}
.section-title {
 font-weight: bold;
 padding: 10px;
 background-color: blue;
 color: antiquewhite
}
.section-text {
 padding: 10px;
 background-color: hotpink;
}
.center {
 text-align: center
}
#footer {
 text-align: center;
 font-family: Georgia, 'Times New Roman', Times, serif;
 font-size: xx-small;
 color: crimson
}

index.html:

<!doctype html>
<html>

<head>
    <title>Simple example with Bootstrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    		<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen"></link>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    		<link rel="stylesheet" href="css\main.css">
</head>

<body>
<div class="container">
<h1>The stream to Oakley</h1>
<div class="row">
<div id="banner" class="span12">
<div class="center">
                    <img src="images/WalkToOakley.jpg" height="200" border="5" /></div>
</div>
</div>
<div class="row">
<div id="main-content" class="span8">
<ul>
	<li>Took about 3 hours</li>
	<li>From a photo I took during a walk</li>
	<li>I invented the stream and therefore its vanishing point</li>
</ul>
<hr/>
<div class="span4">
<div class="section-title">The text belonging to section-title - parent</div>
<div class="section-text">Acrylic is one medium</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">Oil is another</div>
</div>
<div class="section-content">
<div class="section-title">The text belonging to section-title - child</div>
<div class="section-text">And you might use pencil, but it wouldn't have the impact</div>
</div>
</div>
</div>
<div class="row">
<div id="footer" class="span12"> &copy; Lucius Verenus</div>
</div>
</div>
</body>

</html>

The editor I used is Visual Studio Code, as usual for me and HTML.

The art is from my painting on my Flickr site here.

Using VSC code snippets again

 

BootStrap01BootStrap02BootStrap03

{
“Basic HTML boilerplate”: {
“prefix”: “BasicHtml”,
“body”: [
“<!DOCTYPE html>”,
“<html>”,
“\t<head>”,
“\t\t<title>From the snippets location in Visual Studio Code</title>”,
“\t\t<meta charset=\”utf-8\”>”,
“\t\t<meta name=\”viewport\” content=\”width=device-width, initial-scale=1\”>”,
“\t\thttps://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js“,
“\t\t<link rel=\”stylesheet\” href=\”http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css\”></link>”,
“\t\thttp://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js“,
“\t\thttp://BasicStuff.js“,
“\t</head>”,
“\t<body>”,
“\t\t<input type=\”button\” value=\”Press me\” id=\”BasicHtmlPressMeId\”>”,
“\t\t<input type=\”text\” value=\”Press mex\” id=\”BasicHtmlCapacityId\”>”,

“\t</body>”,
“</html>”,
“<!– https://validator.w3.org/nu/#textarea –>”,
“<!– Location is [file:///e:/sandbox/javascript/test.html] –>”
],
“description”: “A basic snippet of HTML”
},
“B01BootStrap”: {
“prefix”: “B01”,
“body”: [

“,
“\t

A bunch of big Bootstrap buttons

“,

“,
“<p>”,
“\t<button type=\”button\” class=\”btn btn-lg btn-default\”>Default</button>”,
“\t<button type=\”button\” class=\”btn btn-lg btn-primary\”>Primary</button>”,
“\t<button type=\”button\” class=\”btn btn-lg btn-success\”>Success</button>”,
“\t<button type=\”button\” class=\”btn btn-lg btn-info\”>Info</button>”,
“\t<button type=\”button\” class=\”btn btn-lg btn-warning\”>Warning</button>”,
“\t<button type=\”button\” class=\”btn btn-lg btn-danger\”>Danger</button>”,
“</p>”

],
“description”: “Initial bootstrap buttons”
}

}