Setting Up MEAN.js with Nginx on Ubuntu

AngularJS, ExpressJS, Javascript, MEAN.js, MongoDB, Nginx, Node.js

I started a new project that will uses MEAN.JS (MongoDB, ExpressJS, AngularJS, Node.js). In my previous post, I discussed setting up Nginx and Apache together on Ubuntu. In this post, I will discuss how to use Express with Nginx. My initial plan was to install Express and use the Express Generator for application scaffolding, but I recently began reading about MEAN.js (and MEAN.io) and decided to use MEAN.js for application scaffolding.

Continue reading

Checkout My New Site - T-shirts For Geeks

Drupal: Dependent dropdowns with jQuery

Ajax, Drupal, Javascript, JQuery, PHP

I have told my co-workers on many occasions that Drupal doesn’t do true Ajax. With true Ajax, elements change without a page refresh and only the relevant elements are affected. With Drupal, the elements change because the entire form is refreshed. For instance, if you use Drupal’s Ajax to make the values of one dropdown dependent upon the selected value of another, the entire form has to be refreshed in order for the second dropdown to be updated (See Ajax Example: Dependent Dropdown). Although, there are times when I do use Drupal’s Ajax in this scenario, I much prefer to use jQuery.

Continue reading

Checkout My New Site - T-shirts For Geeks

Dojo Widgets: Converting to AMD

Ajax, Dojo, dojo-widgets, Javascript

A few years ago, I created gpDojoGallery – a Dojo image gallery widget. I was recently asked whether I had a AMD-ified version of the widget. I have been doing a lot of Drupal and Magento projects lately (with a heavy dose of jQuery) and I haven’t worked with Dojo in quite a while, so I had never heard of AMD (Asynchronous Module Definition). After some quick googling, I learned that Dojo is not the only library that uses AMD, so I decided to convert my gpDojoGallery widget to the AMD format in order to better understand it.

Continue reading

Checkout My New Site - T-shirts For Geeks

Setting Checkbox State with jQuery Mobile

Ajax, Javascript, JQuery, jQuery Mobile, Pebblet

I used jQuery Mobile to create the UI for the Mobile Theme Generator. One of the processes that had to be frequently coded was setting the state of the jQuery Mobile checkbox. Because of the many classes associated with displaying a mobile checkbox, the code was more involved that I first anticipated.

To set checkbox state to ‘on’:

?View Code JAVASCRIPT
var c = $('#mycheckbox');
$(c).attr({'checked': true, 'data-icon': 'checkbox-on'}).siblings('label').removeClass('ui-checkbox-off').addClass('ui-checkbox-on');
c = $(c).siblings('label').children('span').children('span')[1];
$(c).removeClass('ui-icon-checkbox-off').addClass('ui-icon-checkbox-on');

I first set the “checked” attribute to true and also set the “data-icon” attribute to ‘checkbox-on’.
I changed the class for the checkbox label from ‘ui-checkbox-off’ to ‘ui-checkbox-on’.
I then get the sibling label for the checkbox so that I can get the second ‘grand-child’ of the label. I change the class of the span from ‘ui-icon-checkbox-off’ to ‘ui-icon-checkbox-on’.

<div class="ui-checkbox">
    <label for="mycheckbox" data-corners="true" data-shadow="false" data-iconshadow="true" data-wrapperels="span" data-icon="checkbox-off" data-theme="a" data-mini="true" class="ui-btn ui-btn-corner-all ui-mini ui-btn-icon-left ui-checkbox-off ui-btn-up-a">
        <span class="ui-btn-inner ui-btn-corner-all">
            <span class="ui-btn-text">Menu Items Mini:</span>
            <span class="ui-icon ui-icon-shadow ui-icon-checkbox-off">&nbsp;</span>
        </span>
    </label>
    <input type="checkbox" name="mycheckbox" id="mycheckbox" data-mini="true">
</div>

That’s it. Of course, to turn it back off, I just to change to classes back (and removed the ‘checked’ attribute).

Checkout My New Site - T-shirts For Geeks

JQuery Plugin: Mobile Page Switcher

Ajax, Javascript, JQuery, Mobile, plugins

After I created the mobile sub-domain for GrasshopperPebbles, I needed a solution that would allow a user to switch to the mobile view at any time. I prefer giving the user the option to switch to a mobile view rather than a device-sniffing approach. So I created simple jQuery Plugin (gpMobilePageSwitcher) that displays an icon and a link to the mobile view. But the plugin doesn’t just take the user to the home page of the mobile sub-domain, it takes the user to the mobile view of the same page they are viewing.

Continue reading

Checkout My New Site - T-shirts For Geeks

Mobile Theme Generator for WordPress and Tumblr

Ajax, Django, Javascript, JQuery, Mobile

A few months ago, I downloaded a mobile theme for WordPress in order to create a mobile site for GrasshopperPebbles. While updating the template, I thought about automating the development process so that future releases would be easier. So I decided to create an open source project – the mobile theme generator. The generator displays mobile sites using jQuery Mobile. In fact, the generator itself was developed using Django and jQuery Mobile (the original theme used jQuery Mobile). I did think that it an odd solution to create PHP files using Python, but it turned out to be a great solution.

Continue reading

Checkout My New Site - T-shirts For Geeks

Javascript: Inversely Proportional

Javascript, JQuery

I’m working on a project that uses the JScrollPane JQuery Plugin to scroll a number of records. My client wanted the scroll bar to have a variable height (like most modern scroll bars). The height of the scroll bar should be determined by the number of records – the height should decrease as the number of records increase. So the scroll bar height is inversely proportional to the number of records.

Continue reading

Checkout My New Site - T-shirts For Geeks

Javascript: Testing For Undefined

Javascript, Pebblet

While working on a project, I wanted to test whether a variable was undefined in Javascript. Because Firebug displayed ‘undefined’ in the console, I assumed that I could treat it as a string.

?View Code JAVASCRIPT
if (variable == 'undefined') {
// do something
}

Now I knew that this wouldn’t work, but I tried it anyway. ‘undefined’ an object, not a string, so I could not treat it as a string.

After a minute of searching, I found the undefined solution:

?View Code JAVASCRIPT
if (typeof(variable) == 'undefined') {
// do something
}

Using the typeof operator, Javascript is able to determine whether a variable/object is ‘undefined’.

Checkout My New Site - T-shirts For Geeks

Google Maps: Creating a Custom Street View Control

API's, Google Maps, Javascript

When I upgraded my imGoogleMaps JQuery Plugin, I had to create a custom control button on the Google Map. The Control allows the user to add a Street View Overlay to the map. To create the control, I had to assign a prototype object to the instance of the GControl object.

Continue reading

Checkout My New Site - T-shirts For Geeks