I recently had a rather confusing bug where on Chromium, a background image on one of my elements kept disappearing and would only appear if I scrolled down past it and then scrolled back up. Super weird.

It turns out, Chromium wasn’t too happy with me using:

text-indent: -9999px

Instead, I switched it out to use The H5BP Image Replacement Technique instead and problem solved! It looks like this:

.h5bp {
  border: 0;
  font: 0/0 a;
  text-shadow: none;
  color: transparent;
  background: url([YOURURL]);
  width: [YOURWIDTH];
  height: [YOURHEIGHT];
}

Confusion resolved! Hooray!

I’d been struggling with npm installs for a while on my machine and couldn’t work out why. Various error messages kept appearing for various Node modules but it never seemed to be an issue with the modules themselves.

Finally, I encountered this error message (Gulp is an example, it was happening for all sorts of modules):

npm ERR! Attempt to unlock /usr/local/lib/node_modules/gulp, which hasn't been locked

I hunted around the web and tried a range of things, the solution for me was running the following in my Mac OSX terminal (note – leave $USER as $USER, that’s how it is meant to be!):

sudo chown -R $USER ~/.npm

and also (as it appeared not to affect this folder):

sudo chown -R $USER ~/.npm/_locks

After that, my issues disappeared and Node and npm began to run smoothly once more! Hooray! I shall breathe a sigh of relief and continue working on my upcoming project soon to be revealed to the world!

Tonight I gave a talk at Web Directions’ What Do You Know Sydney that was all about creating magic with JavaScript. It was five minutes, so there was not a lot of time to cover much in detail. Instead, I finished by saying I’d put up a post with links… this is that post!

The slides!

If you’d like to see the slides themselves, they’re here: http://wdykpreso.herokuapp.com/.
Want to try controlling them? You can do that here: wdykpreso.herokuapp.com/remotecontrol/index.html (keep in mind there may be multiple people on there, so if it’s doing weird things… that’s why).

My IoT and JavaScript course

The one spot where I’ve put a lot of info on the basics of getting started with the IoT and JavaScript is in my online course over at O’Reilly. You can find that here: Introduction to IoT Programming with JavaScript.

My JavaScript and IoT SitePoint articles of note

There are a tonne of other examples around the web too. If you need any other help, have any other questions or just wanna say hi, feel free to contact me on Twitter at @thatpatrickguy or email me at pat (imagine a really cool at symbol here that only you with your human, non-email scraping bot can comprehend) patcat.com.

Thank you John Allsopp and Web Directions

I’d like to finish with a HUGE thank you to John Allsopp and Web Directions for having me once again. So much of my big journey into this space was started by my talk at Web Directions South a few years back. Thank you for really being a true inspiration and driving force for good in the tech scene. It truly wouldn’t be the same without you!

I think I spoke more in the past two hours to people than I have in the past two weeks, I had an absolute blast! Night everyone!

Whilst working with Arduinos, every now and then I miss something that should have been really obvious and spend an hour in confusion. This error here was one of those:

avrdude: ser_open(): can't open device "192.168.1.101": No such file or directory
ioctl("TIOCMGET"): Inappropriate ioctl for device
Problem uploading to board.  See http://www.arduino.cc/en/Guide/Troubleshooting#upload for suggestions.

The above error would appear any time I tried to upload to my Arduino Yún. I thought maybe it was because my network wasn’t set up right or because I had misconfigured the Yún. Turns out it’s a very simple error to fix.

I just hadn’t changed the board setting in the Arduino editor. All I needed to do was go to Tools > Board > Arduino Yún. I had my Arduino Uno still set in there.

For me, it wasn’t as obvious that I’d forgotten this setting, as when connecting to the Arduino Yún via Wi-Fi, it comes up with “Arduino at 192.168.1.101 (Arduino Yún)” under Tools > Port. So I didn’t realise it was still expecting an Arduino Uno board!

I’ve written this out in the hope that if someone else searches for that error and is in the same boat as me, this will help save em a little bit of time.

I had accidentally committed my node_modules folder in my new git repo and wanted to remove it from my git repo without losing my actual node_modules folder itself.

