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.
Not a Geek
URL Magic
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).
Windows 7 Path Tricks
There are a number of things to remember when you deal with the Path
environment variable in Windows.
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.It is better to use
\
instead of any/
in the string.No final backslash as in:
C:\SomeDirectory\
.Whenever you make a change to
Path
variable, be sure to close and reopen any Cmd or Shell window.You can add a new environment variable as “myexedir” and add that variable as ;%myexedir% to the Path string.
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
.
Nonexisting paths in
Path
can cause problems.Path Manager is a little utlity that helps with the
Path
problems.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
Fargo
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.
Why Static Site Generation?
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
- 2009: New publishing system / tour of my head
- and 2011: A plea for baked weblogs
- and: More on baked blogs
Dealing With the Path in Windows 7. I
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:
If you click on
System
, you get theSystem
Dialog.If you click on
Edit environment variables for your account
, you get theEnvironment Variables
dialog but theSystem Variables
option is disabled, and you can only change theUser variables
.
If you click on
Edit the system environment variables
option you get theEnvironment 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.
Code Blocks Options With Octopress
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 |
|
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 |
|
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 |
|
Note:
For code-coloring to work, be sure you have Python27 at your Path.
My Markdown Cheatsheet
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
Lists:
1 2 3 4 5 6 7 8 9 10 11 |
|
- first item
- second item
- third item
Numbered Lists
1 2 3 |
|
- first item
- second item
- third item
Mix Lists
1 2 3 4 5 6 |
|
- first item
- first item
- second item
- third item
- second item
- third item
Emphasis/Strong
1 2 3 4 5 6 |
|
emphasized
strong
strong emphasized
Code Blocks:
1
|
|
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.
Markdown in Blockquotes:
1 2 3 4 5 6 7 8 |
|
This is a header.
- This is the first list item.
- 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.
Fixed Layout eBooks
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.