While onstage at BrazilJS, there was guy filming the talks and cutting together a video of the highlights of the conference. On the spot I decided that if he came back on stage I was going to strike a pose. So I did. And it was cut into the video with a Freddy Mercury image as well which was awesome and the audience loved it.
I’ve got 4 kids, three of which are teenagers. And like me, they are crazy into their technology and gadgets. They are even more into gaming than I. Unlike me, however, they have a bedtime, especially during the school year. Getting kicking them off the internet across their plethora of devices (laptops, phones and Gameboys) at bedtime has always been a challenge. This is especially true as their smaller devices are normally charged in their bedrooms. I’ve tried taking the devices away but then it turns into a battle every night and it’s something that I have to remember to do and ultimately ends up failing. I’ve tried
But about a year ago, I hit upon an idea that has seemed to work for us. It’s a simple idea but works really well. I got two routers. One is for the parents and the other is for the kids. The one for the parents is what I connect to, the Xbox connects to, the Chromecast and the like. The kids don’t get this password and for further security, it’s in my bedroom.
The other router is called HolmesKids and that one is the one that the kids connect to. It has parental controls on it and among other things, the parental controls shut it off as of 9:00 every night and then turn it back on about 8:00 the next day. No fuss, no battle, nothing for me to forget, works while I’m out of town and so on. It’s just simple and clean.
This is something that even non-technical parents can set up. There are a lot of routers out there that come with parental controls and instructions on how to set it up. And once you have it set up, it manages itself (and your kids) with no further maintenance.
One word of warning, make sure that you read what the parental controls will and won’t allow you to do. For example, some of the Cisco ones only allow you to manage up to 5 devices. My kids will do 3 phones, 2, laptops and 3 Gameboys so oops – we’re over that limit quickly.
You should try it!
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
BrazilJS was a fantastic conference. It was very professionally run with some fantastic speakers. I had a blast.
This is the second of three blog posts. The first was about the experience in Porto Alegre called Obrigado BrazilJS. This one is photos and the like from the conference. The third is about my talk specifically called The Perf Doctor Is In.
This past week I had the extreme pleasure of returning to one of my favorite countries to visit, Brazil, to speak at it’s premiere JavaScript conference, BrazilJS. I’ve been to Sao Paulo in the past when I keynoted PHPBrazil but while I was there, everyone told me that I needed to get down to Porto Alegre and now that I’ve been there, I agree with them. I’m going to break this down into three posts. The first about the country and the visit. The second about the conference itself called A little about BrazilJS. And the third about my talk called The Perf Doctor Is In.
Sao Paulo was, to be honest, a bit overwhelming. It’s the commercial center of Brazil with 11 million people and an absolutely insane amount of traffic. I was introduced, however, to to some unbelievably passionate and intelligent people in my short time there. I still have many friends from Sao Paulo from my short trip. I was introduced to cachaça (key ingredient in my favorite drink caipirinha – it’s sort of a Brazilian mohito), the concept of Brazilian BBQ (more on this in a bit), found out that two motorcycles can 
actually travel down the highway balancing a bookcase between them and fell in love with the country. My favorite day was when we got down to the beach and everybody relaxed. I had never even heard of foot volley which is volleyball with all of the ball handling rules of soccer. Continue reading
Thank you and goodbye for now Ireland…
Ireland, it’s been an amazing two and a half years. I will miss you terribly. For those of you who don’t know, I’ve taken a job in Redmond, WA and am moving on but I’ll get to that in a bit… Continue reading
There’s a ton of new things that I’m working on in my new job on the IE Dev Marketing team but one of them is a 3 part reference poster for HTML/CSS/JS. I’m trying to figure out the correct content and the like for these reference posters and using a ton of things as inspiration. However, I’m kinda at a head smacking keyboard point so I thought I’d ask for help.
What would you like to see on a set of reference posters that we give away at conferences, user groups and the like?
Chances are that you’ll see one of these posters being given away at an event near you sometime soon so it’s in your best interest to chip in and give me some ideas. 🙂
I really don’t want to end up with something as messy and text heavy as some of the reference posters that I’ve run across (not pointing fingers but http://www.visibone.com/html/charts.html…).
First I saw the posters up at HTML5 Poster – http://html5poster.com/. Those are beautiful and I think that people like them but I’m really leaning towards something that would be useful in addition to beautiful so that people would keep them up and use them for a long time to come.
One of the first semi technical inspirations was poster that was part of a kickstarter – http://www.html5blog.org/2012/09/01/the-best-html5-poster/ but I looked at the kickstarter and it failed to raise the desired $4000 in funding so I’m not sure what that tells me.
The next one that I saw was from XHTML-Labs which you can check out at http://www.xhtml-lab.com/html5poster. There’s a similar one for CSS (https://gumroad.com/l/css-cheat-sheet). Reality is that these are not a new concept (http://blogs.msdn.com/b/cbowen/archive/2007/12/09/got-tech-posters.aspx). I’m not ashamed (well, not that ashamed) to say that I had the Silverlight 1.1 Developer Reference Poster (http://www.microsoft.com/en-us/download/details.aspx?id=10423) on my wall at one point. But I started thinking about that and wondering if that’s valuable. Would you like a reference of all of the HTML tags possible and their associated attributes?
Or would you prefer something that was a little more targeted at the new stuff so assumed that you know the basics of the head, body, ul, ol, li and the like? Or is that even useful?
I also saw the SitePoint HTML Reference poster – http://www.sitepoint.com/have-you-got-your-free-sitepoint-html5-reference-poster/. That one goes through and shows a number of little useful tidbits and how they were built. Thoughts on that? It breaks down the idea of three posters being HTML, CSS and JS but we could continue to add to it over time and it could be more than three posters and end up at 10-20-* depending on how many little ideas we come up with. What I don’t like about this is that this seems like a LOT more work than the simple reference ala the ole Silverlight reference poster that I used to have.
There’s also the periodic elements poster but AlaraMills.com at http://alaramills.com/store. It’s definitely a unique take on the HTML spec. It’s not something I’m going to do but I really like the take. My problem there is that then how do I take it to JavaScript and CSS as well.
So I put it to you, what kind of poster would you find valuable/desirable? What would you hang on your wall and refer to?
Please use the comments below or if you want to send me a not privately, ping me on twitter (@joshholmes) or email me at [my first name].[my last name]@[where I work].com (hopefully you can figure out the email without too much trouble…).
Thanks!!!
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. 
There’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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
The 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.
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.
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 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 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.
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.
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);
}
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…
It’s with mixed emotions that I’m leaving Ireland and headed to the exciting world of Redmond, WA, USA. I’ll be moving in early May to the IE Developer Marketing team joining such great folks as Justin Garret . This is the team that’s doing some amazing work such as http://modern.ie and http://arcade.atari.com to name two high profile projects. If you haven’t played with either of these, you should go look at both of them. The partnership with Atari is not only a ton of fun, it’s educational. I’ve used the material there to figure out handling touch behaviours in Win8 apps and more. The http://modern.ie project gives you quick and easy testing of your site for IE with or without you having to run IE and advice on how to fix common issues.
The past 2+ years here in Ireland have been an amazing experience.
From a work perspective, I’ve met and worked with some of the smartest and most passionate people that I’ve ever had the pleasure to know and had a lot of fun. I love Ireland’s tech eco system, particularly the start-up scene which is well outlined by Frontline Venture Capital (check slide 24 – 🙂 ). I’m going to miss being a part of that scene. I’m not going to get into name dropping here because inevitably I’d miss someone and there’s too many to name but I’ve met and mentored some incredible people at companies. Some of them have ended up installing hardware and software in the Microsoft Technology Centres around the world or high profile projects for Cadbury’s or Lufthansa Airlines or have become the default mechanism for navigating Dublin or are the best way to book a tee time or listen to the radio on Windows Phone and I could go on and on and on. I’ve keynoted a number of great conferences around Europe, spoken at the local Google Tech User Group (yes, they knew that I work for Microsoft and I survived… 🙂 ), spoken at Dublin Web Summit multiple times, met Bono, run envisioning sessions with organizations from Failte Ireland (tourism board for Ireland) to the largest bookie organization in Ireland to many of the top end design firms, ran data centre tours through the data centre based here in Ireland, run international conferences from clubs here in Dublin, written prototypes for apps for banks, local government and more… Additionally, I’ve learned a ton about what it’s like working in a small country and in a small subsidiary of a large company. Both of these lessons have been very interesting, both challenging and exciting at the same time. It’s been a fun and impactful 2 years that I’ll never forget.
From a personal perspective, I love Ireland. It kinda goes without saying that Scotland is the only place in the world that can rival Ireland for golf. I’ve also found a new passion in mountain biking here and there’s a ton of opportunities to do that. I’ve found rugby as a fantastic spectator sport and I wish that I had grown up playing it (unfortunately my knees are too bad to do so now). But the real impact has been on my family. As you might know, my youngest daughter has special needs (my wife blogs about it at http://www.phoebeholmes.com) and the programs here for her have been unparalleled. The St. Michael’s programs and schools are amazing and if I ever get to an independently wealthy status, I want to try to found something like it in the US. She’s learned to swim, work safely in the kitchen, potty training and more. I could rave on and on about the systems here but my wife does a great job capturing it on her blog. My other daughter has taken up Camogie which is a brilliant, vicious and fast paced game. She’s in the theatre, dancing and has taken up a ton of other hobbies. My boys are doing very well here also. My oldest is in “transition year” which is a brilliant concept. In short, it’s a renaissance year. The year is broken into 4 modules and in each one of these they take different subjects. They try many different types of sciences, maths, arts, sports and so on. A different set each module. They take a ton of field trips to all the museums, parks and more. They are required to do at least 2 weeks of work study where they find a job in a company for a week at a time to learn what different types of companies do. My son did work in a game dev company called BitSmith Games who produces a fantastic game called Ku: Shroud of the Morrigan. He got to do a lot of testing and learned a lot about Unity game development. And my wife fits right in here. She’s half Irish by decent so she looks the part but more so her language, mannerisms and more have all taken on a distinctively Irish slant. She’s not picked up the accent but everything else is spot on. 🙂 She’s gotten involved in the PTA, run fund raisers for the school, toured most of Ireland, been on the radio, been on TV, was interviewed for an international magazine, written large portions of a book, had several blog posts go crazy viral and been very active in many different social circles.
I’m really looking forward to the challenges presented by the IE Developer Marketing team. I’ll be based in Redmond which is a new place for me. I’ve visited a number of time and it’s beautiful. The last time I was up, I went to a huge bike swap which was awesome and really endeared me to the area. From a team perspective, I already mentioned some of the things that the team does and I’m really looking forward to working with some really brilliant people. I’ve had the pleasure of meeting a number of the people across the teams that I’ll be working with on a daily basis. I think I can learn a lot from them which always excites me.
BTW – I’m starting in Redmond on May 6th so I’ve got a few more weeks to catch up with folks here…
I’m going to miss Ireland but A: I’ll definitely visit (invite me to come speak at your conference… 😉 ) and B: in this fantastic digital age, it’s not hard to keep in touch. I’ll still be blogging here at https://joshholmes.com. I’ll continue to be on twitter at @joshholmes and I’m on LinkedIn at http://ie.linkedin.com/pub/josh-holmes/0/39/791/.
Looking forward to connecting with you and staying connected,
Josh Holmes
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.