Wednesday 29 February 2012

Fonts: the browser doesn't display fonts properly

   


Is your preferred browser suddenly displaying all the basic fonts in an unclear and garbled way? Before starting to pull your hair off, it might be that something got in the way and some Windows preference has been changed.
What happened to me once, is that Firefox, Chrome and Safari started displaying system fonts strangely, while Internet Explorer was rendering the text in the correct way.
I remember that I started searching for a solution, and, at first I thought it was something related to my system font files that got corrupted. But it wasn't that.
I noticed that other programs and applications were displaying the menus and text in a strange way.
I decided to rebuild the font system folder. Nothing changed...
Well, to make a long story short, it was the Clear Type option.

In Windows 7, there's a control panel section that's taking care of Clear Type fonts: ClearType tuning.
In Windows XP and Vista, we need to download ClearType Tuner from Microsoft.
If for some reason, the clear type option has been turned off, the result will be that all the fonts in your applications will be in some way less clear (sorry for the pun). And even your browser will display system fonts in that way.
Just turn ClearType on again and everything will be fine.

More info here.

Monday 27 February 2012

jQuery: fadeIn and fadeOut for IE8

   


If you have used jQuery fadeIn and fadeOut effects, you might have noticed that they don't always work on IE8.
There's a solution for that issue: in this very short article we are going to explore it.

I don't think I have to explain much about it, so I will get into it very quickly and shortly.

If we have an element to which we applied a fade effect using jQuery, we should have something like:
<div id="fading" style="display:none;">Some content</div>
in the body of our page.

Friday 24 February 2012

CSS & HTML: solution for border radius not working on IE8

   


Today, I would like to share something I've discovered only recently (there is always something to learn!).
It's related to border radius and box shadows solutions for Internet Explorer 8 and previous versions. It might happen that the rendering of round corners and shadows is not working at all, and that every CSS rule applied is completely ignored to the point that the styled element won't even be displayed at all.
While the solution is very simple, the problem needs to be explained, and, please, read all the article if you're interested in the solution, because you really need to know what's happening.
Follow me.

A little bit of background
How did I discover the problem? It happened at work. In the company where I work, there's an intranet which I have developed. The main menu of the web app has round corners, rendered with a jQuery plug-in.
A colleague, a few days ago, called me because the background colour, the round corners and the shadows on the intranet menu had disappeared. I immediately checked the browser configuration and security options, asking if he had changed something there. "I haven't", he replied.
We all know from experience that IE8 (the browser he's using) is not a great piece of technology and that it gives us a lot of troubles, but I immediately understand that the problem was not strictly related to the browser configuration. Any site using round corner was not working; even the CSS Pie homepage was not showing those wonderful round corners.
And so I started my quest.

Wednesday 22 February 2012

Web Development: optimise JavaScript and CSS

   


Recently I've been asked to optimise an already developed web site. It's always a bit difficult to look into code written by someone else, and in this case it has been a pain in the neck: no comments, no code layout, strange and obscure variable names and so on. One thing however has caught my eye: external JavaScript files and CSS stylesheets were scattered all around, making the loading of the web pages not fluid.

I would like to share with you some considerations that we all should be very aware when we develop web pages. We will talk about external JavaScript files and CSS stylesheets, how to optimise them and how to reduce RTT (round-trip time).

Monday 20 February 2012

Web Design: free images deposits

   


When designing a new web site, images, icons and photos are important. A general theme for the site is strongly emphasised by graphic elements. Sometimes we can use original images, sometimes we need to search the net, but being sure that there's not copyright infringements when we use them on our web site (especially if it's a commercial one).
There are free images deposits that can be browsed and, provided we check the eventual license agreement, those pictures are freely usable in our own projects.
Here are some useful links to those kind of repositories:

I hope the above list might be of some use for you.
In the meantime, happy coding!

Friday 17 February 2012

JavaScript: live character count

   


In many situation, we offer the user the possibility of filling in a form and specifically a textarea. In those cases, we might decide to limit the number of characters and thus show the user how many remaining letters are available, with some sort of live character count.
It is possible to show the countdown using a JavaScript function called on key up. Let's see how we can do it.

Wednesday 15 February 2012

SQL: the alter table statement

   


In SQL we usually create tables, pre-deciding the columns and their characteristics, like default values and data types. It is possible to insert new columns and eventually alter them afterwards, using the alter table statement.
In the following post we are going to see what we can do with it.

With alter table, we can add, change the data type or delete a column inside a table.

Monday 13 February 2012

ASP: convert a string into a link

   


If you often visit social networks or, generally speaking, discussion web sites, you surely have noticed that sometimes when you insert a message or a post, every possible link is automatically recognised and "transformed" into a clickable link. How is it done?

With ASP we can manipulate a given string, find a possible link and change it.

Friday 10 February 2012

CSS: 3d text!

   


Can you see anything special in the following text?

3D Text
If you see it just as a big text, your browser is not compatible. Try to use the latest version of Firefox, Chrome, Safari, Opera or IE10.
How can it be achieved?

Let me explain it to you.

Wednesday 8 February 2012

CSS: image preloader

   


Today we are going to explore another CSS basic usage: image preloaders. It is a good practise not to use big images (in terms of weight) for web sites, however sometimes it's part of the game. Just consider the fact that a web site may be centred on photography and high resolution pictures may constitute its most important element.
In those cases, images may take a while to load and empty boxes shown on the home page aren't really a good welcoming sight for users.
With CSS we can reproduce a loading gif like:
which will be displayed while the main image is being loaded.
Let's see how we can do it.

Monday 6 February 2012

CSS: image zoom effect

   


Today, we will see how to create a zoom effect on image, with CSS. Today we have many useful tools to perform zooming effects on images, however the following approach could be of some use in specific situation where not complicated solutions are required.
The effect is simple, however, starting from this example, we can eventually develop a more complex one, for example using absolute positioning.
Said that, let's see how to do it.

Friday 3 February 2012

HTML & CSS: text overlay with shadows and round corners

   


Today, I'm going to explain a simple effect that is getting quite popular on web sites: we will position a text over a main container. The box will have shadows and round corners. Something like:

It will be an easy solution with full browser compatibility... please follow me...

Wednesday 1 February 2012

CSS: Ultimate CSS Gradient Generator

   


Today, in this short post, I would like you to know about a wonderful tool aimed to the creation of gradients with CSS.
The name of the tool is Ultimate CSS Gradient Generator, a powerful Photoshop-like CSS gradient editor from ColorZilla.

If you need to create gradients with cross-browser compatibility, the tool is quite powerful. It outputs the CSS code for IE9, FF3.6+, Chrome, Safari4+, Chrome10+, Safari5.1+, IE10+, IE6-8. As you can see it covers really most the browsers.