Ajax and Ajax Frameworks

I have been a developer for nearly 20 years and a web developer for about 10 years. Over the years, I have considered creating a blog to share the things I have learned (and am learning) about web design and development, but I never seemed to have the time. When I began learning about web development using Ajax and Ajax Frameworks, I decided to take the time to create this blog.

My intention for this blog is to focus primarily on Ajax Frameworks, but since web development requires knowledge of many technologies, I will occasionally write about things such as CSS, Javascript, PHP, MySQL, Flash, etc.

Lately, I have been using JQuery as my primary Ajax tool. Although I have used other Ajax Frameworks in the past (Dojo Toolkit, Yahoo! User Interface Library, Scriptaculous/Prototype), JQuery has thus far been the easiest to learn. In my first few posts I will discuss some of the JQuery Plugins that I have created. Some of these include: a plugin for Google Maps (jquery.imGoogleMaps), Form validation and submission  (jquery.imValidateForm), Page Populater (jquery.imPagePopulate), and a plugin to create lists (jquery.imList).

While I am still learning about some of the other Ajax Frameworks, I hope that what I have learned will be helpful to others. Just remember, “When you can pull the pebbles from my hand…”

CSS

I’m working on a project where I’m using CSS to add a border radius and background image to an input field. Background images are supported by all browsers, but border radius is only supported by Firefox, Safari, and Google Chrome.

Read the rest of this entry »

Related posts

CSS

I’m working on a new JQuery Plugin that requires the text to be vertical. This can easily be accomplished using CSS, but I found that the vertical text may appear differently in each browser depending upon the element that is used. I was able to display the text vertically in Firefox, IE8 (and IE7), Google Chrome and Safari. I looked at Opera’s CSS support and it doesn’t appear to support vertical text.

Read the rest of this entry »

Related posts

CSS

I wanted to use CSS to create a Unordered List where the color of the list-style (the bullet) was different than the list-item (the text). First I set the color for the Unordered List:

.certsBlock ul {
        color:#1AB7EA;
}
.certsBlock ul  li {
        list-style:square;
        margin-bottom:5px;
}

Then I add an additional element inside the list-item (the text) and change it’s color:

.certsBlock ul  li p {
        color:#fff; /*white*/
        margin:0;
}

Now I create my Unordered List:

<div class="certsBlock">
        <ul>
                <li><p>Item 1</p></li>
                <li><p>Item 2</p></li>
                <li><p>Item 3</p></li>
        </ul>
</div>

So the color of the list-style (the square bullet) will be a blue and the list-item text will be white. Easy enough.

Related posts

I’m working on a project that uses Drupal and I wanted to add a few images to the home page.

First I created the folders files/images under the root directory. I then created the home page (Create Content->Page). When adding images to the home page, the file location is relative to the root directory:

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

But when I created another Drupal page (a page other than the home page), the relative path for the image is different:

<img src="../files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

And when I created a page using Drupal’s Panels Module, the relative path for the image is once again relative to the root directory:

<img src="files/images/flash1.jpg" width="168" height="112" class="imageFloatLeft">

Adding content to Drupal seems to be fairly straightforward, but I did struggle a bit as I tried to figure out the relative paths of images/files so I hope this helps anyone else who may be struggling.

Related posts

I recently stumbled upon the site FlashScope.com. It is a website where flash developers can sell their flash files, components, etc. The site contains a lot of great components such as Image galleries, page templates, and games.

A few weeks ago, I started converting some of my Flash AS2 class packages to AS3. I am creating a few new Flash components/products and updating others that I created a few years ago. One of the Flash products that I am creating, I want to distribute a free version and a version that I can get paid for.

I don’t want to take the time to setup an e-commerce site (and promote it) just to sell a few inexpensive products, so I searched for an existing site that marketed Flash products. Flashscope.com seems to be the perfect site.

One other aspect of Flashscope.com that I like is that most of the products on the site are not expensive. While perusing the site, I don’t think that I saw a product that was over $30 (the average cost is probably $10). So, in the event that I don’t want to take the time to create a particular Flash product, Flashscope seems to have enough of a variety of products that I don’t have to reinvent the wheel – and I won’t have to cut deeply into my profits for a project.

Flashscope.com also has a free flash gallery that you can download. You can demo the gallery here. I think that I will be visiting the site quite often in the future.

Related posts

CSS

As a freelance developer, I am always looking for more work. The other day I was reading the skills required for a particular job and it mentioned that the candidate should have knowledge of the Blueprint CSS Framework. I had never heard of the framework before and was curious as to why one would need a framework for CSS. I consider myself to be an expert CSS designer, but I decided to check out this Blueprint thingy.

The website says that by using the Blueprint CSS Framework, I can cut down my development time and it eliminates the discrepancies across browsers. Sounds intriguing. After a bit more research, I found that Eric Meyer’s Reset CSS is incorporated into the framework. I have learned a great deal about CSS from Eric Meyer over the years:

Since I was beginning a redesign for a client, I decided to use the Blueprint framework as the basis for the effort.

Read the rest of this entry »

Related posts

I’m redesigning my portfolio site and decided to use Joomla. I just installed it on my Ubuntu box. It wasn’t difficult, but it could have been easier.

First I downloaded Joomla from here. I had the option of download a nightly build, but I wanted the latest stable version.

Read the rest of this entry »

Related posts

As a developer, I hate writing similar code for the same process over and over again. Just like highly optimized database design, developers should always try to write code as efficiently as possible.

I’m working on a project where I use YUI and CakePHP to fill multiple combo boxes on a page using Json data. At first, I wrote separate code with the same functionality for each combo box. Every time I needed to change the functionality, I had to change it for each combo box. After doing this multiple times, I decided to combine the functionality on both the front-end (YUI) and the back-end (CakePHP).

Read the rest of this entry »

Related posts

I’ve been upgrading an Intranet application that I created for a client. I created the front-end using YUI (Yahoo! User Interface Library) and I am working on migrating the back-end to CakePHP. After setting up CakePHP, my first step of integrating YUI with CakePHP is retrieving data ajaxally. The application was already using YAHOO.util.Connect to retrieve the data, but I had to change my parsing code due to the format of the Json data that is returned by CakePHP.

Read the rest of this entry »

Related posts

I justed received an error when logging into a CakePHP app. It was the Auth Component error:

you are not authorized to access that location

It occurred when I attempted to create two session variables:

if ($loggedIn == 1) {
	$result = $this->User->findByUsername($this->Auth->user("username"));
	if ($result) {
		$this->Session->write('User.langID', $result['User']['language_id']);
		$this->Session->write('User.cntryID', $result['User']['country_id']);
		echo '{"type":"continue"}';
	}
}

Because one generally receives this error message when attempting to access a page that is secured by the Auth Component and ACL, I thought that the session component was attempting to write to a restricted area. After a bit of testing, I realized that the User session var (User.langID) was being used by the Auth Component. So I changed User to an application specific variable:

$this->Session->write('rdsStaff.langID', $result['User']['language_id']);
$this->Session->write('rdsStaff.cntryID', $result['User']['country_id']);

No more errors. I hope this will be useful to someone in the same situation.

Related posts