jQuery Mobile 1.1 Final Released
For those of you using the RC1 or RC2 candidates of jQuery Mobile, the wait is over. jQuery Mobile 1.1 Final was released last Friday (13th). For those of you wailing on a bout superstition, know that yes, this will break the themes you generated with ThemeRoller. Now for the good news, you can import your old theme into the updated ThemeRoller and convert it to work with jQM 1.1.
Other improvements on this release are "true" fixed-toolbars. This is a wonderful addition as instead of having them disappear and then reappear (in jumpy fashion on Android), they will stick now. Page transitions also have gone through a bit of a lift. In RC1.1 the default slide transition was replaced with a fade transition. It was cool, it worked, and then when I used it in a PhoneGap application, it was way to laggy to be useful. I wasn't the only one who ran into issues similar to this one, and the jQM team put in some serious overtime working on the issue. I'll let you read about all of the new changes over at the official blog post.
For those of you who want to jump in and get started here are the CDN links:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" /> <script src="http://code.jquery.com/jquery-1.6.4.min.js"></script> <script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
For those who prefer a local copy to work with, here is a link to the download page.
Print This Post
Easiest URLEncoding Method Ever
Why leave your browser?
I've been doing some ridiculously complicated parameter passing between a server script and a javascript plugin that ahs finally required me to encode the values into a URLEncoded fashion. To do this I would normally crack open my Adobe Air app that I use for encoding and decoding form data, but I just realized that there was a little voice in my head telling that what I was doing it wasn't necessarily wrong, but just over-complicated.
Don't get me wrong, the Air App I have is great, and yes, I could build a utility in PHP-and-friends that would accomplish the same thing. But stay with me, this is about the easiest, most readily available method ever, not the most involved.
Please note that the following instructions contain a bit of humor aimed at Internet Explorer users. We are all aware of the limitations of the browser, and the fact that it is slowly getting better. So remember, it's all in good fun 
. Here we go.
Chrome/Safari users:
- Open Web Inspector (ctrl-shift-i/option-command-i)
- Open the console
- Type: escape("The values you want escaped go here, seriously");
- Press Enter
- Copy your URLEncoded data out of the console
Firefox/Aurora users:
- Get Firebug
- Open Firebug (F12)
- Open the Console tab
- Type: escape("The values you want escaped go here, throw in some extra characters, like I'm awesome searching http://www.google.com/");
- Press Enter
- Copy your URLEncoded data out of the console
Internet Explorer Users:
- Download Chrome or Firefox
- Follow the steps above for the browser you downloaded.
- Remember that IT blocked you from using or downloading a modern browser, so give up and open IE anyway
- Press F12 and pray that you have the less-than-stellar-copy of Firebug/Web Inspector available
- Rejoice because it is installed, Click on the Console tab
- Type: escape("Wow, this totally works in IE, and I'm pleasantly surprised by that fact");
- Press Enter
- Copy the URLEncoded data out of the console
Unescaping or URLDecoding
Isn't that awesome? Now that you can encode the data, you probably want to decode it right? Follow the same method as above, only use the following function:
unescape("URLEncoded%20data%20goes%20here");
That's it, easy, built-in URLEncoding and URLDecoding from the browser that you are already working in and developing with. Now go out there and save the world from too many slashes and quotes getting in the way!
Print This Post
LESS is more
LESS - The dynamic Stylesheet lanugage
I've seen it, I've ignored it, and now it's time to embrace and post about it. If you haven't already given it the time of day, it's time to crawl out from under the rock and start learning LESS.
LESS bills itself as "The Dynamic Stylesheet language", and even for a self-billing, it is dead-on. LESS allows the use of variables, mixins, a nested rule system, and the use of functions within your CSS. All of this is processed through some black JavaScript magic, so you don't need to worry about possible performance kills in your vanilla stylesheet.
LESS isn't just for client-side operations either, it can be integrated with both Node.js and Rhino.
Who is using LESS? Fair enough question, many sites are using LESS right now but perhaps you should check out the Twitter Bootstrap that is built using LESS.
I could give you quite a few examples here to really get you salivating, but I find that when someone has already done the work, I may as well have you go there. So to get your hands dirty and start using LESS, just hit up the official site.
Print This Post
New Year, New Post
I'd like to say that I have an excuse for not posting in months, and I do . Unfortunately, I can't announce it for another two months, but it's fairly huge, and something that anyone in mobile development will be more than excited for.
Now that you are excited and can't wait for me to spill the beans, I will distract you with links to some incredibly cool things that you should know about a la LinkPost style (yeah, I'm a little cruel sometimes).
Google I/O 2012 is in JUNE and it's THREE DAYS! June 27-29th 2012 - Check the official blog post for details.
Using CSS3 to animate web banners (annoying yes, but the geek factor is off the grid!... yeah, bad and wicked late tron joke) - Check out this page and learn about it.
Knifeparty is ridiculously awesome if you likes the dub(ub-wub-wuuuuub-wub-ub-ubuwub)step! They released a free EP called 100% No Modern Talking which can be yours by visiting their website and giving them an email to spam (that requires no validation...). There is some language on "Internet Friends", but to each their own. In case you wondered, Knifeparty is two members of the freakishly awesome band pendulum, so you know they are good.
Derezzed on floppy drives... Man why did we kill these things? analog tech has such a good sound!
A post from WebResourcesDepot on the CSS3 presentation machine named impress.js, I love the trade-shows lately that give their presentations inside of a browser. Just makes powerpoint look as dated as it is. Amazing work, check it out.
Now that I work on a mac I have learned that life without XAMPP sucks. MAMP is workable, but I have an aversion to forking out money to access the apache server that is built into OSX. Luckily there is a much cooler alternative that isn't nagware and that will help you auto-install tons of webapps (including joomla and wordpress). Check out AMPPS, easy, free, and works on linux, mac, and windows. Good News! @blender has pointed out in the comments that XAMPP is totally mac ready and available, check it out and live life happy again!
I hate to glom onto other talent, but another post from webresourcesdepot is right up there on the awesome charts. Everything you need for node.js (my new favorite scripty server language). Go to his node.js post, revel in his links, built something useless, then something cool, and then something useful
That's all for now, but there are plenty more. Over at CSS-Tricks Chris has started a new podcast called ShopTalk, and they have already interviewed the Johnathon Snook (if you don't know of Mr. Snooks work, you need to leave right now and Google it. I don't even mind, I give you my permission, go, go now and do it!). Head over to the podcast and listen to it, remember they take questions and answer them so if you are stumped, give it a go and see if your question can get solved by some truly great minds on the web.
Lastly, HAPPY BIRTHDAY/ANNIVERSARY E-COM DEVBLOG! That's right, this makes year number 4 of me and my crew wrecking the internet and putting it back together the way it was meant to be with tips, links, tutorials, and the occasional waste of time. It's been a great four years and I hope that we can keep the magic going for another four. Hang out because I have a feeling that this year is going to be one of the best years the internet has ever seen. And don't worry about that Mayan 2012 thing, I heard it straight from the aliens that abducted Elvis to make him their ruler, it's a total hoax 
Print This Post
Awesome IE Tool
I had to get another post in before the 6 month mark. And it just so happens I ran into this awesome tool that is quite handy in terms of testing code in multiple versions of Internet Explorer. In the past I've always used the IEDeveloper toolbar (or Spoons browser sandbox before M$ got all copyrighty on them and made them remove it) and it's fairly adequate in allowing me to test the various versions of IE. However there have been times It's missed the mark or in one case wouldn't work at all with the portal I was trying to log into (IE6) So when I ran into this little beauty I was instantly captivated (as captivated as one can be when doing anything that has anything to do with IE). Behold the Internet Explorer Collection.
Maybe I'm just behind the times but this is amazing. Multiple standalone installs of different versions of IE. You can even install really really old versions like 1.x (I didn't but you can). I installed IE6, IE7 and IE8, I don't run windows 7 either at home or work so I can't install IE9.
To be fair I'm still in the test drive phase and haven't removed my IETester install yet but so far it's looking good. The only complaint I have is IE Developer Toolbar is only available in IE8, and while Developer Toolbar is not exactly firebug (but, it has gotten better with IE8) it's about all you have when troubleshooting an IE specific issue.
Before downloading read the comments on the download site. I mention it because they seem to be about 50/50 good vs bad. The software works for me so far on Windows XP Pro SP3, if anything changes I'll update this post.
Print This Post
A few grid systems to keep an eye on
I've been attempting to look into the future and what I've found is that you can either code static and pray that your code fits the spec of your end-user, or you can attempt to throw media-queries at everything and hope you had enough to make the design stick.
So where does that leave grids? Grids let us throw a design up and make it look pretty and proportioned. That isn't to say that your design will still look fantastic on someone's imported-Nokia as it did on your cinema display when you pounded the design out, but using a good grid system can help ease the pain of making things a little more responsive and a lot less "borked".
Here are three grid systems worth taking a look at:
- Simple Grid - Simple grid takes after it's namesake, it is a system focused on simplicity and keeping everything elegantly small. While I haven't created a project with this yet, I'm feeling like my weekend is going to be spent playing with this.
- Golden Grid - Ever heard of the Golden Ratio? This grid system is based on that principle and claims to handle almost any screen (from 240px to 2560px wide).
- 1140px CSS Grid System (1140gs) - The ever popular 1140px grid system. Since 1140px is the new hotness for design, we are finally starting to break the shackles of 1024x768 users. However that isn't entirely true, we still have to plan ahead for mobile devices. This is what makes 1140gs so brilliant. It handles the media-queries for you and can handle switching your design out for a much smaller screen. I've used this one on a few projects and while it does take a design shift the results have been worth it.
No that's not anywhere near the entire list of grid systems, but they are the ones that I find to be the most exciting (this month). And I've even used the 1140gs on a few projects (that were met with success). This list should at least get you started. If you do anything cool with any of these (or even some other grid system), drop a link in the comments so we can all see your handiwork.
Print This Post
CronMaker, your cron problems are over
I found a new tool and I am on blog posting kick so I thought I would share with everyone. The tool is http://www.cronmaker.com/ and it helps with making cron expressions for use with quartz scheduling. Now don't get me wrong the quartz is well documented and it is easy to build the expressions, but I always have to go look it up anyway. This saves me a step. Put in when you want it to run and bam! there is your expression. Don't forget to hit with your spice weasel.
Print This Post
Initializr a quick Html 5 site template
I was playing with eclipse orion today and it suggested using Initializr to start a page. Although I still don't have orion working I want to comment on Initializer.
It's awesome. It's easy. It's great if you just want something fast. Check it out. http://initializr.com/
Print This Post
Google I/O 2011
This post is mostly an announcement, but I thought I'd take a minute and share with everyone that Google is doing something great this year. Rather just have a few sessions recorded and a few slides to share a week or two after the Google I/O show this year, they will be offering some of the sessions live. Click the badge below to learn more, and on May 10th and 11th use it to watch the show!
This means you get to watch the show even if you were not able to come to the event. To see what sessions will streamed live check out the session schedule and look for the LIVESTREAMED text and video icon. Some entertainment will also be streamed (Jane's Addiction performance anyone?)
If you are going to the show and want to meet up, feel free to find me . During lunch there is a high probability that I will be in the developers sandbox at the iFit Live booth.
Print This Post
Video Playback on Motorola Xoom
I've had a Motorola Xoom for about a month now, and I have to tell you I love it... for the most part. There is one major flaw with it, the video playback is a travesty. Normally when you grab an android device you figure that you can throw anything you want at it and it will playback (it did on my HTC Hero, and it does on my Samsung Epic).
(continue reading after the break)
Print This Post