I first heard this on the big web show and it was very eye opening. (Sorry that was bad.)  Sunni explains how learning, while doodling at the same time, can help you retain 30% more than just writing notes in a traditional sense.

Here are a few scripts I discovered in the past week or two which I have deemed as neato  or cool.

gvChart – jQuery plugin for Google Charts

url: http://www.ivellios.toron.pl/technikalia/demos/gvChart/

I am amazed how little configuration is needed for cool Google charts. You can just have html in a table and gvChart will do the rest to make a fancy Google chart with the data.

sample pie chart

Next is a fancy form slider…

url: http://tympanus.net/Tutorials/FancySlidingForm/

Here is a quick tip on on building an ajax delete page in php and mysql with a bit of jQuery to handle the ajax. We will assume you have some list of entries in a database and that you would like to remove them without the page reloading. We will also give the user a confirmation before they delete but it will not be an ugly alert box, woot! Those boxes are so web 1.0.

View example

First, we will be using one jQuery plugin to handle the confirmation. Second we will use some code and techniques from David Walsh.

jQuery Confirm Plugin will allow use to present the user a warning before the item is removed. I will use the default configuration for simplicity but there are some options you can tweak depending on your preferences.

Now below is the first part of the JavaScript that we will add to the head. You notice around line 27 that starts with “$(‘.delete’).confirm({” does two things.

First it present a warning message to the user.

Second there is a timeout feature which will allow for the message to be removed and turn back to the normal state of the page.

Once the user has confirmed the or clicked “Yes” in the $(‘.delete’).click(function() { (starts on line 9 below) will kick in and then remove the entry via an ajax call. All we did was add a class of .delete to the entry and then the id will need to be the corresponding id field in your mysql database. More on that below.

Add this to your head of your html document.

Sample html

Name
Category
Contact Last Name
Contact First Name
 
 


Business 1
Auto Services
First Name
Last Name






Business 2
Accountants & Tax Services 
First Name
Last Name






Business 3
Advertising , Creative, & Marketing Services  
First Name
Last Name

Now we will need the php to delete the item. This would be the delete.php as shown above in the javascript that is within the head section.

// you will need your database connection string here
if(isset($_GET['delete']))
{
	$query = 'DELETE FROM my_table WHERE item_id = '.(int)$_GET['delete'];
	$result = mysql_query($query,$link);
}

So once the user clicks on yes to confirm the delete the ajax request is made to the server and delete.php is fired where it removes the entry from the database. Finally upon a successful removal of the record in the database we remove the row containing the entry from the users screen.

It seems that the speed of your website is becoming more paramount these days. Google is even using it in your website rankings. So how do you make your website faster? Well it is really a balancing act between features and practicality. I will try and cover some basics specifically regarding wordpress and a brilliant plugin called w3 Total Cache.

A lot of what you see below was influenced by a talk that Scott Robbin gave at word camp Chicago 2010.

Reduce File Requests

If you are unfamiliar with a file request or http request go here. If you are using PHP you can do this with PHP Minify.  Why do this? Reducing the number of requests to the server is important as your site becomes more popular. As sites grow you may see a typical webpage with 8-15 requests for JavaScript and css files alone. Popular frameworks like jQuery tend to use multiple separate js files to run their plug-ins. These plug-ins make sites look great but all the extra request can slow down the load time and rendering. Even worse if there is too much JavaScript on a page, the page could be completely download from the server but still rendering on the client machine giving the impression it is still downloading.

Here is a quick video from Google which explains about parallel downloads much better than I can.

So a couple things you can do. Combine JavaScript files and combine css files.  Generally speaking as these are group together they will reduce the number of http requests and make your site load a bit faster.

A couple tools to use to monitor these requests are firebug and then within firebug there is a plugin called Yslow. (made by yahoo)

So here is a screenshot of the number of http requests that I had before using w3 total cache. 34 http request. This is pulled in firebug, click the bug icon  in the lower bottom corner of firefox and the click on the net tab and make sure this is enabled.

Screenshot of my site using firebug before minified.

Below is a screen shot of my overall Yslow score. This is an E (overall 55) or pretty bad. Granted this is more for enterprise level servers, most of us don’t need a CDN for our site.  Let’s see what I can do to fix this.

Yslow score before optimization

In wordpress using w3 Total Cache go to the minify settings link.  In this panel we will look at the JavaScript and CSS settings.  Now comes the fun part. Click the enable checkmark for JS and then we can begin adding files. I had 8 separate js files in my theme which I added. I left the default group but you can specify groups for each section of your site, depending on the js files.

Some of these javascript files are from wordpress plugins so you need to be careful as to how they are embedded. If  they are embedded in the head but need to run in the footer this could cause an error.

I recommend using firebug and watching the console to check for any JavaScript errors that may come up as you start to add files to the list.  Also keep in mind that when you upgrade a plug-in make sure that if the plug-in has a new js file to grab that and remove the old one from here.

Well after some tweaking I was able to get it down to 20 requests. Some of the plugins could not be combined together without breaking but I was able to reduce the js request down to a header, a footer, my google analytics, disquss comments file and then two seperate files for code markup. In addition to that all of the css has been combined into one file.

Let’s see our Yslow score now.  Well we are a C now, we went from 55-71.  This whole process took about 20-30 mins, so if you were to spend a little more time, I am sure you can find ways to improve your score even more.

For more information please visit weight shift where they explain great tips on improving your site speed.

Quick tip: You can specify absolute urls in tinyMCE quite easily.

document_base_url : "http://yoursite.com",
absolute_urls : true

I am sure this is an RTFM but I did not see anywhere exactly where it was.  I have been using this with the ajax file manager and it seems to be working quite well.  Interested in other file managers in TinyMCE check out tyssendesign.com.

I saw this on Scott Robbin’s blog who was at wordcamp chicago. He did a brilliant post on front end optimization. I will post my thoughts on this later this week but for now, check this out.

Also my blog theme is in progress so please pardon my dust.

What motivates us?

Google already does this…

Two quick posts.  First on mobile and second on living in a digital age.

Mobile Applications

It’s like 1999 again we need to build all “mobile” apps in html, makes sense to me. What are your thoughts?

Saw a great film on living in the digital age by Frontline.  You can view the video below.

Digital Nation

I wish I found out about this a while ago. Apparently in Photoshop you can optimize a png. Not sure about fireworks?

Anyway in Photoshop go to Image->Adjustment->Posterize.

A slider will then popup, adjust the slider and then save. Be careful it removes colors to reduce the size so look carefully before you save it.

You can read more about it here:

http://www.queness.com/post/2507/most-effective-method-to-reduce-and-optimize-png-images

I am just starting some basic iphone web development. If you like jQuery this is a great
mobile phone framework.

I will try and post some updates here in the next few weeks. If you have an iphone or if you like books I highly recommend this book:

Building iPhone Apps with HTML, CSS, and JavaScript: Making App Store Apps Without Objective-C or Cocoa

I have never done any objective C or Cocoa programing nor do I really want to. I like the book, which has an online version you can view here or even an iPhone app.

Font replacement aka dynamic text replacement has been around since 2004.  I did not start using it till late 07 but lately it seems to be a hot topic again. Mostly because it has become a lot easier to implement I believe and SEO has become more prevalent.

Which font replacement technique should you use?

I have been trying to find the best font replacement technique. I have not found a clear winner but font replacement can now be done just with JavaScript. It uses SVG or VML I believe to have the browser draw the font so to speak.

How font replacement works.

Currently I have been using cufon but not on this site. (I am using Flir now but not much longer.) It is strictly JavaScript which is nice no more setting permissions on the server or worrying if the gd 2 library is installed.

It is really easy to implement, and seems to more accurately render the font spacing and details then Flir aka Facelift Image Replacement.
Flir is a server side font replacement that uses php, and javascript to redraw an image on the fly of a font. It works really well but letter spacing does not work so great when you use smaller font sizes. Also there was a fairly bug that need to be patched a few months ago.

Other than that is great and is easier to use than sifr which uses flash to replace fonts. I am not a flash guy though so that may be why I have a bit of a bias towards Flir.

Typeface is another js font replacement tool. It does not use php and is very similar to cufon. You can read more about cufon vs typeface here. The best way to know is just to try. I have not used typeface yet but would be interested to hear your comments.

How to install and use Cufon

Below is a quick tutorial of how to use cufon, by Jeffrey Way of nettuts.com.

More Info:

For more information on font replacement go here to see 10 different techniques.