jump to navigation

Firefox 3.6 Beta November 25, 2009

Posted by Ryan in : Tech, ; add a comment

I’ve been trying to keep up with web browser innovation for a while now, even though it might be painful or inconvenient. At the same time, it’s one thing I get some satisfaction out of. I’ve talked in the past about Flock, Songbird, Miro, and lots of web browser related topics.

This morning I grabbed Firefox 3.6 Beta 3 (download), and it’s got some interesting fun features. First of all, HTML 5 Videos can go full-screen. This is a big step towards in-browser video. Another huge improvement is support for CSS3 fonts, particularly the new WOFF format.

There are also some cool new CSS and DOM features, like crisp vs smooth image scaling (the only way to see the result is to have 3.6 installed) – then there is something very cool I would love to see someone play with – accelerometer support! I assume this will be most useful when they start rolling out mobile browsers, but it currently works on Mac OSX.

I’ve also been helping to test some extensions by just doing basic reporting with the Addon Compatibility Reporter. Really, the best part here is that it will let you use Extensions that are not properly flagged, so I get to work around one of the most frustrating beta-testing features, which is that you lose some of those useful tools! I’m glad they have a way to keep my essential addons around.

Go Try it out!

(some) Drupal Theming: Slides July 16, 2009

Posted by Ryan in : HowTo, Tech, , , , , , ; comments closed

For a DrupalEasy workshop we taught today for NEFLIN, I put together some slides about learning good webpage design, which is mostly geared towards theming Drupal. All of the links in here are clickable, and I highly recommend you check them out.

(some) Drupal Theming by Ryan Price
View more documents from Ryan Price.

