implementation

Things to consider when choosing new technology or software in enterprise

27 Feb , 2015  

There are few things that we can use as standar for choosing or adopting new technology in our company.

The List

We gave each team a list of features to look for in their assigned templating solution. The idea was to fill out a score, from one (poor) to five (excellent), for each item:

  1. DRY: how DRY is the the technology? is there support for code-reuse and partials?
  2. i18n: is there support for translations and multiple languages?
  3. Hot reload: are changes visible immediately or is there a compile/deploy cycle?
  4. Performance: how long does it take to render in the browser and server?
  5. Ramp-up time: how is the learning curve?
  6. Ramped-up productivity: once you’ve ramped-up, how fast can you build things?
  7. Server/client support: can support both client-side and server-side?
  8. Community: is there an active community using this project? Can you google issues?
  9. Library agnostic: are there dependencies on other libraries?
  10. Testable: how hard is it to write unit and integration tests?
  11. Debuggable: is it possible to step through the code while it’s running to track down errors?
  12. Editor support: is there an editor with auto-complete, syntax highlighting, error checking, etc?
  13. Maturity: is this a relatively stable project or still experimenting and churning?
  14. Documentation: how is the documentation?
  15. Code documentation: do the software encourage/require documentation/comments?

#inspired by https://engineering.linkedin.com/frontend/client-side-templating-throwdown-mustache-handlebars-dustjs-and-more

Javascript

Example make reusable javascript app for modal progress bootstrap

26 Feb , 2015  

This is example build reusable app in Javascript for modal progress in Boostrap:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/**
 * Re-usable app for modal box progress
 */
var progressBox;
progressBox = progressBox || (function() {
    var pleaseWaitDiv =  $('<div class="modal hide" id="pleaseWaitDialog" data-backdrop="static" data-keyboard="false"><div class="modal-header"><h1>Processing...</h1></div><div class="modal-body"><div class="progress progress-striped active"><div class="bar" style="width: 100%;"></div></div></div></div>');
    return {
        showPleaseWait: function() {
            pleaseWaitDiv.modal();
        },
        hidePleaseWait: function() {
            pleaseWaitDiv.modal('hide');
        },
    };
})();

To use, we just need to :

1
progressBox.showPleaseWait();

Javascript

How to hide search toolbar in Datatables

25 Feb , 2015  

Here is a quick snippet to hide search toolbar in datatables and working along with Bootstrap

