Hey everyone. I just thought I would share some great tips (that have probably been mentioned before) to increase your productivity and coding speed. It will require a bit of getting used to, but any experienced HTML / CSS coder will be able to grasp it within a day or two of using the language. This isn't a tutorial, it's more of a introduction/explanation of sass and jade. Includes why they are great, and the other software you need to use sass and jade. Brackets - A text editor. So first I want to introduce you a great software called Brackets. Brackets is a lightweight, yet powerful, modern text editor with tons of great features and extensions you can use when coding. Some people prefer other text editors like Sublime text 1/2 but I think this one is personal preference however you should get a text editor that splits vertically. Brackets Website: http://brackets.io/ Sublimetext Website: http://www.sublimetext.com/ The choice is yours. I prefer brackets but both are great! Most of you will probably already have either sublimetext or brackets, if you do just ignore this section. Now going from a default text editor like notepad to Brackets will increase your coding speed alone because of its many great features (auto finish, auto tab, edit a class by hitting ctrl+e, and much more) that may seem minimal but they help alot! ---------------------------------------------------------------------------------------------- Jade - A HTML template engine. http://jade-lang.com/ Jade is a cool, high-performance (probably the most used) templating engine for Node.js. Alot of people may be intimated by the thought of learning a new language but it is very similar and makes your life a whole lot easier. Jade supports javascript. Below is an example of a Jade file, and the html file it creates (with the help of Prepros but I'll get into that later). JADE: doctype html html(lang="en") head title= pageTitle script(type='text/javascript'). if (foo) { bar(1 + 5) } body h1 Jade - node template engine #container.col if youAreUsingJade p You are amazing else p Get on it! Code (markup): HTML Output: <!DOCTYPE html> <html lang="en"> <head> <title>Jade</title> <script type="text/javascript"> if (foo) { bar(1 + 5) } </script> </head> <body> <h1>Jade - node template engine</h1> <div id="container" class="col"> <p>You are amazing</p> </div> </body> </html> Code (markup): Now you'll notice that both of these languages are very very similar only one seems much more efficient than the other. Below I've created a list of what I believe is the most useful and powerful features that come with Jade. - Extends. The extends keyword allows a template to extend a layout or parent template. It can then override certain pre-defined blocks of content. Basically what this means is you can create a layout file for your website and replace a "block" of content that is on the layout file with one for the new page. So if you had 3 sections that only change such as your main content area, sidebar, and the title all you would need to do to create a new page for your website is this: //- index.jade extends ./layout.jade block title title Article Title block content h1 My Article block sidebar p My Sidebar Code (markup): Simple right? Learn more about this here: http://jade-lang.com/reference/extends/ - Includes. Includes is very similar to the above 'Extends' by inserting the content of another jade file into your current. So if you had a separate jade file for your header/footer you can include it by typing "./includes/head.jade". I won't get into this in great detail but heres the reference link: http://jade-lang.com/reference/includes/ - Mixins. Conditions. Cases. Iterations. And so much more! Check them out for yourself here: http://jade-lang.com/reference/ Now learning jade is quite easy if your familiar with HTML. In fact you should be able to understand the Jade code example I gave above, and notice the differences. If not, you may not be experienced enough in HTML. A great resource to learn Jade is http://www.learnjade.com/ or you can check out this video course at tutsplus: http://webdesign.tutsplus.com/courses/top-speed-html-development-with-jade (Use the free trial and do it fast ). Installing Jade Jade runs off the popular and powerful node.js. So you will need to install that before installing Jade. Head over to http://www.nodejs.org/download/ and download the latest version for your OS. After thats installed open up your terminal and type "npm install jade --global" ---------------------------------------------------------------------------------------------- SASS - A CSS template engine. http://sass-lang.com/ Sass is the most mature, stable, and powerful professional grade CSS extension language in the world. Its a template engine (like Jade) that makes your life a whole lot easier when working with CSS. It's very similar to css and is very easy to learn - in fact I didn't even need a tutorial to learn it because the only major change is the format - and the extra features that come with it. The main thing I love about SASS is the nesting that comes with it. Instead of re-writing multiple lines of code only to change one thing all you need to do is properly nest the css you want to change within the class/id your writing the css for. Heres an example of what I mean: #content p { padding:6px; color:black; } #content p a { color:red; } #content p a:hover { color:pink; } #content img { border:1px solid #000; } Code (markup): Instead you would just write this (properly nested with tabs): #content p padding:6px color:black p a color:red &:hover color:pink img border:1px solid #000; Code (markup): As you can see that alone is a great time saver, and thats not including the other very great things that come with SASS. I will list a few great features below as I did with Jade. - Variables. Yes thats right! CSS can now have variables, no more remembering what hex code you were using for your primary and secondary colors. You can also use variables for your font stack as well. Below is an example of variables in SASS. $font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color Code (markup): Simple right? Now when you have a CSS file that is 3000 lines of code, those variables will save your life and make things so much easier! - Nesting. I already explained this above, so no need for another explanation. - Mixins. Mixins are very powerful in sass because they will save you from writing out those dreaded css codes like box-shadow, border-radius, gradients, ect... It's very similar to a variable in a way, but has the option of allowing you to define the value so you can use the same code throughout the page, but with different values. Below is an example: Sass: =border-radius($radius) -webkit-border-radius: $radius -moz-border-radius: $radius -ms-border-radius: $radius border-radius: $radius .box +border-radius(10px) Code (markup): As you can see above the radius gets defined inside the class. The output into css would be: .box { -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; border-radius: 10px; } Code (markup): Powerful right? There are many great mixins on the web if your not sure how to write your own. - Extend. Operators (MATH!). Partials. Check them out here: http://www.sass-lang.com/guide SASS is very powerful as you can see by the examples I've given above. Combined with Jade and you will notice an increase in coding speed with some practice of course. It may take a few coding jobs to get used to but I'm telling you boy is it worth it. Installing SASS Sass has a Ruby dependency but if you're using a Mac Ruby comes pre-installed. If not you will need to install Ruby (http://www.rubyinstaller.org). Next you just need to open up your command terminal and type in "gem install sass" or "sudo gem install sass" (try sudo if the first one doesn't work). ---------------------------------------------------------------------------------------------- Compiler Lastly you need something to compile these new languages into proper html/css. There are many great pieces of software that allow you to do this so I will just list a few they have listed on the SASS website. - Codekit. http://www.incident57.com/codekit/ (Paid - $29) works with Mac only. - Compass. http://compass.kkbox.com/ (Paid - $10) Works with Mac, Linux, and Windows. - Koala. http://koala-app.com/ (Free - Open Source) Works with Mac, Linux, and Windows. - Prepros. https://prepros.io/ (Paid - $29) Works with Mac, Linux, and Windows. I personally use Preperos but all of these are great. You don't technically have to pay for it but they will have a reminder pop up every hour or so and it gets quite annoying. I haven't personally tried all of those compilers except Prepros but they all do the same thing. So basically once you have Jade, SASS, and a compiler you will need to create yourself a jade and sass file. So if your starting a new project you should have a folder layout like this: /newproject /css - style.css /sass - style.sass index.jade index.html Code (markup): In order to compile your files automatically you will need to have your chosen software open (with the selected project - just drag the folder into the compiler) and all of your file names must match up. So if you have a "index.jade" you will need to compile index.jade to index.html using the compiler. Once you have both a index.jade and index.html file than every time you save the .jade file in a text editor the compiler will automatically compile/update the corresponding html file. Now the reason why you will need a text editor like brackets or sublime text where you can split your code editor into 2 is so you can have the index.jade open on the left side, and the index.html open on the right side. This way you can make sure your not making any errors and see the html code compiled every time you save. Example: Look at how much easier and faster the jade looks than the html. This is an example from when I was learning so theres no blocks/includes which I use alot now, I figured you'd prefer to see some real code. Having both open ensures you don't make any errors because 1 wrong nesting inside jade/sass can screw up your entire code but in most cases it's easy to fix. This is also a great example to get an idea of the similarity between the two languages. If the compiling section (or any section) that I explained is somewhat confusing (I'm not the best at writing guides/tutorials) than check the web for more documents regarding the compiler you've chosen. Conclusion I urge all experienced html/css coders to give this a shot, don't be intimated by trying something new because JADE/SASS has literally decreased the amount of time it takes me to code a website by 30-50%. Especially once you learn how to use blocks / includes / variables / mixins very well. There are other template engines out there for CSS/HTML but these are my personal favorite. I will do my best to answer any questions you may have below and I hope this guide has helped you out. Also if anyone reading this has anything else to shared regarding the topic please do say. I'm relatively new to SASS/Jade myself I just wanted to help others who may have never heard of the languages or just never bothered to give it a shot. I was a bit intimidated at first to be honest, I thought that it couldn't be that much faster than the way I code now and learning the language would take weeks to do but you learn while you code and I literally learned both SASS/Jade in a weekend (while coding a clients website) and never looked back. The similarity makes it so easy. For the TL;DR types - Your missing out
Which is what I mean by needlessly cryptic bullshit relying on indents for inheritance blocks -- on noes, you might have to type ten extra characters. Of course you end up with anything taller than screen height you at a glance end up with no malfing clue what the hell it's inheriting on... Preprocessors -- lazy, stupid ignorant bull that developers are dumber for even having them EXIST. Of course, never heard of JADE but the syntax alone (or should I say lack of syntax) really makes me want to pimp slap somebody. Oh yeah, that's SO clear and simple with such obvious openings and closing. It's the type of idiocy that pisses me off about PYTHON. I really pity anyone DUMB ENOUGH to use this type of crap.
Yep you can use Less for CSS instead of SASS. I personally prefer SASS but thats because I haven't tried out less yet, but I imagine they are both just as efficient. Also SASS comes with SCSS as well. Which is basically normal CSS but with all the great advantages of SASS (Variables, mixins, ect..) Hope this post helped I assume you've never bothered to even try out Jade or Sass? Theres no closing, yes - but anyone who can understand nesting will know when they are closing and opening a new tag. I don't believe its dumb, and I'm definitely not dumb for wanting to be more efficient. The question thats most important is how long have you been coding for? When you've been coding for 8 years a change is nice, and a faster way of doing it is even better. It's not lazy - its fast and smart. Plus I find it much more organized and easier to read/edit. When you get into blocks, and you have a 20 page project that uses that same header, nav, sub-banner, footer it really allows a more clean and organized project instead of wasting a few hundred lines of code on something thats going to be ignored completely only to edit the main content. Plus those "10" characters add up.. I did a letter count for both that same html and jade files and the html has 12932 characters where the jade file only has 9446 characters... Variables in CSS? You can't think of any reason why that wouldn't be useful? How about mixins? The advantages out weight the disadvantages (if any.. besides of course you complaining about it being hard to tell where it opens/closes, but I guess you've never used indents in html code).. Anyways, I didn't write this post for negativity - It may be useful to some and other people don't like change. That is fine, but please keep the insults away from here. BTW - Look at your signature, and you post that? lol.. Thanks.
Never even heard of JADE until your post, but both LESS and SASS I've tried, and discarded them as a wasteful extra step, something that makes debugging HARDER since the document inspector doesn't line up with your SASS code (Not that one should need the document inspector on your own stuff, but it's the pinnacle of arrogance assuming you're the only one ever going to work on a codebase). At BEST, it's a crutch for people who fail to grasp inheritance and the cascading part of cascading style sheets. Oh, only some 36 years. Started out hand compiling RCA 1802 machine language on a Cosmac Elf. Basically long enough I still refer to K&R as "New Kid BS". I HATE needlessly, pointlessly cryptic code, and to me that's all stuff like this is. You'd THINK I'd like it for the strict formatting (something I'm a huge advocate of) but not as a functionality implementation; ESPECIALLY when it costs code clarity... But to be fair, I'm a Wirth language kind of guy. I HATE C for it being needlessly and pointlessly cryptic even when compared to machine language... you get this abstract? Fuggedaboutit. To me what I'm seeing there doesn't look faster, certainly doesn't look easier; at best all I can figure is it's falling into the trap of "False Simplicity" -- simplifying to the point it actually gets harder to do complex tasks. Fast and Smart are NOT terms I'd used to describe that from a long term maintenance point of view; if anything it looks more like "sleaze it out fast and run" development akin to the type of crap people dupe the ignorant into wasting money on at whorehouses like themeForest or templateMonster. When you've been coding for 8 years a change is nice, and a faster way of doing it is even better. It's not lazy - its fast and smart. Plus I find it much more organized and easier to read/edit. When you get into blocks, and you have a 20 page project that uses that same header, nav, sub-banner, footer it really allows a more clean and organized project instead of wasting a few hundred lines of code on something thats going to be ignored completely only to edit the main content. Plus those "10" characters add up.. I did a letter count for both that same html and jade files and the html has 12932 characters where the jade file only has 9446 characters... If your CSS is complex enough that "variables" is superior to grouping selectors, you're probably using many times more CSS than you need. If you are using the browser specific vendor prefixes enough you can't ^C^V^V, home, type four characters, up arrow, home, type eight characters and be done with it, you're probably pissing all over the page for nothing. PARTICULARLY when again, you can just group the selectors. To me that's EXACTLY what I mean by failing to grasp how to use selectors and the cascading part of CSS. I use indents, I also use closing comments so I can see what ID is being closed on DIV, and like to actually see what tag is being closed just in case the opening doesn't fit on the screen at the same time. It's part of why I prefer XHTML formatting since with /> I at least know a self-closing tag is being closed instead of having to backtrack to the opening to figure it out. (see textarea vs. inputs with really long attribute sets) Uselessly vague shortcuts != code clarity. Some people seem to want to call things like that "concise", but when it leaves you guessing wildly because it is harder to decipher that's no longer concise, again it's false simplicity. There's so much outright CRAP right now people are sleazing websites out with -- jQueery, bootcrap, OOCSS, LESS, SASS, JADE (guess that goes on the list now), templating system running inside a templating system like SMARTY -- and developers on the whole are dumber for ANY of this ignorant halfwit bull even EXISTING. The only way I can figure anyone could use any of this nonsense by choice is a complete and utter ignorance of good development practices, complete failure to grasp the basics of HTML and CSS, and a failure to extract one's cranium from 1997's rectum! -- edit -- Though I've begun to wonder with 5's bleeding edge of 1990's practices as the "new transitional" if we're just seeing ignorance of history leading to it being repeated. All the things we fought against and started to win the war against a decade ago seems to be back with a vengeance. But what do I know? I'd sooner hand assemble 8k of Z80 machine language than deal with 20 lines of C++ code, consider colour syntax highlighting an illegible blurry acid trip, consider tabbed editors a step BACKWARDS in functionality, and as a Markup specification HTML 5 to be little more than the new transitional promoting the WORST of 1990's development practices. YMMV. Still, never seen a site built with any of that nonsense that was worth a flying purple fish; in a "Semantic markup and separation of presentation from content, what's that?" kind of way. For the most part it reeks of twitter generation "whaddaya mean I have to type" L33t style speech being pushed upon coding -- which sadly results in making C look clear and verbose. See Google's new pet language, gah, what's it called? The one for people who consider C++ too clear and verbose? -- edit -- RUST... had to look it up.
I'll defend Sass a little bit. You choose when and where you want to use these extended features. Everything is optional. I choose the .scss format and my files compile exactly the same as the plain CSS I write. Not sure what document inspector is, but if theres a problem with my sass the compiler tells me the exact line its on. I like the import feature. It makes organization a lot better for me. I prefer to keep different sections in different files and having them all merge together in the end. Nesting can be a good thing (just one or two levels deep). It's faster and more easily read (to me). Hover styles are a great example of when I use these. a { blah: blah; blah: blah; &:hover { blah: blah; } } Code (markup): Variables can be cool too. I pretty much only use them for colors (I can never remember the crazy hex codes). When you say group elements I'm assuming you mean this? a, this, that, blah, be { color: #aff008; } Code (markup): But theres plenty of times where I use something only 3-4 times and it makes a lot more sense to not break up an elements styles into two places (if that makes sense). I really wouldn't call Sass a crutch, its really more of a tool. You can't really right sass without knowing css. The people who do all the crazy nesting and stuff probably never wrote decent CSS to begin with. If you don't like it don't use it, but I do and feel it saves me time without hurting my code. ------------------------------------------- DS will you consider using colored syntax highlighting for one month as an experiment? I think it will grow on you. It makes it so much easier to find typos and different parts of code. ------------------------------------------- The one tool that probably saves me the most time in development is Grunt JS. It's so nice not having to manually optimize images or even click the refresh button on my browser.
Which is why I'd opt-out completely and just not use it. It's a crutch at best, a pain in the ass at worst. Ever heard of Firebug? Opera Dragonfly? Right click in pretty much any modern browser and choose "Inspect Element"? (does Chrome's in-built one even have a name?) Those are all "document inspectors" -- something that goes through the page and shows you how your document is being parsed into a DOM, how CSS inheritance is applied, and the calculated properties of elements. "generated" CSS, even if generated to a static CSS file makes debugging a nightmare and a half. If I ended up with enough CSS to need that, I'd put a bullet in my head. Once you get past a certain number of properties, it's a confusing mess since when a new block is opened you have no idea what the parent selector was if it's off the page. I just don't get why people think there's an advantage to that. Exactly that. ^F.. no, seriously, control-F... though again if you have enough CSS that you "need" that sort of asshattery, you're doing something wrong -- though to be fair I still say there is no reason for an entire forum software to need more than 40k of CSS apart from utter and complete developer ineptitude. Which is why as I say about a great number of other tools, the only thing about these that could be considered professional grade tools are the people promoting it's use. Usually I say that about Dreamweaver, but it applies equally to all this nonsense. It's about 27 years too late for that. I didn't like it when I first encountered it in Turbo Pascal 4.0 back in '87, and to be honest it's only gotten WORSE in modern editors given the default colourations -- NOT that after years of experimenting I ever found a colourset that was usable. But really some of these dipshits using dark grey backgrounds with mid-range colours, how the hell do you read any of that?!? -- see the OP's screencaps! I actually find it completely and utterly illegible; some people have suggested by that statement that I may be colour blind, when in fact it's the exact opposite problem. I see colours BEFORE I see the text, and as such it stops me from being able to read the code whatsoever. It's one of the reasons that on the various forums that try to do colourization of code in posts I have a user.css that reads { pre, code { background:#FFF !important; color:#000 !important; } so I can actually see the damned thing. It is ALMOST usable with HTML, but really even there it's illegible trash; and it seems to make developers make more mistakes as it's like they only see the keywords and colouration and NOT the actual code -- many times over the past two decades I've found places where it was causing more harm than good in a "You expect it to be right so it is" kind of way. Same thing as how the Wicked Bible came into being. Half of which is stuff I'd be asking "why would you do that in the browser" and the other half being "is the one keystroke REALLY so hard?" Unless you're talking about something entirely differnet from what I think "optimize images" means, I don't see how some scripttardery is going to do it in a meaningful manner... Though since the tool (PSP 7) I use to make the images in the first place has a useful save-time optimizer that's usually a non-issue for me... unlike people working in Photoshop or Illustrator since Adobe wouldn't know image optimization from the hole in their product DVD's. Ooh, one keypress... amongst many since one should be testing in MANY browsers, so is alt-tab F5 into FF, alt-tab F5 into Opera, alt-tab F5 into Chrome, alt-tab F5 into IE, alt-tab F5 into Safari on OSX in VirtualBox really so hard? :/
Will you at least agree that all the sass features make sense in some situations? Yeah I don't think you'll be able to break 27 years of your brain used to be without it. I guess I use exactly what your talking about: I love it so much though. Perfect balance between harsh on the eyes and being able to differentiate everything. Whenever I'm creating a website I run all the images through lossy compression software (which is pretty much invisible to the eye) to save 50%+ on everything. Sure if your editing in something you might as well do it there, but a lot of times I post simple screenshots I don't want to open in a photo editor and re-save. You test them all at the same time huh? I finish coding for chrome, then move to firefox, then move to ie, etc. Those keystrokes add up when you're reloading a page 50x during development. I keep my code editor on the left and the browser (that I'm currently testing on the right). I never have to click outside of my code editor. A lot of what I use grunt for is for stuff you don't like. I like having it concatenate all my files, minify everything, optimize all my images, refresh my browser window, and place a production version of the site in a separate folder whenever I press control-s.
The only reason I could see for any of it to make sense would be an inability to type "texting generation" style (aka the type of mouth-breathers who find Twitter to be a bit too verbose), or using hundreds of K of CSS to do tens of K's job. In most cases it makes it harder to maintain, adds more steps to the process and on the whole doesn't make ANY more sense to me than other bits of development idiocy like WYSIWYGs, jQuery, HTML/CSS frameworks like bootstrap... Tokens and reserved words so invisible in purple on grey I can't even make out what they say, grey on grey comments that have pretty much the same problem, and the alternating of colors means even where the text on things like strings and values have legible contrasts, the eye cannot actually focus on what anything actually says. I don't see how people can use that. The laugh being if developers are coding using that, they're probably styling same ignoring accessible colour contrast minimums. Differentiating things is useless if you can't read what any of it says. Usually I want to crop or resize or build thumbs anyways, which is why I usually use the screen capture interface built into the paint program anyways. PARTICULARLY since it can be set to simply capture the content of the active window instead of the whole screen. Coding the entire thing to one browser before thinking anywhere else is a VERY broken approach to development -- though it's certainly NOT an uncommon one. The biggest problem is that you can VERY quickly "paint yourself into a corner" with layout or design concepts that flat out aren't viable in other browsers; if you CAN pull it off you end up knee deep in hacks, and if you can't you're stuck either accepting a shitty broken website, or pitching it in the trash and starting over. and to be frank, WAY too many people blindly go with the former of the two... My workflow would blow your mind a bit then -- since for me stuffing all the code into one editor window is a colossal step BACKWARDS. On the left display I usually have either my HTML or PHP side-by-side with the CSS or Scripting in separate editor windows, on the center display I have the browsers layered one atop the other, and on the left display I have my portrait mode taskbar, file browser windows, and when I was still doing this with/for others chat windows for realtime collaboration (instead of that half-assed versioning nonsense... yes, I consider version control a piss poor substitute for management skills). Of course, in both Opera and FF I've also got my tabs set up in portrait mode like my taskbar to simplify switching between elements and *SHOCK* actually see the TITLE OF WHAT'S OPEN... and in the taskbar I turn off that "peek" nonsense so I can actually see *SHOCK* NAME AND PATH OF WHAT'S OPEN instead of a dozen different pictures that all look the same. (see why OSX's "Expose" and similar tasking interfaces are pointless crap to me as well... for **** sake what's wrong with TEXT?!?) -- But that's one thing I like about winblows, at least until very recently, I can disable all the "improvements" that are artsy fartsy bull that's LESS functional than what came before it... It's also why as desktop OS I consider OSuX and LinSux pathetic crippleware compared to WinBlows; just as ChrOpera, Chrome, FF, and IE -- from a UI perspective in their latest incarnations -- are pathetically crippled trips in the wayback machine to IE 3 Mac. Seriously, why do they keep dumbing down **** even my 92 year old grandmother knows how to use?!? It sure as shine-ola isn't making things better. Progress does not come about by taking a trip with Mr. Peabody to 1997 -- no matter what modern desktop UI's or idiocy like HTML 5 seem to think. There's a difference between re-inventing the wheel and going back to heat-shrink wrapping steel bands around a wooden rim like it's 1714... which to be frank is what most of the "progress" of the past six years feels like to me. and yes, I made air quotes with my fingers on the word "progress". Which is stuff that 1) a browser and js shouldn't even have access to from a security standpoint ALONE, 2) you shouldn't be needing to do in the first place. ... and 3) given the piss poor performance of JS would probably be faster to just do manually. Though it seems like people WANT stuff to be harder, slower, and painful to use and miraculously are under the delusion are the exact opposite. I'm getting REALLY pissed off at websites, programs and software that are slower and less useful or functional than what we had just a decade ago. But it's just part of the trend, what with people choking quad core dual xeons to death moving around less information to less users than we used to push with a 486DX/50 under Netware 3.12 -- thanks to codebases and abstractions a thousand times more complex for no real benefit. :/ Can't code worth shit? That's fine, just throw more hardware at it...
I don't see how it can be a "wasteful extra step". The use of variables saves me ton of time and with a preprocessor the LESS (or SASS) is compiled in to actual CSS anyway.
If it's saving you time, you're probably doing something wrong; like failing to leverage selectors properly, failing to leverage semantics because you're throwing endless pointless classes at things, etc, etc... At which point just use actual CSS, and do so PROPERLY. I mean, I suppose it is theoretically possible to use these tools to do things "properly" -- I've just NEVER seen it done; admittedly that could be because it seems 90%+ of people vomiting up websites don't know enough about HTML or CSS to be making sites in the first damned place... as evident by all the halfwits and fools embracing HTML 5, crapping together sites with idiotic halfwit bull like bootcrap or jqueery, and letting turdpress piss out markup any old damned way. For example if you don't know what's wrong with: <li id="menu-item-2290" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2290"><a href="http://www.somePointlessAbsoluteURL.com/forums">Forums</a></li> Code (markup): It may be time to back the **** away from the keyboard and don't come back until you do. NOT to single you out @Millen, but when that MMOMAC site is a fixed width layout with inaccessible undersized fixed metric fonts, burning 54k of markup on delivering 5.6k of plaintext and a dozen content images (in other words three to four times the necessary code), 166k of CSS for christmas only knows what, and a massively bloated 640k+ of JS on a page that real-world probably shouldn't have more than 10k of scripting... Well, kind of supports my argument. If I deployed that much CSS and markup for that, I'd soon after have the barrel of my .357 in my mouth. @KewL -- "sitechop" isn't as bad, but exploring the site I'm left wondering what the devil it needs 24k of CSS for... Made even more laughable by it being whitespace compressed and STILL being easily as much as twice the size needed given what's going on with your site. ...and no, I'm not counting the goofy illegible webfont nonsense against the CSS total(some good articles in there BTW, though I'm not a fan of the SVG stuff). Admittedly you're doing the painful "Let's embed files BASE64 in the CSS" garbage of stuff that would likely be more efficient as properly optimized LOSSLESS files -- but still... MAYBE if you guys were leveraging semantics, inheritance, cascading of selectors and other such things properly in the first place, you'd realize what pointless crap all this preprocessor nonsense is. It seems like everyone who uses this nonsense uses either twice the markup or twice the CSS or more, or both that I would to get the same job done... Just like how most of your mouth-breather jQuery coders slap JS in there for stuff that I would either use less code to do WITHOUT the stupid framework (not counting the framework size against that total), is CSS' job, or that has no damned business on a website in the first place. I really don't understand how writing more code to have it auto-generate even MORE code relying on EVEN MORE code makes anything faster or easier. Just what the hell are you folks smoking? ... and where can I score some? But again there's a reason my disgust with the industry as a whole to the point of nausea has blossomed into full on projectile vomiting.
The extra CSS k's are from my use of base64 encoded svg's. I'd say without them it'd be around 1/2-2/3's the size. I've been wanting to set my server to cache .SVG's and move over to background-images, should come soon! I'll be the first to admit it, there's definitely some areas that could be improve. I was still trying to find the format of everything and applied some quick fixes places. Lossless png icons look blurry on "retina" screens and icon fonts are to expensive and look choppy on windows. I have PNG fallsbacks for all the svg's (just turn off JS or view in an old browser). Check it out on a retina screen. Why wouldn't I use white space condensed files? It saves roughly 20-30% file size and the rails asset pipeline takes care of it whenever i push to my server. If I want people to checkout my source code I'll put it on github (something I actually plan to do on the next version). Glad you found some of the articles good. Didn't expect that from you haha. I see you posted a comment on my latest, I'll add your method to the list.
No dramas deathshadow, MMOMAC is something I've built on top of a theme I purchased years ago, and it's a project that I have not really touched for years. The first 2 versions of it was built in 2008 and 2010 purely with HTML and CSS. However it's the first project that put food on my table so I have never had the guts to give or sell it away. Does it deserve attention? Yes badly but I don't have the time no more since I got a few projects under my belt now. Today I design, develop and run communities with hundreds of thousands members. Quite frankly, the time spent on the projects can't all go in to design. With the help of frameworks like bootstrap and LESS I can focus on stuff that really matters (Though design is still a big part), developing, managing and promoting. Creating useful tools for people. In the end it all comes down to being useful, IMO. There is more than two sides to a coin. I can see that you put extreme focus on semantics and put deep pride into HTML and CSS and I salute you for that. I do (did) so too but as the web is moving on and so am I. If I find something that can cut down on design or development time, I'm there!
I have a rule -- I don't badmouth something until I try to use it. It's MORE steps, MORE work, something else to learn that delivers NOTHING of value on ANY website I would ever even consider deploying... I don't get where ANYONE can see an advantage to any of that crap unless they don't know enough HTML or CSS to be building websites in the first place. Admittedly, that describes the vast majority of re-re's crapping out sites any-old-way with the "semantics, what's that" attitude, form over function mentality, and "how little effort can I sleaze by on" methodologies -- mated to crappy bloated framework stupidity. Again, my disgust with the industry as a whole now knows no bounds.