Emmet and CSS: The forgotten part

Background

If you’re new to Emmet coding a.k.a Zen Coding I would recommend that you read my previous article Speed up your markup with Zen Coding / Emmet. It will give you a good introduction and a detailed walk through of the real power of Emmet. In short, Emmet is the developer tool you can’t live without. That may sound like a big promise, I know, but that’s how much I love it. The greatest power is the HTML part of Emmet, but this post will focus more on what it can do with CSS.

Emmet Vs code snippets

This could maybe be the confusing part. Why would I use Emmet when my code editor already provides me with good snippets? Maybe you even have your own set of super spacey magical costume snippets with jet engines that you would offer your leg to keep. Well, that would be silly, we still need our legs even though we are developers. First of all, it’s not this or that, it’s this and that. With most code snippets you have to hard code or it will only give you the property, not the value. For example

This maybe seems like a small improvement, but for something you do a lot it makes a big difference.

Useful Emmet rules

Maybe not surprising but there are many CSS rules, so I won’t be able to write them all. I’ve collected the ones I use most. After you have seen the following examples you might think “holy batman”, that’s hard to remember. Don’t worry, first of all you’ll get it quickly. Second of all, Emmet has a little clever search function that will pick the closest rule. So the best way to learn is to experiment. I think these examples will give you a good idea of the structure.

 Summary

I suggest that you have a look at the full list of rules at Emmet’s cheat sheet. Maybe you will find something you didn’t think of. Emmet and CSS is great but as I mentioned before, the fire of Emmet is the HTML part so please grab your sword, go to Speed up your markup with Zen Coding / Emmet and become a real ninja. And remember, don’t forget your old snippets ;)

Share this post

Pluralsight Course For Raygun Now Available!

We’re big fans of educational training website Pluralsight here at Raygun, so as the story goes, we approached our friend Filip Ekberg about doing a Pluralsight course on Raygun. Soon afterwards we heard he’d recorded the tutorial sessions and submitted it for review! We’re pleased to announce the course is now live and accessible on the Pluralsight website. Check it out here.

pluralsight

We’d obviously like to thank Filip for all his hard work putting the course together and for his blog post about the course going live. We hope to see additional courses in the future, for example “Getting started with Raygun in PHP”, if this is something you would like to see, let us know! The Pluralsight course just released covers the following subject areas:

Overview

  • Handling Errors? Why?
  • Why Raygun?
  • Demo: Setting up Your Raygun Account
  • Summary

Raygun in Desktop Applications

  • Introduction
  • Demo: Raygun in a Console Application
  • Demo: Raygun in a WPF Application
  • Demo: Raygun in a Windows Forms Application
  • Demo: Raygun in a Windows Service Application
  • Summary

Raygun in ASP.NET

  • Introduction
  • Demo: Raygun in ASP.NET MVC
  • Summary

Raygun with Xamarin

  • Introduction
  • Demo: Raygun in Xamarin
  • Summary

Administration and Integration

  • Introduction
  • Demo: Integrating with Hipchat
  • Demo: Integrating with GitHub
  • Summary

See full course details

This course provides a great resource for people that want to get a detailed introduction to Raygun, and don’t forget, we have a FREE trial available to help you get started.

Share this post

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