Creating .Net Membership Services

I'm tired of looking up the specific directions for setting up Membership Services.  So, these are the quick steps for setting up the MSFT services that give you membership.

1. Setup the db with the Aspnet_regsql.exe tool.  Use the one that is in the correct .Net version.  For instance: C:\WINDOWS\Microsoft.NET\Framework\4.0\aspnet_regsql.exe

There is command line version with options here. An explanation of the Roles and Views that are setup is here.

2. Now for a website, add this to the web.config file within the system.web:

    <authentication mode="Forms" >
      <forms loginUrl="logincs.aspx"
      name=".ASPXFORMSAUTH" />
    </authentication>
    <authorization>
      <deny users="?" />
         <allow roles="Administrators" />
         <deny users="*" />
    </authorization>
    <membership defaultProvider="SqlProvider" userIsOnlineTimeWindow="15">
      <providers>
        <add 
          name="SqlProvider" 
          type="System.Web.Security.SqlMembershipProvider" 
          connectionStringName="SqlServices"
          enablePasswordRetrieval="false"
          enablePasswordReset="false"
          requiresQuestionAndAnswer="false" 
          passwordFormat="Hashed" 
          applicationName="SampleApplication" />
      </providers>
    </membership>
    <roleManager defaultProvider="SqlProvider" 
      enabled="true"
      cacheRolesInCookie="true"
      cookieName=".ASPROLES"
      cookieTimeout="30"
      cookiePath="/"
      cookieRequireSSL="true"
      cookieSlidingExpiration="true"
      cookieProtection="All" >
      <providers>
        <add
          name="SqlProvider"
          type="System.Web.Security.SqlRoleProvider"
          connectionStringName="SqlServices" 
          applicationName="SampleApplication" />
      </providers>
    </roleManager>

3. Finally, just configure the web.config items to fit your need. You can omit the <authorization> area if you don't want it to automatically go to the login page. That should be in a later directory.

Running a Client-Side Javascript Method with an AJAX UpdatePanel

Have you ever needed to run a client-side javascript method when an AJAX UpdatePanel makes an asynchronous postback?  I needed to do that recently.  I was creating a ASP.Net control for a customer that  provided a cool chat feature to their customer support.

When the control performed an async post back, I need a client-side method to be fired as soon as it executed successfully.  Microsoft provides a pretty easy way to do it, but you need to know the trick.  Here it is:

1:  <script type="text/javascript">  
2:      function MethodToFire()  
3:      {  
4:        /* Do something on client side */  
5:      }  
6:       /* Sys function to enable cient side requests */  
7:      Sys.Application.add_init(appl_init);  
8:       /* The actual function to initialize it. Note the "add_endRequest" */  
9:      function appl_init() {  
10:        var pgRegMgr = Sys.WebForms.PageRequestManager.getInstance();  
11:        pgRegMgr.add_endRequest(MethodToFire);  
12:      }  
13:  </script>  
14:  <asp:UpdatePanel Id="UpdatePanel1" runat="server">  
15:        <Triggers>  
16:          <asp:AsyncPostBackTrigger ControlId="Timer1" />  
17:        </Triggers>  
18:       <ContentTemplate>  
19:            <!-- Some content in here! -->  
20:       </ContentTemplate>  
21:  </asp:UpdatePanel>   

With this, the "MethodToFire" function (line 11) will fire after the Async method returns. Want to fire it before the Async method executes? Use the pgRegMgr.add_beginRequest method instead.

Happy developing!

Cross-Platform Use of CSS Pseudo Elements

I recently worked on a website that needed bubble quotes in HTML.  I found an exhastive write-up about this in Nicolas Galapher's great site on CSS tricks. With a little help from Nicolas and the CSS pseudo elements, I was able to get bubble quotes working perfectly.

Check out the bubble below - no graphics were used and it is cross-platform compatible.

This version comes out of Opera for Windows.  However, it works well in Safari, Firefox and IE 9.  The one exception is that the bubble in ie does not have the graduated fill.  It is just straight blue in color.

Here is the code (thanks again to Nic) that worked for me:

HTML

         <blockquote class="bubble-left">  
                       <p>"Knowledge is knowing a tomato is a fruit; Wisdom is not putting it in a fruit salad."</p>  
         </blockquote>  
         <p>Brian Gerald O’Driscoll</p>  

