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.

iPhone, iPod Touch 1.1.3 Web Clips

So if you’ve installed the new 1.1.3 on your iPhone, you’ve more than likely already noticed all the new goodies Apple has given us for the new year. One of my favorites is the ability to have the phone triangulate my current location using cell phone towers. While this sometimes gives you an area of roughly a one mile radius, this is still close enough to get basic directions. I use this feature almost every day.

Now on to the Web clips.

A web clip is a bookmark to a site. Not only just to the site though, this bookmark also remembers where on that page you were looking, as well as the zoom level.

Why post about such a simple feature? Today’s post is partly for the developers out there.

Ever wonder why some pages have a small screen shot of the site as the web clip icon while others have the site logo? It’s all because of a little file named apple-touch-icon.png.

For example, if you go to the following link here you’ll see blog.kaotickreation.com’s current webclip icon, which as of this writing is the same as the icon to the left. I may change it in the future but for now that’s it. And you’ll see the icon to the left when you add a web clip to your home screen.

Safari on the iPhone checks for the existence of this file. If it exist it downloads this file and uses it as the icon. If it doesn’t exist, it scales down a screen shot of the page and uses it for the icon.

In order to set up your own icon, simply create yourself a 57×57 pixel image. Be sure to leave room on the corners as the final image will have rounded corners. Also leave 1-2 pixels around the edges free for clipping caused by the gloss effect applied to your logo.

That’s right. You don’t have to apply the gloss effect to make it look like other icons. It’s done automatically. Then simply toss this file alongside your index.html (or .php) file in the root of the web file system.

So for all of you out there that want your own custom web clip, get going and create your clip. You can have it done and in place in 5 minutes. Or I can do one for you for a small fee. Leave a comment below with your email address and I’ll get right back to you.
Till next time

//Brandon Leon

No tips yet.
Be the first to tip!

Like this post? Tip with bitcoin!

1NNRXFP4yXHGkKAzBnrnNstNPceLrY3q3W

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.