Latest Entries »

Appearently, Blogger didn’t post the full
text I typed for some reason….

I will have to rewrite everything again.

Some additions to the audio tag story
and about cross domain scripting.

So, opera, chrome and firefox will handle the
radio stream correctly now. So, it might still
be usable after all. The caching problem might
be fixed by patching IceCast2’s http response
headers. I was thinking about patching them
anyways, as I’ve been looking into some
headers related to the XMLHttpRequest
javascript object.

As, for security reasons, cross site scripting is
not allowed. The XMLHttpRequest is very
strict about his. Must be same domain and port.
Same server different port, or a subdomain is not
allowed. I have been looking at this before,
without success. Even a redirect by HTTP
header doesn’t get around this

When using flash, one must run an application at
the server that listens on port 843.
( see http://www.adobeursurvey.com/devnet/flashplayer/articles/socket_policy_files.html )
Due it listens on a port below 1024, one must
have root access to the webserver to set this up.

I have been looking for a simular thing for
JavaScirpt without success, but I found our
JavaScript takes a totally different approach.

I’ve found out about this by looking at Chrome’s
JavaScript console. It turnes our, the receiving
HTTP server is supposed to set a certain header
to tell JavaScript it’s allowed to do a cross site
XMLHttpRequest. See:
https://developer.mozilla.org/En/Server-Side_Access_Control
http://www.w3.org/TR/cors/

I’ve been scripting all day again. Improved some
error handling for example, when I catch an error
I will first try to display it using the ‘soft’ dialog
produced by JavaScript, and only if it fails, do a fallback
to JavaScripts alert();

There is some more errror handling to be implemented.
Since I’ve used a ‘template’ to implement the XMLHttpRequests,
I currently only do a readyState=4 && status=200 check.
I should add a check for different statuses, to see if the
server is reporting some kind of error. And some more error
handling issues.

But another problem I am running into, the old site,
where all scripting happens on the server, it was no
problem determining the users preferred languages.
There values are available in the HTTP Request header
“Accept-Language”. I found a nice PHP script, that handles
it more efficient then the current script.
( http://www.thefutureoftheweb.com/blog/use-accept-language-header )
But now, I want to do it using JavaScript. I have been
googling around a bit, and with little success. It seems
the only thing I can detect is the users browser langauge.
I might use that in stead, but, the Accept-Language header
represents the settings the user had made about the
language he wants to see, and in which order. It will
most likely consist of multiple languages (for non-Americans)

I mean, I can always ‘fall-back’ to English, but I would like
the site to be displayed in the native language if supported.

So, I might do, rather inefficient, have a PHP script return
these values back to the browser for parsing. I mean, I am
doing Client-side scripting now,

or I might look at the browsers language. But imagine a
user using an icelandic browser, with configured

Accept-Langauge :  is, nb; q=0.9, nn; q=0.8, sv; q=0.7 en; q=0.6

Sp, according to this Accept-Language string, the site
should check if Icelandic content is available, if not then
Norwegian Bokmål, if not then Norwegian Nynorsk,
if not then Swedish, if not then English.

This information is not available when I just look at
the browser langauge, which means, I see Icelandic,
I know I don’t have a translation, I fall back to English,
while the user has configured he would like Norwegian
Bokmål as first alternative.

Or, even imagine a user who’s browser langauge is not
his first langauge in his Accept-Language list?

Just some thoughts… BlaatSchaap… and it’s
planned ‘reblog’ feature. Since I’ve been suspended
from Tumblr, this feature has moved up in the feature
priority list.

I am thinking about two kinds of reblogs. A regular reblog,
which will be accessible through the regular access sceme.
(public, frinds only, or specific friendlists)

Still… doing this creates the situation of having a
‘facebook’ and a ‘tumblr’ on one site. There is a
reason there is an ‘unwritten rule’ not to link your
Tumblr on Facebook. For this reason, I am thinking
about an anonymous public accessable reblog.

Well… how will it work… on FaceBook, we have
this ‘like’ feature. I am thinking about, on BlaatSchaap,
‘liking’ a photo will add it to a reblog.
See it like an album of ‘liked’ photos across the site.

Well.. what about external images, as you can
enter an url on Tumblr to add to your tumblrblog.

So, I am thinking about downloading them to the
server and keeping the original URL as source
on the server.

Even more, support for RSS feeds might be added
as well, as I’ve mentioned before… well… the idea
is to display the content of the RSS feeds you’ve
subscribed to and then you can click the photos
you wish to add to your reblog. Basically the same
as following someone on Tumblr itself.

The thing I’ll have to think about, is reblogging
between anonymous and regular reblogs, as
with a regular blog, I will just display the username,
but for an anonymous blog, I will display the blogname.
I am thinking what will happen when a user changes
the type between regular and anonymous.

As I am rebuilding the BlaatSchaap site, I want to keep it
up to modern standards. So, I am using HTML5 for it.
If you look at it’s DOCTYPE you will notice it is HTML5.

You might also know that I have run a radio station in the
past.

I think I have been experimenting with this in the past
and ran into issues too.

The problem, the HTML5 audio tag is very suitable for
playing audio files, but it fails for audio streams.

Chrome connects to the IceCast server correctly, and when
I tell it to display controls, it claims to be playing, but no audio
is produced.

Firefox 3.6 fails totally and will only display a ‘loading’ symbol
when the controls are enabled.
Firefox 4.0 beta8 nightly build will behave like Chrome, and
be playing ‘on screen’ without producing sound.

The only browser that appears to be successful playing the
IceCast2 stream is Opera. For this test I’ve used the
release version 10.63. Even though it plays, there are some
issues related to the fact that the javascript API for the audio
tag assumes it handles files, with a fixed size, rather then an
endless stream.

The first issue is, there is no stop() function. Only play() and
pause(). This results in, it will continue streaming when one
‘pauses’ the playback. This is to be expected when one
pauses the playback rather then stops it. One solution to
this issue is to write and delete the audio tag from Javascript.

HTML:

</p> <div id="player" style="display: block;">test</div> <p>

JavaScript:

<br /> function Play(){<br /> document.getElementById(&#8220;player&#8221;).innerHTML=&#8217;playing<audio width="300" height="32" autoplay="autoplay"><source src="http://www.blaatschaap.be:8200/stream.ogg" type="&quot;audio/ogg;" /><source src="http://www.blaatschaap.be:8200/stream.mp3" /></audio>&#8216;;<br /> }<br /> function Stop(){<br /> document.getElementById(&#8220;player&#8221;).innerHTML=&#8221;stopped&#8221;;<br /> }<br />

By deleting the audio tag this way, it will stop the connection to the server too. But there is still an issue. The stream is still buffered. When once starts the stream again, by rewriting the audio tag into the html document, it will start playing the buffer it had been playing before, and so, plays a few seconds of old content before it resumes the current live stream.

It seems the audio tag is not suitable to play radio streams. So far, the only reliable way to play radio streams, semi-platform independant, is using a Java based ogg player: Jorbis (http://www.jcraft.com/jorbis/) which I have been using on my site before. But still…. it depends on Java being installed.

BlaatSchaap ‘live’

I’ve been blogging quite a bit about my experiences
while working on it. Let’s see…. what has been done,
what is still on the todo list:

Translation tool:

  • in-line translator works so far 
  • add voting feature
  • not ‘in-line’ translator 
  • option to delete a translation by the original translator

Other features to be implemented

  • Views for photo albums
  • Views for video albums 
  • Photo uploading
  • Video uploading
  • Video converting
  • Friends list manager
  • Access list manager
  • Automated backups
  • Profile editor
  • Account editor
  • ‘Wall’ implementation (possible ‘port’ of the oldbeta implementation)
  • New photo script enforcing the new access schema 
  • Forums 
  • Notifications
  • Messaging support 
  • Sending email notifications 

Possible features to implement:

  • OpenID login
  • OpenID provider
  • OpenSocial Application Support (container)
  • Blog (Regular text blog)
  • ReBlog (Tumblr style) (with possible anonymous function)
  • Facebook connect login 
  • Email hosting (username@blaatschaap.be)
  • BlaatNET (Communication Server)
    • ‘facebook-style’ chatbar
    • XMPP
    • IRC

Am I missing something?

Appearently my Tumblr account has been suspended.
I assume this is because of reblogging copyrighted
material, since I recently started reblogging images
with a site logo on them. In the past I used to ignore
those, and I think it would have been better if I hadn’t
changed my mind about them.
A number of the people I used to follow on Tumblr
has been suspended as well. I will continue to follow
some of the people still alive on Tumblr using
the RSS feed Tumblr offers.

Apart from that, I am planning to add Tumblr-like
functionality to BlaatSchaap ‘live’ anyways. I had
been thinking about this before, and I was planning
to add an ‘export to Tumblr’ feature. (if possible,
I haven’t looked into their API yet) I guess, no
exporting anymore ;) Importing should still be
possible through RSS feed. But this will be a
general RSS feed feature, not Tumblr specific.

So, I’ve mentioned Firefox and SVG Problems.
From the information I’ve read it should be fixed
in 4.0b7. I am running a nightly build of beta 8.
In this nightly build, you can use the img tag to
load an svg image, but it doesn’t auto resize if a
fixed size is written in the svg file. A problem I’ve
encountered before in my SVG tests.

So, what to do: Open the SVG file and look for
something that looks like

width=”500.00000px”
height=”500.00000px”

and replace it with

viewBox=”0 0 500 500″

Then firefox 4.0b8 will resize the image to the
size you’ve specified in the img tag.

Of course we don’t expect all firefox users to
run the latest beta, so, how will be to a fallback
to png?

I added a little javascript, which works for Firefox 4.0b6.
I will still have to test it for the latest regular build, but
I assume it will work too.

I am using this little JavaScript function

function SVGPNGImage(img){
    var src= img.src;
    src= src.replace(“.svg”, “.png”);
    img.onerror=undefined;
    img.src = src;
}

And the HTML will be like

In this example we assume  we have both

/images/sheep.svg
/images/sheep.png

on our server.

BlaatSchaap members might already know this, but I am working on an in-site translation tool.

If you want to help translating, please do so ;)

Well… I’ve been working on the site, and I am making progress. I have now a ‘menu’ in JavaScript/CSS.

I thought it was time to throw in some graphics. I’ve looked in the http://www.openclipart.org/ (Update: moved to https://www.clipsafari.com/ ) Open (Public Domain) clipart to find some graphics. (The current BS logo comes from there
as well)

Since we have modern browers nowadays, I decided to try to use the SVG format, as served on that site.

It works fine in Opera and Chrome, but Firefox is a bitch. Both Opera and Chrome will accept the img tag for an image in the svg format.

Firefox does not, and will only accept it through a object tag. The object tag has it’s problems, transparency is not respected and the onClick() events are not fired. And more problems, like it doesn’t scale lime I can so in the img tag. When I try that I will get scrollbars. Turned out I needed make some patches in the svg file itself to allow it to be scaled.

https://bugzilla.mozilla.org/show_bug.cgi?id=276431
(looks like it will be solved next firefox 4 beta?)
(a bug reported in 2004?)

MySQL

I should be studying. I have a databases exam
on monday, but in stead, I am scripting again.
Like I said before, it’s the wrong time for
my inspiration to kick in, but it did. lol.

Since I’ve learned some SQL during class I’ve
never seen before, I decided to use it. As, for
what I am trying to do, I needed something like
I’ve learned in class.

Welcome to reality: It doesn’t work in MySQL.
What good is it to be tought something that
doesn’t work like that in the Real World™?

Okay, MySQL is not the only database software
out there, but it’s one of the major SQL implementations
out there, isn’t it?

I am talking about the EXCEPT operator
( http://en.wikipedia.org/wiki/Set_operations_(SQL)#EXCEPT_operator )
which is not supported by MySQL
( http://bugs.mysql.com/bug.php?id=1309 )

The example on Wikipedia doesn’t exactly need
the except operator, could be written by just
changing the where clause.

The problem I am running into, makes it hard
to rewrite without the except operator.

As I am rewriting the site, the internal database
structure changed as well. I am trying to write
a script that imports data from the old database
to the new database.

The affected part is the rights management system.
The old site has only an access list for private photos.
This is stored per-photo. A simple table with three colums
(id, photo, user) where photo is the photo id and user is
the user id. Plain and simple.

The new rights management system will be more complex.
The idea is to create groups of friends, and assign one or
more of there friendsgroups as authorised to access the
item. (As it will not be limited to photos anymore in the
new design)

Now, the conversion. I look at each private photo, and
take it’s ID. I look this ID up in the table I described above,
and retrieve the user IDs of this photo.

Now, I want to check if there exsist a friend list
containing these people AND NOONE ELSE.

select `list` from `friendlist` where `friend`=’14’ or `friend`=’41’ except (select * from `friendlist` where not `friend`=’14’ and not `friend`=’41’)”;

This would be the query to do so, except for the fact
that MySQL doesn’t support EXCEPT.

Like I’ve mentioned before, I am working on a new version

of the BlaatSchaap Website. This is supposed to be a ‘live’ 
website. Loading content dynamic without refreshing á la AJAX.
So, depending on what page the user is looking at, I
include different JavaScript source files, using the method found on
On page load, this method works correctly, but since I want to 
be able change the content of the site from JavaScript only
after the initial site is loaded, I want to include more script
based on user events.
That’s when the trouble appears. When I try to use this method,
after the initial page load, the document.write function, used
in this method causes my whole document to disappear.
I’ve only started using this method, after my initial attempts to
just write the code to a div caused in no result, the code wasn’t
being parsed. It seems the code is only parsed when I use the 
document.write function.