HAPPY NEW YEAR 2010!!!

For sure 2010 will be a great year and hope all of you will make all your dreams come ture!!. This year i have created this blog and next year I will have version 2.0 of it besiddes many CODE to share!!. To share with YOU. Thanks for being there.

This year I have posted 101 posts, counting this one, ...not a coincidence. HAPPY 2010!!!

JAVASCRIPT: The First Drunk Drawing App

Steve Hanov has created just a hillarious app to create an imprecise line-drawing app with the following Features:

• Box, circle, lines, and curve primitive shapes
• Shadows when supported by browser
• Text in several hand-drawn fonts rendered on the server
• Rotate & scale shapes individually or in groups
• Save drawing to a browser bookmark
• Select colours using an HSV colour wheel.
• Unlimited levels of Undo/Redo

Just go and check it here.

JAVASCRIPT: Javascript Extreme Programmming by Thomas

Thomas Fuchs, the creator of scriptaculous, scripty2 and part of prototype team delight us with this video explaining 6 easy things you can do to improve your JavaScript runtime performance:

Get the slides of the presentation at this post.
If wanna check the rest of the videos at JSConf.eu just link form here!

TIPS: Page under Construction....

Are you building a new website and thinks about placing the typical "Under construction" phrase on it??. Well better check this video from Matt Cutts from the Search Quality group in Google:



As I like to say a video is worth more than 1000 images and text. So I hope this words from this Guru will Help you!!.

YOUTUBE: Youtube Direct

Would you like to have a tool to upload videos from your site to Youtube and get access to them within your site???. Then you are lucky because Youtube Direct is your solution!!.

Youtube Direct is a google's tool which enables a platform to add a personalized loader to a site, your site, and the users who access your site the ability to upload videos directly to Youtube Portal, ...but Hey..."I want to check the videos within my site but not on Youtube!!". No problem this service will allow you to watch your videos within your site or Youtube.

This service has been launched to estimulate Users to create and upload videos on sites and so on, on Youtube.

Youtube Direct has also moderation panel to review, aprove and reject the uploaded videos.

Get all the info at Youtube Direct and by the way all this platform has been built on the top of Youtube API

NEWS: Why investing on internet by Peter Thiel

Peter Andreas Thiel is an northamerican business man with a "bit" of success in life and who trust on the power of Internet as an Inversion. He is a natural hedge fund manager, libertarian and venture capitalist, and his trust on Internet has made him being one the first people to invest in facebook, actually now he is in the board of Directors, and also he was co-fonder of Paypal, leadig it at the first 4 years. He also made investments in startups as Slide, LinkedIn, Friendster, Rapleaf, Geni.com, Yammer, Yelp, Inc., Powerset....

Here we have an interview with him, ..and I am sure this make us all believe in our sites!!:



The interviewer was Luis Eduardo Barrueto. Let's call this a new year's present.

DESIGN: Menus for our sites

I am sure we are all aware of the importance of a good web design, and the menus are part of that design. Yesterday I crashed into a post called Inspiring Navigation Menus That You Must See where you can find a collection of 45 menus. It is a fact that designing a navigation menu is not easy, actually it depends on the space you leave for it and the design and structure of the whole site.


Within the post there are links to each of the menu. You will not find something as a library to build a menu as it happens, for example, with pressxine but just menus within sites quite are quite atractive, well-designed, user friendly and many of them totally accesible despite its design.

Access this collection at www.webdesignbooth.com

JAVASCRIPT: Image transitions with TransM

We have seen along my blog some ways to have a photogallery, for example with MooFlow or SlideShow 2, but what about a library to have photo transitions???, what about having 113 different transitions??, ..what about doing it with unobtrusive javascript to keep your code clean?? The answer to all those questions is transm.js 1.0!!!

It works in all the major browsers - Mozilla Firefox 1.5+, Opera 9+, Safari 2+, Chrome 3+ and IE 6+. Works also on older browsers supporting JS 1.5 and images and filter or opacity, else it'll degrade and your visitors won't notice a thing.

TransM.js uses 113 transitions for HTML 5 canvas element supporting browsers, 51 transitions for filter:

