Month: November 2015

WordPress is rubbish.

WordPress, a procedural set of scripts half acting like object orientated code that when you do poke around under the hood you will quickly become lost. Try follow the documentation to attempt to build anything other than a blog and you will hit wall after wall after wall. The naming conventions, the structure is extremely sub par.

Get a pluggin. Great… but the chances are that the coding style, documentation etc etc are at a sub par standard.

There are so many sites out there built with wordpress, it’s crazy!

WordPress is shit for anything other than a std blog. If you need to start selling anything, applying any real user roles and policies, want to do anything other than use pluggins out of the box… look for something else. There are a whole load of alternatives that will give you the freedom to create something much more modern and secure.

/xmlrpc.php for a starters… and that is core of flipping wordpress right there!

/wp-admin/admin-ajax.php?action=revslider_show_image&img=../wp-config.php HTTP/1.1 for seconds… it is like the people who made this plugin wanted to make something really popular and hackable.

Seriously, save yourself the agro. WordPress is where you go when you don’t want to write any code and only want to write a blog.

Write browserify to file using the API

Note the event we are listening out for on the completion of writing to the write stream, “finish”.. not “end” 🙂

var fs = require('fs');
var browserify = require('browserify');

module.exports = function( callback ) {

    callback = callback || function(){};

    // Create a write stream for the pipe to output to
    var bundleFs = fs.createWriteStream(__dirname + '/public/browserify/bundle.js');

    var b = browserify({standalone: 'nodeModules'});
    b.add('./browserifyMain.js');
    b.bundle().pipe(bundleFs);

    //now listen out for the finish event to know when things have finished 
    bundleFs.on('finish', function () {
        console.log('finished writing the browserify file');
        return callback();
    });
};

Jquery ui drag and drop, sketchy mockup

http://jsfiddle.net/S4QgX/755/

Include jquery UI of course 🙂

Html:



Warenkorb




    
	
  • product 1
    • 
	
  • product 2
    • 
	
  • product 3
    • 
	
  • product 4
    • 
	
  • product 5
    • 




<h1 class="ui-widget-header">Bildermappe</h1>



    
	
  • product 6
    • 
	
  • product 7
    • 
	
  • product 8
    • 
	
  • product 9
    • 
	
  • product 10
    • 




</div>



Drawing board




    
	
  1. Add your items here
    2. 




</div>

CSS

h1 { padding: .2em; margin: 0; }
#products { float:left; width:200px; height: 600px; margin-right: 20px; }
#products ul {list-style: disc; padding: 1em 0 1em 3em;}
.shoppingCart{ width: 400px; height: 400px; margin: 20px; float: left; }
/* style the list to maximize the droppable hitarea */
.shoppingCart ol { 
    margin: 0; 
    padding: 1em 0 1em 3em; 
    list-style-type: decimal;  
}
.shoppingCart li { 
    background-color:green
}

JS

//kicking off the initial draggable items
$("#products li").draggable({
    appendTo: "body",
    helper: "clone"
});
//allowing the src bins to be targets themselves
$("#products ul").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var $dragged = $(ui.draggable[0]);
        var productid = $dragged.attr("data-id");
        
        if ( $(this).find("[data-id=" + productid + "]").length ) return;
        
        var $li = $dragged.clone();
		
        //now append to self
        $(this).append( $li );
        
        //clear out the old styles
        $li.removeAttr('style');
        $li.draggable();
        
        
        //now remove the floating draggable obj
        $(ui.draggable).remove();
     }
});

//the shopping cart drop zones
$(".shoppingCart ol").droppable({
    activeClass: "ui-state-default",
    hoverClass: "ui-state-hover",
    drop: function(event, ui) {
        var self = $(this);
        self.find(".placeholder").remove();
        var productid = ui.draggable.attr("data-id");
        if (self.find("[data-id=" + productid + "]").length) return;
        var $li = $(ui.draggable).clone();
        $li.draggable();
        $li.resizable({
          aspectRatio: 16 / 9
        });
        $li.appendTo(this);
        
        //now remove the src
        $(ui.draggable).remove();
        $('body').find('.ui-draggable-dragging[data-id='+productid+']').remove();     }
});