visual studio express 2012 for web installation experience or frustration !

I thought I would share my experience in installing visual studio express for web installation. The indication regarding installation was not very good in the beginning of the installation. So I thought I will outline my experience which might be useful for some one!

1. Downloaded the ISO file from Visual Studio 2012 downloads
2. Double clicked on the file in Explorer. It prompted me to  burn   a disk which I did.
3. 9:40 Am: Started installation from disk.
4. Progress bar was stuck-up in installing .net 4.5
5. Thought of canceling, but went and had a coffee
6. 10:17 Am: Progress bar was still stuck, no indication and suddenly finished and prompted for  restart
7. After restart, seemed to be showing progress bar with meaningful indication
8. 10:35 Am Microsoft Visual Studio Express 2012 for web-ENU takes a long time: progress bar struck about 1/3rd
9. 10:40 AM: progress bar moved to 1/2!
   the bottom assembly installation names started changing faster!
10. 10:45AM: Setup Successful !
11. When you open the Visual Studio Express it prompts you to get a key which I did.

My system
gateway NE56R13u
Celeron 1.7 GHz, 64 bit, 4 GB RAM,
Windows 7 ultimate service pack 1

CSS3 transitionend event with cross browser compatability using Javascript

I had 2 animations, the first one would last 10 seconds and the second one had to start from the time the first one ends. After some research I found the following solution:

First animation:

canvas1 =  document.getElementById("myCanvas") ;

canvas1.addEventListener('transitionend',     spin_finished, false);

---Start First animation

Second animation:

function spin_finished() {

       canvas1.removeEventListener('transitionend', spin_finished, false);


         - start second animation


}

The removeEventListener is required to make sure the transitionend event happens only once.

Then I ran into cross browser naming convention problem because each browser calls the transitionend event differently. Then I ran into this elegant solution by NeilJS

// CROSS-BROWSER TRANSITION END EVENT LISTENERS

var transEndEventNames = {


    'WebkitTransition': 'webkitTransitionEnd',


    'MozTransition': 'transitionend',


    'OTransition': 'oTransitionEnd',


    'msTransition': 'MSTransitionEnd',


    'transition': 'transitionend'


},


transEndEventName = transEndEventNames[Modernizr.prefixed('transition')]; // bind event listener to transEndEventName eg:


//

So the revised code looks like this after inserting the previous snippet:

First animation:

canvas1 =  document.getElementById("myCanvas") ;

canvas1.canvas.addEventListener(transEndEventName,
     spin_finished, false);

---Start animation

Second animation:

function spin_finished() {

canvas1.canvas.removeEventListener(transEndEventName, spin_finished, false);

- start second animation


}

Works great on Firefox, Safari, Opera and Chrome!

References:

1. Cross-browser CSS3 transitionend event for event listeners by NeilJS



2. Css3 Transitions Tutorial : Javascript



3. Quick Tip: CSS3 Transition End Event

How to resolve IPhone 3 HTML5 canvas fillText not working

I am writing a HTML5 canvas applications which has some text in it to be written by the fillText command. This worked well in Safari, Firefox, Ipad but would not work in Iphone 3. Then I found the solution in this discussion:

iPhone/iPad HTML5 Canvas fillText problem.

Downloaded  strokeText.js and implemented with success as per instructions given in the downloaded document. It works now in Iphone 3 along with Safari, Firefox, Opera and even IE9!

HTML

<script src="js/strokeText.js" type="text/javascript"></script>

Javascript

set_textRenderContext(context);

         if (check_textRenderContext(context)) {
             context.strokeText(text, text_xoffset, text_yoffset, font_size);
         }

Jquery Mobile gradient background for content

I have given below the HTML snippet and the CSS file I used for adding a gradient to the Content div.

I  used the gradient CSS code from this excellent site:

Ultimate CSS Gradient Generator by ColorZilla.

 

HTML

<div data-role="content"  class="main_div_blue" style="overflow:hidden;"  >  

CSS

.main_div_blue {

background: rgb(208,228,247); /* Old browsers */


background: -moz-linear-gradient(top, rgba(208,228,247,1) 0%, rgba(115,177,231,1) 24%, rgba(10,119,213,1) 50%, rgba(83,159,225,1) 79%, rgba(135,188,234,1) 100%); /* FF3.6+ */


background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(208,228,247,1)), color-stop(24%,rgba(115,177,231,1)), color-stop(50%,rgba(10,119,213,1)), color-stop(79%,rgba(83,159,225,1)), color-stop(100%,rgba(135,188,234,1))); /* Chrome,Safari4+ */


background: -webkit-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Chrome10+,Safari5.1+ */


background: -o-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* Opera 11.10+ */


background: -ms-linear-gradient(top, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* IE10+ */


background: linear-gradient(to bottom, rgba(208,228,247,1) 0%,rgba(115,177,231,1) 24%,rgba(10,119,213,1) 50%,rgba(83,159,225,1) 79%,rgba(135,188,234,1) 100%); /* W3C */


filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0e4f7', endColorstr='#87bcea',GradientType=0 ); /* IE6-9 */


}

