Idea for DART Hackathon

I want to make a simple  application which would help people to learn how to draw figures when they have no one willing to be a model for them. The idea is really simple: There is quite a lot of people who want to learn to draw other people, but they are either too shy to ask other people to be models for 20 mins or there is no one around or whatever other obstacle you can think of. My app tries to solve this by offering images of nude / half nude people (no porn, sorry, there are better sites for …

Continue Reading

Dotless stack overflow exception

We have following .less snipet. It was no problem for the old dotLess compiler, but the new one (v 1.2.2) has problem in the .anonymousPersonImage class declaration. It results in Stack Overflow exception and dotLess stops working. Solution is to avoid having same names for mixins and classes. .personImage() { float: left; margin: 0px 4px 3px 0px; width: 100px; height: 100px; border: 1px solid @defaultBorderColor; } .personImage { .personImage(); } .anonymousPersonImage { .personImage(); background-image: url(‘./Images/anonymousPerson.png’); background-repeat: no-repeat; background-position: center; }

Continue Reading

Jak lžeme dětem

Jak lžeme dětem Dospělí lžou dětem pořád. Netvrdím, že bychom měli přestat, ale myslím, že bychom se měli alespoň zamyslet, jaké lži jim říkáme a proč. Může nám to přinést užitek. Také nám všem lhali, když jsme byli děti, a některé z těch lží nás dodnes ovlivňují. Zkoumáním toho, jak dospělí lžou dětem, si můžeme vyčistit hlavu od lží, které byly řečeny nám. Používám slovo „lež“ ve velmi obecném významu: ne jen jako zjevná nepravda, ale i jako všechny jemnější způsoby, jak mateme děti. Ačkoli slovo „lež“ má negativní význam, neříkám, že bychom to neměli dělat – jen říkám, že …

Continue Reading

Blurry images in html5 canvas

Why <canvas> draws blurry images? Did it happen to you as well? I found fairly simple tutorial, and tried to code according to its advice. The result is shown below. Big blurry cat … Then I tried to copy paste the code, but with almost identical result. Again I got a blurry  image.  Next day I found out that I have to specify attributes width and height directly on the canvas element. It is not enough to set it via css. It doesnt not make any sence to me, because it is good practise to separate html markup and stylesheets. …

Continue Reading

Rotate table cell content with jQuery

Rotating text via CSS is now relatively easy. There is a few of good tutorials and demos out there. But they lack one thing – they don’t explain how to rotate text in a table cell. Few days ago during pair programming with Michal Tehnik we run into trouble. We managed to rotate the text, but it only worked properly in Internet Explorer. (via writing-mode)   In Chrome and Firefox the table cells shrinked, because elements rotated via css rotate property are still “placed” in their original position. To fix this behaviour we need to calculate first width and height …

Continue Reading

Simple inheritance via jQuery.extend

Spoiler warning: This is not true inheritance as we are used have to in static languages. It is not even prototypal inheritance. It is merely an experiment to find out if it is possible to achieve (mock) inheritance using jQuery.extend() method. And yes, it is kind of possible. JQuery.extend basically copies properties from one object onto another. So in order to mock inheritance you have to extend instance (or instances) of ‘parent class’ with properties of another objects. Here is how I did it: $(function() { var Parent = function() { var that = this; this.name = ‘david’; this.getName = function() { return …

Continue Reading

Little jQuery.extend gotcha

jQuery.extend() is a very powerful function for merging two objects or for extending jQuery with custom plugins. There is but one little gotcha to think about: as in most function calls the order of parameters matters 🙂 Following two fragments of code yields different objects var a = { aa : ‘1’ , bb : ‘2’ , cc : ‘3’ }; var b = { aa : ’11’ , bb : ’22’ , dd: 3 }; var result_a = $.extend({}, true, a, b); var result_b = $.extend({}, true, b, a); The result will be this: Notice that I use $.extend({}, …

Continue Reading

Proposal for WordPress plugin – customScript

&lt;script src="http://demos.davidjs.com/customScript/raphaeljs.js"&gt;&lt;/script&gt;&lt;script type="text/javascript"charset="utf-8"&gt;window.onload=function(){var r=Raphael("holder",640,480),p=r.path("M295.186,122.908c12.434,18.149,32.781,18.149,45.215,0l12.152-17.736c12.434-18.149,22.109-15.005,21.5,6.986l-0.596,21.49c-0.609,21.992,15.852,33.952,36.579,26.578l20.257-7.207c20.728-7.375,26.707,0.856,13.288,18.29l-13.113,17.037c-13.419,17.434-7.132,36.784,13.971,43.001l20.624,6.076c21.103,6.217,21.103,16.391,0,22.608l-20.624,6.076c-21.103,6.217-27.39,25.567-13.971,43.001l13.113,17.037c13.419,17.434,7.439,25.664-13.287,18.289l-20.259-7.207c-20.727-7.375-37.188,4.585-36.578,26.576l0.596,21.492c0.609,21.991-9.066,25.135-21.5,6.986L340.4,374.543c-12.434-18.148-32.781-18.148-45.215,0.001l-12.152,17.736c-12.434,18.149-22.109,15.006-21.5-6.985l0.595-21.492c0.609-21.991-15.851-33.951-36.578-26.576l-20.257,7.207c-20.727,7.375-26.707-0.855-13.288-18.29l13.112-17.035c13.419-17.435,7.132-36.785-13.972-43.002l-20.623-6.076c-21.104-6.217-21.104-16.391,0-22.608l20.623-6.076c21.104-6.217,27.391-25.568,13.972-43.002l-13.112-17.036c-13.419-17.434-7.439-25.664,13.288-18.29l20.256,7.207c20.728,7.374,37.188-4.585,36.579-26.577l-0.595-21.49c-0.609-21.992,9.066-25.136,21.5-6.986L295.186,122.908z").attr({stroke:"#666",opacity:.3,"stroke-width":10}),over=r.path().attr({stroke:"#fff"}),e=r.ellipse(295.186,122.908,5,5).attr({stroke:"none",fill:"#fff"}).onAnimation(function(){over.attr({path:"M295.186,122.908L"+this.attr("cx")+","+this.attr("cy")+"z"});});e.clone();e.attr({rx:7,ry:3});var rotateAlongThePath=true;function run(){e.animateAlong(p,2e4,rotateAlongThePath,function(){e.attr({cx:295.186,cy:122.908,rotation:0});setTimeout(run);});rotateAlongThePath=!rotateAlongThePath;};run();var logo=r.set(r.rect(13,13,116,116,30).attr({stroke:"none",fill:"#fff",rotation:45,opacity:.2}),r.path("M129.657,71.361c0,3.812-1.105,7.451-3.153,10.563c-1.229,1.677-2.509,3.143-3.829,4.408l-0.095,0.095c-6.217,5.912-13.24,7.588-19.2,7.588c-3.28,0-6.24-0.508-8.566-1.096C81.19,89.48,66.382,77.757,59.604,60.66c3.65,1.543,7.662,2.396,11.869,2.396c15.805,0,28.849-12.04,30.446-27.429l22.073,22.072C127.645,61.351,129.657,66.201,129.657,71.361zM18.953,85.018c-3.653-3.649-5.663-8.5-5.663-13.656c0-5.16,2.01-10.011,5.661-13.656l14.934-14.935c-3.896,13.269-5.569,27.23-4.674,40.614c0.322,4.812,0.987,9.427,1.942,13.831L18.953,85.018zM44.482,46.869c3.279,25.662,23.592,50.991,47.552,57.046c3.903,0.986,7.729,1.472,11.432,1.472c0.055,0,0.107-0.005,0.161-0.005l-18.501,18.503c-3.647,3.646-8.498,5.654-13.652,5.654c-3.591,0-7.021-0.993-10.01-2.815l0.007-0.01c-1.177-0.78-2.298-1.66-3.388-2.593c-0.084-0.082-0.176-0.153-0.26-0.236l-3.738-3.738c-7.688-8.825-12.521-21.957-13.561-37.517C39.736,70.853,41.149,58.578,44.482,46.869").attr({fill:"#f89938",stroke:"none",opacity:.5}),r.circle(71,32,19).attr({stroke:"none",fill:"#39f",opacity:.5}));logo.translate(245,177);};&lt;/script&gt; You will only see the demo animation if you click link to this post Motivation For this blog I am using WordPress and I am quite happy with it, but I miss one feature – the ability to add custom javascript code to given post. I do not want to have separate demo pages when I am want to demostrate some piece of code or something. Sometimes I need it to modify the Html structure of page, or add a simple animation or for whatever just crosses my mind:) I’ve tried to write my …

Continue Reading