Cross-Browser CSS Gradients

CSS gradients are great and much better and easier to use than gradient images. However, the CSS code to created them can get a bit complicated. Here’s a CSS Gradient Generator that makes this super easy and supports color stops and many preset gradients.

http://www.colorzilla.com/gradient-editor/

If you already have some CSS for your gradients, you can copy and paste it (import it) to generator cross-browser CSS for your gradients.

Also, make sure to enable IE 9 support if you still need it.

Also, remove “filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#a3d2f6′, endColorstr=’#ffffff’,GradientType=0 ); /* IE6-8 */” since that messes up IE 9.

Free, Open Source Web Fonts

There’s no doubt that the type of fonts you choose for your website can make a big impact on its look.  The problem is many nice fonts are expensive and embedding them in a website requires converting them to the right formats and including them in your CSS correctly. One free alternative is to use Google Web Fonts which, at the time of this posting, has 501 font families. It’s super easy to add to a website by just copying and pasting.

To learn more, visit http://www.google.com/webfonts

Title Case

Title Case

This happens so often that I’m actually tired of seeing it, especially coming from Americans and Brits. Apparently, many people don’t know how to title case words that are used in a title. While there are specific rules like you’re not supposed to title prepositions, articles, and conjunctions, instead remembering those are, you can just use a title case converter.

http://titlecase.com

There, now you have no excuse for misspelling titles.

Unicode / Foreign URLs

Recently, I came across a need to create a redirect for a URL that contained a unicode character. The url was something like

www.somedomain.com/réseau (notice the accented character)

While this would be easy to type for French people, it isn’t so for others, like Americans. To accomodate different possible spellings, a good practice is to create a redirect for 2 alternative spellings so that any one of the following URLs resolve:

www.somedomain.com/réseau
www.somedomain.com/r%C3%A9seau
www.somedomain.com/reseau

This way, percent-encoded URLs will work and people who don’t feel like finding out how to type “é” can just type “e” and that would work as well 🙂

Javascript Screen Scraper / Website Downloader

Recently I needed to download the HTML source code from 9640 pages behind a login. At first I used PHP and cURL which normally works just find. With cURL, I first cURLed to the login page passing my login info. Then, in the same script, I cURLed to the pages I wanted to download and save to my local machine.  That didn’t work so I inspected the headers and set cURL’s header options to be exactly the same. That didn’t work either and I just got a 301 Moved Permanently error. It seemed like I needed a way for the remote server to think I was no different than a regular web user browsing in a web browser. So, I tried Javascript. I logged into the website, fired up Firebug, and pasted the following code into the console tab’s command line:

[cc lang=”js”]
function wait(msecs) {
var start = new Date().getTime();
var cur = start
while(cur – start < msecs) {
cur = new Date().getTime();
}
}

Continue reading Javascript Screen Scraper / Website Downloader

PHP Unicode Regular Expressions for Form Validation

Validating user-submitted form data is necessary and is often done against just ASCII (English) characters. But, as more websites are catering to an international market, many need to validate against foreign / unicode characters such as the letter é in the word extérieures. Since regular expressions are often used to compare user-submitted data against accepted patterns, these regexes need to be match against unicode characters in order to support non-ASCII characters. Here’s an example conversion from an ASCII regex to a Unicode one that also matches à through ă.

ASCII: ^([a-zA-Z0-9]+)$
UNICODE: ^([u0030-u0039u0041-u0056u0061-u007au00c0-u0103]+)$

Continue reading PHP Unicode Regular Expressions for Form Validation

Easily Resize Browser Window For Different Screen Resolutions

With so many different screens resolutions on the market, from super wide monitors to Retina-display iPads to low-res 800×600 resolutions for people who prefer seeing everything big, most web developers will need to know how their websites look in different resolutions. One easy way to do this is using a Firefox plug-in called Web Developer. It has many features including the ability to turn on and off CSS and Javascript, will validate your page.

For more information, visit https://addons.mozilla.org/en-US/firefox/addon/web-developer/?src=ss

▲