Comments!

Nesting comments, and a reply

The “big” reddit comment listings are, frankly, a little hard to read. Its hard to tell where comment threads go. Mobile reddit solves this problem quite elegantly. Each comment is a box, and sub comments appear inside the box. The last comment in a box has a close margin to the bottom, instead of a larger margin. This is a little hard to explain, but a picture will do it justisce.

Dropdowns

While this may not seem exciting, anyone who has ever done web development knows how hard it is to make a decent dropdown menu. For Reddit mobile, we went with a lightweight, custom coded solution, that has many advantages over traditional menus. I will be writing a tutorial on how to make the menus.

We use dropdowns in a number of places, most notably for Options on each post and comment. The options menu contains the links you would normally find at the bottom of a comment. This includes permalinks, edit links, and report.

Ajax infinite scroll

And now the best feature yet. Infinite scroll. While you may not recognize the nomenclature, you will recognize the feature. Infinite scroll is a feature that allows you to never have to click a Next button, never have to wait for the page to reload. While often seen as an extra feature on full websites, something to be added for cool effect, but not depended on, on mobile it can completely change the game.

On reddit it works beautifully. I find myself continuing to scroll down and keep seeing new links. Sometimes ill look at the number on the side, and it will be at 500 or so. Its that convenient. Since it is for mobile use, we are implementing this scroll with a large trigger buffer. Whenever you get to a yet-to-be-decided number pixels close to the bottom of the page, the page will begin requesting more. We are going to base this number on some tests, using my Droid and KeyserSosa’s iPhone, so it should preform quite well in real-world situations.

For those of you who want more, here is a video. Sorry about the flash, HTML5 is coming later.

Whats to come

We still have a lot to do to make RM ready for mainstream, but the core of the site is 100% complete. But we still have to do a preference pane, searches, logins, submit forms, and anything else we may think of on the way. So bear with us, and follow #redditmobile on twitter for instant updates. I know some grumble about twitter, but its good for exactly this type of information.

Also, if you have any questions, feel free to ask in #reddit on freenode irc. I’m Paradox, and i usually idle there.

And now for the obligatory upvote-mongering


Yes it looks terrible here. Yes I tried the custom button. Yes that worked worse.

Today, that project is being unveiled. As you can tell, by the title of this post, the project is: Reddit mobile.

Wait, I thought there already was a reddit mobile

Technically, you are right. There are several.

• http://m.reddit.com is one official reddit mobile. This is designed mostly for dumbphones, and leaves a lot to be desired (logins, voting, comments, subreddits, etc)
• iReddit app is the official app for iPod Touch and iPhone. Slow, painful to maintain, and buggy. Also, only works on iPhone/iPod Touch.
• Reddit is fun is the best android reddit app out there, and it has a long way to go

However, this is designed to surpass all of them.

What is it exactly?

Its a specially designed mobile website, for reddit.

It makes heavy use of javascript, ajax, and css3, to be as fast as possible on a mobile device. Right now, running in the staging area, it is 1.5x faster than the main reddit website, and this is without CDN optimization.

While primarily designed for webkit browsers, as more mobile browsers show up and become standards compliant, we will support them.

Can I use it now

No

When can I use it?

When we are done. Thats how things work

What, exactly, will I be able to do on it?

We are aiming for nearly every feature of the main reddit website. Pretty much everything but the creation of a new subreddit.

Why a website, and not an app?

Websites are easier to maintain, and they scale across platforms much easier than apps do. The website is being written to behave like an app, using ajax.

What platforms will it run on?

Since it is a website, it will run on most anything! If your mobile device has a webkit browser, it works on it. This includes Palm Pre, Android, iPhone, Symbian, Torch Mobile, and many others.

Who are you (Paradox), and what is your connection to reddit?

I am the primary operator of the #reddit irc channel on freenode. I dabble in web design, and have connections with the reddit staff.

And i am not the only one developing this. KeyserSosa is helping me as well.

Enough talk, time for screenshots

Prerequesits

This article is written assuming a few things. First, and foremost, you must have irssi, a linux server, ssh, and gnu screen. You must know how to use all of these. You must have an irssi session running in a screen, accessable from ssh.

If you are looking for a good guide to get setup, this should help you out.

Scan or touch to download

Download connectbot

Connectbot is the simple app that makes this all possible. Connectbot is a ssh client, developed specially for android. It let’s you recreate a ssh terminal, complete with any formatting and effects, making it perfect for irssi.

