Oct 17 2018
Oct 17

Your browser does not support the audio element. TEN7-Podcast-Ep-041-Steve-Persche.mp3

It is our pleasure to welcome to the TEN7 podcast Steve Persch, lead developer advocate at Pantheon.

Here's what we're discussing in this podcast:

  • Steve's background
  • Celebrating a Drupal birthday
  • Theater background and blogging
  • WordPress experience
  • Improv comedy and Comedy Sports gaining self confidence
  • Experience at Palantir in Chicago
  • Contributing to Workbench
  • Discovering Git
  • Teaching WordPress' Gutenberg editor
  • What the WordPress & Drupal communities can learn from each other
  • The 2018 Twin Cities Open Source CMS Unconference
  • WordPress, Drupal & Joomla
  • Supporting Backdrop
  • Alexander Hamilton
  • Steve Vector (alias)

TRANSCRIPT

IVAN STEGIC: Hey Everyone! You’re listening to the TEN7 Podcast, where we get together every fortnight, and sometimes more often, to talk about technology, business and the humans in it. I am your host Ivan Stegic. In this episode of the Podcast, Steve Persch, lead developer advocate at Pantheon. Steve has been on Drupal.org for at least 11 years, and before Pantheon he was at Palantir in Chicago. Steve! It’s my pleasure to welcome you to the Podcast.

STEVE PERSCH: Well, thanks for having me on! I guess I just missed my Drupal birthday again. The last one I remembered was 10 years. (laughing)

IVAN: Yea, it looks like more than 11 years. That’s a long time!

STEVE: Yea! That makes sense for what I was doing 11 years ago.

IVAN: How many versions ago is that?

STEVE: Well, I got into Drupal with 5. I think 5.0 was the current version when I started working with Drupal.

IVAN: I think that’s when I started too. Let’s see, 11 years ago would be 2007, so that’s when TEN7 was founded, so that would’ve been Drupal 5 for us, as well, I think.

STEVE: Yea. I’ve worked with WordPress a little bit before that, and, the first time I remember distinctly hearing the word Drupal was at an Arts & Business council of Chicago event. I was on a panel speaking about some WordPress sites I had made for a theater company, and one of the questions from the audience was basically, “WordPress seems to work with these blogs that you’ve talked about, what would be used for something more complex?” And, someone else on the panel said, “well, obviously, Drupal is the thing for that.” I made a mental note, started looking into Drupal because I knew I wanted to be building more complex sites.

IVAN: So, tell me more about those WordPress sites that you’d been involved in, prior to that. How did you get introduced to WordPress?

STEVE: I got introduced to WordPress because, well I wasn’t asked, I volunteered myself to build some blogs for a theater company when I was in college, between my junior and senior year I had a summer internship with the Looking Glass Theater Company in Chicago. It’s a prominent theater company that came out of the college that I was going to. I was super into what they were producing, very happy to have an artistic department internship, which mainly meant things like filing headshots, and running auditions, things like that. About three weeks into the summer internship I heard one of the artistic directors just kind of, muse aloud that they really should have a blog, because that was the thing to have back then. In the nineties they had produced a physical 'zine, and this artistic director, I think, was missing that kind of creativity and wanted a blog, and I had just taken a class on web development, so I volunteered myself, and basically, that summer changed from regular artistic department internship to Steve figures out how to build WordPress sites by the end of the summer.

IVAN: And that was WordPress early on, I would imagine, with version 2 maybe?

STEVE: Yea, 2 something.

IVAN: 2 something, wow! So, you’re obviously studying some sort of art degree then?

STEVE: Yea. I was a theater major at the time.

IVAN: Wow! A theater major. And now you are a lead developer advocate. That’s almost as crazy an arc as Drew's.

STEVE:  I know. Well, I think there are a lot of people in the Drupal community with a similar arc of basically being the person at some kind of organization, who somehow became responsible for the website, or volunteered themselves to be responsible for the website, and then just kept going from there. I think for, certainly myself, and I think a lot of people in the Drupal community, the web development career path looked more appealing then whatever was the other career path.

IVAN: So, let’s actually take a step back. I want to find out where you were born, and where you grew up. So, prior to landing in the WordPress development business in liberal arts college, where did you grow up?

STEVE: Yea, so, I spent almost all my life very close to Lake Michigan. So, I was born in Milwaukee, Wisconsin, same home all the way from birth through graduating high school, and then to Northwestern University in Evanston, just North of Chicago, then moved to Chicago for seven years or so, back to Milwaukee for four years, and now Minneapolis.

IVAN: So, tried and tested Midwesterner.

STEVE: Exactly. Yea. Love the midwest.

IVAN: That’s awesome. I love it too! So, you went to high school in Milwaukee, made a move to Northwestern, and studied liberal arts. And, you did an internship at a theater company, and somehow this led to Comedy Sports, right? I saw that in your bio as well.

STEVE: Yea. Comedy sports was even earlier. So, Comedy Sports is an improv company that started in Milwaukee, there are branches all over the country, though. The way I like to explain Comedy Sports for people who aren’t familiar with it, is by referencing Whose Line is it Anyway, pretty much everyone has seen that at some point in time. And, on that show they say everything’s made up and the points don’t matter, but in Comedy Sports, the points do matter. It’s the same kind of short form improv but it’s done as a faux competition. Basically, there are three people on two different teams, the red team and the blue team, and they’re competing for audience laughs and points, and things like that.

IVAN: And this was in high school?

STEVE: It started in high school, yea. I first saw it when I was in grade school and the high school Comedy Sports team came to visit my grade school, and do a show, and I thought that looks amazing, I want to do that. It further confirmed my choice of high school. I decided to go to the same Catholic high school that my parents had gone to. My brothers decided to go to a different Catholic high school in the area, but I wanted to go to the one that had a much stronger arts program. It was also coed, that was a factor in the decision.

IVAN: So, unlike me, you saw them do improv, and you thought, cool  ! I totally want to do that! (laughing) I look at that and I’m like, “Wow, that’s really scary. I don’t know how I could do that. I should probably do that to put myself outside of my own comfort zone.” What was attractive about it?

STEVE: I think what was attractive about it for me was, knowing that it was outside of my comfort zone. That it would push me to do something that wasn’t very natural. There are a lot of people in improv who are, natural, extroverts in doing improv, and it’s just kind of a natural extension of their normal personality. For me, it was more of an effort. It took me outside of my comfort zone, but it was something that could be practiced, it was at least in Comedy Sports, something very structured, so it is, of course, loose and comedic, and you’re making things up, but, especially with short form improv, there is a lot of structure there that I could hang on to and feel like I knew what was going on.

IVAN: The structure to me sounds really interesting to be put around something that’s supposed to be unstructured.

STEVE: Yea. One thing I’ve noticed. I did improv starting in high school, age 15 or something. I was heavily involved in improv really all the way through my time in Chicago, which ended in 2014, and then coming back to Milwaukee in 2014. I did start performing at Comedy Sports again for about a year and trailed off as I started the job at Pantheon and had a baby, basically, other things became more important. And, all through that time I found that people not doing improv assumed that there must be some trick to it, that we must be planning something out in advance. But, it’s not the content that gets planned out in advance. You don’t meet backstage and say “alright, we’re going to do a scene about a baker. And, the baker’s going to go on a journey, or something like that.” You might talk about the pace at which you want to play, you might talk about the styles or techniques, the improv techniques that you want to use, but the content is always made up on the spot.

IVAN: How do you think it’s helped you with your professional career? I’ve seen you give very many talks, and I’m always impressed by how eloquent you are. I’ve seen you on panels before. They must be related to the training you’ve had in improv, at Comedy Sports.

STEVE: Absolutely! The improv training gives me confidence to get on stage without a full plan. And, maybe that’s not always a good thing. Maybe I should be stepping on stage at a conference or something with more of a plan. But, it does help just reduce that anxiety, that I know I would be feeling, and do still feel, speaking at a conference or speaking at different work events. I still feel that anxiety to some degree but knowing that I have that improv background gives me more confidence to just start, then just do it.

IVAN: So, spending time in the theater, you started getting involved in WordPress. How long were you in WordPress before that panel discussion and someone mentioned Drupal, did Drupal become something serious to you?

STEVE: About a year. So, it was the summer of 2006 where I was starting with that WordPress site launched by Fall of 2006. Maintained those sites for a little while, and basically that senior year of college was a transition for me. I finished all my graduation requirements in fall, and just kind of pretended to be an undergrad through June, continued with my improv group, produced and directed a play, did all the undergrad activities, just didn’t go to any classes other than my acting class. That then gave me more free time, to take on web work on the side. So, during that year I maintained a static HTML site, which gave me a great appreciation for server-side languages. Hearing Drew mention maintaining 5,000 static pages, I thought, “oh yea, that was formative for me too, having to maintain  the static HTML website for the theater company, that was however many hundreds of pages, and seeing there are menus that are kind of the same, but inconsistent, presumably because no one was paying too close of attention, and now it’s my job to pay attention to such things, and I’ll put it in PHP includes and eventually just switch it over to Drupal.” So, it was about a year, I guess, of thinking WordPress is the thing to switching to Drupal, as the thing that’s going to help me build what I need to build.

IVAN: And, was that about the same time that you started at Palantir? Or, was there something in between there?

STEVE: Four years in between. So, I was a freelancer for a number of years. I did some subcontracting, started with a company called Mighty Bytes, got to have those pun names. Started there in 2009 and worked on, what for me then, was the biggest website that I had ever worked on. It was a music startup. I don’t think it’s around anymore called Music Dealers. Basically, the idea was if you are an independent music producer, or band or singer, or whatever, you could upload your MP3’s to this site, Music Dealers will then try to sell that to McDonalds, or film producers, basically, anyone making commercials, televisions, movies, and they’ll just give you a direct 50/50 cut of the royalties. That was an education in complex websites, kind of, trial by fire.

IVAN: Yea. So, then you started at Palantir in Chicago.

STEVE: Two years later.

IVAN: Two years later. Ok. And, had you ever contributed to Drupal.org before starting at Palantir? How soon did you start?

STEVE: In bits and pieces. So, in that time at Mighty Bytes, I was “the Drupal guy” and I would go to Drupal meetups, and I spoke at Drupal Camp Chicago in 2008, so I did have some community role and a few minor patches, but I kind of felt intimidated knowing that there were companies out there like Palantir, who had developers who, at least by appearance, were much deeper, and Drupal knew much more than me, and looking back there were things I was working on at Mighty Bytes that I could have, should have contributed back to Drupal.org, but for whatever reason I thought, well maybe this isn’t good enough, I need to work on it more, and would never get contributed. But, at San Francisco, DrupalCon in 2010, that was the first time I distinctly remember getting that really positive, contributor feel. Someone from the White House was there and they showed a list of modules that the White House was using, and one of those modules was a module that I had a patch in, and that feeling of, “oh wow,” I mean, it was a tiny patch in rules module, but just knowing that I had contributed to a piece of something that was inside of the White House was very satisfying, and basically gave me the Drupal bug even stronger than I had it then.

IVAN: Yea, there’s something about being able to contribute code, and it actually being used in production and affecting people’s lives that really makes you stop and think about the real power of open source, and what we’ve created in this ecosystem. And so, you’re at Palantir and Workbench is this thing you start working on. Was that a problem that Palantir was trying to fix, by introducing Workbench? What’s the genesis of that idea?

STEVE: So, I joined Palantir the month before DrupalCon Chicago, where Workbench launched. I started in February 2011, Workbench was basically getting polished up internally. Essentially, it’s a suite of modules that helps with content, workflow and governance. So, it basically provided a better landing page dashboard for people who are signing into the site to work on the content. Basically, an improvement over that admin/content view that you get by default. In addition to that base module of Workbench that was basically just that, landing page set of views, and a grid sort of thing. There was Workbench Moderation which was meant for publishing workflows, a draft needs review, published sort of workflow. and then Workbench Access which allowed for different content editors to have permission to different sections of the site. It was made because there were, I think, three major projects running simultaneously at Palantir before I joined, a university, a museum, maybe two universities, I’m not quite sure. But a couple of large institutions that needed those things, needed the ability to section off different parts of the site, so that only the appropriate people could edit pages, and they needed an approval process, by which people could move from draft, to needs review, to published, and possibly additional custom states. So, when I joined Palantir, pretty much everything was written. There was some testing to do, some clean up to do, and I was basically able to spend my first month on the job leading up to DrupalCon Chicago, finishing off a couple patches, adding some documentation, I think, and starting to think ahead towards what additional functionality might go into these modules.

IVAN: It’s quite an exciting time to be joining a company when it’s releasing a new site or releasing a new module, and DrupalCon is in the same city as where you’re based.

STEVE: Yea, it went from DrupalCon San Francisco feeling like, “I’m not quite fully in this community.” I kind of felt like a bit of an outsider at DrupalCon San Francisco in 2010, to then being hired at the company that, the owners of Palantir, were the co-chairs of DrupalCon Chicago. Of course, Palantir at the time had a ton of people who were top contributors and had a bunch of sessions going on at DrupalCon Chicago, so it felt like a fast track to the inside. Ken Rickard, the author of Domain Access, was one of the main authors of Workbench Access, so, yea, for my first week on the job, he flew into Chicago from Georgia, and, basically, started mentoring me, getting me ready to contribute to those modules. I had never used Git before, so that was something I had to learn quickly.

IVAN: That’s a major thing. (laughing)

STEVE:  Yea. That’s my advice for learning Git, just start, and don’t go back. I sometimes reference Git as an easy thing to learn, when I talk with other developers, and they look at me funny, and I think, well, ok, I guess it was easier for me because it was just a hard transition from SVN at my old job to all Git at the new job, and I could always lean over the cubicle wall and ask somebody for help if I needed it.

IVAN: I remember the days of SVN and CVS even, before that, and boy, those were tough days. I was so glad when we discovered Git and decided to just standardize on that.

STEVE: Yea, everything got faster and easier.

IVAN: Yea. Absolutely.

STEVE: My first version control was just Dream Weaver, check in, check out.

IVAN: (laughing) I think that still exists, doesn’t it? It must exist.

STEVE: It must! Yea. I think so.

IVAN: Cool. So, fast forward to Minneapolis, with a stop in Milwaukee in between, and you’re now at Pantheon, and you’re not just exercising your Drupal skills, you’re actually bringing back all of the WordPress things you learned long ago, as well, right?

STEVE: I am, yes. So, at Pantheon we’re a platform for both Drupal and WordPress development, so, it’s nice to play in both worlds. In fact, at the past couple DrupalCons I’ve done WordPress focus sessions. At DrupalCon 2016 I did Lessons from WordPress Core with Andrew Taylor, one of my co-workers, and then this year we did, Andrew and I did another session on the Gutenberg editor that’s coming to WordPress core.

IVAN: Do you spend any time at WordPress conferences talking about Drupal?

STEVE: I try to. I don’t think I’ve gotten any of those sessions accepted myself, but plenty of my co-workers have done that.

IVAN: So, it always feel like we’re up against each other as CMSs, right? WordPress does this better, and Drupal does that better, and we really have genuinely, passionate people in both communities. Are we really that different as communities?

STEVE: No! Definitely not. Well, I go back and forth on that question. In my time at Pantheon, so I’ve been here three years, and the first few WordPress conferences I went to, I thought to myself, wow, these differences are so completely exaggerated. I’ve been deep in Drupal for years, and I’ve been hearing that WordPress is totally different, and they’re still on PHP 5.2, they have different spacing rules. How could we ever work together?” As I went to, I think it was WordCamp US, basically, the DrupalCon equivalent in 2015, I went to some contributor like days, before the main event, and just thought to myself, “oh, yea, these are developers working in a GPL, Land Stack, CMS, trying to solve pretty much the same problems for pretty much the same sets of clients, and we need to break down these walls that don’t need to separate us.” In those three years, I’ve gone back and forth, like I said, a little bit, thinking, there are some differences. WordPress, I think, has done a much better job of keeping the end user in the community. There aren’t many decisions made in Drupal core, made by people whose job it is to use Drupal, like, purely through the UI most of Drupal is driven by people who interact primarily with the code, and that just changes the priorities changes what gets built. I guess one of the main reasons that WordPress has just continued to grow in its adoption wall, Drupal is at a similar spot to where it was years ago.

IVAN: What do you think the top things are that we can learn from each other as a community?

STEVE: I think the main thing I’d like to see Drupal focus on, as far as a lesson from WordPress, is to keep that focus on the main end user, as I look at, say the, the initiatives that are currently happening in Drupal 8 core. A lot of them are, sort of, two sides of the same coin. So, there’ll be an initiative that is developer focused, and then a separate initiative that’s basically what that will mean for the end user, and in WordPress those would just be one in the same. And, actually, in WordPress right now, there’s pretty much just the one core initiative of getting this new Gutenberg WYSIWYG editor finished, and merged into core, whereas, Drupal is, I think, working on literally 11 or 12 different initiatives at once. And as far as what WordPress could learn from Drupal, the modernization that’s happened in Drupal’s PHP code base, has been beneficial, and the fact that the WordPress is still on PHP 5.2, holds some things back.

IVAN: Yea, it certainly seems to. Have you heard of the Twin Cities Open Source CMS Unconference that Tim Ericson and Wilbur Ince are putting on?

STEVE: Yea, Tim was telling me about that a couple weeks ago. I think that’s a Saturday in October.

IVAN: Yea, I just found out about it last week, and we have an email out to Tim and Wilbur. I’m hoping to get them on the Podcast so that we can record something about that. It seems to be the natural evolution of these two or more open source communities living together, trying to talk to each other. Right? It seems like this is a way to get ourselves off of our respective islands.

STEVE: Yea. In Drupal we’ve talked about getting off the island so much, and that was, basically, the metaphor we wove through that DrupalCon presentation at New Orleans, that Drupal has a twin island essentially in WordPress. WordPress also has the same kind of getting off the island conversations, because they know that they’re about just as isolated from the wider PHP community. Perhaps even more so, because there’s not the composer bridge in the same way that there is from the Drupal community to the rest of the PHP mainland, as it were.

IVAN: Yea. And it’s not just WordPress and Drupal. Joomla still has a presence in the market.

STEVE: Yea, Joomla’s still around with a pretty decent market share. But, it must just be my filter bubble that I, sort of, very rarely encounter people using Joomla. I mean, of course, my job is to work with developers who use Drupal and WordPress, but for the market share Joomla, has, I’m surprised I don’t see it.

IVAN: I’m surprised too. When we first started working for clients, when I first started TEN7, we built a WordPress site, a Drupal site, and a Joomla site, and I kind of did that to see what the major differences were, and where we would hitch our bandwagon, so to speak, and Joomla I remember being…it felt like it was solving all the problems in all the right ways, and I guess I just lost touch with it.

STEVE: Yea, Joomla never really clicked for me. It must’ve been Joomla 1.5 at the time? In 2007. So, after hearing that person on that Arts & Business council panel say, “Drupal is what you need.” I did some more research and I came across Joomla, and kind of did the same thing of trying to figure out can I build the same basic functionality in WordPress, Drupal and Joomla. And, it seemed like I could, but Drupal just clicked for me in a way that Joomla never did. I never felt the same level of comfort in the admin UI, the way information architecture got built in Joomla just didn’t click for me the same way it did in Drupal.

IVAN: So, Pantheon is not supporting Joomla just yet?

STEVE: Correct. I suppose because we are basically providing PHP, we’re providing a database.

IVAN: That's the way to do it, right?

STEVE: We added WordPress years ago partially because this was before I joined Pantheon. But, as I understand the story, one of the major agencies using Pantheon basically, figured out how to make it work, and told the people at Pantheon at the time, “hey, we got WordPress running. Are we allowed to do this?” (laughing) And Pantheon basically figured out, “well, if you got it working already, we should make our real support for WordPress more mature.” There are people who run Symphony, Pure Symphony applications on Pantheon, and we don’t support it in the same way we support Drupal or WordPress. Like, you can open support tickets with Drupal and WordPress, and we’ll be able to help you to some degree, but if you got Joomla running, or you got a Pure Symphony app running on Pantheon, we simply wouldn’t be able to help you if it suddenly broke.

IVAN: And you also support Backdrop, don’t you?

STEVE: That’s a little muddier, in that it’s something that runs on Pantheon, because its code base is so similar to Drupal 7. It runs, but it’s not something that our support team is capable of answering questions on, the same way they’re capable of answering questions on Drupal and WordPress. So, it is in kind of a gray area, and that’s probably something that we should clarify.

IVAN: You should talk to Drew and see what he says. (laughing)

STEVE: Exactly. I’ll see if we can prioritize getting more Backdrop clarity, because there are some Backdrop sites running on Pantheon, but we don’t have it documented the same way we have Drupal and WordPress documented.

IVAN: What are you excited about in Pantheon right now? What’s coming up that you may be can tell me about, or can’t tell me about, that is really kind of making you itch?

STEVE: One thing that excited me relatively recently was hearing about the Drupal 9 announcement, that there’s suddenly much more concrete information that’ll inform how people migrate away from Drupal 7 eventually. I released a blog post about that last week with kind of an edu focus. I think the Drupal 9 timing announcement will encourage some people to stay put, basically, take it as a green light to just stick with Drupal 7 until Drupal 9 comes out. And, some people will take the timing announcement, but perhaps, more so, the release of 8.6 with a lot of front-end public facing, or end user facing features, that I think will prompt a lot of Drupal 7 site owners to reconsider.

IVAN: I think you’re right. I think you’ve hit the nail right on the head there. I’m excited for it as well. It’s a really interesting decision to sunset support with two versions at the same time.

STEVE: It’s supposed to be the case that moving from 8 to 9 will be the same level of complexity, as moving between 8.5 and 8.6, but we’ll only know when that actually happens.

IVAN:  Do you have any recommendation for a book that you’re reading right now, or a book that I should be reading, that you’re absolutely enthralled with?

STEVE: Sure. So, the Alexander Hamilton book comes to mind, because the Hamilton musical is in Minneapolis right now. I was lucky enough to see it with the original cast. It was the best birthday present ever. The play opened on Broadway in October of 2015, so it was the same month as my birthday, I started listening to the soundtrack, thought it was great, mentioned it to my wife Paige, and she, while I was at BADCamp that year, just decided, “oh, I’ll just get tickets.” There was a tiny window of time after it opened on Broadway, where you could, just get tickets, and we had to buy them for the next Spring, but, yea, we were able to see it in March with the original cast. The reason I bring it up as a book, is because, I feel like the book, of course, is longer and covers more detail, and the part that I like about the book that you get to some degree in the musical is, that these are just real people. They get mythologized in so many ways, in popular culture, but the depth of the book for me was one of the best ways of seeing the regular humanity of the Founding Fathers.

