Log

How to fix browser file caching without a new filename

April 15th, 2010

Problem

You have probably run into this problem many times.  Your client gives you a new file to replace the old one.  You say OK, and post the new file and let your client know.  They say it’s  not changed and you swear it has, you check and it has so you let them know to try again and they and you are suprised that now it works even though you haven’t made a change.  You realize the browser has cached the old version but you just suck it up and go on with your life till it happens again.  This is very common with large assets like PDF files, Flash files and large images. Also it happens a lot in web applications that replace images.

Solution

Put a query string on the file name.  By convention I will have a filename like  specifications.pdf  and I will just put specificaitons.pdf?v=2 at the end of the href.  It doesn’t affect the filename when downloaded but does tell the browser that it is a new file.    It’s much nicer than putting these version or dates into the actual filename unless that is required of you, which keeps the filename nice and simple.

For web applications that change files and display them like an image cropper for example, a great way is to append a datetime on the end of the newly uploaded file.    So that would be filename.jpg?2010-11-30-11:10:23 or what ever format you prefer. This can be accomplished server or client side, so what ever option you prefer.

Tags: , ,
Posted in html | No Comments »

Replacing .clearfix with overflow:auto/hidden

March 1st, 2009

There has been many ways over the years to give the height back to the background of a container around floating elements.

First Version

This was the first method I spotted years back. This method which left a 1px gap at the end and other unwanted problems.

1
2
3
4
5
<!--
.clear {
    clear: both;
}
-->
1
2
3
4
5
<div id="container">
    <div id="left"><!-- Left Content --></div>
    <div id="main"><!-- Right content --></div>
    <div ="clear"></div>
</div>

Second version

The next one replaced the extra HTML for a CSS class which added the content in after the divs through the CSS. The CSS hacks essentially fix all the problems with the above version and some.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!--
.clearfix:after {
    content: ".";  /* Adds content to show the containing box where to end it's rendering */
    display: block;
    height: 0; /* Prevents the content from adding any more height to it's parent */
    clear: both; /* keeps this content under the floating elements */
    visibility: hidden;
}

.clearfix { display: inline-block; }

/* Hides from IE-mac \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* End hide from IE-mac */
-->
1
2
3
4
<div id="container" class="clearfix">
    <div id="left"><!-- Left Content --></div>
    <div id="main"><!-- Right content --></div>
</div>

Latest

This removes most of the hacks. Makes a cleaner CSS and markup and seems to suit me well.

1
2
3
4
5
6
7
8
9
10
11
<!--
#container {
    overflow: auto; /*  if this element has padding user overflow: hidden; */
}

/* IE6 stylesheet needs hasLayout turned on */
#container {
    zoom: 1;
}

-->
1
2
3
4
<div id="container" class="clearfix">
    <div id="left"><!-- Left Content --></div>
    <div id="main"><!-- Right content --></div>
</div>

Further information

Info on hasLayout
http://www.satzansatz.de/cssd/onhavinglayout.html
4 years ago sitepoint posted this:
http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/

If you find one nicer, please let me know in the comments. Or if you have a case where this doesn’t work. Send me some sample code.

Tags: , , ,
Posted in css, html | No Comments »

Unibody Macbook Pro Boot Camp Drivers

February 22nd, 2009

I haven’t seen any update from Apple for the new aluminum unibody Macbook Pro drivers for Boot Camp. Justin and I spent countless hours and 3+ Win XP/Boot Camp installs to finally get the drivers to work.

The drivers that boot camp provides on your OS X DVD don’t work with the new Aluminium unibody Macbook Pros, don’t install them!!!

Steps to success

  • Grab these drivers from Timur: Download Drivers
  • For bootcamp we did a 32Gig FAT, full (slow) formatting.
  • On the fresh install don’t let windows try to find your drivers for you. If it asks just hit cancel.
  • If your network connection isn’t working(very possible).
    • You can boot back into the mac (hold down option when the gray screen and sound plays for 10 secs)
    • Drag those unzipped boot camp drivers on to the drive that says ‘No Name’. Preferably onto your C:\Documents and Settings\Administrator\Desktop or which ever user you are logging in as for Windows so you can spot it.
    • Reboot, (remember hold option for 10sec when gray screen appears), login and install those new drivers.
  • After your drivers have been installed you may upgrade and patch windows like mad:)

Tags: , , ,
Posted in Software | 2 Comments »

Dreamweaver Find/Replace Custom File Extensions

February 18th, 2009

First off, Adobe Dreamweaver’s find/replace is fantastic. That and it’s integration with WinMerge are the only two reasons I still use it on occasion. Otherwise I am trying to learn Vim or hanging out in Textmate.

Problem

Ok I have been noticing for a while now that when I search that it would never look in files with custom extensions. For example, SilverStripe‘s .ss files and someone at work’s .inc files at work.

Background

I thought as I am sure many of you have tried that maybe adding that .ss file to the code view file types like in the image below.

File Types Dialog - Dreamweaver Prefs

Our Director of Systems & Technology, Alex at work ran into this same problem so I though I would post it to their forum as there was no reference in the forum of such a problem. I spotted a TechNote page that wasn’t a direct answer to the problem but had an example that looked promising.

Solution

The file I noticed was on the TechNote was called Extensions.txt. Here is what the first line looked like.

1
HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,JAVA,EDML,MASTER:All Documents

I thought maybe if I just add the extension there someplace in CAPS the find/replace would start picking up those files and sure enough it did.

1
SS,HTM,HTML,SHTM,SHTML,HTA,HTC,XHTML,STM,SSI,JS,AS,ASC,ASR,XML,XSL,XSD,DTD,XSLT,RSS,RDF,LBI,DWT,ASP,ASA,ASPX,ASCX,ASMX,CONFIG,CS,CSS,CFM,CFML,CFC,TLD,TXT,PHP,PHP3,PHP4,PHP5,JSP,WML,TPL,LASSO,JSF,VB,VBS,VTM,VTML,INC,JAVA,EDML,MASTER:All Documents

Hope that helps.

Here is a list from that help page on where you will find the Extensions.txt

  • Dreamweaver CS3 on Windows Vista:

    C:Users[username]AppDataRoamingAdobeDreamweaver 9Configuration
  • Dreamweaver 8 on Windows Vista:

    C:Users[username]AppDataRoamingMacromediaDreamweaver 8Configuration
    • Dreamweaver CS3 on Windows XP:

      C:Documents and Settings[username]Application DataAdobeDreamweaver 9Configuration
    • Dreamweaver 8 on Windows XP & 2000:

      C:Documents and Settings[username]Application DataMacromediaDreamweaver 8Configuration
    • Dreamweaver CS3 on Mac OS X:

      Mac HD:Users:[username]:Library:Application Support:Adobe:Dreamweaver 9:Configuration
    • Dreamweaver 8 on Mac OS X:

      Mac HD:Users:[username]:Library:Application Support:Macromedia:Dreamweaver 8:Configuration

Tags: , , , ,
Posted in Editors | 2 Comments »