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.

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:

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.

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

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.