Hello. Welcome to our session. And today we are going to talk about prototypes. So it's in front end track. And the presentation has several parts. So one part will be about front end, and another part will be a little bit about back end. Actually, how to communicate to your back end developers about ideas we are going to talk about. But let me start with the introduction. My name is Yuri Gerasimov. I'm a back end developer. Currently I'm working as architect, team leader. And this is my colleague. Hey, everyone. My name is Morten Kristofsen. I'm the user experience lead at FFW. And just a quick introduction to FFW for those of you who haven't heard of us before. We're a global digital agency. We have offices across the globe in 11 countries from US to Vietnam. And we're a full service digital agency. We have about 420 full time employees and about 20 offices worldwide. So as Yuri just said, today we'll be talking about these four things. So there's kind of two parts to this presentation. The first part we'll be talking about is designing in browser and prototyping. So I'll kind of be walking you through designing in browser. What is it? And why would you do it? And I'll be talking about the prototyping setup that we're using at FFW for our designers. Then Yuri's going to take over from that and talk about how we work with implementing prototypes in Drupal 7 and also a bit about Drupal 8, what to expect next. So between each of these four sections we'll have some time for questions. So we don't have to kind of add everything on to the end because it's a lot of ground we'll be covering today. So designing in browser, what is it? And why should we even do it? So I'm going to start off with the what part. So designing in browser essentially means designing websites directly in the browser using HTML, CSS, JavaScript. Instead of using apps such as Photoshop or Fireworks or Sketch. So let me expand a little bit on that. So for a long time, designing websites has been about creating static mockups. So mockups created in Photoshop, in Fireworks, in Sketch in this instance. But designing in browser really is about replacing these static mockups with designing directly in code. So designing directly in the browser with HTML, CSS, JavaScript. So in the industry as a whole, in the web industry, there's kind of been a general trend among designers to begin kind of learning some of a bit of coding and kind of moving in this direction. Probably a lot of you in here are familiar with this trend. Maybe a lot of you are already working in this way. And at FFW, it's kind of a trend or an approach we've been moving towards for the past couple of years, really. So the way we work with it is that we have our designers working closely with front-end developers actually writing up these prototypes, hand coding them in the framework that I'm going to be talking about a bit later. So with actual code written by hand that our designers can kind of hand off to our front-end developers and hand off to implementation. So obviously, this is a new technique. And it has kind of new requirements for designers, new requirements for the workflows. But it also has kind of a ton of benefits beginning to kind of bridge the design and code. So that really brings me to the why. So why would we want to do this? We have this perfectly fine process that we've been working with for a long time. Why would we want to begin mixing up front-end development and design? So I have four benefits that I want to walk you through today. So why would we want to design in browser? So those benefits are precision, consistency, interaction, and transparency. So we'll get started with precision. So when we design a responsive website for a long time, it's been about designing these nice pixel-perfect mock-ups in probably around three sizes, maybe more, maybe less. But yeah, designing like a mobile, tablet, desktop size is a pretty traditional way to do it. And it works nice, but it also has a lot of limitations, because the challenge is that we don't really know what's going to go on in between these different break points or really these kind of images, screenshots of the overall experience. So the challenge is that all of these things that developers have to kind of take into account when they have to begin to implement designs. So things such as is this actually a responsive design, or is it an adaptive design? Are we using relative units, or is it a static unit? What kind of break points are we working with?  And also like the flow of the content. So I've not been guilty of this myself, but I don't know how many times I've seen designers design these perfect mock-ups with these like fixed height elements, and then you throw like an extra line of text in there, and it just breaks the full layout, right? And the designers get really mad at the developers. And all of these factors are something that we need to take into account, and something that designers like to have control of, but they usually tend to miss it with these static mock-ups. So what prototyping or designing in browser does is it kind of gives us the control and the precision over all of these details. And it also really forces designers to take these details into account about the responsive behavior of the things we're designing. So that's the first benefit of designing in browser. Let's continue with consistency. So as a designer on like a large-scale web project with the traditional approach to designing mock-ups, it can be kind of a challenge to keep track of all the components that you're designing and to maintain kind of consistency across our site. Let's just take a really simple example with a button. So it's pretty easy to design a button. You choose a nice typography. You put it in a box. And because obviously we've worked with web before, we know that it's a good idea to just choose like a padding. And it's going to work nicely even when we change the text. The problem is that in Photoshop or Sketch, it rarely kind of works nicely, even if you use kind of some of the tools available in those programs. It rarely works nicely once you start kind of iterating and the project grows and the iterations kind of pile up and the risk at least of introducing kind of inconsistencies in your design grows. So maybe you had to change the text on the button and suddenly these paddings are no longer what they're meant to. And so we start introducing these inconsistencies. And it takes a lot of time to clean that up. I mean, the problem, I mean, inconsistencies, you can get rid of those, but it takes a lot of time as a designer to go through all those files and clean all of that up. So one problem that also kind of arises then is that what if at the end of the project we decide that we wanna kind of add a border radius to the button, we wanna add rounded corners. Now we have to go through all of the files that we've used and we have to update it. And even if we're using something like smart objects or symbols in Sketch, we still have to go through all those files and export them again. So the good thing about designing in browser, about designing with code is that we were able to really easily introduce consistency. I mean, we just have all of our variables or all of our code in like one class for the button. And if we wanna add a border radius, well, we just add it and it automatically gets updated everywhere in the prototype. So it's really a way to kind of allow us to split all of these components that we're designing into these reusable components. So yeah, that's the second benefit of designing in browser. We get reusable styles, reusable components. So the third benefit is interaction. So designing with, designing digital products, designing a website obviously is about more than designing what it looks like.  That's the purpose of a website, in most cases, interaction. So we find that it's kind of a paradox really to begin to design something as dynamic as a website with something as static as a mockup. Because a mockup essentially is a pretty picture, right? And the problem with pretty pictures is not that they're pretty or that they're pictures, it's that they don't react, pictures don't react to users. So when we design in browser, when we do prototyping, we work with the interaction design of the solution. So we have to take into account how things we act to user input. We can work with that in various ways, but three ways that are really important I wanna walk you through now. So the first is user flows. So designing in browsers, designing in browser allows us to take into account the flows of the website that we're designing. So even though we can talk about it and think about it for a long time, do extensive information architecture, nothing kind of beats being able to actually use that flow that you're building. So is that user journey, is that logical? Can people find their way through that checkout flow that you've designed? With prototypes, we don't have to kind of guess. We can just, you know, test it, try it out. We're actually testing it all the time as we kind of go through the flows. So the second one is one that often in my experience tends to be forgotten when we're designing with static mockups. So things like feedback. So what does an error message look like? A confirmation message, a hover state, an active state, all these things that are really important to making an interface feel responsive feels like it's reacting to your input. And all of these things can be really difficult to get around to when you're just designing with static mockups, because obviously you don't use the static mockups yourself, you look at them. You don't try clicking that button. So you never, you forget that you need to add an error message until the developer tells you you didn't design an error message and we're about to launch tomorrow. Obviously Yuri gives me more of a heads up than that. And the third one I wanna walk through is transitions and animations. So probably a lot of you are aware that transitions and animations have again become kind of increasingly important in recent years. We're seeing a lot of it in web design today. And it is really important because transitions and animations allow us to communicate context to users. So allow us to communicate context about the various states of objects. Just something simple like clicking an image and having it open up in a light box or an overlay. How does that interaction work? Does it just appear right in your face when you click the image? Or do we have like a nice simple transition that just makes the user aware what's going on? Like we're opening up this image for you that you just clicked. So it's simple stuff, but stuff that's really important for the overall use experience and stuff that you can't really design in a mockup. So that's the third benefit interaction. The fourth one is transparency. And it's maybe on kind of a higher level than kind of the technicalities of designing and implementing. So maybe some of you have seen design processes that go something like this. So we have a client that gives you some kind of input that could be like a brief or maybe it's a workshop or it's some kind of research that's already been done. And they feed it to this design black box. So this magical black box where designers sit because designers are these magnificent creatures that sit in their own little universe and they come up with some magic solution and they just give it to the clients after two months of waiting. The problem is that the clients don't always agree with these magical solutions that the designers come up with in their black box. So to kind of solve this challenge, what we do at FFW with prototyping and designing in browser is that we from day one, we invite the clients into this design black box and have them be part of the design process. And one of the ways we do that is by giving them a URL, a link to the prototype from day one basically. So they can see as we're kind of building out the design they can follow along. They can see when it's broken. They can see when it's unbroken again and they can kind of follow along with the process. And it's really a nice way of also anchoring that project with the client. Another really nice thing about that is that the client no longer is kind of forced to looking only at the visual design, which they often do. They often put on the designer hat when they're just looking at mock-ups because that's what they can kind of relate to. Then they look at the details of typography, colors. Oh, is that background image the right one? I think we need to use the other one. So things that really doesn't matter in like a design process. They should be looking at the interaction and the flow of the website. So with prototypes, the client automatically becomes a user so they can go to that link and they automatically start using the website. So they interact with the interface. That also has kind of a nice added benefit which is related to the overall process. So traditionally design has been very siloed kind of in one end of a full process. And theming and QA has been very much siloed in the other end which puts a huge amount of pressure also on QA right before launch. And fixing stuff like small visual box sometimes can be down prioritized because there are more important things at the right before a launch of a project, right? But the good thing about designing in browser is that we kind of split this up. So the theming and design kind of overlaps really and development can actually start while we're still working on designs. And QA becomes much more kind of spread out because we're actually starting QA from day one basically. This should actually be from day one I guess with the client because they're constantly testing the website we're building for them and we're constantly testing it ourselves. So that's transparency. So that's the four benefits of designing in browser that I wanted to kind of present today. So we're gonna take a minute here for any questions. Yes. So the question is do we have any designers that do style tiles or anything like that to design on typography colors? And yes we do. So obviously prototyping and designing in browser is part of a whole design process. So we don't just start a project by designing in browser. We obviously have a process that goes before that by determining information architecture and business goals and all of these things. And as part of kind of starting up the design process we also do style tiles is one thing we tend to do. But we also work with mock-ups still. So I'm not suggesting that today that you delete Photoshop and sketch and all that stuff from your computers. But I'm suggesting that mock-ups should be meant for at the beginning of a project maybe doing two, three mock-ups of like a front page or some kind of idea to set the visual style. So to decide on typography colors and it can always be iterated on later. But it gives a nice sense of kind of security or certainty for the client as well to have seen just kind of some direction before we move into browser. But we only do very few mock-ups or something like style tiles works nicely as well. And then we move into designing directly in the browser. Yes, any tools for? Yep, I will get to that in right a second. There'll be a ton of tools we'll be talking about. Yes. So the question is do our designers know JavaScript, for example, to work with like animations and carousels and transitions? And the question is the answer is some of them do. So we, yeah, we have what we call them hybrid designers because they're kind of designers and they're kind of front-end developers and it also sounds cool. So that's an added benefit. But yeah, we have designers that do both kind of that are traditionally designers but that have worked more and more with kind of front-end technologies and that's usually HTML, CSS, and JavaScript. But we also have designers working with this process that have no knowledge of JavaScript but that just then get teamed up with a front-end developer or with one of these hybrids. So instead of having the one hybrid, you just have a team of two people working really closely together. So obviously it gives new requirements to our designers but also to the front-end developers that have to work in this workflow because they have to put on their designer hats as well and kind of be willing to iterate quickly with a designer. So it can work both ways. You don't need to find these hybrids. You can set up teams of a designer and a front-end developer that are kind of the design team at the beginning of the project. Yeah, so the question was what do you think about apps like Avercode that can generate code? So we've used apps such as that as well. There are a ton of them. We've used one called Webflow and still use that in some instances. And it can work nicely. The problem, and I'll get back to that with these kind of apps and why we try to get over to kind of hand coding with our framework is that at some point we have to hand it off to our front-end developers and we want to be able to reuse as much of the code base as we possibly can with that handoff. And obviously we could set up a whole process around something like Webflow but we don't want to do that. So we'd rather kind of have our own setup that kind of feeds into Drupal development. Yes? Yeah, so the question is does the client sometimes get too involved with this process and kind of want to decide the colors and I want to add rounded border radius to that button. So there are kind of two answers to that question. I would say one is that in my experience actually most often the opposite kind of happens. When we show mock-ups to clients they start talking about colors and typography. But when we show them prototypes they start clicking around and using it and they actually start talking about the things that matter and I'm a designer I still think typography and rounded corners matter but whether a button should have rounded corners or not that's not the important part of designing a website at all that rarely changes anything really in terms of the use experience. So often we find that they actually start using the product instead so that becomes the focus. So the other answer to that question is that instead of having the big reveal at the end we try to really get away from those big reveals because going into the black box and then you come out and show the mock-ups because when you do those big reveals you often get really bad reaction because maybe you've been working in a totally wrong direction and you basically have to start over. So by involving the client from the beginning they do become part of the process but it's also obviously then important to kind of set boundaries with a client that you have to do that basically and they know that as well it's in their best interest. So even though you're working closely with the client you have to still make sure that everyone on the team is aware of their role, right? So it's about educating the client, yes. I mean it's about making the client aware that they're paying obviously for your expertise as a designer or a developer and obviously you take client input into account but you have to just tell the client if they're suddenly putting on the designer's hat and telling you that button should have rounded corners or whatever and you have to kind of be able to set those boundaries with the client. So it's about collaboration and obviously there can be challenges. It's not always a perfect collaboration. It's not a perfect world but I think there's definitely ways to kind of make sure you don't get those problems by just communicating well throughout the project and prototypes really help with that, yes? Yeah, so as I was saying the question was can you tell us a little bit more about the communication process? So as I was saying obviously we don't start off with just designing prototypes. So it's not like we get a brief and then we call and we set up the deal with the client and then we just start prototyping. Obviously there's a whole process that goes kind of before prototyping. So we have all kinds of workshops and kind of meetings both on like a strategic level, figuring out business goals, figuring out user goals, setting KPIs for the website. All this stuff that you would inform your designs has obviously been done before this process starts. And then we also obviously do information architecture. We could do something like style tiles. So that kind of process goes before prototyping. But once we move into actually prototyping we tend to have kind of these rapid iterations. So we talk to the client at least once a week. We have like a meeting maybe two times a week. And we do this remote as well. It doesn't have to be an in-person meeting. So at least once a week we have meetings and kind of talk through the changes that have been done. So it's almost like continuous sprints. All right, so okay, so last question. Yes, sorry I didn't catch that. I think there's not like a clear answers to that. I think how this methodology came about. I think for like the design perspective it came about because we had a lot of designers that wanted to work with more and more with interaction design. And we had a lot of front-end developers that were kind of frustrated with not getting enough information about the thoughts behind kind of the interfaces. You can only read so much from like a user story or something like that. So by kind of moving our front-end developers and our designers closer together we've kind of been able to bridge that gap I think. So that's kind of what brought on this change in methodology. So we have to get moving with the next section. So I just wanna walk you through the setup that we're using right now at FFW and kind of some of the technologies. So we use these six technologies in the prototyping setup that we're using right now. And I don't wanna go through all of them right now. We don't have time to do that. But a lot of you are probably familiar with the Node.js and the Node.package manager. We use that for managing all our dependencies so we can just easily start a new project but just installing that. We have Bauer in there which is a package manager for front-end libraries which also kind of pulls in some of the dependencies we have there. We're using SAS as a CSS preprocessor. So it's kind of an extension to the CSS language that allows us to do things like loops and variables and stuff like that. We're using a grid system called SUSE which is a really, really great SAS-based grid system that allows you to do pretty much anything. It's really flexible and in our experience has worked nicely with Drupal as well. But the two technologies that I wanna talk about today are Gulp and Tweak. So Gulp.js is a built system and a task automation system that we're using in our prototype setup. And maybe you can't see it that clearly but what we're looking at now is the Gulp file of our project. So the Gulp file pulls in all of the different dependencies we're using and automates a lot of different tasks for us. So some of the things we're doing with Gulp is we're starting a static server with live reloading. So we're watching files for changes and running tasks whenever something changes. So whenever a file changes we're automatically reloading the browsers and you can open it up. You get like an external URL as well so you can open it up on all your different devices in the device lab and look at the site as you're designing. So we compile the SCSS files. We automatically add vendor prefixes. We generate source maps. We compile the Tweak templates that we're using to HTML. And we automatically include data with these templates. So that's all well and good but what's really important like the important point here is that Gulp is set up to automate all of this for us. So our designers really, they don't have to worry about this. That's the point because all of this is like front end technology stuff and we don't want our designers to worry about this. So this is all automated. So our designers only have to worry about this if something breaks. And thankfully, that doesn't happen too often. So it's a really nice, Gulp adds like a really nice level of automation. So the other technology is Tweak. And as you've probably heard here at DrupalCon, Tweak is gonna be part of Drupal 8. But we've been using Tweak as our template engine for a while and the great thing about Tweak and really any template engine is that it allows us to do all these kind of things like output and escape and filter data. It allows some kind of presentation logic like conditionals and loops. We can define and overwrite blocks and we can do includes and extend templates. So all of these things are things that again, the designers working with this, they have to learn. But it's a lot easier than learning like how to do these things in PHP. So that's really great. It's, that works nicely. So especially things like includes, we have an include up here if you can't read that. That's really important because it allows us to kind of split things into two components. So take the navigation out of there, just a really standard example. But something that really makes it easy for our designers to understand this modular way of working as well. We do things like extends. So we build a basic layout template with the head and any photo styles that are gonna be on every page. And then we just extend that. So when we design new pages, it's really easy to just extend that basic layout page and our designers can worry about building out the bulk of these pages. But the most interesting thing really is that it allows us to create these components. So it allows us to actually move away from thinking just in pages, thinking web design as pages. It allows us to work much more in kind of a modular way. So for every kind of block file we have, we can have also an SCSS file that kind of correlates with this. So we have to get these really nice modular, these components that it's really easy to also reuse later in development. And it's a nice way to think about it, that you're not designing pages. You're not designing 10 different templates, web pages. Obviously you're also doing that. But the way to think about it is to kind of break it down into a design system. So you're designing components in a system. Obviously that also allows us to do things like set up a style guide that kind of shows all of these various components that we've designed. And actually today the way we're doing it is kind of, I'm gonna call it semi-manual. So we have like a style guide file set up that outputs all of the things that we know we use in every project, like typography and these things. And then we manually add in new components that we're using. But there are some great technologies out there that can automate for it. There was actually a really interesting talk yesterday about KSS and KSS node and actually using that with twig to automatically generate style guides. So we're definitely looking into adding that to our framework. So to kind of sum up, I would say that all of this really comes together in a framework that works really nicely for our designers. So to kind of get started with a project, they just type gulp in the terminal. So they don't have to mess around too much in the terminal. They just type gulp and we're off. And every time they change something in the design, it automatically gets updated. And they just have to really worry about the SCSS and the twig templates and everything else kind of gets done for them. All right, that's the prototyping set up. So any quick questions before we move on to Drupal 7? Yep. So I think some designers find it more difficult than others. I think it really depends on where you're kind of coming from. But I would say obviously some of the major challenges obviously are that designers have to care about and learn some of these technologies, at least basic HTML and CSS. Obviously that's a new requirement and that's obviously a challenge because it's kind of a requirement in order to be able to work this way. I mean, you can work really closely with a front end developer, but you have to know at least a little bit about mock-up and styling. So that's a major challenge. The other way around, it's also a challenge to kind of make sure that everything is aligned and ready for implementing. Because obviously we need to involve the front end developers in the process as well and they have to care also deeply about the design aspect. So obviously I think the major challenge is bringing these two different kind of skill sets together and making them work together nicely. That obviously can have some challenges, but overall I'd say it generally people want to work together obviously to create the best possible solution. I mean, that's probably why we're all here. We like creating great websites. So I think generally it works out nicely. Yeah, so we've actually, obviously we haven't done that extensively yet, but we've done a few kind of test drives at that and it's working out nicely and Yuri's gonna talk a little bit more about that. Yep, last question here. Good question. The answer is it depends. But obviously we often start out with doing content strategy and defining content almost kind of simultaneously as we're starting up the information architecture and starting up with design. So we use as much real content as we can basically. So we do these includes JSON files with all of our templates. So we can just add in some data there and output it in the templates as well. But obviously there are projects where we're not able to do it that way. Just like it would be with static mockups. Sometimes you don't have that content available so you have to use placeholders and Lorem Ipsum and stuff like that. But it's not optimal. We prefer to use real content. So we might have time for more questions later, but I'm gonna hand it over to Yuri now. I would like to give some comments from developers perspective how usually project goes. So before we started implementation of this process, our team was really had this split like we kick off the project with the client and then designers comes in and then like in few months we are going to be amazed what is going to get into development. And especially when you have designers who are coming from non-website background like they didn't have experience with designing for the web. The best ones are from publishing where everything should be like pixel perfect and ideal. That's where trouble starts. So and there is another problem when we start implementing things is that front end developers, they just start screaming right away when they understand like what they get designs and when they get the data of the Drupal and they know what output of the Drupal is and like how much they need to work on the things to make them nice. So it's very good in this workflow when front end developers they engaged way earlier and they start telling back end developers like what data we need and how things are going to work. And what I will talk about is actually we were coming up with these ideas like way earlier like I don't know three, four years ago when we get these huge problems in the end of the project when we had front end developers rewriting the whole CSS files multiple times because they just grown like 10, 20,000 lines and it's like not the limit of course. And we were thinking like okay but in development we have also similar things like we can go really wild not thinking about the future and all architecture can be banned and that's what we do we rewrite or factor everything. So how to solve that issue. And this is something that we come up with but when after this talk you will start talking to a developers like 100% they will resist because the ideal scenario for back end developers is like here is your data like and now you make it beautiful and we don't care. This is the views you have five templates to write I don't care like you just have your own thing. And if you need some more data like no problems here's another view another block like just like we have all now a back end development performance like third party integrations we are too busy to handle that stuff. And no worries I'm not going to talk I'm not going to teach you some bad language how to speak with developers so they will cool down but there are some tricks in Drupal that make this little bit easier for them to understand like yes it's like completely different HTML but it's not end of the world and we actually can implement it and we did not say to client oh back end development is two times more so that's not going to happen. So some things that I will talk about is some modules and I expect you to be a little bit familiar about Drupal ecosystem about some modules that we're using. So we will talk about panels views some view modes about entities and JavaScript of course. So panels we have the standard we landed to be a standard using panels for all our layouts. And this is very handy because you can have a layout you have full control of it you can put some more blocks in different areas and it's very nice for developers pretty bad for clients to manage the site if you let them go to the panel's back end but still it's manageable with all these inline panels editor and all that stuff. What is important when you start implementing Drupal sites and you have these prototypes. So one of important thing is actually to do the inventory and this is something that actually good designers do they come up with style guides they have all these different kind of like these are the buttons these are type of buttons these are blocks these are layout sometimes so you can understand what kind of layouts you need to build in your back end. Another thing like what type of blocks you need to build because in the back end of course we have flexibility we can depending on conditions we can have either one layout or the other layout or one type of block or the other so we have no problems with that but it's very bad idea to create one block with 50 different types of output and same with layouts I mean it's fine if you have like one, two different layouts depending on condition for the same page but if it grows you really need to go for different layouts. And this is something that we start off when we start developing. So for example we have this kind of part of the page and like in conventional development what we say okay the bottom list is a view we can assemble the view pretty fast and then top left block is also a view and there is another block yes that's going to be paints and we are going to display everything with views. When we do the when we have prototypes we actually implement them as custom paints. So we display every single piece of the content as the custom paint to lower down number of templates. This is the key element of implementation because like if you think about views and you will need to implement some very fancy HTML that is very easy to theme but it's very custom. You will probably need to override at least three, four templates in field mode and when you will have like 30 views you need to do that you will have like huge number of templates and the whole idea of working with panels and views is actually and custom paints is actually to lower down those number. So in this scenario we would build also three blocks but each of them are going to be paints and we do use views but we render them in a little bit different way. For the panels when you create a custom paints these blocks what is important is that you need to use templates for every single time you do theming. So when you render something just please create a template. Like there are two ways of theming in Drupal you can either create a function somewhere in your code or you can create a template like please use templates. It's so much better for front end developers especially because they have tweak templates or they can if it's rendered as the HTML they can just copy paste and then change something instead of like putting that into your separate module file and then it should be somewhere in the code they need to find it. It's much better for maintenance. Another thing is when you create the custom paint please place the template files inside of the folder where you actually prepare the data for that paint. So in that case you understand like okay I need to change that paint a little bit the output I go to the panels interface I know the name of that paint and then immediately in the code I find both where I prepare the data for that paint and where I render it I can see the template. For that, oh maybe you wouldn't be able to see this. So the trick part that is like documented but not that well in a plugging definition of your content pane you need to identify the hook theme and then you can tell the Drupal the template file is in the folder within the same file of pane definition. Probably this is something that you should point to your developers too when they will start working with this thing. And regarding views, views are great. They are very flexible. We really love to use them but rendering like we try to keep our self out. So in the custom paints we just execute them to get the results but then we render them in the way we like. So in this way this is some snippet of the code that we use. So when we need to have your results we just execute them programmatically. We get results, we actually load the nodes when that we were getting as results and then we theme them with node view function. So that is another trick that we found very handy to avoid all these multiple templates in theming views. Another thing is display modes for entities. So entities, let's talk about nodes mainly. So by default nodes in Drupal they have full view, teaser view, RSS search but like not that many, right? And in our real life websites when we have lists we have multiple types of lists with different type of HTML. I mean the same node can look very different in different lists. So this is where we try to use view modes and that means that in the list we just create a new type like it can be teaser archive or teaser search or teaser listing news or something that will identify what listing this content is going to be displayed at and then we just have separate template per each list. It's actually very similar that you're going to build in prototypes. You're going just to use the same template for all of the listings and this is what we are trying to use as well. So in this case of course the number of templates will grow but they are still pretty easy to manage because you know how you name the templates, you know okay this is the, we usually name them like node and content type and then some kind of identifier where the list is. Usually it's like views name. So in this way we can easily find the template for that particular view. And it's very important to also keep very good order of your templates in your theme. So what we usually do, we have template folder in theme and then we have different type of entities like file entity, fillable panel paints, nodes, it can be taxonomy terms like different types and then we go with even more elements in hierarchy. In this case it's article like content type. So you will come up with your own system that's for sure but this is very important to think upfront before you start developing.  What we try to do, because the front end developer will take responsibility for delivering the project, they need to remember what versions are like jQuery, what JavaScripts in Drupal should be available and they shouldn't conflict. So as the general rule we ask front end developers to remember include Drupal GS, this is the one that use Drupal behaviors and also wrap all the JavaScript they built in Drupal behaviors to be at least closer to be compatible to Drupal code. It doesn't mean that it will not change, it will definitely change, especially if there are some things like Ajax that you use like core framework for the Ajax calls and all these forms auto submits. This kind of things usually get rewritten when they start being implemented in Drupal but still when you have at least these basics code will be much better shape you will not need to rewrite that much. Some advantages of prototype based approach when you're not using Drupal. So we had experience of building website like part of the website in Sylex and Sylex is the micro framework built on symphony components and some others. And it uses tweak and it was like a miracle for us. Really, we just like grab the templates from prototypes, put them in Sylex like little modification there like in two, three hours we were able to assemble the whole page with all the data with everything. That will not happen probably in Drupal in nearest future but if you are planning to build something in other systems prototype based approach is even way better than designing Photoshop. It just like works. If you have tweak support, of course, Drupal 8. This is something that we don't have like real life experience. We just starting working with Drupal 8. Things that we know will be more better to support this model is of course tweak because we are going to use the tweak templates. I have huge doubts about using them as is. Probably we will need to modify them and it's still not known for us what is the template structure in Drupal 8 going to be. So I think after couple of projects our way of prototyping will change. So it will change the structure so it will fit closer to Drupal structure but this is something where collaboration will be great. JavaScript, Drupal 8 supports more modern versions of everything and it has like backbone and other things. So I think it's really will be much better but I'm very eager to start some Drupal 8 projects and experiment with them and update this slide. This is it for me. Do we have any questions? Yes, please. The question is about the way we serve pages. Panel panes. So when we assemble the page we have two things. So the general layout is usually controlled by panels everywhere. So it's like the first part. This is where I usually have like head of footer, right? The second level is actually panels and it can be either panel pages or penalized nodes. And then when we go to the paints, actually all of them are usually custom paints that we define in the code. So we don't use anything, well, we use but it's very low. We don't use much of the things that coming from the panels themselves. We don't use like standard paints from panels or page manager or C tools. We just build them in order to control the templates. Does this answer? Okay, so for the content editors, they find this set up really great, like no jokes. Like when we start giving them penalized nodes with multiple variants of layout, like you can do in penalizer, and also they can go into like edit mode and add any paints they like and they know which paints are there and we also can limit the options. They find it like, yes, it's the best CMS ever and thumbs up, it's so much better than all things we had previously. So it works really well. Also, of course, it's a matter of education because you give more flexibility to the customers. You need to educate them not to put the huge block in the sidebar and it will crash the whole layout. But in general, it's a much more flexible approach and clients really appreciate it. Yes, please? So performance, like theoretically, right? Views got several elements in the pipeline they're being rendered. So the first one is actually execution. And this is what we do in custom paints as well. And then we go into, and we have a cache based on execution, we can cache results for the viewed bending on arguments and so forth. No, it's in views configuration, we don't change that. And then we have a view rendering and we skip all that part. So instead of collecting and discovering like what templates to use and there are like four or five of them, we don't do that at all. We just render it from one thinning function. So it should be more performant. Also because it's custom paints, also because it's custom paints, we still have all that granular control over caching. I mean, if there are anything that is going to be slow, we will control it from our caching and we can purge it ourselves. So like performance tuning is not the issue because we have a lot of custom coded controls all the elements. Yeah, panels, performance, yes, but it's still, if there are any troubles, we have knowledge we can add layers of caching. So in our experience, we didn't have any performance issues with using this approach and it doesn't matter whether you render just a view in the panel. I mean, panel themselves can have some issues. Views themselves can have some issues but we don't skip any caching layer. And if we even skip, we can easily add the other questions, please. Yes, please. So why we use view modes of entities, right? Instead of fields? So the question is why don't we use display suite for rendering view modes? And instead, we do that in the code in templates, right? The reason is for maintenance, for more convenient changing it for front end developers. Because if you have some configuration in display suite, yes, you have layout, but you also have what fields are there and how they're going to be displayed. If front end developer, for example, will need to change the order, he will need to find that element in display suite to change the order. He needs to make sure, maybe if something small changes, he need to go to layout. So there are like multiple places where you control the way it's going to be displayed. In our case, we decided just to go with plain templates because it's something that they are already using in prototypes. And this is where things just click together.  We have decided to switch to like more templates, but it's still manageable and everyone understands where to find them. Yes, please. So the question is, do we think if we are going to keep using panels in Drupal 8? That's probably answer will come up and we will have panels and we will start implementations. Right now I know there is a page manager that you can use. The really thing that we need and we use very heavily is panelizer. I know it's not there yet, but we will see. I mean, it's just the beginning. Yes, please. So the question is about using some Adobe product instead of designing in CSS and in browser. And ah, okay, and outputs. So this is something related to some questions to Morton. So when we get the HTML from these programs, I mean, it's maybe good in browser, but it's really not production ready thing. I mean, all the point of creating it manually, I mean, all the designing in browser, it's kind of optimization of the way CSS, JavaScript is structured and built. And if we skip this step, I mean, it doesn't matter. We will still need to rewrite because CSS files can grow big and all the point of this approach from developer perspective is to make that as nice architecture as we build the backend. So at least for now I haven't seen any solutions that were just like, wow, that's like same level of quality that our front end developer can do. So we haven't done anything with that. Yes, please. So things like menus. It's like exactly same thing like we do with views. So the question is about what we do with menus, right? When we need to override them. So we just load the menu in the backend. We have all the elements in array and then just render them in the way we like. So we don't go too much with the standard to log the trenders menu. We just create our custom pane and render menu in the way we like. Any other questions? Thank you very much. It has been great pleasure here. So if there are any more questions, you're free to come up and talk to us now. We'll stay here for a while. Otherwise you can come down to our booth, 501 and ask more questions later. Thank you.


Welcome to learning analytics tools course. In this lecture we will talk about data collection in a different learning environments. You might have seen in this course we are offering in a learner centric MOOCs model. So, what is learner centric MOOCs model? So, the video lectures which you are watching now it is called learning dialogues that is the only place where we interact with you so that you can understand the concept and each learning dialogue will have a reflection spot. So, we will pass the video in between ask you to think about it so that you can think about the answers and write down in your paper so that then we discuss the generic answers the users can come up with. So, when we ask you to pass the video please pass the video think about it that will help you to learn better. And then learn by doing activities that is we will give some problem or some questions which you have to solve by applying the knowledge you learned in learning dialogues. These are however usually not graded for your assignment or something but we highly recommend you to do that because it will help you to understand and apply the knowledge you learned in a different environment or different data set. The most important thing is we will learn not only by attending lectures instead we learn by interacting with your peers with our friends in the class. To make that same environment possible we want you to interact with your peers in the forum. To help you to hide you to start discussion in the forum we will have focused questions so that please respond to others comments and answer the your peers questions like them comment them also you answer the questions. So, we recommend you to go and use discussion forums highly so that you will interact and learn from the other learners that is called LXA it is called learner-extension interaction. Also we have learning extension trajectories this is very important part. For example, we are in the 21st century here we do not need to be like a teachers they did in 20th century teachers for example in 20th century teachers the teacher has the source of knowledge teacher has the access to some books in the library so that teacher has all the knowledge the students who sit in the class learn only from the teachers whatever teacher says is true they cannot go and verify because they do not have access to all the knowledge or book or anything. However, in 21st century the students have more access to knowledge more access to more materials compared to teachers or usually teachers also have a similar access but so they can go and check internet they can watch videos they can do a lot of things. So, there is no need for teacher to teach everything in the course and in fact teacher no need to teach teacher has to just guide the students motivate them to learn particular topic they just have to motivate them so that the students can go and watch videos from other lectures. Also, there are very good lectures very good videos in YouTube or in a MOOC which explains the same concept in a very beautiful way which students appreciate and students understand which means why we are doing this course there are a lot of course in data analytics. This course learning analytics is to think you about how to collect data in the learning environments and use the tools for the data you collected in learning environment. So, the other courses exist in the online may not talk about how to collect data or the domain is not education. So, in order to apply data analytics in education domain we are teaching this course. So, I said that there are a lot of other videos which means we will give the basic motivation and the videos which need to understand what is learning analytics. However, for the advanced users or for the novice users to understand more on the topic we recommend you to go and watch other videos that is called LXT. We will provide the resources links to those videos and also we will have an assessment question based on that which is not going to be graded. But I recommend the interested users to go and watch the other LXTs understand the concept better and learn more about the topic we discussed in this lecture. So, this is about LCMs, so learner-centric MOOCs. So, this course will be offered in LCMO. So, when you see LXI, LXT, LBD please participate actively not just only watch videos and go for exam that will not help you to learn the video, that will not help you to learn the course better. So, let us start with the activity. In last week we assumed that you had access to data from a classroom environment like this performance and attendance and also we use that data to describe the types of learning analytics. Let us consider you are the researcher or you are the teacher you might be already. So, you are going to collect data from the classroom environment. What data you will you collect and how do you collect? Think about it, pass this video, write down your answers and the resume to continue. Please consider what data and how you collect data. Suppose if you want to collect students marks in the mid-sem, you will collect by conducting an exam. Similarly, list down all the data which you can collect in the classroom environment and write down how do you collect it. So, you might have answered performance because that is the most useful data or most data you want to predict or most meaningful data to understand the students knowledge that is what you consider. So, let us see performance is the most common data, everybody thinks about it. How do you collect the performance? So, we can collect performance in the students mid-sem exam or mid-term exam where we have questions and responses to each questions. If you can classify the question to a particular topic that is you are mapping question number 1, 2, a concept 1, question number 3 for a concept 2, you can have more richer data and understand which concept the student understood. Similarly, you will have a semester exam that is Ensum exam course or the course in the subtopics. For example, you break down your whole course or whole chapter into multiple subtopics and you can conduct test on each subtopic to understand students knowledge. Based on that, you can consider redoing or retouching something like that. Or also, you might have given the projects to the students. From the projects, the performance can be collected. Or you might ask them to present some video, present some topic in the class and you might create a rubrics to assess the students communication skills, whether they did a proper literature review, they did some research skill, they are able to identify the gap in the literature. You can score on these dimensions and you can use this as a performance data. You can do open book assessment like ask them to use books, solve a complex problem and you can assess their knowledge and how to apply the learned in the class in a timed manner. Or you can conduct a quiz, a surprise quiz or something like that. These all ways you can collect performance data. But that is not only data we can collect from classrooms. We can collect the students attendance. That is simple. You can collect the students attendance by marking their attendance. And you might have the students profile information and background information such as students which year they are in, which department or are they from which kind of school or the family background. All this information you might collect it from the admin department or whatever data you can collect, you can collect those data from the students. Also, students might have a corresponding lab activity. That data also can be useful to predict the students performance. So, you can collect data from the students lab activities. Also, you can collect students engagement in the class by observing the students engagement, coding it in a sheet or manually coding it. If you want to use some web camera and record the students engage in the class and post class, you can code them manually or use some software to code it. Also, it is like the students activities in the model or in other online environments like LMS or library systems. This you can collect from the log data of the system. From the log data, you can see what are the activities, how many times frequently they log into model, how many times they download or access the particular course material, something like that. You can also collect students motivation and affect using human observation that is affecting the sense, learner centric emotions such as boredom, confusion, frustration by using the human observers in the class which you can do in a real class or in a live environment or you can record the students facial expressions using web camera and you can sit down and code them after the class. The camera will be tricky because if you are large classroom, you may not able to capture all the students facial expressions. So, it is better to use human observation in a live classroom. Also, there are co-curricular activities, not extra curricula but co-curricular activities which my students might be participating in some events related to the course. They might be taking extra course in MOOCs or something like that. You can use those data also to understand the student's learning process also to improve your teaching processes. So, we said that we can collect a lot of data. The question is why we have to collect this data from classroom? So, it is good that we have access to a lot of data. We can create a nice data waste of all this information of all the students in the class, but why we have to do? So, the main purpose is that in a first week of this course, we talked about descriptive analytics, diagnostics and credit analytics. So, you have to understand why we have to collect this data and how this data can be used to predict something so that you can improve your teaching learning process. So, do you want to predict the students performance in the final exam using their behaviors in the class, the behaviors which we discussed in the last slide? Or do you want to predict which student will do better in the mid-sem exam? Or do you want to predict which student will do well in the quizzes? Or you want to understand which student is struggling in the class and which topic so that you can teach him better or teach her better? So, those kind of research goal is upon you. So, you have to set your research questions then you collect data in order to find that. So, let us move on to the other type of learning environment MOOCs. So, MOOC is massive open online courses, but this Swyam or NPTEL which we are learning the course is actually a MOOC. So, here students can access the course content from anywhere. So, MOOC is Swyam or NPTEL kind of platform. So, now you know what is MOOC. So, consider you are a course administrator in MOOC or you have access to the MOOC software and you know how to collect data, you have a team of people to collect data whatever you want.  That is what kind of data you want to collect from the students interaction with the MOOC in your course. So, please pass this video, write down the answers, also write down how do you collect this data, not just what data, like how do you collect this data from the log file of the MOOC and after writing it down, resume the video to continue. The basic and very important data in a learning environment be it a classroom or MOOC or any other type, you have to understand the important data is timestamp. In a classroom, it is not possible to record timestamp in a very accurate level, at least a day, time, the class section is good. But in an online environment like a MOOC or tele, we should record the timestamp of each action or each activity student do in the MOOC. Other than that, you also collect students learner ID, session ID, IP address. Learner ID is each students will have a unique ID and session ID is that in the same MOOC, a student might be logging it multiple times because the course has for 8 weeks or 12 weeks. So, student has to log in multiple times in every week so that we have to know the session ID. And also IP address is useful to know the location, where the student is accessing data, that might be useful to do some adaptiveness or provide some feedback to the students. Let us consider you want to understand the student's page view behavior, like what are the pages the students viewed in this course. For suppose you have a MOOC which has a lot of content in the PDF and also we have a lot of videos and you have a discussion forum. What are the PDF content the student is reading or which pages or which menus he is spending more time in it. So, we need to understand what are the pages viewed. So, how much time we spend on each page will be obtained from the timestamp data you collected. Suppose you collected a data saying that the student with the page 1 from time 10 am to 10 2 am, then you know that student spend 2 minutes on page 1, something like that. So, we need a timestamp data and what page they viewed in order to generate that data. In discussion forum very useful data is there. Like for example, the student commented, he deleted a comment, reply to some comment or he supported the comment or he created a comment. He started a thread, delete, unfollow, reply, update, lot of activities within the thread. Also in forum search, the student is following some user or playing the same user multiple times. So, this kind of information can be obtained from the forum data. Also the navigation information. For example, the student is navigating from one page to other page most frequently or the student will be watching most time the videos immediately going to answer the assignment questions or after assignment questions is going back to watch a video in particular space which minutes he is watching. So, is he watching videos to answer the questions. All this information is possible to capture in the MOOC that is called navigation. Also in a video behavior like are they playing when they are passing the video or they seeking the video from one particular place to other place in the video or they changing the speed watching the video in 1.5x or watching the video in points 1.5x or they are looking at the transcript or not. Those kind of information also can be captured from the behaviors in video watching. So, all this information can be captured in MOOC. So, simply the idea is that please collect all the learners interaction with the system that is called clickstream data. Wherever the students clicking buttons using mouse or your keypad clicking buttons typing all the data just capture it. Then you come up with the features which can be used from this data so that we can predict the students performance or predict which students going to drop out based you can predict whatever you such question is. So, simply collect the learners interaction data using clickstream data capture. This is a one type of data format which used for edX course, but the raw data will be different format. Look at this raw data. This raw data says there is a username we hide the username and it is a browser the action name it is called seek video. I told you what is seek video. Seek video is moving a video from one particular time to other time. So, what is the time he was watching the video at one minute now we seek the video to third minute. So, the time he was watching and the new time also should be recorded what is the whole time and new time and even type is seek video. So, this information can be captured from this log data. So, this is a general format for a log data it is one type of format or it is most usually used format. Let us see this data. Can you take a minute pause the video and try to identify what is this log data means what action a student is doing. So, here student name is also done. The action even name is test book PDF page crawl. So, the student is crawling the PDF page which page there is a PDF called pre-MLIAT Bombay PDF in the direction is upward scrolling in your mouse you can scrolling upwards. So, actually is watching the reading the page. Based on the ways you use Mac OS or Windows OS you can say whether the student is watching the reading the page in the next page is going back to the previous page. So, this information is can be captured from this log data. So, this is another type of clickstream data we are capturing like it is not a clickstream even every action a student does like scrolling also in the page view. So, we call it as a trace data. So, there are two type of data clickstream and trace data. In general all the platforms which allow MOOC will help you to collect this data and fortunately NPTEL will not record all this user information because the number of users in NPTEL is really huge and we do not have a space to keep all the data and server. So, we might be coming up with new projects to collect all the data. But if you see the courses offered in edX or course era they might click out all this data. So, I was giving you the example that we can collect all this information from this information I want you to create a log features in a one specific format. The format is so, you collect a raw data. So, you should convert the raw data into actions or events by writing some scripts like a Python script or script. So, the raw data you saw in the previous slides should be used to convert this data into particular actions or events. So, what is that actions or events? Similar to the log data we listed in the classroom environment we also need to identify the features from these raw data. For example, you want to know number of pages viewed in last 10 minutes. How do you do that? You have to write a script from the log data that the data you captured to identify how many pages viewed from the time x minus 10 to x all the page use should be counted that number should be listed that is a feature. Why do you want to know number of pages we do not know that is a domain expertise that you have to come up with the which features will be useful to predict the students knowledge or students performance. For example, the average time the students spent on a page number 3. So, you have to capture whenever student is leading the page number 3 in all the sessions and average time has to be computed from that. Or if student is leading a page you might classify them as a read long or read short why? For example, I opened a page number 1 I spent only one second do you consider that as a read may not be right. So, you might expect a student has to spend at least certain times say 5 seconds to read at least one line in that particular page. So, you can come up with the threshold to classify the read long and short. For example, if the student is watching less than say 5 seconds you can classify it as a read short. If the student is watching you know that the student will be reading from 5 seconds in this particular page to say 1 minute you can consider as a read. This is the actual read a student can do in this particular page. If it is greater than 1 minute say 60 seconds this threshold is based on your knowledge on what is the content whether the content does lot of pictures or mathematical location it might take more than 10 minutes also. So, thus is based on your knowledge is applied here. Then you might say it is a read long a student is reading this particular page for long time and if a student on the page more than 5 minutes for example you can ignore that content student might probably open the particular page and you left you move to other tab is doing some other activity watching some other videos is coming back to read page. So, you should ignore it also if the student is not even spending less than say 2 seconds or something like that you cannot ignore it. So, if you have a time timestamp information and you know what data student is watching it will help you to capture this kind of information read short read long. Why this data is useful? You can say there are some students who are not reading at all they might be attempting the quiz or assignment question they are not able to solve it. Though you know the reason because they do not read or some students will be reading a lot of time they will be reading reading reading they are not taking any assessment you also can send a message saying that why cannot you go and take a quiz. Some students doing good they read long and they take assessment they can pass the exam. So, you know what is the students behavior from the log data. So, also you can come up with number of comments in a forum it is information you can capture. So, there are a lot of data you can come up with. So, what is that how do you come up with these kind of features that is called domain expertise. So, the feature construction is not just I can capture all the raw file I can use that raw file to predict something no. Instead it is about you apply your domain knowledge you are expertise that is why you come up with a domain expertise in education or domain expertise in teaching experiences. Apply that knowledge to come up with this list of features to get these features from the raw file you might need a knowledge on writing a script like a python or that is what I said about you might need small bit of programming knowledge but for this course we will give you all the features extracted from the raw file. So, there is a tool which is used very heavily in industries for future is called feature tool. Please check that tool this course is not focused on explaining that tool because that tool is not important to us because we extract the features based on our domain expertise. This feature tool might help you to construct more features if you have the knowledge on domain. So, if you do not have any knowledge on domain this feature tool also will not help you to create features. So, please check this tool called feature tool this has been used heavily in the industries nowadays. So, I mentioned that there should specific format your data should be stored the format is timestamp, user ID, session ID, action name. What is action name? Action name may be reading or watching videos taking place something like that these are the action names. In each action you might have a context the context may be in a reading page what page is reading what page number is in what type of video is watching is he in a video is he seeking the video or is he playing the video in particular time speed limit all this information can be captured in context of the actions. So, the action name will come from your domain. For example, if I use MOOC as a domain I know that there are four major actions in MOOC that is video watching behavior that is play pass seek some kind of behavior in the video watching interaction in the forum in the forum commenting or creating a thread or the actions. Also in the reading behavior they might be reading some pdf or something like that also they might be navigating from one menu to other one tap to other. So, these are the four major actions I might have a four or five actions. So, you need to come up with those actions and combine the time to create long or short actions or the actions can be repeated multiple times you might get a multi kind of suffix to it. Then you can have the context of the action where it is done is like you see reading page number three you see reading which video is watching what is the speed that kind of information can be used to provide meaningful data collection and that can be used to predict something. So, what you want to predict that is your question you want to predict the students performance in the classroom students performance in the in the particular course or who will drop out in next week something like that. So, also you have to learn about pre-processing in other courses like mission learning or data mining courses this is your LXT external course country can go and watch. However, I recommend for educational video you do not need to do much instead you need to understand if you have missing values how to replace the missing values. Some suggest missing values can be replaced with 0 missing values can be replaced with the mean of other values but it depends on the data you are missing and also your domain knowledge. So, apply logically what should be replaced that missing values and first try to understand why the values missed. Also, I recommend you to normalize all the data to 0 to 1 for example, the performance score is measured in a scale of 0 to 100 but number of upwards is measured in the scale of maybe 0, 10, 2, 3 how do you compare these two scales in a single comparison the mission learning algorithm might work if you do normalize it to 0 to 1. Some suggest to do standardization so, think about it normally session or standardization then you apply based on your requirement. So, in this video we talked about data collection in a classroom environment also in a MOOC environment I also talked about how to extract features from the log file. We will discuss that in detail what are the features how to extract features I will show examples in the next video. Thank you.


Snestrunk! Hi everyone, everyone hi. Welcome back to Snestrunk is playing a Link to the Past and I've battled a lot of whiskey so this is going to be pretty embarrassing.  It was a very poor decision to choose this game to play while drinking because the first thing that goes when I'm drinking is my sense of direction. I'm going to get lost very easily and it's going to look real bad. It's going to look real bad. So I hope you enjoy that. Oh and God bless the dash function. That's right I got the boots from. I'm recording this in one big session going all the way back. So I'm actually... This is posting like I think on the first week of May or something like that. This is like the middle of March. I really... I can only... God the dash button is so awesome. I can only record these when I have time, right now I have time. So I'm going to do a big long thing commentary and I'm getting progressively more and more wasted as I go along.  Don't you dare. Okay thank you. No heart, huh? Anyway, the week this posted, or as I'm recording this, the video that posted this week is Earthworm Gym and that was courtesy of a very kind Patreon request. So thanks to, I think it's AB1986 that requested it. That was a mistake. I would not have dashed all the way through but let's take these guys on. That's what she said. How dare you use your shield for its intended purpose.  Anyway, yeah, Earthworm Gym posted this week and I got a really interesting comment from somebody, a very valid comment that brought about like a big point of discussion. I want to get the book, right now I want to get the book of whatever to get inside the desert thing, I think, right? But first let's pay this weird kid a visit.  I can play the sword, I got a bug catching net, a butterfly net, I can play that. So yeah, that guy, you know, that's pretty weird. That's pretty weird. Oh, a bomb. I'll be damned. You don't usually find bombs in bushes, I don't think, do you? That's unusual. Anyway, where the hell is the library? That's not the library. The library. Notice how people pronounce that funny? Anyway, yeah, the video that posted was, oh is this the Quarrel brothers? The fussin' in a feudin', the Hatfields in McCoy's? I wonder if anybody even gets that reference. Yes, quarreling.  That's what I meant.  Whoops, I did not mean to do that. I wanted to do this. You guys got to see my Retron 5 menu. I feel so exposed. Oh god no, this is going to be terrible.  I have no idea. Oh no. They're all going to laugh at me. Oh, I might actually make it. What? 19 seconds!    So I can't talk to her again. I have to actually go in here and go back and try again. Is there a shorter way? Maybe I can, we'll give you something good. Can I go this way? And keep heading in this direction.  I can't pick up the sign. Okay, this was a disaster. Motherfucker. One more time. Yeah, yeah, yeah, shut up, let's go.  That went well.  I'm done. You know, David Cross, the stand-up comic David Cross has a great bit. He talks about meeting the band Harlow. And if you remember who the band Harlow is, you, hey, it's the book of whatever, blah, blah, blah. If you remember who the band Harlow is, you're just, they're not worth remembering. And you know that. So why do you remember who they are? I only remember them for the sake of the joke, because they're a joke. Anyway, David Cross talks about like, going back to, he's really, really wasted, and he goes back to his hotel, and he's arguing with the hotel manager about something or other.   Oh, come on. Get out of my way. Anyway, going all the way back to what I mentioned, I got a comment on my Earthworm gym video that posted today. Well anyway, I noticed that I like doing those kind of videos where you look at a classic game that everybody likes, and you examine it from an objective standpoint, or as an objective as I can get, as I can summon. And it's just a fun little challenge. And it is Earthworm gym worth playing today. And it turns out, yeah it is. But the thing is this guy very nicely said on my channel, hey, this isn't why I come to your channel. Find out about games, what's with this guy? Okay, I come to your channel, anyway, he says I come to your channel to find out about games I never heard of that I might have missed out on. And sure enough, the stats kinda back that up. Like when I look at the age group of people on YouTube statistics, it's all people my age, 34, 35, and older, or just in that general area. It's not people looking to like, oh, I've heard of Earthworm gym, it's people don't care about that. So that made me wonder about the general nature of criticism, especially gaming criticism. But especially in this day and age where we've got the internet and Netflix and all this stuff, it's like, do we need critics anymore? And let me give you an example of what I mean. Oh, this is really, this is one of my favorite parts of this game.  The biggest cupcake in the whole universe. Oh, there we go. I just, oh great, you freaking locked me in. That's not what I wanted. Ugh, you know what? You should be able to use the book as a weapon. You should be able to hit people with the book. Wouldn't that be awesome?  Anyway, no, it made me, no, that guy was, he made a good point.  But no, he was like, I don't come here to read about games I already have made my mind up about. I want to know about stuff that I haven't heard of, like rom hacks or like Super Famicom stuff that never made it to the North America or to anywhere else for that matter. And I was like, and sure enough, yeah, that's kind of like what people are, what people want from this particular channel and the stats kind of bear that out. So, and then at the, in a semi-related note, I post at the Racquet Boy forums and somebody there posted, I had a really good post about, they had, you know, they shared a link on their blog.  Gaining journalism, you don't need me to tell you that journalism and gaming is horseshit.  It's useless. It's like transparently bad.   Like if I want to learn and like, if I want to learn about, if I want to know to play Dark Souls or if I want to play Breath of the Wild or whatever, I'm not, I am not going to go to a, I'm not going to go to a critic. I'm just not. I'm going to ask my friends about it.  I'm not going to go to IGN.  They're all in the bag.  They're all in the bag for each other. Does this do anything at all? I guess not. Nothing happened at all? Okay, well, whatever. Just there to be decorative, I guess. What is this, a pure one?  Anyway, yeah, no. If you go to Kotaku for reviews, you need to like seriously examine what, you know, what you're doing because you shouldn't be doing that. Right on, nice. That was like a lucky shot. I did not.   That does not help me. I kind of hate Zelda games sometimes. I think it's the one on the far left, right? Not the far left, but the one next to that. I'm gonna get all the booty in these jars, regardless. Yes, okay. Right on, anyway. I asked like who is the most trusted, the quote-unquote most trusted critic right now in gaming and you know, people are throwing names. I threw out Yatsu Krosha just as a guess and I like him a lot.  Oh, that's adorable, you know, or whatever. Like, listen, I watch his reviews for Steam games, you know, and stuff like that, that's it. But the, and somebody threw out like Tom Chick and people like that. So it's, I'm, if I like these, does this do anything? Why are these here? Hey, I actually remember to do that. That's like very unusual of me to actually remember something. Oh, we got a full house here, ladies. Sorry. Too bad, so sad. I'll grab one of you.  Just did that other fairy a favor. Anyway, how many times have I said anyway? Somebody out there must be doing a count. This is a heart piece down here, right? With a vulture. Yes, it is.  Let's kill this thing. Anyway, yeah, I asked what is, who do you think is the most trusted critic in gaming? And somebody made, wait, is there something? This is where I wanna go next, right? Whoa, this is where I wanna go next, right? But I have to get, that's right, the big treasure chest is the glove of love, if I remember correctly. Anyway, the, Jesus, can I say anyway anymore? Somebody made a really astute point as they often do on Racket Boy. They said the most trusted critic is the games beaten thread here at Racket Boy. And I'm like, you know what, you're exactly right.  That's like kind of an antiquated thing. Critic, criticism, like reading stuff like that is kind of outdated, isn't it? It's like, and it's true, like if you want to know about like what movies to see or what games you wanna play, who are the first, what's your first instinct to do? It's to ask your friends what they're doing, what they've played it, what they think. It's not gonna be some random yahoo like me.  Yeah, I love that.  Yeah, so it's like nobody, that's kind of an antiquated notion that people are going to find some yahoo on the internet, for those recommend popular, it's like you don't need me to tell you that Earthworm Gym is worth playing today. That's, I did the video, the guy was very nice, where am I going? I just did it, I made that video because it was a specific request, but it makes me feel kind of silly for doing like videos about super Metroid and stuff like that. It's like, of course they're worth checking out. You can, it's easier than ever these days to fucking, oh, the gloves love, yeah. You can feel its strength. That's a little too much information. TMI there, game. Anyway, the, yeah, it's, it doesn't, I don't, you'll hopefully understand this rambling that I'm doing here. But it's a good point and I understand, I want to go back, don't I? It's down here, it's not over there. I'm telling you, my sense of direction is so horseshit when I'm, anyway. Yeah, it's, we use the glove to get these stones out of the way and then we are on our merry way and we fight those big sandworm things, if I remember correctly. Boy, I had this big, I think these move this way, right? Right? That's, there we go, okay. I had this almost perfect, like I, here's how I had this planned out in my head. I'm gonna do a link to the past. It's gonna go awesome. I'm gonna have a link to the past drunk let's play.  I have a link to the past drunk let's play and then I'm gonna talk about the guide and then I'm gonna talk about, and you know, Nintendo Power and all that sort of stuff. And then when I start the second part, I'm gonna, oh, there better be a heart in that last one. There better be a heart, motherfucker. I need a heart. Give me that heart. Give me, no! Jesus. Well, I certainly earned that, didn't I?  Anyway, yeah, no, I had this planned out in my head, like yeah, I'm gonna talk about like super deep, like criticism, the nature of criticism and all this other stuff and it worked out. It sounded like a good idea in my head but it turned out to be a rambling mess. Anyway, if you're out there and you're watching this, first of all, thank you. God bless you for making it this far. Oh, bless your little heart.    Wait, I need a key. Where's the key? Does this motherfucker have it? There it is, okay. I don't have to kill that guy. I can just keep going, okay. Oh, that means boss. Oh, shit, this is where I have to wait, right? Or right on. See, how come they sail over my head sometimes and other times they hit me?  That's misleading, I want my money back. Baton switch. Yeah, this guy takes red implies that he takes more hits. All right, this is the part where you light all the things on fire. God. It's always jarring. Oh, my dogs are very concerned about me right now after I made that noise. What do you guys think about that, huh? You this season, Clyde? Clyde? No, Clyde. I don't have any food. You ready? You too. All right, here we go, it's boss time. Sorry, didn't mean to summon HC Bailey there. Let's just do the, I was too late. Yabbo, yeah. Boy, it is windy outside.  I should probably concentrate on what I'm doing, huh? Instead of worrying about how windy it is outside. I don't think this is, should one of them be dead by now?  Oh, that was real smart.  Am I gonna make it through this? Am I gonna get out of this alive? I may not. There we go, that's more like it. Yuli, get away.  Yuli, I can't pet you. I'm doing stuff. No, yes, I can't pet you.  What up? Yuli, no. It's funny when you name a dog, something like Ulysses.   So that's why we come up with Yuli. Like I wonder if Ulysses as Grant was called Yuli.  I have to deal with this beeping and this dog trying to get me to pet him while I'm playing.   Thank you. All right, we got one left. Hopefully he only needs one more hit.   This is all gonna be for nothing. I like how it makes like an owl sound when you hit it. Ow, ow, ow, ow, ow, oh, I survived. Oh, and the heart piece made the thing go away and I caught the pendant. Everyone's a winner, congratulations. Ba-ba-ba-ba-ba-ba-ba-ba-da-da-da-da-da-da-da-da-da-da-da-da-da. All right, so now what do I do? Anyway, all right, cool. I stumbled through that. What, you get hurt by these things, really?  But normal. Hey, I wonder what that is up there. Oh, red on, cool. I think you can only get up there with the dark, with the mirror. It's one of those things where you warp to a certain spot. Hey, get back here, motherfucker. I should probably heal myself again. What else do I need to do?   I think I'll go get the slippers.  Oh, I can lift these up, too, right on. I think there's a stairway over here, isn't there? Lift it up and there's a thingy. Must be this one. Right on. What does this do? Oh, it's this pissed-off guy.  Yeah, it is super windy outside. God damn, I mean, it's New Mexico, it's always windy.  That's pretty clever. Like, you come out, that's a good placement of that.  Is there anything in here that I can do right now? Let's see if I can solve this ridiculously hard puzzle. Can I get through this? No, I can't, because I am...  I just don't care. Apathy is your friend. And now I'll never get it. What game is it where you... Somebody will tell me. Oh, a heart piece, Nido Mosquito, all right. And fish. Fish is good for you. Can I catch these? I should be able to catch these, right? I think, right? I don't remember...  I think I need to let one of the... I need an empty bottle. Right? Motherfucker, get back here.  Oh, great. Yeah, this is all going according to plan, really. This is such a disaster. Get back here, thank you. Jesus Christ. Now, can I use my... Oh, come on, I followed him up here. I can't use my bottle as a net and catch the fish. I swear to God, you can catch the fish. Is that Ocarina of Time where you catch the fish and keep it in a bottle?  I'm getting myself all the games confused, I think.  I hear you laughing out there. Motherfuckers, fuckers. Oh, yeah, you can smash these too with the dash. Forgot about that. My dog is very... You will see that was a... My dog had a very frustrated sigh right now. All right, I'll get all of you. Give me the guilt trip, why don't you? My dog just gave a very frustrated sigh. He's very sick of me rambling to nobody right now. This is how he is when I'm on the phone too. Anyway, let's go up to the lake... That's not Lake Hylia. I thought Lake Hylia was in the southeast, rather. That's the northeast, not the southeast. Oh, God bless the dash function. Why couldn't Ocarina of Time... Listen, I understand Ocarina of Time is this beloved blah, blah, blah, the greatest whatever of whatever, I don't care. But why couldn't Ocarina of Time have a dash function to start the game with?  It's this witch. Let's... Yeah, that's kind of cool. What's going on in here?  I do not want to shop here.  Right on. Oh, yeah, here you need the dash function to unlock this. Does this have anything in it? No, it does not. Is there a point to this little area down here?  Why? What is this, a mud-wrestling pit?  Like, what is that? Why? Let's bomb these motherfuckers just for fun. I'm getting... Oh, nice. I don't need your magic, but thank you. I'm starting to get punchy. I'm so out of it right now. Let's... I just want to...  So let's look at it and then let's call it an episode, shall we? I think I need some, like, pizza or something to sober up. There should be a music change here, in my opinion. I should... This area does not warrant the... Whoops, whoops. Whoops. This area does not warrant the typical overworld theme. This needs its own theme.  Oh, I can't go that way. Fuck. It's probably... Where does this go?  Where does this go?  It goes nowhere. Of course, it's the fucking... path of... It's the path of most resistance. So let's... Yeah. This needs... I feel very strongly about this needs its own... Because the Zora music in Ocarina of Time is very memorable. It really stands out as something cool. Whoa, here we go. Got... Hacksaw Jim Duggan-Eye is over here. 500! Well, this was all for nothing, then. Alright, if you saw this coming and you saw that I didn't have 500 Rupees, you probably closed the window, like, probably eight minutes ago. You saw that guy doesn't have enough Rupees. He's gonna... Or maybe you skipped ahead to see my reaction. Seriously, I'm not that familiar with this game. I mean, I am, but I'm not, you know. It's one of those things, like... Kind of like the Lufia games, where it's like... I've played through them once. I've played, I should say, I've played... I've 100% of them once. Hey, give me that fish! Alright, well, I'm too far gone to continue this particular episode. Let's get the hell out of here and, um... Oh, boy. This went poorly. This went better in my head, you know? It went, it really did. It went better in my head. I was gonna be able to come out here. I was gonna be able to swim. It's gonna have some, you know... Morolic and frolic in the... In the, in the... Water. And everybody was gonna be happy. And instead...  Anyway, I wanna thank you for watching if you've made it this far. If you've made it this far, what are you doing watching this? Thank you and please, for me, have a good rest of your day.


The Nye Brigade of the Nigerian Army in Monday paraded 116 suspected miscreants arrested in an early morning raid of black sports as a part of the steel water operation in Lagos State. The suspects were arrested on the real side of Brown Street, Araromi, and all the parts of Oshu, the axis of Lagos State. Speaking to journalists, the Brigade Commander, Brigadier General Issa Gobong, has set locally made guns. LSE drugs, like trauma doll, were intercepted during the raid. The Nye Brigade of the Nigerian Army in Monday paraded 116 suspected miscreants arrested in an early morning raid.