Gotcha with ng-model inside ng-if

It’s been written clearly in the angular.js official document but still it confused us in an instance. If you’re reading the documentation of ng-if, pay extra attention to the following paragraph

The scope created within ngIf inherits from its parent scope using prototypal inheritance. An important implication of this is if ngModel is used within ngIf to bind to a javascript primitive defined in the parent scope. In this case any modifications made to the variable within the child scope will override (hide) the value in the parent scope.

We had a template structure as follows

<div class="container">
  <h3>{{title}}
  <div ng-if="metadata">
     <h4>Add Category</h4>
     <input type="text" ng-model="categoryValue" />
     <button ng-click="addCategory">Add</button>
  </div>
</div>

In our scope, we properly add title property and addCategory method. Whenever, we click the ‘Add’ button it goes to correct method. However, inside our addCategory method value of $scope.categoryValue is always undefined.

It took us a while to figure out the issue. However, when we figured it completely made sense. The issue is simple and very straightforward.

The block where we’ve used ng-if, a child scope (parent is the scope we had title property, addCategory method) is being created. When we click the addCategory button, being prototypal inheritance, it finds the method inside the child scope. Obviously, the method isn’t there because we didn’t define the method in this scope. So the lookup goes up to the parent. The method is there. So addCategory method is invoked from the parent scope and categoryValue is undefined.

In the child scope, when we’ve used categoryValue, the value will be looked up in the current scope, parent scope and any other ancestor scopes. It’s nowhere! But when we write something there a property in the local scope (child scope that created for ng-if) is created and the value is saved there. So our illustration is like

$parentScope.addCategory
$childScope.categoryValue

Inside the addCategory method, it is looking for categoryValue but unfortunately it is defined that scope’s child scope. Lookup is always upward, never downward.

 

There are a number of solutions to this problem.

1) Replace ng-if with ng-show.

2) If you require to have ng-if, pass the model’s along with method invocation.

<button ng-click="addCategory(categoryValue)">Add</button>

So now the value of categoryValue from current scope will always be passed to the method during invocation and the method just have to accept that as an argument to get the value. Rather than finding the value in the scope, it should just use the passed argument.

WordPress debugging in phpStorm

While working with WordPress after a while, the first problem I encountered is that I can’t debug it easily as I could do it directly from PyCharm (for python/django), RubyMine (for ruby/rails). So, I wanted to figure out how to do it in phpStorm for WordPress. I found it is quite easy to get it done with a few easy to follow steps.

phpStorm 8 (currently available in EAP) has support for WordPress development. Follow the official doc to configure phpStorm for WordPress.

Enable Remote Debugging using xdebug

Check the official document on how to install xdebug extension for PHP and enable it. Once the extension is installed, you need to enable it and also enable remote debugging.

[xdebug]
zend_extension="/Applications/MAMP/bin/php/php5.5.10/lib/php/extensions/no-debug-non-zts-20121212/xdebug.so"
xdebug.remote_enable=1

The above is my configuration. However, you may need to change the path of xdebug.so based on your extensions path.

Once installed, restart your web server. To make sure xdebug is activated, run

php -v

This should output something like:

$ php -v
PHP 5.5.10 (cli) (built: Apr 10 2014 17:49:22)
Copyright (c) 1997-2014 The PHP Group
Zend Engine v2.5.0, Copyright (c) 1998-2014 Zend Technologies
with Xdebug v2.2.4, Copyright (c) 2002-2014, by Derick Rethans

Notice that Xdebug 2.2.4 is activated. You can also see this using phpinfo().

Configuring phpStorm

As we’ve installed Xdebug, let’s link it with phpStorm. Open phpStorm’s preference and

Screenshot 2014-08-07 21.08.55

Select version from PHP language level and interpreter where you’ve just configured the xdebug. If it’s not listed, click on the Screenshot 2014-08-07 23.01.03 button.

Screenshot 2014-08-07 21.09.54

Give your interpreter a name. For PHP home, click the Screenshot 2014-08-07 23.01.03 button next to the field and locate your php interpreter. If you don’t know where it is go to your shell and run the following command to get the location.

which php

It should detect that Xdebug is installed in this interpreter. Press Ok buttons.

Now, you need to tell phpStorm to listen for the Debug connections. In the toolbar, you will notice the button shown in the following screenshot. Click there and phpStorm will start listening for debugger connections.

Screenshot 2014-08-07 21.11.45

Triggering the debugger

We’re in the last part of our configuration. Everything is done except triggering the xdebug. There are several ways of triggering the debugger. Easiest way is probably using browser extensions. Install extension for your browser as listed below. I will show for Chrome.

Firefox

Chrome

Safari

Opera

After installing the extension, you’ll notice a new button at the right side of your address bar.

Screenshot 2014-08-07 23.07.44

Click on it and choose Debug option.

That’s all*. Now set a breakpoint in your IDE and the execution will be paused there when you refresh your page.

