Capturing Shift+Enter Combination in Javascript

First we have to decide which 'first' key is pressed in a variable. For that reason we will create a 'flag' variable and that variable will change its status if the first key is pressed down and reset again if it is released.
Second part is easy, now we will get the 'second' key by checking the first's flag to distinguish between one key press and a combination press. A sample code is below:

var shiftKeyPressed = false;

document.onkeydown=function(e){
    
    if(e.keyCode == 16) shiftKeyPressed = true;
    
    if(e.keyCode == 13 && shiftKeyPressed == true) { // 13 for ENTER
        // code for SHIFT+ENTER
        return false; // cancel propagation
    }
}

document.onkeyup=function(e){
    if(e.keyCode == 16) // 16 for SHIFT
        shiftKeyPressed =false;
}

You can do more combinations just changing the key codes up there.

impress.js

impress.js is a web based presentation creator, or I can define it as new generation presentations. It basicly uses HTML5's and CSS3's best features to create a stunning presentation. Best of all, it is cross-platform and can basicly work on all popular browsers that supports HTML5 and CSS3.

All you need to do is get the source from official web page and dig into the source code. Each div tag is another page from your presentation and you can add as many things as you want to each page. Then you will need to create a template according to your style for each presentation page (or just modify the built-in style). Then let impress.js view the presentation in a very exciting way.

So easy, so powerful and so effective. If you are just bored of old school presentation softwares like powerpoint to create presentations like me, impress.js is just the right tool for you.

A Clever Access Control for Web Pages

You want to access control to a specific web page. You want only visitors from only a specific language speakers. Now you have two options.

• Block IP addresses that are outside your target. But this will block also the people of the same country that are talking same language but living outside the target area.
• Another solution would be something like below.

The Solution

I am putting a screenshot of the solution. That will not be meaningful to you if you can't read below of two parts. But if you read the upper English part and you buy it, that will be an automatic access control mechanism for you. You will think that down part is translation of the English part but it is not. It is completely another phrase that gives the key to the webpage.

Translation of the down part is: "If you know turkish, you can access to webpage by answering the following question. What is the first sibilancy of our country's capital? Press from the keyboard."

Note: Also the source code of the web page doesn't give a hint about what is going on around. You can check the source code and it is encrypted jQuery. (Not that easy to understand if you are an ordinary developer. End users will even not look at the source code.)

The webpage: http://www.dizimag.com

DOT Language

Dot is an abstract grammar defining language. We can use dot to represent graphs also. In this post, I will show how different graphs can be generated with different codes from dot language. I will still use the Java api for dot language which I mentioned in GraphViz Java post.
Since these are just a few examples, you can find other attributes and styles from Graphviz dot attr page or the dot manual.

Simple Directed Graph

digraph G {
    A
    B
    A -> B
    A -> C;
}

Output

Notes
You see that you don't have to introduce each node at the beginning. Any node in the edges will automatically inserted.

Simple Graph without Edges

digraph G {
    A
    B
    C
    D
}

Output

Notes
From this example, we see that we have to introduce all edges if there are no edges that consists of these nodes.

Simple Undirected Graph

graph G {
    A
    B
    A -- B
    A -- C
}

Output

Different Shape and Colors for Nodes

graph G {
    A [shape=box, peripheries=2,color=black, style=filled, fontcolor=white]
    B [style=filled, color=gray84, fillcolor=gray84,fontcolor=white]
    C [color=red, style=filled, fontcolor=white]
    D [shape=polygon,sides=4,distortion=.7]
    A -- B
    A -- C
}

Output

Notes
You can find many different node styles in this manual.

Different Edge Styles

digraph G {
    A
    B
    C
    D
    A -> B [arrowhead=obox, style=dotted, color=red]
    A -> C [taillabel="tail"]
    A -> D [label="g'", weight=4]
}

Output

Notes
Heavier weight means shorter, straighter and more vertical the edge is.