Page Weights Will Continue to Rise (But May Fall Soon)

The historical trend for website page weight has been to increase each year. 2015 was no different, as the year ended with a 2.2Mb average page weight according to the HTTP Archive. This is about an 11.5% increase over 2014. Expect 2016 to continue the trend for heavier pages, especially due to content like fonts, scripts, and images. Although this may seem like a non-issue, there is good reason behind keeping your page weight down, especially for mobile users who pay for data plans in which every kilobyte of data counts. You can use this handy tool to see how much your website costs users around the world.

There is recent solution that may start bucking this trend: responsive images. Browser support for responsive images has been slowly gaining tracking traction, as Microsoft Edge and Safari 9.1 have joined Chrome and Firefox as browsers supporting the HTML picture element. This element will allow for different images to be served up to different devices. In addition, WordPress 4.4, released in November of 2015, added support for responsive images on the Content Management System. I’d expect other CMS solutions to implement similar support in the near future. Since WordPress drives an enormous percentage of the web, we could see page weight plateau as adoption of the latest WordPress release increases in 2016.

More Animation

Increased browser support for CSS animations and HTML5 Canvas will let 2016 be the year of animation in web design. Websites lacking animation will feel dull and outdated in the coming year.  Designers and developers have a trove of animation tools at their disposal, including parallax scrolling (via CSS or JavaScript), micro animations (such as Animate.css), HTML5 Canvas animations, and SVG animation.  The increasing availability to these tools for professionals means that animation will be increasingly prevalent. 

2016 will also see a rise in cinemagraphs. Cinemagraphs are visual combinations of static photos and videos, where only small portion or portions of an image have movement or animation. Check out these examples to see why they are so compelling and posed to be the next big thing.

Increased Offline & Notification Support with Service Workers

Service Workers is a browser API specification that can be used to make web apps work offline and provide background features like notifications, messaging, geofencing, and syncing.  The technology is still fairly new and in draft spec by the W3C. Chrome currently supports most of it, with Firefox and Opera following closely behind. Microsoft Edge and Safari are currently considering supporting the specification, with all signs pointing to development at some point in the future. For developers, Service Workers is implemented via JavaScript.

The point of Service Workers is to allow for users to keep working with your web app where connectivity isn’t perfect. Good examples are mobile users who move in and out of cellular range and laptop users sharing a spotty WiFi signal. The experience will be in full control by the developer, and for the users it would feel seamless without error screens.

An example demo can be found at Trained To Thrill. This demo loads images from Flickr while the user is connected to the internet. After the page loads, disconnect your internet connection and refresh. The page will reload as it has been cached by Service Workers, and it will notify you that you’re offline.

Developers interested in learning more should check out this nice guide by HTML5 Rocks.

More Flat Design & Near-Flat Design Aesthetics

If you haven’t heard of flat design, you’re probably still living in the Web 2.0 world. Flat design eliminates superfluous elements such as gradients, textures, shadows and sometimes images for solid colors, vibrant colors, and bold typography. Near-flat design brings these elements back into the mix in subtle ways without bringing back skeuomorphism. For website design, flat design will continue to be the visual trend in 2016. Think “less is better”.

The signals that flat design is here to stay can be seem with large companies like Google, who recently redesigned their logo in the flat design style. Spotify also took the plunge. Netflix was ahead of the curve in 2014, adopting the flat design concept.

For website design, a look at the most popular flat design websites shows design devices like monochromatic or very limited color palettes, black & white or duotone imagery, and large geometric typography employed. Iconography and simple illustrations are also very trendy.

The challenge for designers in using flat design is coming up with new ways to make sites, apps, and brands feel unique.

Security & HTTPS Everywhere

Web and mobile security is on the minds of all developers and business owners after a rocky 2015 that saw numerous high-profile data and security breaches. A recent security whitepaper by White Hat showed that 86% of all websites had at least one serious vulnerability.

One of the common mistakes in web and mobile security is not having an encrypted website or API endpoint. A big push has been made by the big technology players to bring SSL/HTTPS to developers and agencies quickly and easily to help secure the web. Another point for acquiring HTTPS for all websites in 2016 that it will also have an impact to your SEO ranking with Google.

Web security is a massive topic unto itself, and is much too long explain in one blog post. Developers looking to learn more about web security should check out OWASP (the Open Web Application Security Project) for more information and where to get started.

Missed the first 5 trends check out part one of this blog series

Recently I have had the need, and interest, to poke around the Azure AD Graph API. This is a REST API that allows you to query and update information in an Azure Active Directory.

I wanted to share a few things that caused me a bit extra time to figure out in hopes that it will make your development using the Graph API a bit smoother.

This is base structure for a request to the API. You will see this in various places of the documentation.

https://graph.windows.net/{tenant_id}/{resource_path}?api-version={api_version}[odata_query_parameters]

Tenant ID

Just starting out with Azure AD and the terminology, I wasn’t immediately sure what the Tenant Id was and where to find it. After a bit of looking around, there are two items that can be used as the Tenant Id.

