Wednesday, April 28, 2010

My iPhone App

Mobile Web Reserach and Twitter Info

I did some research about how much use each mobile platform gets for browsing the web.

I looked at two different reports, which both basically said the same thing.

In North America, when people use the mobile web they are pretty much on iPhone, Android or Blackberry.

iPhone: 50%-60%
Android: 10%-30%
Blackberry: 5%-10%
The rest: < 5% each

http://metrics.admob.com/2010/01/mobile-browsing-trends-from-quantcast/
http://metrics.admob.com/2010/01/december-2009-mobile-metrics-report/

Just wanted to think about twitter for a minute. Twitter gets huge percentage of its hits from mobile and processing almost a billion SMS messages a month.
http://blog.twitter.com/2010/04/cloudhopping.html

They've also said that their blackberry app gets 8% of their new sign-ups:
http://www.readwriteweb.com/archives/just_the_facts_statistics_from_twitter_chirp.php

And a WAP vs Mobile Web discussion:
http://www.balanceinteractive.com/blog/10/01/mobile-websites-101-wap-vs-css

iPhone animated moving image tutorial

I've been trying to figure out how to animate a sheep across a screen. I have looked a many tutorials. This is by far the most comprehensive tutorial I have seen so far.

http://www.permadi.com/blog/2009/05/iphone-sdk-bouncing-and-rotating-ball-example/

Here is one that lets you move an image with touch:
http://www.roseindia.net/tutorial/iphone/examples/iphone-DoubleImageMoveasd.html

Wednesday, April 21, 2010

.closest does not mean closest!

I found out recently that jQuery's closest() function doesn't find the nearest instance of the selector, but instead find the nearest parent that matches the selector. This is a really important difference and I just thought I would highlight it!

http://api.jquery.com/closest/

Monday, April 19, 2010

Functionally Equivalent


  // not sure if we need $(this).dequeue(), but it works alright
  $(this).before( $(""+msg+"").delay(1000).fadeOut("slow").queue(function() { $(this).remove(); $(this).dequeue(); })  );
  
  // use the built-in callback
  $(this).before( $(""+msg+"").delay(1000).fadeOut("slow", function() { $(this).remove()}) );
 

Awesome Website

http://html5demos.com/

Friday, April 16, 2010

2 Great HTML5 Sites

http://www.htmlstack.com/ - This has a bunch of simple HTML5 /CSS3 experiments, but it's really cool and easy to use.

http://html5gallery.com/ - A gallery of sites that use HTMl5. Will be posting here soon!

Tuesday, April 13, 2010

CSS3 / HTML5 Browser Support

I have been playing with some cool CSS3 and HTML5 technologies. Here are some of the links I have playing with!

http://www.modernizr.com/ - JavaScript Library to Detect Browsers' support. I will be using this to determine if its safe to display the new techniques on my projects.

http://www.standardista.com/hack-for-css3-supporting-browsers - Here's a hack for supporting CSS3 without compromising older browsers.

http://html5test.com/ - Some sort of weird test to see how well your browser support HTML5 and CSS3 rules. I scored 101/160 in Firefox 3.6. Source code is available!

http://net.tutsplus.com/tutorials/html-css-techniques/5-techniques-to-acquaint-you-with-css-3/ - A cool CSS3 tutorial.

http://www.zachstronaut.com/projects/rotate3di/ - Super cool 3d rotate plugin (much better than jQuery Flip if you have the CSS3 support)

Monday, April 12, 2010

jQuery Queue Re-Visited: Why doesn't clearQueue Work?

I have been playing with the jQuery queue functionality.

Primarily I have been using it to create pauses and delays for non-animation functions, which traditionally won't respect the .delay() function in jQuery 1.4.

I created a simple plugin that generates tooltips and want it to delay 1.5 seconds before displaying the tooltip. There are many items that can trigger these tooltips, so I tried something like this inside of the plugin:

$(this).clearQueue.delay(1500).queue(function() {
 // here is the hovered over element
 // $(this). 
 $.get("/tooltip/data", {}, function(data) {
  $(data).appendTo("body").fadeIn('slow');
 });
});

This wasn't working however and I was seeing dozens of $.get requests being executed to my intense frustration.

Finally I figured out the problem. The queue is not universal, it's only applied to the selector. Therefore, if I want to make essentially a universal queue I need to a apply it to an element that only exists once on the page.

I changed my function.

 el = $(this);
 $("body").clearQueue().delay(1500).queue(function() {
  // here's the hovered over element 
  // el.
  $.get("/tooltip/data", {}, function(data) {
   $(data).appendTo("body").fadeIn('slow');
  });
 });

Hurray No more overlapping get requests and ugly tooltip flicker nonsense!

Jamund

Thursday, April 8, 2010

HTML5 Canvas Example

Not sure why the flicker.


Wednesday, April 7, 2010

Write Panels & Widgets With Wordpress

I'm trying to figure out how to use the Word Press Magic Fields plugin and for the time being I cannot figure out what in the world a Write Panel is exactly.

I think a  Write Panel is like a Write Post or Write Page type page. A Write Panel is the ability to essentially create a "page" using a special screen that only requires certain input fields.

So instead of a normal title and content you could create a new "Client" page where it requires only specific fields of "Client Name", "Business Address", and "Logo".

I guess that kind of makes sense, but it's very much not what I want. I think I am looking for Text Widgets instead!!!

http://www.quickonlinetips.com/archives/2007/11/how-to-create-multiple-dynamic-sidebars-for-wordpress-widgets/
http://wordpress.org/extend/plugins/rich-text-widget/ - BREAKS WORD PRESS
http://wordpress.org/extend/plugins/rich-widget/ - Haven't been able to try it yet
http://yoast.com/conditional-wordpress-widgets-with-rich-editable-text/ - custom fix, looks hard.
http://www.findableblogs.com/plugins/wysiwyg-text-widget/ - Does not work in new versions

After that I gave up on using widgets and found my solution. Custom fields and Front End Editor
http://wordpress.org/extend/plugins/custom-field-template/ - This is the one that worked for me!! Allows WYSIWIG editing of custom fields.
http://wordpress.org/extend/plugins/front-end-editor/- Allows In-place WYSIWIG editing. This also worked for me after making the modifications listed here :
http://wordpress.org/extend/plugins/front-end-editor/faq/ - Modification for custom fields

Tuesday, April 6, 2010

[Tue Apr 06 09:11:30 2010] [crit] [client ::1] (13)Permission denied: /Users/jamundf/Sites/website/.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable

Have you ever gotten this error before?


[Tue Apr 06 09:11:30 2010] [crit] [client ::1] (13)Permission denied: /Users/jamundf/Sites/website/.htaccess pcfg_openfile: unable to check htaccess file, ensure it is readable 


I scoured the Internet for a solution and found nothing. I tried chmod 777 on .htaccess and used xattr to remove other flags on the file.

Turns out it was even simpler than that. The parent directory had bad permissions and as such I couldn't read it.

The solution:
chmod 755 website/

Simple!

Jamund!

Friday, April 2, 2010

Awesome reference to remotely hosted content

This awesome resource includes things like jQuery hosted by Google as well as all of the jQuery UI CSS themes! Definitely helpful!

http://cdncatalog.com/

While I'm at it I've read some useful jQuery "most important functions" article lately. They're handy at least for an overview of some useful features. You might even discover something new. Here are a few:

http://net.tutsplus.com/tutorials/javascript-ajax/20-helpful-jquery-methods-you-should-be-using/
http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx
http://haineault.com/blog/84/