1. 10 Useful RSS-Tricks and Hacks for WordPress – Smashingmagazine
   Great tips for any user of wordpress that relies on RSS for syndicating content.  Most of these tips show you how to gain more control over your RSS feeds.
2. 5 good programming habits in PHP
   General rules of thumbs for php programmers.   Some of the rules may make you think twice, like the rule of “Never copy and paste”.
3. What is More Important To Succeed Online:  Business or Technical Skills?
   A question for the ages, at least in the IT field, is it more important to be business or technical minded?  A very interesting article on how these skills have attributed to the success of several companies.
4. Firefox 3.1 beta news – web workers
   A CNET article on Firefox 3.1.  The interesting part is how “web workers” can process work in the background.  Background processing would push the RIA movement further and I’m sure would lead to some very novel ideas from early adopters.
5. How to Setup a Dedicated Web Server for free – with Ubuntu
   A practical and useful article on how to setup a web server.  This is a very well written article that shows how far Linux has come in terms of ease of use.
6. How to use Twitter as a tool
   An article by Guy Kawasaki on how to use Twitter for productivity.  It’s a very detailed post and for those new to Twitter, it explains the utility factor of Twitter beyond just being a gossip tool.
7. Online Advertising and Its Impact on Web Design
   An excellent article from Smashing Magazine on how online advertising affects web design.  It’s an interesting topic as web advertising is a primary means of revenue for the majority of blogs.
8. Top 10 Web Dev Blunders of 2008
   A list of some of the biggest “mistakes” we’ve seen on the web this year.
9. Who Protects The Internet?
   Who does protect the Internet?  This article should be of interest to anyone who uses the Internet, so that’s a lot of people.  Techcrunch takes a go at reviewing where we are with the Internet.
10. Referrer Detector WordPress Plugin
    A great wordpress tool to greet your users coming from specific sites.

I hope you find these articles useful.  You can contribute your own links by visiting this buncholink which groups related links together in a useful manner.

Frameworks and libraries can speed up the development time and make code maintenance simpler, but it’s important you understand how they work.  It’s not just the framework itself but the entire footprint your application leaves when a user visits a specific page.  Ask yourself what’s involved from the database, to the code/framework, and then to the client through http requests.

After experiencing some issues with an application running the Zend Framework, I realized there were a lot of things I was not doing to optimize my application.  There are simple and more complex actions you can take to speed up your application.  Since time is precious, and developers with an expertise on optimization are not always available, I’ve split this post into two sections (simple and more advanced).  This post focuses on the simple part.

Simple tips and tools

1. Use Firebug with YSlow
   Firebug and YSlow are powerful tools to analyze the front end of your site.  Run the most common request on your site and see what YSlow says.  Expect a low grade, probably a D or lower.  If you can reach a level C or greater you’re doing really well as some of the requirements are not practical for most applications.

   How-to:
   Net: How many calls are there?  Try to minize these calls and definitely remove any 404 calls as they can eat up server resources.

   Console:  Do you have a lot of POST calls?  Some libraries, like dojo’s javascript framework, can make a lot of POST requests.  Reduce these if possible.

   YSlow: Rules I would pay attention to:
   1. Make fewer HTTP Requests
   3. Add an Expires Header
   4. Gzip components (server related)
   5. Put CSS at the top
   6. Put JS at the bottom (not always possible)
   7. Avoid CSS expressions
   10. Minify JS

   Resources:
   http://getfirebug.com/
   http://developer.yahoo.com/yslow/
   http://developer.yahoo.com/performance/rules.html

2. Minify Javascript and CSS
   Minification is the process of compacting your scripts by removing extraneous content such as white space.   In addition, minification can make attempts at refactoring the code to remove redunancies.  If you want to play it safe, only remove white space to ensure your code is still running. The Yahoo compressor is one of the best minifiers out there and reduces both Javascript and CSS by a significant percentage.

   How-to:
   java -jar yuicompressor-x.y.z.jar -o style_minified.css style.css

   add the “–nomunge” to only do whitespace compressions.

   Resources:
   http://developer.yahoo.com/yui/compressor/
   http://dojotoolkit.org/docs/shrinksafe
   http://dean.edwards.name/packer/

