On data retieval

HTTP Requests are not fast... Well I guess they're sorta fast, if you do one. But if you do 300... not fast. As a matter of good practice and good user experience I've found that getting large blocks of data at a time to be much better than going back to the server for every element on the page.

Duh! Right? Well, this didn't really dawn on me until about 6 months ago. I wanted the data on a reporting page to filter when certain things were clicked on. It's sooo much faster to filter down the data you've gotten using Array.filter() rather than getting small pieces here and there. It would have made sense then too, but I didn't know how to filter the data. Then, when I started to figure that out, I noticed that when I would filter the data, that it would change in every instance. And then I learned the magic of scopes.

Scopes are basically levels at which data is kept. Turns out, that putting "var" in front a variable declaration makes it a local variable. I thought that the opposite was true for a very long time and I had a very bad time. If you don't understand javascript scopes, it is a topic worth every second of your time invested. Same with Array filtering, my life has been forever changed, and my code... so much more stable.

I would offer an example article but they're easy to find and I'm sad to say that I've lost the link to the best one ever. I'll update this post down the road when I find it again.

jQuery eVent dElegation

One of the banes of my existence has been interacting with dynamically created elements within an html/jQuery web application that I've been developing. Lots of html elements need to be created, moved, deleted, updated, etc.  If an element was around when events where attached to a specific group of elements, it misses out and doesn't get to play like the rest of the kids in the playground. It has to just sit there and watch.

Luckily the .on() method in jQuery gives these new elements legs. I swung across a great explanation of event delegation on an extremely reputable, highly authoritative, source called stackoverflow

Case 1 (direct):

$("div#target span.green").on("click", function() {...});

== Hey! I want every span.green inside div#target to listen up: when you get clicked on, do X.

Case 2 (delegated):

$("div#target").on("click", "span.green", function() {...});

== Hey, div#target! When any of your child elements which are "span.green" get clicked, do X with them.

Summary

In case 1, each of those spans has been individually given instructions. If new spans get created, they won't have heard the instruction and won't respond to clicks. Each span is directly responsible for its own events.

In case 2, only the container has been given the instruction; it is responsible for noticing clicks on behalf of its child elements. The work of catching events has been delegated.

http://stackoverflow.com/questions/8110934/direct-vs-delegated-jquery-on
The benevolent author here is N3dst4

I really couldn't have said this better myself, that's why I let n3dst4 say it for me. This is not something new for me. But it's still worth repeating. My challenge comes when I need to attach some functionality without having an event to pass to the .on() method. This usually happens when I want to apply a plugin and it's options to the kids at the playground.

Example anyone? ok.
In my web application, I need to make new blocks of elements and make those blocks be droppable in-other-words, I need them to be appropriate receptors for draggable elements(yes I'm cheating and letting jQuery-ui do the stuff they're good at). Turns out, if you have 20-30 elements containing 40-50 elements more elements that you want to make droppable, it becomes unreasonable to run the function that makes all the elements droppable again every time you add one more set of drop-locations(gets really slow). So, how do I delegate the droppable functionality? I had a rather difficult time figuring out that I could simply run the droppable function when adding the new element.

First, I wanted the options to remain consistent and DRY. So I put the options object in a variable.
var droppable_options = {accept: '.some_class', drop: some_function(){...}, ...}

Those options where passed to the elements on initialization.
$('.drop_location').droppable(droppable_options);

Then while adding the new drop locations I was able to make them droppable in the same line of code
$('<div class="drop_location styling_class"></div>').droppable(droppable_options).appenTo('#container_element');

It just seemed to simple to be true. But sure enough, before I knew it, I was "it", the new elements were hiding, I was seeking, everybody was playing nice.

I came away from this with a couple of things:
1. Never target elements that may be coming or going, always target their "anchor" elements and delegate to them.
2. Delegation doesn't work so well with plugin functionality but there is a nice work around.
3. Learn more about event listeners. ( $(element).on('custom_event', do_something(){make myself differnt}) and $(another_element).trigger('custom_event');  ) I'm hoping this will simplify things.

