outaTiME

Eric Miraglia has posted a great tutorial on how to build your first YUI application. He runs you through the steps of creating a simple application that leverages YUI’s AutoComplete Control to create a site-search form powered by the Yahoo!’s Search web service.

The tutorial is a great walkthrough of both how to build the application and also leverage YUI’s extensive documentation. It also touches on some great points such as:

• How to configure a YUI implementation and put YUI on the page
• How to set up the markup for a progressively-enhanced YUI widget
• How to instantiate and configure a YUI widget
• How to subscribe to and make use of the “custom evens” provided by a YUI widget
• And how to override default behavior to get a bespoke implementation that maps to our requirements.

(Via Ajaxian.)

With Silverlight 2 aimed square at Flash, many of us were interested to see what Flash 10 would have in store for us. We get our first glimpse with the Flash 10 prerelease, code named “Astro”.

I installed the prerelease and recorded the demos so you can take a quick peak:

The biggest feature in my mind, is true 3D:

3D Effects - Easily transform and animate any display object through 3D space while retaining full interactivity. Fast, lightweight, and native 3D effects make motion that was previously reserved for expert users available to everyone. Complex effects are simple with APIs that extend what you already know.

There are other new features too. At a high level:

Custom Filters and Effects - Create your own portable filters, blend modes, and fills using Adobe Pixel Bender, the same technology used for many After Effects CS3 filters. Shaders in Flash Player are about 1KB and can be scripted and animated at runtime.

Advanced Text Layout - A new, highly flexible text layout engine, co-existing with TextField, enables innovation in creating new text controls by providing low-level access to text offering right-to-left and vertical text layout, plus support for typographic elements like ligatures.

Enhanced Drawing API - Runtime drawing is easier and more powerful with re-styleable properties, 3D APIs, and a new way of drawing sophisticated shapes without having to code them line by line.

Visual Performance Improvements – Applications and videos will run smoother and faster with expanded use of hardware acceleration.  By moving several visual processing tasks to the video card, the CPU is free to do more.

If you delve into the release notes you see features such as:

• Context Menu — Developers now have more control over what can be displayed in the context menu through the use of ActionScript APIs for common text field context menu items, supporting plain and rich text. The clipboard menu provides access to the clipboard in a safe and controlled way, and you can write handlers to paste text.
• File Reference runtime access — Bring users into the experience by letting them load files into your RIA. You can work with the content at runtime and even save it back when you are done through the browse dialog box. Files can be accessed as a byteArray or text using a convenient API in ActionScript without round-tripping to the server. You no longer have to know a server language or have access to a server to load or save files at runtime.
• Dynamic Streaming — Always show the best video possible with streams that can automatically adjust to changing network conditions. By changing bitrates, you can keep your user engaged and avoid start-and-stop video. Dynamic streaming provides the best possible experience to the video consumer based on their bandwidth environment. Video streams over RTMP from intended future releases of Flash Media Server can dynamically change bitrate as network conditions change. Quality of Service metrics, exposed via ActionScript and providing real-time network or CPU information, allow developers to take control of the video playback and adjust the streaming experience accordingly. This feature is part of Flash Player 10 but will only be available with intended future releases of Flash Media Server.
• Text Layout Components — An extensible library of ActionScript 3.0 text components, coming in future to Adobe Labs, provides advanced, easy-to-integrate layout functionality that enables typographic creative expression. Layout and style text with tables, inline images, and column flow through components that are compatible with both Flash and Flex, all while getting the benefits of the new text engine. Rich text components allow designers and developers to flow text and complex scripts, such as Arabic, Hebrew, and Thai, across multiple columns like a newspaper, around tables and inline images, from right-to-left, left-to-right, bi-directionally, or vertically. Selection, editing, and wrapping of text are handled as would be expected for the different layouts.

It is also interesting to put this into context with JavaFX, which was hyped last week at JavaOne (without a release yet). There were some nice demos, such as 3D video globes, and a few people said “Flash couldn’t do that. No decent 3D or hardware acceleration.” The bar keeps rising for all.

(Via Ajaxian.)

My latest client Farinaz Taghavi is finally in beta on her site, and one of the last steps to push her live was to set up SSL for her.

Luckily, I’ve done this a number of times, so it was quick and easy to do, but still I had to refer to various reference sites and remember exactly what I do differently than some.

First off, I use the Lighttpd configuration I describe in “Django and Lighttpd Configuration for smooth SSL”, I don’t have any need to vary it much from what I did for my other site, but since I am using Satchmo for my ecommerce engine on this one, I can’t have a separate domain name for my secure and non-secure domains. In other words, I want both http://farinaz.com and https://farinaz.com to work.

The changes are simple, but since it is slightly different, you can download it and modify for your own use: lighttpd_ssl.zip

In that file are the two very important lines:

ssl.pemfile = "/etc/lighttpd/ssl/farinaz.com/farinaz.com.pem"
ssl.ca-file = “/etc/lighttpd/ssl/farinaz.com/farinaz.com.crt”


The rest of this article will discuss how to acquire those files.

Creating the Certificate

1. Create a working directory. I always put them in “/etc/lighttpd/ssl/servername“

mkdir -p /etc/lighttpd/ssl/yourserver.com
cd /etc/lighttpd/ssl/yourserver.com


2. Create your server key, and then (optionally) remove the password from it. The only critical question is “common name”, which must be the domain name you want to secure. In our example, “yourserver.com”

openssl genrsa -des3 -out yourserver.com.key 1024
openssl rsa -in yourserver.com.key -out yourserver.com.nopass.key


3. Create the CSR (Certificate Signing Request) that you’ll be using at the certifying authority to get your cert.

openssl req -new -key yourserver.com.nopass.key -out yourserver.com.csr
cat yourserver.com.csr


4. Copy the text to your clipboard. It will look something like this:


—–BEGIN CERTIFICATE REQUEST—–
MIIBrzCCARgCAQAwbzELMAkGA1UEBhMCVVMxDzANBgNVBAgTBk9yZWdvbjERMA8G
A1UEBxMIUG9ydGxhbmQxITAfBgNVBAoTGEludGVybmV0IFdpZGdpdHMgUHR5IEx0
[… and so on …]
2JwW20fix2pFjK22E+jUvNh25cTRWpUKeTt5OEoE3hgkPZCjZPuzvXt7dw5N1CBv
1a9vX8LRMPRd+TtlOEBHhNZ2DLSkzAvTg4RI+1uPLN3KBpRp9FCTaPEmeuLfMBwl
Y7Se
—–END CERTIFICATE REQUEST—–


5. Go to a good cheap certificate source. I like to use Name Cheap since they are in fact cheap, their control panel is very usable, and they are not underhanded in business dealings unlike the infamous GoDaddy. (I currently have 49 domains with them!) Namecheap has SSL certs for as low as $12.88 per year.

A short aside. There is no reason I can see for 99% of all site operators to get anything more than the cheapest possible cert from RapidSSL. Ignore all the sales hype. The simple fact is that no one except extreme geeks even know or care about levels of certification, the vetting process, or any of that. It is simply not a factor in purchasing decisions from anything I’ve ever seen, and I used to work for a company that sold expensive certs!

6. After you purchase your cert, the site will ask you what type of system you have. I’ve never seen Lighttpd listed as an option, so you should select “Apache + OpenSSL”

7. Next it will ask for your CSR. Paste in the text you copied in step 4.

8. Make sure you can receive email at the address where the certificate authority will send the confirmation! Wait for it, and click the confirmation link.

9. Wait a few minutes to get your cert.

10. Copy the text of the cert to a file on the server. I just use emacs and paste in the contents of the cert I copied from the email. Save it as “yourserver.crt”.

11. Finally, create your pem file.

cat yourserver.com.nopass.key yourserver.com.crt > yourserver.com.pemchmod 0600 yourserver.com.pem


12. Verify that lighttpd has SSL.

/usr/local/sbin/lighttpd -v


It should say something like “lighttpd-1.4.11 (ssl).” If it doesn’t then you need to recompile it. Use the instructions on cyberciti.biz for that if you need it.

13. restart the server.

/etc/init.d/lighttpd restart


Done. This takes me about 15 minutes, most of that waiting on emails.

(Via Coder’s Eye.)

Written by Liza Ma, Webmaster Tools Team

Webmasters come from all corners of the world and we are working hard to reach each and everyone of you. A few months back we introduced you to Googlers who help monitor our Webmaster Help Groups in fifteen languages. Since then, that number has grown to sixteen with the addition of the Chinese Help Group. Today, we’re happy to announce that Webmaster Tools is now available in four more languages:

• Arabic
• Hebrew
• Hindi
• Thai

Webmaster Tools is already available in 22 other languages: British English, Czech, Danish, Dutch, Finnish, French, German, Hungarian, Italian, Japanese, Korean, Norwegian, Polish, Portuguese, Romanian, Russian, Simplified Chinese, Spanish, Swedish, Traditional Chinese, Turkish, and US English.

We’re thrilled to be engaging with such a diverse community of webmasters. Thank you again for your feedback and support!

(Via “officialgoogleblogs-dev” via Google Reader in Google Reader.)

Mark Pilgrim has released Google Doctype, an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more.

The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

This is just the beginning for the ambitious project, which is open source, and open licensed (Creative Commons). Now it is out there we, the developers, have the option to add valuable data to grow the corpus.

Congrats to Mark on the launch. I know that it has been a huge amount of work for him, and I am excited to see it out there. Below is Mark talking about the project:

You may also notice the document reader application, which is driven by GWT.

(Via Ajaxian.)

