https://app.pluralsight.com/courses/535bde8a-ace7-4b40-aa90-420f52e0728d/table-of-contents

• Goal: Simple as possible implementation for great results
• Tech Stack: HTML, CSS, JS; server e.g. Node.js, ASP.NET or any other server-side tech
• Tools: Node.js's 'Live Server' for development npm i -g live-server
• run live-server in dev directory and visit localhost:8080

• Dev console defined and advantages outlined
• Required skills, tech stack and tools reviewed

Steps:

• Design the HTML markup, style the HTML using CSS, add functionality using JS
• webcli
  containing a

  for the output and for the cli input
• add spellcheck="false" to cli input

Styling the Console

• add css file for the webcli
• monospace font: Lucida Console, Consolas, Courier New
• webcli div: black, translucent bg, absolute position, bottom:0, left:0, right:0 padding, border, box-shadow (inset)
• webcli input transparent bg, no border, white/green font, margin/padding 0, outline: none
• check page in main browsers during development and ensure consistent styling

Creating a Control with JavaScript

• webcli.js (in ES6)
• class WebCLI
• `createElements() - build webcli HTML using JS, hide using styling and append to
• replace component in webpage with webcli.js reference and a js file creating instance of webcli (new WebCLI())
• add server-side checks to display webcli if user has privileges, e.g. admin user

Summary

• Webcli created as js and css file
• Design HTML, styled CSS, initialised webcli in admin page
• Client-side security is UNSAFE

Adding Functiionality with JavaScript

Handling Events

• see http://keycode.info for key codes
• toggle webcli visibility (and focus input on display) on keypress of (Ctrl + `)
• event handler method's this value is the DOM object that fired the event. Define a function within the wireEvents() method that is called from the event handler where var self = this' has already been defined so self.onEvent() can be called on the web component class

Writing Output

• add scrollToBottom(), newLine() and writeLine(), writeHTML() methods web component class usage:

showGreeting(){
  this.writeLine("Web CLI [Version 0.0.1]", "cmd");
  this.newLine();
}

Processing Commands

Steps:

• process command after user presses 'Enter' key

• record commands to implement command history using up/down keys

• move input text to output element

• process submitted command (likely on the server)

• add

self.history = []; // Command history
self.cmdOffset = 0; // Reverse offset into history

• add case to onKeyDown(e) for Enter key which calls self.runCmd()

runCmd()
{
  var self = this, txt = self.inputEl.value.trim();
  self.cmdOffset = 0; // Reset history index
  self.inputEl.value = ""; // Clear input
  self.writeLine(txt, "cmd"); // Write cmd to output
  if(txt === "") { return; } // If empty, stop processing
  self.history.push(txt); // Add cmd to history

  //Client command:
  var tokens = txt.split(" "),
      cmd = tokens[0].toUpperCase();
  if(cmd === "CLS") { self.outputEl.innerHTML = ""; return; }
}

add to css:

.webcli
{
  overflow: auto;
}

add onKeyDown(e) case for Up and Down keys

case 38: // Up
  if((self.history.length + self.cmdOffset) > 0)
  {
    self.cmdOffset--;
    self.inputEl.value = self.history[self.history.length + self.cmdOffset];
    e.preventDefault(); // Prevents default browser behaviour for Up keypress
  }
  break;

case 40: // Down
  if(self.cmdOffset < -1)
  {
    self.cmdOffset++;
    self.inputEl.value = self.history[self.history.length + self.cmdOffset];
    e.preventDefault(); // Prevents default browser behaviour for Up keypress
  }
  break;

• change to a Ctrl + Backquote check and the Enter, Up and Down check to within a condition which only checks for these if self.inputEl === document.activeElement

Graphical Output

• As the output element is a <div> element command output is not limited to text. It could be for example images, SVG, video, iframe etc. If text meets needs, keep things simple (to minimise development time)!

Making a Responsive Server with Node.js and ASP.NET

Processing Commands - Node.js

• use regex to parse command arg
• scriptular.com

Processing Commands - ASP.NET

Further Enhancements

Implementing Help