Contents and Topics Covered in Microsoft Exam 70-480: Programming in HTML5 with JavaScript and CSS3 Part 2

As mentioned in Part 1 (Javascript), Tekaris is currently undergoing recertification for our Microsoft Gold Partner Status. As a part of this, I was collecting topics addressed by possible questions and thought it might be helpful for others.

This post is targeting HTML5 and CSS3 aspects of the exam. See Part 1 for an overview of Javascript topics.

To get an overview, I have compiled a list of topics. Some are only listed by name, others have links which you can follow, others are even detailed with a few words.

HTML5

Figure seemed to be important to Microsoft. During my exam, I even got the same question twice, one directly following the other. Only the answer had to be provided differently.

CSS3

… and some others, of course :-)

Hope that helps
.jonas

Contents and Topics Covered in Microsoft Exam 70-480: Programming in HTML5 with JavaScript and CSS3 Part 1

At Tekaris, we are currently undergoing recertification for our Microsoft Gold Partner Status. As a part of this, I was collecting topics addressed by possible questions and thought it might be helpful for others.

This post is targeting Javascript aspects of the exam. Future posts will cover different areas.

It definitely helped me to revisit some concepts by identifying required knowledge for that exam and digging into it. To get an overview, I have compiled a list of topics. Some are only listed by name, others have links which you can follow, others are even detailed with a few words.

Then there’s that slightly broader topic of that little keyword this and closures.

This (yes, this) really stumped me when I, coming from an object oriented programming style, first encountered Javascript years ago.

Why on earth do we see

var that=this;

a lot and what makes this hack actually work? I recommend “How this works“, especially section “common pitfalls” and “Closures and References“.

And then, be sure to head over to Html5 Rocks for their introduction to Web Workers. Some points to take away:

  • There are actually two types of Workers defined in the spec: Web Workers and Shared Workers
  • Use postMessage() to communicate between the parent javascript code and the Worker (works in both directions)
  • Some things a worker cannot access: DOM, localStorage or sessionStorage. They do have a list of options, though, but I’ll shamelessly refer you to these details on SO for that.

As you can see, there is nothing too fancy covered in this test as far as Javascript is concerned. It’s important to have a general grasp of the language and only sometimes there are details required to answer a question. Generally speaking, I want to highlight two helpful resources here. I have used them for my research and also linked to them for this list.

The obvious one is the Javscript section of the comprehensive Mozilla Developer Network (MDN). It has a wealth of information, sometimes along with helpful side notes when it comes to details.

The other one, not-so-well-known but essential source of nitty-gritty Javascript details is the much beloved Javascript Garden. You are guaranteed to learn a thing or two over there.

Hope that helps
.jonas

Creating Lightroom Smart Collection Advanced Queries Using Logical Grouping

The benefit of search engines is: They let you find what you are looking for. This is a remarkable feature by itself, given the wealth of information available.

Sometimes, one even finds what one is not looking for, and since this comes as a surprise at that moment, it is even more remarkable.

This happened to me the other day. I was looking for information on how people use Lightroom’s Smart Gallery feature to structure their media or to organize their workflow, so I was quickly scanning Julieanne Kost’s blog entry about creating a query looking for photos without keywords, when in a comment on that entry I found something I wanted to have for a long time and always thought Lightroom was not capable of.

Turns out this powerful feature was just hidden very well. Kudos to Mr. Mike Nelson Pedde for pointing that out. He is sharing a lot more information about Lightroom on his site wolfnowl.

The important bits are these: When you create a new Smart Gallery, you get a flat list of conditions that have to be met, and you can specify whether you want to apply a logical AND to them (all of them have to be met) or a logical OR (at least one of them has to be met).

image

So how would you create a query for “Show me all the images that have at least five stars and where keywords contain “Foo” or “Bar”? With this flat list of conditions, you can’t. You need an AND and an OR for this, and you can only have one of them.

But obviously, if you hold down the ALT key while pressing that little plus sign on the right (which turns into a hash symbol when doing that), it does not create another sibling condition, but instead a child condition.

image

This query now reads like Rating >= 3 AND (Keywords contain “Foo” OR Keywords contain “Bar”). The braces are here to indicate logical grouping being applied by this child condition. You can nest these child conditions even deeper, so this makes a HUGE difference in the way you can create smart galleries and gives you a lot more power.