IVAN: Yea, I agree. I’m a big fan of Hamilton and I was able to see it in Chicago last year, with my daughter, who basically memorized the whole album, the whole book, and also has the book you’re referring to. So, I never really thought about actually picking the book up and reading it. So, now I think I’m going to do that.

STEVE: Yea, it’s pretty good.

IVAN: Well, thanks for the advice. And, thanks for the suggestion, and really appreciate having you join us on the Podcast. Thanks so much for spending your precious time with me.

STEVE: Thanks for having me, Ivan.

IVAN: So, you’re @stevector on Twitter and on Drupal.org. So, maybe before we sign off, tell me about Steve Vector. I should’ve asked about that before. How did that come about?

STEVE: Yea, you know. Calculus class, senior year of high school, there was a website we were supposed to sign into, basically a forum, and make conversation about Calculus, so I thought, “well, the username that I should have for this Calculus website is obviously Steve Vector,” and, I should’ve left it there, and just made Steve Persch my username in other places, but I did not. So, I’m Steve Vector, I guess, for the foreseeable future.

IVAN: That’s awesome. So, @stevector on Twitter and on Drupal.org, and on GitHub.

STEVE: Wordpress.org. Pretty much everywhere.

IVAN: And, I would assume you have stevector.com as well?

STEVE: Oh, I do. Yes.

IVAN: We’ll link to all of that in the show notes. You’ve been listening to the TEN7 Podcast. Find us online at ten7.com/podcast. And if you have a second, do send us a message. We love hearing from you. Our email address is [email protected]. Until next time, this is Ivan Stegic. Thank you for listening.

Oct 17 2018
Oct 17

Keyboard accessibility is vital, as many assistive devices emulate the keyboard. Using semantic HTML one can achieve an accessible User Interface (UI) with less code than non-semantic markup.

By managing and guiding focus with semantic HTML, developing an accessible UI is rather easy. Semantic HTML plays an important role in not only accessibility but SEO (Search Engine Optimization) as well. Although we are aware of it, it's often overlooked.

In September’s accessibility talk, Sarbbottam Bandyopadhyay shared the trade-offs of using semantic vs non-semantic markup with an everyday example. He also shared how to manage and guide focus. It was a brief presentation emphasizing the various aspects of keyboard accessibility. He concluded with a brief introduction to WAI-ARIA.

Sarbbottam is a frontend engineer, with more than 14 years experience. He currently works at LinkedIn. He is part of LinkedIn's core accessibility team, focusing primarily on web accessibility. He’s been involved with web accessibility since his Yahoo days.

Takeaways:

Keyboard Accessibility is addressed in the “Operable” principle of the WCAG: Web Content Accessibility Guidelines.

Many users with motor disabilities rely on keyboard navigation. Using a mouse or trackpad can be difficult because it takes a lot of fine motor skills.

WCAG: Web Content Accessibility Guidelines 2.0 - P-O-U-R:

P - Perceivable: Information and user interface components must be presentable to users in ways they can perceive.

O - Operable: User interface components and navigation must be operable.

U - Understandable: Information and the operation of user interface must be understandable.

R - Robust: Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

The WCAG 2 Quick reference guide has done an excellent job organizing and categorizing the POUR guidelines.

Many assistive devices emulate the keyboard

To be keyboard accessible, the website’s user interface must be navigable and operable via the keyboard. Arrows are used for widgets and groups; for example, radio groups or dropdowns.

Tab and arrow keys are used primarily to navigate. 

Enter and space are the primary keys used to operate.

Most common issues:

Mouse only interaction:

This an interaction that can only be accessed using a mouse or pointing device. There is no way a keyboard user can access this functionality.

No focus indicator:

Focus indicators visually identify the current active element on the screen. The focus indicator is often suppressed using CSS. As a result, keyboard-only users are not being able to access content or know where they are on the screen.

Sarbottom has developed a Chrome extension, called Focus Indicator, which forces focus on active highlighted elements.

Focus indicator is the equivalent to mouse pointer, so, 'focus outline: none' is equivalent to 'cursor: none'. We wouldn’t use 'cursor: none', so we shouldn’t use 'focus outline: none'.

Non-deterministic navigation:

It is expected that a tab press will focus on the next visible element in a logical order. The tab order must be in sync with the visual order. When the tab order does not match a user’s expectations, it creates a cognitive overhead.

To have deterministic tab order, avoid using positive tab indexes and CSS to change the visual order. Rely on the DOM (Document Object Model) order for for visual and tab order.

Efficient navigation:

A keyboard user expects the actionable elements in a dynamic apps UI to be navigated by a subsequent tab press.

We can avoid these common issues and pitfalls

Use Semantic HTML

  • It is not only important for accessibility, it is important for SEO
  • Semantic HTML allows the markup to be system, software, or machine interpretable.
  • Using semantic HTML results in less code.

WAI-ARIA

ARIA or WAI+ARIA (Accessible Rich Internet Application) is a set of additional HTML elements that enhance the accessibility of web content by providing extra information.

There are three areas of ARIA attributes:

  • Role - defines what an element is or what it does.
  • State - conveys the current state of the element.
  • Property - adds additional information to an element, like relationship.

Note: The semantic information provided by ARIA attributes supersedes the native HTML semantics.

The first rule of ARIA is to not use ARIA.

Focus management:

By managing focus, we can ensure that the dynamic interaction and UI transitions are accessible. On UI updates, focus the corresponding HTML node programmatically. An HTML element can be focused by JavaScript invoking the focus method upon it. Focusing a container programmatically serves as a guided context switch.

Any subsequent tab press will focus the next focusable element, which enhances the keyboard user’s experience.

Guided Focus Management:

Guided focus management enhances the keyboard user’s experience. It allows the screen reader to read out the textual content of the focused container letting a visually challenged user be aware of UI updates. There are situations when the focus cannot be shifted from the context.

WAI-ARIA can be used to provide spoken feedback.

To wrap it up...

Get romantic with semantic and focus on focusing.

YouTube Video

Accessibility Talks September 2018 - Sarbbottam Bandyopadhyay - Love Thy Keyboard

Links mentioned in the talk:

Drupal Accessibility Group

Join the Accessibility group on Drupal.org for hints, tips, discussions, and patch proposals to help make Drupal more inclusive.

A11yTalks on Twitter

Follow us on Twitter and use the hashtag #a11ytalks to follow the conversation.

Oct 16 2018
Oct 16

After more than half a year silence, this is now my third blog post within two days :)

This time I'm showing you, how you can automatically add another order item after a product has been added to the cart in Drupal Commerce 2.x. The most important info here is, how you can pass the pitfall of possible transient data problems here.

Prologue

Our use case was that our customer wanted to optionally sell warranty extensions with their products. The plan was to extend the add to cart form on the product page with a checkbox, which allows to add the warranty extension. Because this counts as an insurance and insurances are taxed especially in Austria and therefore VAT free, simply adding the amount to the product's order item was not a valid choice. We had to add extra order items for that. That would still have been possible to solve within a custom form submit callback. However, we prefer OOP based approaches, and so we just stored the info of checking the selection temporarliy and decided to react on this in an event subscriber later on. Commerce offers the CartEvents::CART_ENTITY_ADD event to react on the add to cart event.

Implement the event subscriber

I won't describe the basics of how to write an event subscriber in general here. The event we'll want to subscribe to is the \Drupal\commerce_cart\Event\CartEvents::CART_Entity_ADD and you'll receive an event of type \Drupal\commerce_cart\Event\CartEntityAddEvent. Let's assume we register a callback named addWarrantyExtension(). This would look like that:


  /**
   * Adds an warranty extension order item on add to cart event, if requested.
   *
   * @param \Drupal\commerce_cart\Event\CartEntityAddEvent $event
   *   The add to cart event.
   */
  public function addWarrantyExtension(CartEntityAddEvent $event) {
    $add_warranty_extension = doAnyCustomCheckWeNeedHere();
    if (!$add_warranty_extension) {
      return;
    }

    $my_custom_purchasable_entity = createTheWarrantyExtensionOrWhatever();

    // Don't do it like that. This can cause problems - explained below in the post!
    //$cart = $order_item->getOrder();
    // This is the right way!
    $cart = $event->getCart();

    $my_order_item = $this->orderItemStorage->createFromPurchasableEntity($my_custom_purchasable_entity );
    $my_order_item->set('order_id', $cart->id());
    $my_order_item->save();
    $cart->addItem($my_order_item);
  }

This is a shortened outline about we have done. But the most interesting thing is already mentioned in the code's comments above:

Beware of transient data problems

The original version of our code didn't fetched the cart by using $event->getCart() - I've simply overseen that this getter exists, neverminded and used $order_item->getOrder() instead. At first glance, everything seems to work nicely, but literally the last tests before going live with this features showed us some problems.

What happened? Upon adding a product with checking the warranty extension, the cart showed the product only. On a closer look, I saw the order item with the warranty extension existed, but the order's order items field only contained the product. A few tries later I saw that this issue can be reproduced every time the order entity was created before within the same request. If the cart existed before the requested, no problem occured. I've took another close look and saw that the order within our event subscriber already had an ID though, but no order items were set at all - so the originally added product was missing. Upon save at last, the product was in the cart, but our warranty item was missing.

However, as soon as I have started to correctly use the getCart() function of the event to fetch the order entity, I was no more having any problem. The product was present within the event subscriber, and the additionally added warranty extension was still part of the cart upon visiting the cart page :)

Oct 16 2018
Oct 16

Commerce ships with a default success message after adding a product to the shopping cart. This is done via an event subscriber, in order to be easy customizable. However, removing, replacing or extending existing services in Drupal 8 is a thing, not every developer is used to do. I'll show you, how easy this is.

I've seen the need for this requirement a couple of times during the last few days - once I needed it myself for muting the add to cart message on my ajaxified add to cart links. The same time I saw what Commerce Cart Flyout module is doing regarding this. And today someone asked for this in the Commerce Slack Channel.

I'll show you two use cases here: the one is completely removing the original cart event subscriber, the second one is extending and replacing the existing one, in order to stay silent on Ajax requests and keep the existing logic on static calls.

Setup

In both cases, we need to implement a custom module. I'm assuming that you're already familiar with creating custom modules, if not here's the official documentation on doing this. Let's assume that we call our module 'my_module'.

As we're modifying an existing service, we do not need to define a service within the module's service.yml file. Instead we need to implement a service provider. Defining a service provider is done with some little magic. We don't define it as a service (as it is providing services, it's one level above them), but we have to follow a strict naming policy in order to get it discovered. We have to place it in your module's top level namespace (Drupal\my_module in our case) and therefore directly in the "src" directory of our module. Additionally the name of this class is required to be a CamelCase version of your module's machine name followed by ServiceProvider, so in our case this is MyModuleServiceProvider. And we'll extend the ServiceProviderBase class. If you're interested in this topic, read more about service providers in Drupal 8 here.

Completely remove the original cart event subsriber

This approach is e.g. done by Commerce Cart Flyout module until version 1.4:


namespace Drupal\my_module;

use Drupal\Core\DependencyInjection\ContainerBuilder;
use Drupal\Core\DependencyInjection\ServiceProviderBase;

/**
 * Removes the add to cart message.
 */
class MyModuleServiceProvider extends ServiceProviderBase {

  /**
   * {@inheritdoc}
   */
  public function alter(ContainerBuilder $container) {
    // Remove the server side add to cart messaging.
    if ($container->hasDefinition('commerce_cart.cart_subscriber')) {
      $container->removeDefinition('commerce_cart.cart_subscriber');
    }
  }

}

It implements the alter() function and checks, if the container has a service definition called 'commerce_cart.cart_subscriber'. If so, it will be removed completely.

Extend and replace the existing service

This approach is less radical. We want to silent the message only on Ajax calls. So our plan is to replace the service instead of removing it. This is how our service provider will look like:


namespace Drupal\my_module;

use Drupal\Core\DependencyInjection\ContainerBuilder;
use Drupal\Core\DependencyInjection\ServiceProviderBase;
use Symfony\Component\DependencyInjection\Reference;

/**
 * Replaces the add to cart message.
 */
class MyModuleServiceProvider extends ServiceProviderBase {

  /**
   * {@inheritdoc}
   */
  public function alter(ContainerBuilder $container) {
    // Replace the server side add to cart messaging.
    if ($container->hasDefinition('commerce_cart.cart_subscriber')) {
      $definition = $container->getDefinition('commerce_cart.cart_subscriber');
      $definition->setClass('Drupal\my_module\EventSubscriber\CartEventSubscriber')
        ->addArgument(new Reference('request_stack'));
    }
  }

}

As you can see, we are not removing the definition, but setting a different class instead. And because we will need the request stack in order to distinct between Ajax and static calls, we will add an additional constructor argument and inject the request_stack service.

Next, we'll create the CartEventSubscriber class and place it into the directory src/EventSubscriber within our module's directory:


<?php

namespace Drupal\my_module\EventSubscriber;

use Drupal\commerce_cart\Event\CartEntityAddEvent;
use Drupal\commerce_cart\EventSubscriber\CartEventSubscriber as CommerceCartEventSubscriber;
use Drupal\Core\Messenger\MessengerInterface;
use Drupal\Core\StringTranslation\TranslationInterface;
use Symfony\Component\HttpFoundation\RequestStack;

/**
 * Replaces the original CartEventSubscriber from commerce_cart module.
 */
class CartEventSubscriber extends CommerceCartEventSubscriber {

  /**
   * The current request.
   *
   * @var \Symfony\Component\HttpFoundation\Request
   */
  protected $currentRequest;

  /**
   * Constructs a new CartEventSubscriber object.
   *
   * @param \Drupal\Core\Messenger\MessengerInterface $messenger
   *   The messenger.
   * @param \Drupal\Core\StringTranslation\TranslationInterface $string_translation
   *   The string translation.
   */
  public function __construct(MessengerInterface $messenger, TranslationInterface $string_translation, RequestStack $request_stack) {
    parent::__construct($messenger, $string_translation);

    $this->currentRequest = $request_stack->getCurrentRequest();
  }

  /**
   * {@inheritdoc}
   */
  public function displayAddToCartMessage(CartEntityAddEvent $event) {
    $is_ajax = $this->currentRequest->isXmlHttpRequest();
    if (!$is_ajax) {
      parent::displayAddToCartMessage($event);
    }
  }

}

We are extending the \Drupal\commerce_cart\EventSubscriber\CartEventSubscriber class and override its displayAddToCartMessage() function. Inside we first check, if the current request is an Ajax request. If it is, we do nothing. If it's a static call instead, we simply call the parent displayAddToCartMessage() function. That's it :)

Alternative solution

There's another way to extend existing services. You may also implement a decorator instead.

Oct 16 2018
Oct 16

Drupal Modules: The One Percent — User Password Reset Link Timeout (video tutorial)

[embedded content]

Episode 48

Here is where we bring awareness to Drupal modules running on less than 1% of reporting sites. Today we'll consider User Password Reset Link Timeout, a module which permits you to set the duration of password reset links.

Oct 16 2018
Oct 16

FinTech and the disruption it can cause to the traditional banking systems is now a hot topic of debate in the banking conferences. Global venture capital funds are super-bullish on this front and are accentuating investments in the FinTech companies. Thanks to the burgeoning demand of FinTech in recent times, more crowdsourcing platforms are letting artists or fledgling entrepreneurs to crowd-source capital from a large constituency of online donors or investors.

A sheet of paper with Finance written in bold letters alongside relevant icons and laptop, notebooks, pen, and plant pot placed around it


For instance, peer to peer (P2P) lending, the high-tech equivalent of borrowing money from friends, helps in raising a loan from an online community at a mutually negotiated interest rate. Also, digital wallet providers allow people to zip money across borders even without any bank accounts using handheld devices.

Amalgamation of these technologies, which goes under the umbrella term FinTech, is expected to metamorphose the way all of us use banking and financial services. And Drupal can act as the perfect content management framework for building a great FinTech platform.

A portmanteau of financial technology

[embedded content]


Financial technology, which is referred to as FinTech, illustrates the evolving intersection of financial services and technology. FinTech allows people to innovate while transacting business ranging from digital money to double-entry bookkeeping.

The lines between technology and the financial services are blurring

Since the advent of the internet revolution and later the mobile internet revolution, financial technology has grown multifold. Originally referred to   technology applied to the back office of banks or trading firms, FinTech now caters to a broad variety of technological interventions into personal and commercial finance.

According to EY’s FinTech Adoption Index, one-third of consumers leverage at least two or more FinTech services and more and more of these consumers are also aware of FinTech being a part of their daily lives.

FinTech encompasses the startups, technology companies or even legacy providers. Startups use technology to offer existing financial services at affordable costs and to provide new tech-driven solutions. Incumbent financial enterprises look to acquire or work with startups to drive digital innovation. Technology companies offer payment tools. All these can be seen as FinTech. Surely, the lines between technology and the financial services are blurring.

Origins of FinTech

infographics showing the history of FinTech with relevant icons against each yearSource: 16Best

In broad lines, the financial industry has seen a gargantuan shift over the years with the way it is leveraged in the times of rapid technological advancements. 16Best has compiled a brief history of FinTech which shows how the gap between financial services and the technology has got bridged over the years.

The gap between financial services and the technology has got bridged over the years.

In 1918, the Fedwire Funds service began offering electronic funds transfer. And while the Great Depression was ravaging the world’s economies, IBM provided some solace with its 801 Bank Proof Cach Machine that offered the means for faster cheque processing. Subsequently, credit cards and ATMs came into existence in the ‘50s and ‘60s.

In 1971, first all-electronic trading emerged in the form of NASDAQ. And in 1973, the SWIFT (Society for Worldwide Interbank Financial Telecommunications) built a unified messaging framework between banks for handling money movement.

1997 was the year which saw the emergence of mobile payment through Coca-Cola Vending Machine. Fast forward to 2000s and the present decade, a slew of innovations crashed into the finance sector with the introduction of digital wallets, contactless payments and cryptocurrencies.

FinTech is definitely re-inventing a quicker and more durable wheel as the world continues to witness a superabundance of new ventures refining financial services with technology.

Merits of FinTech

Bar graph showing statistics on different areas of FinTech


Financial technology has taken the financial services to a whole new level with a cluster of merits that it offers. Here are some of the major benefits of FinTech:

  • Robo Advisors: They are one of the biggest areas of FinTech. These online investment services put users through a slew of questions and then relies on algorithms to come up with an investment plan for them.
  • Online Lending: It encompasses all aspects of borrowing from personal loans to refinancing student loans which improves money lending.
  • Mobile payments: There is a growing demand for mobile payment options with the stupendous rise of mobile devices over the years.
Bar graph showing statistics on global mobile payment marketTotal revenue of global mobile payment market from 2015 to 2019 (in billion U.S. dollars) | Statista

Personal Finance and Savings: A plethora of FinTech organisations in the micro saving department have been helping people to save their change for rainy days and a whole lot of them rewarding customers for doing so. For instance, Digit allows you to automate the process of saving extra cash.

Bar graph showing statistics on personal financeSource: Statista

Online Banking and Budgeting: Online banks like Simple reward users for using their ‘automatic savings’ service and also offer a cost-effective option over a traditional bank. Leveraging online tools, they assist users to plan budgets and handle their money smartly from their mobile devices with minimal effort to meet their savings goals.

Insurance: New insurance models have been strengthening the FinTech space. Metromile, an insurance model, sells pay per mile car insurance.

Bar graph showing statistics on Insurtech industrySource: Statista

Regtech: Regulation Technology, which utilises IT to enhance regulatory processes, is one of the significant sectors where numerous FinTech app ideas have come into light around this domain. Regtech is useful for trading in financial markets, monitoring payment transactions and identification of clients among others. For instance, PassFort helps in standardising the online compliance processes.

How is Drupal powering FinTech?

Organisations offering FinTech solutions need to maintain a robust online presence. Drupal has been powering the landscape of FinTech with its enormous capabilities.

The launch of TPG Capital

Homepage of TPG Capital with a timelapse image of running cars on the road and trees in the background


TPG Capital is one of the major enterprise-level FinTech companies which has leveraged the power of Drupal 8.

One of the primary objectives for TPG’s marketing circuit was to harness the Drupal’s flexibility as a digital empowerment platform. They wanted the ability to make alterations to content on the fly and try out new messaging approaches. Simultaneously, the financial industry’s stringent legal and regulatory requirements called for a flexible TPG platform that would meet the specific needs of the sector thereby offering top-notch security.

Drupal came out as the right choice when it came to the CMS that would facilitate the TPG’s goal for mirroring their cutting-edge business practices and incorporate modern website design and branding.

A digital agency built a responsive, mobile-first site. It featured newer CSS features like Flexbox and CSS animations and minimised the site’s dependence on Compass by introducing auto prefixer. Moreover, Drupal 8 version of Swifttype was built for the search component and contributed back to the Drupal Community.

The launch of Tech Coast Angels

Homepage of Tech Coast Angels with two people working on their laptop


Tech Coast Angels are one of the biggest angel investment organisation in the US. 

Tech Coast Angels selected Drupal as their CMS of choice for its excellent features vis-à-vis user authentication, account management, roles and access control, custom dashboards, intricate web forms for membership and funding application, workflow management and email notifications.

Performance improvements were made by a digital agency to both the Drupal application and the server environments which brought down the costs to a huge extent by minimising the hardware requirements necessary to run the Drupal codebase in both staging and production environments.

With Drupal being one of the most security focussed CMSs, it helped a great deal in making amendments related to security of the site. Views caching were enabled and unnecessary modules were turned off on the production server.

Market trends

Bar graph showing global investments activity in FinTech companies


The Pulse of FinTech 2018 by KPMG shows that global investments activity in FinTech companies has been steadily rising with 2018 turning out as the most profitable year. It is only going to grow more in the coming years.

Infographics showing bubbles inside a box on the left and description on the right about the size of bubbles with respect to FinTech companies

In the coming years, the main trends in the asset and wealth management, banking, insurance and transactions and payments services industries can be seen in the illustration above.

Conclusion