Screenshot 2014-08-07 23.12.23

You can now step into different levels, evaluate expressions on current context, see all scope variables and so on. Your WordPress development will never be painful like earlier. Follow this link to learn more about debug toolbar.

Screenshot 2014-08-07 23.14.34 * First time, you will receive a prompt in your IDE to accept the incoming connection.

 

Exploring NY – part 2

This is continuation of last post where I’m trying to write my random experiences in New York.

Boishaki Utshob (Bangla New Year) Celebration

Pohela Boishak 1421

Pohela Boishak 1421

This was my first Bangla New Year celebration outside of Bangladesh though I rarely joined mass gathering in this day. In addition to girls, usually boys also take some preparations for celebrating this day. However, as usual, I hate preparations; specially with clothing :P. On the day (April 14, 2014) My wife & her friends (with their family), sister-in-law and her friend and me all headed for Jackson Heights where, I heard, most of the Bengali people join on this day.

We didn’t get the parking around, even a few blocks away, the main gather spot. So we decided to head for the NTV Bhaban (NYC office of a Bangladesh TV channel) where cultural programs happens. We really enjoyed the time there from live songs, Bangladeshi (and/or Indian) foods like Fushka, Chotpoti, Pitha, Jhalmuri etc.

Highland Park, Brooklyn

Highland Park, Brooklyn

Highland Park, Brooklyn

It was my another lone cycle exploring. I, initially, planned to go to Forest Park. On the way to Forest Park, I found this park and thought it’s worth exploring. Above the ground level, it has nice bike lane surrounding a lake (though seemed restricted to public).

Randall’s Island Park

Raita at Randall’s Island Park

Over a weekend we, friends and family, went to Randall’s Island park without any plan. I don’t remember the name of the place we initially planned to go but ended up going to this park and, most importantly, we never regret that :). The weather and the lights were stunning but again, unfortunately, my camera wasn’t with me. However, that didn’t stop us enjoying the beauty of the island and the park itself. Then we all sat and relaxed on the sport field. The kid, Raita, of our friend enjoyed the moment too.

To be continued…

Exploring NY – part 1

It’s been more than 3 months since I came to New York. As I joined my workplace within 2 days after coming here and being my wife unable to move easily and frequently due to her pregnancy, I didn’t get enough chances to go out; specially far. However, my explorer mind kept pushing me to go and look nearby.

My $99 bike from Walmart

My $99 bike from Walmart

The first great thing I did was that I bought was a bicycle from Walmart. Though I had plan to buy little expensive bike (something lightweight with aluminum frame), I ended up buying a cheap bike as everyone was warning that the area I live in is little risky and theft prune for expensive bikes(, and, unfortunately, they are right as someone already tried to steal this bike :(). Though I said cheap; it’s a very good bike and looks great. No one ever thinks that this is so cheap. Everyone I asked to guess the price; they ended up guessing about $300-$400 but actual price is $99 (I assembled it myself). My bike was my companion for all of my not-so-lone adventures.

Gateway Drive

My first lone adventure was Spring Park (not sure if name is correct), north of Belt Pkwy and opposite of Gateway Center. At that time snows were just started to go away but it was still cold resulting almost no people in the park. It was me, my bike and another mom with her child playing alone.

Spring Park, Gateway Dr.

Spring Park, Gateway Dr.

However, the cleanliness and the softness of the park just overwhelmed me. I was just thinking, how beautiful this will be when everything becomes green here. I didn’t feel alone there though no human being was with me. I was feeling just natural. I passed sometime there sitting on the bench, taking a few pictures, pumping my bike, watching birds flying, seeing the high lands on the other side, cars moving so fast outside of the park.

Seeing the highland on the other side, I was thinking the beach is nearby and attempted to go there. As I didn’t notice the bike lane that time I couldn’t go there using those high speed routes which is not legal. I kept that adventure for next time and decided to study the routes in detail before of that. However, I discovered the bike routes to beach in the same day evening when one of friend drove car through Belt Pkwy.

Time Square

Time Square

Times Square

I visited Time Square in 42nd Street with my wife and a her friend’s family. Though I liked the brightness and colorful moments there; I was just unable to figure out whether do people come here to see these ads in televisions or something else (other than eve of new year)?

The Hudson River

I love Friday in New York. There are many reasons. It’s a jummah day. It’s a last workday before weekend. On friday our office provides catered lunch which is, almost, always great :). Finally, friday evening my wife comes to my workplace and, after work, we go somewhere and return home late. So far I remember, Hudson River was the first place we conquered together. At that time our office was in W 24th Street.

The Hudson River

The Hudson River

It wasn’t far from our work. We walked together to the bank of The Hudson River from our office. I must mention one name of my co-worker here. It’s Brian Schmitz. Brian and I often run after the work. Being new, he introduces me to the different things while we run. One day he showed me the route to river bank, which I followed that go to there with my wife.

