Microsoft Build 2018

WIP Post: I keep appending to this as I have time. There was so much happening at Build I keep remembering things to add.

A good way to describe Build this year would be last years announcements polished and released. Lots of little wows which I'll go into details below.

Visual Studio Code

One of the amazing things at Build and the community in general is how quickly VS Code has caught on. Many of the sessions used Code as their editor of choice for demos.

Spent my Friday back at the office setting up the Live Share extension on as many co-workers machines as I could. Since we have a mix of Macs and Windows this will allow us to use our own machines when pair programming an issue.

  • ctrl+p, then
    • @ - Jump the symbols in the file
    • @: - Jump between Methods/Properties/Variables
    • ? - Help
    • ctrl+p+p for the last viewed file
  • ctrl+b - Toggle sidebar
  • ctrl+j - Toggle bottom panel
  • ctrl+k z - Zen Mode
    • Mine is mapped to ctrl+shift+z. Use ctrl+shift+p "shortcuts" to change shortcuts.
  • ctrl+` - Opens your default terminal
  • ctrl+shift+p "user settings"
    • editor.minimap.enabled controls the scrolling preview minimap area. I personally find it distracting.
    • window.menuBarVisibility on windows I hide the menu bar since I rarely use it.
  • Live Share - Sharing localhost ports also!
  • Emmet
    • More advanced ways to use the div>div#id.cls with tab.
    • Math 1+3+4/2 ctrl+shift+p "math"
  • Learn more at VS Code Can Do That
  • Azure Function integrations are awesome!

PWA (Progressive Web Apps)

While Microsoft is making great progress on their PWA support the slide below is from Google IO and shows they still have some things to release.

PWA Support 2018

For devs Service Workers is very important, but Custom Elements or Shadow Dom are still missing. Their priorities still seem to ignore community feedback (but I'll try not to turn this section into a rant).

  • Service Workers Released!
  • Fluent Design is coming to Edge (no timeline)
  • PWA's in the MS Store.
  • Sonarwhal Testing for PWA compatibility
  • PWA Builder

Angular 6

Was so busy before Build I still haven't updated one of my projects from 5 to 6 yet. Hopefully get to that this week, but looks like some great additions to the command line tools.

  • Angular Elements Preview
  • Angular Size keeps on shrinking

BabylonJS

Unfortunately 3D and game dev is not something I get into very much as I primarily focus on enterprise development, but I'm always amazed at how quickly full 3D environments are coming to the web.

Core 2.1 and EF

So, my top takeaway for me is I want to code a real time demo with Angular 6 and SingleR to an Ubuntu box.

While I like Azure a lot more my personal projects I always let them live on one of my Digital Ocean boxes.

  • Azure Functions
  • SignalR real time messages and demos were easy to follow.

Fluent Design

  • Compact View looks amazing
  • Global Styling.
  • Windows.UI in nuget
  • Fluent Grid
  • Fluent Nav
  • Context and @complete
  • Office Edge
  • UI Fabric
  • XAML Islands - Nest UWP inside of WPF!

Xamarin Forms

  • 3.0 XAML standard
  • X bind still coming

Adaptive Cards

This year the Adaptive Cards team had a lot to show off as their spec and demos are getting implemented into more parts of Windows/Skype/Outlook and more.

  • Still a lot of work to do on the tooling side but is looking very promising even as they start looking at 2.0.
  • Outlook integration looks really nice.
  • GitHub is fully behind adaptive cards for their email and other notifications
  • Great improvements in the tooling (and plans going forward to unify testing tools).

HoloLens

What would be a Microsoft event with HoloLens. The April update added a ton of awesome features which should make development a little easier. The interesting part is that while the devices were everywhere they are just treated as a normal business device now.

During the conference Microsoft admitted they had overstated the uses of HoloLens in the consumer space and emphasized that the consumer market is not a goal at this time.

Wrap Up

  • People to follow!
  • BuildMC's - Ginny and Neil did an awesome job!
  • Sidenote: Did you know there are no open food options in Seattle after 10. Me and Neil had a LOTR adventure.
  • Actually could make a huge list, but there are just too many, look at who I follow on Twitter.

Oh yea... there were bunnies (rabbits).

Bonus: Pop Culture Museum

Going through the Museum I did not expect them to have the ink for Spider-Man 122. I've had this framed on my wall for a few years now and it's one of my favorite covers (an 8.5 for the geeks curious).

Spider-Man 122 Ink Spider-Man 122 Comic

Spider-Man Selfie GOTG 1 GOTG 2

The Star Trek exhibit was also a lot of fun to see. My dad kind of brought me and my bro up on Star Trek, so interesting to see all the history.

Material Design Icons v2.3.54

Note: v2.3.50 was unpublished due to a bug and replaced by this build.

It has only been 25 days, but we're releasing another update to Material Design Icons. This update includes 111 new icons and 27 icon updates (mostly brand related). This also includes a few renames which are outlined below.

You can view the @mdi NPM Org for the Updates.

Preview on the CDN

9 Renames

While it is rare the team to rename an icon we decided in this release to finally rename icons we've decided in the past not to rename.

  • roomba to robot-vacuum
  • nest-protect to smoke-detector
  • nest-thermostat to thermostat
  • amazon-clouddrive to amazon-drive
  • apple-mobileme to apple-icloud
  • stackexchange to stack-exchange
  • hangouts to google-hangouts
  • allo to google-allo
  • youtube-play to youtube

The first three follow our new guidelines. All home automation icons need to be generic and not related to a specific brand.

All other renames focus on associating the brands under their company and the drive/iCloud renames.

The development server's history makes these changes easier to track and we can't wait until the new site launches.

Future

The next release is focusing on icon contributions, integrations with third parties, and the new website.

Material Design Icons v2.3.50

Note: v2.3.50 was unpublished due to a bug and replaced by v2.3.54.

Please read the release notes for: v2.3.54

The v2.3.50 release was out for less an hour before being unpublished and only affected the @mdi/svg package. All other packages including @mdi/font were unaffected.

Scripting with NodeJS and Material Design Icons

The team has been active working on building out scripts to generate helper libraries for various uses of Material Design Icons. This got me to thinking it might be useful to share how easy these scripts can be to write.

Goal: Write a NodeJS script that takes the @mdi/svg package and converts it into a easy to view preview.html.

I picked this since it accesses the meta.json (this contains all the meta information about each icon, like tags, aliases, etc.) and in the end generates a single html file.

Prerequisites

  • Empty Folder named "preview"
  • NodeJS Installed (for npm command line)
  • Visual Studio Code (or another editor, but my examples will use this)

The NodeJS command line will allow us to pull down some helper scripts and execute our build.js we'll be writing.

NPM Init

The first step will require you to open a command line of your choice (CTRL+tilde in VS Code).

  • Run npm init in your /preview folder
  • Press enter a few times to accept all the defaults.
  • Run npm install @mdi/svg @mdi/util

Awesome, you will now see a folder called node_modules this contains a copy of the latest version of the SVG's and the meta.json file.

Note: If you want to see the meta.json open it and then run CTRL+P followed by typing format. This will format the JSON file.

Creating the Build Script

The build.js file is below. We'll break down what each part does and what the @mdi/util provides.

const util = require('@mdi/util');

const fileName = "./preview.html";
const version = util.getVersion();
const meta = util.getMeta(true); // withPaths

const body = meta.map(icon => `
  <span onClick="a('${icon.name}')"
        title="${icon.name}">
    <svg viewBox="0 0 24 24">
      <path d="${icon.path}" />
    </svg>
  </span>
