Message Me By:

This is not yet available. Sorry.

Direct Message Me on Twitter

E-mail Me

Share JasonAniceto.com

Jason Aniceto

Web Developer & Programmer

Learning New Technologies: Node.js!

I not only learn new technologies to try and stay up-to-date in the web development world, but also because I just really do find some joy in it! Okay, I also like to be able to brag about messing around with the latest craze.

What am I dabbling in these days?

Node.js

Yep: Node.js.

I first heard about Node.js from an article about LinkedIn using it to build their mobile app. Lately, I’ve been growing more and more interested in the expanding mobile market. Especially since I work in web development, I’m noticing the trend that more users are accessing web sites and apps through their mobile devices. Developers need to really take notice of this, because one has to consider creating faster responding and more efficient pages to be optimized for mobile devices. Those things have batteries! And consumers want to be able to use them for a long time without having to charge frequently. Now there’s a need for new or better made technologies to let mobile web apps reach their potential!

Where does Node.js come in? Well, I’m not going to pretend that I’m an expert and explain why it’s ideal. I saw that LinkedIn used it. And when a big name web presence uses it, it turns heads. I won’t waste your time trying to explain what it is or how it works other than saying that it’s server-side javascript. I’ve used javascript for years and years now, but mostly on the client side to manipulate the DOM and make cool user interfaces. But Ryan Dahl, creator of Node.js, amazingly built a “platform on Chrome’s JavaScript runtime for easily building fast, scalable network applications.” I really recommend that you check out Dahl’s introduction to Node.js.

I’m going to try and learn as much as I can in the next few weeks and hopefully create some small prototype out of not only Node.js but also with other new, hip technologies like Jade, Sass or Less, and maybe even Coffeescript.

As I go along, I’ll update this blog post with any helpful resources or tips that I come across. Hopefully this will help anyone else who wants to explore Node.js!

Resources:

  •  http://www.nodebeginner.org/
    An AWESOME tutorial on Node.js. You can follow along the steps in building a basic web app while learning the inherit benefits of Node.js. Great for people like me who have experience with OOP and basic knowledge of HTTP servers.
  • http://nodeguide.com/
    I’m still going through the site, but it offers some great guides for beginners. One particularly interesting article is Felix’s Node.js Convicing the boss guide. It has great bullet points for why you should or shouldn’t use Node.js.

Flash and the Z-Index

Lots of websites I work on (including my own) use some Flash elements. I try to avoid them as much as possible, but when it comes to embedding videos from sites like YouTube and Vimeo, you just can’t help it! And now these days, there are lots of overlapping elements used in pages, the most common example being the modal/lightbox overlay windows. When you have embedded flash in your page and then open one of these overlays, the flash seems to always trump it and cover the overlay element. This had been a thorn in my side for many a times, and I keep forgetting that there IS A SOLUTION. So here it is, for me to remember as well as for you guys to add to your knowledge:

Embedded flash objects have an attribute called ‘wmode’ which is usually defaulted to ‘window.’ According to Adobe, here’s their description of what it is:

wmode – Possible values: window, opaque, transparent. Sets the Window Mode property of the Flash movie for transparency, layering, and positioning in the browser.

  • window – movie plays in its own rectangular window on a web page.
  • opaque – the movie hides everything on the page behind it.
  • transparent – the background of the HTML page shows through all transparent portions of the movie, this may slow animation performance.

Now to enable z-index’d elements in your page to display over the embedded flash, you need to change the wmode attribute to ‘transparent’:

1
2
3
4
<embed wmode="transparent" src="http://vimeo.com/moogaloop.swf?
clip_id=431114&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;show_portrait=0&amp;
color=59a5d1&amp;fullscreen=1" type="application/x-shockwave-flash" allowfullscreen="true"

allowscriptaccess="always" width="300" height="224" />

Actually, I didn’t figure this one out on my own. Full credit goes out to Julie Cousins:

I hope this helps!

Heroku publickey Problem Solved

I work on a Ruby on Rails app that is stored on git and deployed by Heroku. I’ve been added as a collaborator to the project, so I need to be able to pull from the repository to make changes. I’ve been working with subversion, so I’m used to using version control systems.

Right now, I’m coding on Ubuntu which I hope to write another post on someday. But right now I want to address a problem I came across when I tried do a git clone and pull from the repository.

Usually, I would run this command:

git clone -o heroku git@heroku.com:myapp.git

Note that instead of “myapp” I entered the actual name of my Heroku app. When I run this command, the files for this app would be copied over to my computer so I can develop and debug locally. However, I came up to this little bugger of a problem:

Permission denied (publickey).
fatal: The remote end hung up unexpectedly

I tried my best to find out what the exactly was wrong and any solutions, but the best I could come up with was that the SSH key was getting rejected. The closest I came to finding an answer was on this thread. Basically you had to generate an SSH key then add it to Heroku. All these steps I followed from the Heroku docs for managing keys. However, I was still getting the Permission denied error.

I had to do more research. Then I came across this troubleshooter for SSH from github. Of particular interest was their note on “Issues when using sudo:”

You shouldn’t run sudo git unless you have a very good reason. If you don’t know if you have a good reason to use sudo, it’s likely that you do not have one.

If you are using sudo with git commands (e.g. using sudo git clone because you are deploying to a root-owned folder), ensure that you also generated the key using sudo. Otherwise, you will have generated a key for your current user, but when you are doing sudo git, you are actually the root user – thus, the keys will not match.

Simply put, if you are using sudo git, then also use sudo ssh-keygen.

I then realized that I wasn’t running as root on my system. *FACEPALM*

Using this info, I just performed these steps:

1. Run command line:

sudo ssh-keygen -t rsa

2. Use the default location, and don’t enter any password. (Basically, press the Enter key three times.)

3. When that’s done, run command line:

sudo heroku keys:add /root/.ssh/id_rsa.pub

4. After the key is added, run command line:

sudo git clone -o heroku git@heroku.com:myapp.git

After that last command, it should then pull in all your Heroku application files for you to work with!

Hope this helps!