A web development/programming blog providing info, tips, and tricks on programming languages, scripting, Linux, MySQL and more
CSS
CSS Sprites without the CSS (mostly)
Jun 21st
It’s been a while since I blogged. Hopefully I can get back into it on a regular basis now.
I came across an interesting post today titled CSS Sprites w/out Using Background Images. Now obviously I was intrigued as I’ve discussed how to use CSS Sprites before and have really been getting into them lately with some new killer projects I’ve been contracted to do. But this post, I just had to read.
If you read that post, and I suggest you do, you’ll see that the author talks about using Sprites without the use of a CSS Background Image. When I rolled over the examples though, I got a basic sprite functionality. But that’s what he was talking about. Although he mentioned they were just <img /> tags. I just wasn’t seeing it.
Soh Tanaka mentions that the goal was to make it simple for a client who may have multiple affiliate banners to upload and didn’t want his client trying to have to mess with CSS and creating custom classes and code. Good point. The way Soh went about achieving this was simple: Instead of moving the background image of an element, use an <img /> tag with the same sprite image and move the <img /> tag up with negative margins. The theory is identical, the execution is just different.
Instead of setting a background image on the element and doing a
background-position: 0 -182px;on the:hoverSoh does uses an actual <img /> tag and sets amargin-top: -182pxon it (182px was the size of the image, or half of it).
Now as author Chris Heilmann mentioned in the comments, this isn’t the best use of sprites in the world, and kind of defeats the purpose. But the functionality is there and it was something Soh did to make it easier on his client (which we’ve all done) and was just showing the technique for technique’s sake. By the way, Chris authored a fantastic JavaScript/DOM Scripting/AJAX book I have in my Tech Library. It’s definitely worth the read.
Anyways, I just wanted to drop this tip as I stared at it for a while utterly confused and wondering how this tip was any different as all I could see was the same sprite functionality. But, like I said, that’s the point. It still functions the same.
HOLY BRAIN FART BATMAN!!
Jun 2nd
So not all of the posts can be gems. Have you ever had a “brain fart” so bad that you’re almost embarrassed to share it with people? I’ve had quite a few in my life, one of which just occurred. The other that I remember happened in 3rd grade (yes it was that bad I still remember it). For those of you who don’t know what a “brain fart” is:
A brain fart is slang for a special kind of abnormal brain activity which results in human error while performing a repetitive task. More generally, a brain fart can be any task-related forgetfulness, such as forgetting how to hold a fork. Tom Eichele, a neuroscientist at the University of Bergen in Norway, was part of an international team of researchers who identified evidence that the brain fart is detectable in brain scans up to 30 seconds before the mistake is actually made. The researchers suspect the abnormal behavior is the result of the brain attempting to save effort on a task by entering a more restful state. The scientists detailed their findings on 21 April 2008 online in the journal Proceedings of the Natural Academy of Sciences. The scientific term they gave the phenomenon is “maladaptive brain activity change.”
Book Review: Web Standards Solutions: The Markup and Style Handbook
May 26th
Book Review for:
Web Standards Solutions: The Markup and Style Handbook
5 out of 5 Stars for Web Standards Solutions: The Markup and Style Handbook
If you’ve read through some of my other posts, or even glanced at my Categories, you’ll know I’m a huge proponent of Web Standards. I also tend to buy my books based on other user reviews, as opposed to critic reviews. I like to get my review directly from the people using the book daily. This book current has a 5 star rating with 45 out of 52 5-star reviews on amazon.com and was a no brainer for me to rank it the same, for reasons I will get into later. This book was written in 2004 and a special addition was just released as well only 2 weeks ago.
Read the rest of this entry »
Decrease Your Web Site Load Times Using CSS Sprites
May 15th
I was working on a website recently when I came across an issue I’ve encountered a number of times before, I’ve just never really thought about in depth until just the other night. Here is the question that I posed myself:
Which will result in better web site performance and faster speed: Larger files and fewer server requests? or Smaller files and more server requests?
I posted this question recently at LinkedIn Q&A to get some insight on the topic. I enjoyed all of the answers and was able to take something out of each, and decided to post about a particular topic that was mentioned in a couple posts.
Read the rest of this entry »
Book Review: CSS Mastery: Advanced Web Standards Solutions
Jul 12th
Book Review for:
CSS Mastery: Advanced Web Standards Solutions
by Andy Budd with Cameron Moll & Simon Collison
5 out of 5 Stars for CSS Mastery: Advanced Web Standards Solutions
This was the first CSS book that I purchased. I was always hesitant to purchase a book on CSS because most of the resources that I’ve found have been mostly beginner’s tutorials or instruction and I felt that I had at least a “beyond beginner’s” understanding of CSS. I wouldn’t go as far as saying I’m an expert at CSS, but at least mid-level to advanced. However, this book had some previous good recommendations from amazon.com so I bit the bullet and bought it. I must say that I was NOT disappointed!
This book starts off with a very quick introduction/recap of CSS basics including good code structure and organization, validation, DOCTYPES, common selectors including IDs and classes, pseudo-classes, and the advanced selectors such as universal, child, attribute and more, and some wonderful reference on the specificity and inheritance, or the “Cascade”, the core of CSS. Although this introduction is provided, it is relatively short at about 25 pages and I would suggest a good working understanding of these basics first, as it will help understand the rest of the book easier as opposed to trying to learn CSS for the first time from this book. The following chapter is another quick 15 pages with on “Visual Formatting Model Recap” including the Box Model and Positioning, two EXTREMELY important concepts to understand CSS properly. Although it is short, it is an extremely powerful section.
Read the rest of this entry »
We’re getting NAKED!! But don’t get too excited.
Mar 31st
As anyone who was talked to me knows, I am a huge proponent of web standards and standards based design. For those of you who are unfamiliar with standards based design, here is a brief explanation.
Standards based design is web site design that follows and conforms to current web standards recommendations, as set by the W3C. According to their website, the W3C’s mission is:
To lead the World Wide Web to its full potential by developing protocols and guidelines that ensure long-term growth for the Web.
Some people may ask, why are web standards important? Same reason any set of standards are important: To promote continuity and uniformity. Think of all the standards in place in the world today: Standard Units of Weight and Measurement, Street sign colors/shapes, building/construction code, and even our state/local laws are all systems of standards. Without systems of standards, people would be free to do things as they wish. Ultimately, it would result in utter chaos. Unfortunately, that’s what happened back in the days of the browser wars in the mid-to-late 90’s.
Those of you who are fortunate (or unfortunate) enough to remember, know what I’m talking about. Different browser manufacturer’s did things their own way when it came to displaying web pages as web standards had not been published or were not widely known. Now, things are still far from perfect when it comes to browser support for HTML/CSS standards, but they are definitely better than they used to be. Browser manufacturers are getting better at their support for current design standards and W3C recommendations. A W3C Recommendation is the name for a current internet language standard and guideline, and over 110 recommendations have been published since 1994.
Read the rest of this entry »
