Javascript Not Working in IE

I’ve begun to start using console.log() to display variable values in Firebug’s console window to help with debugging. After everything was working in Firefox and Chrome, I noticed my javascript wasnt’ working at all in IE. Turns out IE doesn’t support console.log().

Reminder to self: Comment out all “console.log()” references before deploying.

This is the 2nd time I’ve come across this. Hopefully I won’t have to five more times before it sticks.

Custom CSS List Bullets Using :before and content

If you’d like to specify your own list bullets using images or special characters, here’s one way to do it. In your CSS, add the following code which removes the default list style, adds a small black right-pointing triangle and a space before your list content, and colors lists items.
[cc lang=”css”]ol,ul{
list-style:none;
}

ul li:before {
content:”25B8 020″;
}

ul li {
color:#0066cc;
}[/cc] Continue reading Custom CSS List Bullets Using :before and content

Importing / Using Non-Standard Fonts in a Website

If you’d like to use a font in your website that isn’t already included on most computers, you can import them using @font-face in your CSS. In the following example, I’m importing the Lucida Grande font. The first block is for the normal font weight and the second is for bold. If a visitor already has the Lucida Grande font on their computer, the website will automatically use it instead of download the fonts from ../fonts into their browser’s cache. This is done by specifying the “local” commands. Continue reading Importing / Using Non-Standard Fonts in a Website

Convert Text to HTML Character Entities

Sometimes, when you’re adding text to a web page, especially in a foreign language line French, you may encounter a bunch of accented characters that will show up as garbage in your browser unless you convert them to HTML character entities.

For example, the word Iñtërnâtiônàlizætiøn would be converted to Iñtërnâtiônàlizætiøn for safe display in all browsers.

Here are some web based tools that can automate this process for you.

The 2nd one is better because it can exclude HTML tags (brackets, etc).

PHP: Minify Code to Improve Performance

Here’s a quick and simple way to minify all your website’s code on-demand to improve website performance. Pass all of your website’s code into a function that strips out unnecessary stuff as follows:

[cc lang=”php”]/* remove all single line javascript comments */
/* replace all white spaces with a single space */
/* remove all multiline javascript and css comments */
/* remove all HTML comments */
$pattern = array(‘/s+//[[:print:]]+/’, ‘/s+/’, ‘//*.*?*//’, ‘/<!–.*?–>/’);
$replacement = array(”, ‘ ‘, ”, ”);
$minifiedcode = preg_replace($pattern, $replacement, $unminifiedcode);
[/cc]

WARNING: If your javascript is not well-coded (e.g. missing semi-colons), then you may get an error until you fix them.

Styling Hyperlinks

When styling hyperlinks, there are some rules you need to follow:

  • a:hover MUST come after a:link and a:visited
  • a:active MUST come after a:hover
Here’s an example:

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Convert Photoshop Font Point (Pt) to Pixels (Px)

When creating a new website from a Photoshop design, you may find yourself needing to convert between pt to px. Here’s a formula for making the conversion:

font size in pixels / font size in points = browser dpi (96) / Photoshop image resolution (ppi or points per inch)

So, if you have a Photoshop image with 13pt font at 72 ppi, the corresponding font size in pixels for display in a web browser is  Continue reading Convert Photoshop Font Point (Pt) to Pixels (Px)

FIX: PHP Cannot modify header information – headers already sent (line:1)

Sometimes, you may start to see a PHP error complaining about headers already being sent so headers can’t be modified. This usually happens when you echo content and then called the header() function. While those are easy to fix, some others arent, like when PHP complains about output already being sent on LINE 1 when you know there’s nothing on line 1 except “<?php”. Following is an example error
[cc lang=”html”]====================================
PHP WARNING
====================================
PHP Warning: Cannot modify header information – headers already sent by (output started at /home/www/abcde.php:1) in /home/www/def.php on line 90[/cc]
Continue reading FIX: PHP Cannot modify header information – headers already sent (line:1)

Railo: Open-Source Coldfusion Application Server

Recently, I needed to develop a mass emailing application using Coldfusion. I decided to use MySQL this time because it had a web-based management system and I didn’t feel like downloading and installing SQL Server Management Studio. Normally, when developing Coldfusion Apps locally, I would installed the Coldfusion Developer Edition. But, it’s so big and the installation process is kinda long, I decided to Railo. Railo is an open-source CFML processor. It’s compatible with almost all of the original Adobe Coldfusion tags and functions. It’s also very small (8 MB) and the Express version is super simple to install. Just double-click on a batch file and your web server is running. That’s pretty much the installation process. You could even put the whole thing on a USB drive. Continue reading Railo: Open-Source Coldfusion Application Server

Simple, On-The-Fly Image Resizing in PHP

Recently, I installed WordPress and a theme that used an image resizer extension called “TimThumb“. It turns out it’s actually pretty fast and useful. For example, if you have an image on your server called “castle1.jpg”, you can display it in your website as usual using

[cc lang=”html”][/cc]

and, if you want to resize it without having to go into Photoshop, resizing it, uploading it to your server, using TimThumb, you can just do this: Continue reading Simple, On-The-Fly Image Resizing in PHP