Use your own Weinre server with Adobe Shadow – Step by step

Now that Adobe has released version 4 of Shadow they have included a very nice feature of adding or using your own Weinre debug server with Shadow. What it does is that it fastens up the connection time and reduces the wait time when you are using the default Weinre debug server that Adobe has hosted on their servers. So if you have a local instance of the Weinre server running in your computer, you can use that as a debug server for Adobe Shadow instead of using the remote debug server hosted by Adobe at http://debug.shadow.adobe.com:8080/. So let’s see how to do it.

First of all you will need to have the Weinre server set up in your computer. For that you will need the weinre jar file and Java installed in your computer. I have a full detailed tutorial on setting up and using Weinre in one of my earlier post. So please have a look at it and set up the server. You can check out the “Configuring and running the Weinre debug server” section in the post. Assuming that you have the server set it up on your computer, then you need to start it. You can check my previous post for that too. Its all there.

Then you can verify if the server has started. Open your browser and navigate to http://<yourip&gt;:port where <yourip> is your machine’s ip address and port is the port number where the Weinre debug server listens to. You can find out the port and the details from the command prompt after you have run the server. The screenshot below shows my instance,

CSS3 Coverflow animation for iOS – Adding Touch gestures

Here’s a sneak peak at the touch version of the Coverflow animation. The app is fully touch enabled, you can swipe across the screen to move the images or tap on any image individually to move it. The app works fine in iPhones, iPod touch and iPad’s. Have not tested it in Android 4.0 or greater. Since iOS browsers supports CSS3 3D transformations so it runs very smooth. In Androids < 4.0  it gives a horrible  look n feel.

Here’s the link to the demo. Check in an iOS device (open up in mobile safari),

Link: http://rialab.jbk404.site50.net/coverflowtouch/

and if you are looking for a desktop version of the Coverflow, you can check my previous post.

This is how it looks on an iPod touch

Fluidic Sliding Panels – Auto adjust to any device screen without browser refresh

Let’s talk about creating a sliding panel system that adjusts automatically to any screen size or rather any device resolution. The sliding is implemented using CSS3 Transitions and I have targeted only webkit based browsers. So the app will run on any iOS, Android devices including computer browsers such as Google Chrome and Apple Safari. If you have seen a Sencha Touch app which uses a nested list or the sliding animated panels then you must have noticed that the same app adjusts itself to any screen size as well as the portrait and landscape mode. So our demo will do the same. I have a very simple implementation of auto adjusting sliding panels.

In one of my previous tutorials I talked on the same Sliding Panel concept but the problem was that it did not auto adjust. If you check the demo on Google Chrome you will notice that only first time the app adjusts itself to the window width and height. Now resize Chrome on your computer and check– the app goes haywire isn’t it. Same thing will happen if you check the app in a mobile webkit browser and go from portrait to landscape mode or vice versa. The content you are looking is cut off. You have to refresh Chrome again to adjust the app. Now look at the new demo below,

New Demo link – http://rialab.jbk404.site50.net/fluidicslidingpanels/ (the demo is specifically meant for webkit based browsers)

Open it in the same Google Chrome browser and resize it. You will notice all the contents auto adjusts and even the sliding is now bounded to the new window size. So, by now you must have got an idea of what I am trying to communicate.

Attending the 5th Annual Yahoo Open Hack 2012 – India

Last Saturday I was at the 5th Annual Yahoo Open Hack 2012 that took place at the Sheraton – Bangalore. I was part of the Tech Talks only and attended some very good sessions by Yahoo guys. The sessions mostly included discussions on Yahoo libraries and tools like – YQL, YUI, Boomerang … etc.

One of the sessions I attended was the Web Performance – A look inside Yahoo! by Praveen P.N who is a part of the performance team at Yahoo. He also shared some other tools to measure your website’s performance -

Boomerang - boomerang is a piece of javascript that you add to your web pages, where it measures the performance of your website from your end user’s point of view. It has the ability to send this data (they say it a Beacon data) back to your server for further analysis. With boomerang, you find out exactly how fast your users think your site is.

ySlow -  He presented a commandline option for ySlow and how can you run the ySlow command to monitor a lot of information about your web page. It actually runs on Node.js and needs a HAR file (which is a HTTP Archive file). You can download a HAR file by opening up your web page in webpagetest.org. Note that ySlow is also available as plugin/extensions for all the major browsers and you can run it in your browser as well.

I was aware of some of the techniques/standards to fasten up your website that were recommended by Yahoo and to see them being prioritized by the Yahoo guys themselves made me happy. I did implement some of them in my works. Steve Souders - the former Yahoo performance guru actually laid down around 14 rules for loading websites faster.

Another one I attended was the Picture perfect hacks with flickr API where S.Muthu talked about using Flickr API’s and combining them with YQL.

You can click on the links for the Slide and check them out.