Lowter

Sponsor: The JavaScript Anthology

The JavaScript Anthology: 101 Essential Tips, Tricks & Hacks (external link)

Latest Blog Entries (RSS)

Improving Your Online Productivity: Instapaper [2]

By Matt Oakes

In the first part in this series (external link), I showed you Google Reader. This time around I'm going to show you another useful, simple online application: Instapaper (external link). Instapaper is a way of saving a page that you want to read later. For example, if you are browsing a news website and see an article that you want to read, but simply don't have time to read it right then, you can save it to Instapaper and read it later. You don't have to worry about keeping tabs open or about saving pages to your bookmarks.

To add pages to Instapaper, you simply need to add a little button to your toolbar by dragging it from the website and onto your toolbar. When you click on this button, a window will pop up saying that the page has been saved and then it will close itself. Fast and effective.

When a page is saved, it is added to your Instapaper page, which gives you two lists: Unread and Recently Read. Very simple and easy to understand. Once you click on an unread page, you are redirected to the page you saved and the page is moved to your Recently Read list.

I love this website for its simplicity and for the speed at which you can add pages to your list. It's a bit like del.icio.us, but without all the social parts - which I don't personally want nor need - and a lot simpler.
CSS Image Rollovers with One Image

By Ethan Poole

CSS image rollovers are common amongst web designers because they are easy to setup and they do not require mucking up the HTML. To change the background image on a rollover, one simply has to use the :hover pseudo-class on the target element, changing the background image when the element is hovered over. Note that in IE6 and in previous versions of IE, the :hover pseudo-class only works on anchor (<a>) elements. Anyhow, your code will look something like this:

CSS
div#banner { background: url('canada.png'); height: 200px; width: 400px; } div#banner:hover { background: url('manitoba.png'); }
And output something like this:

Overall, a generic CSS image rollover is a breeze. However, one issue can arise with using two separate images, one for the initial state (external link) and one for the rollover state (external link): a delay in loading the rollover image. There is a small delay in loading the rollover image because it is not pre-loaded by the browser before the user hovers over the element. Rather, the image is loaded when the :hover state is activated for the element. Now, the image can be pre-loaded using a number of methods, including JavaScript, but it is much easier to achieve using CSS itself.

CSS offers the nifty ability not only to control the background image of an element, but to control that image's position within the element (external link) as well. So, rather than changing the background element on a rollover, one can just change the position of the current background image instead. By combining the two different background images into one image file (external link) and then changing the position of that image based on the element's state, the small delay is entirely avoided. The styling is not very complex either:

CSS
div#banner { background: url('canada_manitoba.png'); height: 200px; width: 400px; } div#banner:hover { background-position: 0px -200px; }
And the output is exactly the same, but without the delay! Make sure to set the proper position for that specific element and to that specific image. See, using one image for CSS rollovers is pretty easy and it avoids that inconvenient loading delay.
Improving Your Online Productivity: Google Reader [1]

By Matt Oakes

In this series of blog posts, I'll be showing you useful little titbits that can really help you to improve how you use your time online. They will range from simple little tips to online applications that will all improve your productivity. For the first part in this series, I'm going to show you one of my favourite online applications: Google Reader (external link).

One Internet technology that is beginning to take hold is RSS (Really Simple Syndication). It is simply a file (or feed) that gives updates about new content on a website. To view these RSS feeds you need an RSS reader. There are many different readers available, both online and for your desktop. Both have their advantages, but I prefer an online application, so that I can access my feeds from any computer using my Google account.

First, create a Google Reader account, which may require you to create a Google account if you don't yet have one. Then, to begin, you need to add some RSS feeds to your list. You can do this by clicking "Add Subscription" and then entering the URI of the website to which you want to subscribe. It's that easy! Then you have that feed on your reading list, which is arranged sort of like an email inbox.

One of the interesting features is the ability to "star" news items, which are then added to a separate list so you can easily find them later.

Another one of my favourite features is the mobile version (external link) of the application. It is much more basic and weighs in at about 2kb, which helps to cut down on mobile data costs. This mobile version gives you complete access to your RSS feeds when you're not at a computer. It will even reformat the websites that are linked to from the feed items to a more mobile-friendly format, which is a very nice finalising touch.

This is one of my most used websites and it is currently set as my homepage both at home and at work. I currently have around seventy-five RSS feeds in my list and it would be impossible to keep up with all those sites without this nifty application.
Radical Redesign vs. Subtle Redesign

