Cacomania: tag

Cacomania

Develop a Firefox add-on using GhostText as example

Guido Krömer - 983 days ago - Tags: , ,

During the last months it might seem that my blog is dead, but it is not. I spend my most open source time developing GhostText. I already mentioned it here SublimeTextArea, which was the old name this project. But Federico and I decided renaming the project since it does not have to be restricted to Sublime Text. If you have no idea what GhostText is I recommend this video which show the the Chrome extension version.

read more TEST

Comment

Kill all long running MongoDB queries at once

Guido Krömer - 1062 days ago - Tags: ,

If of some very running queries killing your MongoDB server you should try to execute the following piece of code in the shell. It kills all long running queries at once. You can define the maximum execution time by using the first parameter, which is set to 120 seconds by default.

(function (sec) {db.currentOp()['inprog'].forEach(function (query) { 
    if (query.op !== 'query') { return; } 
    if (query.secs_running < sec) { return; }  

    print(['Killing query:', query.opid, 
           'which was running:', query.secs_running, 'sec.'].join(' '));
    db.killOp(query.opid);
})})(120 /*The maximum execution time!*/);

This is the output generated by my little emergency helper:

Killing query: 598841625  which was running: 1892 sec.
Killing query: 598818776 which was running: 1931 sec.
Killing query: 598771338 which was running: 2048 sec.
Killing query: 577527534 which was running: 73569 sec.
Killing query: 577589300 which was running: 73404 sec.
Killing query: 577540188 which was running: 73535 sec.
Killing query: 598254342 which was running: 3114 sec.
Killing query: 597396058 which was running: 4811 sec.
Killing query: 597609629 which was running: 4382 sec.
Killing query: 597403975 which was running: 4801 sec.
Killing query: 597423364 which was running: 4766 sec.
Killing query: 597389768 which was running: 4842 sec.

I hope my little posting helped you, please let me know if you liked or disliked it.

Comment

Get rid of those textarea with Chrome and Sublime Text 3

Guido Krömer - 1228 days ago - Tags: , , , ,

My recent project is a proof of concept connecting a HTML textarea with Sublime Text 3 using WebSockets, which lets you use all nice features of Sublime Text in a common textarea. Therefore I wrote a Chrome extension and a Sublime Text 3 plugin, the Sublime Text plugin starts a simple, single threaded, WebSocket Server awaiting a connection from the Chrome extension for sending and receiving the text when it has been changed.

I made a short video of this concept, which can be watched at YouTube.

read more TEST

Comment [6]

Test your RESTful API with Frisby

Guido Krömer - 1240 days ago - Tags: ,

Writing a RESTful API is easy, but ensuring that small changes/fixes to the API does not break compatibility with existing clients consuming the API is not easy.

Not easy without functional tests, with the usage of a framework specified in REST API testing like Frisby even the tests are written easily. Frisby is build on top of Jasmine a node.js based BDD framework.

read more TEST

Comment [6]

Simple AngularJS sum by key view filter

Guido Krömer - 1330 days ago - Tags: ,

This little view filter for AngularJS sums up the values of a spcific field from an array of objects.

This is quite useful if you want to show the total number of something at a table footer, for example.

angular.module('caco.feed.filter', [])
    .filter('sumByKey', function() {
        return function(data, key) {
            if (typeof(data) === 'undefined' || typeof(key) === 'undefined') {
                return 0;
            }
 
            var sum = 0;
            for (var i = data.length - 1; i >= 0; i--) {
                sum += parseInt(data[i][key]);
            }
 
            return sum;
        };
    });

Here is a small fiddle which shows how the filter works:

Let me know if you liked or disliked my little posting.

Comment [16]

A simple AngularJS client side pagination module

Guido Krömer - 1513 days ago - Tags: ,

After my last tutorial, I wanted to do some more complex with AngularJS and solve my news feed problem in a similar way I solved my bookmark chaos. During this, I ran into the problem that displaying large lists, containing hundred of entries, can slow down the app significant using ng-repeat. On slow browsers like the Firefox or Opera the application hangs for some seconds during rendering the list of feed items. Since the JSON encoded and GZIP compressed list with 1.000 feed items for example is transferred quite fast, I did not want to do the pagination on the server side instead of this I wanted to paginate the list on the client. Doing the pagination on the client has the benefit that other filters could be used at the same time, too.

Client side pagination with AngularJS

read more TEST

Comment [37]

A simple RESTful AngularJS bookmark app

Guido Krömer - 1539 days ago - Tags: , ,

Welcome to the second part of my AngularJS tutorial, you can read the first part here which covers a RESTful API build with the Slim PHP micro framework. AngularJS is a JavaScript framework for building single page applications in a MVC style. Unlike the traditionally way with jQuery you do not have to add event listeners on CSS classes and select HTML elements by querying them.

AngularJS Bookmark App, list view.

read more TEST

Comment [6]

TypeScript, why you should fall in love with it

Guido Krömer - 1656 days ago - Tags: , ,

The possibilities with JavaScript are awesome, but the maintainability is sometime really crappy, this is why Microsoft released TypeScript, which is a class based and optionally strictly typed language, as a superset of JavaScript. The Browsers does not need to support TypeScript since it gets compiled into JavaScript, the compilation is still readable, too.

Visual Studio Express 2012 for Web, TypeScript with IntelliSense.

read more TEST

Comment

Canvas Raycaster

