• A Django site. •
• •
October 4, 2009

Jesús del Carpio
jj
Jj's blog
» Learning jQuery 1.3

Cover of Learning jQuery 1.3Right after finishing my review on the Django template development book I got contacted again by the Packt folks to do the same for the Learning jQuery 1.3 book. I was most pleased with the request.

Now, this book has 444 pages compared to the 272 pages from Django book. There is much more to teach about jQuery than about the django template language :) .

The book has 11 chapters and 4 great appendixes. It starts off teaching you how to set up a page to use jQuery, teaches you selector magic and from then on the example scripts get more and more complicated as the chapters pass by.

Once you’ve read the first half of the book (Free sample chapter), you’re good to go. At this point you should know what is it that you can do with jQuery and start using it. But this is the moment where it just starts to get interesting.

Chapters, 7 on Table manipulation, 8 on Forms with function and chapter 9 about Shufflers and rotators show you how to do amazing stuff you (well, I) wouldn’t have thought of. This is the most important part of the book as it shows you how to put all the jQuery functionality together and teaches you several awesome tricks and techniques to make transparency gradients, lightboxes, scrollers, sort, tables, invoices and tons more.

What’s also great about the book is that it enforces graceful degradation and progressive enhancement through all the examples. So all your development is funcional even for people without Javascript. And he does that providing good arguments on why it is a good idea to keep it that way, since I know lots of people that are just not willing to care about people not using Javascript.

I was gladly surprised with Appendix on Closures, it has a good explanation of that concept that takes so long to grasp. the rest of the appendixes are great resource of information with reference to tools, plugins and related reading to increase your Javascript fu.

Overall

This is a great book, that could have easily be divided in two books, Basic jQuery and Mastering jQuery. Goes from the basic to some medium/advanced level. Every web developer (front end and backend) should read this in order to know how to provider great user experience :) .

by Jj at 9:58 PM under book , en , geek , javascript , programación , review , tech , web (Comments)
August 23, 2009

Jesús del Carpio
jj
Jj's blog
» Generating Javascript Widgets with reversed URL endpoints in Django

I just read Elf Stenberg’s solution on how to serve static Javascript with reversed URLs in Django, I was going to leave this as a comment but I better explain it here :P

When developing Django Widgets that require Javascript interaction with the server (Ajax, XHR, etc… ), you want your widget seamlessly deployable and have it know where to find its information (the endpoint).

Elf’s solution is pretty interesting, as he runs the static fles through the Django Template renderer and stores the expanded versions for deployment. This is nice, but :

  • You have to re-render all the files if you change the endpoint
  • You have to re-render if you use the widget somewhere else (different proyect).
  • It becomes difficult to have an URL with parameters like a model Id or any variable (since there’s no context).

What I do is add the URL to the Widget and set it as a document javascript variable, then use that variable on my .js

It goes something like this:

class MyWidget(forms.Widget):
  def __init__(self, endpoing, *args, **kwargs):
    self.endpoint = endpoint
    super(self, MyWidget).__init__(*args, **kwargs)

  def render(self):
    output = super(self, MyWidget).render()
    output =+ '<script>var WIDGET_ENDPOINT = "%s";</script%gt;' % self.endpoint

  class Media:
    js = ('my_widget.js',)

So you can just use django.core.urlresolvers.reverse to your endpoint when defining the widget :) .

On the template just render the field and add the {{form.media}} (at the bottom fo the document where scripts belong).

In your .js file:

$.getJSON(WIDGET_ENDPOINT, {}, function(resp) {
   $("#somenode").html(resp.results);
});

The downside is that you have to have that SCRIPT tag in the middle of your document, but really.. its only to ser a variable so it doesn’t hurt much.

This is similar to this solution on accessing MEDIA_URL in Javascript files.

by Jj at 5:37 AM under django , en , geek , javascript , programación (Comments)
August 18, 2009

Rodolfo Pilas
pilas
Rodolfo Pilas
» jQuery para potenciar tu WordPress

Estaba buscando como mostrar las fotos publicadas en artículos de WordPress en forma más elegante y me encontré con varias extensiones que utilizan las funcionalidades de jQuery para mostrar las fotos, así que me puse a investigar un poco el tema.

jQuery es una biblioteca de javascript que permite modificar el contenido de una página web, sin necesidad de recargarla. Para las fotos (que era lo que yo buscaba) está bárbaro pues permite ver la foto sobre la misma página que esta la foto de-enlace pequeña y tener que usar el botón e Volver del navegador.

