Thanks to “mcfinn” in my seyDesign Member Group I was reminded of a cool tool, XRAY, for analyzing the box model of any element on a web page with the click of a button. XRAY, a bookmarklet, is a quick and tidy way of grabbing some DOM info without having to wade through the whole DOM tree like FireBug and WebKits developer tools.

While the XRAY bookmarklet isn’t as powerful tool as FireBug, and it doesn’t have editing capabilities, it is very handy for quickly and accurately pointing out the styles effecting a specific element on a page. Just click the bookmarklet, then click on the elements you want inspected.

Related posts

• Web Search with Quicksilver: how-to (3)
• To be Strict or not to be (0)
• seyDoggy is back in the office. (0)
• seyDoggy and RapidWeaver, a new approach (2)
• seyDesign 2008 is nearly complete (0)

• On initial launch you are presented with the “Top Sites” window in which it appears that Safari scours your history for the most frequently visited sites in your recent cache and then throws up their thumbnails in a Core Animation like black gallery for you to pick from. Selecting the edit button allows you to remove items and make others sticky. I presume you can also add others that might actually be more indicative of your “Top Sites”. Again, in true Apple form, Apple seems to be hinging the success of a product on visual wow factor, but admittedly I could see myself making use of this.
• My next reaction was when I created a new tab and found that, a la Google Chrome, the tabs are on top. Why? While I will most certainly get used to it, what is the actual reason for this? I can’t find and difference in their functionality apart from the fact that you can only drag them about from their corner. Aside from that you can still drag them, move them from window to window, create a new window with each tab… there is one option I hadn’t noticed in previous version, “Add bookmark for these X tabs”. Is that new?
• Coverflow in Safari… there have been a few plugins to address this in the past. I guess they are history now. Do I need Cover Flow in Safari? I don’t need it iTunes or Finder so I probably won’t use it here either. But that said, it must be a popular enough technology if they keep throwing it in to their software.
• History search. Now that I like! I have always found searching the the history in the bookmarks folder to be painful and unproductive. This history search is insanely fast and (in Cover Flow form) even shows you screen shots of the sites that match your search terms.
• It claims to be faster, using the Nitro Engine. It could be but browsers and web technology today is getting so fast I would be hard pressed to notice the difference. It does seem to be faster overall but am I reacting to the guts of a finely tuned OS X Cocoa application or the page load? One note I will make about making browsers faster (and Safari 3 is already guilty of this), they cache things… unnaturally so which can make web development a nightmare. Safari 3 already caches it’s javascript and images in ways that cause web developers to have to reset their browsers all too often just to get an accurate response on their new projects. And faster also means pre-load, again which Safari 3 is bad for. Safari 3 will scour your main CSS file in search of things to load (like background images), whether or not that thing is actually needed or even being used. I hope Safari 4 handles this a little better.
• The newish developer tools are nice (if your weren’t already playing with them in webkit), but I don’t know… it’s still not FireBug. You still can’t select code in the element window! How good is debuggin if I can’t edit what’s there or even copy and past it to a text editor? Seriously? As far as developer tools, these will give a glimpse into how your page is working, but they’re not much good for anything else.
• The full page zoom could be useful (hopefully not for a few years for me yet), but wow does it ever slow things down. Zoom in once and try page scrolling… not so fast now.
• I love, love, love the new address bar! If I am going to interface with browser in any way, it’s through the address bar so this improvement is quite welcome. Basically when you start typing in the address bar you are presented with much the same information your were before, but it’s clearly defined in two categories; history and bookmarks. In both cases it presents you with the site title followed by the URL which makes it very easy to get your bearings.
• The search field is now really slick too. It’s along the lines of Inquisitor, offering you suggestions and previous search queries. Very nice!
• CSS Animation, CSS Effects, CSS 3 Web Fonts… just more things to tease us web developers with. Stuff we won’t be able to use in the real world until all other browsers catch up. We can always dream though…

Overall, I think this is two things combined; a promising look at where web browsers should be and a sobering reminder of how much waiting for other browsers to get there will suck.

