Douglas Gintz on Design

10 Useful Tools for Web Developers

admin — Wed, 01 Apr 2009 19:46:50 +0000

This weekend I was cleaning up my bookmarks thinking about the tools I use most when developing on the web. Since I come from both the design and programming worlds, I think my toolbox may look a little different than some. Nevertheless, here is a list of 10 useful tools that every developer should be aware of:

1. TypeTester

The Typetester is an online application for comparison of the fonts for the screen. Its primary role is to make web designer’s life easier. As the new fonts are bundled into operating systems, the list of the common fonts are updated.

Website: http://www.typetester.org/

2. Kuler by Adobe

A web-hosted application for generating color themes allowing the user to experiment quickly with color variations and browse thousands of themes from the Kuler.

Website: http://kuler.adobe.com

3. CSS Cleaners and Code Minifiers

There are a number of free code cleaners and minifiers available. One of my favorite tools for streamlining my CSS is still CleanCSS ( http://www.cleancss.com ). For efficiency sake, it’s probably a good idea to minify your JavaScript as well. A quick Google search will reveal many solutions. There’s not one I can recommend at this time as much of it comes down to preference.

4. Firebug for Forefox

Firebug makes it simple to debug JavaScript, inspect and edit HTML & CSS on the fly, as well as monitor network activity . It’s a must-have in every developers toolbox.

website: http://getfirebug.com

5. Google Analytics

Google offers a nice way to keep track of traffic on multiple websites via their free Google Analytics dashboard. You can track where your visitors come from and how they interact with your site. Analytics provides the info you need to “write better ads, strengthen your marketing initiatives, and create higher-converting websites”.

website: https://www.google.com/analytics

6. Code Frameworks

In recent years there have been a number of very useful libraries, often called frameworks, created to simplify server-side and cross-browser programming. For JavaScript programmers, the top three are likely jQuery ( http://jquery.com ), Prototype ( http://prototypejs.org ), and MooTools ( http://www.mootools.net ). Jack Slocum, creator of a number of YUI extensions, also release EXTJS ( http://extjs.com ) which is an extremely popular and robust framework. I’ve successfully completed a couple fairly complex web applications based on EXTJS alone and highly recommend it, though there is a learning curve to getting started.

In terms of PHP frameworks, CodeIgniter ( http://codeigniter.com ) is worth a mention. There’s nothing truly remarkable in its default code base. In fact, upon close examination you’ll find it uses many of the same methods and classes that you are already employing. But what it does do is organize it into a MVC environment, encouraging re-usability and best practices.

7. Gmail

This may seem a little out of place in this type of list. However, I find Gmail indispensable not only as a means to aggregate all of my various e-mail accounts, but it allows me to access mail from any place in the world. This is important when you travel a lot or just PC hop within your office. I often help clients I host get set-up on Gmail accounts; and usually it’s love at first site (especially for me as it means a lot less troubleshooting e-mail client issues). The best part, Google offers so much free storage space that you’ll never have to delete email.

website: http://mail.google.com

8. Markup Validation Service

This is a little obvious but there comes a time in every project for a reality check. The W3C Markup Validation Service is where most go to establish the quality of their code generated.

Website: http://validator.w3.org

9. CSS Galleries

Whether you’re looking for inspiration or code help, the galleries are the place to go. Some favorites include: CSS Beauty ( http://cssbeauty.com ), CSS Mania ( http://cssmania.com ), CSS Drive( http://cssdrive.com ), CSS Reboot ( http://www.cssreboot.com ), The FWA Awards ( http://www.thefwa.com ), and The Best Web Gallery ( http://bestwebgallery.com ).

10. Other Resources

Finally, most of us learn best by doing. However, the process is always helped by having access to others who’ve already walked down that path. Blogs and forums can be big helps. But let’s not forget about books. I have a library of over 50 design and development books. Although many have grown stale, there are a few that even to this day I am able to discover something new in.

50 Inspiring CSS Galleries

admin — Mon, 30 Mar 2009 18:27:26 +0000

If you are looking for a little inspiration or would like to have others see your masterpiece, here are 50 top CSS galleries to get you started:

10 Useful Design Cheat Sheets

admin — Fri, 20 Mar 2009 04:15:45 +0000

Here are 10 very handy cheat sheets that every creative studio should have on hand:

For the Web Design Studio

For the Graphic/Media Design Studio

SM Lists 99 Essential Twitter Tools

admin — Tue, 17 Mar 2009 18:15:04 +0000

Smashing Magazine’s Paul Andrew lists what he considers to be 99 of the most essential Twitter
tools, tutorials and applications. Interesting to see so many developers scramble for relevance (or blogs, such as this one, rushing to cover online magazines, covering developers… all hoping to appear relevant

Linked Remote Comboboxes with EXTJS

admin — Wed, 11 Mar 2009 23:29:03 +0000

To created linked combo boxes with EXTJS it requires 3 steps:
1. create server-side code
2. create component
3. link combo boxes

For the server-side code I use PHP and return the data in JSON format (important: I used a specific db access wrapper found at Ultimate MySql). Of course, you will need a call for each combo.

Here’s an example of a query:

public function displayProductsForSpecificVendor($vid) { if(!$vid) return false; $sql = "SELECT p.product_id AS id, CONCAT(p.product_name,' (',p.product_code,') Price: $',p.product_price,' Size: ',p.product_size) AS productNames FROM product AS p LEFT JOIN product_to_vendor AS ptv USING(product_id) LEFT JOIN vendor AS v USING(vendor_id) WHERE ptv.vendor_id = ".$vid." AND p.active = 1 AND v.active = 1 ORDER BY productNames ASC"; if(!$this->Query($sql)){ unset($objs); $objs[]=$this->Error(); echo ‘{”Products”:’.json_encode($objs).’}'; }else{ //we have results if($this->RowCount()) { $this->MoveFirst(); while (! $this->EndOfSeek()) { $row = $this->Row(); $arr[] = $row; } echo ‘{”Products”:’.json_encode($arr).’}'; } } }

I won’t attempt to go through installing EXTJS and form creation as there are plenty of available resources online. Once you have created your form, construct the two combo box components:
//vendor choices start Ext.ux.vendorsCombo = Ext.extend(Ext.form.ComboBox, { initComponent:function() { // call parent initComponent Ext.ux.vendorsCombo .superclass.initComponent.call(this); } // end of function initComponent }); Ext.reg('vendorscombo', Ext.ux.vendorsCombo); //vendor choices eo //product choices start Ext.ux.productsCombo = Ext.extend(Ext.form.ComboBox, { initComponent:function() { // call parent initComponent Ext.ux.productsCombo.superclass.initComponent.call(this); } // end of function initComponent }); Ext.reg(productscombo, Ext.ux.productsCombo); //product choices eo

Next, insert the components into the form using their xtypes:

...form code here xtype:'fieldset', checkboxToggle:false, title: 'Vendor & Products', autoHeight:true, items:[{ xtype:'vendorscombo', fieldLabel:'Available Vendors', name: "vendor_id", hiddenName: "vendor_id", valueField: "vid", displayField: "vendorName", triggerAction: "all", typeAhead: true, anchor:'98%', allowBlank: false, store: new Ext.data.Store({ autoLoad:true, proxy: new Ext.data.HttpProxy({url: 'formManager.php?type=load_vendors'}), reader: new Ext.data.JsonReader({root: 'Vendors'}, [{name: 'vid'}, {name: 'vendorName'}]) }), emptyText:’Select a vendor…’, selectOnFocus: true, forceSelection: true, tabIndex: 1, mode: ‘remote’ …form code… xtype:’productscombo’, id: “productcombo”, fieldLabel:’Available Products’, name: “product_id”, hiddenName: “product_id”, valueField: “id”, displayField: “productNames”, triggerAction: “all”, typeAhead: false, anchor: “98%”, allowBlank: false, store: new Ext.data.Store({ autoLoad:true, proxy: new Ext.data.HttpProxy({url: ‘/formManager.php?type=load_products’}), baseParams:{vid: 0},//this parameter’s passed for HTTP request reader: new Ext.data.JsonReader({root: ‘Products’}, [{name: 'id'},{name: 'productName'}]) }), emptyText:’Select a Product…’, selectOnFocus: true, forceSelection: false, tabIndex: 2, mode: ‘remote’, editable:false }] form code continues…

The new Generation G

admin — Tue, 10 Mar 2009 16:04:09 +0000

“Generation G” is said to be a result of a confluence of two timely trends; one spawned by the current economic crisis and the other a byproduct of online collaboration. According to Trendwatching.com, the “G” stands for “generosity”. They argue that a more generous generation is emerging from the greed and excess of the day. Gen G’s response to the selfishness of society is to give, share and collaborate in new ways by utilizing the latest online tools.

Although a little overstated and “generous” in it’s praise, the report does make some interesting points and the data goes far to establishing an emerging group of more socially aware individuals. Still, I wonder how much of this will stick or is this really just another “nuke the whales” and “Free Che Guevara Fashion Tee” moment in time. After all, one of our biggest Go Green man-of-the-people cheerleaders is a former VP who over-indulges at the plate while half the wold starves, and flies from global warming rally to global warming rally on his own private polluting jet.

Read the Trendwatching.com report.

Ajax via jQuery

admin — Mon, 09 Mar 2009 17:16:28 +0000

Asynchronous JavaScript calls are made simple using jQuery. Here are just a few basics to get you started.

The basic call lookes like this:

$.ajax({ type: “GET”, url: “somefile.php” });

Let’s add some variables:

$.ajax({ type: “POST”, url: “somefile.php”, data: “id=123&action=add”, success: function(msg){ alert( “Data Saved: “+ msg ); } });

If you would like to return HTML from the server or database:

$.ajax({ url: “somefile.html”, cache: false, success: function(html){ $(“#results”).append(html); } });

Ajax calls through jQuery are automatically asynchronous (meaning multiple calls can be made before the other is completed). If you would prefer to make one at a time:

$.ajax({url: “somefile.php”, async: false });

You can apply local events to Ajax calls:

$.ajax({ url: "somefile.html", cache: false, beforeSend: function(){ // Handle the beforeSend event }, complete: function(){ // Handle the complete event } });

Or apply global events to Ajax calls. The following listens for Ajax global events:

$(“#loading”).bind(“ajaxSend”, function(){ $(this).show(); }).bind(“ajaxComplete”, function(){ $(this).hide(); });

Semi-Unobtrusive Rollovers w/ Prototype

admin — Mon, 09 Mar 2009 16:31:20 +0000

Here’s a tecnique for creating rollover button effects using Prototype. Technically speaking, these are semi-unobtrusive rollovers since they do employ the id tag on the actually element. However, this allows us flexibility in naming and pathing related to hover image.

Below is the final code and usage:

var Rollover= Class.create(); Rollover.prototype = { // provide the container id containing image links to be rolled over. initialize: function() { var source = this; $$('img').each(function(item) { source.addRollover(item,item.identify()); }); }, addRollover: function(img,newURL) { if(typeof img=="string"){ var id=img; img=null; //look up image by id if (document.getElementById) img = document.getElementById(id); else if (document.all) img=document.all[id]; //if not found then look up by name if (!img) img=document.images[id]; //else fail silently if (!img) return; } //if element found is not an img tag, fail if (img.tagName.toLowerCase() != “img”) return; //keep track of original url var sourceURL = img.src; //preload rollover image (new Image()).src = newURL; img.onmouseover = function() { img.src = newURL; } img.onmouseout = function() { img.src = sourceURL; } } } //on load event Event.observe(window, ‘load’, function() { new Rollover(’nav’); });

Usage:

JS Frameworks: jQuery Basics

admin — Sat, 07 Mar 2009 02:47:29 +0000

Web development continues to get more complicated due to the increasing number of browser iterations, along with progressive feature requirements. Fortunately there are a number of JavaScript frameworks that have popped up simplifying many of the common tasks. One of the most popular frameworks is jQuery. Here is an overview of how it is used.

Since you’ll be manipulating the document (Document Object Model or “DOM”), we’ll need to wait until the page is fully loaded before executing our code. So we start by creating a statement to that affect:

$(document).ready(function(){ //code goes here });

The nice thing about jQuery is there are many shortcuts. For example, instead of writing it out as we did above, we could simply write:

$(function(){ //code goes here });

jQuery is handy for dynamically applying CSS to elements. For example, say a user clicks on a link and you would then like to provide feedback. You can do so by adding a little style to catch their attention.

First, create the CSS:

Now, we can apply it when then specific event occurs:

$(function(){ $("a").click(function(){ $("#results").addClass("warning"); }); });

Unfortunately, clicking a link will cause the browser to navigate away from the page before the warning could be displayed. jQuery offers an easy solution to prevent this from occurring:

$(function(){ $("a").click(function(event){ event.preventDefault(); $("#results").addClass("warning"); }); });

Notice how we passed the event as an argument. Now this is all fine and dandy but what good is a warning without an explanation? So let’s add some text within the results div:

$(function(){ $("a").click(function(event){ event.preventDefault(); $("#results").addClass("warning").html("Warning! You clicked a link!"); }); });

In the sample above it is assumed that you have already defined the CSS required in advance. But jQuery also allows for creating CSS on the fly:

$(function(){ $("a").click(function(event){ event.preventDefault(); $("#results").css("padding","8px").css("border","red 1px solid").html("Warning! You clicked a link!"); }); });

Notice that jQuery allows you to chain events like we did above by passing around the actual query object to be acted on. Its’ this OOP approach that makes it a popular and versatile framework.

eCertificates to the rescue!

admin — Sun, 15 Feb 2009 04:29:38 +0000

If you haven’t heard, the US government is now requiring businesses to provide documentation certifying product safety or face severe fines. This wide-reaching legislation includes such things as toys, furniture, apparel and even some forms of drug packaging. In response to the recent laws, we’ve launched a new business geared toward to providing relief to manufacturers and importers (many of which are my clients). On Friday we released the first full-featured Test Report and General Certificate of Conformity software.

This web-based software, http://eCertificates.org, is designed for Manufacturers and Importers to easily create, organize GCCs & Test Reports and distribute to Retailers in compliance with the new CPSIA electronic certification rules. In addition, retailers/resellers can sign-up for free accounts that allow them to search, receive and archive documents online.

Other features include the ability to associate products with required testing, look up expiration dates, track costs, as well upload or link to existing test reports. Every manufacturer account also comes with a branded search page and personalized document links. This allows you create and post all of your documents online and either provide individual URLs or your personalized search page to government agencies and retailers/resellers.

Pricing: We’re so confident about our service that we’re encouraging companies to start with a FREE account. Users can then decide to continue with the free account, upgrade, or cancel at any time (details listed on website). If you’re in need of this service or know someone who is, please spread the word and send them to http://eCertificates.org.