Tag Archives: HTML5

Very cool .Net, Javascript, Json and CSS libraries

Recently I’ve been using and reading about the following interesting libraries for .Net, Javascript, Json and CSS. There are tons of those these days out there. But this will be a list of ones I value most.

  1. OpenWebKitSharphttp://code.google.com/p/open-webkit-sharp/ – check this too – http://stackoverflow.com/questions/790542/replacing-net-webbrowser-control-with-a-better-browser-like-chrome/10097480#10097480
  2. JsonFx.Net – great library to work with Json in .Net – https://github.com/jsonfx/jsonfx
  3. microjs.com – dictionary of js libraries
  4. sugarjs – extends native objects with helpful methods – sugarjs.com
  5. http://emberjs.com/ – another databinding library, looks comprehensive, but I am sold on knockoutjs, I’ve looked at half a dozen binding libs, and to me knockout trumps everything else, just saying…
  6. fully functional, rich datagrids on the client side – http://datatables.net/
  7. do anything with lists – http://listjs.com/
  8. mediatizr – Responsive design support for older browsers – https://github.com/pyrsmk/mediatizr
  9. stroll.js – awesome looking css3 scroll effects – http://lab.hakim.se/scroll-effects/
  10. Superfast client side templating – HandleBarsJS
  11. Rich Data for Javascript apps – perfect for SPA (Single Page App)s that deal with Server side data – BreezeJS
  12. SPA template and client side app library – Single Page Apps done right – DurandalJS

Simple and basic CSS3 properties that change everything

By now the world has pretty much agreed upon the future of HTML5 and CSS3 – This is how new apps will be built, for the web and for multitude of other devices. There is no question native experience on a platform serves the best for the user, slowly but gradually apps are moving to the HTML5 model, primary examples being Facebook app, Netflix, USA Today, Financial times and several business/finance related apps.

CSS3 is awesome, it’s like magic. It suddenly makes your web app look cooler and less stressful. The biggest improvements over previous versions is the support for,

  1. Rounded Corners
  2. Box Shadows
  3. Text Shadows
  4. Gradients

Of course all the above are visible to the user only when they are viewing your app in a browser that supports these CSS3 properties. To lookup which properties are supported in which browser, take a quick CSS3 test.

I’ve been looking to refine the usage of these properties to make them look the best I can and come up with ideal values.

Here’s my current swatch for these properties.

  1. Rounded Corners – this is simple – at 10px border radius it looks like perfection, not more not less.
                -webkit-border-radius: 10px;
                -moz-border-radius: 10px;
                border-radius: 10px;
    
  2. Box Shadows – this is a little hard to get to, but with #999 a nice gray slightly blurred shadow, it seems close to perfect.
                -webkit-box-shadow: 3px 3px 10px 0px #999;
                -moz-box-shadow: 3px 3px 10px 0px #999;
                box-shadow: 3px 3px 10px 0px #999;
    
  3. Text Shadows – this is the trickiest part – because there’s more shadow real estate going on, and it’s harder if you have dark text on light color. This also depends on the background color surrounding the text, so adjust the colors according to your underlying theme.
    // light color text needs,
                -webkit-text-shadow: 0 2px 5px #333;
                -moz-text-shadow: 0 2px 5px #333;
                text-shadow: 0 2px 5px #333;
    // dark color text needs,
                color: #111;
                -webkit-text-shadow: 0 2px 5px #999;
                -moz-text-shadow: 0 2px 5px #999;
                text-shadow: 0 2px 5px #999;
    
  4. Gradients – I avoid them as much as I can, but when I need to I use saturated colors to compliment the darker one. Here’s an example of a glossy CSS3 icon using gradients.
    div.appIconCss
            {
                width: 48px;
                height: 48px;
                margin: 20px auto 0 auto;
                padding:5px;
                font-size: 2.3em;
                color: #ffffff;  
                -webkit-text-shadow: 2px 2px 5px #333;
                -moz-text-shadow: 2px 2px 5px #333;
                text-shadow: 2px 2px 5px #333;                   
                -webkit-border-radius: 10px 10px 10px;
                -moz-border-radius: 10px 10px 10px;
                background: -webkit-gradient(radial, 28.5 -47, 0, 28.5 0, 700,
    		        from(rgba(255,255,255,1)), to(rgba(255,255,255,0)),
    		        color-stop(10%, rgba(255,255,255,0.2)),
    		        color-stop(10.5%, rgba(140,140,140,0.2)),
    		        color-stop(13%, rgba(140,140,140,0)),
    		        color-stop(13.7%, rgba(255,255,255,0)),
    		        color-stop(17%, rgba(255,255,255,1))) #2E79AB;
                background: -moz-radial-gradient(28.5px -47px 45deg, circle farthest-side,
    		        rgba(255,255,255,1) 0%,
    		        rgba(255,255,255,0.2) 72%,
    		        rgba(140,140,140,0.3) 74.5%,
    		        rgba(140,140,140,0) 85%,
    		        rgba(255,255,255,0) 95%,
    		        rgba(255,255,255,1) 160%);
            }