Create a sprite sheet walk cycle using using CSS animation

January 13th, 2013

The CSS steps() function is something that I think is going to be really useful in the future when it’s supported in all the browsers. One thing I’m a big fan of is using CSS to move and redraw DOM objects instead of using JavaScript when I can and steps() is one of those things that allows me to do that. It used to be if you wanted to make a frame by frame animation on an HTML page, you had to use an animated gif or use JavaScript or jQuery to cycle through it and now you can use steps() to use CSS to animate it.

But there’s a bunch of examples out there that show a static animation. I wanted to see if it can be used for something more complicated. A while ago, I made a walk cycle for the canvas tag and I wondered how difficult it would be to recreate that with steps(). Turns out it’s pretty simple.


1
 

The main functionality is that when the right arrow key is pressed then I use JavaScript to add the class walk-right which adds the walk-right sprite sheet and starts the animation. It also uses translate to move the character to the right. Stop pressing the key and I remove the walk-right class just leave the right class which leaves the character facing right. The same thing works for left arrow key.

When you think about it, that’s some pretty simple stuff right there to create an animated walk cycle. All the heavy work is done for us by CSS and browser and anytime you can leave the drawing and redrawing of the DOM up to CSS, it will be faster than using JavaScript.

I’ve written nothing but JavaScript for a month and a half and I love it

January 3rd, 2013

OK, that’s not 100% true, I’ve written a few lines of HTML, CSS and PHP but most of what I do now is work on JavaScript apps. If you follow me on Twitter, then I’m sure you saw that I was laid off from my job at the end of October. Luckily for me exactly one month later I started a new one and it’s turned out to be the best thing that could have happened to me.

Whenever I mention enjoying working with JavaScript, I get a comment or an email telling me I’m wrong and I should be writing Coffeescript or Ruby or something. But, as shocking as it maybe to some people, I really do like working with JavaScript and for the last month in a half I’ve only work on JavaScript apps. Not only do I get to do something that I enjoy, I get to put my money where my mouth is. At my old job, I could have used tables or Dreamweaver’s design view to build the sites I worked on and my bosses wouldn’t have known or cared. I built sites using best practices because I wanted to build the best I could. Now I’m in a place where I’m not the only one that’s written a line a code and they want good code and I love that.

Here’s the thing though, I used to experiment with JavaScript at home as much as possible. But now that I write it all the time at work, I don’t have to drive to write it at home. Lately, I’ve been getting back into looking at the cutting edge stuff being introduced in CSS. So expect the blog to focus more on the latest CSS3 features and most likely HTML5 canvas because for some reason, I love creating with canvas.

A few things that caught my attention this week

November 22nd, 2012

This week I came across a few things that I think will make being a front end developer a lot easier. Nothing that’s going to change the world but just some things that will make your job simpler and allow you to use less external tools.

DocumentFragment

I came across a post by David Walsh about the DocumentFragment object. This is one of those powerful things in JavaScript that hasn’t been getting as much attention as it should be. What does it do? Simply, it allows you to create a parent to add some child items into before you add them to the DOM. The real advantage of this is speed because it will lower the amount of interaction with the DOM your code needs and that is one of the best ways to speed up your code.

How does it work? First we create the documentFragment:

1
var df = document.createDocumentFragment();

Now let’s create some content to add to our page:

1
2
3
4
var headline = document.createElement('h1');
headline.innerHTML = 'This is the headline';
var text = document.createElement('p');
text.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';

And we’ll add them to our fragment:

1
2
df.appendChild(headline);
df.appendChild(text);

So we’ve created this content and added it to our fragment but we haven’t touched the DOM yet. Now imagine if this was a more complex app or a huge website, we can get all the content we want to add to the page ready without touching the DOM and slowing everything down. Finally, let’s add it to the page:

1
body.appendChild(df);

Pretty simple and something I think I’ll be using a lot now that I know about it. The great thing is this even works in IE 7.

@supports

I’m sure if you’ve worked with any CSS3 or HTML5 cutting edge feature, you’ve used Modernizr. Modernizr is great and I use it all the time but I also have a rule, if I can do it with CSS instead of JavaScript then I’ll do it with CSS. And it’s seems soon we’ll be able to feature check with CSS. @support only works in Opera and Firefox Aurora according to this post on Dev Opera. And like most CSS, if the browser doesn’t support it, it just passes it by.

