NodeJS for Visual Studio – what to expect

Visual Studio and NodeJS are two names you don’t generally see next to each other – but today the NodeJS for Visual Studio plugin hit version 1.0 and as an avid NodeJS developer I had to check it out and see how it compares to my standard suite of OSX and Webstorm!

But wait you say, I thought Node didn’t need an IDE? Well, technically no, but once your app gets even slightly big, it makes life much easier – especially if you get intellisense.

Installation was a breeze, as was creating my first project. I decided to build a quick little ExpressJS app as I know my way around it and it’s almost the defacto library for building web apps on Node.

Screenshot 2015-03-26 11.52.16

Straight out of the box you get a “Hello world” Express app. Nice. I hit F5 (standard Visual Studio debug key) and boom, it kicks off Node, your application and opens your default browser. So far, so good. So what else have they added then?

Intellisense, and really good intellisense at that

We’ve all been there before – calling a module and we can’t quite remember the parameters a method takes in… especially when we wrote the module ages ago. Visual Studio traditionally has really good intellisense and the Node plugin is no different. It provides tips and autocomplete for both the current Javascript file and any modules imported via the require command.

Screenshot 2015-03-26 12.04.20

Screenshot 2015-03-26 12.04.25

Debugging

One of the harder things to do in NodeJS is step through debugging. There are a few tools out there these days, but none are quite as polished as the one inside of Visual Studio. The plugin team have done a brilliant job of integrating Visual Studio with the Node debug tool. You get full step through support and can see the value of each and every object. Perfect.

Performance tracking

While there are quite a few different options for tracking NodeJS performance, having one built straight into the tools you’re using always helps keep things simple. From my short play with the tools, they appear to provide a reasonably comprehensive overview of your application and how well it’s running and where you could look to make improvements in performance.


It wasn’t all good though sadly – the NPM package installer wouldn’t work no matter what I tried. I also attempted to open an older, very big Express app and didn’t get very far, though I’m sure that’s more my project than the Visual Studio stuff. But it can only get better right? And with Microsoft supporting NodeJS as a first-class citizen on Azure, the future looks pretty bright for Node and Windows/Visual Studio.

For me though, it’s not quite there yet, sadly. Will definitely be back to check it out though to see how far it’s come!

Want to track errors in your Node.js applications? Lucky for you, Raygun supports most languages and platforms – including Node! Try the Raygun provider for Node.js free for 30 days by starting a trial here.

Share this post

Deployment Tracking Arrives In Raygun!

Today is a good day, certainly for Raygun customers. A day where we proudly announce Deployment Tracking is now available in Raygun!

Here we’ll let you know what to expect from Deployment Tracking, how it can empower your team to reach new error reporting heights and give you better visibility of your software release performance. Hopefully the way we’ve implemented things here at Raygun will go above anything you might have experienced before when it comes to tracking your deployments alongside your error reporting.

Deployment Tracking is available right now for Medium Raygun plans and above.

What exactly is Deployment Tracking and what can it do for me?

Deployment tracking will essentially allow you to timestamp your deployments, notifying Raygun when you release your software. Discover problematic deployments and see the commits that made up each of them. We’re supporting the major deployment toolsCapistrano, Grunt, Octopus Deploy, Bash, Rake, Powershell and more. You’ll then be able to easily see which errors occurred after your latest deployment, which were fixed, and which are still occurring.

Setting Deployment Tracking Up For The First Time

Click on the Deployments option on the Raygun application menu to find easy setup instructions that you can follow. View the documentation for your deployment tracking tool of choice here by clicking the Set up button.

deployments

Once set up, new deployments and their details will appear under your Deployments screen. You can filter these by date and time. Details of the deployment version, notes, person and time are all easily viewable. Click on the deployment version to see the details of each release.

deployments1

Raygun will now display new errors that have occurred since your latest release, regressions and errors that are still occurring (happening before and after the deployment). This gives you a great view of which errors you have eliminated and which you have introduced with your latest updates.

deployments-2

Clicking on each error brings up the diagnostic information for your to drill into each error group to find the underlying cause.

Deployment Tracking is a simple to use but powerful feature we think you’re going to love, and it’s available right now! Try it out today, we’d love to hear your feedback.

On a Small Raygun plan but want Deployment Tracking? Upgrade your account now. Not a Raygun user? We have a free trial available!

Share this post

Easy exception handling for Windows Store applications

Exception handling for Windows Store apps couldn’t be easier! Using the Raygun4Net NuGet package, you can set up your Windows Store application to report all unhandled exceptions (and even handled ones if you like) to Raygun, where you can learn what exceptions are causing your application to crash.

