Dutch poem, written for dutch literature class.

Reizen, daarvan droomt elk
kind, als volwassene niet minder.
Verzinnen met wie en naar welk
land te gaan, zonder enig hinder.

Dan vertrekt men toch naar ginder,
hoog over aardes melk.
Men verkent aardes kelk,
de schoonheid niet veel minder.

Overal kijkt men rond,
waar de tip hen heen zond.
Maar aan alles komt een eind.

Tot rust kom je dan weer thuis,
terug als ontspanne huismuis.
Weer het leven aangelijnd.

Being a last grade high schooler with an above average interest in CS and related, I find the state of ICT at my school quite not workable.

Over the years at school, the system has been revised several times in several ways. First there was Novell Netware, also called crapware. They switched to using native windows. This was a good thing. Then they started to restrict more and more. Eventually also a good thing, saved them time repairing computers. But then it went from workable to.. well, unworkable.

Incompetent Computer Techs

Thanks Heath for the title

The school computers are not as good as they can be

Last year they replaced all computers, more than a hundred, with brand new quadcores. The network, both intranet and internet, are very, very fast. Still they manage to have applications boot very slow, and have slow internet for the same reason as why the applications boot so slow. Why? They use VMWare ThinApp. This is a tool to pack all application files into a single portable executable. When an application is fired it is loaded from a central server and booted. This is to ease updating of applications, as the files come from one central file, instead being copied on each single computer.

But this has several downsides, for example the two I named above. Firefox can be easily around 40MB when installed, this means that for every start of Firefox, 40MB is transferred. This is not as bad, until a complete classroom logs in and boots up their programs. This can bring the complete network to a halt. The other downside is that settings are forgotten. They are simply overwritten when restarting the application.

The other big issue is the screwed up WiFi network

At the end of the big computer renewal, a WiFi network was installed, covering the complete school. Sweet. Well… first they decided it was fun if thy blocked all ports except a few. For the CS class I (teach and) participate in, quite a few tools, some essential, where rendered useless. For example, GIT. We couldn’t work at school anymore.

Then they put an (extra) layer of protection on the WiFi. When opening the browser, you were forwarded to a login page, requiring you to login with your school’s network-account. No problem, only that it does not work constantly on all devices. Some times you have an endless loading, sometimes you are not even forwarded to the login pages, or get a white page after logging in. Generally poking the ICT people helps, but they managed to break it again after a few days.

Why students know better

Thanks Martijn for the title

When asking for a catchy title for a blog post about whining about school ICT, someone suggested ‘Why students know better’. That made me decide to not just whine about it but to also offer some ideas and suggestions.

Computer messup mania

Update frenzy

Well, the biggest fear of a computer service team at a high school is having to repair loads of computers every day being messed up by bored students. The second biggest fear is having to update every PC every day. Well, that’s actually what every ICT team hates. And hey, there is a combined solution! Enter network boot. Every night, boot every computer from a central server and have it overwrite the HDD with a fresh image. There you go, no crap, all software at their latest version.

(WiFi) Network misuse

They currently block a wide range of ports. This disallows many services, including GIT/ssh and connecting to a remote desktop. There are several solutions to this:

• White list more ports, possibly per student/group. This is possible as you have to login anyway.
• Open everything up. As you are logged in, every network action can be traced back to you, and they can block you access to the complete network.
• Keep it closed and have a bunch of angry students as well teachers.

Remember application settings

Currently user documents are saved on a network drive. No issue, pretty fast. But as they are using ThinApp, settings are not saves at all. The solution I brought up for keeping the computers fresh solves this as well. Apps can run from the computer itself, and settings can be saved on the network drive. Just like at home.

Speed up the network and application boot

Well, if the first solution is followed, the network returns to it’s old speed, as the network only is used for updating at night, and the programs come from the PC you’re using.

Conclusion

It was a relief to rant about my experiences at my school concerning the ICT. I know I’m lucky to have a fast network at all, as well global WiFI, it’s just that it doesn’t work properly.

This is a follow up on Html templates, my way

Last time my post was only about the selector engine, and how it could replace content. This time I’m going to look at some other possibilities and ideas I had.

I named the engine and the project 編集(henshū), or Editing. I refer to it from now on as Henshu.

• Deletion/Condition
• Option/Switch
• Sequential selectors

Deletion

Let’s consider the following case. The user can either be logged in, or not. Now, it is currently possible to simply put in an empty array. This deletes the element as seen in the following example:

<span id="NotLoggedIn">You are not logged in! Please log in.</span>

{ "#NotLoggedIn": [] }

<!-- Nothing of course, the element .NotLoggedIn is replaced with itself repeated zero times. -->

But this is not directly obvious. What about using boolean-false to denote the absence of an element? Or null? Let’s see and let me hear what you think:

{ "#NotLoggedIn": false }
{ "#NotLoggedIn": null }

Option/Switch

And then there is the scenario of multiple types of data to show. You can ofcourse use multiple false’s, but it is counterintuitive to denote which of the multiple you do not want to see. You want to point what you do want to see. My solution had a few requirements and ways of execution. I’m working with C# as engine/API, and JSON as engine food. Going to hack in a neat C# solution will not be that hard, considering the availability of types. But JSON only has a few, and only one, a string, as key, which I’m currently using for selecting. But I did figure out a solution. Namely, CSS selectors do only start with a dot (.), a hash (#), a colon (:), a star (*) or a letter. All others are virtually free to (mis)use.

