Category Archives: Speaking

File –> New –> Presentation: A Review

File->New->Presentation Book Cover Check the end of this post for a discount on Simon Guest’s book File->New->Presentation.

I recently gave a talk on presenting at CodemashCodemash. I blogged about that talk at “Lessons from a Grizzled SpeakerLessons from a Grizzled Speaker”. In asking for tips from from my friends, I found out that one of the best presenters that I’ve had the pleasure to watch multiple times, Simon Guest (the only man ever allowed to sign into the Microsoft network as guest), had written a book on presenting called File –> New –> Presentation.

Continue reading

Speaking Tips from a Grizzled Speaker

At Codemash this year I gave a talk full of tips for speakers. At first, I was going to write a talk myself full of my own tips and tricks but then I realized that while that was a good idea, I’m not nearly as good as my whole network of amazing and brilliant speakers so I asked them for their best speaker tips. The result was a fantastic talk on speaking with some outstanding glimpses into the minds of some of the best speakers that I know. Continue reading

Collecting Speaker Tips…

What’s your best speaker tip?

I’m doing a talk on speaker best practices and would love to hear from other speakers as to what their favorite tip is for others. I know I’ve got a few outspoken friends who might have a few thoughts to share.

  • What’s the most important thing about writing an abstract?
  • How do you find inspiration when writing?
  • What’s your writing process?
  • How do you prep?
  • What’s your “pre-game” routine before a talk?
  • What’s your secret to delivering a fantastic talk?
  • What kind of follow up do you recommend?
  • What am I missing?

Josh Holmes with audience in the background

And yes, I’ll consider the comments creative commons and share and share alike with attribution. 🙂

.NET Rocks Ireland

.NET Rocks Ireland is coming to Ireland and Northern Ireland

 

Register:

Oct 7th, 2013 – Galway – http://bit.ly/netrocksgalway

Oct 8th, 2013 – Dublin – http://bit.ly/netrocksdublin

Oct 9th, 2013 – Belfast – http://bit.ly/netrocksbelfast  

Carl and Richard are coming to Ireland and Northern Ireland! That amazing podcast done by those technical and comic geniuses will be recorded in front of a live audience in three great cities on Oct 7, 8 and 9.

Richard Campbell and Carl Franklin

 

Dates

Oct 7th, 2013 – Galway – http://bit.ly/netrocksgalway

Galway is our kickoff. We haven’t picked the evening guest yet but we’ll announce them soon.

 

Oct 8th, 2013 – Dublin – http://bit.ly/netrocksdublin

In Dublin, we’ll be joined by the astounding Mark Miller himself. He’s going to be recorded live in from of the audience.

 

Oct 9th, 2013 – Belfast – http://bit.ly/netrocksbelfast 

In Belfast, we’ll be joined by marvelous Martin Woodward who undoubtedly improve your software development process.

 

Daily

We’ll start the day at 1:00 with a half day HTML5 conference and end the day with a .NET Rocks recording. Whether you are doing web development or app development with HTML5 technologies, this conference is for you. We’ve got 3 sessions that start off with how to handle touch in my HTML5 app and then diving off into ninja level talks with 3D and how you do performance analysis to make sure that your users are blown away.

Schedule:

1:00 – 1:10 – Welcome and introductions

1:10 – 2:00 – Touch Me, I dare you!

2:00 – 2:50 – You can do that in a browser?

2:50 – 3:00 – break

3:00 – 4:00 – The Perf Doctor is In

4:00 – 4:10 – break

4:10 – 6:00 – .NET Rocks recording

Touch Me, I dare you!

Speaker: TBA

Abstract:

Designing for a touch first web is becoming more important every day with the proliferation of touch devices ranging from phones to tablets to convertible laptops to touch monitors. The issue is that most folks think this just means having bigger buttons but they are wrong. Yes, understanding touch target sizes is important but that’s the absolute bare minimum. A great touch experience starts with understanding your user’s context and includes understanding the difference between touch and a mouse with issues ranging from how to handle gestures to thinking about things like your usage of hover state to scoping input correctly and more. In this brief session, we will dive into these issues and show you how to build a great web experience that will help you on all platforms and devices with touch interface.

You can do that in a browser?

Speaker: Michael Barr – CTO of Scaboodle and an outstanding speaker. He’ll wow you with his demos and his knowledge of creating an amazing experience for your customers.

Abstract:

The web platform is amazing. With the onslaught of new capabilities in modern browsers such as WebGL, Pointer Events, Video, WebSockets, Web Workers, FileStorage, Geolocation and so much more, web development is more fun, and more challenging, than ever before. In this session, we’ll dive into some amazing demos and show you what’s possible in the modern day browsers and show you how you can do this yourself.

The Perf Doctor Is In

Speaker: Josh Holmes – Senior Program Manager on the IE Developer Relations team.

 

Abstract:

Building a high performance front end is a balancing act. You need to understand all the different moving parts and subsystems in the browser and how they interact with each other.

Small changes can significantly impact page and app load time, memory consumption, and processor use which has a huge impact on your user’s experience!

In this session, we will dive into the subsystems of the browser and learn to optimize performance on sites and in web apps.

We will also deep dive into the new performance analyzing tools available expose good and bad run-time patterns for your sites and web apps, and provide users with a fast and fluid experience.

 

.NET Rocks Recording

Recorded live in front of you will be that amazingly popular podcast that’s reaching (literally as in actually as in for real) millions of developers each and every month.

The guests and topics for the recording will be announced closer to the time but there are rumors that Mark Miller (if you haven’t heard of him, go listen to http://dotnetrocks.com/default.aspx?showNum=338 – brilliant and funny) is going to crash the party and join us in Ireland. We’ll also be highlighting some of the amazing folks from Ireland who are forging the way in technology.

Looking forward to seeing you there!
Josh Holmes

The Perf Doctor Is In

I had the pleasure of speaking at BrazilJS 2013. My talk was about performance. While I was using Windows, IE11 and tools on Windows, the perf advice and the way that you need to thing about performance is completely agnostic. Chrome, Safari, Firefox and all of the browsers adhere to the same spec as we do and so are dictated to many things very similarly.

This is the third blog post in the series about BrazilJS. The first was about the the experience in Brazil called Obrigado BrazilJS. The second was A little about BrazilJS. And this one is about the talk itself. Continue reading

Touch Me, I Dare You…

Touch me I dare you This week I’m at JSConf and had the pleasure of speaking. The title of my talk was Touch Me, I Dare You. It’s the first talk that I’ve done since I joined Internet Explorer. One of the big things that we’re working on in Internet Explorer is touch. We think that it’s an incredibly important part of life on the web going forward. Why does touch matterThere’s a lot of reasons that we think that. One of the reasons that we think that is that is that we’re looking at the incredible proliferation of touch devices out there in the world. This ranges from all of the smart phones out there to the tablets to the laptops and convertibles that have touch screens as well. It’s a growth space for sure. Touch has reached into almost every aspect of our lives. There’s even a touch screen TV with an interactive display just off the lobby in the hotel here at the conference.

What's your strategy for dealing with touch?

So what’s your strategy for dealing with touch? The first possible strategy is to just simply ignore touch and let the defaults take care of things. If you do that, the browser will treat your finger as a mildly inaccurate mouse. This is a legitimate strategy as long as it’s your strategy and you do it deliberately and take on board some of the other best practices which I’ll talk about in a moment. The second strategy is to retrofit touch support onto your web site. This is a loosing strategy every time. It’s much better to work the other way around and design for touch first. This ensures that you’ve taken the best practices into account typically mouse and keyboard just work at that point.

Hover sucks

The first of the best practices is that hover sucks, don’t use it. The key to touch is that it’s touching. The screen has no idea that your finger is a millimeter from the screen. Some of the browsers will help you and make the touch emulate a hover but it’s not a great experience. Even with a mouse actually, hover still sucks because it’s not a natural motion to try and stay over your content even if it’s not a straight line in order to keep the menu open. If you don’t believe me, try it sometime and think about the users that keep loosing the menu when trying to move from the top to a sub menu.

Touch sized buttons

Hopefully obviously, you need to use touch sized buttons. It’s a great thing that a lot of devices, especially smart phones, allow you to zoom in in really easily into your different controls and interactions but this is not fun. The ideal way to do this to build for touch first and everything that you do here will actually make your mouse and other inputs work better.

Demo of different size fingers The reality is that the finger is much wider than a mouse. How wide? Depends. An NBA player has a finger that’s kinda in the 20mm width range. That’s a big finger and he’s not going to be able to use your site on his touch device. Normal is closer to 11mm which works out to roughly 42px depending on the size, resolution and pixel density of your screen.

Ergonomics & touch

And with touch more than any other type of input, you need to keep your user’s context in mind. They could be walking, holding the device on their lap, on a train, in a stand on a desk like a normal monitor or any other type of context. All of these contexts mean that accuracy might or might not be incredibly accurate. You should design with large targets with plenty of breathing room to help with that. It’s also important to give visual and potentially audio feedback on touch to let people know that something actually happened.

how far to fingers reach on a tablet

Also for touch, you have to think about how long a finger is and how comfortable it is to reach different points on the screen. You can check this yourself on your own touch device. Reaching things in the top center of the screen is tough whereas on the sides and the bottom is a lot easier.

Design for touch first

The natural reading areas are at the top center of the screen. This is true regardless of what type of input you are using because that’s where the eye goes.

 

Remember there's more than one finger

Another thing that is incredibly important to remember is that there’s more than one finger that they could be playing with. It’s actually very possible that two people will be touching your site at the same time. This is in stark contrast to a mouse as there’s only one on the screen at any point in time.

remember there's more than one kind of input

The other thing to realize is that there’s very potentially more than one type of input happening at any given time. People can use mouse, touch and pen input all at the same time. It’s important to keep this in mind and build for that from the beginning.

So how to I do all that?

That sounds like a lot of stuff. So how do I do that in the simplest way possible. One of the issues with a lot of current code is that it will work for either touch or mouse. Or it will ignore pen input. The reality is that we can, with one simple set of events, manage for all of that.

Go Pointers

With IE10, we implemented a new interaction model called Pointer Events. It’s currently implemented as a MS prefixed set of events in just IE10 but we’ve submitted it as a spec to the W3C. The reception from the W3C and surrounding community has been outstanding. It made it from submission to Candidate Recommendations in a fairly blazing 9 months. We’ve been working with a lot of other browser vendors and we’re looking forward to some wide spread adoption.

W3C Pointer StandardThe event model is fairly similar to what you’d see with your mouse but the events you catch are much richer.

The events are pointerdown, pointerup, pointermove, pointerover, pointerout and pointercancel. I made the mistake in the slides of upper casing the second word in each of the events.

Pointer Event Models

At the moment, in IE10, the events are MS prefixed and you should use those in IE10. We’ll talk about support for other browsers in a moment.

 

 

Values on the events include width, height, pressure, tilt, rotation, and more

On each of the events, you get width, height, pressure, tilt, rotation, pointerType (mouse, touch, pen…), event type and more. The great news here is that

 

 

Coding for multi-touch

Coding for multi-touch is actually pretty simple. Each time you get one of the events, you should iterate through the list of current pointers and react to each of them appropriately. This is the primary difference that you’ll have to make to move from mouse and interacting with one item on your page to more than one and interacting with multiple items on your page. Gestures and the like were not something that I discussed primarily because it’s a complex subject and I only had a short 30 minutes.

current touch support on IOS/Android

Current touch support on IOS and some android devices is based on the Apple recommendation of touchstart, touchmove and touchend. There are a couple of issues with this approach. Sidestepping the politics and focusing on the technical, touchstart handles exactly what it says – touch. It doesn’t handle mouse or pen so you have to code separate paths for each.

Touch first coding With pointer events, you only have to code for one thing if the browser supports pointer events but you will have to polyfill on the browsers other than IE10 at the moment. You can do this by hand by just doing a fallback to touchstart and mouse. There’s actually an unintentional bug in the code sample in my slide. I do the pointer event but in the fallback, I only catch touch OR mouse, not both which means that someone with a touch screen won’t be able to use a mouse.

Use polyfills for older browsers

Regardless, it’s much better to use one of the polyfill libraries such as hand.js from Bitovi. I still like to default to the MSPointer events in IE10 because they are native and then polyfill the other browsers where needed at the moment.

 

 

if (window.navigator.msPointerEnabled) {
	
	// MSPointer events which are only in IE10. Use if possible as they are native
	Event(leftOverlay, "MSPointerUp", function() { 
		if(Game.canStart()) { Balls.release(Player.ONE); } }, false);
	
	Event(rightOverlay, "MSPointerUp", function() { 
		if(Game.canStart()) { Balls.release(Player.TWO); } }, false);
	
	Event(leftOverlay, "MSPointerMove", Game.movePaddle, false);
	
	Event(rightOverlay, "MSPointerMove", Game.movePaddle, false);

}

else
{
	
	// these are the polyfill events for hand.js. Use these as a backup currently
	
	// as these are the polyfill.
	
	Event(leftOverlay, "pointerup", function() { 
		if(Game.canStart()) { Balls.release(Player.ONE); } }, false);
	
	Event(rightOverlay, "pointerup", function() { 
		if(Game.canStart()) { Balls.release(Player.TWO); } }, false);
	
	Event(leftOverlay, "pointermove", Game.movePaddle, false);
	
	Event(rightOverlay, "pointermove", Game.movePaddle, false);

}		

wrapup

Hopefully this has been helpful. There’s a lot more that I didn’t get a chance to cover that can be found at http://modern.ie as well as http://docs.webplatform.org/PointerEvents. And as always, you can find me on http://twitter.com/joshholmes.

BTW – the slides are up at http://www.slideshare.net/joshholmes/touch-me-22254401 

Good luck and go touch something…

Ireland Roadshow

Ireland I’m going to be doing a roadshow around Ireland talking about Windows 8 and Windows Phone development. Come join me for a lap around Windows 8 and Windows Phone 8 development. In this whirlwind afternoon, I’ll pack in a ton of content.

I’ll kick off with a look at the most exciting development opportunities in the market right now – Windows 8 and Windows Phone.

Then I’ll step into the how with the essential things that you need to know about developing on Windows 8 including an overview of the development languages, compatibility with other platforms and making your app really stand out in the crowd with the deep integration into the Windows 8 platform.

Next I’ll dive into Windows Phone 8 and ensure that you have a good grasp on the platform left to right ranging from sharing code with Windows 8 to developing HTML5 based games to hijacking the camera and providing some outstanding lens support.

And I’ll finish up by talking about how to backend all of these applications with a robust restful service accessible from any platform hosted on the Azure platform with the Azure Mobile Web Services.

This is happening on the back of the partner roadshow which will be in the mornings and I’m hitting the afternoons.

Registration links: 2pm to 5pm each day

Belfast Developer Event – 26th February

Cork Developer Event – 4th March

Limerick Developer Event – 5th March

Galway Developer Event – 12th March

Sligo Developer Event – 13th March

Looking forward to seeing you there.

Is that a Rich Web in Your Pocket?

clip_image002I had a fantastic opportunity recently as I was asked to speak at the Google Tech User Group on HTML5. Eoin Bailey, co-founder of Hit the Road and one of the founders of the Dublin GTUG, invited me to speak on HTML5 with some of their other speakers to give a full out HTML5 day at the Dublin GTUG. I couldn’t pass up the opportunity to speak at Google so I rearranged my schedule to make sure that I could make it. 🙂

 

The schedule was as follows.

1. Ilmari Heikkinen, "Sprucing up your pictures with HTML5" – Ilmari will cover some HTML5 basics – the enhancements that it provides over previous web standards and will focus on how image and video filters can be used, demonstrating some examples.

2. Neil Turner, "Lessons learned with HTML5" – Neil has built some web applications based on HTML5 and will talk about his experience doing this, including browser support issues, compatibility, responsive web design and performance.

3. Josh Holmes, “Is that a Rich Web in Your Pocket?” – A fast moving trend is building for mobile with HTML5. In this talk, Josh Holmes will show what can be accomplished with a mobile browser app and talk about the design considerations for that form factor.

I borrowed some of the slides from Joe Marini’s MIX talk on Mobile and put my very demo heavy spin on it. My slides are at http://www.slideshare.net/joshholmes/is-that-a-rich-web-in-your-pocket.

Slide1I’ve been passionate about mobile and mobile web for quite some time. I’ve been doing on device mobile development for the better part of 10 years now starting back with CE 4 in January 2002. It’s amazing to me, however, how far the mobile industry has come in that time period. It’s been a fast and furious but fun ride in that time…

Slide2Do you remember the pain of trying to develop on for the text based browser? Remember  when WAP (Wireless Applications Protocol) development was all the rage? It seems soooo long ago at this point and so old school. In actuality, the WAP forum who were the main drivers of WAP was actually consolidated in 2002. And I remember when it was such a huge deal that the ASP.NET Mobile Toolkit could produce WAP compliant mark-up which meant that I didn’t have to…

Slide3

But the mobile web development space has exploded. Smartphones these days, including the Windows Phone, are capable of running some amazing things. To demonstrate I showed HamsterDance Revolution which uses javascript, CSS3, the audio tag and more with some serious performance on a Mango device. Next I showed the FishIE Tank and the Speed Reading in rapid succession and then moved over to the Mango emulator for my demos.

Slide4Phones these days have the potential to be much more than just a small computer in our pocket. Phones these days know what time it is (clock), where it is (geo-location), what the lighting is like (light sensor), if it’s moving (accelerometer), where it’s going (compass) and can even see (camera) and hear (mic). It’s amazing what they are capable of these days. With all of that knowledge of their surroundings, mobile apps and sites should be augmented by reality. They should geo-locate you to give you directions to the closest train stop (for instance) rather than you having to pick from a list. If the lighting is bad, they should go with a high contrast colour scheme. If it’s loud around you, they should not ask for voice input. If you’re moving, minimize text input. And so on. At the moment, the browser doesn’t have access to all of these sensors but I can’t imagine that that’s that far away.

Slide5In addition, the way that people use devices in a mobile context is vastly different than a desktop development. It’s more than just the screen size that matters here. People who are using mobile are on the go and need immediate information. As part of that, I showed the United Airlines mobile site, Facebook, Twitter and the like.

Slide6When people are sitting at their desk, they are in a controlled, stable and (a lot of the time) comfortable environment. They are able to do sustained browsing and research.

When people are on the go, they need quick, "glance-able” information that will give them the information that they need at the moment. For example, that could be directions to the venue that they are headed to or a phone number or any number of discrete bits of information that they need while on the go.

Slide7Then I moved on to talking about designing for the finger verses the stylus/mouse/keyboard. First of all, the finger is not as accurate as a stylus or mouse. If I turn my finger on it’s side and am very careful, my finger is still at least 40 pixels across and most of the time it’s closer to 80 pixels. And then there’s all of the sites that are so dependent on the mouse and/or keyboard.

As an example, I pulled up http://thekillersmusic.com/html5 in IE9 and showed how fantastic of a site it is and then showed the same site rendering on Mango but talked about the fact that it’s too reliant on the mouseovers and the like to be useful in a mobile context. Same thing with Pacman in IE9 verses on a mobile device. While it renders and plays, it requires a keyboard for navigation.

Slide8

Mobile sites need to be clean and crisp without a lot mixed fonts, colours and the like. Don’t overuse graphics, gradients and  heavy background images as they can all effect download speed and/or view-ability in direct sunlight. Make sure that you’ve thought about the readability and the usage of whitespace. Obviously you don’t want to go nuts with the white space because you’ve got so little real estate to start with but a little bit of white space can make all the difference.

Slide9

Work as hard for your user as you can. In other words, minimize the user’s input by providing intelligent defaults and picking up as much from the sensors as you can to make as many decisions as possible. Make sure that you store user’s previous inputs and where possible, use them to help streamline future engagement.s

Slide10Lastly, think carefully about your mobile strategy. It can range from doing nothing to going hog wild with a mobile specific design.

One of the key things here is that you make a deliberate choice with regards to your mobile strategy because almost guaranteed you’ll have users browsing your site from their mobile devices.

  • Do nothing
    • No special content adaptation, result is the desktop site being delivered to the device. Sometimes, this is the right choice. It’s definitely the default choice and the easy one to go with.
  • Basic Mobile Adaptation
    • Content laid out so it will at least be consumable on a device, special META tags indicate that page is ready for mobile. This one is slightly more difficult to pull off as you have to make sure that your content works on both desktop and mobile.
  • Multi-Serving Content
    • Same page is sent to mobile and desktop, styled differently for each. This is not as hard as you’d think. You can accomplish this through the use of the @media tags to reformat the layout dependent on screen width and the like.
  • Mobile Specific Design
    • Parts of site are designed for mobile specifically, kept in separate domain or subfolder, redirected to when necessary. This is a high end strategy that requires a lot more work as you’re effectively building two different sites. On the other hand, it makes the mobile experience fantastic but doesn’t require you to compromise on the desktop experience.

Slide12

The quick couple of take aways are that mobile web has evolved tremendously over the past handful of years. As a result you should really think about your mobile strategy and consider your mobile user’s context as part of that strategy.

Oh – and in my last moments I threw up http://ie6countdown.com to hopefully push out the last bits of IE6 around. 🙂

This was a fun talk to give and I hope to expand on this talk and do a much richer version in the near future.