Category: Web Development

Back in the day (a few years ago), if I needed to parse content from an HTML source, I’d write a script that would search for tokens / identifiers in the code to mark the start and end points and then use string manipulation functions to extract what I’d need. Now, a much easier way is to use Simple PHP DOM Parser which lets you select elements jQuery style and process them easily in PHP. Here’s an example from their website:

[cc lang=”php”]
// Create DOM from URL
$html = file_get_html(‘http://slashdot.org/’);

// Find all article blocks
foreach($html->find(‘div.article’) as $article) {
$item[‘title’] = $article->find(‘div.title’, 0)->plaintext;
$item[‘intro’] = $article->find(‘div.intro’, 0)->plaintext;
$item[‘details’] = $article->find(‘div.details’, 0)->plaintext;
$articles[] = $item;
}

print_r($articles);
[/cc]

Many websites uses gradients (the blending of colors from one color to another) to create nice visual effects. Sometimes, it’s not easy find what colors to fade to. I came across this web site that fixes that problem. Check it out.

http://0to255.com/

If you have pasted some text into a web page and it doesn’t wrap, here’s one way to fix that.

[cc lang=”css”]
pre {
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap !important; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}[/cc]

Recently, I needed to search all URLs in a document in Dreamweaver and wrap them with <a> tags to turn them into links. The URLs themselves would be the text to click on. In Dreamweaver, you can use regular expressions and capture matches for use in replacements as follows:

[cc lang=”html”]SEARCH: ((https?|ftp|file)://S+)
REPLACE:  $1[/cc]

Notice I wrapped the SEARCH regex with parentheses ( ) to capture that match and use it in the REPLACE using $1. If I had more parentheses to capture other matches, I could use them in the REPLACE using $2, $3, and so on.

Make sure you have “Regular Expressions” checked when you do this.

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.

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

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

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.

• http://web.forret.com/tools/html.asp?inputtext=I%F1t%EBrn%E2ti%F4n%E0liz%E6ti%F8n
• http://code.cside.com/3rdpage/us/entity/converter.html

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.

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

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 */