FinTech is a great alternative to traditional banks. FinTech excels where traditional banks lag behind. In addition to offering robust financial services leveraging technological advancements, organisations offering FinTech solutions need to have a superb digital presence to offer a great digital experience. Drupal can be an awesome content store for an enterprise-level FinTech platform.

Drupal experts at Opensense Labs have been powering digital transformation pursuits of organisations offering a suite of services.

Contact us at [email protected] to build a FinTech web application for your business using Drupal.

Oct 16 2018
Oct 16

[embedded content]

Video sections

Bootstrap is a powerful front-end framework which helps you build sites and web applications faster by offering prebuilt CSS and JavaScript components.

Some of the CSS components it offers are a grid system, buttons, navigation, jumbotron and so much more. On the JavaScript side, it comes with a few useful items such as a modal, collapsible divs, carousel to name a few. Read the Bootstrap documentation to find out more.

Bootstrap in Drupal

If you search for “drupal bootstrap” in Google, the first result will likely be the Bootstrap theme. This theme is the most popular on drupal.org with over 150,000 reported installs. But as of this writing, the theme only supports Bootstrap 3, not version 4 which is the latest.

So if you want to use Bootstrap 4 you’ll need to use another theme until the Bootstrap theme supports version 4.

In this tutorial, you’ll learn how to configure and use the Drupal 8 version of the Barrio theme which uses Bootstrap 4.

Getting Started

Before we can begin, go download the Barrio theme.

Using Composer:

composer require drupal/bootstrap_barrio

Create Sub-theme

The recommended way of using a theme in Drupal is to first create a sub-theme. You’ll never want to use Barrio directly. If you need to customize how things look, i.e., change CSS and override templates, then do it in the sub-theme and not Barrio itself, this way you can keep Barrio up-to-date.

If you want to learn more about sub-themes in general. Check out the Creating a Drupal 8 sub-theme, or sub-theme of sub-theme documentation page.

Let’s now look at creating a sub-theme which pulls Bootstrap via a CDN, this is the quickest and easiest way to get started.

Create CDN Sub-theme

1. Go to the bootstrap_barrio directory and copy the subtheme directory into /themes.

2. Change the subtheme directory name to anything you want, I’ll change it to barrio_custom (everywhere you see barrio_custom, use your actual sub-theme name).

Now we need to go through the sub-theme and replace bootstrap_barrio_subtheme to barrio_custom.

3. Rename the following files:

  • _bootstrap_barrio_subtheme.theme -> barrio_custom.theme
  • bootstrap_barrio_subtheme.info.yml -> barrio_custom.info.yml
  • bootstrap_barrio_subtheme.libraries.yml -> barrio_custom.libraries.yml
  • config/install/bootstrap_barrio_subtheme.settings.yml -> config/install/barrio_custom.settings.yml
  • config/schema/bootstrap_barrio_subtheme.schema.yml -> config/schema/barrio_custom.schema.yml

4. Open  barrio_custom.info.yml change the name of the sub-theme and rename the libraries section from bootstrap_barrio_subtheme to barrio_custom.

From this:

To this:

5. Open barrio_custom.theme (formerly_bootstrap_barrio_subtheme.theme) and change the function name:

// From:
bootstrap_barrio_subtheme_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)
// To:
barrio_custom_form_system_theme_settings_alter(&$form, FormStateInterface $form_state)

6. Open config/schema/barrio_custom.schema.yml (formerly config/schema/bootstrap_barrio_subtheme.schema.yml) and change the following:

# from:
bootstrap_barrio_subtheme.settings:
# to:
barrio_custom.settings:

7. Open color/color.inc file and change the following:

// From:
'preview_library' => 'bootstrap_barrio_subtheme/color.preview',
// To:
'preview_library' => 'barrio_custom/color.preview',

8. Last but not least, open js/global.js and change the following:

// Change this:
Drupal.behaviors.bootstrap_barrio_subtheme = {
// To this:
Drupal.behaviors.barrio_custom = {

Now that you’ve created a sub-theme go to the Appearance page in your Drupal site and install your sub-theme by clicking on “Install and set as default”.

The front-end of your Drupal site should look something like the image below:

The actual Bootstrap 4 library is being loaded via a CDN which is the default behavior in the Barrio sub-theme and that’s why everything works without downloading the library locally. Of course, this can be changed and we’ll look at how to do that next.

Download Local Version of Bootstrap

In the sub-theme we created above, we’re pulling in Bootstrap through the CDN. Let’s configure it now to use a local version of Bootstrap.

1. Go to the Download page and click on Download in the “Compiled CSS and JS” section.

2. Extract the zipped file into /libraries directory in your Drupal site and rename the folder to bootstrap. 

The path to the css and js folder should be /libraries/bootstrap/css and /libraries/bootstrap/js.

3. Open up *.libraries.yml in your sub-theme, mine is called barrio_custom.libraries.yml and change the bootstrap section like so:

From this:

bootstrap:
  js:
    /libraries/popper/popper.min.js: {}
    /libraries/bootstrap/dist/js/bootstrap.min.js: {}
  css:
    component:
      /libraries/bootstrap/dist/css/bootstrap.min.css: {}

To this:

bootstrap:
  js:
    /libraries/bootstrap/js/bootstrap.bundle.min.js: {}
  css:
    component:
      /libraries/bootstrap/css/bootstrap.min.css: {}

Bootstrap 4 has two dependencies Popper and jQuery. Drupal comes with jQuery already and to save a bit of effort will use the bootstrap.bundle.min.js which comes with Popper whereas, bootstrap.min.js doesn’t.

4. Open the *.info.yml file in your sub-theme and change barrio_custom/bootstrap_cdn under libraries to barrio_custom/bootstrap.

From this:

libraries:
  - barrio_custom/bootstrap_cdn
  - barrio_custom/global-styling

To this:

libraries:
  - barrio_custom/bootstrap
  - barrio_custom/global-styling

5. Rebuild the site cache by running drush cr or drupal cache:rebuild or by going to /admin/config/development/performance and clicking on “Clear all caches”.

If the JavaScript or CSS file isn’t loading or the site looks broken. Make sure the paths in the *.libraries.yml file is correct and that the Bootstrap library is correctly in the /libraries directory.

Theme Settings

The Barrio theme allows you to configure a lot through the Settings page, which you can access by clicking on the Settings link after you’ve activated the theme. I won’t go through absolutely everything, however, I’ll mention some important settings.

To access the settings page, click on Appearance in the toolbar and Settings next to the installed theme.

Layout Settings

From the Layout tab, you can configure aspects of the layout such as the type of container, i.e., fluid or non-fluid and how wide the sidebar columns should be.

If you select “Fluid container”, then your website will be full-width with gutters on each side.

The “Sidebar first layout” and “Sidebar second layout” let you configure the width of each sidebar.

Components Settings

From the Components tab, you can configure the buttons and the navbar.

The most important section in this tab is the navbar. It lets you configure it without having to modify any CSS or SASS files.

Affix Settings

In this section, you can configure components like the navbar or sidebar to be affixed to the top when scrolling.

If you check “Affix navbar”, it’ll stick the navbar to the top as you scroll down the page.

Here’s an example:

Scroll Spy

In this area, you can configure the Scrollspy functionality in your Drupal Bootstrap site.

Fonts Settings

From the Fonts tab, you can configure what fonts will be used and icon set.

Colors

And finally, from the Colors tab, you can configure the color of the messages and how tables are displayed.

Color Scheme

One thing I do like about Barrio which is different to the Bootstrap theme is the ability to change the color scheme directly in the theme.

Now, this isn’t groundbreaking and Drupal’s had this ability for a long time, but being able to easily change colors without modifying CSS or compiling SASS is a nice touch.

However, there is a limitation on which colors can be changed. You can’t change Bootstrap colors: primary, secondary, success, danger, warning or info from the color scheme section.

So that is a quick overview of the settings page. My guess is you’ll spend most of your time configuring the navigation bar and grid layout. But do spend some time familiarizing yourself with the options available.

Bootstrap Library

Another way to load Bootstrap is by using the Bootstrap Library module. One of its benefits is the ability to change which version of the CDN library you want to use without modifying the *.libraries.yml file in your sub-theme.

1. Start things off by first downloading the module and then installing it.

composer require drupal/bootstrap_library

2. Go to the Settings page of your sub-theme and scroll to the bottom and from “Load library” choose how you want the library to be loaded.

  • CDN: This will load Bootstrap through a CDN.
  • Local non minimized (development): This will use the non minified version stored in the /libraries directory
  • Local minimized (production): This will use the minified version stored in the /libraries directory.

As long as you’ve downloaded Bootstrap and added it into the /libraries directory as explained early, the “Local non minimized” and “Local minimized” should work.

Bootstrap Library Settings

The Bootstrap Library module comes with a configuration page, just go to Configuration and click on Bootstrap Library.

If you choose None from “Load library” on the theme settings page, then whichever way Bootstrap is configured to load from this page is what will be implemented.

From this “Load Boostrap from CDN” section, you can choose if a CDN is used and which version. If you prefer to load Bootstrap locally, then select “Load locally”.

Then from “Minimized, Non-minimized, or Composer version” select which local version you want to use.

Form “Theme visibility” select which themes will have Bootstrap loaded.

Make sure you select your theme from the multi-select or the library will not load and your site will be broken.

From the “Activate on specific URLs” section, you can include or exclude the library on specific paths.

From the “Files settings” you can choose if you want CSS and/or JavaScript files loaded.

If you decide to use Bootstrap Library to load the library then make sure your sub-theme isn’t loading the library itself because you’ll end up loading the library twice.

Remove any library declarations from the *.info.yml file in your sub-theme. This will stop your sub-theme from loading the library.

Rebuild the site cache and you’re good to go.

Summary

The current state of Bootstrap in Drupal 8 is this. If you need to use Bootstrap 3, then use the Bootstrap theme. If, however, you want to use Bootstrap 4 then look at Barrio, Bootstrap4 or BootBase.

If you know of any good Bootstrap 4 base themes then please leave a comment.

Ivan Zugec

About Ivan Zugec

Ivan is the founder of Web Wash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 10 years and has successfully completed several large Drupal projects in Australia.

Oct 16 2018
Oct 16

You have already seen what Drupal blogs were trending in previous months, and now it is time to look at all the blog posts we’ve written. Here are the blog topics we covered in September 2018.

The first blog post was How to Backup a Drupal 8 Site. There are two easy and straightforward methods currently available for you to make backups of your Drupal 8 site. One involves the use of a Command Line Interface, while the other can be achieved through Drupal’s own GUI. We have looked through both methods in this post.

The second was a Michel van Velde in the shoes of one of Deloitte's Fast 50 companies. Read about what his company has achieved during one of the worst economic crisis in decades, what are his biggest contributions to the Drupal community, and what is his next personal project (a hint: it will involve drones).

We continued with a Recollections from Drupal Europe by a non-developer. Drupal Europe was my first larger Drupal event. Learn, how was Drupal Europe for a first-time to a non-developer person like me.

The fourth blog post was an Interview with Mike Gifford, Drupal 8 Core Accessibility maintainer. Read about what his company is striving to achieve, where he thinks has been a lot of movement in the last 2 years regarding Drupal, and on what contribution to open source is he proud of. 

And the last one was a Happy 5th birthday, Agiledrop!. Agiledrop was celebrating its 5th birthday, and for that occasion, we wanted to look at the past and tell the story about how it all started.

Those were our blog posts from September 2018. Looking forward to continuing having you as a reader!   

Oct 16 2018
Oct 16

CKEditor is the WYSIWYG editor that you'll see in Drupal 8.

The default installation of CKEditor has a lot of options, but you can also add more features. CKEditor is an open source editor and has a wide range of extra plugins.

One of our customers asked how they could add 'color",  "text" and "font family" buttons to their CKEditor. This tutorial will explain how to add these buttons to the editor.

Step #1. Install the Required Modules and Libraries

You will need three modules to follow along with this tutorial:

  1. CKEditor Font Size and Family
  2. CKEditor Panel Button
  3. CKEditor Color Button

Next, you'll need to install the CKEditor plugins from the official CKEditor site:

  • Create a folder called libraries inside the root of your Drupal installation.
  • Download the plugin files from the CKEditor site to the libraries folder.
  • Uncompress the files.

You can find the three libraries at these links:

  1. Color Button
  2. Panel Button 
  3. Font Size and Family

How to Install CKEditor Plugins in Drupal 8

The folder structure in your Drupal installation should look like this:

  • Log in to your Drupal site and click Extend.
  • Scroll down to the CKEDITOR section of your modules’ page.
  • Enable the 3 downloaded modules.
  • Click Install.

Step #2. Add Plugins to the Editor

In this part of the tutorial, we'll link our new plugins to our version of CKEditor.

  • Click Configuration > Text formats and editors.
  • Click configure next to the Full HTML format.

  • Scroll down and click Show group names, in order to add a group of buttons to the editor top button bar or second level button bar.

  • Create a new group called Font.
  • Click Apply.

  • Drag and drop the “Font” buttons to the group you created.

  • Add another button group and give it the name Color.
  • Drag the two color-related buttons to the newly created group.

  • Scroll down to the end of the page and click Save configuration.

Step #3. Test the Editor

Now we'll see if everything is installed correctly.

  • Click Content > Add content > Article.
  • Add some text and test the newly added buttons.
  • Make sure that the text format is Full HTML.

  • Click Save when you’re done editing and head over to the published article.

Summary

The CKEditor WYSIWYG core module in Drupal 8 can be enhanced with some additional plugins. They will greatly increase your efficiency as you work on your Drupal 8 content.

Thanks for reading!


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 15 2018
Oct 15

There are a couple of modules out there to ajaxify the add to cart form of Drupal Commerce, but I'll introduce to one that on top offers a real decoupled solution. Additionally I'll show how you can achieve a simpler version of that with only a few lines of custom JS code.

Commerce Cart Flyout

The Commerce Cart Flyout module is my clear recommendation when it comes to what of the existing Drupal contrib modules to use, when you want to have an ajaxified add to cart form. It provides a sidebar which will "flyout", when either the cart block is clicked or the add to cart button was pressed. The flyout allows to view the cart's contents, change quantities or remove order items entirely. The block includes an item counter as well.

The module is based on Commerce Cart API and provides a progressively decoupled cart experience. Both modules are maintained by Commerce co-maintainer Matt Glaman, who works for Commerce Guys - the company responsible for developing and maintaining Drupal Commerce, which is another pro argument in choosing this approach. Another plus is that Cart Flyout is highly customizable, offering nine different Twig templatetes for the output of different parts of the module. The JS logic is cleanly structured and built on top of Backbone to offer a wonderful separation between models and views. Thanks to Drupal's library management, you could even override single JS parts of this module with ease.

Custom coding

I really like Cart Flyout very much and also use it in certain projects. But these days I've decided to rather use custom coding to achieve an ajaxified add to cart experience. And here I'm showing you how and why.

Why I haven't used Cart Flyout in that project

Well, in the end, it was the sum of a couple of small factors that led me into this direction. First one was that the project was built entirely without an ajaxified add to cart logic. The site wasn't live at that moment, but development work was already finished by about 99.9%. So we already had a custom block showing cart and wishlist icons with item counters inside. Cart Flyout needs its own cart block, so I'd have to entirely swap my block, fully customize the Twig template of the new block and find a way to include the wishlist icon as well. I'd have to swap out one JS model of the Flyout module as well, including a quite small change. And the main driver behind the decision was that we are using Commerce Wishlist as well. As the flyout module entirely swaps the add to cart form, we would have had to hook into that one and re-add the wishlist functionality. Not a huge impact, but also requiring some changes, was the fact that we are currently using Commerce Add To Cart Link module for all product teaser views (overview pages, search results, etc)

So the sum of all these factors and the curiosity about playing around by myself with the Cart API were the reason, why I've decided in favour of a custom solution in that project. And that shouldn't be a very tough task to achieve. Given the fact, that this is developed for a specific project, where you know your existing markup, CSS selectors and the new markup you want to create, you can leave the overhead of making everything customizable via config and templates behind you and ease the path.

I also didn't need the flyout sidebar containing the full cart info. Instead I just wanted a simple modal overlay showing the information that product XY was added to cart. As we are using Zurb Foundation as our frontend framework, we wanted to use Foundation's Reveal component for showing this modal.

Of course I was also building up on the great Commerce Cart API module, as well as I've created the wishlist counterpart Commerce Wishlist API to achieve all my goals.

First, I've defined the MYTHEME/ajax_add_to_cart JS library in my theme, which looks like this (and despite the name handles both the add links and forms for both cart and wishlist). Please note that this code also involves updating of a item counter that is part of the navigation bar (updateCart and updateWishlist) - this could also be skipped for even more minimal solutions.


(function ($, Drupal, drupalSettings) {
  Drupal.behaviors.ajaxAddToCart = {
    getCsrfToken: function(callback) {
      $.get(Drupal.url('rest/session/token'))
          .done(function (data) {
            callback(data);
          });
    },

    addToCart: function (csrfToken, purchasedEntityType, purchasedEntityId, qty) {
      $('body').append('<div class="add-to-cart-ajax-throbber ajax-progress ajax-progress-fullscreen"></div>');
      $.ajax({
        url: Drupal.url('cart/add?_format=json'),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken
        },
        data: JSON.stringify([{
          purchased_entity_type: purchasedEntityType,
          purchased_entity_id: purchasedEntityId,
          quantity: qty
        }]),
        success: function(data) {
          var orderItem = data[0];
          var $overlay = $('#add-to-cart-overlay');
          $overlay.find('.purchased-entity').text(orderItem.title);
          $overlay.foundation('open');
          Drupal.behaviors.ajaxAddToCart.updateCart();
          $('.add-to-cart-ajax-throbber').remove();
        }
      });
    },

    updateCart: function() {
      var $cartCount = $('.store-action--cart .store-action__link__count');
      if ($cartCount.length) {
        $.ajax({
          url: Drupal.url('cart?_format=json'),
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          success: function(data) {
            var cart = data[0];
            var count = cart.order_items.reduce(function (previousValue, currentValue) {
              return previousValue + parseInt(currentValue.quantity);
            }, 0);
            $cartCount.text(count);
          }
        });
      }
    },

    addToWishlist: function (csrfToken, purchasableEntityType, purchasableEntityId, qty) {
      $('body').append('<div class="add-to-cart-ajax-throbber ajax-progress ajax-progress-fullscreen"></div>');
      $.ajax({
        url: Drupal.url('wishlist/add?_format=json'),
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-CSRF-Token': csrfToken
        },
        data: JSON.stringify([{
          purchasable_entity_type: purchasableEntityType,
          purchasable_entity_id: purchasableEntityId,
          quantity: qty
        }]),
        success: function(data) {
          var wishlistItem = data[0];
          var $overlay = $('#add-to-wishlist-overlay');
          $overlay.find('.purchasable-entity').text(wishlistItem.title);
          $overlay.foundation('open');
          Drupal.behaviors.ajaxAddToCart.updateWishlist();
          $('.add-to-wishlist-ajax-throbber').remove();
        }
      });
    },

    updateWishlist: function() {
      var $wishlistCount = $('.store-action--wishlist .store-action__link__count');
      if ($wishlistCount.length) {
        $.ajax({
          url: Drupal.url('wishlist?_format=json'),
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          },
          success: function(data) {
            var wishlist = data[0];
            var count = wishlist.wishlist_items.reduce(function (previousValue, currentValue) {
              return previousValue + parseInt(currentValue.quantity);
            }, 0);
            $wishlistCount.text(count);
          }
        });
      }
    },

    attach: function attach(context) {
      $(context).find('.add-to-cart-link').once('add-to-cart-link-init').each(function () {
        $(this).on('click', function (e) {
          e.preventDefault();
          var variationId = $(this).data('variation');
          Drupal.behaviors.ajaxAddToCart.getCsrfToken(function (csrfToken) {
            Drupal.behaviors.ajaxAddToCart.addToCart(csrfToken, 'commerce_product_variation', variationId, 1);
          });
        });
      });

      $(context).find('form.add-to-cart-form').once('add-to-cart-form-init').each(function () {
        $(this).on('click', '.form-submit', function(e) {
          var isWishlistButton = $(this).hasClass('add-to-wishlist-button');
          $(this).parents('form').data('button-clicked', isWishlistButton ? 'wishlist' : 'cart');
        });
        $(this).on('submit', function (e) {
          e.preventDefault();
          var buttonClicked = $(this).data('button-clicked');
          var purchasedEntityType = $(this).data('purchased-entity-type');
          var purchasedEntityId = $(this).data('purchased-entity-id');
          var qty = $(this).find('input[name="quantity[0][value]"]').val();
          Drupal.behaviors.ajaxAddToCart.getCsrfToken(function (csrfToken) {
            if (buttonClicked === 'wishlist') {
              Drupal.behaviors.ajaxAddToCart.addToWishlist(csrfToken, purchasedEntityType, purchasedEntityId, qty);
            }
            else {
              Drupal.behaviors.ajaxAddToCart.addToCart(csrfToken, purchasedEntityType, purchasedEntityId, qty);
            }
          });
        });
      });

      $(context).find('.add-to-wishlist-link').once('add-to-wishlist-link-init').each(function () {
        $(this).on('click', function (e) {
          e.preventDefault();
          var variationId = $(this).data('variation');
          Drupal.behaviors.ajaxAddToCart.getCsrfToken(function (csrfToken) {
            Drupal.behaviors.ajaxAddToCart.addToWishlist(csrfToken, 'commerce_product_variation', variationId, 1);
          });
        });
      });
    }
  };

})(jQuery, Drupal, drupalSettings);

Then I've added this library to the add to cart form, as well as to the add to cart links. Also I've added a class to the <form> tag for easier targeting and set the data-purchased-entity-type and data-purchased-entity-id attributes.

/**
 * Implements hook_form_BASE_FORM_ID_alter() for commerce_order_item_add_to_cart_form.
 */