jquerymobile dynamically changing button text and multiple buttons in Header

Couple of interesting discussions.

I had a button which had to toggle between Spin Start and   Spin Stop text. When I implemented this in JQuery Mobile after the first press the button and text sizes became smaller. Then I came across this fix given in

 jquerymobile dynamically changing text for button issue.

I did the fix suggested by Hexagonal

$('#svbutton .ui-btn-text').text(currentTimeString); which worked like a charm.

I wanted to have the title, Spin, Info and Settings button in the header. Unfortunately this is not possible as described in this discussion

Adding more buttons to header

So I had to move the Spin button to the Content section.

HTML Javascript IDE for development and Tips for Developing with Visual Studio Express

When I have a web page development project or issue, I try to divide the project into smaller tasks and do experimental web pages to try out new ideas or resolve bugs.

So I needed a development IDE for HTML, Javascript and CSS. Tried Aptana Studio, Microsoft Expression Web 4 and Visual Studio Express, netbeans.

Found Visual Studio 2010 Express Products to be  the best. I have to warn you that I am little bit prejudiced because I am very familiar with Visual Studio because of my C#, .net, Silverlight development experience.

What I like about the IDE is it has some Intellisense, you can collapse divs in HTML . For example if you want to add a reference like the following

<script src="js/triangle_1.js" type="text/javascript"></script>

you can just drag the file from the folder view and drop it in your html file.

I did not want to create a web site for the small files I work with. I already had a few HTML files and associated folders with Javascript and CSS files in a folder with name JQM1. I asked the Visual Studio Express to start a new empty C# web solution and pointed to the JQM1 folder. It said you already have a project, I said yes and the folders showed up.

You can also look at the html pages using the File Web browser option. Since I work a lot with CSS3, I have designated Safari as my default browser and it works fine!

Try it , you may like it. One warning though the installation process took more than an hour and there is a registration process for Visual Studio Express using windows live id, but it is free!

Excellent reference Visual Studio shortcut keys

CSS prefix issue and Modernizr Prefixed

If you are doing any CSS development using Javascript you must be aware of prefixes like -moz-transform, -webkit-transform, -o-transform required by Firefox, Safari and Opera. Safari and Chrome use the same –webkit- prefix.

You can use  Modernizr to simplify the task.

the article Modernizr Prefixed by Andi Smith is a definite read.

In this article Andi explains how you can use Modernizr to simplify your life.

Typical usage:

In HTML page

<script src="js/modernizr.js"></script>

In the Javascript

var car_cont=document.getElementById('carousel_container') ;
    
car_cont.style[Modernizr.prefixed('perspective')]  = '1100px';

This is equivalent to the CSS statement

-webkit-perspective: 1100px;
moz-perspective: 1100px;
-o-perspective: 1100px; ----and so on.

Some more references from W3Schools

1. CSS3 Browser Support Reference
2. CSS Reference
3. example: CSS3 perspective Property
   

CSS 3d Transforms for Safari, Chrome and Firefox

I am now developing a 3d Carousel for use in different browsers. It uses 3d transforms available in Safari, Chrome and Firefox. Unfortunately IE 9 and Opera do not seem to support it.

The following references are excellent resources.

1. Using 2D and 3D Transforms is an excellent place to start
2. CSS3 Transitions, Transforms and Animation Tutorial has excellent tutorial.
3. Intro to CSS 3D transforms has very good step by step approach which explains the fundamentals of transforms and how to implement it with CSS3.
4. Cloud Carousel - A 3d Carousel in Javascript does not use CSS 3d and done in Javascript
5. CSS Infos is an excellent reference site.
6. Ceaser CSS EASING ANIMATION TOOL is worth visiting.
7. CSS3 tools is also worth visiting.
8. Rotating Image Using JQuery has also some introductory information.

JQuery Mobile Interesting Links to get started

If you are looking for a good platform to design applications for Iphone, Ipad, Android and Windows phone, you should definitely consider a browser based approach using JQuery Mobile. Jquery Mobile has very good user interface and page transition mechanisms.

Jquery Mobile 1.2. 0 Alpha has been released.

Jquery Mobile Docs has excellent documentation

Quick start guide is a good place to start.

Eric Sarrion has an excellent  The jQuery Mobile tutorial which has lot of useful information about how to construct basic pages, buttons, sliders etc.

10 handy jQuery mobile tips and snippets to get you started has excellent tips.

You can also look at 50 jQuery Mobile Development Tips.

Moved To RTP

Moved to North Carolina, RTP area. Have been busy with the move and other projects, hence could not write the blog. Now working on HTML5 and JQuery Mobile. Stay tuned for new blogs.

Android emulator installing Google APIs

Tried installing google APIs with the Android SDK manager  and got permission denied message.

Run the Android SDK manager by right clicking on the context menu and it works.

reference

Installing Android SDK packages