Turns out there’s a nice easy way to do that.

First, add a line for node_modules to your .gitignore file (or have one generated really nicely by https://www.gitignore.io).

Then use this line on the command line to clear node_modules from your git:

git rm -r --cached node_modules

Then commit and push that change:

git commit -am "node_modules be gone!"
git push origin master

Success! Hooray! A neater git repo.

Very quick blog post just to remind myself and others how to force IE8 to display pseudo elements correctly!

Issue: IE8 is not showing pseudo elements on a child element of a parent that has just appeared. For example, pseudo elements on menu items aren’t appearing when the menu opens. They appear only once you’ve hovered over the element or interacted in some way.

Fix: Update the pseudo element on hover of its parent element.

A simplified example is below. We set the content value normally here:

ul.menu li ul li.parent > a:after {
  background: url("fancy-arrow-thing.png") no-repeat top right transparent;
  content: "";
}

Then on hover of its parent, we change its value to be one blank space:

ul.menu li:hover ul li.parent a:after {
  content: " " !important;
}

That seems to fix the bug! Hooray!

I’ve got a new SitePoint article up all about how to mute an incoming call using on{X}, the Leap Motion and NodeJS. It’s the same concept I presented at the Internet of Things Sydney Meetup and the Android User Group last month, a nice way to have it up and online for others to refer to and hopefully feel inspired to do something even more wizardly.

The article is up here:
http://www.sitepoint.com/controlling-android-phone-wave-finger/.

Exciting times! Technology is seriously a bunch of fun right now.

I’ve got a new SitePoint article up entitled “Accessing localhost from anywhere”. It is my first non-JavaScript focused article for SitePoint and is all about the various tunnelling services you can use to test your locally hosted sites online and show them to clients. That first time I saw my localhost visible on my phone via the web… oh the inner tech geek excitement!

If you’re interested in having a read, it’s over here:
http://www.sitepoint.com/accessing-localhost-from-anywhere/.

I have been spending the past month on a new Internet of Things set of experiments, this time with a focus on the Leap Motion controller. It’s a neat little device that detects hand motion.

I made three demos:

  1. Switching on different 8 LED lights on an Arduino with hand motions
  2. Muting an incoming phone call by circling my finger in the air as it rung, then nicely sending a busy message 😉
  3. Playing music in the air using hand movements and a MIDI Arduino shield

The demos were made to present specifically for the monthly IoT Sydney meetup which was held last night. It was a bunch of fun and if you’re into the Internet of Things, definitely try to get a spot in sometime.

I’m hoping to make videos showing the demos in action for anyone who couldn’t make it last night. Stay tuned!

For those that attended and anyone else who might be interested, my slides can be found here:
http://androidcontroller.herokuapp.com/

I’ve got the Call Controller code here:
https://github.com/patcat/Leap-Motion-Call-Controller

I’ve got the MIDI Controller code here***:
https://github.com/patcat/MIDILeap

I’ll be writing a proper tutorial regarding the LED lights soon, so haven’t put that up on Github just yet. A lot of the code is in the slides though for that one.

Special thanks go to Justin Mclean for organising a great event and allowing me to do a few demos, and to Andrew Fisher for giving me a hand with a few mind explosion moments with the MIDI Controller. They are both brilliant people!

*** Fun fact, that MIDI code actually can do something I forgot to mention in the presentation. If you hold your hand outstretched with all five fingers, find an instrument you like and then close your fist – you capture that instrument and it will stick to playing that one instrument until you open your hand once more.

After my recent obsession with new technologies and the Internet of Things, the team at Leap Motion was interested to know my thoughts on how their technology would fit in this new Internet enabled technology world. I thought it’d be a fun topic to explore and so wrote a guest post for them on that very topic!

If you’re interested in taking a look, it’s right here:
http://labs.leapmotion.com/where-will-motion-control-live-in-the-smart-environments-of-the-future/.

It was an absolute pleasure to work with the team at Leap Motion on this, I want to extend a huge thank you to them for the honour of a guest post on their site 🙂