JavaScript - sending raw text to printer

While I'm working on the receipt printer, I found this nice code to send the raw text to printer. You will have more freedom and control over the print out.

function doPrint(rawText) {
  var printWindow = window.open();
  printWindow.document.open('text/plain')
  printWindow.document.write(rawText);
  printWindow.document.close();
  printWindow.focus();
  printWindow.print();
  printWindow.close();
}


Reference

https://stackoverflow.com/questions/36570689/javascript-send-raw-text-to-printer-no-server-requests-method-calls-able-to

Notes

In the receipt printer driver, goto Advanced tab and change the driver to "generic/text only". Then, the following codes will print the raw text.

Decoupling the development of front end and back end

We used to develop the entire system using ASP.Net web form or MVC. It sounds logical to build everything with the back end coding except for some validation processes using JavaScript (which runs in the client browser).

The problem with this approach is that it's very hard to shorten the development time because the file sharing is the big headache when the team gets bigger. Parallel development requires massive collaboration.

For example, you want to develop an Online Shopping cart which has the catalog for public access. If you are using ASP.Net web form to develop the system, the front end and the back end will be either in one file (ASPX) or two files (ASPX + ASPX.CS). If you are using MVC, it's very hard to to sync the source codes among the programmer because it has controller, page, style, etc.

To enable the parallel development, the front end and the back end should be decoupled.

• The front end should be build from the scratch with HTML, CSS + JavaScript. 
• The back end will be develop in Generic Handler (ASHX) in ASP.Net/C#. This ASHX provides an interface for the client to submit their query, processes by the web server and then response back to the client.

The benefits with this approach:

• The front end developer will have the freedom changing the CSS styles without affecting the back end coding. Rearranging the layout without have to get permission from the back end programmer.
• The back end developer will have to focus on processing the incoming request and response with the appropriate data. Any changes in the back end will not affect the front end.

There is only one thing that both the front end and back end developers must agree: the API style. Whether you want the REST API or a simple URL API (please refers to System design with ASHX web services (JQuery + AJAX + partial HTML UI) ).
 
This is great. Isn't it?

Something about the z-index

In CSS, z-index is the property to control the 3D Z position of the element (for example DIV). This property is useful when you have element that has absolute or fixed position.

In the real work application, we use z-index for the date picker, time picker, numeric keypad, any popup list, prompt, etc.

Here is the find out:


1. If you set the z-index for the DIV, it works as expected. Not strange thing will happen in this simplest case.

<body>
   <div class="container1">helo</div>
<body> 

2.But, if you have the following structure, then, it might work unexpectedly.

First of all, if you set the z-index for the inner1 & inner2, the z-index is relative to container1. While container2 is relative to the body.


<body>
   <div class="container1">Container 1
      <div class="inner1">Inner 1</div>
      <div class="inner2">Inner 2</div>
   </div>

    <div class="container2">Container 2
    </div>
<body>

For example, you have the following settings for the z-index where the final output is container2 is always at the top that covers container1 and hence it covers inner1 and inner2.

container1 - z-index: 100
    inner1 - z-index: 300
    inner2 - z-index: 400

container2 - z-index: 200

All DIV elements have the following settings.

position: absolute;
top: 0;
left:0;
width:100px;
height:100px;
overflow:hidden;

Calculating age

Calculating age using moment.js is very simple:

   var birth_date = new Date(1966,1,1)
   var age = moment().diff(birth_date, 'years', true);

User interface with HTML+CSS+JS

Let's build the user interface with HTML+CSS+JS and then build the back end program with any web programming language (ASP.Net, PHP, etc) or objective-C for iOS.

This strategy decouple the front end and back end which leads to shorter development and higher customer satisfaction.

From the front end aspect:

• We build the prototype in a shorter time.
• We build a back end program using Javascript that simulate the AJAX call between the front end and back end. This script does not rely on any database and web server. It will be loaded and running within the browser context. So, the AJAX call simulation does not required a complex development environment setup.
• The prototype can be build with any tool as simple as a text file editor + a browser to test the prototype.
• The user can "see' and "feel" the prototype. It's not talking on a "paper" and the user must "imagine" how it works.
• This prototype will be uploaded to any web server for discussion purpose.
• Now, we build a more stable front end regardless of which OS platform.
• It solves the problem with "installation".

From the back end aspect:

• The back end can be built with any programming language (ASP.Net, PHP, etc) or Objective-C for iOS.
• The back end program should only provides the correct API for AJAX request and response.
• The back end program can be build parallel with the front end.

Finally, we are reusing the HTML+CSS+JS to build front for web app, mobile app and Windows client. Now, our front end designer and back end programmer can work parallel which really cut down lots of time in sync the shared source files.

Cheers!!

Avoiding uncertainty with "this"

Most of the time, we don't know what is "this"? Is it a "window", jQuery object, or what is it. It is difficult to debug and make the code to work.

One of the easiest solution that I found is to capture the context into "self" and then all public functions to be declared with the object function. For example, sayHelo() will always referring to the same context as you call the setMyName().

function myClass() {
  var self = this;
  var name;

  this.setMyName = function (s) { name = s; };
  this.getMyName = function() { return name; };
 
  this.sayHelo = function() { return self.getMyName(); };

}

var c = new myClass();
c.setMyName('Mickey');
console.log(c.sayHelo());

Spinner generator

The following website provides an easy way to generate the spinner animation in 3 output: SVG, CSS and GIF. This tool is great and very helpful.

http://loading.io/