 Hi. Good evening. Yes, so my talk is about how we've used Drupal to build news websites. So my name is Mark Kaluwag. I'm a project manager here in SPH. I'm part of the team who works on the news websites for SPH, namely Chase Times, Business Times, The New Paper, Berita Harian, and some other smaller sites. So all those sites that I've mentioned just now are all built in Drupal. Maybe more background. Personally, I've been building media websites for over 13 years already. So I think it's already my career path. There's no moving away from it. And then I enjoy the demands of news websites. I guess I could say it has very unique demands from other websites that are around. So maybe just a quick survey other than my colleagues here. Who else here works in a media company? No one? Okay, good. And then anyone else here who uses Drupal in there? Okay, just one other person, two, three. How about WordPress? Okay, more. So for those who use Drupal, are you using version seven or eight? Wow, nice. So the latest version. Good. Okay, so what is Drupal? So for those who are not familiar with Drupal, Drupal is an open source content management platform or CMS, content management system. It was started by Drace Booth as a message board in the year from the year 2000. So this was back when the internet was really starting. So it was just a message board for their university. And then from there, it has grown to be used. It's currently used for a lot of different websites for different functions and different requirements. So yes, it's an open source CMS started by, yeah, I forget to mention the other guy is Hans Nijsde. I'm not sure if I'm pronouncing the name correctly, but yeah, that's the other guy. And then, yeah, so Drupal is not just your regular CMS. There are a lot of CMSs out there like WordPress, Joomla. But I guess Drupal, like stated here, is an application development framework. So what does that mean? Drupal strongly encourages and, or actually it enforces or it forces developers to follow a common and structured approach in which leads towards modular, mittenable, operable code with common user interface. So what does that mean? If you're going to build sites using Drupal, or if you're going to start learning using Drupal, you may come into a term called the Drupal Way. So there are certain ways of doing things. If you're a PHP developer, you know, OOP, you know, all of these different concepts. This, as I would guess, we could say, a different approach that Drupal developers do things. And, yeah, if it can be for someone who's starting in building sites with Drupal, a lot of people say that first, actually personally my first impression when I started working on Drupal was that it's very bloated. There are a lot of things there that I don't really need. So for the projects that I've used, that I've done before, I opted not to use Drupal. I just used other applications or I'd build the CMS from scratch because it has the features that I need and not the ones that I don't need. But why is Drupal popular? Why is Drupal very widely used in the, a lot of sites are using Drupal? So like I mentioned earlier, Drupal is open source. Yeah, so Drupal is one of the few big applications open source applications out there. It's committed to free software development. And I think you won't see any Drupal flavors or distributions that will not be open source. Next is, and this is the big, one of the biggest applications that I've seen at Drupal, is the community. Not the minions, but the community. So there are over from, I'm not sure if this is correct, but from what I've read, there are over a million developers or content or site builders who are using Drupal. So I'm not sure if this is correct, but I'm not sure if this is correct. Content or site builders who are using Drupal. So these are developers, how to say, not just developer designers or even marketers. They use Drupal because a lot of things in Drupal doesn't really require you to know programming. So, and then touching again on the large community. So as a developer, let's say you're trying to work on a new feature for your website and then the best approach is to search on the Drupal forums and most of the time, more likely than not, you'll be able to find a solution already that has been done by someone else. And I guess a rule of thumb is if it's not there, it's either you're doing something that is very new or you should change your approach because the way you're trying to solve your problem may not be the best way to solve it. Okay, and then next is Drupal. It has an excellent security. A lot of people may argue that this is not true, but going back to the earlier slide, it's because of the large community of developers who are working on Drupal. A lot of, so if there's a bug or there's some security bugs that are there, a lot of, before it gets, maybe before you even learned about it, someone else is already working on a patch. And that's why the community is really a good for Drupal. So again, and other than that, Drupal is also used by a lot of big companies. So companies like NBA, Time Warner, I believe, media companies also like Al Jazeera, The Economist, and even government. So one of the bigger, more popular sites that Drupal is being used on is the White House. So even actually for Australia, the whole government website, network of websites is built in Drupal. They actually have already created their own distribution for government websites there. And then Drupal is modular. So there are over 36,000 modules out there, contributed modules. These are modules that are built by other people who wants to contribute to Drupal. So modules like for integrating with other systems, modules for managing media, so if you have something, like earlier if there's something that you need, most likely there's already a module available out there. And then also there are, I think over 2,000 themes. So if you're starting, you want to build your own website and you don't have a lot of resources, this is very helpful. And then aside from those, Drupal also have its hook system. So this is a way of how you could improve from what are actually on the existing modules. So you can maybe a module manages websites, sorry, a module manages videos. So you may want to be able to hook into this module to add more features. And it's very useful for all Drupal developers. Okay, then Drupal is very versatile. So aside from media websites, so like what we have here for SPH, there are over 585 distributions. So Drupal is not only used for brochure websites, it's been used for e-commerce. There's a Drupal commerce distribution. Like I said earlier, there's the government distribution on Drupal. And I think you can think of, you can build your own distribution and there are a lot out there also. So you can see the trend. And then Drupal's code is very good in a sense that it's built elegantly. So as a, personally as a developer, I like to see my code clean. I like to see it, you can say a nicely done code is more like a fun art I think that's a good mantra for developers because you could do it in a lot of different ways, achieving the same goal, but there's always a very nice way of doing things. And then it's very well documented. On the Drupal.org website, each feature in Drupal is very well documented. You can, and under those documents, there are a lot of thread of discussion. So you can, whatever problem you encounter, most likely someone has already been working on it. And finally, Drupal is matured. Unlike other CMSs, there are, you may find a lot of CMSs out there that are cropping up. They may look nice, they may have the feature that you need, they may advertise that. But the thing is you're not sure if their CMSs will be supported after a year or if there is enough community who will back up, who will back the development of that CMS. Drupal has been, version one was released in January 15, 2001. And currently it's already on version, I think the latest release was version 8.2.3. This was last year. And they commit to releasing minor updates every six months. So for this Drupal 8 version, you can expect more improvements. And then, yeah, reliable performance. So again, going back to what I've said earlier, Drupal has never been, it's not a fast application. So the philosophy of the large code basically is what powers Drupal. So this means that, like I said earlier, there's a lot of unnecessary bloat out there. But that makes it reliable. There are a lot of features out there with Drupal. And so what can be done to fix that bloat with Drupal as well with other applications, we heavily rely on caching. So are you anyone familiar with caching? Okay, so for those who, I like to try an experiment. For those who are not familiar, maybe you've read about this already from other websites. Okay, I'll give an equation. So what's 3,485,215 divided by 20,235? Anyone? You can use your phones. Okay. 150. Great, 150. So I'll repeat, what is 3,485,250 divided by 28,235? What's the answer? 150. 150. Everyone now knows what's the answer. So basically that's what caching is. So it only has to be done once, then the next time that you try to figure out the result, it's already available because it's like a short-term memory. So I think that's a good illustration of what caching is. That's not my, I think I saw, this is originally from a WordPress conference. Anyway, so enough about Drupal. So, oh sorry. Yeah, okay. So what are the demands and challenges of developing and maintaining news websites? So this is where Drupal comes in for us here in SPHS developers. So Drupal actually is, how to say, very useful for us. First thing, first thing is about multimedia storytelling. This is one of the requirements. One thing that I can say about editors is that they are not, they know what they want, but being able to communicate well with the developers, that's something that really needs to be, really need to be able to address. So a lot of times they have these ideas and then they will suggest solutions to you. But most probably there are better ways to do that. So as a developer, that's our responsibility to figure out what's the best way to provide that solution to our users, to our editors. So basically for news websites, they have a lot of different demands. They will need, let's say one article, they want to include a gallery or a slideshow or even add some videos or maybe even some poll from a third-party service. So as developers, we need to be able to provide solutions for this. So they may say, this plugin I've seen one website has been using, but this plugin may not work well with your system. So that's, you need to be able to help your editors to do their storytelling without being someone who says no. You need to be able to provide the solution. And then along with that, you'll have to make sure that the way they create their content is structured. Later I'll touch up on this necessity for the content to be structured. Then the next is, another challenge is challenging the print mindset. So if most likely they're decreeing from print, so they're used to having things pixel perfect. They want to make sure that an item is, let's say, two pixels away from the next item or 10 pixels away from the next block. Personally, I've encountered users who use a ruler in a monitor, in front of a monitor. That's something. Okay, but yeah, so print mindset is it really what we need in the digital age. So you need to be able to embrace the changing landscape of delivering your content. It's not what you see is what you get. Your content will always have to be able to adapt to wherever it is presented from. And then, so yes, if you can see the markup at the image there, maybe some of you have encountered this already where they use the We Civic Editor to have the layout that they want. So they hit enter several times just to have that gap. And then some We Civic Editor, if they highlight some text and then give it a hauler and give it a different font style, then you'll end up with having this type of markup, which is still valid, but it's not the best way to handle things. So for us, what we do is we try to come up with style guides so that they just apply classes for those specific items that they want to display differently. And then there's the urgency. So as a news website, editors demand that their content will be, they'll be able to publish their content as quick as possible, as easy as possible. And at the same time, they demand to be able to pull or remove that content. So that's one more demand. So for us, we need to be able to give them that security or that peace of mind. So they should be able to, because with our websites, they publish a story, it doesn't just go to the website, it goes to the apps, and sometimes it also sent to other third-party services. So we need to be able to make sure that if there is some content that they need to correct, that if not, they may be facing some legal problems, then that has to be addressed. Content curation, rules, and overrides. Okay, so another thing that is peculiar or unique to building news websites is, you don't just deliver content, let's say your homepage or your landing pages. You can't just always say, display the latest story. Because for news websites, the latest may not be the most important story. So they should have the flexibility to present the content that they want and in a manner that they want. So let's say this article is important but not as important as this article. So I need this article to be a little bit smaller to occupy a smaller space in the homepage. So that is the requirement from a lot of editors. So that's one thing that we're also addressing. And then like I said earlier, agnostic content and shareability. So when you build or when your editors create the articles, they must keep in mind that this article is not only on the website. It goes to the app, it goes to a lot of different devices. It's not only what you see, the same way as you see it on your desktop. So you can't go with, let's say, you put an image and you put a caption, left person A, right assailant. And then when you publish to the app, you lose that context already. So they have to keep in mind that all this will change. So I guess the best approach is to start mobile first with that. You know how you present your article in its most minimal form and then just add the features that you need for more advanced displays like web browsers in your desktops. So I like to give a demo of what we have. Wait, let me see. Do you still have time? Okay. Wait, I can't. Just create one. So this is the newly launched TNP website. So this is built in Drupal. So the layout is using a card layout. So it's very helpful for the designers and editors to be able to picture how they want to present their content. So you'd see here we have several types of cards, a card that takes up the full width of the page. Then we have all these different layouts, images on the side, image on top, a card that occupies a third of the page. And all of these different layouts can be controlled by the editors. For the Drupal developers who are familiar with Panopoly or if you're Drupal 8 developers, maybe using Thunder, the Thunder distribution. So, okay. So what that provides is a way for content creators to have a sort of whistle wig in managing the layout of the page. So here at the bottom I have this customizes page. So I can move things around based on how I want them. And all of these different story cards are controlled with different logics available to them. Like for this, this is an article that is pulled from a queue. Story cards by queue. In the back end I can create a new, let's say there's a, we have a breaking, we have news about upcoming elections. So I can create a new collection of articles for this topic. And then I can use this collection and pull them on your landing page or any of your listing pages. And then give each story a different layout. So the next time you want to update that page, you just update your queue. Then it just reflects on your landing pages. And then aside from that, you can even control the disposition of your ads, video players, other things like, you can even give them like building their own widgets. So for, let's say, pulling Twitter timelines or Facebook posts. So like, let's say, this example. So you just have to set the the URL, the tweet URL and then depending on the widget type, you may need to give the widget ID. So these are all available in Twitter. So from Drupal, we can create different systems or different types of panel pings for that requirement. Sorry? This is Drupal 7, the latest version of Drupal 7. So this is using a lot of different modules. But the main one is using panels. So panels has the has a sub module called IPE in place editor. So that allows us to to move things around on the page. And then the good thing about this is because with panels, you can do that already with the older version of panels. But this is panels with panelizer. So maybe getting more technical, but it basically creates a node type or let's say a post. So the landing page is actually a post. That means that they can update or let's say, tomorrow is a special day and I want to place different items on the top. Previously, you'll have to do it on that actual page. There's no way for you to do revisions or to schedule the updates. You have to, as soon as you do the change, make the change, it's out there for the public to see. But with this, you can change landing pages, home pages, and without making a mess. So create a clone of the page that you want. Do the necessary changes that you want to do. And then as soon as you're happy with the layout, you can either publish it directly or schedule it for publishing. And as soon as it's published, it will replace the existing homepage. Same for other landing pages. So that's very useful for editors. So you can also do a lot of different layouts. So all of this can be done with available panel panes. So like baby, this also is using a lot of help from Twitter Bootstrap. So just like Drupal, Twitter Bootstrap is bloated. But it's very useful, especially for nantechnical people. The documentation is very well written. And so if you're familiar with grid systems, this is a 12-column grid for each block. It's occupying four grids. So on our layout, they have these options. I want it to display four grids for wide desktop. I can modify it for different breakpoints. And then actually, we've already defined all these story card types are already defined in their style guides. So they can just choose let's say I want the card E and then everything is updated already. Eight, all eight. So seven, seven, seven, five, five, five. So these are defined in the style guide. So it helps the user or the editors to build their pages without really having to go very technical. And then there are also options to add additional classes here may be very specific to their requirement. Okay. With regards to the articles, let's say let's open this one. So the same thing. They can modify a lot of things with the articles. They can put in different pg elements, different layouts. And that's very helpful for Drupal 8 now comes bundled together with Siki Editor. So that's very good in the sense that it's more standardized. This is still Drupal 7. So we had to borrow a lot of concepts in Drupal 8 to get the things work. But yeah, so this is how an article in form looks like for us here in SPH. This is for TNP. So we try to also copy the same styles that are on the actual story pages so that when they see it here in the whizawig, they know already how as much as possible or as close as possible to the actual story. So yeah, they have a lot of options here for tagging, keywords, adding multiple images, different image layouts and different attach, can put more attachment, adding more bylines if needed or if, because for our articles, we have a set of bylines that are, let's say, these are the editors, but sometimes there are stringers, there are contributors that are not really part of the list of authors. So they can put custom bylines for this requirement and they can also add additional information like Jando, who corresponded from Malaysia, something like that. So yeah, this is how we build or this is how our Drupal system works for our news websites. Any other questions? The stuff that you are working on here right now, how does it go out to production just from here? Do you think it's published? Does it just go out to production or is it more like a database migration that has happened? How does this sync between what's the workflow like? Okay, there are a lot of different workflows depending on the need. A lot of, a lot of our print stories are created in a separate system. So early in the morning, we might create all those XML files to our system and then create the nodes, create the articles from there and schedule a publishing time of around maybe 6 a.m. For breaking news, they can either create the articles directly in Drupal or they can still use the same system which will then push the data to our Drupal system for publishing. But as soon as it's published, it's out there. So, let's say, so there's just a status, publish status. Normally, there are workflows for moderating like you want to push an article to needs review if you have an editor that wants to review an article. We could also have that although in practice it's not really I guess not practical with their requirements because they want to be able for anyone to publish an article as quick as possible without the need for moderation. So, if they really need that to remove an article, then it's they really, I guess it's more on from their site to make sure, regulate and make sure that the article that they publish is ready for publishing unless they they request us to provide that moderation option for them. Yes. At this digital content different from the what do you call it? The print content? It can be different. For digital content they can provide more additional data. They can provide more images or links to other sites that can add information to the news. So, that's mostly at video especially. They can have video on print. But sometimes they put the links to the video on the print also. What about mobile APs? Is it possible from the Yes. So, what we have, we have several systems basically. So, from all these articles we create several feeds. So, this feed will be pushed to an elastic search engine which powers the mobile apps. So, we try to standardize all the article fields or the schema articles so that it's easier to maintain all of them. So, if it's article from business times or article from ST we can handle them ideally with the same approach because they shouldn't be very much different. So, yeah. We... I'm sure what you mean by... Yes. Yeah, we build several custom modules for generating the feeds. But then from there we push it to another system to host. So, basically it's like a duplicate of the content already. So, what powers the app let's say the site goes down the app can still work without problems. So, it's a separate system. But we push it regularly and update also. So, what's the kind of load that you guys are getting? Like... How many visits or site visits? I mean, it's okay to... Yes, I'm not sure if it's a... Is it a... Yeah, we... Let's say for ST I can't traffic. But it's in the mill concurrent. Ken is working directly on ST so he's more informed. Yeah, so STs are most visited sites. So, all the other sites are a little less than that. So, how is the infrastructure like? Is it like one server, low balance? Is there a low balance between behind? Yeah, we have a lot of... So, we have different layers. So, we have a caching layer. So, first is we have a CDN. And then our web servers where we have the varnish. So, this is what... Well, there's also the load balance for that. So, we have multiple web servers. And then finally, we have the application servers. So, this is where the actual Drupal is. Right. So, how many instances are you guys running? There are a lot. For ST, I... Okay, fine. There are a lot. But it depends on, for all the other smaller sites, then maybe we just need one. But it's all hosted in-house. I'm willing for all Drupal sites. Almost all. Almost all. Okay, yeah. STOMP has a different requirement also. Yeah, so that's it. What caching system you are using for this? We have several layers of cache. So, we have... We cache in the CDN using Akamai. Then, we have varnish. And then there's APC for PHP, Memcache, and then Drupal also has its own inbuilt caching system. So, there are a lot of cache. Yes. I guess that's hosted on your own server, on your own... Which one? We have our own data center here in SPH. Okay. Any plan, you guys? Yes. It's still we're still on the plan, planning stage. A lot of the modules that we rely heavily and our current sites are still not much sure enough for Drupal 8. So, it's either we contribute back to the community, build the modules from our end or find and figure out the solutions for the Drupal 8 version. But, maybe we'll start with the smaller sites first. We have an NFS. Basically, it's in a separate system. Then cache on CDN. And cache also on the CDN. Okay. Anything, any other questions? Okay. Thank you.