MeFi stylesheet question

October 16, 2000 12:07 AM

Another minor one: Is there any reason why the MeFi stylesheet is being inlined into the html instead of linking to an external file? Is this a browser support workaround or something?

I know its not a very big sheet, but seeing that linked stylesheets can be cached, that would knock off about 2K for every page viewed.

posted by lagado to bugs at 12:07 AM (20 comments total)

In answer to my own question.

I guess the stylesheet is being dynamically generated based on the user's profile, so I guess then you would need to generate and link to the right one for that particular user.

Probably more trouble than its worth for 2K.

cheers


posted by lagado at 12:15 AM on October 16, 2000

;-j
posted by lagado at 12:16 AM on October 16, 2000

Yeah, the styles are dynamically generated as an include. I suppose I could session preferences, but I'm not sure if that would save processing.
posted by mathowie at 1:18 PM on October 16, 2000

Fair enough.

Actually, I was thinking more along the lines of :



where a stylesheet is generated for each user based on their preferences. The browser will only download this file once and cache it.

Anyway, probably a bigger gain could be made more easily by deleting all the white space and carriage returns.

(I'll shut up now.)

posted by lagado at 10:41 PM on October 16, 2000

Fair enough.

Actually, I was thinking more along the lines of :

<link rel="stylesheet" type="text/css" href="http://www.metafilter.com/images/lagado/style.css">

where a stylesheet is generated for each user based on their preferences. The browser will only download this file once and cache it.

Anyway, probably a bigger gain could be made more easily by deleting all the white space and carriage returns.

(I'll shut up now.)

posted by lagado at 10:42 PM on October 16, 2000

White space is just tab characters, a carraige return's a byte. The saved download time you'd experience is very minimal.

I like clean html (and related) code, and I think it's important, especially on high profile sites.

Now that I've actually looked at the code (for this page) I relized something I could do to my own stylesheets to clean 'em up a bit (never you mind what that is, either :-) and therein proved my point... clean code on high profile sites is important, because people are going to look at that code (as you and I prove) and if they can learn good things about coding from these sites, so much the better.
posted by cCranium at 7:25 AM on October 17, 2000

Dammit, I tried to read this thread on N4.6, but I think that "" was picked up by the browser, and as a result, I got the lovely "HTTP/1.1 404 Object Not Found" message.
Not that I know much about what happened, but it was annoying nonetheless.

Stupid browser...

posted by Avogadro at 7:46 AM on October 17, 2000

Duh... well, I was referring to the example link that lagado created three posts ago...


(going back to html manual to continue education...)
posted by Avogadro at 7:50 AM on October 17, 2000

Avogadro, a quick glance at the source says you got the html right, it's just the way MeFi handles <s and >s. To get them to display, you have to use the escape characters,(&lt; less-than and &gt; greater than)
posted by cCranium at 11:25 AM on October 17, 2000

note: when trying to use the greater-than and less-than symbols in MeFi proper, you have to escape the ampersand first, using &amp; so you end up typing (here's hoping I get this right :-) &amp;lt; for a less-than symbol.
posted by cCranium at 11:28 AM on October 17, 2000

(woohoo!)
posted by cCranium at 11:28 AM on October 17, 2000

oh btw, I cleaned up the main site subpage sheet as a test. go to any thread detail or about page, etc, and let me know if it seems tighter.
posted by mathowie at 9:05 PM on October 17, 2000

Thanks cCranuim! 'preciate the help.
posted by Avogadro at 7:45 AM on October 18, 2000

sorry, that's CRANIUM.

(going back to anatomy textbook...)
posted by Avogadro at 7:47 AM on October 18, 2000

Alright, pretty soon I'm going to have to start a thread telling everyone how to spell my nick. Is it really that difficult to type? :-)
posted by cCranium at 11:32 AM on October 18, 2000

So I lied about shutting up.

White space is just tab characters, a carraige return's a byte. The saved download time you'd experience is very minimal.

I think you'd be surprised at how much of a saving you can make by cleaning up on white space. I would put the figure on this site at around 20%.

I like clean html (and related) code, and I think it's important, especially on high profile sites.

I disagree. While its nice to be able to comfortably read source, I think reducing page download time (and cost) should still be seen as important considerations.

posted by lagado at 3:36 AM on October 19, 2000

I disagree. While its nice to be able to comfortably read source, I think reducing page download time (and cost) should still be seen as important considerations.

hey, this snuck up on me. sorry 'bout the delay.

The reason I think high profile web designer sites (admittedly, I didn't qualify "high profile" with designer before, but that was what I meant, honest :-) should value clarity over efficiency is because they're the ones users (new and old) are going to be view sourcing.

Making the pages legible means that your good code is easy to read and understand.

And I finally actually viewed the source here, to see what whitespace you keep talking about.

To interject, I'm deconstructing your code to be mean Matt, and I'd love to hear any reasoning behind the way you code. Actually, it's legible which is my primary goal whenever I code. I'm far more impressed by it than I am offended. (? for lack of a better term, I guess.)

The excess whitespace mostly exists in and around the style sheet, and most of the "misuse of data" if there is one exists in using spaces to indent rather than tabs. Each tab character uses just as much data as a space character, so it's much more bandwidth-friendly.

Alright. I'm not proud of what I just did, but it's been a terribly slow afternoon, and at least it got me doing something other than refreshing the MeFi front page.

I took all the data from this page, starting with the openning style tag, and ending with the closing style tag.

From there I took out all the non-white space, and saved the file down. (hey, I said I wasn't proud, just shut up! :-)

Finaly tally is 1,112 bytes of whitespace, or 1k. So while I will concede that there's definetely room for fine-tuning, it's less than a freakin' k man, and that's NOTHING. That's not even a half-second on a 28.8k connection. Any kind of speed improvement you get from removing that whitespace won't be noticed by anyone other than the oldskool freak using an acoustic 300 baud modem.

While I appreciate the efficiency argument, clarity and cleanliness in my code (and again, this is all really just about our personal coding styles) is far more important to me.

I'm enjoying this. I love talk about coding. If you want to make it easier to continue this (so I don't let a few days lapse without catching it) feel free to take it off-list.

(unless other people want us to continue on)
posted by cCranium at 2:08 PM on October 20, 2000

And, completely aside, I really like the idea of a per-user generated stylesheet. That'd be a nifty way to do it.

But what happens when a user changes their preferences? Append a count to the filename to force a recache? Or can you put an expires metatag in a stylesheet-only file?
posted by cCranium at 2:11 PM on October 20, 2000

Okay, I'll concede on the clarity vs size one.

Use tabs instead of spaces, Matt, dammit!

;-j

I don't think you'd need to do anything to get the stylesheet to reload. If a user changes preferences, a new file will get written over the old one and that will get picked up because of teh new modified date.

posted by lagado at 8:28 PM on October 22, 2000

Okay,I'mConvinced--I'mNotGoingToUseSpacesAnymore.WastesTooMuchBandwidth.Thanks,lagado!:)
posted by webmutant at 2:22 PM on October 25, 2000