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

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?

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.

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.

Polymer - Web Components Exploration

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.

Material Design used in Polymer development.

Material Design as part of Polymer

To recap, Google Polymer is an open source JavaScript library composed of web components that is used for building web applications seamlessly. This Polymer library is available on GitHub. The Polymer user interface framework supports custom elements, shadow DOM, HTML imports and templates and modern design principles. In this short post, I would like to write a bit about material design.

Material Design is a design language by Google released on 25 June, 2014 at the Google I/O conference. "Expanding upon the "card" motifs that debuted in Google Now, Material Design makes more liberal use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows." Sourced from Wikipedia. This design language was used to build Gmail, YouTube, Google Drive, Google Docs, Google Maps etc.

From the Google's Material Design website;

"Material design is guided by print-based design elements – such as typography, grids, space, scale, color, and imagery – to create hierarchy, meaning, and focus that immerse the user in the experience."



Material Design has four design principles:

1. Tactile Surface
2. Publishing Design
3. Meaningful Animations
4. Adaptive Design

• Tactile surface represents the layers of "digital paper". These layers are arranged at varying heights to simulate depth and cast shadows on each other. This is analogous to stacked papers.
• Publishing Design represents "digital ink" that is the use of fonts and typography, colours and photos for example.
• Meaningful animation represents how controls on a web page interact with the user for example.
• Adaptive design is a method that allows designs to represent consistently across different web based devices with different resolution and screen sizes.

Wireframes are useful to help organise space and padding for different screens of devices. More information can be found at https://material.google.com/resources/layout-templates.html#layout-templates-whiteframes

In a nutshell, Material Design unifies visual, motion, and interaction design across different types of devices. It's modeled after tactile materials like paper and ink with fluid animation and lighting. Polymer brings these paper elements to life on the web. So the Google Design team came up with an unified approach to building consistent user interface across different web based devices.

Over and out

Deaf Dave.

References

• https://elements.polymer-project.org/guides/responsive-material-design-layouts
• https://material.google.com/
• https://en.wikipedia.org/wiki/Material_Design
• https://www.smashingmagazine.com/2015/10/responsive-material-design-app-with-polymer-starter-kit/
• https://www.smashingmagazine.com/2014/03/introduction-to-custom-elements/

Musings about Web Components and Community work

I have been thinking lots about web components but I am not actually building them yet. Procrastination has set in I think! Its November and the silly season is creeping upon us rather too quickly.

I have also been thinking about the meta side of things especially with web components and my life as a Deaf person. I did a quick course in jQuery and it has provided me the tools to quickly fetch and update individual elements on a web page. but I realised what if I have multiple pages and they needed to communicate across by exchanging data then it all gets messy quickly. On one hand, jQuery is useful for encapsulating low level routines into higher level functions or objects for instance but the other hand its all rather fine grained. So I came across frameworks. Angular JS is one of them and the ability to decouple data, views and controller modules helps the developer manage the complexity of building and deploying web applications. So that's the MVC paradigm. Ok I would like write more about this MVC but that's for a future blog post.

It has been like 7 years since I worked in the software engineering industry (Altium - an Electronics Design Automation world class company) and I miss this type of work terribly.I worked as a software engineer, application engineer and finally as a technical writer for Altium and I worked extensively with Borland Delphi. I loved this tool. I came across Delphi components and how they helped me save time in coding and how it is easy to build applications with components.

I am a community manager for a little non for profit organisation funded by the Archdiocese of Sydney. I have done a lot of community work for the last 7 years. Why did I end up in the community sector after I was made redundant at Altium (no hard feelings!).   I was snapped up for lots of different jobs in the Deaf community after I left Altium. I taught many sign language courses for the Deaf Society of NSW. I designed and delivered lots of community courses and workshops for the deaf community in Sydney in the areas of family history research and Arduino - open source electronics prototyping boards. I thought it would be good to do something really different. The big pay drop was a blow I admit. It was only last year when I became a community manager, my salary was much more respectable.

On reflection, I realised there were things I could have done better when I was at Altium. I didnt know how to manage my anxiety issues. Thou I was an efficient worker and I had the great ability to get on with my co workers and have a laugh or two. I was able to hack into hard stuff and generate easy to understand technical documentation and generate useful code and script examples. That was so much fun.

I am a Deaf person and I use Auslan (Australian Sign Language). I found rather hard to cope being in a room full of people who can only speak and unable to sign Auslan. Now I am older and more mature. I think I am managing my anxiety issues very well. It is my fifth year with Movember - a charity devoted to helping men resolve their anxiety, depression and other related issues. I feel really good helping out. This is why I really enjoy helping people and finding solutions to make their lives easier. This attribute is important in all areas of work; whether it is community work or developing unique web components!

Fast forward to today.  I feel it is time for me to move on and harness the technical geek in me once again. I am ready to move on!