View Source on iPhone
This is a cool little tidbit for those of you web developers that have an iPhone. A Safari bookmarklet that enables you to “View Source” for any web page while using Safari on the iPhone. A bookmarklet (in case you didn’t know) is “a JavaScript program stored as a URL within a bookmark” as defined by Wikipedia.
The steps that follow will walk you through the process…
1 - Select and “copy” the long string of code below…
* This needs to be one long continuous string, so if you’re cutting and pasting from Firefox, you’ll need to remove the line breaks and/or spaces.
2 - On your computer, go to ANY webpage in Safari and bookmark it using either the “+” (Add Bookmark) button or by choosing “Add Bookmark…” from the “Bookmarks” menu. When saving the bookmark name it “View Source” and save it wherever you’d like in your bookmark hierarchy.
3 - Now, go into the bookmark manager. Do this by clicking the bookmark icon in your bookmarks bar or by choosing “Show All Bookmarks” from the “Bookmarks” menu. Navigate to the bookmark you just saved.
4 - Single-click on the URL for the bookmark to highlight the text for editing, and paste the text/code you just copied above.
5 - Plug in your iPhone and sync it up w/ your bookmarks on your computer.
Now, to actually use it - launch your Safari web browser on your iPhone and navigate to whatever web page you would like to view the source code for. After the page has loaded, click the bookmark icon in the lower Safari navigation bar (3rd from the left), and navigate to your “View Source” bookmark and click it.
And there you have it.
Facebook’s platform sucks
I’ve been hearing a lot about the new Facebook application platform lately, so I decided to finally check it out over Thanksgiving weekend. I thought it might be fun to port one of the schmedley schmidgets (widgets) into a Facebook “application”. Turns out, it was definitely not fun. In fact, it was a weekend filled with frustration.
I decided to go with something really simple, so the schmidget I chose was the “sticky note”. I was inspired by J-Squared Media’s Sticky Note application. Don’t get me wrong - I wasn’t trying to build a better mousetrap - I actually admire this company and their product. I learned about them through TechStars this past summer and have been following their progress, and am amazed at their success in monetizing a Facebook application/widget. So my journey here was really a proof-of-concept - can a schmedley schmidget be ported to Facebook?
After I immersed myself in Facebook’s developer documentation I set about downloading the example applications, reading FAQs, looking at other examples contributed by other developers, etc., etc. I then made my stand-alone widget. Basically my widget does two things - 1. lets the user change the color of the “sticky” and “save” that preference, and - 2. lets the user change the text on the “sticky” and “save” that as well. The saving is done by generating a very simple cookie with the text and color preferences in it, so that when a user visits the page w/ the sticky note again, it populates those preferences. The great part of this approach is that no server-side coding is needed and we have a very simple strictly client-side app. I ran the stand-alone widget in my local environment and everything went according to plan. I then uploaded it to my development server, and all worked fine there as well. Now, let’s go put this sucker on Facebook…
Strike One - Turns out that if you want your application to be able to be loaded on to a user’s profile page, you MUST construct your application using Facebook’s own proprietary markup language - FBML. And, if you want it to “do” anything, you’ll also have to convert all of your JavaScript to Facebook’s proprietary format as well - FBJS. I quickly decided that I didn’t feel like doing that, and opted to go with the alternative that they offer - run my app “as is” within their environment, but NOT on a user’s profile page. This method involves your app being displayed in an iframe on its own completely separate “canvas” page. So now, I’ve probably just cut my app’s potential exposure to Facebook’s gigantic user-base by more than half.
Strike Two - I get my sticky all loaded up in an iframe on the “canvas” page and you can probably guess what happens next. I can get the app to read from my stored cookie just fine, but I can’t get it to STORE any settings when i change the color or text at all. As you all know, any item presented in an iframe that is coming from a different URL is considered “3rd party” and is usually restricted from creating/writing cookies by most browsers. And asking users to ease up on their security preferences is NOT an option. I tried all sorts of ways to accomplish writing to that cookie and just couldn’t do it. I tried passing a value to a PHP script on my server that would write the cookie. I tried loading a “web bug” image with a URL containing a query string to that PHP file on my server. Absolutely nothing worked. It seems that Facebook’s “platform” blocks all of your app’s communication w/ the outside world once loaded in the page. It did READ from the cookie just fine. So now I’ve got a Facebook application that doesn’t “do” anything.
Strike Three - It seems to me that the main (and only) interaction between the user and the app is when it is being initially created/configured. And once those settings have been determined - that’s it. You’ve got a static finished product. The other sticky note I mentioned earlier is a perfect example. When you go to add it to your profile, you start on a configuration page (which is a flash application), where you choose the text that goes on your sticky note and the color. The application then generates an image of your sticky note that resides on your profile page. You can’t change it - all you can do is delete it and create another one. I find it hard to call something an “application” if you can’t interact with it.
I’m sure there are SOME cool things you can do if you want to take the time to learn Facebook’s proprietary languages and really spend some time digging into their API to access their large chunks of data. But if you can’t “mash up” that data with other data from the outside world (or use the outside world’s data exclusively) and execute changes to the way that data is presented to the user dynamically - then what good is it?
I want to live in a world where we can use widgets anywhere we want, created with open-source languages (XHTML, XML, CSS, JavaScript) and making progress towards an evolving standard. This way - EVERYBODY wins. For those of you that agree with me, I’ll see you over at Google’s OpenSocial.
* some interesting stats and related links…
• of the 5,000 apps on Facebook, 87% of the usage goes to the top 84
• of those 84, only 45 applications have more than 100,000 active users
source:
Good News, Bad News about Facebook Application Market: Long Tail Rules
another insightful article about Facebook applications…
The Children’s Hour: Facebook Apps Are for Toddlers (There, We Said It)
JavaScript email cloaking
Here’s another quick one. Below is a simple JavaScript that you can use to cloak your email address when posting it on your website. It dynamically writes the email link into the page which will thwart most spambots (server-side creation of the email link will always be a little more secure). Here’s how we do it…
1 - create a new JavaScript file, name it “email.js”, and paste in the following…
var prefix = "username";
var suffix = "domainname.com";
var address = prefix + "@" + suffix;
document.write('<a href="mai');
document.write('lto:' + address + '">click here</a>');
2 - then place the following code in your page where you want the link to appear…
<script type="text/javascript" src="email.js"></script>
example:
<p>to contact me via email, please <script type="text/javascript" src="email.js"></script></p>
result:
to contact me via email, please
All you have to do is change 3 variables. The email prefix and suffix are in the first 2 lines of code in the external JavaScript file. The text to display for the hyperlink is in the last line of code (in this case - “click here”). It’s pretty self-explanatory.
IE CSS hacks
In my web developing adventures, I’ve come across one definite truth - Internet Explorer is a big pain in the ass. Version 7 has come a long way from version 6, but it is still a bit quirky. Seeing as how I write code in a text editor (Coda is my tool of choice), I can plug away all day long writing standards-compliant code knowing that when I go to view it in a a GOOD browser like Safari or Firefox, everything will look the way that I had intended. I also know that when I go to open the page in IE, there’s always going to be some sort of surprise. I have gotten good at re-writing things so that they render similarly in ALL browsers - meaning - you can write code that IE won’t mess up and still get the desired effect in Safari and Firefox - but every once in a while that solution is out of reach. When I hit that roadblock, there are two favorite CSS hacks in my goodie bag…
/* IE6 and below */
* html #myId { }
/* IE7 */
*:first-child+html #myId { }
Both of the hacks above are valid CSS, so no worries with messing up your page validations using these. Important note - always try everything you can to NOT use these first, and make these a last resort. You’ll be a better coder because of it.
Transparent PNGs in IE6
Everybody knows that IE versions 5.5 and 6 cannot render a PNG image with alpha transparency correctly. The result is a visible “box” around the image highlighting what is supposed to be the transparent part. In the past I had used the “IE7″ JavaScript that i had found on the web before IE7 was actually released. It involved including a JavaScript file in the header of your page that was responsible for post-processing all PNGs on the page just after page load using Microsoft’s proprietary IE filter: AlphaImageLoader. While that method works fine if you have a webpage or website with many PNG images, I thought I’d share a quicker way to do it inline, should you ever have the need to deal with just a single PNG. This quick little piece of code will write PNGs into your webpage in such a way that Internet Explorer below version 7 will “draw” the image properly with full alpha transparency.
In order to do this we will actually write the image into the page twice - once for IE6 and below, and again for all the other browsers. Here we go…
1 - create a 1 pixel by 1 pixel transparent GIF image and drop that in your images directory (i usually name it “spacer.gif”).
2 - here’s the XHTML to put in the <body> of your document…
<!--[if lt IE 7]>
<img id=”ie6image” src=”spacer.gif” alt=”" style=”filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’myimage.png’, sizingMethod=’image’);” />
<![endif]–>
<img id=”theimage” src=”myimage.png” alt=”" />
* notice how we write the image the first time using Microsoft’s Alpha Image Loader - and how this is wrapped inside IE conditional comments which basically say “if the browser is IE version less than 7″ - then we write the image again the “normal” way for all other browsers.
3 - here’s the CSS to put in the <head> of your document or external stylesheet…
#theimage, #ie6image {
width: 100px;
height: 100px;
border: 0px;
}
* html #theimage {
display: none;
}
* the second style above is the popular * html CSS hack that only IE version 6 or lower will read - telling those browsers to not display the second image.
And there you have it - a relatively simple way to solve the problem of alpha transparency in older versions of Internet Explorer. The best part about this approach is that it uses no JavaScript - just standards-compliant XHTML and CSS.
Hello world!
I decided it is finally time for me to start a blog. The main reason is, of course, shameless self-promotion. But then I realized that I could use this blog to do some good. For the past 12 years, most of what I’ve learned in coding was found on other websites. It was through other blogs that I found cool pieces of code or some great little trick that I then made my own and included somewhere in whatever project I may have been working on. I hope to give a little bit back to the developer community by showcasing some of the things I’ve created here.
Also - since I am such an outspoken person, I decided that this would also be a good place for me to offer opinions as well - on anything and everything that might interest me (and hopefully you). Whether it be my love of tech gadgets, my evangelism for Apple products, my view on the “Web 2.0″ landscape, or advice to other young entrepreneurs who might be able to learn from my mistakes, this blog will serve as my conduit to the world. So get ready for a few piping hot bowls of sarcasm served up with a side-dish of reality.
You may be asking yourself - “is that genius i detect?” - yep, you’re soaking in it. Which is why I need to warn you about one thing. My posts will probably come very sporadically. I will only come here to say something when I have something worth saying. A lot of other developers/designers in the blogosphere feel like they need to write something every day to keep the Google AdWords dollars coming in. Their self-promotion involves them pumping up their reputation so that they can get hired for more speaking events. You know the people I’m talking about - the ones that spend more time talking about how great they are at building websites than actually building websites - spending more time in the theory than the practice. I promise I will never be “that guy”, and I will always be “keeping it real”.
caruso out.
-
stuff i’ve built
-
need my help?
I’m currently available for off-site projects. So, if you’re in need of a client-side guru, or maybe just some help with customizing your own WordPress blog, you can contact me via email by
-
what i'm reading
-
what i'm using
-
what i'm watching
