Low Code Lifehttps://devhammer.net
Living Large in Low Code
Thu, 18 Oct 2018 18:19:39 +0000 en-US
hourly
1 https://wordpress.org/?v=5.1.1https://i1.wp.com/devhammer.net/wp-content/uploads/2018/09/cropped-DH_512.png?fit=32%2C32&ssl=1Low Code Lifehttps://devhammer.net
323293632535New Role, New Topic – Low Codehttps://devhammer.net/2018/02/21/new-role-new-topic-low-code/
https://devhammer.net/2018/02/21/new-role-new-topic-low-code/#respondWed, 21 Feb 2018 17:43:26 +0000https://devhammer.net/?p=27514Finding Low Code…or Did It Find Me? Ever run into one of those technologies that snags you immediately? That’s what Low Code recently did for me. As many regular readers will know, I’ve spent the last several years doing independent consulting and coding, mostly in the .NET and JavaScript world. And I was humming along, … Continue reading New Role, New Topic – Low Code

Ever run into one of those technologies that snags you immediately? That’s what Low Code recently did for me.

Mobile Apps are Beautiful and Pixel-perfect on OutSystems

As many regular readers will know, I’ve spent the last several years doing independent consulting and coding, mostly in the .NET and JavaScript world. And I was humming along, with the usual ups and downs that go with being independent, but mostly happy with what I was doing. Then a friend reached out, and mentioned that someone he’d worked with in the past was looking for someone with Microsoft stack architect skills, and would I be interested in talking with him?

I wasn’t looking for anything new. But I thought, can’t hurt to take a call, right? Which is how I was introduced to OutSystems. The initial call was encouraging, so I decided to take the OutSystems platform for a spin, and I was immediately impressed by just how fast I could build a fully-functional application, using just a visual approach of assembling UI and logic widgets, quickly creating and querying data entities, and rapidly publishing new versions in an agile manner.

Finding the Fun Again

My immediate reaction was that it reminded me of some of the best of what I fell in love with when I first started using Visual Basic back in the late ’90s. But without all the code, and with a much more robust publishing and administration infrastructure behind it.

I found that at every turn, from automatically inferring data types for attributes based on the names you give them, to rapidly creating basic list and detail pages by simply pulling a data entity onto a design surface, the tools provided by OutSystems made building apps faster and easier than I was used to…and dare I say it, more fun.

To make a long story short, I decided to continue pursuing the conversation with OutSystems. After a few more calls and interviews, I accepted a role as a Solution Architect. I’ve been in that role for about 6 months now, and nothing I’ve learned in that time has diminished my feeling that Low Code, particularly with OutSystems, is a game-changer for application development. I’ll be sharing more in the coming weeks and months on the whys and hows.

Can’t wait to see what Low Code is all about, and how it works in OutSystems? Check out the OutSystems 2-minute Overview below:

If you’re a passionate technologist, and this has sparked your interest…we’re hiring. Contact me, and I’d be happy to put you in touch with our great recruiting team!

]]>https://devhammer.net/2018/02/21/new-role-new-topic-low-code/feed/027514Custom Domains the Easy Way in Azure Web Appshttps://devhammer.net/2016/09/12/custom-domains-the-easy-way-in-azure-web-apps/
https://devhammer.net/2016/09/12/custom-domains-the-easy-way-in-azure-web-apps/#respondMon, 12 Sep 2016 19:11:39 +0000https://devhammer.net/?p=24711One of the best things about cloud development today is the low cost of entry. With cloud vendors competing to bring customers to their offerings, there are strong incentives to keep prices low, particularly at the entry level. Microsoft’s Azure offerings are no exception. You can get started with Azure Web Apps, whether for hosting a … Continue reading Custom Domains the Easy Way in Azure Web Apps

]]>One of the best things about cloud development today is the low cost of entry. With cloud vendors competing to bring customers to their offerings, there are strong incentives to keep prices low, particularly at the entry level. Microsoft’s Azure offerings are no exception. You can get started with Azure Web Apps, whether for hosting a blog or a more full-featured application, for free, if you’re willing to accept the limitations of the free plan.

One of those limitations is that the free offering for Azure App Service does not support the use of custom domains. So any site or app you host using the free plan must use a subdomain of the azurewebsites.net domain, such as myreallycoolsite.azurewebsites.net. For development and testing, or for hosting an API that will only be called programmatically, this is no big deal. But for public facing sites, you’re going to want a custom domain. Read on to learn how easy Microsoft has made that with Azure Web Apps.

Understanding Azure Web Apps and App Services

Once a stand-alone feature called Azure Websites, today’s Azure Web Apps are a part of the Azure App Service product umbrella. This is important because it is the Azure App Service that is the container for your web app, and also the plan around which pricing is based. For the Free and Shared pricing tiers, apps have limited CPU and memory resources, and are metered on a per-app basis. The Basic, Standard, and Premium tiers are managed virtual machines dedicated to your app(s), so pricing is based on hours of usage, and you can deploy as many Web Apps as you’d like to a given App Service instance.

With that said, the cheapest option for an Azure Web App with a custom domain is the Shared service plan tier. If you just need something for dev/test with a custom domain, or your site is really low traffic, a Shared plan might suit your needs. And with a cost of around $10/mo, it’s quite affordable. For a production web site or application, you’re probably going to want to go with a Basic or higher service plan.

Custom Domain Options

