How To Setup Intellisense in VSCode for React.js

I’ve been getting back into React.js development and was missing the rich developer experience visual studio gives you with things like intellisense.

I thought I had something working as Ctrl+Space opened intellisense with a sensible suggestion, but this turned out to be the IDE using what I’d typed earlier to make an educated guess. Clever, but I was hoping for more.

No Intellisense

Before – No Intellisense

Dead Ends

Unfortunately I couldn’t find a simple “how to” guide and the stuff I did get from various github issues and stackoverflow didn’t really help.

After several dead ends and lots of hair pulling I eventually got intellisense working using these steps.

How To Setup Intellisense in VSCode for React.js

Step 1 – Create a jsconfig.json file

With a project folder open, look in the bottom right and you should see a lightbulb:

VSCode Lightbulb

VSCode Lightbulb

Click the lightbulb, and you should get a popup at the top of the IDE asking if you want to create a jsconfig.json file

Create JSConfig.json

Create JSConfig.json

Click “Create jsconfig.json” and vscode should do the rest.

Step 2 – Install Typings

The Typescript Definition Manager typings should be installed globally with

> npm install typings --global

This will allow you to install typescript definition files which is what we’ll do next.

Step 3 – Install React Typescript Definitions

In the folder of the project enter the following commands:

> typings init
> typings install dt~react --global

You should end up with a new “typings” folder with the following contents:

│   index.d.ts
│
└───globals
    └───react
            index.d.ts
            typings.json

Step 4 – Install typescript

You can install typescript globally, but I prefer to put it in each project with the following command

Npm install typescript@next

Which vscode detects automatically, so there’s nothing else to it.

Step 5 – Confirm it Works

Now you should be able to see some intellisense for react.js.

VSCode With Intellisense

VSCode With Intellisense

Conclusion

While attempting to get this working I found some what appears to be old and obsolete advice.

  • I haven’t created a CODE_TSJS or VSCODE_TSJS environment variable
  • There are also a couple places mentioning ‘tsd’, but that has been superseded by typings.
  • I don’t have (Salsa) in the bottom right of the IDE. In a different setup I had the version number of typescript, but that doesn’t appear to be essential.

In all honestly, I don’t really know what I’m doing, but it appears to work. Hopefully it will work for you too, but please let me know if it doesn’t in a comment below or on twitter.

70-532 – Video Resources – Review

I’ve now watched the videos in my 70-532 Study Resources post, during which I made the following notes.

MVA – Microsoft Azure Fundamentals

This is a level 200 series so doesn’t go into a large amount of technical detail. It’s a good introduction, but should be old news for anyone thinking of taking the exam.

I found “Creating an Organizational Account and Subscription” and “How Do I:Manage Subscriptions and Service Administrators”, where Bob creates a sub-directory and a new subscription for the sales department, the most useful. It’s not something I’d setup before and I imagine most don’t often see this side of Azure.

Highlights:

“Why Microsoft Azure”

  • Up to about 7 minutes 30 seconds is a good list of required skills and definitions for Azure as a whole.

“The Scope of Microsoft Azure Services”

  • Good advice to think of each service with respect to the business problem it can solve.

“Creating an Organizational Account and Subscription”

  • ~ 5 minutes – Explanation of the different accounts and roles

“Understanding Subscriptions and Directories”

  • A subscription trusts only one Directory
  • One Directory can be trusted by many Subscriptions

“How Do I: Manage Subscriptions and Service Administrators”

  • Good analogy on the need for other directories and subscriptions
  • Good demo if you’ve never setup multi-subscriptions in 1 account before

MVA – Microsoft Azure Fundamentals: Websites

At Level 100, this is even more basic than the previous video. Unfortunately, as this series is relatively old, I think it’s a bit outdated as a lot of their time is spent in the “old portal”.

My advice is to read the section titles and if there’s anything on there you don’t feel comfortable with, watch just that bit.

MVA – Developing Microsoft Azure Solution

The section titles for this video are very useful and there are bookmarks/time stamps for specific terms.

I don’t normally administer SQL, so I found the Azure SQL Database section particularly useful as it was very hands on “click this, then this, this does this” etc.

The assessment questions in each section are also a lot better than the previous two videos. I recommend you do these at the very least.

Channel 9 – Exam Prep Session for Exam 70-532

I think this can be summarised as an even more condensed version of the MVA video above. Nothing new.

Summary

Although I am a fan of this style of learning, I think the subject is too broad. The presenters clearly know their stuff, but because of the time constraints, they have to rush and gloss over the details I suspect you need to pass the exam. To be fair, this is reflected in the low level the videos are marked as, which in case you don’t know is explained in this old Microsoft Standards Level Definitions post.

I can however, highly recommend the assessments at the end of each section in the Developing Microsoft Azure Solution course.

All in all, to get up to speed quickly, or as a refresher they’re excellent, but I doubt they are that useful for the exam.

If you’re struggling on a particular topic, have a skim at 2x speed, but I think for the depth of knowledge required for an exam, your study time would be spent on better things.

Azure MCSD Certification – 70-532 – Study Resources

Although I’ve been working with Azure for a while, I think it’s good to see how well you know a subject and broaden your knowledge as much as possible. I’ve therefore decided to study for the Microsoft Azure MCSD, starting with exam 70-532 – Developing Microsoft Azure Solutions.

Are exams worth it?

I recently tweeted about Martin Fowler’s op-ed on certification:

I haven’t changed my mind, so although I won’t be taking the exam, I’m sure to learn an awful lot of new stuff, as well as cement my existing knowledge.

I intend to post about my progress as I found my series on C#6 really helped my understanding.

So far, I’ve only researched the resources I intend to use.

Study Guides

I’ve found two study guides that are unique, i.e. don’t just cut and paste other resources or reference them:

Videos

So far I’ve found the following videos:

Books

Only 1 book:

Practice Tests

There are a lot of “brain dumps” which I won’t be referencing here, but there are two legitimate resources:

  1. Chris Pietschmann’s Practice Test
  2. Measure Up

I’m intending to update this with any new material I come across.

Scrum Master Tip – Team Consensus

In Scrum Master Tip – Many Voices I listed a few things to try if your team meetings are dominated by one person and you want to hear from the others in the team.

On a similar note, I’ve found the following tips useful to Team consensus on decisions.

Issue to Avoid

Failing to get buy-in from the whole team on important decisions.

Why is it a problem?

If someone doesn’t agree with a decision, they are unlikely to follow it. At worse, they will become unmotivated and disruptive and slowly drag the team around them down.

I try to save these alternative techniques for the important decisions and fall back on the simple consent check of “does everyone agree?…ok then, decision made” for day to day things.

Potential Solutions

With all of these solutions, there’s a risk that the more timid members of your team are copying the dominant person, so keep an eye out and if need be, split the group up.

Roman Voting

After 3, everyone gives a thumbs up or thumbs down. other.

Vote with your feet

Imagine there is a line along one wall where one end is agree and the other is disagree and ask the team to stand along the wall depending how strongly .

Consensus Check

Use planning poker cards where a higher number is more agreement.

Unit Testing – Check your Return on Investment

I once asked a team to question everything we do. We ended up with a few suggestions about things we could streamline but I was surprised at how quickly everyone on the team said “unit tests are good”.

Are unit tests good?

I’m strongly believe that unit tests are critical, but only if they offer a good return on investment. It takes a scary amount of time writing and maintaining a suite of unit tests, so any efficiency savings can really add up.

Why are you spending time and money writing and maintaining unit tests that are trivial?

Adam Tibi got me thinking about it a lot recently when I read his post on not testing MVC controllers.

When are unit tests “Bad”

I basically agree with Adam, but applied to every single line of code, not just controllers.

I’ve seen teams decide a certain % of code coverage is required and then just mechanically write test upon test until that magic number is hit. What’s the point of unit testing something like a simple wrapper that passes through to another layer. What have you achieved?

I find questioning the ROI of a unit test can also lead to some nice refactoring.

Summary

Question your return on investment of every unit test you write and maintain. Why are you spending time and money writing and maintaining unit tests that are trivial.

If the unit test is pointless, mark the code under test with some sort of “ExcludeFromCodeCoverage” attribute and spend your time, and money, on more important things.

Convert unix epoch time to DateTime in C#

I recently had to convert unix epoch time to DateTime and like the rest of the world turned to stackoverflow. The top answer is a very simple solution of adding the unix time, which is in milliseconds, to a DateTime of 1/1/1970.

Nothing wrong with that, but it turns out it was added into DateTimeOffset in .NET 4.6:

static DateTimeOffset FromUnixTimeSeconds(long seconds)
static DateTimeOffset FromUnixTimeMilliseconds(long milliseconds)
long DateTimeOffset.ToUnixTimeSeconds()
long DateTimeOffset.ToUnixTimeMilliseconds()