function MYTHEME_form_commerce_order_item_add_to_cart_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  $form['#attached']['library'][] = 'MYTHEME/ajax_add_to_cart';
  // Add custom class to form.
  $form['#attributes']['class'][] = 'add-to-cart-form';
  /** @var \Drupal\commerce_cart\Form\AddToCartForm $form_object */
  $form_object = $form_state->getFormObject();
  /** @var \Drupal\commerce_order\Entity\OrderItemInterface $order_item */
  $order_item = $form_object->getEntity();
  $purchased_entity = $order_item->getPurchasedEntity();
  $form['#attributes']['data-purchased-entity-type'] = $purchased_entity->getEntityTypeId();
  // The order item's purchased entity reference won't be up to date, when a
  // different product variation was selected and updated via Ajax. The form
  // state stores it to 'selected_variation' then. Our product set entity on the
  // other side, does not store such a value, but is the purchasable entity on
  // its own. So we can safely take the one from the order item.
  $purchased_entity_id = $purchased_entity instanceof ProductVariationInterface ? $form_state->get('selected_variation') : $purchased_entity->id();
  $form['#attributes']['data-purchased-entity-id'] = $purchased_entity_id;
}

/**
 * Implements template_preprocess_commerce_add_to_cart_link().
 */
function MYTHEME_preprocess_commerce_add_to_cart_link(array &$variables) {
  $variables['#attached']['library'][] = 'MYTHEME/ajax_add_to_cart';
}

And finally, I've simply added the add to cart and add to wishlist to the page template, which will be hidden, until it get's the command to show up via JS. So I've added these lines to the very end of the page.html.twig (of course I've could also have chosen the html.html.twig file) (sorry that this code example is looking bad in the blog post - it got distracted somehow by CKEditor - you can also view it on a Gist, I'll mentioning in the end of the post):


<div id="add-to-cart-overlay" class="reveal" data-reveal data-close-on-click="false">
  <p><span class="purchased-entity"></span> wurde Ihrem Warenkorb hinzugefügt.</p>
  <div>
    <a class="button" href="https://www.agoradesign.at/blog/two-ways-ajaxify-and-decouple-drupal-commerce-add-cart-and-wishlist-actions/{{ path('commerce_cart.page') }}">zum Warenkorb</a><br/>
    <a href="#" data-close>Weiter einkaufen</a>
  </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>
<div id="add-to-wishlist-overlay" class="reveal" data-reveal data-close-on-click="false">
  <p><span class="purchasable-entity"></span> wurde Ihrer Merkliste hinzugefügt.</p>
  <div>
    <a class="button" href="https://www.agoradesign.at/blog/two-ways-ajaxify-and-decouple-drupal-commerce-add-cart-and-wishlist-actions/{{ path('commerce_wishlist.page') }}">zur Merkliste</a><br/>
    <a href="#" data-close>Weiter einkaufen</a>
  </div>
  <button class="close-button" data-close aria-label="Close modal" type="button">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

That's it :) I've summarized the above code in a Github Gist snippet for easier viewing.

Oct 15 2018
Oct 15

If someone sues you because your website has accessibility issues, it usually means they need you to fix said issues. Sadly, there will be those lawsuits where the complaint is trigger more by the desire of monetary compensation from a settlement than the present accessibility issues, but in either scenario, there has to be grounds for the complaint which means something needs remediation on your site. 

Why are we stating the obvious? Because it's not obvious to all who find themselves with a letter or lawsuit claiming that their website is inaccessible and therefore discriminates against individuals with vision, hearing, and/or physical disabilities under ADA Title III.

Defenses against inaccessibility claims that have been seen in the news include:

  • Websites aren’t included under ADA Title III
  • Even if they are, it’s moot in this case

ADA Title III Defense?

On October 31, 2017, a letter was sent to The Honorable Jeff Sessions, Attorney General, United States Department of Justice, and signed by sixty-one Members of Congress, urging the DOJ “to restart the process of issuing regulatory guidance regarding the Internet under Title III of the ADA.”1

Restart? Yes. 

In this same letter, the sixty-one Members of Congress reminds the Attorney General that the DOJ, in their 2010 ANPR, states “Although [DOJ] has been clear that the ADA applies to websites of private entities that meet the definition of ‘public accommodations,’ inconsistent court decisions, differing standards for determining Web accessibility, and repeated calls for [DOJ] action indicate remaining uncertainty regarding the applicability of the ADA to websites of entities” included in Title III. 

Unfortunately, the 2010 Advance Notice of Proposed Rulemaking2 where “the Department encourages small entities to provide cost data on the potential economic impact of adopting a specific requirement for website accessibility and recommendations on less burdensome alternatives, with cost information,” has been given a status of inactive under Trump’s Unified Regulatory Agenda released in July 2017.3 

On July 19, 2018, another letter was sent to the The Honorable Jefferson B. Sessions, III by the Attorneys General of 18 states and the District of Columbia on the same topic sent by the Members of Congress.4

If the DOJ recognizes that Title III is unclear, is it no wonder that site owners still try to claim that websites aren't included in Title III? No. 

However, as you read about website accessibility cases in the news, it’s clear that the courts have decided that it does. Whether it was the Winn Dixie case in June of 20175 that set the precedence or that the plaintiff in this case has brought other similar suits since then, it doesn’t matter. Compliance with the World Wide Web Consortium’s Web Content Accessibility Guidelines (WCAG), level AA is here to stay. Whether its WCAG version 2.0 or the recent 2.1, courts are ruling that these guidelines must be met.

So, what other defense can a business make to stop a website accessibility lawsuit? Other than remediating the problem?

Moot Defense?

If you aren’t a lawyer, you might be scratching your head right now. Moot? Don’t worry, you’re not the only one. Let’s start with a simple example.

Carroll v. New People's Bank, Inc.6

Filed in November, 2017 and terminated in April, 2018. First, please note the length of time required to adjudicate this case, only to have it dismissed. Here is a brief look at what transpired.

  • “NPB's website contains accessibility barriers, which Carroll alleges prevent him from using screen reading software to freely navigate the site.”
  • “NPB informed Carroll of its intent to develop a new website by letter in November 2017, prior to the filing of his lawsuit. In this letter, NPB stated that they had "voluntarily made a number of improvements" to the website and had "retained a third-party to develop a new website for the bank which [would] further improve [the website's] accessibility and client service feature-set."”
  • “Carroll argues that this new website does not render his claim moot because there is no guarantee that NPB will not revert to its former inaccessible website in the future.” 
  • “NPB has moved to dismiss the Complaint for lack of standing.”
  • “NPB contends that, in any event, Carroll's claim is now moot based on its voluntary upgrades made to the website after this action was filed, which upgrades Carroll does not dispute.”

Obviously, there’s more to this case than the snippets provided here. In fact, the case is interesting reading. Bottomline, NPB responded to Carrol’s letter, fixed the site, and the case was dismissed.

Haynes v. Hooters of America, LLC7

This next case isn’t as straightforward as Carroll’s claim being moot. This one is about getting sued twice for the same issue. Here is brief look at the ruling.

  • “On April 4, 2017, Haynes sued Hooters in the United States District Court for the Southern District of Florida …” In short, Haynes wanted Hooters to fix the accessibility issues on their site.
  • “Prior to the initiation of Haynes’ suit, on August 22, 2016, a different plaintiff filed a separate and nearly identical website-inaccessibility lawsuit against Hooters. Less than three weeks after the filing of that suit, the parties reached an agreement and settled their dispute (“Gomez Settlement Agreement”) ...”
  • “Hooters moved to dismiss Haynes’ suit, arguing that, because Hooters was in the process of actively implementing a remediation plan for its website, pursuant to the Gomez Settlement Agreement, there was no live case or controversy and Haynes’ claim must be dismissed on the mootness grounds.” They had until September 2018 to fix their site.
  • The district court agreed with Hooters and dismissed the case.
  • But, Haynes didn’t agree, and neither did the Eleventh Circuit in their June, 2018 ruling that “the case is not moot.” 

Again, there is more to this case that is briefly summarized here. In short, Haynes had no way to know or to ensure that the remedies being planned would resolve the issues he was having with the site. Therefore, his claim was valid. Yes, you can get sued twice for the same thing if the issue is still present on your site. 

Lessons Learned

There are four lessons worth mentioning. 

Audit Your Site Before You Get Sued

There is no argument that it’s going to cost you money to have your site audited appropriately for accessibility issues and ultimately remediated if problems exist. You could wait to see if you get caught but at that point, your costs include legal fees plus the audit and remediation.

Other costs include the negative publicity that can ensue. Web accessibility cases are hot topics and will remain so due to the lack of specific ADA regulations from the DOJ. People want to know how courts are ruling and that means numerous blog posts and speculation where your business’ name is spattered over the Internet.

Website Accessibility Insurance

Insure your site. You heard right. Insurance. You have a site right now. You think all is well. You have processes in place that audit content as it goes live to ensure there aren’t any issues. You have run an automated tool on sample pages and everything looks okay.

However, as a person that drives a car or owns a home knows, you can never predict when something is going to go wrong. That’s why you have insurance.

Don’t believe that such insurance exists? Think again. Beazley Insurance is working with Promet Source to offer insurance against ADA website compliance claims. Said policy includes up to $25,000 coverage for an accessibility audit and remediation if someone files a claim against you.

“In 2017, 7,663 ADA Title III lawsuits were filed in federal court — 1,062 more than in 2016.”8 “If ADA Title III federal lawsuit numbers continue to be filed at the current pace, 2018’s total will exceed 2017 by 30%, fueled largely by website accessibility lawsuit continued growth.”9 Add to these numbers the cases brought in state courts and it’s not hard to believe that you could get sued in the near future.

Move Quickly

If you get a letter, move quickly to remediate those items specifically noted. In the case of Carroll v. New People’s Bank, even if Carroll could prove standing, in the long run, NPB responded quickly and fixed the issues in the letter. 

Has Hooters moved quickly? How much money do you think Hooters could have saved in legal fees by taking down their inaccessible website and quickly replacing it with a simple, accessible website until their new site could be designed, developed, and launched? You decide.

Quick Might Not Be Fast Enough

It’s clear that people with disabilities are no longer hesitating to file suit for an inaccessible website. Whether they have standing or not, you could be faced with one lawsuit after another until you can audit your site and remediate it accordingly. And, given the findings in Haynes v. Hooters of America, LLC, the courts might let each lawsuit stand. So, circling back to the first lesson, have your site audited using automated and manual testing, get it fixed if issues are found.

Conclusion

Until the DOJ responds to the pleas of lawmakers across the nation to create specific regulations regarding website accessibility, courts will continue to review other cases to determine what’s moot or not. Don’t wait to find out. Get audited. Fix the issues.

If you don’t know what to do, Promet’s Accessibility Audit, Remediation, and Training Roadmap will help you end a current lawsuit and prevent any future lawsuits.
 

Footnotes

1. https://www.cuna.org/uploadedFiles/Advocacy/Priorities/Removing_Barriers_Blog/ADA%20DOJ%20ES-RD%20Letter%20-%20FINAL.pdf
2. https://www.ada.gov/anprm2010/equipment_anprm_2010.htm
3. https://www.reginfo.gov/public/do/eAgendaMain
4. https://www.cuna.org/uploadedFiles/Advocacy/ADAAGLetter71918.pdf
5. https://www.adatitleiii.com/tag/winn-dixie/
6. https://casetext.com/case/carroll-v-new-peoples-bank-inc
7. https://law.justia.com/cases/federal/appellate-courts/ca11/17-13170/17-13170-2018-06-19.html
8. https://www.adatitleiii.com/2018/02/ada-title-iii-lawsuits-increase-by-14-percent-in-2017-due-largely-to-website-access-lawsuits-physical-accessibility-legislative-reform-efforts-continue/
9. https://www.adatitleiii.com/2018/07/website-access-and-other-ada-title-iii-lawsuits-hit-record-numbers/
Oct 15 2018
Oct 15

A Drupal event is one such destination that I long to visit, each year. Plus, this one happening in Germany was a special one. Yes, you got it right, I’m talking about the Drupal Europe that took place last month at the Darmstadt, Germany. And to answer what apparently made this one a special Drupal event for me is that it was a community-driven event, the scale of which matches with that of a DrupalCon. Such enthusiasm and such efforts! Applauds and appreciation to the entire Drupal community of Europe and worldwide for having shown such a withstanding support for Drupal and making #DrupalEU such a massively successful event.

 

We Volunteer! 
Yes, did volunteer and contribute in order to do our share in supporting this massive and enthusiastic community-driven event called the Drupal Europe 2018. Isn’t that what is expected out of a hardcore Drupaler like us, who’s been a working aggressively for the community ever since 2012. We’re involved with the website part of the event and came up with a few bug fixes too. We intended to contribute on a way larger scale, but alas the time constraint and the work commitment. While not trying to redeem ourselves, but isn’t working on a Drupal project for a client is too a form of contribution done for the community?! Did just heard a yes from you!

Drupal Email

The Enthusiastic Event & Visually-Stunning Venue! 
Drupal Europe is said to be the biggest European Drupal event, by far. The event was organized at the Darmstadtium - a beautiful structure of modern architecture with a mark of history living in it. Yes, amidst the exceptionally designed modern Darmstadtium stands an old wall from history. 

Drupal Europe, 2018

The five-day event at this exceptional structure had almost 1000 Drupalers from across the world. The event was divided into three major areas; one, where the booths were set up by different Drupal sponsors, two, where the sessions were being conducted by the Drupal experts, and third, where the Bird Of Feather(BOF) sessions were organized.

 

Entire CMS Community Under One Roof! 
Drupal Europe spoke for and promoted Drupal extensively and dedicatedly. But that does also not mean shunning away from the entire open source community. Hence, a concept of ‘Open Web Lounge’ was also implemented at  Drupal Europe, like other open source community events. Here people from the entire open source community come under one roof to brainstorm and discuss relevant topics of the community. It’s an informal gathering where a bunch of like-minded people tries and contribute to the community with their solutions & suggestions. This is one of the healthiest things happening across all the community-based events.

 

Sessions, Booths & BOFs
A Drupal event is always about a host of things to do and programs to attend. So much so that one always misses out on several such things. So did I! But thankfully I also got to attend a series of sessions, which I completed cherished. Like the one on the ‘Autosave and concurrent editing in Drupal 8’ by Hristo Chonov,  ‘Drupal Diversity & Inclusion’ by Tara King & Elli Ludwigson, ‘The Way We Work’ by Kevin Bridges and Elli Ludwigson, and many more! Apart from this I also attended a couple of BOFs and walked through different stalls and connected with different people from the Drupal community.

Drupal Europe, 2018

A Perfectly Creative Prenote!
Yes, this time I’ll prefer sharing details about the prenote prior to that of the Driesnote. The prenote topped the list of fun events at Drupal Europe, 2018. Jeffrey A. McGuire, along with Campbell Vertesi, Adam Juran and others came up with the most creative and innovative Prenote ever. And the part that stole my heart was the recreation of ‘Imagine’ with a touch of Drupal in it. Just Phenomenal!

Drupal Europe, 2018

The Driesnote
One of the most awaited parts of any Drupal event has to be the #Driesnote, by the founder of Drupal - Dries Buytaert. He started with a goal to build a Drupal that people love, and shared the roadmap he has structured to reach this goal. He went ahead sharing the updates regarding the initiatives taken so far with the community members present at Drupal Europe. He also spoke about the marriage of React UI and Drupal, in order to improve the overall administration experience of the site. Like always, Driesnote was an insightful session to attend. Here’s the link to the entire Driesnote, for those who missed out on it.

 

The #DrupalCEO Dinner!
Last but certainly not the least! It was a night to remember with the senior level executives of the companies actively working for the Drupal community and the founder of Drupal himself - Dries Buytaert. And we feel privileged to be a part of this exclusive and prestigious dinner night. It’s a new initiative, initially started by a handful of CEOs of Drupal companies, which later got widely popular. Though an informal event, the DrupalCEO dinner is an event that brings out the best of suggestions and surveys from the leading Drupal-ers around the world.

The #DrupalCEO Dinner, Drupal Europe, 2018

This one was my first Drupal community-driven event and believe me, it was a phenomenal experience in itself. The enthusiasm and efforts of the community were soaring aloud of the strength of the Drupal community at large, which apparently translated into such a progressive vibe at the event!

Oct 15 2018
Oct 15
How to Create a Search Box with a Sliding Effect in Drupal 8

One of OSTrainings members asked how to create a search box with a sliding out effect. Their goal was to arrive at the search box similar to the one you can find at the top of Drupal's own website.

In this tutorial, you will learn how to create a search box that expands once you clicked on its icon. Also, while it stays expanded until you close it, it will keep blurring out your main menu.

We’re going to use a Bootstrap subtheme for this demonstration.

Let’s start!

Step #1 - Create a Bootstrap Subtheme

This tutorial assumes that you have already downloaded the Bootstrap theme and created a subtheme as explained in the "How to Create a Drupal 8 Bootstrap Subtheme" lesson.

Let's move on to the next step.

  • Configure the libraries file to point to the css/style.css and js/script.js files:

Configure the libraries file

  • Create an empty style.css file inside the css folder of your theme.
  • Create an empty script.js file inside the js folder of your theme.

Create an empty script.js file

Step #2 - Rearrange the Block Layout

  • Click Structure > Block layout.
  • Drag and drop the blocks until they match the ones in the image:

Drag and drop the block

Step #3 - the CSS

The first thing you need to do is to identify the CSS selector of the input element:

Identify the CSS selector

  • Once you’ve found it, add in there the following CSS code:
.input-group input[type=search] {width: 150px;  float: right;  -webkit-transition: width 0.4s ease-in-out;  transition: width 0.4s ease-in-out;}

This code will resize the search box and move it to the right of the site.

It will also prepare the transition of the element, that will be triggered by the focus event.

  • Target the same element, this time add the :focus pseudo-class:
.input-group input[type=search]:focus {width: 100%;}

This code will resize the search box when it receives the focus:

This code will resize the search box

Search box resized

  • Target two more classes to dim the header and move the search box upwards:
.dimmed {filter: blur(3px);  opacity: .2;  transition: all .3s;}

.sbox {  transform: translate(0, -4em);  -webkit-transition: transform 1s ease-in-out;  -moz-transition: transform 1s ease-in-out;  -o-transition: transform 1s ease-in-out;  transition: transform 1s ease-in-out;}

These two CSS classes will be injected with the help of jQuery when the search box get the focus.

Step #4 - The jQuery

  • Add the following code to your script.js file:
jQuery(".input-group input[type=search]").focus(function(event){jQuery("#navbar").addClass("dimmed");});

jQuery(".input-group input[type=search]").blur(function(event){jQuery("#navbar").removeClass("dimmed");});

The first statement adds the dimmed class to the element with the id=”navbar” when the input[type=search] selector gets the focus.

The second statement removes the class when the input[type=search] selector loses the focus.

Please, take notice that you have to use the word jQuery instead of the $ symbol.

  • Save the file.
  • Refresh the site.

Refresh the site

  • To add the sbox CSS class to the element with id=”search-block-form” when the input field gets the focus, add another line to each one of your jQuery statements:

Add the sbox CSS class

This is a very basic example of what’s possible to achieve in your site with CSS and JS.

There are many ways to do this. If you think there’s a better way, please leave us your comments below.

Final result

What's Next?

Would you like to learn how to build great websites with Drupal? Sign up to OSTraining.com now and right away download our bestselling "Drupal 8 Explained" book.


About the author

Jorge lived in Ecuador and Germany. Now he is back to his homeland Colombia. He spends his time translating from English and German to Spanish. He enjoys playing with Drupal and other Open Source Content Management Systems and technologies.
Oct 14 2018
Oct 14

First came the physical servers which were followed by the virtual machines and now the developer ecosystem is rapidly adopting container and serverless computing. One of the biggest challenges that physical servers pose is their management which virtualisation resolves by emulating the real system thereby streamlining the governance of different functions. Now, container and serverless computing are extrapolating the benefits to a whole new level for the developers. And this is where Kubernetes comes into play.

black and white picture of cables over a machine


Google’s Cloud Next 2018 summit held in San Francisco emphasised upon the company’s active involvement in over thousands of open source projects including Kubernetes. By the time Kubernetes was introduced in Google Cloud, it had more than 20,000 contributors which made it one of the fastest moving projects in the open source history. Kubernetes can be a huge asset in the deployment of projects based on another open source framework - Drupal. But before we plunge into that, let’s traverse along the short timeline of Kubernetes’ formation.

Timeline of Kubernetes formation

Kubernetes was originally developed by a team at Google which has been open-sourced since its launch and is managed by a large community of contributors. RisingStack has compiled an interesting timeline which traces the history of Kubernetes with the birth of the Borg system. 

Around 2003-2004, Google introduced the Borg system, a large-scale internal cluster management system, which was followed by the introduction of Omega cluster management system in 2013.

In the mid-2014, Google introduced the open source version of Borg in the form of Kubernetes. In the mid-2015, Kubernetes v1.0 was officially released.

2016 was the year when Kubernetes went mainstream

2016 was the year when Kubernetes went mainstream with more advanced releases, case studies, conferences, and the support for Windows Server and OpenAPI.

In 2017, big enterprises started adopting and supporting Kubernetes with Microsoft, Oracle, Google, IBM, and Amazon coming up with more container orchestration methods using Kubernetes.

A Closer Look at Kubernetes

A blue septagon with a white sailor wheel inside it and kuberneter written


An open source system, Kubernetes is used for handling containerized application across numerous hosts offering basic mechanisms for deployment, maintenance, and scaling of applications. It is hosted by the Cloud Native Computing Foundation (CNCF). CNCF was formed through the partnership of Google and Linux Foundation. It aims to develop sustainable ecosystems CNCF helps in fostering a community of top-notch projects that orchestrate containers as part of a microservices architecture.

Kubernetes is a portable, extensible open-source platform for managing containerized workloads and services, that facilitates both declarative configuration and automation - Kubernetes documentation

Kubernetes enables you to deploy containerised application swiftly and predictably and can scale containerised applications on the fly. It seamlessly rolls out new features to your containerised applications and optimises your hardware.

The significant features of Kubernetes include:

Deployment of containers and management of rollout control: With Kubernetes, you can describe your containers and define how many you want in a single deployment. It can govern the running of those containers (even across multiple hosts) and also manage changes like updating images, changing variables etc. to your containers.

  • Resource Bin packing: This lets you declare minimum and maximum computer resources (CPU and memory) for all the containers.
     
  • Service delivery: It has the provision of built-in service delivery for the automatic exposure of containers to the internet or other containers in the Kubernetes cluster.
     
  • Autoscaling: It automatically performs load balancing of traffic across matching containers.
     
  • Heterogenous clusters: It helps in developing a cluster with a mixture of virtual machines, on-premises servers, or bare metal in the company data centre.
     
  • Storage support: It has the provision for persistent storage support with support for Amazon Web Services EBS, Google Cloud Platform persistent disks, and many more. Vendors like Red Hat, Dell, NetApp and EMC offer persistent storage for Kubernetes.
     
  • High availability: It has very high availability such as multi-master and cluster federation enabling the linking of clusters together for load balancing.

Docker vs Kubernetes

Note that Kubernetes is not a replacement for Docker but it is for some of the top-of-the-line technologies that have emerged around Docker.
 
One of those technologies is Docker Swarm which is an orchestrator bundled with Docker. It is possible to leverage Swarm instead of Kubernetes but Docker Inc. has chosen to make Kubernetes a part of the Docker Community and Docker Enterprise editions moving forward.

Kubernetes is significantly more intricate than Docker Swarm

Kubernetes is not a drop-in replacement for Swarm. Kubernetes is significantly more intricate than Swarm and needs more work to deploy. But again, the work involved with the container orchestration using Kubernetes would provide a big payoff in the long run - a more governable, resilient application infrastructure. Docker Swarm is a good choice for the development work and smaller container clusters.

Deploying Drupal using Kubernetes

Bay Area Drupal Camp 2017 had a presentation that exhibited the deployment of Drupal leveraging Kubernetes. A digital agency built a Lagoon platform that builds cloud web hosting solutions for decoupled Drupal with Node.js features. It showed that for scaling Drupal to a plethora of annual page views, decoupled CMS architecture enables the deployment of Docker, Kubernetes and OpenStack solutions together in data centres.

[embedded content]


Lagoon platform was created for optimising hosting for Decoupled Drupal sites on the public cloud using OpenStack. With Lagoon, Drupal admins can build containers for PHP with NGINX, run the MYSQL or MariaDB installation in another container with Node.js configured on a third set.

Containers for Redis, Varnish Cache and Solr complete the install with the management of load balancing, page caching and auto-scaling web server nodes to match traffic rates. Lagoon relies upon Red Hat Enterprise Linux and the OpenShift platform in addition to the Original Community Kubernetes Distribution (OKD). System admins would have to use Jenkins, Ansible, Vagrant, TravisCI, Puppet, Docker, and CircleCI for configuration.

Programmers and developers would have to be adept with GraphQL, React, Apollo, Next.js and Prometheus. Lagoon leverages Alpine Linux for container installs from Docker images. Content Delivery Network (CDN) integration completes a different production route for anonymous traffic by geolocation thereby optimising datacentre hardware.

Workflow process with Lagoon involves reading the docker-compose.yml and creating disk images which set up the OS for web servers in containers. Then, disk images are pushed to an OS registry like GitHub or BitBicket. Using Ansible, the disk image is pushed to a git repository and commits are made to Node.js for testing. Lagoon deploys disk images from the git repository for Drupal web hosting requirement s in Kubernetes clusters.

Minishift can be leveraged to run OpenShift server administration on the desktop. Lagoon comprises of server-side rendering for Node.js and React on NGINX, running Drupal on NGINX in isolated containers individually. Then, Varnish Cache is used to handle HTML file transfers to users and CDNs.

Market trends

Two rectangular boxes divided by lines with each block showing percentages on the implementation of the Kubernetes solutionSource: 451 Research

A study conducted by technology research and advisory company 451 Research investigated containers adoptions by enterprises across the wide array of industries. It revealed that enterprises of all sizes are rapidly using containers and man are even deploying and governing their containerised workloads with orchestration software. 52% of the organisations gestured that they are running container management and orchestration software in production today and 71% of the respondents were using Kubernetes.
 
Another survey by Portworx Annual Container Adoption in 2017 included insights from 491 IT pros across a variety of industries and company sizes. It delineated that Kubernetes was the preferred option when it comes to container orchestration(shown in the graph below).

A bar graph with different coloured boxes to illustrate the adoption rate of different container orchestration toolsSource: Portworx

Moreover, a report on Transparency Market Research stated that “key drivers of the Kubernetes solutions market are the rapid growth of container orchestration, increase in investment by vendors, more focus on hybrid cloud and multi-cloud, an increase in adoption of Kubernetes by major players offering cloud computing”.

This report also stated that while North America accounts for the largest share of Kubernetes solutions market, Europe trails behind the second largest. Also, Amazon Web Services, Google Inc., Microsoft Corporation, Red Hat, Inc., Apprenda Inc., UnitedHealth Group, IBM Bluemix, Cisco Systems, Inc., Target, Oracle Corporation, Huawei Technologies Co., Ltd, CenturyLink, Inc. Kismatic, Inc., Heptio, Core OS, Datera, and NavOps are the major vendors.

Conclusion

Drupal as a great content store has grown exponentially due to the presence of its large and active community which is committed towards the perpetual improvement of Drupal to powering digital innovation. Kubernetes, also being an open source software, can of huge help in the Drupal deployment and has made rapid strides with colossal adoption rate among the big enterprises in recent times.

At Opensense Labs, we have been offering a suite of services to provide amazing digital experience to our partners.

Ping us at [email protected] to develop and deploy Drupal-based web applications leveraging the power of Kubernetes.

Oct 13 2018
Oct 13

In 1999, I decided to start dri.es (formally buytaert.net) as a place to blog, write, and deepen my thinking. While I ran other websites before dri.es, my blog is one of my longest running projects.

Working on my site helps me relax, so it's not unusual for me to spend a few hours now and then making tweaks. This could include updating my photo galleries, working on more POSSE features, fixing broken links, or upgrading to the latest version of Drupal.

The past month, a collection of smaller updates have resulted in a new visual design for my site. If you are reading this post through an RSS aggregator or through my mailing list, consider checking out the new design on dri.es.

2018 dri.es redesignBefore (left) and after (right).

The new dri.es may not win design awards, but will hopefully make it easier to consume the content. My design goals were the following:

  • Improve the readability of the content
  • Improve the discoverability of the content
  • Optimize the performance of my site
  • Give me more creative freedom

Improve readability of the content

To improve the readability of the content, I implemented various usability best practices for spacing text and images.

I also adjusted the width of the main content area. For optimal readability, you should have between 45 and 75 characters on each line. No more, no less. The old design had about 95 characters on each line, while the new design is closer to 70.

Both the line width and the spacing changes should improve the readability.

Improve the discoverability of content

I also wanted to improve the discoverability of my content. I cover a lot of different topics on my blog — from Drupal to Open Source, startups, business, investing, travel, photography and the Open Web. To help visitors understand what my site is about, I created a new navigation. The new Archive page shows visitors a list of the main topics I write about. It's a small change, but it should help new visitors figure out what my site is about.

Optimize the performance of my site

Less noticeable is that the underlying HTML and CSS code is now entirely different. I'm still using Drupal, of course, but I decided to rewrite my Drupal theme from scratch.

The new design's CSS code is more than three times smaller: the previous design had almost 52K of theme-specific CSS while the new design has only 16K of theme-specific CSS.

The new design also results in fewer HTTP requests as I replaced all stand-alone icons with inline SVGs. Serving the page you are reading right now only takes 16 HTTP requests compared to 33 HTTP requests with the previous design.

All this results in faster site performance. This is especially important for people visiting my site from a mobile device, and even more important for people visiting my site from areas in the world with slow internet. A lighter theme with fewer HTTP requests makes my site more accessible. It is something I plan to work more on in the future.

Website bloat is a growing problem and impacts the user experience. I wanted to lead by example, and made my site simpler and faster to load.

The new design also uses Flexbox and CSS Grid Layout — both are more modern CSS standards. The new design is fully supported in all main browsers: Chrome, Firefox, Safari and Edge. It is, however, not fully supported on Internet Explorer, which accounts for 3% of all my visitors. Internet Explorer users should still be able to read all content though.

Give me more creative freedom

Last but not least, the new design provides me with a better foundation to build upon in subsequent updates. I wanted more flexibility for how to lay out images in my blog posts, highlight important snippets, and add a table of content on long posts. You can see all three in action in this post, assuming you're looking at this blog post on a larger screen.

October 13, 2018

2 min read time

Oct 12 2018
Oct 12

When I began using Drupal, I was a site builder. I could find a combination of contrib modules to do just about anything without writing a line of code. I made Views that did the seemingly impossible with crazy combinations of filters and field formatters. I built Contexts that placed my blocks exactly where I wanted them, no matter how complex the requirements.

This all changed when I began writing modules and became a developer.

You have a problem? I’ll have a custom hook, a class override, and an event listener created shortly. Custom code to the rescue.

However, owning custom code, which is what having custom code in your repo really is, is much like owning anything else that is custom. It offers the incredible freedom of building exactly what you need, but it comes at a cost.

Take a car for example. A custom car can be built exactly to your specifications with no compromises. However when it comes time for maintenance, there will be no readily available parts. No one else is trained in repairs of your car, so the local auto shop can’t help when it breaks down. Diagnosing and fixing the car is all on you. All of a sudden that generic car that doesn’t meet all your needs, but will suffice with a few modifications isn’t looking so bad.

Enough with the car analogy. Let’s examine the costs specifically related to owning custom code.

  • Upfront cost to write, revise, and review the code.
  • Regression tests must be written to cover the custom functionality.
  • New developers are not familiar with it and take longer to ramp up.
  • Documentation needs to be written, updated, and maintained.
  • Security issues must be monitored and fixed quickly.
  • Code must be updated when the site is migrated to a new platform.
  • Compatibility must be maintained with other libraries as they are updated.

Despite these costs, custom code may still be the right answer depending on your needs. When evaluating the best approach, asking the following questions will often help.

  • Are the downsides of an existing solution that doesn’t exactly meet your needs less substantial than the costs of a custom solution?
  • Can functionality from an existing library or framework be extended or overridden to provide a small targeted change that limits the scope of custom code needed?
  • Would a contribution to an existing module/library solve the issue and allow future development to be done with assistance by a open source community?

If after a review of all of the options, a custom solution is truly needed, adhering to the following will help minimize the custom costs.

  • Strictly adhere to community code standards to make collaboration easier.
  • When extending functionality, only override the methods needed to make your change. Leverage the parent class as much as possible.
  • Architect code to allow for loose couplings, and leverage loose couplings when integrating with others’ code.

None of this is to say that custom code is wrong. It is often needed based upon a project’s requirements. This is simply an appeal to stop and analyze the needs at hand, instead of defaulting to a custom solution that may provide a quick fix, but come with many hidden long-term costs.

So perhaps I was on to something during my site building days by avoiding code. As a developer’s goal is not to write more code, it is to solve problems, build out functionality, and if necessary—write code. Ultimately it’s about delivering value, whether that is using existing tools, writing custom code, or a happy medium somewhere in between.

Oct 12 2018
Oct 12

Each month, we revisit out top Drupal blog posts of the month, giving you the chance to check out some of our favourites. Let’s look at the top blog posts from September 2018.

First one on the list is We made Drupal a lot easier to evaluate by Dries. Matthew Grasmick wrote a blog post about how hard it is to install Drupal, comparing to other platforms. As a result, Dries encouraged the community to improve the evaluator experience. In this blog post, he shows the results until now. 

We continue our list with a blog post Drupal Business Survey 2018 results are in! by One shoe. One shoe and Exove have been working closely with the Drupal Association on the global Drupal business survey, which showed the trends in the Drupal industry, especially among Drupal agencies. See the results. 

The third spot is reserved for a blog post 5 New Features You'll See in Drupal 8.6 by Steve Burge from OSTraining. Major Drupal updates are released twice per year, the second release of the year 2018 was in September, and this blog post looks up the new features of the Drupal 8.6.

Let’s continue with Indiana University Libraries: Upgrading to Drupal 8, Improving Search, and More by Lauren Seaton from Blue Spark. This is a case study. Lauren introduces us to their project goals and their approach to achieve them. 

Our fifth choice is Server-side Rendering Best Practices: How We Run Decoupled Websites with 110 Million Hits per Month by Michael Schmid from Amazee Labs. Michael guides us through the process of coding and infrastructure of Lagoon, an Open Source: build and development system. He shares a presentation from Decoupled Drupal Days, which shows how they set up a complex project, and in this blog post he sums it up.

The sixth blog post we would like to highlight is Drupal vs WordPress - A Lego Analogy by Rob McBryde from Mediacurrent. Before you build your website, you need to choose a platform to do it on. There is a long list of CMSs you can choose from. Before you do that, you have to ask yourself, which one is the right one for you. In this blog post, you will see the difference between WordPress and Drupal. 

The next one is Future-Proofing Your Content with Drupal 8 by Tim Cruse from Duo Consulting. Tim explains that after talking to companies, many of them hesitate to upgrade to Drupal 8 because of its cost. He believes there are a lot of reasons to upgrade that overweights the cost, but the most important is that allows you to future-proof your content. In this blog post, he explains what he means by that. 

Eight one is a Drupal 8 Migration with Multiple Paragraph References by Joel Steidl from Aten Design Group. He explains that he ran into an issue migrating Paragraph Entities (Entity Reference Revisions) with a few open core bugs and ended up being really simple to solve within preparing  Rowin the source plugin. He shows us how he solved it.  

And the last but not least one is a blog post Drupal 7, 8 and 9 by Dries. Dries provides us with some further details about Drupal 9 release. We are excited! 

These are our top blogs from September… We will be collecting best Drupal blog posts in October too. Stay tuned.    

Oct 11 2018
Oct 11

In some cases, it can be extremely interesting to be able to override a configuration dynamically. One of the first use cases immediately noticeable is in the case of a site factory with a set of shared and deployed features, and therefore identical configurations shared. And this on a website factory that is based on the native multi-site architecture of Drupal 8, or based on modules like Domain or Micro site that can host multiple sites from a single instance Drupal 8.

The immediate benefit is to be able to dynamically use and configure the contributed Drupal modules in the context of an instance deployed on a site factory, and thus to benefit from all the work already done, while modifying only certain configuration elements of the module to adapt it to the context where it is used.

Let's move on to practice, on a concrete example. Imagine in the context of a site factory, a galaxy of sites with a set of shared taxonomy vocabularies. From a maintenance point of view, the advantage is to be able to maintain and modify any configuration related to these vocabularies on all the sites that use it. From the point of view of each site, the major issue is that the vocabulary name (and therefore its possible uses in field labels, automatically generated aliases, etc.) can and must differ.

We have several methods to overload the vocabulary name for each site. The simplest method, in the case of a multi-site architecture is to override it from the settings.php file of each instance.

$config['taxonomy.vocabulary.VOCABULARY_ID']['name'] = 'NEW_VOCABULATY_LABEL';

And it's over. But this method requires access to the server, and is therefore not administrable from a site instance itself by an administrator or a webmaster. In addition, this method can only be used in the context of a website factory based on Drupal's multi-site architecture, and not in the context of a Domain or Micro site based website factory, since both architectures actually use one and the same Drupal 8 instance.

A second method is to provide a configuration form that will be responsible for changing the vocabulary labels for each site instance.

For example

  /**
   * {@inheritdoc}
   */
  public function buildForm(array $form, FormStateInterface $form_state) {

    foreach ($this->vocabularies as $id => $label) {
      $original_label = $this->configFactory->get('taxonomy.vocabulary.' . $id)->getOriginal('name', FALSE);
      $form[$id] = [
        '#type' => 'fieldset',
        '#title' => $label . ' (original : ' . $original_label . ')',
      ];
     
      $form[$id][$id . '_label'] = [
        '#type' => 'textfield',
        '#title' => $this->t('Label'),
        '#maxlength' => 64,
        '#size' => 64,
        '#default_value' => ($this->settings->get('vocabularies.' . $id . '.label')) ?: $label,
      ];

      $options_widget = [
        '' => $this->t('Default'),
        'entity_reference_autocomplete' => $this->t('Autocompletion (with automatic creation)'),
        'options_buttons' => $this->t('Checkboxes (without automatic creation)'),
        'options_select' => $this->t('Select list (without automatic creation)'),
      ];
      $form[$id][$id . '_widget'] = [
        '#type' => 'select',
        '#title' => $this->t('Widget'),
        '#options' => $options_widget,
        '#default_value' => ($this->settings->get('vocabularies.' . $id . '.widget')) ?: '',
      ];
      
    }

    return parent::buildForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function validateForm(array &$form, FormStateInterface $form_state) {
    parent::validateForm($form, $form_state);
  }

  /**
   * {@inheritdoc}
   */
  public function submitForm(array &$form, FormStateInterface $form_state) {
    parent::submitForm($form, $form_state);

    foreach ($this->vocabularies as $id => $label) {
      $this->settings->set('vocabularies.' . $id . '.label', $form_state->getValue($id . '_label'));
      $this->settings->set('vocabularies.' . $id . '.widget', $form_state->getValue($id . '_widget'));
    }

    // We need to store here the node types and vocabularies because we can not
    // call the entity type manager in the TaxonomyConfigOverrides service
    // because of a circular reference.
    $this->settings->set('node', $this->getNodeTypeIds(FALSE));
    $this->settings->set('taxonomy_vocabulary', $this->getVocabularyIds(FALSE));

    $this->settings->save();
    drupal_flush_all_caches();
  }

}

As you can see, we can override a lot more than the simple label of a vocabulary. For example the widget used in content editing forms. And many other things.

Then once this form in place and its configuration elements saved, we just need to create a service that will implement the service config.factory.override.

services:

  MY_MODULE.taxonomy_overrider:
    class: \Drupal\MY_MODULE\TaxonomyConfigOverrides
    tags:
      - {name: config.factory.override, priority: 300}
    arguments: ['@config.factory']

And we create the class TaxonomyConfigOverrides

<?php

namespace Drupal\MY_MODULE;

use Drupal\Core\Cache\CacheableMetadata;
use Drupal\Core\Config\ConfigFactoryInterface;
use Drupal\Core\Config\ConfigFactoryOverrideInterface;
use Drupal\Core\Config\StorageInterface;

/**
 * Override Taxonomy configuration per micro site.
 *
 * @package Drupal\MY_MODULE
 */
class TaxonomyConfigOverrides implements ConfigFactoryOverrideInterface {

  /**
   * The config factory.
   *
   * @var \Drupal\Core\Config\ConfigFactoryInterface
   */
  protected $configFactory;
  
  /**
   * An array of all the vocabulary ids.
   *
   * @var array
   */
  protected $vocabularies;

  /**
   * An array of all the node type ids.
   *
   * @var array
   */
  protected $nodeTypes;

  /**
   * The settings of the factory taxonomy configuration.
   *
   * @var \Drupal\Core\Config\Config
   */
  protected $taxonomySettings;

  /**
   * Constructs the object.
   *
   * @param \Drupal\Core\Config\ConfigFactoryInterface $config_factory
   *   The config factory.
   */
  public function __construct(ConfigFactoryInterface $config_factory) {
    $this->configFactory = $config_factory;
    $this->taxonomySettings = $this->configFactory->get('MY_MODULE.taxonomy_settings');
    $this->vocabularies = $this->getVocabularyIds();
  }

  /**
   * {@inheritdoc}
   */
  public function loadOverrides($names) {
    $overrides = [];

    foreach ($this->vocabularies as $vocabularyId) {
      $label = $this->taxonomySettings->get('vocabularies.' . $vocabularyId . '.label');
      if (empty($label)) {
        continue;
      }

      $vocabulary_config_id = $this->getVocabularyConfigName($vocabularyId);
      if (in_array($vocabulary_config_id, $names)) {
        $overrides[$vocabulary_config_id]['name'] = $label;
      }

    }

    return $overrides;
  }

  /**
   * @param $vocabularyId
   * @return string
   */
  protected function getVocabularyConfigName($vocabularyId) {
    return "taxonomy.vocabulary.{$vocabularyId}";
  }

  /**
   * Get an array of vocabulary id.
   *
   * @return array
   *   An array of vocabulary id.
   */
  protected function getVocabularyIds() {
    return $this->taxonomySettings->get('taxonomy_vocabulary') ?: [];
  }

  /**
   * {@inheritdoc}
   */
  public function getCacheSuffix() {
    return 'config_taxonomy_label';
  }

  /**
   * {@inheritdoc}
   */
  public function getCacheableMetadata($name) {
    $meta = new CacheableMetadata();
    $meta->addCacheableDependency($this->taxonomySettings);
    return $meta;
  }

  /**
   * {@inheritdoc}
   */
  public function createConfigObject($name, $collection = StorageInterface::DEFAULT_COLLECTION) {
    return NULL;
  }

}

And so you can now share a common shared configuration on a multitude of sites, while allowing everyone to customize at will different configuration elements according to their needs.

Override vocabulary settings

Of course, this method must be used according to the needs and architecture of the site factory. Using such a method in the context of a multi-site architecture for anything and everything is not necessarily the best way. Neither the most optimum. When it can be enough simply to provide initial configuration elements, for this or that module, by the code and then let him live his life within the instance of the website factory.

Do not hesitate to seek advice from a Drupal 8 developer who can define with you the best strategy to ensure that your site factory has all the assets to evolve with confidence, and to gain maturity in the long term. 

Oct 11 2018
Oct 11

Authors are eager to learn, and a content-focused community is forming. But there’s still work to do.

Video showing highlights of speakers, presenters, and attendees interacting at ConCon 2018.

When you spend most of your time focused on how to serve constituents on digital channels, it can be good to simply get some face time with peers. It’s an interesting paradox of the work we do alongside our partners at organizations across the state. Getting in a room and discussing content strategy is always productive.

That was one of the main reasons behind organizing the first ever Massachusetts Content Conference (ConCon). More than 100 attendees from 35 organizations came together for a day of learning and networking at District Hall in Boston. There were 15 sessions on everything from how to use Mayflower — the Commonwealth’s design system — to what it takes to create an awesome service.

Graphic showing more than 100 attendees from 50 organizations attended 15 sessions from 14 presenters at ConCon 2018.

ConCon is and will always be about our authors, and we’re encouraged by the feedback we’ve received from them so far. Of the attendees who responded to a survey, 93% said they learned about new tools or techniques to help them create better content. More so, 96% said they would return to the next ConCon. The average grade attendees gave to the first ever ConCon on a scale of 1 to 10 — with 1 being the worst and 10 the best — was 8.3.

Our authors were engaged and ready to share their experiences, which made for an educational environment, for their peers as well as our own team at Digital Services. In fact, it was an eye opening experience, and we took a lot away from the event. Here are some of our team’s reflections on what they learned about our authors and our content needs moving forward.

We’re starting to embrace data and feedback

“The way we show feedback and scores per page is great but it doesn’t help authors prioritize their efforts to get the biggest gain for their constituents. We’re working hard to increase visibility of this data in Drupal.”

— Joe Galluccio

Katie Rahhal, Content Strategist
“I learned we’re moving in the right direction with our analysis and Mass.gov feedback tools. In the breakout sessions, I heard over and over that our content authors really like the ones we have and they want more. More ways to review their feedback, more tools to improve their content quality, and they’re open to learning new ways to improve their content.”

Christine Bath, Designer
“It was so interesting and helpful to see how our authors use and respond to user feedback on Mass.gov. It gives us a lot of ideas for how we can make it easier to get user feedback to our authors in more actionable ways. We want to make it easy to share constituent feedback within agencies to power changes on Mass.gov.”

Embedded tweet from @MassGovDigital highlighting a lesson on good design practices from ConCon 2018.

Joe Galluccio, Product Manager
“I learned how important it is for our authors to get performance data integrated into the Drupal authoring experience. The way we show feedback and scores per page is great but it doesn’t help authors prioritize their efforts to get the biggest gain for their constituents. We’re working hard to increase visibility of this data in Drupal.”

Our keynote speaker gave a great use case for improving user journeys

Bryan Hirsch, Deputy Chief Digital Officer
“Having Dana Chisnell, co-founder of the Center for Civic Design, present her work on mapping and improving the journey of American voters was the perfect lesson at the perfect time. The page-level analytics dashboards are a good foundation we want to build on. In the next year, we’re going to research, test, and build Mass.gov journey analytics dashboards. We’re also spending this year working with partner organizations on mapping end-to-end user journeys for different services. Dana’s experience on how to map a journey, identify challenges, and then improve the process was relevant to everyone in the room. It was eye-opening, enlightening, and exciting. There are a lot of opportunities to improve the lives of our constituents.”

Want to know how we created our page-level data dashboards? Read Custom dashboards: Surfacing data where Mass.gov authors need it

Embedded tweet from @epubpupil highlighting her positive thoughts on Dana Chisnell’s keynote presentation on mapping and improving the journey of American voters.

The Mayflower Design System is a work in progress

“It’s great to see there’s a Mayflower community forming among stakeholders in different roles across state government. ”

— Minghua Sun

Sienna Svob, Developer and Data Analyst
“We need to work harder to build a Mayflower community that will support the diversity of print, web, and applications across the Commonwealth. Agencies are willing and excited to use Mayflower and we need to harness this and involve them more to make it a better product.”

Minghua Sun, Mayflower Product Owner
“I’m super excited to see that so many of the content authors came to the Mayflower breakout session. They were not only interested in using the Mayflower Design System to create a single face of government but also raised constructive questions and were willing to collaborate on making it better! After the conference we followed up with more information and invited them to the Mayflower public Slack channel. It’s great to see there’s a Mayflower community forming among stakeholders in different roles across state government. ”

All digital channels support content strategy

Sam Mathius, Digital Communications Strategist
“It was great to see how many of our authors rely on digital newsletters to connect with constituents, which came up during a breakout session on the topic. Most of them feel like they need some help integrating them into their overall content strategy, and they were particularly excited about using tools and software to help them collect better data. In fact, attendees from some organizations mentioned how they’ve used newsletter data to uncover seasonal trends that help them inform the rest of their content strategy. I think that use case got the analytics gears turning for a lot of folks, which is exciting.”

Authors are eager and excited to learn and share

“I’d like to see us create more opportunities for authors to get together in informal sessions. They’re such a diverse group, but they share a desire to get it right.”

— Fiona Molloy

Shannon Desmond, Content Strategist
“I learned that the Mass.gov authors are energetic about the new content types that have been implemented over the past 8 months and are even more eager to learn about the new enhancements to the content management system (CMS) that continue to roll out. Furthermore, as a lifelong Massachusetts resident and a dedicated member of the Mass.gov team, it was enlightening to see how passionate the authors are about translating government language and regulations for constituents in a way that can be easily and quickly understood by the constituents of the State.”

Fiona Molloy, Content Strategist
“Talking to people who came to ConCon and sitting in on various sessions, it really struck me how eager our content authors are to learn — whether from us here at Digital Services or from each other. I’d like to see us create more opportunities for authors to get together in informal sessions. They’re such a diverse group, but they share a desire to get it right and that’s really encouraging as we work together to build a better Mass.gov.”

Embedded tweet from @MassGovDigital highlighting a session from ConCon 2018 in which content authors offered tips for using authoring tools on Mass.gov.

Improving content and author support is a continual process

Adam Cogbill, Content Strategist
“I was reminded that one of the biggest challenges that government content authors face is communicating lots of complex information. We need to make sure we understand our audience’s relationships to our content, both through data about their online behavior and through user testing.”

Greg Derosiers, Content Strategist
“I learned we need to do a better job of offering help and support. There were a number of authors in attendance that didn’t know about readily-available resources that we had assumed people just weren’t interested in. We need to re-evaluate how we’re marketing these services and make sure everyone knows what’s available.”

Embedded tweet from @MassGovDigital highlighting the start of ConCon 2018.

Thinking about hosting your own content conference? Reach out to us! We’d love to share lessons and collaborate with others in the civic tech community.

Oct 11 2018
Oct 11
Mike and Matt interview members of the Drupal 8 JavaScript modernization initiative to find out what's going on, and the current status.
Oct 11 2018
Oct 11
Perhaps the most critical component of any decoupled Drupal architecture is a robust authentication mechanism that protects data transmitted between a Drupal site and API consumers like JavaScript applications and native mobile applications. While Drupal core makes available HTTP Basic Authentication and cookie-based authentication, both easy to use, neither of these approaches is sufficiently secure when it comes to best practices.
Oct 11 2018
Oct 11

The second Amazee Labs webinar took place last Friday, 28th September 2018. Philipp Melab gave a stunning presentation on “Atomic Design in Drupal with GraphQL & Twig”. Here's a short recap of what we learned together. You can watch the entire webinar online here

We kick-started the webinar with a summary of what we learned in the first webinar, in case you missed that you can read up on it here. This time our focus was to build a real-world example website for a fictional web agency called Amazing Apps.

Amazing Apps design

Philipp wanted to pack as much information as possible into the webinar, so he set up a Github repository with everything you need to get started. We were shown a brief design of the end goal then jumped straight into the meat of the presentation by dissecting the git history of each commit in the repository together.

Clean, concise, & a well-structured frontend.

Fractal is a tool to help you build and document web component libraries and then integrate them into your projects. We were led through the basics of what Fractal provides as a starting point. Then we jumped through the repository to a point where we had a couple of components built, along with colours defined using CSS variables along with demo text content.

As part of atomic design, we explored and learned the use of atoms, molecules, and organisms. Atoms demonstrate all your base styles at a glance, such as a logo or a button. Molecules are UI elements containing two or more atoms functioning together as a unit, such as a menu. Organisms are relatively complex UI components containing multiple molecules, atoms, or other organisms, such as the header or footer.


fragment Menu on Menu {
  links {
    label
    url {
      path
    }
  }
}

Once we got to the menu component, we were treated with the first GraphQL fragment, from here we could navigate up the templates from molecule to the header organism, and then to the page layout template which called the twig block named header. We can then override these blocks with the use of the twig tag extends to inject our Fractal based templates as necessary along with our GraphQL fragment.

GraphQL Twig should be used to decouple things where it makes sense, building a fully decoupled solution still costs a lot regarding development; therefore GraphQL Twig is the right solution to enhance and modernise a site in a feature based manner.

Learnings as a webinar host

It was our second webinar, so we had a few learnings from our first edition which we incorporated into the new session. We made sure to start earlier with the marketing campaign to ensure a good turn out, and ideally a larger audience; we ended up with over 40% increase in the total audience!

Check out the Github repository and accompanying videos:

Amazee Labs would like to thank everyone who attended the live session, we enjoyed being able to share this with you, and we look forward to hosting another Amazee Labs webinar in the future.

Oct 10 2018
Oct 10

Variety of content and the need for empathy drive our effort to simplify language across Mass.gov

Nearly 7 million people live in Massachusetts, and millions more visit the state each year. These people come from different backgrounds and interact with the Commonwealth for various reasons.

Graphic showing more than 3 million visitors go to Mass.gov each month.

We need to write for everyone while empathizing with each individual. That’s why we write at a 6th grade reading level. Let’s dig into the reasons why.

Education isn’t the main factor

The Commonwealth has a high literacy rate and a world-renowned education network. From elementary school to college and beyond, you can get a great education here.

We’re proud of our education environment, but it doesn’t affect our readability standards. Navigating the Women, Infants, and Children (WIC) Nutrition Program might be challenging for everyone.

Complexity demands simplicity

People searching for nutrition services are doing so out of necessity. They’re probably frustrated, worried, and scared. That affects how people read and retain information.

Learn about our content strategy. Read the 2017 content team review.

This is the case for many other scenarios. Government services can be complicated to navigate. Our job is to simplify language. We get rid of the white noise and focus on essential details.

Time is not on our side

You don’t browse Mass.gov in your free time. It’s a resource you use when you have to. Think of it as a speedboat, not a cruise ship. They’ll both get you across the water, just at different speeds.

Graphic showing desktop visitors to Mass.gov look at more pages and have longer sessions than mobile and tablet visitors.

Mass.gov visitors on mobile devices spend less time on the site and read fewer pages. The 44% share of mobile and tablet traffic will only increase over time. These visitors need information boiled down to essential details. Simplifying language is key here.

Exception to the rule

A 6th-grade reading level doesn’t work all the time. We noticed this when we conducted power-user testing. Lawyers, accountants, and other groups who frequently use Mass.gov were involved in the tests.

These groups want jargon and industry language. It taught us that readability is relative.

Where we are today

We use the Flesch-Kincaid model to determine reading level in our dashboards. It accounts for factors like sentence length and the number of syllables in words.

This is a good foundation to ensure we consistently hit the mark. However, time is the most important tool we have. The more content we write, the better we’ll get.

Writing is a skill refined over time, and adjusting writing styles isn’t simple. Even so, we’re making progress. In fact, this post is written at a 6th grade reading level.

Oct 10 2018
Oct 10

image of team working to put pieces of a puzzle together The reality is that running a business is such a diverse and complex endeavor that managing complex and rapidly evolving software solutions needed to execute the mission can be an overwhelming component. It already takes enough energy and expertise to be proficient in managing people, knowing your vertical, regulating cash flow, envisioning new products, evaluating old products, and on and on and on. The problem, however, is that if you don’t leverage complex and rapidly evolving software solutions to handle processes, you end up drowning in inefficiency and inconsistency. So therein lies a significant and difficult problem because you likely didn’t get into business to become an informal senior software architect. And that’s where leveraging something like a robust CMS comes into play. 

Let’s look at some of the ways leveraging a modern CMS, like Drupal, for example, can significantly streamline your business and free you to, well, run your business.

CMS is more than a CMS 

So in simplest terms, a CMS is a Content Management System. Historically, that basically meant providing standard functionality for perhaps managing blog content for a public website. The truth is, however, today it’s far more than that. There’s a whole range of CMS options that vary from that ultimately simple blog scenario to enterprise level development frameworks upon which you can build nearly any kind of web-based software solution. So in its infancy, it may have been largely all about getting a simple “brochure” site up with some basic management, but today it’s being used to provide some of the most sophisticated enterprise web solutions that are critical to modern business strategy. And in many cases, it’s leveraged internally to empower the management of the business in a highly effective and efficient manner. We’ll cover some more tangible examples in a minute, but first we need to get an important question out of the way. 

Which CMS? 

A CMS is a broad-ranging category of systems, and there is still a ton of flexibility in choosing a CMS. In fact, we’ve written articles on this topic and built a little tool to help you figure that out. The different management systems cover a wide range of use cases, so it can be difficult to determine which is right for a given situation at times. There are a number of extremely simple CMS setups that can work great on a low budget, with very flexible requirements, and without needs for complex solutions like custom integrations. On the other end are systems like Drupal (our CMS framework of choice) that allows you do virtually anything you want as well as continue to leverage a whole lot of components included in the core system or built by those extending the system in powerful ways. It’s this latter category of enterprise-level customizable CMS that we will focus on here because that’s where the exciting power lies.

 Which CMS is best for your website?  Take our CMS Quiz and find out!

Real world scenarios

Let’s look at some specific examples of just what these systems can do. And this isn’t hypothetical. These are exactly the types of solutions we’ve built for our clients with an extensible CMS platform like Drupal as our starting point.

Employee collaboration

Email. Chat. Documents. Meetings. There is a lot of internal chatter and management that goes on within a corporation, and the magnitude of the management of that cannot be overstated. Who hasn’t found themselves almost daily wanting to just disconnect from the internet for 20 minutes to take a breather from all the chaos swirling around? Well, the right CMS can mitigate a lot of that. You can use a whole host of building blocks to build an employee portal where coworkers can chat, send notifications, collaborate on policy documents, receive corporate notifications, see a team calendar, reserve a conference room, assign tasks, etc - all with deep tracking and revisioning and all within one ecosystem that is accessible from the desktop, the laptop, and mobile devices. With this strategy, you find yourself having a whole different experience. No more depending on how different people like to store and organize their local copy of largely outdated documents. No more relying on email history to track a decision that was made or find a digital asset. No more walking around the hall looking for an empty conference room. No more being stuck solving an accounting problem because that person is on vacation and has a local spreadsheet on their laptop. Best of all - everyone uses the same tools and those tools are managed from a single infrastructure. Sounds great, doesn’t it?

Client management

Let’s be honest - managing clients is often more difficult than managing your own workforce because your clients aren’t in your building, on your schedule, or under your control. There are countless phone calls, emails, shared documents, meeting decisions, deadlines, and other elements that can make it easy to lose sight of the forest for the trees. And it can be overwhelming to manage and well, frankly, quite embarrassing when something slips through the cracks or someone who needs to know isn’t in the know.

A CMS based solution can provide a platform to minimize and consolidate client management needs into a system that depends far less on individual availability and manual process and allows for a much more robust client relationship. Using a CMS as a platform, you can build systems that allow sending an invoice in a few clicks, with automated reminders and tracking of unpaid invoices. That same system can allow clients to track progress on major requests, and send or request updates. It can also run reports on product subscriptions that are set to expire, or highlight clients that are typically late paying their bills, or prioritize requests that haven’t been responded to in the past x days. It can also allow clients to pay their invoices online, engage live chat support, access help documentation, or receive alerts about upcoming products - again, all tracked in a single ecosystem and in full view of everyone in your business who needs visibility of some or all of the client engagement. It can literally transform how things are done and has huge ROI potential because it literally may save you from losing clients and make the ones that stay happier.

Content or product management

So what about managing the products or services your company actually provides? A CMS can do that too. It might mean allowing those who manage the warehouse to manage inventory, which is immediately reflected on the public-facing ecommerce site. Or it might mean serving, tracking and reporting online ads. Or it may mean providing a robust content management workflow for new stories and white papers that you offer your customers. And it all can leverage the same building blocks for tracking, notifications, document management, user roles, and permissions, etc., that a modern CMS can provide. Better yet, multiple CMS systems can even be built to talk to each other so that perhaps your Client Management system can get info about products your client has purchased from your Product Management or your Employee Collaboration system can be told to set follow-up reminders for your employees based on the activity of their clients. Or maybe all of these systems are really just one system that gives appropriate access to all who need it. The possibilities are endless.

So where do we go next?

So we’re only scratching the surface here, but if you have a heavy dependence on manual processes, or a lot of duplication of effort, or a difficulty tracking all the moving requirements, conversations or documentation - then a robust software solution built upon a CMS could be a key opportunity to making your processes more efficient and effective and allow you to focus on building your business, not running your business. The web today is not the web it even was 5 years ago so taking the time to see what’s possible can really change your whole perspective on how your business can function. Exciting times!

image with text offering access to our free CMS Selection quiz.

Oct 10 2018
Oct 10

by David Snopek on October 10, 2018 - 12:40pm

As you may know, Drupal 6 has reached End-of-Life (EOL) which means the Drupal Security Team is no longer doing Security Advisories or working on security patches for Drupal 6 core or contrib modules - but the Drupal 6 LTS vendors are and we're one of them!

Today, there is a Critical security release for the Lightbox2  module to fix a Cross Site Scripting (XSS) vulnerability.

The Lightbox2 module enables you to overlay images on the current page.

The module did not sanitize some inputs when used in combination with a custom View leading to potential XSS.

See the security advisory for Drupal 7 for more information.

Here you can download the Drupal 6 patch.

If you have a Drupal 6 site using the Lightbox2 module, we recommend you update immediately! We have already deployed the patch for all of our Drupal 6 Long-Term Support clients. :-)

