Blogging with StackEdit

Table Of Contents:

- Editing the Post
- Publishing Your Post

Would you like to add posts to your blog with a cool editor? Do you want to publish in Blogger, WordPress, Tumblr, etc.?
Try StackEdit Click the link you’ve just seen, and start editing a markdown document. Forget about switching from WYSIWYG to HTML and back. Enjoy a split-screen instead: one side is where you type in markdown format, and the other is the WYSIWYG result.

Editing the Post

Editing a post is simpler than editing an HTML page, and sometimes even simpler than working with the text editor provided by the blogging site. For example, if you add code to your post, just write it between two lines starting with three back-ticks (back-quotes).
For example:
‘‘‘
var j=3;
‘‘‘
will be displayed as:

var j=3;

To display headers of level H1 or H2, type a line of equal-signs or dashes respectively under tho header text.
For H1 thru H6, begin the lines with number of pounds equal to the level (#, ##, …, ######).
Place your bold text between two pairs of asterisks (**bold text**).
Place your italic text between single asterisks or underscores. (_italic_).
Hyperlinks: there are two ways to add them, one is to simply type the URL, for example ‘http://example.com, the other is to type the text in brackets, and the link in parentheses, for example: [Example Site](http://example.com).

You can learn more about markdown syntax, by clicking the syntax icon in from the floating menu at the bottom:

Publishing Your Post

Before publishing, let’s set variables, such as tags. Type your variables, between two lines, consisting of three dashes as follows:
—
variable: value
—
For example:
—
tags: tag1, tag2, tag3
—
You can see which variables you can set, when you decide where to publish your post.
To publish a post, click on the ‘#’ menu, and choose publish as shown in the following image:
Publish

After choosing the site to which you want to publish, click OK or Cancel (if you want to set the interpreted variables, for example.)
Publish

NOTE: It is recommended to upload images to the site before including it in your document.

Now, you can use StackEdit to update your post.
Enjoy!

Written with StackEdit.

Static Variables in JavaScript

How do you declare a static variable in a JavaScript function?
Not with the word “static“.
In JavaScript “function” is a variable type similar to “object“.
The difference is that the reference to a function inside itself is not this but arguments.callee.
An example of using arguments.callee is the following function that returns itself:

function func(){
    return arguments.callee;
}

Adding Static Variables

You can add arguments to arguments.callee. To initialize it the first time, check first if it is not defined. For example:

if (typeof(arguments.callee.myStaticVar)!="undefined")
    arguments.callee.myStaticVar=0;

Following is an example function in [rhino(http://rhino.org) JavaScript(run from the command line):

    function _example(){
        var thisFunction = arguments.callee;
        if (!thisFunction.static){
            thisFunction.static=0;
        }
        ++thisFunction.static;
        print("This function has been called: " + thisFunction.static + " times");
    };

In this example, you can change the static variable’s value without calling the function using _example.static = "some value";.

To prevent this, encapsulate your function using a function called once, for example:

(function(){
    function _example(){
        var thisFunction = arguments.callee;
        if (!thisFunction.static){
            thisFunction.static=0;
        }
        ++thisFunction.static;
        print("This function has been called: " + thisFunction.static + " times");
    };

    example=function(){
        _example();
    }
})();

Now, each time example() is called, it will increment the variablestatic, but the variable cannot be incremented without calling example because _example is private.

Written with StackEdit.

StackEdit: Markdown Editor

Hello, World!

I am a blog post written in Markdown, and sent from the StackEdit editor.

Do you know those files with suffix ‘.md’? They are markdown documents, and they are easy to write and easy to read because they don’t have to contain HTML tags!

Here’s an example of how to add a link:

Type “[The Example Site](http://example.com)” to get the following link:

The Example Site

This tool can export your document as HTML. sponsors can use this tool to export documents as PDF..

Written with StackEdit.

HTML5 Canvases & Transforms

Browsers supporting HTML5 allow you to draw on the browser’s screen without preparing an image file before. Drawing on a canvas is done using the wonderful Javascript language. If you want to draw a 2-dimensional image on canvas element ‘cnv’, get the drawing context using:

var ctx = cnv.getContext("2d")

And use that context to draw everything using the standard functions:

moveTo, lineTo, arc, fillRect, etc.

Learn more about drawing here.

You can use the functions to create more complicated shapes easily thanks to transform functions:

Transformations: Linear Algebra Made Easy

The origin(0,0) of the canvas is defined to be the top-left pixel of the canvas element. And the coordinates are given in number of pixels. This can change by using transforms.

The transformation functions are:

scale(x,y): this will make every shape x times wider and y time taller.
translate(x,y): now coordinate (0,0) will be shifted x units to the right, and y units down.
rotate(angle): will rotete the axes by given angle in radians.
transform(a,b,c,d,e,f): If you want to use a transformation matrix
setTransfrom(a,b,c,d,e,f): reset all transform, and perform transform(a,b,c,d,e,f).

a,b,c,d,e,f are values in the matrix:

The values a,b,c,d are used for rotating and scaling. e,f for translating.

Other useful methods of the context are:

ctx.save() – to save current transform in a stack (Last In First Out).
ctx.restore() – to retrieve the trnasform from the top of the stack.

An Example – The Koch Snowflake

The algorithm for drawing the Koch Snowflake can be found in the post Drawing The Koch Snowflake Fractal With GIMP.

Here’s an example in Javascript:

        function drawSide(ctx, len){
          if (len > 1) {
            var thirdOfLen = len / 3.;

            var rotationAngles = [0, -Math.PI / 3, 2 * Math.PI / 3., -Math.PI / 3];

            rotationAngles.forEach(function(val){
              
              if (val != 0){
                ctx.translate(thirdOfLen, 0);
                ctx.rotate(val);
              }
              ctx.save();
              drawSide(ctx, thirdOfLen);
              ctx.restore();
            });

          } else {
            ctx.moveTo(0,0);
            ctx.lineTo(len,0);
            //ctx.stroke();
          } 
        }

        ctx.translate(startX, startY);
        for (i=0; i<3; i++){
          ctx.save();
          drawSide(ctx, sideLength);
          ctx.restore();
          ctx.translate(sideLength,0);
          ctx.rotate(2*Math.PI/3);
        }
        ctx.stroke();
      }

Warning: using ctx.stroke() after every little line you draw might make your code inefficient, and slow down your browser.

Transformation functions are also part of the Processing language.