When you are building a mobile app or a website mostly likely you are going to need some type of data repository. This can be either files, video or in the form of a “database”. In order to access these repositories you need some sort of access mechanism. Sometimes it is a library or SDK others it is a connection to the database. However, with a mobile app or even websites that are distributed the connection to these repositories can be tricky. You need to create some sort of endpoint for these. Back in the day these were called Web Services now they are called API or Web API’s. Creating them can be time consuming as well. You have to create all of the routines needed to get and put data. You will need to create authentication mechanisms to make sure the proper user is getting and putting data. All in all this could be very time consuming.

You might be wondering what is TypeScript. Is it yet another programming language I need to learn? Another set of API’s and documents to read through? Yes and no. It is a superset of the programming language JavaScript. What does that mean? Well, as a “superset” it means everything that you love (or hate) about JavaScript is still there but now you have the ability to create classes, modules and interfaces to help build your large scale applications and components. Don’t worry about compatibility since at the end of the day it compiles down to simple JavaScript. What is also cool is you can start using TypeScript immediately. Read more “Bits and Bytes: Getting Started with TypeScript”

In celebration of National Entrepreneurship Week, Microsoft Boston and Microsoft Natick will be hosting free two-hour special events for aspiring entrepreneurs and early-stage startups. You’ll hear a keynote address from a successful startup founder and a panel of local entrepreneurs and entrepreneurship experts will be sharing insights and taking questions. Later you’ll have the opportunity to network with other local startups and entrepreneurs and to hear about Microsoft BizSpark and other business solutions offered by Microsoft. Read more “Entrepreneurship Week Event: Turning Your Ideas into a Reality”

This post is not just about installing and running WordPress on Microsoft’s cloud platform, Azure, but it is to show you the many ways you can. Each developer has their own style. Each client or customer has their own needs. If you are implementing WordPress you can choose the approach based on the needs for the project. We will look at simple one click deploys to full virtual machine environments. Read more “How to Install and Run WordPress on Microsoft Azure”

I have worked for digital agencies for most of my career. I was a developer and eventually became the Director of Technology at a few of them. I have worked with web technologies since 1996 and have gone through iterations of design and build trends. From the Adobe Flash splash-screen phase to home page takeovers. From content needing to be “above the fold” to iframes to ActiveX and more! When I was working at Byte Interactive from 2003 to 2007 we were a big .NET and Flash web agency. We did some PHP and Java but most of our clients were .NET. In the 06/07 time frame we started dabbling in the Mobile design space. It wasn’t until we were bought out by Story Worldwide in 2007 when we started to get more into the mobile space. We worked on iOS and some Android and mobile web as well. I then left Story in 2010 and became the Director of Mobile Technology at Affinion Group. This is where I started to get heavy involved with the Mobile Web. From build patterns to testing on all sorts of devices. The “band” was getting back together in late 2010 (ex Byte and ex Story) to form a new company called WELD Media. I jumped in as VP of Technology and we supported web and mobile web heavily before I joined Microsoft.

Marshall St Mayhem

During all of these companies we had many types of projects. Ranging from small promotional websites to full blown eCommerce applications. We had to support IE 7 for some time as well as all of the newer mobile devices. When it came to testing we used a bunch of methods that have stood the test of time. Different browsers. Browser add-on (Firebug, YSlow, Web Developer Toolbar) we used F12 and inspect element heavily. Heck, we even set up old PC’s and Macs as a test lab. We purchased iPod Touches, iPads, Android phone and tablets. But the common denominator with all of these is you had to be near the device or using the browser to help debug. It did not matter the “tool” you used. You had to open up the website and see for yourself or try and replicate the issue. And there were issues. As a developer, you are able to keep your dev machine up to date. But not so much your clients. Especially when the IT departments lock down versions.

QA Lab – Photo Credit: Library of Congress

I remember a few of our clients were still running IE6 when IE8 and Chrome were the standard. IE6! Ugh, that was the absolute worst. Even better, they might be using the latest version of a browser but the plugins are out of date (see Flash) or not installed. There is nothing you can do when you are trying to debug that type of issue other than heading down to the clients office and see for yourself (we did this a few times).

These issues are all present today and even worse. With the explosion of connected devices accessing the web makes it even harder to debug and troubleshoot an issue. How many flavors of Android are there now? Last count – 10! Even iOS has a lot. And lets not even touch on screen resolution.

