MyThinkPond

On Java, Python, Groovy, Grails, Spring, Node.js, Linux, Arduino, ARM, Embedded Devices & Web

  • Recent Posts

    August 2017
    M T W T F S S
    « Jul    
     123456
    78910111213
    14151617181920
    21222324252627
    28293031  
  • Subscribe Options

  • Awards

    JavaCodeGeeks
  • Most Valuable Blogger @ DZone
  • Enter your email address to subscribe to this blog and receive notifications of new posts by email.

    Join 172 other followers

  • Follow MyThinkPond on WordPress.com
  • Blog Stats

    • 364,737 hits
  • General Options

Archive for the ‘Javascript’ Category

Javascript: Embrace Arrow Functions

Posted by Venkatt Guhesan on May 3, 2017

Great article on JavaScript currying and arrow functions.

Here is an example of a function in Javascript:

const secret = function (msg) {
    return function () {
        return msg;
    };
};

The same function as currying or arrow function:

const secret = msg => () => msg;

To learn more about the basics, visit the link below.
Source: Familiarity Bias is Holding You Back: It’s Time to Embrace Arrow Functions

Posted in ES6, Javascript | Tagged: , , , | Leave a Comment »

Elements of JavaScript Style – JavaScript Scene – Medium

Posted by Venkatt Guhesan on May 3, 2017

Great article focusing on Javascript style. Provides some good examples of JavaScript coding styles, practices, and things to avoid.

The examples includes:

  1. Make the function the unit of composition. One job for each function.
  2. Omit needless code.
  3. Use active voice.
  4. Avoid a succession of loose statements.
  5. Keep related code together.
  6. Put statements and expressions in positive form.
  7. Use parallel code for parallel concepts.

Source: Elements of JavaScript Style – JavaScript Scene – Medium

Posted in EL6, Javascript, Scripting | Tagged: , , , | Leave a Comment »

Angular Modules vs ES6 Modules – DZone Web Dev

Posted by Venkatt Guhesan on March 13, 2017

In this post, you’ll find a quick tutorial explaining the difference between Angular Module and ESG Modules, and how to best use each of these platforms.

Here is a quick summary:

ES6 Module Example:


import { sqrt } from 'math-utils';

const addition = (val1, val2) => val1 + val2;
const subtraction = (val1, val2) => val1 - val2;
const multiplication = (val1, val2) => val1 * val2;
const calculateSquareRoot = (val) => sqrt(val);

export { addition, multiplication }

Angular Module Example:


@NgModule({
imports: [ BrowserModule, HttpModule, FormsModule ],
declarations: [ PersonComponent, ContactComponent, ContactListComponent ],
providers: [ PersonService, ContactService ],
exports: [ ContactListComponent, ContactComponent ]
})

export class ContactModule {}

Source: Angular Modules vs ES6 Modules – DZone Web Dev

Posted in Angular, ES6, Javascript | Tagged: , , , | Leave a Comment »

An insecure mess: How flawed JavaScript is turning web into a hacker’s playground | ZDNet

Posted by Venkatt Guhesan on March 13, 2017


Researchers say tens of thousands of sites are using JavaScript libraries that are years old and contain publicly known vulnerabilities.

An analysis of over 133,000 websites has found that 37 percent of them have at least one JavaScript library with a known vulnerability.

There are no reliable vulnerability databases, no security mailing lists maintained by library vendors, few or no details on security issues in release notes, and often, it is difficult to determine which versions of a library are affected by a specific reported vulnerability.

Source: An insecure mess: How flawed JavaScript is turning web into a hacker’s playground | ZDNet

Posted in Javascript, Security | Tagged: , , , , | Leave a Comment »

How to package your node.js application for deploying it in an offline environment?

Posted by Venkatt Guhesan on October 14, 2016

node2Personally speaking, I prefer to have a self-contained bundle with all the artifacts and modules that might be required to deploy an application (not just Node.js application) in Production. In that way, I know exactly the bits that were installed and nothing more and nothing less. It also eliminates the availability of the NPM modules and network connectivity issues, etc. The following procedure shows you how to create a simple “Hello World” Node.js application with one dependency – Express.js (which has dependency on other modules) and to bundle (pack) it and deploy it to an environment that may not have an internet connection.

Brief Summary:
“bundledDependencies”: [“package-name1”] in the package.js does the trick in combination with “npm pack” and “npm install <Project>.tar.gz

Below is the step-by-step walk-thru.

So let’s get started:
In Development Computer:

Make sure you have Node.js installed and you can verify the installation by running:

$node -v
v6.8.0

Now let’s get started on a simple “Hello World” – Node.js project:

Follow the steps outlined here for setting up a simple Hello World using Node.js and Express. In my case, running “npm install express –save” created additional module dependencies on the following:

$npm install express --save
guhelloproject
└─┬ express@4.14.0
├─┬ accepts@1.3.3
│ ├─┬ mime-types@2.1.12
│ │ └── mime-db@1.24.0
│ └── negotiator@0.6.1
├── array-flatten@1.1.1
├── content-disposition@0.5.1
├── content-type@1.0.2
├── cookie@0.3.1
├── cookie-signature@1.0.6
├─┬ debug@2.2.0
│ └── ms@0.7.1
├── depd@1.1.0
├── encodeurl@1.0.1
├── escape-html@1.0.3
├── etag@1.7.0
├─┬ finalhandler@0.5.0
│ ├── statuses@1.3.0
│ └── unpipe@1.0.0
├── fresh@0.3.0
├── merge-descriptors@1.0.1
├── methods@1.1.2
├─┬ on-finished@2.3.0
│ └── ee-first@1.1.1
├── parseurl@1.3.1
├── path-to-regexp@0.1.7
├─┬ proxy-addr@1.1.2
│ ├── forwarded@0.1.0
│ └── ipaddr.js@1.1.1
├── qs@6.2.0
├── range-parser@1.2.0
├─┬ send@0.14.1
│ ├── destroy@1.0.4
│ ├─┬ http-errors@1.5.0
│ │ ├── inherits@2.0.1
│ │ └── setprototypeof@1.0.1
│ └── mime@1.3.4
├── serve-static@1.11.1
├─┬ type-is@1.6.13
│ └── media-typer@0.3.0
├── utils-merge@1.0.0
└── vary@1.1.0

Now edit, package.js and add define the bundleDependencies section like so:

{
  "name": "guhelloproject",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.14.0"
  },
  "bundledDependencies": ["express"]
}

Let’s create index.js

var express = require('express');
var app = express();

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

Test the code locally in development to ensure that it works.

$node index.js
Example app listening on port 3000!
# You should see "Hello World", if you point your browser to http://localhost:3000/

Now for the bundling magic.

$npm pack
guhelloproject-1.0.0.tgz

In your Production server (which has no internet connection):

  1. Make sure you install Node.js so that the Node executable is available. Verify once again by running “node -v” (as shown above)
  2. Move the “guhelloproject-1.0.0.tgz” file to the Production server.
$npm install guhelloproject-1.0.0.tgz
# This unzips the bundle into a 'node_modules' directory 
$cd cd node_modules/guhelloproject/
$node index.js
Example app listening on port 3000!

Point your browser to http://:3000/ and you should see “hello world”.

Posted in Javascript, Node JS | Tagged: , , | Leave a Comment »

Getting started with vertx (vert.io) – an alternative to node.js

Posted by Venkatt Guhesan on November 15, 2012

Article Getting started with vertx (vert.io) – an alternative to node.js – has been posted on the new website at:

http://www.mythinkpond.com/getting-started-with-vertx-vert-io-an-alternative-to-node-js/

Posted in Node JS, VertX | Tagged: , , | Leave a Comment »

Getting started with vertx (vert.io) – an alternative to node.js

Posted by Venkatt Guhesan on November 15, 2012

Lately there has been a lot of synergy and publicity around node.js (especially if you want to utilize the robust features of a JavaScript language on the server-side). If you are not familiar with this, I would suggest you look at the following link:

Node.js – Event-driven I/O server-side JavaScript environment based on V8.

If you are a Java developer and as you try out the examples, you will notice how this will be a great addition into your infrastructure. But then as you delve deeper, you may notice some of the short comings such as having to support another full stack of package manager (Node uses NPM as it’s package manager) and it has it’s own deployment, unit testing, etc. to support. And then the thought might occur that – what-if I had the same infrastructure available natively in the Java stack??? Would that not solve a lot of the logistical challenges? If your answer is “yes”, then you should look at this library…

VertX from vert.io – Effortless asynchronous application development for the modern web and enterprise

The VertX solution is built upon (and requires) a JDK/JRE under the skin. But then because Java support other languages under it’s skin, you can leverage the benefits of languages such as – JavaScript, CoffeeScript, Ruby, Python, Groovy or Java.

