CSS: adjacent sibling selectors

Who knows what adjacent sibling selectors are? Hmmm... it looks like not many of us are aware of their existence... It is quite true that considering all possible CSS selectors, adjacent sibling selectors are the most unknown and rarely used even by expert web developers. Why? Don't know... Nevertheless they are quite useful and efficient in applying CSS rules to specific elements.

I will show you an example and we will explore adjacent sibling selectors use.

What are adjacent sibling selectors?

We can define adjacent sibling selectors as stated by the W3C site:

"Adjacent sibling selectors have the following syntax: E1 + E2, where E2 is the subject of the selector. The selector matches if E1 and E2 share the same parent in the document tree and E1 immediately precedes E2, ignoring non-element nodes (such as text nodes and comments)." (quote from W3C)

ASP: simple CAPTCHA method

I'm sure you know what CAPTCHAs are. They usually are not very welcomed when filling in a form, but the idea behind them is to at least reduce the possibility of automatic non-human procedures submitting the form itself. The main point is to recognise if who or what is submitting a request is really a human or not.

The solution I'm presenting here is very simple and it is not unbreakable. Infact, today we surely need a highly sophisticated CAPTCHA procedure in order to be completely sure of its effectiveness.
On the other hand, we can use the solution here presented whenever we need a little bit more security.
We are going to use ASP and GUIDs (Globally Unique Identifier).

Follow me, please.

Are you working today?

Christmas day is always a great day to me: finally the period before it, is finished. I always had problems in finding the right present for friends and family. Now everything's gone and I'm out of the office... I can relax and spend some time with my two children and my wife...

I hope you too had a great time. And I hope your holidays will be fantastic...

Regular posting will resume on the 28th. In the meantime... just enjoy your family and friends!

Merry Christmas

MERRY CHRISTMAS

from

Web Design: mistakes in big companies websites

Christmas is near, and I know that we all need to rest a bit, without thinking about coding and programming.
That is why, today, I publish a post which might raise our spirits: I'll show you small or big mistakes made by web developers in big companies websites.
That will be fun!
I browsed a lot of websites on November the 25th 2011... all done in one morning. I screen-captured the mistakes while using Firefox 8.0 with a 1280x1024 screen resolution.

I will show you glitches in the following websites (strictly in alphabetical order):

1. cnn
2. coca-cola
3. eBay (Italy)
4. flickr
5. google (reader page)
6. hp
7. kaspersky
8. nintendo
9. philips
10. twitter

Ready? Enjoy yourself... with a bit of pride, because we know we do not make such mistakes!

CSS: @import at-rule

Following my previous post about progressive enhancement, today I would like to discuss the CSS @import at-rule.

The @import at-rule allows us to link external style rules. Basically, using it we can import rules from other stylesheets. The rule must be the first rule of a stylesheet (apart from the @charset at-rule). The @import rule can contain media queries (comma separated) in order to import specific media rules.

The syntax

As I said before, the rule have to be placed at the beginning of a stylesheet. Its syntax is:

@import url comma-separated-media-queries;

where:
url = the path of the stylesheet we want to import;
comma-separated-media-queries = the list of media to which the imported rules will be applied (screen, print, mobile etc). If the target browser doesn't support the related media, the rules won't be applied at all.

Web Development: what I think about progressive enhancement

Since the beginning of web development, programmers have had the duty to guarantee a correct and possibly full user experience to all the web site visitors, regardless the browser that they use.
If we stop for a second and think about the above statement, we can probably understand how that is a very big problem. Allow me a strange similarity: it is as if we need to design a new shoe that fits all sizes. It surely can be done. It involves a lot of work and it won't probably satisfy all the users.

Two methods to solve the problem
Web developers normally use two different approaches in order to face the issue: the first and older one is graceful degradation. A bit newer method is called progressive enhancement.
The two methods are easily confused, but they have a big difference: graceful degradation focuses on browsers capability, while progressive enhancement focuses on content.

ASP: how to create a reusable function to query databases

Today we are going to create something probably out of the ordinary. We will create two reusable functions (with parameters) in order to query a database.
The first function will open a recordset and execute a query. It will accept 3 parameters: recordset name, connection and query string.
The second function will close the recordset. It will accept 1 parameter: recordset name.