Guido Krömer - 1669 days ago - Tags: , ,

When I was young I loved Games like Wolfenstein 3D, Nitemare 3D, Corridor 7: Alien Invasion and of course Doom or Duke Nukem 3D. Since Doom and Duke Nukem 3D using complex raycaster engines with a BSP for storing the map and evaluating which parts has to be drawn I'm going to try a Wolfenstein 3D like raycaster, which is very simple and can be implemented very easy in JavaScript using the canvas element for drawing. Raycaster with default settings on Opera

read more TEST

Comment [4]

Speeding up canvas drawing by scaling it with CSS3

Guido Krömer - 1687 days ago - Tags: , ,

Playing around with HTML5 Canvas is a lot of fun, but drawing is really slow and reminds me on GDI+ or Java 2D. The larger the resolution of the drawing canvas is the worse the performance becomes. Doing a little game using the whole browser given size on a Full HD monitor can even slow down on Chromium with a relatively fast CPU (AMD A8-3870). My idea was drawing the canvas in a smaller resolution, the half of the available for example, and scale it up. This is the same way a game console like XBOX 360 and PS3 rendering Full HD or even HD Ready which sometimes is not HD Ready indeed. Scaling elements can be done using CSS3 transform.

Read more if you wants to know about the performance impact by scaling a canvas up instead rendering on a larger one:
Canvas scaled rendering performance on Firefox, Opera and Chromium

read more TEST

Comment

Node.js Chat client with jQuery Mobile

Guido Krömer - 1701 days ago - Tags: , ,

Welcome to the last part of my node.js chat tutorial, the topic of this part is the jQuery Mobile based client. The decision choosing jQuery Mobile has the two reasons, the UI I created for "WebSockets chat with Node.js " was really ugly because I'm not a designer, so I decided taking something which looks well out of the box. The second reasons was that jQuery Mobile seems to be well tested on different browsers even if they are not WebKit based. If you have not read the server side tutorial you maybe should read it before.

The jQuery Mobile chat client
This screen shots show how the chat client will look.

read more TEST

Comment [4]

sprintf in JavaScript

Guido Krömer - 1706 days ago - Tags:

This is my implementation of a sprintf like function in JavaScript. It does not support any fancy number formatting and the replacement character (%) could be replaced, too. But sometimes it is just good enough.

String.prototype.sprintf = function () {
    var string = this;
    for (var i = 0; i < arguments.length; i++) {
        string = string.replace('%', arguments[i]);
    }
    return string;
}

My sprintf is a method of the string "class", so the call would be myString.spintf(1, 2, 3) and not like in c: sprintf(myVar, 1, 2, 3):

console.log('a: % b: % c: % d: %'.sprintf('A'));
console.log('a: % b: % c: % d: %'.sprintf('A', 'B'));
console.log('a: % b: % c: % d: %'.sprintf('A', 'B', 'C'));
console.log('a: % b: % c: % d: %'.sprintf('A', 'B', 'C', 'D'));

Here is the output produced by the code above:

$ node sprintf.js 
a: A b: % c: % d: %
a: A b: B c: % d: %
a: A b: B c: C d: %
a: A b: B c: C d: D

So have fun using and modifying it.

Comment

Serving static files with Node.js

Guido Krömer - 1718 days ago - Tags: ,

Node.js isn't built for serving static files, but during testing and development it's quite handy doing this without configuring an apache or whatever http server. No configuration file is needed just two lines of JavaScript to get this server running.

var MiniHttp = require('./MiniHttp.js').MiniHttp;
var server = new MiniHttp('/tmp/', 8000, null, 'foo.html');
read more TEST

Comment

Prevent impatient users to click a link several times

Guido Krömer - 1770 days ago - Tags: ,

  • Fact 1: Users are very impatient.
  • Fact 2: Some pages have a really long request time.
  • Fact 3: Users try to improving the request time by clicking several times the same link.

This can be bypassed by disabling the links on a page when they got clicked.

$('.one_click_link').click(function() {
    $(this).click(function() {
        return false;
    });
})

This solution has one disadvantage, if the user decides to click another link and reverts his decision the already clicked links are still disabled. This is the reason I used the class "one_click_link" which will be assigned to "problematic" links, instead of giving all links on a page this availability using $('a')...

Comment [1]

MongoDB: manipulating values if a "update" is not enough

Guido Krömer - 1775 days ago - Tags: , ,

Sometimes the MongoDB update function does not fit the requirements. Since JavaScript can be executed directly in the database (if it's not disabled) it can be used for more complex updates, for example. This happens without moving the data to the application and back to the database.

This small example does the same as: myColl.update({myValue: 1}, {$inc: {myValue: 1}})

db.myCollection.find({myValue: 1}).forEach(function(doc){ 
    var newValue = doc.myValue + 1;
    db.site.update({_id: doc._id}, {$set: {myValue: newValue}})  
})

This is a concrete example where tags have been saved as a comma separated string. Creating an index, for fast searching in the tags, on this field would not make sense. Converting this string field into an array of tags should solve the problem. This piece of code does this job for each site which has been tagged, for speeding up only the tags field and MongoDB's _id field gets queried from those documents.

db.sites.find({tags: { $exists: true }}, {tags: 1}).forEach(function(doc){ 
   db.site.update({_id: doc._id}, {$set: {tags : doc.tags.split(',')}})  
})

Comment