 political this time around. There is a thing called CopyJS, run by... just mad here. CopyJS also has a Slack group. On the Slack group there's a sub-channel called Milo Dinosaur for people who are kind of new at this thing, learning how to write stuff. JSC, in particular. Yeah, theoretically, but every kind of question comes along because it runs kind of over things. There have been a few discussions about, especially with Dada, modeling and things like that, presented how Dada actually works, and we're sharing some URLs around. This is one of them. And the question that some anonymous person on the channel asked was, how does that actually work? Okay, so let me introduce myself. My name is Wei Man. I'm a user experience designer. So I'm here to show this visualization, which is disappearing right now, and I hope it comes back up soon. So I saw a very interesting visualisation on the New York Times, right? And then I was curious about how it can be made. Don't put your phone there. If I put my phone right over this little corner of my MacBook, it turns off. Like I said, it's weird. Anyway, no one got that. So Chris invited me here to present this as a case study for everyone here to discuss and break down. So this is going to be an interactive session. So you are not here just to listen. So let me just show you the visualisation and why I like it. This is an article that tries to put across a point that only 9% of Americans are voting. So it explains on the right with the story, and on the left can see that it shows specifically the amount of people who are not voting. So every time it explains a point, the visualisation on the left supports the point, which makes it very easy for people to understand that that's the end of it. And when you scroll back, it also goes back to show the picture that corresponds to the story that they are trying to tell on the right. Okay, so my question is how will you build this if you were to build this by yourself? Yeah, okay, I'll hand you over to Chris to take the discussion. First thing I do when I'm looking at someone's site and I want to look at what's going on is everyone else does is play with it for a bit, just to get an idea of how I think it might be working. What I know about journalism and technology is journalism and technology don't get on very well, and they're usually a little bit behind things, but New York Times got some really clever programmers, as I'm sure senior pro or press holdings have. But there are some awesome things that programmers are able to do within the scope of journalism, because you've got journalists who have deadlines, they're in their own little world, they don't really know about anything else. Then you have us programmers who have deadlines and don't really know about anything else. Getting the two of us in the same room and actually coming up with something that's interesting is hard work. So when someone actually produces something like this, it's really useful. It's a really short article, but it shows exactly what's going on really quickly. You don't really need to read the words to understand it. Do you feel like the question is more like a PowerPoint slice? Yeah, it is, but at the same time it's something that... Is it true to express something really complicated in a very simple way? But if you put this just as words, it wouldn't have the impact, basically. That's data visualization, that's what it really gets now. But not really a lot of words. If there's a lot of words, you can make a home appeal really, really. Not all articles, there are plenty of studies on how much people actually read things anyway. So what we're seeing at first, we've got a basic first thing that's up here. Scroll, scroll, scroll. So we've got some kind of a scroll event that's going on, because we know that there's a change when I reach a certain point. We'll get into how that happens in a little bit. And you can see, if I do this quickly enough... See how it animates in? That's nice. Doing animations like that can be tacky. If they're done carefully and subtly what they are here, it draws your eye to what's going on. Because you're watching your text scroll in place as you're watching the article happen. Most people reading this are just going to go up there, and then, you know, they're going to be over... I'll say to people, it's like, oh, wow, I do that. Oh, I do that. So the first time you do a hover animation or something, it's like, on, off, on, off. Look at this. On, off. Oh, by the way, you can realize that there are very bright insights through docs now and then. Are you watching the number actually? Yes. Which is also interesting. That's pretty simple. They do it badly, but it's pretty simple. We are not, like, real stringent with these kinds of problems throughout the different sections. Yeah, there's nothing really that innovative about it if you think about it, if you know what to do. But putting this stuff together isn't straightforward. If you're a journalist, you've got no chance of doing this. So you really need to be in there. So we're doing something. That's not actually a straight line, which is interesting. Oh. We'll get into that later on. These are things you see, but if you're on a high-risk device you don't even notice this. This is SVG. So it's showing up as trouble. You've got some electrical techs because they don't know about color contrast. I think they have, like, a small print. It's just that. Yeah, but there's a large percentage of the population who can't actually read that at all. So small prints is no print if you're not the right person. Come to CSS Conf and learn more about this from me. Still doing stuff and more stuff. So we've basically got boxes, a little bit of animation, some scroll events. Nothing really that revolutionary so far, I guess. Next step, what you do is open up the inspector and work out what's going on. Because this is... I mean, journalists don't know how to code. They need a CMS to throw their article into. So there's got to be a horrible interface for them somehow. The rule of thumb that I know from CMS is that I've spoken to a lot of people who have implemented them. If the people using it like it, then it's probably bad. That goes with the programmers and the people who edit the content. Usually if you want the content to be good, you need to constrain it. Journalists know about this quite well. You have to have your headline, you need your deck, you need an image, but it's going to be a certain level of articles and so on. If you don't follow those rules, it just won't get published. There's one more comment we have to understand. It's not just programmers or even tech people who are actually reading this. Maybe ordinary people on the street. I'm talking in terms of how this actually gets on there in the first place. The interface for the people who are writing the articles, it's not something that's pleasant. I don't know of any company that actually likes a CMS that has a nice result. It seems to be a good balance. If the programmers hate it and the people putting the content in hate it, then the public might actually like the result. I'm actually breaking this a bit by reducing the height. Oh, I shouldn't know, this is responsive as well. When I get down to a certain width, the whole article changes. That's what I usually actually do if I break in it. Yay! During this, it's cheating. No normal person jumps from desktop view to mobile view or something like that. For the site, it's cheating. There's nothing wrong with that. You have no reasonable expectation for it to work. It's completely unfair. Leave them alone. Right, so I need to... What about how, if you had your dirty landscape, who didn't quite like the menu tonight? They cover that reasonably well because they've got a fairly big break point that it changes at. So they cover that reasonably well, but they don't know what to do. So they cover that reasonably well, but there are potential issues. They should do at least one repaint when there's a change. You'll see some libraries when they're holding the UI when the width changes and stuff, and that's just overkill because all that helps is people who actually sit there and do that. You shouldn't cater for that person because that's not a normal person. Screens width change, but maybe you'll just do it once, but you don't really need anything to be interesting on that. Are you usually using for the resize event? Yes. But resize is happening. If I do that, resize is kicking a lot. Yeah. And you can sit there and say that I don't want to touch the DOM over and over, or you realize that the only people who are touching the DOM but only people are triggering it, that often programmers. It doesn't really perform its problem even though you read about it as one. I've basically got the same graphic here to the changes and they've actually got a flip. If I go in between, they're actually moving it up so they're registering where it is on the screen. The essence of it remains the same. This is pretty cool. Now that I've had a look at it, I've tried to break it. The next thing I usually do is just try to inspect it to work out what's going on. And we can start seeing some of the dirty laundry at this point because I can't click on that. I've selected this thing that that's not the image. This is where experience tells me to have a look around. Am I in the right spot? Is this the class G-Slide? There we go. So this this is actually an SPG. The things you'll notice are there are a ton of paths laid out here. And when you pay attention to the article, they relate to the bits that are hidden in the shop. The properties are on here. This one's got a 0.0001 which is almost enough to take it out of memory, but not quite. So that's a performance thing. As soon as you've made it 0, it gets thrown out of memory. It needs to be redrawn when the browser has to think about it. Putting it to almost 0 means we don't actually see it, but it's not out of memory so we can hide and show it really fast. The reason I'm actually using Chrome here, which is not my usual browser, is because if you try this in Firefox it renders really bad. Firefox can't animate to save itself. The normal rendering in Firefox with normal people without the dev tools up is great, but when you're inspecting it it just falls into a heap. Chrome, Safari and things like that are fantastic. If you're ever doing animation probably do it first in Firefox if you want it to be performant, because otherwise you'll just cry. I've done this before where you get it working perfectly in Chrome or Safari. Then you jump to Firefox to test it and it says, I want you to work. We have a ton of parts which I mean show on at some point. You can see there are a lot of properties in here. They're using a library to help them out with this. From what I could tell amongst the 100 odd scripts that we've got on the page I think they've written their own code to actually work this out. I would probably use some classes in here and actually throw some of the heavy work over to the CSS. They're doing it in JavaScript. We're talk CSS so we would do it in CSS generally speaking. Most of the properties of SVG you can interact with parts of an SVG through CSS which is awesome. All you need to do is set a class here or there and you can make all sorts of heavy lifting happen in the CSS instead of having to write a script for it. The person or people who wrote this for New York Times don't know this so they're doing a ton of heavy work and putting a really heavy load on the browser to do that for them. So you could make this a whole lot quicker potentially having not done it. I might be lying but if you use some CSS instead. So all you'd see here instead is a class or an ID or something like that that you can actually refer to the individual class. This bit in here this is a they've got a class on this so you do have classes in the CSS but this is interesting. Each of these is a separate thing and right here when you see this you know that there's a JavaScript program behind this because no natural person would do this by hand in any way. They've got each of these translated so there's basically a loop that's going through and rendering this. It's alright because you probably don't want to do this to custom I guess but this is still a custom graphic in some way. I don't know, less like you'd have SVG there's some kind of a like the whole way to see if there's a problem. There are a lot of common elements in here. The colors are very similar. So you might be better off adding a few classes in there so you can actually address them that way. Since this person doesn't know this CSS very well I'll forgive them. As far as I can tell the main reason for this to happen is so they can do this where they slow the trigger in Firefox is very good at that because then you can watch each of the queues really slow the render on the screen. Now we start actually doing some animation. Scrolling events are interesting and this is getting to the CSS JavaScript side of things. There's a native scroll event there's a jQuery scroll event they're using the jQuery one basically the same thing because you don't need any jQuery anymore there are actually I don't even know if there's any difference. Basically when you scroll it's just like when you're doing a resize every time I scroll a little bit it hits that scroll event. If I want to do something like watch this so when this scrolls I want that thing to change if I'm constantly checking that on scroll then you can run into performance problems like that because you're basically going as fast as the browser can call my function then call it when I'm scrolling the screen. That's bad. So suddenly your smooth animation is going to fall flat. The nice way to do it is to put a set time out into your JavaScript or some kind of polling function so you can call it. Something like this you still want it fairly fast. Why are we 60 frames a second? So you'd be how many milliseconds is that? 60th of a second, something like that except you probably want 30 or whatever frames per second call your JavaScript function that often that way you give everything a break. When we're talking about performance as well when you're viewing this stuff on mobile then you have to think about battery and when your performance when your CPU goes through the roof you're killing the battery of the client as well which is not nice. Performance isn't just about rendering speed or things like that you need to think about how much battery your site is killing. New York Times don't care about that because they're loading so many scripts on this page. That's okay. So we're watching ProTina Highlight stuff when it happens. If you watch this section really carefully it's going to go back. See there's a ton of changes going through that. They're using JavaScript to animate that. That's the worst possible thing you can really do because JavaScript is not a very efficient way of animating anything. What you should be doing is using CSS to do heavy lifting for you. If you use CSS and you use the right methods then you can get the GPU on the device to render it for you which means less battery less CPU sweeter animation. They're doing it fast enough because it works but they could do it more efficiently. If you were doing this you'd probably try to go with CSS first and talk CSS. The rest of this is pretty much the same. As I go through so that's now back to opacity of very close to zero but not quite. Again to keep it in memory. Scroll again. There's the next stuff that gets altered. The next one gets altered. So there's not really that much to it in the end. But the effect of it is really good. But really how they do it and we had a look on a page test to how it worked because it's amazing. Have a look at all these things that are getting loaded in here. It's reasonably quick. It's starting to render at 1.3 seconds. Three seconds of the number of scripts that got going on there are pretty good. They've used a lot of lazy loading and parallelism in this script. The requirements of the organisation are that they need a ton of scripts in here. Looking through what's there. Facebook got about three scripts. Google got about four. Every single add and tracker which the organisation needs to make money is in there with a ton of scripts of their own. Serves from a different domain. That's performance, nightmare, people working at New York Times know this and have done their very best to make it pretty quick. So you wouldn't want to live in that situation but if you were then they've done a riot. The SPG is written by JavaScript. Am I getting the wrong thing? I am too. No wonder it's so fast. And the reason they're doing that is because they've got their paywall up and my page test is probably hitting it too much. So you work harder. Okay, let's have a look at this. Ignore everything I say. The thing is still rendered pretty quick. You can see even with the paywall screen that it actually does a pretty good job that there are a ton of scripts. There is so much of it. Most of them are quite small. But that's crazy. Usually you worry about images but the images are barely anything on this. Most of this is tracking and stuff. Again they need to make money somehow so they've got to have this stuff in there. Is there anything we haven't covered person who asked for this in the first place? Does this make sense? Anyone else? Questions of that? I can probably venture why you've got that amazing SVG line. They have something called A.I. to H.T.M.L. It's something that they built at the New York Times which is the Deputy Graphics Editor. For the journalists most of them are graphically trained so they use Adobe Illustrator and all they have to do is with this plugin it transforms everything into SVG and H.T.M.L. That's probably why you see bunch of stuff. Given they're doing the animation it's a whole lot easier than doing it any other way. I think in terms of what their skillset is a lot of them do code but in most of them everyone in the visual team at NYTE knows how to use Illustrator. So it's just easier for them in terms of constructing the graphic how they were visually represented and then just the coding part perhaps. The only thing that programming needs to do is basically do the scroll events and even those could potentially be handled somewhere else but if you're using you can do animation stuff in Illustrator so you could potentially do all this in Illustrator at least an awful lot of it but there is custom code written for that. They've got their own libraries for a lot of it so at some point the program has come in and basically taken it over but I could stand here I've said before that it's a really bad way of doing your SVG but the crux of any company is how you actually do it effectively. If they made every journalist do it the right way they would never do it. So we can see here and point fingers and laugh but the reality is they've got their constraints they've actually managed to get through it and turn up with something pretty awesome. So that's great. My only argument is that I'm not sure if this is the only code that means that this code affects those if let's say you have a lot that will tend to use the SVG but chances are it will be this is the discretion you don't see things like this in news very often but this is something that they knew was going to get a lot of traffic it was all over Twitter when it first went out that anything to do with Donald Trump gets enough hits on its own right and the concept that only 9% of the population actually decides who you're voting for is pretty scary on its own right so the headline sells the article pretty well I think this one if let's say there's a single one off you may think a lot but they will have a library for this this is the thing so the internal code they've written is in a library so it will take a couple of hours if that for the program to come in there and take the journalist's work and make it something that's this that's the ultimate goal for any organization I think it has to be out in just one day just one day yeah unless and that if you had a day to write an article you'd be really happy I think do you know what the rates are Rebecca for the journalists how many do they need to do a day depends I mean if you're breaking news more but if you're a feature then you're working in radio something like this this would be one of several that you'd be doing there's something like this you're probably doing a day or a couple of days you wouldn't want to take more than a week the timing this is critical as well because if you hang on to it for too long then someone else is going to scoop you especially if you're doing election stuff in the US and relevance so the challenge that they've got with this and the reason they've done it like this is every other news organization has probably got the same data they need to come up with a way of making it differently in a way that makes sense to people if they do it right and New York Times did in this case then you win the traffic you get the revenue if you do it wrong then you've lost basically and you're on to the next one to try it out any more questions or anything else or do we all know how to do this that opacity thing you mentioned about keeping it all in memory that sounds good if you have a lot of memory I wonder if there's a wide people selling Firefox down if they have some worry about drawing all these invisible things it could be now keeping in memory speeds it up so when you're on a desktop and you've got plenty of memory that's alright, if you're on a mobile it's going to be heavier so you probably tone down your animations when you're on a small screen Firefox is generally rubbish animation anyway so you'll get something where you do everything right and just have to change the nature just change the calls for your animation because Firefox just throws a tantrum it's just not animation friendly part of this is Safari is really fast because Apple control the hardware they know exactly what to do Chrome is fast because they made the effort to make it fast Firefox is not because they didn't Internet Explorer is okay in some versions Firefox is usually the bad one with animation these days any other questions everyone's now an avid New York Times reader cool next up we're going to be catching Pokemon with Chee on or something