blog.betabong.com » css http://blog.betabong.com Thu, 13 May 2010 09:49:40 +0000 http://wordpress.org/?v=2.8.4 en hourly 1 Use GZip compression for your website http://blog.betabong.com/2010/03/25/use-gzip-compression-for-html-css-javascript-xml/ http://blog.betabong.com/2010/03/25/use-gzip-compression-for-html-css-javascript-xml/#comments Thu, 25 Mar 2010 09:53:50 +0000 betabong http://blog.betabong.com/?p=316
  • 3D Point Cloud with Javascript and Canvas
    • ]]>     Most of my Flash apps or websites use XML files, either for communication or initial data. They can get quite large, reaching about 100 kb or more is not seldom. You might say: so what?! 100 kb is like nothing for a bandwidth nowadays! Well, if you’ve every used iPhone tethering in an area where there is no 3g network, you start appreciating every single byte you won’t have to suck from the net. (On a side note: That’s when Opera really comes in handy.)

    XML files compress really well

    Because XML usually contains a lot of repetitive elements (noticably tags and attributes), they are like a compressor’s darling. Just zip a few of your XML files and you’ll see.

    Now I kind of always thought that on nowadays webservers gzip compression is activated by default anyway. Which was wrong, at least for quite a bunch of servers I use.

    Activate GZip compression

    If your server installation contains the deflate module (which is the case for all of the ones I use), then you can simply add the following line to your .htaccess file:

    # compress all html, plain text, xml, css and javascript:
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript

    I’ve also tried more complex constructs found on the web, but they resulted in «Internal server errors» which is why I’ll go along with this simple one for now.
    The effects are dramatic! I usually get about 70% – 80% of reduction for non-minimized files,

    Examples

    Uncompressed Compressed Reduction
    Javascript minimized
    MooTools YUI compressed    		 66,867 20,964 68.6%
    Javascript minimized
    MooTools uncompressed    		 102,991 27,599 73.2%
    XML/CSS combined
    A larger initial XML file for a Flash website of mine    		 84,316 18,229 78.4%
    XML/CSS combined
    A larger initial XML file for a Flash website of mine    		 84,316 18,229 78.4%
    HTML
    A swiss news website, 20 Minuten    		 148,587 29,385 80.2%
    HTML
    My blogs home page    		 51,638 12,991 74.8%

    Tools

    If you want to test your website, these pages are very informative (first one is faster, second one more informative):

    http://www.whatsmyip.org/http_compression/

    http://www.gidnetwork.com/tools/gzip-test.php

    I also like this one, although it only gives you little info on content-encoding. But very much on top of that :-)
    http://www.wmtips.com/tools/info/

    This little Firefox addon will tell you wether any site you visit has GZip activated:
    https://addons.mozilla.org/en-US/firefox/addon/54647 (Content Encoding Detector)

    Conclusion

    HTML websites will profit a lot from this compression, as well as Flash sites (if just for your swfobject.js) that use textual communication. And best of all: it won’t need any kungfu effort on your side! And: practically all browsers support it. (I’ve only heard of problems with IE6, but then, you know, f*** IE6)

    Update:

    A more complete solution for your .htaccess file:

    <IfModule mod_deflate.c>
	AddOutputFilterByType DEFLATE text/html
	AddOutputFilterByType DEFLATE text/xml
 
	AddOutputFilterByType DEFLATE image/x-icon
 
	AddOutputFilterByType DEFLATE text/css
 
	AddOutputFilterByType DEFLATE text/javascript
	AddOutputFilterByType DEFLATE application/javascript
	AddOutputFilterByType DEFLATE application/x-javascript
	AddOutputFilterByType DEFLATE text/x-js
	AddOutputFilterByType DEFLATE text/ecmascript
	AddOutputFilterByType DEFLATE application/ecmascript
	AddOutputFilterByType DEFLATE text/vbscript
	AddOutputFilterByType DEFLATE text/fluffscript
 
	AddOutputFilterByType DEFLATE image/svg+xml
	AddOutputFilterByType DEFLATE application/x-font-ttf
	AddOutputFilterByType DEFLATE application/x-font
	AddOutputFilterByType DEFLATE font/opentype
	AddOutputFilterByType DEFLATE font/otf
	AddOutputFilterByType DEFLATE font/ttf
	AddOutputFilterByType DEFLATE application/x-font-truetype
	AddOutputFilterByType DEFLATE application/x-font-opentype
	AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
	AddOutputFilterByType DEFLATE application/vnd.oasis.opendocument.formula-template
