Gay Dublin Guide

Hi everyone, here's a nice app for those traveling to Dublin.

 

 

You can see more details in this video shot.

 



You can downloaded at http://appshopper.com/travel/gay-dublin-guide.

Phonograph - New technology meets the old

Shot with Nikon D7000

Rolling links - CSS3 + JS example

"Rolling link" is a great example of CSS and JS combination. I found it the other day at this great site http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/ full of flat-ui design inspirations.

This tutorial shows you how to create catchy "rolling links".

 

What we need

1. Notepad++ (or any other html editor of your choice)
2. jQuery  (you can download jQuery file from  http://jquery.com/download/ or you can add this markup into head section of your html file <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>

 

Create Html file

We'll start with the simple html file. Let's save it as index.html

<!DOCTYPE html>
<html>
   <head>
       <title>Fancy Rolling Link</title>
   </head>
   <body>
   </body>
</html>

Add div box into body section. We will apply CSS3 and JavaScript to everything inside the <a> tags, in our case it'll be "Flat design".

<div>
    <article>
       We love <a href="#" >Flat design </a>.
    </article>
</div>

Styling rolling links

You can create a CSS file or else you can include CSS into head section of he HTML file. We'll add this CSS markup to our html file in this tutorial.  

 <style>
  a {
   color: #9b59b6;
   font-weight: bold;
   text-decoration: none;
   }
  .roll-link {
   display: inline-block;
   overflow: hidden;
   vertical-align: top;
   -webkit-perspective: 600px;
      -moz-perspective: 600px;
       -ms-perspective: 600px;
           perspective: 600px;
   -webkit-perspective-origin: 50% 50%;
      -moz-perspective-origin: 50% 50%;
       -ms-perspective-origin: 50% 50%;
           perspective-origin: 50% 50%;
   }
   .roll-link:hover span {
    background: #9b59b6;
    -webkit-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
       -moz-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
        -ms-transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
            transform: translate3d( 0px, 0px, -30px ) rotateX( 90deg );
    }
   .roll-link span {
    display: block;
    padding: 0 2px;
    position: relative;
    -webkit-transition: all 400ms ease;
       -moz-transition: all 400ms ease;
        -ms-transition: all 400ms ease;
            transition: all 400ms ease;
    -webkit-transform-origin: 50% 0%;
       -moz-transform-origin: 50% 0%;
     -ms-transform-origin: 50% 0%;
      transform-origin: 50% 0%;
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
        -ms-transform-style: preserve-3d;
            transform-style: preserve-3d;
    }
    .roll-link span:after {
     background: #9b59b6;
     color: #fff;
     content: attr(data-title);
     display: block; 
     left: 0;
     padding: 0 2px;
     position: absolute;
     top: 0; 
     -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
         -ms-transform-origin: 50% 0%;
             transform-origin: 50% 0%;
     -webkit-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
        -moz-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
         -ms-transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
             transform: translate3d( 0px, 105%, 0px ) rotateX( -90deg );
     }  </style>

JavaScript

This simple JS function is executed immediately after the DOM has been fully loaded. It finds all <a> tags, adds class="roll-link" to it and encloses text inside <a> tag with <span> tags. 


<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"> </script>
<script>
  jQuery(document).ready(function(){
   initFancyRollingLinks();
  });

  function initFancyRollingLinks(){
   jQuery('a').each(function(i,e){
    var link = jQuery(e);
    link.addClass('roll-link');
    link.html('<span data-title="'+ link.text() +'">' + link.html() + '</span>');
   });
  };
 </script>

Demo

Demo to this tutorial is not available at the moment. But you can see working version on this site http://www.webdesignerdepot.com/2013/09/the-ultimate-guide-to-flat-design/

Chuck Berry - Come On

...little bit of rock'n roll

Login & Logout using Facebook C# SDK and asp.net mvc3

If you're having problems with Open Graph follow Vaibhav's tutorial. It really worth it.

Here's the link: http://shahvaibhav.com/login-logout-using-facebook-account-using-facebook-c-sdk-and-asp-net-mvc3/

Mobile Website vs Hybrid App comparison

Mobile Website  App

 Strengths

•  cheapest / easiest / fastest to develop
•  works across all platforms
•  updates are immediately available to end users
•  can work offline

 Weaknesses

•  cannot use device's native hardware features
•  slower that native apps 

What can we access?

•  geolocation api (GPS)
•  device orientation (accelerometer)
•  battery
•  web audio/video (NOT supported by majority of older browsers ) 

Hybrid App

Strengths

•  code once and deploy the app to multiple platforms
•  can work offline
•  content can be updated easily

 Weaknesses

•   partial access to the device's native hardware features
•   major changes to the app will require the user to update the app

 What can we access? (using PhoneGap for example)

•  accelerometer
•  camera
•  capture (media files using device's media capture apps)
•  compass
•  connection
•  contacts (devices contact database)
•  device (device specific info)
•  events
•  geolocation
•  globalization
•  media (record and play back audio files)
•  notification
•  splashscreen
•  storage  

How to easily detect and redirect android and iPhone

Simple script for Android detection.

<script type="text/javascript">

         if ( (navigator.userAgent.indexOf('Android') != -1) ) {
document.location = "http://www.your_url.com";
}

</script>


Lets specify Android and iPhone version.

<script type="text/javascript">
       var ua = navigator.userAgent;
       if (ua.indexOf("Android") >= 0) {
           var androidversion = parseFloat(ua.slice(ua.indexOf("Android") + 8));
           if (androidversion <= 2.3) {
               window.location = 'http:/www.your_url.com';
           }
       } if (/(iPhone)/i.test(navigator.userAgent)) {
           if (/OS [1-4]_\d(_\d)? like Mac OS X/i.test(navigator.userAgent)) {
               // iOS 1-4 so Do Something            
               window.location = 'http://www.your_url.com';
           }
       }
</script>