So now you can do something like:

var dateTimeOffset = DateTimeOffset.FromUnixTimeMilliseconds(1454049938871);
var dateTime = dateTimeOffset.DateTime;
Console.WriteLine($"The time is {dateTime}");     // The time is 29/01/2016 06:45:38

I can’t imagine it will make a massive difference to your application whichever way you choose, but I think it’s really good that little things like this are still being added to the framework after all this time.

Further Reading

If you’re really interested, you can look at the /source and see it’s pretty much the same thing, but I imagine it’s slightly more efficient. I guess you could do some metrics, but if converting to and from unix time is the bottleneck in your application I envy you!

Who owns impediments?

In a previous post I listed some of the different types of impediment to identify as a scrum master. In this post I’m going to go through the same types and list who I think should own them and some ideas of how to try and remove them.

Types of Impediment

Different Types of Impediment to Identify

Impediment

In the same order of smallest scope, all the way out to the whole organisation.

Technical Impediment

Some organisations I’ve worked with make it the responsibility of the team member to raise support requests to get things like “my monitor is broke” resolved, but I think that’s a mistake. Sorting out issues (or going to PC World to buy parts) is a waste of team members time. The scrum master as “general dogsbody” should be solving this.

In the meantime, is there another machine to use because someone is on holiday, ill or in a meeting? Could they pair with someone? Basically, don’t treat broken equipment as dead time.

Team Member Impediments

Again, ignoring personal issues (they might be a HR problem), these types of impediment fall squarely on the individual.
I’m a strong believer in treating people like adults, so although it may not be their fault they are not familiar with a technology – that’s an organisational issue in resourcing – they now need to become productive.

It’s the Scrum Masters job to help with that in any way they can, say putting them in touch with the company SME or other training resource, but ultimately the individual has to put the work in.

Technology Impediment

I believe the team should prove to themselves that changing the technology is worthwhile. Once they are convinced, getting buy in the from the product owner and stakeholders to complete technical stories and not add business value should be easier.

Using the example from the previous post of upgrading from EF5 to EF6, ask 1 person to come up with a business case detailing the return on investment of performing the upgrade. It’s a balance between how long the upgrade will take, including roll out to production environments vs how much time it will save in the future.

If there’s 2 weeks left on the project, it’s going to take 5 days to upgrade and save 1 day it’s not worth it!

Process Impediment

If you do have a vocal member of the team telling you something is lacking, I would use this opportunity to try and coach them to become solution orientated. I’d task that person to take ownership and come up with a solution but provide lots of assurance that if they’re solution doesn’t work it’s not a problem.

Team Impediment

These types of impediment can be very hard to solve and unfortunately the ownership falls on the scrum master.

If you are unfortunate enough to have a “bad egg” and you’re inexperienced with dealing with these types of issue I recommend you speak to your HR department for advice. If that’s not possible, seek advice from someone who does.

Organisational

The Scrum Master Podcast calls this “the dreaded system”. I imagine they’ve used the word “dreaded” because changing the system you work in can be almost impossible.

Ownership again lives with the Scrum Master, not to solve them, but to try and isolate the team from them. I find a great exercise to help with this is Circles and Soups retrospective.

Summary

Not all impediments are the scrum masters to solve, sometimes it can be really beneficial to pass ownership to a team member.

This obviously isn’t an exhaustive list and I’m not going to claim it’s perfect, so please leave a comment below or catch me on twitter if you have any comments.

Different Types of Impediment to Identify

As a Scrum Master, impediment removal is not only an essential part of your job, but it’s probably one of the biggest ways to have a positive impact on team velocity. Even a highly motivated, highly skilled team are going to struggle if half of their equipment is broke!

What I didn’t realise when I first started out was that there are many different types of impediment. I guess as I have a technical background I automatically focussed on things like “slow pcs”, “technology X isn’t great”, “my monitor is too small” and “technical debt”, but as I work with more teams and different customers I’m beginning to realise the subtle issues are much more common.

Types of Impediment

Different Types of Impediment to Identify

Impediment

In order of smallest scope, all the way out to the whole organisation, here’s a list of some of the types of impediments you might encounter. Another post will detail who I think should own the impediment and try to resolve it.

Technical Impediment

I find these are the most obvious to spot as the team member suffering tends to point it out. I’m thinking “my mouse is broke” or “my PC won’t boot” types of things.

Team Member Impediments

Ignoring personal issues, these could be an individual team members lack of experience with a technology the team uses. Identifying these types of issue can sometimes be hard as developers don’t like admitting they don’t know something.

Technology Impediment

Similar to team member impediments, but this time something affecting the whole team. It could also be lack of experience, or it could be something more technical. For example, upgrading from Entity Framework 5 to 6 makes unit testing a lot easier, but if you can’t for whatever reason, this would be a technical impediment.

Process Impediment

You still have processes right? “Individuals and interactions over processes and tools” doesn’t mean no processes. So this type of impediment could be something like “the code review process is poorly defined and we’re not getting value for money”.

I find these quite easy to identify as the more experienced members of teams seem to be very vocal if something is lacking. If you aren’t that lucky, try and encourage a more open dialog between the you and the team. If that fails, hold a “processes focussed” retrospective.

Team Impediment

Team impediments can be very hard to see quickly and unfortunately tend to have the highest negative impact. The issue is very likely to have a negative effect on morale let alone velocity. I most often see one team member dominating your planning sessions, talking over everyone and worse, criticising other team members ideas and work.

I’m classing this as a team impediment instead of individual as the whole team is affected and it could be up to the whole team to address it. Unfortunately the most common outcome is often the “bad apple” being removed from the team.

Organisational

These can be easy to identify, but very hard to resolve as they’re often outside the control of the team. For example, I have a person on my team who is constantly being asked by other managers to help out with other work. As a result, they are never able to properly focus on the work for my project.

Summary

That isn’t an exhaustive list, but will hopefully get you thinking about the types of issues a Scrum Master has to deal with. In an upcoming post I’ll go through the same list again stating who I think should own the impediment and therefore get it removed. It’s not always the Scrum Masters job!

Scrum Master Tip – Many Voices

This is a quick tip that I struggled with when I started as a Scrum Master and wish someone told me about.

Issue to Avoid

One person talking for the majority of the time during retrospectives, although this applies to all meetings.

Why is it a problem?

One voice is not only boring for the others, but you’re very unlikely to get the engagement required to improve.

You’re also potentially missing out on a great idea that someone else hasn’t been able to say.

Potential Solutions

Try not to stand at the front talking all the time.

Try asking each team member to present their points and reason for choosing, instead of handing you their post-it.

Try asking a different team member to take the retrospective.

If you’re not getting much in the way of contributions, directly ask the quietest member of the team to say their thoughts on a particular topic.

Try to ask open questions so it’s difficult to give 1 word response. “What do you think of X?” is much more likely to get a good response than “Is X a problem?”.

If after all the above, you’re still getting little input, it may be because everyone agrees. Encourage someone on the to play devil’s advocate and disagree.

Finally:

Learn the power of silence

Most people hate sitting in a silent meeting. If you keep quiet, someone else will fill the void.

Persist Claims Transformation in a cookie with MVC and OWIN

Claims transformation (or claims augmentation as it’s sometimes called) in an MVC claims based application is “easy”. All you need is a simple piece of code:

 
Principal.Identity.AddClaim(new Claim(ClaimType, "ClaimValue")); 

Unfortunately, where you add that code isn’t.

Options

I found a number of options that worked, but didn’t behave in the way I needed.

Option 1 – use a custom ClaimsAuthenticationManager as detailed on MSDN.

Option 2 – add the above code into the Application_PostAuthenticateRequest method of Global.asax

Option 3 – if you’re using Owin, to create some Katana Middleware

Problem

The problem with all these solutions is the number of times the transformation takes place, i.e. how often that code is executed.

Why would you care about the number of times it’s called? In all the examples I found, you wouldn’t, as “magic strings” are being added to the claims, and therefore it’s really fast. In my case, and I’d imagine most real world cases, you’re likely to be making an IO bound call to a database or web service to lookup the extra claim. You really don’t want to be doing that every single page hit.

Solution

I eventually hit upon the solution with the thanks to a StackOverflow post which hinted at using the OnResponseSignIn of the CookieAuthenticationProvider

 
Provider = new CookieAuthenticationProvider() 
{ 
    OnResponseSignIn = async context => 
    { 
         // Apply Claims Transformation here
    } 
}  

The OnResponseSignIn is the last chance you have to transform the ClaimsIdentity before it is serialized into a cookie during sign in. The code is only executed once, so no need to be concerned about performance when making a call to a lookup service.