• You are currently browsing the archives for the General category.

  • Archive for the ‘General’ Category

    Flagging up inconsiderate writing in Microsoft Office using JavaScript

    Sunday, December 20th, 2015

    Alex.js is a service to “Catch insensitive, inconsiderate writing” in text. You can try out Alex online.

    A clockwork orange legophoto by Alex Eylar

    Whatever your stance on “too PC” is, it is a good idea to think about the words we use and what effect they can have on people. And when it is easy to avoid a word that may cause harm, why not do it? That said, we’re lazy and forgetful creatures, which is a why a tool like Alex.js can help.

    With Alex being a JavaScript solution, we didn’t have to wait long for its integration into our favourite toys like Atom, Sublime, Gulp and Slack. However, these are our tools and the message and usefulness of Alex should be spread wider.

    Whilst I am writing this in Sublime text, the fact is that most documents are written in office suites. Either the ones by Microsoft or Google’s or other online versions. I was very excited to see that Microsoft Office now has the ability to extend all its apps with JavaScript and I wanted the Alex.js integration to be my first contribution to that team. Then lots of traveling happened and the open sourcing of the JavaScript engine and real life stuff (moving, breaking up, such things).

    On my last trip to Redmond I had a sit-down with the apps and extensions team and we talked about JavaScript, packaging and add-ons. One of the bits I brought up is Alex.js and how it would be a killer feature for office as a reminder for people not to be horrible without planning to be.

    And lo and behold, the team listened and my ace colleagues Kiril Seksenov, John-David Dalton and Kevin Hill now made it happen: you can now download the Alex-add-in.

    Alex.js in action inside excel

    The add-in works in: Excel 2013 Service Pack 1 or later, Excel Online, PowerPoint 2013 Service Pack 1 or later, Project 2013 Service Pack 1 or later, Word 2013 Service Pack 1 or later and Word Online.

    Spread the word and let’s get rid of inconsiderate writing one document at a time.

    NYCHTML5 – Of standards, de-facto nonsense, how you can help browsers and what to learn right now

    Wednesday, December 16th, 2015

    me, talking
    Photo by the awesome Mandy Chan

    Yesterday I delivered my last planned talk of the year in the Facebook offices in New York as part of the NYCHTML5 Meetup. Here’s the screencast of the presentation.

    The “slides” – as they were – are on GitHub using Tinderesque (and looking much better on Mac).

    It’s been an amazing year and I feel so happy to have delivered everything I did and encountered so many great events and people.

    People on the Edge: Gaurav Seth

    Monday, December 7th, 2015

    In a new series of posts, I want to introduce the world to people I work with. People who work on the Microsoft Edge browser and related technologies. The faces and voices behind the product.

    Gaurav Seth on stage

    Today we have an interview with Gaurav Seth (@gauravseth). Gaurav is a program manager on the Chakra JavaScript engine, which – amongst other things – is in use in Edge to make the web just work. Gaurav also just made a splash at the JSConf Last Call conference in the US announcing that in the new year, ChakraCore will be fully open source and available for use and contribution.

    The video is on YouTube.

    There’s also an audio version on Archive.org.

    In this interview, you’ll hear Gaurav try to answer my questions about the following topics:

    • What’s the difference between Edge and Chakra
    • Why does it make sense to look further than V8 when it comes to server-side JavaScript?
    • How does interoperability work across JavaScript engines?
    • Who is involved in making JavaScript engines behave, stay backwards compatible and not break the web?
    • How can JavaScript engines solve the problem of ES6 breaking in older browsers? Is it up to developers to make that easier?
    • How can ES6 get faster? What can developers do to make it happen?
    • How evergreen browsers help the adoption of ES6.
    • How to meet the Chakra team and get new things into the engine.
    • How writing bad code on the web inspired a faster JavaScript
    • How minification caused slow JavaScript execution and how the team fixed that issue
    • What’s the future of mulithreaded JavaScript and ASM.js?

    Thanks must go to Gaurav for answering my questions and Seth Juarez and Golnaz Alibeigi of Channel 9 for filming and producing the series. There are a few cuts in this one, which was because of noisy people in the background, so sorry about that.

    People on the Edge: Jonathan Sampson

    Friday, December 4th, 2015

    In a new series of posts, I want to introduce the world to people I work with. People who work on the Microsoft Edge browser and related technologies. The faces and voices behind the product.

    Jonathan Sampson

    Today I’m starting with an interview with Jonathan Sampson (@jonathansampson). Jonathan spends a lot of time on the web and channels like Stack Overflow and Reddit looking out to help people with their questions about Microsoft Edge and browser interoperability. He is also always on the hunt for interesting technology implementations that can be used to test the limits of the browser.

    The video is on YouTube.

    There’s also an audio version on Archive.org.

    Amongst other things, you’ll hear about:

    • How to keep an ear to the ground trying to predict what developers need and want
    • How the work of Ana Tudor is not only pretty but also functions as a great CSS engine benchmark
    • How topics like accessibilty are sadly enough not hot topics and yet need to be high on our radar
    • How IE burned people in the past and how that makes it hard for the Edge team to get listened to
    • How Edge is much more like Webkit than it is like IE
    • How to collect and publish information that answers the how and why rather than just giving a quick answer
    • How to deal with trolls and not to take product criticism as a personal attack
    • How moving out the office makes you learn a lot about what real people use to surf the web

    Thanks must go to Jonathan for answering my questions and Seth Juarez and Golnaz Alibeigi of Channel 9 for filming and producing the series.

    Transcript (of sorts, created from automated and cleaned captions)

    [Chris] Hello, I’m here with Jonathan Sampson. You’re one of those people
    that goes on the web alot and has conversations with people on very a ctive channels like Reddit and Stack Overflow. What do you do there?

    [Jonathan] I don’t typically go on the web a lot – I just really don’t get off the web. I stay on it pretty much like everybody else all the time. I’m super active on Stackoverflow and Twitter. And Reddit is more of an addiction – I guess – than a job obligation.

    But, no, that’s it basically – trying to get a feel for what people are expecting of a browser today. What are developers trying to do that they’re finding very difficult in a browser?

    You know, we’ve been making a lot of efforts over the past few years; we kind of want to get a sense for how they’re registering in the community. Some developers may have had difficulty achieving a high degree of interop in the past and of course we want to understand if that is getting better. Is that trend line coming downward? The amount of effort to make something work cross browser. Getting a sense for just what people are playing with. You know we’ve got people out there like Ana Tudor, who is finding out thesemost brilliant ways to to break Edge and other browsers by doing the most complicated CSS stuff in the world.

    Absolutely astounding! And we want to see it first and start to try and pave the way to make stuff like that work when it will start to become more mainstream. And so yeah, it is a lot of just moving about the community and seeing what people are doing.

    [Chris]: So how do we break that concept of… I find the trend is in the community to impress each other with cool stuff more than actually building things on the web. So, the message of “look I just fixed it to work across browsers” is massively downvoted, whilst, “ok here is a 3d graph with 15 waterfalls and pixelated things in the background and a video playing at the same time” is celebrated.

    You just mentioned with Ana, that she’s doing really out there experimentation. How do we get developers more excited about building things for end users again? Cause, it seems like to me we are a very small crowd that talks to each other rather than solving problems by now.

    [Jonathan]: Yeah we see that in accessibility. I mean that’s not a very sexy topic but it’s just the type of thing where just a little bit of effort goes a long way.

    You know, in the office yesterday had a discussion about hearing impaired users and how they perceive and interact with media. Visually impaired users. It is like that no one is really given these individuals a voice in this whole discussion. Just the other day someone – I was listening to a podcast – was asking “can blind people even go online?”. Of course they can! We have some really amazing screen readers. How do we make ground on on areas that just aren’t super attractive as they’re not super flashy? You know we’re not talking about really radical canvas displays and stuff. In some of these things it’s difficult to to win somebody over because it’s just not appealing and so we just have to do the work regardless.

    Right now, in fact, I just came here from another meeting where we’re looking at API support in various browsers. As in, what is the web using versus what is uniquely supported in individual browsers as proprietary stuff? Maybe experimental implementations.

    And, if you look at that the graph, the very front of it – all the most popular stuff – is supported everywhere. All the major stuff is supported. There’s a couple things that are only supported in other browsers and some people make really fun demos with those but the fact is, that those aren’t ready for the web today. No one is ready to build a business or or stake their profit margins or anything on something like that. They don’t have a real need. It’s fun, it’s really cool maybe it will be ready tomorrow. It is important having constant communication with people you know trying to share data with them.

    I think just having that dialogue goes a long way. Those are difficult discussions to have. Those are exciting things, that just qualitatively don’t add up today for us to spend a whole lot of effort on.

    [Chris]: What is the most annoying truism that you see keep getting repeated and you have to tell people continuously: “no it’s actually not that way”

    [Jonathan]: I would say, that IE is terrible. But, it is kind of becoming a secondary thing. Although Edge adopted that from IE and a lot of people just carry that over. They just assume that “whoa, Edge is just a rose by a different name” or something. “It is just IE - just with a different name”.

    And it’s like “No! you know we we’ve been doing amazing work here. Like we’ve ripped out tens of thousands – hundreds of thousands – of lines of code and put in even more code! Edge has become more WebKit than IE ever was. We ripped out a lot of proprietary ms prefixed stuff. We added a whole bunch of WebKit prefixes for interop purposes. We have today the best ECMAScript 6 support among any other browser and, I think, still any transpiler out there which is really neat.Transpilers have a lot of liberty and a lot of great flexibility.”

    When you actually show people the stuff you show them “hey if you want to yo really kind of brush up ES6, the ideal environment right now is Chakra. It has the most vibrant support right now”.

    The moment you show people that they blow their heads off and they think this is the most amazing thing in the world. I got no idea and all my presuppositions about IE and Edge in Microsoft just kind of get thrown out the window. IE and Edge and Microsoft have been making some inways to really advance ourself and our craft and everything and so we’ve actually really been pushing the boundaries.

    We’ve all been burned over the years we’ve all spent hours and hours and hours on IE6, 7 and 8 and 9 a little bit, too, trying to get things to work right. We realized the gravity of that pain and agony that people feel and it’s burned people to the point where they just don’t really want to take another look. That’s why it is important to find those opportunities to say “hey, have a look today – Edge provides a lot of opportunities – it is a fundamentally different browser”. Which it is and people realise that “Yeah, all broken things I remember there are no longer true. They’re still true about the old, remnant versions of IE that sometimes pop up on the web here and there but they don’t really apply to Edge in this day and age”.

    [Chris]: I think it’s a general consensus, that every question that you see on Stack Overflow and others, answer the “how” immediately and not the “why”. Those are the ones that get upvoted. As a developer I don’t think it helps you to know the how without understanding what it does. That’s why we have the all these outdated libraries on the web. That’s why people keep copying and pasting really terrible code. How can we break that spell, how can we make it easier for people to start listening more and also dealing with an answer that is not a straightforward answer but one that makes you think more cause that’s what you learn from?

    [Jonathan]: One of the cool things about web development in general – like the thing that really allowed me to get into this industry – is that it’s saturated by amateurs. This is a unique thing about our industry. You don’t have to go to college for eight years to be a successful web developer. One of the downsides of that is when you go out to find information sometimes the the quality of the level that information is is not at that academic level and so on Stack Overflow you get a lot of a lot of questions answered very quickly but again as you point out, there is that qualitative difference substrate of information that you just never get like why is it this way and so you know there are individuals in the community like yourself and many others who have a rich amount of experience and background who can offer that insight and one of things that we’re trying to do is build more resources to get that information that people you know we had a couple phrases a while back you know flavoring the well and welling the flavor and stuff and when you go online it’s very easy to find mediocre information oftentimes very outdated information it’s kind of shallow and it’s like how do we how do we go out and fix that information but we do know bump this up to get more accurate, modernized and stuff and that’s really difficult and so that the other option is how do we create watering holes, new watering holes for people to come to that have really great information in there really a rich depth of insight and so we started over the years building things like status.modern.ie and uservoice. Places in which we can communicate with people in MSDN has got a lot of you know bumps over recent time having higher quality articles the edge blog and stuff allows people to get some deeper insight into why it is we do things a certain way why certain standards developing quicker than others and stuff like that and so i i think just having more of a conversation with community is going you know as far as progress is concerned in that area

    [Chris]: Seeing how often you go online and how active you are you must have grown quite a thick skin. How do you think we can we can we work with the problem of trolls? There’s a lot of new developers that do get either shot down or get some really stupid advice from somebody “for the lulz”. It’s great to see somebody do something stupid. How can we break that? Do you think it really is that rampant? Do you see it’s going going downhill? Or do you see it as not that much of a problem?

    [Jonathan]: I kind of knew when I came to work at Microsoft that that would be a thing. Like, who in their right mind would want to go work on IE, right? But, honestly, I rarely ever get upset with the trolls. I don’t think they’re intentionally opting in to troll status. Sometimes it’s just lacking education on their end and not acting insult or anything. Web browsers are really big, complicated pieces of software. As web developers, we’re used to authoring projects that are hundreds, thousands of lines of code and we understand what struggle comes in managing those types of projects in that size. We assume that the same thing is true for browser developers. We think “well you know I can I build a website, I’ve contributed to jQuery core, you know, I’ve also helped out with modernizr, I know how hard software development is. Why can’t you guys move as quickly as me and my friends do?”. When you start to look at browsers out there you see just the immense amount of code in there. The size of the teams, the amount of scope, the knowledge people need to have to make this stuff work. And then you start to get appreciation for that. You realize why things work the way they work in this industry. You have your various standards organizations representing different companies – they all have different ideas how to move the web foward. It’s a complicated thing and, so you know, often I encountered someone that would be maybe classified in the taxonomy of a troll is just trying to share a little bit of knowledge they you know. This is a really really hard thing we’re doing. If you look at the history of the web and browsers in general these are really difficult problems. We could gloss over the hard stuff like accessibility. We could say well, you know that such a small percentage of the population and we’re just not gonna worry about that. We’re going to deal with the vast majority of people.

    [Chris] This is also the fastest growing part of the community

    [Jonathan]: That’s just not how you do quality work. That’s not how you serve humankind. It’s tough – things move a little bit slowly sometimes we’re trying to identify ways in which they can move faster. Things like web components. How within this shell, within this process that we’ve kind of adapted and adopted over the years can we identify ways in which we can move things a little bit quicker? So that we can satisfy the people who are wanting the cadence that they experience in their personal development to be reflected in the cadence of our development? We’re finding ways, JavaScript allowed us that liberty, there is CSS houdini – a task force that is identifying ways in which maybe we can cause the CSS development to move quicker in the future. We’re trying to identify solutions to these which I don’t think many of the trolls realise. They think we’re just sitting here on our hands. I think having a sincere sympathetic conversation with them is important. Saying we understand what it feels like from your side, we genuinely care. We’re trying to make this work a lot better and we’re hiring so if you know a way to help make it go…

    [Chris]: OK, let’s stop with the advertising for a second. I know from personal experience that we have a very creative Brazilian Portuguese. Do you also live in other environments than just the English-speaking, American developer market? Do you see differences in worldwide markets and is there something that we can learn in here in America from them?

    [Jonathan]: This is actually a really interesting thing: we lived in Brazil for a little while. You know, there is the whole idea that in the in the web today we all want to develop the new and shiny stuff and we expect every browser to just support it. That assumes that everybody with a machine is going to have the latest browser. For instance in Brazil, in the apartment building was working in, they had a business centre downstairs. You go down there and on these machines they have Ubuntu, which was – I think maybe a four years old version of Ubuntu. They had a Firefox 4 or something on there and and I’m like oh my goodness I feel so bad for everyone who has to come down and use this. I’m going to update Ubuntu and update Firefox for them! I couldn’t do it because I didn’t have the credentials and I asked the manager if they have the credentials. I would be happy to get all these machines up to date. Someone set them up a long time ago and and they don’t have any information. But they work so you check your email. We moved back to the States and shortly after that my second child was born a few months premature and so we spent a few weeks in the hospital. At the hospital: again old machinery, old versions of Firefox. It’s hard to look at the world and learn, that it is not as we perceive it from within our fancy offices and my new laptop. The real world out there is vastly more diverse and there’s a broad spectrum of browsers and operating systems and hardware and software capabilities. Oftentimes we just ignore that – we assume that you know. The solution that I have needs everyone running Chrome 46 or Edge. We just assume that’s the way things are and we get we don’t like the idea of it being any other way. We have a cognitive dissonance, I guess. When you look at places like Brazil and other countries you know quite often they’re not running the most recent hardware or software and as a result you know they’re not always getting this type of stuff. We are building and we’re blocking off whole demographics of people who otherwise would love to get our content, that would love to use our services. Just by assuming that in our small sphere here what we experience is appropriate to extrapolate across the whole world we really do ourselves and everybody else a disservice, unfortunately.

    [Chris]: There’s a lot of good information in this. Developers have to work in an environment like that some time, to learn that they have to optimise for the unknown and optimised for terrible environments.

    So, it’s all about communication, all about a conversation and it’s good that we have Jonathan out there as our a firewall in Stack Overflow and other environments. So if you meet him, be nice to him – we have some good information for you.

    A quick reminder on how and why to use labels in forms to make them more accessible

    Friday, December 4th, 2015

    Yesterday the excellent Alice Boxhall of the Google Chrome team pointed out an annoying bug to me:

    Seen in the wild on https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer … <label for="tos-checkbox"><input type="checkbox" name="tos-checkbox">I agree</label> @codepo8

    It seems the UserVoice page of Microsoft Edge has a checkbox that is inaccessible to screen reader users. The reason is a wrong implementation of a label. So, here is a quick reminder of how to use labels in plain HTML (without any ARIA extras) and why that’s a good idea.

    Labels are there to connect an explanatory text with a form element. For a sighted user this can seem redundant – after all, the text is right next to the element. But once you use a screen reader you see that by not using labels, you make it impossible for people to use your forms.

    The markup used in this demo is the following:

    <div>
      <input type="checkbox" name="wombat"> 
      Yes, I want to buy a wombat!
    </div>
    <div>
      <label>
        <input type="checkbox" name="quokka">
        Yes, I want to buy a quokka!
      </label>
    </div>
    <div>
      <input type="checkbox" id="yayforwallaby" 
             name="wallaby">
      <label for="yayforwallaby">
        Yes, I want to buy a wallaby!
      </label>
    </div>

    On my Mac, using the in-built VoiceOver and Firefox, it is easy to test. Simply turn on VoiceOver Command+Fn+F5 and navigate using your keyboard by tabbing into the document. Here’s what that looks and sounds like:

    In addition to the benefits for screenreaders, labels also make it easier for mouse or touch users to interact with your content. The following GIF shows that the options having labels enable the user to either click the tiny checkbox or the much larger text to check and uncheck.

    showing how checkboxes with labels make the text clickable

    Using labels isn’t hard. The simplest way is to nest the form element and the text inside the label:

      <label>
        <input type="checkbox" name="quokka">
        Yes, I want to buy a quokka!
      </label>

    If you can’t do that, you need to connect the label and the form element using a for/id pairing. Remember, a form element’s id has no meaning to the form. The data sent to the server is what’s defined in the name attribute. The id is only good for scripting, CSS and as a fragment identifier/anchor. The following example shows how to connect the form element and the label:

    <input type="checkbox" id="yayforwallaby" 
           name="wallaby">
    <label for="yayforwallaby">
      Yes, I want to buy a wallaby!
    </label>

    This is what’s broken in the UserVoice example: there is a for attribute on the label, but the form element has no id. Hence there is no connection between the two and the label becomes redundant.

    Quick aside: if you wanted to write a test for that, remember that the for attribute in HTML elements can not be accessed as element.for as for is a reserved word. It needs to be htmlFor.

    As a way to catch the mistake in the sign-up form, you could do the following:

    var labels = document.querySelectorAll('label');
    for (var i=0; i<labels.length; i++) {
      if (labels[i].htmlFor) {
        if (!document.getElementById(labels[i].htmlFor)) {
          labels[i].style.background = 'firebrick';
        }
      }
    }

    Now, go forth and label the web!

    Updates