CSS Minifier and personal blog

claudiu_ceia · 26-06-2011 04:31AM #1

If you're looking at this thread you probably know what to expect from a CSS minifier so here goes: http://claudiu.phpfogapp.com/

The personal blog is more about web development and programming in general, the whole thing is built from scratch and it's not yet 100% complete but if I change anything this is probably the best timing: http://claudiuceia.info

Just to be clear on the blog, the Projects and Contact links in the menu, the search input box and links on the archive and tags in the sidebar are not working yet. I'd appreciate any constructive feedback on both, suggestions and critiques. Would be great if the feedback would be constructive rather than just stating something is bad, but any is good

tricky D · 26-06-2011 01:09PM

Handy tool...

You don't clearly state what the tool does. State it simply, clearly and without so much coder jargon: 'Making your css file smaller and more efficient.'

I would put the Minify and Reset buttons between the input and output boxes for logical sequence.

Reset would be better as 'Start Again' or something like 'New Task'.

In some ways, the output is too minified. Comments are stripped and it's all a single line. Stripping the comments means important info is removed so if the css is shared with another developer it becomes hard to make sense of it - kind of like the principle of commenting your code. Stripping out the carriage returns makes it really hard to read. Options to keep comments and returns would be great. A summary or log of what was changed would be really helpful.

The tags on your blog link to 404.

hth

claudiu_ceia · 26-06-2011 01:43PM

Thanks for the feedback tricky d. The coder jargon is just because we're in a development thread?

Regarding the blog, I stated in my first post that those links aren't working yet, still have to link them to pages.

Regarding the CSS minifier, I'm currently working on an upgrade but will take a while. The upgrade includes options to create an account and keep track of your minified files, so at any time you could see the "full" files that you used for a minified file, edit files you created previously and an hosting option that will allow to serve gziped files as well (gziping is preety much like archiving files on your PC and basically means you can further reduce the size of the file). While doing the upgrade I'll obviously change the interface a bit so I'll consider yopur suggestions regarding that.

Clear explanation of what minifying a file means (long read, but I'd say it's worthed)

