 For those of you in the back, there's still some seats in the way back for you guys that are standing up, so I don't want you to be uncomfortable. For those of you just coming in, there are still some seats you'll find kind of in the corners of the way back. There are a couple spots, make yourselves at home. I think we're going to get started. I have one question. Is there anyone from new media in the audience? This highly anticipated presentation was billed on the schedule as lullabot slash new media double header. So I'm very impressed that you all found us. We are actually going to talk about what went into the making of sci-fi.com, the new sci-fi.com on Drupal. And so thanks for all of you lovely folks for showing up. First though, from the department of shameless self-promotion, this actually is sort of our commercial spot. Lullabot is a, I don't want to say this wrong because I'll lose my job, it's either Diamond or Platinum. I'm going to go with Platinum, sponsor. So we're just going to do sort of a quick about us video that kind of tells you a little bit about who we are. This was shot at our team retreat in November. We all gathered together in Palm Springs, Lullabot is a distributed company. So everyone works from wherever they live. We're distributed from as far east as Madrid and Copenhagen to as far west as Los Angeles and Portland and San Francisco. So we're spread out all over the world and we get together as a team once a year. So this is a little ditty we shot at our last gathering. Whenever there's a lot of people in a market and there's a race to the bottom in terms of cost, the only way you can sustainably keep cutting costs is by cutting corners and sacrificing craftsmanship. Our society seems to sort of value cheap, quick. The obsession with efficiency and deadlines and timelines and costs. Cost, time. Let's all just get going. Well, you know, our biggest goal is to just get you to sign a contract. It's a numbers thing. It's throw numbers at the problem, throw more bodies. More bodies means faster time. Meet specs. It's done. I've worked at a couple other places where people were actually doing the work, didn't talk to the clients. There was always the business person whose job was to say something to the client. A lot of companies just start with the goal of business, to make money, to hire people. But we kind of started with a higher goal of invention. When you start a company, the second thing you do is rent an office. We didn't do that. They knew they wanted to have talented people who were deeply invested in the Drupal community, but those people lived all over the place. We're in Ecuador, Spain, the UK, Canada, the US. They converged on this model from the Drupal community and from the open source projects that preceded it of distributed work. On the surface of it, the thing that makes the Lullabot the most unique is the fact that we're a distributed company. Everybody works from home or from their local public library or coffee shop. You start the day fresh, and if you didn't, you stop. I mean, you know, so you go in refreshed, you are with a team that is all very happy as well, so you're not dealing with the same politics. Trust is big within our team because we're hiring people and telling them, we're not going to watch you every second of the day. It's the discipline to find people that stand out enough to stand out across distance. I often say that the work that we do, what you get out of it as a byproduct is a website. The real thing that you get is someone that understands your business. Yeah, you need a website, but why? Websites can seem like a commodity on the surface, but they're doing some critical function within your business. They are interacting with humans. Every software project is different, and it's really hard to reduce any one software project down to a formula. We book our people 100% on a single project, so there's no jumping from one project to another and trying to get their head back in code that they haven't touched in a week. It's not where you're hopping and doing something and hopping and doing, you're really focusing, and so yeah, when you sit down for two hours, you are getting a lot done. It's explosive. I don't feel like a cog in a machine that just needs to do this task over and over again for no purpose. There's a purpose to what I'm doing, and it's part of this larger picture. The sum is greater than its parts. When the people who are part of the company are really valued as individuals, not just interchangeable units of billable hours, you can really tell in the decisions that get made. I've seen this over and over on the projects that I've been on where we go in and it's a client that's operated in a more traditional way. And by the time we leave, they have kind of adopted a lot of the things that we do because they found how well they work. In order to engage deeply with your work, you have to be able to find intrinsic value in the work itself and not just the end product. Is the work that you're doing shareable? Is it something that you want to pass on? One of the greatest tools of a designer is just fascination, like people who are just sort of fascinated with, wait a minute, how does that actually work? Like what happened? How does that get on the page? Like who does that? You can't innovate if you're not willing to take chances and make mistakes and figure out what works. And the fact that that's encouraged and embraced and supported at Lullabot means that the opportunities and potential is like ten times more than any place I've ever been. I secretly always wanted to be a Lullabot because I saw how much fun they had. I saw how they weren't just doing the same thing as every other company and they were actually enjoying the work that they did. A lot of that stuff early on just sort of felt like magic and we liked that feeling of magic. But as we kept growing and explaining to new people who came on like, okay, this is how we create the magic. This is how we create the magic. We started to realize, actually it wasn't so much magic, it was the values that made us us. Lullabot's core values. I know. Collaborate openly. Hold on. Be human. I got it. I got it. I think it's... Inspired in power. Have fun. Invent and innovate. Kick-ass. It might be it. And kick-ass. Our clients come to us because they ultimately want to take what they do and put that in front of other people and when you start to think of that in that context, it becomes really important work. Innovation is such a funny word in Silicon Valley but I really feel like our innovation comes from trying to create new systems, new ways of being, new ways of working, new ways of connecting. And it's an experiment and sometimes we fail but when it works, that's innovation. Thank you. Thank you. Thank you. It's okay. Thank you. Thank you. Stop. Stop the applause. So anyway, that's a little bit about us. We're very grateful that you came out to hear a little bit more about Lullabot and now we're going to talk about... Well, let me introduce us first. Mike, let's just go from left to right here and do a quick introduction. I'm Mike Hirsch. I'm Mike Hirsch. I was the lead front-end developer on the project. I'm Vargas. I'm the director of technology for SciFi. I'm Helena Zubka. I was another front-end developer on the project. My name is Seth Brown. I'm Lullabot COO and I had the great pleasure of actually being the project manager on this project directly. I'm Chris Albrecht and I was the lead back-end developer on the project. Awesome. So I'm going to turn it over to Jeff to talk a little bit about the inception. See, I'm using SciFi words. The inception of this project. Thanks everyone for coming out. I think I can summarize what we were looking to do with just one simple point. We at SciFi.com had a website that went back to 2009. So it was a legacy Drupal instance that had been dated. What we were looking to achieve was to have a website that did not suck. And the way that we needed to do that was to go to a responsive site, really use the imagery that we had a lot better, and then focus on a great video experience. The video player that we had was a little bit outdated. It was a little difficult to work with and it was also flash-based. There was no way we can get it to work on mobile. And for mobile in and of itself, we had a separate M.SciFi site that was actually a whole other content management system in and of itself. It sort of sucked down content through feeds from our site, but there was still some manual manipulation that we had to do almost on a weekly basis to get it to work. We were not exactly wholly Drupal on the legacy site. It was actually smarty templates on the front end. So we had two different things we had to work with, two different systems, not even counting the mobile site. We also had a legacy server. The legacy server was not Drupal at all. It was just PHP and MySQL. And we still needed it for things like running the schedule. So we had a very disjointed experience. And to add to the disjointed experience, if you wanted to watch full episodes on the site, you had to go to scifi.com. That was a totally separate site. It was also Drupal, but it wasn't managed by us. It was managed by a central group within NBC. So it looked similar to scifi.com, but the theming wasn't quite the same. Once we had the ability to actually merge full episodes into our sites, if we so chose, that's what we decided we wanted to do. We wanted to build a responsive site. We wanted to get a very responsive player that looked great, and we wanted to have a mobile site that did not have a separate interface altogether. To that end, we discussed a lot of these things with Lullabot about how we wanted to approach it, and we looked at our peers at NBCUniversal seeing what they were doing with their projects. We were, I think, one of the only ones that were still on the legacy platform. So in addition to building out a new fresh face, we actually had to handle the content migration. So that was definitely a task in and of itself that wasn't pretty, but it got done, and it really helped us keep the same looking field, keep the content fresh, and just present things in a brand new way that really makes you want to go to the site, click around, it makes you want to interact with it. Shall we pass on to it? Well, we're going to do a quick video here that's kind of about the project in the words of our client. We know you guys like video, or you wouldn't be here for the scifi.com presentation. And working with us, scifi.com's website was very much outdated. It was not responsive. It was difficult to program. There were a lot of customizations that essentially were hacks clunky. It lacked any sort of flexibility. And a lot of things were put together with duct tape and bailing wire. It didn't feel like a good showcase for a network that's doing new and innovative things. The channel started in 92. Like any other basic cable channel, it had very little original programming, but you're watching Astrolux on the scifi channel. And over the years, it's evolved to have a lot of original programming, most notably Battlestar Galactica a few years ago. And now we've got Haven, Helix, and 12 Monkeys. These shows are all about building these incredible worlds. And we can let people go even deeper with additional platforms. So say we all. So say we all. We all have that uncle or family member who has like a 1980 Chevy Nova they don't want to let go of. And then you have that uncle that has the really nice sleek BMW convertible. Prior to the new site, we had a lot of issues. I mean, one was that the site was on a very old back end that admittedly very few people within the organization still understood all the ins and outs of. It was quite old. If you had come to scifi.com before and you wanted to watch a full episode, you would go to scifi.com slash now, which was actually a separate website altogether. What we said is we no longer want to have two separate experiences. So we took two different websites and we merged them together. We ended up using a local company to help us with the front end design, a company called Work and Co. And they were really great at helping us to conceptualize and get the creative front end done. While we were doing that, Lullabot in parallel was helping with a lot of the back end migration. We were able to really stitch all of this together in a way that is not only easy for us to maintain, but it's a lot more meaningful for our site visitors and fans of the network. We provide a really unique, elegant, full episode experience for our users. We've got a new player that's scalable so you can scale your browser window to get the player any size you want. It lets us present the shows in a more cinematic way. The site just looks better and we can really showcase how gorgeous a lot of these shows are. If the fans had a really unique perspective or there was a fan that made a really great point, we could showcase that point, but whether it be a tweet or an Instagram photo on the home page of Hive.com. Updating the site now has gotten a lot easier. In our previous CMS, we had to go to over here to find one thing and do this over here and this over here. Now it's collected into a much easier interface to use. And it's given our content people more time to actually make great content and not wrestle with actually getting it on the site. Once you start putting code and pixels together and working, there's always a lot of questions. Even though Lullabot is a distributed company and they're sort of all over the world, there is always someone available to talk to you. We move at an extremely fast pace here. It's 360 miles an hour all the time and Lullabot was able to come right in and fit right in, get on our pace and get on our schedule, speak our language. There were a few instances, even when we were getting really close to launch, down to the wire and we were worried about sort of getting all the fit and finish done and we would wake up the next morning and see a couple of things that we hadn't even caught. They were actually getting fixed on the side because there was definitely a level of pride and work to make sure that the site sung as loudly as we wanted it to. So the site launch in January, you always sort of hold your breath when you flick that switch that morning and everything was really working right out of the gate. We left one day with an old website and we came in the next day with a brand new pretty website. And it worked. I think the newsci-fi.com is one of the best television websites that's out there right now. I think it serves our content in a way that is unique to us. It makes it feel big and aspirational. It looks and works so well and it's finally sort of up to the quality of a lot of the other things we've been doing in the digital space over the years. The redesign has impacted my job in two distinct ways. On the back end, the workflow has improved so the time that it took to get something done before is less. On the front end of things, because we have a whole new interface and a new beautiful way of presenting content, this makes me think of the things that we can do for our shows and the digital extensions of our shows in totally new ways. Now that the design has improved exponentially, the ideas that I can come up with or my colleagues can come up with have expanded. Alright, we have three more videos. So Mike's going to talk a little bit about the front end challenges that we went through with this site and give us a quick tour and then Chris is going to talk a little bit about the back end and we'll see how much time we have left there because New Media, if you're in the house, they have the next half hour. Alright, so Matt Krueger said on that video that it's the best website ever and he's right because I personally think the website kicks ass. There's so much cool stuff going on here and I'm going to get a little bit excited about it because it's really cool. So the first thing you're going to see as you scroll up and down is the crazy scroll interactions. So if you look, you see how in the top there's a latest episodes view and everything's kind of moving down and fading around and it's all binded to the scroll event. So as you scroll up, the opacity changes and the heroes transform in and out. So there's going to be anywhere between one and three heroes. Below that, we have what we call the tile feed. So the tile feed is fully responsive. It'll cycle between one and three columns. It does this really cool add review. You see that add reveal at the bottom right there? It's pretty slick. Just in case you guys don't know this, it's pretty cool. So you go down and you have a footer. Right now it's doing infinite, these infinite load more or infinite scroll or whatever it is. So we have a pretty cool schedule page. You can see right now we have Ginger Snaps 2 live on sci-fi right now. There's, we have, you know, time zone picker, date picker, all that cool stuff. We have a concept of a show microsite in here. So each, well not each show, but most of the shows have their own navigation at the top right up here. And if you go in here, they also have their own color scheme. So you can see that these hyperlinks are blue and if we go into the recap right here, you're going to see some of the highlights are blue. Those are being injected through like a style tag in the head. So out of the audience right here, do we have any front end developers? Because I'm curious. Sweet. What about back end developers? All right. Everybody else? I'm just kidding. So I'm going to talk a little bit about the front end and then Seth, when my time is up, he's going to make it sound like an injured llama just so to kind of let me know. So one of the main challenges for me is for me was making everything really performant. We had partially functioning mocks from the design agency, a working co. But the mocks were animating through, animating like the CSS top values and margins and stuff like that. Now when you're animating stuff, when you're animating stuff, you want to use transform, CSS transforms. What it does is when you're using transforms, it's not affecting the elements around it. So what that means is if I'm moving something normally, the browser has to recalculate everything below that. So it knows where to fit stuff. But if you're using transforms, it does it independently. And you can also promote those up into its own layers. So as the browser is rendering the web page, it's going to render the HTML, the CSS, combine them into what's called the render tree. And at that point, it's going to start painting the page. In a perfect world, you want to paint that page one time. But the thing about it is on a website like this, which is like, it's a really heavy website. You know, there's a whole bunch of images and cool stuff going on. It wants to repaint everything because we're moving stuff around on top of each other and animating opacity and stuff. So the trick is minimizing those repaints. So what we're doing is we're promoting everything into its own layers. So you can do that in a couple of different ways. There's like a CSS Will Change property. It's not supported across all browsers. We're using a Backface Visibility property, which is kind of a CSS hack, but it works really well. What that does is it promotes everything into its own layer. So if you're familiar with image processing or image editing programs like Photoshop where you have everything on its own layer, you can move the items around independently on their layers. And so what happens is all the browser has to worry about is what's called compositing. And compositing is just drawing the pixels to the screen. That's done on your computer's graphics, the GPU, which is a lot quicker. So there's a lot of cool technical stuff that's complicated, but I'm passionate about it. I think that's pretty cool. It's fully responsive. Let me kind of show you guys how it's responsive here. Let's move it over. So as we get narrow, you can see everything is a... kind of just does what it should do. The heroes will transition to a carousel, a flex slider-based carousel. And the reason that it does that is that these scroll events and touch-move events will not work properly on mobile because most mobile browsers will attempt to pause any type of animation as you scroll. So if you pause the animation while you're scrolling, you scroll down, everything's going to be jumping and it's really going to suck. So what we end up doing is we're using JavaScript user agent detection, and we also have it set. So if you go below 650 pixels, it'll load this flex slider. And you can see that the tile feed will go ahead and collapse into one column. Everything like that just works pretty well. It has a cool search functionality. It has awesome accessibility thanks to Helena and Chris. And gosh, I don't even know what to talk about. There's so much stuff. Oh, Packery. So we're using a jQuery plugin called Packery to handle all of the tile feed. Let me refresh this one more time here. So if you look at the tile feed, you're going to see a couple different things. You're going to see that there's some double width tiles right around here. I'm putting up my screen so you guys can see exactly. So I'm putting up my screen. And you can also see up here there's some half height tiles. And so the trick is to get everything to line up properly. And what are we going to do if there's an odd number of half height tiles? To tell you the truth, what we do is we end up duplicating a tile because we obviously need an even number. We have a whole bunch of cool JavaScript that stacks everything together. And we're leveraging the Packery plugin to push everything together. It works really well. Just to continue on the tour of the site, we also have the ability to sign into your local cable provider. Once you do that, we can try to do that, but that might be out of scope. We don't have too much time. All right. I think that might be my signal. Who's next? All right. A little bit really quick at the back end as well, I think. But no, this is, I mean, it's pretty thrilling. Was that a good llama impression? That is exactly what I expected. Okay. Hi everybody. So everyone caught everything that Mike said, right? All written down? There'll be a test later. Yeah, the front end is definitely the best part about this site. Mike did some amazing work in here. Some of the tricks to the back end were trying to get a lot of the architecture to work together. I'm going to try to get back to the right thing Chrome tab here that I'm logged into. So in terms of the back end architecture, we have a lot of, a lot of our content is fed in through feeds from services like there's one called TVE, television everywhere that gives you TV show programming with full recaps that's all managed in separate database that ties into a TV show that all comes in from a separate source and then we have our content team or Jeff's content team adding in pieces to really round it all out, adding in the right images to override what might be coming in from the feed or to add in character bios, profiles to augment what's already coming in. But most of this data is coming in from multiple separate sources. So the first thing we had to do was try and architect this system to make it easy to find the right piece of content you're looking for when it's all related to a separate piece of content that's coming from a separate source. So you've got a TV show that has separate episodes that might not have aired yet, you can't watch them yet but they have a recap with a textual description of it and then there are seasons for that TV show, certain characters appear on certain seasons, getting myself tied up and then you've got character actors playing those characters and it can become a really big tangled mess to try and show everything in the right place and get that data in a contextual nature to come together and form the right title. What character are you looking at? What season do they belong to? What season do they appear in? So the big challenge for us was, you know, we have a good homepage here which is a view of a number of different pieces of content from throughout the site, episodes, teasers, photo galleries, all sorts of things like that. But then when you get into the TV show micro site level is where we have a little bit of complexity so that's what I'd like to talk about. We'll use Bitten as an example. So when you get into the TV show, as Mike was showing, we have a separate menu for the TV show. I don't want to log in yet. And it's going to be hidden here by my admin toolbar but we'll jump back to the original one. That would still show on the side. You have your main site menu now hidden off to the side. Everything back to the TV show, you have a cast and info page, videos for that TV show, separate photo gallery, browse through each episode. And then each TV show has the ability to add custom pieces at the end if they have their own blog and we gave them the ability to create certain TV show specific external sites. Like... I'm afraid to see where this is going to go because they've added a lot since we've worked on it. But they actually live in a separate place and we allow them to link it in and use some of the same branding to piece it all together and make it look like one seamless environment. So this is... Let's load a flash site on this internet. I'll go back. So the piece I really wanted to show off here is we're using panels for every single page. We are big proponents of using panels, use content panes to lay out everything. When you start doing things like putting things in a views page or in a menu callback, you start to lose track of things. You get up with a spaghetti architecture and it's really hard for the next team to come in and pick up where you left off. And in the end, that's what we did. When all about left, Jeff's team had to take over and run everything after we had stepped out the door. So we wanted to make it as easy for them to find things and customize things as possible. And panels gives you that extra boost of the context awareness of where it is in the site, who's looking at it, what particular TV show you're looking at. It can take all that data and feed it through into things like views to get some really, really rich displays out of it. And I had an admin screen before. What happened to it? You might have to log in for me again, Jeff. Oh, it switched off. Here we go. So the panels, the meat and potatoes are kind of a panel's junkie. So every single page that we use is laid out in panels. If you go to a place on the website, you can go to a panel to find it. Some of the really fun ones to do were to try and get the cast pages and the cast member bios to line up with the right TV show and the right season because you have TV shows where certain cast members only appear in certain seasons. So if we look at... Let's go to... We really leveraged a lot of what we can do with the relationships in panels. Call these contexts here, not to be confused with the context module, which is the disclaimer. You always have to give when talking about panels' context. You can see there's a lot of pieces all put together in here about the node that's coming in. And then you can relate that to any other field on that particular piece of content. You can see with the feeds that we're bringing in there are a huge number of extra fields in here for all sorts of metadata about these TV shows. And then find your way to the season, to the right character and cast member. We go to... Episodes. Obviously you can see here a couple of different variants with each panel's page to link these pieces together. And that was able to give us this show microsite where each show has primary navigation, even though the regular main menu for the site is still hidden off to the side. Each one is unique, has a unique URL, but using panels in that relationship with the context we're able to tie it all into one thing. And having that sort of structure, having it all in panels, having the same views and content panes that we were able to reuse over and over again in different parts of the site, really trimmed down the amount of development time we needed. We have the same systems. How much time do I have? Lama? Minute or two? Alright. The other piece I wanted to talk about was the way we had to integrate videos and this fun little thing that we all love proved that you paid some big company a whole ton of money to go watch the TV shows. So you can watch an incredible amount of videos on this website for free, which will not load on this internet connection. I'm quite sure. You can see it's still trying. And there's even some full episodes you can watch for free. It depends on the licensing, but we had to figure out how to get that all to play in the right video players because they come from different sources and they're licensed by different companies and then also figure out a way to get the authentication piece to jump on here so that you can watch full episodes on the website. And one piece we didn't even talk about that goes along with that, you can watch live go back to the home page. We have a separate video player you can watch whatever's happening on sci-fi.com live on your computer right now and it does require you to authenticate the same way the other videos do. But that was I want to give all the credit to one of our contractors Mike Bailey who figured these pieces out. He had a Christmas miracle and actually got the videos all working on all devices that would support them at like 4 a.m. on Christmas Eve right before one of our deadlines. And that was a trick we had to deal with things like flash. If some videos were being fed in only through a flash player we had to figure out if there was an alternative so we weren't relying on flash or these authentication pieces using Adobe Pass to authenticate you to your cable provider and then bring you back to the website and store the tokens the right way. And then what happens if you're on a mobile device like an Apple device that doesn't support flash. So we had to try and bring all those pieces together to create that one seamless video experience. And the end result was that we had to go through all of the steps. Or do you want me to talk about that? Okay, I'll go for that then. And so this was a really cool piece that we ended up doing. To watch a full episode on your phone can be done. You just can't do it through sci-fi.com's website. At least for most full episodes. Some of them are free but most of them require you to be authenticated. So we have a system in place for deep linking into a mobile app called sci-fi now. And I'm not sure, do we have an Android version yet? Or has there been one? I don't know. I haven't checked at all. It's... No. Eventually. It's an iOS. It's an iOS on the app. Coming soon. So for iOS at least. When you go to one of those pages it'll have a little banner at the top like you see if you try and go to Twitter or anything like that. We have an app. Go get our app. If you have that app installed and you try and play that video it will actually bring up the app and bring that particular video or episode instantly. And it creates almost a seamless transition that unless you're watching for the whole slide across thing that Apple does you wouldn't even know what's happening. And then you have that video playing through the app which then reduces the lag of going through a browser to watch the video. But it's a very cool system. We have that all work together with each different video so it can deep link you right into that particular section of the app. It's not like, here's the sci-fi app now figure out the navigation, go through here click a bunch of buttons, go find the video you're just looking for it takes you and it starts playing right away. To clarify the reason why we have to have the app is for legal purposes. So since there's no DRM through that mobile video player we have to push you through to the mobile app. Yeah, it was interesting we had to actually during the process scale back the capabilities of the video player we were using due to the legal and DRM issues it's an HTML5 player it's responsive it's a beautiful video experience in general but pulling it together this is kind of the story of the project we were tasked when we took on the project we were told that video was a solved problem like that oh yeah, sci-fi already has a website it plays video that's going to work great for you and we had a big delay during the design phase of the project where the designs were happening and it was sort of just lining up the right vendor and then approving the designs this is something that happens to all of us I'm sure on our projects and by the time that the designs were approved and we were ready to go again when we got the green light to resume the project NBC ONTS which is a technology group had deprecated the video system that we were using which was an older version of MPX it used a different architecture within Drupal to connect videos to shows to episodes and all that sort of thing so we had to get a new player working with a and then we were given sort of three different options for how to implement video we used a company called the platform or NBC does and their video system is called MPX right and so we the options weren't very well documented nobody had put them into practice yet at the time and we ended up burning a lot of developer weeks culminating in sort of a three week long development sprint by one individual that was mentioned earlier that literally did finish on Christmas Eve at 4am at which point I was of course asleep and received a text that all it said was the baby Jesus does love us that was what I woke up to at 4am on Christmas Eve morning and believe it or not I was actually so happy to be woken up by that message because Jeff's boss Matthew was asking me pretty much every day like are we going to be able to make this timeline and we were sort of saying well we have a beautiful site it's everything's working it's responsive the design is fantastic advertising there the analysts but we don't have any video apparently that's a problem if you're trying to launch a video site so anyway we had a very near thing getting our site launched on January 5th 6th 30 seconds good times so we should probably wind down do you have anything I'm just pushing buttons on the screen let's open it up to questions I'm never sure why these projects are interesting to y'all whether it's how do big projects like this happen the technology the project management we'd be happy to field any questions yeah absolutely hi guys I'm wondering for the front end it's very very very heavy the parallax stuff going on all of that with images and video and have you taken a look at developing countries and sort of people who have older hardware systems and maybe not fast enough internet do you give them a different experience so the site supports down to internet explorer 9 internet which actually internet explorer actually hardware accelerates the animation which makes them pretty smooth the answer is pretty much cool there is sci-fi international sites so I know there's a different sci-fi Europe there's restrictions so in terms of getting sci-fi.com content depending on where you are you can't get some of our content if you're not within the US but you can go to one of the international sites for what they offer so it's strictly mostly licensing so you guys don't manage those other sites so being said I put a lot of work into trying to make everything as much as as performant as possible for like I always joke my mom's windows millennium machine you know will it work on that and you know the answer is yes it is a little choppy but she can get what she needs so yeah thank you and I'm working on telemundo.com which is I think the second greatest television website and we are also heavily panels views that's our whole back end basically and we are coming up against some performance issues with that we're about to start doing a bunch of refactoring and I thought before we dive into that I thought maybe you could comment or did you find yourself having performance issues or were you kind of smooth sailing yeah I think when you're using panels and views there's always going to be well in general you're going to have performance issues when you start combining that much data and doing those sorts of database queries especially when you're joining so many different pieces together like we were to get tv shows characters etc so the things to look into there we and we didn't talk about this at all we have two caching layers that sit on top of this website we have a varnish cache and an akamai cache yeah so here's the hardest part you can find windleers and Fabian Fran is talking about Drupal 8 caching it's going to be absolutely amazing but they talk about what the deficits are in 7 so here's the problem is that you can get around a lot of that stuff this site runs so fast when you have a decent internet connection nothing against you it's actually loading really fast here honestly but when you have to start clearing caches you run into these performance issues just because of the nature of the data and the things like turning on your views caching to try and get at least the queries cached that will save you some performance time so it's not rebuilding the query each time and depending on what they are you can also cache the resulting data so that can give you a little bit of a boost if you're rebuilding your caches panels does have the ability I believe to do caching at the individual pain level so there are different tricks here and there to kind of to help that along and then there are modules like the expire module with akamai and varnish to give you a little bit more control over which pages of the site get cleared when something changes so for example if you update a tv show then you need to expire that tv shows page and you need to expire the home page where that tv show might show up as a tile so there's ways to you can try and make that a little bit more efficient so things are expiring and being rebuilt in the right order but honestly when it comes down to sites like that with a lot of media a lot of database calls heavy database it's tricky to try and get around it in Drupal 7 so those are the tricks that we use to try and keep that to a minimum the cache time refloats at least Chris did we do any actual like slow query tuning of our own like where we were actually rewriting these queries or anything of that nature are you using stored procedures? no behind the caching layer was doing what it needed to do Wampie did a good amount of a good amount of performance optimization remember he got the cache clears to CCLs our cache clears were taking an extremely long amount of time go over a minute and Wampie did some performance improvements I don't know what he did that was features based features to compartmentalize the site it might be a similar issue though come talk to us Jordan we'd love to get more in depth and we can certainly help with those types of problems next question I was curious obviously you guys have a pretty big site all the pictures in the videos are they hosted on the same place as your website or are they in a different location? both so they all go through for all of the videos we ingest not just the video but any images that are associated with them and they're all stored locally in the website itself but using Akamai we leverage that so that it's not going to be as much of a slow hit to the site if you're pulling down high res images so Mike I had to put you on the spot but in talking about performance improvements with the front end there was a point in time where you were commenting on wow this thing is really slow we've got to fix it I just wondered if there was before and afters or stats that you recall that were worth noting because I recall that being a good thing that you really achieved so with profiling the painting and the frames per second it's really hard to get really straight profile accurate profiles there's like an FPS meter within Chrome and you can also use the Chrome DevTools timeline panel to measure that but the problem is as you're scrolling you're introducing the human element you know how fast are you scrolling and you know what's happening at that time so I had an attempt to automate that using jQuery animate to kind of move that down it wasn't working properly and James Sinsper and I attempted to debug it and I actually reached out to one of one of the Chrome's developers on Twitter, Adi Asmone who's really well known and intelligent who said it should be working properly but it wasn't so the long story short is I don't have any straight up um stats I can probably show you some stuff and there were some instances where I was doing something and fighting myself one end of the other and ended up fixing that but uh yeah yeah so Thomas is asking about JavaScript optimization um so the trick of that is to limit your recalculating of your style so every time you're using like an offset or you're recalculating something's position your browser has to do a relay out and when you does that of course you're taking up a lot of CPU time and the problem is when that's done in every single scroll event you start fogging stuff down so the trick is to group all those together and do them as little as possible so when you group them all together your browser is smart enough to kind of run it as one big operation I guess and get it done so there's a lot of that going on and then in addition to that it's um you know not doing simple things like not querying your jQuery selectors within every single scroll make sure those are cached and things like that which are should be obvious but just to make sure you're doing it properly yeah yeah there's a great site called jsperf.com it was made by Steve Souters who was the former chief performance engineer at google and what's really interesting about this is you can go in there and you can put in a method or whatever you're trying to do it'll tell you a couple of different ways to do it performance data on how to do it on which method is the most performant so if you're doing if you're doing these operations in every single scroll you can really optimize that by switching methods and some of the stuff that I looked at was one or two line code changes but at the same time it saves a lot of CPU power which might not even make a difference on a computer like this but like how my mom's windows millennium machine or someone else's machine whatever crappy machine they have it will make a difference we need more questions we are over time we were only supposed to go until 12.45 sure one more question would be great there's plenty of time for questions but don't feel like you have to stay out of respect if you want to get up and go no you have to stay Michael will come and get you so quick question about working with outside design companies yes I have an outside design company I work with a lot of Google developers and other developers how do you pass files ensure not pixel perfection but getting closed do you build specs, do they give you CSS prototypes so it was really difficult working code was awesome but there were some very weird things a lot of one off situations a living style guide through html but looking at the living style guide they built that after the fact they built the mockup what they delivered to us is they delivered three html mockups that were partially responsive they didn't go all the way down to mobile they maybe went from tablet to wide but and they also delivered a lot of photoshop mockups which were very high fidelity and they also delivered a couple mobile mockups yeah and some tablet wireframes yeah we used envision app are you familiar with envision app we used that to answer your question there were a lot of one off the living style guide would have been really helpful had it been followed it had been created and followed during the design process it's really important as a front end developer to be able to componentize to your design so if I'm creating a style I want to write that css once and then apply it in multiple places as opposed to creating little variations of css and it kind of became in the middle of it this project did answer your question or was I rambling yeah I think it was so many people do it different ways there was pattern lab you do really specific build specs that takes forever so it's really important to be flexible especially when you're doing when you're doing stuff once you see it live within html and as it's functioning things can change you might have a better idea and both the front end developer needs to be very flexible and a design agency needs to be flexible and once everything gets working together it's really cool and magical any other questions how big was the team? how long did it take? sure so it's a great question it was a fairly interesting project we started out with a team of three and then as we got closer and closer and worked deeper and deeper into the timeline and started to realize that we weren't going to hit our marks we decided to sort of test the limits of the mythical man month brooks law paradigm of adding more developers to a project late in the game actually usually results in a net slowdown is sort of the principle behind brooks law and because we were using Drupal because we had some fairly smart Drupal programmers who had done a lot of work within the NBC world and the NBC universe they all used something called publisher 7 which is a distribution of Drupal because of those factors we actually ended up doing sort of a holiday surge MSNBC one of our wonderful clients had kind of slowed down over the Christmas holidays and so we basically pulled that whole MSNBC team onto this sci-fi project and much to my surprise as the project manager and relief we were actually able to see some real gains and get finished by our deadline and I think primarily we have Drupal publisher 7 and sort of the consistency within the NBC ecosystem to thank for that pulling people from MSNBC on to sci-fi actually turned out to you know work who knew so like portray us with the surge everyone was very dubious but the surge worked on our timeline we had 11 at one point all yeah we went from a team of three over the holidays up to a team of 11 and then back down again well thank you so much everyone really appreciate your time and if you guys have any questions for us stop by hang out and party tonight at Hotel Figueroa ain't nobody like a lullaby sorry that's a great point tonight at 7 o'clock at the Hotel Figueroa