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.

 

Starting a new site for inspiration – Inspirationdatabase.com

As you noticed i was quiet for some time and there was a good reason for this. I was working on a new, very interesting project.

I don’t know how many of you have read this great book: The Principles of Beautiful Web Design, but the idea for the project was inspired from the chapter “Getting Inspired”. The author was telling how to look around to get familiar with the latest trends and most important, look at the way the others solve certain problems(colors, backgrounds, navigations etc.)

Then i thought, there’s a hole lot of CSS directories and sites for inspiration, but the problem is that they are not organized. So i decided to create the Inspiration Database, a site that will help you organize better your favorite websites.

The idea behind Inspiration Database is to create a showcase site, where the users can register and bookmark their favorites. You can create separate folders (databases) for each project.

For example, if you have to work on a project for cars, you can create a database named “Car” and then add all the sites, related to the cars. The main idea is the same as explained in the book, to see how the other people solve certain problems.

The site of course is not limited only to websites, but also for printing materials, logo banners, flash sites and everything that inspires you and you can photograph it. Hope you enjoy it as much as i do!

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.

Google Chrome can’t render correctly “Google”?

chromebug2 Today i tried to open Google with Google Chrome( 2.0.172.28) today. What a surprise when i saw that the radio buttons are not visible. Check this preview.

Sometimes the button appears sometimes not. I set up a test page and the button wasn’t working there too. A zoom in and zoom out can trigger the bug as well as solve it 🙂

Anyhow, reported the bug to the Google guys, i’m sure they will fix it soon 💡

PNG transparency plus opacity – Internet Explorer 8 bug

This bug seems to be bugging us from IE7 and i still can’t believe that after 8 years of work, Microsoft can’t make the alpha transparency work.

Just installed the new Internet Explorer 8 as an update. The first thing i tried to do was, of course, to check how my portfolio is looking. Immediately noticed that something is not right and as i researched i found that: if you use PNG transparent image, in combination with opacity filter in IE8 the png image looses its transparency.

Checkout the demo page.

It’s even more interesting that even opacity 100(which is no opacity at all) triggers the bug.

This is very uncomfortable for JavaScript programming, where you want to use opacity for appearing/disappearing objects.

There is one workaround which is not very comfortable but works! To use the png image   as a background with the AlphaImageLoader filter. Here is the workarownd.

Microsoft did it again

I just received notification from my Windows for a new update (Internet Explorer 8). How happy i was that microsoft released IE8 as an update. We can finally say “Bye, bye !” to the weird semi-standard compliant IE 7 and say “Welcome” to the new modern IE8. Horraaay! 🙂

I rushed to restart my PC and open the new shiny browser. The first page to check was  of course my portfolio, to check if it’s properly rendered and “BANG&#@&#&#@” I’ve got this baloon asking me something :

Compatibility View

It suggest me to click it,… and so i did… and it turned out to be IE7.

At the end i had to go and add the famous meta:

<meta http-equiv=”X-UA-Compatible” content=”IE=8″ />

The question i have is: What if we have to add meta for every browser on Internet?

PNG transparency plus opacity – Google Chrome bug

I was working on my portfolio when i found this bug in Chrome version 1.0.154.65. When applying opacity to an element with PNG transparency, the browsers looses the transparency of the PNG image.

Here is an example

Note: This bug has been fixed in version: 2.0.172.28

Hello world!

Hello and Welcome to my humble Blog! My name is Yordan Stoev. I don’t know much about myself, but what i know for sure is that I love the design. I hope that we will be able to discover new territories of the design together.

Kind Regards
Yordan Stoev