Minifying CSS (as well as JavaScript and even HTML, it's the same process) consists of removing any content that adds weight to the file but doesn't influence functionality. A good, generally known example, is jQuery. jQuery is delivered in two versions, minified (one line of code, variable names internal to jQuery converted to one or two characters, comments removed etc) and development version. An unminified/development version takes ~200kb of space while a minified version ~50kb. The browser reads both just as fine, but downloads the minified version much faster.

The CSS minifier does just that, takes your files and converts them to a version that's as lightweight as possible but doesn't mess up the code in terms of functionality. This is useful as after minifying and gzipping a file you get roughly about 30-70% download reduction for the browser resulting in great speed improvements. In adition to that, it concatenates your files in a single file. That helps as the browser doesn't spend time opening and closing new connections for each file.

Of course, the resulting code is never intended to be readable. Developers should still keep their formatted, commented files and use those during development, but using the minified versions on the live site. A bit off-topic, but surely helpful to understand a good practice in website development:

Any site should be developed on a staging server and deployed on the live server after that. Further additions/changes to the site should be done on the staging server and then deployed to the live server as well. The staging server can be nothing more than a subdomain (for example, staging.boards.ie). That means that in the staging version, you don't really care if your CSS and JavaScript code takes up 500kb and loads slow (it can be that much on some websites). But as soon as you copy that to the live site, include minified versions of your CSS and JavaScript files for a better user experience.

A good example is boards.ie - results with the current page showed a ~50kb reduction in size, without gziping. Faster speed, better user experience, better SEO (Google cares).

I hope this clarifies things a bit but if you have any questions...

theEpicHater · 26-06-2011 02:08PM

tricky D wrote: »

You don't clearly state what the tool does. State it simply, clearly and without so much coder jargon: 'Making your css file smaller and more efficient.'

So you're here

And you have no idea what are you talking about but you still have an opinion? Damn...

Drop the coder jargon... or maybe just drop the boards.ie database

tricky D · 26-06-2011 02:13PM

claudiu_ceia wrote: »

Thanks for the feedback tricky d. The coder jargon is just because we're in a development thread?

Regarding the blog, I stated in my first post that those links aren't working yet, still have to link them to pages.

Regarding the CSS minifier, I'm currently working on an upgrade but will take a while. The upgrade includes options to create an account and keep track of your minified files, so at any time you could see the "full" files that you used for a minified file, edit files you created previously and an hosting option that will allow to serve gziped files as well (gziping is preety much like archiving files on your PC and basically means you can further reduce the size of the file). While doing the upgrade I'll obviously change the interface a bit so I'll consider yopur suggestions regarding that.

Clear explanation of what minifying a file means (long read, but I'd say it's worthed)

8<

I think you are missing the point. I and many readers of this thread know what minification is, but not everybody does, including many, many developers who haven't learnt coding 'the proper way'. Using jargon is a entry barrier to those people so you'll simply get fewer users and using it where it is not needed is bad practice for websites. Surely the act of publishing this kind of tool means you want more users, yes? Publishing this needs a different mindset than coding. If I may, you are thinking a bit too much like a coder, but publishing a website is a marketing exercise, so you need to put a marketing head on.

theEpicHater · 26-06-2011 02:16PM

@tricky

are you stating that those "developers who haven't learnt coding 'the proper way'" shouldn't even try to learn anymore? the others (e.g. guru programmers, php gods, trolls like me, etc.) should start speaking that mortal language of yours?

ThatsMoronic · 26-06-2011 02:19PM

tricky D wrote: »

In some ways, the output is too minified. Comments are stripped and it's all a single line. Stripping the comments means important info is removed so if the css is shared with another developer it becomes hard to make sense of it - kind of like the principle of commenting your code. Stripping out the carriage returns makes it really hard to read. Options to keep comments and returns would be great. A summary or log of what was changed would be really helpful.

Clearly you have no idea what production code is, versus development code. You don't understand the internet. Also, you probably work at Microsoft.

theEpicHater · 26-06-2011 02:22PM

ThatsMoronic wrote: »

Also, you probably work at Microsoft.

pwned

tricky D · 26-06-2011 02:22PM

Sorry but your comments are pure trolling. You seem to be purposefully misinterpreting my comments, being hostile and no help to the OP. If you check my posts in this forum, you will find I know exactly what I am talking about.

theEpicHater · 26-06-2011 02:24PM

yeah, ofc, we must make background checks now... but wait, I don't wanna hire you.

noidea52 · 26-06-2011 02:57PM

I don't really have a clear grasp of the concept of minification as well, but it's not a problem, it's easier to ignore it, I mean comments and whitespace are clearly more important than saving up bandwith, can you imagine opening up the source for a website and not being able to understand the CSS.

theEpicHater · 26-06-2011 03:48PM

noidea52 wrote: »

I don't really have a clear grasp of the concept of minification as well, but it's not a problem, it's easier to ignore it, I mean comments and whitespace are clearly more important than saving up bandwith, can you imagine opening up the source for a website and not being able to understand the CSS.

believe a troll: it feels.
ofc, all wannabe developers edit that .css file with notepad. nobody uses firebug and web dev tools.

cormee · 27-06-2011 11:45AM

I'm not sure if theEpicHater was being deliberately obtuse or just trolling but I agree with Tricky D's first statement - There's a lot of guesswork involved in using this application. You really need to have some sort of content to explain the functionality - if not for the sake of usability/site visitors who may be new to the concept, then for the sake of SEO.

This would be great functionality: "The upgrade includes options to create an account and keep track of your minified files, so at any time you could see the "full" files that you used for a minified file, edit files you created previously and an hosting option that will allow to serve gziped files as well (gziping is preety much like archiving files on your PC and basically means you can further reduce the size of the file). "

Saving the links to remote files and the ability to load them by clicking a link would be great too.

The text boxes/areas really need to contrast with the background. At the moment it's impossible to see them on a CRT I looked at it on.

The Add File button suggested to me it was going to browse for the CSS file on my computer, and only when I viewed the error message did it become clear what the functionality actually was, so reword the button or add http:// to the textbox.

I'm not sure I'd ever link to a CSS file hosted on a remote site without knowing the server uptime.

noidea52 - Google has added site speed as a factor in its ranking so minifying CSS and JavaScript has become more important in the last year or so - http://googlewebmastercentral.blogspot.com/2010/04/using-site-speed-in-web-search-ranking.html as theEpicHater mentioned it's easy to read minified files using Firebug, and other dev tools.