dev.enekoalonso.com » html http://dev.enekoalonso.com having fun with code Wed, 12 Oct 2011 21:40:17 +0000 en hourly 1 Angry Birds as a Web App http://dev.enekoalonso.com/2011/05/12/angry-birds-as-a-web-app/ http://dev.enekoalonso.com/2011/05/12/angry-birds-as-a-web-app/#comments Thu, 12 May 2011 17:40:58 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=693 Really, really cool, Rovio has released Angry Birds (and all the game assets) as a web app, Javascript and Canvas based. I can’t wait to see clones of Angry Birds with custom assets, maps and sounds.

via Angry Birds as a Web App.

Related Posts:

]]> http://dev.enekoalonso.com/2011/05/12/angry-birds-as-a-web-app/feed/ 0 Finding duplicate ID’s on an HTML page http://dev.enekoalonso.com/2011/05/06/finding-duplicate-ids-on-an-html-page/ http://dev.enekoalonso.com/2011/05/06/finding-duplicate-ids-on-an-html-page/#comments Fri, 06 May 2011 17:49:34 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=687 Looks like sometimes we forgot element ID’s are meant to be unique on a HTML page. Here is a little bit of code I just wrote to find duplicate ID’s on a page (run the code on your browser’s javascript console):

  1. var idList = {};
  2. var nodes = document.getElementsByClassName('');
  3. for (var i in nodes) {
  4.   if (!isNaN(i) && nodes[i].id) {
  5.     idList[nodes[i].id] = idList[nodes[i].id]? idList[nodes[i].id]+1:1;
  6.   }
  7. }
  8. for (var id in idList) {
  9.   if (idList[id] > 1) console.log("Duplicate id: #" + id);
  10. }

Have fun!

Related Posts:

]]> http://dev.enekoalonso.com/2011/05/06/finding-duplicate-ids-on-an-html-page/feed/ 0 Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates http://dev.enekoalonso.com/2010/03/24/mooml-1-1-no-more-eval-say-hi-to-mooml-template-and-mooml-templates/ http://dev.enekoalonso.com/2010/03/24/mooml-1-1-no-more-eval-say-hi-to-mooml-template-and-mooml-templates/#comments Wed, 24 Mar 2010 20:54:01 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=501 Mooml 1.1 has been finally released today and made available to everybody via Github and Mootools Forge plugin repository.

What is new in Mooml 1.1

Mooml 1.1 has a lot of new features, but these are worth to mention:

  • No more eval()
  • Mooml.Template
  • Mooml.Templates
  • Pass functions as arguments to template functions
  • References to elements with an Id

No more eval()

Although the use of eval() was transparent to the final user, Mooml 1.0.X depended on it to properly generate the dom elements using the template functions like div(), span(), table(), etc. Mooml 1.1 does not use eval() anymore, which prevents issues when compressing the code with compilers like Google Closure Compiler and also increments the overall performance of template rendering.

Mooml.Template

Mooml.Template is the new constructor for Mooml templates. This constructor will allow to create standalone templates like this:

  1. var tpl = new Mooml.Template('mytemplate', function(params) {
  2.   div({ id: params.divId }, params.divContent);
  3. });
  4. document.body.grab(tpl.render({
  5.   divId: 'mydiv',
  6.   divContent: 'Hi there!'
  7. }));
  8. // will create: <div id="mydiv">Hi there!</div>

There is no need to create a Mooml.Template object when using Mooml.register(), which will work as in previous versions of Mooml.

Mooml.Templates

Mooml.Templates is a mixing that can be implemented into other Mootools classes. This will allow these classes to create their own templates internally and use them without the need of registering global templates with Mooml.register(). Here is an example of a Dog class:

  1. var Dog = new Class({
  2.   Implements: [Options, Mooml.Templates],
  3.   options: {
  4.     bark: 'Bark! Bark!'
  5.   },
  6.   initialize: function(options) {
  7.     this.setOptions(options);
  8.     this.register('dog', function(bark) {
  9.      div({ 'class': 'dog'}, bark);
  10.     });
  11.   },
  12.   toElement: function() {
  13.     return this.render('dog', this.options.bark);
  14.   }
  15. });
  16.  
  17. document.body.grab(new Dog()); // <div class="dog">Bark! Bark!</div>
  18. document.body.grab(new Dog({ bark: 'Woof! Woof!' })); // <div class="dog">Woof! Woof!</div>
  19. document.body.grab(new Dog({ bark: 'Arf!' })); // <div class="dog">Arf!</div>

Pass functions as arguments to template functions

With Mooml 1.1, template functions accept functions as arguments. These function can be any function that returns an element, array of elements, string, number or any other argument type supported by Mooml template functions. For example:

  1. var tpl = new Mooml.Template('mytemplate', function(content) {
  2.   div(content);
  3. });
  4. document.body.grab(tpl.render(function() {
  5.   return 'Html <u>returned</u> by a function()'
  6. }));
  7. // will create: <div>Html <u>returned</u> by a function()</div>

References to elements with an Id

Finally, Mooml 1.1 templates can return references to all elements rendered that contain an Id, including elements rendered in nested templates:

  1. var tpl = new Mooml.Template('mytemplate', function(content) {
  2.   div({id:'div1'}, content);
  3.   div({id:'div2'}, content);
  4.   div({id:'div3'}, content);
  5. }, {
  6.   saveElementRefs: true
  7. });
  8. document.body.adopt(tpl.render('some text'));
  9. tpl.elementRefs.div1; // reference to <div id="div1">some text</div>
  10. tpl.elementRefs.div2; // reference to <div id="div2">some text</div>
  11. tpl.elementRefs['div3']; // reference to <div id="div3">some text</div>

Don’t miss the new demo: http://enekoalonso.com/projects/mooml/
Enjoy!

Related Posts:

]]> http://dev.enekoalonso.com/2010/03/24/mooml-1-1-no-more-eval-say-hi-to-mooml-template-and-mooml-templates/feed/ 0 Creating HTML blocks with Mootools http://dev.enekoalonso.com/2009/09/02/creating-html-blocks-with-mootools/ http://dev.enekoalonso.com/2009/09/02/creating-html-blocks-with-mootools/#comments Wed, 02 Sep 2009 20:50:16 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=376 Sometimes we need to create HTML from JS. There are multiple ways to do this, from using innerHTML to creating element by element appending child to parents, setting attributes, etc. And there are as many different opinions about what is the right way to do it.

Meanwhile, once thing I missed from jQuery, not available on Mootools, was the ability to do something like this:

  1. var element = jQuery('<div id="foo">bar</div>');

In Mootools, the equivalent should be:

  1. var element = new Element('<div id="foo">bar</div>');

But that does not work.

On the Mootools mailing list, someone was asking about how to implement this and we just found a different approach, which instead of using the Element class, extends the String class like this:

  1. String.implement({
  2.  toElement: function() {
  3.    return new Element('div', {html:this}).getFirst();
  4.  }
  5. });

Now you can do this:

  1. var element  = '<div id="foo">bar</div>'.toElement();

To try it, paste this snippet on Firebug’s console:

  1. String.implement({
  2.  toElement: function() {
  3.    return new Element('div', {html:this}).getFirst();
  4.  }
  5. });
  6. console.log('<div id="foo">bar</div>'.toElement().get('id'));

Nice, uh? Of course, the HTML can be as complex as you need and where do you get the content of the string is up to you :)

Related Posts:

]]> http://dev.enekoalonso.com/2009/09/02/creating-html-blocks-with-mootools/feed/ 4 Handling events on iPhone webapps http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/ http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/#comments Fri, 05 Dec 2008 22:02:29 +0000 Eneko Alonso http://dev.enekoalonso.com/?p=82 This week I have been working on a website for iPhone phones and I have discovered some interesting things about events. I am using plain Javascript, with no third party libraries, so I don’t know if they have any fix for these issues or if they affect them.

For example, a couple of days ago I was posting how to detect the iPhone’s orientation. The problem with the method I used is that I am assigning explicitly the function to handle the event, which means only that function will handle the event. If I wanted to add a second function to handle the same event, for example inside an object, I would have to use the window.addEventListener method. But apparently addEventListener does not work on the iPhone for some events.

The following code wont work on the iPhone (although it works on the iPhone simulator)

  1. function updateLayout() {
  2.   if (window.orientation)
  3.     document.body.setAttribute('class', 'landscape');
  4.   else
  5.     document.body.setAttribute('class', 'portrait');
  6. }
  7.  
  8. window.addEventListener('orientationchange', function(event) {
  9.   updateLayout();
  10. }, false);
  11.  
  12. window.addEventListener('load', function(event) {
  13.   updateLayout();
  14. }, false);

I have found the addEventListener function works with input fields (focus and blur events), with links (click event) and with window (load event). I have found it doesn’t work on forms (submit event) neither with the custom onorientationchange event as shown avobe. I haven’t tested other events yet.

It may be that all these issues have been fixed in newer versions of the iPhone OS X – the one I have for testing is 1.1.4 (4A102).

Related Posts:

]]> http://dev.enekoalonso.com/2008/12/05/handling-events-on-iphone-webapps/feed/ 0