Darice de Cuba

I am a Mac person since beginning 2004. The year before, still in college, I got hooked on weblogs that talked about XHTML/CSS and web standards which where a hot topic back then. Most of those webloggers are Mac users. When they talked about the apps they used and the browsers I just fell in love when seeing screenshots of their setups. Incidentally it was then that I ditched Internet Explorer for good and started using Mozilla.

So when I started my six months internship I decided to save the money and buy an iBook which I did. Now I’m on my third Apple computer, the Mac Mini. Plus I have a netbook with Leopard on it, so I really kicked that Windows habit cold turkey back then.

While many people’s objection to a Mac is that it doesn’t has many choice in apps like on Windows, which by the way is becoming less true. The apps available for the Mac are way nicer and better than Windows in my personal opinion. But then again everyone likes something different.

The apps

TextMate

For coding PHP, HTML, Javascript and others except CSS, I use TextMate. TextMate is a very versatile coding app that supports more then 50 languages. I’m not a hardcore coder so I don’t take advantage of all the shortcuts, macros, etc. But the lightweight and simplicity of the app is what attracts me. I use the very hard to find iLife color theme and Anonymous Pro as font. You can find the iLife theme in this theme bundle.

When editing files through Unix command I also use TextMate for editing. With a simple mate php.ini the task is done. I remember using vi for editing and it was just a pain while with TexMate and most other editors supporting command line it’s way easier. It even supports sql files, which make it a breeze to scan the content and with find and replace I can edit the whole sql file in one click to change tables name for example. Although this is something most apps dealing with code are able to do.

CSSEdit

For writing CSS I use CSSEdit which is like the easiest CSS editor I have ever used. It has auto-complete and suggestions, a validator and a sidebar with a list of each item you have in your style sheets plus comments that make it easy to browse your style sheet. Especially when working with large style sheets. I’m so used to using CSSEdit that I can’t even use other apps to do some small editing. At my old job they only had Windows and I never got used to using Dreamweaver.

Transmit

Another app that doesn’t has an equal on Windows, I have tried so many FTP clients on Windows and none come even close. Transmit is simple, nice interface and fast. I keep different FTP accounts sorted in folders, I live edit my files through Transmit. You can set it to edit specific files format with specific apps, so when I want to edit a css file it will launch CSSEdit, TextMate for html and php files, etc. For each FTP account I can specify which local folder to open with it so I don’t have to navigate to the local folders each time I use a different account. And with the sync option I can synchronize my local and server folders with each other. Transmit is a no-brainer to use.

I feel the price for each of these apps are worth it, I use them daily and they make my work flow easier. Which reminds me, all these three apps support the use of tabs. This means minimal windows clutter when working on several files at once.

Before settling for these apps I tried others like BBEdit, Coda, StyleMaster but none where to my taste. As long as TextMate, CSSEdit and Transmit do the job I want I’m satisfied.

Due to the lack of in depth PHP work recently I was looking for some personal project to work on. After thinking it over I came with a good and practical project. The sole purpose of this was to practice my skills a bit and to have nicely presented content. Sit tight this entry is a long one.

I’m from Aruba and there is currently only one 100% active online news website. But I can’t stand that website due to many issues. For one it’s full of ad banners, now it’s common knowledge that news websites needs ad banners to generate an income. But these are for 98% flash banners, 12 ads to be exactly on every page.

It would be better to have non obstructive banners/ads. Secondly a great part of the visitors are Arubians living abroad. So these ads have no value whatsoever. The companies based in Aruba pay a fixed price to place their ad on the this news site. So these ads only have impact on the locals. And due to the ads system I’m guessing the site keeps reloading every 30 seconds or so.

Then as a web developer myself it bothers me to spend time on a site with bad code and markup which is the product of using Joomla and a generic template, instead of having the template build from scratch and suitable for this online news source.

This is where PHP Simple HTML DOM Parser comes in. At first I just wanted to use their RSS feed but they only provide a few lines content per news item. So to get my news fix from Aruba I needed a website scraper and the simple DOM parser offers an elegant solution.

With a simple function you can generate the content from a given website:

 function scraping_24() {
    // create HTML DOM
    $html = file_get_html('http://www.24ora.com/index.php');


// get news block
foreach($html->find('table.contentpaneopen') as $article) {
    // get title
    $item['title'] = trim($article->find('td.contentheading', 0)->plaintext);
    // get date
    $item['date'] = trim($article->find('td.createdate', 0)->plaintext);
    // get introcontent
    $item['content'] = trim($article->find('span', 1)->plaintext);
    $item['photo'] = trim($article->find('img', 0)->src);
    // get permalink hardcoded
    $item['permacoded'] = trim($article->find('div.show-linkmore a', 0)->href);
    // get comment
    $item['comment'] = trim($article->find('div.show-comment a', 0)->outertext);

    $ret[] = $item;
}

// clean up memory
$html->clear();
unset($html);

return $ret;


}

As you can see I had to weed through the mess of code of the news site and figure out the HTML tags that encloses the content that I need. Only the the code structure of the news site isn’t consistent so it can happen that when printing the results content might be missing for some news items on the news index.

After getting to scrape the content right the next step was to present it. The news site uses lightbox for the photo gallery on individual news articles but their version doesn’t work well. So I just scrape the whole gallery table and the images already contain rel="lightbox" I just had to add jquery and a lightbox script. If the article doesn’t has an image gallery the PHP returns a message:

if($photos!=''){echo "$photos";} else { echo "E articulo aki no tin potret";};

For the image thumbnails on the index I used a jquery based preview script. It’s not that elegant but it does the work for now. Considering they use a full sized image of different formats the resize is a bad quality. My next step is to resize the preview in percentage to retain the image quality.

The parser scrapes the news content without the HTML tags so it returns one block of text. To fix this when displaying it I use PHP Markdown.

$content = $ret[1]['content'];
$content_html = Markdown($content);

I’m a big fan of Markdown and have been using it since John Gruber released it. Markdown transforms all line breaks into paragraphs rather then using the break tag. Off course Markdown is more powerful then this but you have to be writing your content with Markdown syntax. But it handles this one issue nicely and I’m sure I could use other methods too like Textile or so.

Summing it up I spend quite some hours perfecting the scrape results, dimensional arrays are quite a pain here due that the news site HTML structure isn’t consistent. Each time that an array item came empty it threw the whole output results off. So I had to run if statements to skip empty arrays, and create dummy arrays using the few consistent tags to keep the output stable.

While working on this I read more on jquery, I only use javascript when it’s a must. But javascript is really an essential part of any website so I’m digging deeper in to get a stronger grasp of it. As for why jquery I can’t really say, maybe because using Wordpress uses it but also because it’s one of the more popular javascipt libraries out there, thus a lot of resource available.

And for a little fun I added a browser detect script on the side, it tells you what browser/version you are using and if you are using Internet Explorer no matter what version it suggest you to switch to Firefox or Safari. The idea to do this came up due that I shared this site with some friends on Facebook and I know most of them are not aware of differences between browsers. So the message just says that with Firefox or Safari you can experience the newest website technologies.

And finally for the simplistic design I used a template based on Helvetireader by Jon Hicks.

End result: News in Helvetica

This project was fun to work on and left me wanting to do more, I just need to think of something. One idea I have is to redesign and code an existing website using HTML 5. I know it’s not official supported yet but it will be the next big thing, already becoming one might say.