Archive for the ‘javascript’ Category

March 15th 2010

Here it is! The beta version of prettyPhoto 3.0. Why beta? Because there are several big changes in this version and before making it official, I really want it to be working properly. I tested the usual stuff myself, but I really want to throw it out to the community so you guys can test it.

Summary of changes

• Ability to initialize multiple prettyPhoto with different settings
• When opening a gallery in prettyPhoto an inline gallery is presented over the photo. See post thumbnail.
• Slideshow! See settings in jquery.prettyPhoto.js
• Changed defaut theme, “facebook” theme is now default.
• Changed the default speed to fast, feels snappier now.
• Code optimization, removed about 70 lines of crap.

Download

So you want to test it? You can find the demo page here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/

I suggest you test it on your website, you can find a zip file here: http://no-margin-for-errors.com/demos/prettyphoto_3.0/prettyPhoto_3.0b.zip

Please note that since it’s a beta, you should retest everything on your own to make sure nothing breaks.

Bug reports

Please report any bug in that thread in the forums. I’ll do m y best to get them squashed to release that update as quickly as possible.

Thanks!

January 28th 2010

Earlier this week Google released Google Voice as a web application. It’s a toned down version of the application that originally got submitted to the App Store but stirred controversy.

If you never heard of it before, the application got pulled down from the App Store for “unknown” reasons, Google complained to the FCC, then Apple said they were investigating the app. Someone somewhere obviously doesn’t want that app on the iPhone.

What they did this week is a straight hit in Apple’s face,. They modified their original App to be available as a web app, so unless Apple block access to the Google Voice website, there’s really nothing they can do about it and that’s a good thing.

Mobile Browsers are really powerful.

Mobile Safari is part of why Google has been able to release Voice as a web app. This browser really is quite powerful, it supports advanced HTML5, CSS3 and the JavaScript performance is impressive.

This got me thinking about the relevance of developing an App for the App Store. It’s true that the browser can’t access some core features like the camera or the gps, but some apps could actually be quite easily converted to a browser based equivalent. Just think about website specific apps that really are only RSS readers (Engadget,TUAW,CyberPresse), notes apps, even Instapaper could be converted using Safari client-side database.

Visibility

It’s true the App Store can potentially give you a lot of visibility, but the truth is that with over 140 000 apps yours can easily be far down the list. As if you publish it as a web app you can actually promote it not only for the iPhone but for many more platforms as it is browser based.

Open is epic win

Developing a web app aimed at the iPhone makes a lot of sense, you don’t have to go through the approval process when you launch or when you want to update your app. Your market could also be a lot broader as the app could be easily adapted for Android and Pre, much easier than re-coding the equivalent in their native language.

You can even add web pages to your home screen on the iPhone so it feels more like an app from the App store.

Cost $$$

Last time I checked there were not many people in my area developing for the iPhone, while there were plenty of web developer. It would be a lot easier to maintain and to find support in the event you lose one of your programmer. And as with everything, if demand is up, prices will follow so an Objective C programmer ain’t cheap.

Bottom line

If I had to develop and app for the iPhone today, I’d strongly consider the web app avenue unless the app rely on core features that are only available in the iPhone SDK.

What’s your view?

January 5th 2010

Allright, I’ll be very honest with you. I introduced some bugs in prettyPhoto 2.5.5. Luckily those I’m aware of just got fixed!

I fixed:

• A bug where the loader icon wouldn’t display properly;
• A bug where the videos would still play when prettyPhoto was closed;
• A bug where prettyPhoto wasn’t displaying properly upon re-initialization.

If you still see some bugs (hey, I’m human!) or need some support, check out the support forums.

Head over the project page to download it!

December 22nd 2009

With the recent release of prettyPhoto 2.5.5, I want to start planning the 3.0 release. I already have some stuff I want to implement and I’d like to get the community input to make sure everyone is happy. Here’s what planned so far:

1) Ability to initialize multiple prettyPhoto with different settings.
2) When opening a gallery, have the gallery opened inside prettyPhoto so the user can quickly navigate through items.
3) Slideshow!

