Aug 17 2018
Aug 17

Modern digital services need to integrate and interact with each other to provide a seamless user experience and data integrity in every context — in the browser, in a native app or wherever. That means designing APIs to connect the systems in a fast, secure and standardised way. Here are some healthy practices for designing APIs for digital services.

In my previous blog post on managing microsites with Drupal 8 I promised to write something further and fuller about designing web APIs. This is less directly about Drupal 8, but I will comment on how to implement the recommendations here in Drupal 8.

These are the things that I take time to think about when building a web API.

Design the thing

As a developer, it’s all too easy, and too tempting, to just jump right into coding something. It’s certainly a weakness I suffer from and that I have to cope with.

Before putting the proverbial pen to paper, though, it’s really important to understand why we’re building an API in the first place. What are the problems we’re trying to solve? What do the users need or want?

With regard to building an API, that means thinking about the consumers of the data provided by your API. If you’re building a decoupled CMS, the main user is the frontend system. In other circumstances it may also mean other websites, embedded widgets, apps on mobile devices, and so on. Whatever it is, due consideration needs to be given to the needs of those consumers.

That means understanding your user’s needs, examining the patterns of behaviour of those users, and ultimately translating those into a design.

Sound like familiar language? Yes, that’s the language of visual designers and user experience specialists. In my books, I’d suggest that means you would do well to work closely with specialist design colleagues when designing and building an API.

Your web API needs to be designed: needs; behaviours; analysis; patterns; traits; design; feedback; improve.

Be an artisan with your API

Take time. Research. Think. Plan. Design.

Beware, Drupal

When you’re working with Drupal, it is too easy to jump over the design step. Drupal does so much out of the box that it’s too easy to start coding without thinking properly about what we’re coding.

The availability bias when you’re a specialist Drupal developer, having it as the go-to toolkit, is that we think about the solutions to the problems (if we’ve even got as far as articulating the problems) in a Drupally way. For instance, since Drupal has a menu system it’s easy to think about navigation in a decoupled CMS system in terms of the way Drupal handles the menu system, which prevents you from thinking about other ways of handling navigation.

The same is true with Drupal 8’s support for REST. Drupal 8 core includes REST resources for most entities in a Drupal installation. That’s very useful. But, it can also make you lazy, just using these core RESTful API endpoints for nodes or comments or whatever, with all the guff they include, without even thinking about whether they’re appropriate, whether all the guff they include is appropriate, whether it’s useful or formatted appropriately.

That goes also for REST exports from Views. They can be useful, giving you a quick way of creating a RESTful API endpoint. The problem is, thought, that also confines you to working with the way Views works and what it can produce. You may find that a problem if you want to support optionally requesting for additional objects to be embedded in the response, for instance (see below).

Resist the temptation! Instead, take the time to think from the other end first.

I’ll return to the question of designing your API below, but first we need to talk about documentation, since designing and documenting your API can be part of the same process.

Documentation

Yeah, I know. Most devs find this just the dullest thing in the world to write. With a web API, though, it’s incredibly important. If you want people to actually be able to use your API, they need to know how to work with it. It’s horrible trying to work with an undocumented or under-documented API.

So, what should go into the documentation for a web API? Here’s some pointers.

The basics:

API reference

Yeah, this is probably what everyone thinks of when they think of documentation for a web API, but it is in fact only part of the documentation—maybe the most important part, but only part.

There a plenty of good blog posts and descriptions of what your API reference should include, so there’s no need for me to reiterate that here.

The most important thing to say, though, is that, beyond identifying resource paths, actions and parameters, your reference should describe in full both what the request should and the response will look like.

Mock server

It is incredibly helpful to include a mock server with your API documentation. Preferably, your mock server will handle the documented requests and responses of each resource.

This will help those building apps and tools that will consume your API to get up-and-running quickly.

For gold stars and a round of applause:

Tutorials, guides, cookbooks

If your API gets to be any substantial scale then the developers who use your API will find it incredibly useful to have some tutorials and guides included in your documentation.

These should cover common tasks, or how to work with specific sections of your API. A guide to ‘best practices’ with your API may be appropriate to help people make the most out of your API.

Check out the guides in MailChimp’s API documentation for a good example. Twitter’s API docs ‘best practice’ section are great as well.

Quick start

One invaluable guide is the ‘getting started’ or ‘quick start’ guide. This can often be just a single page, with a succinct summary of the things you need to do to get going.

The YouTube API ‘getting started’ page is a useful example.

Useful tools

There’s lots of useful tools out there to help you get started when you document your API design. Here’s some suggestions.

API Blueprint is an open-source high-level API design language that is very useful for writing your documentation. The language is similar to Markdown, so it’s easy to work with. There are a number of SaaS tools offering services based on API Blueprint. One that I really like is Apiary.io (though they’ve recently been bought by Oracle so who know where that’ll take them), but there are others, like Gelato.

You might also consider Read the Docs and daux.io amongst others. There’s also the Open API Initiative, which is ‘focused on creating, evolving and promoting a vendor neutral API Description Format,’ though the initiative is ‘based on the Swagger Specification.’ Open API is an initiative of Swagger.io, and they have a list of tools and frameworks using the specification. The OpenAPI specification is on GitHub.

Whatever you use, your documentation should (probably) end up in a public location so that other developers can use it. (An exception might be for an API used in a secure decoupled system.)

Keep it simple

So, let’s return more directly to the question of designing your web API.

An important rule of thumb for me is to ‘keep it simple, stupid.’ There is no need to include anything more in the resources of your API than is necessary.

I say this as a long-time Drupal developer, knowing full well that we have a superpower in overcomplicating things, all those extra divs and classes all over the markup, all those huge arrays.

This is still true in the core REST resources of Drupal 8. For example, when GETting the core Content resource for node 10 /node/10?_format=json the response gives us …

{
"nid": [
{
"value": "10"
}
],
"uuid": [
{
"value": "6bfe02da-b1d7-4f9b-a77a-c346b23fd0b3"
}
],
"vid": [
{
"value": "11"
}
],

}

Each of those fields is an array that contains an array that contains the value name:value pair as the only entry. Whew! Exhausting. An array within an array, when there’s only one level-1 array ? Really? Maybe we could render that a little more simply as …

{
"nid": "10",
"uuid": "6bfe02da-b1d7-4f9b-a77a-c346b23fd0b3",
"vid": "11",

}

… which might help our API’s consuming applications to parse and use the JSON data more easily. Like I said above, I’d suggest that just using the core entity REST resources isn’t often the place to start.

The simplicity mantra should pervade your API design. Include only the data that is needed for the consuming apps. Pare it down, so it’s as easy to read as possible.

As a result, when you come to build that API in your Drupal 8 backend system, it will demand a good discipline on you of not just throwing out in the API resource responses what’s easiest but rather what’s best.

What’s in a name?

This is true in particular when it comes to your naming conventions and API resource paths.

Don’t just add root-level endpoints ad infinitum. Use well-structured paths for your resources where the depth of the path elements make sense together. The result should be that your resources are explorable via a browser address bar. E.g.

GET /articles/5/comments/19

… makes intuitive sense as a path: get comment 19 on article 5.

On the other hand, don’t just add depth to your resource paths unnecessarily. Separating things out with some logic will help make things intelligible for developers using your API. E.g.

GET /articles/comments

Umm? What’s that? The comments on articles — why would I want that? However …

GET /comments?contenttypes=articles

… is more obvious — a path to get comments, with a content types filter. Obvious. It also suggest we might be able to filter content types with a comma-separated list of types—nice!

Find a straightforward naming convention. Make the names of resource endpoints and data fields obvious and sensible at first glance.

Overall, make the way you name things simple, intuitive and consistent. If the title field of a data object in your resources is called ‘title’ in one place, ‘name’ in others and ‘label’ in still others, for instance, then it adds unnecessary complexity for writing reusable code.

Easy peasy, lemon squeezy

When designing your web API, it needs to be simple to use and work with. Help users to get just what they want from your API.

Support limiting response fields

You’ll make developers smile if you provide a way of limiting the fields that are returned in a response. You don’t always want to get everything from a resource. Being able to choose exactly what you want can help speed up usage of an API.

For example, consider supporting a fields parameter, that could be used like this:

GET /articles/5?fields=id,title,created

Support auto-loading related resources

The opposite might also be important, being able to load extra resources in the same request. If a request can combine related resources then fewer requests will need to be made, which again will help speed up using an API.

Supporting an embed query parameter could give you this. For example:

GET /articles/5?embed=author.name,author.picture,author.created

… would enable users to load also the article author’s name, their picture and the date their account was created. Note the dot syntax, which might be useful.

Flexible formats

Another way of making it easy for users is to support flexibility in the format of the data in the response. JSON is usually what people want to handle, but some do still prefer to use XML.

There’s also the problem that JSON has no support for hyperlinks, the building blocks of the web, which is a curiosity as the W3C admit. There are JSON protocol variants that attempt to address this, like HAL and JSON-LD, but I refer you to a fuller discussion of JSON and hypermedia and some useful resources on hypermedia and APIs from Javier Cervantes at this point.

Keep it steady, Eddy

When designing your API, you should expect it to have a certain lifetime. In fact, it’s bound to last long enough to need changing and improving. But what do you do about rolling out those changes?

Your devs will need the flexibility to change things, especially if they find bugs, and they’ll get frustrated if they can’t adapt the API to make improvements.

Your users need reliability and stability, though, and they’ll get frustrated if the API keeps changing and their consumer app dies without warning.

So, from the start, include versioning.

A pretty sensible thing is use a path element to specify the version number. E.g.

GET /api/v1/articles/5

You could use a query parameter instead, of course, though since query parameters are optional that would mean that without the version parameter your API would return the latest. Consumers who’d inadvertently missed including the version in their requests would be vulnerable to changes making their app die, which might result in some flame support emails.

Support that thing

Make sure there’s a way for your users to let you know when they have problems, there find a bug, or whatever.

If its an internal API, like with a decoupled CMS and frontend, then that is probably your bug tracker.

If it’s a public API, then you’ll need some public way for people to contact you. If you host your repository on e.g. GitHub then there’s support for issues baked in.

Respond.

Giant lists of bugs that never get addressed are soul-crushing.

Some other things to consider

Authentication and security

You’ll probably want to include some authentication to your API. You shouldn’t rely on cookies or sessions for your API as it should be stateless. Instead, by using SSL (you’re using SSL, right? yes, you’re using SSL.), you can implement a token-based authentication approach.

However, where a token approach is inappropriate, OAuth 2 (with SSL) is probably the best way to go. Here’s some further discussion on API security and authentication, if you’d like to read in more depth.

Caching

HTTP has a caching mechanism built in — woot! Just add some response headers and do some validation on request headers and it’s there.

I’ll point you elsewhere to read more about the 2 key approaches, ETag and Last-Modified.

Use HTTP status codes

HTTP defines lots of meaningful status codes that can be returned in your API responses. By using them appropriately, your API consumers can respond accordingly.

Useful errors

If a request has an error, don’t just return an error code. Your API should provide a useful error message in a format with which the consumer can work. You should use fields in your error message in the same way that a valid response does.

Healthy API design

In summary, when building an API it’s not healthy to just jump in and start writing the code for the API from a specification. Neither is it healthy to just rely on the default resources of CMS tools like Drupal 8. APIs always need to be tailor-made for the task.

APIs need to be designed.

If you can make your web API simple to understand and adopt, easy to work with, incorporating plenty of flexibility, if it’s stable and reliable and well-supported, then you’re well on your way to being the proud owner of a healthy API.

Aug 17 2018
Aug 17

There are lots of situations in which you need to run a series of microsites for your business or organisation — running a marketing campaign; launching a new product or service; promoting an event; and so on. When you’re with Drupal, though, what options do you have for running your microsites? In this article I review and evaluate the options in Drupal 8, make a recommendation and build a proof of concept.

So, I want to run some microsites …

A client brought me an interesting problem recently, something they need to solve for their production Drupal site. They are an international humanitarian agency who, alongside their main production website, want to run some microsites for a number of their public campaigns. Although they could run them on the main site, they’ve found too many limitations in trying to do that. Campaign teams, frustrated with the lack of flexibility and slow protocols for getting changes made to support their bespoke needs, have often gone off with their small budget and dynamic team to create something quick that fits their campaign with Squarespace or Wordpress or something.

That made the campaigners really happy. But, when the campaign or event lapsed, the campaign site quickly got out of date and went unloved, the campaign team moved on and no-one could remember how to log into the system and it became abandoned.

Hearing this story was so familiar — the same thing often happened when I was a senior developer at Oxfam International.

So, they said, could something be done about it? What, if anything, could be done with Drupal to support campaigners get their microsites running? What would give them the fast, bespoke solution to their microsite problems, whilst still keeping all the content well-managed and being able to share that content with the main site or other microsites?

I scratched my chin and had a think.

How about Drupal multisites?

Since some of its earliest versions, Drupal has included a feature for multi-sites — running several sites from a single codebase installation, sharing the core system, contributed and custom modules and themes. Each multisite has its own database, its own settings and configuration, its own content, and so on. Ideally, it also means updates can be done once.

So, multisites could be an option. Many people find them to be a real workhorse for their context, and often they are right on the money.

Why use multisites

The Drupal.org documentation for multisites includes a simple rule-of-thumb for when to multisite:

As a general rule on whether to use multisite installs or not you can say:

- If the sites are similar in functionality (use same modules or use the same drupal distribution) do it.

- If the functionality is different don’t use multisite.

(DrupalCon Austin [June 2014] held a interesting debate on Drupal multi-sites, its pros and cons, gotchas and suggestions, which is available on YouTube.)

There’s several compelling reasons to use them.

First, having a single codebase to maintain is a huge plus. Forked codebases can soon become orphaned, and unloved codebases become fraught with problems too quickly.

Second, multisites often mean there is also a single hosting platform to maintain, which is also a major advantage.

That can often mean, thirdly, that multisite installations can make better use of resources, both the server resources and financial, personnel or other physical resources. For example, since multi-sites share the same core and modules, that code need only go into the opcode cache once, saving server resources.

Caveat: is the end of multisites support on the horizon?

It should be noted that a proposal has been made to deprecate support for multisites in Drupal, with a view to removing it in the future.

The basic argument for this is that it’s an ‘old skool’ way of thinking about handling multiple sites. Git and Composer create practices and codebase structures that point in other directions.

The modern approach to multi-site is: git — Same code, different sites. Under your control. And well-maintainable.

There are a number of positive reactions to that proposal, which are variations on a theme:

+1. Multisite is a historical oddity at this point and I’d never tell anyone to use it.

But there are many more negative reactions, which largely go along these sorts of lines:

-1. Multisite has been a workhorse for a ton of Drupal sites and is well established in our code.

In that light, Drupal’s multi-site feature is likely to stay around for a while.

Classic problems with Drupal multisites …

It’s not all a bed of roses, though. There are some classic sticking points when working with Drupal multisites.

First off, handling traffic. One site’s traffic spike can be another site’s nightmare when the hosting resources are all hogged by The New York Times tweeting a link to a page on a site of yours; one site’s ‘BEST DAY EVA!’ can be the worst of times for all the rest.

The load on your database server may also be an issue. Multisites often use a single database server, and heavy load or slow queries in one DB can impact the performance of others. This might even be caused in the normal running of your Drupal sites, such as when running cron.

Running updates often causes headaches. When you update code, you’re updating all your sites at once. That means the updates are deployed, well, instantly across all your sites, but if they need update processes to run, such as updating the database, that can throw unexpected problems or errors.

And the worst of the worst: a small piece of poorly written, inadequately reviewed or tested code mysteriously jumps itself onto production — that never happens, right? No one ever lets that happen, do they? *ahem* — and takes down all your sites at once! It’s just an urban myth, a story to scare the children with at night, right? Never happens.

… and how to mitigate them

There are of course a number of ways to foresee these things happening and be ready for them.

On the performance questions, with smaller demands you can just ride it out — sites on the same hosting platform are fairly tolerant of resources being shared around, and the spare capacity is there for times just like there.

For larger performance demands, handling the pressure is a challenge in any hosting set-up, dedicated hosting just as much as shared. With modern cloud infrastructure, the option of scaling up your infrastructure or spinning up a new cluster when you’re experiencing ongoing heavy demand is much easier than in the past, especially if you plan for it as a possibility.

The next set of mitigations are all about best practice.

For starters, test, test, test. Don’t let any code onto production that hasn’t been tested thoroughly.

Have a solid release process that you always follow. If possible, include dev, staging and quality assurance stages. This should give you lots of points to catch things before they’re released onto your production sites.

Automate all the things. There are lots of ways of automating things to ensure they run consistently and quickly too, from shell scripts up to continuous integration tools. Use them.

And finally, be intelligent. With code changes that need database updates, for example, design your code so that it can be deployed to handle an interval before the database is updated. Or, with important but more volatile updates, be smart about choosing the time of day and week that you deploy it. Don’t ever push something out at 5pm on a Friday afternoon if you want to stay friends with your colleagues, your customers and your family.

Well, yes, in short, kinda. You could run microsites using Drupal’s multi-site feature. Things would work fine, though of course you’d have all the problems described above and have to take the mitigating actions.

However, it wouldn’t solve all the needs described above without some smart thinking. Plus, I’d suggest that you would also have some other problems to solve.

First, multisites all use different databases (sharing databases and tables is possible with Drupal multisites, but really unadvisable!) so the need of a single place for managing all the site content wouldn’t really be satisfied. The way around that would involve using web services, posting and pulling content from one site to another.

Neither would we have a unified search. There are fairly straightforward ways around that, using a tool like Apache Solr. The sites would need to share an index, with each document in the index including a site field, and there’s a contrib module that does that already (although no Drupal 8 version yet).

Lastly, and maybe more pertinently, you would still have all the ‘Drupalisms’ to live with. First of those is the visual design layer, the public user’s interface for the sites, what gets called the ‘theme layer’ in Drupal lingo. Many designers really dislike Drupal’s theme layer, and would really prefer to work with the pure frontend tools they use in other contexts. Drupal 8 has made major strides forward with the theme layer so it’s not as tough for designers as it once was, it’s true, but many (most?) frontend specialists would still rather not work with it.

Some consider influential Drupal figures consider multisites as ‘not enterprise grade’ and opinions like that are worth considering if your situation is enterprise scale.

Other approaches with Drupal

There are a few other ways of supporting microsites with Drupal that might be worth considering.

Domain Access

The Domain Access project was created to support just this kind of functionality. The project overview says as much:

The Domain Access project is a suite of modules that provide tools for running a group of affiliated sites from one Drupal installation and a single shared database. The module allows you to share users, content, and configurations across a group of sites.

This might work. However, there are many of the same problems with core multisites described above with this approach, with one additional one: everything in one database.

Our experience of using it, and this is echoed by others too, is that with a small number of very similar sites Domain Access can work well. With a larger number of fairly different sites, it’s a right pain and actually makes things quite difficult, requiring lots of complicated custom code.

Organic Groups

The Organic Groups suite of modules could be a solution for building microsites. The project allows users to create a ‘group’ within a Drupal site. The group can have its own users, admins, content, menus, even its own visual design. However, it would need every microsite to sit internally, within the main site, so does not solve the need to supporting external sites on their own domain. So, not really the perfect fit.

Best practice: with Git

I quoted above from @sun in the discussion on deprecating multisite support about the modern best practice:

The modern approach to multi-site is: git — Same code, different sites. Under your control. And well-maintainable.

This is certainly my standard recommendation and will give you many advantages: independence of sites for performance, design, etc; single codebase to maintain (though you’ll have a challenge developing and maintaining the variations you’ll want or need for each microsite); better control over updates; and so on.