Hope that helps

.Jonas

Azure Websites with NuGet Packages From A Custom or Private Feed

Azure Websites offer the capability to deploy from source control, such as Bitbucket or GitHub, instead of you building a deployment package or doing a web publish.

The way that works is that Bitbucket, for example, will send a push notification to your Azure Website whenever a commit is being pushed to it. This will make Azure pull the missing changesets and trigger a build. To make this build possible, it performs a NuGet package restore (if your solution is configured in such a way, that is).

 

This way of deploying has the added benefit of a build service test for your repository: If you’ve forgotten to check in relevant files, your deployment on Azure Websites will fail because the build will break. You don’t get this verification when building a deployment package with files present in your local workspace.

 

While this is a pretty handy and fast way of deploying, it does not work out of the box if you’re using NuGet package feeds that are not accessible for that build service.

There are some possible solutions for that:

  1. Host your NuGet packages in a publicly available location
  2. Direct link these assemblies with copylocal=true instead of using the package structure
  3. Copy them using FTP

You might not want to host your custom packages publicly (1) or circumvent the entire idea of NuGet in the first place just to enable this source code deployment scenario (2)

At Tekaris, we are using custom NuGet packages in a private feed hosted within our own infrastructure, so we chose option 3. Of course, it helps that these packages seldom change.

 

How’s this working? First, go to the management portal at https://manage.windowsazure.com and navigate to your website’s quick start page.

image

Then download the publish profile. Open this file in a text editor and look for FTP host, user and password information.

Use this information to open a FTP connection and navigate to /site/repository/packages

Now simply copy all these missing packages from your local workspace (where they have been used for building your app) to this package directory. Azure will not clean this directory when you do a new commit/deploy, so as long as you don’t need newer versions of them, this is a one-time operation.

 

Hope that helps,

Jonas

An IEnumerable is not a List, it’s just a promise of a List

It is actually quite obvious, but figuring out the implications still took me a few minutes today.

Suppose you have a simple list of objects:

List<Object> list = new List<Object> { new Object(), new Object() };

And for some reasons you’d like to create a projection from this list using a wrapper class. One reason why you would do this is wrapping business objects into ViewModels.

var enumerable = 	from o in list
					select new Wrapper(o);

The Wrapper class only adds the capability of being flagged to the whole story:

public class Wrapper
{
    public bool IsFlagged { get; set; }
 
    private Object Obj;
    public Wrapper(Object o)
    {
        Obj = o;
    }
}

So what you now have in enumerable is an IEnumerable<Wrapper>. Next, you’d like to use the wrapper functionality and flag the two elements in enumerable:

foreach (var e in enumerable)
{
	e.IsFlagged = true;
}

And then you go forth using your enumerable, only to discover that none of the contained elements are flagged.

What!? Why?

It’s because an IEnumerable is not a List. One needs to understand that prior to calling .ToList() or using foreach() to enumerate over it, no constructor of wrapper has been invoked. Put another way, only because we used this nifty LINQ projection, no Wrapper instances exist yet.

They came into life when we foreach’ed them and disappeared right after that. Whenever we try to use enumerable again, we are enumerating this LINQ expression again. Which means we call the constructors again and we get totally different instances of Wrapper.

For example, suppose we’d use this expression in order to check how many elements are actually selected as an effort to find out why the program doesn’t work as expected:

int numberFlagged = enumerable.Count(e => e.IsFlagged);

This will return 0, as we already know. The best way to find out is to step through the provided code and put a breakpoint into the Wrapper constructor. Please find the whole source code ready for copy & paste at the end of this article.

Although i knew how an IEnumerable behaves, it took me 10 minutes today to find my error in a slightly more complicated example. I guess it’s the special case of using a linq projection together with an IEnumerable that got me.

class Program
{
    static void Main(string[] args)
    {
        List<Object> list = new List<Object> { new Object(), new Object() };
        var enumerable = from o in list
                            select new Wrapper(o);
        foreach (var e in enumerable)
        {
            e.IsFlagged = true;
        }
        int numberFlagged = enumerable.Count(e => e.IsFlagged);
    }
    public class Wrapper
    {
        public bool IsFlagged { get; set; }
        private Object Obj;
        public Wrapper(Object o)
        {
            Obj = o;
        }
    }
}