Welcome to the MacNN Forums.

If this is your first visit, be sure to check out the FAQ by clicking the link above. You may have to register before you can post: click the register link above to proceed. To start viewing messages, select the forum that you want to visit from the selection below.

You are here: MacNN Forums > Community > MacNN Lounge > Check Out My 10K Web App Contest Entry: Mustache Roulette

Check Out My 10K Web App Contest Entry: Mustache Roulette
Thread Tools
Apple Pro Underwear
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Aug 24, 2010, 02:43 AM
 
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.)
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 24, 2010, 03:18 AM
 
Cool!

Care to share how you incorporated HTML5 stuff?
     
SpaceMonkey
Addicted to MacNN
Join Date: Oct 2002
Location: Washington, DC
Status: Offline
Reply With Quote
Aug 24, 2010, 08:57 AM
 
You should go after Keith Hernandez for an endorsement.

"One ticket to Washington, please. I have a date with destiny."
     
Doofy
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status: Offline
Reply With Quote
Aug 24, 2010, 09:03 AM
 
Originally Posted by Apple Pro Underwear View Post
Help a brother out!
Ummm. OK.

Sustenance.

Been inclined to wander... off the beaten track.
That's where there's thunder... and the wind shouts back.
     
Spheric Harlot
Clinically Insane
Join Date: Nov 1999
Location: 888500128, C3, 2nd soft.
Status: Offline
Reply With Quote
Aug 24, 2010, 09:12 AM
 
^ Yeah. Sorry, that was the first thing that came to mind.

The Jigsaw app is way cool:
10K Apart | Inspire the web with just 10K.
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Aug 24, 2010, 12:11 PM
 
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!
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 24, 2010, 01:16 PM
 
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?
     
Apple Pro Underwear  (op)
Addicted to MacNN
Join Date: Sep 2001
Location: NYC*Crooklyn
Status: Offline
Reply With Quote
Aug 24, 2010, 03:51 PM
 
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...
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 24, 2010, 04:10 PM
 
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.
     
Doofy
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status: Offline
Reply With Quote
Aug 24, 2010, 04:39 PM
 
Originally Posted by besson3c View Post
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.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 24, 2010, 05:15 PM
 
Originally Posted by Doofy View Post
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.
     
Doofy
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status: Offline
Reply With Quote
Aug 24, 2010, 05:31 PM
 
Originally Posted by besson3c View Post
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.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 24, 2010, 05:48 PM
 
Originally Posted by Doofy View Post
"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.
     
Doofy
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status: Offline
Reply With Quote
Aug 24, 2010, 06:10 PM
 
Originally Posted by besson3c View Post
I already said, but in case it was missed or misunderstood...

A minifier removes white space.


Originally Posted by besson3c View Post
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.
     
besson3c
Clinically Insane
Join Date: Mar 2001
Location: yes
Status: Offline
Reply With Quote
Aug 24, 2010, 06:19 PM
 
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.
     
Doofy
Clinically Insane
Join Date: Jul 2005
Location: Vacation.
Status: Offline
Reply With Quote
Aug 24, 2010, 06:36 PM
 
Originally Posted by besson3c View Post
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 View Post
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.
     
   
Thread Tools
 
Forum Links
Forum Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Top
Privacy Policy
All times are GMT -4. The time now is 02:45 AM.
All contents of these forums © 1995-2017 MacNN. All rights reserved.
Branding + Design: www.gesamtbild.com
vBulletin v.3.8.8 © 2000-2017, Jelsoft Enterprises Ltd.,