Blog

Archive for the ‘Web Development’ Category

How to Create Books in Coda

Thursday, November 5th, 2009

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

More information on adding books to Coda:

Related Post: How to export or save sites in coda

5 ways to optimize the performance and speed of your website

Thursday, August 20th, 2009

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/

How to get PHP errors to show up in MAMP

Saturday, June 6th, 2009

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.

Why min-width and maximum-width hacks blow up in IE6

Thursday, May 14th, 2009

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 and Wireframe Stencil Graphics Freebies

Wednesday, December 3rd, 2008
Web Browser Elements

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/

Linking to Google’s Hosted jQuery Repository

Sunday, November 30th, 2008

jQuery Hosted on Google:

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

<script src="http://code.jquery.com/jquery-latest.js"></script>

If you want to target a particular version of jquery:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

Google link to jQuery:

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

Jquery CDNs

Go to http://docs.jquery.com/Downloading_jQuery for a list of CDNs

 

Updated: 6/14/11 12:22pm

How to Export or Save Coda Sites

Thursday, October 23rd, 2008

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:

December 2011 Update:

  1. “For Lion, the Library folder is hidden. To get do it, go to Finder, then at the top menu: Go -> Go to Folder… , and type in: ~/Library”
  2. Then look under: Preferences/com.panic.Coda.plist

May 2012 Update advice by commenter Johnathan:

“in order to not have to reenter all passwords.. You’ll need to copy over the keychain aswell.. You will find it at the same place (the library folder) but in a folder called “keychains”. You don’t need the one with “meta” in its name.”

“you will come to a hidden folder within your users folder (NOT the libraryfolder which also happens to contain a preferences folder”

So make sure that you are looking under the Library folder that is within your Home folder: 

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

Thanks everyone for your comments and help with this topic! I have updated the instructions with your inputs!

Forcing Internet Explorer to obey css using Javascript, CSS hacks and specific style sheets

Saturday, September 27th, 2008

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…)

How to generate a favicon icon for IE7 and gecko browsers

Saturday, May 31st, 2008

Recently I had an issue trying to get a certain favicon to show up in IE7. It turns out the favicon.ico file I was using was not valid! Now I can’t remember where I generated it from, there are a number of sites out there. So here’s the steps you need to take to create a working favicon in ie7 and other modern browsers.

To set up a favicon on your site:

  1. Create a 32pxX32px or 16pxX16px gif of the image you want (I usually go with 16). Favicons usually work best if they are squared-out.
  2. Next go to http://www.chami.com/html-kit/services/favicon/ ( or any other site, but I find this one created the valid one I needed to get it working in ie7)
  3. Next add this line of code inside the <head> tag of your site:
    <link href=”http://your-website/images/favicon.ico” rel=”icon” type=”image/x-icon” />
    <link href=”http://your-website.com/images/favicon.ico” rel=”shortcut icon” type=”image/x-icon” />
  4. Next you will want to validate your icon here: http://www.html-kit.com/favicon/validator/
  5. Be sure that if your updating an icon or replacing one that you clear your cache: Clearing ie7 cache instructions found here: http://help.isu.edu/index.php?action=knowledgebase&catid=38&subcatid=64&docid=1015

Useful CSS2 and CSS3 Selectors and Psudeo Classes

Wednesday, April 23rd, 2008

I put together a list of some nice css selectors.

More Browsers are starting to support CSS3.

Multiple background images for one element

  1. .box {
  2. background-image: url("top-left.gif"), url("top-right.gif"), url("bottom-left.gif"), url"(bottom-right.gif");
  3. background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  4. background-position: top left, top right, bottom left, bottom right;
  5. }

Source: 24 ways

Media Querie

This Media Query expresses that the style sheet is usable on devices with viewport (the part of the screen/paper where the document is rendered) widths between 400 and 700 pixels:”

  1. @media screen and (min-width: 400px) and (max-width: 700px) {
  2. property:value;
  3. }

