HTML

How to Version CSS Files with a Query String to Prevent Cached CSS Use

How to force a browser cache refresh using a CSS query string

Have you ever seen a ‘d’ query string on a CSS link in HTML source code and wondered what it did? The ‘d’ is mostly just a semantic way of describing the parameter that follows it, which is the date. The web server will ignore the string because it isn’t programmed to understand it, but it allows an easy way to cause browsers to think that the CSS file has changed thereby forcing a cache replacement.

<link href="/style.css?d=20101204" rel="stylesheet" type="text/css" />

The only downside is that each time the CSS file is updated, the parameter, which in the above example is a date string, has to be updated. Depending on the software you are using you can use tags to automatically change the date.

How to automatically version the CSS file for cache refresh in WordPress

In WordPress you would use the ‘time’ template tag after the ‘d’ query string like this:

<link href="/style.css?d=" rel="stylesheet" type="text/css" />

Thanks to Stack Overflow for the tip. Some call this the “Expires or Cache-Control Header”.

Google Chrome Store Opens New Possibilities for Programmers

The opening of Google’s Chrome store in October means new avenues for revenue

Etherfleet reports that Google is set to launch an online Chrome app store in October and that developers will be able to write and sell Chrome apps there ala Apple iTunes app store. Programmers will receive the bulk of the revenue, but Google will take their cut. Google needs entrepreneurial hackers to code apps to help build up the community and help make them money. You can view a demo of the Chrome Web Store on Youtube.

Programming Differences between Chrome Browser and Chrome OS

Because Google’s Chrome store will serve and sell both Chrome browser and Chrome OS apps, I thought I’d take a minute to discuss the differences in how each is coded, but for those who want to dive in, here is the link to the Chrome Developers Guide.
Read more…

Beginning Google Maps API 3

This book is about the next generation of the Google Maps API. It will provide the reader with the skills and knowledge necessary to incorporate Google Maps v3 on web pages in both desktop and mobile browsers.

It also describes how to deal with common problems that most map developers encounter at some point, like performance and usability issues with having too many markers and possible solutions to that.

• Introduction to the Google Maps API v3
• Solutions to common problems most developers encounters (too many markers, common JavaScript pitfalls)
• Best practices using HTML/CSS/JavaScript and Google Maps

What you’ll learn

• Building reliable Google Maps web applications
• How to transfer from version 2 to version 3 of the API
• Best practices using HTML/CSS/JavaScript
• Dealing with large amounts of map markers
• How to look up addresses and coordinates using GeoCoding and reversed GeoCoding

Read more…

How to Make a Facebook Share Button

Facebook has a page that makes it easy to create a share button for your website, but if you know a little HTML and javascript you can edit it how you see fit.

As you can see above, you can choose between a button and a link, then edit or copy the code to place in your PHP or HTML files, depending on whether or not you are running a CMS.

How to Use Tweet Buttons with Query String Parameters

Twitter now has a “Tweet” button like Facebook’s “Like” button. If you’re wondering how to add this new tweet button to your blog, website, or Blogger account, follow the instructions below. If you can handle HTML and a little bit of Javascript, then you should be comfortable with this code.

Tweet Button Code

That’s it, but if you still need help from Twitter, visit their tweet button auto-generation page. You can also use an iframe and query string parameters to customize the button’s behavior.