• ALPHA
• BARN_HORIZONTAL_IN
• BARN_HORIZONTAL_OUT
• BARN_VERTICAL_IN
• BARN_VERTICAL_OUT
• BLINDS_UP
• BLINDS_DOWN
• BLINDS_RIGHT
• BLINDS_LEFT
• .....

as well as supporting tweenings (up to ...)

• Linear
• EaseIn (Sine)
• EaseOut (Sine)
• EaseIn (Cubic)
• EaseOut (Cubic)
• EaseInOut (quart)
• EaseInOut (quint)
• EaseIn (expo)
• EaseOut (expo)
• EaseIn (Cubic)
• EaseOut (Cubic)
• EaseIn (Circ)
• EaseOut (Circ)
• .....

What do u need to use it??, ..as usual adding javascript file at the head of your code:

<script type="text/javascript" src="cvi_tween_lib.js"></script>
<script type="text/javascript" src="cvi_trans_lib.js"></script>
<script type="text/javascript" src="transm.js"></script>

And to use it, just execute the function "transm.add( element, { options } );" to a block-level element!!. More details here!!. ...ahhh, and the creator is Christian Effenberger, creator for example of corner.js

JQUERY: Get pics from PANORAMIO

Lately I've posting just a bit of bytes, ...hollidays, family, friends, christmas, moving to other country..., soon I will be back to mydaily basis, I promise!!. Talking about hollidays, many of you may have travelled to different locations during christmas, and many of you would probably have checked panoramio to get photos of the new place you will visit, ...haven't you??. Why don't you add pics of panoramio to your site??. It is very easy with Panoramio API!!!

Let's use JQuery for our example, although as we are going to pick up the data from Panoramio Rest Service using JSON, any other language language and library will handle it without difficulties.

As usual let's have a div area where we would place the results from panoramio, in this case the id of the are would be "thePics":

<div id="thePics"></div>

The Panoramio Rest Service works like this (Picked from Panoramio API where it is very well explained):

It's a very simple REST api, you only have to do a GET on:
http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&
to=10&minx=-3.59&miny=37.17&maxx=-3.79&maxy=37.37&size=medium

for "order" you can use:

• popularity
• upload_date

for "set" you can use:

• public (popular photos)
• full (all photos)
• user ID number

for "size" you can use:

• original
• medium (default value)
• small
• thumbnailsquare
• mini_square

the minx, miny, maxx, maxy define the area to show photos from (minimum longitude, latitude, maximum longitude and latitude, respectively).

You can define the number of photos to be displayed using "from=X" and "to=Y", where Y-X is the number of photos included. The value 0 represents the latest photo uploaded to Panoramio. For example, "from=0 to=20" will extract a set of the last 20 photos uploaded to Panoramio, "from=20 to=40" the previous set of 20 photos and so on. The maximum number of photos you can retrieve in one query is 100.

And the the javascript code (the latitude and longitud are set to get Granada at Spain):

$.getJSON("http://www.panoramio.com/map/get_panoramas.php?order=popularity&set=full&from=0&

to=10&minx=-3.59&miny=37.17&maxx=-3.79&maxy=37.37&size=medium",

   {},

   function(data) {

       var thePicsHTML;

       $(data).each(function(i, item) {

         thePhoto=$(this)[0].photos[i];

         thePicsHTML +="<img src='" + thePhoto.photo_file_url + "'>";

         thePicsHTML += "";

         thePicsHTML += thePhoto.photo_title;

         thePicsHTML += "";

         thePicsHTML += "Photo from: " + thePhoto.owner_name;

         thePicsHTML += "";

         thePicsHTML += "<a href='" + thePhoto.photo_url + "' target=_blank>Check the photo at Panoramio</a>";

        thePicsHTML += "<p>";

       })

      $("#thePics").html(thePicsHTML);

   }

);

Get yous site full of your_favourite_place_in_the_world photos!!

WORDPRESS: Version 2.9, what's new?

Wordpress 2.9 is out to be downloaded, with some interesting features:

