Tech DeafDave

Saturday, January 26, 2019

How to run JavaScript source files?

First method, use JavaScript online editor

You can go to CodePen (https://codepen.io/) and in the JavaScript window you can paste the code and experiment.

Second method, running JavaScript code from a HTML document

Make a HTML file and embed JavaScript Code

Make a JavaScript file. Put your JavaScript code in this file
In the HTML file, include script tag and refer to the JavaScript file you have created.
Run the html file in any browser.

Inline JavaScript file

HTML document

<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<script>
console.log("javascript is working");
</script>
</body>
</html>

Embed JavaScript file

HTML document

<!doctype html>
<html lang="en">
<head>
</head>
<body>
<h1>Testing JavaScript</h1>
<p>Open Web Browser's developer tools Console window and reload this page.</p>
<script src="code.js"></script>
</body>
</html>

code.js document

alert("Hi world");

References

https://www.webtoolkitonline.com/javascript-tester.html
https://js.do/
https://jsfiddle.net/

Resources

Hackr.io (Find & share the best online programming courses & tutorials)
Free Code Camp (www.freecodecamp.com)
Team Treehouse (www.teamtreehouse.com)
Codewars (codewars.com)
iLoveCoding Javascript Screencasts (https://ilovecoding.org)
Codementor(https://www.codementor.io/javasc...)
CodeCloud (CodeCloud.me)
Codecademy (http://www.codecademy.com/#!/exe...)
Lynda (http://www.lynda.com/JavaScript-...)
Channel9 (http://channel9.msdn.com/Series/...)
TheCodePlayer (Learn HTML5, CSS3, Javascript)
Eloquent Javascript Book (http://eloquentjavascript.net/co...)0
Javascript by Douglas Crockford (Douglas Crockford's Javascript)
CodinGame (http://www.codingame)
Mozilla (https://developer.mozilla.org/en...)
Udacity (JavaScript Basics for Beginners Course)
Egg Head (egghead.io - Learn professional JavaScript tools with Tutorial Videos & Training)
CodeSchool: Start with Free Courses at CodeSchool
Pluralsight: (JavaScript)

Tuesday, January 22, 2019

Closures?

Closures in JavaScript?

I have been looking and playing with web components. I found it a bit too easy to install and use web components in a web page. So I decided to have a good look in how things worked. Geez, I came across a lot of things that I wasnt familiar with. I thought I was a competent Javascript coder. No!

What really puzzled me was these anonymous functions and these weird self contained function calls of this following format

(function () {
var Avariable = 'Weird self contained function call';
alert(Avariable);
}) ();

console.log(Avariable);

This pattern is a closure. A closure is a combination of function and the set of available variables in which the closure was defined.

Kyle Simpson's Scope and Closures book ("You don't know JavaScript" book series) said this succinctly; Closure is when a function is able to remember and access its lexical scope even when that function is executing outside its lexical scope.

Still it is not that clear to me. I dug up my old Sitepoint book "The art and science of JavaScript", and I learnt that a closure is created when a function is defined within another function. If the inner function is accessed from outside of its containing function, it still has access to the scope in which it was originally defined even though the variables in that scope are not accessible to any other functions or variables.

A bit better... As I am a visual learner, I created a simple function with an inner function and used the Console which is a part of Chrome browser to see how it works.

Example

// an outer function createfunction() and an inner function returnAValue that still has access to
// the aValue even when createfunction() goes out of scope.
function createfunction(){
var aValue = 3;

returnAValue = function () {
return aValue;
}
}

createFunction();
console.log(aValue); // Undefined
console.log(returnAValue()); // Returns a value of 3.

It makes sense now. Now onto partial function applications.

Partial Function application

Closures are useful for functions that prefill some of their own parameters.

Reference
http://www.webreference.com/programming/javascript/rg17/index.html

Self executing function pattern

(immediate invoked function expression)

That was another pattern that got me stumped. I had to play around and now I find them very powerful and very clean. I see them all over the place in well written JavaScript code!

Sunday, December 10, 2017

Few things about NPM and Package Managers

What is a command line and a package manager?

First of all, what is a command line or command prompt in Windows?

A command-line interface or command language interpreter (CLI) is used to execute commands within the terminal window, typed in by the user. Most of those commands are used to automate tasks via scripts and batch files.

You can then use various commands such as

cd or chdir to display the current directory or change the current folder
cls to clear the screen
dir to display a list of folder's files and sub folders.

How do I launch launch The Command Prompt From The Run Window?

One of the quickest ways to launch the Command Prompt is to use the Run window (press Win+R on your keyboard to open it). Then, type cmd or cmd.exe and press Enter or click. The Terminal window pops up and shows the C:\Users\DeafDave which is the starting point.

What about PowerShell?

A shell is a user interface that gives you access to various services of an operating system. A shell can be command-line based or it can include a graphical user interface (GUI). Windows PowerShell is a powerful shell developed by Microsoft. This PowerShell is much more powerful than the command prompt and is used for task automation and configuration management. This shell is based on the .NET framework.

There is also the Windows PowerShell ISE, a graphical user interface . ISE stands for Integrated Scripting Environment which allows you to easily create different scripts without having to type all the commands in the command line.

The fast way of launching PowerShell is to use the Run dialog. Press Windows + R keys on your keyboard to open the Run window, enter " powershell" inside and then press OK.

Reference

https://commandwindows.com

https://www.digitalcitizen.life/simple-questions-what-powershell-what-can-you-do-it

https://docs.microsoft.com/en-us/powershell/scripting/whats-new/what-s-new-with-powershell?view=powershell-5.1

What is a package?

A software package manager installs the packages you want to use and provides a useful interface to work with them from your PC. npm is one of the most popular software managers and makes it easy for you to share and update files with your co workers. To use npm, you need to have Node.JS a Chrome's JavaScript runtime module.

Bower is a Node module so to get it. You need to install npm and Git applications on your computer. Bower packages are Git repos. Bower uses Git to understand where the package is, what version it's on—that sort of thing.

node.js
Node.js is a platform built on Chrome's JavaScript runtime for easily building fast and scalable network applications. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient, perfect for data-intensive real-time applications that run across distributed devices.
https://nodejs.org/en/

npm
node package manager for node.js. npm is a NodeJS package manager. As its name would imply, you can use it to install node programs. Also, if you use it in development, it makes it easier to specify and link dependencies.

Bower

Bower is just a package manager. The important thing to note here is that Bower is just a package manager, and nothing else. Its singular purpose is to manage packages. You can find it at https://bower.io/

Bower is a command line utility. Install it with npm.
$ npm install -g bower
Bower requires node, npm and git.

Prior to Polymer Version 3, to build Google Polymer's web components, you would use Bower. Bower is a convenient way to quickly build web components by collecting Google Polymer's elements together to build a Polymer ready web component.

More on them later.

Over and out!
Deaf Dave.

References
https://css-tricks.com/whats-great-bower/
https://www.npmjs.com/
https://www.sitepoint.com/beginners-guide-node-package-manager/
https://docs.npmjs.com/getting-started/what-is-npm

How do I run a web page on a local host?

This is a common question for beginning web developers. You want to run your web application locally without uploading it to your webhost yet. You need to have a local web server to develop and display web pages locally on your PC. This is done by using a local host instead of using a server on the internet.

Why would you do that? Save time and money by developing and breaking web pages on your PC! You do not want people on the internet to use your web pages that are quite unfinished or are broken because you are still experimenting or figuring out a problem. You wish to develop, test and run web pages yourself first. So using a local web server is the answer.

I will talk about the Apache web server first. This Apache is a web server and its main purpose is to serve web documents such as HTML, PHP and ASP files. The process is as follows for a PHP document for example; the PHP file is sent to the interpreter on the server side, the server parses and processes this file and then sends the rendered file back to the browser. The server is just serving pages to your browser (the client).

Your local web server has a root directory which is wwwroot (IIS) or htdocs (apache, xampp) or something else like public_html, www or html, etc. The web server configuration depends on your OS and web server.

Once you have installed a web server on your PC, and if you type http://localhost into your browser, your browser will be directed to this webroot and the server will serve any index.html, index.php, etc. it can find there (in a customizable order).

If you have a project called "mytutorial" you can enter http://localhost/mytutorial and the server will show you the index-file of your tutorial, etc. If you look at the absolute path of this tutorial folder then it's just a subfolder of your webroot, which is itself located somewhere on your hard drive, this absolute path is mapped to the localhost.

So the relative path is
http://localhost/mytutorial

while the absolute path may be
c:/webservices/apache/www/mytutorial
or
c:/xampp/htdocs/mytutorial

If you're working with a web authoring package like Adobe's Dreamweaver you can simplify the testing process by setting up your local server as a testing server in your project settings. easy. Once it's done, you can just press the browser icon with any of your files and it will open on localhost.

Example
I installed Aprelium, a light weight web server on my PC.
http://aprelium.com/abyssws/download.php
localhost:80/
http://locallost:80/

The server runs code from C:\Abyss Web Server\htdocs\..

I dropped a set folders of Web Components code examples in the
C:\Abyss Web Server\htdocs\

Then I could run a web page in Google Chrome for example;
http://localhost/Chapter1/shadow-dom/shadowDOMDemo2.html

and the absolute path may be
C:\Abyss Web Server\htdocs\Chapter1/shadow-dom/shadowDOMDemo2.html

That's it!

References

http://1stwebdesigner.com/local-web-server/
https://blog.xervo.io/absolute-beginners-guide-to-nodejs
http://stackoverflow.com/questions/20748630/load-local-javascript-file-in-chrome-for-testing?

Monday, December 4, 2017

A simple todo list app

A Simple ToDo App with HTML, CSS and Javascript

David Parker December 4th 2017

I built a simple ToDo app first in one HTML file that has CSS styles in <style> </style> and Javascript in <script> </script> blocks respectively. My aim was to learn about DOM and the localStorage object and use them in this simple ToDo app.

We use a button and an onclick event handler to call the addItem() or removeItem()function when the button is clicked. We use DOM (Document Object Model) to manipulate the objects in a DOM tree. Each object in the DOM can represent a HTML element on a web page.

We use Javascript to have access to DOM's APIs. We use the LocalStorage object to persistently store the state of the todo items. Otherwise every time we do a refresh for example pressing the F5 key button, the todo items will be cleared and reset. We don't want that!

DOM methods

getElementById

getElementById is a method that fetches the HTML element on the webpage by its id attribute.
An example,
document.getElementById("password");

innerHTML

innerHTML is a text based DOM property of a HTML element.
An example,
newItem.innerHTML = document.getElementById("box").value;

createElement

createElement is a DOM method that creates a new floating and disconnected HTML element. You need to attach the new element to register in the DOM tree.
An example,
var newItem = document.createElement("div");

appendChild

appendChild is a DOM method that attaches the child element to an existing element on a web page.
An example,
document.getElementById("list").appendChild(newItem);

removeChild

removeChild is a DOM method that removes the child element from the existing element.

So with these getElementById, appendChild, removeChild and createElement methods, they allow me to add or remove a new item to/from the list in the todo app. Every time a new item is added or removed to/from the list, the list is also saved.

The source code for the two functions, addItem and RemoveItem.
// The value from the input field is added to the list below
function addItem() {
var newItem = document.createElement("div");
newItem.innerHTML = document.getElementById("box").value;
newItem.onclick = removeItem;

document.getElementById("list").appendChild(newItem);
saveList();
}

//The to do item in the list is removed and the ToDoList is saved.
function removeItem(){
document.getElementById("list").removeChild(this);
saveList();
}

Everytime I click on Add item button, the contents of the input field is copied and the <list></list>'s innerHTML contents are refreshed.

If I wish to remove an item from the list, I just click on the existing item and it is then removed by the removeChild method. The this keyword parameter references the child item element within the list element. So basically the item in question is then removed by the onclick event that is attached to this item.

There is a risk of generating a too long to do list. A simple solution is to check for the maximum number of items that can be added to the list. So I chose a arbitrary value of 28 'to do items' that can fit in the light yellow to do list on the web page. More than 28 to do items will not be added.

The to do items are saved in the localStorage object as part of the DOM.

Full source can be found here. I hope you found this short article useful. Deaf Dave.
» www.deafdave.com.au/webdev/todo/todoapp.html

More information about DOM can be found at

» https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

More information about the console.log object

» https://developers.google.com/web/tools/chrome-devtools/console/

The next step is to use Polymer web components and advanced Javascript techniques to manage the ToDo list better. This will be covered in the next article.

Sunday, November 19, 2017

Oldest Computer

The oldest computer can be traced back to Adam and Eve.

Surprise, surprise.

It was an Apple.

But with extremely limited memory.

Just 1 byte.

Then everything crashed.

Monday, November 21, 2016

Polymer - Web Components Exploration

There have been lots of questions and things I didn't know when I first started looking at Polymer since October 2016. It has been 6 weeks ever since. I have answered many of these questions that came up when I was exploring this Polymer website by myself. I really enjoy exploring and answering my own questions. JSON files. Data binding. NMP. Bower. Package Manager. Closures. Frameworks. Material Design. Elements. Custom tags. Projects. Debugging. And so on.

I look. I read. I procrastinate. I nap a lot. I dig. I do things. I break things. I get frustrated easily. I don't give up easily. I feel good once I get things working! My plan of attack is to break problems into smaller problems and solve them one at a time. I can be slow at times but once I get it, I am FAST!

For the last few weeks, I went over JavaScript and I looked into the meta programming - especially function closures and JavaScript objects. I have ordered a few advanced JavaScript books and I will be writing future posts on these topics.

I came across a great simple tutorial on what is a web component. This article said web components is a new HTML technology that makes it easy for you to create web apps. There are short lessons in this website that introduces the following concepts (HTML tags, how to use web components in any web browser, changing the attributes for custom HTML tags on the fly etc) and try them out in interactive live demos. Nice and easy.

This tutorial can be found at » https://component.kitchen/tutorial

Polymer Project

I keep visiting this Polymer Project website. This website can be found at » https://www.polymer-project.org/1.0/ This is an elegant and clean website. I can use web components with confidence. My next plan is to select and use web components in my rather out of date website at www.deafdave.com.au.

I have a few ideas to build new custom web components. A small Auslan fingerspelling alphabet translator web component that changes words into fingerspelt icons on the fly. A silly and useless purple web component. A star wars scrolling web component. These three are the ones I wish to build asap.

My ultimate goal is to build a Polymer based app... It is exciting!

Over and out.
Deaf Dave.