A couple weeks ago I had an issue…I needed to send the number values contained in an object to the server as integers. The only catch was, I didn’t know how many elements were in the object or which ones were supposed to be integers and which were supposed to be strings. I could however trust that the values in the object were appropriate for each key.

I ended coming up with a little hack using some of JavaScripts type coercion to get the results I needed.

var parsed;
Object.keys(values).forEach(function(key) {
  parsed = parseInt(values[key], 10);
  if (values[key] == parsed) {
    values[key] = parsed;
  }
});

So what’s happening here?

Object.keys(values).forEach(function(key) {

I am using the Object.keys() method to get the keys of each element in an array and then looping over them using Array.prototype.forEach() instead of using a for loop.

parsed = parseInt(values[key], 10);

In the loop I parseInt every value and store it in a temporary variable.

if (origVal == parsed) {
  values[key] = parsed;
}

Now I compare the parsed value to the original value allowing JavaScript to do it’s type coercion and if they are equal then I overwrite the original value with the parsed value, else I continue on to the next element. This works because parseInt(“2”, 10) === 2 and 2 == “2” but parseInt(“2Foo”, 10) === 2 and 2 != “2Foo”. You can see a working example here.

Although this has a fairly limited use case I hope you found the technique interesting albeit a little bit of a hack. Thanks for reading!

We have just released the latest Juju GUI charm, 0.9.0 which brings with it a number of improvements as well as full IE10 support. Yes, we have added IE10 to our support matrix for the GUI bringing some company to the latest Chrome and Firefox release versions.

With Chrome, Firefox, and IE10 now available for the GUI and Ubuntu and OSX available for the command line tools, your ability to create and manage your environments with Juju is getting easier and easier.

Along with IE10 support we put a ton of work into the new service inspector panel which is available under the ‘serviceInspector’ feature flag and finished the sandbox implementation of the juju-core sandbox which means PyJuju will be retired in the future. And added autocomplete to the charm search box in the charm browser. You can find the full changelog here.

If you’re looking for information on what Juju is you can visit the newly redesigned jujucharms.com webpage for more information or you can join us in #juju on irc.freenode.net. As usual, if you have any questions or want to reach out, comment below or find me on G+ or Twitter.

About a month ago I posted that Juju for OSX was available on GitHub. Well thanks to a Homebrew pull request by Rodrigo Chacon it’s now available for easy install via Homebrew!

For those who don’t know, Juju enables you to build entire environments in the cloud with only a few commands on public clouds like Amazon Web Services and HP Cloud, to private clouds built on OpenStack, or raw bare metal via MAAS. Additional documentation can be found here and if you want to jump right in and see how easy it is you can play with the Juju GUI here.

As a continuation of my previous post Understanding CSS2 and CSS3 attribute selectors I wanted to bring everyones attention to some of the less used but very powerful CSS selectors. I have sorted these by their IE support because they are all supported by all of the other modern browsers.

IE6+ SUPPORT

S1::first-line: Pseudo element selector

Selects the first line of text in an element which matches the S1 selector.

.dog::first-line

S1::first-letter: Pseudo element selector

Selects the first letter in an element which matches the S1 selector.

.dog::first-letter

IE7+ SUPPORT

S1 ~ S2 : Sibling selector

Selects any element which matches the S2 selector as long as it is a sibling of the S1 selector.

.dog ~ .leg
/* markup */
<div class="dog"></div>
<div class="leg"></div> /* match */
<div class="leg"></div>  /* match */

S1 > S2 : Immediate children selector

Only selects elements which match the S2 selector which are immediate children of the S1 selector.

.dog > .leg
/* markup */
<div class="dog">
  <div class="leg"> /* match */
    <div class="leg"></div>  /* will not match */
  </div>
</div>

S1 + S2 : Adjacent selector

Will select a single element which matches the S2 selector as long as it is immediately after the S1 selector element.

.dog + .leg
/* markup */
<div class="dog"></div>
<div class="leg"></div> /* match */
<div class="leg"></div>  /* will not match */

S1:first-child : Pseudo element selector

Only selects the element which matches the S1 selector that is the first child of it’s parent element.

.leg:first-child
/* markup */
<div class="dog">
  <div class="leg"></div> /* match */
  <div class="leg"></div>  /* will not match */
</div>

S1:last-child : Pseudo element selector

Only selects the element which matches the S1 selector that is the last child of it’s parent element.

.leg:last-child
/* markup */
<div class="dog">
  <div class="leg"></div> /* will not match */
  <div class="leg"></div>  /* match */
</div>

IE9+ SUPPORT

S1:not(S2) : Negation pseudo class selector

Selects all elements which match the S1 selector except those which also match S2

.dog:not(.cat)
/* markup */
<div class="dog"></div> /* match */
<div class="cat leg"></div>  /* will not match */
<div class="dog leg"></div> /* match */

S1:only-child : Pseudo class selector

Selects elements which match the S1 selector and are the only child of their parent container.

.leg:only-child
/* markup */
<div class="dog">
  <div class="leg"></div> /* match */
</div>
<div class="dog">
  <div class="leg"></div> /* will not match */
  <div class="leg"></div> /* will not match */
</div>

S1:first-of-type : Pseudo class selector

Selects the elements that match the S1 selector which are the first of a type in it’s parent container.

.dog p:first-of-type
/* markup */
<div class="dog">
  <div class="leg"></div> /* will not match */
  <p class="leg"></p> /* match */
  <p class="leg"></p> /* will not match */
</div>

S1:only-of-type : Pseudo class selector

Selects elements that match the S1 selector which do not have any siblings within their parent container.

.dog div:only-of-type
/* markup */
<div class="dog">
  <div class="leg"></div> /* match */
  <p class="leg"></p> /* will not match */
</div>
<div class="dog">
  <div class="leg"></div> /* will not match */
  <div class="leg"></div> /* will not match */
</div>

S1:nth-child(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child of its parent container.

.dog p:nth-child(2)
<div class="dog">
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
  <p class="leg"></p> /* will not match */
</div>

S1:nth-last-child(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child of its parent container counted from the last child.

.dog p:nth-last-child(1)
<div class="dog">
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
</div>

S1:nth-of-type(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child type of its parent container.

.dog p:nth-of-type(2)
<div class="dog">
  <div class="leg"></div> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
  <p class="leg"></p> /* will not match */
</div>

S1:nth-last-of-type(x) : Pseudo class selector

Only selects the element which matches the S1 selector which is the nth child type of its parent container counted from the last child.

.dog p:nth-of-type(1)
<div class="dog">
  <div class="leg"></div> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* will not match */
  <p class="leg"></p> /* match */
</div>

Using some of these more advanced/unknown selectors can make your styling a lot easier without having to rely on more classes or javascript tricks. I hope I got them all, if I missed one that you think should be included please comment below or mention me on twitter @fromanegg and I’ll be sure to add it. Thanks for reading!

Do you have a new Android phone and cannot transfer files to OSX using the Android File Transfer Tool because you keep getting the error “Could not replace file, could not copy file .” ?

The fix for me was to make sure that the phone was unlocked and the screen on on the homescreen.

Hope this helps anyone else running into this error. Do you have another solution? Let me know and I’ll add it here for others.