On web design

A well-designed and strictly written page about web design practices

DokuWiki and Syntax

I have tried Dokuwiki for a personal wiki. It’s ugly. It forces me to edit pages as a plain text files, using it’s own wiki syntax format. It also stores articles in a format of wiki text. Every time somebody wants to view a page, Dokuwiki parses wiki-formatted file and produces HTML. Every time. That’s how article looks in a wiki format.

====== HiPath 4000 Backup destinations: ======
  - MO/CF
  - Server
    - NFS
    - FTP

====== HiPath 4000 HDD Layout ======

^Name	^Purpose	^Contents^
|:PDS:	|program disk	|RMX|
|:DBD:	|Debug disk	||
|:AMD:	|Administration and maintenance disk	||
|:CGD:	|Call change disk	|tarification files|
|:TMD:	|Traffic metering disk	||
|:PAS: 	|Miscellaneous usage	|REGEN file|

Looks ugly. That is a how your data is seen by both editor and application. Both editor and dokuwiki have to be able to understand wiki syntax in order to see the formatted data. Both are negatively affected. Editor has to learn a new syntax for writing an article, Dokuwiki has to translate article to HTML every time user requests it (many times).

The third victim is data itself. It gets transformed to an ugly format, compatible with the only software which is wiki engine you use. In other words, if you let a wiki engine take care about your information, the information would most likely stay in there forever. If you want to extract a document from a wiki engine, you have to render a page, using the engine.

Why do we need to have wiki-formatted intermediate presentation? The official answer is to help users who lacks HTML+CSS knowledge to develop a document structure. It probably worked in 2000, when there was no technology for creating interactive applications in a browser. Nowadays things changed. We have Google docs, which allows a document to be edited in WYSIWYG mode, and, moreover, to be stored and exported in any format. Some might say WYSIWYG editors corrupt formatting when used in a wrong way. It applies to documents where we need a style. In a Wiki we do not aim to create a document with style. We do aim to develop a document with structure. Style has to be generated by a wiki engine.

Hence, the best approach for wiki architecture is: editing documents in WYSIWYG, storing documents in a structured format without styles, presenting them as-is.

It is very important not to let WYSIWYG editor to define styles. It’s a common user mistake to apply styles to an articles. Styles has to applied by an application. An editor should define the structure of the document only: Headings, paragraphs, tables, code, bold, italic, etc. Editor needs no colours, no browser compatibility nothing extra.

Let the approaches be compared:

Stage Wiki-approach Correct approach Best approach
Editing Using ugly wiki format, which is neither a
document, nor a pure data
Using WYSIWYG editor, which allows editing
structure, but not styles.
Using WYSIWYG editor, which allows editing
structure, but not styles.
Storing Using ugly wiki format, which is neither a
document, nor a pure data
Using a structured document format, like (X)HTML,
(X)HTML with no styles
Presenting Parsing wiki format, restructuring it to a
document (HTML+CSS)
Presenting a stored document as is+ applying some
predefined styles to it.
(X)HTML + CSS style
Engines MediaWiki, DocuWiki, pmWiki Almost there: WordPress, MoinMoin, Sharepoint wiki module… ???

Currently there is no Wiki engine in the market who does the job right.

3 Things Web Can Not Do in 2011

There is no way to share files between end-users without a server. You have to share a file somewhere on a server. Even torrents require a tracker. I want to have an opportunity to let someone download a file I have. in a current situation I have to either share it somewhere, either email it, or my PC a server. Every way is too complicated.

There is no standard on RSS feed entries formatting and rendering. It’s somehow HTML and CSS, but since there are many kinds of feed aggregators, they all render HTML-in-XML differently. Also, there is no way to apply proper JS to RSS entry, because there is no proper DOM support and no specification for a RSS reader opportunities as well as rendering rules.

There is no way to download several files by a single click. You have to either click every file’s URL, either download a single archive with multiple files inside. URL does not support including several files in a single hyperlink. This architecture lays in an architecture of a very first designs of web.

If you know any desired feature, web does not yet support, feel free to share your thoughts.

Bringing Cisco IOS CLI to Linux CLI

There are few people on the globe who loves to work with Cisco and Linux via CLI. These people might have issues with trying to apply Bash/Vim syntax to IOS and vice versa. I’m certainly one of them. That’s why I can do the followng in my Bash:

$ show .bashrc | i return
[[ "$-" != *i* ]] && return
#     return 0
#     [[ -z $adir ]] && return 1
#   [[ $? -ne 0 ]] && return 1
#     [[ $? -ne 0 ]] && return 0
#   return 0

It’s very handy for checking Cisco configs, stored on a Unix machines, without inverting your mind out. In fact, if you are in rush and tried to apply IOS syntax to Bash, you won’t be distracted by an error message, but you’d get a result you reqired.

$ show samle_conf.cfg | i spanning-tree
spanning-tree mode rapid-pvst
spanning-tree etherchannel guard misconfig
spanning-tree extend system-id
spanning-tree pathcost method long
 spanning-tree portfast
 spanning-tree portfast
 spanning-tree portfast
spanning-tree bpduguard enable

It’s achieved very easily. You need to add some aliases to your ~/.bashrc file and relogin:

echo 'alias show="cat"' >> ~/.bashrc
echo 'alias i="grep --color"' >> ~/.bashrc

Demoronizer for a Microsoft’s HTML

I discovered another piece of computer’s history related to Microsoft’s standards ignorance. Eventually, in the early days of WEB, there was ASCII which supported only American english characters. It was fine for American-speaking users, but obviously not fine for the rest of the word who wanted to use other symbols. To solve it, ISO 8859 family of encodings was standardized. These encodings were using 8th bit of ASCII (occupying 7 bits) and were an addition to ASCII, hence, they were backwards compatible with ASCII.

The ISO 8859-1, or “Latin 1” was the most widely used encoding. it was used as a default charset for Linux, for an early HTML versions, for X server etc. Since it was used in HTML, it was used by a Microsoft software too. Not surprisingly, Microsoft had it’s own unique vision of standards.

Microsoft delivered their own Latin-1 – Windows 1252 with their own set of characters in a range from 0x82 through 0x95. The mentioned range is not used in ISO Latin-1. What characters were in the proprietary range? There were quotes, apostrophes and some more.

If you were creating HTML in a Microsoft software, and it had “smart quotes” option enabled (it’s enabled by default), the resulting HTML document would be in Windows-1252. Hence, it would contain quotes and apostrophes from the ISO-unused range. As a result, when windows-1252 file is opened in a browser in non-windows OS, the invalid characters are ignored or replaced by either question marks or a white space, making the page ugly.

Surprisingly, There are still quoteless and apostropheless web pages out there in the Internet. If own one of them, please apply demoronizer to it.


Mobile phone design

There are people who follows mainstream and like it. There are ones, who follows mainstream and dislikes it. There is somebody trying to change mainstream. That guy came up with a brilliant idea. I was really impressed by simplicity of the idea. Really, why nobody developed mobile with design like that?

Author, source.

Standard font sizes progression

6, 7, 8, 9, 10, 11, 12, 14, 16, 18, 21, 24, 36, 48, 60, 72

Useful to remember

Increasing your Firefox view port height.

By default big chunk of Firefox view port in taken by unnecessary horizontal toolbars. It is not crucial for 4:3 screen users, but it matters for 16:9 users. This small note describes how to free browsing space and make Firefox more convenient for laptop and netbook users.

Firefox with default viewport

Firefox with default viewport

Firefox wit extended viewport

Firefox wit extended viewport

To free extra space we need to remove unnecessary toolbars. For example, bookmarks and navigation toolbars are useless. There is no need in them. I’m using <alt>+<right> and <alt>+<left> to navigate backward and forward. To refresh the page I’m pressing <F5> or <CTRL>+<F5>. To stop loading page I’m pressing <ESC>. I haven’t use my home page for years – Firefox is kindly loading my last session. Do I need all those buttons then? I do not. They have to be removed. After you removed all buttons, you have only address bar and search bar left. Why keep them so wide in current panel? Let’s move both of them to main toolbar. Now we have navigation navigation toolbar empty and can be removed.

I can’t even imagine anything worse than a bookmarks panel. It forces me to see my bookmarks always. Just think about it. Your browser forces you to watch your bookmarks. I believe, it is much more convenient if you are accessing your favorite links on your demand instead of been forced to press a link after hours watching it. Even if it’s not forcing you to do weird things, what’s the point to see it always? Bookmarks toolbar should be removed. You still can access your toolbars pressing <CTRL>+<B>.  Your live will be even easier if you’ll use Delicious bookmarks extension, but default bookmarks subsitem is good enough to be used.

Firefox Collections

Default Firefox as it shipped is useless to me – it makes competitive difference with other browsers only with MY OWN set of updates installed. Every time I am moving to the new machine, i have to go through hell in order to set up proper browsing environment, suitable for my needs. Enough!

I made two collections of my must have addons, separating them into two logical subsets: surfing and web development. The separation might help other users to achieve latter goals, if they appreciate speed, simplicity and efficiency.

Here we go:

Best lightest web development collection for Firefox

Best usable quick starter’s collection for firefox.

Comments and updates are appreciated.

PS: I regret so much that I can not transfer configuration of my addons to some place online. Mozilla should develop some way of sharing whole browser configuration including look and each addon’s configuration in one package.


Смешной пример нестандартного подхода к юзабилити

На картинку надо обязательно кликнуть.