You might even look writing an install profile to make a full distribution, though with Drupal 8 there is less of a need to do this. With Drupal 8, I’d advocate that you use Drupal Composer to build your site and just export your full site config into your repo (being careful to remove any sensitive settings from the repo with your .gitignore file).

Or you might also consider using Aegir to manage your multiple sites — use Drupal to deploy Drupal, if that’s not too much Inception.

Microsites and Drupal

So if multisites could work but would be a bit of a pain, the other Drupal approaches are even less appealing, and you’d rather not keep multiplying Drupal installations, how else could we do microsites with Drupal?

Well, there are two major moves in modern web development that might help here: RESTful web services, and decoupled CMS architectures (a.k.a. ‘headless’ CMS). My proposal for managing microsites in Drupal 8 depends on both these ideas:

  • Treat your Drupal site as a pure content management system (CMS) — a content hub that allows authors, editors and administrators to create, update and manage the content for which they’re responsible, but doesn’t have any meaningful frontend presentation layer to it.
  • Present the data of the content in the hub CMS via a RESTful API.
  • Implement a separate frontend for the visual presentation layer that communicates with the content hub CMS via the API.

There need be no limit to the number of frontends that use the CMS’s API (though practically you may limit access with firewalls, CORS or some other means) so you could power a primary public site, other sub-sites, native mobile apps or even another CMS or two, each potentially with their own visual design. The limit is your own imagination and situation.

RESTful web services and Drupal 8

A new addition to Drupal 8 is the RESTful Web Services API. REST resources can be exposed to allow other things to talk to/consume/feed a Drupal site. Many core entities have REST resources, but it is also fairly easy to build custom REST resources. (There a number of interesting web services contrib projects that are worth considering, such as the GraphQL project that presents a GraphQL schema, and the RELAXed Web Services project that extends the core REST resources.)

Design your own web services API

The freedom to build custom REST resources in Drupal 8 allows a lot of freedom in designing a RESTful API.

In a forthcoming blog post I’ll write in more about designing an API. For now, all I need to say is you need to actually design your API. Don’t simply use the out-of-the-box Drupal core REST resources — think about the RESTful API that would best serve the frontend you want to have.

My heartfelt recommendation is you do this, designing your API, using the skills of those who’re best at designing things — your designers. They understand best what your users want to do on your sites, will be able to describe what data they want for the frontend (content with/without markup, etc.) and help you design the API that is most appropriate to your needs.

There are some API design golden rules and best practices that you should consider. Also I’d recommend using an API design tool like Apiary.io or Swagger.io. They’re invaluable for many reasons, not least of which is the lovely documentation they generate and mock data servers they include that can help frontend devs get going quickly.

Decoupled frontend

With the content hub now presenting the managed content as RESTful data, we just need a standalone frontend system to present your website to your users: one for your primary site, and one for each of your microsites. Your frontend specialists can then work with the right tools for the task, then.

There are several advantages to consciously uncoupling the content management and the frontend.

Freedom: frontend specialists are free to the implement the user experience with native tools that are built for the job.

Performance: everything in this architecture can be streamlined. The CMS simply presents the content data. The frontend focuses on the display logic.

Experience: the website can respond to users in real time, communicating back and forth with the CMS to give real-time interactions in the browser.

Future proof: it becomes much easier to replace any part of the system as you require, such as redesigning the website without re-building the CMS.

Microsites in Drupal 8

So, how might we do this practically in Drupal 8? Here’s how I tackled it.

First, I thought about designing a quick prototype API that could be used to describe microsites and their content. I used Apiary.io to design it, and you can view the API at docs.campaignmicrosites.apiary.io.

The final part is the standalone frontend tool. For this I used React. I used React to build my frontend app, but there’s obviously plenty of other options depending on what the frontend needs to do. React worked for me because I just wanted the view layer, but Angular or Ember could be more appropriate if the frontend needed to be a more substantial app. You’d need to evaluate the frontend options carefully.

I’m not a frontend specialist, so my prototyping code is pretty fugly. Despite that, we’re able to serve two microsites simultaneously on different URLs, with a different theme, just by switching the campaign ID in the API request.

Bingo!

Deploying to production

There’s a few things I might do to deploy this to a production system.

Secure serving

As a good internet citizen, I’d want to put everything on SSL.

Frontend deployment

To deploy the frontend, I’d be looking at options to run the apps on a NodeJS server so that most of the scripts can run server side.

I’d probably want to put an Nginx instance in front of it, for SSL termination, caching static assets and reverse proxy.

Use Drupal multisites ;-P

I think there is actually a neat way of using Drupal’s multi-sites feature here: use a different domain for the RESTful API. For example:

Editorial interface: hub.yourdomain.com
API interface: api.yourdomain.com

Both of these point to your Drupal codebase but you can then handle requests differently on each domain. For example, you might add an authentication provider that checks the domain to give you some access control, so there’s no access to the editorial interface on the API subdomain, and none to the API on the editorial domain.

Caching etc.

This would then allow you to do some smart things with caches and other parts of your hosting stack, offloading much of the pressure on the codebase to the caching architecture and removing the actions of editorial staff from affecting the RESTful API’s performance.

Databases

It might also be possible to configure GET requests to only use a slave database, which could be useful for performance — though may be more hassle than it’s worth. POST, PUT, PATCH and DELETE requests would still need to go to the master.

In summary

This prototype worked really well for me and I was very happy with the results, and it gave me something very interesting to discuss with the client.

The advances made in Drupal 8 to operate with current standard web practices are good news for developers and for web projects big and small. For this prototype, the particular improvements with providing RESTful resources means that I was able to create a decoupled Drupal system to support a main website and unlimited microsites in an amazingly short space of time.

… and something to take away

If you’re interested in following up this thought experiment with my Drupal 8 prototype, I’ve put the code into a repo in GitHub:

Just …

$ git clone [email protected]:ConvivioTeam/Convivio-ContentHub.git {some_empty_directory}
$ cd {some_empty_directory}
$ composer install

… and you’re away.

(My React code is shamefully dirty, so I’m not prepared to share that at moment. ;-) I may tidy it up in the future and share it here.)

Aug 17 2018
Aug 17

It's a robust, flexible and admin feature-packed CMS, there's no point in denying it. And yet: Drupal (still) lacks a modern UI that would make building rich web content —  such as landing pages — a breeze. But there is hope: the Gutenberg editor has been ported over, promising a better editing experience in Drupal 8.

The team behind this daring project? Frontkom, a Norwegian digital services agency that:
 

  • refused to just sit and wait (for a year or two) for the in-progress initiative of modernizing Drupal's admin UI to grow into a core solution
  • decided to capitalize on their experience in working with the Gutenberg page builder 
  • … and on this content editor's open source nature, too
  • … to bring it over to Drupal 8
     

Now, if you're determined to improve the editorial UX on your Drupal site, to “spoil” your editors with a modern, intuitive and flexible admin UI, keep on reading...
 

1. The Drupal Gutenberg Project: Aiming for a Modern Admin UI in Drupal 8

And by “modern” I do mean the opposite of the Panels & Paragraphs & Layout combo solutions currently available for editing text in Drupal.

Solutions which only manage to make the entire workflow... discouragingly complex.

Especially if it's rich web content that editors need to create via the Drupal admin UI.

And this is precisely the context where the Drupal Gutenberg project was born: Drupal desperately needed/needs a modern, JavaScript-based admin UI.

With WordPress 5 users already enjoying this fancy content editor and the Frontkom team's having gained experience in using it, the idea of porting it to Drupal started to form:

"Why wouldn't we make it possible for Drupal users, too, to benefit from this content editor?" 

And here are some of the original Gutenberg project's features that lead them into thinking that, once ported, the editor would significantly improve the editing experience in Drupal 8:
 

  • it's (highly) decoupled
  • it's open source
  • it's React.js-based 
  • it provides a simplified, smooth and cool functionality-packed admin UI
  • it's Medium and Squarespace's inspired
  • it turns the creation of complex landing pages into a breeze
     

Page editing in Drupal 8 wasn't going to be the same again!

Their initiative turned into a Drupal 8 module —  Gutenberg Editor —  currently still an experimental one. 

Curious enough?

The first step to satisfy your curiosity is to take a look at their live demo: an interactive glimpse into the Gutenberg text editor implemented in Drupal 8.
 

2. The New Gutenberg for Drupal: Top Features Improving the Editing Experience in Drupal 8
 

2.1. All the Page Elements Are... Content Blocks

That's right, the team behind this project capitalized on the “everything is a block” Drupal 8 concept when adapting the Gutenberg UI to Drupal.

The result?

Both the Drupal core blocks and 20+ Gutenberg blocks are available in the resulting admin UI.

Basically, a Drupal 8 editor can insert into the web page that he/she's creating any of the core Drupal blocks and of the Gutenberg blocks of choice.

Speaking of which, let me point out just a few:
 

  • Heading
  • Image gallery
  • Auto embedded social posts
  • Buttons
  • Custom Drupal blocks
  • Layout blocks
     

Needless to add that you're free to enrich this list with your own custom blocks, too.
 

2.2. Easy Switch from Visual to Code Editor

That's right, the Gutenberg UI enables you/your editors to quickly switch to code editor —  opening up a neat markup —  and to apply any needed tweaks on the output.
 

2.3. Positioning Content Is Straightforwardly Intuitive

Editors get to select precisely where they want to position different types of content on a page.

And the very same results that they generate while in the Gutenberg admin UI get instantly reflected on the live web page, as well.

And there's more! More great admin features improving editing experience in Drupal. For instance:

Full control over font sizes and colors; tweaking them becomes a breeze with the new editor.
 

2.4. There's a Blocks Search Box

And not only that:
 

  1. using this search box you can track down precisely those content blocks that you need to add to your page
  2. but you can access them inline, as well, using “/”.
     

2.5. Full Control of the Layout

Another great thing about the content blocks available in the Gutenberg UI is that: they can have child block, too!

This way, it'll get unexpectedly easy for your editors to split their used blocks into columns on a grid.
 

2.6. Auto Embedded Social Posts/Videos

And all it takes is pasting their URL.
 

The Story of a Real Challenge: Making Gutenberg CMS-Agnostic

Open source, but not fully CMS-agnostic... 

The team behind the Drupal Gutenberg project had to come up with a suitable solution for this challenge. And they did come up with a multi-step solution to make the fancy text editor work in Drupal 8, as well:
 

  • first, they created a fork and removed the WordPress specific features
  • they used the Gutenberg editor as a dependency at first
  • next, they set up a standalone NPM package
  • then they built the Gutenberg Editor module
     

In short: a fork of the initial Gutenberg project is still maintained while being used as a dependency of the new Drupal 8 module. Therefore, each time Gutenberg gets an updated, the corresponding Drupal module, too, gets a new release.

Now, digging deeper into the project's architectural design, we discover 2 elements that the team had to re-write for Drupal:
 

  1. the URL defining the editor routes (edit page route, new page route, preview page route)
  2. the api-request, now configured to “talk to” Drupal (instead of the WordPress API)
     

How does the new module work?
 

  • as a text editor, which can be easily enabled for each content type
  • all it takes is a long text field for it to work: it replaces the node edit UI for that specific content type
     

Note: the Frontkom team also “promises” us to re-use as many Drupal-specific styling for the editor's UI elements in order to add a familiar Drupal feeling to it.
 

What Next? What's The Project Roadmap

Ok, so what we know for sure now, regarding this ambitious initiative turned into a Drupal module is that:
 

  1. the Drupal Gutenberg module is downloadable, yet still experimental (for developer use only)
  2. the team's still working on the project, implementing new features and functionalities aimed at making it feel more... Drupal native
  3. the final version will be presented to the eager/intrigued/curious/skeptical Drupal users and developers in the coming months
     

The END! Can't hide that I'm more than curious what you think about this contrib solution for improving the editing experience in Drupal 8:
 

  1. Are you looking forward to using it, hoping that this editor would make up for the inconveniences of working with Drupal's current admin UI?
  2. Are you skeptical about the perspective of being tied up to a WordPress page builder?
Aug 17 2018
Aug 17

‘Coexistence is the key to our survival’, they say about humanity. The same law applies to and therefore is adapted by the technological world too. ‘Decoupled Drupal’ is the outcome of the same law, coming from the field of web architecture. After years of following the traditional web architecture, Drupal came up with something that was not ‘monolithic’ - something that we call as ‘Decoupled Drupal’ today. Let us explore and decode in detail the web architecture that ‘Decoupled Drupal’ is!

Understanding, Decoupled Drupal

Understanding, Decoupled Drupal

Freeing the front-end from the control of the content management system and focusing on the just back-end development. The presentation layer, themes, templates - everything front-end is taken care by the adopted front-end framework. This also implies that Drupal has chosen to do what it does the best - building and bettering the content part. The decoupled Drupal exposes the content to other systems such as native applications, JavaScript application, core REST API, IoT devices, et al, which clearly states the fact that every system can easily consume content from Drupal.
 

Decoupled Drupal, also known as Headless Drupal, in simpler words is about not letting go the core and robustness of Drupal by having the control over all the core content management related responsibilities. And yet opening up the door for the productive change on the part of content appearance. Decouple Drupal is a promise of omnichannel delivery for the marketers and publishers.
 

Pick your approach!

Approach Decouple Drupal

1) Coupled Drupal

This is the most appropriate approach to be adopted for a site that does not demand much rendering and state management from the client’s end. Drupal’s built-in twig templating system is used instead of the huge and heavy JavaScript framework. The help of JQuery can also be taken if needed. Since this approach doesn’t block content marketers by the front-end developers, extra marketing expense could be cut down.

2) Progressively Decoupled Drupal

A website that requires client-side interaction, Progressively Decoupled Drupal is being used. Under this approach the core strength of Drupal - its HTML generation is not eliminated and yet the benefits of the Javascript framework is adapted. The best of both the frameworks raises the quality of interactive experience plus a robust back-end. Usage of JavaScript enables the content marketers to freely gather the experience and benefit from it, without much of the developer’s support.

3) Fully Decoupled Drupal

The entire structure here is separated in terms of the content and the presentation, where the former one is taken care by Drupal and the later one is prominently undertaken by JavaScript frameworks. With both the advantages and disadvantages attached to this approach, it is not a highly recommended one. Independence on the underlying CMS and usage of the richness of JavaScript and its community, is one of the major advantages of the fully decoupled Drupal, while the addition of complexity to the technology stack is one of the major disadvantages.

Why should you be adapting Decoupled Drupal?
 

Adapting Decoupled Drupal

The popularity of the Decoupled Drupal is a reason enough to confirm how beneficial it has proven to be, so far. Let us share some prominent reasons why adopting the decoupled Drupal will prove to be advantageous for you:

1) Intact Security

Security - the key benefit of using Drupal is kept intact since the content management and back-end is taken care of by Drupal itself. The administrative CMS is kept far from the public eye is also something that helps in keeping the security level high.

2) Elevated Team Performance

Drupal CMS development requires more technical expertise as compared to that of some other front-end framework. So, when an expert of Drupal has more time and scope to focus on the segment that he has an expertise upon, the outcome would naturally be of that stature. In addition, the front-end developer will also have the freedom to work on his expertise and hence would be able to give better justice to your website with an overall elevation in the team’s performance.

3) Broader Approach

Drupal has always been broad with its approach, be it any website or organisation. In addition, Drupal now also has the publishing functionality that streamlines the experience for content creation. Under this architecture, it’s easier to push and manage the content to other places. This widens the possibility of the same content being spread and published on multiple channels.

4) Flexibility

Decoupled Drupal enables and accelerates the scope flexibility, whenever the website is in need of some change or upgradation. The independence to work and focus upon one single aspect, the developers and designers are granted the flexibility to dedicate their time to their respective jobs. The elimination of dependency of the back-end developers/tools from the front-end developers/system is what lifts up the scope of flexibility.
 

Already thinking of adapting the highly-trending and powerful architecture - Decoupled Drupal? Well, our Drupal-expert team might help you get a detailed and better understanding of the same. A customized viewpoint of Decoupled Drupal for your website surely makes a huge difference. Let our Drupal developers make that difference for you!

I hope this blog helps you to expand your Decoupled Drupal knowledge …Thanks! If you need more assistance regarding Drupal Development Services, feel free to contact us now.

Aug 17 2018
Aug 17

JavaScript Frameworks have been taking the web by storm for years and ReactJS has become a clear frontrunner. With React, you can implement fast, slick, interactive web components without excessive complexity.

Additionally, ReactJS is the perfect fit for Drupal - the JavaScript initiative team is already working on building a ReactJS app for Drupal Core. Wouldn't it be cool to join their initiative and help them modernize Drupal's administrator UI with React? We can show you how.

Key Benefits of React w/Drupal Include:

  • Faster rendering when responding to user interactions
  • Easier development for more complex apps
  • Friendlier JS syntax (similar SASS for CSS)
  • Fewer clicks
  • Fewer page reloads
  • and more!

Interested in learning more? At Drupal Europe, Debug Academy will be hosting a training, Elevate your Drupal 8 application with ReactJS, on Monday, September 10th. For more information, click here. This training is an updated version of the most popular training from DrupalCon Nashville 2018, and profit from the training will be used to help support the volunteer-run Drupal Europe!

Attendees who will gain the most from this training are Drupal developers looking to gain hands-on experience with decoupled development and developers looking to learn how to use the popular JS Framework, ReactJS. Must Know JS or PHP to participate. Code & Training formatted to be accessible to developers, not exclusively for JS developers.

The first 15 people who register before midnight CEST on Saturday, August  18th, will receive a significantly discounted registration price of €250.00 + VAT tax (normally €400.00+). Register using the form below!

Aug 17 2018
Aug 17

Allow sitebuilders to easily add classes onto field elements with the new element_class_formatter module.

Adding classes onto a field element (for example a link or image tag - as opposed to the wrapper div) isn't always the easiest thing to do in Drupal. It requires preprocessing into the elements render array, using special Url::setOptions functions, or drilling down a combinations of objects and arrays in your Twig template.

The element_class_formatter module aims to make that process easier. At PreviousNext we love field formatters! We write custom ones where needed, and have been re-using a few generic ones for quite a while now. This module extends our generic ones into a complete set, to allow for full flexibility, sitebuilding efficiency and re-usability of code. 

To use this module, add and enable it just like any other, then visit one of your Manage Display screens. The most widely available formatter is the Wrapper (with class) one, but the others follow a similar naming convention; "Formatter name (with class)". The majority of these formatters extend a core formatter, so all the normal formatter options should still be available.

The manage display page with the formatter selected for three different field types

The manage display page with new (with class) field formatters selected

Setting classes on the configuration pane of a link field

The field formatter settings, with all the default options

Use this module alongside Reusable style guide components with Twig embed, Display Suite with Layouts and some Bare templates to get optimum Drupal markup. Or just use it to learn how to write your own custom field formatters!

For feature requests or issues please see the modules Issue queue on Drupal.org

Photo of Rikki Bochow

Posted by Rikki Bochow
Front end Developer

Dated 17 August 2018

Add new comment

Aug 17 2018
Aug 17

It feels fantastic when your work gets recognition! And we know what we are talking about.

The ADCI Solutions’ Drupal and Vue.js project got 7 (and 0.09!) points at Awwwards. You know, it is one of the most respectable rankings for web design and web development agencies. During the voting, 4 criteria are taken into account: project's content, design, usability, and creativity.

Our project wasn’t created especially for this competition or for a portfolio. And what is even more remarkable, it's not a typical creative agency website listed at Awwwards.

We made it for one of our client - a hurricane and security shutter manufacturer Alutech United Inc. They let our imagination run wild and we played with the design and chose an atypical concept.