• Do not ever lose your posts when erasing them by error. Yeap there is undo/trash option which will take your posts back to live!!:
• Photoshop??, paint shop pro??, ...maybe you can save a bit of money because now it comes with a image editor that will help you to crop, rotate, scale, and more all your pics. At any case do not forget to use online services as picnik who will save youtime and money!!.
• Update your plugins. They will be grouped so it will be easier to you.
• Want to post a video??. Just place the URL of the video and Wordpress will just wrpa it around with a nive video player!!. This will do it for videos at:
  
  
  • YouTube
  • Daily Motion
  • Blip.tv
  • Flickr
  • Hulu
  • Viddler
  • Qik
  • Revision3
  • Scribd
  • Google Video
  • Photobucket
  • PollDaddy
  • WordPress.tv

Dowload this version at Wordpress.org

MOONLIGHT: Silverlight gets Opened

Silverlight is Microsoft's weapon to defeat their enemies at RIA war, ..but Microsoft, as many programmers, analysts, leaders, managers think, likes to have a pay for use platform and somehow obscure code that cannot be copied or used by third parties and which just works at microsoft Operating systems. That is not the case of Silverlight, just because mono has been working in a Open Source solution!!!.

Moonlight comes, as well as silverlight of course, with a rich variaty of multimedia functions to include video, vector graphics, animation, etc., within your sites and works perfectly at any many linux distributios as for example SUSE Linux Desktop Enterprise 11, openSUSE 11.x, Ubuntu 9.10, and Fedora 12.

Of course, at many RIA framework, Moonlight has thought about its integration with different serverside Technologies so if your site is based on IronRuby, IronPython, Visual Basic or PHP, for example, then smile, moonlight will fit perfectly ok!!.

Which is the roadmap of moonlight??. Microsoft and Novel have agreed to support moonlight at least to versions 3 and 4 of silverlight:

Moonlight 3

• Silverlight 3 compatible engine.
  • 3D graphics
  • Pixel shaders
  • Application library caching
  • Out-of-browser capabilities and offline support
  • Pluggable media pipeline to support 3rd party codecs
• HD Smooth Streaming
• Native support for MPEG-4-based H.264/AAC Audio

Moonlight 4

• Silverlight 4 compatible engine.
  • Webcam and microphone support
  • Trusted applications can read/write to users' documents directories
  • Improved localization, including right-to-left and bi-directional text
  • Desktop notifications ("toast")
  • Render HTML on Moonlight surfaces
  • WCF RIA Services

..and actually Microsoft is very interested in getting its silverlight technology to linux platforms.

Will Moonlight get to work on new Google's operating system??, ..as well as Word, Excel, Powerpoint, etc. works now on Steve Jobs's Apples...who knows??. My guess is that it will run on it, ..just a question of time (..by the way it's been a while without quoting a song at my blog so here is one related to the end sentence of this post, IS A QUESTION OF TIME ).

P.S: just 2 post this week, ..being busy, big interesting changes happening, a new country awaits :)

GOOGLE: goo.gl URL Shortener

Google, google, google, a company which never sleeps know has come up with a brilliant idea!!. What do u think about a service which will shorten those horrible microblogging services URLs you want to share at twitter for example, or just by email, gtalk..??

To start with an example you can get at the service at goo.gl :). This "goo.gl" service is not available to shorten directly the URL but that it is integrated within Google Toolbar or from FeedBurner.

The core goals of this service are:

• Stability – ensuring that the service has very good uptime
• Security – protecting users from malware and phishing pages
• Speed – fast resolution of short URLs

This may seems familiar to some of you, and yes the reason is by some other project called TinyURL, which with just inserting an URL it will give you another one shortenen, basically a hashkey saved in a DB at TinyURL site. For example the URL of this post would be: http://tinyurl.com/y8t96fe

Enjoy it!!

SOCIAL BOOKMARKING: Be at any social Network with Addthis

Easier than ever!!, your posts and webs can be mouth to mouth, word by word at any social network as a bookmark with Add This with just 4 steps:

1. Select your service. From your own site, and so with some coding notions, to blogger or wordpress.


2. Select the button style. How would addthis look like??. as soon as you check this, you would know that it is not the first time you see adthis...


3. Do u want analytics??. Here is one intereting issue as well as part of the business of addhis. Register and you will know who adds bookmark to which social network!!.


