Into the context of Facebook iframe (canvas or a paged tab)

September 13th, 2011 Mhmd Shrf No comments

From firefox: cd(frames[1]) in Firebug
From Chrome: Check the latest context scroll in the Console

A jQuery snippet to move into the context of a Facebook canvas or a paged tab iframe:

<script type="text/javascript">if(window.jQuery)jQuery(function(){if(!window.console)console={};if(!console.log)console.log=function(){n.after('<div>'+arguments.toString()+'</div>')};var n=jQuery('<textarea />').width('98%').height('98px').appendTo(document.body).keydown(function(ev){if(ev.keyCode!=13||ev.shiftKey)return;try{console.log(eval(n.val()));n.after($('<div>'+n.val()+'</div>').click(function(){n.val($(this).html())}));}catch(e){n.after('<div>Error:'+e.message+'</div>');console.log(e)}ev.preventDefault()})});</script>
Categories: Uncategorized Tags:

hoverClass

June 29th, 2011 Mhmd Shrf No comments

A sample jQuery .hoverClass() implementation:

  $.fn.hoverClass = function(c){
    this.each(function(){
      $(this).hover(function(){
        $(this).addClass(c);
      },function(){
        $(this).removeClass(c);
      });
    });
  };

Using with jQuery-ui CSS framework classes, I could write:

var example = jQuery('<div />', {className: 'ui-state-default'});
example.hoverClass('ui-state-hover');

Also, see jquery-radioclass snippet

Categories: Uncategorized Tags:

Keep your remote FTP contents up to date

June 21st, 2011 Mhmd Shrf No comments

This is a guide/tutorial for Windows users. Ever wanted to keep your remote ftp directory updated continously? Here is a simple method.

  • Get WinSCP
  • And first manually connect to your ftp server
  • Create a local directory on your left pane and pull work files from ftp server on the right pane
  • Now the magic begins. Look under Commands, and you will see Keep Remote directory up to date.
  • winscp.exe [mysession] /keepuptodate [local_directory] [remote_directory] [/defaults]
  • Mercurial, Git are process oriented alternatives for teams.

    Categories: Uncategorized Tags:

    Ajax Validation in PHP/MVC: validateThenSubmitGeneric

    March 23rd, 2011 Mhmd Shrf No comments

    Here is a view – partial

    <form action="ajLogin" method="post">
      <input type="text" name="username" /><br />
      <input type="password" name="password" /><br />

      <input type="button" value="Submit" onclick="validateThenSubmitGeneric(this)" />
    </form>

    And the javascript:

    function validateThenSubmitGeneric(submitButton) {
        var form = jQuery(submitButton.form);
        var messageDiv = '#message';

        if (form.validate().form()) {
            jQuery(messageDiv).html('').fadeOut();
            form.ajaxSubmit({
                dataType: 'json',
                beforeSubmit: function(){ jQuery(submitButton).attr('disabled', 'disabled') },
                success: function(response){

                    jQuery(submitButton).removeAttr('disabled');

                    if (response.errorCode) alert( response.errorCode + ': ' + response.errorMsg );

                    if (response.message) jQuery(messageDiv).html(response.message).fadeIn();

                    if (response.callfunction && typeof window[response.callfunction]=='function') window[response.callfunction].call(this, response);
                    // Note: Ensure that the name is a function, written somewhere in your view and that it can be accessed globally.

                    if (response.popup) {
                        var popupEl = jQuery(response.popup).clone().show();

                        var width, height;

                        if (!width) width = response.popup_width;
                        if (!height) height = response.popup_height;

                        if (!width) width = parseInt(popupEl.css('width'));
                        if (!height) height = parseInt(popupEl.css('height'));

                        if (!width) width = jQuery(window).width() - 20;
                        if (!height) height = jQuery(window).height() - 20;

                        myModal = SqueezeBox.open(
                                        popupEl.get(0),
                                        {   handler: 'clone',
                                            size: { x: width, y: height}
                                        });
                    }
                    // Note: Ensure the specified popup div (e.g. div#resolveUsername) is present somewhere (hidden) in the document.  You could (optionally) give that div a classname of popup.


                    if (response.redirectTo) {
                        location.href = response.redirectTo;
                        myModal = SqueezeBox.open( jQuery('<div><br /><br /><br /><div class="showSpinner">Redirecting ...</div><br /><br /><br /></div>').get(0), {handler: 'clone', size: { x: 250, y: 150 } });
                    }

                    validateThenSubmitGeneric.latestResponse = response; // Save latest response
                },
                error: function(a,b,c){
                    // 500 errors with errorCode and errorMessage
                    jQuery(submitButton).removeAttr('disabled');
                    alert( b + ':' + c + '\n\n' + a.responseText );
                }
            });
        } else {
             alert("Form has invalid fields. ");
        }

    }

    Your controller for ajLogin could look like:

    function ajLogin() {

      $username = $_POST['username'];
      $password = $_POST['password'];

      $jsonResponse = array();

      if (User::tryLogin($username, $password)) {
        $jsonResponse['redirecTo'] = "/"; // homepage
      } else {
        $jsonResponse['popup'] = 'div#invalidLogin';
      }

      echo json_encode($jsonResponse);

    }

    Questions and Comments are welcome!

    Categories: Uncategorized Tags:

    Project Management: The Endurance/Strength Ratio

    March 18th, 2011 Mhmd Shrf No comments

    Instead of thinking, what is faster for completion, think, what is less emotionally costly (we are biological creatures after all) for the TEAM not just for YOU. And you will note that breaking work into smaller chunks of work has a longer completion date, with the lowest number of hours spent.

    Okay, let’s start over from where all started!

    Okay, doing it myself sounds so much easier and within level of comfort! But having someone else to do saves a lot of time. Have someone else to do, and you will be worried about how to get things done? Solution: Find the right person/company. If not, do it yourself – so sorry!

    Okay, after a lot of tries lets say you found a good person/company to work with. You are already working with them. They are making progress – yippeee!! They ENSURE that the progress is imminent. The continuous reminder of having to do the job is off your chest – literally. Instead they ensure you are always on tack. The downside? you need to talk to them nicely ALL the time and promote team work. You will learn to work with people, to simply put. Just don’t make the mistake of switching to a different person after having FOUND someone. Make the decision before giving the task to them. Instead of thinking, what is faster for completion, think, what is less emotionally costly (we are biological creatures after all) for both them and us (together).

    And you will note that breaking work into chunks of work has a longer completion date, but a short number of hours spent! Yes, if you add up all the number of total hours taken taken to complete the project, it has taken very less number of hours. So you just have to pay for the hours your team worked right? Neat! Great budget saving. However, do you ALSO expect a shorter completion date — too bad, you are unscientific, to simply put, just like my previous employer – lol.

    To build strength, add two or more tasks taking equal durations together without gaps. Start with two and if you fail half way on the second one – its okay. And Congratulations you just found how to build strength while still keeping up your endurance.

    So, this is what I call the Endurance/Strength Ratio. Let’s better understand this from the Project Management/Team perspective.

    When two people work together, they could be considered as a single different person altogether. So its not you anymore. Its not that person anymore. Think of it as a whole new person. A team. A company. In Software development, executing/completing a task takes a lot of thinking (very obvious and funny, I know :) ), however, the point is, the way how a team thinks could be completely different from the way how each and every person thinks in the team. So, I think, there should be a balance maker doing the job of monitoring and balancing this getting the most out of your team ALL the time. (In a two person team it is just YOU). This is a Key role. As important as coding. A coder is a leaf in a tree, a project manager is the trunk of the tree taking all the weight and pressures from the individual leaves.

    If you are keeping your team’s performance high, think of it as holding a big bucket of water high – yes, there is a lot of potential energy involved, for long periods of time. There is another fact here, to keep the water from spilling out. Although the chances are less, it is possible that you may spill water from the bucket itself – You cannot pour back spilled water when you are busy lifting it over your shoulders already – Can you? So, more importantly, as a project manager (and a side architect between projects, to keep up with my coding experience from a developer perspective, for better or worse), I tend to ensure that nothing is lost. If I can’t stand for any longer, I keep the bucket of water down, just for some time. Take the rest the team needs to get the project back on track.

    So the lower the ratio, the faster you get things done, with a shorter completion date.

    I work in two teams. My first team has a ratio of 0.86. We get things done 14% faster. And my other team has 1.41 (too bad, the second needs more strength development, on the bright side, the team has a greater endurance).

    So what is your Team’s current Endurance/Strength Ratio in Software/Web Design/Development?

    Categories: Uncategorized Tags:

    jQuery radioClass

    March 15th, 2011 Mhmd Shrf No comments

    Here is a snippet:

    $('ul li').click(function(){
        $(this).addClass('selected').siblings().removeClass('selected');
    });

    I found an easy way to emulate a list of li elements to behave like radio buttons, with the above snippet of code. Very Useful in menus and navs.

    Let me know if you want me to write an example.

    Categories: coding Tags: , ,

    Include jQuery from Google CDN (Snippet)

    March 13th, 2011 Mhmd Shrf Comments off

    jQuery from a CDN! Oh Yeah!

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" language="javascript"></script>

    Just the URL:

    https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js

    These are production ready. Yes!

    Or if you prefer something quick for development, here is one:

    <script src="http://code.jquery.com/jquery-latest.js"></script>

    Best snippet! ;)

    Categories: coding Tags: , , , , ,

    GEdit+Gmate plugins+Twilight/VibrantInk theme = TextMate Alternative for Windows

    March 2nd, 2011 Mhmd Shrf 2 comments

    YES, Finally! A very simple, so lightweight and powerful text editor =)

    Download gedit from: http://ftp.gnome.org/pub/GNOME/binaries/win32/gedit/2.30/gedit-setup-2.30.1-1.exe

    Or from:http://projects.gnome.org/gedit/

    Download gmate plugins and styles: https://github.com/gmate/gmate/zipball/master

    Ref: https://github.com/gmate/gmate/

    Install gedit. Go to your Gedit plugins dir: C:\Program Files\gedit\lib\gedit-2\plugins\

    Extract the gmate contents. Now, launch GEdit and configure ur plugins from Edit->Preferences!

    There you have it! A free text-mate for Windows!

    [EDIT]: Edited as per user feedback, Thanks to Pedro Aspiazu.

    Categories: development, environments Tags:

    Rails 3, jQuery and jrails

    February 21st, 2011 Mhmd Shrf No comments

    For my existing rails 3 project, I installed jrails plugin from the main author’s github site:

    https://github.com/aaronchi/jrails

    using the following command

    $ rails plugin install git://github.com/aaronchi/jrails.git

    and it looks like the jquery libraries were pulled into ./public/javascript/

    However, javascript_include_tag :defaults did not work. It looks like you can get jquery :defaults specified only when you create the app using -J parameter.

    as in

    $ rails new myapp -J

    - So I had to use:

    <%= javascript_include_tag 'jquery', 'jquery-ui', 'jrails' %>

    to keep moving on.

    But then I found this:

    https://github.com/lleger/Rails-3-jQuery

    and installed the rake template as per the site (for my existing project) did this:

    $ rake rails:template LOCATION=https://github.com/lleger/Rails-3-jQuery/raw/master/jquery.rb

    and

    $ rake jquery:update

    Guess what? I am now able to use the following custom javascript expansion (which came along with the rake template):

      <%= javascript_include_tag :cdn %>

    I restarted the server and it worked great.

    ALSO, if you want to add your own custom javascript expansion, follow this.

    Categories: coding Tags: , ,

    A couple of words required for new FB app

    February 20th, 2011 Mhmd Shrf No comments

    Require a couple of words for new Facebook app. Your suggestions?

    Categories: Uncategorized Tags: