Category Archives: JavaScript

Tessel 2 Nitrogen

I’ve been playing a ton with the IoT space over the past 4-6 months. It’s been a ton of fun from a number of directions.

  1. I love to play with devices. I’ve got Arduinos, Raspberry PIs, Minnow Boards, Galileos and more. But my latest is the Tessel.
  2. I love playing with large scale cloud infrastructures as well.
  3. I love learning new technologies.

This last bit has pushed me in all three of those areas. I’ve been working with Tim Park on an IoT framework called Nitrogen which is built in node.js and runs in Azure. Working on Nitrogen has really pushed my node.js knowledge and I had never done anything with Ember prior to this. And then pile on top of that the vast number of devices out there and there’s something new for me to learn every day. 🙂

Yesterday I started playing with my Tessel and seeing if I could connect it up to Nitrogen’s MQTT gateway. Ivan Judson was kind enough to stand one up for me that I can start playing with. It was ridiculously easy to get going from there.

I started with the Climate Logging over MQTT project found on the Tessel site and modified it for Nitrogen.

The big change with Nitrogen is the format of the topic for subscriptions. Rather than being a simple string is a JSON object. For example, rather than just being “temperature” or something like that, is a subscription to messages routed to this particular device.

var subscription = ‘{“to”: \”‘+deviceId+‘\” }’

Check out all the code on Github at https://github.com/joshholmes/tessel2nitrogen.

modern.IE

modern.IE I’m a Program Manager on the Developer Relations team for Internet Explorer. The core mission of my team is to help developers write interoperable web sites across all of the major browsers. To that end, we have put together a set of tools and downloads that will help you testing, especially for Internet Explorer but most of the tools help across app browsers.

modern.IE Scanner

The modern.IE Scanner is does a static scan of your web site looking for common issues on web sites. Currently, it looks for:

Fix common problems from supporting old versions of IE
Known compatibility issues
Compatibility Mode
Frameworks & libraries
Web standards docmode

Fix common problems from supporting old versions of IE
CSS prefixes
Browser plug-ins
Responsive web design

Suggested enhancement
Browser detection
Optimize the images on your page
HTML5 inputs

Suggested enhancement
Prerender + prefetch

Suggested enhancement

Compressed content

Consider building with some new features in Windows 8
Touch-first browsing
Flip Ahead Browsing
IE11 tiles + Notifications

Once you’ve scanned your site and reviewed the static results, you can take a look at how your site looks across a lot of browsers with the screen shot service by Browser Stack and also do a scan for code that’s no longer supported by current versions of Internet Explorer.

It will save you a bunch of time testing and looking for issues to scan your web site with the modern.IE Scanner.

Virtual Machine Downloads

The scanner is great but there’s nothing like looking at the real thing. To help here, the team has put up a large set of virtual machines to help you out here. These virtual machines are designed for you to do Internet Explorer testing.

We have virtual machines for folks running Windows, OSX and Linux across the following virtualization platforms (dependent on base platform):

