Dan Gebhardt thinks we should use the term JavaScript Web Applications. Probably we will use JWA instead of SPA(Single Page Applications) from now on.

A very interesting post

I just wanted to check if I can see my blog without a Web Server.

This is what I got when I clicked on the index.html:

When I checked the source I found out that all the links were as:

href="/blog/2013/07/18/windows-7-path-tricks/"

So we need a short cheatsheet for URLs in Web pages:

Absolute URLs:

Absolute URLs have the format:

protocol://domain/path

where the protocol can be:

• http
• https
• ftp
• file
• git

Relative URLs:

Relative URLs have a number of formats:

filename.html
directoryname/filename.html
../directoryname/filename.html

/directoryname/filename.html
/directoryname/subdirectoryname/

In the first three cases everything is relative to referring page.

filename.html should be in the same directory with the referring page.

directory/filename.html filename.html should be in the directoryname directory which is in the referring page’s directory.

../ is for one directory up from referring page’s directory

When we have / at the beginning of directoryname, we are refering to current root of the Web Server. This relative path is actually relative to root of the server, not relative to referring page.

Finally, when our URL ends with /, Web Servers actually try to fetch the default page (which is normally index.html).

There are a number of things to remember when you deal with the Path environment variable in Windows.

1. The items in the Path string are seperated by semicolon: ;, there should be no space around the semicolon. “C:\SomePath ; C:\AnotherPath” is NOT OK.

2. It is better to use \ instead of any / in the string.

3. No final backslash as in: C:\SomeDirectory\.

4. Whenever you make a change to Path variable, be sure to close and reopen any Cmd or Shell window.

5. You can add a new environment variable as “myexedir” and add that variable as ;%myexedir% to the Path string.

6. Open cmd.exe with administrator privileges and type:

   setx path “%path%;C:\Python27” /m

/m makes the changes at the system environment, if you omit it then the changes are made in the local environment.

1. Nonexisting paths in Path can cause problems.

2. Path Manager is a little utlity that helps with the Path problems.

3. You can prepare a bat file:

   @echo off PATH C:\Python27;%path% title Octopress – %Username%@%Computername% cd C:\Projects\WebProjects\octopress cmd

Which will add the directory you want to be added to the Path. This will be valid for the command session only, and as a bonus can land you right into the directory that you want to work. This solution is the one that I feel more comfortable with.

For a discussion about these recommendations on Stackoverflow see: http://stackoverflow.com/questions/6318156/adding-python-path-on-windows-7

Another notetaking, todo list, outlining etc., web application which seems very promising: Fargo.io brought to us by our old Dave Winer.

Fargo uses your Dropbox account to save all the work you have done. That means no exporting! You always have your files in OPML format.

I have a personal blog on Blogger, which I never felt very easy about. Writing and posting on the Blogger interface and having all the content at their server and not having the posts on a version control etc., all made me uncomfortable.

Then, I discovered GitHub pages and Octopress and everything felt very natural.

Brent Simmons had written all about this static site generation and blogging system back in

1. 2009: New publishing system / tour of my head
2. and 2011: A plea for baked weblogs
3. and: More on baked blogs

The Path environment variable in Windows is always a problem to deal with.

This seems to be the hard way to manage:

You get to open the System Dialog first, which is in the Control Panel.

Control Panel:

Control Panel Search:

If you just type “path” in the search box at the upper right corner, Control Panel items will be filtered as:

Now you have three options:

1. If you click on System, you get the System Dialog.

2. If you click on Edit environment variables for your account, you get the Environment Variables dialog but the System Variables option is disabled, and you can only change the User variables.
   

3. If you click on Edit the system environment variables option you get the Environment Variables dialog.

Or, if you prefer to right-click on Computer and select Properties, you get the System dialog as well, and now you can just click Change Settings here, then click Environment Variables at the System Properties dialog.

System Dialog:

System Properties:

Environment Variables:

You have to select the Path variable at the System variables and click the Edit button to finally get to Edit System Variable dialog.

Edit System Variable:

Here you have to edit the Path variable value and click OK, which is terrifying if your Path looks like this:

C:\Python27\;C:\Program Files (x86)\HP SimplePass\x64;C:\Program Files (x86)\HP SimplePass\;C:\Program Files (x86)\HP SimplePass\x64;C:\Program Files (x86)\HP SimplePass\;C:\Program Files (x86)\Intel\iCLS Client\;C:\Program Files\Intel\iCLS Client\;C:\Program Files\Common Files\Microsoft Shared\Windows Live;C:\Program Files (x86)\Common Files\Microsoft Shared\Windows Live;C:\Windows\system32;C:\Windows;C:\Windows\System32\Wbem;C:\Windows\System32\WindowsPowerShell\v1.0\;C:\Program Files (x86)\Windows Live\Shared;C:\Program Files (x86)\Common Files\Roxio Shared\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\DLLShared\;C:\Program Files (x86)\Common Files\Roxio Shared\12.0\DLLShared\;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x64;C:\texlive\2012\bin\win32;C:\Program Files (x86)\Inkscape;C:\Program Files (x86)\Pandoc\bin;C:\Program Files\7-Zip;C:\Program Files (x86)\Calibre2\;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x86;C:\Program Files (x86)\Intel\OpenCL SDK\2.0\bin\x64;C:\Program Files\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\DAL;C:\Program Files (x86)\Intel\Intel(R) Management Engine Components\IPT;C:\Program Files (x86)\Lua\5.1;C:\Program Files (x86)\Lua\5.1\clibs;C:\Program Files\Calibre2\;C:\Program Files (x86)\infogridpacific\AZARDI\bin;C:\Program Files\Microsoft\Web Platform Installer\;C:\Program Files (x86)\Microsoft SDKs\TypeScript\;C:\Program Files\Microsoft SQL Server\110\Tools\Binn\;C:\Program Files (x86)\QuickTime\QTSystem\;C:\Program Files (x86)\infogridpacific\AZARDI\bin;C:\nodejs\;C:\Program Files (x86)\Git\cmd;C:\Program Files (x86)\Git\bin

