Page Footer

Welcome! This is the Page Footer page of the MMINAIL. ~

Page Footer is a partioned Worksheet for the course 'How To Build a Webpage Programatically With Javascript and the jQuery Library' sponsored online by the MOOC Udacity.

This page has explicit access to the local jQuery library as well as to a local complimentary working (.js) file.

Lower Body Scripts

Through the addition of two uncommented lower body scripts, one that calls the local jQuery library first, and a second script that secondly calls the local complimentary working (.js) file ...

The program installs, prepends and appends the internal text of the code that is programatically rendered in the window of your browser.

Jekyll Server

Because the default layout in Jekyll references a call to the jQuery library hosted via a CDN ...

AFTER the initial scan of the <html> of this page ...

In order to make the Javascript statements over at the complimentary working (.js) file effective locally, both the jQuery library and the complimentary working (.js) file must be invoked PRIOR to the final rendering of the page.

Hence, the two uncommented scripts located below the closing <div> tags of this page referencing a local copy of the jQuery library as well as the local complimentary working ( .js) file, yet still effectively located above the closing <body> tag of the default layout.

Mind Map

"Everything from here to the <script> tag below is 'The Skeleton' of a Working <html> template." ~

Your new Javascript code statements will add information to each of the sections of the proposed Working <html> template below.

Each section of the Working <html> template displays a separate rendering that when combined create the experience of the webpage as a whole.

By scanning the id="..." elements of the <html> ...

And, by looking at the subtitles written between the <h2> tags, the student can catch a glimpse of what ultimately will be the programatical rendering of the manipulated DOM by statements of Javascript enhanced by the jQuery library.

The DOM

The 'Document Object Model', or DOM is essentially a Javascript object.

Javascript assets, however, by default tend to block other parallel downloads from occurring.

Why? Because <html> is loaded by the browser in the order it appears in the targeted webpage.

If a <script> designed to affect the <html> of a webpage is loaded first ie.) prior to the receipt of an external call to a CDN for jQuery assets placed in the <head> section of the default layout ...

Then, the changes to the DOM and corresponding <html> of the targeted webpage may not work properly.

Why? Because the Javascript statements of your corresponding (.js) file would be loaded BEFORE the methods of the jQuery library would have a chance to work their magic upon the <html>.

Strategic Placement

As a result, place your <script> tags near the bottom of the targeted webpage.

This strategy is often cited as the most effective way to render accompanying jQuery methods.

So, you can imagine if you have plenty of <script> tags in the <head> section of your default layout ...

Each <script> tag calling on one or more external scripts one after the other ...

The effect of the multiple scripts all vying for external assets is to block the <html> of your targeted page from loading on time.

The <script> files must be completely loaded first.

If not, the end user may be inadvertently greeted with a blank browser screen, or at the least ... no upgrade!

Not cool!

jQuery Library

jQuery is a library of javascript methods designed to get at (read) and to manipulate (change) the Document Object Model, or DOM.

The DOM is a tree of page components that have been translated from the original <html>.

The DOM contains information that the browser can visibly actualize to the window of a Webpage.

Though a webpage rich in <html> is in effect simply a static document, the browser will still convert the <html> into the elements of a DOM.

Therefore, the DOM can be changed, and does change via the application of Javascript.

In fact, the real power of Javascript on the client-side comes from the ability of libraries such as jQuery to manipulate the client-side DOM.

When a Javascript statement comprised of a jQuery method makes something interesting happen on a overall Website, the reason is likely the action was a result of a change in the client-side DOM.

The Bottom Line. jQuery is fast and easy to use, but it doesn't do anything you can't accomplish with original Javascript.

Body Scripts

The commented scripts at the bottom of this page are written in Javascript.

As part of the accompanying quiz given by the instructors, the student learns how to apply each <script> to the following Webpage template ie.) 'The Skeleton'.

Then, upon release (uncommenting) ...

Each <script> will be transfered one-by-one to the complimentary (.js) file to assist in the rendering of new material onto 'The Skeleton'.

The Skeleton

