Right tool for the Job

I’m still keen as ever and enjoying the experience of developing a browser extension. Last week was the first time I hung out in Google Hangouts with Jan and Florent. On first impressions Google hangouts is pretty sweet. It was smooth and clear(I’m not sure how much of that was down to broadband speeds and connection quality). I learnt so much in that first one hour session and enjoyed chatting to them face-to-face (in digital terms).

TOO COOL to Minify & TOO SASS’y for tools

One of things I learnt was how to approach JS/CSS now my front-end Developer head tells me to always minify and concatenate files to reduce HTTP request. While from a maintenance side, look to using a CSS pre-processor for variables etc. Now when it comes to developing browser extensions you do not have the same issues because of the following reasons:

  1. No HTTP requests are done because the files are actually packaged with the extension and therefore installed on the client machine anyway. Theres also NO network latency because of this.
  2. File sizes aren’t that important as browser extensions (for Firefox at least). The extensions are packaged up in such an effective way that its basically zipping all the contents together so “reducing” the file sizes anyway.
  3. Whilst attempting to fix an issue I came across Mozilla’s implementation of CSS variables, which sort of solves the issue around css variables and modularise the code.

Later today, I’m scheduled to hangout with Jan again and I’m thinking about writing another post about XUL

Advertisements

New Year…..new opportunities.

I have been meaning to get to grips with Git and Github to help contribute towards an Open Source project and the community. My main excuses have been trying to find a suitable repository but found that it was either a project that had little support both from the owner as well as the community or had a large following with far to much noise for a beginner. I didn’t even attempt to go for large project like jQuery or bootstrap as I consider that to be on a whole new different level.

The Seed

Recently I’ve been trying to teach a junior developer at work how to debug and develop using Firefoxes Firebug extension (The only devtool my team has for developing/debugging the frontend). There was a really useful extension for Firebug called fireQuery that extended Firebugs capabilities and assist with developing/debugging projects that used jQuery. I noticed that the latest version of fireQuery no longer works because it is not compatible with Firebug 2+. I made contact with fireQuery owner who was really supportive with the idea of me getting the plug-in back up to speed.

Water, light and love

After learning that Firebug 3 (dubbed FireBug.next) was on the horizon and that it would basically be a complete re-write. I decided to push for fireQuery to be compatible with v.3. At first it seemed like climbing Mount Everast trying to get my development environment in order because of the following reasons:

  1. I’ve only ever developed for the Web and never thought of developing for a browser.
  2. As Firebug.next is going through a considerable amount of change (Supporting e10s, using the native Dev Tools, remote logging). I found the documentation and guidance notes a bit confusing in terms of what you needed. It wasn’t so much the fault of Firebug but also Firefox itself that I’ll explain in the next point.
  3. Firefox seems to also be going through a transition. The extensions for it was previous built using a SDK (Software Development Kit) called cfx. cfx is based on python and becoming deprecated. It is being replaced with a SDK called JPM. Jpm is based on nodeJS, which for those who don’t know is server-side JavaScript.

Flowering

Having scratched my head a couple of times and asking myself  “why on earth I was thinking of starting this” I decided to try get in contact with the Firebug team to let them know of my plans. The easiest way to get hold of the team is through #firebug IRC channel. Since that first conversation, they have managed to persuade me to contribute to Firebug instead. Its only been a couple of weeks but I’ve learnt so much. It’s been really interesting but sometimes mind-boggling when you think that you are effectively trying to debug a debugger.

Some of the things I’ve come to learn about the SDK cfx and jpm. Initially I thought that I needed to install both of them but after chatting to Jan ‘Honza’ Odvarko  (Team Leader) and Florent it was clear the guidance was outdated and in fact JPM is the way to go. JPM isn’t as well documented mainly because it’s still relatively new and you can’t actually submit plug-in built with JPM to the official plug-in repository.

Another important point is that you don’t have to download and install the addon-SDK, which again I thought was a requirement. Addon-SDK is actually included in Firefox and you the only reason you would want to download/install and use it when you ran jpm is to try it out with another version of addon-SDK (i.e the latest and greatest version).