This Media Query expresses that style sheet is usable on screen and handheld devices if the width of the viewport is greater than 20em.

  1. @media handheld and (min-width: 20em) {
  2. property:value;
  3. }

Source: wc3

Sibling Selectors

Sibling Selectors will make it easy to style elements without having to add so much markup. Extra divs would not no longer necessary.

Child Selector (CSS2)

Matches all li’s that are immediate children of the ul.

  1. ul>li {
    property:value;
    }

Adjacent Sibling Selector(CSS2)

This example targets the p when h2 is an adjacent sibling.

  1. h2+p {
    property:value;
    }

General Sibling Selector (CSS3)

This example will match a p element if it’s a sibling of an h2 element

  1. h2~p {
    ⋮ property:value;
    }

Pseudo Elements

Some of these are really cool, it’s more posssible to target almost any element without using classes or wrappers.

  1. :first-letter
    represents the first character of the first line of text within an element

  2. :first-line

    represents the first formatted line of text

  3. :before

    specifies content to be inserted before another element

  4. :after

    specifies content to be inserted after another element

  5. ::selection

    represents a part of the document that’s been highlighted by the user

Psuedo Classes

  1. :nth-child(N)
    matches elements on the basis of their positions within a parent element’s list of child elements

  2. :nth-last-child(N)

    matches elements on the basis of their positions within a parent element’s list of child elements

  3. :nth-of-type(N)

    matches elements on the basis of their positions within a parent element’s list of child elements of the same type

  4. :nth-last-of-type(N)

    matches elements on the basis of their positions within a parent element’s list of child elements of the same type

  5. :last-child

    matches an element that’s the last child element of its parent element

  6. :first-of-type

    matches the first child element of the specified element type

  7. :last-of-type

    matches the last child element of the specified element type

  8. :o nly-child

    matches an element if it’s the only child element of its parent

  9. :o nly-of-type

    matches an element that’s the only child element of its type

  10. :root

    matches the element that’s the root element of the document

  11. :empty

    matches elements that have no children

  12. :target

    matches an element that’s the target of a fragment identifier in the document’s URI

  13. :enabled

    matches user interface elements that are enabled

  14. :disabled

    matches user interface elements that are disabled

  15. :checked
    Pseudo-class
    matches elements like checkboxes or radio buttons that are checked

  16. :not(S)

    matches elements that aren’t matched by the specified selector

Source: Sitepoint

10 Books for the Web Professional

Monday, April 7th, 2008

I created a list of the best web design, development, and management books out there. No particular order of importance was assigned to these. I own all of these except Jason Beard’s Principles of Beautiful Web Design. His book is more for developer’s looking for help on aesthetics of websites. Anyone working freelance, I highly recommend Freelance Switch’s How to be a Rockstar Freelancer. As for CSS, nothing compares to CSS Mastery. Site Point’s Ultimate CSS Reference is a handy book to have for any web development team.

  1. CSS Mastery (February 2006)
  2. The Principles Of Project Management (March 2008)
  3. Communicating Design: Developing Web Site Documentation for Design and Planning (September 2006)
  4. The Principles of Beautiful Web Design (March 2007)
  5. The Ultimate CSS Reference (February 2008)
  6. How to be a Rockstar Freelancer (February 2008)
  7. DOM Scripting (September 2005)
  8. Web Design and Marketing Solutions for Business Websites (August 2007)
  9. Web Standards Creativity (March 2007)
  10. Transcending CSS: The Fine Art of Web Design (November 2006)

Internet Explorer 8 Beta

Sunday, March 16th, 2008

As many of you may have heard, Microsoft has been hard at work trying to give what the web designers and developers have been asking for; a standards compliant browser. It looks like IE8 is going to be released sooner than anyone has expected. A lot of us are excited about this. I found out recently that Microsoft has released a beta version for web designers and developers to test out. Visit the Internet explorer 8 beta download page.