Related posts

• My top 5 web development tools (0)
• FlipSide5, Inc. to Deliver World-Class iPhone Games (0)
• Compulsive Blogging Part 4 (4)
• Web Search with Quicksilver: how-to (3)
• To be Strict or not to be (0)

LittleSnapper allows you to treat a collection of screen and web snaps more like a library, and iPhoto Library if you will, allowing you to tag them, rate them, make notes and annotations, view the source code for web snaps. This gives you not just a library of images, but a tool box of thumbnails complete with source code for studying, origins, ways to note what you liked about it, etc… There really isn’t many things to compare it to. It is one of those trend setting apps that has more or less made it’s own niche. Certainly a web designers must-have app.

And then there is QuickSnapper… While at first glance, it’s not all together different from what other similar scree/web shot sites are doing and on it’s own it wouldn’t be particularly exciting (except that it looks damn sexy). What set’s it apart though is that it was built to support the LittleSnapper app, and not built the other way around. That’s where these other screen/web snap sharing site have gone wrong in my books. They’ve built the site and now in order for you to get your stuff up there, they’ve made a half baked “utility” that will, if you are lucky, let you upload something… sometimes.

QuickSnapper, on the other hand was built with LittleSnapper integration in mind… exclusively. With the click of a button, LittleSnapper loads up a snap to your account. In turn, with the click of a button on QuickSnapper, you can pull down a shared snap into your own LittleSnapper library… click… that’s it! A complete, happy snapping, bio circle of screen and web snapping goodness. Does it get any better than this? Me thinks not!

Oh, and BTW, the screen grab of LittleSnapper? Yeah that was taken with LittleSnapper and is hosted on QuickSnapper…

Related posts

• My top 5 web development tools (0)
• The beauty of RapidWeaver meets the power of TextMate (0)
• Skitch – Snap, Draw, Share (0)
• Life As a Theme Developer (1)
• Time Machine. A giant leap backward. (5)

I have finally nailed down an obscure little bug in cataLog (and in turn Acumen) that was causing the second level navigation to jump up about 14 or so pixels when the user used the “Tidy” setting in RapidWeaver and when the user used code or content that tripped the “Tidy” setting into converting the document into a Transitional DOCTYPE. The reason the bug remained so illusive is that this set of circumstances was not immediately clear and is not necessarily something the end user is mindful of.

My repeated testing, assuming that there had to be a difference in the content area or navigation area, kept leading me down the wrong path. One assumes, when “Tidy” is at work, that the HTML of the document is somehow being altered or “tidied up” as it were. And this is where I continued to search extensively but came up empty handed every time. Having exhausted nearly all HTML avenues and having run countless DIFF comparisons I finally turned my attention on the one thing in each document that I knew was different; the DOCTYPE. By simply switching the DOCTYPE from Strict to Transitional, regardless of whether the embodied code was in fact one or the other, I could trigger this odd navigational occurrence.

As much as this was a major breakthrough in the tracking of this bug, I now knew that the game had gotten that much more complex. I was no longer dealing with a bug in my code or the theme as a whole. I was now dealing with what was potentially a rendering bug, or interpretational difference in the two DOCTYPE’s, meaning that the bug being presented may very well be an issue in the HTML standard itself. Eeek!

Since I knew that the navigation in question uses inline-block as a value on its display property, and since I am well aware of the lack of widespread support that inline-block has among browsers, I knew that this was probably the place to look. I need to look in the CSS of the second level navigation.

Through considerable trial and error I found that an attempt to display the ancestor, or hidden navigation inline was what was causing the trouble. In DOCTYPE Strict, the combination of ul {display: inline;} and ul ul {dispay:inline-block;} caused the initial ul to have height, despite having tried to suppress it with ul {height:0; margin:0; padding:0;} etc… While in DOCTYPE Transitional, the initial ul rendered correctly (which is to say it didn’t render at all and had no height), so the latter ul would shift up to takes it’s position. The fix was simply this: ul {margin:0; padding:0;} with no attempt at any display value other that what it would naturally inherit (which would be “block”).

