Xamarin is not a good candidate for phone apps

/in /by

A few days ago an acquaintance pass me an article about Xamarin as the new best candidate for phone apps. Sorry, but I’ve never laughed more in my life. He compered it with Phonegap (Cordova) telling me that it’s more powerfull… but the real thing is that it’s not and I’m going to tell you just some couple of good reasons.

  1. Xamarin only supports iOS, Android and Windows phone plataforms whereas Cordova supports iOs, Android, Windows, Amazon Fire OS, Backberry, Ubuntu, Firefox OS, LG webOS, etc.
  2. You have to pay to use Xamarin and it’s not Opensource whereas Cordova is Opensource and free.
  3. Xamarin doesn’t support Web Standards whereas Cordova supports Web Standards.
  4. Both have access to the device API.
  5. Xamarin uses it’s own native interface whereas Cordova uses Web UI which is the most widespread.
  6. Neither of both have a full native performance for all the platforms.
  7. Xamarin uses C# whereas Cordova uses HTML5, CSS and JavaScript.

However, the real comparison would be with Qt which uses C++ (a compiled language) but even Qt is better, more mature, more tested, opensource and free, and with even more supported platforms.

So, if you want to lose your time and make things go slower, feel free to use Xamarin. I think at the end some people are as blind with Technologies and Brands as they are with Politics and Religions. You can’t argue with them because they don’t like the proofs and the truth (they feel like you were attacking their physical integrity) or maybe you are a C# programmer who doesn’t want to learn new technologies in your life (more reasonable).

And why not use Qt? Well, I’ve been developing with Qt since 2007, when I was at the University (before tablets, phones and wearables boom). Qt is really heavy, complex, with a steep learning curve if you want to create awesome interfaces. One of the best things was its access to the device API (cross platform) but Web Technologies have caught it up.

We advance to make easier, open and powerful apps. I know, it’s hard to forget what you’ve learned but you have to deal with it because at the end you will thank yourself.

 

 

Draft an app, how to start?

/in /by

I’ve been developing apps from a few years now and there are some typical things at the beggining (when you are thinking and designing the app) that you should do if you do not want to be overwhelmed.

  1. First at all, do a meeting with your customer, see what does he need and what does he really want. Believe it or not even customers don’t know exactly what they want.
  2. Discuss with your team about your possibilities, period of times and efforts.
  3. Prepare a draft of the app (I use Inkscape for that) where you can explain the interface and the basic user experience.
  4. Discuss again with your team. Remember that no matter if you are a great UI/UX specialist or not, sometimes your workmates can offer great ideas (new ways of thinking).
  5. Show the strengths of your app to the customer and be open to do some modifications.
  6. Finally, think about the budget and time of developing and sign a closed contract with your customer.
  7. So important, once the contract have been signed, any extra modifications have to be made with a new contract if you don’t want to get mad or/and unproductive.

Here you can see an initial basic draft. Do not extend yourself too much doing it wonderful and perfect because you will have to change it a lot (it has to be just the first idea), remember you will have more meetings with your team and customers.

gns_demo_by_gengns

Please, do not make the mistake of starting with the code!

 

Draggable marker in Google Maps without API Key

/in , /by

There is a really good documentation about how to use Google Maps API, many of the Google examples are with an API Key but you don’t need it. Use the API Key if you want to monitor your apps or if you want to buy additional usage quota (less than 2.5000 loads per day it’s free).

All Maps API applications should load the Maps API using an API key. Using an API key enables you to monitor your application’s Maps API usage, and ensures that Google can contact you about your application if necessary. If your application’s Maps API usage by exceeds the Usage Limits, you must load the Maps API using an API key in order to purchase additional quota.

So, for this basic example, we use Google Maps API without Key to add a draggable Marker in a map that is always centered on our marker position.

CSS zoom

/in , , /by

Easy zoom in, zoom out, normal zoom and zoom adjusted to the container with CSS and JS.

If you want to change the zoom, just add or subtract from the original zoom CSS property.

document.querySelector("#zoomin").addEventListener("click", function() {
    $area.style.zoom = Number($area.style.zoom) + 0.2;
});

You can also set up maximum and minimum values to avoid infinite zoom.

To adjust an area or image to your container you need to divide the width or height depending of what you want to adjust.

document.querySelector("#zoomfix").addEventListener("click", function() {
    $area.style.zoom = $container.offsetWidth / $area.offsetWidth;
});

Here a real example:

Basic CSS transition using box-shadow

/in , /by

Would you like to set up a cool basic transition for your buttons when the cursor is over them?

  1. Create your HTML button. We have chosen the smile face character but you can use whatever you want (I normaly use Font Awesome).
  2. Define your CSS transition. In our case we want a period of 0.5 seconds every time our CSS changes and a transition effect with a slow start and end (ease-in-out).
transition: all 0.5s ease-in-out;

Our CSS will change if the mouse is over the button.

i { 
    box-shadow: 0 0 0 75px #E94F37 inset;
    color: white;
}

i:hover {
    box-shadow: 0 0 0 4px #E94F37 inset;
    color:#E94F37;
}

We are filling up the element with an inner shadow (inset) and changing the font color.

Here a real example: