January 2013 – Notes and Random Stuff

Selenium: Python webdriver common commands

I keep forgetting and having to look them up:

// Find an element by CSS selector:

driver.find_element_by_css_selector(“.canvas-placard.back .close”).click()

// Assert DOM element not present (by CSS selector):

self.assert_not_present(By.CSS_SELECTOR, “.canvas-placard.front”)

// Assert true or equal, and at the same time get an attribute from a DOM element:

self.assertEqual(“true”, driver.find_element_by_xpath(“//select[@id=’type’]”).get_attribute(“disabled”))

// Sending stuff to input fields:

self.driver.find_element_by_css_selector(“.myselector”).send_keys(“The text to field the input text with”)

// Executing javascript directly:

self.driver.execute_script(“alert(‘hello world’);”)

// Find something by the text on a link:

driver.find_element_by_link_text(“A Selenium Test Action “).click()

// Test if text present / not present:

self.assert_text_not_present(“Something something here”)

self.assertTrue( requestText.index(“some string here”) > -1 )

selenium: python webdriver choosing a select box option

from selenium import webdriver
from selenium.webdriver.support.ui import Select
...
selectBox = Select(driver.find_element_by_id(....))
selectBox.select_by_visible_text(....)

phonegap: camera in javascript! code

function testCamera() {
clearPhoto();
navigator.camera.getPicture(camSuccess, allError, { quality: 50 });
}

function camSuccess(imageData) {
var image = document.querySelector(‘#hello_world’);
image.src = “data:image/jpeg;base64,” + imageData;
}

function clearPhoto() {
var image = document.querySelector(‘#hello_world’);
image.src = “”;
}

phonegap: vibrator code

function testVibrate() {
navigator.notification.vibrate(2000); //milliseconds
navigator.notification.beep(2); // numbr of times
}

phonegap: accelerometer code

function testAccel() {
navigator.accelerometer.getCurrentAcceleration(accelSuccess, allError);
}

function accelSuccess(acceleration) {
var element = document.getElementById(‘accel’);
element.innerHTML = ‘Acceleration X: ‘ + acceleration.x + ‘ ’ +
‘Acceleration Y: ‘ + acceleration.y + ‘ ’ +
‘Acceleration Z: ‘ + acceleration.z + ‘ ’ +
‘Timestamp: ‘ + acceleration.timestamp + ‘ ’;
}

phonegap: geolocation code

navigator.geolocation.getCurrentPosition(geoSuccess, allError);

function geoSuccess(position) {
var element = document.getElementById(‘geoApi’);
element.innerHTML = ‘Getting ready to print the data’;
element.innerHTML = ‘Latitude: ‘ + position.coords.latitude + ‘ ’ +
‘Longitude: ‘ + position.coords.longitude + ‘ ’ +
‘Altitude: ‘ + position.coords.altitude + ‘ ’ +
‘Accuracy: ‘ + position.coords.accuracy + ‘ ’ +
‘Altitude Accuracy: ‘ + position.coords.altitudeAccuracy + ‘ ’ +
‘Heading: ‘ + position.coords.heading + ‘ ’ +
‘Speed: ‘ + position.coords.speed + ‘ ’ +
‘Timestamp: ‘ + new Date(position.timestamp);
}

function allError(errors){

// Your errors here

}

Phonegap: the nuts and bolts of developing your app

Make sure you include the following listener:

function onDeviceReady() {
$(document).ready(function() {
//Call any jQuery functions here
});
}
document.addEventListener(deviceready, onDeviceReady);
</script>

Phonegap: avoid the build pain and suffering

Ok, part of the pain at least…

You still need to own (or access to) a Mac. And to pay the $99 fee to the Gods of Apple, and all the initial stuff to gather your Apple mobile developer certificate and your provisioning file.

But once you have those two, head to: https://build.phonegap.com/ and sign up for a free acct. Then, instead of building locally, upload your index.html file (which is the canvas of your app), and they take care of building the app for you in several different mobile apps, and give you the files or the QR reader code needed to download them to the phone you sign up for provisioning. No hassle. No pain.

You can only have one app at a time (unless you pain), but heck! it is free as in beer, and it works really good.

With the command line, things have become easier to implement:

http://docs.phonegap.com/en/edge/guide_cli_index.md.html#The%20Command-line%20Interface

Once you install:

$sudo npm install -g phonegap

You can create a new app:

$phonegap create [your app dir] [your app name]

And build:

$cd [your app dir]

$phonegap build ios

That will build the project locally, but the true timesaver is to use build.phonegap.com to do the work for you. In order to do that, you need
to login to your phonegap acct first.
$phonegap remote login -u iamreallyadog@gmail.com -p mYpASSw0RD

And now, to build remotely:
$phonegap remote build ios

If you get an error about invalid keys at this point, is because you need to provide one for your acct to work. Instructions here:
http://docs.build.phonegap.com/en_US/3.1.0/signing_signing-ios.md.html#iOS%20Signing

The process is a bit confusing and crazeee, but it basically involves creating a request for a signed certificate in your local env:
http://stackoverflow.com/questions/12126496/how-to-obtain-certificate-signing-request

and then, in the apple developer portal, a certificate (from the file created locally), and a provisioning file, and then download both to your local env, and using Keychain access / export you create a .p12 file, then you upload that and the provisioning file to your phonegap account (to create a sign key), and you are done. The key is going to ask for a password to unlock it before you can use it.

Once you finish building, you can use the scanner image to load it to your phone, or download the code to it from the Adobe website.

If you need to install plugins:

$ phonegap local plugin add https://git-wip-us.apache.org/repos/asf/cordova-plugin-vibration.git

For the complete list, see the Adobe build page.

Note: if you are using external js libraries or you need to hit external urls, you need to whitelist them in your config.xml file (follow this instructions):

http://docs.phonegap.com/en/2.3.0/guide_whitelist_index.md.html

Specifically, you need these two:

HTML: canvas

1) It is a good idea to use the inline “width” and “height” instead of CSS, to define the canvas size. Weird things happen if you use CSS instead.

2) Browsers that don’t support canvas will display the text inside of it instead.

3) You need to define a context before you start using it: canvas.getContext(‘2d’) will give you a bunch of methods to draw 2d shapes on it. There are other contexts too, dealing with 3d stuff

See it in action:

http://experiments.onsubject.com/canvas/

HTML and CSS: general site architecture and good practices

CSS organization:

Base/

– reset.css (or normalize.css)

– layout.css (any grid system you are throwing in goes here)

– typography.css (your fonts stuff)

– utilities.css (OOCSS stuff, things that may be easier to just define a class for instead of rules below, like .left { float: left}, or .mtl { margin-top: 20px } See this and pic and choose the ones not cover in other sections that you may need.

– zindexmap.css (this file does not contain any css, just a commented out section where you specify all the elements using zindex, and the values), it is quite useful to avoid the z-index wars

Components/

– buttons.css

-forms.css

– list.css (and so on, you get the idea)

Modules/

– footer.css

– header.css

– navbar.css (you get the idea, not atomic components like buttons, but more general sections.

Overrides/

– aboutus.css (page specific stuff, one offs, overrides to generic rules, themes)

Make sure your production scripts are making all of these files into one.

Other tips:

1) Inside each file, at the top, put a CSS map, so you know if a section you are adding / modifying is already there. Something like:

/* Contents

– Header

– some section

– some other section

– footer stuff

And then, make sure the sections correspond with the headers above. That will help you keep bloat out

2) Avoid long selectors! Favor specificity by classes. For example, instead of:

#my_container section div p a.my_link

try

#my_container .my link (or just plain .my_link)

It is easier to fall in this trap specially if you are using css precompilers like sass. The reason you should be mindful of this:

– Better performance of your CSS

– You avoid specificity wars. Protect via container ids, not long strings of HTML elements

3) Always aim to reuse. Try to drive your work off a designer’s stylesheet, so you don’t have to “recreate” styles per pages / sections. If one is not provided, ask for one. If not possible, avoid the temptation to create “one offs” everywhere to accomplish stuff, constantly go back to your base classes and look for what you need, or what you don’t anymore.

4) At coding time: make the HTML do as much of the Layout / styling as possible. For example, as basic as it sounds, put content in

instead of a more generic

if the text is really to be used as a paragraph.