Pero la comunidad de desarrolladores de WordPress ha sido muy fructífera utilizando jQuery para distintas funciones, desde menues desplegables hasta listado de enlaces. En partícular en Jungus encontré un artículo “EL poder de WordPress y jQuery” que lista 25 extensiones muy novedosas.

Al final he optado por wp-slimbox2 plugin para mostrar las fotos. Comparado con jQuery Lightbox plugin me pareció más configurable (desde el panel de control) para las opciones de fotos independientes que necesitaba para el sitio, aunque hay que reconocer la semejanza de ambos.

by rodolfo at 4:02 PM under blogs , fotos , javascript , jquery , wordpress (Comments)
July 20, 2009

Jesús del Carpio
jj
Jj's blog
» New Open selector version

This last week I fonally found some time to improve two important features I missed in Open-selector

The first thing I  hated was havign to make so many HTTP requests to fetch the provider icons, so now Open-selector makes use of CSS sprites to fetch all icons from a single sprite file.

The second feature was to have Open-selector remember your log in choice, so the next time you visit a site you don’t have to fill anything, just hit the button. This means single click log in.

They were actually pretty trivial to implement, so this new version is out :)

by Jj at 5:45 AM under en , geek , identity , javascript , open-selector , openid , programación , tech (Comments)
January 21, 2009

Jesús del Carpio
jj
Jj's blog
» New Open-selector version

This shall be called Version 0.2 :D .

The cool feature of this is the inline mode, it will be useful to have an OpenID login box in topbars, inline menus or heading sections (they are all the same I think), and the update-as-you-type feature :P

Use it and let me know what you think

by Jj at 1:07 AM under en , geek , javascript , open-selector , openid , programación , tech , web (Comments)
December 8, 2008

Jesús del Carpio
jj
Jj's blog
» I can haz documentation?

I just added some basic documentation to Open-selector.

by Jj at 6:39 PM under en , geek , javascript , open- , open-selector , openid (Comments)
November 23, 2008

Jesús del Carpio
jj
Jj's blog
» First post about Open-selector!

Open-selector logoAndrew Moist contacted me through Open-selector’s contact page telling me about his blogpost comparing ID Selector with Open-selector.

He believes that even though the dropdown combo is not the killer solution for the OpenID login issue, it’s still a better approach than ID Selector’s one.

I’m very happy to see this, I hope I can get more input from more people and learn how can I improve Open-selector and OpenID :) .

by Jj at 12:52 AM under en , geek , javascript , open-selector , openid (Comments)
November 22, 2008

Jesús del Carpio
jj
Jj's blog
» Access MEDIA_URL from static Javascript files in Django

This is an old trick, that’s been very handy :) .

Many times for various reasons you’ll need to access your media files from your Javascript files, to display images, change paths, or whatever. And in most cases your development MEDIA_URL and production MEDIA_URL will be different, so having to change them depending on the enviroment can be a bit tricky being them static files I’m assuming you are using static files your your .js right?.

What I do to help this is add the following to my base.html :

<script type="text/javascript">
    var MEDIA_URL = "{{MEDIA_URL}}";
</script>

before I load any of my .js files, and in them I simply refer to the MEDIA_URL variable just as in my Django templates.

Of course, you need to have your settings.MEDIA_URL variable on template context via whatever method you feel mor confortable with, personally I use context_processors :) .

by Jj at 12:37 AM under django , en , geek , javascript , python , web (Comments)
November 10, 2008

Jesús del Carpio
jj
Jj's blog
» Open-selector

I’ve been thinking about doing this this for a while eve since I saw Ma.gnolia’s login screen. Finally found time toput it together this week, its pretty simple though.

Open-selector logo

Open-selector is a piece of Javascript that takes your regular OpenID login box

OpenID login box

and turns it into a provider list so people can choose an OP and give their user account for that provider. Behind scenes Open-selector builds the identifier URL and makes submits it as a regular OpenID login.

Open-selector combo Open-selector provider list

It is an alternative to ID Selector with a slightly different approach, and hides the OpenID URL complexity to people that still can’t understand an URL as an indentifier :? .

Here is how to use it (note the Jquery dependency):

<script type="text/javascript" src="/js/jquery.js"></script>
<script type="text/javascript" src="/js/open-selector.js"></script>
<script type="text/javascript">

   // ID for the OpenID form
    open_selector.openid_form_id= 'openid_form';
    // ID for the OpenID URL box
    open_selector.openid_box_id= 'openid_url';
    open_selector.init();
</script>

Just include the js file, and call the init() method.

The source code is available on Google Code.

Thoghts?, ideas?, improvements? all welcome :D .

by Jj at 4:30 AM under en , foto , geek , javascript , open-selector , openid , tech , uncategorized , web (Comments)