So what happens when your client calls you up after the project has launched and says “I am looking at the site on my home computer and it does not work” or “The site is not working on my mobile phone”. Aside from saying the typical developer line “it works on my phone/computer”, what do you do?

Client on phone – Photo Credit: Library of Congress

Vorlon.js

In comes Vorlon.js. The remote debug web tool. It is ideal for situations like this. A simple line of code on your website and you can inspect til your heart is content the issue on your clients device. How does this work you say? Magically! Not really. Vorlon.js is built upon some great development library standards like Node.js, Socket.IO and Express. Vorlon.js runs on it’s own server (or Node.js server) to host the dashboard and the service. The service is using Socket.IO to get a connection to the dashboard as well as the various devices that we be connecting to the site that you are debugging. The site that you are debugging contains a reference to a JavaScript file that is served by the Vorlon server which contains all of the plugins and client code to interact with the client and the dashboard.

Get Started with Vorlon.js

Lets talk about how we use it and get started.

First you need to make sure Node.js is installed. Head on over to Nodejs.org and download and install for your platform of choice.

Once installed, create a project directory somewhere on your computer and you can utilize the Node Package Manager to install Vorlon.js.

Shell

1

npmi-gvorlon

That will install Vorlon.js. The -g option with NPM installs the package globally. So you will not see the files in your project directory. You will have to navigate to the directory that global packages are installed to if you want to modify or copy the installation. On Windows you can find it at C:\Users\username\AppData\Roaming\npm\node_modules\ on a Mac /usr/local/lib/node_modules.

Once installed, you can issue the vorlon command to get the server up and running

Shell

1

vorlon

Now you have a server running on your localhost on port 1337. To get access to the dashboard, just open your favorite browser and navigate to http://localhost:1337/dashboard/.

Start using Vorlon.js

In order to start debugging you will have to add a single reference to your client project.

JavaScript

1

<script src="http://localhost:1337/vorlon.js"></script>

Done! Now when you visit the client project website on any device, information will be sent to the dashboard.

Once we start having clients connect we can identify a client and inspect their DOM, look at their debug console, check out their JavaScript objects, perform validation upon their network monitor to ensure proper files were loaded, look at device information and more. All of the aforementioned are plugins that are available to use with Vorlon.js.

Wait, we are not done yet. We can use Vorlon.js in a desktop app or we can deploy to Azure using a one-click deploy. Both of which can be found on the Vorlon.js GitHub page.

Other Tools

There are a few other interesting tools to help with Website debugging and testing.

The Remote client app is a small utility program that allows you to access Microsoft apps from the cloud. When you launch Internet Explorer from the Remote client app, a real preview version of the browser opens into a new window on your operating system, much like any other app you might have running. This version of Internet Explorer is modified to host the latest preview version of the EdgeHTML rendering engine, so you can test how your site will render in Microsoft Edge.

Remote app clients are a great solution if Microsoft browsers are not available for your operating system, or if you’d like to test the preview version of the browser without installing it directly on your machine.

Hacking Things Done

Don’t worry, we’re not about to tell you how to code an app in under five minutes. (But if you want to try, we’d love to see it!) We do want to tell you about Hack Productivity, a new online hackathon from Microsoft with $32,500 in prizes for apps that help people make stuff happen — with ease (and panache).

Hack Productivity, launching today, gives you access to the Office 365 APIs for mail, calendar, contacts, photo/video, and files so you can create tech solutions that allow people to do everything they set out to do, and more. As an added challenge, we’re also asking you to build an entirely new Add-in (extension) for your app.

Your solution needs to help people manage their lives — but how is totally up to you. For instance, you could build an app that:

helps people create photo albums with images shared by their friends

creates a weekly schedule for everyone in the household

collates a daily to-do list based on incoming email

creates a filing system for school assignments and research work

designs a new collaboration system for the office

suggests a friend date when you haven’t seen one of your contacts in awhile

uses Pavlovian push notifications to defeat procrastination

There are lots of ways to sauce this enchilada, if you know what we mean. Your time-saving, achievement-producing app will be up cash prizes, plus some other shoutout-worthy swag:

meeting w/ a Microsoft product exec

one-year allowance on a premium Office 365 service

expenses-paid trip to a Microsoft conference

Surface products

We’ll be providing lots of support throughout the hackathon, including online office hours, tutorials, and tech tips. So check off the first thing on your to-do list: Register & start building your productivity hack @ msoffice365.devpost.com.Photo Credit: Bain News Service – Library of Congress, Prints and Photographs Division, Washington, D.C. 20540 USA