Whichever service plan you choose, there are two ways you can add a custom domain to your Azure Web Apps:

Purchase a domain from a third-party domain registrar, set up the nameserver information, and add the custom hostname to your Azure Web App. This process can vary a lot depending on the admin interface of your domain registrar and DNS providers, but you can find a basic set of instructions here. This works fine, and if you already manage multiple domains with a given registrar, it’s probably the way to go.

Purchase a custom domain through the Azure management portal. This greatly simplifies the process of adding the custom domain, and allows you to manage both your Azure Web App and your custom domain in one place. This feature is provided through a partnership with GoDaddy, if that matters to you.

Let’s take a deeper look at that second option.

Walkthrough: Adding a Custom Domain

In the rest of this post, I’ll walk you through the scenario of creating a brand-new Azure Web App, and purchasing and configuring a custom domain for that web app, in just a few easy steps. These steps assume that you already have an active Microsoft Azure subscription, and have logged into the Azure Management Portal.

Create a New Azure Web App

First, click the + icon in the toolbar on the left of the portal window, then select Web + Mobile > Web App, as shown below:

Note that as you select different options, the management portal opens the selected options as “blades” in the UI, with previous blades scrolled out of view automatically. You can view previous blades using the scrollbar at the bottom of the window.

Next, choose an app name, Resource Group, and App Service plan/location for your app. For this walkthrough, we will assume there is no existing Resource Group, so we’ll create a new one. A Resource Group in Azure provides a handy way of grouping managing multiple types of resources, and I’ll write more about resources groups in a future post. For now, I’ll name my app customdomainwalkthrough, and the Resource Group CustomDomainWalkthrough. Note that the app name must be unique across all Azure Web Apps globally, since this name will also be the subdomain of *.azurewebsites.net by which the site is accessible publicly by default.

IMPORTANT: The App Service plan defaults to a Standard S1 pricing tier, so if you want to use Shared or Basic, you’ll want to click through and use the Create New option rather than accepting the default (you can click View All in the “Choose your pricing tier” blade to see the Basic and Shared tiers). Once you’ve provided all the required information, click Create, as shown below:

Note that I also turned off App Insights, which is outside the scope of this walkthrough.

Once you click the Create button, you’ll be redirected to the portal home page, and notified once your Azure Web App has been successfully created.

Find the Domain You Want

One reason I like the custom domain purchase process in the Azure portal is the fact that it makes it easy to find a domain that is suitable even if the exact domain you want isn’t available, thanks to helpful alternate suggestions. To get started, from the portal home screen, click the App Services icon on the left, then select the newly-created App Service (or, if you checked the “Pin to dashboard” checkbox during the Azure Web App creation process, just click the tile on the dashboard), and look for the search box at the top, and start typing the word “custom” which will filter the list of properties and settings, and then click the “Custom domains” item, which will display the Custom Domains blade, as shown below:

In the Custom Domain blade, you start the process by clicking the “Buy Domain” button, and then entering the domain name you want, filling out your contact information, and choosing the renewal and other options (the defaults should work fine for most sites, though you may want to turn off auto-renew if you are just testing). Another thing I really like here is the option for privacy for your contact information is available by default. See below for how the search and purchase process works:

Even though the domain I searched for “azuredev” wasn’t available, a similar suggested domain name, azuredevpro.com, was.

Once you click the “Buy” button for your domain, Azure will validate your domain order, complete the purchase, and bind the hostname to your Azure Web App. This process takes a few minutes, but once it’s done, everything is configured:

You can now access your Azure Web App from your custom domain, as shown below:

Conclusion

I’ve hosted several Azure Web Apps over the years with custom domains, all using third-party registrars and DNS hosts. While those domains weren’t hard to set up, I have to applaud Microsoft for making this process so easy. Depending on the domain registrar and DNS service you use, it can sometimes be challenging to get all of the relevant nameserver and domain record information configured just right. With the built-in domain purchase process, it really couldn’t be any easier. And the pricing is competitive with third-party options, particularly when you consider that many domain registrars charge extra for privacy protection.

Additionally, if you find that you made a mistake in the domain you purchased, Azure Web Apps gives you a time window within which you can cancel your domain purchase and receive a full refund, something I’ve not seen with other services I’ve used.

If you’re looking for a place to host your web site or application, Azure Web Apps has a lot to offer, from reasonable pricing to great scalability and manageability. The fact that you can add a custom domain so easily is just icing on the cake.

Do you or your organization need help getting up-to-speed on Microsoft Azure? I can help with training and consulting on Azure Web Apps and more. Contact me for a free initial consultation.

]]>https://devhammer.net/2016/09/12/custom-domains-the-easy-way-in-azure-web-apps/feed/024711Save Time and Keystrokes with Emmet in Visual Studio Codehttps://devhammer.net/2016/09/09/save-time-and-keystrokes-with-emmet-in-visual-studio-code/
https://devhammer.net/2016/09/09/save-time-and-keystrokes-with-emmet-in-visual-studio-code/#commentsFri, 09 Sep 2016 17:44:29 +0000http://devhammer.net/?p=20183It’s been more than 8 years since Jon Udell posted an encouragement of blogging over email entitled “Too busy to Blog? Count your keystrokes” and over 5 years since Scott Hanselman followed up with “Do they deserve the gift of your keystrokes?” Both posts explore the idea of our keystrokes being a limited resource that … Continue reading Save Time and Keystrokes with Emmet in Visual Studio Code

]]>It’s been more than 8 years since Jon Udell posted an encouragement of blogging over email entitled “Too busy to Blog? Count your keystrokes” and over 5 years since Scott Hanselman followed up with “Do they deserve the gift of your keystrokes?” Both posts explore the idea of our keystrokes being a limited resource that is better used to contribute to knowledge sources like blogs or wikis that are available to large numbers of people, rather than replying to a much more limited audience via email. In this post, I’ll introduce you to one of my favorite new helpers, Emmet in Visual Studio Code, and show you how it helps me save keystrokes when working with HTML markup.

