Online Marketing

UI Elements at 60fps (Progressive Web App Summit 2016)

I kind of wanted to put that into a little bit of context when we talked about performance historically on our team. Last year year and a half we’ve talked about a thing called rail and rail stands for response, animation, idle and load, and it’s a way of thinking about performance that puts the user in the middle and lets us figure out what they expect from things.

So, for example, if you tap on a screen, you expect something to be coming back on screen in under a tenth of a second. If you scroll or there’s a transition, that’s an animation, and we want that at 60 frames. A second idle is a bit of a funny one, but the general idea is that you should do work when the user isn’t interacting and when there’s opportunity to do so when the main thread has some time and we do those in 50 millisecond chunks.

So we can keep responding to users and loading. You want to keep the user on their train of thought, and so you’ve got about a second to get something up on screen, whether that’s from a cache for the network. Now, when we talk about rail, this is the kind of world view. Then I think many of us have today we kind of go yeah responses. Ok, yeah! We don’t need to be lucky, that’s fair enough! It’s kind of important scrolling animation.

It definitely heard that’s a thing and that’s something I want to make sure is good idle. Yeah sure seems good load load, yes, whoo back in the safe, ok load, yeah man, if I can catenate all that good stuff, but here’s the thing this is kind of where we’re thinking of being on people’s home screens and a closer look at that home screen Raises an interesting question which of these is the progressive one up which of these is the native web app? The truth is users don’t care what they care about.

Is that the thing that they tap on works really well and they would never say something: oh wow. It skipped things there you go back would go rewind, okay, nobody ever going to say this, and if they did, it was something ice. That up looks like native. I hope it behaves like it. There you go, they expect it to behave like a native app. They expect your stuff to run. Well, I want to say, behaves there, we go hello behaves for me is like performance, and it’s about.

Does it behave as we expect? Is it do the things that you know and interact with it? Just do the right things right, since that’s the case, I think we can reevaluate rail to look more like back bad clicker more like this, the response part of rail. Well, we expect our responses to be instant like every time instant. So that’s just now more important. Animations yep they’re down there and there we go they’re going up there, because we expect again, we expect instant transitions.

We expect you know scrolling to be super smooth idle. Well now, if we’re doing more work, to make responses and animations good idle is something we’re going to have to be more tactical about we’re going to have to do some work when the user isn’t, and we have things like requests idle callback for that, so idle. Just went up good news, though I think, if you’re expecting somebody to add you to home screen and run your stuff lots of times.

Hopefully, you’re going to have a serviceworker, hopefully you’re, going to be running from a cache and therefore I think load drops down to here. I don’t think it’s unimportant. Don’t get me wrong. You still got to do a good job to get that first load there, but I think over time I think that’s what we’re talking about so, if you’re being home screen minded. I think it looks more like this and I think, if you think about the the native apps, that you run, you have a similar expectation.

You don’t ever sit there thinking about well, this APK took a long time. You know when you’re using it for the 50th time you’re thinking more about how this actually behaves, whether it’s got the features you want and so on. So with that in mind, I wanted to talk about three individual components, but they give me an excuse to talk about about a bunch of other things and I can explain, I suppose, the way I categorize my components from deterministic.

We know up front. We can hard code the values, those animations and interactions through something that’s a little bit less known upfront all the way through to something where we’ve got no idea about how it’s going to behave until somebody actually clicks on the thing, or we have a little bit Of an idea, but not much so those three components are a side, nav some swipeable cards and then expand and collapse view, let’s jump straight into the side navigation, which I think most of us I’ve seen before seen these you ever seen these quite a lot.

So what, although, for each one of these I’ll, explain the theory of how I would approach them to maintain performance and to kind of be performance minded? I will be leaving probably some glaring omissions in the area of accessibility, but just as well Bob Dodds coming on next and he’s going to talk about accessibility. Oh it all fits together wonderfully anyway, the theory for the side nav. What we’re going to do is we’re going to pop on a containing element over the top of all our content, into which we can place a semi-transparent black, a background to obscure our content and then we’re going to have this contents bit with our actual side.

Nav. In it, which will slide in from the side like so so, the CSS for something like that for that containing element, it’s going to be positioned, fixed left:0, top:0 width and height 1 %. Some people like to do write 0 bottom 0. That’s fine works just as well overflow, hidden because we don’t want any scroll bars, but the pointer events. One is a bit of an interesting side step that I want to take it lets me talk about something that’s kind of like a primed element, so these are elements where you you want that thing to be ready to go, and the sign now is one of Those because, when a user taps on the button, they expect the side nav to just come throughout right.

So the general idea behind a primed element for me is that it’s something that could be activated at any time: okay, like a side, nav yeah, it probably fits that bill and if you were to toggle its visibility, it would take more than 100 milliseconds, as in Because they’re, probably at a tap a button and you ray’ll, tells you you’ve got 100 milliseconds to respond if you take longer than that, it’s going to feel lucky.

So these are my sort of two criteria. As I say, I’m leaving a glaring omission where’s. The regards accessibility so hold on to your hats for that bit coming next, but all the same we have around on. I think this is a primed element. I think it fits and as such we can take a couple of shortcuts, one of which is we’re going to promote the content bit to its own layer and, if you’re not familiar with layer promotion.

The idea is, you want to separate out an element from the rest of the page so that when you paint it or move it around, you don’t affect any other element on the page. It’s the same kind of deal. Is you know if you are not packaged whatever you create a layer and you can mess with the pixels in it and you don’t mess with anything else now? The easiest way to do that today, to create one of these layers called a compositor layer, is to use, will change transform.

So if you imagine the simplest possible page with a photo of bald idiot and a nice guy – and you put will change onto said image now, you can move it around with a transform and you can see that it’s kind of separate from the page. Obviously, this isn’t happening in real time, but it’s it’s the idea of separating these things out now you may be sitting there thinking that seems like a great idea star.

Will change transform burn that from your mind? Okay, if I’m not clear, don’t do it! The reason you don’t wan na do it is twofold. Firstly, you’ll want to keep your memory usage down, especially on a mobile device. If you create layers you’re going to use memory, you’re going to have management you’re going to have textures on the GPU all that kind of stuff, so you want to do this as needed now with the primed element, I’m going to make the argument that you probably Want to do something like the will change in your CSS, but in other cases, where it’s not known until you start interacting, you probably do the will change in your JavaScript.

The other reason is you want to keep your time in compositing to a minimum. Compositing is where we take all those layers and we squish it back together and put the pixels up on screen now, of course, if you made lots of layers, that’s a lot of depth, sorting, it’s a lot of management, and it’s a lot of putting back together That takes time, so you want to be tactical about this, so we’ve got our promoted layer and, as you can see in the CSS I’m going to put will change transform on it like so and then come back, then yeah I’m going to transform the contents off To the left, by a oddly specific 102 percent and if you’re curious about that is because I’ve got a shadow, and I just do an extra couple of percent to hide it, cheating, but that’s programming.

You know it’s just cheating right sometimes and I’m a cheat when it comes to programming, I’m very, very, not otherwise, especially not when playing little games with my kids, I’m very fair, never cheap anyway. Eventually, the user is going to tap on a button and that’s going to show the side nav, which in this case is just going to add a class in that class, is going to remove that 102 percent fairly straightforward.

And we get something like this, where it slides in from the side that semi-transparent black black background is the same kind of deal here. We’re going to do a will change of opacity from an opacity value of 0 to an opacity value of 1 and getting rid of it like so it’s just going to be the same in Reverse, we’re just going to remove that class. Everything goes back. It’s great and we could just do that, but it’s like hide side nav, which I put on the containing element.

So if you click anywhere, I’m going to hide the side nav, which is a bit bad, if you actually click on something in the side nav. So the way to get around, that is, to just add an extra handler for that particular situation, which cancels the click which is just a stopped propagation, so I’m kind of canceling the click and it works out really well, in fact so well, this is what it Looks like in reality, this is one that Surma and I built.

This is actually running on a nexus 5x and you can see you know slide out slide in. I actually added a bit of drag thing to it, which you can see if you want to afterwards. When you take a profile of this in the dev tools timeline, which is kind of what you want to be doing with all your UI elements, I have the side nav sliding in and sliding out, which doesn’t look very big. So, let’s zoom in you can see that green chunk is the frames per second and we’re hitting a nice comfy 60 frames a second on our Nexus 5x and below.

It is the amount of work frame which is pretty low because we’re not doing much we’re just using transform changes if you’re interested in seeing that actually being built for real there’s the TL DW and is also a live stream, which was about an hour long with Me and Surma, where we built the side, nav books and everything it was great, but you can catch that if you, if you haven’t seen it so, let’s move on since we’ve done the essentially done the fully deterministic hundred and two percent, nothing.

We can move on to this swipeable card, which is a little more interactive, a little more dynamic. So that’s this one you’ve seen it probably some that Google, now you know just ours and it slides up to take its place. The theory here is again. We want to promote to a layer for the thing that’s being interacted with, but we want to do that on demand. We don’t want to do this one ahead of time, because if you had a lot of cards, that’s a lot of layers and a lot of memory usage, not a good idea.

We also want to use transform and opacity as well, because we’re going to transform this thing off to the side and from a kind of behavioral point of view. If we want it to fade out, because that gives the idea of being dismissed, it’s it kind of something the user would expect now. At this point, I want to take a little bit of a detour and talk about kind of game loopy stuff, which is something that any game developer would be like yeah and it’s extremely useful in this situation.

What we want to do in these kind of cases is decouple our input, which can happen fairly, sporadically and whatever, from the actual rendering and drawing you bit. We should expect from a game because your character stood there. You don’t want to you know you want the kind of game to keep moving, even when you’re not moving the character right same kind of thing. We want this animation to keep going, even when we’re not actually doing touch.

Events, for example, and the way we do that is, we call requestanimationframe for every frame of the interaction and we’ll give it our update function, which you know the nice side effect, gives us a function that we can just call to be like just draw it. Even when there’s nothing else going on now, we’ve got a touch move at the start of the frame. Well, that’s, okay, we’ll just use it will distort its value and we’ll pick it up in the requestanimationframe.

If it comes in a little bit late or it doesn’t come in at all no big deal, we’ll just use the last known good value. If, by some weird weird chance, we actually got two or more well again we’re not doing work per input event we’re the only going to do it once per frame and we’re just going to use the last known good value, that’s good. So this is a model that you probably want to adopt. If you haven’t already for this kind of work now we get to the actually to adding the event listeners and fair enough, I’m going to share them between Mouse and touch.

I think pointer events might help a little bit here, but you know I’ve got this so touchstart touchmove touchend, so on and as a side note, the adding of these touch handlers to the document is bad. Generally speaking and the reason it’s bad is this: really? You have on the compositor thread, which gets the user touch. It’s the one that actually is told about the interaction first and by default. It would do something like scrolling.

It would just move the page up and down, but we registered a touch move, and that involves the main thread and if the main thread was busy or our touch move, just ran for a long time. For some reason, then, eventually to come back and the frame will be shipped, but in between that we’ve blocked the user oops. So that’s not as good, and there is a way around this it’s new as of I believe, chrome, 51 and it’s in opera and Firefox.

It’s in development, according to Chrome status, same with WebKit, but this is encyclopedia large, obviously, and I’m not sure about age. I can check with the folks on that team. However, what we do is we add this passive, true to the event listener. One that says is, I won’t call prevent default, I’m not going to do it. So don’t worry about waiting on me in order to do the thing you’re going to do still give me the events and give me the information, but I’m not going to prevent default.

Okay and then the browser goes cool. I won’t block then I’ll just get on with it. That’s great. So, anyway, back to where we were. We have our event listeners and we talked about what they are going to do. For example, we have this card, it’s in the start exposition. So what we’ll do is tapped on it we’ll go to our on start, which is going to basically ask for the position which lie to be paychecks or the first touch.

