OS X El Capitan – gem install error ld: library not found for -l

You will get this error, if you haven’t updated/installed your command line tools.

Follow the following steps

  • Then open Xcode > Preferences > Downloads > Command Line Tools or execute in Terminal:
    xcode-select --install
  • Select Xcode > Preferences > Locations > Command Line Tools
Posted in Uncategorized | Leave a comment

Copying videos from Mac to iPhone’s Photos

I copied all the videos from my iPhone to Photos app of Mac, and deleted the videos from iPhone. But sometime later, I wanted some videos on my iPhone to show it to my friends.

Tried to use iTunes, but could not find a way to copy to iPhone, same with Photos app. But finally figured out that if you send the video files via Airdrop from Mac to iPhone, it will be saved in Photos.

Comment if there is any better way.

Posted in Uncategorized | Leave a comment

iPhoto Library vs Photos Library – Can you reduce space?

After the new release of photos, iphoto will be discontinued. I didn’t even bother rather realized about this upgrade till one day. I wanted to reduce space in my mac, iphoto library as well as photos library was taking large space.

When I did find command, both are having duplicate content. But after some Google search, found this article, which clearly explains that files are not duplicate.

https://support.apple.com/en-us/HT204476

Apple achieved this using hardlinking both files. You can verify this with the following command.

ls -i <image file/video file with path>

Take any image file which is duplicated in both directory and execute the above command. The inode will be same for both files.

You can find difference between hard link vs symlink

http://stackoverflow.com/questions/185899/what-is-the-difference-between-a-symbolic-link-and-a-hard-link

Posted in Uncategorized | Leave a comment

Angularjs Protractor – Selenium headless End to End Testing

This post assumes that you know about protractor.

Scenario:

To setup the end to end testing in the server for continuous integration in Ubuntu.

Selenium Headless server installation:

  • Open the following ports 4444, 7054,5055 [If your continuous integration server is different from selenium server]
  • Install Xvfb [Xvfb or X virtual framebuffer is a display server implementing the X11 display server protocol. In contrast to other display servers Xvfb performs all graphical operations in memory without showing any screen output.]
sudo aptitude install -y xfonts-100dpi xfonts-75dpi xfonts-scalable xfonts-cyrillic xvfb x11-apps
  • Install imagemagick(to take screenshot), google-chrome and firefox
sudo aptitude imagemagick firefox google-chrome-stable
  • Now run the Xvfb server
/usr/bin/Xvfb :99 -ac -screen 0 1024x768x24 &
  • To make the x-windows apps to connect this Xvfb server,
export DISPLAY=:99
  • Now run the selenium server. When it launches the google-chrome or firefox , it will use the xvfb server.
node_modules/protractor/bin/webdriver-manager start

Debugging the selenium headless server installation:

  • First check whether the browsers are using the Xvfb, when your run in the command line. [when you run the command firefox, it will just throw some output and waits till you kill with ctl+C]
  • then, Check whether selenium works or not, by visiting the the following URL
http://<your_selenium_server>:4444/wd/hub/static/resource/hub.html

Selenium server

  1. You can try to create session with different browsers.
  2. Click load script and enter some URL.
  3. Take screenshot, you should see the loaded page screenshot.

Configure protractor:

With the following

seleniumAddress: 'http://<Your_selenium_server_address>:4444/wd/hub'
Posted in AngularJS, Javascript, testing | 2 Comments

Django autocomplete_light and admin interface integration

I just wanted to enable autocomplete in my admin interface. It took almost 3 hours to understand whats happening and to make it work, because for integrating in admin interface, the docs is not very clear.

You need to read the docs first

http://django-autocomplete-light.readthedocs.org/en/latest/quick.html

And the read this

Scenario:

class A(models.Model):
    fieldA1 = models.CharField()
    fieldA2 = models.CharField()

class B(models.Model):
    fieldB1 = models.ForeignKey(A)
    fieldB2 = models.CharField()

