Detecting Shaking on Windows Phone

I think it is cool to have a Windows Phone application that the content can be updated by shaking the phone, so I wrote this Class in order to achieve that!!
Detecting Shaking on Windows Phone

Detecting Shaking on Windows Phone

This is how to implement it, the code is well commented and very easy to understand:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Phone.Controls;
using Microsoft.Devices.Sensors;

namespace shakeDetection
{
public partial class MainPage : PhoneApplicationPage
{

//We instanciate the AccelerometerSensorWithShakeDetection class as a prperty in order to be available in all methods for the MainPage class
AccelerometerSensorWithShakeDetection _shakeSensor = new AccelerometerSensorWithShakeDetection();

public MainPage()
{
InitializeComponent();

//in the costructor of the MainPage class, we call the SetUpEvent method, and we pass the MainPage Class as context scope, and the event we want to call
//when the device is Shacked
_shakeSensor.SetUpEvent(this, ShakeDetected);
}

//created a custom event to call the method that contain the code to execute when the device is shaked
private void ShakeDetected(object sender, EventArgs e)
{
//use this method to call MethodToExecWhenTheDeviceIsShaked method in another thread, different from the accelerometer thread
_shakeSensor.DispatcherInvoke(MethodToExecWhenTheDeviceIsShaked);
}

private void MethodToExecWhenTheDeviceIsShaked()
{
myStoryboard.Begin();
//plase here the code you want to exec when the device is shaked
}
private void Rectangle_Tapped(object sender, MouseButtonEventArgs e)
{
myStoryboard.Begin();
}
}
}

Continue reading

How to get the div coordinates with JQuery?

How to get the div coordinates with JQuery and vanilla Javascript?

 
This is specially helpful if you are creating a mouse over porpup, or a custom tooltip and you have to account for the position of you div in the screen or maybe related to other elements, to avoid overlap visibility over other elements in the page, etc.
div coordinates

There are two ways of doing this, with .position() method and .offset() method

$('#elementID').offset()

Returns an object with top and left offsets. (http://api.jquery.com/offset/)

Actually there is two options:
position() or offset().

position() Basically similar to what you could use in the CSS top, left properties.

offset() Will return the distance relative to the document. This considers margins, paddings, and borders.

 

book

Book Tip

Speaking JavaScript: An In-Depth Guide for Programmers
Like it or not, JavaScript is everywhere these days—from browser to server to mobile—and now you, too, need to learn the language or dive deeper than you have. This concise book guides you into and through JavaScript, written by a veteran programmer who once found himself in the same position.

Amazon

 

Here is an example:

<style>
  .someClass{
        position: absolute;
        top:100px;
        left:100px;
        border: solid 3px black;
  }
  span {
     margin:20px;
     padding:20px;
     border: solid 2px black;
     position: absolute;
     top:20px;
     left:20px;
 }
</style>
<divclass="someClass"><span>Hello World!</span></div>
    $('span').position() => { top: 20, left: 20 }
    $('span').offset() => { top: 143, left : 143 }

You can also set the position() and the offset

<divclass="someClass"><span>Hello World!</span></div>
    $('span').position({ top: 20, left: 20 })
    $('span').offset({ top: 143, left : 143 })
 

 

How to achieve the same result with vanilla Javascript?

This function will tell you the div coordinates, (x,y position) of the element relative to the page. Basically you have to loop up through all the element’s parents and add their offsets together.

function getPosition(elem) {
    for (var lx=0, ly=0;
         elem != null;
         lx += elem.offsetLeft, ly += elem.offsetTop, elem = elem.offsetParent);
    return {x: lx,y: ly};
}

If you just wanted the x,y position of the element relative to its container, then all you need is:

var x = elem.offsetLeft;
var y = elem.offsetTop;

If you know other way to achieve the same result please feel free to share with us, you can live a comment in the blog or you can contact me @JoMendezdev on Twitter.

10 bad coding practices that wreck software development projects

10 bad coding practices

I found this article in internet and I think it is extremely important for software developers, and is key in order to be highly productive.

The Pareto principle states that 80 percent of outcomes can be attributed to 20 percent of the possible causes of a given event. Also known as the 80-20 rule, it’s relevant to almost every field of human endeavor.

In the field of software development, the principle can be summarized by saying that most problems are caused by a small number of bad coding practices. Eliminate them and your work will be very much easier and more productive.

bad coding practices

These 10 bad coding practices are the worst culprits.

1. Typos in your code

These are surprisingly common, and they are maddening because they have nothing to do with your programming skill. Even so, a misspelled variable name or function name can wreak havoc on your code. What’s more, they may not be easy to spot.

What’s the solution? Working in a good integrated development environment (IDE) or even a programmer-specific text editor can reduce spelling errors significantly. Another thing you can do: Deliberately choose variable and function names that are easy to spell and, therefore, easy to spot when they have been misspelled. Avoid words such as receive, which easily be misspelled recieve without being obvious.

2. Failing to indent or format your code

Indenting and otherwise formatting your code makes it easier to understand at a glance and, therefore, spot mistakes. It also makes it far easier for other people to maintain your code, as it’s presented in a consistent fashion.

If you use an IDE that doesn’t automatically format your code, consider running it through a code beautifier such as Uncrustify, which will format it consistently according to the rules you configure.

Continue reading