(pass around a shortened URL to this slideshare with http://bit.ly/sAF6i)

I spent years making static pages and hand-coding stuff before I came to Drupal, and I feel as though I was able to reach the brains of some librarians today with a few of these links. It was good fun when I was showing off the article about Sprites. One guy said “…really small, fly around sprinkling magic dust”. Indeed.

Also, a quick reminder that we have a DrupalEasy CCK and Views Workshop coming up on July 23rd at Leu Gardens in Orlando. Use the coupon code “FLORIDA” to get $25 off registration.

JetPack, Bespin, Ubiquity… and beyond May 21, 2009

Posted by Ryan in : Tech, Video, , , , , ; comments closed

Mozilla Labs announced a new product called JetPack, which reminds me of the kinds of features you’ve seen in Adobe Air, Flock and Songbird, but the tool makes creating said features very simple.

Mozilla Labs Jetpack – Intro & Tutorial from Aza Raskin on Vimeo.

In the video, the developer mentioned two other Mozilla Labs projects, the first of which I hadn’t seen before. It’s called Bespin, and it’s a cloud-based code editor. Right now, they are hosting the app for open source developers, but I’d love to be able to host an instance on my own server in the future.

Introducing Bespin from Dion Almaer on Vimeo.

Last but not least is what’s basically an implementation of QuickSilver (the application launcher) in your Firefox browser, but instead of launching desktop apps, you’re accessing web services, search and browser actions. The project is called Ubiquity, and it’s cool (for people who like using the keyboard).

Ubiquity for Firefox from Aza Raskin on Vimeo.

Then they just get downright insane…

Aurora (Part 1) from Adaptive Path on Vimeo.

This video really takes the idea of web browsing away from just a bunch of flashing data and gives some good context. I can’t say I would like to use that exact interface, but extra points for effort.

Or if you’d rather see something that’s not so far in the future, this MIT student builds on some ideas that are already out there and improves them. It still has some of the “spatial history” ideas, and takes the idea of “pages” out of the browser, but if you ask me, it doesn’t go far enough.

Firefox Concept Video from liyan chang on Vimeo.

Ubiquity: Web Services + Microformats + Quicksilver = Mashups (in your browser) August 27, 2008

Posted by Ryan in : Tech, , , , , , , , , , , ; comments closed


Ubiquity for Firefox from Aza Raskin on Vimeo.
Mozilla Labs » Blog Archive » Introducing Ubiquity

The overall goals of Ubiquity are to explore how best to:
* Empower users to control the web browser with language-based instructions. (With search, users type what they want to find. With Ubiquity, they type what they want to do.)
* Enable on-demand, user-generated mashups with existing open Web APIs. (In other words, allowing everyone–not just Web developers–to remix the Web so it fits their needs, no matter what page they are on, or what they are doing.)
* Use Trust networks and social constructs to balance security with ease of extensibility.
* Extend the browser functionality easily.

I think Microsoft is going to copy the hell out of this and release a “Microsoft Live OpenWeb Command Window Beta” before mid-September.

5 Essential Firefox Plugins for Web Developers March 13, 2008

Posted by Ryan in : Tech, , , , , , , , ; comments closed

Since I have a new job, I had to sit down at a fresh installation of Windows today and get my machine developer-ready. I already miss the Dock and Transmit and the Terminal, but I’ll deal.

UPDATE: Today (7/14) I sat down to a new MacBook Pro and had to repeat the process… hooray!

One thing I noticed was my reflex-like action to go download 4 5 plugins no web developer should be without. They are, in no particular order:

  1. Measure It! How wide is that sidebar? Don’t pull out the DOM inspector or Firebug, just MeasureIt! I also like that once you drag the box it persists on the screen and you can drag it around to compare measurements.
  2. ColorZilla Sample any color in your browser – don’t open Photoshop, just hover over a color you like and voila! Also generates Photoshop pelletes, but I don’t open Photoshop, so I don’t use that feature.
  3. FireBug I can’t actually tell you how awesome this is. Being able to see the http response of every file that was loaded and how long each file took to load is already a killer app, not to mention dead-simple editing of any markup, CSS or JavaScript on your page, and being able to execute JavaScript on a live website without having to open any windows. FireFox 3 people, make sure you get 1.2 beta.
  4. YSlow extension for Firebug – a plugin that has plugins? This tool can help you analyze the bottlenecks in your page optimization, giving you an A-F score for facets of your page load (very useful for high-traffic sites).
  5. Web Developer Toolbar My #1 used feature is the Resize menu. So many pages break my window from being exactly 1024 wide, and I also want to check things out at 800 wide as well. This just feeds the my OCD streak and lets me get on without worrying.

These don’t include any of my plugins for personal productivity, web browsing, media sharing, or Search Engine Optimization. Instead, these are 5 plugins I think should come pre-installed on every developer’s machine.

Also, if you’re doing Drupal development, I hear very good things about this Theme Developer Module for Drupal 6. I’m not using 6 on any production sites yet, but I think it will prevent you from having to open up TextMate and do a “Find in Project”.

Leave your favorite development plugins, or other kinds below.

iPhone Web Clip Favicon Fun! January 28, 2008

Posted by Ryan in : HowTo, Tech, , , , , , , , , , ; comments closed

If you have a web page of any kind – blog, business, social network, whatever – take 3 minutes out of your day and hook this up.

Everyone has a fun little 16×16 favicon to sit in the bookmarks section, links bar, or tabs of their favorite browser (Flock, Songbird and Firefox come to mind). This has been a long-running tradition with webmasters and SEO companies to give you that last bit of branding: the favicon!

Now with mobile devices and desktop apps (rich internet applications, too?) getting into the mix, there is a need for favicons larger than squint. Enter, the apple-touch-icon and associated rel tag, which is even easier to implement than a favicon. No special file formats, no special programs needed. Instead of a screenshot of the web page, you now have a degree of control over a bookmarker’s (webclipper’s? that sounds nice) touchscreen.

All you have to do is name the thing apple-touch-icon.png and throw it in your document root. According to the primary vivid, it should be 57×57px, but that’s actually the rendered size and not likely the size Apple uses internally. If you go to http://apple.com/apple-touch-icon.png, theirs is a nice round 129×129, which is roughly 2 1/4 times larger than 57×57. I figure Apple must know something we don’t, so I’ll play along.

And now, a handy diagram to show you what’s up:

Favicon

Favicon
16×16

Apple Touch Icon

Apple-Touch-Icon
57×57

Apple’s Official Icon

Apple
129×129

Once you get your image loaded, borrow the boss’ iPhone and add the webclip to your home page. There is also a preview screen that lets you know instantly if your icon is working (not pictured).

Apple iPhone Logo

The iPhone even added a nice glossy, buttony finish to the experience. Ahhhhhh…! You’ll also notice the edges of your icon may get trimmed (which caused the boss to make a face). This is, as far as I know, normal. If you don’t want the boss to make a face, center the icon and leave some extra space around. Using the Apple example may be a helpful guide.

Last but not least, you may be wondering: “Why do I have to name my icon something so specific, and why do I have to use the document root?” Looks like you don’t. Again our friends at vjarmy.com tell us that there is a rel-tag we can throw in the header if we want to place the icon elsewhere:

<link rel="apple-touch-icon" href="/path/to/my-cool-icon.png" />

If you don’t want to use a .PNG, you have smelly feet, but if you’re OK with being known as the smelly foot man, by all means, don’t use the best web picture format. I also had to dissuade my boss from experimenting with transparency in the .PNG, because I’m quite afraid of the results. Imagine a person with a naked woman on their iPhone desktop; now imagine your company’s logo displayed distastefully close to (or on top of) an unmentionable portion of said woman’s body – with a transparent background! Yikes. I would feel very sorry for Six Apart on that day…

I find the apple-touch-icon tag to be a scoche proprietary for my taste, but so are iTunes tags in podcast RSS feeds, so I guess we must needs put up with a little bullcrap every now and then.

I also heard someone recently complain about sites that have a default iPhone interface, and I mostly agree. They should put the interface on a subdomain so you can get at the regular functionality of the site, but I believe a truly useful service should be user-friendly through multiple interfaces, and traditional web apps are not always suited to touch screens.

If you have any questions (or if I forgot something) buy all means, let me know.

I am also hoping to make a small and fun Drupal module that encourages you to upload a 129×129 image to use as your site’s official webclip instead of a screenshot, so be on the lookout for that. Would you like to see other iPhone-friendly features integrated, like style sheet includes, javascripts, etc? I’d love to know.

Flock and Facebook Screencast November 21, 2007

Posted by Ryan in : HowTo, Tech, , , , , , , , , , , ; comments closed


The new Flock is out and better than ever, so I’m inspired yet again to screencast about it and show you more about this browser. In this edition we talk about how Flock has integrated your Facebook friends (and Flickr, MySpace, YouTube) right into the sidebar. You can keep the People bar open while you surf the web and make updates to your status, write messages, subscribe to media and share with your friends with just a simple drag-and-drop. This is the version of Flock you’ve been waiting for, trust me.

Download the Screencast (iPhone friendly!)

If you want to see anything else demonstrated, like if you want to teach your boss how to upload YouTube videos, I would be happy to create something custom for you. We do dedications!

Flock Blogging with Photos September 14, 2007

Posted by Ryan in : HowTo, Tech, , , , , , , , , , , , ; comments closed

Part II, Electric Boogaloo!

This screencast demonstrates how to use Flickr photosharing and the Flock browser to add photos to a WordPress blog (or any blog or web page, really). Flock makes it dead-simple to upload, tag, and post photos. You can probably download the browser, sign up for Flickr and post photos to you blog faster than you can watch this video (about 7 minutes). Let me know what you think or if there are any tough spots.

Download the Screencast (in stunning 480×320 optimized for iPhone!)

There was a time when I was thinking of doing lots of screencasts and trying to build a whole site around it. Mike G of CFPHP and I were talking about something along these lines today – he’s the reason why you have an iPod-sized ‘cast. If you want to see anything else demonstrated, like if you want to teach your boss how to subscribe to RSS feeds, I would be happy to oblige. I am just sort of doing these as they come up until we come up with some cirricula.

Miro is stepping it up September 5, 2007

Posted by Ryan in : Tech, , , , , , , , , , , ; comments closed

Miro player (formerly Democracy) is an internet TV application that works on a subscribe and download model. Some would call it a podcatcher. Others would say it’s ready to leave the other podcatchers in the dust.

Why would I say such things about a project that’s been around for so long? Because they changed their name and branding? Because they’re doing some nice user-friendly screencasts? Because of bittorrent support? No. Well, maybe bittorrent. But that’s not what I mean. Check this list of recent updates:
From the Miro Blog:

# OPML import and export allows lists of channels to be shared.
# The Windows Options panel has been reorganized into pretty tabs.
# Miro will return to the last place visited in the Miro Guide when you click away and return.
# If you add an alternate channel guide, Miro will display the name and icon for that site.
# Single file downloads are now supported.
# Mefeedia, Yahoo! and Yahoo! Video are added as search engines.
# Veoh has been temporarily removed due to compatibility problems.

OPML import and export allows lists of channels to be shared. Also, notice where it says an alternate channel guide… I’m not sure what that’s all about, but it sounds cool.

Why is OPML cool? Well, OPML is a way of describing a list, or a list of lists. Feeds are lists. I can make a list of all the feeds I’m watching (we are talking video here) and then share it with a friend. Or anyone who reads my blog. Or my pownce friends. Or people using the Share my OPML site, or even people on the NetVibes Ecosystem. How cool is that? You can’t do that in iTunes. Can’t.

Alternate Channel Guide? The CG is the screen that loads when you first start up Miro (Democracy). Here’s what the Miro blog has to say about new channel guides:

Use the Channels -> Add Channel Guide menu to add the likes of blip.tv, mefeedia and even digg. You can browse for videos and feeds. With the blip.tv subscribe button, you can add a channel directly into Miro.

You can’t do that in iTunes. I give iTunes a lot of credit for being the best (easiest to use) podcatcher out there, but combining Miro and a great audio browser like Songbird, you can duplicate and outgrow all the features of iTunes (especially since Songbird has a pluggable interface like Firefox) without having to use a proprietary system like iTunes, because these two systems are open-source. Now you can get your music and video from anywhere, even iTunes in the case of Songbird, and enjoy it alongside the best content streamed from around the web.

More OpenLaszlo August 28, 2007

Posted by Ryan in : Tech, , , , , , ; comments closed

“Some conference that wants to sell me stuff” has a webcasted talk by David Temkin, Founder and CTO of the Laszlo corporation. For a majority of the time, he talks about why they chose to develop the Laszlo Webtop. It is a philosophy, and like all great arguments in computing, it comes down to philosophy, not technology.

I found said webcast after reading about it on Antun’s Blog, and he found me after my “really positive post” last week.

All this webtop vs. desktop is actually really interesting. I think some remarkable points from David’s talk are:

  1. Desktop makes it really hard to share data between more than one machine. I would add especially if they’re not on the same LAN/WAN.
  2. The fundamental GUI for desktops hasn’t changed at all in 20 years. This point is so much a part of the fabric of the desktop experience that it will take years to turn over.
  3. Downloadable and local apps with web enablement are something cool, but phishers and virus makers have forced us to be untrusting of anything we have to download. Even Apollo has warnings for installing 3rd party apps.
  4. There are still certain apps we need a full-fledged desktop for, like CD/DVD playing, ripping, burning. If we gave that functionality to the browser (with proper permisssion, of course), desktop apps could be replaced by web apps.
  5. Some enterprises are installing full-fledged versions of their intranet/portal/CRM on every employees laptop so they always have a full working copy of the app. This happens because business logic is not currently transportable in downloadable apps. Yes, not even with Apollo.

I guess I just summarized the whole thing for you, and you don’t really need to watch it any longer, but he says a lot more that I felt like I knew, and maybe you guys don’t know. Check out Antun’s Blog for info about how to access the webcast (you need to give them your name/email), then watch and learn.