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

  1. cd or chdir to display the current directory or change the current folder
  2. cls to clear the screen
  3. 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


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.