Archive for December, 2012

Twitter Bootstrap Datepicker control with custom placement!!

December 29th, 2012

There really aren’t many good calendar controls for javascript at the moment, the best one I could find is located here: http://www.eyecon.ro/bootstrap-datepicker/  This guy has done a great job setting up this control for everybody to use and if you use bootstrap it looks and feels just like the rest of the library.  The one problem with the control is that it doesn’t show up anywhere except below your input box, which is bad if you are showing your site in a screen limited place, like an IPad, it will just go below your screen if the control is close to the bottom.

This guy took the project to github here: Original Github repo and I recently forked that and you can get the update I have made here: My Github repo.

A word of warning with my project, I have removed the little caret arrow that the original project had because I didn’t want to take the time to figure out the  triangle by border trick, be my guest if you would like to take that one on, I don’t think its that bad, just needs to be placed at the bottom instead of the top if you are placing the datepicker above the control.

The issue I sort-of resolved, well, hacked for my situation can be found here: https://github.com/eternicode/bootstrap-datepicker/issues/200.  Here is the final result of what my script will do.

datepicker_top_placement

How to dynamically set the template in a Marionette ItemView

December 28th, 2012

Don’t judge me on this, I am just trying to offer some help, this took me a lot longer to figure out that it should have, but I am glad I figured it out and I thought I would throw this out there for anybody else struggling with it too. I beat my head into the wall trying to set the template for an itemview and it turns out it was stupid simple, as outlined in the code below:

var v = new this.options.itemsView({
    collection: l,
    itemView: yourItemView.extend({ template: "<div>yourTemplate</div>" })
});
//show it in your region
this.listing.show(v);

As you can see, all you have to do is use the extend method of the itemView and set the template inside of that and voila. This may not be the recommended way of getting this done but it works for me and its nice and simple and allows for some very clean code. I hope this helps someone, enjoy!!

Getting Node Package Manager (npm) to run on Chrubuntu

December 25th, 2012

If you have tried to install the node package manager on your chromebook running Chrubutu, you will have probably notice that most of the instructions out there will not work, here is the curl command that worked for me:

curl https://npmjs.org/install.sh | sudo s

Just simply run that and then check that it installed correctly via:
npm -v
If that returns a version number, you are good to go, ready to install to your hearts content :).

Running Ubuntu on the Samsung ARM Chromebook

December 20th, 2012

If you have been following my posts you would know that around a month ago I purchased one of the $250 Samsung ARM Chromebook that runs the Chrome OS. Well, I like to tinker so I did some research and learned that you can run a version of Ubuntu called “Chrubuntu” which is basically Ubuntu Linux written for the Chromebook ARM processor. Well, here is a link to the group of people maintaining that project: Chrubuntu Install He has the full instructions on there to get you going with Chrubuntu on your chromebook. A word of warning though with doing this with your machine, the trackpad will not work quite like you want it, but thats nothing a USB mouse won’t fix. I am still struggling with getting audio to work exactly as I would like, but that’s not a big deal since I just plan on doing web development with this machine. Even still, its a very nice way to make better use of this little lightweight netbook. I will post as time goes on interesting things I learn, stay tuned….

Having problems setting focus on your input boxes?

December 13th, 2012

I have a html template that contains a table and rows which looks like this below

<td>
    <label class="pull-left" data-link="productname<%= elId %>"><%= ProductName %></label>
    <input class="hidden-phone input-large" id="productname<%= elId %>" type-id="Id" type="hidden" />
    <a id="mobileRef" href="#mobileModal" role="button" class="visible-phone pull-right" data-toggle="modal">Edit...</a>
</td>
<td class="hidden-phone">
    <label data-link="Rate<%= elId %>"><%= Rate %></label>
    <input id="Rate<%= elId %>" type-id="Rate" class="input-small" value="<%= Rate %>" />
</td>
<td class="hidden-phone">
    <label data-link="RateUnit<%= elId %>"><%= RateUnit %></label>
    <select id="unitsSelector<%= elId %>" type-id="RateUnit" class="input-mini" style="width: auto; min-width: 80px;" >
        <option value="<%= RateUnit %>"><%= UnitAbbr %></option>
    </select>
</td>
<td class="hidden-phone">
    <label data-link="Cost<%= elId %>"><%= Cost %></label>
    <input id="Cost<%= elId %>" type-id="Cost" class="input-mini" value="<%= Cost %>" />
</td>
<td class="hidden-phone">
    <label data-link="TotalProduct<%= elId %>"></label>
    <div id="TotalProduct<%= elId %>" type-id="TotalProduct" class="input-mini">0</div>
</td>
<td class="hidden-phone">
    <label data-link="TotalCost<%= elId %>"></label>
    <div id="TotalCost<%= elId %>" type-id="TotalCost" class="input-mini">0</div>
</td>