Kohana Auth Roles

After using Wordpress for quite some time, I've learned quite a bit about PHP. I've got to give props to the Wordpress community for being a wonderful teacher, and now I've started working with a PHP framework.

The PHP framework of choice is Kohana 3.3.2

I've started building a site and need to create a user login system with several user roles akin to Wordpress.

Let me start with a description of my environment.

I've enabled a couple modules so far, Auth, Orm, and Database.
I've built a website controller which extends Controller_Template.
I've made a User controller and Model (which I might mention now that much of the work is done already, so check the Orm Module classes and view the Auth stuff if you are having troubles)

The Problem which I have just overcome cam into play when I started fiddling with the built-in Roles. Once I changed those in the database from "admin" and "login" to "admin","owner","scheduler","assistant", and "member". Once I had done this, I was unable to login.

The problem: The _login() function validates the user's role against the "login" role. If that role doesn't exist, no user can login. I found that function in modules/orm/classes/Kohana/Auth/ORM.php. Changing that file is bad form btw. So, it's best to follow the cascading file system to create a duplicate of that file with your changes that will take priority in the load order.

There are more details to come but I thought I would get my findings out as fast as possible.

Wordpress 3.9.1 custom post type problem

I have several custom post types on several web sites. Not long after the update to 3.9.1, my users informed me that one of the post types was no longer visible. I could still access it by going to wp-admin/edit.php?post_type=[custom-post-type-here] however, the link on the admin bar was gone.

The solution that I found was to set the add_action() priority to 2 on a couple of them.

[update]

This "fix" doesn't seem to work consistently in all cases. When trying to duplicate the solution I was unable to achieve the intended result. Alternatively, I have noticed that Wordpress doesn't seem to like showing more than 5 custom post types.

Wordpress Child Themes, the magic and the purpose

When I first learned about child-themes and how they were made I became two things. Lost and Confused.

Lost? Yes lost. Even though I was reading how to make a child theme, I had no way to put it into practice and I didn't have a reason to do so. It wasn't until I learned the reason for making a child theme and until actually attempting to do so, that I was found.

I had a client that wanted to use a specific theme for their site. They just wanted modifications made as is expected. I wanted my client to be able to manage their own website for as long as possible after my work was done. This might be the wrong strategy for my bank account but I like to give the customer what they 1. Need, 2. Want, and 3. Pay for. And I hope to have customers that return because they want to, not because they have to. But I digress.

In order to prevent my work from being overwritten during an update I searched for a way to keep my modified files separate from the original theme. This is where I found The Purpose. Let me write this clearly. What is the purpose of a child theme? The purpose for creating a child theme is to make changes to an existing theme that will persist throughout future updates to that theme.

The Client reaps all the rewards for having a theme modified in this way. The clint has probably paid for the original theme and was likely promised new features and patches in the form of future updates. The client will be notified of these updates by the original theme developer and will likely want to install those updates. Who wouldn't? New = Awesome and Exciting! By telling your client "Don't update this theme or all the customization will disappear" you are removing value from the theme. And you know they're going to forget anyway and click the button when it shows up. You could disable the updates by changing the theme such that it doesn't recognize itself anymore, but that's just cruel, and again you are removing value from the original developer's work.

I though making a child theme would be complex. It's not.

Allow me to explain how things work before sending you to the codex to look at the actual code. To make a child theme, you just make a new theme folder, as if you were creating a new theme and start with a style.css file. In that file you use some special syntax that Wordpress understands and basically tell Wordpress where to find all the files it needs. You can add styles if you wish at this point which will load after the original styles. In fact, all of the files that you create in your new child theme will work similarly to this. They will load either along with (after) their counterparts in the original theme or instead of them.