4. You are Done!!. Get the code and start playing!! ;)
   

As easier as this, so add i to your blog!!. I will for version 2.0 of my blog coming up at january!!. Meanwhile try to feel young!!. Do you remember this song from alphaville??

TIPS: ...Just something related to last 2 posts

I have been asked where to find a long list of robots for google wave after I posted about it. Here is a link to them.
How is related this to my last post??, ...just check an example of Sharing is sexy at that page!! ;). In this way I also answer a comment on that post.

Talking about sexy, enjoy this video!!

SOCIAL BOOKMARKING: Sharing is sexy

Sometime ago I wrote about a social bookmarking tool called Share This which helps bookmarking your posts at many social Networks. Itis extremely handy because it gets updated with any new social network you can imagine as well as you can configure it but it has 3 drawbacks:

• It disables some other divs or objects in your site depending on the code on it.


• Not accesible solution


• It is not sexy!!!!.

That's the reason why i will show you a sexy way to invite your guests to add your posts, comments or pages to social netowrks. Its name?? sharing is sexy, ..what a better name??. it looks as this one:


The CSS would be as this:

<style type='text/css'>
div.sexy-bookmarks {
height:54px;
background:url('http://YOUR-IMAGES-ROOT/sharingsexy.png') no-repeat left bottom;
position:relative;
width:540px;
}

div.sexy-bookmarks span.sexy-rightside {
width:17px;
height:54px;
background:url('http://YOUR-IMAGES-ROOT/sharingsexy.png') no-repeat right bottom;
position:absolute;
right:-17px;
}

div.sexy-bookmarks ul.socials {
margin:0 !important;
padding:0 !important;
position:absolute;
bottom:0;
left:10px;
}

div.sexy-bookmarks ul.socials li {
display:inline-block !important;
float:left !important;
list-style-type:none !important;
margin:0 !important;
height:29px !important;
width:48px !important;
cursor:pointer !important;
padding:0 !important;
}

div.sexy-bookmarks ul.socials a {
display:block !important;
width:48px !important;
height:29px !important;
font-size:0 !important;
color:transparent !important;

}

.sexy-furl, .sexy-furl:hover, .sexy-digg, .sexy-digg:hover, .sexy-reddit, .sexy-reddit:hover, .sexy-stumble, .sexy-stumble:hover, .sexy-delicious, .sexy-delicious:hover, .sexy-yahoo, .sexy-yahoo:hover, .sexy-blinklist, .sexy-blinklist:hover, .sexy-technorati, .sexy-technorati:hover, .sexy-facebook, .sexy-facebook:hover, .sexy-twitter, .sexy-twitter:hover, .sexy-myspace, .sexy-myspace:hover, .sexy-mixx, .sexy-mixx:hover, .sexy-script-style, .sexy-script-style:hover, .sexy-designfloat, .sexy-designfloat:hover, .sexy-syndicate, .sexy-syndicate:hover, .sexy-email, .sexy-email:hover {
background:url('http://YOUR-IMAGES-ROOT/sexysprite.png') no-repeat !important;
}
......
......

and then add each of the icons styles, on hover or not:

......
......
sexy-furl {
background-position:-300px top !important;
}
.sexy-furl:hover {
background-position:-300px bottom !important;
}
.sexy-digg {
background-position:-500px top !important;
}
.sexy-digg:hover {
background-position:-500px bottom !important;
}
.sexy-reddit {
background-position:-100px top !important;
}
.sexy-reddit:hover {
background-position:-100px bottom !important;
}
.sexy-stumble {
background-position:-50px top !important;
}
.sexy-stumble:hover {
background-position:-50px bottom !important;
}
.sexy-delicious {
background-position:left top !important;
}
.sexy-delicious:hover {
background-position:left bottom !important;
}
.sexy-yahoo {
background-position:-650px top !important;
}
.sexy-yahoo:hover {
background-position:-650px bottom !important;
}
.sexy-blinklist {
background-position:-600px top !important;
}
.sexy-blinklist:hover {
background-position:-600px bottom !important;
}
.sexy-technorati {
background-position:-700px top !important;
}
.sexy-technorati:hover {
background-position:-700px bottom !important;
}
.sexy-myspace {
background-position:-200px top !important;
}
.sexy-myspace:hover {
background-position:-200px bottom !important;
}
.sexy-twitter {
background-position:-350px top !important;
}
.sexy-twitter:hover {
background-position:-350px bottom !important;
}
.sexy-facebook {
background-position:-450px top !important;
}
.sexy-facebook:hover {
background-position:-450px bottom !important;
}
.sexy-mixx {
background-position:-250px top !important;
}
.sexy-mixx:hover {
background-position:-250px bottom !important;
}
.sexy-script-style {
background-position:-400px top !important;
}
.sexy-script-style:hover {
background-position:-400px bottom !important;
}
.sexy-designfloat {
background-position:-550px top !important;
}
.sexy-designfloat:hover {
background-position:-550px bottom !important;
}
.sexy-syndicate {
background-position:-150px top !important;
}
.sexy-syndicate:hover {
background-position:-150px bottom !important;
}
.sexy-email {
background-position:-753px top !important;
}
.sexy-email:hover {
background-position:-753px bottom !important;
}

</style>



uffff, too much css code because each tab has an style, ..i would have done it in a different way but never blame on someone's solution when is helping us!!.

Here comes the code for including the tabs, in this is case the example is for someone who is using blogger or wordpress, if it is n ot your case just change
data:post.url and data:post.title with the url and title of your post:

<div class='sexy-bookmarks'>
<ul class='socials'>
<li class='sexy-delicious'><a expr:href='&quot;http://del.icio.us/post?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-digg'><a expr:href='&quot; http://digg.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-technorati'><a expr:href='&quot; http://technorati.com/faves?add=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-reddit'><a expr:href='&quot; http://www.reddit.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-stumble'><a expr:href='&quot; http://www.stumbleupon.com/submit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-designfloat'><a expr:href='&quot;http://www.designfloat.com/submit.php?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-facebook'><a expr:href='&quot; http://www.facebook.com/sharer.php?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-twitter'><a expr:href='&quot; http://twitthis.com/twit?url=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-furl'><a expr:href='&quot; http://www.furl.net/storeIt.jsp?u=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

<li class='sexy-syndicate'><a href='http://feeds2.feedburner.com/YOUR-FEEDBURNER-ID' title='Subscribe to RSS'/></li>

<li class='sexy-email'><a expr:href='&quot; mailto:?subject=&quot; + data:post.url + &quot;&amp;title=&quot; + data:post.title' target='_blank'/></li>

</ul>
<span class='sexy-rightside'/></div>


Where are the images??. Download them from here

Google: Are you using Robots at Wave

Have you ever realized how cool "Surf on Internet" sounds??, or just "Surfing on the Wave"?? awesome, especially when you are seated in front of a PC and totally dry.... Now there is something even more amazing that you can say: "I am Surfing with some robots on the Wave" of course with your thumb up and little finger down!!. All this is just thanks to Google!!, ..and I am not talking about this:



Google Wave is growing in popularity as well as happened with the search engine and gmail, manly among programmers, and actually there are people who right now are not able to live without it, ..as would happen to everyone of us if our mobile phone were stolen. this popularity is not only based at the Wave Core App, but also thanks to what are called "Robots". Google likes robots as we can check at android's logo :).

To use this robots you just have to add an email address to your contact list, do not forget that are robots so like us they have the right to own an email account, and to use it just create a new wave and include the robot. The Robot's list is already loooooong, some examples are:

• RSSyBot (rssybot@appspot.com): Adds an RSS feed to Wave.
• TwitUsernames (twitusernames@appspot.com): Links @usernames to Twitter.com.
• Blog bot (blog-bot@appspot.com): Publishes waves to blog posts.
• WaveVotely (wavevotely@appspot.com): With a tiny gadget, votely allows you to vote public waves up/down; enabling high-quality content to float up.
• Wikify (wikifier@appspot.com) Adds Wikipedia links for topics.
• Multi Lingual Bot (multilingual-bot@appspot.com) Select the language of the person you are talking to, and the blip you type will be translated to that lenguage!!, ...coooooollll