So is this in actual fact a bug in the Strict DOCTYPE standard? It’s hard to say really. In the making of RapidWeaver themes, we pour a lot of effort and trickery into making things happen the way we want them too. In the case of split navigation we use the same set of code in multiple locations and simply turn on or off the bits we want shown or hidden. This probably is not a typical practice in web design but a necessity in RapidWeaver theme development. Still, why would one DOCTYPE behave differently from another where such a small property in concerned?

Related posts

• Web Search with Quicksilver: how-to (3)
• TextMate HTML and CSS bundles for power users (3)
• Use RapidWeaver's %pathto()% syntax in javascript files (0)
• The beauty of RapidWeaver meets the power of TextMate (0)
• seyDoggy and RapidWeaver, a new approach (2)

1. TextMate

   There is text editors and then there is TextMate. Renowned for it’s unparalleled abilities to handle a seemingly limitless set of languages, TextMate makes writing ANY code fast and painless. I use TextMate for every bit of text editing that I do, XHTML, CSS, XML, PHP, SQL and javascript, just to name a few. It’s not free but you will agree that there is no other text editor that comes close to TextMate.

2. MAMP

   If you are already a pro web designer you are already aware of the need for a live server environment to test out whatever systems you happen to be developing at the time. You also no that uploading to a remote location is time consuming and working SFTP, SSH or WEBDAV can be unstable. You best bet is to have a local server, but if that is not within your means (or know-how) then you need to look at MAMP. MAMP is a nicely bundled package of MySQL, Apache and PHP that allows you to run a web server safely on your own computer. Though Apache and PHP are already included on you Mac, they tend not be as current as those found in MAMP. MAMP also allows you to quickly change your servers from one project to another to keep your perceived root URL common across all your local web work. The best part is, the only version of MAMP you really need to get this done is free.

3. Safari

   Don’t hate for this. I don’t mind FireFox and I think FireBug is great but to be honest I never use either one on a regular basis. Safari, on the other hand, in an indispensable tool for me. By enabling the developer features of Safari I am able to peer into the DOM for those tricky to view javascript behaviors and see what is really happening on the client side. Safari, of course, is include with your Mac operating system.

4. PhotoShop

   What is web design without the design? There are a ton of free options out there, but lets be honest, there is no substitute for the real thing when it comes to mocking up proposed web layouts. I agree PhotoShop is outrageously priced but in the grand scheme of things, if you are getting paid for your work then the cost of this app is nothing more than a tax write-off at the end of the year.

5. Parallels

   You can dispute me on this choice because I honestly have no experience with anything else. The work involved in getting 3 valid VM’s working for the purpose of testing 3 related and equally crappy browsers, IE6, IE7 and IE8, leaves me with no interesting in going through anything remotely similar in the near future. But my point is this, you need to have a way of testing Microsoft’s Internet Explorer, version 6, 7 and 8 and whether you do this via Parallels or VMware is of little consequence to me. It needs to get done all the same. The cost of each is comparable to the other.

If the above list is all you ever invest in for your web design and development career then you are in excellent shape.

Related posts

• RapidWeaver tip: Add native search (0)
• Compulsive Blogging Part 4 (4)
• TextMate HTML and CSS bundles for power users (3)
• Life As a Theme Developer (1)
• Control your processors in Mac OS X 10.5 (0)

• RapidWeaver 4.0 is fresh in peoples minds
• There is a lot of new activity and 3rd party development surrounding RapidWeaver
• There are a great deal of new users
• RapidWeaver is fast approaching critical mass

And as always, luck can always play a big part in these things. Some themes I’ve made in the past have been the right idea at the wrong time and have picked up more and more as time went on. cataLog Pro seems to be a case of the right idea at the right time. This, apparently, was a theme that fit the bill for so many people with a need for it at that moment. I’ve received countess emails to that effect, “This is exactly what I needed for a project I was starting.”