According to the VertX website – it says and I quote “Write your application components in JavaScript, CoffeeScript, Ruby, Python, Groovy or Java. Or mix and match several programming languages in a single app.”

Here’s their “Hello-World”:

load('vertx.js')

vertx.createHttpServer().requestHandler(function(req) {
    var file = req.path === '/' ? 'index.html' : req.path;
    req.response.sendFile('webroot/' + file);
}).listen(8080)

As always, you need to evaluate this option to see if this solution fits in your infrastructure and it’s pros and cons.

If you find this article useful, share this with others and/or subscribe to this blog.

Posted in Node JS, VertX | Tagged: , , , | Leave a Comment »

Copy to Clipboard – a browser agnostic way to script this functionality

Posted by Venkatt Guhesan on October 31, 2011

Have you tried to present some code or sample content for the end-user that you wanted to allow them to easily copy to their clip-board?

If you use the JQuery Javascript library then you can use the plugin called zClip available here – zClip

Using zclip you can attach an event to a button or a text-area such that when the event occurs, the content is copied to the clipboard.

Well, if you are not using JQuery as the swiss-army knife for your Javascript toolkit, then here is an alternative that can come in handy:

It’s called “ZeroClipboard” and it’s available from code.google.com

Both tools do the following, they replace or overlay a flash plugin on top which then passes the needed content to the native clipboard. Both solutions do not have a graceful way to do copy to clipboard especially if you do not have flash enabled or installed for your platform – browser.

As the browser matures, maybe this functionality might be allowed natively from a Javascript code but until then, the ZeroClipboard and zClip are the best ways to implement a “copy-to-clipboard”.

 

Posted in Javascript, JQuery | Tagged: , , , , , , | Leave a Comment »

Importance of named windows and how to close all child windows

Posted by Venkatt Guhesan on January 16, 2011

One of the questions posed by a friend of mine is this.

In a typical website-application, you spawn a few child windows here and there and because of the nature of the application, you do not have a handle to all the child windows you spawn open… Then how do you close all the child windows that belong to your application when the user logs out of your application or closes the main window with the intent that he/she wants to log out?

Well, Javascript “Named” widows to your rescue.

Let’s say you have a parent page/application that has a bunch of links:


<script type="text/javascript">
function openChildWindow(windowID){
	window.open("./WindowOne.html",'MYAPP_'+windowID,'height=400,width=200');
}
</script>

	<a href="Javascript: openChildWindow(1);">Open child window 1</a>.

	<a href="./WindowOne.html" target="MYAPP_2">Open child window 2</a>.

	<a href="Javascript: openChildWindow(3);">Open child window 3</a>.

	<a href="Javascript: openChildWindow(4);">Open child window 4</a>.

	<a href="./WindowOne.html" target="MYAPP_5">Open child window 5</a>.

	<a href="Javascript: openChildWindow(6);">Open child window 6</a>.

	<a href="./WindowOne.html" target="MYAPP_7">Open child window 7</a>.

	Now goto <a href="./secondPage.html">second page</a> which looses all knowledge of these windows...

Now in the secondPage.html

<script type="text/javascript">
function closeAllChildWindows(){
	
	for (var i=0; i<10; i++){
		var childWindowName = "MYAPP_"+i;
		var handle = window.open("",childWindowName);
		if (handle && handle.open && !handle.closed){
			handle.close();
		}
	}
	
}
</script>
<a href="Javascript: closeAllChildWindows();">Close All Child Windows</a>.

Essentially the code looks for all windows with a following convention. In this case, all window-names that start with “MYAPP_*” where *=[0 to 10]. You can do the same trick to see if a window is already opened up under a name so that you can open up a window under a new name but based on your convention.

You can download the sample here.

Cheers!

Posted in Javascript | Tagged: , , , , | Leave a Comment »

jQuery Accordian Internet Explorer 6 Issue

Posted by Venkatt Guhesan on January 19, 2010

If you are using the Accordian UI from jQuery and your accordion body (the content in div.ui-accordion-content tag) contains anchor tags then you might experience a few glitches in IE6 where the display might not render properly when selected.

One way to address this issue is the following:
Add this to the header…


<style>
.ui-accordion-content{ zoom: 1; }
</style>

This will force a refresh of the content when expanded.

The other thing that you may not have is a doctype defined in the header.

Here’s an example of a DOCTYPE defined:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
...

Recommended list of DOCTYPES available.

If you find this article useful, consider signing up for my RSS feed or Email Newsletter. See links on the right side.

Posted in Javascript, JQuery | Leave a Comment »