JavaScript - All your code are belong to us

Create NodeJS command line script or app

Wojtek — Sat, 15 Dec 2018 17:51:32 GMT

I wanted to write a simple script that would convert multiple files from one encoding to another. I didn't want anything big or running in the browser. Command line script seemed like the right approach. Coming from a web developer background my first thought was a script written in PHP and converted to a command line app. Just saying that sounds awful. After a bit of googling, it turned out NodeJS is surprisingly easy and straightforward to write command line apps.

Initiate the app

Running npm init will ask you a few basic questions about your app and result in creating package.json file.

$ npm init

name: cldemo
version: 0.0.1
description: Simple command line script
entry point: index.js
test command:
git repository:
keywords:
author: SixBytesUnder
license: (ISC)

Edit the newly created package.json and add "bin" section. The property key will be the command you'll type in to run your app. In our case cldemo. The value is a relative path to the entry point file. That's the file our code will reside in.

...
"author": "SixBytesUnder",
"license": "ISC",
"bin": {
  "cldemo": "./index.js"
}

Next, create index.js file or any other file you have provided as an "entry point" above. Paste example code show below.

#!/usr/bin/env node
'use strict';

// your whole code goes here
console.log('Hello World!')

The most basic command line script is done.

Register your script

Next command will register your app as a shell command. Note, on Windows you need to open command prompt as an admin, navigate to the home directory of your app and run below.

$ npm install -g

That's it, it's a simple as that. Now you should be able to run your script from command line globally.

$ cldemo
Hello World!

If you make any changes to your source files, remember to register your app again, so that latest version is copied to the global path.

To uninstall your script just type:

$ npm uninstall -g cldemo

Multiple dynamic Facebook like buttons on one page

Wojtek — Thu, 30 Jun 2011 13:11:04 GMT

Putting one like button on a page is very simple and comes down to pasting the code from Facebook like button generator found here.
It gets a bit more complicated when we need to add more than one button on a page along with a dynamically generated content. Best example I can think of is a search results page where every search result has it’s own like button.

Prepare

Put this somewhere in your page. Official Facebook documentation changes it’s recommendation from time to time, so let’s say just put it right after opening tag.

Paste your Like buttons code

Initialize Like buttons

In your JavaScript code after inserting all the fb:like tags you need to initialize all those buttons. You can do that by running below code

window.fbAsyncInit = function() {
  FB.init({appId: 'your_app_id', status: true, cookie: true, xfbml: true});
};
(function() {
  var e = document.createElement('script');
  e.async = true;
  e.src = document.location.protocol + '//connect.facebook.net/en_US/all.js';
  document.getElementById('fb-root').appendChild(e);
}());

Remember to change "your_app_id" to your actual app id.

Hot off the workshop vol. 2

Wojtek — Tue, 22 Mar 2011 22:45:50 GMT

Website redesign for TK Maxx. Launched just yesterday.
Venda coding all the way in the back end and HTML, JavaScript and CSS in the front end.
Visit live site

What I’ve learnt

The biggest challenge was to make the site work in Internet Explorer 6 and 7. One particularly annoying issue was to make the logo stay on top of the sliding main homepage image. All other browsers were fine, but in IE6 and 7 the logo was hidden behind the image.

Logo behind the image

Logo on top of the image

The trick was simple yet not obvious.

containing the logo needs not only its z-index set to a higher value than sliding image, but also we have to make sure IE treats it seriously and make our CSS rule important.

#logo { z-index: 1000; }

Above will not work whereas below will work like a charm.

#logo { z-index: 1000 !important; }

Hot off the workshop vol. 1

Wojtek — Wed, 23 Feb 2011 11:51:53 GMT

Just launched. TK Maxx and Red Nose Day campaign applications.

Facebook quiz

Fun quiz to find out your perfect Red Nose Day t-shirt.
View site

Website application

Upload you photo with Flash uploader, resize it and pan it around with JavaScript then save your results with PHP.
View site

Self executing function in JavaScript

Wojtek — Thu, 30 Sep 2010 11:37:51 GMT

In my last project I needed a function in JavaScript that will execute itself as soon as it’s ready. My first idea was something like that:

// declare function
function myFunction() {
  alert('Hello world!');
}
// run it when DOM is ready with help of jQuery
$(document).ready(function() {
  myFunction();
});

but in the back of my mind I knew there is a better way, without any dependancies. A little bit of googling resulted in something unbelievably simple like this:

(function() {
  alert('Hello world!');
})();

If you want, you can pass arguments as you’d normally do:

(function( arg ) {
  alert('Hello world! '+arg);
})(9999);
// result: "Hello world! 9999"

Quick and simple 🙂

JavaScript, return index of an element in array

Wojtek — Mon, 30 Aug 2010 19:41:20 GMT

Recently I’ve been working on a project with HTML5's tag event handling and I needed to check if an element exists in the array. Quick googling resulted in neat native JavaScript method Array.indexOf. It returns the first index at which a given element can be found in an array, or -1 if it is not present. It all worked just fine in Firefox, Chrome and such.
Why wasn’t I surprised when my script behaved a bit weird in Internet Explorer. After many hours of "fun" with IE JavaScript debugger, I found that none of IE versions support the Array.indexOf method.

Thanks to this post I was able to quickly fix it by adding below code to my script.

if(!Array.indexOf) {
  Array.prototype.indexOf = function(obj) {
    for(var i=0; i


and the world was beautiful again.



Simple JavaScript popup window
Wojtek — Sat, 19 Apr 2008 13:43:33 GMT
Over the years I used a lot of JavaScript functions to open PopUp windows. Some time ago I wrote this simple function and I use it everywhere where I need to open a new window.

Add the following to your JavaScript file or embed it in the  tag somewhere on your website:
function popUp(strURL, strName, strType, strTop, strLeft, strWidth, strHeight) {
  var strOptions = "";
  if (strType == "console") strOptions = "resizable, top="+strTop+", left="+strLeft+", width="+strWidth+", height="+strHeight;
  if (strType == "fixed") strOptions = "status, top="+strTop+", left="+strLeft+", width="+strWidth+", height="+strHeight;
  if (strType == "elastic") strOptions = "toolbar, menubar, scrollbars, resizable, location, top="+strTop+", left="+strLeft+", width="+strWidth+", height="+strHeight;
  var newWin = window.open(strURL, strName, strOptions); newWin.focus();
}

and to run it simply write:
your link

You can easily pass variables to this file like that:
your link

Enjoy!