Let me know what you’d like!

As for the estimated ETA…when it’ll be done.

December 21st 2009

It’s here, new prettyPhoto! Added new features, modified the settings, optimized the code a bit.

New features

Inline content support. You now just have to link to the ID of the element you want to open in prettyPhoto and prettyPhoto will do the rest.

I also added support for Vimeo, just link the the video page and prettyPhoto will do the rest.

New theme! I’ve bundled a new theme inspired by the facebook modal box.

Settings changes

Added wmode as a setting. You can now specify if your flash movie needs to be opaque or transparent.

Added autoplay as a setting. You can now specify if you want the movies to start playing as soon as they are opened in prettyPhoto…or not!

prettyPhoto markup, flash markup, quicktime markup and inline content markup are now in settings. So if you ever need to modify flash params, add bits of HTML you can change these settings and you’re set.

How to upgrade?

As usual, just replace the javascript and css file with the new one. Add the facebook theme images in case you want to use that theme and you’re set!

Where is it?

The project page is here, the support forums are here, the donations are here.

December 16th 2009

As you must already know, using target=”_blank” to open a page in a new window doesn’t validate in XHTML.

There’s a javascript workaround tho. This example is based on jQuery since it’s always included in my project and it’s my library of choice but it could be easily converted to any library.

The basics

To replace the target=”_blank” you should use the rel attribute. This attribute is used to specify the relationship  between the document that contains the link and the document it refers to. So your links should have the attribute rel=”external” to specify the link is not a link inside your website but to another website. There are plenty of values possible for you rel attributes, I invite you to read about microformats.

Now rel=”external” doesn’t mean target=”_blank”. Adding that attribute won’t open the links in new windows, it’s only a more semantic way of specifying the relationship between pages. Since some of you might not want to open rel=”external” in new windows, browser vendors didn’t implement it as being the same as a target=”_blank”. That when javascript comes into play.

The javascript

$(function(){
	$('a[rel="external"]').attr('target','_blank');
});

Easy isn’t it?

You actually need to either put that in a script of his own or at the bottom of you webpages. $(function(){ … }); is actually the short document.ready call in jQuery. Once the document is ready, it’ll traverse through each link and add the attribute target=”_blank” to them. This way the W3C validator doesn’t see them and you page still validates.

Working markup

Here’s a working example with jQuery loaded.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<script src="http://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
			google.load("jquery", "1.3.2");
		</script>

		<script type="text/javascript" charset="utf-8">
			$(function(){
				$('a[rel="external"]').attr('target','_blank');
			});
		</script>
	</head>
	<body>
		<a href="http://google.com" rel="external">Google!</a>
		<a href="http://no-margin-for-errors.com" rel="external">My site!</a>
	</body>
</html>

Your opinion?

What do you think about this technique? I personally stopped caring about my pages not validating when I use target=”_blank”, but I know some people really want to see their page validates whatever the price.

December 3rd 2009

I’ve just released an updated version of prettySociable. It consists on a bug fix where the “drag to share” container wouldn’t be position properly in the case the shared element has a border and/or padding.

I also added a little animation to the label, just to say it’s not only a bug fix push

If you never experienced the bug yourself and don’t care about the label animation, this update is not necessary.

The updated files can be found on the project page.

If you have any problem with prettySociable, a request, or just want to say thank you, check out the dedicated forums. They are quite empty right now, come on, go ahead!

November 28th 2009

I’ve just launched my new website design. I want to say a big thank you to my friend Marie-Anne (http://turkoise.ca/) who took the shitty design I tried to make and made it pretty.

I completely change the way I display the information on the website and my plugins are now an integral part of the website instead of looking like another website.

I’ve been working on it for the past 3 weeks so that explains the lack of updates on the plugins. Don’t worry I’ll get working on them as soon as I feel like my website is solid enough.

I finally made prettySociable the official sharing tool on the website. Just hover the post thumbnail and you’ll be able to share it in all the main social websites. Head over prettySociable projet page if you want to use it!

Since I redid pretty much everything, you might see some bugs/glitch here and there, feel free to report them!

How do you guys like it?