|
|
Check Out My 10K Web App Contest Entry: Mustache Roulette
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
Hi Everybody,
I have mentioned I was working on this in previous posts and I thought I would share the final result with my MacNN peepz. The gist of the contest is that the ALA guys are trying to promote HML5 and etc with a 10K sized web app contest. I tried to make something fun and entertaining as my submission.
Mustache Roulette:
10K Apart | Inspire the web with just 10K.
If you dig it, please vote and comment. It doesn't require a "real" name nor a email. Help a brother out!
It was pretty difficult to make it that small. Once you start writing the code the KBs start piling up! I had a more elaborate plan but it had to be scaled down significantly.
Check out the original comps I made:
Start page:
1. Start | Flickr - Photo Sharing!
Loading pages:
2. Loading 1 | Flickr - Photo Sharing!
4. Loading 2 | Flickr - Photo Sharing!
Form:
3. Main | Flickr - Photo Sharing!
Final page:
5. Final | Flickr - Photo Sharing!
Thanks for the support! You guys are the best.
(If you looked at the Flickr photos — FYI, my friend Andy had to quit at the last moment so I ended up doing the whole thing myself.)
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Cool!
Care to share how you incorporated HTML5 stuff?
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Oct 2002
Location: Washington, DC
Status:
Offline
|
|
You should go after Keith Hernandez for an endorsement.
|
"One ticket to Washington, please. I have a date with destiny."
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status:
Offline
|
|
Originally Posted by Apple Pro Underwear
Help a brother out!
Ummm. OK.
Sust enance.
|
Been inclined to wander... off the beaten track.
That's where there's thunder... and the wind shouts back.
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Nov 1999
Location: 888500128, C3, 2nd soft.
Status:
Offline
|
|
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
Thanks guys. I've been burned in the voting! LOL, I'm under 3 stars! I wish I could express how strapped I was in KBs to the voters but I'm still very happy I competed. Even if I did the whole thing in canvas, It would still be close to 10K. Oh well, no excuse.... I appreciate my MacNN peepz helping though!
HTML5 Code Wise —
You can see it's more semantic with some additions to the global/default selector set like nav and footer have here in the app. When I use the new elements, I apply a display: block on them as they are currently inline elements. Simplified Doc type as well but specifying the character set is real important.
I could have left out the script "type" as it is automatic now as well. Felt a bit weird still using a "wrapper" but whatever, it seems llike everybody still uses it from all the examples I looked at.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Mustache Roulette</title>
<meta charset="utf-8">
<meta name="description" content="Mustache Roulette">
<!-- Typekit -->
<script type="text/javascript" src="http://use.typekit.com/swh7ack.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>
<!-- CSS -->
<link rel="stylesheet" href="css/main.css" />
</head>
<body>
<div id="wrapper">
<nav>
<h1><a href="app.html">Mustache Roulette</a></h1>
<h2><a href="app.html">Begin!</a></h2>
</nav>
<footer>
<p>Bringing Sexy Back, One Mustache at a Time:</p>
<p><a href="mailto:[email protected]">Jack Tse</a> | <a href="http://twitter.com/typesett">@typesett</a> | <a href="http://typesett.com">TYPESETT.com</a></p>
</footer>
</div>
</body>
</html>
Thanks so much for the support! MacNN in the hizzouse!
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Thanks Underwear!
As far as staying within 10k or whatever amount of space, do you personally favor web server based compression, or white space stripping based compression?
|
|
|
|
|
|
|
|
|
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status:
Offline
|
|
Well, it depends on scale if compression is a priority, right?
If you have a large website and administrators to take care of the high performance environment, server compression techniques are great (and if the content being served is conducive to it).
But for flexibility's sake and less initial work to get it up and running, minifying code is the way to go I think.
I'm no expert though...
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Yeah...
I just hate the inconvenience of minifying and deminifying code, especially when this is unnecessary with compression at the server level (bzip, gzip, whatever). I have the luxury of having full control over my server and being an environment where it scales....
On the other hand, minifying also seems comparatively less elegant of a solution. I don't fault anybody for doing this given the fact that server side compressions still seems fairly rare, but I wonder why it isn't more common? When compressing you are saving bandwidth and disk I/O, consuming processing power. The net effect when you have the processing power is faster page loads (on sites with a lot of white space to compress). However, it also seems normal across any server infrastructure that I've come across that there is an abundance of processing power in comparison to bandwidth and disk I/O.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status:
Offline
|
|
Originally Posted by besson3c
I just hate the inconvenience of minifying and deminifying code
Web Site Maestro.
|
Been inclined to wander... off the beaten track.
That's where there's thunder... and the wind shouts back.
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by Doofy
Thanks, I have a CLI tool that I use from time to time for minifying which works fine, it's not that I dislike my tool, it's that I dislike the premise of having to use anything when it seems like an inelegant thing to do.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status:
Offline
|
|
Originally Posted by besson3c
Thanks, I have a CLI tool that I use from time to time for minifying which works fine, it's not that I dislike my tool, it's that I dislike the premise of having to use anything when it seems like an inelegant thing to do.
"Inelegant"? How so?
|
Been inclined to wander... off the beaten track.
That's where there's thunder... and the wind shouts back.
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
Originally Posted by Doofy
"Inelegant"? How so?
I already said, but in case it was missed or misunderstood...
A minifier removes white space. A compression tool such as zip, gzip, bzip works in a similar way which is why text files can be significantly compressed and files that are already compressed like jpgs or movies can't really be compressed much further.
There are several Apache modules and modules for other web servers I'm presuming (lighttp, nginx, etc.) that compress text documents (and others, if you configure them to do so) on the fly. Providing you aren't CPU bound, the end result is less bandwidth consumed, less disk I/O consumed, faster page serving, and you can cache the request as well on the server side. You don't have to minify any text documents, and you can log your bandwidth savings to establish analytics and tweak what gets compressed, how aggressively to compress/cache, etc. There are those that feel (myself included) that this is a more elegant and effective way to compress text documents, but if these modules are not enabled by default this is a moot point since there would be no choice but to minify.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status:
Offline
|
|
Originally Posted by besson3c
I already said, but in case it was missed or misunderstood...
A minifier removes white space.
Originally Posted by besson3c
There are several Apache modules and modules for other web servers I'm presuming (lighttp, nginx, etc.) that compress text documents (and others, if you configure them to do so) on the fly. Providing you aren't CPU bound, the end result is less bandwidth consumed, less disk I/O consumed, faster page serving, and you can cache the request as well on the server side. You don't have to minify any text documents, and you can log your bandwidth savings to establish analytics and tweak what gets compressed, how aggressively to compress/cache, etc. There are those that feel (myself included) that this is a more elegant and effective way to compress text documents, but if these modules are not enabled by default this is a moot point since there would be no choice but to minify.
Why not do both?
|
Been inclined to wander... off the beaten track.
That's where there's thunder... and the wind shouts back.
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Mar 2001
Location: yes
Status:
Offline
|
|
If you want to use a tool like this to do both in batch, sure. Removing comments is an interesting way to further optimize, although of course there is benefit to leaving them in. I use Photoshop for optimizing my jpgs for the web and creating transparent PNGs and stuff, but if a tool like this makes things easier, awesome!
There is no benefit from minifying *and* compressing a text file though, it doesn't make sense to do both. There is no loss either, but just no real point to do both.
|
|
|
|
|
|
|
|
|
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status:
Offline
|
|
Originally Posted by besson3c
If you want to use a tool like this to do both in batch, sure. Removing comments is an interesting way to further optimize, although of course there is benefit to leaving them in.
I can't see benefit to leaving comments in, unless you're collaborating with other programmers on the production server.
Way this works is to create a copy of your source folders and optimise that, so your original working copy is still all nicely laid out and commented.
Originally Posted by besson3c
I use Photoshop for optimizing my jpgs for the web and creating transparent PNGs and stuff, but if a tool like this makes things easier, awesome!
You really should grab a download and play for a bit. Seriously.
|
Been inclined to wander... off the beaten track.
That's where there's thunder... and the wind shouts back.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
Forum Rules
|
|
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
|
HTML code is Off
|
|
|
|
|
|
|
|
|
|
|
|