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 :) .

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.

August 17, 2009

Jesús del Carpio
jj
Jj's blog
» Django 1.0 Template Development

Django template developmentLast month I got an email from Packt telling me about their latest book on Django Template development. I was invited to give it a read and see how I liked it.

Now, I’m a lazy and slow reader. But this book was quite an easy read. I liked how fast I went through the pages and how friendly the writer seemed :) .

This is a book focused on Django templates, not in Django itself, but through out the book it becomes obvious that you’ll always need to have basic knowledge on how views and urls work.

My first impression of the book was a bit of disappointment since it’s a Django 1.0 book, but there hasn’t really been any big changes in Django 1.1 that would affect the book. So the book is still valid ;) .

Highlights

The chapters that I found most useful were “Chapter 5: Loading and inheriting Templates” (I would have liked someone telling me about inheriting best practices when I started), “Chapter 6: Serving Multiple Templates” (great use case of the mobile site :) ) and “Chapter 9:Customizing the Admin Look and Feel” (Found it easier to read than the actual Django documentation on the subject), I was pretty interested on chapter 11 about Internationalization, but it felt a tad too short.

Missing?

I don’t know if I missed this part when reading but I think it would have been good to address the fact that a template is a list of nodes and each of these nodes has to be rendered. It’s mentioned when teaching you how to create your own template tag, but I feel this could have been explained a little bit further to have knowledge on how the templating system works.

Here in Aureal we work with two Web designers, they don’t do any code. They just help us making the HTML look pretty and one of their biggest issues is with forms, we lazy coders like to print the default table format {{my_form}}. German and Justina always have a hard time figuring out what’s behind that form, what attribues are in it, why is it a table, hwo to change that and all that… I was expecting the book to have an extra chapter on that but I never found it :( .

Overall

The book is a great introduction to templates best practices and even after working heavily with Django you might learn a trick or two from it.

August 8, 2009

Jesús del Carpio
jj
Jj's blog
» Google reader on a Netbook

I got a Lenovo S10 some months ago, and like all netbooks it has a 1024x~600 resolution which is fine for most web browgins but it happens to be too short for some applications, one of them being Google Reader.

After installing the right WM, installing the right firefox extensions and settings the right font size. I added these lines to my userContent.css

body.gecko div#search, body.gecko a#logo-container { display: none !important;}
body.gecko div#main { margin-top: -30px !important;}

This hides Google reader’s search bar which I never use and gives me valuable extra room :)

Before
Google reader netbook

After
Google reader netbook optimized

August 2, 2009

Jesús del Carpio
jj
Jj's blog
» So it has a snake inside doing all the magic!

Pony Magic

Great drawing used by the Nebula team at Nasa to show proudly that they use Django for their development.

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 :)

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

January 7, 2009

Jesús del Carpio
jj
Jj's blog
» Using object_list generic view for pagination in Django

Whenever I want to display a list of items I’ll need pagination, calculate first page, next page, total pages, current page, previous page, etc.

Although Django comes with pretty good pagination helpers, I’ve found that using the list_detail.object_list generic view hanles this very nicely :)

So whenever I want to display a list, I will return an object_list generic view instead of a HttpResponse object or a render_to_response call.

This came in pretty handy when helping Jason Broyles refactor some pagination code

December 29, 2008

Jesús del Carpio
jj
Jj's blog
» Boodroids over Iboobs

Natural evolution of breasts has lead to this improved version of boob movement

Now, this app has not been approved by Apple, and I dont think it will never be… but hey, nothing stop us from having boobdroids over Iboobs :D .

December 8, 2008

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

I just added some basic documentation to Open-selector.

November 27, 2008

Jesús del Carpio
jj
Jj's blog
» Fluxbox tabs comming to KDE?

Well comming is too personal, since I don’t use KDE, but anyway, there’s a $500 bounty sponsored by Lucas Murray to implement Fluxbox like tabs in KDE :) .

Tabbing is a nice feature that allows you to tab windows together. Tabs can either be embedded into the window’s titlebar or they can appear as little tabs at the outside of a window. The position and size of the outside-tabs are customizable.”

» Browser Layout engine internals video

Esta charla de David Baron explica cómo funciona el motor de CSS en los Rendering Engines, particularmente Gecko.

Me parecio genial como explica cómo funcionan los selectores CSS y que tipo de sintaxis está optimizada y recomendaciones de como utilizarlos para un mejor performance, el cómo se estructuran los árboles y diferencias de desempeño entre atributos y estilos que visualmente podrían ser similares visualmente.

Via DougT’s Blog

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 :) .

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 :) .

November 14, 2008

Jesús del Carpio
jj
Jj's blog
» Django cheap pages

Sometimes I end up using Django for the wrong thing, just to dispatch pages and put all my content in the templates. Flatpages are too flat and other DB based content tools are too complex. I just want to use the dispatcher, and the templates (I know, I could use web.py, or whatever other Python tool).

So, In order to save myself some time, I made cheap_pages.py, which is a wrapper for the patterns() method that will populate it with direct_to_template calls.

So instead of doing this:

>>> url(^name/$,
...    direct_to_template,
...    {'template': 'name.html'},
...    name='name')

I can do this:

>>> page('name')

Or instead of this:

urlpatterns = patterns('',
    url(^pages/page1/$,
       direct_to_template,
       {'template': 'page1.html'},
       name='page1')
    url(^pages/page2/$,
       direct_to_template,
       {'template': 'page2.html'},
       name='page2')
    url(^pages/page3/$,
       direct_to_template,
       {'template': 'page3.html'},
       name='page3')

)

I can do this:

urlpatterns = build('pages/', ['page1', 'page2', 'page3'])

I’ve added the file to Google Code under Django-cheap-pages, in case anyone is interested in improving it :) .

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 .

October 31, 2008

Jesús del Carpio
jj
Jj's blog
» Happy Django-ween

The folks here at Aureal did a great job carving the Django pumpkin :D .

Django-ween
Django Pumpkin Django pumpkin

July 11, 2008

Nicolás Varcarcel
nxvl
Nikolas Valcarcel
» One less mistery!

All my life i have been wondering where in the world 2 neighbor timezones have 24 hours difference. Today i finally start thinking about it with an internet connection near and found them! Just where i thought they will we!

» Habemus Augeas!

Finally! Augeas reached the archive! So now you can install it on intrepid, and break it on the way you want (and report the breakages on LP). Also you take a look at the list and write some lenses! This is your shoot to start contributing to ubuntu and specially the server team.
Have a nice hack!

July 9, 2008

Nicolás Varcarcel
nxvl
Nikolas Valcarcel
» Augeas status

As i said on my previuos post augeas got it’s 2 acks in ubuntu, so it’s on the new queue waiting for an archive administrator to review and include it on the archive. Today i got it also sponsored in debian (thank you kees, you rock!) so it’s waiting on it’s new queue also waiting for an ftp master to review and include it! So anytime from now on you will be able to play with it! It’s awesome.

I have also uploaded it to my ppa for those who cannot wait until it’s included to play with it (and start writing lenses). So if you are one of those you can’t wait and/or want to contribute on the lenses writing stage yo just need to add this to your sources.list in hardy:

deb http://ppa.launchpad.net/nvalcarcel/ubuntu hardy main
deb-src http://ppa.launchpad.net/nvalcarcel/ubuntu hardy main

Then you can install augeas-tools and play with it!