Funky world of Juha

Bizarre and funky world of Juha

CSS compressor / beautifier January 7, 2011

Filed under: CSS — juhq @ 7:55 am

There’s couple of cool online tools to compress or beautify your CSS.

First one being www.codebeautifier.com, which handles both. You can select your compression level, from lowest (beautified CSS) to highest (smallest size, harder to read). You can also select different kinds of options with your compression / beautification.

Another really cool tool is www.csscompressor.com, where again you can select compression level and proper options.

Both tools shows you possible error messages and the compression ratio.

For my example compression, it removed 284 bytes, which doesn’t seem so much, but when looking at the total number, it’s 15,6% of the original size! That’s impressive.

Compression ratio: 1.538KB/1.822KB = 15.6% (-284 Bytes)

And finally, if you are using Firefox, you really should be using Firebug and YSlow!

YSlow allows you to optimize CSS, JS (and also beautify) , smush images using Yahoo Smush.it and it also shows your sites grade with tips on how to improve speed.

 

CSS3 Buttons January 5, 2011

Filed under: CSS3 — juhq @ 12:34 pm

With CSS3 being supported more and more all the time, I decided to gather some links to nice articles about CSS3 buttons.

Let’s not forget css3please, which is my favorite CSS3 reference page and a great tool for anyone seeking help with CSS3 related stuff.

If you are working with mobile environment, don’t forget your number one pal, jQuery Mobile, which automatically converts your buttons into sweet looking buttons, check it out!

If you need more info on CSS3, check out http://www.css3.info/

 

Simple image preloading using jQuery September 9, 2010

Filed under: jQuery — juhq @ 12:43 pm

Preloading images (and why not other contents too) with jQuery is pretty simple and easy.

function preloadImage(url) {
 $("<img />").load().attr("src", url);
}

What this function does, is that it loads given image in the background, so when you want to show the image, user already has it in the browser cache.

Usage of this example function is simple as this:


preloadImage("http://jazzdad.files.wordpress.com/2009/11/koala.jpg");

 

Spotify September 2, 2010

Filed under: Uncategorized — juhq @ 10:16 am

Something that I noticed today, while I going to spotify.

I’m using Win7, and spotify seems to be using some sort of embedded player on the win7 dock. Check the screenshot!

 

How to track user behavior August 17, 2010

Filed under: jQuery — juhq @ 7:19 am

User behavior tracking is quite simple with little help from our friend jQuery.

$("a").live("click", function(event) {
      var $this = $(this);
      var url = $this.attr("href");
      var text = $this.text();
      var color = $this.css("color");
      $.ajax({
           url: "saveClick.php",
           data: {url: url, color: color, text: text},
           success: function() {
                window.location = url;
           }
      });
      event.preventDefault();
});

What does this do?
It will do an ajax call everytime when user clicks some link on your page, so you’ll be able to track which links are performing well and which are not.

Add this snippet to your javascript and then just make some backend script that will save all the clicks for you.
This should help you find what links with what color and text gets the most hits, so you’ll be able to optimize your links.

It’s really easy to track whatever from your links, I used text and color in this example. The url will be the unique separator in the backend.

If you are wondering what $this is and why am I using it in this example, you should read this article by Sean Koole

Edit: The codesnippet should be working properly now, thanks Sean for the fix!

Whenever you click a link on a website, which redirects out of that page, all ajax-queries will stop. So in order to save click with ajax, we need first to do the ajax-call and redirect after this is done.

This will make some of the links littlebit slower, as it needs to do the ajax call before redirecting to a new page.

 

Google AJAX Search with jQuery August 3, 2010

Filed under: Google,jQuery — juhq @ 8:12 am

This is just a simple and quick(!) jQuery implementation of http://davidwalsh.name/google-ajax-search

It’s not perfect, but seems to work.

<!-- SEARCH FORM -->
<form action="http://www.google.com/search" method="get">
<!-- HTML5 SEARCH BOX!  -->
<input type="search" id="search-box" name="q" results="5" autocomplete="on" />
<!-- SEARCH BUTTON -->
<input id="search-submit" type="submit" value="Search" />
<div id="search-area" style="position:relative;">
<div id="search-results">
<div id="search-results-pointer"></div>
<div id="search-results-content"></div>
</div>
</div>

</form>
<script type="text/javascript" src="http://www.google.com/jsapi?key=YOUR_API_KEY_GOES_HERE"></script>
<script type="text/javascript">
google.load("search","1");
google.load("jquery", 1.4.2);

function googlesearch() {
	if(typeof(searchLoaded) == "undefined") {
		var searchLoaded = true; // set searchLoaded to "true"; no more loading!

		var searchBox = $("input#search-box");

		// google interaction
		var search = new google.search.WebSearch(),
		control = new google.search.SearchControl(),
		options = new google.search.DrawOptions();

		// set google options
		options.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
		options.setInput(searchBox);

		// set search options
		search.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

		// set search controls
		control.addSearcher(search);
		control.draw(document.getElementById("search-results-content"),options);
		control.setNoResultsString("No results were found.");

		// add listeners to search box
		searchBox.bind("keydown", function() {
			var value = searchBox.val();
			if(value) {
				control.execute(value);
			}
		});
	}
}
google.setOnLoadCallback(googlesearch);
</script>
 

Google is fag. June 29, 2010

Filed under: Google — juhq @ 7:55 am

It seems that google came out of the closet. If you type in “gay” in the searchbar, you’ll notice the nice rainbow.

What’s up next google, unicorns?