Hyper-V (Windows)
Virtual PC (Windows)
Virtual Box (Windows, OSX and Linux
VMWare (Windows, OSX)
Parallels (OSX)

The virtual machines include a lot of different Windows OS and browser configurations.

Windows XP with IE6
Windows XP with IE8
Windows Vista with IE7
Windows 7 with IE8
Windows 7 with IE9
Windows 7 with IE10
Windows 7 with IE11 (Currently RP but soon to be release)
Windows 8 with IE10
Windows 8.1 and IE11 (Currently preview but soon to be release)

This is a lot of machines. If you count up all the variations of virtualization platform, OS and browser, it’s a little over 90 VMs that we’ve got for you to download.

These are 90 day VMs because they are not activated VMs. This means that in 90 days, you’ll need to come back and download a new one but that’s a good thing because we’ll be keeping them up to date with security patches and the like on the web site so you don’t have to think about it.

Offers

There are also partner offers that we give from time to time ranging from some percentage off of Parallels to a 3 month trial of Browser Stack (rather than their normal 1 month trial) and so on. These change from time to time so I’m not going to go through all of these here.

Summary

There’s a ton that the team is doing which is all aimed at helping web developers build an interoperable web. What I hope never happens again is a “Best viewed in X Browser” tag on a web site again.

The Perf Doctor Is In

I had the pleasure of speaking at BrazilJS 2013. My talk was about performance. While I was using Windows, IE11 and tools on Windows, the perf advice and the way that you need to thing about performance is completely agnostic. Chrome, Safari, Firefox and all of the browsers adhere to the same spec as we do and so are dictated to many things very similarly.

This is the third blog post in the series about BrazilJS. The first was about the the experience in Brazil called Obrigado BrazilJS. The second was A little about BrazilJS. And this one is about the talk itself. Continue reading

Obrigado BrazilJS

This past week I had the extreme pleasure of returning to one of my favorite countries to visit, Brazil, to speak at it’s premiere JavaScript conference, BrazilJS. I’ve been to Sao Paulo in the past when I keynoted PHPBrazil but while I was there, everyone told me that I needed to get down to Porto Alegre and now that I’ve been there, I agree with them. I’m going to break this down into three posts. The first about the country and the visit. The second about the conference itself called A little about BrazilJS. And the third about my talk called The Perf Doctor Is In.

Sao Paulo

Sao Paulo was, to be honest, a bit overwhelming. It’s the commercial center of Brazil with 11 million people and an absolutely insane amount of traffic. I was introduced, however, to to some unbelievably passionate and intelligent people in my short time there. I still have many friends from Sao Paulo from my short trip. I was introduced to cachaça (key ingredient in my favorite drink caipirinha – it’s sort of a Brazilian mohito), the concept of Brazilian BBQ (more on this in a bit), found out that two motorcycles can motorcycle cutting traffic in Brazilactually travel down the highway balancing a bookcase between them and fell in love with the country. My favorite day was when we got down to the beach and everybody relaxed. I had never even heard of foot volley which is volleyball with all of the ball handling rules of soccer. Continue reading

Custom Search with Azure Mobile Services in JavaScript

image I’ve published my first little Windows 8 app using the Azure Mobile Services in JavaScript. It was incredibly quick to get up and running and more flexible than I thought it would.

The one thing that was tricky was that I’m using JavaScript/HTML5 to build my app and since I don’t have Linq in JavaScript, doing a custom date search was difficult. Fortunately I got to sit down with Paul Batum from the Azure Mobile Services team and he learned me a thing or two.

I already knew the backend of Azure Mobile Services was node.js. What I didn’t realize is that we can pass in a javascript function to be executed server side for a highly custom search the way that we can with Linq from C#. The syntax is a little weird but it works a treat.

itemTable.where(function (startDate, endDate) {
            return this.Date >= endDate && this.Date <= startDate;
        }, startDate, endDate)
    .read()
    .done(function (results) {
        for (var i = 0; i < results.length; i++) {
           //do something interesting
        };


Notice that inside the where function, I’m passing in another function. This function gets passed back and operates server side. The slightly wonky part is that the function has to accept the parameters that you pass in as well as you have to pass the variables that will be passed to this function. So reading that sample carefully, see that we’re passing three variables to the server side including the function and then the two actual variables that we want to pass to the function that executes on the server.

This allows for some awesome flexibility, well beyond custom date searches. 🙂

Review of Ext JS 3.0 Cookbook

Ext JS 3.0 Cookbook Cover

For full disclosure, Packt Publishing sent me a review copy of this book. They did not ask for a positive review, just a review.

<update>The book’s official page is at Packt Pub’s Official Ext JS 3.0 Cookbook site</update>

This is the first book by Jorge Ramon that I’ve read. This book is exactly what the title says that it is, a Cookbook. It’s got 109 solutions to problems solved by Ext JS 3.0. I was expecting, like a lot of other books to get a fill of all of the philosophy behind what they are trying to promote but that wasn’t the case. This book just in with no nonsense and gets right to the code.

Every chapter is laid out exactly the same. It starts off with a list of problems solved in this chapter and a very short paragraph that gives an explanation to why these are related problems. The rest of the chapter is broken in to “recipes” all of which are laid out exactly the same as each other as well with sections “Introduction”, “How to do it”, “How it works”, an optional “There’s more” and a “See also” section. The intro is typically a short paragraph that describes when this recipe is going to be useful and optionally contains a screenshot or two of the solution. The How to do it section is almost all code with just enough text to explain where to put the code that you are looking at. The How it works section explains a little more about the events and the libraries that are at play and how they effect the code snippets that you just wrote. The There’s more section points out potential pitfalls or other benefits that this recipe brings to the table. The See also section points out related recipes that you should look at in addition to the recipe that you’re looking at.

So what’s my opinion on the book?

if you are trying to understand JavaScript and/or Ext JS 3.0, this book is not the book for you. There are plenty of other books out there that will step you in at a little more manageable pace.

However, if you are somewhat familiar with JavaScript and Ext JS 3.0, this is a great recipe book. The code is clean and readable. The problems are problems that I see on a semi-regular basis. I like it for what it is. It’s a handy reference and a set of problem/answers that solve discrete problems. It’s a good formula and I’m probably going to write a few blog posts in that format to feel it out.

The price, $49.00 or 30.99 Pounds is a little steep but if it cuts an hour or two out of your research and development time, it’s paid for itself. Also, you can download the code from Packt Publishing in a zip file and copy paste from that so it’s definitely going to save you time if you are using Ext JS 3.0. This was something that I missed at first to be honest and only caught when I went back to reread the preface and saw the link to where the source is zipped up.

Packt PublishingAnother interesting note about Packt Publishing is that on their “About Packt Publishing” page in the back of the book, they mention that when they publish a book based on an open source project that they pay royalties back to that project. I don’t know how much they pay in royalties to the project but that’s a really class thing to do. If one is making money on an open source project, they should contribute to it somehow either through code or financially or both.

Glimmer – A jQuery Designer

I had heard about this effort a few weeks back but I’m thrilled that it’s public and I can talk about it now. Karsten Januszewski and some of the other whiz kids on the MIX team have put together a visual designer for jQuery called Glimmer.

Right now, they’ve got a number of design wizards that you can leverage but they’ve built a great plug-in model so that you can write your own for your favorite jQuery UI plug-in.

Check out their video on how to leverage Glimmer and how it all came to be.

Get Microsoft Silverlight

I’m really geeked and am looking forward to using this in my next web dev projects…

Antidotal info on JavaScript Library Ext JS

I’m in conversation with a group that’s using Ext JS for their RIA. As I haven’t used it, I thought I’d go ask at the international water fountain that is twitter about it.

Anyone using Ext JS? Thoughts compared to jQuery or Prototype/Scriptaculous?about 3 hours ago from TweetDeck

 

This is what I got back (I love twitter):

Kevin Hoytparkerkrhoyt@joshholmes IMHO, Ext is more about traditional applications. jQuery is a Swiss Army knife. Ext can do that, but rarely is used that way.about 1 hour ago from TwitterFon in reply to joshholmes

Nate Schuttantschutta@joshholmes friend of mine loves ext but the learning curve can be steep and leads to lots of js config rather then HTML. I like proto a tonabout 2 hours ago from twitterrific in reply to joshholmes

Joe O'Brienobjo@joshholmes we have tried all three and much prefer jquery. but ext is in a very different space with diff objectivesabout 2 hours ago from Nambu in reply to joshholmes

Kevin Marshallksmarshall@joshholmes I use extjs and jquery together. I just use extjs for some of the nice ui controls it creates and jquery for the rest of the jsabout 2 hours ago from twitterrific

Dave Meekerdmeeker@joshholmes We’ve looked at it extensively. It seems to be a mishmosh of those other libraries, no? I can put you in touch with someone hereabout 3 hours ago from web in reply to joshholmes

Jeff Blankenburgjblankenburg@joshholmes My limited experience suggests it’s much more a RIA development framework than jquery, etc.about 3 hours ago from TweetDeck in reply to joshholmes

Nate Koharinkohari@joshholmes ExtJS is nice if you’re looking for a full control toolkit. If you just want a low-level JS library, jQuery is the best imo.about 3 hours ago from TweetDeck in reply to joshholmes

Interesting Web Development Related Resources

Like so many thing that we do in our daily development, there’s a high probability that someone has already solved the problem if you know where to look. This is just a collection of resources that I’ve found useful over time. Honestly, I’m posting these here because I need them in one place so that I can find them easily…

JavaScript Resources

Like a lot of you, I’ve been doing JavaScript since 1996. I’ve been pretty geeked, however, with the recent (well, last 2-4 years) emergence of a ton of JavaScript frameworks that are making this work a lot easier.

imageThe first one to talk about it dojo. It’s one of the more mature ones that’s out there. I’ll be honest and say that it’s been a little while since I’ve used it because I’ve started using jQuery or Prototype more often. That said, dojo is one of the most complete frameworks out there. I do love it’s drag and drop support. It includes offline support and a whole lot more. Check out and play with some of it’s cool features at http://dojocampus.org/explorer.

Of course, any group that has a conference called dojo.beer() is a winner in my book.

imageThe second toolkit is MochiKit. I love it’s tag line of “Making JavaScript Suck Less”. I first worked with MochiKit when I was playing around with TurboGears – a Python web application stack. What it’s really outstanding at is doing async work which is particularly useful in doing AJAX and other service based work. It’s interesting to note that Kevin Dangoor started Turbo Gears and then at some point later ended up working for SitePen who paid him to work on dojo. Check out demos of it in action at http://www.mochikit.com/demos.html.

image

Prototype is a slick relatively low level framework. What it does is extend the HTML DOM to include a lot of really useful features like element, class and css selectors. One of the useful things that it does is add a number of manipulations to the built in string class. This gives us startsWith, stripScripts, stripTags, isJSON, strip and a whole lot of other really useful functions.image By itself, Prototype’s useful but I have a hard time talking about it without mentioning script.aculo.us and some of the other plugins. script.aculo.us brings drag and drop support, animation frameworks a number of controls and makes it all really easy.

Check out demos of Prototype and script.aculo.us working together at http://wiki.github.com/madrobby/scriptaculous/demos.

imagejQuery is a fantastic and relatively light-weight framework that’s garnering a lot of new supporters recently. Honestly, I was happy with dojo and Prototype until I saw the Visual Studio Support for jQuery at which point I started playing with it.

I’m a convert. 🙂 Now, because it’s not as low level as Prototype, jQuery doesn’t have some things like the string manipulation, but overall I’m really pleased. I find that I have to write a lot less code to accomplish the same results. And very importantly, the jQuery Documentation is really good. Another really useful thing is that jQuery, being a really nice citizen, has built in support to make sure that it’s compatible with other JavaScript frameworks. Throw all of that in with intellisense in Visual Studio and it makes life easy.

There are also a ton of different plugins for jQuery that do everything from menus to rude string manipulation (not as good as Prototype but it’s a start).

Some of my favorite jQuery plugins in no particular order are:

AJAX History
Mousewheel
JSON
Curvy Corners
jCarousel
xWin

image  ASP.NET AJAX is the last framework I’m going to talk about here not because there aren’t other frameworks but I haven’t used the others so I don’t really want to comment on them.

First, as the name does imply, what it does really well is AJAX stuff. One of the really powerful features is the JavaScript proxy generation.

<asp:ScriptManager ID="ScriptManager1" runat="server">
      <Services>
           <asp:ServiceReference Path="~/CustomersService.asmx" />
      </Services>
</asp:ScriptManager>

That allows you to call web services as if they were methods on an object.

function GetCustomerByCountry()
{
      var country = $get("txtCountry").value;
      InterfaceTraining.CustomersService.GetCustomersByCountry(country, OnWSRequestComplete);
}

function OnWSRequestComplete(results)
{
      if (results != null)
      {
           CreateCustomersTable(results);
           GetMap(results);
      }
}

Second, despite the name, ASP.NET AJAX can work with more than just ASP.NET. There’s a project on CodePlex to generate the service proxies for PHP called PHP MS AJAX (which is a whole lot of capital letters…).

How do you choose?

There are a ton of different tests out there some of which you can look at the results, others of which you can actually run yourself…

Dojo vs JQuery vs MooTools vs Prototype Performance Comparison | Peter Velichkov’s Blog – Jan 19, 2009

Mootools Slickspeed Test

I like to see if there’s broad support so the project won’t go away, see if it’s actively being developed, what tooling is available, how easy the syntax is, how well it plays with others, what it brings to the table from a functionality standpoint and a whole lot more.

Really though, it comes down to your preferences. The good news is that it’s not the end of the world if you decide to switch frameworks.

My current JavaScript work is being done with a combination of jQuery for most of my client side work with ASP.NET AJAX doing my communications (and some of the controls) with a little bit of Prototype thrown in when I need to go lower level.

CSS Resources

I used to spend days getting exactly the right alignment in my HTML/CSS work. But as time has gone on, I’ve gotten more mature and realized that I don’t have to work that hard. Instead of me figuring out how to do the exact right layout should be, I’m starting to leverage the various CSS Frameworks that are out there – especially since there are so many new browsers and form factors out there from IE8 to Safari 4 to iPhone. I want a framework to

imageOne really simple CSS Framework is the 960 Grid System. It’s simple and gives you a lot of flexibility. The idea is that it breaks up the page into either 12 or 16 different columns and then lets you put in areas that spread across any number of those columns. This is a direct nod to the print industry which does exactly the same thing on paper. This gives you a tremendous number of possibilities from a simple two column layout to a really complicated layouts with multiple width columns and variety. Check it out, it’s simple and it works.

image  The downside of it is that it’s a fixed width layout so it’s not always the right choice. The good news, however, is that the project has been extended by Fluid 960 Grid System. imageThis adds JavaScript to the 960 Grid System to give is a much more dynamic layout that resized to your screen size. It also brings dynamic menus to the table. It’s JavaScript it based off of a project called MooTools

imageIf the you really don’t want to think that hard and the others don’t give you what you need tied up in a neat enough package, check out Layouts.IronMyers.com. It’s simple to use web site gives you a preview of exactly the layout that you’re looking for and lets you download a zip file with a sample HTML and CSS inside.

imageAnd if that’s not enough and you really just need the design and all of the layout handed to you – check out FreeCSSTemplates.org. It’s got a large number of Creative Commons licensed CSS templates and layouts.

Conclusion

I hope these resources are as useful to you as they are to me. I’ve banged my head against the wall a ton of times until I realized that someone else had already solved the problem and I can leverage their solution.

Adding Lighbox.js to the Simple Photo Gallery

image In my previous two posts, Building a Simple Photo Gallery in ASP.NET MVC Framework and Returning Thumbnails With the MVC Framework, I built a simple photo gallery on the ASP.NET MVC framework. In this post we are going to start making this a little prettier. To start with, we are going to leverage an JavaScript project called Lightbox.js that’s released under the Creative Commons Attribution 2.5 License.

One cool part about it is that you can get a tremendous amount of functionality with little to no JavaScript coding on your own. It leverages a couple of different JavaScript libraries including Prototype and Scriptaculous. These do a lot of generic HTML Dom manipulation and visualization.

The result of leveraging Lightbox.js is that when you click on one of the thumbnails that we started showing in Returning Thumbnails With the MVC Framework the full sized picture will show in a really nice lightbox style effect.

First, you need to download the Lightbox.js project. It comes in a zip file that comes with a sample application. Unzip the contents into the appropriate folders. This means that the .js files go in your /scripts directors and the images and the css in the /content folder.

The cool part is that since you have the source to it all, rock on and modify it to your heart’s content. And we’re going to do a light modification right off the bat. We could have put the images from the Lightbox.js project in the /images folder but we’re already using that for something else so we put them in the /content folder. That means that you need to open up lightbox.js and change the directory of the loading and close images to point to the correct directory.

LightboxOptions = Object.extend({
    fileLoadingImage:        'content/loading.gif',
    fileBottomNavCloseImage: 'content/closelabel.gif',

That’s the only mod that we *need* to make at the moment. If you feel like it, you can fix the image paths in lighthouse.css as well.

#prevLink:hover, #prevLink:visited:hover { background: 
url(Content/prevlabel.gif) left 15% no-repeat; } #nextLink:hover, #nextLink:visited:hover { background:
url(Content/nextlabel.gif) right 15% no-repeat; }

The only thing left to do is update the Images/index view to take advantage of our new capabilities. There are two mods to make. First, we need to include links to the lightbox.css and the required 3 JavaScript files (prototype.js, scriptaculous.js and lighbox.js). Second, we need to add a rel=”lightbox” to the anchor tag around our picture.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" 
AutoEventWireup="true" CodeBehind="Index.aspx.cs"
Inherits="PhotoGalleryMVC.Views.Image.Index" %> <asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server"> <link rel="stylesheet" href="content/lightbox.css" type="text/css" media="screen" /> <script src="scripts/prototype.js" type="text/javascript"></script> <script src="scripts/scriptaculous.js?load=effects,builder" type="text/javascript"></script> <script src="scripts/lightbox.js" type="text/javascript"></script> <p><%= Html.ActionLink("Add your own image", "Upload", "Image")%></p> <% foreach (var image in ViewData.Model) { %> <span class="image"> <a href="/images/<%= image.Path %>" rel="lightbox">
<
img src="/image/thumbnail/<%= image.Path %>" />
</
a> <span class="description"><%= image.Description %></span> </span> <% }%> </asp:Content>

It’s that simple. This will render a really nice little lightbox effect on our images.

Stay tuned for future posts about styling the CSS, paging the pictures and a whole lot more.