So, you have used Website Optimization Analyzer or you installed Yslow for Firefox or you discovered somewhere else that compressing your files (html, javascript & css) is a good thing to do. Unfortunately, it’s not always as easy as it looks to do this.

In Apache web hosting environments, there is a module called mod_deflate (for 2.x versions) or mod_gzip (for 1.3) versions. This is generally the easiest way to get content compressed. As in my last post about Magento, you should normally be able to enable this safely with the following lines inside your .htaccess file in your www root of your website:

<ifmodule mod_deflate.c>
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</ifmodule>

Then visit your website and in your browser right-click on the web page and choose “View Source”. In the source code, try and find a line that contains your stylesheet, then we go to whatsmyip compression checker and we enter the whole URL to your stylesheet there. To test, enter my css url.

http://www.opensourcetutor.com/wp-content/themes/hemingwayEx/style.css

You should see a big green tick and the site will say the CSS is compressed. Now, if you don’t, you either haven’t applied my above .htaccess settings yet or mod_deflate is not enabled on your server for you to access.

Alternative #1 – requires Apache mod_rewrite

This method is probably the best method I have seen to overcome the mod_deflate issue and we are only concerned about javascript and css files for now. PHP has an easy method to compress php files on the fly. What we need to do is gzip all our javascript & css files.

If you have shell access, you can run this command to take of the job for you. It will find each and every javascript file and css file and create a gzip copy.

find . -regex ".*\(css\|js\)$" -exec bash -c 'echo Compressing "{}" && gzip -c --best "{}" > "{}.gz"' \;

The line above searches the current directory and any subdirectories for files with extensions .js or .css, then prints out that it is being compressed, then compresses with the highest compression in that directory leaving the original file as is.

Now, we need to tell our browser to access the gzip version *IF* it supports gzip encoding. To do this, we use the following in our .htaccess file. Make sure you have removed the above code if it wasn’t successful.

<files *.js.gz>
  AddType "text/javascript" .gz
  AddEncoding gzip .gz
</files>
<files *.css.gz>
  AddType "text/css" .gz
  AddEncoding gzip .gz
</files>
RewriteEngine on
#Check to see if browser can accept gzip files.
ReWriteCond %{HTTP:accept-encoding} gzip
RewriteCond %{HTTP_USER_AGENT} !Safari
#make sure there's no trailing .gz on the url
ReWriteCond %{REQUEST_FILENAME} !^.+\.gz$
#check to see if a .gz version of the file exists.
RewriteCond %{REQUEST_FILENAME}.gz -f
#All conditions met so add .gz to URL filename (invisibly)
RewriteRule ^(.+) $1.gz [QSA,L] 

The advantage of this Alternative is that our server doesn’t have to gzip / compress the javascript and css each time it is called. This eases the load up on the server as we already do the compression one time and then just call the compressed version from then after. The other advantage is that we don’t need to load up mod_deflate each time. This could be advantages if you are running a VPS with very low memory available.

If you have a static website, you could apply the same technique for all your html files. To do so, you would instead use this line:

find . -regex ".*\(html\|css\|js\)$" -exec bash -c 'echo Compressing "{}" && gzip -c --best "{}" > "{}.gz"' \;

and then add this into your .htaccess also

<files *.html.gz>
  AddType "text/html" .gz
  AddEncoding gzip .gz
</files>

Technorati Tags: apache, gzip, mod_deflate, compression, yslow, firefox, optimization

1. Your URL you type into a browser, translates to an IP address – this check should take a very, very short time
2. Your browser then begins to access the web server where your website is hosted to ask for the page you want, this can cause some delay, typically 40-200ms (bottleneck 1.)
3. In the case of Magento,it uses PHP as the software language that runs the site, so the php begins to execute (bottleneck 2.)
4. PHP then reaches a part of it’s code it needs to access the database to retrieve website data and sometimes insert information about who you are. (bottleneck 3.)
5. The PHP code retrieves the information, does a bit more computing on it (for simplicity, this is still bottleneck 2) and then sends it to your web server
6. Your webserver can then send it or compress it and then send it to you (bottlneck 4)
7. The data is sent over the internet to your browser (bottlneck 5)
8. Your browser must ‘render’ the data it receives into an actual web page (bottleneck 6)

I will assume you are here specifically for Magento issues, so let’s get started with the basics. I will make the assumption that your web server is running Apache and you have very little control over that.

Preparation – the “before”

1. If you are familiar with the, use Firefox and the Firebug extension and the Yslow extension. Take a screenshot of your statistics.
2. Alternatively, what I suggest is to go to WebsiteOptimization if you’re fairly new to this. You basically enter your URL and click. Print out the page, preferably to PDF before we begin.

Check Magento Caching is turned on (if not developing still)

1. Login to your Magento Admin
2. go to System -> Cache Management
3. in the dropdown box, choose “enable” and tick all the boxes, then save settings.

Let’s start simple – .htaccess and gzip/deflate

