On The Rocks

Image Loading & Fading

Crisp photography is a sure-fire way to make a site look great, but what about the loading times of those chunky images? Give your users a nice animated loading icon, and fade the image in when it’s loaded. It’s a nice effect with little overhead.

Dynamic Data Tables

HTML tables are so last century. ActiveWidgets provide a dynamic data table library, allowing users to sort data by columns and highlight rows of interest. It is, however, a large overhead and not suitable for large amounts of data.

Calendar / Date Selection

Asking users to enter a valid date can be a pain - frustrating for the developer, and frustrating for the user. Offer them a simple GUI to select dates with this very customizable script.

Tabbed RollBar

Tabs are great for sorting short snippets of information. Tabs without reloading the page are even better. Tabs with a rolling animation effect too? Well, that’s just killer.

Draggable Windows

These draggable windows are lightweight and efficient, and are perfect for intranets and web-based applications where multiple views are required simultaneously. And don’t worry, you needn’t have the Windows 95 look either.

Zoomable Image Thumbnails

One subject, many photos? These tidy thumbnail displays are just the ticket, allowing visitors to blow up photographs of interest. Similar to those found on eBay and such, but not as heavy on the code.

Javascript Lightbox

A favourite little effect of mine found on many good sites these days - the Javascript Lightbox. Enlarge photographs with slick animation and easy-to-use navigation. Put a smile on the CEOs face and wow the marketing team ready for your “afternoon meeting” down the pub.

Drag & Drop Shopping Cart

Get your visitors from Google Search to card payment in ninja time, with a drag-and-drop shopping cart. Reducing page loads, form elements and complicated menu screens increases sales and repeat business. But with mission-critical code like this, make sure to test it on every platform before it goes live. You know this. I was just reminding you.

Form Input Autocomplete

No one likes a smartass, unless they’re doing your homework for lunch money. Let this script do your users’ hard work so they don’t have to - autocomplete from a selection of known data. Great for street addresses (if you have the data), category selection, search engines, tagging and everything inbetween.

Drag & Drop Sortable Elements

Nothing says “I love you, user” more than drag-and-drop items. Remember the days of an “order” column, and wanting to insert an item at the top? Nightmare no more! Slick interface with a very practical purpose.

Javascript Logging & Debugging

“PC Load Letter?! What the hell is PC Load Letter!!” cries from the office. Meaningless error messages are enough to drive a man crazy, so why not step up your debugging skills and hunt those bugs in style?

Font Resize Detection

After spending days getting your web site pixel perfect, inconsiderate users will always resize your text and ruin your layout. Well okay, they need to because their eyesight can’t comprehend your 6pt type. Which means you need to support different font sizes without ruining your layout.

Displaying Points & Text On Maps

If your data is geolocation based, it looks great on a map with clickable points. But how do you make that interface accessable to everyone? A List Apart shows you how.

Photo Album & Slideshow

A more advanced way of displaying your pictures - let users sort them by category, view random pictures, and even set up a personal slideshow. Probably more suitable for family pictures than commercial uses, but I’ve found it handy over the years.

Sliding Content Areas

And finally another slick animation for your site, without the overhead of Scriptaculous, create “Digg-style sliding comment boxes” for popup information.

Kirupa.com is a web site with a lot of resources for web developers.

This website belongs to the San Diego Ruby users group, and it gives a lot of videos with Ruby Tutorials.

Here is the last video.

A list of useful resources for web developers.

www.devlisting.com

Take a look on the net and you’ll see endless pages of AJAX Frameworks: libraries which promise to do all the trivial and dirty AJAX work for you, leaving you free to code without actually understanding how the application you’re writing really works. So lets pull back the smoke and mirrors and see what AJAX is and why it’s just a simple evolution of client/server tricks Javascript programmers have been doing since the web was born.

AJAX for n00bs

JavaScript - Table of Contents

Check this awsome javascript website

Cada vez que queremos fazer debug ao processo “aspnet_wp.exe” temos que fazer o seguintes passos:

Para fazer isto num só passo fazemos o seguinte:

Primeiro criamos uma macro :

