Tag Archives: server

How to Compile JS & CSS to one file for best performance

Written by Garry Lachman (Admin). Filed under Developer Tools, JavaScript, jQuery. Tagged , , , , , , , , , , , , , . .

Hey,
To get the best performance on your website you need to reduce external call like js & css files.
I build little BASH script that compile all your files to one JS file and one CSS file.

We will use some tools like : Google Closure & dos2unix

1. Create “build” folder in your application.
2. Create the files “js_list.txt” and “css_list.txt” and write line by line all your js & css files.
3. Download Google Closure and copy the file “compiler.jar” to this folder.
4. Create the file “build.sh”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
#!/bin/bash
# (c) Copyright by Garry Lachman - http://www.garry-lachman.com
# GNU/GPL
echo "" > full.js
echo "" > full.css
# JS
echo -e "\nBuild JS\n----------------"
while read line ; do
        JS_FILES[$index]="$line"
        index=$(($index+1))
done < js_list.txt

for f in "${JS_FILES[@]}"
do
        cat "../js/$f" >> full.js
        echo ";" >> full.js
        echo -e "* $f"
done

#CSS
echo -e "\nBuild CSS\n----------------"
index=0
while read line ; do
        CSS_FILES[$index]="$line"
        index=$(($index+1))
done < css_list.txt

for f in "${CSS_FILES[@]}"
do
        cat "../css/$f" >> full.css
        echo -e "* $f"
done

echo -e "\n"
echo -n "Compile JS"
java -jar compiler.jar --language_in ECMASCRIPT5 --compilation_level WHITESPACE_ONLY --js full.js --js_output_file full-compiled.js
echo " - Done"
echo -n "CSS Dos2Unix Format"
dos2unix full.css full.css
echo -e "Moving Compiled Files"
cp full.js ../js/full.js
cp full-compiled.js ../js/full-compiled.js
cp full.css ../css/full.css

5. I use the parent folders “js” and “css” but you can change it to your folder, just replace “../js/” & “../css/” to your path
6. Executing permission:

1
chmod +x build.sh

7. Run the code

1
./build.sh

You will see the output like:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
[root@web-serv build]# ./build.sh

Build JS
----------------
* flash_wrapper/swfobject.js
* jquery.tools.local.min.js
* jquery.dropkick-1.0.0.js

Build CSS
----------------
* style.css
* components.css

Compile JS - Done
CSS Dos2Unix Formatdos2unix: converting file full.css to UNIX format ...
dos2unix: converting file full.css to UNIX format ...
Moving Compiled Files

Now check the files: full.css & full-compiled.js

Have fun :)

Share

jQuery Communicator Singleton (Manage & Cache ajax requests)

Written by Garry Lachman (Admin). Filed under JavaScript, jQuery. Tagged , , , , , , , , , , , , , . .

Hey,
I wrote this class for cache ajax request if the same request sent twice.
The second reason why i use this class is a like there is only one exit point
from the application.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
var Communicator =(function(){
    var instantiated;
    var retry = new Array();
    var cached_data = new Array();

    function init (){
        return {
            dispatch:function(url, callback){
                var self = this;
                if (Communicator.getInstance().cached_data[url])    {
                    callback(Communicator.getInstance().cached_data[url]);
                    return;
                }
                if (!retry[url])    {
                    retry[url] = 0;
                }
                var _rq = $.ajax({
                    url: url,
                    timeout: 30000,
                    success: function(_data){
                        Communicator.getInstance().cached_data[url] = _data;
                        callback(_data);
                    },
                    error: function(){
                        if (retry[url] < 3) {
                            retry[url]++;
                            dispatch(url, callback, retry[url]);
                        }   else    {
                            callback("");  
                        }
                    }
                });
            },
            cached_data: {}
        }
    }

    return {
        getInstance :function(){
            if (!instantiated){
                instantiated = init();
            }
            return instantiated;
        }
    }
})()

Using the class

1
2
3
4
5
6
7
8
9
10
11
12
Communicator.getInstance().dispatch(url,function(data){
    var error = false;
    try {
            data = eval("("+data+")");
    } catch(err)    {
        error = true;
    }

    if (!error)    {
        console.log(data);
    }                    
});

Have fun :)
Garry

Share

FMS blocked port detection – ActionScript 3

Written by Garry Lachman (Admin). Filed under ActionScript 3. Tagged , , , , , , , , , , , . .

FMS block port detection – ActionScript 3

The fms port (1935) closed on many office firewalls, the problem
is that flash had 30 sec timeout before tunnle it to port 80.
Becouse that i write little script that use socket object to test the
port and tunnle it to http when port 1935 is closed.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
package
{
import flash.events.Event;
import flash.net.Socket;
import flash.events.IOErrorEvent
import flash.events.SecurityErrorEvent

/**
* @author Garry Lachman
*
* Usage:
* FMSPortTester.TestPorts(onSuccess)
* function onSuccess(_fmsURL:String):void   {
* }
*/

public class FMSPortTester
{
public static const FMS_URL:String = "127.0.0.1";
public static const PREFIX_1935:String = "rtmp://";
public static const PREFIX_80:String = "rtmpt://";

public static const SOCKET_TIMEOUT:Number = 3;

public function FMSPortTester() {   trace("static only class"); }

public static function TestPorts(_resultURLCallBack:Function):void  {
// Create socket connection to fms to check the ports
var socketTest:Socket = new Socket();
socketTest.connect(FMS_URL, 1935);
socketTest.addEventListener(Event.CONNECT, onSocketConnected);
socketTest.addEventListener(IOErrorEvent.IO_ERROR, onSocketError);
socketTest.addEventListener(SecurityErrorEvent.SECURITY_ERROR,onSocketError);
socketTest.timeout = (SOCKET_TIMEOUT * 1000);

// is connected, fms ports ok
function onSocketConnected(_e:Event):void   {
_resultURLCallBack(PREFIX_1935 + "" + FMS_URL);
}

// on error, fms ports closed
function onSocketError(_e:*):void   {
_resultURLCallBack(PREFIX_80 + "" + FMS_URL);
}
}
}
}
Share