[Video] Plugin Tutorial

[Jordan]

Demonstrates how to create a basic plugin for the Proboards version 5 software. It also covers a few standard web development tricks that you should know about when doing any kind of web development.

Be sure to view in 1080p HD in full screen mode!

Part 1
Part 2

Plugin Download

Basic Debugging Guide (Chrome) - Note that you may need to read the thread first for some of the images to make sense since I made this guide for the thread's creator.

[Peter]

Good job Jordan

What did you use to record with in the end?

[Jordan]

Thanks.

I used Microsoft Windows Encoder. Although there is a 10 minute limit if you don't buy it, I recorded the video in parts anyway. You may notice there are a lot of sudden "jumps" where one recording ends and another begins. It gives great quality which you guys can hopefully see in the 1290x1080 HD resolution. It doesn't look that great if it's not in full screen mode, though. At least for me.

[Xikeon]

Great tutorial, Jordan. Pretty sure it will help a lot of people.

Noticed you used each to iterate over the title bars. Why not just go with a selector for that as well? Then you basically skip the each and instantly go to the title bar (click).

$('#content div.container.boards div.title-bar').css('cursor','pointer').click(function() {
    var boards = $(this.parentNode).find('div.content.cap-bottom');

But maybe iterating is faster, I haven't run any benchmarks..

Edit:
I decided to run a benchmark, because I suspected to iterate over TD's would be way slower, and it seems this is correct.

At only 100 iterations this is already a pretty big difference:


With the following benchmark:
var loop = 100;

console.time("first");
for(var i = 0; i < loop; i++) {
    $('#content div.container.boards').each(function () {
        var board = $(this);
        var title = board.find('div.title-bar');
    });
}
console.timeEnd("first");

console.time("second");
for(var i = 0; i < loop; i++) {
    var title = $('#content div.container.boards div.title-bar'),
    boards = $(title.parentNode).find('div.content.cap-bottom');
}
console.timeEnd("second");


This was tested with the latest stable release of FireFox. The latest stable release of Chrome shows a smaller difference, but it's still there (around 5-10ms difference on same benchmark).

[Jordan]

Good question and thanks for watching the video. The reason is because I took my original code and stripped out a lot, originally thinking I was going to implement most of the script.

Below is the full method, and although I could have still done what you did above, speed is not always my main concern. The code below is cleaner and easier to read for me, so although your benchmark shows one solution is faster, you have to do that 100 times to get a result which is not going to matter when the code is actually being used. If the script was going to be executed over and over like that then I would have taken efficiency into account, but since it's not and nobody will be able to tell the difference, I prefer more readable code. You're right, though, I should have done what you did above for the tutorial since I wasn't doing all the extra stuff below.

      collapseCategories: function() {
            var self = this;
            var jsonData = {};

            $('#content div.container.boards').each(function() {
                  var board = $(this);
                  var title = board.find('div.title-bar');
                  var category_id = board.prev().attr('name').split('-')[1];

                  // Retrieve the stored data which is either a 0 or a 1
                  var category_data = jsonData[category_id] = self.get(category_id);

                  // If there is data stored for this category
                  if(category_data != null && category_data == 1) {
                        board.find('div.content.cap-bottom').hide();
                        self.showNewBackground(board, true);
                  }

                  title.css('cursor','pointer').click(function() {
                        var boards = $(this.parentNode).find('div.content.cap-bottom');
                        var category_id = $(this.parentNode).prev().attr('name').split('-')[1];

                        if(boards.is(':visible')) {
                              if(self.animate) {
                                    boards.slideUp(self.animation_speed);
                              }
                              else {
                                    boards.hide();
                              }

                              self.showNewBackground(board, true);
                              jsonData[category_id] = 1;
                        }
                        else {
                              if(self.animate) {
                                    boards.slideDown(self.animation_speed);
                              }
                              else {
                                    boards.show();
                              }

                              self.showNewBackground(board, false);
                              jsonData[category_id] = 0;
                        }

                        // Save it to local storage
                        window.localStorage[self.localStorageKey] = JSON.stringify(jsonData);
                  });
            });

            // Save it to local storage
            window.localStorage[this.localStorageKey] = JSON.stringify(jsonData);
      }
};

[Xikeon]

Well, there's a better explanation. Yea, to me it seemed like you changed the old code to the new one, without any changes in structure (even though that's what you should do when changing to e.g. jQuery). I understand your points though, but in some way they are relevant. Because you're plugin is not the only one which will loop over the boards, there's going to be many more. Each and every one of them is going to add extra time to the loading of the site, which in the end can definitely make a difference (especially on (older) devices and mobile phones). Not everything has the Google V8 engine. But I understand your point (and with the full code it is a more obvious way of doing it).

