HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <script type="text/javascript" src="/jquery-2.1.4.js"></script>
    <script type="text/javascript" src="/index.js" defer></script>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <div id="withoutPromise">
        <b>Example without promise:<p/></b>
    </div>

    <div id="withJqueryPromise">
        <b>Example with jQuery promise:<p/></b>
    </div>

    <div id="pureJavaScriptPromiseWithoutJquery">
        <b>Example with pure JavaScript promise (without jQuery):<p/></b>
    </div>

</body>
</html>

JS:

/*global console, $, XMLHttpRequest*/
(function () {
    "use strict";

    function fillResult(id, data) {
        $.each(data, function (key, val) {
            $(id).append("key: " + key + "<br/>value: " + val + "<p/>");
        });
    }

    function fillPromiseResult(data) {
        $.each(JSON.parse(data), function (key, val) {
            $('#pureJavaScriptPromiseWithoutJquery').append("key: " + key + "<br/>value: " + val + "<p/>");
        });
    }

    $.getJSON("index.json", function (data) {
        fillResult("#withoutPromise", data);
    });

    $.getJSON("index.json").done(function (data) {
        fillResult("#withJqueryPromise", data);
    });

    function makeRequest() {
        return new Promise(function (resolve, reject) {
            var myJson = new XMLHttpRequest();
            myJson.open("GET", "http://localhost:63342/promiseExample/index.json");

            myJson.onload = function () {
                if (this.status >= 200 && this.status < 300) {
                    resolve(myJson.response);
                } else {
                    reject(this.statusText);
                }
            };

            myJson.send();

        });
    }

    makeRequest().then(fillPromiseResult, function (errorMsg) {
        $("#pureJavaScriptPromiseWithoutJquery").append(errorMsg);
    }).catch(function (err) {
        console.log("Error: " + err);
    });
}());

JSON:

{
  "first": "first test",
  "second": "second test",
  "nested test": [
    {"first nest": "nest one"},
    {"second nest": "nest two"}
  ]
}

Mostly I was using this example. Notice that it seems that resolve method of promise can accept only one parameter, that is why I needed to create function special for promise. Example download from here.

Example of inline if in javascript:

var a = 30;
var b = 40; v
ar c = ((a < b) ? 2 : 3);

Copy / pasted from here.

Example of inline checking of null:

var whatIWant = someString || "Cookies!";

Copy / pasted from here.

Idea is to display image as a "brush", which means instead of black (or any other color) line to have image.

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="/index.css">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <div class="bg sprites sprite_338x338_gc4_ring"></div>
    <canvas id="myCanvas" width="338" height="338"></canvas>
</body>
    <script>

        var myImage = new Image();

        myImage.src = "338x338_repeating_gc4_dim_hatch.png";

        myImage.onload = function () {
            var myCvns = document.getElementById("myCanvas");
            var myCntx = myCvns.getContext("2d");
            var pat = myCntx.createPattern(myImage, "no-repeat");

            myCntx.lineWidth = 10;
            //myCntx.strokeStyle = "red";
            myCntx.strokeStyle = pat;
            myCntx.arc(168, 170, 165, 0, 8, false);
            myCntx.stroke();
        }

    </script>
</html>

Notice line: 

myCntx.strokeStyle = pat;

With that we are actually using our pattern to display image. Instead of pat write "red", for example, to see the difference.

Live example:

This morning I was reading this web site, about getters and setters in JavaScript, and here I want to copy / paste code which I saw there:

function wrapValue(_value) {
   return {
      get value() { return _value; },
      set value(newValue) { _value = newValue; }
   };
}
 
var x = wrapValue(5);
console.log(x.value); // output 5
x.value = 7;
console.log(x.value); // output 7