Blog

All thoughts and opinions in my blog are my own and do not represent the position of my employer.

Help me declutter before I move overseas

I’m excited to announce that I’m about to start a new position as a UX designer for Booking.com. To do so, I’m moving from the US to Amsterdam in the Netherlands! For the past several weeks, my husband and I have been busy preparing for such a big move, and a big part of that has been decluttering. One thing that I have far too much of is copies of my book Stunning CSS3: A Project-based Guide to the Latest in CSS. Books are heavy. I don’t want to move all these books. Plus, it’s silly for me to have these books when someone else could be benefiting from them.

So here’s what I’m going to do: I’m going to give away a bunch of copies of Stunning CSS3 to you guys. All I want in return is for you to donate something to Carolina Tiger Rescue, a big cat sanctuary here in North Carolina that is doing great work and that more people ought to know about. Everyone loves wild cats, right?

If you would like a copy of the book, follow these steps in the next couple days:

  1. Go to the donation page for Carolina Tiger Rescue and make a donation in whatever amount you like.
  2. Tweet at me something like “I just donated to Carolina Tiger Rescue, so @zomigi is going to send me a copy of her book Stunning CSS3″ and add a link to this blog post so others can do it too if they like.
  3. I’ll make sure to follow you, if I’m not already, so you can then send me a direct message with your mailing address.

I’ll send books to up to 10 people, and I’ll update this blog post if I hit that number (or run out of time before my move). For now, I can only send to people in the US, unfortunately. But, perhaps when I get over to Europe I’ll do another giveaway for you non-Americans!

Thanks for helping me clean out my house. :-)

Putting Flexbox into Practice presentation at Blend Conference

Yesterday I spoke at Blend Conference in Charlotte on Putting Flexbox into Practice. You’ve probably heard about flexbox (the CSS Flexible Box Layout module), since it’s the most fully developed and well supported of CSS3’s wide array of new techniques for creating page layouts, and because it allows you to create fluid, responsive layouts much more easily than current float-based methods. I talked about how to actually put it to use in the real world—today. I covered the syntax you’ll be able to one day use to build an entire multi-column page layout with flexbox, but also demonstrated some practical ideas for how to use flexbox as progressive enhancement, adding it in bits and pieces on individual page components with graceful fallbacks.

You can view the slides on SlideShare, or download the slides here:

Putting Flexbox into Practice (PDF, 900 kb)

The demo

To demonstrate the flexbox features, I created a S’mores Builder page. Some day, I intend to turn it into a functioning site devoted to s’mores. (I really love s’mores. A lot.) But for now, check it out to see what flexbox can do.

The S'mores Builder page is laid out entirely with flexbox, with some fallbacks for non-supporting browsers in certain places.

The S’mores Builder page is responsive and laid out entirely with flexbox, with some fallbacks for non-supporting browsers in certain places.

Related resources

Here are several links to related resources, a few of which are in the slides plus many more that were not but which I recommend and think you’ll find useful.

General info

Articles and tutorials

Tools

Bookmarklets for accessibility testing

I recently took an introductory JavaScript and jQuery class so I could learn how to write scripts from scratch instead of just blindly using and occasionally fiddling with other people’s scripts and jQuery plugins. To give myself some JavaScript practice, I decided to create two bookmarklets to solve a web accessibility testing dilemma: how to find inaccessible CSS background images.

One bookmarklet outlines elements that have a background image set, and the other removes all background images. The idea is to use either or both of these to see whether any of the informational images on the page have been set as CSS background images instead of foreground images (the <img> element in the HTML). This is an accessibility problem, since CSS background images can’t have alt text to explain the information contained within them. Background images should be reserved for either purely decorative images or informative images that repeat information found elsewhere in the text (like an image of a printer next to the word “print”).

If you think these bookmarklets would be helpful to you too when doing accessibility testing, you can grab them from my kittenrific demo page.

I know that there are other tools out there that purport to do this, but I created these bookmarklets anyway because a) I can’t get those tools to work for some reason, and b) I learn by doing. If you’re a JavaScript learner too, let me show you the code and briefly explain how it works. Here’s the function that removes background images:

var tags = document.getElementsByTagName('*');
var element;

for (var i = 0; i<tags.length; i++){
    element = tags[i];
    if (element.currentStyle) { // IE
        if( element.currentStyle['backgroundImage'] !== 'none' )
            element.style.backgroundImage = 'none';
    }
    else if (window.getComputedStyle) { // Mozilla, Chrome, and Opera
        if( document.defaultView.getComputedStyle(element, null).getPropertyValue('background-image') !== 'none' )
            element.style.backgroundImage = 'none';
    }
}

What this function does is first find all the elements on the page using the universal selector (*) and stick those in an array called tags. Then I’ve got a for loop that goes through each one of these elements and looks at the styles it has on it. IE does this using currentStyle, as seen in the first if statement, and the other browsers do this using getComputedStyle, as seen in the elseif. In both cases, the script checks to see if the CSS background-image property (called backgroundImage in the IE version) has a value of something other than none, and if so, it sets the background-image value to none, using an inline style. The outline function works exactly the same way, except that it uses element.style.outline = '2px solid #f00' instead of element.style.backgroundImage = 'none'.

(I will note that I’m not using jQuery in this code because I feel that bookmarklets shouldn’t have any external dependencies, when possible. But, I did also write them in jQuery, just to make sure I could! Practice, practice.)

Since I’m a beginner at JavaScript, these bookmarklets are simple and there are likely better ways to write them. If you have suggestions for how I can improve this code, please share! I have a demo file and the code up on GitHub (another thing I’m a beginner at, incidentally).

View more posts:

Archives by Category

  • Announcements (32)

    Learn what's happening in my career or industry, including information about my speaking engagements and books.

  • Articles (40)

    Informational or theoretical articles about a variety of web design topics, including CSS, HTML, accessibility, usability, and visual design.

  • Inspiration (8)

    Collections of images or links to others' design work that I find inspiring and think you will too.

  • Tutorials (5)

    Step-by-step articles that you can follow along with to learn a particular web design technique, including CSS layout and CSS3 effects.

Archives by Month