If you'd like all your Drupal 6 modules to receive security updates and have the fixes deployed the same day they're released, please check out our D6LTS plans.

Note: if you use the myDropWizard module (totally free!), you'll be alerted to these and any future security updates, and will be able to use drush to install them (even though they won't necessarily have a release on Drupal.org).

Oct 10 2018
Oct 10

Everyone has their own preference when it comes to different genres of music ranging from alternative rock and post-rock to trap rap and drone metal. Website traffic touches sky-high when a horde of music lovers remain glued to their screens to witness their favourite artists being awarded in this annual event of Grammy awards. Being a scalable and high performing space, the website of Grammy has coped with huge spikes in traffic with ease.

A speedometer in a peach coloured background


Website scalability is such a crucial aspect which has a huge say in the performance of digital firms. Drupal 8 and its capabilities lend better web performance. Being highly scalable, Drupal 8 helps in building a web application that is unfazed by the colossal spike in the internet traffic and scales tremendously. Grammy, powered by Drupal, has extracted the scalability features of Drupal to a great extent. Let's find out how.

The Significance of Website Scalability

58% of application/site owners overestimate their capacity levels: State of Web Readiness Report by Load Impact
Infographics with a heading, text, and four icons vertically lined up in a red background


A report from Load Impact has some interesting statistics on web performance.

  • 68% of respondents have encountered performance or stability issues with their website where the main reason was pointed towards the lack of resources.
  •  
  • 39% of e-retailers claimed that they incurred a financial loss due to performance or stability problems. In comparison to this, just 24% of the non-e-retailers claimed that they incurred money loss.
  •  
  • 98% of e-retailers believed that sub-two-second response time was essential. But the load time for e-commerce sites that were analysed in this report surpassed the desirable response threshold by a huge margin. The average was 7.9 seconds which is more than that for non-e-commerce sites.

Typically, 90% of your website’s response time is from frontend resources but this laters as your load and traffic enhances.

A graph with two curves illustrating frontend and backend load time


Questions that you can raise while determining ways of scaling:

  • Is your website or application performing acceptably with a minimum number of users on the system?
  • Is the website or application responding running faster with additional concurrent users? And if so, how many?
  • Are there hardware bottlenecks in the present system?
  • Is the website or application able to handle the increasing number of users/data?
  • What is the maximum amount of load the system is able to handle?

Is Drupal Scalable?

Drupal is a highly scalable CMS. If you want your site to grow and be amongst the busiest of online spaces, then Drupal can scale with your needs. Even if you are already popular and offer stupendous digital experience to the customers, Drupal is scalable to cope with the gargantuan amount of traffic to your site content.

Large enterprises love Drupal with the digital presence of big names like Grammy, Weather.com, Pfizer, Time Inc., Tesla, Puma, Princess Cruises, and many more powered by Drupal. Whether it is the extreme traffic spikes on certain occasions or the constant web traffic, Drupal handles all of that with utmost ease.

Drupal accommodates content growth and supports the most content-rich sites and experiences. It scales to govern more traffic, content, and users. So whether if you have one or over a thousand content contributors, Drupal can efficaciously cope with a monumental amount of visitors, content, and Drupal users.

Optimising Drupal Performance and Scalability

A superfast website significantly contributes towards the improvement of user experience, usability and engagement. Drupal 8 is one of the most efficient CMS for enabling blistering page speed.

A superfast website significantly contributes towards the improvement of user experience, usability and engagement.

Module management

Outdated modules can deter your efforts in speeding up your website. Updating every module enabled on your Drupal site can be beneficial.
 
It is also important to keep a record on used or no longer used modules. The number of Drupal modules installed on the site is directly proportional to the time taken for code execution thereby affecting page load time. Hence, uninstalling unwanted modules can improve execution time.
 
Furthermore, disabling the modules also add to the execution time of the code. So, a complete removal by uninstalling the unused modules would make the site faster.

Cache optimisation

Caching is an important feature that you can configure for enhancing your website speed. For advanced caching, Drupal comes with a great set of modules:

  • Internal Page Cache module assists in caching the web pages for anonymous users to enhance the speed for subsequent users.
  • Dynamic Page Cache module caches web pages for the anonymous and authenticated users.
  • BigPipe module lets users to swiftly see the unaltered, cacheable page elements while the personalised content is displayed next.
  • Redis module helps in integrating with the Redis key-value store thereby offering a tremendous cache system for static pages.
  • Varnish module allows you to integrate Drupal sites with an advanced and fast reverse-proxy system - Varnish cache- to serve static files and anonymous page views faster and at high volumes.
  • Memcache API and Integration module integrated Drupal sites with Memcached which helps in storing your data in active memory for a limited time period that makes the site faster to access.

Incorporation of Content Delivery Network (CDN)

CDN, Drupal module, assists in the integration of Content Delivery Network for the websites. It alters the file URLs thereby allowing the files like CSS, JavaScripts, images, videos, and fonts to be downloaded from the CDN instead of the web server. This helps in mitigating page load time and rapidly delivers web page components.

Usage of lazy loading

In traditional websites, all the images and content are preloaded into the web browser when someone accesses the site. Lazy loading loads these elements as soon as a user scrolls to view a content. Blazy, Drupal module, offers the functionalities of lazy loading and multi-serves the images to save bandwidth and server requests.

Image optimisation

Drupal 8 is loaded with image optimisation feature for setting the compression ratio of the images and fine-tune the page performance. Also, the size of the images for different screen sizes can be optimised in Drupal 8 which increases the page load speed.

Bandwidth optimisation

Optimising bandwidth refers to the aggregation of all CSS and JavaScript files to make them load together which ensures that all the page elements can be seen by the users almost immediately.

404 error management

When something on the site breaks to cause a 404 error, it can result in sluggishness. For instance, a failed image can hamper the performance of the site. Fast 404, Drupal module, utilises the resources better and whitelists files and checks pathways of problem.