CSS

 .bubble-right  
 {  
      position: relative;  
      padding: 15px 30px;  
      margin: 20px 20px 20px 20px;  
      color:#fff;   
      background:#075698;  
      /* css3 */  
      background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698));  
      background:-moz-linear-gradient(#2e88c4, #075698);  
      background:-o-linear-gradient(#2e88c4, #075698);  
      background:linear-gradient(#2e88c4, #075698);  
      -webkit-border-top-left-radius: 25px 50px;  
      -webkit-border-top-right-radius: 25px 50px;  
      -webkit-border-bottom-right-radius: 25px 50px;  
      -webkit-border-bottom-left-radius: 25px 50px;  
      -moz-border-radius: 25px / 50px;  
      border-radius: 25px / 50px;  
 }  
 .bubble-right p  
 {  
   color: White;  
 }  

 .bubble-right + p {margin:10px 180px 2em 0; text-align:right; font-style:italic;}  
 /* creates the larger triangle */  
 .bubble-right:before {  
      content:"";  
      position:absolute;  
      bottom:-30px;  
      right:80px;  
      border-width:0 0 30px 50px;  
      border-style:solid;  
      border-color:transparent #075698;  
   /* reduce the damage in FF3.0 */  
   display:block;   
   width:0;  
 }  
 /* creates the smaller triangle */  
 .bubble-right:after {  
      content:"";  
      position:absolute;  
      bottom:-30px;  
      right:110px;   
      border-width:0 0 30px 20px;  
      border-style:solid;  
      border-color:transparent #fff;  
   /* reduce the damage in FF3.0 */  
   display:block;   
   width:0;  
 }  

I have to give Nicolas Galapher a lot of credit for his investigation and write up into how to use CSS pseudo elements.  I also have to give the W3C Committee credit for their fore site on coming up with this capability.

Here is a quick list of the Pseudo Elements defined by W3C.

Selector	Example	Example description
:link	a:link	Selects all unvisited links
:visited	a:visited	Selects all visited links
:active	a:active	Selects the active link
:hover	a:hover	Selects links on mouse over
:focus	input:focus	Selects the input element which has focus
:first-letter	p:first-letter	Selects the first letter of every <p> element
:first-line	p:first-line	Selects the first line of every <p> element
:first-child	p:first-child	Selects every <p> elements that is the first child of its parent
:before	p:before	Insert content before every <p> element
:after	p:after	Insert content after every <p> element
:lang(language)	p:lang(it)	Selects every <p> element with a lang attribute value starting with "it"

Fresh Look at Customer Needs

I had the great fortune of meeting an influential business leader in our community named Joseph Stein.  Joe wrote a book called Bottom-Up Top-Down Innovation that includes a lot of interesting ideas for bringing innovation into your daily life -- one of which I'm writing today.

Joe writes:

"Customers buy products to help get a job done....  we usually look at it from the point of what a customer needs.  That may sound like the same thing... but it is different.  For example, if you have a plumbing leak, the plumber's perspective is that the customer needs to have the leak fixed.  But if you look at it from a "jobs to be done" perspective, the homeowner wants to have a plumbing system that delivers consistent, worry-free hot and cold water.  So if the plumber thinks of what job the customer needs to get done, he or she might suggest new products that help the homeowner (e.g., annual pipe check, low-cost insurance, etc.)

This idea of taking a fresh look at my customer's needs has really helped me over the past few months.  In several cases, customers that I'm working with have gotten flashes of brilliance from that little concept of looking at their customers needs from a fresh perspective.  They had always looked at their products as filling a niche need.  They weren't seeing it from the customers perspective with their potential risks and reward.  When they did, it brought out a whole new product category that has never been considered.

Have you ever had a case where making this perspective change brought innovation to your company? Let me know!

iPhone Animation Blocks

The demo in action!

Animating with blocks of code is now one of the easiest things to do in iPhone programming. You must wrap your head around the code style (sort of like using Lambda expressions in C#.) Once you do, it's a snap to add really cool animations to your apps.

Download Sample App

I've attached a quick sample app that shows how to animate an image. The example expands and fades-out an image when you click on it. The magic is in the following code:

      // Create animation with two animation functions: alpha and image size  
   [UIView animateWithDuration:1.0  
                                delay: 0.0  
                               options: UIViewAnimationOptionCurveEaseIn  
                           animations:^{  
                                imgMain.alpha = 0.0;  
                                imgMain.bounds = newSize;  
                           }  
                           completion:^(BOOL finished){  
                                // Now fade it back in to the right size  
                                [UIView animateWithDuration:1.0  
                                                          delay: 0.0  
                                                         options:UIViewAnimationOptionCurveEaseOut  
                                                    animations:^{  
                                                         imgMain.alpha = 1.0;  
                                                         imgMain.bounds = origSize;  
                                                    }  
                                                    completion:nil];  
                           }];  

Note how we can add any number of animations to the block and they all will be executed at the same time. We also can specify what happens when each animation completes.  It is a lot like using the CAAnimationGroup, but in my opinion, much easier.