The other day Cats who code had a blog post about detecting AdBlock, where the main trick is to try to load a JavaScript document with the name adframe.js:

<script type="text/javascript">
var adblock = true;
</script>
<script type="text/javascript" src="adframe.js"></script>
<script type="text/javascript">
if(adblock) {
  //adblock is installed
}
</script>

The adframe.js document only contains one line unsetting the adblock Boolean:

var adblock = false;

This seems to work pretty well (and you can see it used in many web sites), but also seems a bit wasteful having to try another script loading and executing. Of course there are many adblocker detection scripts available (some with colourful names), but I wondered what the easiest way to do that is. The trick described in the abovementioned article using a bsarocks class on an element stopped working.

Detecting AdBlock without another request

What does work, though is the following and you can see it in action and get the code on GitHub:

var test = document.createElement('div');
test.innerHTML = ' ';
test.className = 'adsbox';
document.body.appendChild(test);
window.setTimeout(function() {
  if (test.offsetHeight === 0) {
    document.body.classList.add('adblock');
  }
  test.remove();
}, 100);

The trick is the following:

• You create an element with the class adsbox (as defined as a removable element in the definition file of AdBlock Plus)
• You add it to the document and after a short while you read its offsetHeight
• If AdBlock is installed, the element won’t have any height.

You can see it in action here:

Ethics?

Play nice with this. I’m not going into the ethics of ad blocking or detecting ad blockers. Fact is, we started an arms race with that nobody can win. The more we block, the more aggressive ads will get. As users we should vote with our voice and tell companies that we hate their aggressive advertising. We should also start to understand that nothing is free. As publishers, we should start thinking that showing ads as our only revenue stream is a doomed way of monetisation unless we play dirty.

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

photo 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.

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.

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.

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.

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.

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.

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.