The html for the subject Webpage template ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<div id="main">
	<div id="header" class="center-content clear-fix">
		<ul id="topContacts" class="flex-box"></ul>
	</div>
	
	<div style="clear: both;"></div>
	
	<div id="workExperience" class="gray">
		<h2>Work Experience</h2>
	</div>
	
	<div id="projects">
		<h2>Projects</h2>
	</div>
	
	<div id="education" class="gray">
		<h2>Education</h2>
	</div>
	
	<div id="mapDiv">
		<h2>Where I've Lived and Worked</h2>
	</div>
	
	<div id="lets-connect" class="dark-gray">
		<h2 class="orange center-text">Let's Connect</h2>
	<ul id="footerContacts" class="flex-box"></ul>
	</div>
</div>

named 'Resume Builder'

Note. During the course of the instructions, you will be directed to delete the <span>Hello world!<span> statement from the skeleton of the instant <html> template.

The Result

Work Experience

Projects

Education

Where I've Lived and Worked

Let's Connect

Google Maps

Uncomment the 'maps dot google api(s)' <script> tag at the bottom of this page when you are ready to add an interactive Google Map to your <html> template.

Manipulating the DOM

Ok ... Let's have some fun.

Witness the updated (.js) file ...

Invoke a strict environment ...
1
2
//Resume Builder Program
'use strict';

Keep-a Ur code compliant

Test for DOM readiness ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//En español ... 'The DOM is ready' if true
jQuery(function($) {
	var date = new Date();
	window.alert(`¡El DOM está listo! 
	The current session between 
	client and server has begun on: 
	${date}`);
	/* Where the 'anonymous function''
	passed the argument of the '$' function
	aka the 'jQuery document dot ready' 
	function returns an alert if true. */
	/* Where the current date  time is passed 
	to the built-in 'toString()' method of 
	the built-in Date object representing 
	the current date n time. */
});

Show current date n time

Selectors

In Javascript, targeting an element of the DOM is accomplished via the following statement ...

Targeting the element
1
document.getElementById("mminail")

Where "mminail" is the targeted id

Once selected, the wrapper set may be manipulated using other functions. The same principle applies when using jQuery, only with different syntax. In effect, the keyword 'jQuery' replaces the Javascript statement 'document.getElementById'. To avoid conflicting keywords, and to add individuality to the code, the keyword 'jQuery' can be exchanged, as well.

Declare and initialize the method No Conflict ...
1
2
//to the global variable jKey
var jKey = jQuery.noConflict();

var 'jKey' replaces term 'jQuery'

Append a String
1
2
3
4
5
6
7
8
jKey(function($) {
    //Declare and initialize the var target id
    var test = jKey('#test');
	/* where id = "test" is the targeted wrapper set */
	test.append("The Author");
	//Append String to the end of the parent tag
	/* where 'parent tag' is of the targeted wrapper set */
});

The var is now available

Declare and initialize the String ...
1
2
3
4
5
6
7
8
9
jKey(function($) {
	//to the global variable author
	var author = "Robert Hempaz, PhD Trichometry";
	//Append author to the parent tag of the id
	jKey('#rht').append(`${author}`);
});
/* Where the id = "rht" is targeted 
appending the contents of the variable 
'author' to the end of the parent tag */

via the append method

Build a URL

Build a URL programmatically ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
jKey(function($) {
	var mminail = jKey('#mminail');
	mminail.add('').addClass('neon-text')
	.text('MMINAIL')
	.attr('href', 'http://cannabuds.us')
	.appendTo('');
	/* jQuery: Target the id, create a wrapper set, 
	assign the wrapper set to the var 'mminail', 
	add an 'a' tag, add a 'class', 
	initialize the 'text' of the url, 
	initialize the 'attribute(s)' of the url 
	via implicit iteration, append the result 
	to the given 'span' tag */
});

Render next to the 'tilde', as follows:

The DOM

A lot of functions can be invoked prior to the actual loading of all page assets by simply invoking the quicker loading DOM.

Note. On the other hand, the property of 'document' is actually an object of the global 'window', or BOM subset.

The BOM

The Browser Object Model, or BOM is based on the global object 'window' The BOM ie.) objects that interact with the computer screen and the browser.

Whereas, the Document Object Model, or DOM is based on a universal API.

Here, we are attempting to decipher the status of all assets. Have all assets loaded, or not?

Check to see if all assets have been loaded ...
1
2
3
4
jKey(function($) {
    var document = jKey('#document');
    document.load.alert(`All of the assets are now loaded.`);
});

