I’ve found two great options: NaturalDocs and ASDoc.

NaturalDocs is very nice and it supports a wide variety of languages. However I didn’t like how it documented inherited properties and methods.

I then turned to ASDoc. ASDoc is part of the Flex SDK, and it’s what the big guys at Adobe use.

Documenting Flex projects is “easy”. However there’s not too much documentation around for using ASDoc with the Flash IDE. I had a hard time making it work the first time I tried it, so here’s a list of tips I’d like to share to make your ASDoc experience less painful.

First of all, there’s running the ASDoc command. While you can run the asdoc command through the console, write a shell script or a rake task, I recommend ASDocr. ASDocr gives you a nice GUI to run the command. You just need to point the location of the asdoc command and the sourche path of your project and your are ready to go.

Is very unlikely you’ll succeed the first time. Why? ASDoc fails if it find errors in your code, that includes all of those classes that are not being compiled (and thus the Flash IDE doesn’t wanr you). So take all those files out and try it again.

Second is dependencies. The Flash IDE creates a lot of stuff on the background so you don’t have to care for it. Remember the “A definition for this class could not be found in the classpath, so one will be automatically generated in the SWF file upon export” message? Well, ASDoc will look for those classes but they won’t be on your classpath, so it fails. The solution, create a class for every one of the symbols you export for Actionscript.

You also have to deal with symbols with instance names. Normally you can access these symbols in your class by using the instance name. The Flash IDE creates a property inside your object so the symbol can be fetched from that property. That’s why you can’t have a method and a symbol with the same name/instance.  ASDoc doesn’t know about these magic properties and fails. To solve this issue use getChildByName instead.

this.my_symbol_instance_name //change this
this.getChildByName("my_symbol_instance_name") //to this

I usually name symbols on the stage with an appended underscore (_my_symbol_instance_name) and save into a private variable (private var my_symbol_instance_name:DisplayObject).

It’s important to know that getChildByName will throw an error if it doesn’t find a symbol, so you’ll want to wrap it inside a try…catch..finally block then.

And finally comes the libraries. ASDoc only recognizes .swc files or directories containing .swc files as the library-path. Use the .swc packaged version of your libraries (if available) or create your own. Creating .swc files with the Flash IDE is a little bit tricky too, take a look here for more information.

I haven’t found any more things preventing my code from bein documented with ASDoc, if you find anything else feel free to comment. I also haven’t been able to run ASDoc with the FLVPlayer component, I use the wildcard so it doesn’t look for the class definition.

Some languages, like Java, support multiple method signatures. AS3 doesn’t, but the guys at Adobe do something similar with methods like String.replace, where the last argument can be either a String or a Function. They do it giving the second argument an Object type. Yes, the core Object class. Everybody knows how this class works, but with all the cool features of AS3 we tend to forget it. For example, to emulate the String.replace behavior we can do something like this.

function replace(pattern:*, repl:Object):String{
  if(repl is String)
    // do something when repl is a String
  else if(repl is Function)
    // do something when repl is a Function
  else
    throw(new Error("The second argument of String has to be either a String or a Function"));
}

I don’t remember where I read that using is to test type casting is faster than doing something like…

String(my_string) != null

… is slower than is, I don’t know if it’s true but I do it. Altough is sometimes behaves oddly.

For parameters or options we can also use hasOwnProperty to test if a parameter has been set like this:

function modify_image(img:*, params:Object = null):void{
  if(!params) params = {width: 99}; //set default values if no parameters given
  else { // verify if the params object has all the necessary parameters for the method to work
    if(!params.hasOwnProperty("width")) params.width = 99;
   }
   // do something
}

Also lets not forget AS’ Javascript inheritance. We can use method closures and the …(rest) parameter (similar to Javascript’s argument variable).

I personally use these kind of techniques with helper or configuration classes. These kind of classes focus on one task and so they are easier to test; unlike interactive components, where more robust code is preferable.

• Tested with jQuery 1.3.2 and 1.4.2 in Internet Explorer 6-8, Firefox 2-3.6, Safari 4, Chrome.
• Download Source (5.1Kb), Minified  (2.8kb).
• Follow the project on GitHub or report a issue!
• View examples in a new page

Examples

Usage

First you need to download the jquery and jquery.slidingTabs source. Include them inside the tag <head> of your document:

<script src="javascripts/jquery.1.4.2.js" type="text/javascript" charset="utf-8"></script>
<script src="javascripts/jquery.slidingTabs.js" type="text/javascript" charset="utf-8"></script>

Then write some HTML like this:

<div class="multi_tabs">
    <div class="menu">
      <ul>
        <li class="active"><a href="ajaxcontent.html">TAB 1</a></li>
        <li><a href="ajaxcontent.html">TAB 2</a></li>
        <li><a href="ajaxcontent.html">TAB 3</a></li>
        <li><a href="ajaxcontent.html">TAB 4</a></li>
        <li><a href="ajaxcontent.html">TAB 5</a></li>
        <li><a href="ajaxcontent.html">TAB 6</a></li>
        <li><a href="ajaxcontent.html">TAB 7</a></li>
        <li><a href="ajaxcontent.html">TAB 8</a></li>
        <li><a href="ajaxcontent.html">TAB 9</a></li>
        <li><a href="ajaxcontent.html">TAB 10</a></li>
        <li><a href="ajaxcontent.html">TAB 11</a></li>
        <li><a href="ajaxcontent.html">TAB 12</a></li>
        <li><a href="ajaxcontent.html">TAB 13</a></li>
        <li><a href="ajaxcontent.html">TAB 14</a></li>
      </ul>
    </div><!-- .menu -->
    <div class="cont_tabs">
      <div>
        First content
      </div>
    </div><!-- cont_tabs -->
  </div><!-- multitabs -->

…some styles. Note that a few basic styles are required for plugin works.

/*GENERAL STYLES*/
  * {
    margin:0;
    padding:0;
  }

  /*COMMON STYLES FOR TABS*/

  .multi_tabs {
    width:600px;
  }

  .multi_tabs .menu {
    overflow:hidden;
    position:relative;
    z-index:10;
    width:100%;
  }

  .multi_tabs ul {
    overflow:hidden;
    position:relative;
    width:9000px;
  }

  .multi_tabs ul li{
    float:left;
    display:inline;
    padding:6px 8px 4px 8px;
  }

  .multi_tabs ul li.active{
    background:#CCC;
  }

  .multi_tabs ul li a{
    display:inline;
  }

  .multi_tabs ul li.active a{
    color:#000;
  }

  .multi_tabs .cont_tabs{
    clear:both;
  }

  .multi_tabs .next,
  .multi_tabs .prev{
    position:absolute;
    display:block;
    top:0;
    width:24px;
    height:29px;
    background: #E4E4E4;
    z-index:100;
  }

  .multi_tabs .prev{
    left:0;
  }

  .multi_tabs .next{
    right:0;
  }

  .multi_tabs .accessible {
    display:none;
  }

And invoke the plugin:

<script type="text/javascript" charset="utf-8">
    $(function(){
      $('.multi_tabs').slidingTabs({
          tabs: '.menu',
          content : '.cont_tabs'
       });
    })
  </script>

Configuration

After long sessions of FTP uploading a friend of mine recommended rsync to me and my life has been much better since then. Rsync is a software for UNIX to synchronizes files and directories. With rsync and the help of SSH you can sinchronize both your local and remote directories in no time, leveraging the time it takes for you to watch the changes.

Just add this line of code to your bash profile and you are ready to go.

alias sync_fb='rsync -zrptL --delete-after -e "ssh" --exclude=.DS_Store --exclude=.git --cvs-exclude local_directory_path username@domain:remote_directory_path'

Just type sync_fb on your Terminal and you’ll se how the changes reflect on your remote directory in no time. Of course you can change the name of the task and create as many tasks as you want. The –exclude=.DS_Store and –exclude=.git parameters are for mac and git users. If you are not a mac or git user, you can delete those. Also if you have public SSH keys set, you won’t even notice you are “pushing” to a remote directory.

For Textmate users there’s a bundle written by Joshua Priddle, which let’s you synch your directories with a simple keyboard shortcut.  You can read more about it here. I tested it and I think it’s great. Not only it has all the benefits of rsync, but it also nicely outputs errors and a list of synched files in a new file.

Hacia tiempo que tenia ganas de hacer un plugin de jquery. Me surgió la necesidad de hacer uno para un proyecto , así que mate dos pájaros de un tiro.

Flexipage es un plugin de jquery que permite paginar elementos HTML.

He hecho una humilde paginilla con ejemplos y “documentación“  la podéis ver aquí.

descargar

ver ejemplos

Si hacemos esto tenemos varios problemas:

1. Debemos ser muy disciplinados creando el marcado y mas aún si el site es dinámico, a la hora de interpretarse el documento como xml, un simple elemento mal cerrado hará que nuestro site no se pueda ver o que se vea el tipico error de XML mal formado.
2. No todos los dispositivos interpretan el mime-type application/xhtml+xml, con lo que el dispositivo no entenderá el tipo de archivo que se le esta mandando y no lo interpretará

Por curiosidad me meto en la W3C y la verdad me resulto algo confuso, en algunos casos te dicen que DEBES poner un mime type y en otros casos que PUEDES. Con lo que decido seguir buscando y me encuentro con esta tabla de compatibilidades doctype/mime-type.

Soluciones que veo:

1. Servir todo como text/html  , que según la W3C no es lo mas recomendable pero funciona.
2. Detectar cuando se va a servir la pagina si el el dispositivo desde el que se solicita soporta archivos del tipo application/xhtml+xml y sino es asi cambiar el doctype por XHTML 1.0 Strict y el mime-type por text/html. Cuidado con esto porque puede causar problemas.  Aqui puedes ver las diferencias entre XHTML 1.0 Strict y Transitional.

Gracias a @richmanblues por la correción.