 or whatever you'd like to do to warm up. Yeah, I know how you can help her. I'm actually going to throw you the Google Doc or you can't follow the notes. Um, and then mention that it was a part of our core issue. In my head. We should prompt. Is it time? We have 30 seconds. Thank you so much for doing this. That was scary, actually. Good experience to get out of a panel. I was like, oh, I'm feeling good. All right. Hey everybody. Hey everybody. So, uh, I hope you're in the right room. We're here to talk today about SPARK. Um, and you might be asking, what the heck is SPARK? SPARK is, um, a couple of things. Primarily what it is, is it's an initiative to get, uh, really great authoring experience, uh, improvements into Drupal 8 core. Uh, but the method with which we're going about doing that, is we're actually building these tools on Drupal 7. First is a Drupal 7 distribution. Uh, for a couple of reasons. We want to, uh, you know, A, prove that these ideas can kind of work in a, in an air, you know, an arena where they can be iterated on really fast and the foundation isn't shifting below us. Um, and we also want to like, kind of see how these things work in the wild. So, you know, how, are people using them on real sites with real users and real content so we can sort of validate the approaches that we're taking. So, um, this was an initiative initially announced by, uh, Dries back around the time of Drupal Con Denver, uh, as sort of a, uh, a way of, of pushing authoring experience improvements to the, to the forefront of the development cycle. And why do we care about that? Why do we care about authors and their kind of things? Um, uh, a big reason why we care about that is because more and more, uh, you know, companies and, and organizations and other people like that are starting to realize that, you know, they have these people, content authors or content editors or whatever you want to call them who are sort of like the victims of Drupal. You know, it's like, we all build the site and it's all lovely and great and then we're like, there you go. And then we go off to build the next big thing. And these people are stuck using whatever we built for like 30 hours a week of just sitting there in front of it and entering content and editing things and stuff like that. And their experience with Drupal is actually really, really poor unless the implementer put an extra bunch of elbow grease in front of it, you know, configured WYSIWYG API, configured a bunch of views to put some dashboard things in that made sense and this sort of thing. And you know, a lot of times Drupal is actually losing deals even when it's a better system, you know, more flexible, more architected, all that kind of stuff just because there's so much upfront work that has to go into Drupal to make it usable by these people. And it really can't be put in front of content editors in its current state. So our process was we went about looking at a bunch of different alternatives to Drupal, not only just open source alternatives like WordPress but also things like Sitecore and CQ5 and some proprietary alternatives as well. And sort of, you know, did the map around like sort of the strengths and weaknesses of each platform. And what we found is that Drupal wins on the technical decision hands down. There's really nothing out there that can touch Drupal with its flexibility, its modularity, its architecture, all of the stuff that we love about it. But unfortunately on the authoring experience side it's extremely poor. And the proprietary solutions are kicking our ass right now. And worse, the open source, you know, other open source content managers are really starting to catch up and surpass Drupal as well. And that really leaves us in a tricky state because in a lot of these companies they've figured out that they can't trust the IT people to make these decisions on what CMS to use. They also have to bring in the victims and they're part of the choice as well. And so really what Drupal needs to do is impress both audiences out of the box. So we looked at what authoring experience looks like and we sort of divided it into nine different quadrants. Inline editing, workflow tools, content staging, media management, layouts, localization and mobile authoring. That's really what people that we talk to and we talk to large organizations, small organizations, individuals. This is what they mean when they mean authoring experience. And sort of mapped out how Drupal works. Drupal's great in workflow. There's a ton of really awesome contributing modules that can get us there with that. There's a lot of good options for media management, layouts, there's panels, display suite, things like that. But other areas like inline editing, mobile authoring, some of those were really poor and there's really no alternatives in contrib. It's like you couldn't actually get these features with contributing modules at least without a whole bunch of work. So the goal is to build kick-ass authoring experience for Drupal 7 so people can use it now and then propose it for inclusion in Drupal 8 core. And so that's what we've been working on since Denver. So who is working on this stuff? This is the Spark team. So Dries is the product owner. I am the engineering manager or as I like to say the calendar wrangler. Kevin O'Leary is our creative lead. He sort of takes all these different CMSs and he tries them out and he comes up with proposals. Whim Lears is our code ass kicker. He's working on the inline editing feature. Gabor Horstie is also known as a Drupal encyclopedia. He's been in Drupal project for like 10 years now or something? Nine. I'm sorry. Only nine. Step up, Gabor. Come on. Yes. And so he's been working a lot on the layout tools. Jesse Beach is our front-end ninja who has been doing a bunch of stuff on responsive design and building JavaScript applications. And then Preston So is a team member who takes Kevin's ideas and then bangs them out in HTML and CSS just without any Drupal as fast as possible so we can throw them in front of users and see how these guys work. And we do user testing with Darmesh? That's true. We also do user testing with Darmesh. I should adjust the slide to put his head in there. Who will use Spark? We kind of hope everyone will use Spark. The way Spark has been architected is Spark itself is just a distribution. It's just glue code around separate contributed modules that each are layered on top of existing community solutions. So for example, the edit module layers on top of the entity API, the field API pane editor or FAPE module and the aloha editor editor. Heimo? Heimo. I'm sorry. It's here from the aloha project as well as Rene to talk to you about that. Layout module layers on top of C tools and for now, panelizer and panels, all that kind of stuff. Although the way it's been architected it could also go on top of display suite or other things. And then the navbar module is very new. We just sort of banged it out in the last week so we could show something. Don't tell trees. Anyway. But we think we might layer on top of the there's a cool module called interactive information bar that's sort of an abstraction around toolbar design so things can insert and update. We don't know yet how this is all going to play out but these are what we're trying to do is find existing community like sort of plumbing pieces that work really well. Build a module that hooks them all together in a nice user interface and then use Spark as a means of demonstrating them. But hopefully these pieces can be reused in existing sites. They can be pulled into other distributions, whatever people want to do. So what's in the Spark road map? You know, kind of all the nine or I guess it's only seven things. We laid out content creation editing, page content layout tools, dashboards, blah blah blah. You guys can read. And where we're at with those things is we have implementation well underway for both the content creation editing and the layout designer things. So we'll be able to demonstrate that today. We have designs and prototypes for the dashboard workflow and mobile authoring stuff. And then the rest of that stuff we're not really touching as part of Spark at the moment. The content staging initiative is actually we were doing that as part of large scale Drupal and Neil Hastings from phase two over there is sort of leading the development of that project. It's called CSI, which stands for content staging initiative. There we go. Yes. Because you can't have an initiative without a goofy acronym. It's just a rule. So blah blah blah blah blah. How about you see it in action? Does that sound fun? Yay. All right. So this will be demoing is actually Spark Alpha 5 which is available on the project page. You can download it right now. Or if you go to demo.sparkdrupal.com you can also play with it there. But please be nice and don't eff it up too bad. Thanks. Okay, very quickly I'll show you the fun stuff on the front end. What we're looking to do with the layout UI is to provide site builders with a way to build layouts for their site that work in a responsive way, right? So we have a little preview bar up here that takes the layout associated with this page and provides you a view of that page with the mini queries and everything applying correctly. So if we go down into the administration into panels. So I'm going to go into the custom lines of panels and get the layout that's associated with that front page. So what we've done here is we've taken three separate elements and created an application that brings them all together. We have break points, grids and regions that all come together to provide a way for a site builder to define a layout on a per step basis. So we have a screen that's 320 pixels wide here a 760 pixel wide screen and 110 pixel wide screen which is a little bit bigger than this screen. One of the things that we're trying to do is to provide a means of creating responsive layouts that work with the way the browsers think about layout. So the regions that are presented here for each one of these steps are the regions that are defined in the DOM in the document objects. We don't allow users to present or create a layout that conflicts with the way that those regions are presented in DOM. So if I move my header A below header C that is going to create a DOM change eventually we'll inform the user but that's not... Ask them if they actually want to make that change. We're also experimenting with ways of producing columns and layouts that work with the way that grid systems today work. So you can imagine we've defined this region header B as a two column region region header C as a one column region and because the two together add up to three there's room for them to spread across that top row. And we do that again. So at the moment this is all working with panels if I save this it will be reflected on the front end when I'm down at a small size screen. Let's see what else we can show. It also provided a way to insert new regions so I can put a bunch of junk in there and have that added or do it among other ones. So the way that we've architected um... panels and layouts actually Gavra I'm going to let you talk about this bit because yeah who knows it the best. So basically I have four different objects. You have layouts which work from breakpoints and they work from grids and they work with regions. The simplest thing is regions. We implemented these as C tools exportable objects. Labels. They don't have any relation to your other regions. So you give them a label and you can export and push this to your site. And then we have grids which are a little bit more elaborate. These have pluggable CSS generators but we generate CSS for them out of the box. The reason we made the CSS grid tool is that we wanted to have meta information about your grids. So we know you have a six column grid that's like demoed here where you have padding or gutters going to be on the grid. And that's C tools exportable and can be pushed to your left side again. And then we have breakpoints that define all those points there that were applied to the layouts. So you can add any number of breakpoints and then say how wide they are and which grids are applied to your breakpoints. So you can have any number of breakpoints associated with any number of grids. And then these three data sources are combined into layouts where you actually added these things together and then the relations of them and the placement of them form what shows on the front-end. And if you see this on the front-end it's basically output as a panel and it's totally compatible with panel's IP. So you can like put stuff there, drag and drop stuff around or if you resize your window then it's going to adapt to the breakpoints that you were applied. That's it. Yay! Yay! So now we'll have Haimo demonstrate a little bit about the Aloha editor while I let him say what it is. But it's an HTML5 whizzy-wig editor. Plus, plus. Hello. Thank you, Angie. So my name is Haimo and I see as you guys like acronyms like you have the project LSD. In my company I'm dope. So in my experience that's a perfect fit, I would say. Well, let me say something about the Aloha editor. I was like building an inline editor in 2003 with IE 5.5. This was the first time content editable was implemented in IE 5.5. And then people continued to say why is editing so weird on the internet? Why isn't it like weird? That's much easier. I was thinking about what had Word done, what have Microsoft done to make editing easy. Some of you guys I see you are all young guys so maybe you don't remember. In the 90s, you had MS-DOS right? And if you wanted to edit some content you had to start MS-DOS Word. And you started typing and editing and you made something bold but you couldn't see anything. You had this 8025 screen you couldn't see what you were doing. So what you did is you printed the paper you waited you listened to the printer like line per line and after 20 minutes you could see oh god, I have missed some formatting. And what Microsoft did they put a paper on the screen and you could see actually what you were editing on the screen. The paper was on the screen so this was amazing. These days we don't have we don't exchange paper but we exchange information on the internet on websites. So why don't we edit websites as they are? Why do we have to load an editor in a frame or whatever? Why can't we just edit the content right? And with HTML we have a lot of opportunities to format content so you could make a website that looks like this. This is from Dastronaut he's showing some HTML transformations so you can do this with CSS you can make a website look like this. So what a really good editor these days should be able to do is to make this content editable as it is you don't have to pop up a screen or do something, you just click into it and you start editing. So this is what a low editor is all about. And we started doing this project and we wanted to make the web editable just as easy as that. But when it comes to editing stuff, you know, you usually don't have this weird formatting you have normal websites something like this and you want to edit content like this. The real problems in the world usually are not like make content like on the cube editable it's just let people type and format what they see, right? And that's what we try to do. And we care a lot about the user experience what does the user feel when he starts editing, what's the result? We don't care only about the users doing that but also the developers. I don't know if anybody of you has ever looked at the source code some editors produce so that's not that much fun, right? When I'm here in a low editor we also have some like tiny functionalities so we have this toolbar it looks like word which makes a lot of people happy but they feel good to see it's like word. We have these toolbars and when I want to make this word bold you usually have to select the whole word, right? But I missed the first character, right? So what happens is only part of the word is getting bold, right? So in a low editor we have a little tiny functionality. If a selection is collapsed and you click on bold what does that mean? A collapsed selection cannot be bold so probably you mean the word, right? So we make the whole word for you bold. So it's much easier to select things. But a low editor offers you also like table editing, you can jump through the table like you would do in Word and with a tab you get a new row delete rows, modify and do things. So this is all the functionality a low editor comes with. We also have like semantic formatting so if you want to say edit abbreviations, right? You click on the content, you see it immediately. What we do is like you see you have three abbreviations but the one I'm editing is highlighted and the one I type the change is immediately applied to the content. So you don't need to confirm or do anything else. So we think that confirming an action is something usually you don't need. When you do it you want to do it so why should you confirm it? Have you ever been in the elevator and you press floor nine confirm? It doesn't make sense to me, right? So this is one of the things but then we also have another thing like if you write something in Deutsch right, oh this is not really Deutsch this is Deutsch and you can annotate it with Deutsch, German so I don't see anything. So how the heck do I know that this has an annotation? So this is why we have the meta view of a low editor that means we outline the elements you're editing so you don't need to edit the source code because we show you the source we show you what you're editing and you see this is annotated content and things that you see immediately we don't need to annotate like Bolt or Strikes Through you see that but we don't need to annotate but all the other content is annotated and you can hear on this screen you can just edit right away but to be honest I mean Drupal is cool it has like 2% of the internet based on Drupal but to be honest people don't create content in Drupal where they really create content is still work so the major current in creation happens on Word and then that's kind of a staging right so they have this Word documents they send them around they do stuff and then somebody says okay you can publish that and then what happens somebody has a Word document something like this with annotations and everything and and it should appear on a website and you should respect the corporate identity so man that's a lot of work so I'm busy with that like half the day I would say so this is oh this was wrong so this is why we spend a lot of time to make like this very simple functionality with like copy-paste working so when I copy-paste this content here so now let's check let's check it looks good but now let's check if it's really good okay we have here man this Word is weird okay this is an h1 styling headline I don't know how you see it in this Word but it is h1 this is an h2 headline so let's check that we have an h1 we have an h2 this is italic oh we removed this color formatting because it's not in our corporate identity so it's not there we have the list, unordered list we have the table we have here combined cells but it's still working the table and we have a link look at that oh it has a title and now let's see if the link is correct oh this could be something that's broken so let's check how the link looks on Word okay look at the link this is very easy you know in Word it's very easy okay see the link is correct so we did the right thing and even the screen tip is correct that's awesome man so we have now the right thing on our website isn't that beautiful well maybe for the user it is now now wait a moment most of you guys are developers so first thing you do is you look on the source code right ah okay let's look on the source code oh that looks like more or less like it should look okay I admit we have some extra empty paragraphs that should not be but at the end of the day we have a pretty good table the links are working, the content is correct we don't have this spam thing we don't have this weird word thing so it's a pretty good thing you can work with I think and it's working with all kind of combinations so a low editor is working from IE7 on IE7 from IE7 on and we tested this implementation with XP, Windows 7 2003, 2010 in all combinations on the Macs and so on and weird things happening you know this list for instance in XP in XP 2003 these links have different class names depending on the language package you have so it's really really weird but we did it and if you want to see what you can do with a low editor you can do really really cool stuff then you should go to youtube and watch this video so that's all from my site thank you very much so pretty cool yeah so I just want to say one more shout out while we have the floor here the demo actually changed the license of aloha the entire project to GPL version 2 plus so that it can be used in Drupal so thank you and now Wim is going to talk about our implementation of aloha in Spark so as you can see aloha editor can do some pretty pretty damn cool stuff we are implementing currently only as subset but we are we have the possibility to add of course more plugins to add the entire possible feature set of aloha and it's actually quite easy to write plugins for aloha much like Drupal as modules aloha has plugins so currently with the edit module if this local site works okay great so this is spark alpha 5 as Angie said so all of this actually works on your local hose as well if you download and install it so this is just some kind of demo content and if we go to the regular way of editing it the way that we're all used to it's looking like this right it's a long list of fields really long list of fields with not such great UX for editing it and there's a bunch of tags here with no paragraph tags so no p tags, no br tags and so on so what we try to do is to make everything possible to edit everything on the front end where you see it so this only makes it possible to edit things that are visible but those are the things that make sense to change right if you're looking at something and you see a mistake you can quickly correct it because you can edit it in line so that's what I'm going to show you so once you toggle into edit mode there is some highlighting for everything that is editable so let's start with a simple field for example a boolean field you see a simple form you hit save and the text is updated right away so it's re-rendered each field separately can be re-rendered and displayed right in there let's see another simple one also works right away now let's look at a slightly more complex one let's just leave a tag here and that also works great but let's jump to the interesting part the WYSIWYG editing part as you can see our UI looks slightly different we are overriding parts of Aloha's default UI to make it fit in better with what we are doing the save and close buttons by the way are going away so it will look nicer eventually so let's start with simple things like balding and italics and whatnot but you can also do interesting things like automatic tabbing and if you then try to tab it further that actually fails because it doesn't make sense but if you go to the next one that does make sense so that is allowed by Aloha editor so this is all thanks to Aloha editor that this works in a sensible way now we implemented together with the Aloha editor folks one plugin which is a captioned image plugin and what we are doing is taking an image that is just annotated with a data-caption attribute to represent the caption as well as a data-align attribute to represent the alignment what we are doing is automatically adding a caption for that so we are rendering that around the image and now we can move things around along with the caption the way it should be and even more nicely you can actually edit the caption right in place thanks to Aloha editor and Aloha editor also has this really cool API called a repository API we are currently only implementing it partially we are only implementing it for links so if you are creating a link and you want to link to some content on your website instead of having to find that link manually you can just start typing the node title and it finds it and it is inserted right away so let's save this piece of content and look at the resulting HTML we can ignore those so as you can see right here we were looking at an image with a lot of extra markers around it to make the caption possible right here there is just an image tag with a source attribute and a data-align attribute and a data-caption attribute so Aloha cleaned up after itself and the other markup also is sensible so instead of having empty lines, line breaks really there is no ptext because that is what Aloha generates and that is what is sensible HTML and I don't know but I think this is pretty clean HTML so and that is actually the end of my demo as well so those are all the features in the new spark distribution so what is next Drupal 8 we have worked our butts off on this functionality for Drupal 7 that is what we spent the last 3 months working on and now what we would really like to do is we would like to shift our focus into making this stuff happen so it is available out of the box for everybody installing Drupal 8 so that we can start to be really proud of Drupal out of the box experience and make it really kick-ass especially as compared to our competitors so what can you do to help this morning all morning these poor people they would go up in a hotel room all day oh that is German I don't know what that is anyway we held a bunch of birds of a feather session this morning where we met with community folks that are involved in these things interested, end users, all kinds of stuff and we took a whole bunch of notes and these all link off to core issues where we will be discussing this after Drupal but a lot of things about the goals, the initiative people in the community have been doing sort of the community impressions that kind of thing and what we are trying to do is come out of each of these by the end of the week with a good roadmap of what needs to happen so like one such roadmap we can take a look at is the roadmap on the in place editing stuff so we actually have a core issue which outlines the battle plan for this and this was developed in concert with Daniel Kudwein Sun Dave Reed, Nate Quicksketch and kind of the community folks involved in this thing we have been having phone calls with them showing them our stuff it's a lot of work so we definitely need help we are hoping that if the community reception to this feels good then we would put a lot of effort into Drupal 8 core if it feels like we are going to get smacked over the face of the frying pan then we are probably going to stay on Drupal 7 so please don't smack us in the face of the frying pan that would be great we really want to fix a lot of these underlying things in core because these spark is an initiative that really helps transcend some of the other initiatives it touches mobile it touches the box and layouts initiative it touches a lot of different things so that we could help funnel some of aqueous engineering resources and then collaborate with community members and all this kind of stuff so that's what we would like to do following DrupalCon so yes thank you let us know what your feedback is after this session but we might as well just meet in the hallway because the bathrooms are way over in the west end so if you want to ask us questions if you want to sign up to help implement some of this stuff any of that kind of thing talk to us outside we'd be happy to talk we'll be at the conference there are two code sprints happening on Friday the one around the responsive layouts and mobile tool bar kind of things and another one around the inline editing WYSIWYG stuff so if that stuff sounds cool to you please come and join us and thank you, thank you for listening