Na janela Macro Explorer( ALT + F8 ) carregamos com o botão direito do rato em MyMacros e seleccionamos “New Module”. Damos um nome ao modulo, eu utilizei VSDebugger.
Carregamos com o botão direito no novo modulo, no meu caso no VSDebugger, e seleccionamos “New macro”.
Mudamos o nome da macro para algo que faça mais sentido com por exemplo “AttachTo_ASPNETWP”.
Alterem a macro adicionada por defeito por este codigo.


' Esta rotina vai fazer o Attach do processo aspnet_wp
Sub AttachTo_ASPNETWP()
Dim attached As Boolean = False
Dim proc As EnvDTE.Process
Dim processToAttachTo As String

Segundo criamos um atalho do teclado

No Visual Studio, abrimos o menu de opções (Tools | Options).
Seleccionamos “Keyboard” que esta debaixo da categoria “Environment”
Na caixa de texto “Show commands containing”, escrevemos “VSDebugger” (ou o nome que escolhram para o modulo) para pesquisar o comando na lista .
Coloquem o cursor em “Press Shortcut keys” e escrevam a combinação de teclas que querem para dispararem a macro criada.
Como podem ver na figura abaixo, eu utilizei o comando de dois passos. Carregei em CTRL+SHIFT+P, libertei, e de seguida carreguei em A. Utilizei este atalho para ser mais facil de decorar, a primeira parte está relacionada com [P]rocesso e a segunda é para fazer o [A]ttach do processo.

Assim sempre que queiram fazer debug ao processo “aspnet_wp”, basta carregar em CTRL+SHIFT+P e A.

Pesquisa directa nas API. Selecciona-se a(s) API(s) pretendidas(s) e depois é só procurar.

1. Object code caching
Each time a request comes to your server for a php script, it has to go through the compiler and then execute the object code. If this is cached, the 1st step is skipped and you end up with a faster and more responsive script.

There are many object code caching packages available on the Internet (some free, some commercial):

A) Ioncube: http://www.ioncube.com/

B) Zend Encoder: http://www.zend.com/products/zend_safeguard

C) Turckl MMCache: http://freshmeat.net/projects/turck-mmcache/

2. Template systems
Template systems provide a different type of caching. Content caching. Template systems work well in a situation where there is static data on one or many of your pages that doesn’t have to be reloaded. Caching systems also provide a separation of code and html, which will not only improve completion time of the overall project, but make it easier for future improvments. Most template systems for php are available for free:

A) Smarty Templates: http://smarty.php.net/

B) Pear Templates: http://pear.php.net/package/html_template_it/redirected

C) PHP savant: http://phpsavant.com/yawiki/

3. Distributed object caching systems

The most widely used system of this type is memcached (http://www.danga.com/memcached/).

This type of system makes your overall site faster by caching the majority of your database data into a large memory pool.

an interesting excerpt from their site:

“Danga Interactive developed memcached to enhance the speed of LiveJournal.com, a site which was already doing 20 million+ dynamic page views per day for 1 million users with a bunch of webservers and a bunch of database servers. memcached dropped the database load to almost nothing, yielding faster page load times for users, better resource utilization, and faster access to the databases on a memcache miss.”

4. PHP variables that can be set

variables_order = ‘GPC’
register_argc_argv = ‘Off’
register_globals = ‘Off’ (this is a good idea to keep off for security purposes as well)
always_populate_raw_post_data = ‘Off’
magic_quotes_gpc = ‘Off’


Disable Error Logging. This is a good idea to keep on when you are developing your scripts, but it has been known to decrease overall performance.

Use IP address to access your database. Although this is sometimes not possible, you will get a slight boost in lookup speed if the IP address is used to access your database rather than its hostname.

5. Output Compression
Almost all browsers these days support something called gzip compression. Gzip compression can decrease the overall size of your output by up to 80%, but with a tradeoff: cpu usage will go up by around 10%. The benefit of using this compression type is the fact that not only will your bandwidth be decreased, but your pages will load faster.

enabling it in php (add the following lines to php.ini):

zlib.output_compression = On
zlib.output_compression_level = (level) (where level is 1-9. Youy may want to try different values to see what is best for your system).

if you are using apache, you can also enable the mod_gzip module. It is highly configurable, with the ability to modify output based on MIME types, files, or browser settings.

6. Other things that may help
when using a database, only retrieve the data that you are actually going to use. This may sound like a no-brainer, but I have often times worked on projects where the original programmer used (select * from mytable) when they could have used (select fieldIneed from mytable).