ButlerBlog

chad butler's weblog

  • About
  • Blog
  • WordPress Plugins
  • Contact

Date-O-Matic Javascript Day/Date Display

By Chad Butler Leave a Comment

This is a very simple date script that I wrote years ago. I have used it in some form or another on just about every site that I have worked on. It is a nice, simple, client-side javascript to display the day and the date.

To use it, place the following in the of your html document:


In the location that you want the date to display, place the following:

This will output the date. You can apply CSS to the output as necessary, or, for those lacking the necessary skills, you could wrap this with a (yuck!) tag.

Obviously (or maybe not so obvious), there are a number of changes one could make based on desired output. For example, the days or months could be abbreviated in the script if you wanted “Thurs, Jan 12, 2006”. Or, the more savvy could change it to an output of “Thursday – 1/12/2006” by changing the month names to appropriate numbers and then changing the document.write section to:

document.write(d[today.getDay()]+" - ");
document.write(m[today.getMonth()]+"/");
document.write(today.getDate()+"/");
document.write(""+today.getFullYear());

Or, if you need scientific or European dating, switch the date and the month lines to get this:

document.write(d[today.getDay()]+" - ");
document.write(today.getDate()+"/");
document.write(m[today.getMonth()]+"/");
document.write(""+today.getFullYear());

If you are an old javascript hack, you probably had all that figured out (or already wrote your own), but if you are a js noob, tinkering with the output and maybe adding or subtracting from it, is a good way to “get under the hood” so-to-speak and learn how to use javascript.

Have fun!

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to share on Pinterest (Opens in new window) Pinterest

Filed Under: Web Tagged With: javascript, tools, Web, webdev

XAMPP

By Chad Butler Leave a Comment

Do you need a packaged installation of Apache, mySQL, PHP, and Perl? Complete with its own control panel? Packaged for Windows? Easy to install?

Asking for the moon, aren’t you?

But wait… Apache Friends has something for you! A freely downloable package of open source web tools is available at http://www.apachefriends.org/en/xampp.html.

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to share on Pinterest (Opens in new window) Pinterest

Filed Under: Web Tagged With: tools, Web, webdev

Further Optimization of the W3C Validation Images

By Chad Butler 1 Comment

So call me picky, but I went ahead and tried to further optimize the process for using the W3C validation buttons. I know that seems like trying to eek out another 10 horsepower from a 400 horsepower sports car, but it really bothers me to reduce efficiency for something so useless (which brings up the point, “Why use them at all?” but that’s another story).

I felt that I could probably create some efficiencies by combining the images and using an imagemap for the links instead of using two separate images. There are basically three potential areas then for optimization:

  1. size of the html on the page
  2. size of the single image vs. two seperate
  3. reducing the images requested from 2 to 1

Note that this whole process is only an option if you actually have both valid XHTML and CSS. If either of these don’t validate, you need to just use the one image for the one that does validate.

Ok, so here is what I did:

I started by combining the two images into one single image:

w3c valid xhtml & css

This allowed a reduction in server requests from 2 to 1. Instead of asking the server for and image, then another, the browser only has to ask for a single image here. Also the total size of the single image is 1287 bytes. Compare this to 1441 bytes for the combined images. (Note that I am using 16 color gifs for both of these, as opposed to the 128 color originals. See my post on this.)

The second part of this process was to change the html to call the single image, use an image map to separate the links, and make sure it was valid XHTML, then measure the results in bytes.

342 bytes the old way:



Valid XHTML 1.0!


Valid CSS!

396 bytes the new way:


Valid XHTML 1.0! & Valid CSS!

Valid XHTML 1.0! Valid CSS!

So, the html for the new way is actually a little bigger. But that is ok because our total weight of the images combined with the html is actually less. 1783 bytes the old way, 1683 bytes the new way – we save a total of 100 bytes. Doesn’t sound like much, does it? So I guess we will justify the whole process by saying that we’ve reduced the hits to the server in this process from 2 images to only 1.

Like I said, it’s like eeking out an extra 10 horsepower from a 400 horsepower engine. OK, maybe more like an extra 5, but it was fun, wasn’t it?

  • Click to share on Facebook (Opens in new window) Facebook
  • Click to share on X (Opens in new window) X
  • Click to email a link to a friend (Opens in new window) Email
  • Click to print (Opens in new window) Print
  • More
  • Click to share on LinkedIn (Opens in new window) LinkedIn
  • Click to share on Reddit (Opens in new window) Reddit
  • Click to share on Tumblr (Opens in new window) Tumblr
  • Click to share on Pocket (Opens in new window) Pocket
  • Click to share on Pinterest (Opens in new window) Pinterest

Filed Under: Web Tagged With: design, tips, Web, webdev

  • « Previous Page
  • 1
  • …
  • 5
  • 6
  • 7
  • 8
  • 9
  • Next Page »

Join Us!

I will never share your information. No spam. No junk. No kidding. Unsubscribe anytime.

Recent Posts:

  • The High Price of Free Plugins
  • YouTube Success: Key Tips for Enhancing Video Optimization and Visibility
  • Mobile App vs. Mobile Website Ideal Choice for your Business
  • Top Strategies to Boost Your Brand’s Visibility and Impact
  • Advanced Blogging Strategies: Using Analytics, A/B Testing, and Conversion Optimization Techniques to Grow Your Audience
  • Unlock Real-Time Process Insights to Save Time and Money
  • How Writers Can Attract More Audience Attention
  • Dress for Success – Even at Home
  • Mastering the Art of Crafting SMART Marketing Goals
  • Rediscover Your Brand Story: 7 Tips for Refreshing Your Company Identity

Archives

  • About
  • Blog
  • Archive
  • Contact

Site powered by WordPress, running on the Genesis Framework from StudioPress.

Unless otherwise noted, content on this site is © 2006-2025 ButlerBlog and may not be reproduced without express written permission from the author.

Some content may include affiliate links for which this site receives a small commission.