Even funny ones:

• Silly Bots Eliza the Robot Shrink (elizarobot@appspot.com): Talks to you when no one else will. ..in case you feel lonely
• Flippy (flippy-wave@appspot.com): Flips text upside down, ...in case you are upside down %&$???
• Eliza – elizarobot@appspot.com – The Google Wave Psychologist
• Hangman – wavehangman@appspot.com – Play hangman with a bot

Robots, Robots, Robots, more data, more data...., what does future brings?? Check Out the present.

SCRIPTY2: Preview on UI Controls

With nice work and supervision from Michael Fuchs, scriptaculous creator and colaborator at prototype, scripty2 is a totally rewrite from Scriptaculous dividing the product in three blocks, ...as I said before in this post, and such interesting stuff at work Queue as multitouch concerned about iphone and what's coming up with windows 7, android. Check this demo from Nokia StarLight project:



How is the development going?? New examples of the UI Controls have been brought up by Andrew Dupont for adding the first batch of controls goodness to scripty2, including buttons, dialogs, overlays, sliders, autocompleters and accordion.



All these controls are made with prototype class and class methods and so on creating new extensions of them to make them tottally cutomized!!. Other interesting issues these awesome controls owns:

• Support full keyboard navigation.
• Provides also accessibility hooks through WAI-ARIA. Make your apps accesible!! ;).
• The best thing is that they’re compatible with Themeroller (from jQuery UI) themes! So you can just reuse/tweak existing themes very easily.

Keep coding!!

JQUERY: Open Source Application of the Year 2009

Yeap, Jquery is getting higher and higher..., more and more sites make use of it, actually most of the times I have seen javascript widget's on portal there is a name behind them "JQuery". Concerned about that, .net Magazine has awarded Jquery as the Best Open Source Application of the year 2009, bitting opponents as Firefox 3.5 and WordPress. It is interesting how the .net awards page uses Jquery to show the winners of each category ..no wonder they have chosen as the winner because this magazine lovesss it.

But JQuery, do not relaz and lose track!!, the war is still out there. IBM and Dojo are working together, Mootools and Joomla like to flirt around, and in my opinion Scripty2 should marry Prototype to become a strong competitor, ..but that is my Opinion....

Congratulations not only to Jquery, but also to all the people and communitty, me included, who use it contributing to what today has been a reality, Jquery becoming a number one for .net Magazine.

Enjoy the weekend freakcoders!!.

TOOLS: Capture FOX, screencasts for U

Many times you would like add into your blog or site a nice video tutorial of your product. In many cases this product would be something related with a software development, and what better way to show your product that within a video recorded testing your software at your screen, or better called screencast??. There are many comercial software out there for this porpouse by why paying if there is a nice firefox addon called Capture Fox??.

You can download it HERE by pressing Add to firefox after which you will need to restart firefox. You got it, a nice videocam icon at the tool bar which will do its work, record what you do at your computer (Whole Screen at Capture Area from Basic Settings or just at your firefox browser (Firefox window at the same location as before) ...and of course with sound!!.

You can change Video Quality whre you can tune that quality and for ecample choose how many frames per second o record. As usual the better the quality the bigger the size!!.

Remember to activite Voice Recording if you want to add voice, music or just anything which get into your mic, into ur video!!.

Damn, I need to change FreakZion!!, too many ideas and too littlethis blog. Ok I will do it for next year. New Year, New blog style!! ;)

CSS: Optimizing CSS Size. 8 Ways

As I commented about JS Code in this article, a very good idea to optimize your site is reducing the size of your code. Now is time for CSS. Which tools and tips do we have to reduce the size of the CSS????. Of course try to host your site in a provider which enables HTTP Compression!!. That will help in general with all your code. Which are our tools??:

1. Since long, long time ago CSS Drive has been helping Web Masters to compress the size of css. you can choose from erasing all the comments or comments which exceed a size, concat all the characters in CSS, erasing just white spaces.....



2. CSS SuperScrub by iSnoop will reduce the size and complexity of your CSS by programmatically stripping unneeded content, stripping redundant calls, and intelligently grouping the remaining element names. A very usefull tool, although we should help iSnoop to make a better marketing campaign to sell its product!! ;)



