blog home

CSS transparency tricky IE6 fix

Posted by Jen in coding front-end on June 29th, 2009

semi-transparentIt’s not hard to implement a semi-transparent block by CSS in all modern browsers. The code is something like this:

.thisblock {
filter: alpha(opacity=65);
-moz-opacity: .65;
opacity: .65;
}

And in your HTML, you have something like

<div class=”thisblock”><img src=”someimage.jpg” />some text after the image</div>

Very eassy, right? It basically covers all browsers - IE7, Firefox, Mozilla, Chrome and even Opera. However, if you try IE6, it’s not working.  Here is one little trick for that… add either width or hight to that div class, then you are done. So the fix will be

.thisblock {
filter: alpha(opacity=65);
-moz-opacity: .65;
opacity: .65;
width: 50%;
}

width can be anything, number, percentage, except “auto” or “inherit”.

With the above trick said, if you really don’t want to define the width or height of a block, but have to implement the semi-transparency in IE6, use <p> instead. With <p>, you don’t have to worry about width or height, because not like <div> which span across the entire row,  <p> automatically wrap around the elements inside it, thus it got a specific width by itself.

A peek at Wordpress - permalinks and SEO sitemap

Posted by Jen in coding front-end, random thoughts on June 24th, 2009

blue-lWhen it comes to free CMS, people usually think of Joomla, Drupal, openSourceCMS, etc. Yes, those are good CMS, and we have made a few websites by using those systems and they all turned out to be great in terms of usability. However, what impressed me the most is the open source PHP/MySQL based Wordpress. With a false impression of a blog CMS, it won’t come up to many un-geeky people’s mind when they want to have a CMS for their regular static page based website. However, as a web professional, I would strongly recommend wordpress as the first CMS choice for most of my clients, because it’s simply great and powerful to develop and use, not just as a blog CMS, but also in all. You can certainly use it for a regular blog free website.

In general, we should think of a blog as a regular website, take its categories the same as navigation menus. The only difference is blog category usually has the URL as www.yoursite.com/category/categoryname1. It’s very easy to turn this URL to www.yoursite.com/categoryname1 which looks just like a regular website subpage. And of course it’s good for the search engine to find your page with less sub-directory as we all know. So how to do that? All you need to do is just go to your wordpress admin page, settings -> Permalinks ->Optional, in the field of category base, simply enter “.” (without quotes of course).

Alright, this is just one little trick of wordpress. It’s just so powerful that it does many things for you already and all you need to do is just a few clicks. One more example. For the google SEO sitemap, when you have wordpress installed, you will never need to manually write up or update this tedious XML file. Go install this google XML sitemap plugin, it takes all your dynamic blog posts as well as static pages to the sitemap file and update it whenever you change something on your site.

One more little trick about this sitemap plugin, if you install your wordpress for only the blog session on your server, and all other pages are located one directory above the wordpress blog session, to include all other pages as well as the blog pages in the sitemap, you will need to upload the sitemap.xml file to the root directly of your site, but not wordpress directory. On the sitemap configuration page, in the “additional pages” section, add the URL of the pages that are located above the blog directory, in “Location of your sitemap file” session, choose “custom location” radio button, fill in the sitemap location manually (should be under root directory). In the sitemap content session, make sure to choose “include homepage”, “include static pages”. Last, click on the link of “build the sitemap for the first time”. Then you are done! No need more work when you add more post or do any updates on the site. Isn’t this cool?

BTW, there are many free and beautiful themes on wordpress.org, and also many interesting blog sites on wordpress.com. You can go get your free blog sites by signing up there.

It’s the twitter time

Posted by Jen in random thoughts, trends on June 21st, 2009

twitterOne thing I have to admit is that I am not an active trend follower, which might not be good for a web designer. So when twitter has become a trend, I didn’t pay much attention to it, until one day I found it’s already everywhere that I can’t even avoid it any more… Yes, it IS everywhere, all TV news, celebrities, everyday enormously growing amount of random people, and even US governments, are all using twitter. It’s not just another social networking website, it is a phenomenon of the generation. It’s quick, short and full of information that you are interested in…. this is exactly what we are for.

Still I am one of millions of the twitter beginners, in the process of finding the value of it while already got addicted to it. Just found some small tricks of usage, and happy to share in here

1. Twitter is associated with many bookmarking website. When you submit a web page to their site, they let you post this site link to twitter meanwhile with just a button clicking.

2. hash (#) is an amazing feature of tagging the keywords. This tag will then be tracked by twitter (after you opt in and follow twitter.com/hashtags) and whenever you post with a tag word (word after #), it will show up as a real time post at http://www.hashtags.org

3. twitter has its simple HTML/JavaScript code that allows you to insert into your own website or other social network site to show your twitter’s updates on those sites.

Want to find out how amazing twitter is? Go experiencing yourself! :)

Chris Costello, Papyrus and My Poster

Posted by Jen in design & art on June 16th, 2009

papyrus_posterPapyrus is a contemporary font that has been broadly used in various art works for different types of occassions, due to its neat yet stylish look and great legibility.

The poster is sort of a typography study in Papyrus, merely composed of all letters of the alphabet and some numbers and characters.

More info for the font creator: Chris Costello

Chris Costello graduated from Dutchess Community College in Poughkeepsie and received an Associates Degree in Commercial Art, in 1979. While in school, he worked at Wambach Communications Group, in Rhinebeck, New York as a part-time graphic designer and was hired full-time after his graduation. During this period of his life, he was also very involved with music and played bass with several bands in the area. He eventually took a chance to follow this dream—he quit his job and joined a rock band that toured the southern U.S.

In 1982, he moved to South Florida to attend the Art Institute of Fort Lauderdale, an art institute located directly on the beach. He won some awards and two scholarship nominations then decided to take a semester off and work in the field for a while. However, his job was so great, that he just kept on working and never went back.

Chris Costello worked at Group 3hree Advertising in Pompano Beach, doing graphic design, production and illustration. After about a year, he left this full-time position and went back to work for the same company, making twice as much money as a freelancer. He figured this was the way to go, so he hired himself out to ad agencies and design studios throughout South Florida. He liked the freelance idea because he could work on a lot of different projects and still had some time to hang on the beach.

After tiring of his vacation lifestyle, he moved to Boston, Massachusetts and worked for Brewster Advertising in Cambridge as an Art Director. After three years, he felt that he acquired enough experience to go off on his own again, so he left to pursue a career as a freelance illustrator and, a professional bass player. For the next six years, he had the time of his life. During the day, he worked at home, illustrating for high profile book publishers and ad agencies throughout the country. His nights and weekends were spent traveling to resorts and colleges all over New England to play music.

Costello became the Art Director for DPI, a book publisher in Woburn, MA in the year 1995. There, he learned computer graphics, web design, management and all about the publishing industry.

Three years later, he left DPI and became Senior Graphic Designer for The DeWolfe Companies in Lexington, MA. In 2002, Dewolfe was aquired by NRT and merged with Coldwell Banker Hunneman to form Coldwell Banker Residential Brokerage where he was promoted to Creative Director in thier marketing department.

In 2003, he recieved a Bachelors Degree in Graphic Design and Visual Communication at Northeastern Universty in Boston.

Chris Costello currently lives in the Boston area with his wife, Anita, and his two daughters, Sheriden and Emersen. He still gets to hang on the beach every now and then… but mostly then.

Designing typefaces is a labor of love for him. After handlettered book and magazine titles for several major publishers, he thought it would be cool to produce complete character sets from some of these designs for all of creatives out there. Except for Letterpress Text, every font is inspired by his own imagination and most are inked by hand before they are digitized.

The complete list of type fonts that Chris Costello designed is as follows:
Blackstone, Blackstone Italic, Letterpress Text, Letterpress Text Italic, Letterpress Text Bold, Letterpress Text Bold Italic, Mirage, Papyrus, Virus, Virus Lethal

Chris Costello created the font Papyrus in 1983. This unusual roman typeface merges effectively the elegance of a traditional roman letterform with the hand-crafted look of highly skilled calligraphy. It includes an extra set of initialing capitals to enhance its unique style.

Papyrus is part of the Linotype Library. Papyrus is a trademark of Esselte Letraset Limited.
The font Papyrus can be downloaded at:
http://www.linotype.com/14649/papyrusregular-font.html

My Interpretation of Graphic Design

Posted by Jen in design & art, random thoughts on June 16th, 2009

graphicdesign_300Every person in the world is like a planet, lonely, but connected to each other in some way. Graphic design, a certain form of art and technology, is just like a media, a window, through which we convey messages. With it, life becomes colorful and meaningful.

be cautious when using window.opener

Posted by Jen in coding front-end on June 15th, 2009

I am talking about window.opener in JavaScript. By defining the attributes of this window.opener, you basically got to control some behavior of the parent window. That sounds cool but might be uncool in some situations as well. For example, when you do this, in order to show some page in the parent window:

<a href=”javascript:window.opener.location=’somewhere”>going somewhere in parent window</a>

It may not work at all, because from this current page, you have no control of where it came from. The user may get the URL of this current page, past it to the address bar directly and there will be no parent page of it all. In this situation, the link on this current page will go nowhere.

Well, just some a little issue I fixed from some badly coded website.

Optimizing PHP

Posted by William in backend on June 10th, 2009

An good article providing many insights on optimizing PHP.

Be careful of using PHP arrays.

PHP arrays is not efficient and uses a lot of memory. So be very careful to use PHP arrays, especially if the array could potentially have a lot of elements. Here’s an example:

<?php
$arr = array();
for ( $i = 0; $i < 10000; $i ++ )
$arr[] = $i;

print “Memory used: ” . number_format(memory_get_usage(true)) . “\n”;
?>

This is an array of only 10,000 elements, but this consumes over 2MB of memory. Imagine from your webserver, you have 10,000 concurrent users invoking a script that’s doing something like this, you can easily crash the machine by running out of memory.

The lesson here is that PHP array is only designed to be used for small amount of data, ideally not more than a few hundred items.