Category: Front End

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

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

Bootstrap 3 and IE8 support

Even though its a small amount of the global traffic some applications (especially in the financial worlds) need to support IE8 due to the user base.

There is some push and pull on this, but sometimes you can’t force someone to do something good for themselves.

But you still need to work with them. So what do you do?

After some searching, I found this with the shim answer (below) combined with the standard bootstrap suggested ie-edge tag.

<meta http-equiv="X-UA-Compatible" content="IE=edge">

[Make Bootstrap IE8 compatible](https://teamtreehouse.com/forum/how-can-i-make-bootstrap-3-compatible-with-ie8″>Make Bootstrap IE8 compatible)

You definitely need to know your user base before making decisions on technology. Don’t just look at analytics data on the % but also what will it take to make it work and whats the value of that 3% of customers.

Even a small user base could be the difference on being in the red or black (in either direction of “support”).

With tools like the shim, it makes the decision easier to at least make the site respond and function 80% of the way.

Keeping clean coding and testing code on the older browsers could be the difference of a few lines of code and still supporting some legacy browsers and making a happy customer.
Continue reading Bootstrap 3 and IE8 support

Moving to Twitter Bootstrap

So you’ve decided to make your site responsive.

There are a ton of frameworks out there that can help you with this, I recommend Twitter Bootstrap, because well, its from Twitter and easy to get working. No other convincing to happen here. Good luck with your choice

So you picked Twitter Bootstrap, great! Now you have things that used jquery-ui and now are broken. Thats fine. Something things just werent built to be responsive or work together or get the point that it shouldn’t use JS to style to much. The web works well with its html and css for layout and design and javascript for functionality, lets keep it that way as best as possible.

jQuery-UI AutoComplete isn’t really compatible with Bootstrap. You can make it but there is a better way.

The answer to that is Twitter Typeahead which is really 2 different libraries that work together to make a very robust and well formatted system. How to implement Typeahead

Continue reading Moving to Twitter Bootstrap

Node.js, PHP, NGINX and WebSockets (Socket.IO)

Don’t try using Express.IO. Just wasnt working.

Tech Used:
Centos 6.5 : http://www.centos.org/download/
Nginx : http://nginx.com/
MySQL : http://www.mysql.com/
Redis : http://redis.io/
PHP 5.5 : http://php.net/
Node.js : http://nodejs.org/
Socket.io : http://socket.io/docs/
Angular JS : https://angularjs.org/
Angular Socket IO : https://github.com/btford/angular-socket-io

Angular Socket IO Info:
http://www.html5rocks.com/en/tutorials/frameworks/angular-websockets/

Socket.IO works. But you have to understand what its doing. (I’ll explain further down)

Quick Info on Event Emitters:

Node.js Events and EventEmitter

Using Nginx to reverse proxy a secure apache site that is using socket.io/node.js/websockets
http://kenneththorman.blogspot.com/2013/07/using-nginx-to-reverse-proxy-secure.html

Loading a configurations in Node.js

Managing config variables inside a Node.js application


http://stackoverflow.com/questions/5869216/how-to-store-node-js-deployment-settings-configuration-files

Continue reading Node.js, PHP, NGINX and WebSockets (Socket.IO)

Performance through Minify, Concat using different methods.

Need something quick?
Try this, it just takes care of it. No control, can cause issues with angular due to its annotation for dependency injection.
Nginx Minification

Need a little bit of controller but want it to take care of the heavy lifting?
This tool basically renders out all the assets into a static folder structure.
Google Pagespeed

Haven’t used it but have heard great things.
Google Minify

This is my friend. We have grown close together. We had some growing pains but what friendship doesn’t.
I will probably write a separate tutorial on how I use this. I found there is very little documentation on how to implement this when your code structure isn’t perfect or you have a custom framework to deal with, but this is the tool to use for that, which again is why it sucks there is no documentation. More to come.
Grunt JS

Continue reading Performance through Minify, Concat using different methods.

Angular and Charts

In my first weeks of using angular, I came to the point of needing to put a chart on the page.
I recieved the data through an api call and then i was stuck. How do I get it into the correct format? Which library should I use?
I found chart.js, a super simple library that puts data on a page. GREAT, well at first. I was able to get data on the page, and it looked nice, but responsive design doesnt play well with something that needs fixed widths and heights. But it got me at least thinking on how to do things in angular. The library is simple and nice, I would recommend it for any basic chart you would need.
http://www.chartjs.org/

Then comes highcharts. I looked at the website for it, and was like “nope”. But it was the only thing that could do what I needed, so I tried it.
Once I got it up with a sample chart on a better looking site, the actual chart didn’t as bad, turns out its just the high charts website, still not as pretty as the chart.js charts but it will do.
Using the pablojim hightcharts-ng directive, and just a little bit of fiddle, I was able to get a chart up and running on the site.
http://www.highcharts.com/
http://ngmodules.org/modules/highcharts-ng
https://github.com/pablojim/highcharts-ng

Continue reading Angular and Charts

Angular Seed +

Starting out with angularjs, I had no clue what to do. I tried the tutorial on the official site, that got me far enough to say, “wow, ajax type request are easy, and putting things on the DOM is so simple” but the other half was “wow, one big messy file. I don’t like this.”

I started searching around. I found the angular-seed and angular-boilerplate and … so on, but the seed was almost the same issue, a few big files.

Then I found a post that talked about seed and boilerplate and he mentions an in between and it was beautiful. I quoted below. Within minutes I had figured out how to use it by basically just copying the seed project and breaking it out to his structure. I’ve within 2 months have created 4 fully angular projects with me being the only developer doing both front and backend. It has changed my (work) life.

Blog: I’ve been doing it wrong

You can make it more usable by using sub-directories for controllers, and so on:

controllers/
    LoginController.js
    RegistrationController.js
    AccountListController.js
    SearchResultsController.js
    directives.js
    filters.js
services/
    CartService.js
    UserService.js
    AccountService.js

Continue reading Angular Seed +

Adaptive Theming Part 01

This blogs first project is to start using adaptive themes.
You will see the appareance change from using this template: http://drupal.org/project/corolla, which is an adaptive theme based on the adaptivetheme. Add the sub theme I’m creating called OS Theme which is a child theme of the adaptivetheme also.
I’m using this blog to test and learn new technologies and to work on server performance.
http://adaptivethemes.com/documentation/adaptivethemes-documentation

Continue reading Adaptive Theming Part 01