Events, page X and then we’ll add, will change on it dynamically, which will give us a bit of a hit because we have to create the layer and everything. But it’s probably going to be. Ok. Probably now you actually move your finger across and we have to category in what’s the new position, which is fairly straightforward, it’s the same kind of deal. We just tracked the page X or the first touch events page X and since we know where we were and where we are, we can figure out what the translation should be, such that in our update function.

We can say if you’re dragging the card, your translation is the current minus the start and what we will do is we will apply a transform with that value. Great stuff, that’s going to work, we’re going to be able to slide across. We can change the opacity and the same in the same kind of way, but we now need to think about the next part, which is I’m kind of dismissing the card right or I don’t go far enough and it comes back to the middle so kind of This is the behavioral bit, so if we consider a normalized distance, so it’s at 0.

If it was out to the side, we could say that’s position 1 or back in the other way. That’s also position 1. All we can do is we can come to throat. These thresholds, I put them in 0.35, when I was doing this, you could pick naught point 3, 6 or something else entirely. It’s very exciting. What will I choose today? Who knows that’s web dev, so I put an all point three five and if you don’t know, Pratt’s, not point three, five, I’m going to slide back to the middle.

If you do go past, not point three, five, I’m going to dismiss the card fair enough. Okay, so that’s in the the on end, like so oh yeah, threshold card width times by not 0.35, and it’s is this – is this target x value which we’re going to come on to in a moment it’s defaulting to zero? If you go past the threshold, we’re going to choose, either the card width or card with, depending on which direction you were going okay, and we can pick that up in the the else here, where we say translate x, plus equals target X minus translate X, all Over four and if you’ve been around for a while – and it done this kind of work – you probably recognize this if you haven’t very exciting little one-liner, that is incredibly helpful when you want to do what I call the easiest easing in the world or easy inning Easy takes always takes this form.

Okay, it’s value plus equals target value all over strength, and I genuinely have made other developers like memorize that, because it’s incredibly helpful, let me show you what I mean worked. Example. Let’s say you want to get this box from zero to a hundred and you basically target value. So it’s 100 zero all over strength, which is four we’ll move. It 25 pixels cool on the next iteration. It’s a hundred minus 25, which is 75 all over the strength, which is four, that’s 18 point, seven five and, as you build it up, you’re going to see that it’s going to slow down because there’s a nice kind of slowdown easing feel for this, so that Your box would go mmm sound effects, not included okay.

So that’s this one line, but it’s an incredibly helpful line. It’s either than that users back to zero, which can ease us to the card dismissal point now we need to detect doneness. There’s no better word for what we’re doing here. Is this animation done? Can I say that we’re finished with this? Okay? The way we do that is well, it’s either you go there and back to the middle, fair enough, in which case we can just say.

Are you nearly at the start? If so, yeah you’re probably done I’ll work that’ll get us most of the way there. If you are just reset the target allow the user to interact again. Other one is basically, you slide. You’ve done the slide out to the side like so, and we also know that we’re going to fade out the card. So I mean this is pretty cheeky, but we can just ask: is the opacity really really low if it is it’s nearly invisible? If it’s nearly invisible, it’s going, it’s going going gone and, in fact gone so much that we’re going to remove it from the Dom with remove child like so now that will cause all the other cards to jump up immediately, because the Dom yeah we took our Element until the other ones went full cool, there’s some space, let’s take it, which we don’t want.

We want them to animate. We have this function. That says, is what there’s and it looks like this. You know that kind of slide up there. You go. That’s the thing you want, so what we do is in our animator the cards into position. What we’re going to do is we’re just going to ask for the current card and we’re going to step through all the remaining ones like so and we’re just going to. Basically, push them down straight down by a cards height, so you go back down to where you were.

Please just ignore the fact that we just removed a card. You stay where you are, and then what we’re going to do is we’re going to wait a frame for that to take hold because styles will run after the end of our JavaScript cool and then what we’ll do is we’ll switch on a transition on transforms and We’ll get rid of it and that’ll cause all the cars to go and that’ll look great cool, and then, when we’re done, we can reset the target and in reality this is what it looks like.

This is another one that server and I built again. It took an hour there were bugs weird, so you go slide swipe it’s great. If you have two timeline and you were to take a recording of that again zoom in and it’s actually in two parts, this one the left-hand bit is the car dismiss. What are you doing slides? Don’t do that to me. I maybe it’s me and Jake. Maybe maybe we just there’s something bad going on, I’m blaming Jake.

It was all fine until Jake came on stage and everything broke for him. Interesting coincidence. Yes, so the car dismissal. That’s right there and then there’s the other bit here, which is sliding the card and you see, there’s a little dip at the start and that’s because that layer, promotion of there’s a bit of layer promotion, but the kind of setting up of those card animations did Cost us a little bit so, if you’re interested in nine, you want to see that one built.

What are you doing seriously? Okay, if you want to see that one built there’s a TL DW, there’s an hour-long livestream that you can catch of that one as well. So I football cards right. We can move on areas, I’m just going to stand around here. Okay, the exponent collapse is the final one and it’s the one. That is the kind of fully dynamic one, because you could pick any of those cards. They could be anywhere on screen and okay, in this case, in the mobile case, they might do a full screen takeover, but they might not.

They might just expand a little bit or something like that. We don’t really know ahead of time. We can’t hard-code those values and if we try it’s going to be pretty horrible, so how do we handle this situation? Well, the theory for this one is going to be a little more involved, but that’s fun. When I get something like this from a designer or I do it myself, I kind of read it over and over and over again it’s a thrilling few minutes.

But it’s a useful few minutes because it’ll as you kind of read something over and over again, your brain starts to notice the patterns and the patterns here are in this case. I think that thing is, is getting bigger and it’s moving. Yes, there’s the pink head a bit, that’s fading in, but predominately this is about a movement, it’s getting wider and taller and it’s moving and therefore I would normally go wow that feels like a width, height left in top moment.

Great, that’s probably what I would animate, except that that would be bad and the reason it would be bad is that in every browser you would trigger layout with a purple chunk at the top. There paint and composite layout is basically where the browser says. Where is every element? It’s basically a geometric process. Where is the remote element? Every element, what is its size and so on paint is where we fill in pixels and compositing is where we put the page back together all those layers.

Now, if you’ve got to do that for every single frame, when you might have a reasonable size that Dom you’re in trouble, you don’t want to be able to do under have to do this work on every single frame. Chances of getting 60 frames. A second slim to none – you may have noticed that I use transforms an awful lot and the reason it is their profile is different for an element. That’s got its own compositor layer.

Changing a transform is not going to trigger layout and it’s not going to trigger paint. It should only trigger compositing, which is something that we can probably get done comfortably at 60 frames a second, so this then changes the question to look like this. Can we do that effect with transforms? Can we remap this slow-mo? Can we do that with a transform? Well to me that looks like a scale and it looks like a translation cool.

My approach is called flip all right, so that’s the first last invert and play because there aren’t enough acronyms okay, so I’m adding another one cool, but it’s an extremely useful way to think about the animation. What we want to do is we want to essentially ask the question at room type. Where is the element that I’m interacting with so we record its first position on screen and we do that with something like get bounding, client rect, which is fun to say and has been around since ie for lint.

And it will tell you in relation to the viewport, where this element is its left, its height, its top its right, its bottom, all the stuff that we need to know know what we can do is we can actually snap the element in question out to its Final position, I’m doing this for the class. We could have manipulate the Styles. You could do whatever you need to do so now our card is going to be in its last position like so, and we can call get bounding, client rect a second time.

So now we know where you were now now. We know where you’re going to be that’s cool. That means we can start to kind of figure out our transforms that we might need dynamically. Now there is a word of warning here. Going from first to last is going to trigger styles and layout and the reason it’s going to trigger styles and layout is because the second gets bounding, client rect came after some style mutation.

We said: here’s a new class for you or here’s, some style changes, and then we asked for how wide and how high and where are you on screen and the browser goes. I don’t know you just moved everything hang on. Let me go and figure it out and I’ll come back with an answer and that’s exactly what happens. So you got to bear in mind that there’s the from this first class, I mean you might be sitting there going hang on a minute.

I’r sure you said trigger in layout was bad and I did, but the key is here: we’re not going to do it on every single frame. There are two things we need to bear in mind, one we’re going to do it once at the start, as a set up cost. Secondly, we have rail, which is going to be our friend here, bear in mind the user tapped on a card to get the animation. Therefore, in rail terms there here, we have a tenth of a second in which to respond.

We have a tenth of a second in which we can do some work and believe me, a tenth of a second is actually quite a long time, especially when it comes to this kind of work. It’s great. We should use it and we do so. When it comes to rail and flip, you can typically afford to do a single styles and layout. Pass then seriously one, but that’s cool. That’s often enough and in terms of flip, that’s a good set up time.

You’ll still need it to complete in less than 100 milliseconds, so you kind of have to be aware of how big the DOM is and if you’re able to use something like CSS containment to limit the scope of layout and paint. You should definitely do that and that’s really useful. However, we knew where we work. That was first, we know where we are that’s last and now we can transform. What we’ll do is we’ll just basically apply an inverse transform to take us back to here.

We can do that so first left, you know blah blah blah. Do that with a scale, apply a transform that uses those values. So at this point, we’ve done first last an invert – and it’s like this. So if I was the top on the card Ready, Steady, Go there, you go from the users point of view. Nothing happened. What’s really happening. Is this going first last and then we’re inverting and it feels like a lot of setup cost and it kind of is, but it gives us a huge advantage, because what we can do now is switch on transition on transforms and remove that transform and our card Will just go, we didn’t know where it was bit the stuff.

We didn’t hard code it we just said: where are you going? Where are you now I’ll figure out the transform and I’ll apply it for you, we’ve just most a remaps, something there was width, height, left and top, which wouldn’t have run at 60 frames. A second do something that definitely will hopefully all being well caveat. So because there’s always those if you’ve got some scale changes that are being applied.

They something like text, let’s say, you’re, doing something flipped like when you got something with text inside that might get squashed or stretched. So you might need to move the content to a sibling element so that it’s not affected and then just have faded in or something like that, but a sleight-of-hand. You might need to do that bit of gymnastics, but it’s well worth it like. I said the first to last does involve forcing Styles and layout, so you have to be careful with that, but this is what it looks like in reality there.

This is a little kind of expanded collapse, e-card thing, which you know that’s running on our Nexus 5x, and this screen doesn’t make a look at like it’s. 60 frames a second, but it is, and I can prove it because I’ve got timelines that show it and you can see it I’ll show you it’s great. It’s also responsive design friendly, like I said, we’re going to ask at room time what the first position is and what the last position is.

We don’t we don’t hard-code those values, which means the same animation on desktop, looks like this different position: different sizes, but still the same stuff, and this is what it looks like in timeline – will zoom in again to the top bit, and you see the dip at The start – and you see, there’s a red markers – that’s they’ve tools telling you your frames per second dipped below the comfortable point of 60, but we know that that was the setup of flipped.

That was the first lesson invert, which, on a nexus 5x on this case, was about 40 milliseconds. After that that is a steady, 60 frames, a second afterwards tremendous cool. I get to call this one a day in a moment. Some closing thoughts. You’ve noticed probably that I use will change, and I would suggest that you start doing that. If you haven’t already for elements that you intend to animate, you need to decide.

Is this thing primed? If so, I’m going to probably put the will change into my CSS. If not, I need to do it on demand, probably via JavaScript, but you want to use it sparingly, don’t go overboard. Transform and opacity are your best friends. When it comes to UI elements, running performant ly. I hope in the future to be able to say that you can get away with a lot more and actually we are heading for that world with things like Jeep, GPU, rasterization, CSS containment, lots of really good things that might help us limit the work, and I Mean that we can do more, but for today for the cross browser story, I would suggest that you stick here.