The page is now complete if true

More to come ...

Supporting Content

Welcome! This is the Supporting Content section for the Page Footer page of the MMINAIL.

The Concept Library of the MMINAIL is a static informational website.

As such, a Supporting Content section is placed below each (.html) page in the flow of the default layout to grant the end-user additional pertinent information when navigating this site.

E Books

With today's explosion of modern devices ...

Some consumers like to read their articles on their Kindles or iPads.

Therefore, a method to convert any page of this website into an eBook ...

Is auto-built into the top of the Navigation <aside> ...

As well as in the <footer> of every page.

Dot ePub

Simply click the following eBook icon = eBook icon to render the current page as an Overdrive (.epub) or a FB Reader (.mobi) .

Apple iBooks

The Apple iBooks platform also reads and displays the (.epub) format, as well.

When navigating the menu at the Navigation <aside> ...

Look for the book icon to download the offered eBook directly to your machine.

Then, simply right-click over the newly downloaded (.epub) and open up the file in the new Book app for Mac devices.

Secure Hyperlinks

The A's Have It!

In today's complicated world of coding, even the use of the standard hyperlink ...

<a href="" title="" target=""></a>

Is placed into question by the standards of newer, more modern browsers such as Google's V8 powered Chrome browser.

Safe Internal Links

Therefore, to make life easy for the end-user ...

The MMINAIL will show safe, internal links in the bootstrap default color of light dodger blue.

Safe External Links

In addition, safe external links ...

When designated https secure ie.) https://.

Will also be shown in the color of light dodger blue.

Standard External Links

All other external links ...

If designated with standard http ie.) http:// ...

Will be shown in the color of indian red.

How To Navigate This Website

At this website ...

We have the <html> hub for the Benefit Corp aka our Concepts Library.

You (Usted), as a current visitor to our Concepts Library, are now at the Page Footer page.

Navigation Aside

In the Navigation <aside> section of this website ... ...

The end-user will find a Stack of Topics.

Or, for you smartphone users ... the Navigation <aside> section is up! ...

There, the smartphone user will find the same Stack of Topics for the Concepts Library at MMINAIL.

Stack O Topics

The Navigation <aside> section to your right ... ... If you are viewing this page from the traditional landscape style of your laptop.

Or, the Navigation <aside> section from above ... ... If you are viewing this page from the modern portrait style of your smartphone ...

Both house the same Stack of Topics available for selection at the Concepts Library of the MMINAIL.

Instruction Set

To access one of the Articles or Lessons available for your preferred Topic of Interest ...

Simply scroll through the tabs of Topics above, or to the side ...

And, click on one that you may have an interest in.

Back Home

Note. At each Topic of Interest, the end-user will find a hyperlink back to the Home page of the Concepts Library.

By clicking on the Home icon the end-user will be returned to the Home page of the Concepts Library.

Subtopics

When an end-user clicks on a Topic of Interest ...

Either above ...

Or, over at ...

The Stack of Topics in the Navigation <aside> section ...

The menu explodes vertically to reveal several subtopical choices.

To select any other Topic of Interest, or any of the many subtitles ...

Simply click on the corresponding glyphicon to open up the referenced file.

Unstuck

If you get stuck ...

Simply click on the Home icon to be hyperlinked back to the Home page of the Concepts Library.

Screen Responsiveness

The pages of the Concept Library have been tested for mobile responsiveness.

The authors have determined the accuracies of the page renderings at both a portrait width of 360px and a landscape width of 640px.

Devices

Testing devices have included selections from the following list of devices ...

Amazon Kindle Fire HDX 7, 3rd Generation tablet

Virtual Galaxy S5 smartphone emulator

Kindle Tablets

On the Kindle tablet, both portrait and landscape renderings appear accurate.

Amazon Fire Phones

And, on the Amazon Fire phone, using automatic screen rotation, both portrait and landscape renderings appear accurate.

Foreign Language

The foreign language expression ¡Finito! can hold a translation from Spanish-To-English ...

Via the <title> tag.

Simply hover over the word in Spanish to reveal its English equivalent.

For example ...

Hovering over the Spanish phrase ¡Por ejemplo! reveals the English equivalent of "For Example".

Try it!

Acronyms