3. Merge css and js http requests- manually or automated
   Reduce the amount of calls you make to various CSS and JS files by merging them to one URL.  This is more work but will reduce the overhead.

   How-to – manually:
   This is really easy, take your css and copy and paste them together into one file.  Make sure your preserve the order of your css.  The same applies to your Javascript files.

   How-to – Automated – google or your own custom:
   Google has a php script which can take various sources and return them as one.

   Resources:
   http://code.google.com/p/minify/
   http://reinholdweber.com/?p=37

4. CSS Background Images are bad – usually
   Using a div for all of your images with a background image is not that great for performance as it requires more calls.  I’ll be the first to admit it’s my favourite way to design, but you should try to avoid them where possible.  In addition, for hover states try using one large image with background-position calls to show specific parts.

   How to:
   Use background-position to select which portion of the large image you want to show.  There isn’t much more to explain.

5. GZip
   Gzipping files on the server side will reduce the amount of overhead significantly.  It adds a bit more on the server side, but generally the pay off should be well worth it.

   How to:
   It depends on your server situation, but here’s a snippet:
   mod_gzip_on Yes
   mod_gzip_item_include mime ^application/x-javascript$

   Refer to http://snipplr.com/view/9017/gzip-your-components/ for details

   Resources:
   http://developer.yahoo.com/performance/rules.html#gzip
   http://snipplr.com/view/9017/gzip-your-components/

Conclusion
That wraps up the simple part of this tutorial… really, that’s it!  The focus of these posts is to keep them simple and easy to use.  You may be surprised at how much faster your application runs when you apply these techniques.  I hope you found these useful or at least agree that these are good practices to apply.  In the next part I will examine more advanced methods of optimizing your application.

Feedback
Your feedback is always appreciated.  In addition to commenting, if you have more resources, please add them to my growing list of links through this buncholink

It’s a simple way to organize a group of links together.

In this post, I will discuss 5 tips and tools that the php community has provided to speed up development time and improve code quality.  These should help you out if you don’t already know them, but if you do I would like to hear what you use to speed up your development time.

1. Framework with the Model View Controller (MVC):
   This is old news, the MVC pattern is an industry accepted pattern to improve the organization and overall quality of your code.  Put your database code in the model layer, visual UI code in the view, and business application logic in the controller.  If you don’t know the MVC layer, you really should.

   My choice: Zend Framework
   Why?  Easy to pick and choose what you want to use; strong momentum behind it; good documentation.

   Resources:
   http://framework.zend.com/manual/en/zend.controller.html
   http://www.cakephp.org
   http://www.symfony-project.org
   http://codeigniter.com/

2. AJAX Frameworks:
   Also old news, you should become familiar with a common AJAX framework.  Scriptaculous, mootools, jquery, and dojo to name a few… these frameworks can all do similar things and will make your clients go ooh and ahh.  Actually, these days AJAX interaction is become standard.  Being a Zend developer, I would suggest acquainting yourself with the Dojo framework.  It’s probably the largest and most complex of them all but is very powerful.

   My choice: Dojo
   Why?  Zend has adopted it into the zend framework; easy to extend; large resource of reusable widgets to use.

   Resources:
   http://en.wikipedia.org/wiki/Ajax_framework
   http://www.phpframeworks.com/
   http://mootools.net/
   http://jquery.com/
   http://script.aculo.us/
   http://www.prototypejs.org/
   http://dojotoolkit.org/

3. Integrated Development Environment (IDE):
   I won’t go into much detail here, if you’re developing objected oriented code or using a lot of libraries you should get a good IDE.  Eclipse PDT is my favourite because it’s free and has some very useful plugins to extend it.  My basic requiremnts are resource/file management of libraries, auto completion, basic syntax validation, and basic debugging tools.

   My choice:  Eclipse PDT
   Why?  It’s free and provides all the basic features an IDE should have.

   Resources:
   http://www.eclipse.org/pdt/
   http://www.zend.com/en/products/studio/
   http://www.ibm.com/developerworks/opensource/library/os-php-ide/index.html

4. Database Creation/Management Software:
   Managing a database schema can become tedious error prone thing to do.  If you don’t have a dedicated database team, and in many cases are the web and database developer, then you should be doing more than handling your schema in mysql (or your database of choice).  MySql has recently released workbench, a database management software that is really powerful.  I prefer DBDesigner 4 right now because it’s simple to use and feeds into propel db well.  But I plan on moving over to workbench in the near future as it’s really the continuation of DBDesigner.

   My choice:  DBDesigner, but not for long.
   Why?  It’s simple to manage your database schema visually and exports well.

   Resources:
   http://dev.mysql.com/workbench/
   http://fabforce.net/dbdesigner4/