Some interesting things happened where we were there. For the first time in my life, I’ve seen a gay couple there and they were kissing each other. While we were there, my brother called me from Australia and he also told us an interesting fact about Hudson River that I wasn’t aware of earlier. Few years back a plane had to make emergency landing on the river after it’s engines blew. If you want to know more, you can see on wiki. Also this animation shows what happened that time.

Being a sunny day, which were rare in February 2014, we enjoyed the evening very much. Unfortunately, I didn’t take my camera with me on that day. So I’ve used my iPhone 4 to take some pictures.

to be continued ….

A new journey begins

Another big change in life is taking place. I’ve landed New York airport (JFK) a few hours ago to start my new life in the USA. After receiving my immigration visa at January 2014; I flew on February 8, 2014 leaving my crying parents along with brothers, sisters, nephews, niches, friends.

The upside (whether only or among many) of this migration is that I never knew that I’m loved by so many people. I wish I can respect all the love and care I’ve got so far and I wish I can settle myself (along with my wife) here in spite of being extremely home-seek.

Getting Started with WebRTC book review

Getting Started with WebRTC

Getting Started with WebRTC

I’ve started reading the book titled Getting Started with WebRTC written by Rob Manson which is published by Packt Publishing.

This is a short book but, my speed of reading is quite slow due to my current workload. Currently I’m reading chapter 2.

Chapter 1 introduces to the high level concepts of WebRTC and what we require for establishing web based real time communication. This is very helpful as you will know your requirements clearly before you dive into work.

In Chapter 2, author shows the technical part of the WebRTC. As I’m currently reading it, I am not ready to write about it but I will update this post when my reading is completed.

Update:
Due to another priorities, I’ve started reading another book titled Mastering Web Application Development with AngularJS. I will update this review once I complete this book but now I’m uncertain about any timeframe. Sorry about that.

No source for ruby-1.9.3-p484 provided with debugger-ruby_core_source gem

I was getting this error when the ruby version is updated to 1.9.3-p484. When you’re using RVM, the solution is quite simple. Install the gem with the following command:

gem install debugger-linecache -v '1.1.2' -- --with-ruby-include=\$rvm_path/src/ruby-1.9.3-p484

If you need to install different version of debugger-linecache change 1.1.2 with appropriate version. If the you’re using different ruby version, change ruby-1.9.3-p484 to appropriate value.

Chance to win free copies of Getting Started with WebRTC ebook

Getting Started with WebRTC

I’m excited to let all of you know that Packt Publishing wanted to give away free copies of their new book titled Getting Started With WebRTC to the beloved readers of my blog.

Three lucky winners stand a chance to win digital copies of the book. Keep reading to find out how you can be one of the Lucky Winners.

Overview:

  • Set up video calls easily with a low bandwidth audio only option using WebRTC
  • Extend your application using real-time text-based chat, and collaborate easily by adding real-time drag-and-drop file sharing
  • Create your own fully working WebRTC application in minutes

How to Enter?
All you need to do is head on over to the book page http://www.packtpub.com/getting-started-with-webrtc/book and look through the  description of the book and drop a line via the comments below this post to let us know what interests you the most about this book. It’s that simple.

Deadline:
The contest will close in 1 weeks or 2 weeks time depending on the response . Winners will be contacted by email, so be sure to use your real email address (No spam, email addresses of winners will be given to Packt Publishing only)!

SSH Tunneling for Ruby on Rails app

It is quite annoying to develop and test an app which is likely to receive data/notification from a third party site if your development computer isn’t globally reachable. You have to deploy to a server and test it and do this each time until it completely works. Examples of such cases include:

  • Facebook app development
  • PayPal or any other payment gateway integration

While there are probably several options, SSH Tunneling is the simplest, at least to me. It needs less than 2 minutes to configure. Let’s do it.

I’m assuming:

  • You’ve a dedicated server/VPS with root access or somehow access to sshd_config file (we’re going to call this remote server)
  • Your domain is dev.awesomeapp.com and which points to the above server with IP 198.198.115.47
  • You wanted the remote server to listen to 80 port
  • You’re running your rails server at port 3000 in your development computer (we gonna call this local server)

(You may have to change the values marked in italic font as your own settings)
Continue reading →

Say hello to getUserMedia

It feels like a dream comes true. The HTML5 makes many of our dreams come true. You already know many of it’s dreaming features like localStorage, WebGL, Web Database, Audio/Video, Canvas etc. Fortunately, we can access users’ media devices like Camera, Microphone using browser’s native API. Yes, so, we don’t need any other third party plugins like flash or silverlight.

getUserMedia is a native browser API which allows us access user’s camera and/or microphone (of course upon user’s approval). So, you can capture sounds and videos with a few lines of Javascript and without support of any other plugins.

If you want to learn more and see working examples, you can follow these links: