Archive for the 'Uncategorized' Category

Your stats are booming!

Apparently that is wordpress way to say

👍 your blog is dead, and we’re surprised someone has actually visited it!

Yay. I don’t write here very often, but when I do – nothing happens. People search for something in their favorite search engine, and sometimes my blog pops up. So they click, and sometimes they find my post helpful. Some other times they find it confusing, and most of the times it is simply not what they were looking for. But in all these cases they just close the tab afterwards. They do not comment. They do not discuss.

Where is everybody?

It could be just that my posts are bad. Or it could be that blogs are no longer relevant. People are not interested in blogs. People are not even interested in discussing their interest in blogs. Either way, I think I will find better ways to spend my time in coming year.

Center element with unknown width

As with bootstrap progress bar post, this one is actually about CSS, not javascript, but I don’t want too many tags. So, the subject of today’s tutorial is centering stuff. In the good old days we could just place its left side at 50% and set left margin to minus half of content width. But what if we do not know content width in advance and therefore can’t set the margin a priori? That’s where newer CSS stuff helps:

transform: translate(-50%, -50%);

Yes, those are percents of its actual dimensions, whatever they will be. You can see it in action here.

Add more progress to bootstrap progress bar

Remember the last time when I posted useless and uninteresting javascript tutorial that gave this blog grand zero hits boost? It’s time to do that again :) Today we’ll be animating bootstrap progress bar to make it look like something is happening when in fact it is not. Just add this

@keyframes progress {
    from { background-position:  0px; }
    to   { background-position: 40px; }

.progress-bar-animated {
    animation: progress 1s linear infinite;

to your progress bar and decimate user frustration:

animated progress bar

Responsive font size with CKEditor

CKEditor is very nice WYSIWYG editor for web apps. It saves you many days of coding in exchange for just hours spent in DOM inspector trying to come up with CSS rules for it to play nice with your existing layout. But occasionally you will still need to write some code to work around their design choices. One of these cases is when you want to use responsive font size. Continue reading ‘Responsive font size with CKEditor’

One year of COLT

A year ago we have released first public version of COLT (short for Code Orchestra Livecoding Tool). It’s about time for some kind of reflection post.

Like other livecoding tools, COLT is watching your source files for changes that you make in any IDE or text editor. Unlike other livecoding tools, COLT does not restart your application but updates it with new code, and it keeps running as if nothing happened. This is cool and unprecedented feature, but of course we pay the price – we have to transform original code for this to work, and this transformation occasionally stands in the way of, or even breaks some things in your code – which looks like yet another bug in COLT to the user.

COLT was initially released for flash platform (if you was not around back then, check this demo or presentation to get a picture). We have received a lot of positive feedback and decided to expand the technology into other languages, such as javascript.

While javascript normally does not have any “compile time” and you can refresh the browser to see your changes instantly, there is the same common problem – you want to tweak the application logic in specific state, but you have not added easy way to save and restore that state. Then, there is crappy android emulator that is times slower than actual device to work with, when you are developing phonegap apps. Finally, there is node that you have to restart for source changes to take effect when you work on nodejs server application. We thought COLT would help you with all of the above (see this nodejs video, for example).

However, even the most enthusiastic users would perceive COLT as some weekend toy, opting for time-tested workflow for their actual work. We had to find another way to make COLT useful, and in the twisted turn of evolution COLT has developed special powers, when it comes to extendable text editors such as Sublime or Webstorm. Leveraging COLT’s connection to your application, our plugins for those editors can improve their limited code completion with runtime information

COLT plugin for Sublime Text

or provide new useful features such as variables inspection, navigating to function declaration or rendering pretty documentation. People seem to appreciate it already, e.g. check out slides 77 to 84 of this EmpireJS talk by Kirill Cherkashin. Funny thing about these features is that we could do them with minimal non-invasive code transformations, not having to deal with source maps or aforementioned “bugs”, but then COLT had to be renamed to COT.

For those who were still not convinced to try COLT we have added angularjs support. I mean, our live html editing support was already really good, but for angular fans we made it even better. Since I have probably exhausted average reader attention span by now, I will just briefly mention few other things here, such as new runtime environment support, chromeless COLT version, or proxy mode – but you can learn more in COLT 2.0 blog post if you feel like. And if you want to learn even more, consult our docs page, or just ask someone in the forum.

How to check if URL is not MP3 ?

Since flash player can’t send HEAD requests, you have to resort to dirty tricks if you want to check URL content type. In this example, we are going to try and figure out if some URL points to playable sound. Since we’re dealing with unknown URL, chances are that its domain does not permit us to access raw data, so we can’t really use URLLoader – we need to actually load whatever URL points to into Sound object. However, if you thought that you could just catch i/o error 2124, like you would do with image Loader, for example, you’re in for big surprise: it does not fire. Instead, Sound object fires progress and complete events, and is even happy to play (although you will not hear any noise, or anything at all).

So, how do we detect that our Sound object is actually broken? First thing you’ll notice is that even after complete event it is still buffering. Unusual, but the same thing happens with really short sounds, so this check is not reliable. The other thing is that extract() method obviously fails to return any samples. This in itself is again not enough, since it does happen with partially loaded sounds too. However, the combination of the two seems to hit the nail:

private function onComplete(e:Event):void {
   var s:Sound = as Sound;
   if (s.isBuffering && (s.extract(new ByteArray(), 1, 0) < 1)) {
      // url does not point to playable sound

See this method in action at :)

Amazing Maps (and one in particular :)

Today I came across (and followed) Amazing Maps twitter account. They post loads of interesting maps, like the one that shows who has supplies the oil, or the one that shows that my country has world’s best extinction rate. This post, however, is dedicated to the map of countries prosecuting gays:

Personally, I don’t care if you are gay or not (unless you’re girl that I am interested in), but this map scored two points on my bullshitometer for dirty tricks it uses to influence my opinion. 1st, and obvious, was to cover offending countries in blood. Of executed gays, I suppose. 2nd, and less obvious, is clever choice of projection where gay-neutral Greenland (small island with 80% of its area being nothing but ice) has roughly the same size as whole gay-hating Africa. So, I decided to re-do this map using positive green color and population-based projection to make it a bit more representative:

Turns out it does not look that different, after all :) Gay-neutral China, the world’s most populated country, conveniently offsets all those aftrican gay haters. In fact, I’m sure that very soon indian government will sort out their bureaucratic bullshit, and half of this green spot will be gone.

Update: they have now posted new version of the map that uses better projection and breaks it up by punishment severity.

Old stuff

February 2017
« Jan    

Oh, btw…