Archive for October, 2007
CSS – Table Style Usage Pt. 1
Posted by admin in CSS Advanced on October 30, 2007
Many people think table is old fashioned, and should be completely replaced by div. But to me, who believes in a bit of zen living, always try to find the ‘middle way’. Table does come in handy when making a grid based board. Below is an example of a music list (HMV in Singapore is having sale, I bought a few albums, which are put in the list.) I created in table and styled using CSS. Enjoy!
CSS-Eliminating Page Element Margins
To eliminate all the whitespace, margins, paddings on all the page elements can help set a standard to the page layout. The effect is called full-bleed effect. It’s always a first thing first to me when I start styling a website.
Many poeple only set the body element’s padding, margin, top, left to zero. What they forgot is that body’s first child element may cause whitespace, as well, so it’s important to set the first child’s margin-top and padding-top to zero. below is a demo. Enjoy!
http://www.lab.highub.com/css/css-eliminating-page-margins.php
FileZilla 3.0.2.1 bug
I installed FileZilla 3.0.2.1, and later uninstalled it. The reason is that there is a bug almost get me ‘killed’. There is no ’show hidden files’ option. So all .htaccess files are invisible. So I am sticking with version 2.2.32.
CSS – Font Families Best Practice
In CSS, there are totally 5 font families, each has its purpose.
Serif fonts
These fonts are proportional and have serifs. Use them for titles and headers.
Sans-serif fonts
These fonts are proportional and do not have serifs. Use them for contents.
Monospace fonts
Monospace fonts are not proportional. Use them when try to emulate typewritten text.
Cursive fonts
These fonts attempt to emulate human handwriting.
Fantasy fonts
Such fonts are not really defined by any single characteristic other than our inability to easily classify them in one of the other families. Use them when you are writing something fantastic!
I just created a demo page to use all these font families. Enjoy!
http://www.highub.com/lab/css-font-families.php
CSS Hacks – Highlight Well Formed Elements
CSS can be used in creative ways, by using CSS attribute selection, it’s easy to isolate image tags without alt attribute and link tags without title and link attribute.
Note: support for these substring selectors is confined to Safari, Gecko-based browsers, Opera, and IE7/Win.
CSS Code:
<style type="text/css">
/*
style all images that have an alt attribute, thus
highlighting those images that are correctly formed
*/
img[alt] {border: 3px solid red;}
/*
to boldface the text of any HTML hyperlink that
has both an HRef and a title attribute
*/
a[href][title] {font-size:200%;}
</style>
5 Great Firefox extensions
With these 5 great Firefox extensions, I am still the same – stupid. But they really come in handy sometimes, even for stupid people like me.
PHP Regex – POSIX vs PCRE
PHP supports both POSIX Regex (POSIX Extended) and PCRE (Perl-Compatible) regular expression. For POSIX, the syntax is ereg, and for PCRE, the syntax is preg. According to PHP offical site documentation, PCRE is much (at least 6 times) faster than POSIX. The scripts below replace everything between double quotes. the first one is written in POSIX, another in PCRE.
Regular Expression Explanation:
| “ | a quote, followed by … |
| [ | a character class … |
| ^ | that isn't … |
| " | another quote … |
| ] | the end of the character class … |
| * | zero or more times … |
| “ | another quote appears. |
Source Code:
<html>
<head><title>Using POSIX</title></head>
<body>
<form action="<?php $_SERVER['PHP_SELF'] ?>"
method="post">
<input type="text" name="value"
value="<? print stripslashes($_POST['value']); ?>"/>
<br/>
<input type="submit" value="Submit" /><br/><br/>
<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" )
{
$mystr = $_POST['value'];
$mynewstr = ereg_replace(
'"[^"]*"', '"***"', $mystr );
print stripslashes($mynewstr);
}
?>
</form>
</body>
</html>
<html>
<head><title>Using PCRE</title></head>
<body>
<form action="<?php $_SERVER['PHP_SELF'] ?>"
method="post">
<input type="text" name="value"
value="<? print stripslashes($_POST['value']); ?>"/>
<br/>
<input type="submit" value="Submit" /><br/><br/>
<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" )
{
$mystr = $_POST['value'];
$mynewstr = preg_replace(
'/"[^"]*"/', '"***"', $mystr );
print stripslashes($mynewstr);
}
?>
</form>
</body>
</html>
PHP Regex – Finding Similar Words
I take a break from fighting evil visitors. [] is a quite useful PHP PCRE expression that helps finding similar words.
Regular Expression Explanation:
| \b | a word boundary, followed by … |
| b | letter ‘b’, followed by … |
| [aio] | one of a, i, or o, followed by … |
| t | letter ‘t’, and finally … |
| \b | a word boundary. |
Source Code:
<html>
<head><title>Finding Similar Words</title></head>
<body>
<form action="<?php $_SERVER['PHP_SELF'] ?>"
method="post">
<input type="text" name="value"
value="<?php print $_POST['value'];?>" />
<br />
<input type="submit" value="Submit" />
<br /><br />
<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {
$mystr = $_POST['value'];
if ( preg_match( "/\bb[aio]t\b/", $mystr ) ) {
echo "Yes!<br/>";
} else {
echo "Uh, no.<br/>";
}
}
?>
</form>
</body>
</html>
PHP Regex – Bad Words Streamlining
So what if we detect and filter out all bad words on the site? Will that make the bad guys try to behave themselves or go to hell? No, they will neither try to behave themselves nor go to hell. What they will do is to leave our website and go visit another website that accepts bad words. So if you filter out all bad words on the site, go to visit your google analytics tomorrow, you will see the graphics change from a slash shape to a mountain shape. We don’t want to see that, so how? So instead of filtering out bad words, we should ’streamline’ them. Instead of filtering out the word ‘fuck’, we can streamline it to ‘f**k’. In this way, we can keep both our ‘moral standard’ and visitors on our site. Hypocritical it might be, but so what? We need traffic!
Below is how I use PHP’s preg_replace to make the streamline process work like a charm:
Regular Expression Explanation:
| \b | a word boundary, followed by … |
| fuck | the word ‘fuck’, followed by … |
| \b | a word boundary. |
Source Code:
<html>
<head><title>Replacing Words</title></head>
<body>
<form action="<?php $_SERVER['PHP_SELF'] ?>"
method="post">
<input type="text" name="value"
value="<?php print $_POST['value'];?>" />
<br />
<input type="submit" value="Replace word" />
<br /><br />
<?php
if ( $_SERVER['REQUEST_METHOD'] == "POST" ) {
$str = $_POST['value'];
$newstr = preg_replace(
"/\bfuck\b/", "f**k", $str
);
print "<b>$newstr</b><br />";
}
?>
</form>
</body>
</html>
-
You are currently browsing the archives for October, 2007
Translator
By N2H