[Jordan]

Nov 28, 2012 2:29:34 GMT -8 Xikeon said:

Well, there's a better explanation. Yea, to me it seemed like you changed the old code to the new one, without any changes in structure (even though that's what you should do when changing to e.g. jQuery).

I just want to point out that I wanted to call each() in the tutorial since I've noticed people don't fully understand it (I've been asked about it by more than one person). That's one of the reasons why I chose to use this particular code, so when I was stripping out code I didn't even think to get rid of it. I would have ultimately chosen a different code if I had gotten rid of it in this script.

Nov 28, 2012 2:29:34 GMT -8 Xikeon said:

I understand your points though, but in some way they are relevant. Because you're plugin is not the only one which will loop over the boards, there's going to be many more. Each and every one of them is going to add extra time to the loading of the site, which in the end can definitely make a difference (especially on (older) devices and mobile phones). Not everything has the Google V8 engine. But I understand your point (and with the full code it is a more obvious way of doing it).

That's a good point, and I have to be honest that I hadn't thought about the efficiency of each() compared to pure selectors. It makes sense, though, because of all those functions calls. Most of my time programming is spent in C++ and Java, so I should have thought to look over my code knowing more hard core web developers would be out there watching me.

This is also one of the reasons why I've become so concerned with readable code, because a lot of C++ code (in large applications) is hell to work with.

Edit: I've linked to your post in my video in case people are interested since it is a better solution.

[Wormopolis]

if you manipulate the html inside each one (using .html()) dont you HAVE to use .each()?

[Xikeon]

No, your changes will affect all matched elements with your jQuery selector.

[Wormopolis]

right, but if the html is going to be different for each one, and USES the existing html inside you would have to use .each() right?

Im not trying to fight or anything.. Im still green with jQuery

[Xikeon]

If you need it to be different for each element you should indeed use e.g. .each() or a more specific selector.

[Former Member]

Nearly a month later...

Thanks for this, Jordan! It took me a while to gather up the cajones to watch it, but I'm glad I did. I've never worked with jQuery before, so I'm sure I'll be referencing this a lot as I try to piece a plugin of my own together. It's one thing to make codes for others to use and a whole different thing to show greenhorns how it's done so they can, too. Your use of terminology and detailed explanation for each line of code is awesome and I'm glad you did it in video form since I (like the majority of mankind) am a visual learner. Not everything clicked, but I'm sure whatever I didn't understand will make a lot more sense upon implementation.

tldr; Thankyouthankyouthankyou!~

[Jordan]

Dec 21, 2012 0:15:17 GMT -8 @kipp said:

Nearly a month later...

Thanks for this, Jordan! It took me a while to gather up the cajones to watch it, but I'm glad I did. I've never worked with jQuery before, so I'm sure I'll be referencing this a lot as I try to piece a plugin of my own together. It's one thing to make codes for others to use and a whole different thing to show greenhorns how it's done so they can, too. Your use of terminology and detailed explanation for each line of code is awesome and I'm glad you did it in video form since I (like the majority of mankind) am a visual learner. Not everything clicked, but I'm sure whatever I didn't understand will make a lot more sense upon implementation.

tldr; Thankyouthankyouthankyou!~

I somehow lost track of this thread, so two months later...

Glad you got something out of the video, and if you ever have any more questions feel free to ask. I went through the video again and kept wishing I had said a few more things, but there was just too much to say. I should have explained the error message in the console, and should have specified which methods were from jQuery and which weren't, but oh well.

[sussoloc]

I realy enjoyed your videos and for the first time got very interested in someone coding, only thing was you did not show the end of the plugin how to finish it in the builder. unless i missed something. but anyway thankyou.

[P̌̓aͧś̀t̀u͒le͆o͂2̀3̃̓]

Apr 20, 2015 9:56:21 GMT -8 sussoloc said:

I realy enjoyed your videos and for the first time got very interested in someone coding, only thing was you did not show the end of the plugin how to finish it in the builder. unless i missed something. but anyway thankyou.

After that video ended, all he had to do was click save and it's already running. If you want to share it with other's you click the export tab and choose computer.