One option is the actual Tenant Id which can be found in a couple places. Logging into the Classic Azure Portal, going to the Active Directory section and selecting the Directory you want to work with, in the URL you will see that there is a segment with /Directory/ followed by a string of random letters and numbers – this is the Tenant Id. Another way to view the Tenant Id is, in the Directory you want to work with select the “Applications” tab. At the bottom of the screen is an icon with the description “View Endpoints”. This link brings up a modal window with a list of Endpoints for various integrations. Third from the bottom (at the time of writing this post) you will see one for “Microsoft Azure AD Graph API Endpoint”. This URL includes the Tenant Id.

The other option is to use the Tenant Name. The Tenant Name is the full “*.onmicrosoft.com” domain name. If we created a directory with the name of “mercurytest” then the Tenant Name would be mercurytest.onmicrosoft.com

Now that you know what the Tenant Id is referring to, I can tell you that there are actually two more tokens that can go in this spot (surprise!). They are the aliases “myorganization” and “me”. The alias “myorganization” can access any items in the authenticated user’s directory that they have access to and using the alias “me” allows access to information about the logged in user.

Application Roles

Getting the application set up to use roles with AD was a bit tricky in itself but that process is a separate topic and would be another full post. At the bottom of this post are some resources to help get you started, though.

In our application we needed the ability to add, edit and remove users and their roles. Adding, editing and deleting a user was pretty straight forward following the API documentation.

When it came to editing user roles, I found there was not very much documentation and it was difficult to understand. The main functions I was looking for were:

  • getting all users and their roles
  • getting a list of available roles
  • getting roles for a single user
  • adding a role to a user
  • removing a role from a user

I found this post (http://blogs.msdn.com/b/aadgraphteam/archive/2014/12/12/announcing-the-new-version-of-graph-api-api-version-1-5.aspx) which listed the URLs for many of the functions I wanted to use.

View User Application Role Assignments

Getting application roles for a user was pretty straight forward. Replace the {username} token with the full username (user@xxx.onmicrosoft.com).

https://graph.windows.net/{tenant-id}/users/{username}/appRoleAssignments?api-version={api-version}

Assigning Application Roles

This is where things started getting tricky. The URL is the same as the GET but using a POST. This API documentation for the App Role Assignments got me on the right track for what each of the properties in the body of the request are.

ID: This is the Id for the Role you are assigning. These Ids can be found in the Application’s Manifest.

Principal ID: This is the Id of the User you are assigning the role to.

Principal Type: If you are assigning this role to a User then this is set to the string “User”. You can also assign roles to Groups.

Resource ID: Resource Id? Looking at the API documentation for this property it says this is “The unique identifier… for the target resource (service principal)…”. While I understand what it means now, at the time I had no idea what a Service Principal was.

Looking at some of the other URLs listed in the referenced post, this Service Principal Id is an important part of these calls. Let’s switch gears for a moment to focus on the Service Principal Id.

Service Principal

The GUIDs I started testing out were various ones I found in the Application Manifest. There is an App Id and an Object Id, however, the Object Type is listed as “Application”.

After various searches and trying out various calls to the API, the URL that I landed on gave me a list of Service Principals.

https://graph.windows.net/{tenant-id}/servicePrincipals?api-version={api-version}

When setting up Active Directory you can add applications that use this directory for authentication. In our case for a new application we are developing we set up two – one for the localhost which will be used when debugging the application in Visual Studio and another for the staging environment.

In the data that came back, each of these application instances are listed with the Object Type of “Service Principal”. The roles for each instance were also listed. This was the missing Id I needed for my API calls.

Application Roles – Part 2

With the Service Principal Id we can go back and finish up these API calls. Use the Object Id of the application instance you are using as the Resource Id.

Assigning Application Roles – Finishing Up

This request is now complete with the Resource Id.

Resource ID: Service Principal Id found in the last section

Getting a List of Application Roles

https://graph.windows.net/{tenant-id}/servicePrincipals/{resource-id}/appRoles?api-version={api-version}

Get all Users and their role assignments

https://graph.windows.net/{tenant-id}/servicePrincipals/{resource-id}/appRoleAssignedTo?api-version={api-version}

This call is a bit different that what you might originally expect. The relationship between a User and an AppRole is many-to-many so the Object Type you see here is an AppRoleAssignment. If a User is assigned to multiple roles it would appear multiple times in this list with a different AppRoleAssignment Object Id.

Removing Role Assignment

https://graph.windows.net/{tenant-id}/servicePrincipals/{resource-id}/appRoleAssignedTo?api-version={api-version}

Removing a role from a User is actually removing a Role Assignment. This is the Object Id found on the GET for a specific user’s roles.

Additional Resources

Sometimes, especially for newer technologies, you just have to search and try out different things until you find the right answers. I hope this post will help get you going in the right direction.

Here are a handful of resources that I used when working through Azure AD and the Graph API: