Devlounge

Design, Develop, and Grow

Friday Focus 07/02/10: Rocketships

By

This week on Friday Focus: a bunch of sites that use rocketships in their designs. Unfortunately not all of them take the metaphor as far as one would like, but carry interesting designs nonetheless. Ready of take off?

Designs of the Week

Launchlist

No doubt about it, this design is slick, and customizing form elements is no walk in the park. I just wish the narrow font wasn’t so narrow, and the submit button were blue.

MB Dragan

I want the green buttons to have bigger padding (Fitts’s Law), and the portfolio info text in the carousel isn’t so readable, but I quite like this site. Putting the designer’s face into an astronaut suit is clever, and what I meant by taking the metaphor to the next level.

Noel Design

I enjoy the mixed textures and playfulness here, but I think it could stand to be more playful. The footer looks completely different from the rest of the site.

Kupferwerk Blog

Love the scribbled-on-paper touches but I feel they blend into the background too much and one wouldn’t think to look or click there.

base6 Design

Applying a grunge texture to originally glossy illustrations? Not a very good idea.

Rocketlance

I like the overall look and feel of this site, but if you look more closely it needs polishing. It’s an 8.5, but not a 10.

HyperX Local

Lovely details, go check out the icons and other illustrations on the inside pages. My favorite part is the glass frame around the main content area.

Social Media Weekly

SEO – 5 Ways to Be an Ethical SEO Expert
“Today we’ll briefly look at how to engage in SEO in an ethical manner by pointing out five key techniques to avoid.”

Programming – Using Firefox’s Geolocation API
“One interesting aspect of web development is Geolocation; where is your user viewing your website from? You can base your language locale on that data or show certain products in your store based on the user’s location.”

UX – UX Myths
“Debunking user experience misconceptions”

Information Architecture – Card sorting: a definitive guide
“Card sorting is a great, reliable, inexpensive method for finding patterns in how users would expect to find content or functionality.”

Flock – The Social Browser That Could

By

Flock 1.0 have been out for a while now, and I’ve been using it as my primary browser, both on the laptop and on my workstation, for a few days now. These are my impressions.

The Social Web Browser

First of all, Flock markets itself as a social web browser, and integrates with a number of social services, such as Facebook, Twitter, del.icio.us, YouTube, Flickr, Blogger, TypePad, WordPress.com, and so on. The list is extensive, but far from complete. Where’s Jaiku, MySpace, Digg, and so on? Maybe that’ll arrive later on.

People sidebar

The social stuff works in a few different ways. For instance, your media browser opens between your tabs and the toolbars, while the People sidebar handles text-based social services, such as Facebook or Twitter. This means that you can check out what your Facebook friends are doing, or post tweets, right in the sidebar in Flock. Nothing particularly new for people used to pimping their Firefox installs with wicked extensions, but still cool and nifty.

Get Blogging

There’s support for publishing to both blogging services such as Blogger and WordPress.com, but also self-hosted blogs. The blog writing tool is easily configured and pretty accessible, just a button in the small social toolbar (configured in my screenshots) to the top left. It looks nice enough, with a wysiwyg editor, and the opportunity to edit the code. I’ve done a few posts with it, and it does the job, but this one’s not for me. Sure, it’s very handy to have a blog editor in your browser, when reading something that pisses you off and makes you want to rant, but at the same time I can see a lot of weird things happening, especially if you have multiple blogs. A post could be published on the wrong blog, for instance, and I doubt the Devlounge readers would like to get the recent big black latino asses I’ve scavenged from the web. Not that I’m into that sort of thing, of course…

The blogging tool

Seriously, I can see the blog posting tool working out for a lot of users. It’s not for me though, but it’s there and that’s fine.

Web Clips and Bookmarks

Web clipsThe web clips, however, could be something I got around using. It’s another sidebar, to which you can drag text, links or images, for latter use. Just mark the text, or drag the image, and drop it in that little box, and it’s stored in the sidebar, easy to access. I haven’t gotten used to doing this yet, but I’ll definitely give it a go and see if this is something that works in the long run.

Bookmarks’ got support for del.icio.us of course. At first I looked around after that nifty little tagging button that the del.icio.us plugin gives you for Firefox (and others), but couldn’t find it. Well, turns out that all I had to do was bookmark a page, and I got a nice little dialog asking me how I wanted to store my bookmark. Very nice, and great for someone like me as well, who use both del.icio.us, and the bookmark bar, as you can see from the screenshots.

Not 100% Bug Free

A little Flock bugSpeaking of the bookmarks bar, among the few bugs I’ve encountered, there’s this cute little thing. “Pownce” is a bookmark added to the bar, but as you can see there’s spacing before the first letter (it’s hovered in the screenshot). This occurs every now and then when you create or drag a bookmark to the bookmarks bar, but there’s nothing visual to remove when editing it. Delete and redo. An annoying, but not very dangerous, little bug.

Worse is the URL bug. Sometimes the URL field just isn’t updated, so I can surf Twitter, and suddenly realize that I’m over at some unknown person’s Twitter page, but the URL still says twitter.com/rethord. If I mark this and press enter, it loads twitter.com/rethord as well, so it’s not just a visual thing. Surfing via links or bookmarks while this occurs works as usual, but it’s really annoying. Hopefully this is something they’ll come to terms with pretty soon.

Can You Browse The Web With It?

So how’s the browsing then? Well, Flock is built on the same engine as Firefox (Gecko) and seems to render everything the same way. The browser is responsive and fast, and it doesn’t seem to leak memory in the same crazy manner that Firefox does (or used to do, it’s gotten better, although it still hogs those valuable megabytes). I’ve yet to experience a crash as well, which is very positive.