For an acronym to be visually effective when reading a line of text ...

The acronym must first be declared.

In addition, the acronym must stand out from the body of information.

To accomplish both of these objectives, the MMINAIL has selected Ashley Gold.

Ashley Gold

Ashley gold is a primary color within the registered Logo Badge of the Benefit corporation.

Whenever the end user spies a designated Acronym of Ashley Gold ...

Simply hover over the Acronym to reveal the underlying meaning embedded in the title element of the <abbr> tag.

Definitions

The <abbr> tag can also be used to house Definitions as well as Acronyms.

As we have seen in the above referenced Ashley Gold definition ...

Whenever the end-user spies a designated Acronym or Definition of Ashley Gold color ...

Simply hover over the Acronym or Definition to reveal the underlying meaning embedded in the title element of the <abbr> tag.

Carriage Return

The carriage return, or ... ➡️

The carriage return is used extensively throughout the working repos of the Concept Library to prevent the overflow of raw code.

By preventing the overflow of raw code when rendering a code block, the view of the end-user avoids the slider effect.

And, by eliminating the slider effect, responsive views using other devices ie.) Kindle Fire HDX will maintain screen boundaries without overflow.

Site Monitoring

Note. The Http Headers of this repo are being monitored by Internet Supervision dot com.

Reproduction In Part

Most authors will allow for the reproduction of their works in part ...

When the case of brief quotations embodied in critical articles or reviews is addressed.

As long as an appropriate citation is presented concurrent with the review, authors are generally receptive.

Therefore, please remember to provide a Link-back to the original author, or to the publisher of the original publication when citing.

Thank you for your consideration.

Got An Idea?

If you have an idea that will spruce this site up even better than it already is ...

Then, you know the drill ...

Simply go ahead and fork this repo, make your changes, and send us a pull request.

Coding Community

If you are an expert in your field of specialty ...

Why not fork our Concept Library and create a new Topic of your choosing, or embellish upon an existing Topic.

Pull Requests

Send us a Pull Request.

Our team of coders will review your contribution and get back to you with a "thumbs up" ( or, "thumbs down" ).

Can You Contribute Code?

As we can now decipher the time spent by our functions at the code block level ...

How much of your coding time are you willing to invest in this project?

As we rely heavily upon contributions from the coding community, your contribution of code will be greatly appreciated.

Thank you for your effort and participation in our program to code the globe!

Can You Contribute Cash?

If you have enjoyed and benefited from this article ...

Then, why not drop a little change in our digital bucket at the Square Up - Cash Me donation portal.

As we can now spend the equivalent of our grandparents' monthly mortgage payment at our local Sunday football games ...

How much of your spare cash are you willing to invest in this project?

Starving Coders

As we rely heavily upon contributions from the coding community, your contribution of cash will be greatly appreciated.

Note. Your donation will help us fund our Starving Coders initiative through our Medcoin™ Crypto Currency Division.

Can You Contribute Ether?

As we have witnessed the exponential growth of Bitcoin (BTC) from 9 cents USD per coin ...

To over $18,000 USD per coin over the past nine (9) years.

Plus, the recent explosion of Ripple (XRP) from less than one-penny to over $2 USD.

How much of your spare Ether ( ETH ) are you willing to invest in this project?

As we rely heavily upon contributions from the coding community, your contribution of ether will be greatly appreciated, as well.

Public Hash

Simply scan the following QR Code to extract our Coinbase public hash address to send Gifts O Wei in support of our Medcoin™ Crypto Currency Project.

Note. The easiest and safest way to extract our public `ETH` hash-address is to point your smartphone at the `QR Code` shown and engage the `Sophos Intercept X QR Code Scanner`. From there you will be able to open the link safely via the `Sophos Intercept X Link Checker`.

No Warranty

Disclaimer. The author of this website has made every effort to ensure accuracy ...

However, the information contained in this website, and in its pages, is offered to the public without any warranty expressed or implied.

Therefore, the author of this website, and by extension its pages and content cannot be held liable for any damages that may be caused indirectly or directly by the software instructions or tutorials contained in the pages of this website.

License

The license and privacy policy pages ...

For further review, please see the License page and the Privacy Policy page of this website to clarify.

The Medical Marijuana Initiative of North America
- International Limited