If you find yourself in the kind of dynamic and then something like flip, where you can remap expensive properties calculate your transforms at runtime is very useful. Now follow that’s news to you and you’ve never come across like layout, recalc style or anything here are some links, inbound phones out, don’t worry, you can get the slides afterwards as well. Other phones went down, don’t care anymore.

There’s the Google web fundamentals render performance section complete with Udacity course, which will take you through the same kind of content, very useful to get up to speed. Secondarily, if you want the source code for those elements, I showed you can get that at the supercharge. Do I wish to take you to the github repo? If you want to see me and Surma, where sermo basically spends an hour interrupting me and I try and code it’s like real life.

There are bugs as well. It’s just it’s every time. I don’t when it’s scary, but brilliant and there’s a TL DW, which is like five minutes. If you ever got that on that time right, I need to shut up and move on, but before I do, I just want to say this again. We are hopefully going to be here. This is the first time we’ve been invited to people’s home screens. That is incredibly exciting, but it’s also a huge responsibility.

We need to act like we deserve to be there, and that means taking a user interface work super seriously. The web is ready for us to do that. We can do that today with the tech. I’ve shown that you can. I hope that you go and give it a try, and with that I’ll say, thank you very much. You


Online Marketing

openSUSE Conference 2018 – Security Retrospective of the last year

We need to track ein. Projekt security incident reporting taxes on our products, fordert wie, im september sofort incident, update manager, survey of what I have to do. Is it something really like bachelor ticket henning wiemeler das, auto vor der security incident, sowie helfer sofort installieren, update manager, sven der rotating wohl, so ewl wahllos, ventotec rfid-tags quad wie du es ist ihm wie koordinator fixiert auch selbst, so koordination lienz blick wie die instanzen tracking Systems denn hand over the work of fixing the pictures der king, of course, comeback.

Dass kaczynski hätte mit patches, oder bei, basic für ihre lahnauer package, maintainer source support von opensuse community to fix the backs es hat mit dem back to us das review ist dann bei der ubs review team extra liam bei der internen build service review, es in tallinn Und vor der test ist wie give back up dates zu made in school der test des updates: internet konnte, free teams, testing extra die, hev, mosterei und opencl unit testing, entfernt, wie, aus, korea und jürgen kesting freiberg, so hat extra large area und die open source framework.

Einsam community members, testaccount updates auf dem release, auf der updates, auf kurs und auf documentation, musste auf die, dokumentation ist automatische wie nizza mit einem manuellen dokumentation, with more information, more techniken cent, sagt gehörst du zu handeln zur vorinstanz kam in queensland der effekt software jetzt ein Götze backen erwachsene, located on off the public, offer blick auf dtm wagens jubel, not not ist damit viel, samuel 1 vor waldesch präfix und die nammer interpack in der samurai references descriptions in der virtualbox la commons asset beside the package, oder madonna, so jetzt keiner important für Back owner of the package will eick jetzt stark sein: denn wie billion yuan react in interviews, ticketsystem manages to flow auf, die instanz wie colette smash the many more wollte apple versus tanzform weil, das, der schnellste, bugzilla das, mal pro watt sowie raid instanz, so basically simplified Rating auf low mode, kritiker, important and the city is cds, es zwischen frieske, räumen kann man, weil, der wille des crm-systems, used by just an bayer customers and users to evaluate the impact of security standards.

Installer security, wechselt scc, skating, gletscher, im vorjahr den 6 jetzt ist wieder fit das keiner zeit, im internet wie, herr verlotterte von streams, interne levy track, die, perfekten es so ist sein, ding ist effektes, dort, effekte von opensuse, lieb tumbleweed, because dieser quite frisch, verliebt und liebkost Remsbahn, cold stream solution days of peace, effektes lesart anbietet will get fixes.

Interne live. We have software des tennis, opitz motto: wes cravens effekte tend to keep track, auf der tour, wenn es also just vor kleinen, starting up dates, zu ostern modlos. Anything to know news site, auf der name, auf bugs der den zeit, so heißt der name auf, bugs developer der last hier ist, so starbucks aqua, relax every weg und how many dax-werten in der weg eine 2006 justiz ab zu dem mittel welches war und 2014 der Werbespot willibald and health box opa wie keine, setting some noise and state the trade ein star in westhausen [ Musik, ], fertiges neues inside the weight of thirty bugs public weil.

Beides change angels got my attention on vom security research, als lot of people und bugs inside the ghost is coming vom auto made it back mining der auto manager, ist sich, dann ist betty cochecker sourcing, lot of those kam auf, die; fasching tools, lothar, bily der erste Tool: court american fassl ob das, article ist easy to use easy to plug and work for them, and space hessenliga fassen ist ein frieden in der stage voll antwort, auf dem fein kräuter, nahm auf bugs risiko und haben die täter.

An den check ist auch ort am rande behandelt wie vor wie den will die herrschaft der ticketsystem jetzt samt us enthält. Das update wird der name, auf, ok, schnell gehandelt, bugs queensberry hat toulouse-lautrec, auf hengst, sowie, führten, das, interne, ticketing, ist es zum crash. Basically, gibt’s das. Article over dem bleifuß, open bug, reports, defekte software and ratings denn die, förderstelle, gelte work, fixiert pictures, so hat das die abschiedsmission zwei packages die, update, eine security, potsdam, meter data, discovery, description and the machine articleperformance, so basic style over dokumentationsassistenten erwartet, because software die automatisch e-mails Generated ein, update notice and building standard ecx automakers die stealth action and automation, testing die, entweder ließ die, update dann automatique, also vor der abschiedsmission 26 as not track der basic listing wurde das hat mittels.

What is prepared? Wortes im test hin zur hälfte, open nach new york, die fahrt des looks at what, in the incidence alternext for testing der partei ist die, klassik freiheit entzogen, so laut ist kein auftrittsort work and more.De liefern wie die lämmer die updates, auf kurs lot of compliance check In utah, state e-mails, notifications, wie präsent, die weiße, mailarchiv update, im, bereich vs, the page book and even search klickern mrd wie generell maschinen wieder bilder sowie data des iwf, kann man, dann bildet ihr reporting form ist das, ein tepco-manager externe tools at what you get.

You said that you can to your application sony tackling auf, hobbit weiter, die user, auto gerne information based on rwe. So you can look at pages. Feuerwehr die der tief, extend wurdest du rating water, ist effekt wurde es noch effekte, so, basically märkte in siders expose zu die auszeit eine juni die performerin der maschine wie die reformierte, maschine, geformt ist denn, sobald, auf ein, open war; der wille die assessment, language vor, mit Dass das fahrrad auf, die, buchholz, gerti content, automation, protocol formel, suite kann wie fügt hinzu der openscape utility, aber ohne prozess in utilities to find out of fuel system ist der effekt bei eon der 211 manager, handels rasens, auf machines, preußens auf die, statistik, sagte, vorher, 2007 Teams, zu einem notierte magix mainz bei der der frühjahr 2010 obertshausen cities die klärung der mass effect, effekte wie roten 2005 aldag switch der vortage phasen das article erst 2005 handelt of the top der highlights der highlights: wird ua 66 kg ksv ketsch fassung zu.

What more thing skeptisch schaut in den kernel, ist ein, menschen, im management, ag’s, magica, willi outlaws und number of sound, los ticos der implemented, auf kodex, jetzt, quartal software wer people, programm für security, meinte detail, die, pingsdorfer, improving graphics, magic, ist audi, besser, oder wetter, consistency models And management dvfa continues to wings, so lässt und lässt bugs av und anymore, mozilla, firefox ja, keine der toten, als diese zu heilt eschenrod base load of issues and found in etfs and fire shuttle oder freeport vom fass in der ems der salon, listet des bugs oben Fließt pausen security updates, vor dem enterprise, product code lines and families 602 die sechs vor die sie in zwei, phasen, seventeen das, opensuse lieb ist in harry potter packages, vom solution award, auf der auswärts nie imports da werd 150 updatestar import, vom, stanford, oft security fixes vorlieb Automatische came from our suse linux enterprise kopie entsteht eine opensuse community attention assist 2004 und 2007 sowie frühling das ist quatsch, impossible eines billigen willi pipeline in factory pipeline, feel like a plan sagte manager, kent wells am parkscheinautomat menschen den arbeits und wie klassik weiteres high impact War, der wille, thies, so wurde, so das, ist ja, nett war, dies drei impact, vorbild, hieß, gekostet hätte lot of attention.

Hat der hhn texo, like the exploited travel export, exploit der lot of customer care. I speak horst der difficult to fix. Der nichts am werk und aus dem verkehr zogen, also fing der stance, special edition der details, wie klassik frist zur korrektur, an der bille thies und händel dem florett as more money workers moment, herrschen und top star, dj partys kann man, ja, zum, älter und inspektor, beginn Offizieren zu, let me take some oft aus, so ist die vorgebaute thomas waniek, programm, okay da wäre working as internet okay die kerne war, es okay, bei der der workflow in der linux memory.

Memory management model based business sales pace und muss, auf der data located groß abort accepted existenz downloads, so ein research, hätten, so das ist halt was found. The last time aus dem 1000 m der people, kodex fordert ufhausen tender, vor, ort ja, wie du wann, page wie. Du als little bit of hawaii triathlon, page juno wann will kostet buffer and der protect pro für etwa spaces collide, anlass, ihr security, research, haben für eine, qual ist der places in common code des kontextes, vor kilobyte kenn di campiglio, precious love to give a damn.

Einzel iwanows places war es in jilib sie in jilib, sie wiesen, bevor der programmstart, schrieb sie dass, some of the location post on stage locations for embedded alley, larita fans allerdings, so etwas eben exploit starting up for them to users to gradually programmstart in jilib silvas trittin Sourcing der nächst leute will problem ja, das war, es keine, hatte der finne san francisco der heimweg war, damit ibykus qualität exploit bei der post keine harte fix sofort hostet keine received the big band bap zu köln die aktion auch von kilobyte, ein megabyte motto: megabyte kate, Moss, auf der textanalyse berlin, somit ist der jazz ist jetzt quer und stecker locations, täter dann bei der compiler, page die, location and sources of ages die, hexe, wie, bild oder patches, gibt es für gwd und willi.

What do it for release notes streams, but what we did ist es, vor zwölf, sie, liebt, vorsieht, freenet zuvor, die, updates and roll up den stalinisten stan heftes feature in der welt, ein bildhaftes compiler features and investing nach, auf dem, fixen, keine monster für security researcher community Gelöst interest in der topix arbeit feininger gerne, eine, co2-steuer distribution to use compiler option and urwald ist otto motor gewannen ein spektrometer startet wars, release beginnt, auf jenny, dass hier der text, eu alerte bau des university in ein tief seine texte using spekulativ execution system concept, stores Willi porter hast hier research, asano looking to play in the topic, so wie wir weil, wir, sinsheim, auf der schussen, beginn, auf jenny und plastik der villa teams, campos research, es analog, einer, voranfrage, hier, wie, lexy, k, 47 news die konzept, ist oder basic film ist der Cpu spekulativ execute following instructions to make more out of the listener: make-up motto: wie pasta in quick and attack shortcut to recovery, korrekt execution, wird, kostet, auf transistors, bei space and tax cuts, and almost all of this short cuts can coach und ex freundin sophie lukas.

Metern mit dem problem, ist der access control und supervisor, bild auf der page tables, so das bag. Ladies engine, that look at supervisor, bittet access, page tables patch and restore memory schossen table oder should have been able to access etwas der shortcut taken to market faster. To have lästern systems oder kost, disc einer security and general partner sap des bag. Ladies execution patches, stuff, interesses, ist publik ein auf anne will, zu gast gerne später kippte speed.

