Project Level Extra Properties in Gradle Script

We can have project level 'extra' properties in gradle. These properties are accessible throughout the script.
To set some properties, we can do it as

project.ext {
  myVar = "A variable"
  isProcessStarted = null
}

Some examples of using these properties are given below.

/** Task which starts some process */
task startProcess() << {
  project.isProcessStarted = true
}
/** Task which stops a process */
task stopProcess() << {
  project.isProcessStarted = false
}
/* Stop the process only if the process was started */
stopProcess.onlyIf { project.isProcessStarted == true }

Add Host Entries in Android Emulator

You can add host entries in the android emulator using the following commands.
1. You need to mount the android emulator's file system in read write mode.
2. Then upload the modified host entry to /system/etc/

adb shell mount -o rw,remount -t yaffs2 /dev/block/mtdblock0 /system #mount as rw
adb push hosts /system/etc/ #where hosts file contain our modified host entries

However the changes does not seem to persist. So we need run this script every time we start the emulator.

JQM: Accordian - Change Right Plus & Minus Icon to Arrow Icons

The recommended way to change the plus and minus icons of the collapsible sets (accordian) in jQuery Mobile is to specify data-expanded-icon and data-collapsed-icon attribute to the div. But sometimes it does not change the icons. In such cases we can change it manually by overriding the .ui-icon-plus and .ui-icon-minus classes giving the background-position for the down and up arrows. Add a class eg-accordion to the div with data-role="collapsible-set" and see the below CSS overrides.
eg:

.eg-accordion .ui-icon-plus {
    background-position: -216px 50%; /*override the '+' with down arrow*/
}
.eg-accordion .ui-icon-minus {
    background-position: -180px 50%; /*override the '-' with up arrow*/
}

jQuery: Show or Hide an Element on Click

To show or hide an element when use click on a button, you can use jQuery's .toggle() method. It toggles the display of that node. It adds a style display: none; and display: block alternatively, with each click.

//js
//listen for the button click event
$('.myElemBtn').on('click', function (e) {
    $('.myElem').toggle();  // toggle visibility
}

jQuery: Get the Closest Node From the Current Node

Say that you are in an event handler function and you want to get the closest element that matches certain conditions from the current event's target node. You can use .closest() method provided by jQuery.

<!-- html -->
<div class="topElem" data-id="1" >
    <div>First child elem of first div</div>
    <img class="imgElem" src="pic.png">/>
</div>
<div class="topElem" data-id="2" >
    <div">First child elem of second div</div>
    <img class="imgElem" src="pic.png">/>
</div>

Here we want to get the value from the data-id attribute of the parent div (containing class topElem) when the user clicks on the image.

//js
// event listener
$('.imgElem').on('click', function (e) {
    $(e.target).closest("div.topElem");  // will give you the parent div with the class 'topElem'
    $(e.target).closest("div.topElem").data('id'); //will give you the value of the data-id attribute
});

.closest() returns only one element matching your selection criteria where as .parents() returns all the matched elements. Also there is significant difference in the way that both these methods work. .parents() travels all the way up to the DOM's root element and then filters the collection. .closest() travels the hierarchy until it finds the matched element and then returns. So if you want to get only one element, then .closest() is more efficient.

Using .parents() the above code would be

// js
// event listener
$('.imgElem').on('click', function (e) {
    $(e.target).parents("div.topElem");  // will give you the parent div with the class 'topElem'
    $(e.target).parents("div.topElem").data('id'); //will give you the value of the data-id attribute
});