Keystrokes Count in Programming, too

If keystrokes are a limited resource (and I think they are), then we ought to conserve them in other areas, and one place to do that is when writing code or markup. How many of us end up writing large chunks of markup, or JavaScript, or CSS rules essentially from scratch? Sure, most of the time we may be leveraging libraries like Bootstrap, Angular, etc. to take care of the heavy lifting, but there’s still a lot of code and markup that is needed to bring a site to life, and the less of that code we type out by hand, the more keystrokes (and time) we can save for more important pursuits.

Meet Emmet

One way to reduce the keystrokes spent on code is through Emmet, a plugin for many popular editors including one of my current favorites, Visual Studio Code. Emmet can help you save keystrokes when writing HTML, CSS, and XSL. Emmet works like snippets in the full Visual Studio IDE. You simply type one or a combination of Emmet’s abbreviations, press the tab key, and Emmet expands your abbreviation with the relevant markup or code.

Emmet in Visual Studio Code

But Emmet goes further, by including a powerful and compact syntax for creating multiple entities, inserting attributes, and more. For example, you can create a basic HTML5 page structure by simply typing ! then pressing the tab key. You can see the results below:

And when you’ve expanded the ! abbreviation (which is just an alias for the longer html:5 abbreviation), the editor automatically places the cursor inside the <body> tags, and highlights the title element’s “Document” default text, as it’s assumed you’ll want to replace this. You can just tab to the highlighted text to replace. See it in action:

So far, so good. If you’re starting from scratch on a new page, that’s already saved around 139 keystrokes. But what else can Emmet do?

Powerful Selector Syntax

One of the other neat things that Emmet provides is a selector syntax based on CSS selectors, which makes it easy to pick up the basics, and create some fairly complex markup with relatively few keystrokes.

Let’s say I want to add a <div> to my page, with the id of “myDiv”. In CSS, we target the id attribute of an element with a hash mark (#), and Emmet likewise uses the hash mark to indicate when we want to create a div with an id, like so:

Similarly, if I want to add a CSS class to an element, I can simply precede it with a dot, just as I would when creating a rule in CSS. And it’s easy to add multiple classes to the same element…just separate each class with a dot:

And, of course you can use > for child elements and + for sibling elements, like so:

Those of you who are heavy Bootstrap users are probably already seeing how nicely Emmet abbreviations are for working with Bootstrap classes, to lighten the load of building out a nice Bootstrap UI from scratch. Also notice in the screencap above that you can use colon (:) after a certain elements (input and a, for example) to specify the kind of element you want via the type or href attribute.

You can also provide your own custom attributes by wrapping them in square brackets, using the syntax: element[attributeName=”attributeValue”]. You can also use curly braces to indicate literal text to include. For example p{My Text} would expand to <p>My Text</p>.

But wait…there’s More!

But that’s just the basics. Emmet also allows you to use parentheses to group elements, and the asterisk to indicate that you want multiple of a given element or group of elements:

You can also use the ^ symbol to “climb up” one level in the element tree (and you can use more than one to climb multiple levels.

There’s lots more to learn, but hopefully the examples above have whetted your appetite. Check out the Emmet Documentation and Cheat Sheet for additional details on the snippets, abbreviations, and more available with Emmet in Visual Studio Code, and in other Emmet-capable editors.

Conclusion

To be clear, Emmet isn’t new, but it’s a fantastic way to be more efficient at generating very specific markup quickly. If you’re using Visual Studio Code (or any other Emmet-capable editor) and you’re not using it, you should definitely give it a try.

Bonus Tip

I’ll leave you with one bonus tip specifically for Emmet in Visual Studio Code. The August 2016 release of Visual Studio Code includes a new preference that allows the mapping of one syntax profile to another for Emmet. This is a very useful addition, since one of the annoyances I’ve had when doing simple Angular 2 components in Visual Studio Code was the fact that inline templates in Typescript files would not perform expansion of Emmet abbreviations and snippets. With the simple addition of the following to your settings.json file (either at the workspace or user level), you can map the HTML expansions into the Typescript syntax profile:

Once you’ve done that, you can easily build out your component with an embedded template, and still take advantage of Emmet to speed your markup creation (using extensions to provide snippets for Angular 2 helps, too):

]]>https://devhammer.net/2016/09/09/save-time-and-keystrokes-with-emmet-in-visual-studio-code/feed/720183Visual Studio Code Hits the 1.0 Milestonehttps://devhammer.net/2016/04/14/visual-studio-code-hits-the-1-0-milestone/
https://devhammer.net/2016/04/14/visual-studio-code-hits-the-1-0-milestone/#respondThu, 14 Apr 2016 21:47:44 +0000http://devhammer.net/?p=23491I must have missed this while avoiding the interwebs around April Fool’s Day, but apparently Visual Studio Code is no longer beta/preview, and has hit their 1.0 version milestone. UPDATE: I was confused when reading the update log, which had the 1.0.0 update listed as March 2016…this must’ve been referring to the preview 1.0 release. … Continue reading Visual Studio Code Hits the 1.0 Milestone

]]>I must have missed this while avoiding the interwebs around April Fool’s Day, but apparently Visual Studio Code is no longer beta/preview, and has hit their 1.0 version milestone.

UPDATE: I was confused when reading the update log, which had the 1.0.0 update listed as March 2016…this must’ve been referring to the preview 1.0 release. Thus the correction above. The official public 1.0 release was yesterday, so I didn’t miss it after all. Details below the fold…

Visual Studio Code Gets Real

The 1.0 release of VS Code is great news for anyone who was eager to take advantage of this easy-to-install and lightweight editor, but was waiting for a non-beta release. Or just concerned about stability. They’ve had over 2 million downloads since the initial preview just under a year ago. Pretty cool. And proof positive that developing apps using Electron Shell is a pretty slick way to deliver great functionality across platforms.

]]>https://devhammer.net/2016/04/14/visual-studio-code-hits-the-1-0-milestone/feed/023491Top 5 Reasons to Speak at NoVA Code Camp!https://devhammer.net/2016/03/15/top-5-reasons-speak-nova-code-camp/
https://devhammer.net/2016/03/15/top-5-reasons-speak-nova-code-camp/#respondTue, 15 Mar 2016 18:21:15 +0000http://devhammer.net/?p=23231…or your local user group, meetup, or code camp. Becoming a Speaker As someone who’s been speaking on technical topics since the late 1990s, I can say with great confidence that there are huge benefits to sharing your knowledge at local code camps and user groups. And if you’re in the greater Washington, DC metro … Continue reading Top 5 Reasons to Speak at NoVA Code Camp!

Becoming a Speaker

As someone who’s been speaking on technical topics since the late 1990s, I can say with great confidence that there are huge benefits to sharing your knowledge at local code camps and user groups. And if you’re in the greater Washington, DC metro area, I want to encourage you to submit a talk for the Northern Virginia Code Camp, which is coming up on April 30th, 2016. Here are 5 reasons to speak you should consider:

Top 5 Reasons to Speak

Share Your Knowledge: When you present on a topic, you bring your unique experience and perspective on that topic. It doesn’t matter if you think you’re an “expert.” You still have knowledge you can share. That knowledge will help others, and in the long term, it’ll help you, too.

Make Friends: Becoming a speaker will introduce you to a new set of peers, and you’ll find people who share your passion for technology, and who can help you find the next speaking opportunity, and more.

Build Confidence: As anyone who’s tried Toastmasters could tell you, being able to communicate ideas can open many doors, and will provide you with a boost of confidence. Polishing this skill will help you in both your personal and professional life.

Learn More: When you speak at a code camp, you are guaranteed to learn something new about the topic you choose to speak about. In fact, speaking (along with writing) can be one of the most effective ways of learning more about a topic you’re interested in.

Earn More: One of the big advantages I found over the years from speaking was that it had both direct and indirect impacts on my earnings. Becoming a speaker signals to many employers that you have expertise, and expertise often translates to higher pay. Improving income shouldn’t be your only goal in speaking, but it can be a nice fringe benefit.

BONUS REASON – User Groups and Code Camps are Beginner-Friendly: If you’ve never done a presentation before, local user groups, meetups, and code camps are the perfect venue to give it a try. The goal of these events is to have the community helping the community. The speakers are developers, too, and many of them may also be speaking for the first time.

Just Add You

All this room needs is you…

So there you have it, 5 reasons to speak at a local user group, meetup, or code camp. Whether you have never done a technical presentation in your life, or just haven’t done one lately, consider submitting a talk for a local event. And if you’re in the DC area, why not submit a talk for NoVA Code Camp? These events rely on folks like you to share their knowledge, and they need your support!

]]>https://devhammer.net/2016/03/15/top-5-reasons-speak-nova-code-camp/feed/023231Thread.Sleep equivalent in UWPhttps://devhammer.net/2016/02/16/thread-sleep-equivalent-uwp/
https://devhammer.net/2016/02/16/thread-sleep-equivalent-uwp/#commentsTue, 16 Feb 2016 18:03:10 +0000http://devhammer.net/?p=23091Wanted to share a quick solution to an issue I ran into while working on a Universal Windows Platform (UWP) app for my Raspberry Pi 2. Background I was building an app to read sensor data from a .NET Gadgeteer TempHumidity module using the GHI Electronics FEZ Cream, which is a HAT (Hardware Attached on … Continue reading Thread.Sleep equivalent in UWP

]]>Wanted to share a quick solution to an issue I ran into while working on a Universal Windows Platform (UWP) app for my Raspberry Pi 2.

Background

I was building an app to read sensor data from a .NET Gadgeteer TempHumidity module using the GHI Electronics FEZ Cream, which is a HAT (Hardware Attached on Top) for the Raspberry Pi 2 that allows the use of Gadgeteer modules. In my case, I’m running Windows 10 IoT Core on my Pi 2, so that I can stick with programming in C#. The original driver included a call to Thread.Sleep, which it turns out is not available in a UWP app.

For Gadgeteer modules that are directly supported (i.e. with drivers that have already been ported to work with Windows 10 IoT Core), integrating them into a UWP project is as simple as downloading the relevant NuGet packages. However, in my case, it turned out that the temperature and humidity sensor I was using was an older model which was not directly supported. The good news is that since GHI makes their Gadgeteer mainboard and driver code available on Bitbucket, it was easy to find the driver code for the sensor I’m using and work on a port to work on the Pi.

The Problem

The trouble that I ran into is that there are some differences in the programming model between the .NET Micro Framework (which is the basis for .NET Gadgeteer programming) and the UWP model which is used on Windows 10 IoT Core. The important difference, as noted above is that the latter does not support the use of Thread.Sleep to pause execution of a program. The Gadgeteer driver for the sensor I am using uses Thread.Sleep(1) to provide a 1ms pause as part of the code that reads the temperature and humidity data from the sensor v9ia a digital IO pin.

A quick Bing search later, I thought I had the answer (I’d link to the post, but the site appears to be down, unfortunately), which was to substitute:

await Task.Delay(1)

for the call to Thread.Sleep. While this does provide close to the same functionality, that particular syntax requires the containing method to be marked as async, and when I tried that, I found that my entire app ended up hanging. Given that the hardware responds very quickly, there’s no good reason to make the measurement functions async, so I wanted to avoid that anyway.

The Solution

The call to Task.Delay is a static method that returns a Task. The Wait method is an instance method, so in order to call it directly I’d need to create an instance of Task. Passing an integer value to Delay creates a Task that will complete after the specified number of milliseconds, while Wait says to have the calling thread wait until the Task on which it is called completes.

That may sound complex, but the effective result is basically the same as calling Thread.Sleep(1), or at least it’s certainly close enough for my purposes. After changing the ported driver code to use Task.Delay(1).Wait(), the driver worked properly and I was able to display the current temperature and humidity as reported by the sensor, as shown below.

Granted, not my most inspired UI ever, but the first step was getting data, and that much is now done. Now it’s on to the cloud…

For those interested…here’s the ported code for the driver. It required very few changes to use with a UWP app…really, just the change described above.

]]>https://devhammer.net/2016/02/16/thread-sleep-equivalent-uwp/feed/223091Troubleshooting Web API and Angular 2 betahttps://devhammer.net/2016/01/20/troubleshooting-web-api-angular-2-beta/
https://devhammer.net/2016/01/20/troubleshooting-web-api-angular-2-beta/#commentsWed, 20 Jan 2016 16:18:52 +0000http://devhammer.net/?p=22211Just ran into an issue with some Web API and Angular 2 code I’ve been working on, and since there didn’t seem to be much info in the wild on the error I ran into, I figured I’d blog it, in case it might help someone else. A Simple Demo of Web API and Angular … Continue reading Troubleshooting Web API and Angular 2 beta

]]>Just ran into an issue with some Web API and Angular 2 code I’ve been working on, and since there didn’t seem to be much info in the wild on the error I ran into, I figured I’d blog it, in case it might help someone else.

A Simple Demo of Web API and Angular 2?

Since I had the day off yesterday, I figured it might be a good day to jump in and start doing some work with Angular 2 (Hey, isn’t that what you do with your day off? Don’t judge!). Of course, I’d already run through a number of tutorials that dealt with hard-coded collections of data, so I figured it was time to build something that could retrieve data from an API.

My personal favorite tool for building APIs is ASP.NET Web API, and as a big fan of the OData stack and protocol, I went with building an API using the Nuget packages for OData v4. Since I’m way overdue for a new version of the Community Megaphone site, I figured that with that data, Web API and Angular 2 would be a great match.

If only it had been that simple…still, after a few hours of schema design, and getting all my packages and such lined up, I finally had a working API.

NOTE: If you’re using EF to map your relational data to your model(s), stick with populating any default values inside your code, rather than setting defaults at the database level. I spent way too long debugging an issue where I’d spent way too much time debugging an issue that arose because I’d set the [DatabaseGenerated(DatabaseGeneratedOption.Computed)] attribute on a column, not realizing that it would always use the column default, regardless of what I set in code.

Heroes, Events, Whatever

One of the things I discovered along the way is that not every part of the Angular 2 API set is equally well documented. The tutorials, I’ve found to be pretty great overall. But once you move off of the main roads, you start running into a fair number of “Not Yet Documented” API methods, so if the code examples you see don’t quite match your scenario, you may find the way harder going.

Several errors I ran into while attempting a simple GET request to my Web API were relatively easy to solve with a quick search (note that you’ll need to view the browser console to see the errors):

“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.”: Needed to set up my ASP.NET Web API to return the Access-Control-Allow-Origin header allowing the Angular site to access the API, since they were on different ports on localhost. This is pretty easy to do using the Microsoft.AspNet.WebApi.Cors Nuget package, which allows you to decorate your API Controller (or OData Controller) with the EnableCors metadata attribute. Just don’t forget to call config.EnableCors() in your WebApiConfig.Register method, too.

But the last error that I ran into was a bit of a head-scratcher.

Error trying to diff?

Yep. That’s a pretty obscure error message. After fixing all the other issues above, the last error message I got was:

What finally got me going was just going back to basics and setting a breakpoint on my http.get call, and stepping through the code from there. As an old-school .NET dev, it’s easy to forget that one of the big advantages of working in JavaScript and TypeScript is that it’s pretty easy these days to step straight from your code into the framework or library code that you’re using. So I was able to find the place in the code where the exception was being thrown (which comes from default_iterable_differ.ts):

1: DefaultIterableDiffer.prototype.diff = function(collection) {

2:if (lang_2.isBlank(collection))

3: collection = [];

4:if (!collection_1.isListLikeIterable(collection)) {

5:thrownew exceptions_1.BaseException("Error trying to diff '"

6: + collection + "'");

7: }

8:if (this.check(collection)) {

9:returnthis;

10: } else {

11:returnnull;

12: }

13: };

The key piece is line 5/6, where the exception is thrown. Once I was able to locate this in the browser dev tools, I set a breakpoint, and ran through my code. When running with the hand-coded collection of events, it worked fine. But when working with the return value from the http.get call, it would throw. Thanks to the breakpoint, I could examine the collection in each case.

Turns out that the answer was quite simple. Instead of returning the array of objects I was expecting, the call to my OData API was returning a context object whose “value” property had the array I was looking for, because that’s how an OData controller in Web API works. So I changed my http.get call (which I was executing inside of the ngOnInit function) from:

1:this.http.get('http://localhost:62016/Events')

2: .map((res: Response) => res.json())

3: .subscribe(cmevents => this.cmEvents = cmevents);

to this:

1:this.http.get('http://localhost:62016/Events')

2: .map((res: Response) => res.json())

3: .subscribe(cmevents => this.cmEvents = cmevents.value);

With that change made, Angular was able to iterate over my data using the *ngFor syntax, and all was right with the world.

At least until the next exception.

Some Perspective

The many small errors I ran into (some of which, admittedly, are a product of being new to Angular 2, and a little rusty on my mental JSON parsing) added up to it taking a pretty much full day to go from schema to API to working demo. I initially found this kind of frustrating, since I’d hoped to have it done faster. It’s not that Web API and Angular 2 don’t work well together, it’s more the small things that can trip you up when you jump from working with fake data to real APIs.

Compared to ASP.NET Web Forms (what Community Megaphone currently uses), a day to get a working databinding example seems like an eternity. But given the differences in architectural approach (for example, much of the day was spent on the API, not the client code), I’m fairly pleased with what I was able to get done in a day. As the rough edges are knocked off of Angular 2, and the documentation is further fleshed out, I’m sure it’ll get faster, too. And I hope to contribute some examples with Web API on the back end as I go along.

Once I have my simple demo a little more polished, I’ll do another write up showing the simplest end-to-end Web API and Angular 2 example I can put together.

]]>https://devhammer.net/2016/01/20/troubleshooting-web-api-angular-2-beta/feed/122211Multiple Monitors in Remote Desktop with Windows 7 Prohttps://devhammer.net/2015/11/18/multiple-monitors-in-remote-desktop-with-windows-7-pro/
https://devhammer.net/2015/11/18/multiple-monitors-in-remote-desktop-with-windows-7-pro/#respondWed, 18 Nov 2015 14:00:25 +0000http://devhammer.net/?p=19451The Best Laid Plans… I’ve recently transitioned from working at home to working on-site at a client. The client did a great job of provisioning a nice desktop PC and large dual monitors. But one of the things I missed from my home office was my standing desk. To remedy this, I planned to bring … Continue reading Multiple Monitors in Remote Desktop with Windows 7 Pro

I’ve recently transitioned from working at home to working on-site at a client. The client did a great job of provisioning a nice desktop PC and large dual monitors. But one of the things I missed from my home office was my standing desk. To remedy this, I planned to bring in my laptop, set it up on a stand, and re-purpose one of the two monitors they provided so I could use Remote Desktop to connect to the desktop PC and still enjoy dual monitors…but there was a small wrinkle in my plan.

I’m Sorry Dave…

Sadly, sometimes the things you think will be easy turn out not to be, especially when it comes to computers. In this case, the problem was that the desktop PC I’m developing on is running Windows 7 Professional. This is fine for development, but unfortunately, Windows 7 Professional does not support multiple monitors when hosting an RDP session, even if the client OS (in my case Windows 10 Professional) does.

Unfortunately, I discovered this only after having brought my laptop stand (this Furinno Laptop Stand (affiliate link), which I picked up on sale at woot.com for around $40…you can get one from Amazon for around $45) in to the office, so I figured before admitting defeat, I should try to find a workaround.

Where There is a Will, There is a Way…

Turns out that while Windows 7 Professional doesn’t support multiple monitors as discrete monitors, it does support spanning multiple monitors, which you can enable by saving your remote desktop settings into a .rdp file, and edit that file, adding the line:

span monitors:i:1

to the file and save it. Then use that .rdp file to launch Remote Desktop.

VS Code works great for .RDP files, too!

But that leads to another problem…with spanning enabled, any maximized windows will span both monitors, which is hardly optimal.

It’s a Snap!

The final piece of the puzzle is to leverage the Snap feature of Windows to snap each window to the left or right of the spanned monitor pair (note that this workaround is really only practical when using two monitors). Simply use the Windows key + left or Windows key + right to snap the active window to the monitor you want it on.

Getting Things Done…

The solution isn’t perfect, by any means. But as the old saying goes, “never let the perfect be the enemy of the good.”

If you want to use multiple monitors with Windows 7 Pro (or another host OS that does not support multiple monitors), give this workaround a try, and let me know how it works for you!

]]>https://devhammer.net/2015/11/18/multiple-monitors-in-remote-desktop-with-windows-7-pro/feed/019451Community Megaphone and a Post-INETA Futurehttps://devhammer.net/2015/11/16/community-megaphone-and-a-post-ineta-future/
https://devhammer.net/2015/11/16/community-megaphone-and-a-post-ineta-future/#commentsTue, 17 Nov 2015 02:41:30 +0000http://devhammer.net/?p=20111As I noted a few months ago, INETA North America is ceasing operations and wrapping up loose ends. As part of that wrap-up, the INETA board asked if I would be willing to help with community continuity through the website I created, Community Megaphone. The idea was for INETA to encourage folks on their mailing list to … Continue reading Community Megaphone and a Post-INETA Future

]]>As I noted a few months ago, INETA North America is ceasing operations and wrapping up loose ends. As part of that wrap-up, the INETA board asked if I would be willing to help with community continuity through the website I created, Community Megaphone. The idea was for INETA to encourage folks on their mailing list to join a list I set up to discuss the future of Community Megaphone, and what kinds of features might help fill some of the gaps left behind by the end of INETA North America.

With this post, I’d also like to offer others in the developer community the same opportunity. You can join the mailing list, which is for the purpose of providing ongoing updates on the future plans for Community Megaphone. And if you don’t want to join a mailing list, but still want to provide feedback or ideas on features that would be useful for user group leaders, speakers, and attendees of developer community events, you can do so on the Community Megaphone Uservoice page, or the Feedback page on the Community Megaphone site.

I’m looking forward to the feedback of the community, and finding better ways to serve the developer community, and I hope you’ll share your feedback, too.

]]>https://devhammer.net/2015/11/16/community-megaphone-and-a-post-ineta-future/feed/120111Learn You Node with VS Codehttps://devhammer.net/2015/10/05/learn-you-node-with-vs-code/
https://devhammer.net/2015/10/05/learn-you-node-with-vs-code/#commentsMon, 05 Oct 2015 12:22:59 +0000http://devhammer.net/?p=17671Node.js may not be the “new” hotness, but it’s still pretty hot, and getting hotter all the time. Whether you’re a .NET developer who’s still on the fence about JavaScript, or just haven’t gotten around to taking a look at Node, now is a pretty good time to do so, and in this post, I’ll … Continue reading Learn You Node with VS Code

]]>Node.js may not be the “new” hotness, but it’s still pretty hot, and getting hotter all the time. Whether you’re a .NET developer who’s still on the fence about JavaScript, or just haven’t gotten around to taking a look at Node, now is a pretty good time to do so, and in this post, I’ll show you a nice combination of tools that make learning Node easy and fun, namely nodeschool.io and the new Visual Studio Code editor.

What is Node.js?

On the off chance that you’ve found your way here, but don’t know what Node.js is, Node.js (sometimes referred to simply as Node) is an execution environment for JavaScript code, based on the V8 JavaScript runtime from Chrome. It’s designed to be fast, lightweight, and efficient. You can use node to write server applications in JavaScript, from real-time chat apps, to web APIs, to full web applications. While Node itself is pretty simple, with a [limited, but want another word] API set, it ships with NPM, the node package manager, which provides a fast and easy way to install packages, which are collections of functionality wrapped up in such a way as to make them easy to add to your Node projects. Node packages are available to facilitate all kinds of applications, including MVC-style routing engines, template engines, unit testing and more.

Nodeschool.io

Nodeschool is both a series of ongoing workshop events and a website packed with open-source tutorials that will help you learn Node.js and related technologies via fun, interactive command-line challenges. Each challenge outlines a task for you to complete, gives you the background on how to go about it, and provides commands for you to verify that your solution is correct.

While I have not completed all of the tutorials available on Nodeschool, most that I have tried are high quality, and do a great job of teaching the core concepts. I have run into a couple of errors here and there, and the tutorials are not all consistent in terms of the level of detail provided in instructions, or in the reliability of the tutorial code, but for the most part they work very well. And since the tutorials are open-source (all the ones I tried are posted on Github), you can easily submit an issue for something that’s broken, or if you know how to fix it, submit a pull request and help improve the tutorial.

Visual Studio Code

For folks who may not be familiar with Visual Studio Code, it’s a lightweight code editor based on the Electron shell built by Github for their Atom editor. Microsoft originally used Electron to build the Monaco editor, aka Visual Studio Online. If you’ve ever edited a web site file from within the Azure Management Portal, you’ve used Monaco. Visual Studio Code is a stand-alone editor based on that work, with plenty of enhancements. It’s also much more streamlined than full Visual Studio, and provides a more distraction-free environment for working on your code, while still providing productivity features like IntelliSense, snippets, and more, with new features being added on a pretty regular cadence.

Installing Node.js

To take advantage of the nodeschool.io tutorials, you’ll need to have Node.js installed. You may already have a version installed, but if you don’t, you can just head over to https://nodejs.org/download/ and download the version for your platform.

Finding Existing Node.js Versions

Note that Visual Studio 2015 has an option to install Node.js for working with task runners like Grunt and Gulp, so you might already have a version installed. But this version is installed in a way that does not put Node into the system PATH, so it’s private to Visual Studio (this was done to prevent conflicts with any existing Node install). Ryan Hayes discusses one pitfall of this in this blog post.

If you have Visual Studio 2015 installed, and chose the option to install Node, you have two options. You can go the normal install route for Node.js, or you can update your PATH environment variable to include the install path for the private copy of Node installed by Visual Studio (by default this would be C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\node & C:\Program Files (x86)\Microsoft Visual Studio 14.0\Common7\IDE\Extensions\Microsoft\Web Tools\External\npm for the Node Package Manager).

Installing Visual Studio Code

To get started with Visual Studio Code, simply head over to https://code.visualstudio.com/. The website should automatically detect your OS, and offer the correct download, but you can also choose alternate downloads (Windows, OS X, and Linux are supported).

At the time I’m writing this, Visual Studio Code is still considered a preview release, with the current version being 0.8.0. Despite the preview label, it’s quite stable, and very usable. And as noted above, with each updated release (releases have so far been on a monthly basis), more functionality is added.

NPM – The Magic Behind Nodeschool.io

The key piece of software that makes Nodeschool.io work is NPM. NPM, the node package manager, is used to install each tutorial module. You can then execute the tutorial by typing in the name of the tutorial. The command to install each tutorial is listed on the Nodeschool.io website. For example, to start the ‘javascripting’ tutorial, you’d type the following at the command line, after installing node.js:

npm install -g javascripting

This tells NPM to install the javascripting module, which includes downloading all of the files related to the module, while the -g parameter tells NPM to install these files globally, so that you can access them from anywhere at the command line. To run the tutorial, you can now simply type:

javascripting

at the command line. This pattern is consistent across all the tutorials, making them quite easy to use.

But Where Are the Files?

By default on Windows 8/8.1/10, the tutorial module files will end up in the folder C:\Users\[USERNAME]\AppData\Roaming\npm\node_modules. To get the path to your npm global location, particularly if you’re on Mac or Linux, type the following at the command line:

npm config get prefix

NPM will return the local path to the npm folder. Your global modules will be in the node_modules subfolder.

If you don’t like the idea of installing a bunch of modules globally, it IS possible to install the modules to a local folder, and run them that way, but it’s harder, and not the intended path. For example, if you wanted to run the ‘javascripting’ tutorial, you could create a folder for the code (say, C:\node\javascripting\), and switch to that folder in your command line, and execute the following command:

npm install javascripting

Note that this time, we’re not using the -g argument, so NPM will install the packages into a local node_modules folder. Since the command file isn’t at the root of the local folder, you now have to tell node where to find it, so to start the tutorial you need to type:

node_modules\.bin\javascripting

Be aware that I have not tested this with all of the tutorials, so it’s possible it may not work with all of them. Your best bet is to stick with the instructions and install the tutorial modules globally. If you are concerned about having too many modules installed globally, you can always uninstall them once you’ve completed a given tutorial, using the command (substitute the name of the module you want to uninstall):

npm uninstall -g javascripting

Writing and Editing Your Code

Once you’ve installed a tutorial, and before starting it, you can easily launch Visual Studio Code in the current folder by typing:

code .

In Windows, I like to take advantage of the snapping feature to run my command line and Code side-by-side, like so:

Then when you launch a tutorial, you’ll get a helpful menu of the available exercises, right alongside the editor, as shown below:

You can navigate the list with the up/down arrow keys, and start an exercise using the ENTER key. For each exercise, you’ll usually be creating a new file (I used the pattern of naming each file the same as the exercise, so I could easily keep track of them, but you can name them whatever you like), which you can do either in Visual Studio Code (File > New File or Ctrl+N), or via the command line (on Windows, type: ‘type NUL > introduction.js’ to create the file introduction.js). Visual Studio Code will automatically pick up new files and folders as they’re added.

Running and Verifying Your Code

One of the important things you should understand about the Nodeschool tutorials is that they often rely on input values from the environment, many of which you’ll use in the exercises. As such, you can’t simply run the code using the usual pattern of ‘node [filename]’ from the command line.

The tutorials provide two ways to run your code such that the input values are available, RUN and VERIFY. In both cases, you start with the name of the tutorial, and then add either ‘run’ and then the name of the file you want to run (which allows you to test as you develop) or ‘verify’ and then the name of the file you want to verify (which allows you to see if your solution to the exercise is correct). So if you’ve completed the code for the ‘Introduction’ exercise in the ‘javascripting’ tutorial, you’d type the following at the command line to verify and complete the exercise:

javascripting verify introduction.js

If your solution is correct, you should get a message to that effect. If it is incorrect, most of the tutorials will provide you with some tips on what to look for in correcting your code (note that some tutorials are better than others in that respect).

If, at any time, you want to reset the completed status of a tutorial, you can simply type:

tutorialName reset

So for the ‘javascripting’ tutorial, this would be:

javascripting reset

Summary

The combination of NPM, Nodeschool.io, and Visual Studio Code provides a nice set of tools that make it easy to get started with JavaScript and node.js development, including a powerful command-line module installer, and a distraction-free code editor. The tutorials provided by Nodeschool.io are mostly simple enough to work through on your own, but if you run into any challenges, don’t fret. You can check the Nodeschool website for a local Nodeschool event in your area, or ask questions if you get stuck.

For a quick walkthrough of installing the necessary software and running the first challenge in the javascripting tutorial, check out the video below…