Sowie will paris dies, haben, keinen cash base, zeit schöner text des area4, provinz hier der distrikt, an bargeld vom segments, internet safety, hier wie wir in wolfs ins november und ende november und engineer, sven wolter und oktober, so wirken die zinsraten ancelotti software bug der software. Ist fein hat die software werke bei, uns, gekauft, wie, kenneth replay, soll prozessor cell viert in some of disney ceo michael changes.

Ist das lied ist spekulativ band jump, britische nation variante, zwei coaches zu fleisch der der predigt mit politischen wassers es die software ag straight forward security fixes software ist bei nike, oliver stettes maja, jessica, ennis, social security fixes schulleiters, vor, einer, vielleicht, etwas ist willi needed messe. Erfurt handelshof lines of code, entwickelt, papstes system call and repair fest, also high risk of communications, and the one thing is used performance so and customers weil, customers, one security day out on performance and apparatus for my team, ist auf core security by customers, der keiner piste Der computer ob text, hafen longlist jobs, bei twente, präsenz, die post, kreuz am feedback, war, uns, entgeht, public wie, forscher die people, sound zusammen, auf problems, faster, äquivalent, fixiert, so der variant, wannweil, beginnen der wahl der fans.

In der top speed of execution, der user defined construct. Atemmasken so nennt operation online checks, das los, is back in action to continue to give back, sammer, auf der performance, kennen sollte, so könnten wir, hervor, steckte, varianz, metern ist während praktisch unternehmens meltdown der text von first release using der patchkabel isolation. Userspace address space opera cent, flipper flipper und transition von karl valentin ist das, ist wie der schwanz studie das problem entweder fix vor der ist nur konfusion er ist sechster stelle pazifiks, messing das ist different vor irgendwann of spectators; basically wie kann es hier das in juba Class so ist für family office, constructive ein special effects, user und secure data, public data, hätten enden out of places, auf potente, compiler kennedy text, so microsoft, distanz am werk und changing der sie komplett die texas patterns, eine mit respekt, ist arne riise fans ihn in der Residenz notiert, basically, you have to look at erläutert ein cfc fans, der aua, so wäre es die upstream entweder style, cooking fixing, devrient wann ist in der orte various places wert des frauenchors, dürfte jumper, friction der degut, findet, ohne transition von privilege, tui travel strand, studiums code; Sowie solaris 11 ist bild.

De, so treplin sono der köln restlos sketches wert ist kein happy-end micro caps, flaschen 20 transition, betrieben wird, schon machines, so nicht kennen die, konstanz, die, häufigst, entfernt, vor der post, für dieses plastik, das bag, raiders memory december ation, der inits, vom, internet Access to leave it because it’s not easily fiktive software software, justine übelste fixing, endlos wünschen end of the changes.

Letzte worte future will bringen und jetzt der slightly worauf das ist unfair ist dieses projektes ines. So der notfall ist die messe für mind & more than the studies. What we do, however, vorprojekte security lenken den product security for me go zu, die gute shipment wie vor der as folk rock. You die security development lifecycle, jetzt noch, formel 1 installiert beide, zusammen, findet, wie, working on the fighter, mechanismen simples rally for doing that.

We have automatisch extreme bild service service ones after bilden die, apm skript, stadt, luxor, seit, juli binaries die bus services, politik rußpartikel er will findet kein chaos, user, landrut user zu transition und luchs in kuwait, lässt ist der ja, zwei hälften, ziehen, bei, erst ein heftchen weit Listet der have not been weit. Listet er will be der villa porsche, wird einem essay, please contact des cutie team, vor white listing service, so basically dann people, kein der packager kein open in baku vor ort wie, blockierte kartelle mehr der erwachsenen der fixe, dem fest denn die discussion with the package on A dream on how to fix ist trainer willi toyota, verso logistik für die, relevante, download, diese, die ketscher bild, bild check network services system service, ist adtech, gelockert, rowling, rohlinge, szene stammt, so das, thema tabus wie bisher drei, kitsch wie etwa the brakes soja, not going wenn Er fordert des be shipped via wir flotte, meister und ludwigsplatz, der security audits, ohne, first officer wie, werk, arirang und dies, keiner forderte, antic tags der opensuse liebt die weder beim text von opensuse, tumbleweed der ist sie die orte packages; der proof; packages, vom auer, vom, mauerwerk Overtime bei bruno ketteler final product is something that should have been able 6 die, scan für die open net, a porter systemservice running with something that our eyes zu fahren der dritte bewerber wie das, das net benefit genau erkennt, ließ sofort.

Have that many things to review the mentalist bevor du gefühl, wieder, ferne, wie, keiner, handelt et orbi, open at least eight of requests. Hinzuweisen sentiment tettnanger seems to be increasing. Oberteil wann fing es auch, so pervers part of it die activation of financing, compiler flex, fonds der clayton, yukon powerflex policy, compiler meiner, safestick, meines, kleines protection and revel in some any change.

You du siehst du passt aging, because they can just in der brust anfängerhaften drugs and no wechsel zur station projekt red die apm of exchange to include the events and fixed gewachste der insight. Fortschritt die fosters protection, one or two very low number ones, convinced that ist sie gut versorgt waren basic holt die opensuse factory, schief, dominik mattes options to the bachelor factory of flexdoors, so nett forscher die des active protection war, es ein, easy transition, sowie change the protector Mode der heuristik, canaries vom die ford to the strong mode wird übrigens david moore, bild, sportextra functions, force, india, staging der häufigsten packages, skript meines, stacks protektor, vom, dioxin, oder, kopiert, protector, meine, strong suntech, ist es fix denn vorstellt, die norcom problems or no problems, endet aus Event and distribution man auf die last des projektors findet das ist die position in die panel, executable sofort abzugeben.

I had some of the pages für build with it: security patches question of the weekend and distribution weit. So divers am challenger. Sondern challenge ist konvention people, dass performance, wie, carson xl, die sex party to get used as one registrierte die. Ebics dbx register ein, so komplett binaries will be slower von. An ohne mount weil, fortschrittliches muster auf der distribution. Stepi können die provider 64 bit edition.

Alle register use, it is not so import engagement, der väter und short notice of peace and sport, los angeles, so die lions on sight. First, take that eine distribution, ist ricky ist das tief lag vor, dass, sie, kommt, heil ins, auto linker, fleck weil, previous marriage of change, die optimisation flex, ein europäisches, hughes, vom, globus, hätten etwas motto: easy to do das, vor der position; endet execute the support of discussion And changed by default weil, compiler geißler die distribution, integriert astrium leitet, so that was er möchte der kunde, dann wie frauen die adia aufdränge compilers es hilft etwas aktiver, some people, er werde genau ist der compiler default settings, konfiguration faltet, kennen, wie, plugged interview system.

I have fun apm pages provider des default files and dad put-option center die, linke, einen, compiler flex, conditions, condition, summit und wann zu installers package, colt gcc der compiler will automatik kann ich eine welt, drei binaries, so heftiges package getting to dodger config setzt, oder digestif ort Ist so wars, the old republic, den eindruck, hätte vor, laut albers der wehrleitung 50 packages, oder den menschen, so postet ästhetik binaries der werner otto linksfuß, executable constance seltsam, bios images, bei der mutter relevant will sendet privatbild samt biochemisches samt, pin der macworld agency debt, genau compiler Meint hinein dort anfing das, end of patches, wird, positioniert, seien, oft aus, wie, theresa krautwald dokumenten people want to build der milchpreis porte kenne keine großstadt, take away von decision.

Security has to grow vor der station france agency soca betreuer sowie projektes tätiger ist er außer du alles von distribution products, enterprise ist die finger, wie du die stage. Article cloud based on open stack view, storage der have been some things about the day. The music management am container based container segways praxis days, die motivation, ist die, lose der wildlife frameworks, auf platz, auf components, interacting audis, kontrollen interaction, of course, and security schützt.

So das ist handwerk wird außer lukriert, werden, wir auch, so giftig feed back and look at spacey klien der wie, also ein battle, förderverein schon, hier ist in der product development team because they work in the nation and the nature of fashion der partizipation ist keiner importance. Haben wir vom gezahlt wenn, jpm, wird, wie, effektiv, working with them sowie los angeles, für harfe hier in twist development team und hier ist tablet scanning in der kantine continuous integration pipelines, ins, all things es, wäre, billiger ab mosthaf wie can do it more often wird die New products wie der bischof, landing page foul, an resources einer website, oder maschinen wie die bilder der jungen formation, dauerkontakt informationsdisplay mail, kontakte, rest ist die, kür, tdi, für fashion security, topix, fiel, free to us media conference, bei e mail, betreff x100, so vor der web browsers.

Villa und upstream werk von chromium, vom, safe firefox der duh der sandbox, wie könnte, jan ott, been set up to develop genauer und so die. Schweiz selbst form, auf apparmor protection of user space program, spot ist der wie flexibel in der actions, etwas keine, hartz iv ein. So forscher der chrome, webbrowser ist der sexy models, kriemler und den news, abo programm street view story, wie, auf kochs, looking for sleeping on our own unter topic: der wusste doch war, der respekt ist der methode wurde in userspace, reich extra waren, selbst abstrakt, so vor userspace Interesting up where you have antastet running dann können wir konkret bei in der techno fans, der javascript engines und ja, es gibt, einen, special infected bei der die kosten resolution, timers der versand form auf direct memory access.

So der coach, pat cash timing, sehr gut geht, cashback stylings web skript, chrome und firefox, update des high precision time von javascript, disabled access to dies, keiner direct memory, access points, für health and box coach, astheim, komplett, aus, empfingen. Das is possible and problems candy, exploited außer. In new zealand, so wie wie, geht es weiter, wie, kommt, eine, open stage, bevor der des sounds wildbad der topaz ages, oder distrikts and boxing auf der network handling der pem handling, and you can break out of this time boxes und access networks, sandbox und mexiko, tritt, Ließ memory, auf arbeit and box out of process snb an fortschritte beim, most user dem programm stone hit because they just don’t wan na fastet der, not kommt bei anfasste tod des victory die technologie des sandbox, snc finito, protect me form es ist programmiert und communication trusted Application system kranz der us to have des pacific patterns der tv, jetzt, keine, hartford x-server, die pop-queen, wann, fing, bischöfin, gebäudes frei für die engines, der hälfte, shading language, erkennen, language ja, so wie, popping gebaute, shader, längst, kein, hobby view, spectators, execute, translate ist ein set and The machine is used: wird ja, jetzt research, letters,


Online Marketing

A RESTful JSON-LD Architecture for Unraveling Hidden References to Research Data

You later made in Stuttgart, that’s one and we as the Manheim university live. We live in mountain expanded by the DFG, determine Research Foundation, and we are now in the second funding phase in phase, so just that we are on the same level. Maybe, let’s start with some easy stuff research data? Well, that’s just some raw data. Imagine some numbers! You have measured. You have made some experiments and you measuring that, and that will be kind of in maybe an intermediate step in your research process and your then heading for the publication, where you do some nice analysis.

This would be the first possibility, but you can also kind of take research data from a data provider or from some a visit official statistics like four countries. There are a lot of data are available, also for other organization or stuff like that, or you can just take the research data from your colleague, given that he or she shares it with you or maybe has even published it. So if you’re using some other work.

Other scholarly works. Well then you have to cite it and the citation is just some more formal, structured reference to another soft gallery work. Data citation is then kind of this thing if the scullery were his research data. So let’s start maybe Ben. Does this data citation? Actually started, I have here a timeline, I think we have seen at least some of the date so more or less already and first question.

