Web.Dev (Audio) - Channel 9: Recent Episodes
Microsoft
Web.Dev is a showed packed full of content and interviews covering the latest in web trends. We'll be looking at all aspects of Web Development, from front end to back end using open source frameworks, covering topics such as ECMAScript 2016, build pipelines, writing for cross browser compatibility, modern libraries such as React.js and Angular.js, and more. Stay tuned to the Web.Dev show!
The HTML5 gamepad API allows you interact with the web browser through a traditional gamepad, whether it is from Microsoft, Sony, or some other third party product. Bear in mind that it is an experimental technology, so that means it isn't implemented in every browser (yet).
Mozilla has some fantastic docs and examples for the API, so I won't reinvent the wheel here.
I'll have a video on how to use the API in the coming weeks.
Why would anyone do this?The browser is fast today. Really fast. With that, comes the ability to add new experiences, such as games on the web. Now, I'm not talking about only games that were written directly in JavaScript (those are fast too) but with the recent rise of asm.js and emscripten, which allows us to transpile C / C++ to JavaScript, we can now utilize popular middleware such as Epic's Unreal Engine and Unty's Unity 3D to write games in another language, but play them in the browser.
With these new experiences come new ways to interact with the browser, and therein lies the desire to use the gamepad.
Now would I use this for browsing Facebook? Eh, probably not. But it would work very well for any of these 30 games.
Xbox One GamepadThe Xbox One Wireless Controller can be used to play Xbox games on your PC when connected via micro-USB cable.
To use an Xbox One Wireless Controller with your PC, you'll need to make sure you have the current PC drivers.
Windows 10The drivers come pre-installed with the OS.
Windows 8 or 7You'll need to download and install one of the following driver packages:
- PC drivers for Xbox One Controller (x86)
- PC drivers for Xbox One Controller (x64)
You can find more information on the topic here.
What if you prefer a PS4 gamepad?Well you're in luck! Just download DS4 windows, plug in your PS4 gamepad, and you're good to go. It's a set of drivers which sit on top of your gamepad drivers, and behave exactly as you'd expect. I actually use this pretty often when playing games on my PC.
HTML5 Gamepad TesterThere's a fanatic tool in the browser to check that this all works, and you can find it here.
Troubleshooting
Upon plugging in my Xbox One gamepad to my Windows 10 machine, I discovered that it wasn't immediately recognized. I opened the Device Manager and saw that I needed to update the driver.
Sure enough the problem had to do with the fact that the USB wire I was using was not working properly. Always check your wires. But I figured I'd throw some of the debugging tools in here so that you can step through some issues, should you have them in the future.
At the next screen I selected "Search automatically for driver" but saw that the best driver was already installed. Odd.
I restarted the machine and the warning went away, but it still wasn't picking up my gamepad. I found this great articleon how to debug the situation. It was now detecting my device, but I couldn't calibrate anything.
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In this episode, Doris will demonstrate how to develop web content that will run in modern browsers as well as in old browsers using Polyfills and Fallbacks. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future.
Previous episodes on Building Web Sites that Work Everywhere:
- Building Web Sites that Work Everywhere: Cross Browser Testing for more detail on tools available for interoperability tests (including CSS3 prefix testing), and how to use them.
- CSS3 and Vendor Prefixes for best practices and tools to implement updated CSS3 and their prefixes.
- Browser Detection and User Agent Sniffing illustrates why browser detection and UA sniffing are not right way to check web compatibility.
- Feature Detection illustrates how to implement feature detection by using Modernizr.
Follow @AdamTuliper
In this episode of Web.Dev, Adam looks at what NPM and Bower Are.
NPM is a package manager that can service both node.js packages as well as other non-node js packages.
Bower is a package manager traditionally geared for front end development.
Learn what the differences between the two of them are, when you might use one over the other, the syntax to use both of them and finally learn how they are both used from a command line or Visual Studio.
@DaveVoyles
What is a hybrid mobile app?ManifoldJS aims to make the life of a mobile developer easier than ever, by utilizing Web App Manifests, which allowing websites to declare app-like properties. ManifoldJS uses that standard for those platforms that support it, but falls back to Cordova for those who don't. Cordova is great, but the W3C also considers work done at Mozilla (Firefox Open Web Apps), Google (Chrome Hosted Apps) and Microsoft has done (Windows 8 had local web apps, Windows 10 extends over to hosted web apps). With this, we can now wrap websites and creating hybrid applications which can be deployed in the various app stores, while still taking advantage of many native aspects for each device (contacts, calendar, file storage, gyro, GPS, etc.).
What is VorlonJS?VorlonJS is an open source, extensible, platform-agnostic tool for remotely debugging and testing your JavaScript. Powered by node.js and socket.io. It is easy to set up, works on any platform, and extensible.
When we combine the two, we can create applications at native speed which can be deployed in a number of app stores, and utilizing largely one code base. There is no silver bullet for mobile development, but this certain makes the process easier.
Further readingI've done some tutorials on ManfioldJS and Famo.us, a high performance JavaScript framework in the past, but I wanted to put together the entire process for creating a debugging a hosted web app with this video.
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In this episode, Doris will examine why feature detection is the right way to check for web interoperability. How do we implement feature detection? Should we do manually or should we use JavaScript library like Modernizr? Doris will demonstrate how to implement feature detecting by using Modernizr. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future.
Previous episodes on Building Web Sites that Work Everywhere:
- Building Web Sites that Work Everywhere: Cross Browser Testing for more detail on tools available for interoperability tests (including CSS3 prefix testing), and how to use them.
- CSS3 and Vendor Prefixes for best practices and tools to implement updated CSS3 and their prefixes.
- Browser Detection and User Agent Sniffing illustrates why browser detection and UA sniffing are not right way to check web compatibility.
Follow @AdamTuliper
https://www.twitter.com/AdamTuliper
In this episode of Web.Dev, take a tour of Ember.js, one of several modern well-maintained SPA frameworks. Ember.js provides you with not only routing and template support, but components, a built in data-layer (Ember Data), and more. Adam cover a basic CRUD application using ember-cli and the PODS project structure.
Source Code available here
Looking for more on Ember.js?
Check out our 3-hour tour at Creating Web Applications with Ember JS: Live-Event
Pre-recorded ~4.5 Hour Microsoft Virtual Academy Creating Web Applications with Ember
Topics covered
[02:30] Getting Ember
[03:55] The basic demo
[05:18] Ember overview and using the CLI
[09:16] Using ember-cli-windows and running as admin
[10:18] Exploring ember-cli app folder structure
[11:39] Running the app via 'ember server'
[14:02] Using Ember Inspector
[15:05] Generating Routes, Model, and Templates
[24:38] Installing ember-bootstrap and ember-moment
[28:06] Modifying application.hbs (main root output) for bootstrap and links
[31:54] Modifying template for bugs/new to create a new bug
[34:04] Modifying the route for bugs/new to handle saving
[37:22] Replacing default RESTful save with local storage for testing
[42:53] Modifying bugs/index template and route to list all bugs
[46:12] Updating bugs/new to look better with bootstrap
[48:11] Exploring how the Save action works in the route
[53:11] Closing notes
@DaveVoyles
Curious as to how you can speed up your JavaScript and HTML5 code with some simple tricks? Well this short video will quickly demonstrate a bevvy of ways that you can improve the performance of your front-end app. Sure, you'll never get the performance of a native application, but the CPU and GPU in that phone in your pocket can more than compensate for anywhere that JavaScript may lack.
[00:58] Defining Class Methods
[02:54] Initializing Instance Variables
[05:45] Defining Local Variables
[07:54] Reduce the Activity in Loops
[09:33] Object Pooling
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In this episode, we will examine if you should still use browser detection and user agents, the traditional way to do browser interoperability detection. What's an user agent sniffing? Examples will be used to illustrate why browser detection and user agent approach won't resolve the interoperability issues. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future.
Previous episodes on Building Web Sites that Work Everywhere:
- Building Web Sites that Work Everywhere: Cross Browser Testing for more detail on tools available for interoperability tests (including CSS3 prefix testing), and how to use them.
- CSS3 and Vendor Prefixes for best practices and tools to implement updated CSS3 and their prefixes.
Libraries like jQuery and Zepto.js are great for helping you be productive as a developer without having to worry about supporting every browser out there. But what are they doing behind the scenes? In this video we are going to take a look at a few of the most common jQuery functions and see what it would take to use modern JavaScript DOM API's to achieve the same affect. We will look at the libraries side by side to get a good feel for the syntax differences and we will also learn how to use a website like Can I Use to determine the compatibility across browsers.
To use jQuery or not can be a polarizing argument and we will look at both sides, learning as we look at specific use cases, to help us come to the best technology decision for our current situation, team, or project. By the end of the video we will have seen just how many browser specific workaround jQuery supports and see how modern browsers are closing that gap with the new DOM API's.
[01:45] jQuery Browser workarounds
[03:01] To jQuery or not?
[03:42] DOMContentLoaded
[07:00] Element Selection
[10:08] Classes
[12:34] AJAX
[14:47] Wrapping up
ResourcesSource from video
jQuery 1.x Ready function
Can I Use
You might not need jQuery
You might not not need jQuery
10 Tips for Writing JavaScript without jQuery
jQuery Browser workarounds
Follow @aspenwilder
http://jamessturtevant.com
Follow @DaveVoyles
WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D computer graphics and 2D graphics within any compatible web browser without the use of plug-ins. You will often find developers using it for games, but it is finally gaining widespread visibility across the web, and is now being used for map visualizations, charting data, and even presentations.
First introduced in early 2011, this is similar OpenGL ES, the mobile version of OpenGL, but built inside of the browser. Desktop browsers have really started to support it as of late, as have mobile browsers. I wrote about the current state of it (as of November 2014) here.
Topics covered
[00:20] What is webGL?
[02:30] The rise of GPUs
[04:10] How does it work?
[05:20] WebGL app structure
[05:43] Browser support
[07:00] Using WebGL directly
[08:00] WebGL for data visualizations
[08:44] WebGL for gaming
[10:36] How Sony uses WebGL for their PS4 UI
[11:45] Popular WebGL libraries
[13:24] How to use BabylonJS
What is WebGL doing and why should I care?WebGL has three distinct advantages over writing code that simply manipulates the DOM:
- Tasks
- Drawing reflective materials or complex lighting generate a ton of overhead, and seeing that JavaScript is single threaded and CPU bound, why not offload some of that to the GPU in your device and have that do the heavy lifting?
- Performance
- Utilizing hardware acceleration (the GPU built into your device), WebGL is a great fit for games or complex visualizations.
- Shaders
- Complex visual effects can be produced with small programs known as "shaders". This may be as simple as producing a sepia coloring effect, or more complex simulations such as water or flames. Visit Shadertoy for a showcase of some examples which really highlight this.
How do I get started?Here are the essentials steps to create create your first WebGL project:
- Create <canvas> element
- Obtain drawing context
- Initialize viewport
- Create buffers
- Create matrices
- Create shaders
- Initialize shaders
- Draw primitives
I know what you're thinking: "This sounds like a like of work. There's got to be a better way", and there is! Take a look at some of the engines below.
Engines / FrameworksBabylonJSBabylon is an open source and free framework created by several folks at Microsoft as a fun side project. This is updated on nearly a daily basis, and even offers a sandbox to play in and test our your code. Here is a video coursebroken up into several parts, to get you started with BabylonJS and WebGL.
PlayCanvasPlayCanvas is an open source engine which includes a bevvy of options, including an editor to help visualize your changes as you make them. Some useful experiences they highlight include brand experiences for viewing high performance cars, as well as playable ads which you can inject into applications. it was also used for the largest game of Space Invaders ever made!
TurbulenzTurbulenz offers a 2D and 3D engine for developers to build, publish, and monetize games on their platform. Founded by former developers at Electronic Arts, this tool is also open source under the MIT License. Download and build the latest Turbulenz Engine directly from the Github public repository. This includes everything from rendering effects and particles, to physics, animations, audio, inputs, and networking. Their developer page offers a ton of information to get you started.
James Austin, the CEO of Turbulenz, has a great write up about the engine on Gamasutra.
Pixi.jsPixi.js is a devoted rendering engine. There are a host of other engines covering game, sound and physics etc. and they all work beautifully with Pixi. It also has a number of added benefits including render auto-detect to fallback to Canvas when necessary, text support via bitmap (sprites) or webfont, as well as an ass loader.
Phaser.ioPhaser is also open source (fork it on GitHub) and even offers TypeScript support, which is a strongly typed version of JavaScript. I've found this to be great when working with developers who are familiar with C-style languages. It also has some in-depth guides, and a showcase of Phaser made games.
Construct 2This is the framework that I use most often when working with high school or university aged students who have never programmed a game before, largely due to the excellent editor. Developers can easily drag-and-drop all of their assets into the scene and view the properties in an easy to view pane. Even better, it comes with a ton of templates and samples to get started. Ashley Gullen has a great post on how WebGL works with this program as well.
Three.jsThreeJS is one of the more popular frameworks, and includes everything you need to get running: renders, scenes, cameras, animations, and lights. While this is fantastic for most things, it is lacking a physics engine, which will came in handy when creating a game. Three.js is made available under the MIT license. It even has an editor (beta) that you can play around in!
PhiloGLPhiloGL is a WebGL Framework for Data Visualization, Creative Coding and Game Development from the folks at Sencha Labs. . All lessons from Learning WebGL have been ported into the PhiloGL Framework. This is a great starting point for people wanting to learn PhiloGL and/or WebGL as well. This is also licensed under the MIT License.
UnityUnity3D is the most widely used middleware tool for creating games at the moment. There is a free personal license, as well as a professional one which offers additional features, largely built around automation and online services. A built-in visual editor and massive app store for extensions and add-ons are two of the key features behind this powerful too.
Looking to learn more?Here are some of the better resources I've found on the internet for learning WebGL:
- WebGL Academy
- WebGL fundamentals
- LearningWebGL.com
Finally, I've got lots of WebGL samples and tutorials on my blog, DaveVoyles.com, so take a look there for more.
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In this episode, you will learn the new CSS3, why is important to use CSS prefix, how to add CSS prefix by using tools or manually. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future.
Look into Building Web Sites that Work Everywhere: Cross Browser Testing for more detail on tools available for interoperability tests (including CSS3 prefix testing), and how to use them.
Web Components can finally give your markup maintainability and componentization. We already have techniques to organize our back end code like c# and front end JavaScript, but markup until fairly recently seems to be out in left field enjoying the sunshine while we pull our hair out trying to make sense of our messy markup.
Web Components have been around in some form or another for a couple years now but are now just getting closer to a finalized version. Frameworks like Angular, Ember, and Ionic (Built on Angular) all use custom elements/components in their frameworks to allow you to easily create content and controls.
This episode of Web.Dev takes you through an intro of the pieces that make up Web Components and using Polymer (a polyfill library) to create a couple examples of Web Components.
[02:24] Web Component - The four pieces
[04:26] Draft Status
[06:37] Getting setup for the demo
[10:56] Custom Elements
[16:56] Templates and HTML Imports
[26:41] Shadow DOM and Styles
[34:44] Next Steps
Writing code for multiple platforms can be a lot of work. It can be even more work to have to completely rewrite it for each one, too. What if you wrote an application in C++, but wanted it to be displayed in the browser somehow? Well now, with a tool called Emscripten, that's possible.
Emscripten is an LLVM based project that compiles C and C++ into highly performant JavaScript in the asm.js format. In short: near native speeds, using C and C++, inside of the browser. Even better, emscripten converts OpenGL, a desktop graphics API, into WebGL, which is the web variant of that API, thereby allowing for high performance graphics within the browser.
You can find deeper tutorials on this topic at my blog, DaveVoyles.com
Topics Discussed
- [00:50] What is LLVM?
- [03:30] Why Now?
- [05:50] Ex: Gaming on the Web
- [05:45] asm.js Overview
- [06:55] Limitations
- [09:02] Why Do This?
- [12:43] Browser Support
- [13:15] Communicating between JS & C/C++
- [13:55] Benchmarks
- [16:37] Case Study: Owlchemy Labs
- [17:50] Driving the Point Home
Angular 2.0 is pretty great. It's the latest iteration of the very popular Angular.js client-side web framework. It's different from Angular 1.x. Actually, it's very different!
In this episode of Web.Dev, we're going to walk through the 5 Minute Quickstart you can find at angular.io, and at every step I'll explain a bit about what's going on so you understand. It's all about understanding.
I hope this helps. Look forward to more in-depth tutorials on the subject on the Web.Dev show.
How to build web sites that work well across various browsers versions and devices is always challenging for web developers. In this episode, you will learn tools available for interoperability tests, and how to use them. I will demonstrate how easy you will be able to leverage the tools, to identify the problems, and to analyze the interoperability issue in your website. Browser detection, feature detection, CSS prefix, and fallbacks will all be discussed in the future episodes. With a couple of simple changes to your sites, you can take advantage of web standards and HTML5 features today without breaking your sites in the future.
It's time to introduce a whole new team and a whole new Channel 9 show - Web.Dev!
We're off to a great start recording content for your education and viewing pleasure. Topics will be diverse, but always related to web development. Over time, we'll thoroughly explore the exciting ASP.NET stack, Node.js, PHP, web frameworks, tooling, trends, tips, and tricks. It's going to be rich!
In this episode meet a few of the team members that make up the show. Over time you'll meet the rest of the crew. Team members welcome your input regarding the show or whatever else is on your mind.