Blogs

Keeping Your Data Guarded - Password Strength Check

Tagged:  

In keeping your data guarded for your application the most key area is your password. Even many developers use very week passwords to protect things like file level access, database access and admin access to web applications. The easiest way to hack into a system is to crack an unsecured password and then a hacker (or to be correct a cracker) can cripple a system or worst steal data.

Well, I have run across a good open source web application called Password Strength Checker that can be used to make a much stronger password. The applications is very easy to use, you simply type in your password and then the form tells exactly how strong your password is. The form also gives you information about what makes your password strong or weak, such as that it is too short or lacks capital letters.

You can go to the applications here. And since it is open source you can download it and run it on your server (it is released under the GPL) you can download the application here. So, if you use this or a similar application I would love to hear about it (you can leave it in the comments or write a blog about it on this blog, using your free Ajaxonomy account).

The Best Cheat Sheets for Web Designers and Developers (From CSS, Ajax, Perl, Vbscript…)

Tagged:  

If you are a web developer then you probably love cheat sheets for various aspects of development. Well, over at specky boy they have posted quite a list of cheat sheets.

Below are a few of the cheat sheets in the post.

CSS (http://www.ilovejackdaniels.com)
CSS
Prototype 1.5.0 (http://snook.ca/)
Prototype 1.5.0
Script.aculo.us (http://ajaxian.com/)
Script.aculo.us

You can read the full post here.

This is a good list of cheat sheets for developers from around the web. If you find any cheat sheet that you think is particularly interesting I would love to hear about it (you can leave it in the comments).

80+ AJAX-Solutions For Professional Coding

Tagged:  

Smashing Magazine has put together quite a list of Ajax solutions. The list contains over 80 Ajax solutions and includes everything from Ajax star ratings to Slideshows.

Below is just a small excerpt from the post.

Enhanced AJAX Solutions

39. AJAX Instant Completion: Rico Framework

AJAX Scripts - Rico

40. Novemberborn: Event Cache

AJAX Scripts - Novemberborn: Event Cache

41. Altering CSS Class Attributes with JavaScript

AJAX Scripts - Altering CSS Class Attributes with JavaScript

42. Select Some Checkboxes JavaScript Function

AJAX Scripts - Select Some Checkboxes JavaScript Function

43. AJAX Emprise Charts: 100% Pure JavaScript Charts

AJAX Scripts - Emprise JavaScript Charts :: 100% Pure JavaScript Charts

44. amCharts: customizable flash Pie & Donut chart

AJAX Scripts - amCharts: customizable flash Pie & Donut chart

45. PJ Hyett : The Lightbox Effect without Lightbox

AJAX Scripts - PJ Hyett : The Lightbox Effect without Lightbox

You can read the full post here.

This is quite a large list so take some time and go through the entire list. While some of the items will be very familiar to you there where quite a few scripts that I hadn't seen before. It is worth a look.

ProtoFlow

Have you been looking for a cool way to display information on your web site or application. Well, one interesting script that can display information in a cool effect is ProtoFlow.

ProtoFlow is very easy to use and below is how you use it as described on the ProtoFlow web site.

How to use it?

Its fairly easy to use this lib. Just follow the steps:

  1. Download ProtoFlow and extract it.
  2. Add Prototype and Scriptaculous and Reflection.js to your page
  3. Add ProtoFlow.js and ProtoFlow.css to your page
  4. Add Markup and onLoad event (as described below)

Implementation:

Your HTML Markup would look like:


<div id="myCoverFlow">
	<img src="image1.jpg" alt="Caption for this image 1"/>
	<img src="image2.jpg" alt="Caption for this image 2"/>

	<img src="image3.jpg" alt="Caption for this image 3"/>
	.....
	<img src="imageN.jpg" alt="Caption for this image N"/>

</div>
			

Than you can initialize ProtoFlow like:

Event.observe(window, 'load', function(evnt)
{
	var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
		startIndex: 2,	//which image do you want the flow
						//to focus on by default
		slider: true,	//show or hide slider?
		captions: true,	//show or hide captions, by default we hide it. 
				//So YOU MUST turn it on here
		useReflection: false	//Add reflection to your images. Please 
				//note that this will slow down rendering.
	});
});
			

While there are other scripts that create a similar effect, ProtoFlow is the only one that I know of using Prototype and Scriptaculous. This makes it perfect if you are already using these libraries (just remember to compress the script files as appropriate as the libraries are a little large).

You can get more information about ProtoFlow and see a demo of it here.

If you find any interesting uses for the script I'd love to hear about it (you can leave a comment or you can write a blog post using your free Ajaxonomy account). So, start making that cool website or application and use this or some other interesting effect to make it stand out.

Google I/O

Tagged:  

Mark your calendars for May 28th and 29th for the Google I/O event held at San Francisco's Moscone. The event will focus on new technologies that Google offers to help developers make new killer apps. The event promises to talk about technologies like Google Gears, Open Social and Google Android.

According to the Google I/O site the below speakers scheduled to appear.

Learn first hand from Google engineers like David Glazer, Alex Martelli, Steve Souders, Dion Almaer, Mark Lucovsky, Guido van Rossum, Jeff Dean, Chris DiBona, Josh Bloch, and many more leaders in the field of development.

Those are some pretty heavy hitters. If you are able to attend it promises to be worth your time (especially if your work is paying for the trip).

Below are just a sample of some of the sessions that you could attend (this is the social portion of the event).

Social

URLs Are People Too - Using the Social Graph API to Build a Social
Web

Kevin Marks, Brad Fitzpatrick

Type: 101

Using email addresses to identify people has a problem - email addresses
can be used to send, not receive. With the rise of blogs and social networks,
millions of people are using URLs to refer to themselves and others. The
Social Graph API indexes these sites and their connections, enabling this
web-wide distributed social network to be used to make your sites better.
Learn how XFN and FOAF express connections, how we index them, and how OpenID
combines with The Social Graph API to help connect people on the web to your
applications, and save your users from re-entering their friends over and
over again.

OpenSocial: A Standard for the Social Web

Patrick Chanezon, Kevin Marks, and Chris Schalk

Type: 101

OpenSocial is an open specification defining a common API that works on
many different social websites, including MySpace, Plaxo, Hi5, Ning, orkut,
Salesforce.com and LinkedIn, among others. This allows developers to learn
one API, then write a social application for any of those sites: Learn once,
write anywhere.

In addition, in order to make it easier for developers of social sites to
implement the API and make their site an OpenSocial container, the Apache
project Shindig provides reference implementations for OpenSocial containers
in several languages (Java, PHP). Shindig will define a language specific
Service Provider Interface (SPI) that a social site can implement to connect
Shindig to People, Persistence and Activities backend services for the social
site. Shindig will then expose these services as OpenSocial JavaScript and
REST APIs.

In this session we will explain what OpenSocial is, show examples of
OpenSocial containers and applications, demonstrate how to create an
OpenSocial application, and explain how to leverage Apache Shindig in order
to implement an OpenSocial container.

OpenSocial Specification: What's Next for OpenSocial

David Glazer

Type: 201

OpenSocial is an open specification established by a group of social sites
and application developers. While OpenSocial version 0.7 is being rolled out
on several large social networking sites, the specification is evolving to
include more features useful to social application developers.

This session will cover the most interesting features that are discussed
in the specification working group to be included in the next versions of
OpenSocial, like an OpenSocial template language, and the OpenSocial RESTful
API.

Apache Shindig: Make Your Social Site an OpenSocial Container

John Panzer, Dan Peterson

Type: 101

Shindig is a new project in the Apache Software Foundation incubator and
is an open source implementation of the OpenSocial specification and gadgets
specification in multiple programming languages. The goal of Shindig is to
make it easy for social sites to extend their functionality using the
OpenSocial API, which makes it easier for developers to write those
extensions.

This session will explain what Shindig is, the server's architecture, the
JavaScript and Java Service Provider Interfaces that developers can leverage
to integrate Shindig with their social site, and the state of the Shindig
ports to other languages (PHP, .NET, Ruby). We will do a live demonstration
of how to integrate Shindig with an existing social site.

OpenSocial across Containers

Arne Roomann-Kurrik, Lane LiaBraaten

Type: 201

OpenSocial provides a common set of APIs that developers can learn in
order to create applications that run on multiple social sites. However,
since social sites vary widely in functionality, OpenSocial provides ways to
extend the core APIs so containers can implement site-specific
functionality.

This session will cover best practices for how to extend the OpenSocial
API for your container, as well as how to write applications that will run on
multiple OpenSocial sites.

Best Practices for Spreading Your App without Ruining the User Experience

Vivian Li, Chris Schalk

Type: 201

The OpenSocial API provides features that application developers can use
to help their users share the application with their friends. We'll review
other social application architectures that allow apps to spread virally.
We'll then discuss the sharing features in OpenSocial in detail including a
review of requestSentMessage and requestShareApp. We'll also go over
programmatic best practices for such things as determining if an app is
already installed, and we'll look at example apps that have successfully used
these features.

Building an OpenSocial Application, Focus on Client Side APIs

Arne Roomann-Kurrik, Dan Holevoet

Type: Code Lab

Become a social hax0r! In this session you'll build your first social
app, from setting up a place to host your application to accessing the
OpenSocial APIs. By the end of the session you 'll have your own gift-giving
application that accesses profile information, stores data using the
persistence API, and publishes activities that your friends can see. This is
a hands-on session so don't forget your laptop and power adaptor!

Building an OpenSocial Application in the Cloud

Patrick Chanezon, Lane LiaBraaten, Jason Cooper

Type: Code Lab

Simple OpenSocial applications can be built without any server side logic,
leveraging the OpenSocial persistence API. For more complex applications
requiring server side logic, many developers choose to use their own server.
As their applications spread virally and become more successful, these
developers end up spending most of their time making their applications scale
instead of adding new features.

Cloud computing services can provide a solution to these problems. This
session will explain how to build an OpenSocial application with server side
business logic, on top of a cloud computing platform, using makeRequest to
make digitally signed calls to your server side logic.

Make Your Social Site an OpenSocial Container Using Shindig

Patrick Chanezon, Kevin Marks, Chris Schalk

Type: Code Lab

Shindig is a new incubator project in the Apache Software Foundation and
is an open source implementation of the OpenSocial specification and gadgets
specification in multiple computer languages. The goal of Shindig is to make
it easy for social sites to make the OpenSocial API available for application
developers on their site.

In this code lab, attendees will implement part of the OpenSocial API in an
existing open source Java social site engine.

Fireside Chat: OpenSocial

OpenSocial developers

Type: Fireside Chat

Fireside chats are a chance to talk to the engineering team building
products. Come hear from OpenSocial container engineers across the web and
get your questions answered first hand.

You can get a full list of available sessions here.

Pricing for the event is:

  • Early Bird (until 3/28) $300
  • Attendee Registration (starting 3/29) $400
  • Students $50

You can sign-up for the event here.

Quick Ajax Loading Icons

If you've done any Ajax development then you know that much of the loading of data is done in the background. This is great from a developers stand point, but from a users stand point it can be confusing as to what is happening while the data is being loaded. The solution to this is to show a loading indicator.

A loading indicator is a great idea and a nice animated image that could be hidden would be nice. However, if you are like most developers making a nice animated image may not be your strongest point. Well, today while seeing what was getting bookmarked on del.icio.us, using the del.icio.us Spy, I found an interesting and simple service that makes it very easy to get a nice looking loading indicator.

The service is call Ajaxload and is very easy to use. You simply choose the loading icon that you like and the background/foreground colors (you can even have the background transparent). Then you just save it to your computer using the "Download It" button and then you have your own customized loading indicator.

You can go to the service by clicking here.

If you have used this or a similar service I would love to hear about your experience with it (you can leave a comment, or if you would like you can write a blog post about it on this blog, using your free Ajaxonomy account). So, remember that your users would love to see a loading indicator when it is appropriate.

YouTube Data API Changes and Player API

If you haven't heard the big news yet, the YouTube Data API has been updated and the YouTube Player APIs have been released. The APIs look very interesting with some much wanted features.

The below is the big news from the YouTube Blog.

Here's the sound byte: We now support upload, other write operations, and internationalized standard feeds. (And there was much rejoicing!) We're also introducing player APIs and a chromeless player -- a barebones player SWF that's fully customizable and controllable using the player APIs.

The Data API now allows for reading (nothing new), writing and uploading of data (the latter two are the big news). The API allows for you to do many things that can be done in YouTube, such as add comments about a video or upload videos to YouTube. Libraries for the API are available for Java and PHP (sorry Ruby developers at least for now).

You can read more about the Data API here.

The Player APIs now offer a Flash (Actionscript 2.0) API and a JavaScript API to allow more control over the player. The JavaScript API and Flash API are very similar (which makes since as they are both based on ECMA Script). The APIs have some very powerful hooks into the videos. My personal favorite hook is player.getPlayerState() which returns the state of the player. Possible values are unstarted (-1), ended (0), playing (1), paused (2), buffering (3), video cued (5).

You can read about the JavaScript API here and the Flash API here (note that the Flash API is almost exactly the same as the JavaScript API, so you will need to read both references if you are going to use the Flash API).

Perhaps Even bigger news is the release of the chromeless player. Below is an excerpt about the chromeless player from reference.

Getting Started

First off, you need a developer key. To register for one, visit the registration page.

The chromeless player consists of two SWF files. apiplayer.SWF contains the actual video playing functionality. cl.SWF is a loader SWF that loads apiplayer.SWF and exposes the player's API functions. It also provides security sandbox restrictions for the apiplayer.SWF, so loading SWFs cannot access elements inside the player directly.

The player can be controlled via two methods — by loading the SWF into another SWF (or Flash website, etc.), or by embedding it directly in an HTML page and using JavaScript to control the player. The JavaScript controls are identical to the embedded player's JavaScript API.

The URL to load the chromeless player SWF is:

http://gdata.youtube.com/apiplayer?key=DEV_KEY

Functions

The following operations are available in addition to the ones listed in the JavaScript API documentation.

loadVideoById(videoId:String, startSeconds:Number):Void
Load the specified video and starts playing the video. If startSeconds (number can be a float) is specified, the video will start from the closest keyframe to the specified time.
cueVideoById(videoId:String, startSeconds:Number):Void
Loads the specified video's thumbnail and prepares the player to play the video. The player does not request the FLV until playVideo() or seekTo() is called. startSeconds accepts a float/integer and specifies the time that the video should start playing from when playVideo() is called. If you specify startSeconds and then call seekTo(), the startSeconds is forgotten and the player plays from the time specified in the seekTo() call. When the video is cued and ready to play, the player will broadcast a video cued event (5).
setSize(width:Number, height:Number):Void
Sets the size of the chromeless player. This method should be used in favor of setting the width + height of the MovieClip directly. Note that this method does not constrain the proportions of the video player, so you will need to maintain a 4:3 aspect ratio. When embedding the player directly in HTML, the size is updated automatically to the Stage.width and Stage.height values, so there is no need to call setSize() when embedding the chromeless player directly into an HTML page. The default size of the SWF when loaded into another SWF is 320px by 240px.

You can read more about the new features at the YouTube API Blog.

I think that these new feature really make it possible to make some great mash-ups with YouTube. If you create a cool mash-up using some of the new features of the API or use the the Player APIs or use the chromeless player then I would love to hear about it (you can leave it in the comments or you can write a blog post about it using your free Ajaxonomy account.

JavaScriptMVC - Model View Controller for JavaScript

You may have heard about the JavaScriptMVC library (it received quite a bit of press because of it's compression capabilities) and may have thought about using it, but haven't played with it yet. Well, I've been looking at the library and have found a few tutorials very useful.

If you haven't downloaded the library you will want to do it before starting working on the tutorials (You can download the library here).

The first tutorial you should read is the getting started tutorial. This tutorial covers the basics of including the JavaScript files and the plug-in files.

Below is an excerpt from the getting started tutorial.

Including plugins and JavaScripts

All JavaScriptMVC functionality comes in the form of a plugin. We'll include the Controller plugin, which organizes your event handlers.

Replace myapp.html with the following HTML. Note the numbered comments, which are explained after the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
   <head></head>
   <body>
      <script type='text/javascript' src='jmvc/include.js'></script>
      <script type='text/javascript'> 
         include.plugins('controller'); 
include('myscript');
      </script>
   </body>
</html>
  1. Creates a script tag where we'll include a plugin and a script.
  2. Loads the Controller plugin.
  3. Loads myscript.js, a file we'll create in the next section.

The next tutorial that I would recommend reading is the controller tutorial. The tutorial goes over the syntax that is required to use the controller.

Below is an excerpt from the controller tutorial.

Main Controller

If you want to respond to events like:

  • the page being loaded
  • the page being unloaded
  • the page being resized
  • the page being scrolled

you create a special main controller by naming it 'main'. The main controller listens for events on the window, document, and body.

$MVC.Controller('main',{
  // the window onload event handler
  load: function(){
    alert('page loaded');
  },
  // the window resize event handler
  resize: function(){
    alert('page resized');
  }
});

The next tutorial that I would read is the view tutorial. This tutorial gives an overview of how the view functionality is accomplished including the use of templates.

Below is an excerpt from the view tutorial.

Create a Template

The first step towards cleaner code is separating your presentation markup (HTML) from your application logic (JavaScript). We'll do this by separating our presentation markup into a separate file called a template. Create a file called cleaning.ejs and insert the following code:

<h1><%= title %></h1>
<ul>
    <% for(var i=0; i<supplies.length; i++) { %>

        <li>
            <a href='supplies/<%= supplies[i] %>'>
                <%= supplies[i] %>
            </a>
        </li>

    <% } %>
</ul>

You'll notice everything inside <% %> tags is
executed and everything inside <%= %> tags inserts itself into the returned HTML string.

We need to add JavaScript to control the loading and rendering of the template.
We'll replace the original string concatenation code with the following:

// load the template file, then render it with data
var html = new View({url: 'cleaning.ejs'}).render(data);

Doesn't that feel better? The template code restores HTML to its intended structure and the JavaScript code is short and unambiguous.
The dust is clear, now its time to mop.

It is good to see a library try to bring some form of the Model View Controller design patter to JavaScript. If you use this library for any of your projects I would love to hear about them (as usual you can leave them in the comments or write a blog post about it using your free Ajaxonomy account).

TaffyDB: A Javascript database for your browser

Tagged:  

Have you ever built an Ajax application that has some data that needs to be saved and queried for the current session, but not for multiple sessions. Well, instead of creating a temporary database table Ian Smith has come up with a better solution called Taffy DB.

Taffy DB is like having a SQL database in your browser! The Taffy DB is accessed through JavaScript, so it is great for Ajax applications. The library is under 10KB and plays well with other libraries like jQuery and the Yahoo! User Interface.

Below is how the library is described on the official Taffy DB Website

Taffy DB is a free and opensource JavaScript library that acts as thin data layer inside Web 2.0 and Ajax applications.

What makes it cool:

  • Under 10K!
  • Simple, JavaScript Centric Syntax
  • Fast
  • Easy to include in any web application
  • Compatible with major Ajax libraries: YUI, JQuery, Dojo, Prototype, EXT, etc
  • CRUD Interface (Create, Read, Update, Delete)
  • Sorting
  • Looping
  • Advanced Queries

Think of it as a SQL database in your web browser.

Below are some examples of how you would use the library.

Example #1:

Let's say you have a collection of products and you want to find every product that costs less $10 and is not a book. Simple, just write some JavaScript:

products.find({price:{lessthan:10}, type:{not:"Book"}});



Example #2:

Let's say you want to update every product from XZYDesign and set the status to not available:

products.update({status:"NA"},{manufacturer:"XZYDesign"});



Example #3:

Let's say you want to sort your products based on type, price ascending, and quantity ascending:

products.orderBy(["type",{"price":"asce"},{"quantity":"asce"}]);

Below are the methods that are available from the library.

  • Find Method
  • Update Method
  • Insert Method
  • Remove Method
  • OrderBy Method
  • ForEach Method
  • Get and First Methods

You can find an overview of all of these methods here.

You can read more about the library here.
You can download the library here.

You can see the library in action at Joe's Goals and Quote Wizard. I can see a lot of uses for this in some future applications. If you use this library in any of your applications I would love to hear about it (you can leave a comment about it or write a blog using your free Ajaxonomy account).

Creating Resizeable Buttons in CSS

Tagged:  

Have you ever designed a page for a web application and wanted to make a nice button for the application? You probably opened your photo editor and started working on the button. But, what if your design resizes itself based on the users browser size? You will probably want the button to resize as well. Well, over at CSS Globe they have written a script to do just that using CSS.

Below is an excerpt from the article explaining the concept.

Concept

This concept is probably familiar to you from various navigation tab styling techniques. We have one long background image:

image

This one is 550px wide. I believe that is more than sufficient for buttons :)

So, we apply this image as a background image of a top element (in this case SPAN), place it to top left and add some left padding. Nested element (in this case EM) have the same background image but placed to top right and with right padding. As the content text grows so will the button.

image

Height of the button is fixed in my example but you can use similar technique and some more markup and place the same background image to all 4 corners.

To make sure that the text is vertically centered I use line-height property.

The HTML that is required for applying the CSS to would be the below.

<button><span><em>Button text</em></span></button>

The below is the CSS that is used.

button{
	border:none;
	background:none;
	padding:0;
	margin:0;
	width:auto;
	overflow:visible;					
	text-align:center;	
	white-space:nowrap;	
	height:40px;
	line-height:38px;			
	}
button span, button em{
	display:block;
	height:40px;
	line-height:38px;			
	margin:0;
	color:#954b05;
	}
button span{
	padding-left:20px;
	background:url(bg_button.gif) no-repeat 0 0;
	}	
button em{
	font-style:normal;
	padding-right:20px;
	background:url(bg_button.gif) no-repeat 100% 0;
	}

You can read the full post here.

You can see the demo here and you can download the source code and image here.

This code could be very useful and I will probably use it in my next application. If you have used a technique like this in an application that you've made I'd love to hear about it, you can leave it in the comments.

Syndicate content