By Ethan Poole

I have always been one for radical redesigns of websites, instead of doing subtle, face-lifting redesigns. At times, radically redesigning a website from the ground up has its benefits, but, in actuality, a face-lift redesign can often prove to be much more effective. Sure, styles in web design change over time, as technology improves and the Internet cranks onwards. However, in reality, the general convention of a website does not really change over time; there are tried-and-true techniques for much of web design. Logos work best in the upper-left, navigation should be a certain way, etc. The basic setup of a quality web page really does not change, only the style of the setup changes over time.

Rather than ditching your entire layout and starting fresh, it makes much more sense simply to update your design. Whether this includes brightening the colours, increasing spacing, or using less images (what you change will depend on the current trends), an update is much more practical than a from-scratch redesign.

Of course, a radical redesign is still practical in some situations. For example, at Lowter when we moved from our hobbyist stage to our professional stage, simply the style and the coding needed much revamping. In this case, it was more practical to start with a blank slate than to build off of our spaghetti code from beforehand. If your website is strung together in erratic, puzzle-like patterns, an entire redesign from scratch is probably the best solution. However, subtle redesigns work best for established websites with a strong foundation, like Lowter is today.

A good example of a subtle redesign is the recent redesign of BBC News (external link). The BBC is certainly an established entity and BBC News already had a very well-setup website. Their recent update they describe as "gardeners doing a bit of pruning and weeding". There is more spacing, bigger images, uniformity with the other BBC pages (which are all facing similar facelifts), and better video/audio capabilities. Certainly the updates are very subtle, but it makes the page look a whole lot better. BBC News shows how subtle updates can make a website seem fresh and new, without requiring "digging it up and starting from scratch".

When you go to update your website, think first about utilising your current design and simply making subtle changes to it in order to create a fresh feel. It may turn out that a subtle redesign is all that your website needs.
Content Box Using CSS and Photoshop

By Daniel Malmqvist

Today we are going to create a simple and stylish content box using CSS and Adobe Photoshop! Many people don't realise the possibilities of combining Photoshop and CSS. So today we are going to make a basic content box using CSS and then style it using Photoshop! You ready? Great, let's get this thing going!

CSS

We will start off with the HTML for our box:

XHTML
<div id="content"> <h1>Your Header</h1> <p> Your text goes here. </p> </div>
Now, if you save this and look at it, it looks pretty ugly doesn't it? Well let's style it with some CSS then:

CSS
div#content { background: #FFF; border: 1px solid #000; margin: 2px; width: 400px; } div#content h1 { border-bottom: 3px solid #980A0A; font-family: Verdana; font-size: 20px; font-weight: normal; margin: 3px 3px 5px 3px; padding: 1px 1px 1px 22px; } div#content p { color: #000; font-family: Verdana; font-size: 13px; margin: 10px 10px 10px 10px; padding: 5px 5px 5px 5px; } div#content p:first-letter { color: #980A0A; font-size: 20px; font-weight: bold; padding: 5px 3px 3px 5px; }
If we have a look, the content box looks okay - a bit plain - and the padding looks a tad much on the left side of the header (this is where we will fit the image in the next part). How do we fix this? Well, this is where Photoshop comes into the picture!

Photoshop

Open up Photoshop. Create a new file with a width of 20px and a height of 20px. Remember to make sure that your content box background is the same as the one in the image. For the header, I'm going to use Lowter's logo, but you can use whatever image you would like.

Next, create a new layer. Right click on your new layer and click "Blending Options" and then "Stroke", using these settings:

Now, I am going to use a dark green for the stroke because the arrow itself is green. I suggest that you use a darker colour than the colour of your icon; in my opinion, it gives the best result.

Next, let's make it look even better! Grab the "Gradient Tool" and make sure you use these settings:

Create a new layer. Then, right click on the thumbnail of your layer with the icon on it. You should have the old icon selected; so then go back to your newest layer and, with the "Gradient Tool", drag from the top-left corner to about the middle of your icon. Now you have a pretty nice shine on your icon. To make it look even better, lower the opacity to around 85%.

We're done with the header image, so let's see how it looks. Save your image as "header_icon.png" and then add this line to your <h1> CSS code:

CSS
background: url(header_icon.png) no-repeat;
There, now have a look at your header, looks pretty nice doesn't it? You can use the same technique to style other areas of your CSS box, imposing images in the background to spice things up. I did this for the first letters of each paragraph and here is my final result:

Not too shabby and with more work it is very easy to create stylish content boxes using CSS and Photoshop!
Planning a Semantic Website

By Ethan Poole

IBM just recently published a fantastic article about planning a semantic website (external link), covering existing ways to code semantic markup. Most useful in this article is using existing technologies to make your website semantic today, without interfering with the existing experience of your users. Most useful in my opinion are microformats, which can be easily implemented; although, granted, there is little utilisation of them yet in web browsers. Also important is the semantic URI, which is certainly an issue on many websites, with these forever confusing URIs that lend no hint towards their contents. I have always found an interest in simple, semantic markup, so this article was an interesting read; it reminded me I want to use more microformats in my coding where appropriate. There is nothing overly revolutionary in this article, but it makes a nice summary on web semantics and the available semantic technologies/standards used today.
8 Useful CSS Techniques

By Ethan Poole

Sitepoint just recently published a new article about some cool CSS techniques: Tomorrow's CSS Today: 8 Techniques They Don't Want You To Know (external link). Overall, the article presents some documentation on various CSS selectors and goodies that you might find interesting. Not all of them have great browser support, but the article shows examples of how they degrade peacefully in non-supported browsers. Personally, I wish the attribute selectors of CSS worked across browsers as they would be extremely useful for so many things. For example, on Lowter, we place a small arrow icon next to links leaving the website, but we have to assign these links a CSS class to do so. We could do it much easier using attribute selectors, but browser support for them is extremely poor. Oh well, perhaps it will improve in the future. Until then, this article presents a lot of nice things that should eventually be more usable. It is a good read nonetheless.
PHP: Determining MIME Type

By Ethan Poole

PHP lacks a definite way to detect the MIME type of a file across each PHP version. Older versions of PHP use the mime_content_type() (external link) function, whereas more recent versions encourage the use of the Fileinfo (external link) set of functions. These variations present a difficulty when developing an application that must work across multiple versions and installations of PHP. In order to solve this problem, I use the following code to create a function to check the MIME type of a file regardless of the development environment:

PHP
<?php // Setup replacement functions for the deprecated mime_content_type() if (!function_exists('mime_content_type')) { // If Fileinfo extension is installed if (function_exists('finfo_file')) { /** * Determine a file's MIME type * * @param string $file File path * @return string */ function mime_content_type($file) { $finfo = finfo_open(FILEINFO_MIME); $mimetype = finfo_file($finfo, $file); finfo_close($finfo); return $mimetype; } } // Otherwise use this method, which will not work on Windows else { /** * Determine a file's MIME type * * @param string $file File path * @return string */ function mime_content_type($file) { return trim(exec('file -bi '.escapeshellarg($file))); } } } ?>
Now, with this code placed in some universally-included file, you can determine the MIME type just by using mime_content_type(some_file). The above code handles determining which way to determine the MIME type based on the current installation of PHP under which it is being run.

Sometimes, Fileinfo will not be installed on the server, in which case you can use a shell command to determine the MIME type as well. The only dilemma this code does not solve is a Windows installation of PHP without mime_content_type() and Fileinfo support. However, considering most servers running PHP are also running Linux (not Windows), this seems like an unlikely occurrence.
4 Years of Lowter: A Look through the Past

By Ethan Poole

Today marks the four year anniversary of Lowter! It certainly has been a great four years chatting with good friends on the forums and watching the site grow immensely. For some of our older members, this blog post should remind you of some of Lowter's earlier days and for others it gives a perspective into Lowter's development. It is interesting to see how the site has developed from Lowter Studios (a mere hobby site) into the Lowter we know today.

Using archive.org (external link), my own code archives, and other resources, I have drawn together some screenshots of what Lowter use to look like. However, most of the screenshots are missing a lot of images and such, but they still give you a general feel of the layout.

Pre-2004: Avidgamers and Watchzine

Lowter had its origins on Avidgamers, a community development platform, where people could easily develop their own community websites (with forums, messaging, etc.). Avidgamers was a rather big community, with thousands of community websites and website-owners. Personally, I started off with an RPG site, before I moved on to starting my first web development resource community.

In the early days, Lowter started off as the University of Scripting, a site dedicated to Avidgamer-related scripts and tutorials. The UOS (as it was called) was mildly successful, having a few thousand members from the AG community. However, the important aspect at AG was the team that developed to administer the UOS, which (for the most part) still stands behind Lowter. The development team behind the UOS was myself (Ethan), Matt, Daniel, and Tommy. Markus and Kristoffer were both only moderators at the time, if I remember correctly.

Another community worth mentioning is Watchzine (formerly the Watchtower). On Avidgamers, the Watchtower was a rather successful design and development community, quite well known amongst the older AG members. They decided to move the site off of the AG platform onto its own domain and platform, renaming the new site Watchzine. I myself was a very active member of Watchzine, even though I basically ran a competing website. In the end, Watchzine sort of ended and a few of the active members moved over to Lowter (particularly Frans and Tom). However, Watchzine, in my opinion, is an important part of Lowter's community history. I still miss Watchzine sometimes.

2004: Early Development and Lots of Dark Colours

When the UOS decided also to move off of the AG platform, we renamed the site Lowter Studios. Everything was custom developed, particularly with the help of Frans de Jonge and Matt Durnan from Watchzine, who both helped me a lot with coding. Every layout used dark colouring: black, greys, etc. I find the fact that every layout was dark funny considering everything I do now is bright and on a white background. Quite frankly, the older layouts I designed look awful now that I am looking back on them. Also, Lowter Studios had a number of internal layouts that the user could switch between, but I was not able to recover any of these sadly.

Everything was rather chaotic at Lowter Studios when it first started up, with the direction of the site being rather hazy. However, it was a blast! The first day of being open to the public I can remember being up all night talking back and forth with Matt and Tommy (who, may I remind, took a picture of himself with his underwear on his head for his avatar) on the forums. It was only a hobby site really, but that made it exceedingly enjoyable.

After awhile, we wanted to improve the image of Lowter Studios and focus more on web development and technology. In order to give a more professional feel, we changed the name to Lowter, dropping the "studios" part of our name. We also adopted the "L" arrow that we still use today. We used the red-grey layout for quite a long period of time; in my mind it is our "first" layout, as I consider Lowter before this layout as basically in beta.

2005 - 2006: Reaching Maturity

I should note that between the red-grey layout and blue-green layout below we had another design. However, I cannot obtain a copy of what this layout looked like. It was similar to the layout below, but the colouring was harsher and it had a lot of little icons (I honestly just have a huge folder of icons from this design).

Lowter further developed to focus again on a more professional feel. The newer design brightened up colours, reduced graphics, and worked better across different screen sizes and web browsers. Activity on the site started to slow down as our content requirements became more stringent (we wanted longer and better quality articles). We did a lot of experimentation, particularly with our newsletter, which we ended up discontinuing. The site was mature, selling ads, and receiving more and more traffic.

2007 - present: Professionalism and Future Developments

The layout is quite refined and organised, visually and code-wise. Everything is aimed to have a high level of professionalism. The members of the administrative team are starting to go their own separate paths in life, being occupied with school, friends, family, etc. However, this does not mean the end of Lowter any time soon; there is still much more beyond the horizon for our little web development community.

O! A toast to the four years of Lowter and a toast to the many years to come!
Adobe Photoshop Express

By Ethan Poole

Adobe has released the official version of its new online photo-editing application: Adobe Photoshop Express (external link). Overall, this application is basically an online photo-editing tool, which works rather well for that job alone. It really is more comparable to the features of iPhoto than to the features of Photoshop itself. I tested out the application for a bit, and I think it certainly has potential, but it also has a lot of room for improvement.

On the good side, Adobe Photoshop Express is easy to use and the signup process is quick. The application seems pretty speedy (it took me about a minute to get my photo in the application and cropped nicely). The interface is nice as well, certainly nicer than the other online photo-editing websites. It also connects directly to Facebook, Photobucket, and Picasa; certainly missing from this list is Flickr and Myspace. However, it seems like everything Adobe Photoshop Express can do, I could do much more easily in iPhoto, in about half the time. I would like to see more features available from the desktop version of Photoshop and better integration with other social networks and photo websites.

The only use I can see for Adobe Photoshop Express is just basic photo editing if you are too lazy to download GIMP (external link) or iPhoto or some other easy-to-use photo application for your desktop. Or, for example, if you are on a controlled computer (school, work, etc.) and need to edit a photo, but you do not have sufficient permissions to install an application yourself. I think this application is a great improvement on Adobe's side that will lead to bigger and better things in the future. You can try it out yourself for free too.