3. If you like to get a readable CSS file then use Factor CSS. Easy and actually you can get same results with CSS Superscrub.



4. Combine all the css files to one!!. ..when possible of course. When a user is opening your website every object on the page (e.g. images or scripts) will require a round trip to the server. And any access, or HTTP Request to the server takes time!! and so on will delay the response. If you are loading dozens of objects this delay can add up to several seconds.



5. Put CSS file in the header/top. I know you already do it..., but in case you don't I would recommend Nike slogan: Just do it!!!



6. I know sometimes is hard if you are a programmer... but group all up, right, down, left properties together!!!. If firebug does it, you can also do it!!. Imagine how much size you earn from:
   

   
    margin-top:1em;
    margin-right:2em;
    margin-bottom:3em;
    margin-left:4em;
   

   to:

     margin:1em 2em 3em 4em;




7. Are you able to group all your styles together?? My question is not darish at all, but just it is helpfull for you or not. If you have 3 same styles:
   

    h2 <margin: 10em 10em>
    #style1 .title1 <margin: 10em 10em>
    #style1 .title1 <margin: 10em 10em>

   group them to
   

    h2, #style1 .title1, #style1 .title1  <margin: 10em 10em>

   but rememberyouwill need to ungroup them if they change seperatly!!.



8. Trying to get to Perfection??. Remove last semicolon at styles:
   from

     <margin:1px 2px 3px 4px;>

   to

     <margin:1px 2px 3px 4px>

   
   by default measure is px so you can reduce size writing

     <margin:1 2 3 4>

   
   

Create now optimized CSS files!!. You can use same keyboradas OMD!!, ..do you remember this?? :)

MOOTOOLS: Mooflow, Cool Image Gallery

Who doesn't need an Image Gallery within a site??. We have reviewed some already, but as Mootools is growing really fast, somwhow thanks to Joomla, I would like to share this one which allows not just navigating the images by clicking on them or on left/right buttons but it also comes with:

• Use of slider.
• Enables autoplay with a predefined interval.
• Resize of the Images.
• Add caption to the images.
• Ability to use left/right keys to roll over the images.
• Use also the mouse wheel to move along the pics!!.

How to use it. Very easy. Just wrap all your images within a

and create an MooFlow object passing the id of the div as the main argument. For Example lets create a div with id="MyGallery":

   <div id="MyGallery">
    <div><img src="img1.jpg" title="Title" alt="My Pic 1" /></div>
    <p><img src="img2.jpg" title="Title" alt="My Pic 2" /></p>
    <span><img src="img3.jpg" title="Title" alt="My Pic 3" /></span>
    <a href="big/image.jpg" rel="image">
     <img src="image.jpg" title="Title" alt="My Pic 4" />
    </a>
   </div>

and just instancing an object from class MooFlow is enough: new MooFlow($('MyGallery'), parameters)

The parameters are as follow:

• reflection: number reflection height; default(0.4)
• heightRatio: number container height (container width * number); default(0.6)
• offsetY: number vertival image offset; default(0)
• startIndex: number the number of the image to show first; default(0)
• interval: number time in ms to show a image in the presentation loop; default(3000)
• factor: number zoom factor; default(115)
• bgColor: string image background color (#000 or transparent); default('#000')
• useCaption: boolean adds a caption(<div>) to the MooFlow-container and shows the title-attribute from current image. default(false)
• useResize: boolean adds a resize button(<a>) to the MooFlow-container and allow to set MooFlow in a fullscreen like look. default(false)
• useSlider: boolean adds the slider with buttons (left, right) to the MooFlow-container. default(false)
• useWindowResize: boolean updates the MooFlow-container when changed the dimension of the browser window. default(false)
• useMouseWheel: boolean enables the Mousewheel to navigate. default(true)
• useKeyInput: boolean enables the keybord buttons left and right cursor (only one MooFlow instance). default(false)
• useViewer: boolean enables the inline-viewer. default(false)

Just check it, ..and add it to your site!!. Yeah, somehow it remains you to a Mac menu, ...although thinking about Mac, this one is more "applelish" which looks just as Apple’s time machine :)