`).join('');

const template = `
  <!DOCTYPE html>
  <html>
  <head>
    <meta charset="UTF-8">
    <title>Material Design Icons - Preview</title>
    <style>
      svg { width: 24px; height: 24px }
    </style>
    <script>
      window.a = x => alert(x);
    </script>
  </head>
  <body>
    <h1>MDI Preview</h1>
    ${body}
  </body>
  </html>
`;

util.write(fileName, template);
console.log(`\u2714 Build ${version}`);

The @mdi/util includes a few helper methods for working with the @mdi/svg package's data with NodeJS.

  • util.getVersion() Get the semver formatted string major.minor.build of the current @mdi/svg release.
  • util.getMeta(true) Get the meta.json data. Passing true will parse the SVG folder for path data assigning it to .path.
  • util.write(file, data) Write data to a file.
  • util.read(file) Read data from a file.

View the util.js to understand these utilities.

Update package.json

In the package.json a new script needs to be added to handle build.

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "build": "node build.js"
},

To run the build execute npm run build.

MDI Preview

Wrapup

Hopefully you found the above tutorial useful and allows you to create more complex build scripts.

NPM @mdi/angular-material

In the first of many new packages for integration with MDI is for the popular Angular Material framework.

npm install @mdi/angular-material for v2.2.43.

The package can be used with the icon component provided.

Like all future packages this one uses @mdi/svg as a devDependency meaning if someone wants they can build any version by change the version in package.json.

  • npm install
  • npm run build (updates mdi.svg)