In accordance with our security policy, a set of releases is being
issued tonight to fix a security vulnerability reported to the Django
project. This entry contains a description of the vulnerability, a
description of the changes made to fix it, pointers to the the
relevant patches for each supported version of Django and pointers to
the resulting releases. A copy of this information will also be posted
to the django-users and django-developers mailing lists. The Django website is being updated to reflect the new releases.

Description of vulnerability

The Django administration application will, when accessed by a user
who is not sufficiently authenticated, display a login form and ask
the user to provide the necessary credentials before displaying the
requested page. This form will be submitted to the URL the user
attempted to access, by supplying the current request path as the
value of the form’s “action” attribute.

The value of the request path was not being escaped, creating an
opportunity for a cross-site scripting (XSS) attack by leading a user
to a URL which contained URL-encoded HTML and/or JavaScript in the
request path.

Affected versions

• Django development trunk
• Django 0.96
• Django 0.95
• Django 0.91

Resolution

The login form has been changed to escape the request path before use
as the form’s submission action.

The relevant changesets for affected versions of Django are:

• Django development trunk: Changeset 7521
• Django 0.96: Changeset 7527
• Django 0.95: Changeset 7528
• Django 0.91: Changeset 7529

The following releases have been issued based on the above changesets:

• Django 0.96.2
• Django 0.95.3
• Django 0.91.2

All users of affected versions of Django are strongly encouraged to
apply the relevant patch or upgrade to the relevant patched release as
soon as possible.

Release manager’s note

If you maintain a third-party Django package and you did not receive
the announcement of these releases earlier tonight, please
email James Bennett (ubernostrum@gmail.com) as soon as possible.

Also, please note that potential security vulnerabilities should be
reported directly to the Django project, at
security@djangoproject.com, as outlined in our security policy. Following this procedure helps us to maintain high standards of
response and disclosure, and makes the process of investigating and
resolving security issues much easier for everyone involved.

(Via The Django weblog.)

Sometimes it is interesting to see that knowledge from the 10,000 B.C. period of web development can be used in new ways to create - to play it safely - interesting ideas.

Each window in a browser has a name property which became pretty much useless when we stopped using pop-up windows and tried to make them communicate with each other by name.

Thomas Frank, however wrote a small library that uses window.name to store session variables without having to resort to cookies and his research seems to prove that you can store up to two megabytes of data in window.name. As this property is available across page reloads it is a sort of session, but as the comments show the security aspects of it are just scary:

There is a cross domain flag in sessvars, but although it defaults to false, this just sees to that you don’t get any other sites window.name garbage inside your sessvars by mistake. The actual data you set will be available for other scripts on other domains to look at – and also to anyone able to type javascript:alert(window.name) in the browser’s address bar

(Via Ajaxian.)

The latest Dojo release includes critical but low-risk patches to version 1.1.0, plus localizations to bring the list of languages supported by Dojo to 22.

Dojo 1.1.1 is a drop-in replacement for Dojo 1.1. Because this is the release where the localizations landed, and because of the critical bug fixes, it is recommended that all 1.1.0 users upgrade to 1.1.1 immediately. Here are the highlights:

• New localizations donated by IBM — now 24 in total, including English and two variants each of Chinese and Portuguese — to accompany cultural support of hundreds of locales by dojo.cldr.
• Dojo mini, a new packaging of Dojo source weighing in at just over 1M. The same Dojo, with no tests, no utilities, no demos, just the unoptimized source code, making it easier than ever to download and explore Dojo.
• Bug fixes — 26 tickets fixed ranging from look and feel tweaks to loader and cross domain (xd) loader bug fixes to severe bugs like one in dojox.cometd

(Via The Dojo Toolkit blogs.)

Ok, this release is just to iron out some high-priority bugs that have been introduced in the last version.

Most notably, a bug where the pydev package explorer was not working correctly when the project root was configured as a source folder and some fixes in the debugger step return / step over (because of improvements to run those with untraced frames).

Yeap, seems that the saying “Given enough eyeballs, all bugs are shallow” is really true — I had already been running 1.3.16 for some days here and after the release it took just a couple of hours for those bugs to be reported.

Enjoy!

(Via Pydev adventures.)

Parisian coder Eric Abouaf (aka “Neyric” released version 0.1.0 of his YUI-based forms library, inputEx.

As of this release, inputEx supports only client-side-generated views — form fields are configured in a JSON format and created for you on the fly. Eric identifies the following unique features in inputEx:

• complex data structures (list/objects/tree/list of urls/objects of objects etc…
• composition between the fields (for “meta”-fields such as InPlaceEdit, List, Tree, Pair, …
• javascript object mapping for greater interactivity
• a common “updated” event to handle different browsers and different field interactions

Eric has API docs, a Getting Started tutorial, examples, and more on the website. He’s looking for contributors, if you’re interested in extending the library; check out the website for full details on the project.

(Via Yahoo! User Interface Blog.)