14 Dec 2013, 11:03pm
javascript:

leave a comment




  • Anzeige
  • Hash in JS

    Gen­er­at­ing hashes from strings is a very handy thing to have. Sur­pris­ingly, in JavaScript, an arithmetic-operation-based algo­rithm is about *three times* faster than one using bit-wise oper­a­tors–see for your­self. I sug­gested to add the most per­for­mant method as hash method to underscore.string.js.

    So much about state­ments on stack­over­flow like

    The hash << 5 - hash is the same as hash * 31 + char but a LOT faster.

    (cf. here)

    In times of inter­preted lan­guages and vir­tual machines one should recon­sider before apply­ing the same old rules again.

    p.s. If you know about alter­na­tive algorithms/implementations, please add them to the test and leave a com­ment here, I’m curi­ous to see what else there is. Btw. I was very sur­prised that the neat reduce-based ver­sion failed so miserably.

    7 Oct 2013, 10:07am
    javascript:

    1 comment




  • Anzeige
  • Callback Method for Twitter’s Typeahead

    When you start using Twitter’s typea­head, e.g. because you switched from Boot­strap 2.3 to 3.0, you will notice that it is NOT a sim­ple drop-in replace­ment for Bootstrap’s orig­i­nal typea­head!
    Before, you gen­er­ated the sug­ges­tions shown to the user by imple­ment­ing a call­back method while cre­at­ing the typea­head like this:

    $(field).typeahead({
      source: function(query, process) { 
        ... return a list of suggestions (see doc for details) 
      }
    });

    Since ver­sion 3, Boot­strap does not pro­vide its own typea­head any more, instead it is using Twitter’s own imple­men­ta­tion which seems to be a good choice at least on the long run. But it does not pro­vide any mean for defin­ing a call­back method to pro­vide the sug­ges­tions — no clue why.
    Instead you can pro­vide a pre­de­fined array locally, a pre­de­fined array that will be loaded on start-up, or a remote ser­vice defined by a URL.
    You will find sev­eral good exam­ples of why you need a call­back method sometimes.

    • You want/have to use a Javascript library to access the service.
    • There is no data­base for the sug­ges­tions, they a gen­er­ated on the fly, e.g.if you want to sug­gest sen­tence com­ple­tion while the user types.
    • You are using Meteor’s col­lec­tions hold­ing your sug­ges­tions, thus, there is no URL you could point to.

    But tak­ing a look into the inter­nals revealed fol­low­ing solu­tion: com­pletely by-pass the inter­nal sug­ges­tion aggre­ga­tion of Twitter’s typea­head by replac­ing the getSuggestions(query, callback) method of the first dataset, which we defined by local: [];.

    (t = $("field")).typeahead({ local: [] });
    t.data("ttView").datasets[0].getSuggestions = function(query, callback) {
      var suggestions = ... gather your suggestions here ...
      var data = [];
      for (suggestion in suggestions) { data.push(this._transformDatum(suggestion)); }
      callback(data)
    }

    (Trans­lated from Cof­fee­script on-the-fly — con­sider as a draft than an out-of-the-box solution.)

    Happy hack­ing. :)

    p.s. for Meteor users: The call­back breaks each time the tem­plate gets re-rendered — despite that you use the pack­age preserve-inputs or <#constant> due to a bug. Some­how, con­stant areas and that par­tic­u­lar pack­age do not get along with each other. Solu­tion: removed the pack­age and use con­stant areas around typea­head input fields works. This should be fixed as soon as the new tem­plate engine gets rolled out.

    30 Nov 2012, 7:40pm
    recommendations:

    leave a comment




  • Anzeige
  • Dev Tools Collection

    Design Grid

    The famous 960 grid is a great basic for any kind of web design. Espe­cially the 12 col­umn grid is used often on eye-pleasing web­sites.
    Fea­tures: fully cus­tomiz­able and the CSS code will be gen­er­ated auto­mat­i­cally.
    Edi­tor: grids.heroku.com.
    More info about the grid itself: 960.gs.
    Alter­na­tively, use Bootstrap’s inte­grated lay­out grid: http://getbootstrap.com/css/#grid.

    Ani­mated Busy Indi­ca­tor Graphic

    Gen­er­ate busy indi­ca­tors aka ani­mated graph­ics to visu­al­ize when a sys­tem is load­ing data or is busy doing some­thing in gen­eral.
    Lots of dif­fer­ent ani­ma­tions are pro­vided to choose from, col­ors are com­pletely cus­tomiz­able, and the gen­er­ated graph­ics are free to use wher­ever you like!
    ajaxload.info

    Embed Graph­ics into CSS

    A tool to con­vert graphic files (e.g. a busy indi­ca­tor) into a Base64 that can be embed­ded into CSS as data. Though the size is slightly big­ger (which does not mat­ter a lot with such small files) but it saves another, poten­tially block­ing request to the server (as the amount of par­al­lel requests is lim­ited to two).
    You have to upload the file (Ref­er­ence by URL is not sup­ported unfor­tu­nately) to get the data for­mat in return.
    websemantics.co.uk/online_tools

    CSS Gra­di­ent Generator

    Gra­di­ents (used wisely) can help to cre­ate sub­tle 3D-effects with­out the need of extra pay­load in terms of DOM nodes or graphic files. Of cause you can also go wild and cre­ate crazy rain­bow gra­di­ents… This edi­tor gen­er­ates the CSS code for you with a very easy to use UI.
    colorzilla.com/gradient-editor/

    Live RegEx Tester

    Build­ing reg­u­lar expres­sions is always a bit tricky IMO. The tool below comes in handy because you can test your drafts instantly and there are explained exam­ples, too.
    gskinner.com/RegExr

    If you need some­thing sim­pler and smaller:
    regular-expressions.info

    Match­ing color combinations

    Most of the tools I saw online pro­duce the same sequences using well known pro­ce­dures (monocro­matic, com­ple­ment, triad, tetrad, ana­logic, and accented ana­logic). They are good and use­ful, but color blender does some­thing dif­fer­ent (I did not yet check out in detail what and how) so it’s a good way to find an alter­na­tive set of col­ors, also for com­par­i­son.
    colorblender.com/

    Nice tools using the before men­tioned “known pro­ce­dures”:
    colorschemedesigner.com/

    Beau­ti­ful color sets and pat­terns:
    colourlovers.com

    Fonts and Icons

    Adobe’s Edge Web Fonts.
    In my opin­ion the best icons font there is: Font Awe­some.

    JSON Val­ida­tor and formatter

    Quickly for­mat out­put of a web­ser­vice into some­thing much more human read­able and check valid­ity in the same time: http://jsonlint.com/

    (to be continued…)

    26 Apr 2012, 11:04am
    gwt:

    leave a comment




  • Anzeige
  • Improving Canvas Performance

    1. Time­out instead of Scheduler

    Sur­pris­ingly, using com.google.gwt.user.client.Timer seems much faster then rely­ing on com.google.gwt.core.client.Scheduler. I did not yet eval­u­ate the dif­fer­ences in detail but the lower CPU work­load speaks for itself.

    2. Ani­ma­tion­Sched­uler

    I am not really sure if this helps a lot, but you will find a lot of online doc­u­men­ta­tion explain­ing that you should use this:
    com.google.gwt.animation.client.AnimationScheduler.get(). requestAnimationFrame(callback, element);. The ele­ment para­me­ter is optional but said to improve per­for­mance as the browser can decide when to ren­der opti­mally.
    So when­ever your timer kicks in, and you are ready to ren­der the results, use the Ani­ma­tion­Sched­uler instead of call­ing your ren­der­ing rou­tines right away. It will only take very few mil­lisec­onds (depend­ing on the users screen frame rate—which is 60 Hz or more usu­ally) for the call­back to return to your code.

    3. Caching

    This parts requires much more effort and depends on your soft­ware archi­tec­ture and require­ments. The basic idea is not to redraw things that did not change. To do so we can draw each item on a hid­den can­vas once and then reuse this ren­der­ing dur­ing every draw­ing cycle.
    As the process is a bit more com­pli­cated, I will ded­i­cate it a sep­a­rate post—comming soon!

    4. Save on effects

    Yes, effects is what the can­vas is all about, but some­thing like a shadow can cost quite some CPU power. So if you run into prob­lems check if some of the effects can be achieved cheaper or even be removed.

    26 Apr 2012, 9:58am
    gwt java:

    leave a comment




  • Anzeige
  • Multiple Projects and GWT

    When work­ing on sev­eral large scale projects (in Eclipse), it’s con­ve­nient and of course more effi­cient to share and reuse code via com­mon libraries. While those are in an early stage they need to be changed a lot and there­fore it’s handy to link projects in instead of cre­at­ing new jars each time the library has been updated.
    Unfor­tu­nately, this stan­dard approach for Java devel­op­ment in Eclipse does not work that straight for­ward as with plain old Java projects, it requires three steps in total:

    1. Link the library project to all rel­e­vant projects (“Project Pref­er­ences” -> “Java Build Path” -> “Projects” -> “Add…”)
    2. Then, add the client-side code of the library (by adding it as a mod­ule.) There­fore, edit the gwt.xml of your appli­ca­tion and add for exam­ple <inherits name="net.svenbuschbeck.gwt.lib.SuperLib "/> where Super­Lib is the file name of the gwt.xml file in you library project and before that is the pack­age it lies in.
    3. Add the code to the project by link­ing a source folder. Unfor­tu­nately, this is required if you do not want to write an Ant script to com­pile your appli­ca­tion. (If you pre­fer Ant check this out) I don’t like the idea of using such a script because if you for­get to run it each time you make changes, you will end up in confusion—let’s go for the con­ve­nient, auto­matic way then.
      1. Add a folder to your appli­ca­tion project; open the “advanced” sec­tion in the folder cre­ation dia­log, select “Link to alter­nate loca­tion” and pick the source folder (usu­ally “src”) of your library project. (Hint: if you work within a team using a ver­sion­ing sys­tem, you can cre­ate a vari­able for that folder and use this instead. This way, each of your col­leagues can put the library project in a dif­fer­ent folder and accom­mo­date for that by adjust­ing the vari­able :) )
      2. Right click the folder, “Build Path” -> “Use as Source Folder”. Done.

    Sur­pris­ingly, the GWT plu­gin for Eclipse does not honor the project link­ing, thus all the ref­er­ences need to be made explicit or you will end up with lots of the fol­low­ing: ClassNotFoundException.

    31 Jan 2012, 10:53am
    gwt java javascript:

    leave a comment




  • Anzeige
  • An invalid or illegal string was specified” Exception in GWT

    While work­ing with can­vas (draw­ing stuff on it) in GWT, sud­denly and in a seem­ingly unpre­dictable man­ner I got fol­low­ing error mes­sage now and then from within the GWT frame­work code:

    com.google.gwt.core.client.JavaScriptException: (NS_ERROR_DOM_SYNTAX_ERR): An invalid or illegal string was specified;

    Again, GWT tricked me into think­ing I am writ­ing Java code and made me for­get about that it is going to be com­piled into Javascript. And because of the lat­ter, a divi­sion by zero does not throw an Devi­sion­ByZe­roEx­cep­tion, no, it returns NaN even for native data types (there is no dif­fer­en­ti­a­tion between dou­ble and Dou­ble in Javascript — there is only the object-version of dou­ble, which can be of value Double.NaN).

    But also GWT was not pre­pared to han­dle Double.NaN. When call­ing canvas.getContext().drawImage(image,x,y) and one of x and y or both were Double.NaN I got the error mes­sage shown above. If you got the same… you know what to do now: check all devi­sions in your code for poten­tial devi­sions by zero!!

    2 Feb 2011, 11:41pm
    java projects:

    leave a comment




  • Anzeige
  • Authentication with FlickrJ

    When you know about user­name and pass­word logins, the whole Flickr authen­ti­ca­tion process for web appli­ca­tions seems a lit­tle weird on first sight, nev­er­the­less it is log­i­cal and nec­es­sary after you have done some read­ing (for exam­ple the offi­cial Flickr WebApp Auth HowTo).
    To get started and into cod­ing quickly (using FlickrJ and Java) I rec­om­mend this page. Espe­cially the code exam­ple is excel­lent in my opin­ion! Thanks Andy Sacher!

    17 Jan 2011, 6:38pm
    gwt jobs:

    leave a comment




  • Anzeige
  • Testing GWT Application in Virtual Machine

    I am devel­op­ing on a Mac, but to test my GWT appli­ca­tions for cross-browser com­pat­i­bil­ity in Inter­net Explorer I need to use Win­dows, thus I got Win­dows 7 installed using Par­al­lels. Just by the way, to be able to test in dif­fer­ent Inter­net Explorer ver­sion, I am using a pretty handy appli­ca­tion called IETester.
    But try­ing to access local­host with IE in the vir­tual machine did not work. I got a “404 page not found” error instead of see­ing my app run­ning on the local App Engine instance. Obvi­ously, Par­al­lels does not auto­mat­i­cally for­ward local­host requests to OSX and maybe that is actu­ally a good idea security-wise.
    To fix the issue, you need to run Google App Engine on a pub­lic net­work inter­face, or in other words, bind the App Engine server to all avail­able IP addresses. The down side: every­body know­ing your IP address can see the GWT app now, but oth­er­wise you are not allowed to access it in the viru­tal machine as from your OSX’s point of view, that Win­dows machine is “some other guy access­ing from the out­side”, too. To make GAE acces­si­ble from the out­side, add the para­me­ter “-bindAd­dress 0.0.0.0″ when launch­ing you local GAE. Using Eclipse you can achieve that by right click­ing your project -> Run As -> Run Con­fig­u­ra­tions -> Choose “(x)= Argu­ments” tab; add the option to the top most box titled “Pro­gram argu­ments” in the options area (e.g. before “-port 8888″).

    The first part of the list of argu­ments should look some­thing like that:

    -remoteUI "${gwt_remote_ui_server_port}:${unique_id}" -startupUrl GlocalUiPg2.html -logLevel INFO -codeServerPort 9997 -bindAddress 0.0.0.0 -port 8888 ...

    Now, you can access you app using the OSX’s pub­lic IP address. (You can get to know your IP by hav­ing a look at the net­work pref­er­ences panel.) Launch­ing GAE from Eclipse, you will see a dif­fer­ent link (URL) in the “Devel­op­ment Mode” tab now, con­tain­ing the pub­lic IP already. Using that one in, say, your Fire­fox on Mac, it will ask you now whether you want to allow the debug­ger access. That is also due to the fact, that you are now using a pub­lic address, so it is not clear to your local debug server, whether that request came from the same com­puter or some­one else in the network.

    17 Sep 2010, 3:49pm
    gwt java:

    leave a comment




  • Anzeige
  • Uploading File to Server: Access Denied

    Sim­ple task: upload a file to the server. Achieved so far: upload form works and the file gets trans­ferred to the server.
    But as soon as the file is writ­ten, I get one of that:
    “java.security.AccessControlException: access denied (java.io.FilePermission /some/folder/upload__71c20601_12b1b66bc39__7ffa_00000000.tmp write)“
    I am amazed how much search­ing is required to find some infor­ma­tion about how to mod­ify the file per­mis­sions for the local app engine! And in the end, it turns out that there is an issue with the GAE on Mac but with­out a way to con­fig­ure the local Jetty server to allow write access. :(
    As soon as I deploy the app to a Tom­cat on Linux, it works like a charm!