i’ve told you. intranet not internet. no invitation if not employed.
whitespace + long names used for the normal and easy readability of the developing code = a lot of waste. hence, cut these down in the production code. keep the best of both worlds. images are not common. we don’t have a use for them. intranet. fewer the better.
i was fighting with you on the rounded corners exactly about that: wrapping empty divs for presentation. now you come and tell me: “I would suspect presentational markup, classes on elements that don’t need classes, outdated markup techniques… just from everything else you are saying about it and my experience whenever this comes up.” come on
@Sega: one site, in which team i am, probably has about 60 or so, i never counted, they grow every 2-3 months. and yes, on the production they are 1-3 chars long. that’s why on the developing code we can afford innerOuterBrighterDarkerThingieBingie and that’s why i’m thinking to make a project, probably in java, to fully automate this. it will give me a chance to tackle java for real
no visitors: users. no internet, intranet. how many users per hour you mean!
but i guess if you look at google’s page code, you’ll see the same thing.
You know, I always laugh when people contradict themselves THIS badly:
So which is it?!? Sorry, but you’ve basically just flushed ANY credibilty down the toilet on that.
Which means your knowledge of deployment for the Internet means jack. Helps explain why almost EVERYTHING you’ve said is the exact opposite of common sense for INTERNET deployment. Hell, since you’re talking Intranet crapplets do you even have to THINK about cross browser? That would mean you could say “everyone that works for us uses THIS browser, don’t like it, there’s the door” which would explain a HELL of a lot about the stuff you’ve been saying.
Though again, I highly suspect that given what you’ve said, your code is problematic and riddled with bloat… but of course since you’re all secretive about that, we are all left to guess. What’s a matter? Afraid we’ll see the truth?
Hell, just give us a page snippet and do a replace on the content with dummy content (of the same bytecount, please, no cheating) – that way we can all either laugh at you, or bow down to your greatness depending on what we see. To put it in the modern vernacular, Tits or GTFO – that’s a joke.
The markup ALONE could speak volumes your Engrish cannot. Again, to ask a simple question, what’s your CTC ratio on the markup, and overall for the code, both before and after whitespace compression. Easy numbers to calculate (gimme a URL, it takes 30 seconds). If markup-wise it’s more than 3:1, and if overall it’s more than 8:1, your problems run pretty deep.
i never invited you to one of our intranet sites. if i wish i couldn’t, you know, because of the routers i invited you though to a coding contest about rounded corners, here, on sp, but you never answered back. still don’t remember? it’s ok, i don’t mind
no, that means that you think my knowledge of deployment for the Internet means jack. it’s ok also
I understand what you’re doing, and I understand it must be saving you guys money. But to me it seems very complicated from the management front. How would one know what .wa1 is? Is there automatic compile software out there that can deal with this?
You probably compress everything to one line too, alongside with this naming format.
Personally for me, your method would not be feasible, but I can see it working on a huge website quite easily.
Forgive me, like most here we keep thinking in terms of websites, so forget my users question. Would your method work for a large internet website? In theory it should.
However, I have not witnesses many sites using your method.
So now 1+1 doesn’t equal two? You have two copies – the original and the deployment one.
Don’t spend a lot of time around ASP, Perl or PHP programmers, do you? The internet is NOT a compiled language, it shouldn’t be treated as one.
If by ‘better’ you mean +/- 15 bytes.
I believe once again you failed to comprehend what I was saying. The negligable savings are not worth the time, effort or headaches involved with it… that’s all I was saying.
HTML isnt’ a compiled language, and again shouldn’t be treated as such. MAYBE it’s just because I’ve had to go in and clean up other people’s messes where some other coder minified, you get hired to clean up their shlock and go “do you have a non-minified copy of this” and the site owner goes “huh? What’s that?” – It’s a waste of time at best.
Uhm… DUH. At least if the original non-minified code has meaningful classnames and proper formatting you might be able to pull some form of useful information from it?!?
Because a whitespace stripped copy is such an illegible mess you can’t tell where anything begins or ends, that’s how. Because class shortening or function shortenting in javascript turns it into gibberish? Again, that’s a no brainer.
… Of course I give a list of examples and you didn’t even comprehend it. As I said, “in my experience” – Every time I’ve seen whitespace compression used, the sites in question had all of the above, basically **** that time should have been spent fixing INSTEAD of sleazing it out with some whitespace compression tool. See the 10:1 or even 100:1 code to content ratio’s that are polluting the internet these days; it’s sad when people are using CSS and JS to ‘save bandwidth’ and end up with pages that are even more bloated trash than if they’d just written it in HTML 3.2!
Though… I’ll show you mine if you’ll show me yours on this. I mean, take my code at:
It’s not even worth wasting my time on whitespace compression with that. As is I’ve got 11k of markup compressed to 4k, 11k of CSS compressed to 3k - by the time you whitespace strip you’re lucky if it saves 1k total betwixt the two BEFORE compression, which means double digit bytes after compression. Not even worth the hassle. (especially if the server caches the compressed copy of the CSS). My average page on a website these days maintains less than a 2.5:1 code to content ratio on just the markup, and a 5:1 overall code to content ratio. White space stripping the markup would chop off around 800 bytes, which wouldn’t even show up as more than 30 bytes on the compressed copy, and make the php that’s generating it an illegible mess to boot.
Let’s see one of yours and we’ll compare. (I’ve noticed you’ve never once linked to code you’ve written…)
so i see: you have no extra spaces in your code, no extra cr’s no extra lf’s, only continuous lines of code all your class or id names are about 1 to 3 chars long, and so on no likely my friend!
you can disagree, and so can i
“maintainability headaches of having to maintain two copies” doesn’t exist. you have the original and the compiled version, not two copies. developing and production versions. like every good programmer i know
“any good server will have gzip compression” and it will make an even better compression on a minified code.
“more importantly if white-space stripping makes that big of a difference” which is… what? are we talking kilos or pounds here? or mine is bigger, yours is smaller kind of thing? it makes A difference, which is something in most cases. have you run extensive tests to compute an insignificant gain in 99.99% of all the cases? or are you basing your facts on personal coding preferences?
“is not worth the loss in code legibility” which is… when? you have the developing coding, don’t you? it’s not about you or your team, is it? your pascal source code was available to all users when they run your compiled programs?
“god help the next person to maintain it should they not have access to the original” and so is everywhere on programming heaven what makes you thing that having access to the original code will make any difference?
“In my experience 99.99% of the time you have people screwing around with whitespace stripping/minification it’s a pathetic cop-out to try and hide fat bloated outdated garbage coding… like slapping DIV around EVERY tag, classes on EVERY element, deprecated tags/attributes that have no place on code written after sometime around 2001, javascript/AJAX for nothing and non-semantic presentational markup.”
this one is to get some steam off, isn’t it ? how could stripping/minification hide the “slapping DIV around EVERY tag, classes on EVERY element, deprecated tags/attributes that have no place on code written after sometime around 2001”? what it has to do with “non-semantic presentational markup”?
develop general styling and custom styling in separate files. for testing use link elements to point to all the stylesheet files. than do some more work before deployment with your coding: gather connected style files in a big one, find redundancies, “compile”.
it’s better to separate the developing process from the deployment process. if you’ve programmed anything else at all, you know that there is an intermediate phase you don’t have here: compilation. this one is not present here, but…
upon finishing, you do what any normal developer is used to: “compile” you every piece of code. use specific tools to minify html, css and js code: remove white space characters, new line characters, comments. hell, i’m even for what a real compiler does: change the names for variables, functions, methods. your final code doesn’t have to make sense for the reader, doesn’t need to be readable at all not for the end user or the occasional curious, but it needs to be fast and working properly. by making a site you don’t teach the web, you develop and deploy. your final page doesn’t need live edit, all good coding is not done hasty. when you need to make mods, start from the top: make mods in the “for developing” version, “compile” it, then deploy it.
you may argue: instead of a one step you may have more. well, you’ll always have the source and the compiled versions for any normal programming environment. why not here?
and this way you don’t have to worry about stupid class or id names, stupid commenting or any other moot points
See, I never understood that – why would you want different editors when all you are doing is working with plaintext?!? (but that’s like when writing templates or US English sites I wonder why someone would EVER use anything other than 7 bit ASCII)
But then, there’s a lot of things other people do that I don’t understand why they waste their time with – see that steaming pile of shmutz known as Dreamweaver.
Completely. Maybe it’s just my eyes, maybe it’s that I was coding some two decades before there even was such a thing… I still remember when Turbo Pascal 4 came out with it, and I couldn’t read one bit of it… have NEVER been a fan. If find the acid trip of colour highlighting completely illegible and headache inducing. To me it’s more of the “Gee ain’t it neat” bull leaving me to ask “Yeah, but what the hell good is it?!?”
But it’s like when people put extra spaces around operators – I can’t figure out where anything begins or ends, and I end up asking “what, are people punctuation blind?!?”
Though I think a lot of the blame for that one can be laid squarely on “courier new’s” shoulders. WORST font for a text editor – EVARRRRR!!!
Been half tempted to open up fontforge and make a .ttf version of FixedSys that’s got UTF-8 extended in it.
Colour Syntax Highlighting – Sorry, I’m not a fan of acid trips IRL, why would I want one in my code. Are people like… punctuation blind or something? I really don’t get the point of colour highlighting apart from making the code harder to read.
FIREBUG all the way!! priceless for all the CSS debugging.
Off Topic:
@deathshadow60,noonnope
you both know that your both suffering from simple misunderstanding, 90% of problems in life are caused by misunderstanding, so consider trying to understand all the meanings before writing something and keep the insulting and branding of each other in PM.
well it’s in topic but has nothing to do with the title of the page…
@noonnope
deathshadow60 says man-hours are more expensive than buying better equipment to handle the increase in demand, and I’ll agree with him, unless your man-hours are really cheap or the demand is unbelievably high (or both).
@deathshadow60
mind I ask you, what is a CTC ratio??
(like I said though, if I could rewrite them I would, in this case based on Nielsen reports)
BUT! The back-end guy wanted the id’s to be the same as the names (exceptions be radios and checks), so my id’s aren’t MY id’s. If they were MY id’s, they’d be a heck of a lot smaller, and it doesn’t matter to me if there are multiple forms who would have the same id’s, because they are never on the same page.
…aaand, if you’re using ARIA, you have an ID on the label in addition to the for attribute, and that must match the aria-labelledby attribute.
But so far, because ARIA ones will override for attributes, I’m leaving them out because I already have the for in there, why do I need a second? plus it means more id’s on everything… bleh. Better to only add it on form controls who change due to JS crap or something, for now.
HTML4 (but the original site was XHTML so the template was set up already with /> on everything), labels above (not floated next to) inputs, and aria-required on required inputs if there are any requireds.
there isn’t yet a complete serious tool to canvass consistently through all three layers and make the changes accordingly in all of them. like changing the class/id names the same in your html markup, in your css style and in your javascript code. i’m still looking for one. until then, semi-manual labour. i even thought of starting to build one myself… given the time, which i don’t really have right now. i’d be happy to participate in a project of this sort though
otherwise, you can look for css minify or javascript minify (which you’ll find more of) and take your pick.
but i do recommend you this way of doing things. there are already small steps made in this direction today, and it’s a proven method in the history of programming.
Just never make a maze of it.
Sort your tags geographically situated in your dom tree, from North, East, South to even West if you want.
Do everything you want but manage.
Tip: you can make comments to general things through the website where you hold every related CSS class/ID.
/* fonts /
/ forms */
@deathshadow60 I found your post very informative.
Just wondering, what text editor do you prefer and do you use any shortcuts when coding to speed up the process. Much of coding is the same so something much be done to speed up the code. Have separate files and using import in CSS is clearly out of the question.
@kenquad can you post a sample CSS file you did for a site, so we can look at it, and maybe I could say what I would do different. What I do is I group things in my CSS. For instance:
/* main text */
.maintext {}
.maintext li {}
.main text .quotes {}
… and so forth. So everything is pretty much grouped. I once did a CSS file for this 500 page website (yes 500 pages), which needed 1000+ lines of CSS code, some of which was not mine. I condensed most of it by using shorthand, but it was still 500 - 600 lines. I then used CSS compressor, which compressed everything. It make some difference in the file size (approximately 35% reduction), but was a pain from making future edits.
I saw an advert for a company that say they were looking for a coder who “organized his CSS, alphabetically”.
I actually have resorted to more or less alphabetical sorting at times, not manually changing the sheet but using a code explorer. The problem there was when I had specific selectors such as div.style1 and div.style2… They would all end up under, well, “D”…
I follow Ryans approach. I start with a very simple reset. After that I aways declare some general classes: floats, dispays and clears, in every possible combination (this helps me to keep the style sheet organized), because before I always found my self creating a new class when I needed something floated or cleared, but this way I just add an already existing class to an already existing element. After that that indeed from header to footer.
About the comments! I always comment, no mather how long or short the stylesheet.
First, organize your selectors contextually.[list]
[]Global selectors
[list]
[]elements
[]classes
[/list]
[]IDs and their selectors that differ from global values
[list]
[]elements
[]classes
[/list]
[/list]
Once you’re organized, you are likely to find many of the class selectors are not really needed. On the chance that each of those thousand classes really are necessary, go to your graphics dweeb, rant and rage and jump up and down on his desk. Then calmly suggest their is no benefit to micromanaging every third word in the site; that there should be a continuation of style/design from one page to the next**. Thus, no need for so many classes.
cheers,
gary
** Many times, the sales wonks want a different overall design from the bean counters, who want something yet again different from the main/public view. This is handled as sub-sites with their own stylesheets. See my /workshop/ pages for one approach. --gt
– that’s a joke.