I’m hoping to blog a bit more about what I have learnt and explain my thoughts on the whole process.

Please leave me any comments or questions below and I will try and answer them as best I can.

jQuery Beginners and learning from ones mistakes

This morning my colleague asked me if I could help him debug some jQuery he was using. First off, I wasn’t to familiar with his dev environment and tools(Visual Studio 2010) as I’m familiar with ORACLE Application Express. It did bring back memories for me, those were the days when running code with breakpoints in VBA for Excel was the norm.

The Scenario:

User has a screen with some details of a record, It also has a checkbox to confirm they want to delete the record and a Button(id = “Click”) to submit

The Mission:

User has to tick the checkbox before clicking on the button. If the user doesn’t tick the box but clicks the button, a string containing some error message should be returned from the server.

The Code:

<code>
<script type="text/javascript">
  $(document).ready(function(){
    $(function(){$('#click').click('/myurl/errmsg/');});
  });
</script>
</code>

Apparently it was working when the inner part of the .ready() function was placed in a onload event. Firstly $(function(){}); is short hand for $(document).ready() so thats not needed. Not only is is needed but it doesn’t make sense, its basically trying to execute code that will execute(double execute) when the DOM is ready.

DID YOU KNOW?

By placing your script at the bottom of the page, you remove the need to wrap it in either $(document).ready() or $(function(){}) because by the time the browser starts processing your script the DOM you will be operating on has already been loaded and ready to be worked on.

Removing that leaved us with the following:

$(document).ready(function(){
  $('#click').click('myurl/errmsg/');
});

Looking better but even this would not work:

  1. The click method isn’t being passed the right arguments.
  2. What if the #click button is only added some time after the the first rendering of the page.

Firstly, my colleague was under the impression that if he passed a URL (or part of a url) the click event would make an ajax request. I pointed him to the official API documentation(http://api.jquery.com/click/). Clearly not the right arguments. Also what he wasn’t aware of was that by clicking the button it was causing the click event to bubble up through the DOM and then submitting the page which is the default action for a button.

So inside the function we now have :

$('#click').click(function(event){
  $.ajax({
    type: 'POST',
    url: 'myurl/errmsg/',
    success:function(data){
      //do what ever you want to do with the data that is returned
    }
  });
  event.preventDefault;
});

Even this isn’t brilliant because if you wanted to re-use the same code but perhaps triggered by another element or event you would need to copy or rewrite it. So it would be better to write it as a named function and then call that named function directly from the click event.

Secondly, this binding of the click event would only occur if the element was available at the time the page was first rendered. So if there was another ajax call that maybe returned HTML which contained this button and was then injected into  the page, the click event would not be attached to it. I highly recommended they delegate events at a highly level in the DOM using .delegate() jQuery method. I would have suggested they use the newer .on() method but they were using jQuery 1.5 and couldn’t update their version at this point in time.

I think looking at this code I realised just how far I’ve come over the last couple of years (pre-2009) watching yayQuery (http://yayquery.com/), #jquery IRC channel and various other sources. Its quick to forget how some terminology and concepts were difficult to start with until  you get your head around them and then becomes second nature once you do.

I think is important not to forget that everyone has to start some where so I urge the community to remember the following:

EVERYONE WAS A NOOBIE AT SOME POINT.

APEX and Security

So with APEX 5 on the horizon, I wonder what other neat hidden features will be included in this instalment.

I’ve certainly learnt a lot about APEX security in 4.1.

Did you know that APEX checks the order of the submitted elements?

IT DOES!!! As I’ve recently found out if you have some custom code that moves page items around and then try to submit the page your will get strange “Session State Protection” errors. Having checking the page to see if it was session state protected or read-only etc which they weren’t and not even the page had session state protection. So at application level with the session state enabled you have to ensure your page layout is submitted in the same order it was rendered.

So a little trick I did was to write some custom JavaScript that run on a beforePageSubmit event which would move all my items around.

Hopefully I’ll blog about some thoughts about APEX plugins and more jQuery.