1. Go to mod_gzip tester and enter your magento site address. If it comes back with a big green tick and says http://yourmagentosite.com is gzipped, then you’re in business and skip step 2. If not..go to step 2
2. Using ftp or ssh, however you access your magento website, go to the root of the site and find your .htaccess file. Scroll down until you see something like:

<ifmodule mod_deflate.c>
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
#BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</ifmodule>

3. Make sure it looks like above. A hash in front of the line means it’s commented out. If your .htaccess file does look like this AND mod_gzip tester is still not showing enabled, you need to talk to your web hosting provider. They may not allow overrides or may not have the deflate module installed or enabled. If it doesn’t look like the above, remove the hashes from your lines so that it reflects what is above, then retest with mod_gzip tester
4. Take a screenshot / pdf printout of Yslow / websiteoptimizer results. ;)

Let’s shrink our javascript

1. Magento uses A LOT of LARGE javascript libraries and depending on your template, it’s a good chance that these make up for 50% of your website page size. This should only affect the first page load but it’s often the first impressions that count, so let’s shrink it.
2. For this, we will use the Fooman Speedster Extension from magentoconnect. Click on the “get extension key” and then copy the key to your clipboard.
3. Now go to your magento store admin interface and click on “System -> Magento Connect -> Magento Connect Manager”. Enter your admin user/pass to access magento connect manager.
4. *Warning – once you install the extension until you fix your .htaccess, it may break your website*
5. Paste the extension key to install the extension
6. Now go to your .htaccess and under the line: #RewriteBase /magento/ add this line

   RewriteRule ^(index.php/)?minify/([^/]+)(/.*.(js|css))$ lib/minify/m.php?f=$3&d=$2


7. Save your .htaccess and access your site (it may take a while to load the first time as it minifies and creates it’s cache.
8. **Test your site is working properly**
9. Take a screenshot / pdf printout of Yslow / websiteoptimizer results. ;)

Let’s check our php settings

1. Create a file called phpinfo.php and enter this information into it.
2. Check for the following: memory_limit
3. If it’s less than 128M, try and add an entry into your .htaccess like so:

php_value memory_limit 128M

Finally, MySQL – for experienced users.

1. If you’re a mysql hero, you don’t need me to tell you how but we want to try and get the following settings in your my.cnf

query_cache_type = 1
query_cache_size = 32M
query_cache_limit=2M

2. If you don’t have root access to check /etc/my.cnf (or /etc/mysql/my.cnf) variables, then login to mysql or use phpmyadmin to show variables.

$ mysql -u mysqluser -p magento_database_name
$ mysql> SHOW VARIABLES;

3. If you don’t have control over your mysql configuration, go knocking on your Web Host’s support tickets to get them to modify it to suit you or if you’re in Australia, check us out

**If you want someone to do this all for you, lodge a support ticket at Yourwebhostingsupport with the Subject “Magento Optimisation”

Technorati Tags: magento, optimization, apache, mysql, speed

Technorati Tags: Joomla, Joomla 1.5, Squeezebox, Lightbox, Email

Dreamweaver was a slightly different story, especially as layouts became more complex and the html grew in size, it had a tendency to crash under wine in these circumstances. I run a horizontal split window of the design view and code view. Sometimes, it’s easier to achieve what you want in one or the other.

Until recently, I was unable to find something that a) Performed the job as good (or close to) both Dreamweaver and Fireworks and b) Felt natural to use and learn.

For imaging / design: “The Gimp”
Web ‘development’: Screem or Bluefish

For numerous reasons, these never cut it for me. I am not a fan of Photoshop / The Gimp interface and while I was able to get around and do things I needed to do, it felt slow and awkward. Both screem and bluefish had no way to quickly view your changes in the IDE or to make changes visually.

That said, all three programs are very capable it’s just that they don’t suit my way of doing things.

I now am slowly migrating to two new tools for web development.

Replacing Fireworks – Inkscape has come to the rescue.
Replacing Dreamweaver – Kompozer is here to help.

Inkscape

Just the last 2 weeks I have really begun getting into Inkscape, an amazingly capable and well designed vector graphics editor that (apart from the odd crash – though it manages to save your work) is proving to me to be even better than Fireworks. It’s like Freehand and Fireworks all in one beautifully wrapped package – that can even be scripted in Python.

I am certainly no graphics guru but I’m definitely above average compared to most non-professional graphics users.

Apart from the user interface being well thought out, the other great things about Inkscape are:

1. Excellent Tutorials and Resources
2. Keyboard Shortcuts for almost anything.
3. In-built access to Open Clipart (0.46 Linux only)

Here’s a quicklist of places to find great inkscape tutorials:

• Inkscape Tutorials
• Heathenex Screencasters
• Inkscape Docs (in 12 languages)
• Nicu Bunu
• Inkscape Book

a feature I would love to see is the ability to automatically download any open source fonts found in your Inkscape document, so that sharing files could be easier.

Inkscape is available for Linux, Windows and Mac OS X and can be downloaded here

It is available via apt-get and yum repositories in their respective Linux distributions.

Kompozer

Kompozer is an unofficial bug-fix release of ‘Nvu’, which was born out of Mozilla’s Composer. The advantage of this is that Kompozer uses the gecko engine to render Kompozer’s layouts within itself much like you can with Dreamweaver (ie: without opening an external browser to view your layout). Additionally, it has very good support for CSS, XML and Javascript editing and a built-in W3C HTML Validator.

I have had Kompozer crash on me, usually when pasting in a large HTML page from elsewhere but other than that, it is an extremely user friendly and capable HTML/CSS/JS editor.

It is not an ASP / PHP / Python IDE and doesn’t make any attempts to be one. From that perspective I feel it encourages clean separation of code and layout.

Once again, Kompozer is also cross-platform and is available for Windows, Linux and Mac OS X

Aah, also five part ipython series on showmedo.com

Technorati Tags: django, extjs, json, ajax

Powered by ScribeFire.

As per some previous posts, I like to be able to jump seamlessly between platforms. I don’t want to be tied down to anything if I can help it. This is why I wouldn’t buy an Ipod and like Mark Pilgrim, I don’t get the iphone phenomena. I want to use my application online, offline seamlessly. I want to have the same experience, no matter where I am, what I am doing etc. Software like NoMachine’s NX server give me this ability. I have a ultra-portable laptop I bought for $280 on ebay, I have Three wireless, which means I can be a passenger in a car / train / ferry / bus nearly anywhere in metro-Sydney and still have access to my Ubuntu desktop.. that’s frikkin’ cool.

But what about when I don’t have internet access? Well, I previously used Ifolder to keep all my files in sync (which uses mono btw) but ifolder has to be the worst managed open source project I have ever used. Trying to keep a client / server combination that worked together proved to be a feat for me too many times and finally I went in search of something else. I then switched over to Mindquarry (I could have just used svn with some python scripts that watched folders and syncs when it sees a change, I guess) but Mindquarry actually offers a few more features than svn or Ifolder alone ie: Tasks, timeline, wiki and teams.

So, now we have our files synchronised and I use imap, so we have mail synchronised and I have used sitebar for bookmarks for a very long time but there’s something more. What about my feeds in opera? all my vim settings? my bash_profile alias? This is where I think Conduit will be able to help me out eventually (one of the reasons I looked forward to moving to Gnome)

Now, I am really raising two separate issues here. On one hand, I am talking about syncronising two separate computers and on the other, I am talking about a seamless experience between online and offline applications. I think the first is mostly being taken care of. The second issue has some solutions becoming available also. This is where I see stuff like Google Gears, Adobe Air and db4o especially their db4o replication systemproving to show their usefulness.

Sidenote: In the Enterprise Data Centre, Lefthandnetworks has some very similar concepts happening for data virtualisation for online / offline drs solutions as db4o has for persistance – and more importanly for me, their new VMware product looks very promising for high availability + drs soutions using vmware.

So, now I bring up my original point in my posting. Let’s say we develop a desktop applications using db4o (mono bindings available) and I think we could even do that using the .Net python-like language called Boo – the developer of said language happens to also be a developer of db4o. Now, we take said winForms application and deploy it to the web using Visual WebGui. Now, I know the web purists might find this all very freakish as I haven’t done a W3C Validation on it, but I am half-certain something will be wrong and it’s not the sort of thing you are going to be delivering to blind people. I am talking about applications with a specific user base, something like a Mobile Lender, Mobile Salesperson, Microfinancing in remote areas etc.

In my post A Case for Learning Python I put forth my reasoning for deciding to spend all energy learning a language in Python – I don’t think any other language can offer the same access to so much for so little (time investment) as Python.

I will add something to the original list: Windmill is a web testing framework intended for complete automation of user interface testing, with strong test debugging capabilities and of course, it’s written in Python and uses CherryPy.

Also, in the same vein are WebUnit and Twill (both written in Python)

Technorati Tags: python, ajax, winforms, mono, django, visual webgui, mindquarry, gnome, conduit

Powered by ScribeFire.

ExtJS – an interesting javascript library with some half-decent documentation and community, as well as paid support and alternative licensing

Shortcut.js – Keyboard enable your web application – this is something that’s seriously needed. I have seen bank tellers migrate from Terminal based systems to browser based systems where they were literally forced to work at a quarter of the speed of their terminal apps because the browser forces them into hunt and peck mode. Especially for old grannies who’s eyes were starting to fail them it can become painful to watch.

Oh – totally off topic but how to kill 5000 print jobs from your LPD queue in HP-UX?

cancel -e <printer_name>

I’ll have to look for the Linux alternative because the cancel command is deprecated in Linux for standard lp commands.

Technorati Tags: javascript library, keyboard shortcuts, Extjs

Powered by ScribeFire.