I would like to ask: when was the first structured data citation used in a publication? So I claim maybe around the year 2000, if you have any proof or more hints, just send it as we are interested kind of to find out, maybe a more accurate date next question. Well, when was the first unstructured reference to research data used in a publication, and here we say well that’s 1609 or before – and the proof just follows here – is one of the first unstructured data citations, it’s a paper or a book actually by Kepler.

So he’s the author and title well actually the whole stuff here above that’s the title: if you translate it into English, it says new astronomy based open courses or celestial physics treated by means of commentaries on the motions of the stars from the observations of two jabrai. So we see here he mentions this observation, his research data from teacher Bryce, so he cites that he does some data citation kind of.

How does he do that? Well, just by well a little bit above. Should it be from the observation of teacher Bryce? Oh that’s. Just the sentences here part of the title, which is the suggestion that these or the data citation kinda well, that was a long time ago, and actually now we have some data citations principles. So this are the eight data citation principles. First, one is well it’s just important, it’s actually as important as other citations, so you should too kind of the same thing as you’re doing for other citations, and you should make it easy or facilitates to give credit and attribution to the authors or to the contributors Of this research data, you should evidence, so you should do data citations whenever you’re using some research data.

You should cite them also as a citation, a unique identifications and global identifiers, for example, access. How can you access the research data, persistence and two more currently, there are hundred actually exactly one hundred institutional supporters. This means, if your institution want to become one hundred and first you have maybe to hurry up a little bit. There are some data, centers publishers and societies, also some library societies are around among them and some others supporters.

Well, that was the principal kind of house kind of in the practice. How does a data citation look? Well here? Is one format suggested by data site. It’s just kind of informant. You can use. You start with the creator than the publication year. In parentheses, column, title point version, point, publisher, point, resource type point identified, so not so seeing fancy in there. There is an example. You can maybe move around a little bit and another order publication year, maybe in the end or some other rules about the separation stuff like that, so that’s normal, seeing what citation styles actually are forcing you to do, and actually there are also some other well-known citation.

Styles, like API, who already has a data citation guidelines, included some other examples I have here also from the NLM or the Chicago Manual, have at least four databases. They are talking about internal some journals. Diocese wells are listed here, but actually in practice the people – they are still doing the same thing as 400 years ago, namely they are citing or references the research data in the text, just by mentioning some words.

So, for example, the first one is the caption oven table and somewhere there’s a reference to the research data. Second one is well, it just mentioned the igloo study and if you read a little bit around you see there should be some connection to reading literacy. Maybe not the first thing with men, you see you come to mind mind if you see igloo, and this third example also it can be scattered around in the text, as here with diverter years, are not in the same place and some other words in between.

Maybe so, how do you process this? How you can find now the research data? What would be the steps you need? Well, there are different steps you have to perform now. Actually, the first one we have just done, namely the detection of data citation in the running full text. Second, one is well, you have to resolve and normalize kind of the data citations. So, for example, the igloo that stands for the German internet, Sonali grown true lazy into zoo, ok and the this sir, that’s kind of the abbreviation for the socio-economic panel or also in German, the socio-economic panel, and you can even write that differently.

So there are different possibilities or variants here. Next thing is the unique identify the data citations. Actually, there was an igloo study in 2001. There was an other one in 2006 and there was one in 2011, which one was referenced in the paper before and last step kind of find actually now really decided research data, so you actually or after some URL or maybe then just the location and well.

This steps they are kind of annoying. You don’t want to spend a lot of time, and actually you don’t maybe not no time at all, just see it, maybe even in the beginning, that would be nice. So the question is here: is it possible that we can some of these steps out alive? Maybe some tools, some algorithm via work – can help us here and that’s exactly the goal or one of the goal for the info lace project automating these processing steps.

So this means automatically unraveling hidden references in the running text to research data into structured data citations with you our eyes, and this all should happen in a flexible, long-term, sustainable infrastructure. So here’s an overall view about the project. So, as always, we need some data, like the full text, metadata stuff, like that from research, data from publications and then our other ratings.

They can work on that they are relying on door. There are some data mining algorithms and they are using some bootstrapping strategies and some other stuff like there. We will not call will not speak much more about the algorithms, but focus on the technical architecture where they are actually in, and the technical architecture relies on linked open data and will provide some rest who AP is in between.

There is kind of some abstract, modeling stuff, some structures and antiques, which kind of connects. Also these algorithms and technical architecture – and you can get out things are out of it. So there is an integration. We are trying to integrate it in as much as possible, and maybe you see that here better, so as the end user. Well, you can, for example, search in a discovery system. Then you’re receiving some publication according to yours, wizard to your search and then it would be nice to see on what data, whether they’re this publication, relying on or if you go the other way.

If you’re searching in a data repository finding some research data, it would actually be nice to see which publication were built on top of this research data. So we need some in length linking stuff in between them. However, the users they are not only searching in discovery systems and data repository, but they are also searching in other stuff, which I should mention in a minute. First, this there is also an in question here: how actually two best incorporate data connections into library, catalog? That question comes from Horizon with court 1914 Library Edition, so you search or use the search also somewhere else, mainly, for example, in google scholar, or they can maybe search on the colonel website or wherever actually somewhere in the web.

They can make in search, and so actually it’s also a good question to ask here where and how is the integration of data citation for our users, users most useful, so we see here actually there’s a lot of stuff of different systems. We would like to cover in this integration and there who really need a really flexible infrastructure which allows us to do that and that’s the next. What we want to show you all right, so we’ve just seen that there are various agents involved or possibly involved with with the results of our of our project, and this is a like a 10,000 view, a view of our architecture.

We have an internal API which does all the heavy lifting, that’s all it takes extraction and so on that’s written in Java on, and it should be to be mostly self-contained servers. On the other hand, we have our public API that should be it’s flexible as possible. Should support as many different see realizations and data formats as possible and allow a data model to be as complex as needed, but still be really fast, so speed speed is of the essence for us and that’s why we relate on some some principles when we started Designing this this whole architecture.

The main thing should be that the API usability is more important than then expressivity of all parts of the model. So we want to support it at the at the right places, but in general the API should be easy to maintain easy to consume for for possible well developers, and it would be possible to understand the data model. So we try to postpone the making making the data model extremely complicated part to later and start with something simple.

Of course it should be restful ish. Also, not all the aspects of restful architecture are followed closely for Orthodox league, but still its protocol independent. So we can reproduce every everything on a local client without HTTP. That’s really important, because it has to be fast as we said, and we decided to use adjacent store versus a triple store, because it’s really fast. It has native water lists or arrays, which everyone who has developed the RDF software knows is a real pain with RDF, and it has a deterministic structure again, which RDF has not, and that makes it easy to use it for closed work validation, which is really important For us, so in general we started out with keeping it simple and that’s also understandable if we look at the main operations input in fullest at the moment.

There’s this bootstrapping part that we try to learn from a simple seat. Word new patterns to find data set references as Phillip show before and there’s the multiple levels of recursion involved and it’s an iterative process and it’s really tough on cpu and on ram. So here speed is much more important than expressivity. That’s for text extraction, so extracting text from PDF, well, which we do a lot and for applying patterns that we found using this bootstrapping process to to text files.

Again, these must be really fast and there shouldn’t be anything anytime. We lost with a civilization or or description or complicated data structure problems now for the data set resolution. That’s that’s the part about. If we have some string like it so ep, what does that refer? To which databases must we must be searched? How do we rank these? These results? How can we automate the intuition that people put into resolving these data set resolutions, and here the expressivity is much more important than speed, because we won perfect results.

So I I still think that the modeling has its married and it’s important for us. For example, data set granularity. So if someone refers to SOE p, does he mean the whole panel, the whole survey every every year or just a single year or that’s one aspect? Then there are data set references, data set references which cannot be automatically resolved without context like the people right as the results of our study shows – and we know we have to know who are those people and with what’s the context.

Where did we get this from or something like page 15 of the verb panel, which we don’t know what? It is because we can’t find it anywhere, but we still want to find one to a state that we found somewhere that someone references, something that’s called the door panel, also for for doing like a biometric analysis or graphing. The relationships of the entities in our in our data store. We also want to have the possibility to model this deeply and also for for mining the provenance of the things in our data store.

It would be really helpful to understand it as a set of statements. Instead of the set of documents, so the question is: how do we get the best of both this world of the modeling and of keeping it simple and to show your dad I’ll, just briefly explain or architecture? So we have an HTTP server which which handles the API calls, which has a rdf json-ld content negotiating middle mayor, and we have a MongoDB storage because that’s really easy to set up and easy to deploy and fast we’re using the Mongoose document with a and document Mapper to to make it a bit easier to to work in code and then we have mapping tool that will map between the mongoose imam and end and the incoming data.

So for once this handles are the f requests. It handles a request for our schema, but it also handles the RESTful API requests and exposes our data model in different in different civilizations and thought. That’s all controlled by something we call the teasing. And if you are asking yourself what this spidery thing in the middle is with the arrows to everything else, I will explain that now so T Sigma is our staff develop format it’s based on, but it’s just json-ld with a bit of a different syntax, more oriented Towards turtle, because that’s easier to read and easier to write, and in this we keep all all the different aspects we keep the descriptive part.

We keep the database schema part and also the presentation part. So these are the parts that describe the rdf semantics of our data model. We have a class execution with two properties block and algorithm, which I described in a context. So it’s we happily stole that from json-ld. Then we have the database schema part. So there’s a collection, execution and the property algorithm and they are the algorithm – may be required or should be indexed and so on and ask me this is just just an example.

This one shouldn’t be displayed in the API front end so yeah we’re mixing we’re mixing different levels, but we’re keep them all in one place which makes it really easy to to adapt and to to fix things. So one schema to rule them all. That’s our general idea from this one file. We generate our ontology, we generate our REST, API, endpoints and the documentation for them. We regenerate our database schema and the indexes that make this database fast and a date, a model explorer which allows us to to get a better understanding of how the syrups and now, let’s hope that it works the joy of live demos, alright.

So what we see here are the the aspects of our data model. I won’t dive into that. Much detail just want to say that execution is the most important thing because we are doing heavily algorithmic stuff here, but we also have links between entities, for example and patterns, and if I open one of these, I see that the context aspect is always the RTF Part and I can just open all the RDF descriptions right so so here that’s that’s now we’re on the on the RDF level, but we could also check out the database level and to see, for example, to find out by some some queries really.

So maybe some some field isn’t indexed and we can always jump into the real rdf description of some class, for example, here a search query described as a turtle in this case could also be. I find it always helpful to look at it in json-ld, because that’s really tours or anything else or I could even go crazy and look at some visualization right. So that’s the data model part. Let’s look at what we can do with that.

So I just showed that in the demo brook that’s nice right, so I jump right into it. We have our API exposed using the swagger interface or all the things rest addy, something something are generated from that file. We can do all the HTTP verbs that are relevant for s get post and so on, but what I want to show you is our simplified api calls to execute something, and what I want to execute is a short version of that learning algorithm I just copy It and paste it so just really quickly.

What i’m doing here is i’m executing this frequency based bootstrapping algorithm for all the files that were attacked with this particular tag, and I start with the seed elbows. So I know that Ibis is the data set reference and I want to find out what can be used from justice, information and a lot of files. So let’s try it out. Okay, things posted and I get a response, also in the location, header and now it has started an execution.

That’s running a synchronously on the server. I open that up and I get again the trip of you. So I could look at this, but we have a bit of a nicer interface, so we see the algorithm is at fifty percent. Just have to hit f5 a few times. Why did runs? I can just show you. These are all the the well the not insurance that you can configure for an algorithm and, let’s see if you finished yes, he finished right, so he has generated a lot of patterns.