For having autocomplete in admin interface for model B to the fieldB1, we need

  1. API for model A should be exposed
#Create a file autocomplete_light_registry.py in the base folder of the project 
#By registering the modelA, the /autocomplete/AAutocomplete/?q=aa API will be available 
#API will search on fieldA1 to give the result
autocomplete_light.register(A,search_fields=['fieldA1',], )
  1. Admin interface should know that fieldB1 should use that exposed API
#admin.py
class BAdmin(admin.ModelAdmin):
   form = autocomplete_light.modelform_factory(B)
admin.site.register(B, BAdmin)
Posted in Django, python | Leave a comment

Mac os – pip install – clang: error: unknown argument

Debugging this problem took quite some time for me. If you faced the following error

clang: error: unknown argument: '-mno-fused-madd' [-Wunused-command-line-argument-hard-error-in-future]

Reason

The Apple LLVM compiler in Xcode 5.1 treats unrecognized command-line options as errors.

Work around

ARCHFLAGS=-Wno-error=unused-command-line-argument-hard-error-in-future pip install <ur package>

You can read in detail about it here.

http://bruteforce.gr/bypassing-clang-error-unknown-argument.html

Posted in python | Leave a comment

Developing Embeddable Javascript Widget

For creating Embeddable Javascript widget, the important components in designing a widget are

  • Widget Loader
  • Iframe vs inline
  • Analytics

Widget Loader:

The embeddable snippet for our widget should not affect page load time of parent site. Our widget should not wait for entire page load, because if there is any other widget hogging the page load time, then your widget will suffer too. The following articles explains in details about creating the embeddable javascript snippet

http://shootitlive.com/2012/07/developing-an-embeddable-javascript-widget/

http://blog.swirrl.com/articles/creating-asynchronous-embeddable-javascript-widgets/

Iframe vs Inline:

widget HTML as part of parent page (not using iframe):

Your widget can be in a iframe or it can be part of the parent HTML. I would strongly suggest to use iframe approach, unless you have valid reason to have widget HTML as part of parent HTML.

Drawbacks of having widget HTML as part of parent page:

  • Your widget styles should not affect the parent page

  • The javascript libraries necessary for your widget should be compatible with parent site. For example, you might need JQuery 1.9 but parent site has jQuery 1.6. You should be able to handle all these library issues.

If you are using this approach, try to use plain vanilla javascript to write your widget.

Iframe:

This approach is pretty simple except handling cookies part. You dont need to worry about parent site styles and javascript.,.

Analytics:

Using google analytics within Iframe widget, it won’t track your analytics properly, because most of the browser blocks third party cookies

Read more information about third party cookies

http://www.opentracker.net/article/third-party-cookies-vs-first-party-cookies

Check the following article for Google universal analytics for your widget

https://shootitlive.com/2013/08/cross-site-google-analytics-for-an-embedded-widget/

Posted in Javascript | 1 Comment

Getting Started with DjangoCMS

When I was looking for Django based CMS , Chose Django CMS among many other CMSes.

https://www.djangopackages.com/grids/g/cms/

The main reason for choosing the Django CMS is , it is a developer friendly CMS.

First, go through the following tutorial

http://docs.django-cms.org/en/2.4.3/getting_started/tutorial.html

Some concepts, which was difficult to understand from the documentation

What is DjangoCMS?

It is a Django application with

  • admin interface customised for adding and organising pages
  • django template with new template tag “placeholder”, where snippets from different plugins can be displayed
  • default plugins
  • easy to write plugin interface

How the template works?

Templates are simple django templates with additional template tag called placeholder. This placeholder behaves exactly like django template blocks in the aspect of inheritance. In addition to that, you will be able to add plugins to the placeholder. The plugins can be any static or dynamically generated content.

How to install DjangoCMS with existing website in a specific path instead of root ?

Just add the following the snippet in your urls.py