FlockHowever, despite Flock being based on the same engine as Firefox, your old extensions for the latter won’t work. That means no Firebug, which means that Flock still have a way to go before it really can push Firefox out of the way for web developers out there. Likewise, extensions available for Flock is a mere nothing compared to what’s out there for Firefox, which tweakers are sure to dislike.

For now, Flock is my default browser – a great verdict by itself. At least when just browsing the web, sending e-mails, doing social stuff, and for blogging research. When it comes to development, I need my Firebug extension and then I’ll boot up Firefox again.

Check it out over at flock.com, and make sure you take the tour if you want to learn more.

Firebug and Myspace, Part Two

By

Firebog and Myspace, Pt 2

My short sidenote on using Firebug to download streaming songs from Myspace has turned into somewhat of a circus. Many people have been trying a bit too hard to get downloads to work. This rewrite eliminates some steps thanks to some comments by some users who found easier ways to get the songs, without all four steps. Hopefully these new set of instructions will help those of you who are struggling with the original method.

Step One: Visit a Profile

Straightforward enough. Head over to the intended bands myspace page and bring up Firebug. You must have Firebug installed and you must be using Firefox in order for this to work.

Once you have Firebug open (either by clicking the icon in the lower right corner of Firefox or going to Tools>Firebug>Open Firebug), click on the net tab, which will show you the status of all the various elements loading on the page. For this example we’ll be using a band that broke up a short time ago called The Waiting Game.

Step Two: Pull the Download Url

With Firebug open and yourself on the band’s profile page, click your required song and watch the Net tab in Firebug refresh. Scroll down to the bottom of the Net tab, because the song should have been the last thing loaded if you just clicked on it. It will be named something like “std…”. Copy the url by right clicking on the “std…” link and copying it.

Firebug and Myspace, Part Two

New Tab, Edit, and Download

The last step is to open a new tab, paste the url, and make one small edit. Find “std” in your newly pasted url and change it to “full”. Press enter and you should be presented with a download box in Firefox. If you have some kind of built in media player that may attempt to play the song in the browser window, you may have to save the link in an html file and than right click it and use “Save file as…” to get the download to work. Do all this while the song is still playing and you should be fine.

Notes about the method

Myspace is frequently changing methods of downloads, so we can not guarantee how long the method will continue to work for. Devlounge is a resource for designers and developers, so this will be the last post about Myspace and song downloading. The initial post was simply a trick, and the only purpose of this post was to clear up the many questions people had about getting this method to work. Please do not ask for support, because if you’re download doesn’t work, it’s not up to us.

Firebug – Dream or Nightmare?

By

Firebug is a new Firefox extension which gives developers a slew of amazing source viewing and editing power, but will rippers use the benefits of the program for their own monetary advantage? We discuss the benefits and possible downfalls of this excellent plugin. Is it a dream and nightmare for developers all in one?

Firebug

What Is Firebug?

Firebug is a new Firefox extension that is still in beta, but presents a host of excellent features and time-savers for debugging code. Firebug is built by Parakey Inc, which if you haven’t heard is the source of some web based magic being built by a few members of the Firefox Team and friends.

The Features

The features of Firebug undoubtedly takes your normal “View Source” and “Dom Inspector” and ups the ante, allowing you to do a whole lot more simply by calling up the tool on any web page.

The features, according to the Firebug site are as follows:

  • Inspect and Edit Html
  • Tweak CSS to perfection
  • Visualize your css
  • Monitor Network Activity
  • Debug and Profile Javascript
  • Quickly Find Errors
  • Explore the DOM
  • Execute Javascript on the fly
  • Logging for Javascript

Quite a hefty list of features for an extension with a download size under 300kb. Let’s dig a little deeper.

Looking Under the Hood

Firebug is mostly all about helping the developer spot problems and get them fixed in a live environment, right from the browser window. The features of Firebug do so much to aid, it’s definitely an essential for every developer.

The first tab you are presented with when bringing up FB is the HTML Inspector.

Firebug - Opening

The HTML inspector lets you expand every element of a design, eventually exposing the entire markup of the site from top to bottom. You can edit the html directly in Firebug. At the same time you have an element selected, for example a div called “main”, you see the corresponding css for that element right to the right of the source window. A very convenient way of viewing and editing code side and css side by side. Firebug allows shows you a visual representation of the element you may be hovering over, based on css. In the screenshot below, we happened to be hovering over the navigation div.

Firebug - HTML Inspector

The next tab you’ll find is the CSS inspector. The CSS inspector will pull a sites entire stylesheet no matter where it may be located. Good for developers, but bad for those who want their original designs kept safe. While of course, it’s not like any old “View Source” wouldn’t simple give away the location of the stylesheet, but that fact that it’s right there in front of you makes it even easy for beginners to have a look at your code.

Firebug - CSS Inspect

Firebug also contains a script inspector, which, even though I don’t write Javascript, I believe it would be extremely useful in debugging problems with Javascript code. There is also the usual DOM inspector.

Firebug - Javascript Inspect

Finally, there is a nifty features which allows you to break down the total requests a site makes and determine exactly which element(s) are taking the most time to load. This can be extremely helpful when you find your site taking ages too long to load, but you’re unsure what query could be causing the slow pace. The Network Monitor can help you determine where and what the problem(s) is/are.

Firebug - Net Monitor

About Devlounge

Want to read more about Devlounge, or maybe you want to contact us, or even advertise? Oh, and don't forget to subscribe to updates!

The Best of Devlounge