It is probably better to Copy and Paste this value to a text editor, carefully edit and Paste back.

I actually figured out several different options that we can use to insert code blocks with Octopress

1. Markdown codeblocks:

We have to use 4 spaces or 1 tab to designate that this is a codeblock.

    var respond = function(response, data, err) {
        var responseObj = {data: data, error: err};
        response.writeHead(200, {"Content-Type":"application/json"});
        response.write(JSON.stringify(responseObj));
        response.end();
    };
    var arr1 = new Array(arrayLength);
    var arr2 = new Array(element0, element1, ..., elementN);

And this is what we get with the 4 spaces, or the tabs removed from the start of the line.

var respond = function(response, data, err) {
    var responseObj = {data: data, error: err};
    response.writeHead(200, {"Content-Type":"application/json"});
    response.write(JSON.stringify(responseObj));
    response.end();
};
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);

And this is the HTML that is written for you:

1
2
3
4
5
6
7
8
9

<pre><code>var respond = function(response, data, err) {
    var responseObj = {data: data, error: err};
    response.writeHead(200, {"Content-Type":"application/json"});
    response.write(JSON.stringify(responseObj));
    response.end();
};
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);
</code></pre>

2. Backtick Code Blocks (GitHub Flavored Markdown):

``` [language] [title] [url] [link text]
var respond = function(response, data, err) {
    var responseObj = {data: data, error: err};
    response.writeHead(200, {"Content-Type":"application/json"});
    response.write(JSON.stringify(responseObj));
    response.end();
};
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);
```    

1
2
3
4
5
6
7
8

var respond = function(response, data, err) {
    var responseObj = {data: data, error: err};
    response.writeHead(200, {"Content-Type":"application/json"});
    response.write(JSON.stringify(responseObj));
    response.end();
};
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);

3. Codeblocks

{% codeblock [title] [lang:language] [url] [link text] %}
var respond = function(response, data, err) {
    var responseObj = {data: data, error: err};
    response.writeHead(200, {"Content-Type":"application/json"});
    response.write(JSON.stringify(responseObj));
    response.end();
};
{% endcodeblock %}

1
2
3
4
5
6
7
8

var respond = function(response, data, err) {
    var responseObj = {data: data, error: err};
    response.writeHead(200, {"Content-Type":"application/json"});
    response.write(JSON.stringify(responseObj));
    response.end();
};
var arr1 = new Array(arrayLength);
var arr2 = new Array(element0, element1, ..., elementN);

Note:

For code-coloring to work, be sure you have Python27 at your Path.

Since this blog will also serve as my cheatsheets repository for everything I want to remember, here is my markdown cheatsheet:

• Whenever an indentation is needed it is allways 1 tab or 4 spaces in markdown.

Headers:

1
2
3
4
5
6

# h1 Header 
## h2 Header 
### h3 Header 
#### h4 Header 
##### h5 Header 
###### h6 Header 

h1 Header

h2 Header

h3 Header

h4 Header

h5 Header

h6 Header

Lists:

1
2
3
4
5
6
7
8
9
10
11

* first item
* second item
* third item
or
- first item
- second item
- third item
or
+ first item
+ second item
+ third item

• first item
• second item
• third item

Numbered Lists

1
2
3

1. first item
2. second item
3. third item

1. first item
2. second item
3. third item

Mix Lists

1
2
3
4
5
6

1. first item
    + first item
    + second item
    + third item
2. second item
3. third item

1. first item
   • first item
   • second item
   • third item
2. second item
3. third item

Emphasis/Strong

1
2
3
4
5
6

*emphasized*
_emphasized_
**strong**
__strong__
***strong emphasized***
___strong emphasized___

emphasized
strong
strong emphasized

Code Blocks:

1

This is a code block indented by 4 spaces

This is a code block indented by 4 spaces and the spaces removed

Blockquotes:

1
2
3
4
5
6

> This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus.
Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse
id sem consectetuer libero luctus adipiscing.

This is a blockquote with two paragraphs. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

Donec sit amet nisl. Aliquam semper ipsum sit amet velit. Suspendisse id sem consectetuer libero luctus adipiscing.

Markdown in Blockquotes:

1
2
3
4
5
6
7
8

> ## This is a header.
> 
> 1.   This is the first list item.
> 2.   This is the second list item.
> 
> Here's some example code:
> 
>     return shell_exec("echo $input | $markdown_script");

This is a header.

1. This is the first list item.
2. This is the second list item.

Here’s some example code:

return shell_exec("echo $input | $markdown_script");

Blockquote in blockquote:

1
2
3
4
5

> This is the first level of quoting.
>
> > This is nested blockquote.
>
> Back to the first level.

This is the first level of quoting.

This is nested blockquote.

Back to the first level.

Allmost all of the eBook market is based on free-flowing eBooks, but again most of the textbooks, children books etc., are fixed page layout books.

Preparing fixed layout eBooks are easier now thanks to ePub3 standard which is just being adapted by the industry.

There are not too many resources for the fixed layout books. The one I found to be very helpfull is: infogrid pacific Azardi. Thanks to these guys, I could finally manage to make an iPad friendly ePub3 Fixed Layout eBook, which I plan to write a series of tutorials on the details of the process.