The great thing about @supports is how easy it is to use:

1
2
3
@supports (transform: rotateX(0deg)) {
    // CSS goes here
}

It’s pretty much an if statement right in your CSS.So why this over Modernizr? One reason, you don’t have to load a Modernizr JS file anymore and since most of the time, and I’m guessing most other devs are like this, I’m using Modernizr to check for CSS support, it makes sense to turn that over to CSS. Adding a few lines to your stylesheet is going to be faster than loading an external JavaScript file. Hopefully the Webkit browsers add this soon so we can really start using it. And I’m sure it will be in IR 11 in 2014.

What’s coming in JavaScript

Addy Osmani has a great post on his blog about some interesting things that are coming to the next version of JavaScript. There are a lot of features being added to JavaScript that are really going to help when developers are building complex apps.

Liven up a web page Apple style

October 25th, 2012

One thing I really like about Apple’s website is the smaller effects they add to it. And despite the really misleading pictures of the new iMac (I wish it was a half an inch thin!), I really think the animated bar charts are one of those tiny effects that can liven up a site. One thing I like about Apple’s effect is that it doesn’t trigger until you scroll down and it comes into view. Because otherwise the effect would be pretty useless. Now the question I had was how do you trigger the effect? Apple doesn’t use jQuery, they use vanilla JavaScript and CSS3 transitions. And it’s a lot simpler than you might think.

First the relevant HTML:

1
2
3
4
5
6
<ul>
    <li><div class="bar one"></div></li>
    <li><div class="bar two"></div></li>
    <li><div class="bar three"></div></li>
    <li><div class="bar four"></div></li>
</ul>

We have four bars and to start off with all their widths will be set to zero. Then when it comes into view, we use JavaScript to add a class of animate to the ul which will set the widths for each bar.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.bar {
    height: 50px;
    background: #00d;
    width: 0;
    transition: width 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000);
}
.animate .one,.animate .two {
    width: 100%;
    transition-delay: 300ms;
}
.animate .three {
    width: 50%;
    transition-delay: 210ms;
}
.animate .four {
    width: 25%;
    transition-delay: 100ms;
}

We add a transition delay on each bar just to give the transitions a more interesting effects. The HTML and CSS are pretty simple so let’s move on to the JavaScript.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
var ul = document.querySelector('ul');
var ulTop = ul.offsetTop;
var winH = window.innerHeight / 2;
var inView = ulTop - winH;

function animate() {
    ul.classList.add('animate');
}

function checkPos() {
    var top = document.documentElement.scrollTop || document.body.scrollTop;
    if (top > inView) {
        animate();
    }
}

document.addEventListener('scroll', checkPos, false);

Not that much JavaScript here, we grab the ul and use offsetTop to see how many pixels from the top of the page it is. Then we get the window’s height and divide it by two. Finally, we subtract winH from the ul’s position so that we’ll know when the ul is in the middle of the viewing area. We add an event listener for when the user scrolls. We use scroll as opposed to mousewheel or something similar because we also want to check if the user is scrolling down the page using the arrow keys or page down. The only tricky part was finding the variable top in the checkPos function. You’ll notice the line of code:

1
var top = document.documentElement.scrollTop || document.body.scrollTop;

The first one, document.documentElement.scrollTop is for Firefox and document.body.scrollTop is for Webkit. If you don’t set both, document.body.scrollTop will return 0 for FIrefox and vis versa for Webkit. Finally, if top is greater than inView, we call a function called animate where we add the class of animate to the unordered list. When the ul is given the class of animate, all the widths of the bar divs are set and we get our animation.

This is one of the things I love about CSS transitions, we can do this with a few lines of CSS and a few more of JavaScript. And it really helps to give some life to a normally static web page. I must admit, the front end developers at Apple are some of the best when it comes to effects like this.

The jump from intermediate to advanced

October 23rd, 2012

I think it’s commonly accepted that there’s three stages of being a developer: beginner, intermediate and advanced. It’s debatable whether expert is a level because to be an expert means you know everything about that subject and I’ve yet to really see someone that everyone one agrees is an expert, at least in the web development world. So we’ll look at the other three. Every one of us is or has been a beginner. I remember looking at jQuery code and not understanding at all what was going on and why it was doing what it was doing. I can also remember reading articles on JavaScript and finally getting some of the more complicated concepts, like prototypes and the this keyword. The jump from beginner to intermediate isn’t that difficult, I think it mainly just takes putting in the time and coding until you get the main concepts of the language.