1
2
3
4
var settings = {
            sDom: 'lrt<"col-sm-6"i><"col-sm-6"p>',
            serverSide : true,
...

Javascript

Set bootstrap datetimepicker input value date

25 Feb , 2015  

Here is a quick way to set value bootstrap datetimepicker input with date object:

1
2
3
4
5
6
$("#id_start_date, #id_end_date").datetimepicker({
    format: "DD-MM-YYYY hh:mm"
});

$('#id_start_date').data("DateTimePicker").setDate(start);
$('#id_end_date').data("DateTimePicker").setDate(end);

Javascript

Datatables make link in row records

20 Feb , 2015  

Here is a quick snippet to make record as links in Datatables :

1
2
3
4
5
6
7
8
columns : [
              {
                "mRender": function ( data, type, full ) {
                 // 'full' is the row's data object, and 'data' is this column's data
                 // e.g. 'full[0]' is the comic id, and 'data' is the comic title
                 return '<a href="' + full['uuid'] + '">' + full['created_by']+ '</a>';
               }
];

Server

Change / Reset / Update Key Pem Amazon EC2 Simple

19 Feb , 2015  

Here are simple tricks to change or update key PEM in Amazon EC2. At this example, I’m using Ubuntu.
To reset or change key pem, all you need just follow this simple steps:

Let say, currently we have SERVER_01 and KEYPEM_01.

1
2
3
4
5
6
1. Launch a new instances using "launch more like this" (right-click on instances)
2. Create a new server SERVER_02 and new keypem KEYPEM_02
3. Copy your KEYPEM_01 into SERVER_02 using "rsync"
4. Login into SERVER_02, then "rsync" ".ssh/authorized_keys" to SERVER_01 "/.ssh/authorized_keys"
5. Basically, we just replace the "authorized_keys" from new to old
6. We can login to SERVER_01 using KEYPEM_02

Simple! :D

Django

Django check related model and check field if exists in model

19 Feb , 2015  

We can check if the field is related model in Model by :

1
model._meta.get_field("name_of_field").get_internal_type() == "ForeignKey"

Then we can check if the field name is exists in model by :

1
model._meta.get_field_by_name(_name)

Some example code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
if self.model._meta.get_field(field_name).get_internal_type() == "ForeignKey":
    # get related model
    # http://stackoverflow.com/questions/10347210/django-foreign-key-get-related-model
    related_model = self.model._meta.get_field(field_name).rel.to

    # Checking the default field for related model
    check_name = None
    for _name in ['name', 'code']:
        try:
            related_model._meta.get_field_by_name(_name)
        except FieldDoesNotExist:
            pass
        else:
            check_name = _name
            break

Python

Mapping Ajax Filter and Search Datatables to Django with Rest Framework

16 Feb , 2015  

Datatables sending ajax parameter for filtering and search in very complicated way. Which we need to mapping and parse based on each column.

Some example request :

1
http://localhost:8000/api/somemodel/?format=json&sEcho=4&iColumns=7&sColumns=%2C%2C%2C%2C%2C%2C&iDisplayStart=0&iDisplayLength=10&mDataProp_0=&sSearch_0=&bRegex_0=false&bSearchable_0=true&mDataProp_1=cif&sSearch_1=22222&bRegex_1=false&bSearchable_1=true&mDataProp_2=name&sSearch_2=&bRegex_2=false&bSearchable_2=true&mDataProp_3=gender&sSearch_3=&bRegex_3=false&bSearchable_3=true&mDataProp_4=ktp&sSearch_4=&bRegex_4=false&bSearchable_4=true&mDataProp_5=location&sSearch_5=&bRegex_5=false&bSearchable_5=true&mDataProp_6=&sSearch_6=&bRegex_6=false&bSearchable_6=true&sSearch=&bRegex=false

I have no idea about where the filtering and search query come from in this request. Therefore, we need to auto-mapping it by :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
import re
from urlparse import parse_qs

"""Filtering get params from datatables and mapping into django filter"""
def filter_request(self):
    # Filtering input
    input_request = parse_qs(self.request.GET.urlencode())
    query_dict = {}
   
    for key, value in input_request.iteritems():
        if(re.search('sSearch_', key)):
            if value:
                key_index = input_request.get('mDataProp_%s' % key.split('_')[1])

                if key_index is not None:
                    query_dict[key_index[0]] = value[0]

    return query_dict

And we get nice results :

1
{u'some_field': u'some_value', ...}

Uncategorized

Disable sort on first column in Jquery Datatables

15 Feb , 2015  

Dunno if this is bug or not, but disable sort in HTML nor Javascript will not affect for first column sorting in Datatables. The solution just define bSort = false

1
2
3
4
5
6
var table = $('#table-index').dataTable({
            serverSide : true,
            sAjaxSource : url,
            autowidth : false,
            fnServerData : setupAjax,
            bSort: false,

Uncategorized

Solve ScrollTop Jquery not working in Boostrap because overflow:auto

14 Feb , 2015  

Yes, ScrollTop Jquery not working in Boostrap because overflow:auto. To solve this, we need to use div that using “overflow:auto” and solve by :

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">
           $(document).ready(function() {
               
                /* smooth scrolling for scroll to top */
                // scroll to top action
                $('a.scroll-top').click(function(event) {
                    jQuery('#main').animate({
                         scrollTop: jQuery('#main').scrollTop() + jQuery('#main').position().top - 3500
                     }, 500);
                });
            });
</script>

Uncategorized

Solve there was problem sending the command to the program excel

2 Feb , 2015  

When open excel files, I got this errors :

1
there was problem sending the command to the program

To solve this issues in Windows :

1. launch Microsoft Excel

2. Go to File -> Options -> Advanced

3. Scroll down and find “Ignore other application that use DDE” (see images below) and tick them

Capture

Problem solved!