The problem was that when I set focus using Jquery’s focus() like so:

selectAll: function(id)
{
//this works but gets overridden by something else
$(id.currentTarget).focus();
}

So what I had to do was use the focusin() method outlined here: http://api.jquery.com/focusin/

This seems to set the focus to only the input field and ignores any other focusing that is going on, I hope this helps someone.

Google has no plans to write native windows 8 applications.

December 13th, 2012

According to this article, http://www.v3.co.uk/v3-uk/news/2231503/google-shuns-windows-8-for-app-development, Google has announced that they have no plans to write any native Windows 8 applications.

“We have no plans to build out Windows apps. We are very careful about where we invest and will go where the users are but they are not on Windows Phone or Windows 8,” he said.
“If that changes, we would invest there, of course.”

I would assume that since they are saying “Windows Apps” that would include the RT apps that run on the surface device.  Microsoft needs google to back them, if they can’t get google on board with apps, then other companies are going to follow suit and not build apps for the Windows 8 platform.  This could be a huge blow to Microsoft and could kill their average commercial sales, I do think its a bit early to tell how well Windows 8 is going to fare, but from the looks of it, it doesn’t seem promising.It’s not like google is singling out Microsoft, they are investing heavily into iOS apps, if you haven’t noticed, they have redesigned all the apps they make for iOS, and I got to admit, they are extremely slick.  Google maps now includes turn by turn directions, which my iPhone 4 couldn’t do but 4s can, so I no longer have a reason to get the 4s, cause I don’t care about Siri.

Microsoft has been climbing the apple hill for years now and its starting to look like that hill is getting steeper by the day.

How to use the Require.js Optimizer

December 7th, 2012

As the HTML5/Javascript application I am working on comes to a close, it was time I started looking at how to speed up and optimize the site for all the devices that will be hitting it.  I started looking around and I found things like Uglify: https://github.com/mishoo/UglifyJS, which does a good job of minifiying your javascript but was still missing some things I was needing, its mainly for just optimizing a file, not a set of files.  I also came across Grunt.js, which I spoke about in an earlier post, but for now, Grunt does a few extra things I am not really interested in, like Linting and running tests, I should probably use that library down the road but for now I am liking the Require.js optimizer found here: http://requirejs.org/docs/optimization.html.  Basically to use the optimizer, you just create a directory somewhere in your app and grab the r.js file found here: https://github.com/jrburke/r.js/, install node from here: http://nodejs.org/download/ and then place a build file inside there and you will be ready to go, they have a lengthy example of a build file found here: https://github.com/jrburke/r.js/blob/master/build/example.build.js#L27-35.   That file will show you a lot of the features, probably way too many that you don’t care about so I have attached the file that I ended up using that does the job.

({
    baseUrl: "..",
    dir: "../../appdirectory-build",
    paths: {
        "text": "Lib/Require/Plugins/text",
        "bing": "empty:"
    },
    mainConfigFile: '../Main.js',
    preserveLicenseComments: false,
    removeCombined: true,
    modules: [
        //First set up the common build layer.
        {
            //module names are relative to baseUrl
            name: 'Main'
        },
        {
            name: 'Path/To/EntryPoint',
            exclude: ['Main']
        }
    ]
})

Some explanation here, the baseUrl in my example is just the directory relative to where my “Scripts” folder would be, or the folder that contains all my js/html files.  The dir is where you want all the optimized files to go, the paths is just for libraries that you want the optimizer to handle for you, for example, we use the bing control, which is located on the web and the optimizer won’t compile it so I am telling it to ignore it during the build with the “empty:” string.  The optimizer also has issues with the text plugin for require so I have that in there as well.

If you make use of the mainConfigFile, you won’t have to include all the paths to all your libraries, the optimizer will handle that for you, this is just a pointer to your Main.js file, I highly recommend using that and not duplicating all that.  If you set  preserveLicenseComments to false the optimizer won’t keep all the comments in your libraries, resulting in much smaller files.  Setting removeCombined to true removes all the files the optimizer uses to create your files, resulting in a much cleaner output directory and shows you potentially which files are not being used.

The modules section is what I like to call the “Entry Points” of your application, of course the main entry point of the application is “Main.js” so you naturally have to include that one.  Then you will notice that I have the next module just a path to an entry point.  If for example you have a site listing cars, if you have a link that kicks off a view that lists cars, then you would want to include that view, which would tell the optimizer to also go grab any other dependencies and views that are being used by that, it will take all of that and wrap it up into a single file, thus reducing greatly the amount of HTTP requests the application has to make and increasing speed tremendously.

To kick off the optmizer, just open up a command window on windows and type this in once you have node installed: node r.js -o app.build.js

I hope this helps somebody struggling with the optimizer, I spent a few days with it getting it exactly where I wanted, please feel free to ask questions, I will do my best to get back with you.