I'm pretty excited for the next two weeks. I'll be speaking at Open Web Camp on July 13th. Afterward, I'll be heading up to Portland for Refresh PDX on July 17th.

My talk description:

CSS can do all these amazing things now: Animations! Gradients! Transforms! Yet, it’s tricky to remember every vendor prefix and, blech, time consuming to do everything by hand. Let’s take a mad dash through CSS automation with Sass and other handy tools to automate ALL THE THINGS CSS (including those amazing things), traveling but one path to a faster, easier, and more reliable way to develop websites and web applications.

A few more details:

I'm going to talk about setting up Sass (look, it's easy!), setting up layouts (see, it's easy!), variables, mixins, extends, functions, as well as namespacing. Then use Sass to do the cool things: animations, gradients and transforms, showing how Sass makes adjustments easier. I'll include LiveReLoad so that the pages update automatically when I git up to a branch to demonstrate changes. I'll mention grunt (more so at Refresh PDX, since Dirk Ginader will be talking about grunt at OWC), too, for automating other tools, such as csscss to find duplicates. And Alfred for general workflow automation, not just CSS stuff.

I'm also going to bounce a lot.

Um.... no.

Just no.

No, wait, more like, "Fuck no."

I had a phone interview today with a company that I am incredibly hopeful to be contracting for shortly. The work is in my area of expertise (hello, Drupal); they seem okay with my request for 20 hours a week for the next 2-3 months (with the understanding that I can ramp up to 40 if needed for a project, as long as I drop back down to 20 as the norm); and I'd be working with a friend I've worked with before. Always a good thing.

In the interview, I was asked, "Using CSS, how many ways can you hide an element? Not from a bot, but from a user. I have been told four, but can remember only three."

I thought about it for a moment, and replied, "I can give you five."

Such the overachiever.

Starting with this layout:

The the five ways I answered:

1. Use the display property.

display: none;

This hides element and removes it from the rendering flow. It will not take up any space. The page renders as if the element didn't exist.

2. Use the visibility property.

visibility: hidden;

The visibility property hides the element but keeps the calculated space in the layout. There will be an empty space where this element would have been, but its content is hidden.

3. Use the opacity property.

opacity: 0;

Setting the opacity value to zero will hide the element and let the underlying elements display. You are saying, "Make this element a window."

It looks the same as 2 above, the element will still take up space.

4. Use the z-index property, with margins.

z-index: 1000;
margin: -100px;

If you have two elements, say, two divs, at the same child level in the DOM, you can position the second one on top of the first one, then set its z-index to be behind the first one. The first one will display, the second one renders under the first one and is hidden.

Done correctly, it looks the same as 1 above, the element will not take up space.

5. Use the left (or right) property.

left: -9999px;
position: relative;

You can send the element off the page by setting its left property (for LTR, or left-to-right, text) to some high negative value, and letting its position be relatve. That second property is important for the actual repositioning using the left property.

It looks the same as 2 above, the element will still take up space.

To my delight, when I was done with my answer, I was given another option!

6. Use the left (or right) property, with the position: absolute property.

left: -9999px;
position: absolute;

Using absolute instead of relative removes element from the rendering flow, allowing sibling elements to fill the space.

It looks the same as 1 above, the element will not take up space.

Whee!

Six ways to hide an element on a page with CSS.

$10 says someone else comes up with another way.

Update: well, that didn't take long.

Two more ways to hide an element with CSS include:

7. Use the transform property.

transform: translateX(-9999px);

The transform property adjusts the element. Using the transformX value, we move the element -9999px to the left, and hopefully off the screen. This is similar to the position + left properties example.

8. Use the clip property.

I haven't done this one before, but, in theory, this should work to trim / clip an element to a rectangle of 0px in size:

clip:rect(0px, 0px, 0px, 0px);

No wonder CSS is considered difficult by some: so many ways to do the same thing! Thanks to Jonathan Snook for the last two.

Last night, before going to bed, I wrote a schedule for myself for today. This morning, I jumped out of bed, and started in on that schedule. First item: walken the doggen.

Simple enough. As I grabbed the leashes, though, I thought, hey, the big dog always has the bigger, longer leash, and the smaller dog always has the shorter leash. Why not switch them up?

I put the longer leash on the small dog, and the shorter leash on the big dog. Wasn't I just so clever? The little dog is going to have a taste of freedom, and the bigger dog won't worry me as much. Smart me!

We walked outside. They ran down the porch steps as I locked the door. The tug as they hit the bottom of the stairs should have clued me in.

After locking the door and tucking the key away in my clothes, I turned and walked down the porch stairs, juggling phone, headphones, two leashes and the poop bag. The dogs took off running.

Now, the thing about dogs that every dog owner, myself included, knows is that the dogs know where the end of their leash is. They know the distance they can go before it will stop them from going farther. Dogs will spend most of their time at the far end of that distance.

So, we start walking down the driveway, George sprints off to the distance he knows he can go, and YOINK! The shorter leash stops him.

Stops him, but not my phone, which promptly went flying out of my hand when the leash jerked.

Because my phone hasn't seen enough torture yet.

Right.

Where before the screen was cracked but still in one piece, it is now shards in the corner. I'm sending it to a friend today, he said he's able to fix it and would like it. I didn't damage it any more than I already told him about, than he had already seen. I am, however, frustrated that I didn't see the leash length being an issue and hold on tightly to the phone. First time I drop my new phone, I will rage at myself.

The annoying part of the walk was that Grace didn't even move more than the short leash's length away from me.

She was trained that was the distance of her freedom.