jQuery global event

Simple and easy. Took me about 5 minutes to figure that jQuery could do this.

$("#A").on("click", function(){
    $(document).trigger("custom");
});
$(document).on("custom", function(e){
    $("#B").removeClass("hidden");
});
$(document).on("custom", function(e){
    alert("something");
});

Best to namespace events, use jQuery’s namespacing or on your own (examples below).

I used it for something more like this:

$(document).trigger('paymentmethod:successfulSave');
$(document).trigger('paymentmethod:cancel');

$(document).on('paymentmethod:successfulSave', function(){
    console.log('save');
    //refresh payment methods
});

$(document).on('paymentmethod:cancel', function(){
    console.log('cancel');
});

http://stackoverflow.com/questions/23782786/jquery-trigger-custom-global-event

Continue reading jQuery global event

Mac OS X Bluetooth Dongle

I have a 2011 27″ iMac which only has bluetooth 3.0.

I purchased a SensorTag from TI a while ago and couldn’t use it since I didn’t have BT 4.0. So I purchased a dongle for it to work but I still couldn’t get it to work.

I was so angry I couldn’t figure this out. I started doing some googling, after a bit I found this post:

Adding a BLE (Bluetooth 4.0) dongle to Mac OS X (Mavericks)

I almost cried knowing that I wasn’t wrong, it was OS X being overly helpful and not letting me say “NO I WANT THE USB I PLUGGED IN, NOT THE STUPID DEFAULT ONE!”. Running the Bluetooth Explorer and picking the dongle, the SensorTag showed up right away, and combining that with a npm module that works with it, I soon will be monitoring stats in my house using node.

I hope this helps.

Continue reading Mac OS X Bluetooth Dongle

Johnny Five + Arduino + Node Web Server

Johnny Five Node Module

Johnny Five – Buttons

Arduino + Johnny Five

Johnny Five – Relay

Originally wired the relay and button based on a different diagram. With Johnny five though, its looking for a much more logical and clear setup. So I rewired based on the diagrams and had to see the relay to type: "NC" and was able to get the lights to turn on and off with the correct button pushes.

Johnny Five really helps abstract away the need to figure out how Firmata is handling everything but also allows you a lot of control with great documentation (once you find it).

Pass one of Button + Web Browser turning off and on a light:


var express = require("express"); var five = require("johnny-five"); var board = new five.Board(); var bumper; var app = express(); var httpServer = require("http").createServer(app); var io=require('socket.io')(httpServer); var port = 3000; app.use(express.static(__dirname + '/public')); app.get('/', function(req, res) { res.sendFile(__dirname + '/public/index.html'); }); httpServer.listen(port); console.log('Server available at http://localhost:' + port); var led; var relayShelfLed; var bumperShelfLed; board.on("ready", function() { relayShelfLed = new five.Relay({ pin: 22, isOn: true, type: "NC" }); this.repl.inject({ relay: relayShelfLed }); bumperShelfLed = new five.Button({ pin: 52, // invert: true }); relayShelfLed.off(); bumperShelfLed.on("hold", function() { console.log( "Button held" ); }); bumperShelfLed.on("press", function() { if(relayShelfLed.isOn){ console.log('turn off'); relayShelfLed.off(); }else{ console.log('turn on'); relayShelfLed.on(); } console.log( "Button pressed" ); }); bumperShelfLed.on("release", function() { console.log( "Button released" ); }); //Socket connection handler io.on('connection', function (socket) { console.log(socket.id); console.log(relayShelfLed.isOn); socket.on('led:on', function (data) { relayShelfLed.on(); console.log('LED ON RECEIVED'); }); socket.on('led:off', function (data) { relayShelfLed.off(); console.log('LED OFF RECEIVED'); }); }); console.log('Waiting for connection'); }); //turn light on //turn light off //event emiter for light

I created a quick project to make this work with my arduino and a relay.

Office Manager

Continue reading Johnny Five + Arduino + Node Web Server

headless websites – intro

To coin a coined phrase, headless website.

Headless Website – Whats the big deal

I haven’t found a good way to describe this web architecture. There is the repository pattern that starts this idea off.

It looks like this:

Database (MySQL) –> Private (or Public) Api – (PHP) – “The Backend” –> Middleware Api / Restful Api –> Frontend – (AngularJS)

Best Practices REST API from Scratch – Introduction

This structure introduces the decoupling of code for better control, great accessibility and a robust api interface. Now the api is able to be used for accessing data for the web app and the iOS app. Now you can spin up more front end servers to handle the load with out having to as many backend servers (possibly dedicated) running allowing for better monitoring, stability and deployment.

Continue reading headless websites – intro

Grunt and RequireJS

I’m still working on the build process to speed up the actual build by requirejs in grunt. Currently the speed is about 20-25 seconds and I think that just to slow if a bug is found due to a build issue and debugging has to be done with the build itself.

For the production portion, I’m using a fairly basic require script structure which loads the common files, which then loads the backbone app loader which contains the app and base app. This limits the request down to 2 files and allows the common file to be loaded by itself on the homepage and on any page that isn’t using a backbone app but still requires jquery and other similar libraries. This structure allows for a faster load time, cacheable libraries but individual app files.

For the development portion, I’m using a different require script structure (determined by the application) which loads the backbone app, which loads the backbone base app, which loads the common file.

http://backbonetutorials.com/organizing-backbone-using-modules/

https://github.com/gruntjs/grunt-contrib-requirejs

http://www.webdeveasy.com/optimize-requirejs-projects/

https://github.com/requirejs/example-multipage/blob/master/tools/build.js

http://robdodson.me/a-require-dot-js-multipage-shimmed-site-how-to/

https://github.com/requirejs/example-multipage-shim/blob/master/www/page1.html

http://www.erikschierboom.com/2014/11/17/requirejs/

http://5minutenpause.com/blog/2014/08/18/a-gruntfile-for-frontend-developers/

http://jaketrent.com/post/dynamically-require-optimized-modules-requirejs/

https://www.npmjs.com/package/grunt-concurrent

Continue reading Grunt and RequireJS

Atom Editor

settings: command + ,
syntax highlighting: ctrl+shift+l
project manager: ctrl+command+p
fuzzy search: cmd+t

Plugins

Plugin shortcut desc
atom-beautify: ctrl+alt+b cleans up code
highlight-line: ctrl+shift+l
highlight-selected:
linter:
linter-php:
project-manager:
atom-terminal:

Atom Editor Shortcuts on Github

Continue reading Atom Editor

PHP + Symfony + Composer + Opcache = Performance?

As you may have read, I’ve been refactoring a legacy application. I knew from the beginning there would be some performance loss using some of the heavy tools to make the application more robust, usable, scalable and future proofed. But I didn’t think it would be this bad*. Even with using the ‘composer dump-autoload -o’ function being run, there was a 35% performance decrease (cpu idle from 85% to 75%). So in real life, we still have a lot of head room, the response times are the same and a user wont notice even under our heaviest historical load. Still I don’t like that, so this part one of a multiple part series about making a performant application. You will be seeing the ups and downs of what I learn, things that worked for me plus how hard it was to do implement.

Research:

APC vs Zend Optimizer+ Benchmarks with Symfony2

http://stackoverflow.com/questions/17224798/how-to-use-php-opcache

http://mouf-php.com/optimizing-composer-autoloader-performance

http://phpixie.com/blog/benchmarking-autoloading-vs-combining-classes-into-a-single-file/

http://patrickallaert.blogspot.be/2013/03/benchmarking-composer-autoloading.html

http://stackoverflow.com/questions/23382615/apc-apcu-opcache-performance-poor

Competition:

https://blog.engineyard.com/2014/hhvm-hack-part-2

Tools:

https://github.com/phacility/xhprof

http://jmeter.apache.org/ (https://lincolnloop.com/blog/load-testing-jmeter-part-1-getting-started/)

Part One – Pass one:

So after some determining, there was an issue on the ob_start and ob_get_contents (with out flushing) so the image was doubling which invalidated the cache every time so nginx wouldn’t cache. After changing this and removing the templating engine from the call the server has leveled out at more like 80-82% idle. With considering the much greater complexity of the application running now, that is more than understandable and even underwhelming considering what it is now doing. I’m pleased with this result and now performance tuning can occur outside of the application logic itself.

Part Two – Opcache:

(Write later, need to doing actual performance testing)

Continue reading PHP + Symfony + Composer + Opcache = Performance?