With RapidWeaver really taking off as it has off late, I really ought to do another talk at WatRMUG (Waterloo Regional Mac Users Group) and reintroduce the Kitchener-Waterloo users to website building, the RapidWeaver way.

Related posts

• seyDesign 2008 is nearly complete (0)
• Web Search with Quicksilver: how-to (3)
• To be Strict or not to be (0)
• My top 5 web development tools (0)
• seyDoggy and RapidWeaver, a new approach (2)

One could wonder such things when Apple hired Charles Jolley, Sproutit founder and Mailroom developer, to re-architect their .Mac side of things. We have seen new things pop up in .Mac that were surely the influence of a Charles Jolley way of thinking; the photo gallery and what-not. And then comes MobileMe, a very rich internet application that defies all that we have known about web apps; they don’t have to suck. Surely this is the work of Charles Jolley. So what is to become of this seemingly fresh way of doing RIA’s?

That’s when Apple (and a few friends) drop SproutCore on us, an open standard platform for building web apps that look and feel like desktop apps… seriously… they do. But let me restate the cool part, open standard platform. That’s right, this is not Flash or SilverLight or even Java, this is open web standards such as HTML, CSS and Javascript with a bit of Cocoa inspiration.

Finally a javascript framework that I can get behind and one that I can sit down and take a crack at, knowing that a) it’s open and b) it has the support of a few heavy hitters behind it.

Related posts

• My top 5 web development tools (0)
• RapidWeaver tip: Add native search (0)
• Control your processors in Mac OS X 10.5 (0)
• seyDoggy and RapidWeaver, a new approach (2)
• seyDesign 2008 is nearly complete (0)

I am so stoked to finally be telling you about a site, client and product that I have poured my heart and soul into for the last little while; FlipSide5!

FlipSide5, Inc., makers of the popular web editions of Tic-Tac-Touch and 4InARow touch are now launching versions to download and install, allowing players to own these games on their iPhone and iPod Touch. Both these products, Tic-Tac-Touch and 4InARow touch, are designed to be amazingly “simple, fun and wow”, refreshing these ageless classics for today’s generation.

Back in November 2007, Michael Sanford, President of the newly formed FlipSide5, Inc. created the now popular iPhone web apps, Tic-Tac-Touch Web Edition and 4InARow touch Web Edition. There have been over 1,500,000 games played so far and FlipSide5 has received thousands of emails from their users requesting native versions of these games, available to download and install on the iPhone and iPod touch.

“Why not take something ordinary and make it into something extraordinary,” says Sanford. “Everyone plays these classic games already, so popularity is guaranteed.”

“Great for iPhone. One player or two.” said one 4InARow toualmost every weekend. This is a great way to pass the time.”

FlipSide5, Inc. was founded with one thing in mind; world-class quality. That mission carries through to their work with Tic-Tac-Touch and 4InARow touch for the iPhone and iPod Touch, using compelling technologies like multi-touch, accelerometer support and sound. Play against opponents online via EDGE, WiFi or 3G, taunting or encouraging their efforts with instant messages. Also, using the built-in iPhone location technology, see the country where your online opponent is located. Instant messages are translated automatically to your opponent’s native language (supported languages only). Many more features are listed on FlipSide5′s website.

About FlipSide5, Inc.

In 1997, Michael Sanford co-founded a Java development tools company, InLine Software. After selling his share in 2001, Michael was on the lookout for projects he could pour his heart and soul into. Six years later in November 2007, Sanford founded FlipSide5, Inc. in Reston, Virginia. The goal is to bring “simple, fun and wow” software to iPhone/iPod touch users.

“My 6 year old son would say ʻDad, Iʼm boredʼ, so I developed Tic-Tac-Touch for him. Millions of web hits later, FlipSide5 was born,” says Sanford, FlipSide5, Inc. Founder and President. “We are very excited about our first two offerings, Tic-Tac-Touch and 4InARow touch, through the iTunes App Store. We are even more excited about what we have in our pipeline”.

Pricing and Availability