For example, let's say we make our style.css file, write the necessary code and then we make a page.php file in the same directory. When a page is loaded in Wordpress, your new page.php file will be used instead of the one in the original theme's folder, while everything else will be loaded from that parent(original) theme. The header, the footer, the functions... everything that would have been loaded if you had the parent theme active will load as if that theme were active. If you make a functions.php file and add code to it, it will load along with the parent theme's functions.php file (so make sure not to duplicate functions as it will cause php errors).

You must put files in the same directory structure as the parent theme if you wish them to be used in place of those original files. If an include is set to retrieve /js/some_crazy_script.js and you wish to modify that file, create a "js" directory and either copy the file from the parent theme and modify it, or create a new one with the exact same name and write it differently. Wordpress will then use your version of some_crazy_script.js instead of the original file.

Fairly straight forward. The trick is knowing which files are instead and which files are loaded along with the parent theme's versions of those files. Most use the "instead of"method, I believe. It also helps to know if the files are being loaded before or after the parent theme's version of that file.

To begin making your own child theme visit the Wordpress Codex - Child Themes.

Off-topic

I was just attempting to use my Nexus 7 to scan a paper hoping that I could use some OCR on it. Well it worked, but it was not exactly clear how to do so. Therefore, I thought I would try to help anyone that might be looking for the same thing later by documenting what I learned.

1. On Android device, open Drive app
2. Click "+" and select "Scan"
3. Confirm scan and it will upload
4. On a computer, open drive.google.com and find the uploaded scan. (mine was named "scanned_20130812-1358.pdf")
5. Clicking on the pdf will open it in preview mode, in the bottom-right will be an "Open" button which will open it in the Google Drive Viewer.
6. Go to File->Open with, and select "Google Docs"
7. You will now see the pdf at the top of the doc and the OCR content below.

Changing the navigation html

When I started making/modifying Wordpress themes I was unfamiliar with PHP. Then it came time to change a navigation menu. I searched and searched for the html that was to be used to construct the menu. Much can be done with CSS and I know much more than I did then. However, I needed more html elements to style.

When Wordpress builds a menu that has been created in the "appearance->menus" section of wp-admin  page, it uses what they call a "Walker". Essentially, it loads the database entry where the menu is stored which is just a long string of letters and symbols and cuts it into pieces and wraps those pieces in html. To change the html that it writes you can do it the hard way (which is what I did) and write a custom walker, or you can simply add some options when inserting the wp_nav_menu() function.

We are doing this already when we insert a specific menu this example would insert the menu named 'my main nav menu'

<?php
wp_nav_menu( array('menu'=> 'my main nav menu') );
?>

The same thing can be done by putting that array into a variable like so...

<?php
$parameters = array('menu'=> 'my main nav menu')
wp_nav_menu( $parameters );
?>

This is what is going on in the Wordpress Codex mentioned earlier

<?php
$defaults = array(
 'theme_location'  => '',
 'menu'            => '',
 'container'       => 'div',
 'container_class' => '',
 'container_id'    => '',
 'menu_class'      => 'menu',
 'menu_id'         => '',
 'echo'            => true,
 'fallback_cb'     => 'wp_page_menu',
 'before'          => '',
 'after'           => '',
 'link_before'     => '',
 'link_after'      => '',
 'items_wrap'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
 'depth'           => 0,
 'walker'          => ''
);
wp_nav_menu( $defaults );
?>

To wrap each anchor tag in something like say "<div class='something'></div>"
change the above parameters (The Wordpress Codex uses the word defaults) change it to look like this

<?php
$parameters = array(
 'menu'            => 'my main nav menu',
 'link_before'     => '<div class='something'>',
 'link_after'      => '</div>'
)
wp_nav_menu( $parameters );
?>

Looks easy right? That's because it is.
The parts where the defaults use things like '%1%s' and '%2$s' and '%3$s' are inserting variables.
Try it out and see what happens when you put stuff in for the 'before' and 'after' parameters.