I decided to use - as a multiple option denoter, basically a remove-all-but denoter, prepending that to the selector. Here is some example:

<div class="Ranking">
    <img class="Admin" src="./admin.png" />
    <img class="User" src="./user.png" />
    <img class="Mod" src="./mod.png" />
</div>

{ "-.Ranking": ".User" }

<div class="Ranking">
    <img class="User" src="./user.png" />
</div>

Or, more advanced, showing multiple AND replacing content:

<div class="Ranking">
    <span class="Admin"><img src="./admin.png" /></span>
    <span class="User"><img src="./user.png" /></span>
    <span class="Mod"><img src="./mod.png" /></span>
</div>

{
    "-.Ranking": [ ".Admin", ".User" ],
    ".Ranking .User": "User"
}

<div class="Ranking">
    <span class="Admin"><img src="./admin.png" /></span>
    <span class="User">User</span>
</div>

Sequential selectors

Now you might be thinking, what about those sequential properties in the JSON? These are to be evaluated from top to bottom. This means the a selection applies to the the content after the previous selector&content is applied. Thus in the following, the second is rendered useless by the first one:

{
    ".Foo": [],
    ".Foo": "ContentWhichYouNeverWillSee"
}

Footnote: I’m eager to hear your comments and ideas, so please comment.

This is a follow up on Html templates, how it is done currently and what I dislike about that

My tools for experimenting with new concepts generally are Visual Studio/MonoDevelop and C#4. This was no exception. But this time I focussed on creating an API which would be easy to port to other languages and platforms. One major influence is the easiness of selecting elements using jQuery, so I’m adopting that. Let’s skip the talk, and jump straight into an example:

<html>
    <head>
        <title>Template</title>
    </head>
    <body>
        <div class="Content">
            <h1>Post Title</h1>
            <p class="Item"></p>
            <p class="Author"></p>
        </div>
    </body>
</html>

Simple, clean html, which even contains some sample data. But now, how do you fill this? I’ve developed a working example, which uses JSON as input format. Some example input could be:

{
    "title": "The Template Engine"
    ".Content": [
    {
        "h1": "First entry"
        ".Item": "This is the content of the first entry.",
        ".Author": "Dykam",
    },
    {
        "h1": "Second entry"
        ".Item": [
            "This is the content of the second entry.",
            "With multiple paragraphs!"
        ],
        ".Author": "Dykam",
    }
    ],
}

What can we see here? Css Selectors. The engine is using CSS selectors to select the elements to modify. The content to be applied to a selected element can be on of the following:

• Just text. The content of the element is plainly replaced with the json value.
• More content. The selectors in the subcontent are applied to the children of the selected element.
• Arrays. When they occur, the element it applies on is repeated for entry.

So, what does this mean? I just show you what the resulting html is.

<html>
    <head>
        <title>The Template Engine</title>
    </head>
    <body>
        <div class="Content">
            <h1>First entry</h1>
            <p class="Item">This is the content of the first entry.</p>
            <p class="Author">Dykam</p>
        </div>
        <div class="Content">
            <h1>Second entry</h1>
            <p class="Item">This is the content of the second entry.</p>
            <p class="Item">With multiple paragraphs!</p>
            <p class="Author">Dykam</p>
        </div>
    </body>
</html>

Now, what are the profits of this?

• The designer does not have to know anything of the back end or some custom language.
• The designer can fill it with custom data and apply JavaScript and CSS straight away to see the result.
• No chance of interference with other processing engines, as plain html is used. For example, you can drop in yet another template engine to generate the templates, or the other way around.

In subsequent posts I will go into detail about more possibilities, behavior and edge cases of the engine, and how flexible it really is.

Footnode: I used the term html all around the post, but I really focus on xhtml, or any kind of xml. I might later on hook in an html4/5 parser to support that, but that is not in my near planning.

Html templates… the urge to have some kind of Html and let some kind of engine fill it with data. The common reason for templates is to separate code from design, both from a designer/programmer perspective and for separation of concerns.

I’ve seen multiple tries as this, and the general trend is to have special characters denote where contents goes, like in the following:

<h1>{title}</h1>
<p>{item}</p>

This works perfectly well, until it gets more complex, and you need to loop through repeating data. You get artificial constructs like:

<h1>{title}</h1>
{for:items as item}
<p>{item}</p>
{/for}
{if:author}
<p>{author}</p>
{/if}

This works well on small scale, but on large files and more complex data, you can get complex logic ending up in template files.

Another complaint I have about this kind of templates, is that you have yet another special character or DSL. A side effect of this is when the template engine fails to replace all tokens. You see those tokens appear in the page, not quite what you want. So I started playing with several ideas.

My preferences included clean html and obvious html. That is, the html should not contain anything like DSL and alike. The following would not fit:

<!-- Custom characters -->
<h1>{title}</h1>
<!-- Misuse of html, also because it clutters -->
<h1><span class="value title"></h1>
<!-- Illegal html -->
<h1><value name="title"></h1>

So I decided to swing it the other way around. The template would be a proper html page, which even can contain some demo content, and the the template engine would infer from the data if something is optional, hidden or repeated.

In my next post, I will show a way of doing this cleanly.