5. Object Relational Mapping (ORM):
   If you don’t know what this is, it’s basically a way of mapping your database tables to objects.  It’s so you don’t have to think about how to connect your logic/business code to the database.  Also, if you use tools like Propel DB you don’t have to code this as it generates it all for you.  While your application may not perform as well as with straight SQL, you will code faster and you can find ways to tweak bottle neck cases.

   My choice:  Propel DB
   Why?  It’s easy to use and integrate into the zend framework; There aren’t many other options.

   Resources:
   http://en.wikipedia.org/wiki/Object-relational_mapping
   http://propel.tigris.org/

Wrap Up / Further thoughts

I hope this was useful for you.  Everyone has their own combination that works for them, and in a lot of cases the company forces you to use one.  Where I work, we can use whatever combination we want and I know there are many.  I would like to hear what your setup is like, what IDE, framework, and OS works for you and why?

Comment/Get the links for this post here:

If you have been following the Zend Framework at all, you’ll know that Dojo has been selected as the UI library to be adopted into the Zend Framework. The question is what does this exactly mean? I’m still trying to figure out how they are going to use dojo, but right now with release 1.6 you can create dojo widgets (e.g. – date pickers, currency boxes, specialized buttons etc…) in code with the Zend_Dojo object. That being said, you still need to learn a few more things to create a useful and reusable AjAX framework with Zend.

The Goal

This tutorial will explain how to create a reusable UI AJAX layer with dojo that communicates to the Zend controller class. I’ll provide some basic code that will show you one way of creating a reusable framework that makes it easier to organize your javascript/ajax and controller layer.

Prerequisites

Before you proceed, you’ll need to read up on how to setup the Zend MVC framework.

• Zend Framework with a MVC structure
• Dojo framework

The Steps

1. Setup the Zend Framework and a MVC structure

2. Create the controller class file (e.g. – MidstrideController.php)

3. Create the view folder “midstride” in the view/scripts directory.

4. Create the file “index.phtml” in the midstride views/scripts folder.

5. Create an empty javascript file called ajaxmethods.js and place it in your javascript folder.

-check up-
Your file structure should look something like this now:

-/application/controller/MidstrideController.php
-/application/views/scripts/midstride/index.phtml
-/www/javascript/ajaxmethods.js
-/www/scriptslib/dojo-release-1.1.1

Where application is your MVC folder and www is the directory for your assets and index.php bootstrap file.

5. Add the javascript code to the header of index.phtml

 

<script type="text/javascript" src="<?php echo $this->baseUrl; ?>/javascript/ajaxmethods.js"></script>

<script type="text/javascript" src="<?php echo $this->baseUrl;?>/scriptslib/dojo-release-1.1.1/dojo/dojo.js"         djConfig="parseOnLoad: true"></script>
<script type="text/javascript">

dojo.require("dojo.parser");

</script>

In this case, the baseUrl is a short cut variable defined in your controller class
e.g. – $this->view->baseUrl = $this->_request->getBaseUrl(); //gets the root of your application

6. Add some sample form information to index.phml

 

<div id="status_message"><!-- ajax messages go here--></div>

<form id="ajax_form">

<input type="text" name="test_input" value="12345" />

<input id="submit_button" type="submit"

value="submit"

onclick="formPost('<?php echo $this->baseUrl ?>/midstride/ajaxcall',"ajax_form","ajax_loader","submit_button") />

<div id="ajax_loader" class="ajax_loader" style="display:none;"  />

</form>

This form will call the javascript function “formPost” with the id of the ajax loader which is currently hidden. The next step is to define the javascript function which will do the ajax call.

7. Code a reusable javascript ajax function

 

function formPost(destinationUrl, formId, loaderId, submitId)