urlpatterns += patterns('',
    url(r’^mycms/', include('cms.urls')),
)

Why model should always be giving for plugin , even though you dont have data to store?

The following page is a good start on writing plugin

http://docs.django-cms.org/en/2.4.3/extending_cms/custom_plugins.html

from cms.plugin_base import CMSPluginBase
from cms.plugin_pool import plugin_pool
from cms.models.pluginmodel import CMSPlugin
from django.utils.translation import ugettext_lazy as _

class HelloPlugin(CMSPluginBase):
    model = CMSPlugin
    render_template = "hello_plugin.html"

plugin_pool.register_plugin(HelloPlugin)

For any plugin, DjangoCMS should maintain relation between a particular page and our plugin. So, for all the plugin, you need to provide a model CMSPlugin or any model which has inherited CMSPluginBase.

Posted in Django, python | Leave a comment

Zurb Foundation custom form and Angular JS ng-checked

When using the Zurb Foundation custom form checkbox, the angular js ng-checked directive will not mark/unmark the checkbox when there is change occurs in the angular model.

The reason being the “custom form check box” creates new span element for the check box to make the styling easy.

  <label for="checkbox1">
      <input type="checkbox" id="checkbox1" style="display: none;">
      <!-- the following span created by foundation checkbox -->
      <span class="custom checkbox"></span> Label for Checkbox
  </label>

Use the following directive instead of “ng-checked”. Just you need to change “ng-checked” to “ng-checked-foundation”, the params passed to it will be same. It may not be the idle way as it is closely coupled with foundation additional markups. but it solves the issue.

directive('ngCheckedFoundation',['$timeout', function($timeout) {
    function markCheckBox(value, scope, element, attr) {
        //timeout to avoid the foundation javascript action changed by this directive
        $timeout(function() {
                if(value) {
                    attr.$set("checked", true);
                    element.next().addClass('checked');
                }
                else {
                    attr.$set("checked", false);
                    element.next().removeClass('checked');
                }
        }, 200);
    }

    function link (scope, element, attr, ctrl) {
        scope.$watch(attr["ngCheckedFoundation"], function(n,o) {
          if(n != o) {
            markCheckBox(n, scope, element, attr);
          }
        });
        markCheckBox(scope.$eval(attr.ngCheckedFoundation), scope, element, attr);
    }

    return({
        link: link,
        restrict: "A",
    });
}])
Posted in AngularJS | 1 Comment

AngularJs-Karma (testacular) – Debug in browser

Karma – AngularJS Unit test debugging

  • In karma.conf.js file, use your favorite browser

     browsers = ['Chrome'];
    
  • In the spec file, add the statement “debugger” wherever you want to debug

     it('my awesome test', function () {
         debugger; //This is like setting a breakpoint
         ...
      });
    
  • Run karma.

  • In the newly opened Chrome Browser, open the console and refresh the page. The execution will stop at the position you added debugger. Now you can add additional breakpoints using the devtools also, if you want 😉

Karma – AngularJS e2e test debugging

  • In the karma config, enable

     //set log_level to debug
     LOG_LEVEL = debug;
    
  • In the e2e test scenarios, add “pause()” , check the more info at http://docs.angularjs.org/guide/dev_guide.e2e-testing

  • Further debugging

    https://groups.google.com/forum/#!msg/angular/eUEVKUsif8U/W4rnLAVF8P0J

    As the application runs in an iframe, if you access the angular object from the JavaScript console, it’s the scenario runner’s one, not the application’s one.

    You can refer to the angular object of the iframe window object using this verbose syntax :

     document.getElementsByTagName('iframe')[0].contentWindow.angular.element("#app")
    

    Adding these two functions in the scenarios.js file will help :

    function appWindow() {
        return document.getElementsByTagName('iframe')[0].contentWindow;
    }
    function appAngular() {
        return appWindow().angular;
    }
    

    Now appWindow() and appAngular() will return respectively the application’s window and angular object. For instance :

    appAngular().element("#content").scope()
    
Posted in AngularJS | Tagged , | 2 Comments