Sponsor: The JavaScript Anthology
The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)
Browse Blog Archives
« September 2008 October 2008 November 2008 »
Blog Entries from October 2008
-
Code Syntax Debates in the Programming World
There are a number of code-syntax debates in the world of programming. Everyone has the common goal of establishing some sort of code-syntax standard so developers can easily work on each others' code, but everyone disagrees on exactly what the standard should be. Some programming languages, like Python, have largely solved this problem by enforcing a specific syntax on developers. However, these syntax debates still exist in many programming communities, such as the PHP developer community, as PHP gives developers a lot of syntax freedom. I thought it would be interesting to see what Lowter members thought about some of the longstanding code syntax debates:
- Indentation style (K&R, Allman, BSD KNF, Whitesmiths, GNU, etc.)
- VariableName, variableName, variablename, or variable_name?
- Spacing around parentheses
- One letter variable naming
- Allowing coding shortcuts and shorthand methods
You can read about all sorts of programming styles (external link) on Wikipedia, but what I've listed here seems to be the differences I most encounter personally. Although the code-syntax debate doesn't look to have an end in the near future, please comment which syntax you support in the comments below!
-
30 Beautiful Photoshop Illustration Tutorials
Six Revisions, a blog I probably should mention more often, posted a collection of thirty Photoshop illustration tutorials (external link) earlier this month. Illustration is always something that I have wanted to be able to do, but I just don't seem to have the artistic talent for illustration. Nonetheless, I'm still working on becoming a master Photoshop illustrator one day. I'm working on trying to create a Christmas scene (external link), hopefully before Christmas... If you want to avoid sifting through Good-tutorials.com's (external link) huge selection of illustration tutorials, then this post from Six Revisions is a pretty good place to start.
-
New SitePoint Book: Everything You Know about CSS Is Wrong!
SitePoint has released their latest book about CSS titled Everything You Know about CSS Is Wrong! (external link) I've been very pleased with SitePoint lately for releasing a lot of books outside the typical beginner range (external link). When they first started to publish books, most of their books were pretty basic (although still well written) and were certainly geared towards beginners in that particular subject. However, I guess since they already have books covering these beginner areas, they have been publishing a lot more intermediate and advance level books lately. Their books are just covering slightly more unique topics. Their book matrix (external link) is pretty helpful when deciding which of their many titles to buy, if you're interested.
Let's take a look at the summary of Everything You Know about CSS is Wrong!:
Quotation by "SitePoint"
Everything You Know About CSS Is Wrong! is an eye-opening exposé on CSS as we know it today. You'll discover a fresh approach to coding Cascading Style Sheets where old hacks and workarounds are just a distant memory.
You'll learn how to start taking full advantage of the very latest CSS techniques while still catering for older browsers and discover what's put the final nail in the HTML table-based layout coffin.
Rachel Andrew and Kevin Yank are both great authors and masters of their respective fields, so I know this book will be great. Now I just need to get my hands on a copy myself...
-
Coding an All-in-one RSS Feed
One of the cool new things that we have added at Lowter recently is an all-in-one RSS feed (external link) that contains both our articles and our blog entries. Granted, the feed doesn't contain "all" of Lowter's content, such as new forum threads and blog comments, but it is very encompassing nonetheless. Coding such an all-in-one RSS feed is pretty easy!
First, I'm going to assume that you want to make a combined feed of both your articles and blog entries. You can easily change the code to fit whatever combining scenario you have, such as different sources of content or more than two sources. Retrieve your blog entries and articles (probably via database) and make sure they are formatted into arrays like below:
PHP
<?php
$latest_articles = array(
[0] => array(
'type' => 'article',
'title' => '',
'date' => '',
'url' => '',
'summary' => '',
)
);
$latest_blogs = array(
[0] => array(
'type' => 'blog',
'title' => '',
'date' => '',
'url' => '',
'summary' => '',
)
);
?>Make sure that you add the type key to each content item's array. This data is essential when formatting the different URLs in the actual RSS feed. You may need to re-loop through the data if you retrieve it from a database:
PHP
<?php
foreach ($latest_articles as &$article)
{
$article['type'] = 'article';
}
foreach ($latest_blogs as &$entry)
{
$entry['type'] = 'blog';
}
?>Also, if you want x number of the most recent items in your feed, you need to make sure that you retrieve x number of both articles and blog entries. For example, if you want to show the latest 25 items, then query your database for the latest 25 items of each source because this accounts for the case if all the latest items are of one particular source.
Now you need to merge the two arrays (array_merge() (external link)) and then sort the newly merged array by the date:
PHP
<?php
function multi_array_sort($sort_by, $array, $order_by = SORT_ASC)
{
$values = array();
foreach ($array as $key => $row)
{
$values[$key] = strtolower($row[$sort_by]);
}
array_multisort($values, $order_by, $array);
return $array;
}
$combined_content = array_merge($latest_articles, $latest_blogs);
$combined_content = multi_array_sort('date', $combined_content, SORT_DESC);
?>I am using the multi_array_sort() function I include in all my applications to sort database results in a multi-dimensional array. I'm not going to go into detail of the code for this function, but just know this sorts everything by the descending date. Now you need to cut the array down into just the latest 25 items using array_splice() (external link):
PHP
<?php
array_splice($combined_content, 25);
?>Now that you have an array with the combined latest 25 content items, you just need to format it into an RSS feed. Our final code looks something like this, depending on how you retrieved your content:
PHP
<?php
/**
* Sort a multi-dimensional array
*
* @param string $sort_by Which field to sort by
* @param array $array Array to sort
* @param string $order_by How to sort the array
* @return array
*/
function multi_array_sort($sort_by, $array, $order_by = SORT_ASC)
{
$values = array();
foreach ($array as $key => $row)
{
$values[$key] = strtolower($row[$sort_by]);
}
array_multisort($values, $order_by, $array);
return $array;
}
$latest_articles = $this->articles->find_all('id DESC', 25);
$latest_blogs = $this->blogs->find_all('id DESC', 25);
$combined_content = array_merge($latest_articles, $latest_blogs);
$combined_content = multi_array_sort('date', $combined_content, SORT_DESC);
array_splice($combined_content, 25);
// Change MIME type
header("content-type: application/rss+xml");
?>
<?php echo '<?xml version="1.0" encoding="utf-8"?>' ?>
<rss version="2.0" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Lowter - New Content</title>
<description>Lowter.com is an electronic magazine covering web development, in the form of articles, blogs, forums, newsletters, and podcasts. Lowter.com primarily covers PHP, JavaScript, (X)HTML, CSS, accessibility, usability, application design, and programming theory.</description>
<language>en-us</language>
<link>http://www.lowter.com</link>
<copyright>Copyright 2004-2008 Lowter</copyright>
<category>web development</category>
<atom:link href="http://www.lowter.com/syndication/all" rel="self" type="application/rss+xml" />
<?php foreach ($combined_content as $content) : ?>
<item>
<title><?php echo $content['title'] ?></title>
<description><![CDATA[<?php echo $content['summary'] ?>]]></description>
<link>http://www.lowter.com/<?php echo ($content['type'] == 'article') ? 'article' : 'blogs' ?>/<?php echo $content['url'] ?></link>
<guid isPermaLink="true">http://www.lowter.com/<?php echo ($content['type'] == 'article') ? 'article' : 'blogs' ?>/<?php echo $content['url'] ?></guid>
<pubDate><?php echo date('r', $content['date']) ?></pubDate>
<dc:creator><?php echo $content['author'] ?></dc:creator>
</item>
<?php endforeach; ?>
</channel>
</rss> -
Opera Report: the Current State of the Net
I sometimes feel like I write too much about Opera, but I couldn't really pass this article up! Opera have just released a large report that attempts to document the current state of the webpages that make up the World Wide Web. The report is called MAMA (external link) (Metadata Analysis and Mining Application) and it uses a large set of URLs (3,509,180 URLs in 3,011,668 domains) to generate statistics about the current state of webpages on the Internet. The report details many different aspects of the Internet, including what server software the website uses, what (X)HTML tags are most commonly used, and if the pages are standards compliant.
I don't want to write too much about the report's findings, as you're better off just reading the report yourself (read the Key Findings (external link) section). However, here are some of the findings that I think are particularly interesting:
- The <table> element is used in 394,405 more websites than the <div> element.
- 21 websites decided to invent their own element called <pagebreak>.
- The xmlns attribute is only used on 635,646 websites.
- Only 145,009 websites (4.13% of the total) pass the W3C markup validator.
- Of the pages that display a W3C validation badge, only 50% of them actually pass the test.
- Some documents that MAMA validated contained errors numbering in the tens of thousands (ouch)!
- 3.2% of websites make use of XMLHttpRequest, which is an important part of AJAX.
- 80.39% of websites use CSS, with the most popular uses being changing colours and fonts and the least popular use being the counter (counter-increment and counter-reset).
Overall, it is a very interesting report and well worth taking a look at.
-
PunBB Akismet Spam Plugin
Those of you who are members of the Lowter Forums (which I highly encourage you to become) may have noticed the huge increase in spam in the past few weeks. It got to the point where we were just pruning the New Users forum in order to remove the spam from the site as quickly as possible. Months after Matt showed me the Akismet plugin for PunBB (external link) (the forum software we use), I finally got around to installing the plugin and tackling the spam problem we've been having. Some spam still gets through the filter, but overall it catches almost all of the spam, especially the more offensive stuff. It works great for being free too!
For those who don't know, Akisme (external link) is a spam filtering service from Automattic (external link), the company behind the very popular WordPress blogging software. Akismet is the filter used on all WordPress.com blogs to filter comment spam, and it does the job pretty well. One nice thing is that the filter is basically free. In order to get an API key, you only have to signup for a WordPress.com account. Then you can use your API key in the Akismet plugins that developers have made for various other applications.
The Akismet plugin for PunBB is very easy to install, requiring only a small block of code in the post.php file, in addition to a few additional files you'll have to upload. It also includes an admin plugin to manage the spam that the filter catches, allowing you to mark a post as "Not spam" or to delete all the spam caught by the filter. If you're using PunBB, then I highly suggest that you install the Akismet plugin to avoid the spam plague!
For other apps, use these plugins:
- PHP5 Akismet (external link), a class allowing you to utilise Akismet in your own PHP projects
- WordPress (external link) (not hosted)
- Drupal (external link)
- MoveableType (external link)
- Joomla (external link)
- vBulletin (external link)
- Django (external link)
- phpBB (external link)
- Textpattern (external link)
-
Best Semantic Naming Convention?
Awhile back there was a great thread on SitePoint Forums about the best semantic naming convention (external link) for a typical layout shell (header, footer, content, navigation, etc.). A lot of people posted what they thought was the best semantic naming scheme, usually along these lines:
XHTML
<div id="header">
...
</div>
<div id="sidebar">
...
</div>
<div id="content">
...
</div>
<div id="footer">
...
</div>Largely, this is the same semantic naming convention that I would use: header, footer, content, etc. All of these names describe the relation between the various elements of the layout shell. However, I usually try to have the content section above the sidebars for accessibility purposes. Also, many people had an overall wrapper element with the site's name as the ID, but I would recommend to use the <body> element for this.
Surprisingly, a lot of people argued for containers and wrappers (elements used solely to make styling and positioning easier), which are certainly not semantic. However, I guess sometimes you have to sacrifice perfect for near-perfect. Even at Lowter, we use an element called positioning simply for positioning, but this helps to provide a resizable layout that works across browsers. I'd like to remove it from the markup, but it might require having fixed column widths or something else as the cost. Sometimes, with the lack of web standards support in many browsers (mainly IE), it is necessary to sacrifice semantics simply for a better user experience.
With three column layouts, I still cannot really decide on the optimal semantic naming convention. Many people on SitePoint suggested secondary-content and tertiary-content for each sidebar, but this seems to demean one sidebar as more important than the other, which is not always the case. I should also note that sidebar in itself is semantic and the actual definition does not denote that it must be on the "side" of anything as it's name would initially suggest. The best solution I can come up with is simply sidebar_1 and sidebar_2, which just seems ugly. Honestly, the most semantic solution is probably assigning both sidebars a class of sidebar, but this would be unpractical for styling purposes. At Lowter we just use left and right, which of course is not semantic, but simply provide better descriptions than secondary-content and tertiary-content would. This is something that I would like to change in the future, as I am always working to improve the markup on Lowter to make it more semantic whenever possible.
If you would like to share what semantic naming convention you use or your opinion on semantic naming for multiple sub-content column layouts, please feel free to comment below!
-
Thoughts about Cloud Computing and Amazon S3
Cloud computing is one of the rages online nowadays, with tons of applications hopping onto the bandwagon with services like Amazon S3. Wikipedia defines cloud computing as "a style of computing in which IT-related capabilities are provided 'as a service', allowing users to access technology-enabled services from the Internet ('in the cloud') without knowledge of, expertise with, or control over the technology infrastructure that supports them". Basically, cloud computing is storing information in the "cloud" or a centralised location and then accessing it from that centralised location. The best example of cloud computing is Amazon S3 (external link), a service that many websites and online applications use for cheap, centralised, and scalable online storage. Most web applications in a way are examples of cloud computing because the user's data is stored online by the application rather than on the user's computer.
There has been a lot of criticism of cloud computing recently, especially over the reliability of the model in general. For example, if all of your users' data is stored centrally and that central location fails, then all of your users are going to be quite angry. On the other hand, when each user stores their own data on their own computer, the chance of all their data being lost simultaneously is highly improbable. Amazon S3 itself has had numerous outages and occurrences of data loss that have left the Web 2.0 community on its knees. Once Amazon S3 goes down, so do the thousands of web applications based off of it. Sure, the storage is dirt cheap and completely scalable, but are you willing to risk data loss and outages?
Granted, it is impossible for Amazon S3 to provide 100% uptime and they certainly are already more reliable than most web hosts. Personally, I think that cloud computing is the way to go. Amazon S3 is extremely cheap and perfect for scalability. The outages and data loss occurrences are not too numerous and Amazon is constantly improving uptime and performance. It is just a model that is more efficient than conventionally hosting one's own servers. I'm just waiting for a client project that has to utilise mass storage so that I can actually develop on Amazon S3 myself!
If you have any thoughts about cloud computing and Amazon S3, please feel free to post them below! I'm interested to see what others think.
-
Enhancing Opera 9.6's RSS Feed Display
This blog post was originally going to be about the new features of Opera 9.6 and how much I like them. However, I spotted a major flaw with one of the new features and luckily it's a flaw that anyone can fix with a little bit of modification.
One of the great new features of Opera 9.6 is that it will show a styled page when it comes across an RSS or Atom feed, which makes it readable to humans. It then has a big button that you press to subscribe to the feed. It's a great little feature... assuming you use the built-in feed reader. The major flaw is that it only has a subscribe button for the built-in reader and not for any other services, such as Google Reader (which I use daily). I decided to see if this was fixable and dove straight into the configuration section. (Head to opera:config to see this for yourself.)
In the configuration, there is a setting called "Webfeeds HTML Template File", which is basically an HTML template that styles the entire feed display page. Upon looking in this file, I saw that it was simply an HTML file with some CSS and a lot of JavaScript. Therefore, I decided it was possible to add new buttons and other little goodies; so that's what I've done!
Once you follow the instructions below, you will be given five different options of feed readers to use with only the click of a button. At the minute these are:
- Google (Reader and iGoogle)
- My Yahoo!
- Bloglines
- NewsGator
- Built-in Opera reader
If you have any requests for different readers to be added, them drop a comment in the text box below and I'll see what I can do!
Installation
- Download the ZIP file (external link).
- Copy the HTML file into a folder on your computer. It can be anywhere, but make sure you know how to browse to it. Opera's user style folder is a good place to put it (C:Program FilesOperastylesuser on Windows and /Users/your_username/Library/Preferences/Opera Preferences/Styles/user on Mac OS X).
- Type opera:config into the address bar in Opera.
- Type "feed" into the search box at the top of the page.
- Press choose, browse to the HTML file, and select it.
- Navigate to a feed to check that it works. Try the Lowter blog feed (external link) and see if you get the five buttons!
Bonus Feature: Auto Redirect
As a little bonus, I have also included a simple little feature that allows you to skip the button page altogether. If you only use a certain feed reader (Google Reader for example) and you simply want the feed to be added to that specific reader whenever you press the feed icon in Opera's address bar, the redirect will just take you straight there. No more clicking buttons!
To set this up, all you have to do is edit line 298 of the HTML file to your chosen value. For example, setting it to google will make the script automatically redirect you to Google Reader or to iGoogle when you press the feed icon.
I hope you find this script of some use and continue to support Opera!
-
What Kind of Browser User are You?
The Choose Opera blog (external link) posted a funny little chart about typical web browser users of Internet Explorer, Firefox, Opera, and Apple Safari. It is funny, especially the Apple Safari row, but the chart also has a little accuracy in my opinion. IE users are generally either not informed or stubborn about switching to a better browser. Opera users tend to be a little elitist, but only because they're using the better browser (I do use Opera myself). Power users of Apple Safari are almost certainly using it for the "Private Browsing" feature, aka "Porn Mode". The Firefox row has some accuracy, but I think it's unfair to call the obsessed users of Firefox all geeks, because most passionate Opera users are geeks as well. And I don't want to be called a geek by someone else...
Anyhow, the chart is pretty funny. See where you fit into the matrix. I know I personally fit pretty well into the Opera obsessed user cell.
-
Lowering the iPhone Development Barrier
Apple's iPhone has become the "cool" platform in the development world, especially with the introduction of the App Store, where developers have been raking in the dough by selling their applications for only a few dollars. When the iPhone was initially released, Apple touted that the development platform was simply the "web", so developers had to use traditional web technologies - XHTML, CSS, and JavaScript - to develop iPhone applications, which ran through Safari. This worked, except for that the applications were slow (because EDGE is slow) and there was no way to tap into the hardware abilities of the iPhone. After months of begging for a real SDK, Apple listened to developers and released an iPhone SDK, which has led to a burst of iPhone applications.
However, in all this transition to a real SDK, the people left out were the web developers. Personally, I am not very good at computer programming; my platform is the web. I liked the idea of using web technologies to develop iPhone applications, because it gave me the opportunity to use my current knowledge to make iPhone applications in the future. Granted, I probably never would have developed and never will develop anything for the iPhone, but if a client asked about it, I wouldn't have had to learn something new necessarily.
I was quite bummed personally when the SDK was released because my skills were no longer useful for developing iPhone applications. Of course, from a consumer point of view, the SDK has made my iPhone about ten times as useful with the wide variety of apps that I use. However, PhoneGap attempts to make web development technologies once again useful on the iPhone. PhoneGap (external link) is a framework that allows developers to access the iPhone SDK features from HTML and JavaScript. You use PhoneGap to package your "web" app into a native iPhone app that you can then (attempt) to sell in the App Store.
PhoneGap reminds me of Adobe AIR, which enables you to use web technologies to develop desktop applications. These sort of frameworks enable web developers to take their skills to other platforms, in these cases the iPhone and the desktop respectively. One nice thing about PhoneGap and Adobe AIR is that HTML, CSS, and JavaScript are all much easier to use for developing applications than C, C++, Java, etc. The difficulty in developing desktop applications is one reason I was driven into web development, where your ideas become reality simply much faster.
If you are looking to develop the next cool iPhone application and want to use traditional web technologies, then check out PhoneGap and don't stress yourself over trying to learn C and the iPhone SDK.
-
Apple Understands Design Better than Google
Google's new Android mobile platform is said to pose a real challenge to Apple's growing dominance of the US smartphone market. However, after simply looking at various screenshots of Android, it is easy for me to say that Android is not a real threat to Apple, at least yet. Apple understands design, which is why people find their products visually appealing. Even the smallest detail Apple attends to. Everything is crafted to the pixel, especially on the iPhone. Apple's attention to detail is amazing. Google Android, on the other hand, lacks consistency and overall has a clunky-looking design.
Gizmodo posted a blog entry about Google's new Android platform (external link), pointing out the obvious lack of attention to detail. The first, and most obvious, example is that the analog and digital clocks in the promotional screenshots do not match! Apple would never let something like that fly, especially in an advertisement or in promotional material. The screenshots also show the lack of consistency in Android's interface, with each section of the mobile OS being very different from the others. As Gizmodo puts it, there is a "sense of randomness". These are the sort of things that make a product feel unfinished, which consumers generally don't like.
Apple understands how to design beautiful products. Although some of their products are missing key features for certain consumers, they work for a sizable portion of the general public. They offer most of the features that people want. Looking towards the music market, Apple's iPod, despite the numerous features it lacks, is the most popular on the market. Microsoft's Zune is not, even though it has more features and may actually be a better bang for your buck. Nonetheless, it does show that often good design is extremely valuable in a product. People are still going to choose the iPhone over G1 because it does the basics and it looks better.
Of course, Android does a lot more things than the iPhone and has amazing potential as an open mobile platform. What it can do is cool, but it looks terrible. It is hard to determine whether or not this will cripple the Android platform early on, but I don't think it will. Take a look at Gmail: Gmail offers some really great features, but with an overall ugly design; simple, but ugly. Then take a look at Apple's MobileMe or even Windows Live Hotmail and you have a really nice looking interface, but a complete lack of features. I think it is fair to say that Gmail is a successful product and it has a lot of users, despite having a rather ugly interface. Android will probably not gain fast adoption, but I think when developers get their hands on it they can iron out the issues (a.k.a creating good skins for it).
Currently, I would recommend not to bother with Android. However, I think it is promising that it will evolve into a fantastic platform that will be more viable in the future.
Browse Blog Archives
« September 2008 October 2008 November 2008 »
Sponsor: Sunbird Calendar Application
Manage your schedule easily and store it where you want to. (external link)