Management of use of CSS and JavaScript

Avoiding overuse of CSS files and JS and adopting a minimalistic approach by keeping the code to a minimum can improve performance. Advanced CSS/JS Aggregation, Drupal module, can help in keeping a tab of your front-end performance by aggregating CSS and JavaScript files to improve speed.

Web hosting

It is of utmost significance that, while implementing every possible way of utilising the Drupal’s powerful capabilities, you select the best hosting provider that will decide your site’s ultimate speed, stability and security.

Scaling the server

In case, your server hardware is nearing its limits and you have optimised the site as much as possible, or you need a faster way of scaling than you can optimise, you can upgrade the server hardware in the following ways:

  • Scaling vertically: This is the simplest way of scaling the hardware. It refers to throwing more resources at the same server. In a cloud data centre, it may be as simple as upgrading the server size for more CPU cores, memory etc.
  • Scaling horizontally: This is a more intricate process than scaling vertically. It refers to adding more servers to separate the load. When done right, this can hugely minimise the load any single server receives.
  • Considering multiple servers: In case, you have multiple app servers for Drupal, you will require a method of deploying code to each server simultaneously. For instance, SaaS platforms like platform.sh and pantheon.io can handle the complete hosting setup for you but if you are doing it by yourself, you would need an rsync setup or git push to each of your servers etc. 

Up above the world so high: Drupal’s scalability for NASA

Flowchart showing the architecture of a website redesign with relevant iconsSource: Drupal.org

A digital agency migrated the website of NASA to the AWS cloud and onto Drupal to create a fully responsive and user-centric experience. Several AWS based Drupal CMS solutions for NASA were implemented for NASA for serving a plethora of needs ranging from nasa.gov to the Science Mission Directorate’s science.nasa.gov in both English and Spanish to a multisite platform and governance model for numerous Drupal applications serving groups across different NASA centres.
 
Nasa.gov and all of its subdomain components were migrated and relaunched which involved replacement of a closed source system. It comprised of more than 250000 pages and almost 3 TB of content.

Drupal in action

Drupal compressed the complete development timeline and also saved a lot of money in the process. Building with Drupal on the Amazon cloud ensured that NASA’s content is stored safely and scales with the content growth. With its user-driven APIs, dynamic host provisioning, infinite compute scalability and storage, and well-architected security architecture, Drupal and AWS together was the right fit.

Drupal compressed the complete development timeline and also saved a lot of money in the process.

Project highlights

  • Migration from proprietary, on-premise CMS system to an open source CMS in the Amazon cloud was performed without any service interruptions
  • Mobile-first approach was employed to the redesign of the site.
  • Headless Drupal in AWS cloud environment was built with security, performance and availability in mind.

Outcome 

Statistics shown on the right side in four blocks and a tab screen on the left with NASA homepage and a red paper bird on it.Source: Drupal.org

It is deployed in multiple AWS availability zones for redundancy handling approximately 500 content editors performing over 2000 content updates every day. On an average, it receives nearly one million page views a day and has handled peak loads of over 40,000,000 page views in a single day with a staggering and record-breaking 2,000,000+ concurrent users during NASA’s 2017 Total Solar Eclipse coverage.

Conclusion

Website scalability and performance is a significant aspect that ensures how well the digital business does during the busiest of times. Whether internet users throng at your website causing a sudden spike in traffic, or you are managing a popular service that witnesses a constant web traffic, Drupal scales with your needs.
 
We have been steadfast in our objective of offering an amazing digital experience through a suite of services.
 
Contact us at [email protected] to build a highly scalable Drupal site for your business.

Oct 10 2018
Oct 10

You have a piece of HTML code that needs to be included in multiple Twig templates. The code will be consistent across all of them - if you need to change it, you need to change it everywhere it is used.

As an example, I recently had to include a piece of code from a social share service called RhythmOne. I want to include this code in some, but not all, of the node templates.

A solution

Twig has the ability to add partial templates to another template. To add a partial template, use the include statement and the filename of the template.

Step by step

  1. In your theme, create a directory inside the templates directory called includes
  2. In the includes directory, create a Twig file for your partial template. For example, rhythmone.html.twig' 
  3. In the file you created in step two, add any code you need
  4. Go to the Twig template where you want to include the partial template. For example, a node template
  5. Include the partial template with:
 % include 'rhythmone.html.twig' %

  1. Repeat for any other templates where you need the same partial template

Drupal will automatically look in the template/includes directory in your theme.

Including templates from another theme or module

If you need to include a template from another theme or module, the syntax is slightly different.

If the partial template that you are including is stored anywhere other than the theme you are including it from, Drupal would not know where to find it with:

 {% include 'rhythmone.html.twig' %}

You could add the full path to the template, but that can be long winded.

To get around this, Twig has a concept called namespaces. This is very similar to PHP namespaces in modules. A namespace creates a short cut to the relevant template directory.

Modules and themes in Drupal have Twig namespaces that you can use. This will create short cut to the templates directory inside the relevant module or theme directory.

Let’s look at an example. If you have partial template in a module called mypages, then you can include it in another template in a different module, or theme, with:

 {% include '@mypages/includes/rhythmone.html.twig' %}

The @mypages part of the above code is a Twig namespace. It is made up of:

  • @
  • mypages: the name of the theme or module

The path after the namespace (@mypages) does not need “templates” because Drupal assumes that that is where your templates are stored.

One of the big advantages of using partial templates like this is that if you need to update the code, you only need to change it in one place.

Oct 10 2018
Oct 10

The Main Menu on your website is the first thing that catches visitor’s attention. Besides, it’s one of the most important elements that will assist the user in an effortless and intuitive navigation. In this article we are going to talk about how to design a Drupal Drop-down Menu with Glazed Theme.

Before diving into customizing our Main Menu, learn How to Create Drop-down menus with Drupal 8 and Glazed Theme.

To start customizing our menu design we need to go to the Glazed Theme Settings page. Amongst a dozen of options that are directly responsible for every element of your website design and how the end-user sees it, we are going to find the Header & Main Menu - the place that will change how our menu looks like.

Header & Main Menu

When navigating to the Header & Main Menu, first thing that will come to our attention is the “Top Header Options”.
Clicking it will open an entire new world of possibilities. Here We can choose 1 of the 7 layouts that come pre-installed with Glazed Builder. A layout for every taste! Depending on what you want to choose for your website, you can pick between having your logo on the left and menu on the right, which is the default layout that you are already familiar with (spoiler: the one on this website), having everything beautifully aligned in the center, place the menu on the left, or several others.

Header style is probably one of the most important settings here and will determine the overall look and feel for your website (will it be more minimalistic or will it have a more “heavy” look to it?). We are able to choose between 3 general types of header styles: Normal, Overlay or Pull-down Navbar.

You can see examples of each header style and header layouts on the Glazed Theme Live Demo Page.

Each one of these options look great when implemented, but they are going to need some further refinements to look exactly how you imagined. This brings us to our next element: Height. Choosing the height value will determine how tall or short our main menu will be. Once we got our perfect Height settings we will move on to deciding whether or not we would like our Menu to have a fixed position. A fixed header stays at the top of the browser window when a user scrolls.

Behavior of the Drupal Drop-Down Menu

If we decide that we want our menu to stick to the top of the browser when people scroll, then another option will pop-out asking us if we would also like a sticky header – which basically means that the menu will appear only after the user scrolls past a certain point on your page, only then will it stick to the top of his or her window. This will be determined by the scroll offset, height & background opacity values that you decide on.
Congrats! You’re past all the technical aspects of your gorgeous Menu bar. (Well not really but for now we are moving on to the fun part - choosing the colors)

Customize Navigation Colors

Here is the place where it all comes together. You can choose colors from your website’s color scheme (Custom one you made or Glazed Default) or add individual values to each settings’ custom color. In this menu we can choose the colors for every aspect of the navigation menu: text color, drop-down background, menu hover text, etc.

After we are happy with the result we can move on to adding the final touches to our menu design.

Side Header & Mobile Menu Options

In this area you can choose the layout look on mobile devices and your side header (if you choose to opt for one in the beginning). You can determine elements such as content alignment (left/center/right) and menu bar width.

The Main Menu Link is for determining the font style and hover style of our Main Menu (both website & mobile versions).
Last but not least, by going to Mobile Header menu we will determine the mobile breakpoint and the height of our menu in order to make it even more mobile-friendly.

We have designed a brand new Main Menu for our website which will be enjoyed by the visitors and help them easily navigate to the information they are looking for!

We also created some Main Menu designs along with you so you don’t get bored doing it all by yourself. We’ll leave each settings value below. If you like any of them feel free to recreate or use them as an inspiration for your future eye-catching Main Menu.

DESIGN 1

Oct 10 2018
Oct 10

Agiledrop is highlighting active Drupal community members through a series of interviews. Learn who are the people behind Drupal projects. 

This week we talked with Jonathan Hedstrom. Read about what he thinks has been the biggest evolution for Drupal, what contribution is he the proudest of and what he thinks is the most important about Drupal today.  

1. Please tell us a little about yourself. How do you participate in the Drupal community and what do you do professionally?

I’m an active core contributor and the core maintainer of the Datetime module. I’ve been a member and sometimes a leader of the Portland Drupal User Group for the last decade. I maintain dozens of contributed modules (and contribute patches/fixes/features to many dozens more). I am a co-maintainer of Drush and the project lead of the Drupal Behat Extension. I am currently a Software Architect at Phase2.

2. When did you first came across Drupal? What convinced you to stay, software or the community, and why?

I discovered Drupal in 2005 for my personal website. I converted it from a static HTML site to use Drupal 4.4. I started working professionally with Drupal when I moved to Portland in 2007 to be the lead developer at OpenSourcery. My first DrupalCon in Hungary really exposed me to the international community, and that continued engagement has kept me going. The warm welcome, I was given by the local community, made it simple to stay connected to the broader Drupal community too.

3. What impact Drupal made on you? Is there a particular moment you remember?

Drupal has provided the basis for much of my career, and many of my life-long friends have been made through the community, both locally and internationally.

4. How do you explain what Drupal is to other, non-Drupal people?

I usually describe Drupal as Legos for non-Drupal folks. It has all the pieces to do just about anything one can imagine, but there are some steps between dumping the pile of pieces out on the floor to a complete and functional thing.

5. How did you see Drupal evolving over the years? What do you think the future will bring?

I think the adoption of modern coding practices, and embracing third-party libraries have been the biggest evolution I’ve seen for Drupal. It has let Drupal focus on the things that it wants to do better, and not have to re-invent (and maintain) the little pieces that are already done.

6. What are some of the contribution to open source code or community that you are most proud of?

It’s always fun to get commits into a new project. I most recently had my first commit to Symfony accepted. One of my proudest commits to Drupal 8 would be the views integration for the Datetime module. Also, I was heavily involved in resolving many of the critical blockers for Drupal 8 to support an upgrade path from beta to beta, and am quite proud of helping that effort, which eventually resulted in the release of Drupal 8.0.0. I’m also proud of the time I spent as a leader of the Portland Drupal User Group. In that time I helped organize several camps, two Pacific Northwest Drupal Summits, and helped mentor quite a few folks.

7. Is there an initiative or a project in Drupal space that you would like to promote or highlight?

The current effort to more fully embrace Composer is really exciting and important, I think. Also, the move to completely get off of the legacy SimpleTest framework in the core is important, and probably less visible than some of the more exciting initiatives.

8. Is there anything else that excites you beyond Drupal? Either a new technology or a personal endeavorment. 

The increasing focus on decoupled architecture and all the technology (React, GraphQL, etc.) that goes along with that is really fun, and it’s bringing a lot of new faces into the community, I think.  

Oct 09 2018
Oct 09

This is the eighth and last installment in a series presenting work on shared configuration that comes out of the Drutopia initiative and related efforts. If you've stuck with it this far, wow! If you haven't seen previous installments, you might want to start with Part 1, Configuration Providers.

The series focus has been meeting the needs of distributions for creating and updating packages of shared configuration, a use case not addressed in Drupal 8 core.

We've seen how configuration can be packaged using the Features module (Part 6). We've covered the ins and outs of updating packages of configuration, including how to assemble configuration as provided by extensions (Part 1), make needed changes to configuration from another package (Part 4), capture a previous configuration state (Part 2), and merge in configuration updates (Part 5). Along the way we've examined the particular cases of preserving configuration customizations (Part 3), working with core configuration required by multiple features (Part 7), and (bonus!) managing blocks when subthemes are in the mix.

The fact we're on installment eight - not even including the sneak bonus episode - in itself suggests a general conclusion: addressing these needs is not simple!

Working with Drupal core

In this series we've seen challenges or regressions when it comes to managing shared configuration in Drupal 8. In Part 1 we noted an issue with core code related to optional configuration. In Part 4 we saw how previously well supported requirements for shared configuration such as adding permissions to site-wide user roles or adding fields to existing content types now require dauntingly complex configuration alters.

These regressions are closely linked to Drupal 8's focus on the configuration staging use case. Progress on these fronts was not helped by what I, at least, experienced as an often boosterist environment in the Drupal 8 cycle in which critical perspectives on use cases that were and were not being addressed were sometimes drowned out. In a parallel Drupal 8 universe in which the use case of shared configuration was fully on par with staging configuration on a single site, solutions to much or all of the problems reviewed in this series might have been part of Drupal core.

At the same time, we've seen various ways that Drupal 8 core, including the configuration management system, helps with the task of filling in missing configuration management requirements. In Part 2 we saw how the configuration snapshot used in core's configuration staging can be a model for extension configuration snapshots, and also how core's LanguageServiceProvider is a useful pointer for how to provide dynamic services for configuration snapshotting.

Then there are key developments in the contributed modules space, especially Config Filter. By modelling how to extend and customize core's configuration staging workflow, Config Filter also opened the way to a parallel workflow for merging in configuration updates from extensions. Again, core's configuration management provides an essential base here. The Config Distro module takes everything that core's configuration staging API provides and, with a few small changes, repurposes it for a shared configuration use case. True, the result is only a framework - hence the many other pieces covered in this series - but the work gets a leg up from core.

CMI 2.0

The Drupal core Configuration Management 2.0 Initiative (CMI 2.0) aims to address "common workflows are not natively supported" and fill in "missing functionality" in core's APIs. For the work covered in this series, major additions to the configuration management API could be a big plus.

But they'll also have their tradeoffs. As a small hint of what may be coming, one of the first CMI 2.0 improvements led to breakage in the Config Distro module. A current big patch in the queue, Add configuration transformer API, looks like a great improvement, but since it would supersede the Config Filter module and our whole approach is built on Config Filter . . . . Yeah, a bit of work there. On the plus side, a compatibility layer between Config Filter and the configuration transformer API could mean it would all "just work" in the interim. Or, more likely, continue to break, but for other reasons ;)

Contribution

Drutopia is a small initiative. In contributing to configuration management improvements we've been able to lean on contributions from many others including Config Filter and Config Distro maintainer Fabian Bircher, Features and Config Actions maintainer Mike Potter, Configuration Update Manager maintainer Jennifer Hodgdon, and the core configuration work by Alex Pott and many more.

Still, to get from where we are to a polished and solid solution set, we'll need a lot of help. Most of the modules we've contributed are still in alpha or beta. We hope that others will see value in the start we've made and continue to adopt and adapt the tools, making them their own. Recent help with automated testing is particularly welcome.

Beyond shared configuration

In the Drutopia initiative, configuration management is only a small part of our focus. Looking to emerging models of platform cooperativism, we're building a cooperative where members will own, shape, and use the software distributions that drive their sites. The first such distribution is Drutopia, nearing its beta release.

We welcome new participants and contributors. Interested? See our guide to contributing and the many ways to get in touch.

Next steps

This series has had a decidedly technical bent. But how do you actually use the stuff?

Good question. We're working on a follow-up on how to put it all together, including:

  • How to build a distribution using Config Distro and Configuration Synchronizer.
  • How to update sites using Configuration Synchronizer.

Watch for it.

Oct 09 2018
Oct 09

Helping content creators make data-driven decisions with custom data dashboards

Our analytics dashboards help Mass.gov content authors make data-driven decisions to improve their content. All content has a purpose, and these tools help make sure each page on Mass.gov fulfills its purpose.

Before the dashboards were developed, performance data was scattered among multiple tools and databases, including Google Analytics, Siteimprove, and Superset. These required additional logins, permissions, and advanced understanding of how to interpret what you were seeing. Our dashboards take all of this data and compile it into something that’s focused and easy to understand.

We made the decision to embed dashboards directly into our content management system (CMS), so authors can simply click a tab when they’re editing content.

GIF showing how a content author navigates to the analytics dashboard in the Mass.gov CMS.

How we got here

The content performance team spent more than 8 months diving into web data and analytics to develop and test data-driven indicators. Over the testing period, we looked at a dozen different indicators, from pageviews and exit rates to scroll-depth and reading grade levels. We tested as many potential indicators as we could to see what was most useful. Fortunately, our data team helped us content folks through the process and provided valuable insight.

Love data? Check out our 2017 data and machine learning recap.

We chose a sample set of more than 100 of the most visited pages on Mass.gov. We made predictions about what certain indicators said about performance, and then made content changes to see how it impacted data related to each indicator.

We reached out to 5 partner agencies to help us validate the indicators we thought would be effective. These partners worked to implement our suggestions and we monitored how these changes affected the indicators. This led us to discover the nuances of creating a custom, yet scalable, scoring system.

Line chart showing test results validating user feedback data as a performance indicator.

For example, we learned that a number of indicators we were testing behaved differently depending on the type of page we were analyzing. It’s easy to tell if somebody completed the desired action on a transactional page by tracking their click to an off-site application. It’s much more difficult to know if a user got the information they were looking for when there’s no action to take. This is why we’re planning to continually explore, iterate on, and test indicators until we find the right recipe.

How the dashboards work

Using the strategies developed with our partners, we watched, and over time, saw the metrics move. At that point, we knew we had a formula that would work.

We rolled indicators up into 4 simple categories:

  • Findability — Is it easy for users to find a page?
  • Outcomes — If the page is transactional, are users taking the intended action? If the page is focused on directing users to other pages, are they following the right links?
  • Content quality — Does the page have any broken links? Is the content written at an appropriate reading level?
  • User satisfaction — How many people didn’t find what they were looking for?
Screenshot of dashboard results as they appear in the Mass.gov CMS.

Each category receives a score on a scale of 0–4. These scores are then averaged to produce an overall score. Scoring a 4 means a page is checking all the boxes and performing as expected, while a 0 means there are some improvements to be made to increase the page’s overall performance.

All dashboards include general recommendations on how authors can improve pages by category. If these suggestions aren’t enough to produce the boost they were looking for, authors can meet with a content strategist from Digital Services to dive deeper into their content and create a more nuanced strategy.

GIF showing how a user navigates to the “Improve Your Content” tab in a Mass.gov analytics dashboard.

Looking ahead

We realize we can’t totally measure everything through quantitative data, so these scores aren’t the be-all, end-all when it comes to measuring content performance. We’re a long way off from automating the work a good editor or content strategist can do.

Also, it’s important to note these dashboards are still in the beta phase. We’re fortunate to work with partner organizations who understand the bumps in the proverbial development road. There are bugs to work out and usability enhancements to make. As we learn more, we’ll continue to refine them. We plan to add dashboards to more content types each quarter, eventually offering a dashboard and specific recommendations for the 20+ content types in our CMS.

Oct 09 2018
Oct 09

I recently worked with the Mass.gov team to transition its development environment from Vagrant to Docker. We went with “vanilla Docker,” as opposed to one of the fine tools like DDev, Drupal VM, Docker4Drupal, etc. We are thankful to those teams for educating and showing us how to do Docker right. A big benefit of vanilla Docker is that skills learned there are generally applicable to any stack, not just LAMP+Drupal. We are super happy with how this environment turned out. We are especially proud of our MySQL Content Sync image — read on for details!

Pretty docks at Boston Harbor. Photo credit.

Docker compose

The heart of our environment is the docker-compose.yml. Here it is, then read on for a discussion about it.

Developers use .env files to customize aspects of their containers (e.g. VOLUME_FLAGS, PRIVATE_KEY, etc.). This built-in feature of Docker is very convenient. See our .env.example file:

MySQL content sync image

The most innovative part of our stack is the mysql container. The Mass.gov Drupal database is gigantic. We have tens of thousands of nodes and 500,000 revisions, each with an unholy number of paragraphs, reference fields, etc. Developers used to drush sql:sync the database from Prod as needed. The transfer and import took many minutes, and had some security risk in the event that sanitization failed on the developer’s machine. The question soon became, “how can we distribute a mysql database that’s already imported and sanitized?” It turns out that Docker is a great way to do just this.

Today, our mysql container builds on CircleCI every night. The build fetches, imports, and sanitizes our Prod database. Next, the build does:

That is, we commit and push the refreshed image to a private repository on Docker Cloud. Our mysql image is 9GB uncompressed but thanks to Docker, it compresses to 1GB. This image is really convenient to use. Developers fetch a newer image with docker-compose pull mysql. Developers can work on a PR and then when switching to a new PR, do a simple ahoy down && ahoy up. This quickly restores the local Drupal database to a pristine state.

In order for this to work, you have to store MySQL data *inside* the container, instead of using a Docker Volume. Here is the Dockerfile for the mysql image.

Drupal image

Our Drupal container is open source — you can see exactly how it’s built. We start from the official PHP image, then add PHP extensions, Apache config, etc.

An interesting innovation in this container is the use of Docker Secrets in order to safely share an SSH key from host to the container. See this answer and mass_id_rsa in the docker-compose.yml above. Also note the two files below which are mounted into the container:

Configure SSH to use the secrets file as private key Automatically run ssh-add when logging into the container

Traefik

Traefik is a “cloud edge router” that integrates really well with docker-compose. Just add one or two labels to a service and its web site is served through Traefik. We use Traefik to provide nice local URLs for each of our services (www.mass.local, portainer.mass.local, mailhog.mass.local, …). Without Traefik, all these services would usually live at the same URL with differing ports.

In the future, we hope to upgrade our local sites to SSL. Traefik makes this easy as it can terminate SSL. No web server fiddling required.

Ahoy aliases