{

var useAjaxLoader= true;

var hideSubmitAction = true;

if (loaderId===undefined) {     useAjaxLoader = false; }

if (submitId===undefined) {     hideSubmitAction  = false; }

var postParams = { url: destinationUrl,

load: function(data) {

dojo.eval(data);

//hide ajax loader

if (useAjaxLoader)    { dojo.byId(loaderId).style.display = "none";}

if (hideSubmitAction) { dojo.byId(submitId).style.display = "";} },

error: function(data) { console.debug("An error occurred: ", data); },

form: formId,

timeout: 4000,

headers: { "X-Requested-With": "XMLHttpRequest" }

};

//show ajax loader

if (hideSubmitAction) {dojo.byId(submitId).style.display = "none";}

if (useAjaxLoader)    {dojo.byId(loaderId).style.display = "";} //block

dojo.xhrPost(postParams);

}

There’s a lot going on in this code but it’s not that complex. In short:

• destinationUrl = the HTTP address you want to call (a controller action method).
• formId = the id of the form that is making the call.
• loaderId = the id of the ajax loader (optional)
• submitId = the id of the submit button (optional)

The loaderId and submitId are used to show a loading icon and hide the submit button. This provides the nice ajax feedback and makes sure the user doesn’t click twice.

The destinationUrl is the same address as in the GET or POST URL. We need to pass the formId so that the parameters can be passed. I’ll explain at the end other ways of passing parameters.

8. Create some sample php code in the controller class “MidstrideController.php”

 

[in MidstrideController.php]

public function ajaxcallAction()

//only handle ajax calls

if ($this->_request->isXmlHttpRequest())

{

//don't render the page - no view script is needed{

$this->_helper->viewRenderer->setNoRender();

//json is the intermediate language to pass messages between the server and client

$jsonData = "";  //initialize to nothing
//get the parameter as normal

$testValue = $this->_request->getParam("test_value");

//prepare a fancy highlight response back

$jsonData =  "var highlight = dojo.animateProperty(

{

node: 'status_message',duration: 500,

properties: {

color:         { start: 'white', end: 'black' },

backgroundColor:{ start: '#fffecc', end: '#ffffff' }

}

});highlight.play();"

$this->_response->appendBody($jsonData);

}

}

This action method listens for the ajax called made by the javascript function. It only deals with XmlHttpRequests (AJAX) and then sets the controller to not render anything. The no rendering option means you don’t need to create a view (phtml) script. Next, you just handle the form data as you would normally and prepare a JSON response to send back. In this case, I’ve prepared a dojo animation to make a nice highlight on a status box. In practice, you may not want to include any javascript in your controller class, as this is technically UI logic that could be in the ajax (JS) layer. I prefer including dojo javascript because I don’t like writing javascript .

The last call $this->_response->appendBody($jsonData) returns a javascript string which is evaluated in your javascript function by dojo.eval(data).

You’re done

That’s it! You now have a simple way of making ajax calls and keeping your main logic in the controller layer, where it should be. If you wanted to pass more parameters to the controller class, you would have to modify the formPost() function to have this:

contentParams = { “paramOne”:”1″,”paramTwo”:”2 };

and then pass this to the var post params like:

var postParams { content:contentParams, …other parameters}

This can be useful when you have hidden values or other non traditional form inputs to pass in.

Pros

-8 steps to a reusable ajax layer.
-You can easily customize the ajax post effects with dojo’s large animation library.
-A very customizable and flexible framework for any project.

Cons

-Technical level: It can take a while to learn the MVC and Dojo library.

Conclusion

That wraps up my first article on AJAX and the Zend Framework. Future upcoming AJAX articles will discuss how to integrate Zend in scenarios where you want a real progress bar, modal popups, and captcha services. Please let me know if you have any comments or questions.

Tooltips are nice small additions that can improve the user experience. They are so common that Dojo and other javascript frameworks provide precanned ways of creating them. In dojo, they provide dijits (their widgets) that can do some amazing things on the user interaction side. That being said, when you want to customize them in any way, you can run into many walls.

Dojo tooltip

Problem & Goal of this Article

The main goal of this article is to show you how to stylize the tooltips so that you can create your own type of tooltip. This article will go through the css required and how to structure your code so that you can create more than one tooltip.

To extend the style of dojo’s dijit, it’s best to copy one of the existing themes and create your own custom theme. In this tutorial, I’ve copied the “tundra” theme so all the following css code will use the “tundra” selector. You could replace the tundra selectors with your own custom name, but it may be more work than it’s worth.

Prerequisites – tools you’ll need setup:

• Firefox
  You should have this
• IE 6 or IETester
  You’ll want to make it IE6 compliant right? Or maybe not…
• Firebug
  Every developer and especially UI developer should have this.
• Dojo framework setup
  Follow their documentation on setting up the includes

The Steps

1. Setup a new theme
-Open up the dojo dijit theme folder
-dojo-release-1.1.1dijitthemes
2. Create a copy of the “tundra” folder.
3. Rename it to the name of your theme. (e.g. – “tundraextended”)
4. Include the dojo style and your extended theme in your header code:

<style type=”text/css”>
@import “pathtodojo/dojo-release-1.1.1/dijit/themes/tundraextended/tundra.css”;
@import “pathtodojo/dojo-release-1.1.1/dojo/resources/dojo.css”
</style>

5. Include the tool tip dijit:

<script type=”text/javascript”>
dojo.require(“dojo.parser”);
dojo.require(“dijit.Tooltip”);
</script>

6. Add the tool tip code

<body class=”tundra”> <!– you need to set the body to load the dijit styles –>

<a id=”theId” href=”#”>Hover over this</a>

<div dojoType=”dijit.Tooltip” style=”display:none” position=”left” connectId=”theId”>
<div class=”custom_tooltip”>tool tip content</div>
</div>

Note the attribute “position=left”. This should remain the same for all tooltips that are defined by the inner class “custom_tooltip”. I don’t really use the position attribute and rely on css position.

At this point you should have a simple tool tip hover when the mouse goes over the link. If you don’t, then open up firebug and see if you have any errors. If you do, then you most likely didn’t setup dojo properly.

If all is good now, then you have a nice basic tooltip. Now, the hard part is how to extend the look:
7. Create a new css file – dojoextended.css
This style sheet should be included last. As its name suggests, it extends (overrides and resets) the dojo stylesheet.

<style type=”text/css”>
@import “pathtodojo/dojo-release-1.1.1/dijit/themes/tundraextended/tundra.css”;
@import “pathtodojo/dojo-release-1.1.1/dojo/resources/dojo.css”
@import “pathtocss/dojoextended.css”
</style>

8. Add the following css to the extended css file

/*Reset the generic tooltip container */
.tundra .dijitTooltipContainer
{
background:none;
padding:0;
margin:0;
border:none;
height:auto;
width:auto;
}

/*defines the div inside the tooltip – your custom tooltip*/
.custom_tooltip
{
/*this defines your tooltip*/
position:relative;
left:5px; /*use left and top to position it */
top:15px;
width:125px;
height:100px;
background-image:url(“yourimage.png”);
}

/*if your tooltip uses transparency, define a ie6 specific one below */
.dj_ie6 .tundra .custom_tooltip
{
background-image:url(“yourimage_ie6.png”); /*an 8-bit png*/
}

/*hide the connector – an arrow that connects the tooltip to the hovered item */

.tundra .dijitTooltipAbove .dijitTooltipConnector { background:none; }
.tundra .dijitTooltipLeft .dijitTooltipConnector { background:none; }
.tundra .dijitTooltipBelow .dijitTooltipConnector { background:none; }
.tundra .dijitTooltipRight .dijitTooltipConnector { background:none; }

You’re done!

You can now create as many styles for your tooltips as you need by defining a specific div and a new style (e.g. – custom_tooltip2). You will likely have to do a lot of tweaking on the positioning image, but it’s pretty straightforward when you look at it. The longest part is determining which css selectors you need to use, if you look at the tundra.css class you’ll notice there are more selectors I didn’t look at.

Pros

-Quick to code.
-Easy to understand, there’s only one div to deal with.
-IE6 compliant. It’s always a bonus .
-Extendability. You can now create as many tooltips as you want for one project. With the standard tooltip, you would be stuck with one tooltip for an entire project.

Cons

-Inefficient: Resetting styles is cumbersome and requires more data to be loaded.
-Upgrading dojo could break the custom tooltips if they change the way the tooltip are rendered.
-Tooltipconnector: I didn’t use the tooltipconnector which allows you to position the tooltip in various positions easily.

Conclusion
That wraps up the first tutorial on dojo. I hope you found it useful, and I appreciate all feedback. If you have a better way, I would like to know about it. My next article will look at how to combine dojo’s ajax with the zend framework.