Graphics, Coding and Geekiness

Placeholder for Select

Placeholders are a nice option for styling and labeling forms without taking up space for a separate label for each input. However, select boxes do not have a placeholder parameter. The style of having gray text as a placeholder in the select box and darker text for the options can be recreated with two lines of CSS.

form select { color: #999; }

form select option { color: #000; }


jQuery Selector Order

I ran into an issue today with some jQuery code that worked in Chrome and IE but not in FF.

$(container).find('div.content-block').not('div.auto-height').height(height);

We use content blocks on our site and we have a jQuery function that sets the height of those blocks so they are all the same. We want to the blocks to basically be sized according to their content and don't want to lock our authors into a fixed height block. However, we can't have staggered blocks that are all a few pixels different. Our function finds the tallest block in a parent element and sets all the blocks to that height.

Of course, this is great 90% of the time, but sometimes you need to prevent the height from being set on a block. In the specific case I'm dealing with now, each block takes up a full row and has a more link to expand the content. For these cases we have a class "auto-height". In the above jQuery any blocks with that class should not have their height set. This did not work in FF.

With some troubleshooting I discovered that the order of the selectors matter. Placing not() before find() corrected the issue in FF.

$(container).not('div.auto-height').find('div.content-block').height(height);


Video Not Displaying in Firefox

I spent hours today trying to debug a problem in Firefox. I'm working on slideshow of videos using a combination of the Slideshow Manager plugin for MODx which uses Nivo slider. Once you click a graphical play button, a Brightcove Smart Player loads and plays over the slide. For some reason this was working in all browsers except Firefox, which is odd, because generally when you run into one browser that's not rendering CSS and jQuery the way you'd expect, Internet Explorer is the culprit. In this case, all other browsers tested, Chrome, IE, Dolphin, worked, but in Firefox the video was located in the DOM correctly and you could hear it play, but the video and player were not at all visible.

Working with video elements in combination with a slideshow is tricky, though. I suspected I had some issue with opacity, visibility, or z-index. I spent an hour manipulating the CSS of the video and its parent elements to no avail. I started changing the jQuery that was removing and adding the video into the correct place in the DOM when the play button was pushed. But none of this was the culprit.

The problem I discovered, as I dug deeper into the CSS and started removing all styling elements related to the video and it's parent elements until I could get it to display in the offending browser, was the hack I'd used to vertically align the player in the header of the page. 

.element { position: relative; top: 50%; transform: translateY(-50%); }

This is a rather common hack you'll see used on the web, so use with caution. Specificcally, it was the transform property that caused the video not to display in Firefox. I also attempted replacing the transform property with browser specific properties but that did not correct the display issue in Firefox.

-webkit-transform: translateY(-50%);
-moz-transform: translateY(-50%);
-ms-transform: translateY(-50%);
-o-transform: translateY(-50%);
transform: translateY(-50%);

And yes, the parent element the video was positioned in did have a height property set. 

I've done some searches on the web and have not found anyone else documenting a similar issue. I'm not sure if this is specific to the transform being done on a video element or if it's more specific to my video slideshow implementation.


CSS Grid Module

I had a great time attending An Event Apart in Boston a couple of weeks ago. There were many great speakers from the web industry. It's always overwhelming coming away the desire to channel all the new knowledge and energy from the conference, and then wonder how on earth you're going to begin incorporating the new techniques while you start to dig yourself from under the work that's continued to pile up while you were gone. 

This year I was most excited about @rachelandrew's presentation on the CSS Grid Module. The bad news is, it's still in draft stage at the W3C. The good news is, it's already starting to be supported in browsers.

Listening to these presentations every year about the newest, cutting edge technologies that are in beta stage or newly released and being touted as the new standard, you never can be sure what's actually going to launch, gain adoption and really stick. There are few things that actually do. Remember, when Flash and action script was THE way to build a website? Remember when XHTML was going to change HTML forever?

But every once in a while, something does come along that does fundamentally change the way we build websites. Like CSS. CSS was a game changer in the way we wrote and designed web pages. It put our table layouts and sliced images to shame. More recently, responsive design and media queries have started taking over the web. Now with Google's announcement this month that it will give preference to responsive websites in its search results, I anticipate an even broader adoption of responsive design in the near future.

The most recent template designs I have done have been responsive using the Bootstrap framework to supply the grid. Yes, I can see some of you rolling your eyes from here. I do assure you that the sites I have worked on for my employer are not "Cookie Cutter Bootstrap" sites. I don't know anyone who is working with responsive design that's not using some grid layout framework, whether they've written it custom or are using something out of the box.

This is why I am so excited about the CSS Grid Module.

Imagine not needing a framework because, gasp, you could define the grids as properties in the DOM elements straight in the CSS!

This kind of blows my mind. Just as the concept of laying out web pages without having to position every element in a table cell blew my mind back in the early two thousands. (Yes, I was late to the party. I was busy having babies at the time).

As @rachelandrew mentioned in her presentation, there are still some issues to be worked out. There are some gutter issues with column-gap and column-row that may get moved to the second release, and nested grids and sub grids are at risk of being moved from the initial release as well.

I for one, will be watching this module closely. I hope I find some time to play around with it and provide some feedback to the working group.


Too Cool

I had a meeting with a company I do quite a bit of work for lately, lets just say they buy and sell used machine parts. I've built them online applications that allows vendors from all over the country to sell them parts. Today I was able to tour their warehouse where they're receiving these parts and sorting them for re-sale or scrap. These parts are all invoiced online and marked with UPC tags generated and printed from the application I built for them. At the moment, they're still typing the codes into a computer to log them, but they're planning to be able to do this with scanning guns before long. It's amazing to see the reality of the whole system actually working, to see my tags on the parts in these orders. Very cool.


Spam, Spam and More Spam

No, this post is not about canned meat. It's about spam email, the bane of many an email providers existence, the source of constant irritation to all of us who use it. Spam accounts for somewhere between 70%-90% of all email. It fluctuates a great deal from day to day. You can read more about it here, if you're so inclined.

We use an email filtering company called Postini for our email, to keep as much of the junk, porn, and viruses out of the email we deliver to our clients as possible. But there's just no way to catch it all, and the spammers are getting more and more devious all the time. Lately we've been having problems with spammers high-jacking domain names and using associated emails to spoof from, essentially using someone else's email address to spam. These users call up complaining because as the spam goes out, inevitably some of the email addresses are not valid and the email gets bounced back to the sending address. So now all of the sudden you start seeing tons of messages getting bounced back to you because someone else is using your address to send spam. There's not much we can do about this. It's almost like getting your credit card stolen except without the financial headache. You could cancel the account if you want, but that's extremely inconvenient if you're using it for professional purposes. Or you can wait for it to stop, because what the spammers tend to do is high-jack the addresses for a few days to a week and then move onto the next guy.

In our office, we consider email as fundamentally broken. When 90% is crap no one wants, it's a serious problem. We spend over $6,000 a year to have our customers' email filtered and we're only a small company. We're constantly taking calls from irritated or irate customers who are still seeing graphic porn or other offensive, inappropriate, and unwanted advertisements in their email box. Not to mention the time spent helping to resolve email issues, block holes in the network spammers have found, adding extra scripting to contact forms to prevent spammers and crawlers from sending spam through them, the cost of the bandwidth necessary to handle all of this email, even though most of it's junk. Spending time on the phone getting Yahoo or AOL or Google to accept email from our servers again because they've blocked us because someone's been spamming through us somehow. It's truly a disaster.

How do we fix it? No one seems to have answer. So we just keep trying to improve our system for blocking the spam before it gets delivered, paying thousands of dollars to handle the volume of traffic created by all the junk. And there's really no end or solution in sight.

Signature_2


The Job, The Magic, The Headache

Saying your a web developer these days can mean just about anything. Any one with a computer and Front Page or Dreamweaver can slap together a website. I'm not one of those people. It's an interesting job because it encompasses so many different knowledge bases and specialties and requires you to have exactly none of those skills.

In order to put together a website you need to have some graphic skills. You need to be creative, have an eye for color and balance and flair for design. You must know how to use Photoshop, Fireworks, ImageReady and/or Illustrator. Many clients like the bells and whistles. You need to know Flash and how to create animations. You must have some knowledge of video and how to get that on a website. Almost every company these days is looking for more than just a pretty site, they want functionality. If they're not looking for a shopping cart to sell their goods and process their orders, then they want an online intranet system. Something their employees or contractors can login to from anywhere and input data. They want that data to interface with their internal databases and import and export the data from the web server to their internal network. They want to automate these imports and exports so they don't have to be run by hand. They want a company that answers the phone when they reach a crisis and they want their website updated yesterday. They want to update their website with no knowledge of html and you need to be able to explain to them in plain English how you're going to make all this happen. This task is particularly difficult when you have to explain what a domain name is and how to re-fresh a web page in their browser.

As you might well imagine the graphic, programming, networking and communications skills are not often found in one package. While I have at times had to do a little of all these things, I am by nature a programmer. I handle data. I specialize in programming in ColdFusion and build custom systems. I enjoy what I do. Most people eyes glaze over when I start to talk about it, but to have a huge application launch and start to run nationally is quite amazing. I love problem solving and de-bugging errors. I like to listen to the clients needs and feel my brain start to churn out ways that I can acheive what they want. I take what starts off as a mere wish, need or desire and make it a reality. On more than one occasion I've been referred to as a magician.

But today, my head hurts and I'm feeling overwhelmed. There is simply so much to know and I wish I knew more. My Photoshop skills could be more adept. I wish I had mastery of Javascript and SQL instead of needing to look stuff up all the time. I would love the opportunity to learn Oracle. I'm still getting accostommed to our new Plesk server and phpMyAdmin database interface. I'm hoping we purchase a copy of ColdFusion 8 soon, it seems to have some really cool new features. We have many clients requesting image options that are going to be built into this new version. But yet this will be a whole new realm of learning, questions, incompatibility and new features to learn. In the mean time I am so busy with the myriad of projects I am working on that range from sports and yoga, to automotive supplies and realty companies, marketing firms and hospitals that I am just trying to keep my head above water.

Signature