</IfModule>

    (Source)

    Related posts:

    1. 3D Point Cloud with Javascript and Canvas

    ]]>     http://blog.betabong.com/2010/03/25/use-gzip-compression-for-html-css-javascript-xml/feed/ 0     BBML Presentation at SFUG http://blog.betabong.com/2009/04/22/bbml-presentation/ http://blog.betabong.com/2009/04/22/bbml-presentation/#comments Wed, 22 Apr 2009 08:02:14 +0000 betabong http://blog.betabong.com/?p=262
  • Flash Player 10 – I love speed
    • ]]>     Yesterday I had a presentation at the SFUG meeting covering some bits of my rewritten BBML framework (originated from the project laax.com). I’ve tried to share some insights into the technical concept and strategies for CSS parsing, CSS selectors and layout validation.

    Sev presenting...
    Picture by Marc Liyanage

    It’s been surprisingly fun (I give credits to the beer sponsored by Nemos). People even managed to pretend they’d be interested in what I was prosing, so credit to them too!

    Flash at the lake Swiss Flash User Group Conference. I’d also like to mention that there’ll be the swiss flash event soon: Flash at the Lake will not only pamper you with appearances of great national and international Flash enthustiacs, it will also give anybody attending the pleasure to enjoy one of Zurich’s greatest locations with people who don’t think of you as a storm lightning adorer when you sit in the sun twittering Flash into the clear lake. And all that to a fantastic price. Check it out at fatl.ch

    So here we go with the presentation (Quicktime so you can enjoy the marvelous effects):

    Related posts:

    1. Flash Player 10 – I love speed

    ]]>     http://blog.betabong.com/2009/04/22/bbml-presentation/feed/ 0     CSS Alternative to Left Float http://blog.betabong.com/2009/02/25/css-alternative-to-left-float/ http://blog.betabong.com/2009/02/25/css-alternative-to-left-float/#comments Wed, 25 Feb 2009 21:19:54 +0000 betabong http://blog.betabong.com/?p=196
  • BBML Presentation at SFUG
    • ]]>     I used to use float:left a lot for my layouts. But it can be a pain in the ass for several reasons – which of them the main may be that the surrounding box doesn’t surround it (so you’d have to come up with some stupid clearfloat-hacks).

    Anyway, I recently discovered somewhere a great alternative (you can call it hack too, but then everything a little fancy that’s supposed to work with IE is a hack, isn’t it?).

    So while until now I’d have something like this:

    .inlinebox {
	float:  left;
	width: 49%;
	min-height: 100px;
}

    the new method goes like this:

    .inlinebox {
	display: -moz-inline-stack;
	display: inline-block;
	vertical-align: top;
	zoom: 1;
	*display: inline;
	width: 49%;
	min-height: 100px;
	_height: 100px;
}

    That’s looks quite more complex. And it certainly is. But it works like a charm on all browsers I’ve tested (IE7, Safari, FF3). _height, zoom and *display are some crappy IE hacks obviously. The zoom attribute by the way is quite interesting, as it activates the hidden (IE only) CSS attribute hasLayout.

    It also has some very nice benefits, like the alignement to the bottom…

    Example

    View Example

    	<style type="text/css" media="screen">
		.codeexample span {
			background-color: #68B6FF;
			-webkit-box-reflect: below 1px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(0.8, transparent), to(rgba(255, 255, 255, 0.8)));
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			margin-right: 10px;
			margin-bottom: 40px;
			width: 140px;
			padding: 10px;
		}
		.inlinebox1 {
			display: block;
			float:  left;
			min-height: 32px;
		}
 
		.inlinebox2 {
			display: -moz-inline-stack;
			display: inline-block;
			vertical-align: bottom;
			zoom: 1;
			*display: inline;
			min-height: 32px;
			_height: 32px;
		}
 
	</style>
 
	<div class="codeexample">
		<h3>Float: left</h3>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
		<span class="inlinebox1">Inlinebox</span>
 
		<h3 style="clear: both;">Inline Block</h3>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
		<span class="inlinebox2">Inlinebox</span>
	</div>

    Related posts:

    1. BBML Presentation at SFUG

    ]]>     http://blog.betabong.com/2009/02/25/css-alternative-to-left-float/feed/ 5     Blog Feature: Code Lightbox http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/ http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/#comments Fri, 03 Oct 2008 17:07:49 +0000 betabong http://blog.betabong.com/?p=127 Just added a little javascript magic: now you can «zoom into» the code snippets in this blog. The javascript is not very -ehm- reusable because it contains some dirty hard coded style stuff, but hey, it does its job pretty well ;-) (btw: not tested on IE).

    So now time to go to Marc’s birthday party. I wish Marc, my favorite code (and soon typo) guru and a good friend, all the best: Rock on!! :-)

    No related posts.

    ]]>     http://blog.betabong.com/2008/10/03/blog-feature-code-lightbox/feed/ 0