Breaking CSS Cache

I built a simple web interface for SolarWinds Orion. I recently converted all the status images that used to be individual files into a CSS sprite to save on HTTP requests. Now instead of grabbing all the stats light graphics one by one the browser only needs to download my sprite image once.

After implementign the change most of my users reported losing the devices status images and just seeing the text in the the status column. Text that due to my CSS changes should be pushed off the edge of the page and not be visable.

It turns out the problem was related to browser caching I recently implemented that caused CSS files to be cached in the browser for a month.

The fix is rather easy I simply need to make the broswer think the CSS file it has in its cache is no longer valid. Changin the name of the file will occomplish this but we don’t want to have to rename all our CSS files.

The v=1 at the end of the filename does just want we wanted, the broswer will now think overrides.css is a new file. This is a variable and with CSS is simply ignored, Now whenever we make changes we can simply increment this file up by one. Browsers will think its a diffrent file and download the new content.

Our Users will now see the changes we made to the CSS in our overrides.css file.

No tips yet.
Be the first to tip!

Like this post? Tip with bitcoin!

1PJ2Co8G5ttKPy4h3iawk9p2bQZa1cjZMr

If you enjoyed reading this post, please consider tipping me using Bitcoin. Each post gets its own unique Bitcoin address so by tipping you're not only making my continued efforts possible but telling me what you liked.

Flickr Photostream In WordPress

flickr-logoPerhaps you noticed in the top right of the page I’ve added my flickr photos. This is auto-updating, as soon as I upload new images to flickr they appear here on my site as well. And its super easy.
flickrstep1

First head over to http://www.flickr.com/badge.gne, We are going to use the HTML Badge for this. On the next step we have a few options about the type of content you’d like to display. You can choose to display all of your public photos and video or perhaps just your content with a specific tag associated with it. You can even limit it to only display content within a specific flickr set. You even have the option to display all public content from everyones uploads, and yes you can specify specific tags for this as well.

To get the layout I use, select not to display your portrait, leave the number of images to display at 3 (4 isn’t an option we will override this in the next step anyway). Choose to display your most recent images, (or you can opt to display random images) Select Square for the size and for orientation select None (Because you want to style it yourself).

flickrstep5Go ahead and skip the Colors step because we are going to style this ourselves with a bit of CSS. Don’t worry what it looks like at this step, in fact we only care about one thing on the next step, the bit of code I highlighted in the image. However we need to change this code just a bit to load 4 images instead of 3 and to make the code Valid. First lets replace all the & with & and then we need to adjust count=3 to count=4 your end code will look somewhat like this (This will pull MY 4 images not yours be sure to get the code from the flickr page to pull your images).

appearance_widgetsNow that we have the little bit of code we need, lets get it ready to place in the WordPress sidebar. WordPress Widgets are also known as “sidebar accessories” which are WordPress Plugins or add-ons to your WordPress blog sidebar. Developed by Automattic for WordPress and WordPress.com blogs, WordPress Widgets allow the easy addition of design elements, gadgets, content, images, and more to your WordPress sidebar to personalize your blog without knowing HTML, PHP, or any code. Many WordPress Plugins now come with a Widget version to allow easy addition to the sidebar. One Widget type is Text which allows us to input our own HTML or Plane text, We are going to use this Widget type.



appearance_widgetseditor2Now that we have the Basic code put together, we need to style it, so we need to add some CSS to the WordPress CSS file, Don’t worry its not as hard as you think, WordPress has a built in editor for doing this. (The following Instruction’s assume your running the latest and greatest Version of WordPress, If your not UPGRADE! if you don’t know how, Use the Contact link at the top of the page or leave a comment to get ahold of me, I offer WordPress Upgrades as a service, contact me for more details)

Select Appearance from the Left Sidebar, then select Editor, okay we are going to edit the Style-Sheet at the bottom. Once the editor is up scroll all the way to the bottom and Paste the following code in.

#flickr {
width:165px;
height:150px;
margin-left:12px;
}
#flickr a img {
float:left;
margin:0 0px 8px 8px;
background:#3f4e4e;
padding:4px;
width:62px;
height:62px;
}

No tips yet.
Be the first to tip!

Like this post? Tip with bitcoin!

12KaHGyJ8gN2wWF9BHZfJSWLH3zCfp1vGo

If you enjoyed reading this post, please consider tipping me using Bitcoin. Each post gets its own unique Bitcoin address so by tipping you're not only making my continued efforts possible but telling me what you liked.