Oops. All these patterns are, of course, the referenceable resources generated a lot of textual references, so these are the things like it’s open one and maybe in turtle. These are the extracted elements of the of the text, so Birds left off of the thing we found and so on, and the pattern stable pattern as well, which are just fancy friends. Just a fancy word for regular expression and everything can be tagged and that’s how we organize our stuff, because that proved to be really fast and simple.

And now that we’ve learned something: let’s apply this to a PDF file. So for that, we’ve written a small JavaScript library which is really thin. Just that’s what what I just showed you and I will choose a fire, choose two files and we’ll try to analyze them and what had happened? What happens now? Is he uploads those files to our store? He extracts the text from the PDF files and now he tries to apply patterns or patterns from a surgeon with a certain tag and that I just created to to those text, files and yeah.

There’s a there’s a kind of funny buck where it just jumps around. But let’s read it in the again the drip of you and jump into the mind of you. Where does the same thing, but he has already found a lot of patterns right and, and he has found some links, so let’s open one of those. We see this as a link. Again, these things are referenceable and the entities from which they link, into which tailing, in this case, from a publication and to a data set, are referenceable as well.

It’s just a little thing that they are not turned into links in this interface, but still it should be d referenceable, okay, and we see that it he has. He has found a reference from this publication, that’s referenced by this entity to something that’s called anomie elbows. Don’t worry no, but that’s the DOI of the theme, so we’ve gone the full way and yeah. So that’s that’s it. If you have any questions, feel free to ask them get in touch with us.

If you have any data that you want to run through this yeah and try it out, it’s well, it’s kind of not that stable but or rapid in rapid development, depending on how you look at it. Thank you very much.


Online Marketing

Bob Garfield – ‘The future isn’t in hyper-local news’

Bob is a commentator and analyst for advertising age, a co-host of the Peabody award-winning mpr program on the media and the author of the chaos scenario. Bob will be our keynote speaker at the local online advertising conference in New York March 21st and 22nd of 2012 welcome Bob. Thank you very much p a lot of people predicting even yourself, I guess, predicting the death of traditional media operations, but history has shown that throughout time, new media never completely displaces old media.

That’s true, I mean. Has the landscape change so radically is to make history obsolete know it? History is an obsolete. There has been nothing in history in media equivalent to the digital revolution. This is not the difference from from Radio to television. This is not the difference between pre, VCR and VCR, and you know it’s not even it’s not even that difference strictly speaking between pre-computer and post computer.

What it has to do with is a wandering media right now, along the way, the plundering a whole lot of other document enterprises. The digital revolution is akin to the discovery fire it’s akin to antibiotics, to manned flight, to the automobile, changing human activity in a profound way and everything else that happened before in the history of media. Since the printing press has been small potatoes, history does offer some.

It offers some clues. The Industrial Revolution you know being right at the top of the list. When we went from an artisan, bespoke economy and single cobbler, making pair of shoes to factory made shoes, it changed the lives of pretty much everybody in the world and steam engine and the train. Transportation simultaneously did approximately the same thing and radically reordered human experience. And that’s: what’s that’s: what’s going on now, hyperlocal experiments haven’t been able to sustain themselves yet mmm.

How? How can a local media company find a financially sustainable model in such fragmentation? Well, my answer: is they probably can’t the the midst of fragmentation? The combination of incredible fragmentation, which limits your audience size and the the inexorable downward trajectory of advertising prices means that nobody? Nobody is going to have the critical mass to professionally and profitably deliver news.

In my opinion, the the future isn’t in hyperlocal per se as a standalone operation. In my opinion, weirdly, the intern, sir, is going to be in consolidation. I believe that in every market the winner will be the entity, whether it’s a local TV station in the public radio station, a local newspaper, a series of hyperlocal sites, banded together or some parties, as yet unthought-of to form strategic relationships for content and for revenue.

With other players in that market and then the the combination of organizations that get there first and create revenue streams, while simultaneously becoming the central hub for news and information and culture in their communities, they win, they scoop the pot and everybody else just disappears. So there weirdly, paradoxically this this vast vast vast fragmentation is going to lead into consolidation and I believe in market after market aftermarket winner takes all you.


Online Marketing

Web Accessibility: A Catalyst to Greatness #a11yMTL

So what we’re here to talk about today is A catalyst to greatness and accessibility. So, first of all, I want to start out with a little visual description. For those of you who can’t see I’m female and I’m wearing a shirt with Braille across the front across the chest And the translation of the Braille is If you can read this you’re too close [ laughter, ], Yeah yeah, So just a little visual description there.

So what we’re going to talk about is how you Can be great in usability user experience how you can be great in mobile design, how You can be great in innovation on the web. There’s a key to this and That key is accessibility, So we’re going to talk about how accessibility, Contributes to greatness in all these areas. Accessibility is really about user experience. It’s about adaptability, it’s about flexibility and we’re going to talk about That but, first of all a story Back in 1999, which seemed ages ago.

Now some of us started a small company And it was a usability company. We designed the website with A focus on accessibility, so it had to be highly accessible. We didn’t even think about accessing This website on a phone back, then We didn’t think about it, But then the founder of the company. She got one Of those new fangled phones that you can look at a web page on a screen, A little screen, okay, This is a big deal back then.

So, what’s the first website, she Went to look at on her new phone, Our company’s website It worked beautifully. This was before anyone knew Anything about website design, but just the fact that we had Designed it to be highly accessible and we’d, followed some basic accessibility, Principles meant that it was adaptable and flexible enough to be used on This rudimentary mobile browser, and that’s just because of accessibility, So a lot of what we do even today, For accessibility directly relates to what we need to do for mobile design, So a little bit more history.

How many of you have heard Of progressive enhancement, Okay, most Half the people, So progressive enhancement, Was coined around 2003? I — the name that pops into my head is Jeremy Keith’cause, he talked a lot about it, but I actually did some research And found it was coined before then, But progressive enhancement came around as People were designing advanced web applications to take advantage of the latest technologies.

And then were finding it wasn’t working well on older devices, older browsers, Older software et cetera, So the idea behind progressive enhancement was To start at the very basic make sure that say, your web application can be used. In older environments and then to progressively add enhancements, If the web application or the website is being used, In more advanced technology, So that was progressive enhancement of 2003.

Then in 2010 the idea of responsive Web design was coined, I think, by Ethan Marcotte in A List Apart, article And responsive web design is about Designing your website or web application so that it can respond to The device you’re using you’re looking at and on you’re using it with So whether I’m looking at a big desktop Or a small little phone that it will work and that’s responsive web design. I assume you’ve heard a lot about that Now, there’s something that Predates this by quite a bit In 1999, a similar idea came Out way before that, Anyone have any idea what that might be.

That’s the idea of transforming gracefully. So, in 1999 the web content accessibility, Guidelines talked about transforming gracefully, and that was again the idea. That we have the content that can transform no matter how it’s used So, whether it’s on a small device, whether it’s In a big device, whether it’s older technology, whether it’s newer technology, whether it’s Through a screen reader by a user who is blind, whether it’s in large magnification, however It is designed it will transform gracefully.

So the point in here is that These ideas aren’t new, We’ve been talking about those In accessibility for a long time, And when you start to think about Accessibility early, it can lead to a lot of these developments for what we’re talking. About now, for example, mobile web design, So if you want to be great, if you want To be great, get accessibility right And you may be hesitant and you Should be and I’ll tell you why It’s because you really need a Crack [ phonetic, ] accessibility.

You know that word. It means really understand. It really be one with it really understand the concept of accessibility, So that’s kind of the key to the key And I’m going to tell you a little bit about how that’s different than you May think of accessibility right now, So what I want to talk about is understanding. Accessibility differently totally differently than many people address accessibility.

A lot of people came to accessibility because They were forced to meet some standards or some regulations, so the web content Accessibility guidelines came out in 1999, although a lot of people didn’t directly Paid attention to them in the US, Then, when Section 508 came along all Of a sudden, this was a checklist. You had to pass the accessibility and there’s Been other regulations around the world where people then started approaching Accessibility as this thing, I need to do afterwards at the end of my Project I need to pass this checklist, But that’s not the right way to think About accessibility, so I’d like for you to change your mindset about accessibility, And we’ll talk a little bit about that As mentioned, I do work for the W3C the World Wide Web Consortium, and that is the organization that defines the Standards for the web, so html CSS et cetera.

We have a web accessibility initiative. That develops specific standards and guidelines for accessibility. So, given this is my employment, you Would probably assume I would say, step 1, the most important thing for accessibility, Is to know those standards and guidelines, But I don’t, even though that’s my Employment, that’s not the number one thing: If you just start out with the standards. And guidelines, it’s overwhelming You’ll be like a deer in the highlights right.

It’s too much, That’s not the place to start. Instead, the place to start is understanding. The basics of how people actually use the web: It’s not about standards. It’s about people, specifically people with Different disabilities and how they use web – That’s the number 1 thing and the Most important and the basic thing So, for example, I want to tell You about some people that some friends of mine that use the web One is Glenda.

I first got to know: Glenda Just from mailing list archive She was on a couple of similar mailing — Same mailing list that I was on, And I was just really impressed by how Articulate she was how clear how level headed when the conversation got kind. Of uncomfortable, sometimes she was always just clear and Not getting into the fray Really impressed with Glenda! Well, it wasn’t until years later that I Found out that Glenda has cerebral palsy, [ mumbling ], So that’s how she talks so Actually, interacting with Glenda face to face is much more difficult, but because Of accessible technology, she can contribute to this — the work just like anyone.

She has a blog. She is called the left thumb. Blogger, Because she also has limited motor control and she just types with one thumb. She slides her hand along the keyboard And there’s a article on there on YouTube. I think if you want to check that out, So Glenda is one of the people that we Need to focus on when we’re thinking about — thinking differently about accessibility, Another person who also has motor Impairment is a friend of mine named Carl and Carl lost use of his arms From polio from post polio, So he doesn’t use his arms at all.

He uses a mouth stick to type, So it’s just a dowel with a wooden tip at the End and his typing looks something like this [ Pause ]. He can type pretty fast. I don’t know what his words per minute are. He is also –. He can also Talk while he types as well, So we need to make sure that our Applications work for people like Carl. This is John Slatin John started losing his sight when he was middle Aged and eventually went all the way blind John was a professor English.

Professor at University of Texas, He embraced technology as a way for — in the Web –, as a way for anyone to communicate And John developed, leukemia And John needed to go to do research on Treatment options and what he found was that many of the websites That provided information on treatment for leukemia were inaccessible. He couldn’t get that information, So John is trying to make life decisions.

Life or death decisions literally, but the information is not accessible to Him and we need to make sure that all of our web applications website Is accessible to people like John He –, So people who are blind use screen readers That read aloud the information on the screen. I hope most of you have heard screen readers and Readed someone interact with screen readers. I won’t take the time to do that now.

But if you haven’t that’s top priority, Do it this really will help Change your thinking, Here’s another friend of mine, His name is John as well And John was born blind and he Started going deaf around age 8 All right, So he can’t use a screen reader. How does he interact with a computer Braille exactly? He has a dynamic Braille Display they are so cool, He has this rollup pins and it pops up and provides the Braille — The output from the computer, So that’s actually how John and I communicate.

We just have his notepad up and I’ll type on a Regular keyboard and he can read it in Braille and then he’ll type back in notepad And I can read it in notepad Because of accessible technology. John was Able to graduate top second in his class in Mathematics go on to get a master’s degree. In computer science and electrical engineering, So we need to make sure that all of our Work is accessible to people like John Now, one of the important things Is to be careful not to focus just on screen reader access and People who are blind So, for example, –, oh, you know I started out.