About a year ago I found myself taking a look at languages like Python and Ruby, messing around with .Net and even digging a bit deeper into PHP. Then one day I thought to myself, I need to pick one of these and concentrate on it because what good was having a basic knowledge of a bunch of languages. And then I realized something, I’d already done this with another language, JavaScript. Did I want to spend all that time learning a new programming language or did I stick with JavaScript and push past the intermediate level I considered myself to be at. I decided to stick with JavaScript, it was more relevant to my job and I enjoyed writing it. Why would I go back to the beginning with another language?

I think now that this is a fork in the road that nearly every developer reaches and I think most pick the path of learning a new language. Not because they can’t move on the advance stage of a language but because it can get boring at that point and a new language can be new and interesting. Think about JavaScript, really the beginning period of learning the language is the fun part, when you manipulate the DOM with animations and user interactions. How many developers read an article on a complicated JavaScript concept and say “Yeah, that’s not for me. But this Python thing looks cool”? That’s the main reason why I don’t think most developers make the jump from intermediate to advanced.

I think you’ll know when you’ve reached that advanced level. For me, it was when I was able to build things that I wanted without having to go look for examples first. I don’t mean doing the same things on every website but being able to know how you’re going to build something you haven’t tried before. I might not know that exact code I’m going to write and I might have to look some new stuff up but I’m going to know how I’m going to do it, it’s just filling in some of the blanks. Another part of it is being able to explain what you’re doing to others. There’s been a lot of stuff I’ve got to work, using parts from examples that I’d found, but I had no idea how it really worked. Now I know what every line I write does and I can tell you about it.

I understand that not every developer is going to have the time or the drive to push past an intermediate level and nor should they. But I do believe that the reason a lot of developers learn so many languages is because it’s easier to start at the beginning with a new language than it is to keep pushing on with one language. And the jump from intermediate to advanced is more difficult than they initially think and I can why that would stop people from trying to make that leap.

Make an HTML5 drag and drop project list with autosave – Part 2

October 7th, 2012

In the first part, I showed you how to set up our drag and drop list using HTML5’s built in drag and drop as well as add new projects to our list. Everything works great except it’s not really useful because every time we refresh the page, it resets and removes all the changes we’ve made. When I made this, the one thing I really wanted to do was make is super easy to use. I wanted to build it so the user never had to push a save button for any of their actions. To do this, we’ll use Ajax to save to our database every time the user makes a change to the list, so any time they reposition items, add an item or delete one. If you don’t know how to set up a database or save to one, then I’d advise that you learn that before you do this tutorial because I’m not going to go to deeply into that here.

The first thing we need to do is create a couple of functions that allow us to get the items order and then save it to our database. The database only needs two columns, one for the project information and one for the item’s position.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function listChange() {
    var tempItems = document.querySelectorAll('.projects li');
    [].forEach.call(tempItems, function(item, i) {
        var order = i + 1;
        var it = 'project=' + item.innerHTML + '&project_order=' + order;
        saveList(it);
    });
}

function saveList(item) {
    var request = new XMLHttpRequest();
    request.open('GET', 'save.php?' + item);
    request.send();
}

Our first function, listChange, we call whenever there’s a change to our list that’s not deleting an item. So we call it whenever an item is dropped into it’s new position or when a new item is added to the list. For each item in our list we call the saveItem function which saves the item and it’s order position. Obviously, if your list has hundreds of items, then this isn’t going to be the most efficient way to do this, but I think that because this is just a basic demo, we can get away with it here. In the saveItem function we use the simplest Ajax code possible to send the info to our save php file.

We also have a function for when we delete items from the list:

1
2
3
4
5
function deleteProject(item) {
    var request = new XMLHttpRequest();
    request.open('GET', 'delete.php?project=' + item);
    request.send();
}

It’s the same thing as our saveItem function except we send the information to the delete php file. We call this function whenever the deleteItem function is called. With these functions, we’ve covered every change that can be made to our list which will make our app a lot easier to use. The user will never have to worry about if their list is saved or not when they leave the page.

One thing about our save.php file. In order to save our order, we need to change the order number in our database when it’s changed. We need to check each item in our list on the web page and compare it to the version in our database and if the order number has changed, then we need to save the new version. Lucky for us we don’t need to manually do this. MySQL has a built in query that will check if an item is different than the version in the database and if it is then it saves it.

1
mysql_query("REPLACE INTO projects SET project_order = '$project_order', project = '$project'");

Replace Into checks if the version in the database is different and if it is, then it saves the new version.

You can check out the code on Github. Remember, this is as basic as something like this can get. I wanted to show the basics of how something like this could be done because most of the web app tutorials I’ve come across make something pretty complicated and some of the code is hard for beginners to follow. This should make a good starting point for anyone that wants to move beyond regular web sites and into web apps. Because I firmly believe that web apps will surpass native as mobile speeds get faster and mobile browsers get more powerful.

Make an HTML5 drag and drop project list with autosave – Part 1

October 2nd, 2012

One of the great things about where the web is going is that a lot of the functionality that we’ve had to create with JavaScript and plugins is now being built into the browser. One that’s pretty useful is drag and drop. Sure, we need a bit of JavaScript to get it to work, but it’s a lot less than we needed before when we had to create the functionality from scratch. If you haven’t used the draggable attribute then check out this post on HTML5 Rocks. I’m not going to go over the code because I got my code from there and that post is a lot more in depth than I’d do here.

What I’m going to do in the first part of this tutorial is show you how to add another item to our list and make it draggable as well as delete an item when you drag it over the delete div. In the next part, we’ll use Ajax and PHP to automatically save our list every time a chance is made. No jQuery here, everything is going to done with vanilla JavaScript.

To add a new item to our list, we just use a form and get the value of each form element by it’s name using form.elements[‘name’].

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
function addItem(e) {
   e.preventDefault();
   var newItem = document.createElement('li');
   var title = form.elements['project'].value;
   if (title === '') {
       return false;
   }
   var ownerIndex = form.elements['owner'].selectedIndex;
   var owner = form.elements['owner'].options[ownerIndex].value;
   var monthIndex = form.elements['month'].selectedIndex;
   var month = form.elements['month'].options[monthIndex].value;
   var dayIndex = form.elements['day'].selectedIndex;
   var day = form.elements['day'].options[dayIndex].value;

   var newContent = title + ' - ' + owner + ' - ' + month + ' ' + day;
   newItem.innerHTML = newContent;

   ul.appendChild(newItem);
   items = document.querySelectorAll('.projects li');
   addListeners();
   form.elements['project'].value = '';
}

This function is pretty straight forward, we get the values in our form and use it to fill out the text of our new item. Then we add the item to our list of projects in the document and add it to our items list to that we add can drag it. Finally, we clear out the projects input because our addItem function has an if statement that returns false if the projects input is empty so that we can’t add empty projects.

The delete div works a lot like the project items except you can’t drag it. We still have dragover, dragenter, dragleave and drop to work with. The one that we care the most about to be able to delete our item, everything else is pretty much the same as our project items.

1
2
3
4
5
6
7
8
function deleteItem(e) {
   if (e.stopPropagation) {
       e.stopPropagation();
   }
   el.parentNode.removeChild(el);
   this.style.borderColor = '#ccc';
   return false;
}

The line of code that matters here is el.parentNode.removeChild(el). Essentially what we’re saying here is get the parent node of the element and then use removeChild to remove that element. Nothing really complicated here.

These are the keys to getting this to work. Of course, right now, if you reload the page all the projects you’ve added are gone and the ones you’ve deleted are back. Not really useful but in the next part, we’ll add our AJax and PHP to save the list of projects and the order they’re in. Check out the demo and the code on Github.

Adobe Edge Code has tons of potential

September 27th, 2012

About a year ago, I wrote that Adobe didn’t get web developers and they were in danger of losing them. I’ve always felt that Dreamweaver had a really good code editor but the rest of the program has become bloated and is full of tools that I don’t think any self-respecting developer would use. Plus, like most Adobe products, it’s pretty expensive and considering all the tools out there for less or even for free, then who would buy it? I foresaw a future for Adobe that had them moving back to what they knew, design tools like Photoshop and InDesign and away from development tools. Because really, how could they compete with tools like Sublime Text 2.

