Dean (Zhuiyang) Chen

I finished designing my portfolio page. You can check it out under the about me section on the left nav.

I was amazed at the ease of use and powerful features geared towards web design that Adobe integrated in to Fireworks CS3 when I introduced it to my girlfriend last night. The multitude of brushes themselves, including all types of color changing confetti and "alien paint", many of which respond to pressure from the pen for the Wacom Bamboo tablet I got her for Christmas, provides all the tools a design will need. I was so impressed that I had to check out those features for myself, and there is no better way to do test Fireworks potential than to produce a real world design.

Ironically the design itself is inspired from Fireworks' feature set. The grid background was inspired from the show grid feature available in Fireworks, and the glow for these boxes was inspired by an accidental click in the styles panel of Fireworks. I'm pretty satisfied with the new layout that I created in a few hours(would have taken 30 minutes if I knew exactly what I wanted). Fireworks makes applying styles extremely easily by providing a preset that takes only one click to apply and can be easily edited under the properties panel to match your needs. Although I didn't need it, the integration with other Adobe products such as Dreamweaver, Photoshop and Flash is definitely there. Fireworks has now replaced Photoshop for all my web design needs, I don't miss anything from Fireworks' reduced feature set.

However, it is not without its faults. It would run very sluggish in Windows Vista until I disabled in Aero interface, documented on Adobe's site after a quick google search. This is just unacceptable since the final version of Windows Vista was released prior to CS3 and the beta of Vista has been available for testing for years. I was also unable to take advantage of Fireworks' slice feature since it refuses to save in any format other than horribly compressed jpeg, that distorts the dotted lines and ruins the glow from boxes. I believe all the images on a site except for colorful images should be PNG, since jpeg sucks at compressing fancy designs with transparency and gradients. Fireworks also save flattened PNGs as PNG 8, which only saves a very small subset of the color spectrum of the file ruining any gradients. I didn't notice this until I had already made all the components to the design and realized how horrible the gradient from the blue glow looks.

It only took 5 minutes to implement the new design after I prepared the images(there are only three of them, one for the header, body and footer) since all that was required was small updates to less than a dozen lines in my CSS. If you are using Firefox just right click on the header body and footer too see how I implemented the design. You can checkout my old design here.

The next step is to clean up my left side nav and move some of it on to the header. By the way, I did all of this with a sprained and/or fractured right wrist, and I'm right handed, which shows how efficient Fireworks workflow is.

I started this project more than a month ago as a Christmas present for my girlfriend Jane. The general layout is inspired from this site but I definitely like the design better and will most likely update the dark backgrounds of this site in to something a bit more vibrant along the lines of dark blue and white. The biggest challenge was getting those thick green and white lines to line up, I ended up resorting to transparent pngs but as most web developers know it doesn't work in internet explorer 6 so I specified a non-transparent png for the ie6 stylesheet and still need to line it up. I realize that there's a couple of hacks to get around this limitation, one of which I'm using on this site, but the transparent header refused the align correctly when hacked. Other than that, everything else worked out pretty smoothly and this is definitely one of my better designs.

I also made a PHP powered RSS feed that automatically updates as I make new posts and am to alert google and some other sites that my page has been updated... very convenient. You can subscribe to the feed on the left menu under subscribe or by clicking the orange RSS icon near your browser address bar. It was initially created so that Jane's new posts will sync directly with her facebook notes through RSS, but it wasn't very hard to copy the code for my uses. I'm trying to find the best way to present source codes on this website but I'll definitely publish the source of my RSS generator in the near future. It pretty much involves outputting posts, much like my index page does but in XML tags. I also implemented two classifications, popular and favorite, the former based on the view count which is stored along with the post in the database and the latter just a check box when the post is being edited.

There's also some small cosmetic changes such as the green back and forward buttons instead of the boring text and the pencil on the top right corner for my personal use.

My previous post about AMD was dugg (made popular on the social news site http://digg.com, my home server took quite a hit but survived. My alexa ranking rocketed to 70,000 for a day or two. I'm putting together some stats right and will post later.

I recently completed a compilation of various economics data of the US economy from government sources such as the Bureau of Economic Analysis [BEA.gov] and the labor department [DOL.gov] for an ISSP class at my school. The data ranges from GDP [Gross Domestic Product] to corporate profits to the Gini index, from 1929 to 2006. I color coded the values according to their magnitudes relative to that of other values under the same category, it makes certain trends such as the gradual increase of the gini index very obvious.

The web table is located at http://ocirs.com/economic-data-table.php or just click on "US Econ Data" under "Resources" on the left panel. I've also included download links on that page for PDF, Excel 2003, Excel 2007 and CVS versions of the table. I'll probably also type up a key to all the variables and setup some mouse over pop ups that describe the variables next week.

I've also updated all the links on this site with permalinks which reveal much more useful information such as the page title and date in the URL instead of some useless page ID. I was really surprised by the fact that I wasn't able to find resources for setting up permalinks for custom coded blog backends like the one on this site. I'll probably post a tutorial for it this weekend or next weekend; it's less complicated than one would expect.

The good folks at http://forum.modrewrite.com/ was able to provide me with a solution for my mod_rewrite problem. I've also changed my header, but it's not exactly what I wanted. Was looking for a bring and colorful header to contrast the relatively dark theme as that's not really what I'm going for. I also changed the colors of the links and title.

Swapped the two shades of foreground and backgroud color since the white text will better contrast the darker shade of background. That turned out to be more complicated since I had to re-generate the drop shadow on the header and footer. Also changed the mouse overs to change in text color only, the previous background color change with text color change was too flashy. I also changed the font of the posts from san-serif to serif, something that looks a bit prettier(Georgia to be specific)

All the posts now have their own links, a critical requirement for good indexing by search engines. Been trying to get mod_rewrite to reformat the messy php $_GET requests in to nice URLs but the documentation for it is confusing as hell. I've managed to get the nice URLs to wrok when typed in directly. Ex. typeing in the address bay http://ocirs.com/p/25(Updated to http://ocirs.com/blog/25) will bring you to this page. That alone was a pain and browsing through the plentiful of posts at http://forum.modrewrite.com, which contains a lot of good resources for this subject. Hopefully this little problem will be solved tomorrow when I get some sleep.

The search input available on the bottom corner of the header is fully functional and working perfectly. It will search for matches in title, content and tags. My main concern is the relavance sorting; I just have sort by date right now which should work fine with the small number of posts that exists now.

Turns out having the embedded mp3 player isn't great for validation purposes and kills the loading time for the page, was tired of listening to stronger anyways. You can still load the mp3 player by clicking older on the bottom of this page.