Password Requirements Validation with JQuery

Password screens are challenging for users because we often ask them to enter complex strings which most times are not even able to see. Adding to it, these strings have to meet different criteria – like having upper and lower case characters, numbers and so on – to keep our applications secure. In this post,…

One-liner to minimize your CSS files

The following one-liner will help you remove comments, spaces, and more from your CSS files. Suggestions are always welcomed. Important: Before running this command, create a copy of your original file. Try the resulting CSS in a test environment before releasing it. cat style.css | sed -e ‘ s/^[ t]*//g; # leading spaces s/[ t]*$//g;…

Coding An HTML 5 Layout From Scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all…

CSS – Attribute selectors

Attribute selectors allow you to select CSS elements based on their attributes or values. For example, if you want to select an image named “great.gif” you can do it by using the following rule: img[src=”great.gif”] { border: 3px solid #000; } There are four types of selectors. By attribute. The following example will select all the…

Redistribute your webpage contents to fit your browser width

by Andrés Jaimes Are you tired of dealing with different screen sizes for your web pages? Well, this information is for you. I will show you some CSS tricks to help you reorganize a webpage depending on your browser window width. We will start with a simple HTML 5 skeleton that includes a contents and…

An easy way to do a CSS Horizontal Menu

by Andrés Jaimes Here it is. Start with a conventional item list like the following: <ul class=”hmenu”>     <li><a href=””>Option 1</a></li>     <li><a href=””>Option 2</a></li>     <li><a href=””>Option 3</a></li>     <li><a href=””>Option 4</a></li>     <li><a href=””>Option 5</a></li> </ul> Don’t forget to add the class parameter to the ul tag – that will help us do…