How To Learn Regular Expressions (RegEx) Fast

Regular expressions can be confusing and perplexing, but if you’re a programmer or someone who loves to improve work productivity on the computer, then you’ll be happy to know that once you master regular expressions, a lot of time and effort can be saved (not to mention, you’ll be able to do some very cool things!)

First of all, let’s try to answer what a regular expression is. A regular expression (or regex or regexp, for short) is a way to match certain patterns in a piece of text. For example, you can create a regular expression to find any email address, or any phone number. This is incredibly powerful, because normal text-matching operations would require you to know, for example, the email domain at least, before you’re able to match it. Besides email addresses and numbers, regexs can be created that match characters, patterns, or any other characteristics that text can have.

A great way to test and try out regular expressions is with a regex tool. A free online regex tool is RegExr. I found RegExr while looking for a regex tool, and it’s fantastic because it allows you to instantly test and check your regular expressions, which is a good way to learn regular expressions.

​Read More

How To Set A Maximum Width or Maximum Height For An Image With CSS

I was trying to figure out how to set the maximum width and maximum height for my images, and I wanted a way that didn’t require PHP programming. I finally found a way and stumbled upon how CSS could make use of expressions as well. It’s a method where you can have a conditional statement in CSS, as follows:

#container img {
  width: expression(this.width > 500 ? 500: true);
  width: expression(this.height > 300 ? 300: true);

What this does is to evaluate whether the height or width of your image is more than the stated (500px for width, 300px for height), and if so, resize them to 500px and 300px respectively. Note that you actually have to apply this CSS to your image directly, either by modifying the img tag as above, or by assigning a CSS class to your images. This doesn’t work if you apply the CSS to the containing DIV.

this.width > 500 ? 500: true is actually an inline programing statement, which takes on this form: (condition-to-evaluate) ? value-if-true:value-if-false

If you’ve done programming before, it’s exactly the same as the typical If-conditional, which looks like:

if (myName=="Alvin") {
  return "Hi Alvin!";
} else {
  return "Who're you?";

Done in the inline form, it’ll appear like the following. It’s exactly the same, but comes in one line to save space and make it more streamlined. It’s useful for short conditionals, but I wouldn’t recommend it for more complex code blocks.

(myName=="Alvin)?"Hi Alvin!":"Who're you?";

I haven’t done extensive cross-browser testing yet, but as far as I know, this works for FireFox 3.x and Internet Explorer 7 at least.

​Read More