Our repository features a .ahoy.yml file that defines helpful aliases (see below). In order to use these aliases, developers download Ahoy to their host machine. This helps us match one of the main attractions of tools like DDev/Lando — their brief and useful CLI commands. Ahoy is a convenience feature and developers who prefer to use docker-compose (or their own bash aliases) are free to do so.

Bells and whistles

Our development environment comes with 3 fine extras:

  • Blackfire is ready to go — just run ahoy blackfire [URL|DrushCommand] and you’ll get back a URL for the profiling report
  • Xdebug is easily enabled by setting the XDEBUG_ENABLE environment variable in a developer’s .env file. Once that’s in place, the PHP in the container will automatically connect to the host’s PHPStorm or other Xdebug client
  • A chrome-headless container is used by our suite which incorporates Drupal Test Traits — a new open source project we published. We will blog about DTT soon

Wish list

Of course, we are never satisfied. Here are a couple issues to tackle:

Oct 09 2018
Oct 09

A straightforward mission doesn’t always mean there’s a simple path. When we kicked off the Mass.gov redesign, we knew what we wanted to create: A site where users could find what they needed without having to know which agency or bureaucratic process to navigate. At DrupalCon Baltimore in 2017, we shared our experience with the first nine months of the project building a pilot website with Drupal 8, getting our feet wet with human-centered (AKA “constituent-centric”) design, and beginning to transform the Mass.gov into a data-driven product.

Oct 09 2018
Oct 09

Structured content is central to the content strategy for our new Drupal-based Mass.gov. So is the idea of a platform-agnostic design that can be reused across our diverse ecosystem of web applications, to encourage a consistent look, feel, and user experience. We’re not the only ones with these priorities for our new digital platform. So we can’t be the only ones wrestling with the unsolved authoring experience implications either. This blog post is an attempt to articulate the basic problem and share our best, latest idea for one possible solution. As the saying goes, ‘If you want to go fast, go alone. If you want to go far, go together.’ We want to go far. If you like our idea, or if you have other possible solutions or insights, please share them with us in comments below, or by tweeting at us @massgov, or contact me at @bryanhirsch. Let’s go together.

Problems:

Drupal has made major strides toward improving the content authoring experience in recent years: Acquia’s Spark project in Drupal 7, Quick Edit in Drupal 8, and Edward Faulkner’s integrations with Ember. But (1) our vendors for Mass.gov have unanimously dissuaded us from leveraging these innovations in our new authoring experience because with complex data models it’s costly and highly customized to make in-place editing through the front end work. (2) This challenge is compounded by the desire to keep our design portable across diverse web properties, which means we want to keep Drupal’s Quick Edit markup out of our Pattern Lab-based component library. Additionally, (3) if we get structured content right, our Mass.gov content will be reused in applications we don’t control (like Google’s knowledge graph) and in an increasing number of government website via APIs. It’s both cost prohibitive and practically impossible to create frontend authoring UIs for each of these applications. That said, if we move authoring away from the front end in-place editing experience, (4) authors still need detailed context to visualize how different pieces of content will be used to write good content.

Here’s one possible solution we’re interested to explore that seems like it should address the four issues outlined above: Move high-fidelity live previews to the backend authoring experience, displayed alongside the content editing form as visualized in the designs below.

Visual design of possible UI for live preview of different components from the Pattern Lab-based Mayflower component library, incorporated into the backend Mass.gov authoring experience. View additional designs here.

By showing authors examples of how different pieces of content might be used and reused, we can give writers enough context to write meaningful structured content. But maybe we only need to give authors enough examples to have reasonable interactions with all the different content form fields. If this works, then we don’t have to try and keep up with an infinitely growing and changing landscape of possible new frontends. Pattern Kit (here) and Netlify CMS (here) both offer working, open-source, examples of how this authoring experience could work.

Mass.gov is not a “decoupled Drupal” ecosystem yet. Our API strategy is in its infancy. We know other people with much more experience are thinking about the same issues. Maybe some are even writing code and actively working to develop solutions. If this is you, we’d love to hear from you, to know how you’re approaching these problems, and to learn from anything you’ve tried here.

Oct 09 2018
Oct 09

This is a guest blog by Lijo Abraham and Ali Fathima N. A. to tell you about a recent Global Training Days event in Kerala.

Group photo on stage at GTD event
Group photo by Sumesh S (sumesh_sr)

A Drupal Global Training Day (GTD) was held in Thiruvananthapuram, Kerala, India on September 29, welcoming 60 participants representing diverse sectors, including students from engineering colleges, software professionals, and government officials. The event created momentum to form the Drupal Community in Kerala.

The International Centre for Free and Open Source Software (ICFOSS)—an autonomous institution under the Government of Kerala that is mandated with propagation, promotion, and development of Free and Open Source Software—donated the event. Zyxware Technologies provided the technical partnership for the GTD.

The GTD had eminent personalities addressing the participants and sharing their experiences. In the inaugural address, M. Sivasankar IAS, Secretary of the E&IT Department for the Government of Kerala, stressed the role played by the Kerala Government in enabling the technology ecosystem in India. 

Dr. Rajeev R. R., Program Head of ICFOSS, welcomed the participants. Thomas P. Thomas, CEO of Zyxware Technologies, offered an Introduction to Drupal, the Drupal Community, and the GTD.

Vimal Joseph, Senior Manager of Technology at Zyxware Technologies, presented a session on 'Fueling the Digital Transformation with Drupal'—which was followed by open questions and answers regarding Drupal. 

A case study on 'Multi-site Platform for a Government Agency' was presented by Mathew T. Abraham, a Project Manager at Zyxware Technologies. Participants interacted directly with the speakers.

Vimal Joseph speaks with Umami demo showing on screen
Fuelling Digital Transformation with Drupal, photo by Sudheesh S. Babu.

Presentations were followed by hands-on Drupal workshops. Drupal developers of Zyxware Technologies namely  Abhinand Gokhala, Sumesh S, Jijo Joseph, Sudheesh S. Babu, Jithin Prabhakaran, Sahal V. A., Jeslin Shaji and Ali Fathima N. A. provided individual attention to the participants. Workshops led by Krishna R. P., Technical Project Manager, and Ajish J. Pulikottil, Technical Consultant, offered an introduction to Drupal, installing, and how to build a simple Drupal 8 application. Nearly a dozen staff from ICFOSS and Zyxware Technologies volunteered at the event as well.

The workshop on Drupal has been very inspiring. I am feeling delighted to have been a part of this and will try to continue with the wave approach on society with this positive technique,” stated Aishwarya Soman Nair, a student at Saintgits College of Engineering.

Overall, participants’ feedback stated that this was a new, helpful opportunity to learn more about Drupal in detail. Participants were awarded certificates of participation.

One of the best workshops I have attended. The training was inspiring, informative, and its method of delivery was so easy to receive. I am interested in forthcoming open source training also,” said Raveena R. Marangattu, a student at Saintgits College of Engineering.

You can be part of Global Training Days

Get involved with Global Training Days! Join the group and host an event this November 30-December 1.

Oct 09 2018
Oct 09

It was recently announced that 2020 will be the year Drupal 9 is officially released into the wild. The exact date hasn’t been set, but we can now look forward to the 9.0 release that year. The announcement also gave us an official End of Life date of November 2021 for Drupal 7 AND Drupal 8. So, what does this mean if you’re currently running or developing a site on one of those versions? In this post, I’ll explain.

What this means for Drupal 8?

Drupal 8 is built around a concept of continuous innovation. What this means is that new features and backwards-compatible changes are continuously added. When an old system or code is depreciated, instead of removing it, it stays in the codebase. This ensures that custom code and contributed modules will continue to work and have time to update. Eventually, there will be an excess amount of depreciated code and dependencies and there will be a need to remove it. That is one of the reasons for the release of Drupal 9. All that old stuff gets removed and we start fresh with the latest and greatest technology.

The great thing about Drupal 8 is that by the time Drupal 9 is released all of the modules and custom code in your site should be up-to-date. Therefor, updating from 8 to 9 is no different than from 8.5 to 8.6. Clean and painless!

And that’s the point. This method of building and releasing versions will continue for the foreseeable future which is why we like to say that a migration to the latest Drupal will be the last migration you ever need.

What this means for Drupal 7?

Unfortunately, Drupal 7 is a different story. When Drupal 7 reaches end of life in November of 2021, it will no longer be supported by the community at large. There are plans to release a Drupal 7 version that uses the latest version of PHP. There is also a paid support program planned (similar to Drupal 6 LTS) that will allow people and organizations unable or unwilling to migrate to continue to keep their sites secure. But really, your best course of action is to plan for a migration to Drupal 8 by 2020. This keeps your site current and guarantees it’s security moving forward.

The codebase between 7 and 8 is entirely different so a migration to Drupal 8 is a pretty big undertaking. You could call it replatforming. Drupal 8 does however include a built in data migration tool that will make the move easier. You might still need some help though depending on your site requirements and edge cases. Plus, data is one thing, but you would also need to move your theme, too. The silver lining is that migrating presents an opportunity to freshen up the look of your site and increase site speed with the latest software. For more information on what is involved in a migration, check out this post.

Like I mentioned earlier in this post, a migration to Drupal 8 may likely be the last migration you ever need since subsequent major version updates (i.e. from 8 to 9) should be very quick and easy. Once you’ve made that initial investment migrating to Drupal 8, you can rest assured that you won't have to go through that process again, possibly forever.

Migration experts

Acro Media is a Drupal agency specialized in eCommerce. We help build and maintain successful eCommerce websites as well as the underlying Drupal Commerce platform. We are also heavily involved in the development of Drupal’s migration tools. If you want to discuss what a migration might look like for your business, talk to us! We’re happy to help.

Contact us to discuss your migration!

Oct 09 2018
Oct 09

Drupal Modules: The One Percent — Login History (video tutorial)

[embedded content]

Episode 47

Here is where we bring awareness to Drupal modules running on less than 1% of reporting sites. Today we'll check out Login History, a module logs details of user logins.

Oct 09 2018
Oct 09
Solid concept inrupt

Last week, I had a chance to meet with Inrupt, a startup founded by Sir Tim Berners-Lee, who is best known as the inventor of the World Wide Web. Inrupt is based in Boston, so their team stopped by the Acquia office to talk about the new company.

To learn more about Inrupt's founding, I recommend reading Tim Berners-Lee's blog or Inrupt's CEO John Bruce's announcement.

Inrupt is on an important mission

Inrupt's mission is to give individuals control over their own data. Today, a handful of large platform companies (such as Facebook) control the media and flow of information for a majority of internet users. These companies have profited from centralizing the Open Web and lack transparent data privacy policies on top of that. Inrupt's goal is not only to improve privacy and data ownership, but to take back power from these large platform companies.

Inrupt will leverage Solid, an open source, decentralized web platform that Tim and others have been developing at MIT. Solid gives users a choice of where their personal data is stored, how specific people and groups can access select elements, and which applications can use it. Inrupt is building a commercial ecosystem around Solid to fuel its success. If Solid and/or Inrupt are widely adopted, it could radically change the way web sites and web applications work today.

As an advocate for the Open Web, I'm excited to see how Inrupt's mission continues to evolve. I've been writing about the importance of the Open Web for many years and even proposed a solution that mirrors Solid, which I called a Personal Information Broker. For me, this is an especially exciting and important mission, and I'll be rooting for Inrupt's success.

My unsolicited advice: disrupt the digital marketing world

It was really interesting to have the Inrupt team visit the Acquia office, because we had the opportunity to discuss how their technology could be applied. I shared a suggestion to develop a killer application that surround "user-controlled personalization".

Understanding visitors' interests and preferences to deliver personalized experiences is a big business. Companies spend a lot of time and effort trying to scrape together information about its website's visitors. However, behavior-based personalization can be slow and inaccurate. Marketers have to guess a visitor's intentions by observing their behavior; it can take a long time to build an accurate profile.

By integrating with a "Personal Information Broker" (PIB), marketers could get instant user profiles that would be accurate. When a user visits a site, they could chose to programmatically share some personal information (using a standard protocol and standard data schema). After a simple confirmation screen, the PIB could programmatically share that information and the site would instantly be optimized for the user. Instead of getting "cold leads" and trying to learn what each visitor is after, marketers could effectively get more "qualified leads".

It's a win not only for marketers, but a win for the site visitor too. To understand how this could benefit site visitors, let's explore an example. I'm 6'5" tall, and using a commerce site to find a pair of pants that fit can be a cumbersome process. I wouldn't mind sharing some of my personal data (e.g. inseam, waist size, etc) with a commerce site if that meant I would instantly be recommended pants that fit based on my preferences. Or if the store has no pants that would fit, it could just tell me; Sorry, we currently have no pants long enough for you!. It would provide me a much better shopping experience, making it much more likely for me to come back and become a long-time customer.

It's a simple idea that provides a compelling win-win for both the consumer and retailer, and has the opportunity to disrupt the digital sales and marketing world. I've been thinking a lot about user-controlled personalization over the past few years. It's where I'd like to take Acquia Lift, Acquia's own personalization product.

Inrupt's success will depend on good execution

I love what Solid and Inrupt are building because I see a lot of potential in it. Disrupting the digital marketing world is just one way the technology could be applied. Whatever they decide to focus on, I believe they are onto something important that could be a foundational component of the future web.

However, it takes a lot more than a good idea to build a successful company. For startups, it's all about good execution, and Inrupt has a lot of work to do. Right now, Inrupt has prototype technology that needs to be turned into real solutions. The main challenge is not building the technology, but to have it widely adopted.

For an idea this big, Inrupt will have to develop a protocol (something Tim Berners-Lee obviously has a lot of experience with), build out a leading Open Source reference implementation, and foster a thriving community of developers that can help build integrations with Drupal, WordPress and hundreds of other web applications. Last but not least, Inrupt needs to look for a sustainable business model by means of value-added services.

The good news is that by launching their company now, Inrupt has put themselves on the map. With Tim Berners-Lee's involvement, Inrupt should be able to attract top talent and funding for years to come.

Long story short, I like what Inrupt is doing and believe it has a lot of potential. I'm not sure what specific problem and market they'll go after, but I think they should consider going after "user-controlled personalization" and disrupt the digital marketing world. Regardless, I'll be paying close attention, will be cheering for their success and hopefully find a way to integrate it in Acquia Lift!

Oct 09 2018
Oct 09

A website with a security hole could be a nightmare for your business, leaving regular users untrusted. The security breach is not just about the website resources, but it could be putting up the website reputation at stake and injecting harmful data in the server & executing them. There could be many ways to do that. One of them is an Automated script, which scans your website and looks up for the sensitive part and tries to bypass the web security with injected code.

I believe you might be thinking of your website now.

  • Whether your website is fully secured or not? 
  • How to make sure everything ships on our website is generic? And how to protect them? 

As a Drupal Developer, I’ve come across some of the contributed module available on Drupal.org that can help your site in dealing with security issues. Still, I can’t assure, by applying those modules, you can safeguard your website. But it’s always recommended to follow the set guideline & utilize the modules to minimize the security breaches. 

Let’s take a look at those modules:

Secure Pages

We all know that moving an application from HTTP to HTTPS gives an additional layer of security, which can be trusted by the end users. Unlike regular modules, you just don’t need to follow regular module installations instead your server should be SSL enabled.

Currently, it is available for Drupal 7 only.
Ref URL: https://www.Drupal.org/project/securepages

Security Kit

The Kit itself is a collection of multiple vulnerabilities such as Cross-site scripting, Cross-site Request Forgery, Clickjacking, SSL/TLS. With the help of security kit module, we can mitigate the common risk of vulnerabilities. Some of the vulnerabilities have already been taken care by Drupal core like clickjacking introduced in 7.50 version.

Currently, it’s available for both Drupal 7 and Drupal 8.
Ref URL: https://www.Drupal.org/project/seckit

Password Policy

This module is used to enforce users to follow certain rules while setting up the password. A web application with weaker security implementation, allow hackers to guess password easily. That’s the reason you get password policy instruction while setting up the password. It’s not just a fancy password, but secure & difficult to guess.

# Password should include 1 Capital letter
# Password should include 1 Numeric
# Password should include 1 Special Character
# Password should MIn & Max Character

This module is currently available for both Drupal 7 and Drupal 8.
Ref URL: https://www.Drupal.org/project/password_policy

Paranoia

This module looks for places in the user interface, where an end user can misuse the input area and block them. Few features that need to showcase here are:

# Disable permission "use PHP for block visibility".
# Disable creating “use the PHP” filter.
# Disable user #1 editing.
# Prevent risky permissions.
# Disable disabling this module. 

Currently, it’s available for Drupal 7 and Drupal 8.
Ref URL: https://www.Drupal.org/project/paranoia

Flood Control

This module provides an Administrative UI to manage user based on UID & User-IP. There is configuration available to manage user restriction based on the nth number of the wrong hit by user ID/IP. We already know that Drupal core has a shield mechanism to protect their user with five unsuccessful logins hit, users get blocked for an hour/minute. With the help of the contributed module, we can dig it a bit.

Currently, it’s available for Drupal 7.
Ref URL: https://www.Drupal.org/project/flood_control

Automated logout

In terms of user safety, the site administrator can force log out users, if there is no activity from the user end. On top of that, it provides various other configurations like:

# Set timeout based on roles.
# Allow users to log in for a longer period of time.
# User has the ability to set their own time.

Currently, it’s available for Drupal 7 and Drupal 8.
Ref URL: https://www.Drupal.org/project/autologout

Security Review

This module checks for basic mistakes that we do while setting up a Drupal website. Just untar the module & enable it. This will run an automated security check and produce a result. Remember this won’t fix the errors. You need to manually fix them. Let's take a look at some of the security features that need to be tested by the module:

# PHP or Javascript in content
# Avoid information disclosure
# File system permissions/Secure private files/Only safe upload extensions
# Database errors
# Brute-force attack/protecting against XSS
# Protecting against access misconfiguration/phishing attempts.

Currently, it’s available for Drupal 7.
Ref URL: https://www.Drupal.org/project/security_review

Hacked

This tool helps developer avoid adding messy code directly to their contributed module, instead of applying patches or new release update. It works on a very simple logic. It scans all the modules & themes available on your site. Download them and compare it with an existing module to make sure modules/themes are on correct shape. The result will give you information on changed module/theme and the rest of the thing you are well aware of - what needs to be done?

Currently, it’s available for Drupal 7 and Drupal 8.
Ref URL: https://www.Drupal.org/project/hacked
 

All of the above modules are my recommendation that a Drupal website should have. Some contributed module will resolve your security issues by providing correct configuration and some of them are just an informer. They will let you know the issue. But you need to manually fix those issue.
 
Further, these contributed modules provide the atomic security based on the complexity of your site and types of user available. You can look up for the security module and protect your site against anonymous.

We, at Valuebound - a Drupal CMS development company, help enterprises with Drupal migration, Drupal support, third-party integration, performance tuning, managed services, and others. Get in touch with our Drupal experts to find out how you can enhance user experience and increase engagement on your site.

Oct 08 2018
Oct 08

by David Snopek on October 8, 2018 - 4:45pm

If you haven't heard yet, PHP 5 will reach the end of its security support (from the upstream project) in December of this year.

During DrupalCon Baltimore we announced that we'd be updating Drupal 6 to work with PHP 7.2, and, in September, we announced that we'd be making a big push to get that live with a couple of our customers.

Finally, we have something to show for it! :-)

So far, we've only tested with a few sites, so I'm sure there's some additional issues and bugs we haven't encountered yet. But we have an initial release of Drupal core and some selected contrib modules that work with PHP 7.2 in our testing.

And all our work so far has been released back to the community!

Read more for the details :-)

Drupal core

The short version: We've released Drupal 6.45 with support for PHP 7.2

We've take a particular approach with this:

  • We included a shim for the ereg() family of functions that were removed, rather than converting core to using preg_*() functions. This was done because contrib also uses those removed functions and this saves us from having to update many contrib modules.
  • In one or two cases, we modified Drupal core to maintain the PHP 5 behavior of its APIs if that behavior was depended on by "a lot" (subjective judgement) of contrib modules, again in order to have to update fewer contrib.
  • We made most of the updates recommended by the PHPCompatibility standard for phpcs
  • We tried to retain (and tested for) PHP 5.2+ compatibility, so that our Drupal core fork would continue to work for people who haven't updated yet. (If you're not aware of it, 3v4l.org is a great tool for trying PHP snippets in lots of versions of PHP at once, and, well, we have a bunch of different PHP versions via Docker too.)
  • But otherwise, we've based our changes on actual manual testing and confirmed bugs, and tried to make the smallest possible change to fix each problem.

Important security note!

Drupal adds a .htaccess file to the public (ie. sites/default/files/) and temporary files directory to prevent PHP files that somehow end up there from being executable when using Apache.

However, this .htaccess file won't work with PHP 7 unless modified!

One way to do this, is to delete the .htaccess files and then visit the "Status report" on your site, which will re-create the file with the changes necessary for PHP 7.

We've considered adding an update hook to do this, but we're worried about wiping out any added changes - see the issue on GitHub and leave your thoughts.

Drush

You need a patched Drush 8 in order to work with PHP 7. See drush-ops/drush#3706 and you can grab the patch here.

The Drush maintainers seem open to committing this patch, so hopefully, this will make it into a Drush 8 release at some point. :-)

Selected contrib modules

Of course, the true power of Drupal is in it's contributed modules!

We're committed to updating the contrib modules used by our D6LTS customer to work with PHP 7.2.

That said, updating contrib (especially complex contrib) is a lot harder than Drupal core, so we expect this process to take us all the way to the end of the year.

Here's the contrib releases we've made so far:

There's also a number of contrib modules (generally the simpler ones) that work fine without any changes.

How to get involved!

If you're also working on getting your Drupal 6 site working on PHP 7, and you find any issues or bugs, you can write an issue on the project on GitHub or in the D6LTS queue on Drupal.org. We appreciate the help and a number of people have contributed already - thanks! :-)

Or if you're interested in us doing this for you...

Sign up for Drupal 6 Long-Term Support!

Have you updated your Drupal site to PHP 7 already? How'd that go? Please leave a comment below!

Pages

About Drupal Sun

Drupal Sun is an Evolving Web project. It allows you to:

  • Do full-text search on all the articles in Drupal Planet (thanks to Apache Solr)
  • Facet based on tags, author, or feed
  • Flip through articles quickly (with j/k or arrow keys) to find what you're interested in
  • View the entire article text inline, or in the context of the site where it was created

See the blog post at Evolving Web

Evolving Web