We hope that our project will give an inspiration to web design and development professionals all over the world.

It is our first experience of taking part in such competitions, and we were on the edge of our seat right from the beginning. We want to say thanks to all who evaluated our work with credits, these 7 points have become a great start.

Aug 16 2018
Aug 16

Background

For our two main websites (QSR & FNF), we send out a monthly e-letter to about 20k+ each and we have it setup such that it goes through Amazon SES and all email notifications (deliveries, bounces, unsubs, complaints, etc.) get posted back to the site. Our custom Drupal module receives each notification and updates several places so that we can track bounce rates, delivery rates, and opt out people who complain or unsubscribe. So our site bogs down (at least for authenticated traffic) when we send the 40k e-letters because these notifications bypass all of the layers of caching in order to make those database updates.

Inspiration

Decoupled Drupal is a major mind-shift for me. QSR was our first Drupal (6) site back in 2010 and over the last 8 years, we have written over 40 custom modules to do things big (lead generation, circulation, etc.) and small (user surveys, etc.).

The advantage is that it's one place for your users to go for all the tools they need. The disadvantage, though, is that your server resources are shared and is probably taking away from the higher priority of serving your users.

There's also something to be said about splitting a feature off into an environment where you're free to choose the best tech for the job, which might not necessarily be Drupal.

Setup

First, this article was a big help in getting things setup. I ended up using a different table schema, just having 4 fields, event_id (the SNS event messageid, which is also my primary key), the source (so I can gather items based on the site), a processed boolean flag, and the message itself, stringified JSON.

One thing to keep in mind is that SNS posts its event differently to HTTP(S) than it does for Lambda, so you cannot rely on your HTTP(S) examples as test cases. I have a (sanitized) captured example here.

Finally, the easy/cool bit is changing the SNS subscription from your HTTP(S) endpoint to your Lambda function. You don't even have to program a subscription confirmation for that - it just works.

Next Steps