Then Adobe shocked me and I’m guessing a whole bunch of people as well. They come out with a bunch of tools that showed Adobe might actually know what developers want. Edge Animate looks like it might end up being useful. I’m not too sure about Edge Reflow, it kinda just looks like Dreamweaver design view. But Edge Code is what really caught my attention. I’ve been keeping my eye on Adobe’s open source Brackets but I wondered if it was ever actually going to turn into something useful. Edge Code surprised me because it’s light and fast and pretty much everything an Adobe product isn’t.

I wanted to give Edge Code a real chance and decided to only use if to code this week. I can’t really give it a full review because it says right in the top right corner that it’s an experimental build and that’s obvious right from the start. Right now it’s really just a basic code editor but the fact that it’s made using HTML/CSS/JS is pretty impressive. Edge Code has two real killer features, Quick Edit and Live Preview. Quick Edit let’s you select an HTML tag and bring up just the CSS for it that let’s you edit it right there in your HTML file. It also does the same thing for JavaScript functions, you select quick edit on the function call and it opens the function for you to edit. Being able to edit only the CSS for a specific tag saved me a ton of time updating a site this week. I didn’t have to dig through the hundreds of lines of CSS to make some quick changes.

Live Preview has some potential. Right now it only works with Chrome and, at least for me, it only shows changes to the CSS. It doesn’t show updates to the HTML, which would really make it amazing.

As cool as those features are, I can’t say that Edge code is ready for everyday use. There’s a few things that it’s missing. There’s no word wrap yet but I’ve been told they’re working on it. You can’t drag files on to it to to open them which really drives me crazy. Also, there’s no tabs at the top, there’s just the list of files that are open in the sidebar. I don’t think this is a deal breaker but it’s a weird decision because I’m pretty sure 99% of other browsers have them.

Download Edge Code and play around with it. Keep your eye on it because I’m sure it’s going to to be a really good editor but it’s not there yet. And the great thing about it is it’s open source, so if there’s something about it that you think really needs fixing, then you can fix it.

Use CSS if you can then fall back to JavaScript

September 21st, 2012

I have a rule when I’m making a website and that’s if you can do it with CSS, then do it with CSS. And recently I had a situation where I was updating some slideshows on a site and it gave me to perfect opportunity to follow this rule. The sliders were made with Flash because I’d made them 4 years ago and since I only updated them once a year and the client was fine with how they were, I just ended up throwing in new images. But this year, I had some extra time and I realized, it would be so much quicker and easier to just throw new images into a folder then have to remake the sliders in Flash.

I wanted to use CSS to handle the fading in and out transitions that the slideshow was going to have. But, of course, no version of Internet Explorer supports CSS transitions (IE 10 will, but that’s a while off yet), in order to make it work I would also have a JavaScript backup. Why did I want to use CSS transitions and why didn’t I just do the whole thing in JavaScript? Remember, JS can only do one thing at a time, so if we can offload the transition effect to CSS and that’s one less thing the JS engine needs to worry about. I’m not going to go line by line, I’m just going to go over the basics. But you can check out the full code here.

The first thing we need to do is load modernizr to check if the browser supports opacity or CSS transitions. And our basic CSS looks something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.slider {
   width: 261px;
   height: 193px;
   overflow: hidden;
   position: relative;
   border: 5px solid #000;
   margin: 30px auto 0;
}
.slider img {
   position: absolute;
   top: 0;
   left: 0;
   opacity: 0;
}
.csstransitions .slider img {
   -webkit-transition: opacity 2s ease-in-out;
   -moz-transition: opacity 2s ease-in-out;
   -ms-transition: opacity 2s ease-in-out;
   -o-transition: opacity 2s ease-in-out;
   transition: opacity 2s ease-in-out;
}
.slider .show {
   opacity: 1;
}

The key here is that we set all the images in our slider to have an opacity of zero and we use the csstransitions class modernizr will add to our html tag so that only browsers that support them will bother with that CSS. And we create a class called show that we’ll apply to the image we want to be visible.

1
2
3
4
5
6
7
8
if ($('html').hasClass('no-opacity')) {
   for (var i = 0; i < imgs.length; i++) {
       $(imgs[i]).css('opacity', '0');
   }
   $(imgs[0]).css('opacity','1');
} else {
   $(imgs[0]).addClass('show');
}

We check if the browser supports opacity, if it doesn’t then we use jQuery to give all the images an opacity of zero, except the first image. If the browser does support opacity, then we just need to apply the show class to the first image.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
function slideShowCSS() {
   if (timer < slideTime) {
       timer += 10;
   } else if (timer >= slideTime) {
       if (curImg < imgs.length - 1) {
           $(imgs[curImg]).removeClass('show');
           curImg += 1;
           $(imgs[curImg]).addClass('show');
       } else {
           $(imgs[curImg]).removeClass('show');
           curImg = 0;
           $(imgs[curImg]).addClass('show');
       }
       timer = 0;
   }
}

This function essentailly does one thing, it increases a variable called timer until it’s more or equal to a variable called slideTime and if it is, it removes the class show from the current image and adds it to the next image. Then the CSS takes care of the fade effect. There’s also a function called slideShowjQuery which is pretty much the same, but instead of removing and adding a class, it uses jQuery’s animate method to get the fading effect. How does the code know which function to call?

1
2
3
4
5
if ($('html').hasClass('csstransitions')) {
   setInterval(slideShowCSS, 20);
} else if ($('html').hasClass('no-csstransitions')) {
   setInterval(slideShowjQuery, 20);
}

The same way we checked if the browser supported opacity or not. We check if the html tag has a class of csstransitions and if it does, then we use setInterval to call slideShowCSS every 20 milliseconds. If it has no-csstransitions, then we call slideShowjQuery.

You can check out the full code on Github. Remember, this isn’t a plug-in that you can configure, it was built to do one thing. But I thought that it was a good example of how we should be coding where we use CSS when we can to free up our JavaScript to do the things it’s best at.

You’re not the average user

September 16th, 2012

There’s one thing you can know for sure, if you’re reading my blog, you are definitely not an average Internet user. Why? Because if you know anything at all about web design or development, you know more than the average user. And this is something I think most designers and developers forget. We need to remember when we make a site or an app that there are conventions that we take for granted that the average user has never heard of. Think about this, I know people that work with computers daily and didn’t know you could copy and paste using ctrl+c and ctrl+v because they’ve never had to use it.

It’s not that the average user is stupid, it’s just that to them the Internet is like their TV, they just expect to turn on the web and go to the sites they like. I have no idea how my TV works, I just turn it on and pick the channel. I’m vaguely aware about all the work that goes into creating a TV show, but if you wanted me to make one, I’d have no idea where to start. Of course, building most websites aren’t as complicated as making a TV show, maybe a site like Amazon is close, but I think the analogy works. So my point is, imagine if you had to have knowledge of the TV world in order to understand a TV show. It might be popular with some TV people but it would completely flop with the majority of viewers.

I see tweets from people that code or design on their MacBook, surf the web on their iPad and play games on their iPhone. Some of them are in a bubble where the idea that some people haven’t used any of those devices doesn’t even occur to them. This leads them to make the mistake that everyone is familiar with Apple design conventions. And the same goes for people that only use Microsoft products. We need to remember that there are people out there that have never even used a smartphone, so if you build a site that mimics smartphone apps, don’t assume everyone is going to automatically know how to use it.

We need to remember not everyone uses Webkit. If you make demo that only works in Webkit, that’s not a problem, but when I see sites that only work in Chome even though a couple of extra lines of CSS would make it work in Firefox and Opera, it scares me. Even Google does this on some of their sites. Webkit and Chrome are cool right now but people forget that Internet Explorer 6 was cool and look what happened there. I don’t think there’s a problem with sites that have extra effects in certain browsers but always make sure the site is still functional in other browsers.

Whatever you’re making, you need to remember that unless it’s a tool you’re building for other developers and only other developers, most of the people using it aren’t going to know things you know. I’m always telling the designers I work with, if a visitor to a site can’t figure out what they want in ten seconds, they’re going to push the back button and go somewhere else. If the search input is the most important thing on your site, then don’t hide it in a corner because you think it’s ugly, put it in the middle and build the rest of the site around it. Put the navigation in the normal places, sure it might be boring now but the user will always know where to look. These things are obvious really, but sometimes we forget because we’re in a world where we work with them everyday.