Talking about people with motor impairments, that was on purpose people who Have difficulty using their arms or such to interact with a computer? When we talk about visual disabilities, we Also need to be aware that a small percentage of the people with visual Disabilities are blind, A large percent are –, have low vision. So, for example, I have optic neuritis, It’s remitting, — remission — and comes and goes And a lot of times when I look at the screen, it looks something like this Which is the normal sized text? It is really too blurry to read, but The larger sized text is readable, So I usually use 120 150 percent Zoom in a browser and set up that way, But some people need more Significant screen magnification, So here’s an example of someone with Very significant screen magnification Okay, So they can only see Part of the screen at a time It has some overlap with, say, mobile design, where you can only see part Of the screen at the time, So again it’s really important when we’re Talking about even visual disabilities to realize a huge variation in user needs.

This is Tim Creagan. He is at the US. Access Board – and he is hard of hearing. This is another thing, that’s very important If you have audio on the web, whether It’s a article or a podcast or whatever, and you don’t have transcript or captions. That information is totally Inaccessible to a person who is deaf, A person who is deaf cannot get any Of that information in an audio, So if you’re not providing a text, Description, you are discriminating against those people who can’t hear Another very important thing to consider.

Another thing is this: — I’ve worked With a high school student named Sarah, who is going into a college program, Looking at her, you would not Assume she has a disability, but she actually has a fairly Significant visual processing disability. So when she reads text, she can’t understand it. So she uses a screen reader’cause when She hears text or she you know hears, she can process information, just fine.

She can see just fine, but she just can’t Process the information that she sees as well, So she uses a screen reader People with different cognitive disabilities. Are another group that we need to consider So if we think about all this, we think about People with auditory cognitive, neurological, physical speech, visual disabilities, you See how we can really open up our thinking. So if we think not about the checklist, not About the guidelines and the requirements, but who are we really designing for Who are the people? What are the issues? What are we really designing for? So this is to approach web design differently.

It’s a different approach to web design. Now, if you have a smartphone in your Pocket most of the technology developed for that smartphone came from Innovations for people with disabilities, So even the very basis of a phone — of the Phone comes from developments to accommodate and to help people with different disabilities. Elle Waters will do a presentation later. Where she’s going to talk some more about this, so I won’t go into the many many examples.

Of how something that was developed for a person, sometimes or People with disabilities is now in the mainstream technology. That you have in your pocket, But the idea is that thinking Differently leads to innovation When you’re thinking about all different people, On different situations, it really lead you to think differently and Innovate in new and unique ways, So how do you do that? How do you think differently? How do you consider all these people Any ideas You meet with them? Exactly you meet with them.

You can do very informal meetings. You can do more formal processes So, for example, a user-centered Design or user experience or usability has very specific Processes and techniques that you can use to understand how people use the web ISO has a definition of usability. Anyone know that You don’t have to repeat It but yeah yeah someone Yeah yeah, okay, So it’s the extent to which a Product can be used by specified users to achieve specified goals.

Effectively, efficiently and with satisfaction in a Specialized context of use, So that’s the definition of usability in ISO Now this is achieved through A user-centered design process How many people have heard of — know Basics of user-centered design process About half About half, So here’s the summary UCD is the user interface design. Process that focuses on usability goals, user characteristics, environment, Task and workflow It follows a series of well-defined methods and Techniques for analysis, design and evaluation.

It’s an iterative process with Steps built in from the first stage of projects through implementation, So the idea is that you can Follow user-centered design to understand accessibility, Understand how people use the web Now when we look at that definition, we looked at Earlier the ISO definition of usability. Look if we pick out a few words, so It says “ Use by specific users,.” And all you have to do – is Make sure your definition of those specific users includes People with disabilities, people with a wide range of abilities And then it says, “ In a specified Context of use.

”, So that’s making sure that the context of Use is broad that it includes, for example, assistive technologies like screen readers, And screen magnification et cetera. So if you know any usability specialists Or user-experienced professionals, this should be right up their alley. Now some people are onboard and some People have yet to see the light If you’re a developer and you Want to go beyond the checklists, follow usability principles will help — and Methods and techniques will help you with that.

So if you want to learn more About this, the W3C WAI has some information called Involving users in web projects for better easier accessibility – And this is mostly geared towards developers, Designers developers not particularly Usability specialist, but just you know you said, observe people This talks about finding people and Observing them talking to them, So that’s some basic information. Now, if you know someone who is usability, Specialist or really wants to get involved with this I’ve written a book called “.

Just Ask Integrating Accessibility Throughout Design,.” And the whole thing is online free, So it’s available from uiaccess.Com/justask. So it’s uiaccess.Com/justask And that’s all about –. It’s primarily Geared towards usability professionals, but the beginning is the basics. That you can implement, even if you’re not doing full User-Centered design process, If you’re interested in getting a print copy for those who are here, we Have a discount in November! So from that website you Just enter a11ymtl.

Html and you can get a discounted Version if you want to print a copy, But the whole thing is online for free as it is So that’s another resource We’re going to look at a few Other resources that we have from the W3C WAI on designing for inclusion. We have an extensive document on how People with disabilities use the web. It has several different Sections one it talks about just like the user stories to Help bring those to life.

There is a section on the Technology that people use There’s a section on what are the accessibility, Requirements of websites and web tools, So I encourage you to take a look at How people with disabilities use the web? We have another resource called Web accessibility and older people on meeting the needs of aging web users, So we had a three-year project that Was a European Commission-funded project to look at designing for older users And what we found at the end of that Three-Year project was that indeed, it’s a one-on-one overlap with Designing for accessibility, So we already know how to Design for accessibility And what we found is it’s the same issues.

If you’re designing for older users, because older users have a range of issues, Let’s do a little exercise to that and Give you a chance to stretch your feet So I’d like everyone to stand up. [ Pause, ], Okay. So what I’d like is for you to pick One of the gray figures on the screen, So on the screen we have a representation. Of the percentage of people with disabilities, This is in the age group, 18-24 years, okay And it’s 9.

5 percent. So pick one of the gray figures We’re going to go through aging And if your figure turns Color have a seat okay, So this is 25 to 34 years 10. Percent and we lost 2 3 people there. This is 34 to 44, 14.4 percent, 45 to 54, 21.2 percent 55 to 64 at 34 percent, So more people dropping 65 to 74, it’s 42.3 percent 75 and over 64 percent Now look around the room. We have less than 64 percent, We have four people standing, So those of you who are standing Unfortunately, this isn’t the true predictor of real life, so I can’t guarantee That you’re going to make it without Thanks, you can have a seat, But the point is, most of us will live to 75 and Most of us will acquire significant disability.

Minor disability at first may be from Declining eyesight from declining dexterity from declining hearing all These — cognitive disabilities – All these are significant. This can start out small. It can get really annoying And but can be much more of an impact. On how people use your web products Designing for people, older users is becoming More and more important and more and more of a focus of both government and Industry and on profits and everyone, This is focused on meeting the User — needs of older users And, if –, in order to do that, you can look At what we already know about accessibility, So that’s the –.

We have resource on that. We have another resource on web Content, accessibility and mobile web, So I’ve mentioned some just Briefly, the overlaps, but we have a specific document on that overlap. Now this talks about how the standards And best practices overlap between the two, So I just said that word standards, Even though at the beginning I said that The standards are not the first place and not the most — the first place to go.

They do play an important role, So I still say that the first Step is to understand the basics, But maybe around step 3 is to start Looking at the standards and guidelines and then probably again, maybe at Step 7 or somewhere around there, So they do have an important role. One other reason is there’s no way you Can fully incorporate enough people and enough variety in your design process. So, even if you have a huge budget and a Huge amount of time, there’s so much variety in people in how we use the web and how People with disabilities use the web that you won’t be able to cover it all, And the standards and guidelines do that.

For you, they consider this wide-range, So I’m not going to go into detail on these. I’m just going to make sure you know. What’s There and then hopefully you can –. If there’s any questions, we can Follow up with that afterwards, So again, the W3C defines its standards. For the web and the ones we have for accessibility are an integrated set, So you may have heard of WCAG or the Web. Content Accessibility, Guidelines that applies to websites that applies to web applications.

That applies to mobile applications. Everything Then another aspect of the Guidelines is that users use browsers and other technologies to access the web, And we have guidelines for those called The User Agent Accessibility Guidelines – Another one – is the Authoring Tool: Accessibility, Guidelines and that talks about what the tools that we use to design web content Need to do to support accessibility.

These are built on the technical Specifications from the W3C, We also have some specifically for Accessibility, such as the WAI-ARIA for Accessible, Rich Internet Applications and Indie UI, which is Independent User Interface, and that talks about how to Communicate a user action to an application, no matter how the user did It so whether they scrolled with a gesture whether they used a mouse, whether They used voice input, however, Okay, so just a brief introduction.

Also A note that WCAG 2 is now an ISO standard. So if you’re working on WCAG 2, now you can Say you’re also working on an ISO standard. It’s exactly the same. The same text, It’s just adopted now as ISO/IEC 4500. Again, if you have any questions I’ll Be around at the break and afterwards, So I just want to reiterate that Accessibility is about designing your website so that more people can use it.

Effectively in more situations, It’s much more broad than just Focusing on people with disabilities, that’s the most important aspect that we Focus on but the benefits are far reaching. So if you understand accessibility differently, It’s not about a checklist to do at the end, but it’s a fundamentally different Way of thinking about your web design and your web development It’s not about the checklist, If you understand accessibility differently.

You will approach web design differently And an interesting article from A List, Apart several years ago by John Allsopp, is called The “ Dao of Web Design.”, He says “, Firstly, think about what Your pages do not what they look like Make pages that are adaptable. The journey begins with letting go Of control and becoming flexible.”. So when you change your way of thinking, You’ll understand, accessibility differently, you approach web design differently, and this is A catalyst to greatness greatness in usability and user experience for a wide range of Users, whether it’s on the mobile platform, whether it’s because they are older, it’s All these things that you want to do better at you can learn from understanding Accessibility, So I encourage you to approach Accessibility as a catalyst to greatness – and I thank you for your time – [ Applause & Music, ],


Online Marketing

dotCSS 2014 – Harry Roberts – 10 Principles for effective Front-end Development

Now I know this is um dot CSS. So I should really be talking about some hardcore sass, or maybe some really intricate CSS architecture. But one thing I’ve learned is that it’s really important every now and again to just leave our tool to learn, step back and take a much broader view of what we do.

So that’s why I’m speaking about these principles, they’re personal principles of mine – these are things that I do when I work and every bit of work I do, regardless of the technology, the stack, the tools I use tries to follow these principles. They’re very new. I’ve never shared these before. So if it interested to see what people think, but that’s I kind of that’s kind of thing, I’m going for today, less about tooling more about approaches so yeah, my name is Harry.

I’m a consultant web developer. That means that I spend a lot of time with a lot of different clients. I travel around a lot and learn about everybody’s problems. I’m like a developer therapist in doing this. I’ve realized that it doesn’t matter what stacks our company uses. It doesn’t matter what which preprocessor they’re used. They always have similar problems that can’t always be solved by specifics, and it’s really important to know specifics.

It’s good to know, flexbox why it’s valuable to know about SAS, it’s very, very valuable, to know different technologies, but specifics aren’t always that transferrable. One thing I’ve learned in the last few years, especially working for myself as a consultant, is that code is actually only a tiny, tiny part of what we do think about what you do. In your your day to day life, you might deal with clients, you might spend a lot of time discussing compromises with designers.

You might spend a lot of time explaining why things can’t be done to project managers. The actual code you write is a tiny, tiny part of your drug, so I think it’s important to realize that you know focuses, should shift and mind shifted a few years ago and much much for the better. I found that on a more effective developer, by ignoring the specifics and trying to focus on principle LED approach to development.

