We’ll meet from 6:30-8:00pm and then head to a nearby bar for more conversation.
Attending?
Atlantic BT’s new space is across from Crabtree Valley Mall
4509 Creedmoor Road, 3rd Floor
Raleigh NC 27612
Create your own javascript library in these fun, easy steps!
We all know about the performance benefits of putting all of our javascript/jQuery calls into .js files, so that browsers will cache the whole chunk on the client-side.
It’s even more tempting to put all of our complicated jQuery calls into a single file, thus further enhancing performance by reducing HTTP requests (i.e. the browser doesn’t have to download so many files).
However, have you ever taken a look at a site using the jQuery Cycle plugin on the homepage? If you open up the debugging console (firebug), go to a page without the slideshow, and I bet you’ll see a little message in the console like:
[cycle] terminating; too few slides: 0
This is because the cycle init code, while correctly put inside the DOM-ready function, is still being called on every page, regardless of whether it has a slideshow or not.
Most of the time you won’t even notice the extra overhead because jQuery fails gracefully, but it’s still traversing the DOM, looking for elements that aren’t there.
The solution is to encapsulate your code in a segmented library, and only call necessary aspects within the actual page. This has the benefits of:
The following section provides a summarized example with most of the principles involved. It will:
{ of sublibraries and methods with ///—- and the name of the library, to aid in navigation and organization
Then, in your actual page, reference your library with the public namespace variable (see yellow text at bottom).
var Mylib = (function($) { //reference “namespace”, scope wrapper, encapsulates jQuery
var LIB = { //internal name of library
/**
* Testing function – indicates if our library is present
*/
”’test”’ : function(){ $(‘body’).prepend(‘SPECIAL library loaded’); } //page directives or sublibraries
,
/**
* General tools
*/
”’tools”’ : {
/**
* Console-log wrapper
*/
”’log”’ : function() { if( window.console && window.console.log ){
window.console.log( Array.prototype.slice.call(arguments) ); }
}//— lib.tools.log
}///—- lib.tools
,
/**
* Search namespace – related to search box or pages
*/
”’search”’ : {
/**
* Helper function
* @param msg a message for the alert
*/
”’notify”’ : function(msg){
alert(‘Doin’ the search:’ + msg);
}//— lib.search.notify
,
/**
* Enable advanced search box
*/
”’toggleAdvancedSearch”’ : function(){
this.notify( ‘self-reference the sublibrary OUTSIDE’ ); //call the sublibrary outside anon-func
$(function(){ //waits for document-ready
var $advancedSearch = $(‘#site-search-advanced’)
$searchResults = $(‘#search-results’)
;
LIB.tools.log( ‘here’s an example of self-referencing’ ); //call the library internally
LIB.search.notify( ‘self-reference the sublibrary INSIDE’ ); //call the sublibrary inside anon-func scope
//hide by default
$advancedSearch.slideUp(‘3000’);
$searchResults.delegate(‘#refine-search’, ‘click’, function(){
$advancedSearch.slideToggle();
return false;
});
});
}//— lib.search.toggleAdvancedSearch
}///—- lib.search
};////—- lib
return LIB; // send the internal name back out
})(jQuery); //scope wrapper, encapsulates jQuery
Mylib.tools.log( ‘actually using the library’ ); //call the library externally
You could conceivably include more than one internal library (LIB, LIB2, etc) within your library scope. This is more for the following – #DOM wrapper like jQuery
You can also include DOM-manipulation within your library. In the “shipping estimator” example, the library has an internal myDOM object that takes an HTML #id tag and creates a new instance of itself, which has several attached methods. This is similar to how jQuery works.
You’ll notice that at the end of the scope wrapper, instead of returning the LIB internal namespace, it’s merging the properties of that library back on to the myDOM object with:
//attach sublibraries to manipulation object (to avoid writing an .extend method?)
for(func in LIB){
myDOM[func] = LIB[func];
}
return myDOM;
Again, this is similar to how jQuery extends itself (also see the “Build Your Own Library” reference).
See attached files – I apologize that these are mostly out-of-context, and probably have too much extra junk to be very simple to follow, but should give you an idea of what you can do with a library.
Start up a business over a weekend. That was the premise behind this weekend long event that was hosted in Durham, North Carolina.
Nancy Jin, a co-worker of mine, and I attended the Start Up Weekend. Over the weekend, participants met the challenge created by the Start Up Weekend committee and outputted prototype Facebook applications, Mobile applications and websites that encapsulated an idea that was created and pitched by a participant.
Friday night, out of over 100 participants (evangelists and hackers – basically marketing specialists and developers), 54 people each had 60 seconds to pitch an idea. We then voted and picked which ones we wanted to work on. I landed a team of 2 other designers, two ruby developers, and three marketing specialists, with an idea of urban farming. We were then up till midnight figuring out what our plan was the next day.
8:30am – 12pm Saturday was spent surveying real people, defining problems, coming up with a solution and a base model for the business. Wireframing started at 2:00pm. By 4:00pm we had a logo and by 6:00pm we had a homepage. By 8:00pm we had a working site where people could log in and sign up, and by 11:00pm the rest of the pages were designed, functioning, and the homepage sliced out. Then I went and got some sleep.
The website was completed at 1:00pm the next day, and we had 5 minutes to pitch the idea against 17 other teams in front of everyone including a panel of judges.
We won.
Here’s the site: yardsprout.heroku.com
We addressed that local food is important for economic, environmental, and health reasons. Urban farming is important because we are utilizing fertile spaces that are otherwisewasted. People can grow their own gardens but for most people the toughest part is getting started. We wanted to first establish a business model where novices can seek master farmers to help them plant something, to eventually have the company provide people with gardening kits, which is where yardsprout could team up with brands like Lowes and Home Depot.
Some other cool stuff I got to do was working with github, some ruby on rails (it was like what? I think where I’m sticking my HTML makes sense), and a lot of SASS (my first time).
Friday – I did not plan on making a pitch but one of the hosts came by everyone’s tables and urged us to make a pitch, so I motivated myself to bounce ideas off of random people around me. I decided to pow wow with two random students from NCSU about business concepts. First one that we came up with was struck down by our very own Nancy Jin who saved me the embarassment of pitching a product that pretty much existed in the wild.
“Pivoting” is when you change a fundamental part of the business model. It can be as simple as recognizing that your product was priced incorrectly. It can be more complex if you find the your target customer or users need to change or the feature set is wrong or you need to “repackage” a monolithic product into a family of products or you chose the wrong sales channel or your customer acquisition programs were ineffective.
This most recent study comes on the back of an earlier survey E&Y carried out between between August and October 2010 found that 76 per cent of UK businesses questioned believe urgent and decisive action is needed or the UK will fall behind other countries that are prioritising cleantech as a sector of national strategic importance.
The survey I created was this:
Ah payment gateways. The, uh, gateway…to making payments. Yeah.
Previously called PHPurchase, Cart66 (and its free sibling Cart66 Lite) are full-featured e-commerce plugins for selling products via WordPress. Cart66 comes out-of-the-box with several integrated gateways: Authorize.net, PayPalPro, and PayPal Express. It also has a handy feature where you can add an Authorize.net-compatible gateway right in the payment options menu.
But, what if you need a customized payment gateway? Like, say TransFirst TransLink?
After purchasing/downloading Cart66 (I’m using the paid version 1.0.7), follow these “easy” steps —
contentpluginscart66adminsettings.phpcontentpluginscart66progatewaysCart66AuthorizeNet.php)initShortcodes() in contentpluginscart66modelsCart66.php, register the checkout shortcode itself like checkout_xxxgatewayxxxcontentpluginscart66modelsCart66ShortcodeManager.php, add the shortcode callback xxxgatewayxxxCheckout()$supportedGateways array in contentpluginscart66viewscheckout.phpPlease note that in step 1, I chose to simply add the gateway to the Authorize.net section of the Cart66 options, instead of creating a whole new section (like PayPal vs. Auth.net), as the parameters ended up being very similar. This means you only need to add the gateway URL (http://epaysecure1.transfirst.com/elink/authpd.asp) to the select-list (in /content/plugins/cart66/admin/settings.php), and processing is handled by Cart66.
The meat of the change, obviously, comes in your custom gateway class. Download the sourcecode for the custom class (attached).
I’ve added some additional methods not present in the original gateway abstract to help with processing and validation:
| Method/Property | Inherited From Abstract? | Description |
|---|---|---|
|
Yes, unchanged | internal storage for gateway parameters |
|
No | helper lists of potential fields – for validation, and in the case of TransFirst to keep track of everything |
|
No | Translates the gateway response code value (for TransFirst) |
|
Yes + | Modified constructor – add default fields and initialize the _possibleFields, etc. |
|
Yes, unchanged | just lists the available card types |
|
Yes | helper method to add fields to internal storage
Added validation to check if key is in _possibleFields |
|
Yes + | Gets the payment and billing details, then sets up the checkout properties. Added $mapFields loop to set up variables |
|
No | Process the string response into meaningful sections, and return transaction success or failure (with reason) |
|
Yes | Handles the curl (remote-request) to the actual payment gateway after building the post-string from the user submission.
Minor changes here – mostly remapping the different fields |
|
Yes, unchanged | helper methods for retrieving stuff |
Update: I’ve since found out about the built-in WordPress remote-request function wp_remote_post. I haven’t updated the source file, but any use of curl should be replaced with this function.
Update 2: Added the gateway URL per commenter request.
Progressive Loading is a technique whereby you automatically load content in a webpage after set intervals or triggers, such as when the user scrolls in the vertical direction. With the advent of easier AJAX, and probably helped by some popular examples, progressive loading is gaining traction as another shiny bauble in the modern web development toolkit.
But why is it useful? For a more definitive answer, I plan to nag my UX teammates to follow up with their perspective, but I can still tell you a couple things:
However, there are two potentially important caveats to consider:
So where’s the beef? Stay tuned for a quick intro on a really slick implementation of progressive loading using jQuery Waypoints (credit for the find goes to fellow dogbone castaway Chad Quigley).
Need a simple solution for a “members only” WordPress page? “But password-protecting a single page is part of WP core!” you say — and you’re right, except if you want to display additional content not part of the protected post. Read on for how to customize a post template to protect category loops and other page elements.
When creating content, you can hide it behind a simple password on the right sidebar under “Visibility” — choose “Password protected”, and enter your password. As long as you don’t need the precision, this avoids the complication of multiple user accounts and role/permission integration.
However, if you are using a custom template on a “category” page (i.e. you have an additional query loop for other content) like, say, a products page for a store, or member database then you’ll need to wrap the additional content in a password check.
Fortunately, Codex to the rescue — all you need is the simple function call post_password_required(). Wrap an if-else clause around the additional queries, and you’re done!
Example:
<?php get_header(); ?> <div> <div id=”content” role=”main”> <?php //initial loop for calling page if ( have_posts() ) while ( have_posts() ) : the_post(); … stuff … ?> <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>> <div> … </div><!– .entry-content –> </div><!– #post-## –> <?php endwhile;//—- end post loop //only do the following if the calling page is allowed if(!post_password_required()): ?> <div> <?php query_posts( ‘post_type=abt_member’); // calls in all posts of the custom type ?> <?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?> <div <?php post_class(); ?>> … stuff … </div><!– #products –> <?php endwhile; ?> </div> <?php endif; //—- !post_password_required() ?> </div><!– #content –> <?php get_sidebar( ‘store’ ); ?> </div><!– #container –> <?php get_footer(); ?>
Strangely, WordPress doesn’t allow you to “log out” of password-protected pages, and it doesn’t seem like deleting cookies makes a difference. Of course, someone made a plugin that’ll take care of that — install the plugin, then add the following to your template:
do_action(‘posts_logout_link’, ‘TEXT ON THE LOGOUT LINK’);
Further reading – Digging into WordPress – password protect more than the content.