Connectbot also let’s you use an openSSH key¹, so you can even connect to a host that requires a private key.

So, what are you waiting for? Go download connectbot.

Connect and config

Connecting to a session is very simple. When you open connectbot, just type the host in user@host:port format at the bottom of the screen. You probably don’t have to enter a port, as it defaults at 22. The connection type box should be set to SSH.

Hit enter, and you should start to connect to the host. Depending on the host, you will be met with varying levels of success. Connectbot will also remember your host, so you can connect easily in the future

Using a private key

Many hosts, mine included, use private keys over password auth. Attempting to connect to the host without one specified probably gave you an error.

First, you need to copy your private key over to your phone. On windows, use PuTTYGen or something similar to make/view your key. Look for copy openSSH key or similar. Paste this key in a text file, and put it on your sd card.

On the main connectbot screen, long press on the entry for the host, and select Edit host. The editing window that pops up gives you all kinds of options. You can, for example, change the name that appears in the list, or the color of the list entry.

We are concerned with one option: Use pubkey authentication. Set this to openSSH. That’s all you need to do in optipns now, but feel free to config the settings.

Back up to the main menu, click the menu button, and click Manage Pubkeys. Click menu again, and click import. Select the key from the root of the sd card. You can also generate keys, so you could have a special key for your mobile as well, for added security.

You’re now ready to use this key.

Using connectbot

Connectbot is full of settings. You can, for example, make it send a command as soon as it is connected²

You also can customize the shortcut buttons. For irssi, setting the camera button to esc can prove quite helpful.

Bumping the rocker buttons increases the font size, and shrinks the terminal, so adjust as you see fit. The right shift and alt buttons have alternate functions, tab and /.

You can set connectbot to buzz on beeps, very useful for irssi.

Conclusion

Hopefully you will now be able to chat from anywhere, as well as use any other service you could access via ssh. I often use connectbot to fix a small css error or similar problem, and it can be useful for many other things.

1. It has to be openSSH, not a ppk or the like
2. useful for things like screen -x

1. More music

Last.fm has been around longer, and as such, has access to a larger library of music. Last.fm is also owned by CBS, who also owns a few record labels. So, if you are into obscure music, Last.fm can provide this.

Pandora also restricts your listening. You can only skip 6 tracks an hour, and only listen to some 40 hours of music a month. Last.fm does no such thing.

2. Better interface

The way most people will use these services is on a computer, so this section goes into the details of the web/computer interface. Both products browser interfaces rely on flash, but last.FM also lets you download a client for desktop use. This means you don’t have to always leave a browser open. Minor issue, but it still is an issue.

Last.fm’s browser interface also let’s you view far more info about the song and artist. Last.fm shows a slideshow, the artists bio, shoutboxes, and similar info. Pandora merely shows the current track, the album art, and little else.

3. History view

Last.fm keeps a history of all the songs you listen to, as well as the likes and bans of these songs. You can go back later and mark or unmark a song. This is quite useful, especially when you accidently hit ban.

Pandora has no such feature, other than bookmarking.

4. Socialization

Last.fm also encourages socialization among its members. People can form friends lists, neighborhoods, and groups. Friends can see musical compatibility, compare tracks, and interact in the usual social network ways (messages, wall posts, etc).

Pandora basically makes you use the service alone, you cannot interact with anyone else.

5. API

Finally, Last.fm has a powerful API and a large open development community around it. It is quite easy to gather data about the music you listen to and embed it in a blog, website, or other application. Also, developers can integrate last.fm functionality into their apps natively.

Pandora has no such api, not even one for data.

Conclusion

This was just a comparison between the streaming portions of each service. Last.fm also has scrobbling, which is a whole different animal, and beyond the scope of this article. I am not telling you to switch to Last.fm over Pandora, but suggesting that if you are new to both, you go with Last.fm over Pandora.

What are page margins? And why do they matter?

Page margins are the areas outside the print box. In terms of page layout, it’s possibly the most important part of the page. Open any major publication, and you will find many things set in the page margins. Common are things like page numbers, article/chapter titles.

For content printed from a website, you may want to put a footer of some sort on each page. Something like copyright, permalinks, etc.

Implementation

The current implementation is relatively simple. You define what part of the page you want to put content in, and what the content is. This is all through CSS, remember.
For example, this adds a url to the bottom right of each page:

@bottom-right {
content: "http://paradoxdgn.com";
}

Simple, right.

Problem

This syntax is simple, but heavily limited. Let’s say you have an element in your page, generated through server side scripts, like python or PHP, that relates to this page. You cannot place this element outside the page box reliably (without hacks).

Also, the use of CSS content seems to violate the exact purpose of CSS, that is, to provide a series of styles that theme the content. CSS is not for the creation of content. The content: property exists, because it is useful, but nowhere is it the only way to place content on a website, nowhere but page-box.

Solution

Currently, the only solution is having the server side script in question generate the stylesheet in the header of the page.

But this is imperfect, for many reasons, so I also propose a new property: page-position: position repeat;. position defines the location of the element in the page, accepting values such as top-left((The values could match that of the existing page-box options)). repeat defines how the option is repeated, such as first, last, left, right, even, odd, n-th, and all. all is the default.

Image from Flickr

No multitasking

This is the biggest shortcoming. Apple released the iPhone in 2007, and apps in 2008. Ever since they released apps, people have been asking for multitasking. Yet, come each new update, it is nowhere to be seen.

While multitasking is a minor issue on a screen the size of your typical smartphone, when you double the screen size, it really seems to be a big inconvenience. Productivity goes down, and productivity must be high to make people willing to carry your device around, as opposed to a similarly sized laptop or netbook.

No Flash

This is another problem. Flash support. While flash isn’t as big an issue on a phone, a product designed to be a big webbrowser suffers from this. While flash apps may be slow over 3G¹, when you are selling a device like this; a device that will primarily be used over WiFi, it is no excuse.

Apple isn’t the only girl in town anymore

When Apple launched the iPhone back in 2007, it was revolutionary. It introduced a amartphone that had looks and talent. Same thing when they launched apps a year later.

But now, Apple has a few serious competetors, the biggest being android. And android has a few distinct advantages:

Multitasking

Android has had multitasking since day one. While its implementation is not as good as that of webOS, it is still multitasking.

Tying into this is the style of notifications. Apple device notifications are modal, and have to be dismissed. Android notifications are not modal. They appear in a tray at the top of the screen, and this can be dragged down to interact with them. Perfect, no, but better than modal alerts.

Flash

Flash. Its on the Nexus 1, and is coming to more devices. It runs fast, and makes the web complete.
I explained about why this is vital earlier, and I won’t bore you by reiterating it.

Diversity

There are already several android tablets in the pipeline, from experienced makers such as Archos, and there will no doubt be many more.

But they won’t be me-too products, much like the feature phones launched next to the iPhone. Android is a complete os, and as such, is ready to compete. While its not perfect, it is getting there. 2.1 is the first version that didn’t focus on function, but rather looks.
And it follows the google model of successful products. Work on functionality first, then make it pretty.

Conclusion

I have no doubt that the mass consumerist markets will buy tons of these things, as they did with the iPhones before and iPod before that. The plebeians are lured in by shiny things, and Apple is master of shiny things. But this is disturbing, as it indicates people are willing to give up their rights, in favor of a bit of shiny technology. It also beggs the question where are the antitrust lawsuits?

Microsoft came under antitrust at the end of the 90s, and all they did was bundle a browser and media player with their os. Apple, who has held a majority in the PMP market for a long time, has not yet faced any such lawsuits, and they actively discourage innovation, what with the app approval process. But that is a matter for another article.

1. The Nexus one doesn’t seem to have any problem with flash, and it has similar specs, aside from the screen

Why not to use images

There are many reasons not to use images when designing your site. First and foremost, there is the matter of speed. Each image the user has to fetch from the server is an added load, and slows down your site. While there exist methods to reduce this speed loss, such as sprites, gzipping, CDNs, the file still has to be downloaded, and that takes time.

The rendering engine can do it for you

The rendering engine in a modern browser, such as Webkit((Chrome, Safari, iPhone, Android, and most other mobile devices)) and Gecko((Firefox)), is an incredibly powerful graphics engine. Modern versions have the ability to generate some images, such as gradients, and other effects, on the fly. Since they are generated by the rendering engine, they do not have to be downloaded, and thus, the site loads faster (in most cases).

While some websites, like DeviantArt, have relied on server-side scripts to make their images¹, this is cumbersome, and still doesn’t solve the problem of image downloads. You also suffer the chance that your script may break when you update your server.

Its easier to update

Lets say you have a site with tons of gradients. If you want to update each of these gradients to be a bit darker, you have to open each image in Photoshop, or Illustrator, or your editor of choice, change some settings, save it, upload it again, and then do a cache reset (assuming you enabled caching). That is an awful lot of work, to just change some images. If you find you don’t like the change, you have to do all that again.

With CSS gradients, however, all you have to do is edit your CSS. You can update the gradients like you can any other CSS property, and, pending a cache reset, have them instantly appear.

Its Scalable and vector

Using pre-rendered images suffers one more critical flaw. If you want to change the size of your site elements, you need specific sized images. Again, this increases load time, and creates more things for you to update. With CSS, you can use the same class on elements of any size. Lets say you make the class grey-gradient. You can apply this class to elements of any size, and the gradients will scale properly.

There do exist image technologies that can do this (like SVG), but they have even less support than CSS visual properties.

How to use them

These properties, while they may appear confusing initially, are actually quite simple, and quite powerful. Play around with them, there is no shame in learning.

Gradients

Gradients are perhaps the newest player on the field, and the most exciting. Gradients appear EVERYWHERE on the web, countless sites use them, and they really add pop. Even if your gradient is a vary faint change, it can make an element pop far more than a flat color, in the same manner as a small amount of noise can.

Each browser has their own style of interpreting and rendering browsers, and as such, the playing field is more confusing than that of border-radius. I will only go into linear gradients, as radial gradients are far more confusing, beyond the scope of this article.

Webkit

background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#ffffff), to(#000000));

Firefox

background: -moz-linear-gradient(top, #000000, #ffffff);

Internet explorer

This, surprisingly, works all the way back to 6, and possibly even earlier. While it doesn’t render quite as well as the others, it is still a gradient. However, you must specify a complete hex code, no #fff here

filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#ffffff', startColorstr='#000000', gradientType='0');

Both Firefox and webkit let you specify color stops, directions, and many other things about each gradient. Both browsers have features that are unique to each, and there is no clear standard on gradients yet.

You should put all 3 of these properties in your CSS, stacked on top of each other. You should also specify one background that has a solid color, for degradation on browsers that do not support gradients, such as Opera.

This is only scratching the surface on what gradients can do. Read more about CSS gradients at the library.

Box Shadows

Box shadows, often called drop shadows, have gotten a bad rap as of late. Overruse and abuse by Photoshop newbies has caused many designers to cast them aside, much like poor tables.

But drop shadows can be your friend. This site makes extensive use of them, yet, they don’t look like your traditional drop shadows. Here, they are used to give the illusion of being set in to the page. Notice how the code boxes, the search box, and the buttons, all appear to be carved into the site? Thats through the use of a few drop shadows.

Here is the box shadow code:

-webkit-box-shadow: 0px 1px 1px rgba(255,255,255,.2);  /*Webkit*/
-moz-box-shadow: 0px 1px 1px rgba(255,255,255,.2); /*Firefox */

Notice that the height of the shadow is one, it has no blur, and is white with a low opacity. Instead of being the old clichéd shadow, this turns the idea of a shadow on its head. This code is what is used to make the emboss effect on the buttons on this site. The effect for the code boxes and search boxes is similar, just tweaked a bit.

You can use multiple shadows, but that is beyond the scope of this article. If you want to learn more about shadows, including multiple shadows, visit the shadows page in the library.

Conclusion

CSS3 provides many powerful tools for making stylish websites, and if you use these tools right, you will never have to use photoshop or illustrator to make a simple gradient or box again. I hope that this article stirred your interest in making image-free designs.

1. DeviantArt uses a serverside script to render the shadows that appear around the site

• Cleaner code: This theme was coded 100% from scratch, so there is no sphagetti code, and no attempting to cover existing functionality with boilerplates or other hacks.
• Light CSS: Instead of using gradient images for backgrounds and all sorts of places, I took advantage of as many CSS3 properties as possible. So, if you are viewing the site in Chrome, Safari, or Firefox 3.6, it should look nice and pretty. If your viewing it on IE, well, you still get gradients, but they don’t look as good and you don’t get shadows and round corners
• No buggy jQuery: When I made the previous design, I was just getting into jQuery. As such, it was a bit, well, buggy. This site is much lighter on the Javascript. Gone are the featured post boxes, the tabs, the like (no one really ever used them anyway. I might bring them back later, but in a cleaner, better form.

Thats just a quick list.
Bear with me for a few days while I tighten all the bolts and get this ready for production. New articles are already waiting to be published!
Image from Flickr