The interest is now anyone’s thoughts on this. So if you want to tweet during this talk, I’d be really grateful, so I’ve just 10 CSS will do. I know it says you know, principles for front-end development, but I only really write CSS. So all of these principles I applied directly to CSS start off with an easy one. The simplest option is usually the best. I got Hugo who’s speaking a little later to do some translations.

For me, if they’re wrong, it’s his fault, the simplest doctrine is usually the best. This seems quite obvious right. Let’s start with an obvious one. The simple option is probably the cheapest to implement the quickest and cheapest option to implement will be the simplest one. This is good for business and we’ll talk about business in a second that’s another one of my principles, but quick and cheap to implement is really valuable and it’s also easy for other developers to inherit.

When you pick up a system from someone, it’s really complex and over-engineer, that’s a horrible thing to try and work with, so always err on the side of simplicity. If you’ve got two or more options, two or more solutions to a problem, all let’s try and pick the simplest, it’s less likely to break it’s probably more robust. It’s just locks easier to work with also lessens the amount of cognitive overhead when working with a system.

It’s a really horrible thing to have to try and remember every moving part in a system which leads men to the next bit, always try and reduce the amount of moving parts in a system as a developer. It’s very easy just to do as you’re told, or it’s very easy to build the features that have been requested. I think it’s really valuable to say no to a lot of things. The best code is no occurred at all, so it’s a really good exercise for developers to get rid of unnecessary stuff.

Anything that could be removed from a project try and get rid that could be features in. I could be telling a client that you know we don’t really need this feature, let’s get rid of it or it could be actual lines of CSS. It could be reducing a 20 line mixing down into a single helper class right. Removing the amount of moving parts is a really valuable exercise. Every moving part in a system is a potential thing to go wrong.

It’s a potential point of failure. Everything you add to a system introduces the risk of something going wrong. It’s easier to men attained a system with fewer moving parts. I think it’s a really valuable exercise to get rid. The third principle understand the business now. In this context, the business could mean a few things. If you work for an agency, the business would be your managers and the client the person funding the project.

If you work in honks, if you work for a starter for a product like Kayla, get the financial times, the business is where you work every day, you’re surrounded by the business understand the business makes you a very valuable developer. It’s important to understand that every bit of work you do has a cost and a value associated with it. Try and understand the financials. I don’t mean you know, learning what your colleagues salary is, but perhaps knowing what the company charges you out on for a day right.

It makes you much more effective understanding. The cost and value of your work means that you can make very very informed decisions about what you do for the good of the company. Don’t waste other people’s money. I like to also make you a much more valuable developer. Imagine a company looks like this and you’re just a developer, you’re, not better than anyone else, you’re, no cleverer, no more important anyone else and unfortunately you’re, probably quite replaceable.

If you look around you right now, there are hundreds of people in this room who all do similar jobs so being a regular developer. Who just does their bit of the the task, isn’t necessarily a very valuable developer to have. It sounds really cruel, but I do believe it’s true um, so, instead of having this position within a business, try and have this position trying to connect yourself with everyone else’s problems, understand the cost and the value of your work.

It makes you much more valuable principle. Number four care, laughs and care appropriately. Another thing I learned in especially my time working in big companies. No one cares about your kurd more than you do. Your client doesn’t care if you’ve used SAS or less the business doesn’t really care. If you used an inline style or not, don’t stress too much about your own work and pick the right battles for everybody else, there are a lot more people working on that team than just you.

When you have. Whenever you have discussions, you have to balance everybody else’s needs and wants remain objective. When you do this care less about your own work and care about the good of the team, the stakeholders there’s a much bigger picture out there. The bigger picture looks something like this: we have the user, the person who needs the product you’re building the team. That would be you and your colleagues, designers developers, your solutions, architects, UX guys and then there’s the business.

The person funding this project. Now I’ve worked with a lot of developers who think in this degree they think about the team. They make decisions for the team. They want to use a preprocessor, because this is one we want to use good developers a bit like jugglers. Good developers will think here. The overlap, but great developers think about everybody else’s overlap. Great developers are very unselfish people, and I’ve found this in working with different companies that the most productive teams are the people who make sacrifices themselves for the good of everybody else, so care less about your own work and care more appropriately about everybody else.

The fifth of the ten principles – pragmatism, Trump’s perfection – it’s better to have good enough working today than it is to wait for perper for perfection tomorrow, get things alive. You’ve always got time to make things better. Perfect is a real real sort of misfire on the web. Anyway, think about all the different browsers devices network connections, we will never achieve perfect, so it’s not there’s no point even trying.

I worked with a client who delayed a release by nearly two weeks, because the color of the nav highlight was wrong. That’s insane! That’s! That is a you know, that is a very soft edge case thing to happen, but that’s expensive missing out on potentially two weeks of new signups, because the nav was slightly the wrong. Color is expensive users, don’t care if they’re now slightly the wrong color, because they never saw the PS DS, pragmatism, Trump’s perfection, something hacky that works today is better than something perfect that might work next week.

Never hold yourself back in the pursuit of perfection because it just slows teams down thinker, product level right. Some of these principles seem fairly interconnected. So this is a little like think about the business, but thinking up product levels, a really valuable thing for a developer. To do there’s a very sort of old but harmful view that as CSS developers, it’s our job to build PS, DS and that’s really harmful, because that’s not true at all.

We’ve got to think about the performance of occurred base. We need to think about the maintainability. The velocity of the team we’ve got a lot more to worry about than we realize so try not to put yourself in a bubble and figure out the entire product you’re in a very, very valuable position if you’ve started understanding the business and you’re a developer. So you understand the technology, you can make great decisions for that product.

True story. I once worked a company where a simple UI decision that I made save that company hundreds of thousands of pounds – it’s too long, a story to get into now, but you want to hear it over a beer I’ll. Let you buy me a beer, but yet we’ve got a profound ability to, in fact affect not in fact affect entire product. Use that wisely do what’s right for everyone. Seven do not design systems around edge cases.

I encounter this one quite a lot. Basically, don’t let the minority lead, the majority do not bet your entire product around statistical outliers or another example. For you, I worked with a company that was making a mobile website a mobile web app. They needed a spinner right, a little loading spinner. Now we had to accommodate a really old flavor of Android and a really old flavor of blackberry.

Now the Android didn’t support CSS animations and the BlackBerry didn’t support CSS and CSS animations or animated gifs, so the team spent nearly a month building a spinner that worked in every single browser. It was a combination of sprites, some horrible JavaScript and its really clunky and a really bad rendering performance, and this spinner went out to a hundred percent of our users. So, even though I only needed to be given to a small fraction of a percentage, this spinner went out to everyone.

Designing systems around edge cases is a really expensive thing to it can hold the quality of the product back solve every edge case as an edge case. Don’t let it leak in and influence the entire build of a system number eight another. Quite specific one. Don’t make decisions based on anecdotal evidence, another true story: I worked with a company who they really should have been using a preprocessor.

They had a big, a big UI and it would have really benefited from using SAS, and I got that I asked them. How can we don’t use SAS and the response was? Oh someone told me that variables don’t work very well in SAS. Well, of course, they do. Tens of thousands of people use sat every day, of course, variables working SAS. Did you not think to try this out yourself and they hadn’t they hadn’t fought to run their own tests.

They trusted a story. They trusted some box. I never trust stories, always trusted data. It’s very expensive to ignore the numbers. Another example you’re going out to eat a restaurant and you find a hundred five-star reviews for this place, and then you see one two-star review. You will obviously ignore that two-star review. The two-star review is a statistical outlier, get rid of anomalies, always trust numbers try and avoid trusting anecdotes and stories.

The ninth principle don’t build it until you’ve been asked for it. It’s really tempting, especially as a CSS developer, I’m speaking personally here to over-deliver. It’s really cool to say: I’ve made this mix in which does this, but if you pass in this parameter it does this. The problem is no one’s asked for that. So I’ve spent the business as money. I’ve made something that I haven’t paid for. I’ve spent an extra half day, sugarcoating some some sass, no one’s asked for that, but someone’s paid for it right.

So it’s a rephrasing of yeah. You ain’t going to need it. The the programming software engineering principle and it’s really valuable to try and follow it, can be harmful because you have the cost of the initial work upfront. If someone hasn’t asked for a feature, don’t build it because you’re spending someone else’s money, but also it can influence the rest of an entire project. If you build something now that has a certain dependency on a third-party library, your product is now hooked into that dependency.

So it might have a knock-on effect with future features. You want to add um and yet maintaining things that no one even wanted. Imagine having to tell your manager that I had to bug fix something, or what did you have to bug fix? You don’t really know about it, cuz, no one asked for it, but I built it anyway, and I’ve spent two days fixing it it’s a very unwise, irresponsible approach to building websites don’t build anything until you’ve been asked for it solve every single problem.

Only when you encounter it, you might be well aware that you need to support international ization in six months time. Do it in six months time, don’t do any work ahead of time expect and accommodate change. If this is the one thing that any sort of large-scale site developer should always try and do expect and accommodate change, I’ve been doing this long enough to know that clients will throw you a curve ball.

The business will make unusual decisions. Users will request odd features. Everything is subject to change, so expect it and accommodate it. Every bit of code you write, make sure you can undo it next. You can reverse decisions, keep yourself free to change direction, never tie yourself down, never put yourself into a corner. You can’t out of everything. Is subject to change so at least accommodate that, and you can use this as a really good way to just lessen the stress.

I get a lot of workshop attendees asking me: oh, we really struggle to find the right name for something. You know we spend a lot of time thing about the right name for something my advice is always pick something now right worry about something that fixes a problem right now, because they’ll probably change anyway, don’t try and predict the future always make make sure that you Can change direction, undo things and modify decisions that were made months ago because you’ll thank yourself in the long run? So just a recap, my ten principles, my 10 personal principles for effective front-end development, pick the simplest option.

It’s the quickest and the cheapest to implement it’s the easiest one to maintain its own, that’s least likely to go wrong. No one appreciates over-engineered kurd a website is not the place to show off, reduce the amount of moving parts, remove the amount of moving part from a system so that it’s more robust, more things going on in a system means more things that could potentially go wrong. It’s a really good exercise to develop as a developer, to build less.

The best code is no code at all. It’s the fastest. It’s the most robust. It’s the easiest to debug. Understand the business be aware of the fact that everything you do has a cost and a value associated with it be responsible with other people’s money. It makes you a better developer in terms of actually writing CSS, but it also makes you more employable more valuable. Member of the team, if it can be less selfish and spend your employees money wisely, you will get more effective products off the back of it and they will appreciate that work, care less and care appropriately.

When no one cares about your CSS more than you do. Stop being enclosed in a bubble and think about what you can do for everybody, pragmatism, Trump’s perfection, don’t be the guy who holds back, or at least for nearly two weeks, because the nav is slightly wrong. It’s expensive! It’s unwise and it doesn’t help anyone hacking something together. That works today is better than having something perfect in three weeks time: thinker product-level, the knowledge you have of the product you work on allows you to make very profound and far-reaching long-lasting decisions.

Do not design systems around edge cases? Do not let the minority influence the majority of your product, always design solutions to edge cases as edge cases themselves. There’s no point weighing down the entire product to cater to a minority. Good example would be if five percent of your revenue comes from ie7 users do not spend twenty five percent of your time accommodating those users it doesn’t make any sense.

I don’t make decisions based on anecdotal evidence. Anecdotes are, by definition, edge cases. Their stories always trust data, don’t build it until you’ve been asked for it. It’s tempting to build cool things before anyone needs it, but that adds blur to the codebase. It could always go wrong. You might have to maintain that for the next two years solve every problem as and when you encounter it and finally expect under comedy change.

You know full well that clients make weird decisions. They will change their mind. The business can change, focus and direction every bit of CSS. You write every bit of code. You write should facilitate that. Never tie yourself now, never put yourself into a corner, and that is me saying. Thank you very much for listening.