Adding Raygun to your Windows Store App

The first thing you need to do is install the Mindscape.Raygun4Net package. You can do this through the NuGet Package Explorer, or through the Package Manager Console by running Install-Package Mindscape.Raygun4Net.

Once this is installed, you need to attach the RaygunClient to your Application. This is easy – just add this code to your App’s constructor

You will need your Raygun Application’s API Key for this – you can find it in the Application Settings in Raygun.

This will set up Raygun to catch all unhandled exceptions. I told you it was easy! But wait, there’s more!

If your app knows who is logged in, you can attach that user’s information to the exception reported to Raygun. Maybe all of your crashes are coming from one user with bad hardware, or a low end device. Raygun’s User Tracking feature lets you see this information alongside the exception.

When you know what user is using your app, simply set the UserInfo property on the RaygunClient.Current object with as much information as you have.

Note that AdvertisingId might be empty if the user has turned off the Advertising Id in their Windows Privacy settings. That makes it a poor candidate for the Identifier (the RaygunIdentifierMessage constructor parameter is a unique identifier for the user).

Grab your Raygun trial

Want awesome error handling for Windows? Dive in and hook up Raygun in your Windows Store apps now! If you need a Raygun account, as always there’s the 30-day free trial available here.

Share this post

Creating SVG icons with PNG fallbacks

Images suck at being responsive. This combined with the ever increasing PPI(pixels per inch) of our laptops/phones (soon desktop monitors) means designing for 72dpi is no longer really a sustainable solution. If your image is originally derived from vector artwork, you have the option to save it as an SVG (Scalable Vector Graphic).

SVG’s scale indefinitely, and are widely supportedIn this post I’m going to show you how to go about creating SVG icons that scale with PNG fallbacks to make your life a whole lot easier!

russian

Why would you use SVG?

Well.. you COULD send a larger, more detailed PNG/JPG with more than twice as many pixels to a HiDPI device (most likely a mobile phone), to show a crisp image, but that means that your user is going to be downloading that larger image, most likely on their phone on a slow internet connection. Spending precious seconds loading the image, all whilst burning bandwidth downloading all those bitmapped pixels. That’s pretty lame!

Another cool thing is that most browsers ONLY download the used image, so you’ll only be sending one image, saving precious bytes of mobile data.

The Pros:

  • Simple SVGs usually have a SMALLER file-size than equivalent PNGs
  • Faster load times vs large PNGs
  • Works in all modern browsers
  • Scalable to ANY screen size (“Retina ready”)
  • Solid fallback: users on unsupported browsers will get scaled up PNGs

The Cons:

  • This method only works on background images (You’ll need Javascript to detect and replace images if they are inline)

Prerequisites:

  • A vector graphic

magnify

So how do we do this…

Step one: Saving out a SVG and PNG

  • Open up your vector graphic in Adobe Illustrator (or equivalent)
  • I design at a 72 ppi to avoid image scaling problems. (scaling up is easy!)
  • Save image out as a PNG(24bit) and SVG

Step two: Including Modernizer

Simply include Modernizer.js in the head of your project, Modernizer adds classes to the html element if a new web technology is available. e.g: if SVGs are available Modernizer will output the class html.svg on the html element.

Step three: HTML & CSS

Create an element, set png as a background-image, specify the element size, then replace the PNG with SVG using Modernizer.

Step four: Profit

All done. Now your image will be looking crisp on any device, at any zoom level, all the time for a fraction of the file size! I hope you found this tutorial useful, give it a try with the code-snippets below. If you’re a developer, or work with a development team, be sure to give Raygun a try whilst you’re here. There’s a free trial, so signup and invite your team to see how you can discover and identify software errors in real-time!

See the Pen ZYMwLp by Kyle Henwood (@kyleHenwood) on CodePen.

Share this post

Rad tech podcasts you should be subscribing to!

Your code is compiling and you’ve got some time to kill. You know you should do something worthy with this gift of time, but 30 minutes later you end up 23 tabs deep reading about otters and their favourite rock pouches.

compiling

And while you’re on your random quest to search every disturbing fact about otters on the internet, there’s a little voice telling you that you probably shouldn’t be wasting this time and should be doing something productive. Not that learning about the fact that otters have a rock pouch on their bodies, let alone that it is for their favourite rock, isn’t productive – but your boss or conscience might disagree.

My way around this feeling of gnawing guilt is getting started on a good podcast while I wait for the thing I’m working on to finish doing the thing it needs to do. I usually clear my inbox/desktop/intercom messages simultaneously for maximum feel-awesome effect. There’s so many podcasts that I love, and here’s a subset of some kickass tech ones to get you inspired.

Pretty much anything with Derick Bailey

entreprogrammers-cover-art-250x250

Derick is a great guy and a talented programmer, and he’s hosted and interviewed on more podcasts than you can fathom. His current podcast, Entreprogrammer, is a project with fellow programmers turned entrepreneurs @josh_earl@jsonmez and @cmaxw – and is a fly on the wall look into what life is like for devs who cross over to the business side. With a lot of humour – I can totally recommend this one.

Gone Mobile by Greg Shackles (Xamarin MVP)

Gone.Mobile.Header.LogoGone Mobile is a podcast discussing the latest in mobile development, particularly using Xamarin technologies and .NET / C#. The host, Greg Shackles  finds the time to not only publish a Gone Mobile episode every other week, but to work as an engineer, author for @OReillyMedia, organize @NYCMobileDev meetup and create apps like @myEchoApp. You know what they say – the busiest people get the most done!

The MattKremer.com Podcast

MattKremerMatt Kremer is the author of one of my favourite tech blogs, so naturally I subscribe to his podcast. He talks about how to build a product from scratch, then launch it and market it (sometimes all in one weekend). He’s also written a book called ‘Building Software Products in a Weekend’ – so you know he’s for real.

 

 The great and powerful Scott Hanselman

hanselminutesIs there anything Scott Hanselman can’t do!? He’s the host of several amazing podcasts – and I subscribe to both Hanselminutes and This Developers Life – as well as being an author of several books, an established speaker, a teacher and a comedian. In addition to these achievements, Scott is a long time Microsoft employee and advocate for Diabetes research.

JavaScript Jabber

javascript-jabberA weekly podcast about JavaScript, including Node.js. Interested in all things Javascript? This is the podcast for you my friend. I’m totally new to learning JS and I still enjoy this podcast – which is saying something – because most very technical articles and talks tend to send me into a frustrated rage! Created by DevChat.TV – who also make a bunch of relevant tech podcasts like Ruby Rogues.

 

So this is certainly not a definitive list of great tech podcasts, but these are my top recommendations based on what I enjoy in an audio episode – which is easy listening and a bit of witty banter. Any suggestions? I’d love to hear them :-)

Share this post

Speed up your markup with Zen Coding / Emmet.

The Raygun team is made up of a bunch of nerdy folk just like yourself. Occasionally they write about tools they like and thoughts they have about dev-type topics. This week we’ve got Rick, our longboarding-scubadiving-Swedish speaking front-end dev talking about how Emmet makes his life so much easier by making writing CSS a breeze.

If you haven’t heard about Zen Coding or Emmet, you’ve probably been writing your markup in the dark. It’s time to put some light to your development workflow. Zen Coding and Emmet help you write your markup more quickly.

Background

In 2008 Vadim Makeev started to write the open source project – Zen Coding, which allows you to transform CSS rules to HTML markup. This project later changed its name to Emmet.

We’ve all been writing markup that feels like it takes ages to write, a lot of tags, rules, classes, ids and text. It takes time and it is so frustrating when a closing tag doesn’t mach a start tag. To write markup character by character takes time. Having a good code-editor makes it much easier. Using Zen Coding makes it a dance.  So how does it work?

CSS roles to HTML markup

It’s beautiful in its structure and I will let this example demonstrate that.

This will result in a ul list with with 10 li tags. Each one with given class name.

Easy? Let’s look at one more…

You are probably now starting to get the logic. It pretty much works the way we’re used to doing things with CSS.

  • A . will add a class to the element.
  • A # will add an id to the element.
  • A > will make the right element to a child of the left element.
  • A + will make the right element to a sibling to the left element.
  • A *[number] will loop the element [number] of times.

OMG it’s MAGIC. I want the magic now.

First of all. Calm down, I know it’s exciting.

Emmet is well supported across many code editors since it’s written in Javascript and is easy to implement. Shortcuts are different for each plugin. For example, in Sublime you can put the cursor at the end of the line and hit ctrl+e to apply magic… after you have installed the plugin.
You can find a list of plugins for different text editors at emmet.io/download/.

I can’t find a plugin for my code-editor.

Note that this is NOT all of the existing plugins. Do a Google search and hopefully you will have better luck. According to Microsoft user statistics, there were more than 2 million developers using Visual Studio in the year 2014 – so here’s how to get started with the plugin for Visual Studio 2013.

These are the 4 steps you need to get your magic markup in Visual Studio Emmet 2013.

  1. Install
  2. Restart Visual Studio (After restart you should have a new tab in the top menu)
  3. Write your “css rules” e.g div.hello>div.world
  4. Hit ctr+1 or hit “expand abbreviation” under your new “Emmet” tab
  5. Enjoy your auto generated code.

If you have good tips of plugins that are not in the list please leave a comment.

So let’s dig deeper into the awesomeness

Emmet will expand everything between the start of the line to the cursor. So if you have the cursor in the middle of the line it will only expand from the beginning to the middle.

Let’s write some text…

Don’t we all love lorem ipsum but hate to implement it… Not anymore.

Lorem text can also be repeated within loops like…

The Syntax is still too long! If you think so you might be a bit too lazy, but fair enough. It’s still possible to do the syntax a bit shorter.

By default Emmet will define a div if no element is defined.

In some cases it can be a bit more intelligent as well.

We can use the CSS attribute brackets to apply attributes.

Quite quickly you will notice you get greedy and want more. You want to make a block as a sibling to another block. Yes, we’re talking about groups.

Evaluate math expression. Note that there will be another hot key for this action.

Auto increment of classes text or content. Note that each dollar sign represents one digit and will be increased for each iteration.

Summary

Emmet is probably the easiest and most powerful developer tool I know. It makes writing markup more fun, even a bit cool. I hope you found this article useful and that it brought some light to your coding. Who wants to code in the dark?

Before I say good bye. Let’s get crazy

While you’re here, if you’re a software developer, then you should certainly take a look at our product – Raygun. Error tracking and crash reporting was never this fun and easy. Try out a free trial today!

Share this post

New release: Raygun4Net 5.0

Today we’re pleased to announce the release of Raygun4Net version 5.0. .NET error handling is better than ever! Here’s a quick look at the improvements:

Raygun4Net

Compatibility between the Mvc, WebApi and standard .NET NuGet packages

In version 4.0 of Raygun4Net, we split out the Mvc and WebApi support into separate NuGet packages. This solved various dependency issues and we got a lot of positive feedback about this change. The Mvc and WebApi packages are compatible with each other in case you need both in the same project, but the standard Raygun4Net package was not compatible with the other two packages due to assembly and class name conflicts. This wasn’t a priority because the Mvc and WebApi assemblies can do everything that Raygun4Net can do, so you’d never need to install both in the same project. But what about scenarios involving separate projects…

Say you have an Mvc application with Raygun4Net.Mvc installed. You could also have a class library that you have built which the Mvc project has a dependency to. The class library is a standard .NET library with various helpers, so all you need to install is the standard Raygun4Net package. But as mentioned previously, the Raygun4Net.Mvc and Raygun4Net packages weren’t compatible, even in separate projects, so this set up would not work.

By re-jigging the internal structure of Raygun4Net v5, the Mvc, WebApi and standard .NET Raygun NuGet packages are now compatible with each other to support any application structure.

Breaking changes?

The only real breaking change that may affect you in Raygun4Net version 5.0, is if you’ve added the Raygun4Net dll references manually. If you have installed Raygun4Net via NuGet, then you won’t have any problems upgrading to version 5.0. If not, here’s what you need to know:

For Mvc projects, make sure your project references these dlls:

  • Mindscape.Raygun4Net
  • Mindscape.Raygun4Net.Mvc
  • Mindscape Raygun4Net4

For other .Net 4.0+ projects (aside from WebApi projects), make sure your project references these dlls:

  • Mindscape.Raygun4Net
  • Mindscape.Raygun4Net4

For both of the above set ups, you can find all the correct dlls in the Mvc and Net4 folders respectively within the .zip file hosted on the latest GitHub release. Or if you build the Raygun4Net projects yourself with the build.bat script, all the correct dlls will be in the raygun4net/build/Mvc and raygun4net/build/Net4 folders. Or if you build the Raygun4Net projects in Visual Studio, all the correct dlls will be within the bin folder for each project.

Client profile support

Another addition to Raygun4Net version 5.0 is a couple of assemblies targeting the .NET 3.5 and 4.0 client profiles. If you’re building a WPF, WinForms or other desktop application that targets the client profile, you can now integrate Raygun error reporting into them. This is available in both the Raygun4Net and Raygun4Net.Signed NuGet packages, so simply install the one you need, and follow the usual set up instructions for WPF or WinForms.

Try Raygun error reporting today

How “exception proof” are your applications really? Try Raygun to get valuable insights into how well your applications are doing out in the wild, and gather all the information you need to fix exceptions before your customers point them out.

Start your free trial, no credit card required.

Share this post

Awesome Error handling for Windows Phone apps

Error handling for Windows Phone apps couldn’t be easier! Using the Raygun4Net NuGet package, you can set up your Windows Phone application to report all unhandled exceptions (and even handled ones if you like) to Raygun, where you can learn what exceptions are causing your application to crash.

Adding Raygun to your Windows Phone App

The first thing you need to do is install the Mindscape.Raygun4Net package. You can do this through the NuGet Package Explorer, or through the Package Manager Console by running Install-Package Mindscape.Raygun4Net.

Once this is installed, you need to attach the RaygunClient to your Application. This is easy – just add this code to your App’s constructor

You will need your Raygun Application’s API Key for this – you can find it in the Application Settings in Raygun.

This will set up Raygun to catch all unhandled exceptions. I told you it was easy! But wait, there’s more!

If your app knows who is logged in, you can attach that user’s information to the exception reported to Raygun. Maybe all of your crashes are coming from one user with bad hardware, or a low end phone. Raygun’s User Tracking feature lets you see this information alongside the exception.

When you know what user is using your app, simply set the UserInfo property on the RaygunClient.Current object with as much information as you have.

If you are building for Windows Phone 8.1, note that AdvertisingId might be empty if the user has turned off the AdvertisingId that property will be empty. That makes it a poor candidate for the Identifier (the RaygunIdentifierMessage constructor parameter is a unique identifier for the user).

If you are building for Windows Phone 8, the PublisherHostId is a unique id per device. If the user wipes their phone and sells it, this Id will stay the same so again it is not a good candidate for the Identifier. Also note that you need the ID_CAP_IDENTITY_DEVICE Capability selected in your WMAppManifest.

Grab your Raygun trial

Want awesome error handling for Windows Phone? Dive in and hook up Raygun in your Windows Phone apps now! If you need a Raygun account, as always there’s the 30-day free trial available here.

Share this post

Error Monitoring: The Key to Innovative Software Development

In this industry white-paper we’ll be covering the following:Screen Shot 2015-02-19 at 10.40.28 am

  • How error monitoring drives innovation
  • Push vs Pull approaches
  • Culture, process and tools
  • Let error monitoring take the load off
  • Moving faster, freeing brain cycles and increasing innovation

This white-paper is FREE for you to download.

“Implementing error monitoring directly results in more developer time focused on adding new features, improving user interfaces and addressing customer concerns. Removing the pressure of the release-to-release mentality lets the team exist in a more relaxed environment that promotes creativity and drives innovation—the exact type of environment that will result in groundbreaking applications.”

Share this white paper

Node performance: Hapi, Express.js, Restify

Following on from our recent post about Node.JS vs io.JS performance, we received a lot of comments asking about the performance of various web frameworks. We’d only tested Express & Raw Node, so it made sense.

The test

We ran a simple test that closely matches our use case for our API. That means receiving a request and giving a response (in our test, this is just ‘hello world’). For our purposes, this makes sense.

If you’re reading this post with a mind to what framework to choose for building a website, you’re likely doing yourself a disservice. These frameworks offers a lot more to folks building rich web applications and what those features are is likely more important than raw throughput.

We’ve tested Hapi, ExpressJS, Restify and naked Node with no middleware.

We also identified that Restify keeps connections alive which removes the overhead of creating a connection each time when getting called from the same client. To be fair, we have also tested Restify with the configuration flag of closing the connection. You’ll see a substantial decrease in throughput in that scenario for obvious reasons.

The results

Hapi vs Express vs Restify vs Node performance

The winner

This is a tough one with no super clear winner. Here’s why:

1. Restify is a clear winner here. Especially if you’re building a service that receives lots of requests from the same clients and want to move quickly. You of course get a lot more bang for buck than naked Node since you have features like DTrace support baked in.
2. If the cost of your servers is becoming a problem due to volume, rewriting to raw Node.JS will help you handle more requests, but be wary of what you lose (e.g. DTrace support, logging features, etc).
3. If you’re building a richer web app, you’d want to review the offerings based on feature set. Restify is not designed for heavy browser apps, while Hapi and Express are.
4. If you’re building a web app that needs thousands of requests per second, you likely have a high quality problem and should deep dive yourself :-)

I hope that helps with answering the questions from the previous post!

Share this post