MHunt Design Freelance Web Solutions

My latest delicious bookmarks related to web design, development, drupal, wordpress, seo, freelance, design, typography, css, jquery and the list goes on…

• Comparison of Rotator / Slider modules | drupal.org -
• Ebizon RedFire | drupal.org -
• 24 Stunning Free Drupal Themes! | Top Free Drupal Templates | Blogging Tips -
• * Improve Search Ranking With Google Analytics Advanced Segments : Blogthority -
• Socialite – All your social networks in one application -

Coda allows you to add reference books under the ‘Books’ tab.

More information on adding books to Coda:

• Adding more coda books tutorial
• Google Groups: Coda Book Cover Template
• Adding Sitepoint Reference Books to Coda

Related Post: How to export or save sites in coda

1. Improve your performance with YSlow

http://developer.yahoo.com/yslow/

Yslow grades the performance of your site based on 3 rulesets. The criteria includes http requests, gzip compression, javascript placement at bottom, css expressions, dns lookups, minifying css and javascript, url redirects, 404 errors and more.
With Yslow you can figure out what is holding up the page from loading up fast. I typically check under components to see if there are any 404s for files called.

2. Compress Images with Smushit

http://developer.yahoo.com/yslow/smushit/

Compress images even further than saving for web in photoshop with Smushit.

3. Place Javascript at the bottom of your html document

Javascript calls at the bottom allow the page to load without having to wait until the javascript is loaded.

4. Compress CSS and JS Files

http://www.cssoptimiser.com/

http://www.cleancss.com/

http://javascriptcompressor.com/

5. Use CSS Sprites

The concept of css sprites is to combine multiple images into one and using background-position in your css to display only certain images.

See How to use CSS Sprites: http://css-tricks.com/css-sprites/

Video: Exactly How to use CSS Sprites: http://net.tutsplus.com/videos/screencasts/exactly-how-to-use-css-sprites/

Dave Shea explains CSS Sprites: http://www.mezzoblue.com/archives/2009/01/27/sprite_optim/

If your installation of MAMP does not show php errors, you may need to change a setting in your php.ini file. You can find this file in MAMP > conf > php5 > php.ini

Look for “display_errors = Off” and change to “display_errors = On”

After that you should restart your apache and mysql servers.

There are many hacks for ie6 to get the css properties min-width and maximum-width to work. Granted these hacks work. But what I can’t seem to find is a solution that doesn’t freeze the browser when you try to resize it.  It’s been years and the problem sis still present. It doesn’t matter if you follow these instructions: “This important step is frequently omitted from many min/max-width tutorials, and is required to prevent Internet Explorer from freezing up and crashing.” – Perishable Press It will still crash when you follow those instructions and try to resize the window by stretching it.

Granted windows users are used to full screen, but its not always acceptable to have that instability.

Some Examples of these ie6 min-max hacks:

A Javascript Solution:

window.onload = checkAvailableWidth;
window.onresize = checkAvailableWidth;
function checkAvailableWidth(){
var container = document.getElementById("page");
container.style.width = (document.body.clientWidth < 959)? "959px" : "auto";
}
 

http://robertnyman.com/2007/11/13/stop-using-poor-performance-css-expressions-use-javascript-instead/

CSS Expressions:

The more common hack fom Andy Budd’s CSS mastery: http://www.cameronmoll.com/archives/000892.html

#container, #footer {
	width: expression(document.body.clientWidth < 742? "740px" : document.body.clientWidth > 1202? "1200px" : "auto");
	}

Web Browser Elements, image courtesy of Designer Toolbox.com

I found some freebies on the web- browser graphics or elements for wire frames or web design comps.

Form elements for all browsers and operating systems: http://www.designerstoolbox.com/designresources/elements/

Vectortuts Freebie Vector Chrome for firefox on mac: http://vectortuts.com/articles/news/vectortuts-freebie-vector-pack-browser-screens-and-website-elements/

OmniGraffle Stencils: http://www.graffletopia.com/

Yahoo Developer Stencil Kit: http://developer.yahoo.com/ypatterns/wireframes/

Related articles [Updated 12-23-08]:

http://piksels.com/photoshop-browser-templates/

http://patterntap.com/

jQuery Hosted on Google:

Here’s the code to link to Google’s jQuery repository. It grabs the latest jquery.

Update: jQuery source is now hosted on Google.

• Google link to jQuery:

• <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>

• <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>

You can go here http://code.google.com/p/jqueryjs/downloads/list for the download list and right-click copy-link location.

Dean Edwards IE7 Script

Also added before that is the ie7.js script. The idea here is to speed up the load time if the user has already cached this file from another site using the same technique.

<!–[if lt IE 7]>
• <script src=“http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE7.js” type=“text/javascript”></script>
• <![endif]–>

Where is Coda Site Information Stored?

Coda currently does not have a way to export or save sites like you can using Transmit. But there is a way to save your coda site settings if you need to migrate your site data from one computer to another. You  will need to save a file from your preferences folder.

Save the Coda.plist file:

~/Library/Preferences/com.panic.Coda.plist
~/ = Your Mac UserName

This info was originally found at: Google Groups | Coda User

I know all of this has been written before, but this post has the best of the best in combating the ie6 and ie7 css issues.

Hate IE6?

I found an article that explains that this line of code can crash ie6:

< style >*{position:relative}< /style >< table >< input >< /table >

I have not tried this out. But I have one question: What in the hell was this guy doing to discover this? Either some really bad code or his page was fragmented some how.

How can I make IE6 behave like a normal Browser?

Enter Dean Edward’s IE7.js

This lightweight javascript library forces internet explorer 6 to accept a number of css selectors that standards-compliant browser allow.

(more…)

So I have been building this large list of jQuery links for sometime now and it will continue to be updated on my urls section. But here it is:

JQuery Plugins and Tutorials:

• Apple Style Slider Gallery
• Coda Slider
• Flash-like Image Gallery
• Image Cross Fade Transition
• jFlow Content Slider
• jQuery Accessible News Slider
• jQuery Easing plugin
• Jquery Fancy Zoom
• Jquery for Designers
• jQuery Image Hover
• jQuery Image Slider
• Jquery Slide Show Cycle
• Learn jQuery Plugins
• Popup Bubbles
• Slide Out Accordion Effect
• Superfish Drop Downs
• Thick Box