In order to use the parametrised functions, we will benefit from the Execute() VBScript function.
So, before building the two functions, let's try to understand Execute().

ASP: a tutorial for beginners

What is ASP? Which is ASP basic syntax? Objects, methods, properties, events and collections?
AH! Do we really know what we are talking about?

The following post is just a quick reference guide for all those things. It is meant for beginners, but I believe that even experienced programmers might find it useful... just to check if everything we know is correct.

What is ASP?

ASP stands for Active Server Page. In a previous post I've already defined it as a scripting engine. That is because we usually and wrongfully consider ASP as a programming language.
We can use different programming languages in ASP pages, such as VBScript or JScript. Usually, web developers use VBScript, which is ASP default language.
The ASP engine is managed by IIS (Internet Information Services), working in a MS Windows environment. I know that it is possible to use ASP with other web server applications such as Apache.
It is worth mentioning that ASP is working with PWS as well. PWS (Personal Web Server) is a small but fully functional version of IIS and it was available on older operating systems like WIN 95 and 98 (oh what a leap in the past!).

Web Design: what to consider when re-designing a web site

I've been recently asked to re-design a web site. I had to meet some people and talk about it. The company wanted a completely new web site, while the engine behind (SQL database) should have stayed.
As you may understand, that is a completely different situation compared to the development of a new web site. There are some things to be considered when approaching a totally new site that do not apply in a re-design. I'm talking about technical things like domain management, web site hosting and platform used; or marketing stuff like commercial targets, brand awareness program and other boring things.
In our case the story is different: many of the above questions have been already asked and settled. For this reason, I have created a list of matters that needed to be discussed and that I think might be useful to all those developers in the same situation.

So, here is my list of practical things to consider (and ask) when re-designing a web site.

HTML: terms and syntax (a tutorial for beginners)

At the end of October I published a post about CSS terminology which explained the basic usage of Cascading Style Sheets and technical terms used to identify and explain code parts.
Today we are going to do the same for HTML, because I feel that sometimes terms are not properly used, and we surely need to make things clear.
The following will be a short and undoubtedly not complete journey through the basic HTML programming. If you are a little bit experienced, you might find it boring... however, are we fully sure we use the correct terminology?

Follow me and see for yourself.

CSS: how to change an element style with JavaScript

It is possible to manipulate a CSS rule applied to a DOM element using JavaScript. The solution can be quite effective, because we can change styles according to specific events in our page.

For example, when a button is pressed, or an option is chosen, we can trigger an event that will change a CSS property's value.

In the following post, we will change the background colour for a text, by pressing the text itself. Then we will create another trigger that will change the text colour back to default, again.

CSS: how to create a stylish search input box

The search capability in modern web sites is an established feature. Visitors should always have the possibility to look for text or else, and search a whole site for specific things.
A search form can stay anywhere, however, it seems that the best way is to insert the feature on every page, possibly in the top right corner. If we browse all major web sites, we will notice that the search box is always there, ready to be used when needed.

In the following post, we will create a search form and style it a bit. The resulting box will be:

Search Box

Note that the above is an image, so please do not try to use it.
Ok! Now let's try to build it. We are going to use plain HTML and CSS.

JavaScript: validate forms with Regular Expressions (RegEx)

I know I've been posting a lot on forms and validation recently, however we should all agree on the fact that form validation is really a serious problem for programmers.

When a user submit data to our database, the first thing we should consider is to protect the destination. Our database is waiting for specific data and, for example, a text string must not be submitted to a smalldate field.
On the other hand, we should provide a complete and efficient way to help the user in filling in the form. Specifically in commercial situations, if we want the visitors to conclude painlessly a commercial transaction, we should make things the easiest possible way for him/her.

When we check what the user is submitting, we can be sure that the birth date or the credit card expiration date is truly a valid date - for the user protection and security and for the web site owner who needs to be sure that everything works smoothly.

In the following example, we are going to validate emails, however, by changing the regular expression, we can check almost anything.
In the following example we use RegEx in a short JavaScript function.