Old newspaper image converter

Lots of new stuff are coming with HTML5 (Canvas, Workers, drag and drop files) and in order to keep up i’ve  setup a little JS experiment. You can have a look at the source at github.

It is a tool that converts images to an old, newspaper style. Here is an example:

canvas_2013_10_13_19_10_33

It has different settings, so by playing with them you can achieve quite interesting effects that you can use in your design projects. Here are few previews:

canvas_2013_10_13_19_54_56canvas_2013_10_13_19_57_28canvas_2013_10_13_19_58_01

The script works by first converting the image to grey-scale. Then divides the image and calculates the average color per segment. The average color defines the size and the color of each segment.

Since it’s an experiment i’ve only tested it IE10, Chrome 30 and Firefox 24 and it seems to work, but you can always drop me a comment if you see something fishy.

No-jQuery HTML5 placeholder fix

The “placeholder” attribute is a great new addition to HTML5, but it’s not supported in all  popular browsers (talking about you IE). I looked the web for a quick fix, but couldn’t find a polyfill, that didn’t require jQuery, so i decide to put one together myself.

<script type="text/javascript">
function hasPlaceholderSupport() {
  var input = document.createElement('input');
  return ('placeholder' in input);
}

if(!hasPlaceholderSupport()){
	var inputs = document.getElementsByTagName('input');
	for(var i=0,  count = inputs.length;i<count;i++){
		if(inputs[i].getAttribute('placeholder')){
			inputs[i].style.cssText = "color:#939393;font-style:italic;"
			inputs[i].value = inputs[i].getAttribute("placeholder");
			inputs[i].onclick = function(){
				if(this.value == this.getAttribute("placeholder")){
					this.value = '';
					this.style.cssText = "color:#000;font-style:normal;"
				}
			}
			inputs[i].onblur = function(){
				if(this.value == ''){
					this.value = this.getAttribute("placeholder");
					this.style.cssText = "color:#939393;font-style:italic;"
				}
			}
		}
	}
}
</script>

I took the very  nice check for placeholder support from David Walsh’s blog. Thanks David.

How to use?

You just put it at the bottom of your page just before the closing </body> tag, or you can call it inside window.onload.

Why no-jQuery?

I like jQuery very much, but i don’t want to load 70k just for placeholder polyfill,.. or to use $(‘document’).ready(); when there are very good replacements.

 

Zoomple – simple image magnifying plugin for jQuery

I’ve been working with jQuery for some time now and was quite fascinated by the magical way everything there just works. It is browser compatible, saves you from nasty bugs and pitfalls, gives you access to a goodies that JavaScript just lacks. Knowing jQuery really turned the way i was writing at JavaScript.

Besides all the great tools that you get with this library, the real power of jQuery comes from the plug-in database. Every script that you will ever need is probably already developed, wrapped and waiting for you in the plugin database. I’ve been exploring this place for sometime now and always wondered “How do you develop a plugin? It must be hell of a work.” My  innate curiosity always pushes me to do some bizarre stuff and i started to read and explore the subject.

For some time now I’ve been working on  a few plugins and the first that i want to share with you is Zoomple (i don’t know how i came up with such a stupid name). Zoomple is a simple image magnifying tool. Take a look at it and send me your feedback. It is my first plugin so, don’t judge me  to harsh, although constructive critics are highly appreciated.