Tic-Tac-Touch and 4InARow touch will be available when the iTunes App Store is available; summer 2008. Tic-Tac-Touch is priced at a very low price of $0.99 USD. 4InARow touch is priced at only $4.99 USD. Free Web Editions are available immediately for both Tic-Tac-Touch and 4InARow touch from the website:

Tic-Tac-Touch FREE Web Edition and Screenshots
www.flipside5.com/products/tictactouch

4InARow touch FREE Web Edition and Screenshots
www.flipside5.com/products/fourinarowtouch

Related posts

• I Give Apples New Safari 4 Beta a Spin (0)
• Web Search with Quicksilver: how-to (3)
• To be Strict or not to be (0)
• Time Machine. A giant leap backward. (5)
• RapidWeaver tip: Add native search (0)

As a Canadian with only imaginary boundaries separating me from the Apple motherland, I am forced to sit and watch as my southerly neighbors bask in all the digital media glory that is Apple these days. Until recently I couldn’t so much as download some music and a podcast or two. Now I suppose I should be thankful that I can download the odd Canadian television show that CTV might happen to see fit to distribute. The pickin’s are slim; no movies downloads, no major network television shows, no movie rentals… can I remind you that geographically speaking it is a mere imaginary slice of air space that separates Canadians and Americans in what is called the worlds longest unprotected border. There are no technological hurdles to overcome to deliver this content to us. Trust me, we are quite well connected in every other respect, but iTunes, it seems, exists in some other spacial realm where data transfers must hit the Can-Am firewall of politics.

Canadians are not alone in their belly aching. We are joined by legions of other countries with similar complaints in service lags. The difference is this; Canadians have free trade agreements and partnerships that all but make us American, collectively speaking. Why then must Canadians be the last to get anything that Apple dishes out. I mean seriously, Germany, the UK and France all have the iPhone… countries who’s trade importance doesn’t match that of Canadas when you combine those three countries together, and who’s geographical locations puts one of the worlds greatest oceans between them and they manage to get an iPhone.

Ok, I am not biting my tongue anymore… Apple? You suck! (that is until you let me buy House MD, CSI and Grey’s Anatomy… for my wife… from iTunes Canada)

Related posts

• Define your RSS Feed title (0)
• The Spanish Inquisitor-ition? Get real! (0)
• SCREEECH HALT 3 (0)
• SCREEECH HALT 2 (0)
• RapidWeaver tip: Working with images (0)

All of this pressure to continually come up with new thing-a-mabobbers each and every year, and the continual pressure to live up to the rumor sites building expectations… it’s a lot for a hippie throwback like Steve to take. Let’s face it, he’s no spring chicken anymore. The force is weakening. I mean sure, Yoda could lift an X-wing fighter at 200 plus years of age but look what it did to him. And that pails in comparison to controlling the minds of hundreds of otherwise curmudgeonly reporters willing to write bad things of Apple the other 364 days of the year.

So that’s why my prediction for the 2008 Macworld Stevenote is this: In lieu of Steve’s failing powers Apple has developed a new device, code named (aptly enough) Yoda which is a small device, about the size of an iPhone, blue in color, with a button on it… it’s the first ever RDF amplifier called the iField. Seriously… “There is something in the air”? Uh…yeah… it’s the iField!

Initially aimed at the iPod market, you know, kids who want their parent to believe their homework is done, the actual implications for this device are wide ranging with potential uses for CEO’s, board of directors, head of the PTA, husbands… why this device could have such broad appeal that this could very well launch Apple shares into the stratosphere… like $50 or $60… or something really big even.

You watch in two hours time. If Steve is indeed holding a blue box with a button, my predictions are at least partly true. If he says nothing about the iField it’s only because he is just beta testing it. If the iField is in fact working, you won’t even recall reading this article.

Headphones not included.

Related posts

• Steve serves some iPhone humble pie (0)
• The BigBox (0)
• Rebuilding after all of these years! (3)
• My top 5 web development tools (0)
• Keeping unused hard disks unmounted (7)