Stop Supporting Bad Behavior.

I got into a conversation about supporting older systems/configurations (server environment) and that lead to browser support. I'm more familiar with the latter, as I don't work with ancient servers.

I see it all the time, people trying to teach IE7 tricks that it doesn't know through various hacks. Some people are still spouting that we should support IE6.

No. Developers need to stand up and refuse to enforce bad behavior. Many people today still won't use a <header> tag because it's "too esoteric".

Not to mention all the CSS3 goodies. There's a ton of things to be taken from, and they're mostly supported - but only in the newer browsers. This is fine. Use it, and don't limit yourself just because somebody won't click an update button.

Sure you can make your site "fall back" gracefully, but don't for a second spend too much time on such a task; it's not worth your time. Your time is to be used for research, experiments and most importantly: high quality results.

I recommend reading Hardboiled Web Design for a full grasp on this ideology. The book gives you well thought out reasons as to why you shouldn't stop yourself from growing through practice.

Use CSS3. Use HTML's new features. Use localstorage, web workers and transforms. Help the web grow, don't stand in it's way by condoning the refusal to adapt.

Ordering by Relevance in Yii Framework.

Sometimes we have to order by "relevance" in our queries, whether it's shown or not. You want the results to be ordered in a certain way.

Yii makes querying ultra simple with models & findAll();:

// Grab our search parameter
// and split it into a few segments.
$raw = $_POST['q'];
$full = '%'.$raw.'%';
$first = '%'.$raw;
$last = $raw.'%';

$query = array(
	'condition' => 'name LIKE :keyword OR email LIKE :keyword',
	'params' => array(
		':keyword' => $full,
		':firstName' => $first,
		':lastName' => $last
	),

	'order' => '(
		CASE WHEN `name` LIKE :firstName THEN 1 ELSE 0 END
		+ CASE WHEN `name` LIKE :lastName THEN 1 ELSE 0 END
		+ CASE WHEN `email` LIKE :keyword THEN 1 ELSE 0 END
	) DESC
	'
);

$result = Contacts::model()->findAll($query);

This will sort by the first name if available, falls back to the last name and then the final fallback goes to the email address. You could apply this to anywhere - and is great for searching.

Animated Responsive Design.

As a software engineer for the web I resize the browser a lot. Mostly to see what other websites are doing, and if it's better than what I've done.

I came across "animated" responsiveness, where when you resize everything seems to flow into place instead of simply snap into place. It took me a while to get it, but it's really quite simple. I've been using it ever since.

Lets jump to an example.

h1 {
    font-size: 31px;
    transition-duration: .35s;
    -webkit-transition-duration: .35s;
    -moz-transition-duration: .35s;
}

/* And now our media query. */
@media screen and (max-width: 650px) {
    h1 {
        font-size: 15px;
    }
}

When you resize, it will flow into place. Check it out http://jsfiddle.net/dzKdh/ and resize your browser window.

Stop Using "ease"! Define Your Own Easing.

I have rarely come across a situation where setting my transition to ease actually gives me the result I'm going for.

This is where cubic-bezier comes in. You can even generate & test your own at cubic-bezier.com. It helps you define your own easing.

It's saved me much of my time trying to perfect my transitions. To use it is simple:

a {
    display: block;
    margin: 35px auto;
    width: 200px;
    padding: 10px 0;
    text-align: center;
    color: #FFF;
    text-decoration: none;
    transition: all .45s cubic-bezier(1,0,.42,1.47);
    -webkit-transition: all .45s cubic-bezier(1,0,.42,1.47);
    -moz-transition: all .45s cubic-bezier(1,0,.42,1.47);
    background: #000;

    &:hover {
        padding: 10px 60px;
    }
}

You can try this out at http://jsfiddle.net/7MdXs/1/.

A Quick Snippet to Make CSS That Much Easier.

I always apply this to any new stylesheet:

* {
    position: relative;
    box-sizing: border-box;
}

This will make everything relative, which means you can use position: absolute where you need to without even thinking about "is my parent relative?".

The Tilde is an Amazing CSS Selector.

I recently ran into the ~ selector, which is somewhat similar to the + selector.

The difference is what changes the game. The + selector finds the nearest siblings, whilst the ~ sign is able to target any sibling. This is big news. This is the reason we can have CSS3 slideshows with controls and many other possibilities.

A great thing about the tilde is that it isn't restricted to being in the same exact parent -- rather, just one parent would do. For example:

<div id="container">
    <input type="checkbox" checked />

    <div id="main">
        <span id="findMe">Find me!</span>
    </div>
</div>

With the tilde character on #container input:checked would be able to target #findMe and give it some styling:

#container {
    #findMe {
        color: #222;
        background: #FFF;
    }
    input:checked ~ #main > #findMe {
        padding: 25px;
        color: #FFF;
        background: red;
    }
}

Isn't that awesome? I think so. What's even cooler is when you add labels in the mix. You can hide the radio buttons or checkboxes and use labels as a navigation.

Experiment with this. I think we're on our way to see pure CSS sliders; which is great because CSS3 animations are way better than anything jQuery can muster.