So I went live with this without testing an actual load scenario. Big mistake! Once the SNS messages came flying in, Lambda reported a ton of errors and DynamoDB's default write capacity caused a lot of throttling. So while Lambda can scale from input dynamically, what it does with the output can wreak havoc. I would highly recommend you do some load testing based on your situation. You can set up a test run to send 40k emails to a random assortment of AWS SES' test addresses. I ended up having to scramble my Lambda and DynamoDB configurations to bump up the timeout max and enable auto-scaling for writes. I ended up losing a lot of tracking data because my Lambda function didn't fail properly and SNS thought everything was OK and didn't try again. :(

After I get that fixed and more bulletproof, my next step is to write a cron job to gather any unprocessed messages that belong to the site and process them. I'll write a follow-up post when I'm done with that.

And once I'm proud of my Lambda function, I'll post that, too.

Conclusion

So the tradeoff is that my reporting is not real-time and there are some AWS costs, but this frees up our web server to do what it should be doing best: serving content to our readers.
Aug 16 2018
Aug 16

JavaScript Frameworks have been taking the web by storm for years and ReactJS has become a clear frontrunner with its ability to implement fast, slick, interactive web components without excessive complexity.

With ReactJS, you will be able to improve websites with app-like components that are better and faster than what Drupal could do on its own.

Check out a preview of a Drupal site benefiting from the addition of ReactJS!

Key Benefits of React w/Drupal Include:

  • Fewer clicks
  • Fewer page reloads
  • Faster rendering when responding to user interactions
  • Sleek
  • App-like
  • and more!

The JavaScript initiative team is working on building a ReactJS app for Drupal Core. Utilize the latest technology on your projects.

Interested in learning more? Drupal Europe is hosting a training, Elevate your Drupal 8 application with ReactJS (taught by Debug Academy) on Monday, September 10th from 9am-5pm in the Darmstadtium venue. For more information, click here. This training is an updated version of the most popular training that was sold out at DrupalCon Nashville 2018.

Attendees who will gain the most from this training are Drupal developers looking to gain experience with decoupled development and developers looking to learn how to use the popular JS Framework, ReactJS. Must Know JS or PHP to participate. Code & Training formatted to be accessible to developers, not exclusively for JS developers.

The regular training price is €400.00 + VAT tax, however, the first 15 people who register by midnight CEST on Saturday, August  18th, will receive the early bird registration price of €250.00 + VAT tax. Register @ https://debugacademy.com/course/drupal-europe-elevate-your-drupal-8-application-reactjs .

Aug 16 2018
Aug 16
Mike and Matt are joined by Lullabot John Hannah to talk with the creator of GatsbyJS
Aug 16 2018
Aug 16

This is the fifth post in our series about integrating Drupal.org with a 3rd party developer tooling provider:

In this post we are announcing our migration to a new tooling provider, and outlining the phases of that migration process to take place over the next several months.

Announcing our partnership with GitLab

Wait, what?

Drupal Association + GitLab

Yes, in our four part series from December of last year it certainly looked like we were going in a different direction for the future of Drupal's developer stack.

So what changed?

Last year we laid out a model for integrating Drupal.org with a third party tooling provider, which we described as "Drupal Flow". This model was deliberately laid out to be agnostic to the provider we chose, so long as certain requirements were met. We worked with representatives from three potential providers at the time: GitHub, GitLab, and BitBucket, and each one had pros and cons. Once we had completed our evaluation, BitBucket was the only provider without hard blockers to the integration we wanted to build.

However, following our blog series, the GitLab team reached out directly to the Drupal Association team, and asked us to give them the chance to resolve the blockers and close the gaps in our integration.

At the same time, we saw an outpouring of feedback from our community asking us to see if we could find a way to make GitLab work.

And so we did.

The Agreement

For the past six months we've been working closely with Eliran Mesika, the Director of Partnerships at GitLab, in addition to CEO Sid Sijbrandij and members of GitLab's engineering team. They've escalated the internal priority of issues that blocked our adoption of GitLab, offered technical and financial support for the migration, and made a commitment to ongoing support for the Drupal project.

And so we're happy to announce that Drupal.org is going to be moving our code collaboration tools for our forty-five thousand projects to GitLab over the course of the coming months.

Three Phases to the Migration

Phase 1: Replacing Drupal.org's Git backend

The first phase of the Drupal.org migration

  • Transparently replace Drupal’s current underlying Git infrastructure (for repository hosting, maintainer permissions, code viewing) with GitLab repositories, GitLab roles and permissions for maintainers, and the GitLab code viewing UI.
  • Enable inline code editing (only for maintainers for this phase).
  • During this phase, Drupal.org will remain the primary source of information.  SSH keys, new projects, etc. will be created on Drupal.org.

This first phase, while modest, will bring some concrete benefits to the project:

  • Maintainers will be able to begin familiarizing themselves with GitLab's code collaboration tools.
  • Code viewing will receive a significant upgrade from CGIT to GitLab's built-in code viewer.
  • And Drupal.org's old Git server will be phased out.

Phase 2: Enabling Merge Requests, Inline Code Editing, and Web-based Code Review

  • The timeline for Phase 2 is dependent on GitLab’s resolution of a diskspace deduplication issue, which they have committed to on our behalf: https://gitlab.com/gitlab-org/gitlab-ce/issues/23029
  • Enable GitLab Merge Requests, GitLab inline code editing in the web UI, and GitLab web-based code review.
  • During this phase, Drupal.org will handle any 'create branch/merge request' integrations from the Drupal.org Issue queues, and related call-backs from GitLab into the Drupal.org issue comment stream.

Phase 2 is where we realize some tremendous benefits to developer velocity and collaboration:

  • By adding merge requests, contributing to Drupal will become much more familiar to the broad audience of open source contributors who learned their skills in the post-patch era.
  • By adding inline editing and web-based code review, it will be much easier to make quick contributions. This not only lowers the barrier to contribution for people new to our community, it also saves significant effort for our existing community members, as they'll no longer need to clone work locally and generate patches.
  • Finally, by creating a tight integration between the Drupal.org issue queues and GitLab's development tools, we'll be able to transition to this new toolset without disrupting the community's existing way of collaborating.

Phase 3: Evaluating Additional Features

Phase 3 has no strict timeline, but will be dependent on feedback from the community as they get up to speed on using the new GitLab-based contribution workflow for Drupal.

These additional features may allow us to further improve the velocity of the Drupal project, or realize additional cost savings for the association. For example, we may be able to use GitLab's test runner integration to orchestrate tests across a wider variety of cloud platforms, helping us find the best pricing. We may be able to entirely replace security.drupal.org with a private issue tracker, eliminating an entire sub-site for the Drupal.org team to maintain. We may even be able to enhance existing community services like SimplyTest.me by integrating features like GitLab's AutoDevops tools to automatically create review environments for issues or branches.

We won't really know what's possible within the scope of our resources until the first two phases are completed, but this helps to show that by hitching our toolset to a partner that specializes in collaboration, we may be able to realize even more benefits for our community.

Changes to Git Remotes

  • Git remote urls for pushes to full projects have changed:
  • HTTPS clone urls for full projects are unchanged.
  • HTTPS clone urls and Git remote urls for sandbox projects have changed:
    • For remotes of the format:
      <username>@git.drupal.org:sandbox/<username>/<node-id>.git
      the format should be changed to:
      [email protected]:sandbox/<username>-<nodeid>.git
    • Clone urls will be changing from:
      https://git.drupal.org/sandbox/<username>/<nodeid>.git
      to the format:
      https://git.drupal.org/sandbox/<username>-<nodeid>.git

Important: If you have any automated systems which authenticate to Git, such as CI pipelines or repo mirroring, ensure they are updated as well.

For more detailed information about these changes, as well as instructions for changing your Git remotes or setting ssh keys, please consult these instructions: https://drupal.org/gitauth

How to follow our progress

Issues for the Drupal.org migration to GitLab will be opened in the Drupal.org Infrastructure queue and tagged 'GitLab'.

For questions or concerns, please create an issue at https://www.drupal.org/node/add/project-issue/infrastructure

Aug 16 2018
Aug 16

Next week we’ll be traveling to the nation's capital to participate in Drupal GovCon! While Aimee and Adam are veterans of GovCon, Lindsay is embarking on her first trip to the Washington, D.C. area. 

Hook 42 will be presenting on a variety of subjects, including project management, module development, and component based development. We’re excited that Adam will also be delivering the keynote Wednesday morning!

GovCon is Wednesday, August 22nd to Friday, August 24th at the National Institutes of Health in Bethesda, Maryland.

Keynote:

Better Together: Impact Through Contribution 

Adam Bergstein | Wednesday, August 22, 11:00am | Auditorium

Drupal is one of the largest and longest-standing Open Source communities; yet, it can feel difficult to make an impact. How do you find your place in such a large and diverse community? Many community members have made contributions to the project outside of code that have had a significant impact. I will share some stories and examples, to provide ideas of how you might be able to contribute to the project. And, using the framing of a “hero’s journey”, we will explore how all the pieces fit together to make a big impact on the greater whole.

The Drupal community has remained sustainable and vibrant compared to other projects because of the opportunity to provide contributions beyond code. Community members are able to provide both technical and non-technical contributions. In this talk we will look at the appeal of participation beyond just technical contribution and explore the interplay between contribution, impact, and alignment of our personal interests with community work.

When we all pitch in, we can change the world; because, every new contribution adds up to our community doing new and bigger things. Together we can all continue to create a vibrant community built upon our creativity, passion, and interests.

Sessions:

Healing a Broken Project

Aimee Hannaford (Degnan) | Wednesday, August 22, 2:00pm | Room: F1/F2

What happens when you encounter a project that seems broken beyond repair, but for whatever reasons, a brand-new fresh start is not possible?

You may run into the following challenges with these "broken projects":

  • No clear scope
  • No requirements documentation
  • Far less remaining budget
  • Far less remaining time
  • "Project fatigue" from the client
  • Massive amounts of technical debt
  • And many, many more challenges…

How do you even start approaching such a broken project and bring chaos to order?

But what does order really mean? How does one measure success or completion in a fog of wrongness?!

Using project management and enterprise process management techniques, you can work through unclear and incomplete deliverables to help define what Done (success) means. This includes unraveling complex business logic, multiple business processes, and a slew of modules and configurations.

At the same time, we were proactively healing the client’s project pain by finally being able to articulate a clear list of what needs to be built versus what has been built.

Learning Outcomes:

  • Starting assumptions may not completely prepare the team for the project.
  • Identify and proactively address stakeholder’s project fatigue and apprehension.
  • Explore practical techniques to unravel and define the half-built and the unknown.
  • Understand that tools and techniques are really applying the “best practice for the situation” and which tool you use will evolve through the project recovery process.
  • Understand how to prepare your project team for the road to recovery with the client.

Can We Figure This Drupal Component Thing Out Already?

Adam Bergstein and Brian Perry | Thursday, August 22, 9:00am | Room: Auditorium

Over the last two years our community has seen the rise of countless solutions to implement design systems and components within Drupal. During the same period across camps, cons and the internet at large Adam and Brian have been having an ongoing conversation about best practices in component-based development.

With Brian focusing on ease of component integration (often with the help of contributed modules), and Adam focusing on a platform agnostic approach favoring functionality in Drupal core, there was initially quite a bit of good natured debate. But as time went on and approaches in the community matured they found their perspectives aligning more and more.

This session will present their (mostly) shared vision of a set of best practices for component-based development. They’ll still disagree on some stuff, but that’s part of the fun. We’ll review:

An overview of current approaches in the community, along with some limitations.
Our goals for a component-based design system.

  • Breaking down your patterns using atomic design principles to represent the ideal state of design system components.
  • Managing your pattern library as an external dependency of your Drupal project.
  • Limiting processing in your pattern library, and handling processing and mapping within your CMS.
  • Common misconceptions about integrating design system patterns in Drupal.
  • A baseline approach to implementation in Drupal using Drupal core and limited contributed modules.
  • The role of popular component-friendly contributed modules
  • Emerging technology for the future of component-based development.

Finally, we’ll go hands on with a brief demo showing our preferred approach in action.

Drupal 8 Custom Module Architecture: What’s Going On?

Lindsay Gaudinier | Thursday August 23, 9:00am | Room: Balcony A

It is all fun and games modifying existing code, but what about when you have to venture out to unknown waters and create your own custom module? Don’t worry! We can get through this together!

This talk is a deep dive into creating custom modules from scratch, and the role of each component in the final product.

Let’s consider when it is appropriate to leverage custom development, explore the anatomy of a custom module, the types of expected files in a custom module, and the wonderful world of what you can do with a custom module (spoiler - it is a lot!).

This talk will include: Composer uses, forms, theming within a module, custom pages, Drupal namespacing, object-oriented conventions, plugins, controllers, routes and more!

See you in our nation's capital!

Look out for some sweet Hook 42 sticker swag at our booth! We hope to see you at GovCon, and meet many new Drupal friends along the way!

Aug 15 2018
Aug 15

Business person looking at Drupal logo, deciding on a CMS

You may have heard of Drupal in passing, but you have not ever been given a straight answer on what it is and why you should care. The truth is that even if you have worked with Drupal, you might not actually know what to say when asked what it is. Looking around there doesn’t seem to be a lot of great answers to this question out there either. It would be difficult to tell if you need Drupal as a solution for your website if you aren’t even sure what it really is to begin with. 

The Basics

To say we talk about Drupal a lot is an understatement. It’s non-stop Drupal all day long here at Ashday, but what is Drupal? Simply put Drupal, is an open source content management system. It's primarily built in the PHP programing language, and designed to create websites for use on a variety of different web servers.

Okay, but what is a content management system? A typical definition of a content management system or CMS is an application that is often used for creating websites that focuses on publishing workflows, user management, and content delivery. These dynamic and database driven websites usually allow for multiple editors and templating for streamlined content development. This is different than a plain old web page that is written in HTML and styled in CSS. A content management system allows you to compose and edit just the content without having to adjust the HTML. It makes it easier for non-technical users to publish text and images on the web to use that content in more than one place. With a CMS you can display your blog post on the homepage and in your blog, without needing to write the same content twice.

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

What does it mean to be open source? Open source means that all of the core code that makes the software tick is free and open to view. Open source programs are typically free to download and use. They aren’t exclusively developed by one person or corporation and they rely on an open community of peers to maintain and improve the core code. This means that the software can be rapidly developed with a large pool of contributors. Another benefit of open source is the adaptability of custom code, since everything is open we can extend the core code to do more and behave based on the business needs of the project.

Other Popular Content Management Systems

There are many open source software CMS tools available on the internet. Drupal is often mentioned in the company of other popular CMS such as WordPress. It even gets lumped together with SaaS (Software as a Service) based site builders like Squarespace and Wix. While it's true that Drupal serves a similar role as a means to building websites, it is far different from these other systems. WordPress for example, is primarily a blogging platform but people have stretched it far beyond its intended use. Because of this, complex sites built with WordPress often consist of a lot of custom code of varying quality. Drupal’s real contemporaries are more along the lines of a framework like Laravel. These frameworks are much more customizable and robust, but often lack the pre-built setup of users, content types, and management features. This results in a much longer time to market for projects built on a bare framework.

What are the use cases for Drupal?

Drupal is best suited for building websites that are medium to large in size with a focus on future scalability. That isn’t to say that Drupal can’t be used for smaller sites, it does fine for this sort of thing all of the time, but it is built to handle much more and can incur more overhead than is necessary. It is a bit subjective to use terms like medium and large for a website, but when we think of large we typically mean websites used for enterprise applications.

Drupal is great at storing, managing and delivering huge amounts of content. If you have a lot to publish, then Drupal can’t be beat. The admin interface allows for creation of custom management tools that make the whole publishing workflow tailored to how your business runs. Drupal is built around being able to have many levels of users with defined roles. Permissions can be fine-tuned to create a system with a publishing workflow that won’t slow down content creators and will save time for editors and curators.

In the world of web apps, Drupal is king. Drupal 8 is a very extensible framework capable of integrating with the vast ecosystem of services offered across the internet. If you need to build a product for others to connect to, Drupal is a great choice with its core RESTful API. The object-oriented framework within Drupal makes creating large-scale applications inexpensive with a reasonable timetable.

Why do organizations choose Drupal?

Large organizations both corporate and non-profit trust Drupal to run their sites and applications. Drupal has earned this trust through its open source community that provides contributed modules and timely core updates. The security team, which is world class, keeps Drupal a bit safer by finding and writing patches vulnerabilities before they can become a problem. Part of the Drupal community is the Drupal association that pushes cutting-edge initiatives to keep Drupal modern, innovative and thoughtful.

The large open source community behind Drupal provides thousands of modules to extend the core functionality of Drupal, all for free. Contributed modules are reviewed by the community and given a stamp of approval if they are stable and safe to use. This is very different than many other open source communities where contributed code can be malicious or come at a cost. When you use Drupal and its contributed modules, you are benefiting from the hundreds of thousands of development hours from a giant group of developers across the globe.

How do I start a Drupal project?

Drupal can be used to run just about anything you would want on the web. Because of this flexibility, Drupal doesn’t do a whole lot on initial install without more configuration and setup. This is not a simple task for the amateur site builder, Drupal is not known as the easiest of the frameworks to learn. If you are building a medium to large site or a web application, you may want to hire professional web developers with the right technical skills. This can be accomplished by an internal team of Drupal developers or outsourced to a Drupal development agency. Check out this article we wrote to help you determine if you should build with an in-house team or outsource. 

Popular examples of Drupal websites

You have most likely seen or used a site built on Drupal and didn’t even realize it. There are a lot of very influential sites out on the web that leverage Drupal to deliver content. Here is a small list of those:

ncaa.com

Harvard.edu

Taboola.com

ed.gov

economist.com

Billboard.com

Drupal is very popular in higher education with many universities and colleges running their sites on Drupal 7 & 8. Drupal also has a large share in local government sites and in the publishing industry. Drupal is everywhere you look but its flexible structure allows it to power a variety of types of sites while being invisible and allowing the content it serves to be visible.

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

Aug 15 2018
Aug 15

Each can enjoy the advantages of working with Drupal CMF in terms of filling a website due to content improvements. Easy content publishing in Drupal 8 is a great advantage of its usage and explains its popularity. That is why, Drupal is a perfect choice to power content heavy websites.

While content is considered to be the most important part of the resource, Drupal runs a content workflow initiative that simplifies working with website filling. As Drupal is constantly developing, it is not the limit of what the CMF may offer us!  The essence is the improvement of working with content that may be reached through the implementation of various modules. Here is an overview of one of them – Content Moderation Drupal 8 module.

The essence of Content Moderation module

The Content moderation module is a part of a content workflow initiative and is in Drupal 8 core. The module serves to provide easy editing and managing the filling of the site. It is especially useful while working in team.

The principle of work is based on so-called staging. If you need multiple people to edit a node but not change the vision of it immediately – the Content Moderation module is a way out! It enables anyone to perform any changes, but to make it publicly viewed, it should be approved.

The activity is logged in a history. Each step is recorded so that you may track who and when made a change. Moreover, it is possible to get to know who reviewed and approved revision and when was it done.

What does The Content Moderation module do

  • Enables to review content by selected groups before being published.
  • Allows to edit nodes and create new revisions to be approved.
  • The groups are empowered to approve changes. Makes a log history.
  • Permits to have own workflow.
  • Let you create your own ToDo list for what is to be approved or reviewed.
  • Monitors code quality.
  • Controls security and usability.

Why to use Content Moderation module

The Content Moderation module is aimed at providing high quality product

The main goal of the Content Moderation Drupal 8 module is quality. It works in nearly all environments. It is safe and thus does not allow to misuse or bypass the revision moderating. The main point of the Content moderation module is to be stable and provide handy workflow.

The Content Moderation module is simple

Apart from the fact that the module simplifies content moderation, it is easy to use. Moreover, it uses the Drupal API in its best practice.

The Content Moderation module is extendable

Despite its simplicity, the Content moderation module provides API that makes it more extend. Due to its flexibility, most of the workflows are possible to be changed painlessly.

The Content Moderation module is perfect for publishing

Working with drafts has never been as easy as with the Content Moderation Drupal 8 module. The advantage is that firstly, drafts are visible for the author only. After finishing editing, the author can convey it to be approved. After approval, it may be published.

The Content Moderation Drupal 8 module has numerous reasons to employ. If you need any help considering module installation or upgrade, do not hesitate to contact us and we will provide any service you need. In case the module does not meet your requirements, we as Drupal web development company are ready to develop a Drupal module for you and implement any wish into life.

Aug 15 2018
Aug 15

As marketers, we understand the importance of having a system that promotes ease and efficiency when it comes to implementing marketing processes. You want to create content once and use it over and over in different ways to create contextual user experiences. 

Drupal provides you with a variety of powerful, integrated tools to not only help you understand who your visitors are and what they want to accomplish, but to also dig deeper into their interactions, engagements, and habits with your site. 

Here are just a few reasons why enterprise marketers adopt Drupal. 

1. Enormously scalable - you can’t outgrow Drupal!

Some of the biggest, most visible, and highest-trafficked sites in the world run on Drupal, including, The NBA, Johnson & Johnson, and The Weather Channel. Drupal has proven itself on enterprise websites with over 1M pages and over 20,000 requests per second. In short, you can’t “outgrow” Drupal but can continually add new content and features to your enterprise website.

2. Easily execute your content marketing strategy

A big part of a marketing strategy is content creation, so it is important that marketers are easily able to add new pieces to their website. Drupal allows marketers to quickly add blog posts, videos, and landing pages to their website by filling out a “form” with all of the relevant information and then publishing it. For example, if I want to add a post to the Mediacurrent blog, I can be in and out in less than 7 clicks. In-page editing with Drupal 8 makes the publishing process even faster.  

3. Integrate with Marketing Automation 

Every major marketing automation platform has a custom module created for easy integration into a Drupal website. How do I know? Mediacurrent developed most of them - including the Hubspot, Pardot & Silverpop module!

4. Establish an efficient workflow

A planned workflow is the underpinning of every efficient business process. Whether a business is processing leads, updating a web page, evaluating a capital purchase, or approving new hires, certain actions must take place in order for the function to be completed. Workflow involves the passing of content between people in a chain that abide by a predefined set of rules.  Drupal allows you to easily create a workflow that is customized to your company's processes and team.

5. Create dynamic digital experiences….easily

Drupal fully integrates content, community, and commerce in a single platform. If you’re staying competitive, you’ve likely made a significant investment in creating a dynamic website that really tells the story of your brand and what you have to offer. With Drupal as the backbone for your digital strategy, the options for creating personalized web experiences are endless. Drupal’s architecture makes it the ideal platform for creating and delivering segmented content. 

6. Don’t waste your marketing budget on licensing fees

As open source software, the Drupal package has no license fees, it’s free for you to download, modify, etc. Which means your marketing budget goes towards the things that make your site unique, not towards fees for a large software company.

7. Bridge the gap between IT And marketing

When building a Drupal site, the amount of coding required to maintain or build the site is up to you. A full-featured site can be built fulfilling many business requirements with point and click ease. For us “non-coding” marketers, Drupal allows us to go into each page and easily edit the content while still maintaining the consistency of our branding—without the need to know HTML or CSS.   

8. Benefit from the thriving development community

When a business chooses Drupal, a vast community of support becomes available. Whether it be Drupal’s extensive project issue queues, thousands of nationwide meet-ups and Drupalcamps, or IRC channels, the chances are the problem encountered has been faced before, documented, and has a community willing to help you solve it.

9. You’ll have search engine optimization nirvana 

Drupal gives you control over everything you need to optimize your website for search engines. That includes custom page titles, meta descriptions, URLs, copy, and it plays well with Google Analytics.

10. Security - it’s good enough for over 1 MILLION websites

When deciding on a software solution for your company's digital needs, security is often one of the top concerns. Open source software, like Drupal, has the added bonus of having thousands of talented individuals work on a particular problem. With entire teams and methodology devoted to ensuring its steadfast reputation as a secure CMS. Drupal also have an official “SWAT team” that is well-versed in online software best practices and serves as a resource for all custom module maintainers and code contributors to utilize when submitting custom projects. What passes today as secure code may not stay the same tomorrow when new vulnerabilities surface. There's peace of mind in knowing not only is your online software secure, but that it's also in an active state of safeguarding against security attacks, both past and present.

Because Drupal is not tied to a proprietary vendor’s roadmap, it’s advancing based on the work of thousands of developers around the world. Drupal organically evolves at the speed of the web, offers the cost savings and agility of the open source model, and gives you the ability to integrate content across a range of channels and campaigns.  

In the next blog of the series - we’ll hear from the Chief Marketing Officer at Acquia, about how she is leveraging Drupal 8 to achieve her business goals. 

Aug 15 2018
Aug 15

Digital Assets Management in multi-channel publishing environments

Drupal Europe offers up a plethora of cases and solutions to help you with your DAM integration.

Multichannel publishing by Oleksiy Mark on Shutterstock

With so much to organize and store, publishers typically use Digital Asset Management Systems (DAM) to manage their assets. Add multiple channels to the mix and you have big operational hurdles. Thanks to the Media Initiative, Drupal now has a well-defined ecosystem for media management and its architecture is designed to play well with all kinds of media, media management systems, and web services that support them. The system is highly adaptable — the media management documentation outlines 15 modules shaping Drupal’s new ecosystem for media assets.

The Drupal Europe program offers several sessions to help you learn more about solutions building on this foundation. Case studies of demanding media management projects around the publishing industry include:

Blockchain — why should publishers care?

How Publiq is using blockchain to tackle urgent challenges for publishers

What industries come to mind when you hear blockchain? Banking? Trading? Healthcare? How about publishing? At Drupal Europe publishers will gain insights into the potential blockchain technology offers and learn how they can benefit. Meet Gagik Yeghiazarian, founder of the nonprofit foundation Publiq, and learn how he wants to fight fake news and build a censorship-resistant platform — using blockchain.

The publishing world is changing. Publishers no longer solely control media distribution. Big players like Facebook and Google are middlemen between the publishers and their readers, and technology built to entice publishers — Google’s AMP (Accelerated Mobile Pages) and Facebook Instant Articles — has strengthened social platforms as distribution channels. Additionally, publishers have lost money making classifieds business as employment and real estate markets create their own platforms and portals to reach the audience.

Photo by Ian Schneider on Unsplash

As a result of these developments, publishers are losing direct relationships with their readers as well as critical advertising which traditionally supported the editorial and operational costs. The platforms act as middlemen, using the content of the publishers for collecting data and selling them to advertisers. The publishers are left out in the cold.

Critically, publishers are also facing a crisis of confidence. As social platforms are used to spread fake news and poor content, mistrust in journalism grows.

The nonprofit foundation Publiq wants to face these challenges with a blockchain-powered infrastructure. It aims at removing unnecessary intermediaries from the equation and helping to create an independent, censorship-free environment. Gagik Yeghiazarian, CEO and Co-Founder of Publiq, is convinced: “Blockchain infrastructure allows content creators, readers and other participants to build a trusted relationship.”

You can learn more about Publiq and its blockchain infrastructure at Drupal Europe in Darmstadt: Gagik Yeghiazarian’s session “Blockchain Distributed Media — A Future for good publishing” will give you a glimpse into this new technology and a real-world application of it.

While you’re at Drupal Europe, be sure to check out the exciting blockchain panel discussion where Gagik, Ingo Rübe of Botlabs, and Taco Potze of Open Social, will share insights and use cases for blockchain technology. Don’t miss this!

Drupal Europe
Publishing & Media — Track Chairs

Aug 14 2018
Aug 14

Agaric is facilitating a full day training at Drupal Europe in Darmstadt, Germany to help you understand how to import content into your to Drupal 8 website.

This training is open for attendees with intermediate experience with Drupal- familiarity with installing a Drupal site and installing modules. We will use the Migrate API and related modules, which allows users to migrate content without writing any code.

With two instructors and a small group size we will ensure no one gets left behind. Instead everyone will get the attention they need.

Attendees will learn to:

  • Import data from CSV and JSON files.
  • Transform the data to populate taxonomy, date, image, file, and address fields.
  • Get content into Paragraphs.
  • Debug migration errors.

For a sneak peak of what you will learn, attend our Drupal Migration Q&A on Friday August 17th at 14:00 UTC (10 AM ET) on Zoom at https://zoom.us/j/3307127772

Regular training price is €476, however we are offering an early bird registration price of €276 from now through Sunday, August 19th. Space is limited so we do encourage registering early to take advantage of the price and ensure your spot.

As a web development cooperative that champions free software, we're passionate about migrations. It is a way to better understand Drupal's codebase, tap into the power of new features and build community. We have successfully migrated multiple sites to Drupal 8, including large projects with custom modules and hope to share that experience with you.

Register for Migration Training

Not able to make it to the training? No worries, we offer trainings on a regular basis. Sign up for our low-traffic, announcement only list to stay informed of future trainings. These will not be sent more than a few times a year.

Aug 14 2018
Aug 14

Agaric is facilitating a full day training at Drupal Europe in Darmstadt, Germany to help you understand how to import content into your to Drupal 8 website.

This training is open for attendees with intermediate experience with Drupal- familiarity with installing a Drupal site and installing modules. We will use the Migrate API and related modules, which allows users to migrate content without writing any code.

With two instructors and a small group size we will ensure no one gets left behind. Instead everyone will get the attention they need.

Attendees will learn to:

  • Import data from CSV and JSON files.
  • Transform the data to populate taxonomy, date, image, file, and address fields.
  • Get content into Paragraphs.
  • Debug migration errors.

For a sneak peak of what you will learn, attend our Drupal Migration Q&A on Friday August 17th at 14:00 UTC (10 AM ET) on Zoom at https://zoom.us/j/3307127772

Regular training price is €476, however we are offering an early bird registration price of €276 from now through Sunday, August 19th. Space is limited so we do encourage registering early to take advantage of the price and ensure your spot.

As a web development cooperative that champions free software, we're passionate about migrations. It is a way to better understand Drupal's codebase, tap into the power of new features and build community. We have successfully migrated multiple sites to Drupal 8, including large projects with custom modules and hope to share that experience with you.

Register for Migration Training

Not able to make it to the training? No worries, we offer trainings on a regular basis. Sign up for our low-traffic, announcement only list to stay informed of future trainings. These will not be sent more than a few times a year.

Sign up for training announcements

Aug 14 2018
Aug 14
DrupalEurope, which will be happening from September 10 through 14, 2018 in Darmstadt, Germany, describes itself as "both a technology conference and a family reunion for the Drupal community." 1600+ attendees are expected.The buzz around this event has been unusually high, especially in the greater Acquia metaverse, for 12 reasons. Here they are.
Aug 14 2018
Aug 14

Possibly the greatest ever digital signage advertising was created for British Airways which had it all. The advert, connecting to live flight information, displayed a child pointing up to the sky as an aeroplane flew above him. This was so cleverly done that the advert showed the flight number and its destination as well.

What a great blend of entertainment and education using the latest technologies!
A big screen shows a child pointing his fingers upwards while a plane flies in the skySource: British Airways

The digital signage system is scalable and its usefulness can be extracted to a great extent like digital menu boards for restaurants or the interactive digital movie posters for movie theatres. Drupal has the power to be a remarkably scalable digital signage solution for different sorts of organisations thereby reducing costs, speeding up time to market, and building engaging experiences for the people.

Digging Deeper Into The Terminology: Digital Signage

Digital signage refers to a centralised content dissemination platform for serving digital content on screens. It can be leveraged to display information through television programming, menus, advertising and other messages.

It can be seen in the form of digital signboards, billboards, and other such display devices for displaying visual information. It is connected by a content management system like Drupal that sends the digital content to be displayed. The information displayed can be anything ranging from static data and charts and graphs to images and video streaming.

Digital signage is a centralised content dissemination platform for serving digital content through television programming, menus or advertising on screens.

It can be commonly seen in outdoor marketing campaigns to display promotional content. Moreover, industries that rely on real-time information delivery to its employers or customer such as stock exchanges, airports, and sports stadiums can use digital signs to a great extent.

Digital Signage Can Be Used In Awesome Ways

Its uses can be seen through the eyes of organisations to understand the different ways it can be implemented. Some of the biggest brands have harnessed its immense potential.

Netflix, one of the largest over-the-top media service providers, carried a promotional campaign that relied on the humbled animated GIF. Instead of using a long video clip, they opted for reaction-based clips which were just a few seconds long. These videos were tied into the events that were actually happening around the globe.

[embedded content]


Swedish pharmacy Apotek Hjärtat developed a controversial billboard using a built-in smoke detector. Every time a smoker passed by, the billboard would cough loudly at them before displaying a series of products to help people stop smoking. Although it turned heads, questions were raised whether such an overt messaging is effective or not.

[embedded content]


Coca Cola’s Small World Machines Initiative had a grand ambition and offered a live link between India and Pakistan. Coke machines were placed in both the nations where people could interact with one another through the screen like touching hands, drawing peace, love, and happiness symbols together.

[embedded content]

A Trio Of Major Merits Through Digital Signs

Enormous possibilities of digital signs are pretty evident with so many big brands using them to a great effect. Using digital signs can prove beneficial in many ways.

  • Enhances customer engagement: People love colourful and moving images rather than static images which help in enhancing user engagement.
  • Makes a good impression: Content can be updated remotely within seconds. For instance, such quick updates can help retailers to form a good impression and adjust to customer demands without having to deploy employees or new signs printed.
  • Revs up revenue: Digital signs can help increase your sales and revenue. In 2014. Taco John deployed digital menu boards and witnessed a 12% increase in sales.

How Can Drupal Be The Perfect CMS For Digital Signage Solutions?

Well, it all boils down to the CMS that would be relaying digital content on to the screen to attract people. Drupal is one of the big players in the content management systems that can be the perfect fit for creating digital signs.

Content Creation

Your CMS should allow the content creation to be done intuitively and support all the common file types. Drupal comes with intuitive tools for content creation, workflow and publishing for streamlining content authoring.

Remote Access

With Drupal, on-the-go team members can assess, edit and approve content from mobile devices to keep content and promotional campaigns flowing on to the screens regardless of where they are and what device they are working on.

Content Revision

Drupal helps in enabling a swift and simple way to track all the alterations and revisions which is a must-have if you have multiple editors and need to handle a history of content changes.

Content Workflow

Drupal allows you to administer custom, editorial workflows for all the processes involved in the content production. It lets you view the stage your content is in - from creation to assessment to publication.

User Controls

Authentication and user permissions in Drupal helps in handling editorial workflows efficaciously and previews show how the content will look on screen before the content editors would finally approve and relay them on to the screens.

Content Scheduling

Drupal has the provisions for scheduling the content at your own convenience. It is possible to schedule a campaign to be published at a certain time. In case, a campaign is no longer required or outmoded, it can be unpublished as well.

Security

Drupal is one of the most secure CMS platforms among the leading players like Wordpress, Joomla and Magento. In a report published by Sucuri called Hacked Website Report, Drupal turned out to be the least vulnerable to security attacks in comparison to Wordpress.

Scalability

Your CMS should be able to grow with you and accommodate more screens. Drupal is a highly scalable solution with high traffic sites like Grammy, NBC Olympics, University of Oxford and many other renowned names performing astoundingly well even during the busiest of times.

Support And Maintenance

Drupal is an open source solution and you can rest assured that the Drupal community comprises of numerous vendors who are adept at providing round the clock support and maintenance.

At Opensense Labs, we have designed the Bucket and on-the-go models of support and maintenance services. We offer support in the day-to-day operations. Our support hours run parallelly with business hours but are extendable as per your needs.

Use Cases

The University of Iowa, which is powered by Drupal, kicked off a Drupal Digital Signage Service to offer new digital capabilities inside the campus.

Drupal’s flexibility in content management and delivery in combination with Intel Compute Sticks, mini-computers that serve each screen or sign, proved rewarding. This helped in offering wireless connectivity to the Drupal-based content as it is relayed on to the screens in real-time.

Three girls looking at a screen showing building architectureSource: University of Iowa

The digital signs provided key information for students like the time at which a bus would arrive or leave, emergency alerts, advertisements for student groups, computer lab availability, university news, and events etc.

The University reported rapid adoption of the service as many colleges and divisions within the University used the free and user-friendly solution on several screens. Stakeholders used templates and drag and drop tools and widgets for customising and governing the screen content.

The University’s move to expand the use of Drupal to digital signs proved beneficial in many ways. An IOWA NOW news story stated that “the backend is incredibly user-friendly. It’s the same system our websites run on, and so very intuitive. The web-based platform allows us to update information and slides from anywhere and anytime”.

Being an open source software, Drupal incurred no licensing fees. Hardware costs were lower too. Thanks to the project team’s discovery that the digital signs could be run on small, energy-efficient compute sticks. Moreover, wireless connectivity eliminated the expense of data ports and cabling.

People standing at the sides of the screen showing the pillars and the word IOWASource: University of Iowa

The Drupal Digital Signage system, rather than using a webpage, used a specialised software application. This made the displaying of content as simple as plugging the URL of a sign into a browser. Users were granted access permissions for specific signs and by utilising templates and a drag-and-drop interface, they could display the content or widgets in numerous regions of the screens. That content, displayed on the screen, could also be shared with other units.

Furthermore, the digital signs, being accessible to all screen-reading technologies, saved staff time. Being easy to learn, training time got reduced.

Content editors only needed to enter news or events into a familiar interface. The content would go to both their websites and digital signs simultaneously without having to perform double entry.

Another use case can be seen through Open Y Drupal distribution which was developed by the YMCA of Greater Twin Cities. The objective was to build a platform that would enable all YMCAs to operate as a unified brand through a common technology. Open Y, built on top of Drupal 8, helps in delivering a multi-channel experience for websites, mobile applications, digital signage and fitness screens.

Homepage of Open Y with people planting saplings in the background


The website of Open Y allows customers to schedule personal training appointments, make online donations to their local YMCA, or look up for monthly promotions. Leveraging the merits of Drupal 8’s API, Open Y integrates all of their systems with Drupal. This comprises its integration with Open Y’s Customer Relationship Management (CRM) and eCommerce partners but also stretches to fitness screens and wearables like Fitbit.

So, Open Y can use Drupal as a data repository to relay content such as alerts or promotional campaigns to digital signage screens, connected fitness consoles and fitness tracking applications. It, thus, puts Drupal at the core of its digital platform to offer seamless and personalised experiences to its members.

logo of drupalcon vienna 2017 with an icon shaped like a drop in the middle


The web-integrated digital signage system for displaying content was demonstrated in a session in DrupalCon Vienna 2017. In this system, the  Open Y Drupal distribution was used to serve as a proxy between resources that would provide information about the scheduled activities. In addition to this, it was leveraged to govern the content and to supplement it with both the marketing content and time and location sensitive messaging.

Future Of Digital Signage

According to the statistics given by the Statista, the statistics portal, the digital signage market worldwide was valued at 19.61 billion U.S. dollars in 2016 and the display market was estimated at 6.07 billion U.S. dollar in 2015.

Future of digital signage is bright as is for Drupal and together they can work wonders.
Graphical representation showing bar graphs for market value of digital signageSource: Statista

This number is going to see a significant rise by 2023 as the market value is poised to reach 32.84 billion in 2023. Digital signage technology is not just here to stay but grow multifold.

Conclusion

Digital content distribution can surely be taken to next level by making it engaging through digital signage solutions. Drupal can be the perfect choice of CMS for relaying content on screens.

We provide Drupal services with top-of-the-line expertise. Contact us at [email protected] to explore Drupal as a superb platform for building digital signage solutions thereby providing a whole new level of customer experience.

Aug 14 2018
Aug 14

Drupal Europe: Publishing + Media Special Focus

What industries come to mind when you hear blockchain? Banking? Trading? Healthcare? How about publishing? At Drupal Europe publishers will gain insights into the potential blockchain technology offers and learn how they can benefit. Meet Gagik Yeghiazarian, founder of the nonprofit foundation Publiq, and learn how he wants to fight fake news and build a censorship-resistant platform — using blockchain.

The publishing world is changing. Publishers no longer solely control media distribution. Big players like Facebook and Google are middlemen between the publishers and their readers, and technology built to entice publishers — Google’s AMP (Accelerated Mobile Pages) and Facebook Instant Articles — has strengthened social platforms as distribution channels. Additionally, publishers have lost money making classifieds business as employment and real estate markets create their own platforms and portals to reach the audience.

Photo by Ian Schneider on Unsplash

As a result of these developments, publishers are losing direct relationships with their readers as well as critical advertising which traditionally supported the editorial and operational costs. The platforms act as middlemen, using the content of the publishers for collecting data and selling them to advertisers. The publishers are left out in the cold.

Critically, publishers are also facing a crisis of confidence. As social platforms are used to spread fake news and poor content, mistrust in journalism grows.

The nonprofit foundation Publiq wants to face these challenges with a blockchain-powered infrastructure. It aims at removing unnecessary intermediaries from the equation and helping to create an independent, censorship-free environment. Gagik Yeghiazarian, CEO and Co-Founder of Publiq, is convinced: “Blockchain infrastructure allows content creators, readers and other participants to build a trusted relationship.”

You can learn more about Publiq and its blockchain infrastructure at Drupal Europe in Darmstadt: Gagik Yeghiazarian’s session “Blockchain Distributed Media — A Future for good publishing” will give you a glimpse into this new technology and a real-world application of it.

While you’re at Drupal Europe, be sure to check out the exciting blockchain panel discussion where Gagik, Ingo Rübe of Botlabs, and Taco Potze of Open Social, will share insights and use cases for blockchain technology. Don’t miss this!

Drupal Europe
Publishing & Media — Track Chairs

Aug 14 2018
Aug 14

A client noticed the dates on their news articles were not being translated into the correct language. The name of the month would always appear in English, even though all the month names had themselves been translated and showed correctly elsewhere. The problem turned out to be down to the twig filter being used in the template to format the date. This is what we did have:

{% set newsDate = node.getCreatedTime|date('j F Y') %}
{% trans %} {{ newsDate }}{% endtrans %}

So this would produce something like '1 March 2018' instead of '1 März 2018' when in German. This was because twig's core date() filter simply isn't aware of Drupal's idea of language.

I switched out the date() filter and used Drupal core's own format_date() filter instead, which uses Drupal's own date.formatter service, which is aware of language. It ensures the month name is passed through t() to translate it, separately to the rest of the numbers in the date. So it now looks like this:

{% set newsDate = node.getCreatedTime|format_date('custom', 'j F Y') %}
{% trans %} {{ newsDate }}{% endtrans %}

Having done that, I realise the original code was the equivalent of doing this:

t('1 March 2018');

(I'm less of a front-end coder, so putting it in PHP makes it more obvious to me than twig code!)

So the date actually was translatable, but only as the whole string -- so unless the translators had gone through translating every single individual date, the German month name was never going to show!

What I needed was the twig equivalent of using placeholders like this PHP example:

t('My name is @name, hello!', ['@name' => $name]);

When you use variables between twig's trans and endtrans tags, they really are treated by Drupal as if they were placeholders, so this is the twig version:

{% trans %} My name is {{ name }}, hello! {% endtrans %}

This helped me understand twig that little bit more, and appreciate how to use it better! Regardless of formatting dates, I now know better how to set up translatable text within templates, hopefully you do too :-)

Aug 14 2018
Aug 14

There is not a lot of documentation available about what's the difference between running a browser in WebDriver mode vs Headless so I did some digging...

Apparently, there are two ways to run Chrome for testing:

  • As WebDriver
  • As Headless

WebDriver:

There are two ways to run Chrome as WebDriver:

Using Selenium:

Run Selenium standalone server in WebDriver mode and pass the path of ChromeDriver bin along with the config e.g. Selenium Dockerfile

This works fine with Nightwatch standard setup, \Drupal\FunctionalJavascriptTests\JavascriptTestBase and also with Drupal core's new \Drupal\FunctionalJavascriptTests\WebDriverTestBase.

Using ChromeDriver:

Run ChromeDriver in WebDriver mode e.g. chromedriver Dockerfile

This works fine with Nightwatch, JTB, and WTB.

Headless:

Using Chrome

Run Chrome browser binary in headless mode. e.g. Chrome headless Dockerfile

Nightwatch is not working with this set up, at least I was unable to configure it. See https://github.com/nightwatchjs/nightwatch/issues/1390 and https://github.com/nightwatchjs/nightwatch/issues/1439 for more info. \DMore\ChromeDriver can be used to run the javascript tests.

Using ChromeDriver

Using Selenium ChromeDriver can be run in headless mode something like this:

const fs = require('fs');
const webdriver = require('selenium-webdriver');
const chromedriver = require('chromedriver');

const chromeCapabilities = webdriver.Capabilities.chrome();
chromeCapabilities.set('chromeOptions', {args: ['--headless']});

const driver = new webdriver.Builder()
  .forBrowser('chrome')
  .withCapabilities(chromeCapabilities)
  .build();

DrupalCI is running ChromeDriver without Selenium and testing Nightwatch and WTB on it.

Conclusion

The question is which is the best solution to run Nightwatch and JTB/WTB tests using the same setup?

  • We had seen some memory issues with Selenium containers in the past but we haven't run into any issue recently so I prefer this and you can swap Selenium container to use different browsers for testing.
  • We have also seen some issues while running ChromeDriver in WebDriver mode. It just stops working mid-test runs.
  • I was unable to get Headless Chrome working with Nightwatch but it needs more investigation.
  • Headless ChromeDriver setup on DrupalCI is quite stable. For JTB this would mean that we could use anyone from \Drupal\FunctionalJavascriptTests\DrupalSelenium2Driver and DMore\ChromeDriver.

Please share your ideas and thoughts, thanks!

For more info:

Photo of Jibran Ijaz

Posted by Jibran Ijaz
Senior Drupal Developer

Dated 14 August 2018

Comments

We are also having a discussion about this in 'Drupal testing trait' merge request see merge_requests/37.

Pagination

Add new comment

Aug 14 2018
Ana
Aug 14

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 Michael Anello. Learn about his volunteering, how successful DCO is and on what contributors he is most proud of.

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

I am an active Drupal community member, volunteering for the Drupal Association's Community Cultivation Grants committee, the Drupal Community Working Group, and the Florida Drupal Users' Group. I also host a twice-monthly DrupalEasy Podcast focused on community news and interviews.

Professionally, I am the co-founder and vice president of DrupalEasy, a Drupal training and consulting firm based in Central Florida. I am the lead trainer and curriculum developer for our Drupal Career Online (DCO) program, an intensive 12-week, online Drupal training program. The DCO has been presented 13 times, and its curriculum has been used as the basis for two sessions of Acquia U. In addition, I keep busy with Drupal client work as a full-stack developer and project coach.

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

I started building websites for clients almost 20(!) years ago. I started out creating custom sites for all my clients using ASP, ASP.NET, Cold Fusion, and PHP. Eventually, I discovered open source content management systems and eventually found Drupal. I immediately admired Drupal's elegance and community and decided to stick around for a while.

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

Drupal has been very good to me from both, a professional and social standpoint. It has been my main source of income for the past 10 years, allowing me to help raise our family and keeping me professionally satisfied. Some of my best friends are from the Drupal community, and every Drupal event I attend, the circle of friends continues to grow. One moment that sticks out in my mind is the first Florida DrupalCamp that myself and others organized. We were blown away by the response and "community-ish" of it all.

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

Drupal is used to build websites. If you surf the web, then you've used Drupal. It allows site owners to organize and manage a site's content.

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

If you like learning new things, then you'll love Drupal. I'm pretty confident that it will continue to evolve and the community will have to evolve along with it.

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

I've been involved in a wide variety of community contributions, all of which I'm quite proud of. I've been one of the organizers of Florida DrupalCamp for ten years, I volunteer for the Drupal Association's Community Cultivation Grants committee, I've been a sprint mentor, maintained and contributed to contrib modules, I've been a core maintainer, and I am a member of the Community Working Group. 

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

The Community Cultivation Grants committee. The Drupal Association provides funds for us to distribute to emerging Drupal communities around the world. We've funded projects on continents, and we are always looking for local communities leaders looking to take their community to the next level.

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

I continue to be excited about Drupal 8's "getting off the island" - it has encouraged me to interact with other open source communities and has, in turn, made me a better developer and trainer.
 

Aug 13 2018
Aug 13

Federated Search with Drupal, SOLR, and React (AKA the Decoupled Ouroboros)

Join Palantir's Avi Schwab for a discussion at the Drupal Chicago Meetup. He'll be going over a recent Palantir project and how we bring content from disparate sites (D7, D8, Wordpress) into a single index and then serve results out in a consistent manner, allowing users to search across all included properties. Avi will discuss how we got started with React, our process for hooking up to SOLR, and how we used Drupal to tie the whole thing together.

  • Date: Wednesday, July 11, 2018
  • Time: 5:30 - 7:30pm
  • Location: Caxy Interactive, 212 West Van Buren Street, Chicago, IL
Aug 13 2018
Aug 13

Decoupled Drupal was a hot topic at DrupalCon Nashville, and Palantir is very excited to be Silver Sponsors of this year's Decoupled Drupal Days. Keep an eye out for Jes ConstantinePatrick Weston and Avi Schwab; they'll be attending the event and would love to hear about your recent decoupled projects. 

Federated Search with Drupal, SOLR, and React (AKA the Decoupled Ouroboros)

Avi and Jes will be presenting on Friday and giving an overview of a recent Palantir project. He'll explain how we bring content from disparate sites (D7, D8, Wordpress) into a single index and then serve results out in a consistent manner, allowing users to search across all included properties. He'll also go over how we got started with React, our process for hooking up to SOLR, and how we used Drupal to tie the whole thing together. More details can be found on the official site

  • Date: Friday, August 17, 2018
  • Time: 2:45 PM
  • Room: Aten Design Group Lecture Hall
Aug 13 2018
Aug 13

Apparently there are still pretty common Drupal 8 theming tasks that cannot be accomplished with the great twig_tweak module. This by the way was me giving a plug to a great little module, which makes half of all your theme preprocess hooks unnecessary.

If you would like to get the URL from an image that is trapped inside of a media entity however, you can either extract it using the aforementioned preprocess function like so:


  1. function mytheme_preprocess_node(&$variables) {

  2. /** @var \Drupal\node\NodeInterface $node */

  3. $node = $variables['node'];

  4. $image_field = $node->get('field_background_image');

  5. if (!$image_field->isEmpty()) {

  6. $uri = $image_field->entity->get('field_media_image')->entity->uri->value;

  7. $variables['background_image_url'] = file_create_url($uri);

  8. }

  9. }

In the node template, you can display it using


  1. {{ background_image_url }}

... or use this nifty snipplet inside of your twig template directly:


  1. {% if node.field_background_image is not empty %}
  2. {{ file_url(node.field_background_image.entity.field_media_image.entity.fileuri) }}

In this case the media image URL is acquired from a node inside of a node tempalate node--node-type.html.twig, but this will work for other entities in other templates as well, e.g a paragraph in paragraph--paragraph-type.html.twig.

Aug 13 2018
Aug 13

Drupal Career Online Case Study: Rosewood Marketing

Like their arboreal namesake, Rosewood Marketing is amazingly sound and particularly suited for very specific applications. Where the Rosewood tree serves to form the structure of certain fine musical instruments, billiard cues and chess pieces, Rosewood Marketing serves as a bridge for dozens of Amish and Mennonite small businesses to mainstream society. Their growth and development over the 22-year span of their success is not just in their marketing prowess, but in their inherent, sincere understanding of their client culture.    

If you really think about it, Rosewood has perhaps one of the most focused and secluded market segments in the US, which interestingly enough allows them to bring a type of diversity to the Drupal Community we don’t often consider. They do this amazingly well in their approach to business development and hiring. They first truly match new employees to their market and their company culture, and then leverage training programs to ensure the team has the skills and best practices in technology and communications to meet their business standards.  A person hired as a graphic designer receives training in tools such as Photoshop, InDesign, design principles and customer service. An online marketer receives training in analytics, SEO, and PPC, while a new manager learns time management.

Others become web developers, and as our luck would have it, DrupalEasy students and graduates. Of Rosewood’s 16 member staff, two are Drupal Career Online graduates and one new hire has just been enrolled in the upcoming Fall 2018 session.  Our new Rosewood student already has experience in Drupal 7, but needs to move forward in Drupal 8. Adrian Nolt, a 4-year employee of Rosewood and a Fall 2017 DCO graduate, explains, “Even though Stephen has...Drupal site-building experience, I recommended that he take DCO in order to acquire a common training foundation as our other Drupal developers...For me as a primarily self-taught Drupalist, DCO filled in knowledge gaps, and I would like for Stephen to experience the same joy.”

Stephen Ebersole, who was hired recently, works remotely for Rosewood, with his primary residence in Georgia, and currently living in Honduras serving his church. He, like most Rosewood employees, is a member of a Mennonite community.  Adrian explains, “Since Rosewood's target market is businesses run by members of the Plain Communities...besides the native understanding of our target market, we feel that while Drupal may be hard to learn, it is easier to pick up than people skills and a solid work ethic.”  

Adrian highlights the importance of this native understanding by explaining, “Many members of the Plain Communities are devout Christians with strong convictions...If a Rosewood team member does not...appreciate why his or her client will, for example, give up internet access in order to free himself from unnecessary temptations, he or she will not be able to make recommendations that align with our client's values. This understanding is more important to our ability to serve our clients well than expertise in a specific technology.”

Adrian continues, “...as soon as an employee has sufficient proficiency to perform basic tasks, he or she begins working on paid work, even if it means billing our clients at a reduced shop rate for a time. We believe that learning by doing is one of the most efficient ways to learn..though... can leave holes in a person's knowledge. For some of us, taking DrupalEasy's DCO course is about filling in the gaps and providing a common foundation for working together. However, it is also one of the fastest ways I know to get a Drupal beginner up to speed and productive with Drupal.”

The team at Rosewood has used video courses, but they have found for their purposes,  says Adrian, that “...many are too basic or not opinionated enough to apply to most real-life Drupal development practices.” He continues, “For example, they may teach installing Drupal 8 from a tarball, but we had already committed to a composer-driven workflow for Drupal 8 as the safest long-term bet, and I was looking for a course that teaches a professional development workflow. DrupalEasy DCO has proven to be the well-rounded, just-deep-enough training we were looking for, and as long as Drupal remains one of our specialties, we expect to consider it as part of our Drupal training regimen.”

Adrian feels the most valuable aspects of the DCO include clarifying the intersections of fields, blocks, entity types, content types, and relationships, which he says can be an "ah-ha" moment to someone just getting started. He also appreciates becoming familiar with command-line, git, local development, and views, as it is a must for success in Drupal 8, which he feels is a huge hurdle for those getting started. He adds “...the value of DCO lies in how it connects all the pieces, such as workflow, data architecture, module development, theming, and the business of Drupal, together into one comprehensive introduction to the Drupal ecosystem.”

Rosewood’s clients are primarily in the agricultural industry, or are builders, retailers, craftsmen, and small manufacturers, including small businesses such as  Vierbike, MM Weaver and Blue Ridge Furniture. The company is now going with other CMS options for simpler sites, but Adrian emphasizes,  “Drupal continues to excel at use cases that require structured data and over 30 pages. We feel that having Drupal in our tool bag allows us to provide outside-the-box marketing solutions to our clients simply by combining modules and configuring the user interface. On other platforms, competitors may need to resort to custom code or make compromises in order to use an out-of-the-box solution.”

As far as their training philosophy, that is evolving as well, according to Adrian, “In the past, we prescribed training when a person was hired or when they needed to learn something new. However, we have begun budgeting training dollars and time into our annual budgets in order to continually grow as professionals and as a company.” He continues, “Hiring and training people is a way to scale our service-based business to serve more clients. Continued education adds to our in-house skill set to allow us to serve them in more ways and more efficiently. Happy clients = successful Rosewood.” He adds, “We don't know the future, but judging by the past, we will continue to hire and train employees.”

The Fall 2018 session of Drupal Career Online starts September 3rd.  Group rates and government discounts are available. If you‘d like more information, join us for our no-cost mini-webinar Taste of Drupal on Monday, August 27.  

Aug 13 2018
Aug 13

Just imagine: putting together the powerful UI creation tools of a static site generator — more of a modern front-end framework rather —  built for high speed, like Gatsby.js, with Drupal 8's content modeling and access system! Putting their powers together into a blazing-fast website! But how to get Gatsby to work with Drupal?

How do you build a plugin that fetches data from API-first Drupal? In short: a static, conveniently simple, yet robust Gatsby site powered by a powerful, decoupled Drupal back-end?

You've got the questions, we've got the answers...

And we've grouped all our answers to your questions regarding “API-first and decoupled Drupal in connection with Gatsby” in a straightforward 4-step tutorial. One on building a high-speed Gatsby website backed by a versatile headless Drupal CMS.

Shall we dig in?
 

1. But What Is Gatsby.js More Precisely?

The standard, rather rigid definition would be:

“It is a GraphQL-fueled, React-based static site generator.”

Now if the words “static site generator” just make you... cringe, here's a more nuanced definition for you:

“Gatsby's more of a modern front-end framework —  one pulling together the best parts of GraphQL, React, webpack, react-router — built with the developer experience in mind.”

In short: it's a static site that this “more than just a static site generator” helps you build, leveraging its out-of-the-box front-end tools. A website geared to reach fast page loads while pulling data from a decoupled Drupal CMS.

And there are the 2 basic steps for getting started with Gatsby; you simply write your site's code structure and let Gatsby handle the rest:
 

  1. turn it into a directory with a single HTML file
  2. … along with all your static assets


2. 3 Reasons Why You'd Want to Use Gatsby

… instead of Jekyll, your webpack config or create-react-app.
 

a. Because of the richness of the Gatsby ecosystem

With rich documentation at hand and backed by an already large community of starters, you'll get your Gatsby site up and running in no time.
 

b. Because it leverages GraphQL' power to build its data layer.

And this is one of those heavy-weighting reasons for using Gatsby over other competing alternatives:

Gatbsy's built to fetch data from... pretty much anywhere — your CMS of choice, Markdown, third-party APIs, Markdown — using “source” plugins. When creating its data layer, it relies on GraphQL, which builds an internal server of all this pulled data.

In short: when questioning yourself “how to get Gatsby to work with Drupal”, do keep in mind that in your future Gatsby & decoupled Drupal setup data gets queried from the same place, in the same way, via GraphQL.
 

c. Because it's built for high speed.

And this is one of Gatsby's hardest-to-resist-to advantage:

It's just... fast.

And that gets reflected in your final Gatsby & decoupled Drupal site while bubbling up to the user experience, as well.

Summing up, these are the 3 strongest reasons why you would be tempted to use Gatsby with Drupal CMS. 

I'm not going to engage in dynamic sites vs static sites debate now. The internet's overcrowded with such comparisons.

I'll just end this “pledge” on using Gatsby with just a non-debatable statement:

Since a static site generator pre-generates the pages of your website, the performance vs maintenance costs scales gets unbalanced. And guess which one's going up and which one down!
 

3. And Why Would Pair Gatsby with Drupal?

If there are strong reasons why you should be getting started with Gatsby, why is there any need to consider decoupled Drupal CMS for its back-end?

Because static site generators don't “care” much for the authoring experience. Content editors have to get themselves tangled up in Makdown for creating content.

True story!

And this is where powerful CMSs, such as Drupal, step in, “luring” you with their:

  • WYSIWYG editors
  • content types 
  • content modeling capabilities
  • access workflow capabilities

… to make your content team's lives easier!

And now your “How to get Gatsby to work with Drupal” dilemma turns into a new legitimate one:

How to make your Gatsby website cope with a decoupled Drupal setup without adding the “dread” of a database and web server to the equation?


2 elements that “pave the path” for performance and security issues.

Well, this is precisely what this “decoupling Drupal with Gatsby scenario means to avoid:

  • you'll get to host your Drupal CMS in-house
  • … and thus take full advantage of the robustness and versatility of a decoupled Drupal CMS back-end
  • your Gatsby website will fetch data from its Drupal back-end and generate content “the static way” (which translates into “incredibility fast page loads”)
     

4. How to Get Gatsby to Work with Drupal More Precisely

Or simply put: how to pull data/content from Drupal into your Gatsby website?

Here's a straightforward tutorial in 4 steps on how to integrate Drupal with Gatsby:
 

4.1. First, Build Your Drupal Server 

Assuming that you have a Drupal 8 website installed, the very first step to take is to:
 

a. Create a new content type 

For this exercise, it's a blog — including all its blog posts — that we'll try to transfer from Drupal to Gatsby. So, we'll name our content type: “Blog”.

It will include 3 basic fields:

  • title
  • body
  • image

For this, just navigate to Home>Administration>Structure>Content Types.
 

b. Turn Drupal into an API Server 

For this, there are 2 key modules that you'll need to install:
 

  1. jsonapi_extras: for gaining more control over the API (to disable resources, to change the default endpoint, to enhance field output etc.)
  2.  jsonapi, which will turn your Drupal website into an API server (one having a default endpoint)
     

c. Grant Anonymous User Permission to Access the JSON API resource list

If you overlook this step, you'll end up with an “Error 406” message, which will just sabotage your whole “decoupling Drupal with Gatsby” mission.
 

d. Check How Your Drupal API Server Works 

You can do this by navigating to http://[your-site]/jsonapi logged in as an Anonymous user.

If the page that you'll get displays all the information regarding your API server, then you'll know you're on the right track.
 

4.2. Then, Create a New Gatsby Site

But before you jump to building your new static website, check whether you have npm and node installed on your PC. 

How? By entering “npm  -v” and “node  -v” into your terminal.

Next, you'll need to install Gatsby's CLI:
 

npm install --global gatsby-cli 

Then, just build and get your Gatsby site up and running.

Note: by default, it will be accessible at localhost:8000.

How to Get Gatsby to Work with Drupal: building a new Gatsby site

4.3. Decouple Drupal with Gatsby: Pulling Data from the API Server
 

a. Set up the (/blog) page

Solving your “How to get Gatsby to work with Drupal”  type of dilemma starts with... the creation of a new page on your Gatsby website.

And is as simple as... setting up a new JS file.

Note: all your Gatsby pages will get stored under /src/pages.

Now here are the basic steps to take:
 

  1. create the blog.js in /src/pages
  2. then add this code: import React from "react" const BlogPage = () => ( <div> <h1>Latest from our bog</h1> </div> ) export default BlogPage 
     

Voila! You've just created a new page at /blog.
 

b. Pull Content from the Drupal 8 site using GraphQL

The “gatsby-source-drupal” plugin, to be more specific.

It's this source plugin that will be “in charge” with all the data (images here included) pulling from decoupled Drupal back-end to your Gatsby site.

Note: do keep in mind that in this case, the JSONAPI module plays a crucial role.

And here's how you install your “power” plugin:
 

// in your blog.gatsby folder npm install --save gatsby-source-drupal 

Next, just configure your newly installed plugin:
 

// In gatsby-config.js plugins: [ ... { resolve: 'gatsby-source-drupal', options: { baseUrl: 'https://goo.gl/Cc5Jd3 apiBase: 'jsonapi', // endpoint of Drupal server }, } ], 


Tada! Now your site should be functioning properly.

If... not quite, here are the causes of the 2 most common error messages that you could get:
 

  • “405 error”, check whether the jsonapi_extras module is enabled
  • “ 406 error”, have a closer look at the permission on your Drupal site
     

c. Configure GraphQL to Pull Specific Pieces of Content from Drupal

In other words: to query all the “blog” nodes from Drupal and request specific data from the API server.

Another strong reason for using Drupal CMS with Gatsby is that the latter provides an in-browser tool for testing GraphQL queries names, for writing and validating them. You can access it at localhost:[port]/___graphql, whereas in our particular case here at: localhost:8000/___graphql.

Now, as you're solving this “How to get Gatsby to work with Drupal” type of puzzle, just try to query all the blog nodes.

Next, navigate back to your blog.js file and run this query:
 

export const query = graphql` query allNodeBlog { allNodeBlog { edges { node { id title body { value format processed summary } } } } } ` 


Then, update your const BlogPage so that it should display the body, content and title:

const BlogPage = ({data}) => ( <div> <h1>Latest from our blog</h1> { data.allNodeBlog.edges.map(({ node }) => ( <div> <h3>{ node.title }</h3> <div dangerouslySetInnerHTML={{ __html: node.body.value }} /> </div> ))} </div> ) 


Next, save your file and... “jump for joy” at the sight of the result:

All your blog posts, nicely displayed, pulled from Drupal and published on your Gatsby site!
 

4.3. Finally, Just Go Ahead and Publish Your New Gatsby Site

And here you are now, ready to carry out the last task of your “How to get Gatsby to work with Drupal” kind of “mission”. 

This final task is no more than a command that will get your Gatsby website running:

gatsby build 

Next, just run through your /public folder to see the “fruits of your work”.

At this point, all there's left for you to do is to copy/push content in /public to server and... deploy your new website using Gatsby with Drupal CMS.

The END! This is how you do it: how you use Gatsby.js in a decoupled Drupal setup so you can benefit both from:

  1. a modern static site generator's robustness and high performance, built with developer experience in mind 
  2. a powerful CMS's content managing capabilities, built with the editorial experience in mind 
Aug 13 2018
Aug 13

There might be instances where an editorial team comes across challenges in the process of publishing its content. These include:

  1. Living a number of articles at the same time.
  2. Sending the final copy of approval on a website to different people but not living it. 
  3. Publishing a number of articles on different websites/subdomains. 

Luckily, the Drupal Deploy module allows content staging and publishing without the user requiring to log into the target site. This is very handy when there are a number of people involved or multiple sites, in case of media and publishing websites especially.

top view of five hands fists bumping

What is Content Staging?

Content Staging is an in-house development environment where a team is involved in creating various kinds of content. This includes all the stages a piece of content has to go through before actually going to the production site. 

Exploring Drupal Deploy Module

The Deploy module allows users to easily stage and preview content for a Drupal site in different environments. The module automatically manages dependencies between entities and is designed to have a rich API which can easily be extended to use in a variety of content staging situations.

It allows: 

  • Cross-site content staging

To stage content between different Drupal sites.

  • Single-site content staging

Provide a workspace preview system for single-site content staging.

  • Fully decoupled site

Create a decoupled Drupal site.

The Deploy module is designed to allow users to easily stage content from one Drupal site to another.

How To Use Drupal Deploy Module?

Installation

Deploy module has various Drupal and PHP dependencies so the best way to install it, is by using composer.

composer require 'drupal/deploy:^1.0'

Exploring Deploy Suite

Once we run this command in our Drupal website we get all the modules and PHP libraries required to run the Deploy suite. Let’s have a quick look at all of the modules: 

  • Conflict: It provides resolution for conflicts which merge due to changes in translatable fields in non-edited content entity translations, changes in fields to which the user does not have access, fields with no edit access, fields not part of the entity form display, changes in entity metadata, revision ID, changed timestamp.
     
  • Key-value Extensions: A very important module which helps in speeding up the Deployment process. It extends the core key-value API with a backend for lists and sorted sets that you can do range queries on.
     
  • Multiversion: Multiversion will convert all core content entities on your site to be revisionable. Since Deploy suite is built around the revisionable entities, it is an important module in the process of Deployment.
     
  • Replication: This module provides the functionality and services to assist with replicating content between workspaces on a single site (using the Workspace module) or between workspaces across different sites (using the Relaxed Web Services module).
     
  • Workspace: Provides the ability to have multiple workspaces on a single site to facilitate things like the full-site preview and content staging.

Single-Site Content Staging

The Distributed Management of Content deals with the workflow involved in the content creation with a decentralized approach. The process can be very complicated and requires different levels of managerial checks. Deploy module, in that case, can turn out to be the best solution.

To use the Deploy content staging we have to enable the Deploy module which automatically installs all the required contributed modules, perform database operations and supply required default configurations for the modules.

To use Deploy it is worthwhile to check its out-of-the-box configurations and plan Deployment strategy for your website, accordingly.

  1. Go to Admin → Structure → Workspace to check the workspaces provided by default. This becomes important later during the content transition stages. Admin interface of workspace with different owner, type, and statusWe have a Live and stage workspace and also functionality to add more of the workspaces as per our requirement. By default, the Live workspace is active and Stage inactive. It means that all the content added will be available on the Live Workspace.

    We also have an ability to set target workspaces on content updation as well which content entities to replicate.
     

  2. Following settings can also be accessed via admin toolbar on any page of the website. To continue with the deployment process, go ahead and select ‘Stage’ as the active environment from workspace switch option in the admin toolbar.admin interface with stage highlighted in the admin toolbar
  3. Now since we are currently on Stage workspace, all the content added will only be visible to those with access to View content in a particular workspace.
     
  4. Go ahead and add 10 articles via Node → Add → Article interface. As soon as all the articles are added they start appearing on Homepage for the user with access to the content. If we check website anonymously we won’t be able to see any of those articles and will get a 'Page Not Found' error. 

    At this particular time, all the content editors and stakeholders can have a look at the content, modify it or even remove it. 
     

  5. To deploy all articles on Live workspace go to Admin → Structure → Deployment → Start New Deployment.admin interface to deploy stage to live Provide a Deployment title and a description to keep a track record of all the Deployments.

Once we Deploy to Live, all the articles are available on the Live workspace after the next cron run.

Advantages

  1. Publish multiple articles at the same time, without accessing them individually. 
     
  2. Deploy provides various kinds of permission such as Access content on a particular workspace.
     
  3. It also detects for changes done on the Live workspace directly and provides an interface for conflict resolution and content synchronisation between various workspaces.
     
  4. You can create workspaces as per your requirement, For example, providing workspace for each content editor and then comparing the overall impact. Based on that you can very easily deploy content from various workspaces to the Live Workspace.

Cross-Site Content Staging  

Deploy module can be used with the Relaxed module to extend all the capabilities of Deploy suite for multiple websites. We can configure as many remotes as we want and then Deploy content on various websites.

  • Relax module can also be installed via composer using the following command.
composer require 'drupal/relaxed:^1.0'
  • After enabling the module, the relaxed remote endpoint can be configured from Admin → Config → Relaxed → Settings.admin interface of relaxed web services settings This endpoint will be used by the remote websites to interact with the workspaces available in your local.
     
  • To interact with remote endpoints they have to be configured in Admin → Config → Services → Relaxed → Add.admin interface of add remote
  • Once you have set up the Remote, you can then Deploy content to remote workspaces as well.

Drupal allows Distributed Content Management strategy to be applied to large volumes of content to facilitate efficient workflow. Specifically, the system allows different content and editors to be part of the same system without much replication, and Deploy module just helps build the architecture right.

Aug 12 2018
Aug 12

People often ask about the free software tools Agaric uses to manage our cooperative business. In this article, we share some of the free software tools we use for office tasks and administration as well as communications. These are Agaric's chosen resources -- the tools we use today for our daily business operations.

Agaric uses free software whenever possible. We build websites using Drupal, a free software content management system, and we are long time participating members of the Drupal Community. When we cannot use free software, we actively search for and contribute to groups working towards solutions.

Here is our reasoning behind the choice to use Free Software whenever possible:
The Need for Accountable Technology - Part 1

You may also wonder why we say "Free Software" and not "Open Source" since the code in both instances is essentially the same. We use the term "Free Software" because it includes the ethical principles about respecting user's freedom. Free software ethics say that users deserve control over the code they use, whereas using the term "Open Source" cites only the goal of letting users participate in the development. We support the ideals of software protecting your rights and not leaving you vulnerable.

What is Free Software?

A program is free software if the program's users have the four essential freedoms:

  1. The freedom to run the program as you wish, for any purpose (freedom 0).
  2. The freedom to study how the program works, and change it so it does your computing as you wish (freedom 1).
  3. The freedom to redistribute copies so you can help others (freedom 2).
  4. The freedom to distribute copies of your modified versions to others (freedom 3).

Access to the source code is a precondition for this. To determine whether the source code is free, see what license it carries and then check the GNU project's list of licenses.

We do a few tasks that we do not have free software for. So, we use non-free programs for them. Sometimes we use specific non-free software that a client insists on including in the web site. By using non-free programs we sacrifice some of our freedom; some activists would refuse to do that. We do not like the compromise, so we help develop free replacements for those programs. Whenever possible we use software that reflects our values.

GNU/Linux OS

Free operating System - similar in features to Windows and Mac.
We have chosen to use GNU/Linux as our default system for our local development. When we take on a new student we install a GNU/Linux distribution. We always give the option of installing a different distribution, or if a student wishes to do so, they may. These are the favored GNU/Linux distributions in use by our cooperative team *members:

These are not the best versions of GNU/linux in regards to being completely free, you should consult the list of free distributions on the Free Software Foundation website.
* Currently one team member is using the proprietary but BSD-based Mac OS X, which is compliant with the Unix 03 / POSIX standard which GNU/Linux distributions also meet.

Browsers

Firefox: As developers we have to test client sites in all browsers, but for working and building sites, we use Mozilla FireFox. Although the source code of Firefox is free software, they include some icons, trademarks and logos in the download that make it non-free. You can easily remove these as has been done with IceCat, the GNU version of the Firefox browser. It has great performance, developer tools and community. The plus side of having a community around the software we use is having access to a large pool of people with experience and guidance as we learn and build together.

Tor Browser: As citizens we are not fond of being tracked so we use a free anonymizing web browser that does not allow tracking. It is called Tor.

File Storage and Calendar

Nextcloud: Agaric uses a hosted version of NextCloud on MayFirst.org that is inclusive of:

  • document and file storage
  • image galleries
  • desktop and phone document synchronization
  • calendar
  • contacts
  • document editors

Finance, Accounting and Bookkeeping

GNUcash: Accounting software that we use for our bookkeeping.
You can see a review of GNUcash vs Quickbooks and decide if it works for you. We have found a few bookkeeping cooperatives that do accounting!

Communications

As a team we rely on different tools to communicate with each other and with clients about daily activities and long term project goals. We have a distributed team at locations around the world and must maintain contact especially when pair-programming or during a migration which calls for all-hands-on-deck, as well as sharing some long informational text notes and documents that include administrative information.

FreeNode: IRC - Internet Relay Chat - Realtime Text Chat: Yes, we still use IRC and you can find us on irc.freenode.net server in the #devs-r-us channel

Our preferences here are as varied as our team members: some use irssi via a remote, always-on virtual server, many use desktop clients, such as HexChat or Konversation, and still others prefer the web-based solution "The Lounge".

Email

MayFirst.org hosts Agaric.com email

Email Client: Thunderbird: An email client from Mozilla, which also makes Firefox, and is available for your phone. It also has an encryption plugin called EnigMail that works well and is not super tricky to get set up.
Hosted Email: RiseUp: Encrypted services run by anonymous volunteers and you must be invited to have a membership.
Mayfirst offers three web-based email solutions.

  1. Roundcube which has a friendly and simple web interface, making it the easier of the two programs to use.
  2. SquirrelMail is an option that is Javascript-free!
  3. Horde, on the other hand, offers more than just email - you can share calendars, to dos and more with other members of your group.
Hosted Email

Protonmail: An email service that is hosted and encrypted.

Email Lists:

We use email list servers for mailing lists based on groups and topics. It allows group mailing to people that sign up for a specific list.

MayFirst Email Server
RiseUp Email Server

Social Media

Mastadon: Publish anything you want: links, pictures, text, video. All on a platform that is community-owned and ad-free.

Social.coop: A community similar to Twitter, the main difference is that it is owned by the members. For as little as $1 a month you can become an owner/member and take part in shaping the future of the platform. You can find and follow Agaric in social.coop, a coop-run corner of the fediverse, a cooperative and transparent approach to operating a social platform

Live Streaming

MayFirst Live Streaming: MayFirst membership includes live streaming.

Conference Calls and Online Meetings

Some Agaric team members are using Jitsi recognizing that it is a work in progress and there may be technical failures at times - such as we have also found using Google Hangouts - lag time, cut-offs, poor sound quality and issues with screensharing... At times we have found that we need to use a proprietary solution that seems to work reliably as we continue to support development efforts and bug fixes with Jitsi. At the heart of Jitsi are Jitsi Videobridge and Jitsi Meet, which let you have conferences on the internet, while other projects in the community enable other features such as audio, dial-in, recording, and simulcasting.
You can self host an instance of Jitsi or choose a hosted version. You can use http://meet.jit.si or an instance is also available for public use at https://meet.mayfirst.org We do encourage you to become a MayFirst member and have access to all of the free software tools they offer. The Jitsi project needs volunteers to use and test Jitsi so it can get better swiftly!

Currently Agaric is using, and paying for, the proprietary Zoom audio/video conference call service and software. We would love a recommendation to another stable choice that is free software.

Phone Calls and Text Messages

Signal: Agaric uses signal to encrypt SMS Text messages and Phone calls. Encrypted Phone and Instant messaging found to be secure and recommended by Edward Snowden as the only truly encrypted messaging app that is not able to be decrypted by anyone. Note that security is an arms race and this could become false at anytime.

Collaborative Note Taking

Etherpad: When hosting an online meeting we usually open a shared note pad so that everyone may contribute to getting the important bits logged. Etherpad text is synchronized as you type, so that everyone viewing the page sees the same text. This allows you to collaborate on documents with large or small teams seamlessly! We use the hosted version, but you are welcome to host it yourself. We have tried a few online pads and settled on Etherpad as the most reliable.

Collaborative Ongoing Discussion

With some collaborators, particularly people involved with the Drutopia initiative, we use Mattermost rather than IRC. Mattermost can be more useful for ongoing discussions; it is similar to Slack and offers a threaded conversation. The community version is free software.

Notes and ToDo Lists

TomBoy A tiny app that lets you take note while it conveniently makes hyperlinks out of titles and allows synchronization over SSH and more.

Password Management

KeePass A password management system that takes most of the worry, distraction and thinking out of storing and retrieving your login information for multiple projects and sites.

Text Document Editing, Spreadsheets and Presentations

Libre Office: A suite of office tools similar to Microsoft Office, Documents, Spreadsheets, Slides. We use LibreOffice tools that come as core software in the distributions of GNU/Linux we are using. You may have heard of OpenOffice, it is now called LibreOffice. It consists of the basic publishing and calculating software for doing office tasks. These are the ones we use most often:
1. LibreOffice Calc - Similar features and functions of a calculating software to make spreadsheets, such as MicroSoft Excel
2. LibreOffice Writer - Similar features and functions of a word processor such as MicroSoft Word
3. LibreOffice Impress - We use this tool to build slide decks and presentations using text/graphics and videos, it is similar to Microsoft PowerPoint in features.

Project Management and Issue Tracking

*GitLab: This tool is a web-based and self-hosted Git-repository manager with wiki and issue-tracking features. We also use Gitlab for cooperative development on our projects.
*Although GitLab isn't fully free software, it does offer a self-hosted version that is. The Enterprise hosted version has extra features and is proprietary.

Redmine: A free program that you can run locally or on your own server for use as a project management and issue tracking tool. Before finding GitLab we used a self hosted instance of Redmine which is free software.

Resources and Free Software Directories


You can contribute to groups working towards solutions, there are many roles and you do not have to be a developer. As an example, *IndieWeb and Jitsi are projects that we make time to support with development, testing, outreach and feedback.

*With IndieWeb, you can take control of your articles and status messages can go to all services, not just one, allowing you to engage with everyone. Even replies and likes on other services can come back to your site so they’re all in one place.

Tools we love and sometimes use

Decision Making and Voting

Loomio: A hosted service available at http://loomio.org
Loomio offers distributed decision making system where you can make groups that can have discussions and make decisions without an in-person meeting. Decide yes or no, or that you need more information.
Note that Loomio also has built a great cooperative resource on at their other URL - http://loomio.coop

Customer Relationship Management

civiCRM: Agaric is working with the developers at MyDropWizard to take a look at civiCRM with Drupal 8.
civiCRM is a free software to manage client relationships and memberships. We have not deployed it yet.

Framasoft: A large collection of free software tools where we use the calendar and polling software most often. We are experimenting with several other FramaSoft tools and may adopt them in the future.

If this has been a helpful read, please pass it on and let us know in the comments how it helped you. A follow-up post will list the tools we use for development purposes. Please be sure to mention any free software you have found and are using now.

Aug 10 2018
Aug 10

Community Oriented

Instead of focusing solely on authors or best-sellers, Graywolf wanted the website to reflect their core mission–promoting underrepresented communities, daring new artists, and alternate points of view. One the projects primary goals was a website that's more about the mission and the community.

To achieve these goals, the redesign focused on several areas.

  • The homepage now leads with a strong mission statement, "Publishing Voices for the Twenty-First Century," and makes the nonprofit as the primary focus.
  • Images of the people who make up the community, from author readings to social events, were added and prominently featured.
  • Support was greater emphasized. Nonprofits need funding and support by the community. In addition to the donate button, "Support Graywolf" is now a call to action on every page, simplified down to 3 easy-to-read buttons, as well as a new, top-level menu item.

Screenshot of the primary Books page on Graywolf website, showing a grid of book covers with titles

Improved User Experience With Book Titles

While mission and community are critical, the books are still the main content of the site. Rather than follow the existing structure, separating fiction, nonfiction, poetry and best-sellers across many different pages, we constructed a single landing page for all books.

The new Books page uses a series of filters (using Search API) for users to easily search and pare down results to whatever criteria they choose. The goal was to simply the navigational choices for end-users, and present a single portal for exploring the catalog of books.

For the individual book pages (nodes), a clean, well-organized page was essential. Content was prioritized, with generous use of white space and a consistent layout for every book. Users can easily scan through various sections, and discover as much information about the title as they desire.

If the book description gets too long, we've added code to automatically hide the additional text unless the user chooses to reveal it. This keeps the overall page compact, and consistent in length (on page load).

Data Integration

Graywolf's entire book catalog is managed in an industry-leading system called Title Management from Firebrand. The system also manages all of their related data surrounding authors (bios, photos), upcoming author events, print-ready cover images, and a variety of metadata. Our team was charged with finding a way to effectively bring this data into Drupal 8 so that the website would always reflect a real-time version of their catalog, authors, and event schedules.

We settled on a complex recurring migration using the Drupal 8 Migrate API that pulls in this data and maps and it to a series of content types, vocabularies, and Paragraph bundles that are used to effectively display all related book, author, and event data in a variety of custom Views and displays in a variety of contexts.

Each night, the Drupal 8 site queries the Title Management data and pulls in any new items, or updates to existing data. We also built in the ability for Graywolf to add custom fields and data to their content model that do not exist in Title Management, as a way to provide even more advanced Drupal functionality while still allowing the Graywolf staff to manage a complex set of related data from within a single system.

Screenshot from Graywolf website, showing featured book titles and upcoming events

Overall UX and UI Improvements

The previous site was copy-heavy, with numerous colors on every page. For the redesign, we focused on a cleaner, more focused layout and user interface. Pages and content that didn't support the mission were edited or eliminated. The top-level navigation was reduced to four main links, and the books were reduced to a single landing page.

Pages were designed mobile-first, with greater spacing, legible font sizes and clearly-defined sections on the page. Secondary content was sometimes hidden behind 'accordion' blocks that the user could reveal as desired. We chose web fonts that complemented the existing brand, and worked best on the screen.

The number of colors from the previous site was reduced to the 3 core branding colors (red, black, gray). As a show of Graywolf's personality and boldness, a new "electric blue" color was introduced as well to bring energy and surprise to the page.

Finally, large testimonial blocks were added to the design, utilizing the dynamic book cover photos Graywolf already featured on its Instagram page.

Screenshot from Graywolf website, showing individual book node with title, cover image, about the author, book reviews, and more

Outcomes

Post-launch, we continue to work with the Graywolf team to refine and improve the site. Goals and metrics are being tracked in Google Analytics. Donations have increased. User feedback has been positive. Site editors have much better tools for managing content, and important book data is being regularly imported from Title Management.

The site is now responsive across multiple devices, and accessibility has been greatly improved to WCAG 2.0 standards.

Aug 09 2018
Aug 09

The Problem

I imagine many of us have been there: there’s some CSS class in your markup, and you need to do something with it. Maybe you want to remove it, change it, or perhaps alter its style declarations. “Easy peasy,” you think, “I’m a developer. I got this.” And so you should.

Next, if you’re anything like me, your first instinct is to fire up your search tool of choice and search your codebase for that string. You’d expect that would lead you to where that class is getting added to your markup, along with anywhere CSS rules are applied to it… right?

Except it doesn’t. Phooey. That class string doesn’t appear anywhere except in your browser's dev tools. At this point, you either toss your developer pride overboard and hack a fix in some other way, or you search for assorted variations of your string in ever shorter segments until you find something resembling this:

$classes_array[] = 'some-' . $class;

Aha! It was helpfully obfuscated for you. And of course, you could hardly expect to simply search for that class name and find its CSS rules. That would be too easy! So naturally, they were written in SASS like this:

.some-#{$class} {
   // Some declarations…
}

Now that’s just what it might look like in PHP and SASS, but I’m sure you can imagine what it might look like in your templating language, javascript, or whatever CSS-pre/postprocessor you might abuse.

The point is, you’ve gotta slow down and tread a little more carefully here; this isn’t a simple find-and-replace job anymore. There are a few reasons why such code might have been written:

  • The latter half of that class might originate from a fixed list of options exposed to your content editors.
  • Perhaps there’s some other logic in play, that has intentionally been kept out of the CSS: your element gets a class based on its region or container, for example.
  • Your colleagues are actively trying to make your life difficult.

If you’ve never been in this situation - good for you! Future-you called and asked that you avoid munging together parts of a CSS class like this if you possibly can. Do it for future-you. Don’t let them inadvertently introduce bugs when they fail to spot your class-munging!

The solution

“But what if,” I hear you cry, “I need to generate a class dynamically. How can I keep future-me on side?”

Well, dear reader – I hear you. Sometimes you really don’t want to explicitly list every possible variation of a class. Fair enough. So I have a proposal, one that I’d like a nice name for but, y’know, naming things is hard. Maybe the “Searchability class” pattern. Or “CSS search placeholder classes”. Or “CSS class search flags”. Suggestions on a postcard.

Anyways, returning to our earlier PHP example, it looks like this:

$classes_array[] = 'some-%placeholder'
$classes_array[] = 'some-' . $class;

Producing markup like this:

<div class="some-%placeholder some-arbitrary-suffix"></div>

That is: wherever you add a dynamic class into your page source, additionally put a recognisably formatted, static version of that class alongside it. That would also include anywhere you generated classes in JavaScript or any CSS-pre/post-processing madness.

Obviously, you don’t need these placeholder classes in your actual CSS (if you wanted to edit the static CSS, the regular class will already show up in searches) but if you are doing this in some dynamically generated CSS, then you’ll want to drop the static version of the class in as a comment. So our Sass example would become:

// .some-%placeholder
.some-#{$class} {
  // Some declarations…
}

Once this becomes an established practice within your team, instead of fumbling around trying to find where a given class may have come from, you’ll be able to spot those placeholder strings and search for those, and relatively quickly find all the relevant bits of code.

So I think this is something we’re going to try to adopt/militantly enforce upon ourselves at ComputerMinds. As a Drupal shop, something like %placeholder makes sense, as that syntax is used elsewhere in core to denote dynamically replaced parts of a string. It also has the advantage of being slightly tricky to actually use in a CSS selector (if you don’t already know, I’m not going to tell you). You really don’t want any styling attached to these.

So there you have it – the “Searchable CSS class placeholder flags for generated class names” pattern. We’ll keep working on the name.

Aug 09 2018
Aug 09

SEO (Search Engine Optimization) is a hot topic when it comes to the discussion of online marketing. In today’s Internet climate, most people usually find websites by typing in a few keywords into their search engine of choice, like Google. Folks trust Google to present only the most relevant sites to their search queries, so it’s only natural the first couple of sites that get thrown up are the ones that get the most clicks and visitors.

As a consequence, those top page rankings are viewed as a prime real estate by those who want to boost traffic to their websites. After all, hardly anyone would bother checking the sixteenth results page when searching for a word or phrase. This is where SEO comes in.

 

What Is SEO? 

What is SEO | Vardot

SEO is the practice of optimizing a website to rank high among search engines. It’s a set of rules for organizing, populating, and presenting your website in such a way that improves its search rankings and puts businesses in a better position to earn.

Perhaps intentionally, having a well-optimized website not only makes search engines happy, it also makes visitors happy. Well-optimized websites are fast and easy to navigate, leaving your visitors with a positive impression and making them want to stick around your site a little more.

If you want to drive all that traffic to your website, it’s important to have the basics of SEO down pat, and have a grasp on what good and bad SEO practices are. It’s also important to have a good engine underneath the hood of your website, and Drupal just might be the CMS for you if that’s the case.

At its core, Drupal was built with SEO in mind. It has the power, flexibility, and tools needed to optimize every facet of your website for search engines, and in its huge kit of modules, there are quite a few that are dedicated to giving you an easier time when it comes to improving the optimization of your website. You really can’t go wrong with Drupal if you have your web page's search ranking in mind, and here are just a couple of things you can do with Drupal to improve your SEO and shoot to the top of Google search results.

 

Implementing Metatags

Meta tags | Vardot

Meta tags are bits of text that are integral when it comes to improving your website’s search ranking, because, in a way, it tells search engines what the content is on each page on your website. This could be the titles of your pages to the little descriptions you see underneath the website links on a Google results page. You and your search engine need these bits of information to properly present and index your site on the search results page.

Usually, you can leave it up to your search engine to generate your page’s metadata for you, but by using the Drupal Metatag module, you can customize the metadata yourself. Set your own information such as page titles and descriptions to more properly and correctly present your site to your search engine and the online world.

 

Cleaning up Your URLs

SEO URLs | Vardot

 

Having bad, messy-looking links is a no-no when it comes to SEO. You want links that are easy to read and not just a jumble of letters and numbers so that they look more attractive to prospective visitors and to your search engine, who may be looking at your URL for keywords when it determines your site’s ranking.

Many web developers never realize the implications of messy URLs and leave their link syntax as-is, but going through each and every page on your website and manually setting the URLs isn’t an attractive option either. Luckily, Drupal generates clean URLs by default, improving the readability of your links and making things a bit easier on you.

If you want your links to be better and even more easy on the eyes, popular Drupal module Pathauto is a configurable system that automatically creates clean and extremely readable links that are perfect for your site’s optimization.

Another thing to keep in mind is making sure that your links actually go somewhere. Nothing sours the user experience more than clicking a link and being presented with a 404 page, and this in turn negatively affects your search rankings.

You can avoid this from happening by using the Redirect module. If you happened to have changed the page’s URL after Google indexed it, or moved the content to a different URL, this module allows you to make 301 redirects from that old link to the new one, quickly and painlessly, without having to go through the headache of cleaning up after yourself and fixing broken links.

 

Improving Page Speed

Improve page speed | Vardot

Google has been using the speed your page loads as an influencing factor in search rankings for years at this point. As they point out, sites that load faster have users that stay on for much longer, so it’s not only Google that you’re pleased by speeding up your website.

You might have to spend a little to have your website up to speed, but Drupal comes with several measures to help pages load faster, such as using BigPipe.

However, it’s not only desktop users you have to keep in mind, but mobile users, too. Given the leaps and bounds that technology has undergone in the last couple of years, you now find more and more people browsing the web on their smartphones and tablets. It’s important to make sure that your site experience is just as friendly and accessible on mobile devices as it is on desktop computers. As anyone who has used a desktop site on a mobile device knows, it’s not a pleasant experience.

Drupal’s default theme is responsive by design, which means it will display well on mobile screens of any size without having to do complicated rewrites of code or having to juggle multiple URLs to make sure your site displays correctly. With Google now also looking at the page speed of mobile sites, it’s now more important than ever to focus on delivering a good, well-optimized mobile experience to improve your SEO.

 

Read more: SEO Checklist Before Launching Your Drupal Website

 

Talking to Your Search Engine

Search engine optimization tips | Vardot

Optimizing your website can be a little tough when you don’t even know basic things such as where your site traffic is coming from. Installing modules like Google Analytics makes you privy to such information, and for someone with their finger on the pulse of the site’s SEO, it’s perhaps one of the most important tools they can have.

With Google Analytics, you get to know things about your site visitors: Where in the world they come from, which links they followed to get to your site, which pages they visit and how much time they spend on those pages, what keywords they searched to find your page and more. If you’re concerned about SEO, then getting information about your website directly from Google, the most popular search engine in the world is valuable information to have, and can help you make decisions on what to improve on next.

And while you’re pulling information from Google about your website, you can also provide information about your website to Google in the form of an XML sitemap. These are specially formatted, condensed summaries of the pages of content on your website that you can submit to Google to help them find your site and let their bots crawl through your pages. Google can crawl through your site without an XML sitemap, but you take on the risk of them possibly missing pages.

With Drupal, generating an XML sitemap is as easy as installing the XML sitemap module which creates one for you, and modules like Cron can automatically make sure your sitemap is kept up-to-date with the latest information from your website.

 

Conclusion

These are only just a couple of the things you can do with Drupal to improve your SEO. Like all things worth doing, you can’t just press a button and magically have a well-made website ready to dominate the first page of the Google search rankings. It takes a good grasp of the basics, as well as a little effort, to have a perfectly optimized web page.

However, the road to that coveted #1 spot on the search results pages become a lot less bumpy thanks to the ease that Drupal gives you when it comes to optimizing your site.

Want to boost your site’s traffic and rank #1 on Google with Drupal? Message us through our Contact Us page, or via email at [email protected].

Aug 09 2018
Aug 09

“Great Scott!”, exclaims the scientist in the renowned science fiction trilogy ‘Back to the Future’ which hit the cinema screens in 1985.  This exclamation by the scientist, who travels 30 years into the future in his flying car, is suggestive of remarkable inventions by the homo sapiens which is a colossal conundrum to solve in the present world set in this motion picture.

An illustration showing the rear view of a red car with fire on the road and a text ‘The future is now’ at the bottom

 

Drupal has been revolutionising the web application development with its flexibility in integrating with futuristic technologies

Since the first ever website, invented by British Scientist Tim Berners-Lee, went live in 1990, the tech enthusiasts have been looking at the enormous technological advancements in the years that followed. In a similar fashion, Drupal has been revolutionising the web application development with its flexibility in integrating with futuristic technologies.

What is Drupal doing with the futuristic technologies to give you the “Great Scott!” moment?

Futuristic Technologies: Strategic Trends with Broad Industry Impact

As stated by Gartner, an intertwining of people, devices, content, and services is known as an intelligent digital mesh. Digital firms are supported by enabling digital models, business platforms, and a rich, intelligent collection of services.

Intelligent: With AI seeping into virtually every other technology, well-defined focus can allow more dynamic autonomous systems.
Digital: Amalgamating the virtual and real worlds in order to create an immersive environment.
Mesh: The connections between a growing set of people, business, services, devices, and content for delivering digital outcomes.

An illustration showing emerging top 10 strategic technology trends for 2018 with different icons for each technologyTop 10 Strategic Technology Trends for 2018  by Gartner
Intelligent digital mesh is the intertwining of people, devices, content and services

Immersive experiences, digital twins, Artificial Intelligence, conversational platforms, Blockchain, continuous adaptive security among others, as depicted in the illustration above, form a foundation for the next generation of digital business models and ecosystems.

Beyond Websites: Integration of Future Technologies and Drupal

Drupal is among the front-runners when it comes to content-heavy websites. With new discoveries happening outside of Drupal, it is only better to leverage the benefit of Drupal’s flexibility to incorporate next-generation technologies.

Artificial Intelligence

An area of computer science which stresses on the creation of intelligent machines that can work and act like humans, Artificial Intelligence has been the talk of the town ever since it burst onto the scene. How can it be leveraged for your Drupal websites?

Chatbots

There have been several phases in the way humans interacted with the computers. First was the Terminal Interface which involved the use of command line or DOS prompt. The second phase was the Graphical Interface which used visual representations of programs, files, and actions. The third wave is the Conversational Interface which allows users to interact with the computers using a natural language.

Chatbots, powered by artificial intelligence technologies, are wonderful for your website as they offer conversational UI and can hugely benefit your enterprise. Drupal offers a useful set of modules that can help in the integration of chatbots in the website thereby providing a conversational interface to the users.

Facebook Messenger Bot module, created by The White House, gives you the tool for developing chatbot on a Facebook Messenger Platform.

[embedded content]

Chatbot API, another Drupal module, can be used to incorporate a bot in the site. It is an additional layer that falls between your Drupal installation, your Natural Language Processing (NLP) and your various chatbots and personal assistants. It can work with systems like Dialogflow, Alexa, Cisco Spark Microsoft and Twilio.

Digital voice assistants

While chatbots are primarily a text-based medium, digital voice assistants can be more human-like with the ability to talk like a human. For instance, Google Duplex, the latest entrant in the scene of digital voice assistants, can provide lifelike conversation thereby having a human-like chat and booking hotels on your behalf.

A big screen showing two images - one of google duplex logo and another of an icon representing a human phonecaller

Alexa, an integration module for Amazon Echo services, allows Drupal to respond to Alexa Skills Kit requests. The demonstration given below shows that by indulging in a casual interaction with Alexa, the shopper is able to preheat the oven, add the ingredients and cook the food without even looking at the phone or laptop.

[embedded content]

When the shopper provides a verbal query, this input is converted into a text-based request which is then sent to the Freshland Market Drupal 8 website (a fictional grocery store). From there, a coupling of custom code and Alexa module respond to the Amazon Echo with the requested information.

Cognitive Search

Forrester, research, and advisory firm, defines cognitive search and knowledge discovery as “the new generation of enterprise search solutions that employ Artificial Intelligence (AI) technologies such as Natural Language Processing (NLP) and Machine Learning to ingest, understand, organize, and query digital content from multiple data sources”.

Green Logo of microsoft cognitive services with an icon representing a human brain

Azure Cognitive Services API module allows Drupal to leverage the benefits of Microsoft Azure Cognitive Services. It helps in exposing machine learning APIs and allows developers to incorporate intelligent features like detecting emotion and video, understanding speech and language, and recognising face, speech, and vision.

Augmented Reality

Gartner defines Augmented Reality as the real-time use of information in the form of text, graphics, audio and other virtual enhancements integrated with real-world objects. It is this “real world” element that differentiates AR from virtual reality. AR integrates and adds value to the user’s interaction with the real world, versus a simulation.

A Drupal agency developed a chatbot prototype which helped customers to choose recipes based on the health constraints and their preferences. Chatbot provided an interactive experience to the users which helped in avoiding intensive research for the grocery shopping. By integrating AR in Drupal, they tried to take it one notch higher.

[embedded content]

The demo in the video displays a shopper interacting with the AR application. Freshland Market’s mobile application (fictional grocery store), which is built on Drupal 8, guides the shopper to make better decisions while shopping through AR overlays.

It superimposed relevant data like product ratings, price and recommendations over the product items detected by the smartphone camera. By showing the products that are best for her diet plan, the mobile application personalised the shopper’s experience.

Drupal’s web services support and JSON API module assisted in providing content to the mobile application. The Drupal 8 site of Freshland Market stored all the product-related information. So, if the Drupal content for any of the product items is edited to display the item being on sale, it automatically reflected in the content that is superimposed through the mobile application. Furthermore, the location of the product was stored on the site which guided the shopper to the product’s location in the store.

Another use case is the Lift HoloDeck prototype which was developed using commercially available technologies - Drupal (content store), Acquia Lift (web personalisation service), Vuforia (AR library) and Unity (3D game engine).

[embedded content]

Lift HoloDeck team developed a mobile application that superimposes product data and smart notifications over physical objects that are detected on the smartphone’s screen.

Consider a situation where a user informs about his purchases to a coffee shop through his mobile application. Entering a shop, he would show his phone screen displaying “deal of the day”. The application superimposes diet plan, directions on how to order, and product data on top of the beverage. By glancing at the nutritional information, he would order his preferred choice and would get a notification stating that his order is ready to picked up.

Virtual Reality

Virtual reality is basically computer-generated environments or realities that can be used to simulate a physical world in a specific environment to make it feel real.

Virtual reality can be used to build cross-channel experiences. The demonstration shown in the video below features a student who is eager to explore more about Massachusetts State University (a fictional university). The video depicts that he is able to take a virtual tour directly from the university’s website sitting on his sofa.

[embedded content]

Placing his phone in a VR headset, he can go around the university campus, explore buildings, and look at the program resources, photos and videos within the context of the virtual tour.

The Massachusetts State University’s Drupal site stores all of the content and media that is featured in the virtual tour. Drupal backend helps website administrators to upload media and position hotspots directly. Using JSON API, the React frontend pulls in information from Drupal.

Internet of Things

In the broadest sense, the term Internet of Things (IoT) subsumes everything that is connected to the internet but it is increasingly being used to define objects that can talk to each other. The IoT can be anything ranging from simple sensors to smartphones and wearables connected together. Combining these connected devices with automated systems can help in gathering information, review it and create an action plan to assist someone with a particular task or learn from a process.

DrupalCon New Orleans 2016 had a session which delved around bringing Drupal and internet of things together. It exhibited a demonstration that used a barometric pressure sensing, GPS-enabled wearable armband connected to the internet which could, then, display an icon to provide the weather forecast of the current location.

logo of drupalcon new orleans 2016 showing buildings in the background

The armband, which was tethered to iPhone, sent latitudinal and longitudinal data to a ThingSpeak channel (an API for the IoT) using mobile data. It, in turn, tracked the location of a ship by sending this data over HTTP to the Drupal 8 website. When the site received this authenticated POST data, new location nodes were created. It updated the map and table that is built with Views and changed a block on the sidebar to display the matching icon of weather in the current location of the ship.

Blockchain

Don & Alex Tapscott, authors of Blockchain Revolution (2016) define the blockchain as “an incorruptible digital ledger of economic transactions that can be programmed to record not just financial transactions but virtually everything of value.”

Chainfrog has been working on blockchain technology since its early stages and devised a use case where the user data including communication history, address and the profile data will be available to everyone in a large organisation.

“Blockchain is an incorruptible digital ledger of economic transactions that can be programmed to record not just financial transactions but virtually everything of value.”

To synchronise and securely segregate Drupal user data, big companies map user registration forms with a centralised company API. These big companies usually have more than one Drupal installations for different departments within the enterprise with a central codebase.

Thus, instead of having an expensive API layer, Chainfrog proposed using Drupal 8 custom module via a distributed ledger for the synchronisation of user data. So, instead of making an HTTP call everytime a new user is added, they planned to adopt a peer-to-peer immutable ledger thereby removing the middleman, in this case, API.

Blockbinder, a product of Chainfrog that helps in connecting existing databases instantly, would keep a tab on user records in a data table whenever a new user is added to the Drupal system. Within 30 seconds of any new addition in one of the Drupal installations, all the installations would synchronise the user data.

At DrupalCon Nashville 2018, we propounded possible use cases for the coming together of Drupal and Interplanetary File System (IPFS). IPFS, which has its working principle based on blockchain technology, is a peer-to-peer hypermedia protocol. Centralisation is at the core of Drupal’s workflow in comparison to IPFS’ decentralised nature. We looked for ways to make them work together.

Drupal, which allows content editors to seamlessly produce content, can be entwined with IPFS for an amazing digital experience. From helping archivists to store superabundance of data to helping Service Providers as a global Content Delivery Network (CDN), there are tons of benefits. We presented a use case to make this a reality which can be explored in this video.

[embedded content]

Conclusion

These are some of the frontiers that Drupal has crossed. There are lots of emerging technologies whose potential with Drupal can be explored like..?

Future is bright with lots of new inventions happening in the technological fields to make the world a better space. Digital firms can make significant strides in their online presence by integrating future technologies with their website. Drupal gives a great platform for the businesses to look beyond websites and incorporate emerging technologies to build futuristic websites

Want to know how we develop Drupal sites for our clients and also maintain and support them? Ping us at [email protected] to set the ball rolling and make your website exciting with the incorporation of emerging technologies.

Aug 09 2018
Aug 09

What is ReactJS?

Created to enhance speed, simplicity, and scalability, ReactJS has been doing wonders ever since its initial release in 2013. It was basically created by Jordan Walke, a software engineer at Facebook. And its first deployment on Facebook’s newsfeed turned out to be so successful that it was later on adopted by Instagram too. Amongst all the open-source platforms used today for front-end web-application development, ReactJS is the library which is reaching heights these days. And there are multiple reasons for such a booming popularity in such a short period of time. Each adding to the enhancement of current front-end UI scenario. No wonder it looks like, ReactJS is here to stay!

What is Drupal?

Drupal is the big name from the open-source community for web content management. Prominent names from journalism leaders like ‘The Economist’ to ‘The Royal Family’ of Britain. The security and scalability of Drupal are so high that it has made it the most trusted platform for web development.

Even after being a not-too-easy-to-use platform that requires technical expertise for building and maintaining it; Drupal has been chosen by the top-notch players from various industries like Harvard University, Tesla Motors, ABS-CBN News, Warner Bros. Records, et al. In addition, the Decoupled Drupal is the concept where Drupal can be used for building a strong back-end and opening up the doors for upscaling the front-end scenario even more by letting it being build with some other framework. And this is one of the best things ever happened to Drupal.
 

The Marriage of ReactJS & Drupal:

Now, ReactJS is gaining immense popularity and the marriage of ReactJS and Drupal has become the talk of the town. In fact Dries Buytaert, the founder of Drupal, has also shared he's planning on Drupal adopting React. Though the news has received mixed opinions from the experts of the open-source community, it’s definitely something to be given an ear to.

ReactJS and Drupal are supposedly called the marriage made in heaven. ReactJS is one of the most evolved front-end frameworks from the house of JavaScript. But like every other JavaScript framework, this one too needs and a service-based back-end for storing the data and working on the business logic. Drupal being the strongest platform with built-in RESTful services; it serves as an apt companion for this amazing front-end framework that ReactJS is.

The uprising need for using a modern framework with a robust back-end platform is also a reason behind the buzz created around the combination of ReactJS and Drupal. In fact, Dries has quoted in his blog that JavaScript wasn’t his first choice. Rather he considered Angular and Ember over JavaScript. But citing the ever-evolving market of JavaScript, he realized that the combination of Drupal and ReactJS was what the modern web needed the most.
 

The community behind ReactJS is also one of the major reasons for taking it into high consideration over other good frameworks. Also, whether it is about ornamenting the current page and few of its elements or it’s about creating a full-fledged single page app (SPA), this very combination is the sure-shot success. Lullabot shares some insightful information about the same, click here to know more.

Some hardcore Drupal Monolithic-ians have also publically discarded the official union of ReactJS and Drupal. But since the world is ever changing and the possibilities, endless; the acceptance of the same can be foreseen. Of course, it is a matter of conflict and controversy. But then, only time can tell how things turn and what reigns the open-source community!

I hope this blog helps you to expand your ReactJS and Drupal knowledge …Thanks! If you need more assistance regarding Drupal Development Services, feel free to contact us now.

Aug 09 2018
Aug 09

Camps are Drupal’s growth engine and they take place all over the world. They attract local developers, connect them with resources to learn how to use Drupal, and most importantly, they provide on-ramps into the community. We are incredibly thankful and amazed at the level of commitment and contribution that organizers invest in their events. This is a very important way to contribute back to the project.

The Drupal Association supports camps as we can. We provide grants to new events through Community Cultivation Grants (check out this GoaCamp story). We also provide fiscal sponsorship to camps. This means we let organizers deposit their camp income into the Drupal Association bank account, taking advantage of our non-profit  status. Then, they work with our operations team to pay bills out of the account.

It’s been an honor to help several camps this way. However, this program has two major challenges. 1) We are not able to support camps globally because we can’t work in every currency, so most of the camps we support are in the U.S. 2) As we became a smaller organization, we have fewer staff to support this program. We haven’t been as fast at processing funds as we would like or our camps need.

Knowing how important camps are to Drupal, how organizers need their work made easier, and that we need to provide global support, we decided that the best way to provide better fiscal sponsorship is by referring community groups to organizations whose business is set up to provide this service. Over the years, we have watched several organizations get very good at providing fiscal sponsorship to open source projects.

We therefore have been looking at best practice models across many open source communities and we are happy to partner with Open Collective, a company specializing in fiscal sponsorships and other open source funding opportunities. They have the ability to scale and offer the level of service to meet a camp’s needs. In the US, Open Collective Foundation has recently obtained their 501(c)(3) status, and will be able to sign for and represent your camp as we have done in the past. Their platform, itself an open source project just like Drupal, gives camp organizers full transparency, and on-demand reporting so they can manage a camp effectively.  Additional details about Open Collective can be found here.

Because of this opportunity, we have made the choice to sunset our internal program as of August 31, 2018.

While we have chosen to partner with Open Collective to assist in this transition, we strongly believe in choice and there are other fiscal sponsorship opportunities that you can choose to roll your funds to, such as Software In The Public Interest and the Software Freedom Conservancy.

We know that each camp is in a different stage of planning, and we are dedicated to making sure that the transition is smooth and will not affect the activities and success of camps. We will be reaching out to camp contacts to schedule time to talk through the transition. From there, we will roll the funds to a legal entity that you have chosen.

We are thankful for all the camps we were able to help get launched, and continue to watch their growth year after year. We hope this transition will help our camps grow and scale with no limitations.

Aug 09 2018
Aug 09

Drupal 8.6.x is now in a beta phase, which means we will now undertake disruptive cleanup tasks like adjusting coding standards. The main standards change in this release cycle will be the adoption of Prettier code formatter.

Work is underway to patch core for this change, which will touch many files, so be aware that you will need to reroll patches for conflicts and adjust them to use the new code style rules set by Prettier by running yarn prettier.

Aug 09 2018
Ana
Aug 09

Google’s AMP is an open source project that stands for Accelerated Mobile Pages. As the name implies, this project aims to serve mobile pages instantly without long load times. You can get a feel for AMP by searching for anything on your mobile on Google and clicking on links with a lightning sign beside them. Speed is an important factor for any website as it has a number of benefits including making a massive impact on a site’s SEO. In this post, let’s take a look at AMP for Drupal 8 and a brief overview of its implementation on the CMS.

 

There’s a module for that!

As always, there’s a module for integrating AMP on both Drupal 7 and Drupal 8. However, we will only be focusing on Drupal 8 in this post. Do keep in mind though that the steps for both versions aren’t that different. Simply download the module named AMP module and install it on your site.

 

AMP configuration

Navigate to admin/config/content/amp to access the AMP configuration page. Here, the type of contents for which AMP will be enabled can be configured as the fields that will be displayed using AMP. Note that AMP is best suited to web pages that are content heavy, so in the context of Drupal, that would translate over to nodes like blog posts and articles. 
To enable AMP for the content type you want, click ‘Enable AMP in Custom Display Settings’ link beside the content type you wish to enable AMP for. Now click ‘Custom Display Settings’, click the AMP checkbox and press save.
To select which fields should be shown and what field formatters should be used, click the ‘Configure AMP view mode’ link. Some recommended fields which you should format to AMP field formatters are:

  • Body
  • Images
  • iFrames
  • Videos

That rounds off the main settings and configuration of AMP for our Drupal site. Now, we need a way to display the AMP pages in a way suited to our needs, which brings us to the AMP themes.

 

AMP Theme

You may remember from the first step in this article that while downloading the amp module, we also downloaded an amp theme. This is a sub-theme for AMP named exAMPle theme. Having a dedicated subtheme for AMP pages is important as it changes markup necessary for AMP to run. This is all handled by the AMP base theme, which is again based on the Drupal core’s BASE theme to keep it as simple as possible.
Note that in most cases it is recommended to use a custom theme for your site’s AMP pages in order to match the look of a website. While the exAMPle theme allows for quick and easy testing of your AMP pages, it is a very basic and barebones theme. To get an idea of how to create a custom AMP theme, take a look at the exAMPle theme.

 

Conclusion

That’s all there is to AMP for Drupal. The modules make implementation of AMP on Drupal a pretty straight-forward process. Again, make sure you know what types of pages AMP is suited for and you’ll be golden.

Having difficulty with implementing a particular piece of functionality to your Drupal site? We can help you with that! Contact us and let’s talk!
 

Aug 08 2018
Aug 08

Our board of directors is responsible for the Drupal Association’s financial health and as part of their duty, they review and then vote to approve monthly financial statements. The board met virtually on July 25, 2018 and voted to approve the Q1 & Q2 2018 financial statements, which can be found here.

Each month we compare our results against the financial KPIs we have set with the advice of our virtual CFO, Summit CPA. These KPIs were set to help us focus on increasing our net income so we can build a stronger cash reserve to ensure the organization’s sustainability.  

Our 2018 Financial KPIs are:

  • Cash Reserve: have a cash balance of 15% of Total Revenue
  • Net Income Profit Margin: end 2018 with a net income profit of 4%
  • Increase our Non-Event Revenue to $1.6M
  • DrupalCon Profit Margin of 27%

As of our June financial statement, which was approved by the board, the organization is tracking well against these KPIs.

Table showing KPI analysis reflecting actual results through June 30, 2018 end of year conservative budget
KPI analysis through June 30 is looking positive for money in the bank, net income, non-event revenue, and event profit margin.

You can see that April was lower than the ideal target, due to missing revenue in a couple of areas. One with DrupalCon Nashville, where ticket sales came in lower than expected, and the second was some hosting contracts coming in later. These contracts will be reflected in future months.

We will monitor all KPIs through the year to ensure we are on track. However, one KPI is now complete: Nashville profit margin. DrupalCon Nashville was forecasted to come in at a net profit of $445K at the close of the conference in April, 2018, or 22%. While training tickets under-performed, resulting in a lower than expected ticket revenue, we still exceeded our net profit goal due to a decrease in expenses and an increase in sponsorship revenue. The final net profit was $481K or 25% which is 2% under the set KPI.  

DrupalCon Nashville Snapshot of costs and revenue
Details for the DrupalCon Nashville forecast and actual income

While we did exceed our net profit forecast, it should be noted that this event did not generate as much for the project as past DrupalCons. This is because Nashville’s cost per attendee was higher than usual due to the location. However, at the time of selecting the venue, it was the best option compared to the other available cities. The Drupal Association continues to seek ways to diversify revenue so we are not so reliant on one event to fund the project.

Bar graph comparing past four DrupalCon North America events' net income margins
The overall trend shows Nashville coming in lower than recent DrupalCon North America net income margins

Drupalcon is evolving and we are making changes.  While the programming, speakers, sessions make up the core of DrupalCon, our event staff is retooling and creating more value to serve everyone in the Drupal ecosystem.

We would not be able to do our mission-driven work without the support and contributions of our community. Contributions come in many forms, through the purchase of DrupalCon tickets and event sponsorships, through our Supporters and Members, Drupal.org sponsors, recruiters who post jobs on Drupal Jobs and many other fantastic ways our community supports the Drupal ecosystem. We are deeply grateful for everyone who contributes time, talent, and treasure to move Drupal forward.

Thank you!

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