Oct 29 2019
Oct 29

Does your site have an online store? Are you looking to have sales on during the Black Friday and Cyber Monday period? Then read on - here are some quick tips to help you make the most of the sales period by ensuring that everything goes as smoothly as possible to make sure both your marketing and site are up to scratch.

Marketing / Promotion

You should have a plan in place for marketing your deals, otherwise how are people going to find out about them? This could include; promotions on your own website, promotion via social media (e.g Facebook, Twitter, Instagram) and also via email.

Social media posts and emails should be planned out in advance and posted regularly enough in the run up so that people are fully aware about when your sale will be taking place and what offers they might be able to get (be careful not to post *too much* and annoy people though!).

Having promotional material on your site homepage is a great idea as it’s the first page a lot of customers will enter the site through. Effective promotional content present in the run-up to the sales period should help ensure that you are maximising the potential number of customers that will return to check out your sales. You should ensure that any promotional messages or content remain in place until after you have finished your sales.

Analytics - Sales goals

If your site was launched at least a year ago and you have Google Analytics in place (you’d be crazy not to, right?) then you should hopefully have some reliable data that you can look at from the same sales period last year, in order to better prepare and improve upon for this year.

  • What pages / products were the most popular last year?
  • Was there anything in particular about these pages / products e.g. better design / marketing that you think helped over others?
  • Are there any sales targets that you want to set or update and improve upon? 
  • How many people visited your site more than usual? 
  • Were your SEO keywords effective, if not can they be improved upon?
  • How many users are visiting from mobile devices, is your site as mobile friendly as it can be?

Once the sales period is over for this year and you are armed with all the analytics data from this year and the previous year(s)... then you can compare and see if you have hit or missed any sales targets that you may have set. You’ll hopefully also be able to see what worked well (or not so well) in your SEO and marketing to note areas of improvement for subsequent sales you may have in the future.

Discounts

Arguably one of the most important points of what you should consider are the discounts you will be offering on the site. If you don’t usually offer discounts or use discount codes on the site, then it would be wise to test any new discount logic or discount codes on a test environment before they go live. If there are any unexpected issues with the discounts not working correctly or not behaving in the way that you’d imagine, then you (or your developer!) have a chance to fix these things before you actually put them live. 

If you have a Drupal site with e-commerce and use discounts, then you will most likely be using the commerce_discount module to manage discounts on the site. This module generally works well at a basic level, although sometimes once you try and add in some more complex discounting logic, things can sometimes stop working properly. If you are having any commerce_discount related issues on your site and need them solved, or need some bespoke development done to handle your more complex discounting logic, then get in contact with us.

Orders

A final point that you may not have thought of is in regards to the (hopeful) extra increase in orders going through the site in the sales period. Is your stock management up to date and adequate to handle the extra increase in sales? Overselling any products and having to cancel orders is not good for the customer experience and is likely to lead to negative reviews, potentially damaging your reputation. If your site is using Drupal commerce then the commerce_stock contrib module is your best friend here. Amongst other things it allows you to have "add to cart" validation that can prevent users from adding products that are out of stock, and also disable the "add to cart" button when the stock level reaches zero.

Similarly you should think about how you’ll meet your usual shipping estimates that you have displayed on your website. If you anticipate that you won’t be able to keep to your usual timings then you should display a message in a prominent place on the site that the order processing and shipping may take longer than usual during the sales period.

The (Slightly) Technical Bit - Site load, speed, optimisation.

Well before the sales period even begins you should ensure that your site is running at an optimal speed. Google’s PageSpeed Insights can be used to benchmark your site and give you a detailed analysis of page load times and where you can improve by optimising your assets, code and more. The quicker your pages load, the more likely it is that people stick around on your site and don’t get frustrated trying to access what they want - and this is all the more important when your site might get a big influx of visitors during the sales period.

Following on from the Analytics section above; using any data you have for site visitor numbers from the previous year should give you a good indication of the number of visitors that you would hopefully expect to get this year. If the larger-than-usual amount of people visiting your site caused any server timeout or other connection issues, then you should ensure to better prepare the server and site for the influx this year.

I won’t go into too much detail here as benchmarking and optimising a site is a whole article in itself! but a few key points and quick wins to help your site are:

  • Ensuring you have an appropriate caching setup on your site. On a Drupal site as a bare minimum this would include enabling CSS & Javascript aggregation and ensuring Drupal page caching is enabled. The use of a reverse proxy such as Varnish is highly recommended as well.
  • Optimising images the site is serving up with a third party image optimising service such as Kraken. This will shrink file sizes without any noticeable decline in quality.
  • Using a CDN such as Amazon CloudFront to serve up your assets.
  • Minifying Javascript. On a Drupal site this is easy with the use of a module such as Minify JS.
  • Reducing the number of DOM elements to improve page load time.

The PageSpeed Insights tool mentioned above can act as a useful tool to test the optimisations you have done so that you know when you are actually making a (positive!) difference. Hopefully your developer has already done most of the above but if not, make sure they do in good time before the sales period begins.

And finally, if you haven't already, it's a good idea to let your web team know that you are planning a Black Friday sale. This will ensure they're not surprised when the server traffic spikes and they can make recommendations (if needed) to handle the increased traffic. The last thing you want is your site falling down and costing you sales!

Oct 29 2019
Oct 29

For DrupalCon Amsterdam, Srijan ran a competition with the prize being an Apple Watch 5. It was a fun idea. Try to get a screenshot of an animated GIF slot machine showing 3 matching logos and tweet it.

Try your luck at @DrupalConEur Catch 3 in a row and win an #AppleWatchSeries5. To participate, get 3 of the same logos in a series, grab a screenshot and share it with us in the comment section below. See you in Amsterdam! #SrijanJackpot #ContestAlert #DrupalCon

I entered the competition.

I managed to score 3 of the no logo logos. That's gotta be worth something, right? #srijanJackpot

The competition had a flaw. The winner was selected based on likes.

After a week I realised that I wasn’t going to win. Others were able to garner more likes than I could. Then my hacker mindset kicked in.

I thought I’d find how much 100 likes would cost. A quick search revealed likes costs pennies a piece. At this point I decided that instead of buying an easy win, I’d buy a ridiculous number of likes. 500 likes only cost 7USD. Having a blog post about gaming the system was a good enough prize for me.

Receipt: 500 likes for 7USD

I was unsure how things would go. I was supposed to get my 500 likes across 10 days. For the first 12 hours I got nothing. I thought I’d lost my money on a scam. Then the trickle of likes started. Every hour I’d get a 2-3 likes, mostly from Eastern Europe. Every so often I’d get a retweet or a bonus like on a follow up comment. All up I got over 600 fake likes. Great value for money.

Today Sirjan awarded me the watch. I waited until after they’ve finished taking photos before coming clean. Pics or it didn’t happen and all that. The insisted that I still won the competition without the bought likes.

The prize being handed over

Think very carefully before launching a competition that involves social media engagement. There’s a whole fake engagement economy.

Share this post

Oct 29 2019
Oct 29

DrupalCon CMI 2 Session slides

Fabian Bircher

29 Oct 2019

0 Comments

Fabian Bircher

29 Oct 2019

0 Comments

Fabian Bircher, 29 Oct 2019 - 0 Comments

The session was super packed, so not everybody could attend the session.

Yesterday I presented the updates for the Configuration Management Initiative 2 at DrupalCon Amsterdam.

The main takeaways are:

You can find more explanation in our previous blog post

There were 180 people in the small room and many who wanted to join the session simply couldn't fit any more.

Attached are the slides of the session and I will update this post once the recording is available.

There is still a lot of work to be done for CMI 2, join us on the contribution day at DrupalCon.

DrupalCon AMS CMI2.pdf (682.74 KB)Download
Oct 29 2019
Oct 29

Hello from Amsterdam! Yes, the Amazees are on the road again, and it is time for Drupalcon Amsterdam 2019!

As my first-ever DrupalCon, I was excited to find out what the event had in store for me.  As a typical project manager, I had downloaded the app; decided which talks to attend, and was ready to go.

Luckily for me, Amsterdam is only a short hop skip and a jump from my hometown, Nuremberg, which meant I didn’t have to endure the more gruelling transatlantic flights that my colleagues had. 

Amazee Labs Barbara

With my bags packed, I headed to the airport, drank the obligatory coffee and boarded the flight for a comfortable one-hour to Amsterdam. As a Brit travelling between European countries, I always find it strangely unnerving to never have to show my passport.  

Embarrassingly, I seem to have my passport open and in my hand ready to prove who I am at every step of the journey. Even as I flapped my open passport at the airport staff at the gate, they looked at me as if to say, ‘unnecessary madam!’ 

The prospect of meeting Amazees with whom I normally only chat via video calls was exciting. Luckily a few of us had the same arrival time at Schipol Airport, so we met up there and headed to the hotel to unload the luggage before heading to RAI Conference Centre.

Arrival at Drupalcon

Firstly, the essential historical background. This year DrupalCon is being held at the RAI Conference Centre which is a lot older than I expected. Built in 1961, it sees over 2 million visitors through its doors per year and holds approximately 50 international conferences.

We arrived around 3 pm and promptly collected our badges. Then the first choice of the day was upon me, would I like a white lanyard or an orange lanyard? White would mean I didn’t mind being in photos, whereas the orange means that I did. As someone who notoriously takes a terrible photo (this is no exaggeration, it is a running family joke!) I sensed it would be better for DrupalCon if I took an orange lanyard, but I was living dangerously and opted for white. 

Amazee Labs DCA


The next stop was checking out the booth and lounge areas for amazee.io and Amazee Labs. The booth for amazee.io is situated near the main entrance and looks great! As an open-source container-based hosting company, the ‘container’ theme was strong on the booth, even the pens are held in a little blue container.

amazee.io Booth

Amazee Labs has a lounge in the Exhibit Hall which looks very welcoming, relaxed and is handing out blue rubber ducks!? Yes, you read correctly, blue rubber ducks! I had so many questions, why ducks? Why blue? Happily, a kind developer was on hand to explain the ‘joke’.

In the development world, there is a Rubber Duck Debugging theory. The theory comes from the book The Pragmatic Programmer and refers to how the software engineer would carry around a rubber duck and debug code by having to explain the debugging to the duck - genius! I was learning so much already. 

Amazee Labs Ducks

On a personal note, it was great to see Amazee faces in person and as always, the line ‘you are so much taller in real life’ followed. As we only really see each other from the shoulders up on video calls, we are genuinely surprised at the height of our colleagues.

The Talks

As I only arrived at 3 pm, I, unfortunately, missed the earlier events of the day, but to act as an introduction, the daily schedule looks quite similar throughout the week. The day starts with a Keynote talk and broaches a wide range of topics across the Drupal community.

The talks are divided into different categories: Business-marketing, DevOps-infrastructure, Drupal-backend, Drupal, frontend, Drupal community, Industry, and BOF’s. BOF stands for “Birds of a Feather” and is more of an informal gathering where like-minded individuals can dive deeper into certain topics of interest.

In the afternoon I attended a session by one of our own: Felix Morgan’s ‘The Good, The Bad, and The Data: Marketing Strategies for Open Source Companies’.

Amazee Labs DCA Program

As my background is in digital marketing, I find the topic of content marketing incredibly interesting, especially how many companies struggle with where to start when creating content.

Felix’s presentation was a perfect introduction to content marketing for open-source companies and acted as a guide on how to bite the proverbial bullet and start creating content.

Content creation is often considered time-consuming and smaller companies find it difficult to allocate necessary resources to this area of marketing. One main point I took away from the talk was the rule of three. If you need to answer a question three times, then you probably need content on that area. Also, content comes in all shapes and forms, such as documentation or conference talks. The Q&A session that followed was informative and particularly highlighted how employees from every job role can be involved in content creation.

Winding down for the evening

Following the close of the conference for the day, the Amazees headed off for a very educational tour at a local brewery, Bierwinkel. The friendly guide explained the brewing and fermentation process and then we all settled down for quite a few beverages and, in particular, a pinkish beer which seemed to be the most popular.

To soak up the pink beer, we enjoyed great conversation and tasty burgers before heading back to the hotel. I can’t express enough, the energy and warmth that Amazees share when we all come together. It has the atmosphere of a school reunion rather than a business conference.

Day one of Drupalcon completed and all I have left to say is, that I’m very much looking forward to the rest of the week.

Oct 28 2019
Oct 28

Recently one of our clients asked us to come up with a better language detection and redirection solution for their multilingual Drupal 8 site. Most out of the box solutions do not provide great user experience and IP based detection do not always work as expected. Browser based redirection also not an ideal option since at some point a visitor might want to manually choose wich language they want to see.

Having this issue in hand I started looking into possible solutions, I looked at number of multilingual Drupal and non-Drupal sites and couldn't find anything that would work for our client. I thought what if we ask a visitor what to do by showing them a box with browser detected langauge. This is just as Chrome's transaltion prompt that asks you if you'd like to translate the site. The prompt that is very simple and not as annyoing as some auto redirect solutions.

So this is what I came up with. A simple to use Drupal 8 module with few configurations needed. I decided to call it Language Suggestion.

The module supports auto redirects based on visitor selection and custom prompt messages per langauge. Here is the full list of configurable options:

  • Container CSS element. This is where you would need to specify main page container. You may need this when you have some additional message box at the top of the page, e.g. Cookie usage etc.. By default this is set to "body" HTML tag.
  • Always redirect. This option adds auto redirect to the website based on previous suggested language selection.
  • Language switch CSS element. This option overrides auto language redirect. For instance when use after auto redirect still wants to switch to another language they will be able to do so. Make sure to specify langauge switch element class name or ID.
  • Language suggestion delay. This option allows the language suggestion box to appear with delay. The value is in seconds.
  • Dismiss Delay. This option indicates how long language suggestion box should be hidden and when to reappear.
  • The broser language mapping is the mapping where you specify when to show language suggestion.
Language Suggestion Drupal 8 module

This is how language suggestion box appears on the site:

Langauge Suggestion prompt box

Configuration page is located at (Administration > Configuration > Regional and language > Language Suggestion) /admin/config/regional/language-suggestion

To test the module please make sure you have only one language in your browser settings. The language should be different from your current website language. And make sure that langauge is enabled in your Drupal 8 site.

I tried to keep visitors interaction annoyance level with the langauge suggestion prompt to its minimum. I hope this solution could be useful for you and your clients or give you some ideas.

Download Language Suggestion from Github

Oct 28 2019
Oct 28

Drupal Commerce 2, like Drupal 8, was a big change from previous versions. The code base is much different and it’s quite a learning curve when moving from Drupal 7 to the more complex approaches in Drupal 8. However, this is good. The new versions are modern and all around better. I’ve had a number of revelations while working with Drupal Commerce 2 and Drupal 8 that made me smile. In this post, I’ll explore one revelation I had while working with Drupal Commerce 2’s checkout handling and how it’s forward-thinking development has paved the way (and encourages all new checkout panes to follow suit) for headless ecommerce using Drupal.

Drupal Commerce 2 checkout is not a form… say what!?

Generally, when you think of checkout, you think of it as a sequence of events and one big final submission. This is further driven home by the idea that you can, and should, be able to go back and edit your checkout choices before the final submission. In Drupal Commerce 2, going back and forth between checkout steps is supported, but there is no final submission handler that saves everything.

Wait, what? That’s right, there’s no need to save all the data on the checkout form once checkout is completed. You see, all checkout panes (a step in the checkout process) have a submission event that gets called when it's time to save the data. So if you’re going to save data in a checkout pane, you gotta do it after your customer has moved forward in the checkout process but before your customer is ready to commit to the checkout pane’s final value state (complete checkout). Submission is perceived to be at the end of checkout, not before.

On the surface that might make sense, in fact, this workflow being so obvious might even blind you to the implications. Since each pane is basically handling its own submission workflow, you can’t allow your form state to persist choices and not make a decision until the end. You’re probably, like me, thinking that saving data and reacting to data is the same thing. But this assumption is old, out of date, incompatible with best practices, and in checkout for Commerce 2, causes design problems.

Click to discover your ideal architecture with our analysis.

Explanation through an example: A checkout newsletter subscription

A common want is to include a little checkbox underneath a contact information email field where new or returning customers can opt-in to a newsletter. Sure, that’s no big deal, right?

Our customer expects that things in checkout aren’t real until they complete checkout (i.e. nothing is saved until they actually place the order). On the other hand, Drupal Commerce 2 expects all panes to save their data after a “continue to next-step” button gets clicked, submitting that pane.

Here’s how the checkbox would be made using our current form submission logic:

  1. Create a CheckoutPaneBase object that collects data through a checkbox
  2. On the pane form submission, subscribe the customer to your newsletter

Do you see the problem? If we react on pane submission (our only choice in our current way of thinking), we’ll subscribe the customer to our newsletter well before they are done with checkout. In fact, each time they see the first page of checkout and proceed to the second, they will be subscribed to our newsletter. Not only is this not what the customer would expect, but subscribing them multiple times is totally unnecessary and would likely cause problems. Subscribing the customer on pane form submission is the wrong approach.

This is where things get really trippy – and awesome and beautiful and wonderfully clever and great. You see, Drupal 8, which Commerce 2 is built around, has been designed to not require forms, form states and value persistence in order to trigger important actions. This is a whole new way of thinking and maybe the most important to our discussion. Previous to this, most Drupal 7 developers would have assumed that all forms require user-facing interfaces that would be submitted, but that is a pretty brutal assumption and has plagued a lot of Drupal installations over the years. If that was still the case, then form submissions are something that headless implementations of Drupal would never really trigger. There must be a better way.

Headless decoupling breeds better code using events

If checkout was a single form with a final submission handler that submitted payment, subscribed users to newsletters, saved addresses to profiles, and did all the things you would expect all at once, then all the code that manages these things would have to react to a single form submission.

However, if we use Drupal's built in event system instead, we suddenly have much greater degree of control. But before we get into that, let’s first take a quick look at what events are and where they come from.

Drupal 8 made a big shift towards being object oriented by adopting Symfony within its framework. Symphony provides a number of components useful in modern object oriented programming, one of which is events. Events in Drupal 8 give developers a new way to extend and modify how interactions with core and other modules work. If you’re already familiar with Drupal 7, events are basically meant to replace hooks. Drupal 8’s event system documentation helps us to understand the basic concepts and components making up the event system.

  • Event Subscribers - Sometimes called "Listeners", are callable methods or functions that react to an event being propagated throughout the Event Registry.
  • Event Registry - Where event subscribers are collected and sorted.
  • Event Dispatcher - The mechanism in which an event is triggered, or "dispatched" throughout the system.
  • Event Context - Many events require specific set of data that is important to the subscribers to an event. This can be as simple as a value passed to the Event Subscriber, or as complex as a specially created class that contains the relevant data.

Source: Drupal.org documentation, Subscribe to and dispatch events (link)

Getting back to our checkout scenario, if you use the events system and your checkout completion is simply a state transition from Draft to Completed, then other modules could subscribe to that transition event, take the saved data from the different pane submissions, and do whatever they want with it.

Do you see the beauty here? By forcing checkout panes to submit before the final submission, we (module builders, implementers, etc.) have a baked-in reason to store checkout decisions on the order so that order events can access them separately, giving us the ability to create orders with checkout decisions saved that can skip checkout completely and still have the events trigger the needed actions. This is quite powerful and opens up a whole new world of possibilities. Of course, since this is an implicit design choice, it’s up to the author of the module or code to see the reasons and embrace them.

Entity + event-based instead of form-based

So to complete our newsletter subscription pane example using our new knowledge of events instead of form submissions, here’s what we would do:

  1. Create a CheckoutPaneBase object that collects data through a checkbox and saves it to the order (either through a field value or the ->setData typed data interface.
  2. Save this value on pane submission but don’t act on the value (i.e. don’t subscribe the user)
  3. Create an event subscriber and use the transition event you want to use as a trigger. Completing checkout makes the most sense.
  4. Treat the order value as a "request subscription to newsletter." Then, when the event fires and the event subscriber runs, it can look for the saved value and set the user to subscribed or not after it returns. This allows us to handle someone going through an event twice for some reason, like for multiple orders, etc.

Your customer gets subscribed to your newsletter when they, and you, expect them to. No forms needed. ISN’T THAT AMAZING!

Thanks to the many authors of Drupal Commerce 2, including Bojan Živanović and Matt Glaman, that implemented this design choice years ago, many modules and implementations are simply technically better and likely ready for headless implementations now that headless is all-the-rage.

And best of all, from a developer standpoint, this also means the bulk of your most critical automated tests that interact with your code doesn’t have to access the checkout form. They simply have to have orders that get transitioned. This makes writing tests, which equates to better code, simpler.

Your Drupal Commerce experts

As a full service Drupal agency, Acro Media has significant expertise in digital commerce architecture, ecommerce consulting and design, customer experience, Drupal development and hosting architecture. We would love the opportunity to work with you.

View Our Drupal Commerce Services

Oct 28 2019
Oct 28

The Drupal 8 version of the Salesforce Suite provides a powerful combination of features that are ready to use and mechanisms for adding custom add-ons you may need.  What it does not yet have is lots of good public documentation to explain all those features.

A recent support issue in the Salesforce issue queue asked for example code for writing queries. While I’ll address some of that here, there is ongoing work to replace the query interface to be more like Drupal core’s.  Hopefully once that’s complete I’ll get a chance to revise this article, but be warned some of those details may be a little out of date depending on when you read this post.

To run a simple query for all closed Opportunities related to an Account that closed after a specific date you can do something like the following:

      $query = new SelectQuery('Opportunity');
      $query->fields = [
        'Id',
        'Name',
        'Description',
        'CloseDate',
        'Amount',
        'StageName',
      ];
      $query->addCondition('AccountId', $desiredAccountId, '=');
      $query->conditions[] = [
        "(StageName", '=', "'Closed Won'",
        'OR', 'StageName', '=', "'Closed Lost')",
      ];
      $query->conditions[] = ['CloseDate', '>=', $someSelectedDate];
      $sfResponse = \Drupal::service('salesforce.client')->query($query);

The class would need to include a use statement for to get Drupal\salesforce\SelectQuery; And ideally you would embed this in a service that would allow you to inject the Salesforce Client service more correctly, but hopefully you get the idea.

The main oddity in the code above is the handling of query conditions (which is part of what lead to the forthcoming interface changes). You can use the addCondition() method and provide a field name, value, and comparison as lie 10 does. Or you can add an array of terms directly to the conditions array that will be imploded together. Each element of the conditions array will be ANDed together, so OR conditions need to be inserted the way lines 11-14 handle it.

Running a query in the abstract is pretty straight forward, the main question really is what are you going to do with the data that comes from the query. The suite’s main mapping features provide most of what you need for just pulling down data to store in entities, and you should use the entity mapping features until you have a really good reason not to, so the need for direct querying is somewhat limited.

But there are use cases that make sense to run queries directly. Largely these are around pulling down data that needs to be updated in near-real time (so perhaps that list of opportunities would be ones related to my user that were closed in the last week instead of some random account).

I’ve written about using Drupal 8 to proxy remote APIs before. If you look at the sample code you’ll see the comment that says: // Do some useful stuff to build an array of data.  Now is your chance to do something useful:

<?php
 
namespace Drupal\example\Controller;
 
use Symfony\Component\HttpFoundation\Request;
use Drupal\Core\Controller\ControllerBase;
use Drupal\Core\Cache\CacheableJsonResponse;
use Drupal\Core\Cache\CacheableMetadata;
 
class ExampleController extends ControllerBase {
    public function getJson(Request $request) {
        // Securely load the AccountId you want, and set date range.
 
        $data = [];
        $query = new SelectQuery('Opportunity');
        $query->fields = [
            'Id',
            'Name',
            'Description',
            'CloseDate',
            'Amount',
            'StageName',
        ];
        $query->addCondition('AccountId', $desiredAccountId, '=');
        $query->conditions[] = [
            "(StageName", '=', "'Closed Won'",
            'OR', 'StageName', '=', "'Closed Lost')",
        ];
        $query->conditions[] = ['CloseDate', '>=', $someSelectedDate];
        $sfResponse = \Drupal::service('salesforce.client')->query($query);
 
    if (!empty($sfResponse)) {
        $data['opp_count'] = $sfResponse->size();
        $data['opps'] = [];
 
        if ($data['opp_count']) {
            foreach ($sfResponse->records() as $opp) {
                $data['opps'][] = $opp->fields();
            }
        }
    }
    else {
      $data['opp_count'] = 0;
    }
    // Add Cache settings for Max-age and URL context.
    // You can use any of Drupal's contexts, tags, and time.
    $data['#cache'] = [
        'max-age' => 600, 
        'contexts' => [
            'url',
            'user',     
        ],
    ];
    $response = new CacheableJsonResponse($data);
    $response->addCacheableDependency(CacheableMetadata::createFromRenderArray($data));
    return $response;
  }
}

I left out a couple details above on purpose. Most notable I am not showing ways to get the needed SFID for filtering because you need to apply a little security checking on your route/controller/service. And those checks are probably specific to your project. If you are not careful you could let anonymous users just explore your whole database. It is an easy mistake to make if you do something like use a Salesforce ID as a URL parameter of some kind. You will want to make sure you know who is running queries and that they are allowed to see the data you are about to present. This is on you as the developer, not on Drupal or Salesforce, and I’m not risking giving you a bad example to follow.

Another detail to note is that I used the cache response for a reason.  Without caching every request would go through to Salesforce. This is both slower than getting cached results (their REST API is not super fast and you are proxying through Drupal along the way), and leaves you open to a simple DOS where someone makes a bunch of calls and sucks up all your API requests for the day. Think carefully before limiting or removing those cache options (and make sure your cache actually works in production).  Setting a context of both URL and User can help ensure the right people see the right data at the right time.

Oct 28 2019
Oct 28

We’re in an era where so much of our lives is experienced through the digital that it’s become paramount for traditional businesses to transform and to establish a digital presence.

This ubiquity of digital transformation has given rise to a plethora of differently suited digital agencies essentially “lending” their expertise to other agencies with which they work on end-clients’ projects.

So, on the one hand, we have this trend of partnerships with specifically skilled agencies, and, on the other, the trend of doing all the work in-house. Both approaches have their own peculiarities and it is useful for agency leaders to be aware of both. 

In our experience, the first model of strategic agency partnerships is generally the more effective one and yields better results. 

In this post, we’ll discuss why this is so by outlining the main benefits for creative and design agencies of adopting this model and partnering with a development agency rather than doing their work in-house. 

So, why should creative agencies partner with a development agency?

1. Greater focus on the things you excel at

There’s a reason why clients like to work with specific agencies: they trust in the expertise of the partner agency’s team and know they can rely on it. If you run or work for a creative agency, this is the skill your client hires you for. 

Of course, a transition to digital or a website redesign also demand adequate web development expertise. But taking care of all the dev aspects of a project in-house means focusing less on other areas, such as design and marketing. 

And, positioning yourself as an expert in design and/or marketing, you probably don’t want that. 

If, however, you decide to partner up with a development agency and trust them with the project’s development side, you can put a greater focus on the things you excel at - the things your client hired you for and is expecting you to deliver. 

2. Access to the latest trends & technologies in development

This point ties back to the previous one, but looks at the situation from the other perspective. Prioritizing creative work means dedicating less time to researching and learning new technologies and keeping up with the latest trends.

Luckily, this is exactly one of the key benefits that a partnership with a development agency brings to the table. Just as you are the expert in your area, they are the experts in their own area. 

And that means staying on the cutting-edge of software innovations, following development and security best practices, and just generally having an excellent overview of the web development ecosystem. 

In the case of an open-source software project such as Drupal, the agency you’ve partnered with likely has developers actively contributing to the project, meaning they have an in-depth rather than just a superficial understanding of the software. 

Another major benefit that this entails is the ability to make fewer compromises in software capabilities, as your partner agency’s developers will be versed in the necessary technologies and won’t have trouble finding the most suitable solutions. 

3. Access to top industry talent

Web development has grown into an immensely popular field, with the role of web developer becoming an extremely sought-after job, and young people from diverse industries thus transitioning into this one. 

Yet the demand for developer capacity remains unprecedentedly high. One of the biggest challenges for agencies today is acquiring and retaining the crème de la crème of web developers - naturally so, since the competition is downright vicious.

By partnering with a development agency, however, you’re able to bypass the fiercely competitive hiring process - your partner agency will already have taken care of that for you!

And the best thing is - you’re able to quickly and easily determine the legitimacy of their expertise. Most agencies will have a section of their website dedicated to case studies and references, where you’ll be able to explore their successful projects and first-hand client reviews.

4. Help with technical consultancy when pitching & managing projects

As an agency, you should always be consulting your clients and guiding them through the process. 

This is something creative agencies do naturally when it comes to user experience or graphic design, but due to a lack of certain development experience, you will likely need help when it comes to consulting about technical implementation.

In this case, having a partner that can support your team during the pre-sale and project management phases will be a truly treasured asset. 

Experiences that your development partner will have are extremely valuable to your client and, by passing along that information as consultancy, you’ll increase your value to them.

5. Ability to adapt & stay on top of disruptions

The rapid pace of technological innovation makes it extremely difficult to predict the next groundbreaking technology. Paradoxically, this is exactly what leaders in the digital must do to stand out among the competition - they need to be future-ready.

This proves to be quite a daunting task if done (entirely) in-house, especially for smaller creative agencies that lack the development resources to always operate in the now as well as two steps ahead. Besides, as already pointed out, they need to focus their talent elsewhere - this is what their clients hire them for. 

By contrast, development agencies can - and do - focus their attention on the latest trends in software development. They are experts in the technologies they use and follow best security, SEO and accessibility standards along with all the development best practices. 

They’re likely even researching newly emerging and as-of-yet unestablished trends and technologies, often being early adopters and helping with the development of the project if it’s open source. 

This means that, in order to be prepared for future disruptions, your best bet is partnering with an experienced and reliable development agency. 

6. Smoothness of workflow & scalability with no overhead

One of the major - and most immediately evident - benefits of trusting a partner agency with the development of the project is scalability. 

On the one hand, the partnership allows you to allocate more of the HR-related resources to other areas of your business and thus streamline business operations.

More importantly, however, it enables you to get exactly the number of developers versed in exactly the technologies that the project requires. Put the two together and it’s clear how such a partnership makes scaling particularly easy. 

On top of that, since the partner agency’s developers are experts in their respective fields and well versed in best practices, they’re able to integrate themselves into your team without any disruption whatsoever to your internal workflow, especially when they have clear and thorough documentation. 

And this extends to all future projects - the more work you do with a specific agency, the more they will get used to your in-house practices and workflows. 

Opting for a long-term agency partnership thus allows you to scale efficiently without having to make any sacrifices to your established workflow. 

7. 100% control over your project with minimum input

There is one benefit to managing the entire project in-house that really stands out: having complete control over all aspects of the project, and as such being able to dictate the course the project will take.

But this of course requires a lot of input from your in-house team - not just the people directly involved with the project, but also, for example, the HR department who are tasked with recruiting those people.

With project outsourcing, surrendering control over the entire project to the partner team can be quite intimidating. If, however, you decide to team up with a development agency, you get the best of both worlds:

  • You’re able to appoint your own project managers who oversee the project.
  • The bulk of the work is done by your partner’s developers, freeing you from the need to be involved in every single detail of the project’s progress.

This approach permits you to retain complete control over the project, while keeping the input from your side to a minimum.

Conclusion

We hope this blog post has armed you with enough insight into the benefits of partnering with a development agency that you’ll be able to make the best possible choice for your next project. 

If we’ve managed to convince you that such a partnership is your best bet, and you’re now looking for a skilled development agency to partner with, we’d love to help out - feel free to reach out to us and we’ll immediately start working on the best solution to your needs. 

Oct 28 2019
Oct 28

Lazy load images in Drupal with BLazy

Recently, we involved in a local project with Ecoparker.com. It is a directory of restaurants, cafes, entertainments, services, real properties ... in Ecopark Hanoi, Vietnam. This site is based on our best selling directory theme BizReview.

On this site, there is a page which lists all kindergartens around the area. It has 20 listings and will continue to grow. It is a very typical page built with Drupal views.

Kindergartens at Ecopark

By curious, we ran a PageSpeed Insight test, a Goolge provided test for accessing how fast your page is loading, to see how it performs.

The score on Desktop was 75, which is quite good. But let's see how we can improve it.

Page speed test - before

Scroll down to the Opportunities section which suggests how to help your page load faster, we see an interesting point "Defer offscreen images" with the suggestion:

"Consider lazy-loading offscreen and hidden images after critical resources have finished loading to lower time to interative

Page speed test - suggestions

Lazy loading is a technique that only serve content when it becomes visible to users, ie, when users scroll to it. If it is off screen, we don't load it to save bandwidth. It will be much useful when your sites contain a lot of images, so we don't have to load them all everytime an user browse the page. Only when the user scroll, images load and become visible.

It brought me to a question that how to lazy load on Drupal.

We had a look a the Blazy module, because it was a prerequisite of another module on our site. Previously we haven't been curious to know what it does. It turns out to be a very popular module with 30K+ sites reporting using this module.

Looking in more details, this module is very promising:

On private benchmarks, Blazy saves a page with lots of images from 14MB to 3MB, 200 http requests to 20, loading time 30s to 3s. Elevating performance grade from F/E to A/B via gtmetrix. Overall ~5-10x better.

On the description page, Blazy offers:

  1. Blazy as field formatter
  2. Blazy filter as HTML filter (on your CKEditor)
  3. Blazy Grid as Views style

That's all we need, so we started to get our hands dirty.

1. Install module:

Install and enable the module as usual, via the admin interface or composer: https://www.drupal.org/docs/8/extending-drupal-8/installing-drupal-8-mod...

Note: if you use Slick module for slideshows, it requires Blazy 1.0. But to get Blazy as a HTML filter, you need the 2.0 version.

2. Blazy configuration:

Blazy configuration is available at /admin/config/media/blazy. There are a bunch of options, like custom placeholder image, offscreen view port etc ... You are good to go with default settings.

Drupal Blazy UI configuration

3. HTML filter

Just go to /admin/config/content/formats, edit the Full HTML format, and enable the Blazy filter.

Drupal Blazy filter as HTML filter

Your HTML content will be automatically applied Blazy filter, ie, images and iframes will be lazy loaded. On our project, we found that images lazy loading works properly, but iframes do not. Not sure why, but we will come back for it at a later time.

4. Views

We editted the view page, on the Image field, there is a new Image format. Choose Blazy and set the image style, Save it.

Drupal Blazy on Views

All images on this view based page are now lazy loaded. If you scroll fast enough, you will see the placeholder are blinking first, then your images will show. Awesome!

After that, we ran the PageSpeed Insight test again.

Page Speed test - after

As you can see, the issue with "Defer offscreen images" is gone. The point have raised to 81, which is slightly better. That's what we need.

In conclusion, please consider to apply the lazy load technique to all of your Drupal sites, as it is highly recommended for a high performance site.

Oct 25 2019
Oct 25

Delona at Drupal Association table at GovCon 2019

Our staff will be at Booth 3 ready to talk with you about the Drupal community, how you can get more involved as a contributor, and to hear about your needs. 

Make sure you....

✓ pick up some Drupal stickers

✓ show your support by signing up for membership or partner programs

DrupalCon sticker - be inspiredSession highlights

  • Tuesday at 16h15, in G107, attend the Drupal Association Townhall with our Executive Director Heather Rocker (hrocker), CTO Tim Lehnen (hestenet), and our Board Chair Adam Goodman (adamgoodman). We'll be taking questions and diving into topics important to the community.
  • Wednesday at 11h30, in G107, we're holding our public board meeting. All are welcome to attend!
     
  • Also on Wednesday, if you're curious about what the Drupal.org Engineering Team is working on, come to the Drupal.org Infrastructure Update session in G103 at 17h15.

See you soon!

Oct 25 2019
Oct 25

DrupalCon Amsterdam 2019. 28 OCT - 31 OCT. Amsterdam, Netherlands

We're sad to miss DrupalCon Europe in Amsterdam next week (October 28-31, 2019). But which talks would we attend if we were going? Amber and I combed through the Interactive Program and created a list of what looks intriguing at the next DrupalCon. Will you be there? You might want to check out our picks.

Joe's picks

I'm not going to be at DrupalCon Amsterdam. First time I've missed a DrupalCon since 2011! And I'm bummed about missing the chance to catch up with friends, meet new people, and keep up with everything the Drupal community is doing. If, however, I was in Amsterdam, these are some of the sessions that would be on my calendar.

Amber's picks

Amber: A big plus one from me on Joe's picks, and here are a few more I would check out if I was there.

  • Autosave and Concurrent editing (conflict resolution) in Drupal 8

    Training around content editing can be tricky because each site has a different configuration and internal process for creating, editing, publishing, and archiving content. But there are definitely some universal known problems in editing content in Drupal and "losing changes before saving content" and "concurrent editing conflicts" are two of them. If you are in the frustration stage of this problem and are looking for potential solutions, check out this session which introduces two modules that address these problems.

  • Configuration Management Initiative 2.0 updates

    Now that Configuration Management in Drupal 8 has been used in sites for a while now, some limitations and challenges have emerged. In this session, you'll get an overview of these issues and how the Configuration Management Initiative 2.0 will seek to address them and how you can structure your sites today for minimal disruption in the future. I'll definitely be checking out the recording on this one to make sure we're making the best recommendations possible in our tutorials on Configuration Management.

  • Initiative Leads Keynote

    Attend this keynote to get updates from initiative leads and learn how you can get involved with core contribution for these coordinated efforts. I'll be cheering from the internet sidelines for my fellow core contributors!

  • (Paid) Training: Drupal + Gatsby

    Our training friend Suzanne Dergacheva is offering a training on Drupal + Gatsby. If I could, I would totally register for this training workshop. Suzanne is a great instructor and the topic is very hot right now, and I think will continue to be into the future.

Oct 25 2019
Oct 25

 

With the proliferation in the touchpoints that enterprises use to connect with customers and provide them with the valuable experience, it’s has become a tedious and challenging task to optimize the content far and wide.

Further, the number of devices that consumers use to access brand content- desktops, mobile phones, laptops, tablets, and smartwatches - with yet more looming on the horizon; have their own set of restrictions and specifications which again increases the complexities of content creators & marketers in the dissemination of the personalized content.

Also, this Gartner report suggested that marketers & decision-makers should now opt for a unified experience strategy to streamline their customer-facing content. This can be done through the implementation of the latest technology and channels to promote dynamic personalization and optimize content in an avant-garde manner. And all this can be executed by dint of Content-as-a-Service.

This blog provides further insights on CaaS, its use cases & features, and how enterprises and marketers can leverage Drupal as CaaS for managing their content efficiently.

What is Content as a Service?

Content-as-a-Service (CaaS) focuses on managing structured content into a unified repository or feed that other applications and properties consume.

The idea behind it is to provide a future-ready CMS that makes content readily available by employing API with or without developing the presentation tier. The presentation layer can be a website, a mobile app, or a feed into a device’s interface. 

The idea behind it is to provide a future-ready CMS that makes content readily available by employing API with or without developing the presentation tier

This separation between the content itself and its presentation implies that RESTful APIs, for instance, can provide the same content that serves both your website to an iOS or Android app.

Put simply, it draws a clear line between the people creating the content, the people delivering the content, and of course, the people consuming it.

A long box with different elements inside

Source: Bloomreach

Characteristics of Content-as-a-Service solutions include:

  • The content disseminated across all channels via a Rest-based API

  • A method of developing content as per prescribed content models

  • Structured formats for returning content via simple queries.

  • Distributed authoring and workflow content administration

  • A content repository hosted in the Cloud for universal access

  • Triggers that alert customer experience applications that consume content to content updates

  • Metadata definitions that can be defined and move along with the content via API

How Does CaaS work?

The actual implementation of CaaS can vary as in the case with any architectural pattern but here is a general overview of how CaaS platform may work-

Multiple boxes connected in flowchart

The content management UI is a web application to centralize all content authoring and content management of the platform. Content is placed inside centralized storage: it is to note that the format and technology used for the same does not matter at this point, what matters is the correct storage of data.

At last, the content is made available through a technology-agnostic API, like REST API. There are products available in the market which lets you author the content whilst working on the presentation layer to provide you with a wide array of applications you may need (for instance, web apps, mobile apps). 

You could, as an alternative, also provide access to the public APIs of these platforms, allowing others to take care of building their own presentation layers and saving you the trouble of working on that. 

Know how Srijan helps enterprises in modernizing their platforms to manage their content across various channels

Explore Our Services

Why CaaS?

Creating dedicated content for every specific medium becomes cumbersome to the point of being unworkable

 

Have you ever thought that how enterprises and marketers can tweak content for each one of the channels and yet ensure that the content is safe and sustainable for any modification in the future? Since it’s understood that creating dedicated content for every specific medium becomes cumbersome to the point of being unworkable.

So, how is it possible? The answer to this simple question is CaaS!

It can be efficient for enterprises those who want to upgrade their CMS either into one which can serve as CaaS or when there was nothing before.

However, the key deciding factor(s) at the end will be your current context. The reasons are mentioned below-

  1. Siloed Content
    Enterprise deals with an enormous amount of content and the sources from where it comes in and having to manage them independently can prove labor-intensive. Either company can spend a lot of time from their schedule to simply manage the content or spend too many resources having a team manager & a set of independent tools with the added overhead of getting them to collaborate with each other. 

In either case, they are most likely dealing with one or maybe more of such situations:

  • They don’t own a uniform content format, which can be made use of for easy distribution. 

  • They don’t own a centralized method to make content available for consumers, be they internal or external ones.

  • Metadata is not given due importance in empowering their content and making it rich for consumers.

  • And centralized storage, so, companies have to put extra efforts to move from one source of data to the next.

The adoption of CaaS could be beneficial to anyone looking desperately to switch their content management strategies. A switch to content-centric approach, i.e., Content-as-a-Service, would significantly improve their performance.

2.   Limited formats for your content

Content has to be an abstract entity, and choosing the way how it should be consumed, should be your top priority

Your problem might not be about managing your content but inefficiency in reaching to the targeted consumers due to a restricted amount of formats you are compatible with. Content-as-a-Service is again the perfect solution for such kind of scenarios.

Many CMS, such as WordPress, take the responsibility for presentation ensuring that you don’t have to worry about it. However, you also get restricted to the number of devices with which representation of your content is compatible. There could be so many devices where your content can be rejected immediately or simply not pleasant to be consumed in. For instance, have you ever considered how will your online trading WordPress website will show stocks on your smartwatch? What about a VR headset? Or a holographic projection? Agreed that last one does not exist yet but you must ensure that the company is well-equipped and future-ready to be compatible with new technologies, especially when it is moving at breakneck speed and released to the public every day.

Even the new foldable phones are going to be accessible for the public now- what will happen then to the content?

Companies will limit their odds of success if they kept their content tied to their representation. Content has to be an abstract entity, and choosing the way how it should be consumed, should be your top priority.

3.  Native mobile app needing content

Content-as-a-Service provides you with the flexibility to use your content however you want, now or in the future

Since content display on mobile phones and apps demand extra attention, most of the traditional CMS fails to provide the necessary tools and facilities for the same. They only provide web-compatible formats (e.g., HTML) making it unfit for your app.

You can work around this by using a headless, decoupled CMS or Content-as-a-Service to simplify your work. 

In a nutshell, Content-as-a-Service provides you with the flexibility to use your content however you want, now or in the future.

What Drives the Adoption of CaaS?

There are two groups primarily that can leverage this type of content delivery the most: developers and business users/content creators.

  1. Developers

Developers do require CaaS no matter they are mobile app developers who need a backend to feed their apps with content or front-end developers who expect to interact with an API. 

Such technologies have been around since long and widely accepted as well, further fueling the demand for CaaS.

2.  Business
  • Those content creators who want to increase the reach of their content to as many platforms and channels as possible- web, mobile, social networks, smart devices, and so on. 

  • It becomes exorbitant to have a separate solution for every channel- development-wise and maintenance-wise. 

  • It is convenient to manage a single editorial team and a single software stack for all channels.

  • CaaS solutions can help developers in being more productive and efficient with the tools they like to use.

CaaS Use Cases

It’s often perceived that there is no single CMS that is equally good for maintaining both a personal blog and a huge online shop. Contrary to the assumptions, CaaS outperforms its harbingers in some use cases-

CaaS focuses on pushing wherever and whenever required, designers need not worry anymore

Pushing content on a mobile app via CaaS proves as the most effective way to have dynamic in-app content without having the need to resubmit the app to the app marketplace.

  • Multi-channel publishing

CaaS CMS is also beneficial when content needs to be transmitted across various platforms, for example, you want to push the same content to a website as well as to mobile apps.

  • Rich Web apps

Modern view controller, i.e., front-end frameworks, such as AngularJS, React, and Ember synchronizes well with structured content via APIs.

CMS can considerably reduce the complexities and simplify workflows in an existing project, for instance, eliminating hard-coded content from HTML pages, and maintaining them with a CMS. In contrast, the API by CaaS makes it highly integration-friendly and robust.

  • Tailored UX

The CMS of web age posed strong design restrictions. Though you could fully tweak the UI but building a Wordpress-powered web app from scratch was not very likely. 

On the other hand, as CaaS focuses on pushing wherever and whenever required, designers need not worry anymore!

It becomes a tedious task to manage already existing content and also the one arriving from multiple sources. Therefore, it is best-suited to upload content into one unified repository by creating content via APIs.

Content structured via API makes it easy for AI-powered agents and chatbots to move it around and churn it for ensuring relevance than screen scraping and using natural language for processing unstructured content.

How Drupal Can Prove to Be An Effective CaaS?

Drupal has unfolded the idea of Content-as-a-Service (CaaS) to solve the dilemmas posed by our newfangled digital ecosystem & its extremely high demand for new and different types of content. 

A square with multiple circles and squares connected to each other

Following features on how Drupal can be an effective CaaS-

  1. Reusable future-proof content

Drupal content can easily exist in the form of reusable chunks

Generally, CMSes manage content in a back-end repository and push it to the front-end templates for serving an experience.

However, Drupal decouples the back and front end whenever required. So, Drupal content can easily exist in the form of reusable chunks: free from the presentation and set for delivering content to sites and apps. Thus, content becomes future-ready.

  1. Set front-end developers free to create a better experience

With Drupal’s presentation-neutral content and a RESTful API, front-end developers can freely carry out their creative vision and build interactive sites & apps with the tools like Node, Angular, Backbone, Ember and others.

  1. Fill the content bucket more easily 

Content nowadays should not be restricted to one source only rather it should move in and out freely. And Drupal helps in that by ingesting third-party content (e.g. from aggregators and syndicators) to bring content into your Drupal ecosystem and making it further easy to push to any site, app or channel.

  1. Share content beyond your sites

Today, organizations want to share content on multi-channels where the audiences are inside of content aggregators disrupting the news business. Content teams need an optimal way to create content & then share it with minimal effort. And Drupal does that! The other sites and apps you choose can easily churn Drupal content.

  1. Alter the look

The separation of backend content from front-end presentation gives a leading edge to developers to refine an experience without worrying about the content in the CMS.

Additionally, Drupal’s 8.0 version comes with an inbuilt REST API which marked its beginning of API-first initiative.  

REST allows apps and websites to read and update information on the websites via the web. It also encourages developers to rely on HTTP methods to operate on resources managed by Drupal.

Furthermore, the Drupal community has been working on shipping Drupal modules with web service APIs instead of depending on a central API module in the upcoming releases of Drupal.

Contenta, one of the Drupal’s distributions, is an HTTP API provided for ready-to-use purpose with full auto-generated documentation. It offers modern API capabilities with JSON API, and also feeds content in the JS-driven websites, mobile applications, TV and even fridge applications.

Contenta supports Create Once, Publish Everywhere, be it single application development or multi-channel publishing.

Then there is another distribution, Reservoir, which helps in implementing the Decoupled Drupal architecture, is very flexible and simple-to-use for building content repositories of any application. It also helps in modeling content, governing content, and interacting with that content through HTTP APIs. 

In a nutshell, Drupal’s API-first approach offers the following benefits which further bolsters CaaS model-

  • The decoupled approach separates the presentation layer from the service layer thus allowing a detailed and dedicated focus on each of them.

  • A foolproof approach to help organizations connect to infinite digital signages for enhancing customer experience

  • Increased interaction with customers on their preferred devices will eventually scale up your marketing efforts

  • The decoupled approach is flexible and open for changes, addition, and modification of the structure.

  • Deploying a front-end framework like Angular or React will lead to sophisticated, enriched and dynamic web experience

 

Learn more about Drupal API-first initiative from here-

[embedded content]

Features to Lookout For in CaaS

CaaS comprises of three vital parts: the editing interface (typically a web app), the CMS infrastructure capabilities, and the development ecosystem.

Web editor

  • Enables content architects to design the structure of the content

  • Enables content editors to manage content from creating, updating to collaborating on it.

Technical infrastructure

  • Offers performance, uptime, and scalability to ensure that enterprises can rely on their vendor to deliver content in mission-critical applications.

  • SLAs with short incident response times and access to dedicated staff- so in case of a problem with a mission-critical app, companies can be provided back up again and fast.

  • Mobile delivery capabilities so that great user experience can be delivered even in network-challenged environments ( like subways, rural areas) and high bandwidth cost areas (such as emerging markets).

  • API-based importing, management, and delivery for controlling content programmatically in both ways

  • All-inclusive and up-to-date documentation to help the development team start using the tools quickly.

  • CDN ( content delivery network) to deliver the content rapidly

Development ecosystem

  • SDKs and libraries to increase the speed no matter what the tech stack is

  • Demo app source code so that developers don’t feel the need to reinvent the wheel all over.

  • Third-party integrations to obtain value from existing tools.

Other Characteristics of CaaS

The decoupled approach ensures that code and content are placed separately so that marketers and developers can do their respective work

  • Decoupled approach

The decoupled approach ensures that code and content are placed separately so that marketers and developers can do their respective work. Teams can also work parallelly on a creative copy, enticing visuals, and expert integrations in one unified platform.

This is the quintessence of the headless CMS approach - agnosticism towards how content is presented. This frees developers from creating highly custom front-ends and apps since they get to define the content display part.

A box with various elements listed inside and interconnected

                                                                       Source: Gartner 

  • Cloud setup

The complete separation of the content management and display part allows organizations to migrate infrastructure between Cloud and hybrid, even at the site level or project level. Some projects can be installed locally while some on Cloud depending on the business’ choices for optimization as per needs. 

Centralized Content-as-a-Service lets businesses evaluate the content consumption across the digital ecosystem. This ceases businesses from duplicating their efforts and content when posting to microsites, international sites, or apps. It can also measure the use of that content by looking at the API connections used to deliver that content, and keeping track of where the content is going. 

In the End

The digital revolution and breakthrough in technology have accelerated the efforts of content creators - be it creation, designing, or dissemination. The goal is clear- refined user experience.

With that said, the creation of content in abundance and its delivery as a service through thousands of APIs will generate more data thereby assisting content developers to create more precise business models.

The technology is already in place, and the architectural patterns will allow enterprise systems to scale up without hampering their performance.

Content-as-a-Service ensures that developers are rendered maximum freedom and flexibility to realize their digital innovation. Drupal as a CaaS has been delivering a wonderful experience to both content editors and developers alike.

It is definitely a convenient way to ensure that your strategy is future-proof and can handle any new media in the future.

Oct 25 2019
Oct 25

Image: by Rob Shea

Partnering with Drupal Diversity & Inclusion

As part of our commitment to the health and well-being of the Drupal and WordPress communities, Pantheon partnered with the Drupal Diversity & Inclusion group to provide public speaking skills workshops aimed at underrepresented and marginalized people in the Drupal sphere. The thought of being the center of attention on a big stage can bring out imposter syndrome and self-doubt in many of us, but for people who are underrepresented at the event, the effect is often intensified.

These workshops allowed us to bridge our two favorite open-source projects, by bringing Jill Binder from WordPress into the Drupal world. I attended the original workshops in September—Jill’s calm expertise helped a group of Drupalists around the world overcome imposter syndrome, develop topic ideas, practice delivery, write catchy titles, polish up our speaker bios, and more. Our speakers reported increased confidence after the session, and many of them are already preparing to submit their talks to DrupalCon and their local tech events.

Next Steps

If you want to see these results in your own community, you’re in luck. We’re planning to scale the work by training people to give these workshops to their own communities! 

That workshop is happening Saturday, November 16 from 1-4 pm EST.

This low-cost, three-hour session will empower you to teach this workshop in your hometown and beyond. These workshops work best when led by somebody from an underrepresented or marginalized group in order to better connect with participants. If that sounds like you, great! If not, work to find somebody in your local community who would be interested in leading a workshop. If you’re an event organizer who wants to increase the number of speakers from marginalized and underrepresented groups at your event, sign up today.  

You may also like:

Topics Drupal Hosting, Drupal Planet
Oct 25 2019
Oct 25

In the Corporate category we are nominated for our work for SENEC. SENEC is a fast growing startup and a daughter company of ENBW one of the largest German energy providers, operating in Germany, Italy, and Australia.  In order to support the company growth, the website was needed to be relaunched.   When working on the project we had three main goals:

  • Provide information about the products in an engaging way.

  • Offer contact possibilities to get information about the products and services.

  • Allow customers to close energy contracts directly on the website.


Our aim was to  turn the well working original SENEC website into a ‘lead machine’ that will serve landing pages and converting user journeys for all marketing activities. The client requested Drupal because of its excellent reputation as an enterprise grade web CMS. The IT department of SENEC operates all systems in-house, and Drupal could easily be integrated in the existing IT landscape, because of its open standards and in-built API functionalities.

Nils Buntrock, Director Marketing at SENEC:  

“We are amazed by the flexibility and simplicity of the Drupal's backend. Our editors can produce better content and work much faster than before. This allows us to focus more on growing our online business and reach our audience better."

The most important part of the IT landscape of SENEC, that Drupal connects with, is a feature rich services API, where product information, usage data, and contract booking can be accessed from third party applications. Other integrations were to a proprietary CRM system, as well as the marketing automation system Hubspot.

Oct 25 2019
Oct 25

Long gone are the days, when cellphones were used just for calling purposes and desktops were switched on to browse the web. Today, information and entertainment can be accessed from anywhere and from any device.

According to Pew Research, over 95% of people currently own a cell phone, out of which more than 70% are smartphone users.

Users expect the best possible accessibility and functionality no matter what platform they're on. Let’s understand how Drupal solves the challenges inherent to this evolving model of content consumption with the concept of Create Once Publish Everywhere.

Understanding the Approach

COPE is a content management technique allowing content creators to add content in one place and repurpose it multiple times for different mediums.

It is important for enterprises to manipulate their content strategy as customers engage with the content they’re interested in across different touch points as per their needs.

So it’s beneficial to consider COPE approach while developing a web application. This revolutionary concept allows a considerable amount of work to be done in minimal time, effort and resources.

 

Marketers need to strategize for publishing content to this huge list of channels by treating content more like data. It’s no use conceptualizing content in the form of html pages, as this doesn’t apply to all forms of content available today. For example, through a smart speaker, you can book airline tickets, book a cab or pay your bills easily. The interaction with this conversational UI cannot be displayed through an html page as it has no visual display or screen.

It is important to understand that a smart speaker and a website do not understand and respond to the content in the same way.

Streamlining their ability in reaching out to their customers on their preferred device will allow enterprises to better scale their marketing efforts. Instead of html, enterprises need to transition towards structured content model by organizing digital content into independent fields so as to incorporate COPE across numerous channels.

On the other hand, the structured content approach could complicate an organization's digital strategy. This can lead to over dependence on Drupal as the platform for content distribution.

Drupal’s Solution to COPE

Drupal can provide a solution for your enterprise for content distribution to multiple channels by powering every instance of your digital system by adopting an API-first architecture.

Through API-first technique, the central web service would interact with a variety of applications to exchange data over a network. Drupal allows the API-first approach while decoupling the front end and using another cutting edge technology for the presentation.

Enterprises may implement a decoupled strategy to leverage Drupal as a service layer to drive complex digital ecosystems, or to provide front end teams with popular JavaScript framework capabilities or to use Drupal to power data to multiple touchpoints.

Drupal can provide the right solution to every problem, and an API-first approach could work when it is necessary to utilize technologies outside of the Drupal context.

Drupal gives the ability to make COPE a reality by providing the following:

  • Fields - to present different information such as image, video, product, text, select list, etc on the website
  • Content types - to make data more atomic for reuse
  • Views - to create lists of content curated by content type
  • Entity reference - to dynamically pull content from one page into another
  • View modes - to present the information in different formats on different pages
  • Services - to make information available to apps and feeds

API-first or decoupled architecture is considered among the most popular solution to create flawless digital experiences. The approach gives developers the flexibility to innovate as well as ensure future-proof builds that don’t require re-creating the entire feature.

Big names like Netflix have benefited from the decoupled approach in publishing content to every device which a user uses.

Drupal’s Distribution : Contenta

It’s often a challenge for non-drupalers to go for decoupled Drupal and enjoy the benefits of COPE as programming with decoupled Drupal is only for Drupal developers.

But, now the Drupal community has come up with a way to make it easier for them to leverage the power of decoupled drupal hassle free with Contenta.

Contenta is a stable API-first Drupal distribution adapted to make lives of non-Drupalers simpler and help them leverage Drupal 8’s outstanding capability for building decoupled application. With the help of built-in kits assembled with needed tools and configuration and demos, it can help to create cutting-edge apps in almost no time. After all decoupled Drupal should benefit everyone to its full potential.

https://www.youtube.com/watch?v=-KiMgk4wx2c

Keeping in mind the expertise in the subject, Contenta is simple and easy to use along with easy to understand documentation to refer for help and is fully-equipped to build an entire decoupled application without any external help or dependency on a front-end technology.

You can take up any front-end technology to go for with Contenta. So if you’re a front-end developer and are in search of a powerful back-end CMS for that impressive app that you’re planning to develop, you’ll just need to install Contenta and see for the out-of-the-box collection of your preferred front-end powered app examples that Contenta delivers by default.

Srijan teams can help you empower your marketing ability to reach out to enlarged list of customers and leverage Contenta to build decoupled applications for your enterprise. Reach out to us with your requirements and let our experts work on your needs.

Oct 25 2019
Oct 25

I had the pleasure of presenting on PWAs (Progresivei Web Applications) at DrupalCamp Atlanta 2019. I focused on the overall benefits of PWAs and how to set them up with GatsbyJS and Create React App. It turned out that Drupal PWAs were completely covered in the presentation Meet the Progressive Web App module by Christoph Weber and Alex Borsody. It was great to see so much attention given to the importance of PWAs!

I hope you checkout these PWA talks and related implementation techniques. There are big wins around making sure all of our websites and web applications utilize PWA related technology.

Below you will find my DrupalCamp Atlanta presentation deck and video:

[embedded content]
Oct 25 2019
Oct 25

1 minute read Published: 24 Oct, 2019 Author: Christopher Gervais
Drupal Planet , Automation , DevOps , Ansible , OpenStack , Presentations

On Friday, October 18th, I presented at DrupalCamp Ottawa 2019. That’s the annual gathering of the Drupal community in Ottawa, Ontario, Canada.

Session information:

Ever heard of infrastructure-as-code? The idea is basically to use tools like Ansible or Terraform to manage the composition and operation of your cloud systems. This allows infrastructure to be treated just like any other software system. The code can be committed into Git which allows auditability, and reproducibility. It can therefore be tested and integrated into full continuous delivery processes.

Ansible provides tonnes of cloud management modules, from simple Linodes or Digital Ocean Droplets through globe-spanning AWS networks. Ansible also strives for simplicity, resulting in playbooks that are essentially self-documenting.

In this session, we will:

  • explore the principles of infrastructure-as-code and how to operationalize them;
  • introduce Ansible and it’s cloud modules;
  • build a full OpenStack cloud infrastructure end-to-end from scratch.

A video recording of my presentation is available on YouTube.

My presentation slidedeck can be downloaded here: Automate All the Things!

The article DrupalCamp Ottawa 2019: Automate All the Things first appeared on the Consensus Enterprises blog.

We've disabled blog comments to prevent spam, but if you have questions or comments about this post, get in touch!

Oct 25 2019
Oct 25

5 minute read Published: 24 Oct, 2019 Author: Colan Schwartz
Drupal Planet , Semantic Web

As a content management framework, Drupal provides strong support for its taxonomical subsystem for classifying data. It would be great if such data could be exposed via the Simple Knowledge Organization System (SKOS) standard for publishing vocabularies as linked data. As Drupal becomes used more and more as a back-end data store (due to features such as built-in support for JSON:API), presenting this data in standard ways becomes especially important.

So is this actually possible now? If not, what remains to be done?

Drupal’s history

First, let’s explore some of Drupal core’s history as it relates to the Semantic Web and Web services formats, also useful for future reference. This is basically the backstory that makes all of this possible.

1. REST support was added to Views

This was implemented in the (now closed) issues:

2. Non-Schema.org namespace mappings were removed (including contrib’s UI support) in Drupal 8

Here’s the change notice:

And a follow-up issue requesting support for additional namespaces:

3. The community chose to replace JSON-LD with HAL in Drupal 8

Here’s an article with the details:

Taxonomy Screenshot

Multiple Components

As this is really a two-part issue, adding machine-readable metadata and then making machine-readable data available, I’ll split the discussion into two sections.

Adding machine-readable metadata

While there’s an RDF UI module that enables one to specify mappings between Drupal entities and their fields with RDF types and properties, it only supports Schema.org via RDFa (not JSON-LD).

As explained very well in Create SEO Juice From JSON LD Structured Data in Drupal, a better solution is to use the framework provided by the Metatag module (used by modules such as AGLS Metadata). The article introduces the Schema.org Metatag module, which uses the Metatag UI to allow users to map Drupal data to Schema.org, and exposes it via JSON-LD.

So one solution would be to:

  1. Clone Schema.org Metatag, calling the new module SKOS Metatag.
  2. Replace all of the Schema.org specifics with SKOS.
  3. Rejoice.

But after taking some time to process all of the above information, I believe we should be able to use the knowledge of the vocabulary hierarchy to add the SKOS metadata. We probably don’t need any admin UI at all for configuring mappings.

Assuming that’s true, we can instead create a SKOS module that doesn’t depend on Metatag, but Metatag may still be useful given that it already supports Views.

Making the machine-readable data available

Exposing the site’s data can be done best though Views. I wouldn’t recommend doing this any other way, e.g. accessing nodes (Drupal-speak for records) directly, or through any default taxonomy links for listing all of a vocabulary’s terms. (These actually are Views, but their default set-ups are missing configuration.) A good recipe for getting this up & running, for both the list and individual items, is available at Your First RESTful View in Drupal 8.

To actually access the data from elsewhere, you need to be aware of the recent API change To access REST export views, one now MUST specify a ?_format=… query string, which explains why some consumers broke.

The JSON-LD format is, however, not supported in Core by default. There is some code in a couple of sandboxes, which may or may not work, that will need to be ported to the official module, brought up-to-date, and have a release (ideally stable) cut. See the issue JSON-LD REST Services: Port to Drupal 8 for details.

Now, the Metatag solution I proposed in the previous section may work with Views natively, already exposing data as JSON-LD. If that’s the case, this JSON-LD port may not be necessary, but this remains to be seen. Also, accessing the records directly (without Views) may work as well, but this also remains to be seen after that solution is developed.

Conclusion

Clearly, there’s more work to be done. While the ultimate goal hasn’t been achieved yet, at least we have a couple of paths forward.

That’s as far as I got with pure research. Due to priorities shifting on the client project, I didn’t get a chance to learn more by reviewing the code and testing it to see what does and doesn’t work, which would be the next logical step.

If you’ve got a project that could make use of any of this, please reach out. We’d love to help move this technology further along and get it implemented.

References

General information

Contributed modules that probably aren’t helpful (but could be)

Questions about importing SKOS data (not exporting it)

The article Exposing Drupal’s Taxonomy Data on the Semantic Web first appeared on the Consensus Enterprises blog.

We've disabled blog comments to prevent spam, but if you have questions or comments about this post, get in touch!

Oct 24 2019
Oct 24

Marketing department these days are feeling the heat to make processes faster, agile, and efficient in this fast-paced digital world. That’s where the concept of Drupal comes into the picture! 

Drupal, since its inception, has been considered crucial for the companies which are trying to get on the digital transformation bandwagon in order to provide a faster and more nimble digital experience to customers.

Drupal comes equipped with a set of marketing tools to target the right audience and increase the overall ROI for the businesses. Additionally, the suite of tools and solutions available, build a solid foundation important for marketers, to unearth its potential and other martech capabilities; making it one of the most powerful and widely approached platforms for all the marketing needs. 

The blog gives you insights on how Drupal can be a perfect choice for marketers.

Leveraging Drupal For Marketing

Drupal has become an inseparable part of the marketing space which not only drives the business revenue but also makes a remarkable balance between marketing technologies and its ecosystem with its content first, commerce-first, and community-first marketing solutions.

Creative Freedom 

Dependence on the IT team for implementation is the most known problem for digital marketers. With traditional CMS it takes an added effort, time, and resources across design, development and marketing departments to work in sync.

By the time changes are implemented the model already looks outdated to the new situation.

“Drupal seamlessly incorporates with the existing marketing and sales technologies of the enterprises”

The cutting-edge Drupal modules and distributions empowers different teams with to have their creative freedom in order to manage the development of a project at their own pace and convenience. 

With Drupal’s architecture, organizations have a platform where they can dynamically launch their website. Marketing teams can curate the structure with segment content and visuals to lay the foundation of a strong digital strategy in its backbone.

Drupal turns out to be a useful asset for organizations which are looking for implementing it in their digital business as it seamlessly incorporates with their existing marketing and sales technologies.

Balancing Marketing Ecosystem

CRM systems are important in running businesses and boosting sales management. It is important for organizations to integrate and be able to customize the martech stack to their unique needs. 

Salesforce written in blue cloud
Drupal offers features that help you create a fine balance between CRM and marketing ecosystem- with content-first, commerce-first, and community-first marketing solutions. Business, technology, and marketing professionals use Drupal to create such agile solutions that are easy-to-use and offer a wide reach across the web. Built fully-responsive, customers and users can discover products and solutions with the help of any device. 

It possesses infinite potential with native features and module extensions, including collaboration with third-party digital marketing tools.

In all, it’s a platform to help you push your strategy for the upcoming phase of digital customer engagement and digital business.

Responsive Customer Experience

Based on the system of engagement, it gives a solid foundation important, for all the single interactions with customers and people within the organization alike, to provide the ultimate unified experience. Streamlining your business operations and aligning your digital strategies, it delivers on the mobile-first approach. Enterprises’ marketing teams can manage the website and administrative pages with ease across multiple platforms.

“Personalized customer experience is evolving at a blistering pace”

Organizations competing in this customer-centric age are putting efforts to provide a personalized experience to customers for keeping them engaged and simultaneously attracting new visitors on board for lead generation.

The digital strategies run by marketing teams majorly focuses on increasing leads, conversions, and revenue percentage of the company gradually via digital channels. 

As customers lie at the center of the organization, this can be accomplished by offering them a tailor-made experience across all channels.

The motive is the same but the way it is rendered has evolved significantly and Drupal has a large part to play in it. Here’s how-

Have a look at the video to understand more about the Acquia Lift and how it can be beneficial for marketers-

 

Focus on Personalization with Acquia Lift

There is no denying to the fact that companies are leaving no stone unturned to provide personalized results to users- it's not just about presenting content on the website but rather tweaking the whole experience. Simply put, they are trying to ensure that every single user-prospect or customer - gets what they want, even before they realize it.

Acquia Lift is a powerful amalgamation of data collection, content distribution, and personalization helping marketers deliver on the refined user experience 

Acquia Lift bolsters the personalized experiences of the customers. It is a powerful amalgamation of data collection, content distribution, and personalization that helps enterprises’ marketing teams ascertain the refined user experience without much dependency on development or IT teams. 
7 Vertical and 4 horizontal blocks with text written on themSource: Acquia

Acquia Lift encompasses three key elements to boost personalization-

Profile Manager

It helps you build a complete profile of your users right from when they land on your website as anonymous visitors up until the stage where they are repeat visitors or loyal customers. Collecting user info such as demography, historical behavior, and real-time interactions, it complements the collected insights on user preference with best-suggested actions in your capacity.

Content Hub

This cloud-based tool provides a secure content syndication, discovery, and distribution. Any content created within the organization can be consolidated and stored here; readily available to broadcast on any channel, in any format.

Searches on varied topics and automatic updates give insights on a wide spectrum of content being developed within the enterprise- in different departments, across websites, and on different platforms.

Experience Builder

This is the most essential element of Acquia Lift. It lets you create a personalized experience for your users from the beginning.

The Experience Builder is an easy-peasy drag-and-drop tool that allows you to personalize every section of your website to showcase different content to different target audiences, based on the information retrieved from the Profile Manager.

Marketing teams can:
  1. Define the rules and protocol on how content should be displayed to a different segment of site visitors
  2. Carry out A/B testing to determine what type of content drives more conversions for which user segments.

All this can be executed with simple overlays onto the existing website segments, without disturbing the core structure of the site and without depending on IT teams for implementation.

Multilingual

With companies expanding their reach to the international markets, Drupal multilingual features are definitely worth to make capital out of it. As it supports 94 international languages, it can translate the complete website within a fraction of seconds with less than 4 modules in action, enabling marketing teams to deliver localized content experiences; thus increasing the probability of turning a visitor into a customer. 

“Drupal multilingual features are definitely worth to make capital out of it”

Despite the features of Drupal site’s language for the audience, the editors and admins have the option to choose a different language for themselves at the backend. Marketing and editorial teams have the rights to create and manage multilingual sites, with no need for additional local resources.

Layout Builder

The Layout Builder with its stable features showcased in Drupal 8.7 allows content marketers to create and edit page layouts and arrange the presentation of individual content, its types, media, and nodes. It also lets you feed user data, views, fields, and menus.

"Marketing teams can preview the pages with ease without impacting the user-experience”

It acts as a huge asset for enterprise marketing and digital experience teams-

  1. It offers flexibility to help you create custom layouts for pages and other specific sections on websites. You can override the predefined templates for individual landing pages when required.
  2. Content authors can embed videos effortlessly across the site to enhance user experience and ultimately drive conversion rate.
  3. Marketers can preview the pages with ease and without the fear of impacting the user experience


Layout Builder explained with the help of flowers in square gift box

Source: Dri.es

All these features offered ensures that marketing teams have more control over the website and can work independently without needing to take help from developers. This ultimately reduces the turnaround time for launching campaigns and hence the dependency on development teams.

Improved UI with API - First headless architecture

With the ever-increasing demands of acquiring and retaining customers, marketing teams are always in a hurry to redesign and update the backend and front-end in a short period. However, this becomes quite a strenuous task for them to update and redesign digital properties rapidly keeping in mind the evolving customer expectations.

Traditional Drupal architecture could take ample amount of time to make updates and redesigns because the refinement needs to take place at both front end and back end resulting in a dependency on developers and designers for the completion of the project.

“A decoupled CMS strategy can work wonders for a website that is in desperate need for a change”

But now with the powerful feature of Drupal, i.e., decoupled Drupal, marketing teams can become more agile and efficaciously segregate the processes & streamline the upgrades without impacting the user experience at the front end. This uber-cool feature of the Drupal helps in making the design and UX alterations easier to maintain.

Three blocks on the grey background with text written on themSource: Acquia

Having the flexibility to come up with more ideas and implementing them by being able to easily add them to the website is a huge upliftment for marketers. New requirements can pop up anytime in the marketer’s mind that could be added to the site for more customer engagement and lead generation. The decoupled approach gives the extra agility needed to keep improving the public-facing site.

Final Words

Drupal has the potential to provide a promising future for better digital experiences with its every upcoming release. The appending of new features in Drupal will help marketing teams to become more flexible and scalable and yet provide a surpassing customer experience in no time. Consequently, conversion rate, sales, and brand visibility would increase manifolds.

Marketing teams in the organization who are already running their sites on Drupal have a lot to be happy about. Specifically, the development around Acquia Lift and Acquia Journey gives them freedom and hence no reliance on developers for any website updates and making content live, etc, to target the audience at the right time and increase ROI.

And for the marketing teams of the organizations those who are envisaging to roll out a plan for shifting to Drupal due to its all-inclusive features, the culmination from the highly-skilled and empowered team will make it worth all the efforts.

Oct 24 2019
Oct 24

With a successful API monetization strategy, enterprises can expand their business capabilities to new customers through the rapid consumption of business assets.

However, with APIs offering dozens of ways to monetizing data, content and technology, it can become overwhelming for enterprises to deal with the entire process.

In this blog post, we’ll take you through the technical knowledge needed to build a robust API monetization platform for Globe Telecom, which seamlessly drove new opportunities and broadened their marketplace.

Understanding Globe’s Concerns and Expectations

Globe Telecom, part of the Singtel Group, is a telecommunication giant in the Philippines with an estimated market capitalization of 3.8 billion USD and a subscriber base of almost 67 million.

It has a programme running on Apigee aimed at expanding the ecosystem and effective productization for increasingly complex APIs. Globe was seeking out to create a prototype for API monetization.

We helped them achieved the following key goals:

  • A unified and well-architected API programme to allow Globe to expand into other avenues faster than before
  • An organized API product strategy with an at least 6-18 months outlook, that allows for better-planned release cycles and innovative business models
  • Standardized infrastructure and ops for resilient architecture, platform security, and cost savings
  • Empowered API teams that can work in an efficient and optimized manner and help migrate selected APIs to the Apigee platform.

Read how Srijan helped Globe Telecom drive its API Monetization Strategy

Take Me Through
Building a Developer Portal on Apigee

A platform was built which could help the client to ideate, develop, and take feedback within planned timelines, with the ability to create new revenue models with an offering for both service providers and end-customers while vastly cutting down development time and costs.

Srijan teams built a unified developer portal which made APIs available to developers to communicate with the actual data in microservices through an Apigee API platform.

The Apigee platform ensured secured use of APIs and acted as the intermediate between developers and the microservices.

The Apigee platform ensured secured use of APIs and acted as the intermediate between developers and the microservices.

Architectural diagram showing communication between developers/admin and microservices

Now, let’s understand the features of the project and the various related terminologies.

  • GlobeLabs APIs

The developer portal renders several APIs which can be public, private and internal. These are then implemented on Apigee. The screenshot attached below shows a comprehensive list of Public APIs available to an anonymous end user.

GlobeLabs APIs

Developer portal exposing various APIs for developer use

  • Globe Labs ReDoc

ReDoc offers a customizable and incredibly nice theme. It is actively maintained by its developer team to offer a better user experience. It has a custom script written for better readability of a developer.

Here’s the sample doc rendered for:

1. Request

Request

2. Response

Response

  • GlobeLabs SmartDocs for an API

SmartDocs comes as a part of the Drupal-based Apigee dev portal. It provides smart documentation for an endpoint along with a tryout feature so the developer can tryout the endpoint on the page itself.

GlobeLabs SmartDocs for an API

  • Developer Dashboard

A logged-in developer on the developer portal dashboard can choose to create a new app, go to the apps transactions page or see the wallet balance.

Developer Dashboard

1. Developer App

7-3

Screenshot of creating new app interface

A developer can create an app by giving it a unique name, with a particular API product(s) and a callback URL. He/she can select different API types (which are basically API products on APIGEE which gets synced to dev portal) by simply selecting the check boxes.

In case of Consent App, a 'Consent' is a prompt when a subscriber sees while opening an app. The app accesses the list of permissions marked selected by the subscriber.

2. Developer Wallet

Developer can add balance to their wallet via online/offline transfers. The wallet is categorised into two types: prepaid and postpaid.

A developer can have any wallet (prepaid or postpaid) and can even be switched from one to another upon request. The developer will have SMS MO balance attached (see the image below), show the credit/balance history of the transactions done.

3. Navigate Transaction page

The transaction page displays the transaction types and the related balance details.

8-3

Screenshot of Transaction page interface

Admin Operations

Admin does the configurations to communicate between different layers in the entire system. Micro services implement the automated processes across the system wherever needed.

Micro services consists of all the APIs which does any internal operation in the system, and the response is brought back to APIGEE and then to portal/developer App.

Srijan is working with leading enterprises across the US, Europe and APAC regions, assisting them with their API lifecycle management with Apigee - creating and exposing APIs and building custom developer portals. Contact us to get started with your requirements.

Oct 24 2019
Oct 24

I had a great time presenting and taking part in the Flutter Developers Charlotte meetup last night. My talk was on the work I am doing around Flutter, Firebase, and Decoupled Drupal. Thanks to everyone who made it out and I appreciate the chance to share and learn!

Flutter and Firebase are a great match for rapid prototyping and full on production ready redeployment for native mobile applications. This talk included a demo of a Flutter application that reads content from a Contenta CMS API (Drupal distribution) and reads/saves related data to a Firebase Firestore. The application is a companion application for a pseudo Recipe Magazine, Unami.

Below are the links I referenced in the presentation for convenience:

Oct 24 2019
Oct 24

In the world of PCs, smartphones are much smaller than their desktop “brothers” but their significance keeps growing bigger and bigger. More and more users prefer to interact with brands using them.

So website owners hurry up to make their website mobile-friendly, considering the mobile boom, as well as Google’s mobile-first indexing that shows the search giant primarily takes into account the website’s mobile display.

In addition to this, many go further and also build a mobile application to give an extra boost to their business.

Drupal is a great choice for both of the above:

  • Making websites mobile-friendly is a breeze with Drupal 8 thanks to its mobile-first principle. Responsive web design has page elements adapt to the current device and provides the user with the most convenient experiences.
Responsive web design in Drupal 8 example
  • Drupal can also be the base for creating fast, lightweight, and effective mobile applications. That’s exactly what we will focus on in this post. Let’s see why to build a mobile app with Drupal.

Some benefits of mobile apps for business

Mobile apps vary in architecture, but most of them are united with the following benefits:

  • Mobile apps significantly expand your mobile reach.
  • You can add more ways of communication with your users and offer them more interesting features.
  • Mobile apps build a multichannel presence and promote your brand.
  • With them, you are closer to your audience even when their smartphone is offline.
  • You can benefit from in-app advertising.
  • You have access to the device’s hardware (i.e. camera to make images).
  • They allow you to use the specific capabilities of iOS and Android devices.
  • You will get additional profits from being able to sell your mobile app in app stores.

and much more.

Mobile app example

Drupal as a platform to build a mobile app with

Speaking about mobile app development, you might be surprised to hear about Drupal among the great solutions. After all, Drupal is a PHP-based, enterprise-class content management framework known in the area of website creation in the first place.

OK, let Drupal pleasantly surprise you in the mobile app area! Drupal works as a robust data source and shares its data to your mobile app, responding to requests and events on it. The data includes your content, business logic, functionality, user base, and so on.

This suits all cases:

  • If you already have a Drupal website, you can create a mobile app on its basis.
  • If you are thinking about a strong backend platform for your mobile app, Drupal is your reliable choice.

Drupal is becoming an increasingly lucrative option for mobile development thanks to the following:

  • Drupal 8 adopted an amazing API-first principle and has 5 powerful modules for web services in the core. They provide Drupal’s smooth “communication” with any apps. Drupal REST APIs send data in the JSON format that is easy for applications to consume.
  • There are plenty of Drupal modules, development kits, libraries, and sample mobile apps to boost mobile development and integration.
Mobile app example

Native mobile apps with Drupal

Native mobile applications are written in the programming languages that are native to their device operating systems. For example:

  • Java and Kotlin for Android mobile apps
  • Swift and Objective-C for iOS mobile apps

Native apps are characterized by amazing productivity, the availability of device-specific features, user experiences tailored to the device, and more.

Drupal developers’ skill sets usually include PHP, MySQL, HTML, CSS, and JavaScript, which could sound a bit far from the native mobile app programming languages. However, this is easily solved by using helpful software development kits, frameworks, and base apps.

Among them are PhoneGap, Waterwheel Swift, Drupal 8 iOS SDK, Example iOS app for Drupal 8, One Drupal Android, and others. They help in building native mobile apps and connecting Drupal to them.

Web-based mobile apps with Drupal

Unlike native mobile apps that use device-specific programming languages, web-based mobile apps rely on standard web technologies like HTML, CSS, and JavaScript. Web-based apps run in mobile device browsers.

They may be limited in their device-based capabilities, but they are versatile and have a faster time to market. Connected to Drupal via a REST API, these apps look like native to the Android or iOS users while sharing Drupal data with them.

Today, there are plenty of JavaScript frameworks and tools that are characterized by amazing speed and interactivity. They include Vue, React, Angular, GatsbyJS based on React and GraphQL, Ionic based on Angular and Apache Cordoba, and so on. They pair perfectly with Drupal. Helpful SDKs, modules, plugins, and libraries help developers build faster and speed up the integration.

Build a mobile app with Drupal!

It’s time to let your business fully embrace all the benefits of mobile development. Our web development agency can help you with this. Ask our developers to build a mobile app for your specific business case, or to perform the smooth integration between your existing software.

And, of course, also don’t forget about your website that needs responsive web design.

The mobile future is here!

Oct 24 2019
Oct 24

Acquia Engage banner with image of New Orleans street

This year’s annual Acquia Engage US conference is coming to New Orleans in November. The event brings together hundreds of business and technology leaders across the Acquia community to tackle today’s top digital challenges.

Engage is a mainstay on our calendar—we’ve returned to participate and sponsor every year since 2015, and can’t wait to be back.

Acquia Engage is a unique conference opportunity to connect with digital leaders. It has always been a must-attend...It's a fun, informative, and collaborative forum to share ideas and best practices...

Press release quote from Mediacurrent co-founder Dave Terry

 Here are a few upcomig highlights for this year’s event:

Our Team of Drupal Rockstars Are Attending

We have a diverse team of Mediacurrent team members attending, so drop by our booth with your most pressing digital strategy and Drupal questions. This team has launched dozens of enterprise Drupal 8 projects using the most advanced Drupal 8 architecture and distributions (Lift, Site Factory, decoupled, and more). 

Lately, we’ve been focused on gearing up for Drupal 9 with our Rain install profile, increasing conversion rates with Lift as a personalization tool, and decoupling Drupal with Gatsby.

headshots of Mediacurrent team attending Acquia Engage 2019

 

Dave Terry - Partner, Client Services
Josh Linard - VP of Sales
Jay Callicott - VP of Technical Operations
Kevin Basarab - VP of Delivery 

Acquia Engage Awards Finalists

We’re excited to be selected as finalists in two categories for the 2019 Acquia Engage Awards.  These awards recognize the amazing sites and digital experiences that leading digital agencies are building with the Acquia Platform. Winners will be announced during the event.

  • Best Return on Investment: CAS, a Division of the American Chemical Society and Mediacurrent partnered to launch a new Drupal 8 platform with responsive design and significant improvements to site speed and layout—all within a tight launch timeline.  
  • Open Source Giants: The Rain install profile was created by Mediacurrent to add out-of-the-box editorial, administrative and media enhancements to the core Drupal 8 installation. Modeled after distributions 'Acquia Lightning' and 'Thunder', the Rain profile packages and pre-configures many core and contributed modules to make building Drupal websites faster and easier. Best of all, it’s free and open source.

Lift Personalization Partners

We’ve expanded our long-time partnership with Acquia by becoming an official Lift implementation partner. Our team and clients are loving the latest release of Acquia Lift that puts website personalization directly into the hands of marketers (no coding needed). If you’re evaluating Lift for your business or looking to ramp up your personalization strategy in 2020, we can help.  

Connect with Us 

Stop by our booth and pick up a t-shirt and tell us what you love about Acquia Engage. 

Will you be at Engage 2019? Book a meeting with our team or message us on the Acquia Engage app!

Oct 24 2019
Oct 24

Do you need business search applications and enterprise features for your digital business? Elasticsearch, in combination with Drupal 8, can be a perfect fit. This edition of Architecture Capsules brings you the valuable tips and tricks on implementing Elasticsearch with Drupal.

Illustration showing a desktop, magnifying lens, human brain, bulb, globe and cloud


Business use case and benefits

Implement a user friendly and modern search experience in low turn around time and in budget.

Requirement criteria

1. Search should allow users an easy way to drill down content. (Read facets)
2. Search experience should be super fast. (Read Decoupled / elastic)
3. Should work seamlessly with Drupal content.

Stack used

Drupal 8, ElasticSearch, React, Elasticsearch connector module, Searchkit (It is a suite of React components that communicate directly with your Elasticsearch cluster).

Architecture notes

Flowchart with a droplet on left and Alphabet E on right to represent Elasticsearch and Drupal association


1. Configure the elasticsearch connector module on your Drupal 8 site to connect and index your content in elastic search. This link might be useful for further read on this.
2. Use npm to install searchkit.
3. Configure searchkit to make connection to elastic server. For more information, read here.
4. Make sure to check if you need to proxy the connection to elastic or not. In case you do, SearchKit has a plugin (Searchkit-express) which does that easily.
5. Generate the build of searchkit. Integrate the build with empty target container div in a drupal block or your theme.
5. More customisations and custom extentions for searchkit can be written. Follow the decently wide documentation it has.

Things to watch out for (Read Caution!)

The components in Searchkit require elasticsearch fields indexed in a particular way. For example, the Hierarchical Menu needs data to be indexed in levels. See Indexing & Mapping Guide or the component's pages for more information. You might need to add custom fields indexed in particular way from a custom Drupal module.

Oct 24 2019
Oct 24

The 2019 US Drupal Camp season is coming to a close (but don’t forget about UtahDrupalCorn, and NEDCamp) and that means MidCamp 2020 is just a few months away! We are happy to announce our full sponsor prospectus is now available.

This year we’ve rearranged our levels a little. Here’s the tl;dr:

  • ONLY Core sponsors get a table, only 8 are available.
  • Contribution Day is a big deal, so we’re making it a big level.
  • Special Recognition is an add-on level that’s available to Core, Contribution Day, and Supporting sponsors. That’s how you can put your name on the part of camp that’s special to you.
  • Community Sponsors! More on that below.

We’ve worked hard to make the sponsor levels easier to understand this year, so take a look at the full details and please reach out if you’d like to know more.

Pitch to your clients…

MidCamp has traditionally targeted larger Drupal agencies and service providers, but this year we’re reaching further to ensure that all Drupal users are able to be represented. Our Community Sponsor level is meant to be accessible for clients of our agencies or hosting providers, organizations that have small in-house shops, and other Drupal-interested parties who have not previously been able to financially support the community, but would like to get involved and spread the word.

We want your help. If you have end-users who are interested in learning more and supporting Drupal, we’d love for them to get more invested in the community, so here’s our pitch (there’s even an enterprise-friendly PDF).

Upcoming Milestones

  • November 2019 - Call for papers & ticket sales.
  • Wednesday, March 18, 2020 - Training & Summits
  • Thursday, March 19th, 2020 - Sessions and Social
  • Friday, March 20th, 2020 - Sessions and Social
  • Saturday, March 21th, 2020 - Contribution Day
Oct 23 2019
Oct 23

About submission limits

Submission limits allow site builders to define how many submissions are allowed per webform, source entity, or user. Once a submission limit is met, a custom message is displayed. Submission limits per user and source entity can be used to create a dedicated user/information profiles, and are also trackable via tokens and by placing the 'Submission limits' block.

Submission limits can be used to restrict the number of event registrants or job applicants and are defined as webform settings that can be entered via a webform's submission settings page.

Webform Submission Limits

Webform Submission Limits

About option limits

Options limits allow site builders to specify how many submissions are allowed per an element's options. Elements that support options include a select menu, checkboxes, radios, and buttons. Option limits can be defined per option with a custom message append each option. The custom message can display the limit, remaining, and total submission. Once an options limit is met, the option can be disabled or removed. Once all option limits are another custom message is displayed. Finally, an element's option limit progress is tracked via a dedicated report.

Option limits can be used to limit the number of event registrants per room or used to track a product inventory. Option limits are defined as configuration settings using the 'Options limits' handler.

Webform Options Limits

Webform Options Limits

Demo

Sponsoring a feature

This new options limits feature was sponsored by Steve Babbitt from Mile3 (https://www.mile3.com/). Mile3 had a client who needed this feature. Steve read this blog post and decided to reach out to me via the Webform module's issue queue.

If you want to sponsor a feature, please read my blog post and create a ticket in the Webform module's issue queue.

Backing the Webform module

Open Collective is providing us, Drupal, and Open Source, with a platform to experiment and improve Open Source sustainability. If you appreciate and value what you are getting from the Webform module, please consider becoming a backer of the Webform module's Open Collective.

Almost done…

We just sent you an email. Please click the link in the email to confirm your subscription!

OK

Oct 22 2019
Oct 22

The U.S. Supreme Court’s recent decision to pass on reviewing Robles v. Domino’s Pizza has served as a wake-up call for businesses that were holding off on remediating their sites for accessibility. 

As the case brought by a visually impaired man who sued Domino’s Pizza due to a lack of screen reader software, that would have enabled him to order a pizza from the website, heads back to trial, expectations of a definitive ruling that Title III of the ADA does not apply to websites have been dashed. Businesses that want to steer clear of the anticipated deluge of accessibility lawsuits, or avoid the negative publicity that can result from an inaccessible site -- or simply to do the right thing -- are now lining up to get their digital assets in compliance with WCAG 2.1.

For many, the concept of digital accessibility and remediating an existing site is unchartered territory: What needs to change? Where to begin? How long does it take? 

In the midst of a lot of uncertainty, developers and their clients are counting on the fact that accessibility is baked into Drupal core. Many improvements to both default settings and built-in tools for developers to create a strong foundation for the assurance of accessibility.

Accessibility Pledge

From our experience at Promet Source, Drupal 8 is a solid choice for accessibility. Drupal core that is. Integration of non-accessible contributed modules can undermine accessibility and complicate remediation efforts.  To encourage accessibility for contributed modules, the D8AX (Drupal 8 Accessibility eXperience) identifies accessible modules with an accessibility tag that reads: 

“I pledge to make this [module or theme] as accessible as it can be. If you find any flaws, please submit an issue [link to issue queue]. Help me fix them if you can.”

This initiative is designed to provide developers with a framework for conducting essential accessibility evaluations and testing of their module or theme, and fixing any accessibility issues that are flagged. 

Accessibility Features

Here are a few key examples of the accessibility features built into Drupal 8:

  1. Semantic markup support to ensure that HTML is structured to reinforce the meaning of the content in a way that both users and machines can understand and interpret the hierarchy of headers, subheaders and the overall architecture of the site. 
  2. The TabbingManager is a new mechanism to guide both non-visual users and non-mouse users to access the main elements on the page in a logical order. This provides essential guidance navigating complex user interfaces.
  3. Fieldsets for radios and checkboxes are now being used in the Form API. This is a big step toward further enhancing forms in Drupal. It is also now used in the advanced search. Fieldset is a tag that provides visibility to screen readers, as well as a label to announce them to the user.
  4. Alternative text is a default setting. This can be overridden in both CKEditor and  Image Fields, but the defaults settings assume that accessibility is an objective. Keep in mind, a simple lack of alt-text is what drove Robles v. Domino’s to the U.S. Supreme Court’s doorstep.
  5. Bartik is now automatically underlining links so that it is much easier for people to identify links on the page.
  6. Drupal forms have become considerably more accessible with the addition of accessible inline form errors as an optional experimental Core module. It is now easier for everyone to identify what errors they might have made when filling in a web form.

Looking to ensure web accessibility utilizing leading resources and expertise? Contact us today to talk with a Drupal consultant.

Oct 22 2019
Oct 22

This episode, we welcome AmyJune Hineline from Kanopi Studios to talk about the importance of open source to the community and organizations. AmyJune is the Open Source community ambassador for Kanopi. She helps keep her team connected to open source communities.  Along with working in the WordPress and Drupal communities, AmyJune also co-organizes A11yTalks, a monthly online meetup where they promote community discussions on a variety of accessibility issues. You can find her at just about every Drupal camp or con, where she will coax you into buying a beer-like drink. 

Audio Download Link

Project Pick:

Interview

  1. Tell us about yourself and about your role as an Open Source Community Ambassador?
  2. How did you get started with the Open Source Community?
  3. What would you say is the biggest benefit for an agency to contribute back to the community?
  4. Why should an organization/company using Drupal invest in giving back to the community?
  5. A lot of people think contributing back means creating a new module or a new theme.  Although those are certainly ways to contribute back, what are other ways in which an organization using Drupal or Wordpress can contribute back?
  6. What would be your advice to an organization who is interested in contributing back to the community?  What is the process like or what steps should they take?
  7. How can an agency like yours or ours motivate or encourage clients to contribute back?
  8. What kind of resources are available for an organization to get started with contributing back?
Oct 22 2019
Oct 22

Agiledrop is highlighting active Drupal community members through a series of interviews. Now you get a chance to learn more about the people behind Drupal projects.

This week we talked with Sascha Eggenberger, designer at Unic and member of the Drupal Admin UI and JavaScript Modernization initiative. Check out our interview and learn about the development of the new admin theme Claro, how important it is to design for accessibility from the get-go, and where you can get an exclusive insight into what else is coming for Drupal's administration UX.

 

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

I am a Zurich based Designer who enjoys to create great user experiences. I started my career as a Frontend Developer but always had my heart beating for design so I shifted my focus more and more to design over the years going through several further education. I’m currently working as a Senior Designer and “Visual” Front-end developer at Unic. Previously I held the position of Lead Frontend & Design at Amazee Labs. I am currently involved in the “Drupal Admin UI and JavaScript Modernization” initiative.

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

Both. I first came across Drupal quite a while ago. I think it was Drupal 5 around 2007. Back then I did some web projects in my free time while studying. But I never completed a project with Drupal because it felt too complicated back then. I gave it another try when Drupal 6 came around but also didn’t pick it up. When I finally joined Amazee in 2012 it was obvious to get started with Drupal. Learning by doing basically.

Since then a lot of time has passed and I do fully believe in the benefits Drupal has. It always amazes me to see what’s possible with it. I also moved my own site to Drupal 8 over from a static site generator a while ago. I often use my site as a bit of a playground to test out new modules, creating patches etc. (Fun Fact: I’m running the dev version of my site on a Raspberry Pi at home). With its solid community and reach Drupal will hopefully grow even bigger in the future.

My first touch points with the Drupal community were at DrupalCon Munich. I was quite impressed by how well organized the event was and was overwhelmed by the thriving community. I would join almost each DrupalCon Europe after this one just to meet up with the community year after year.

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

I learned a lot while working on the Drupal Design System. We had a very strong focus on accessibility throughout the whole team – from designing to implementing – and we always have a great team spirit. It’s really inspiring working with so many people all over the planet on the same thing. Also getting constructive feedback is always welcomed. We got a lot of positive feedback on Claro so far which is motivation enough. But of course the best moment so far was a few days ago when Claro was merged into Core.

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

To not so technically savvy people I’d explain it in a very basic language, something along the lines of “it’s a software that you can manage your website with”.

To people with technical know-how I would explain it simply this way: “Drupal is an Open Source Content Management System with a thriving community behind it and you should use it.”

I think a lot of people nowadays have heard about Open Source and know what a CMS is for. At work – when we pitch against other competitors – sometimes against proprietary systems like Adobe AEM – I would add this line: “With Drupal we can basically do the project you want with the same budget you spend on a year's license fee. Think about it.”

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

Drupal 8 was (maybe too) long in the making but in the end I must admit it was also worth the wait. It was a huge step forward compared to 7. With better multilingual support in core – which is a very important feature to us in Europe (especially in Switzerland with three main languages), a strong focus on APIs, Symfony, in-place editing, improved mobile support and many more features. It felt like a completely new CMS.

The future will bring a new administration theme named Claro. I’m really looking forward to the feedback when a wider audience will start using this theme. We already have over 700 sites reporting running on Claro which is already quite a lot if you consider that Claro was still in Alpha state back then. Now with Beta 1 we have a more stable release but there is still a lot to do until we can reach stable. So stay tuned and give Claro a try in Drupal 8.8.

The future will also bring a new Frontend Theme called Olivero, check it out, it looks fantastic.

I also started working on the next chapter for the Admin UI. Claro is the intermediate step to apply the newly crafted Drupal Design System and deliver a first change to Drupal Core. A refreshed Seven theme with a strong focus on accessibility basically. But we have bigger plans of course, to overhaul the Drupal admin experience. I will give an insight into the first design proposals, or let's call them early work-in-progress designs, to envision the future of the admin UI at DrupalCon Amsterdam (Designing the future of the Drupal Admin UI).

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

I’m quite proud of what the Admin UI team has achieved in the last couple of months with Claro. There were endless hours invested into this and we always included accessibility core maintainers forefront in the design process – which helped us a lot doing things right from the beginning.

In the beginning I was doing a lot of contribution to the Drupal Design System, designing and specifying components but recently I shifted my focus a bit to envision how the “Next generation Admin UI” will look like. I also try my best being a helping hand for other designers with feedback, reviewing stuff and helping out in the issue queue.

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

That’s an easy one. Claro as a backend theme replacing Seven and the Olivero proposal for the new frontend theme replacing Bartik.

But I’d also like to highlight the Entity Reference with Layout (ERL) module as I’m really enjoying using it. It’s using Layout Builder with Paragraphs and gives you a new and very neat content editor experience.

Last but not least Gin, the backend theme we’re using at Unic. It’s basically a subtheme to Claro and uses some useful modifications on top of Claro and integrates well with ERL.

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

Of course. I am also involved in a series of other community activities outside of Drupal. The biggest of them is Front Conference Zurich, a Zurich based conference I co-organise. We have talks about Design, Frontend and everything in between.

I also enjoy the Swiss nature and getting away from my laptop which I for sure use too much lately.


– Sascha

Oct 22 2019
Oct 22

As part of a frontend modernization initiative at ThinkShout, we’ve started to move our Drupal themes from using our dated Ruby and Gulp build process to Webpack, a popular JavaScript based asset bundler. Beyond being new, shiny, and trendy, this gives us some very real benefits: ES6 transpiling for our JS, complex loader chaining for our Sass, and Webpack’s native tree shaking and code splitting. An added bonus is that we get to move away from ruby-sass, which officially reached end of life in March.

While Webpack is an amazing tool for modern frontend applications, it wasn’t really optimized for our old-school use case - just compiling Sass (without CSS-in-JS) and minifying files. As a result, wrangling the Webpack config file to line up with what our developers expected from the build was a little tricky.

Let’s dive into an example theme I’ve set up for this blog post, which mimics the setup we’re already using on a few production sites. If you want to skip ahead and check out the theme, it’s located at https://github.com/thinkshout/webpack_example.

Before going to the Webpack-specific code, here’s an overview of the main features this setup provides:

Sass compilation

The Sass loader-chain (a set of functions that transform assets) takes our raw .scss files and compiles them into a single .css file. As a part of the chain PostCSS is run, which uses the Autoprefixer plugin to add vendor-specific prefixes to our CSS rules. This enables us to use new technology like CSS Grid while maintaining support for older browsers.

JavaScript compilation

The JS we write isn’t too complicated, and our Webpack config reflects that. We’re currently only using Babel to transpile ES6 syntax for older browsers, and Webpack allows us to import modules from our dependencies or our shared code. Our requirements are simple now, but if we choose to adopt a frontend framework for a project in the future we won’t have to rewrite the entire build to accomplish that.

Developer tooling

We’ve added Browsersync support to our Webpack config, which auto-reloads the page when assets are changed and allows us to share interactive sessions with our mobile devices and peers. Additionally when Webpack is run in its “development” mode, source maps are generated and the un-minified CSS/JS is output to a separate directory, which is only used on our local machines. This ensures that only the production build gets committed to Git and deployed to our production sites.

Now that that’s covered, we can start going through code.

Here are the important contents of package.json, split up into readable chunks.

First we’ll go through the dependencies.

We use Babel to transpile JS to a syntax compatible with older browsers:

  "devDependencies": {
    "@babel/core": "^7.4.4",
    "@babel/preset-env": "^7.4.4",
    "babel-loader": "^8.0.5",

@babel/preset-env contains all the individual Babel transformation tools that we need, which is nice because we’re not too picky with our JS build. babel-loader is what adds Babel support to Webpack.

Our Sass build is a bit more complicated:

    "autoprefixer": "^9.5.1",
    "css-loader": "^2.1.1",
    "mini-css-extract-plugin": "^0.6.0",
    "node-sass": "^4.12.0",
    "node-sass-glob-importer": "^5.3.1",
    "postcss-loader": "^3.0.0",
    "sass-loader": "^7.1.0",

A lot of these packages were mentioned earlier, but one worth mentioning is node-sass-glob-importer, which was required to support the globbing syntax (i.e. @import “config/*”) we were used to with our old build.

Next is Browsersync, which is not required for the Webpack build but is super useful for our developers:

    "browser-sync": "^2.26.7",
    "browser-sync-webpack-plugin": "^2.2.2",

And finally, Webpack:

    "webpack": "^4.31.0",
    "webpack-cli": "^3.3.2"
  },

Our package.json file also contains a number of scripts that run Webpack with different flags during development:

  "scripts": {
    "build": "webpack --config webpack.config.js",
    "build:dev": "webpack --config webpack.config.js --mode development",
    "start": "webpack --watch",
    "start:dev": "webpack --watch --mode development"
  },

The scripts aren’t required (you could just run webpack-cli), but are a nice abstraction away from the build tools for developers that don’t want to get in the weeds.

The core of the project is the webpack.config.js file - we only have one for this project, although it’s very common to have one for development and production.

At the top of the file, we setup our dependencies and define our entry points:

const globImporter = require("node-sass-glob-importer");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require("path");
const BrowserSyncPlugin = require("browser-sync-webpack-plugin");

module.exports = (env, argv) => {
  const isDevMode = argv.mode === "development";
  return {
    devtool: isDevMode ? 'source-map' : false,
    entry: {
      main: ["./js/main.js", "./scss/main.scss"]
    },

The isDevMode variable is used to determine if Webpack is being run in development mode. There may be a better way to check this, but looking for the passed --mode option works for us. For the example project we only define two entrypoints, but for a larger theme you may want to split large Drupal behaviors into different JS files, or high-priority Saas into a separate stylesheet (for inlining in a Twig template or loading synchronously).

Next are our rules for compiling Saas into CSS:

   module: {
      rules: [
        {
          test: /\.scss$/,
          use: [
            {
              loader: MiniCssExtractPlugin.loader
            },
            {
              loader: "css-loader",
              options: {
                sourceMap: true,
                modules: false,
                localIdentName: "[local]___[hash:base64:5]"
              }
            },
            {
              loader: "postcss-loader",
              options: {
                sourceMap: true
              }
            },
            {
              loader: "sass-loader",
              options: {
                importer: globImporter(),
                sourceMap: true,
              }
            }
          ]
        },

Our loader chain is fairly straightforward, and compiles Saas to CSS, passes that through PostCSS, then loads it with the standard CSS loader before outputting a minified file. We’ve disabled CSS modules to improve performance, since we aren’t using CSS-in-JS for our themes.

As mentioned before, our JS loading is very simple, and just uses Babel to transpile our modern JS to something most browsers can consume:

       {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: "babel-loader",
            options: {
              presets: [["@babel/preset-env", { modules: false }]]
            }
          }
        }
      ]
    },

Finally we define the output directory, plugins, and configuration for our build:

   output: {
      path: isDevMode ? path.resolve(__dirname, "dist_dev") : path.resolve(__dirname, "dist"),
      filename: "[name].min.js",
      publicPath: "/assets/"
    },
    plugins: [
      new MiniCssExtractPlugin(),
      new BrowserSyncPlugin({
        host: "localhost",
        port: 3000,
        proxy: "http://drupal.localhost/"
      })
    ]
  };
};

The plugins enable CSS minification and our local dev server, which proxies the local Drupal site.

You’ll notice that the destination directory changes depending on the mode - since we expect the dist directory to be committed to the repository, we want to avoid developers running a development build and pushing that to production, which is almost guaranteed to happen if your development build can be committed. dist_dev is ignored by Git, so there’s no-chance of making a mistake here. That said, this does require developers to run npm run build when they’re ready to commit if they were previously running npm run start:dev, which is a bit awkward. This works for now but we’re looking to find a better solution.

To get dist_dev to show up in Drupal instead of dist, I wrote this hook:

function webpack_example_page_attachments_alter(array &$attachments) {
  // Use the dev library if we're developing locally.
  if (in_array('webpack_example/main', $attachments['#attached']['library']) && file_exists(__DIR__ . '/dist_dev')) {
    $index = array_search('webpack_example/main', $attachments['#attached']['library']);
    $attachments['#attached']['library'][$index] = 'webpack_example/dev';
  }
}

which uses a separate development library definition that uses dist_dev files. Since dist_dev can never exist on production, this seems like a low-risk addition.

That’s basically everything - in the end, we now have a way to use modern build tools with a traditional Drupal theme, and hope that it leads to us writing more ambitious JavaScript for more complex interactions. If you want to check out the complete example theme, you can do so at https://github.com/thinkshout/webpack_example.

If you want to see the starter themes we’re using Webpack on, check out thinkshout/ts_grid and thinkshout/thinkwp. ts_grid in particular has some great Sass tooling for working with CSS grid, which PostCSS helps with. Credit to Amy Swan and Jaymz Rhime for making our Webpack dreams real.

P.S. If you’re a Webpack expert and have any suggestions for us, please open a PR or issue in the repo. I’m especially looking for ways we can make use of code splitting in the context of defining lots of Drupal behaviors.

Get In Touch

Questions? Comments? We want to know! Drop us a line and let’s start talking.

Learn More Get In Touch
Oct 22 2019
Oct 22

Contextual filters in Drupal allow you to add or remove information (content) to the currently displayed view. The filter acts dynamically based on the URL.

If the provided argument value is in the URL, the view will contain certain results, if the value is not in the URL, the view will be filtered with other results.

This whole concept implies certain complexity, so the best way to clarify it is with an example. 

Keep reading if you want to grasp the idea behind contextual filters in Drupal 8!

Step #1. Create the View

For the purpose of this tutorial, I have created 11 articles with an image and body text.

190930 drupal basic workflow

  191019 contextual filers 001

The goal of this exercise is to create a block with a view displaying articles, related to the currently viewed post. 

  • Click Structure > Views > Add view
  • Set the following options
    • Show Content of type Article
    • Create a Block
    • Display a Grid of fields
    • Choose 12 items per block
  • Click Save and edit

191019 contextual filers 002

  • On the FIELDS section click Add
  • Search for the Image field and select it
  • Click Add and configure fields

191019 contextual filers 003

  • Link the image to the Content

Notice that I created a squared image style (Configuration > Image styles), to display it in the view. More on Image styles on a future tutorial. 

  • Click Apply

  191019 contextual filers 004 

  • In the FIELDS section click the dropdown arrow and select Rearrange

191019 contextual filers 005

  • Drag the Image field above the Title
  • Click Apply

191019 contextual filers 006 

  • Click Grid Settings in the FORMAT section
  • Change the number of columns to 2
  • Click Apply

191019 contextual filers 006

  • Click Save to save the view

 Step #2. - Place the View Block

  • Click Structure > Block layout
  • Scroll down to the Sidebar second region
  • Click Place block

191019 contextual filers 008

NOTICE: I have also removed the 2 blocks on the Sidebar first region.

  • Search for the name of your view in the search box
  • Click Place block

191019 contextual filers 009

  • Restrict the block only to the Article content type
  • Click Save block

191019 contextual filers 010

  • Go to the frontend of your site
  • Open one of your articles.

You will see the block displaying the view the way you have just configured it. However, the currently displayed article will also appear within the view results. That is not user-friendly and looks less professional.

191019 contextual filers 011

Step #3. - Views Contextual Filters

  • Hover your mouse over the block  
  • Click the pencil icon and Edit view

  191019 contextual filers 012

  • Click ADVANCED to display the right-hand column of Views UI
  • Click Add to ad a Contextual filter

191019 contextual filers 013

  • Display only the filters related to Content
  • Select the Entity (Content) ID as a contextual filter
  • Click Add and configure contextual filters

191019 contextual filers 014

This view is displayed in a block. Blocks do not have URLs to reference, so you have to add this “connection” manually. 

  • Click When the filter value is NOT available
  • Select Provide default value
  • Choose Content ID from URL
  • Click Apply

191019 contextual filers 015

  • Scroll down to the Preview section

This is where you can test how the contextual filter works. The system will take the value of the Article (in this case) ID from the URL and according to that value, it will filter and present the right view. 

One thing to notice is that Drupal is smart enough to internally figure out the node id, even if you have enabled Pathauto, or have changed the URL manually in the node edit form.   

  • Enter the ID of one of your articles
  • Click Update preview

191019 contextual filers 016

The view will display just the element related to that particular article. This is not what we want to have. As a matter of fact, it is the exact opposite of what we want to achieve.

  • Click the Content: ID filter
  • Scroll down and click MORE
  • Check Exclude
  • Click Apply

191019 contextual filers 017

By clicking exclude, you are basically telling Drupal to display all results of the view, except the one related to the currently displayed article. 

  • Click Save to save the view

If you go to one of your articles, you will see a block displaying all other related publications, but not the one you are reading.

191019 contextual filers 018

This tutorial only scratches the surface of what is possible with contextual filters. I hope this has helped you to clarify the concept a little more.

Thanks for reading! 


About the author

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

Until Drupal 8.7, we had a drush command that was very useful for developing content entities, and updating them as they evolved with the project. This command, drush entup or drush entity-updates, allowed us to update the definition of the entities and/or their fields.

But for reasons of data integrity, difficult to assume for such a useful and generic command but manipulating and modifying the database schema, it was decided to remove this command from the Core, to give back the responsibility to the modules to update their data structure with full knowledge of the facts.

Although this command is now available through a contributed module, devel entity upates, it is recommended to use it for development purposes only, and not on a project in production, and therefore with data. The reasons are very well detailed on the page of this module and also on the appropriate change record: Support for automatic entity updates has been removed which provides us with many examples to safely perform these entity updates.

But converting a content entity type to make it translatable is not one of the examples given. After searching for the "right recipe" (long live to the tests) for some time, let's try to complete them.

To make a content entity translatable, we must first modify its annotation, and the declaration of its base fields (if necessary), and then apply the database update accordingly.

A simple content entity, my_entity, not translatable, only declares in its annotations its base_table:

* base_table = "my_entity",

While for a content entity to be translatable, it must explicitly declare it, and also declare a data_table (a translatable content entity relies on two database tables) :

*   translatable = TRUE,
*   base_table = "my_entity",
*   data_table = "my_entity_field_data",

It is also necessary to declare the fields that will now be translatable.

For example, for the title field, we add the translatable property with the setTranslatable(TRUE) method

$fields['title'] = BaseFieldDefinition::create('string')
      ->setLabel(t('Name'))
      ->setDescription(t('The name of the Ranges entity entity.'))
      ->setTranslatable(TRUE)
      ->setSettings([
        'max_length' => 255,
        'text_processing' => 0,
      ])
      ->setDefaultValue('')
      ->setDisplayOptions('view', [
        'label' => 'above',
        'type' => 'string',
        'weight' => -4,
      ])
      ->setDisplayOptions('form', [
        'type' => 'string_textfield',
        'weight' => -4,
      ])
      ->setDisplayConfigurable('form', TRUE)
      ->setDisplayConfigurable('view', TRUE)
      ->setRequired(TRUE);

Once these prerequisites have been met, all that remains is to write an update function. Be careful. It is imperative to write this function in a hook_post_update_NAME, a function that will be present in the MY_MODULE.post-update.php file to be created at the root of your module.

This is the function in question.

/**
 * Make the my_entity entity type translatable.
 */
function my_module_post_update_1(&$sandbox) {
  // Here we update the entity type.
  $definition_update_manager = \Drupal::entityDefinitionUpdateManager();
  $entity_type = $definition_update_manager->getEntityType('my_entity');
  $entity_type->set('translatable', TRUE);
  $entity_type->set('data_table', 'my_entity_field_data');

  // We need to update the field storage definitions, for the langcode field, and for all
  // the fields we updated on the entity Class. Add here all the fields you updated in the
  // entity Class by adding setTranslatable(TRUE).
  /** @var \Drupal\Core\Entity\EntityLastInstalledSchemaRepositoryInterface $last_installed_schema_repository */
  $last_installed_schema_repository = \Drupal::service('entity.last_installed_schema.repository');
  $field_storage_definitions = $last_installed_schema_repository->getLastInstalledFieldStorageDefinitions('my_entity');
  $field_storage_definitions['title']->setTranslatable(TRUE);
  $field_storage_definitions['langcode']->setTranslatable(TRUE);

  // We need to add a new field, default langcode.
  $storage_definition = BaseFieldDefinition::create('boolean')
    ->setName('default_langcode')
    ->setLabel(t('Default translation'))
    ->setDescription(t('A flag indicating whether this is the default translation.'))
    ->setTargetEntityTypeId('my_entity')
    ->setTargetBundle(NULL)
    ->setTranslatable(TRUE)
    ->setRevisionable(TRUE)
    ->setDefaultValue(TRUE);
  $field_storage_definitions['default_langcode'] = $storage_definition;

  // And now we can launch the process for updating the entity type and the database 
  // schema, including data migration.
  $definition_update_manager->updateFieldableEntityType($entity_type, $field_storage_definitions, $sandbox);
}

This update function, in addition to modifying the data structure of the content entity, will also migrate data already available. For a project whose development begins, without data, it may be much easier to uninstall the module and then re-install it, which will have the effect of re-installing the content entity with its correct definitions, or to use the drush entity-updates command. But for a well advanced project, for which data has already been entered, this can be more complex and writing this update function by a Drupal developer becomes essential to secure the process on the production site.

To conclude, you will need to ensure that you update the views based on this entity, if they exist. In particular, you will only have to change in the YAML configuration file of the view (and reimport it after been updated), the entry base_table: my_entity by base_table: my_entity_field_data, both for the base table of the view, and also for all the base fields of this entity used in the view.

And above all, don't forget to save before.

Oct 21 2019
Oct 21

As part of being a distributed company, we've found that using Know Your Team on a regular basis helps us communicate outside of projects and tasks and deadlines. It periodically sends us questions and on Fridays at noon it asks, “What’s something you figured out this week?” This gently reminds us to think about the week that just happened, and to reflect on what we’ve learned.

People share everything from a life hack anyone can use to a deep concept in Drupal that only a handful of people will appreciate. We're planning on sharing the best of what we've learned with you.

Number 1—September, 2019

Charlene

I was going to rent a Uhaul cargo van to pick up the boxes I shipped cross country. Unfortunately the boxes were 50 miles away, and Uhaul charges $19.95 + .59 cents a miles = $78.90. I discovered you can rent cargo vans from Enterprise, and it’s cheaper: $19.95/day and 100 miles FREE! I saved myself $58.95!

Chris

A cool thing I learned this week is the power of using usort to sort a given array by a non-intrinsic arbitrary order: Let's say you have a data source that provides a list of items by date shorthand M, T, W, Th, F but the list is not always in that order. Sometimes it's alphabetical. What you do is create template representing your arbitrary order $template = ['M','T','W','Th','F']; And the order provided by your data source is $source_array = ['T','Th','W','F','M'];

Enter the usort method. Usort uses a binary stepping method where it compares each item to the next one one by one until everything is evaluated and properly positioned. Any item in the $source that isn't in the $template will end up being at the beginning.

asort($source_array, function($a, $b) use ($template)
   {
      //get the position of the first comparison item in the template array
      $pos_a = array_search($a, $template);
      //get the position of the second comparison item 
      $pos_b = array_earch($b, $template);
      //are we positive or negative and order accordingly.      
      return $pos_a - $pos_b; 
});
return $source_array;

Jason

  • I learned that you probably want array_shift instead of array_pop. I mean, when are you ever taking the last thing and not the first? (Obviously, sometimes. But not very often.)
  • I really miss D8 when forced to work on a D7 site.
  • I built a custom configuration page so client could add custom text to a thing. Then you just get that custom text by using \Drupal::config('thing')->get('fieldname'). Super easy.
  • When you create a new service you use the Drupal service registry to access your class, you don't instantiate a new instance of the class. Which, I'm pretty sure, is the whole point of registering a service.
  • Creating a custom block plugin is super easy. And you can even get started using Drupal console. drupal generate:plugin:block

Jill

FOUC, Flash of Unstyled Content, is when a web page loads without styles for less than a second. One possible method of correcting this is by placing scripts at the bottom of the page.

Les

  • You can change the default local IP address blocks that Docker Compose assigns to your projects, which is useful to avoid conflicts with other services that might want to use those same IPs. https://serverfault.com/questions/916941/configuring-docker-to-not-use-t...
  • Confluence has an undocumented bulk-issue creation mechanism, if you are right-click-creating from a basic table.

Tess

Ansible does not treat localhost as special, but rather like any other fully qualified domain. Furthermore, when a host is in multiple groups in an inventory, they groups are not applied separately, but together as a merged item. To combine inventories while keeping localhostspan> separate, the trick is to create a fake mysite.localhost inventory item, with ansible_connection=local to skip any domain lookups.

Oct 21 2019
Oct 21

The 2019 Drupal South sprint is shaping up to be the biggest contribution event in the Australia-Pacific region since Drupalcon Sydney 2013.

This year, core-contributors with over 3000 commit credits between them will be in attendance, including 3 members of the core committers team, 3 members of the Drupal security team, 7 core module/subsystem maintainers as well as maintainers of major contrib modules and command-line tools.

With Drupal 9 just around the corner, this will be a great chance to help the community get popular modules ready for Drupal 9, meet some great people and help shape the future of Drupal.

The PreviousNext team are sponsoring and helping to run the sprint day on Wednesday, November 27th 2019, and there are a few things you can do now to hit the ground running on the day.

What's a Sprint Day about anyway?

Contribution Sprints are a great opportunity to get involved in contributing to Drupal. Contributions don't have to be just about code. Issue triage, documentation, and manual testing are examples of non-code contributions.

If you are new to contributing, you can take a look at the New Contributor tasks on the Drupal.org Contributor Tasks page.

While there will be experienced contributors there on the day to help, keep in mind, this is not a training session. :-)

Set Up a Development Environment

There is more than one way to shear a sheep, and there is also more than one way to set up a local development environment for working on Drupal.

If you don't already have a local development environment setup, we recommend using Docker Compose for local development - follow the instructions for installing Docker Compose on OSX, Windows and Linux.

Once you've setup Docker compose, you need to setup a folder containing your docker-compose.yml and a clone of Drupal core. The instructions for that vary depending on your operating system, we have instructions below for OSX, Windows and Linux, although please note the Windows version is untested.

Mac OSX

mkdir -p ~/dev/drupal
cd ~/dev/drupal
wget https://gist.githubusercontent.com/larowlan/9ba2c569fd52e8ac12aee962cc9319c9/raw/ef35764c2bf60b07996fdc57c747c3c99a855b80/docker-compose.yml
git clone --branch 8.9.x https://git.drupalcode.org/project/drupal.git app
docker-compose up -d
docker-compose run -w /data/app app composer install

Windows

git clone --branch 8.9.x https://git.drupalcode.org/project/drupal.git app
docker-compose up -d
docker-compose run -w /data/app app composer install

Linux

mkdir -p ~/dev/drupal # or wherever you want to put the folder
cd ~/dev/drupal
wget https://gist.githubusercontent.com/larowlan/63a0f6efacee71b483af3a2184178dd0/raw/248dff13557efa533c0ca297d39c87cd3eb348fe/docker-compose.ymlgit clone --branch 8.9.x https://git.drupalcode.org/project/drupal.git app
docker-compose up -d
docker-compose exec app /bin/bash -c "cd /data/app && composer install"

If you have any issues, join us on Drupal slack in the #australia-nz channel beforehand and we'll be happy to answer any questions you might have.

Find Issues to Work On

If you want to see what might be an interesting issue to work on, head over to the Drupal.org Issue Queue and look for issues tagged with 'DrupalSouth 2019'. These are issues that others have tagged.

You can also tag an issue yourself to be added to the list.

Being face-to-face with fellow contributors is a great opportunity to have discussions and put forward ideas. Don't feel like you need to come away from the day having completed lines and lines of code.

We look forward to seeing you all there!

Photo of Lee Rowlands

Posted by Lee Rowlands
Senior Drupal Developer

Dated 21 October 2019

Add new comment

Oct 20 2019
Oct 20

There has been amazing progress with Drupal’s API-First Initiative in the past few years. A major milestone was when JSON:API was added to core as a stable module in Drupal 8.7.

An API-first Drupal enables many things, but probably the best known use case of APIs is a decoupled front-end. Numerous blog posts and at least one book have been been written about decoupled Drupal. There have been many conference sessions on the topic, and there is an entire conference focused only on decoupled CMS architectures.

These exciting developments ensure that Drupal stays relevant, and that it is a first-class choice for building ambitious digital experiences in the modern web development landscape, where component-based JavaScript front-end libraries and frameworks like React and Vue are so popular.

A lot of the activity around decoupled Drupal originates from developers and other employees of Drupal agencies working on projects for large enterprises and organizations. These projects might require a content service not just for for app-like websites, but also for other publishing channels like native mobile apps and digital kiosks.

However, from a practical requirements and resources point of view, the vast majority of website owners just need a traditional website. And for someone like me, who often works as the only developer on (non-ambitious?) traditional website projects, JavaScript-based decoupled front-ends are interesting, but not required.

There are other ways

When so much attention is focused on APIs and JavaScript, it is possible to miss or forget the fact that loose coupling and components are general architectural principles that can be implemented in many different ways. A different approach can be used to get many of the benefits of a decoupled, component-based front-end.

Component-based theming is a commonly used name for a specific way to develop and organize Twig templates and related assets in Drupal themes. I am not sure how well known it is that component-based theming is actually a way to decouple most of the front-end from Drupal.

The best known benefit of this decoupling approach is the possibility to develop most of the theme layer independently of Drupal, with the help of a tool like Pattern Lab. But while there are already some very interesting examples out there, I believe that the full potential of decoupled Twig components is yet to be realized. By this I mean Twig component libraries that can be used with minimal integration effort in both Drupal and WordPress, for example. I believe that agencies offering services for both platforms could benefit a lot from this.

For ‘small Drupal’ too

Since it is often associated with style guides and design systems, it is possible to get the impression that component-based theming is only useful for large teams working on projects for large clients. However, I know from my own experience that even single-developer projects can benefit from it.

Component-based theming adds very little overhead to regular Drupal theming. Thinking in components can improve the quality of your work in many ways, and most importantly, building anything from blocks is fun!

There is no requirement to develop a style guide – although you might find that you end up with the beginnings of one as a happy side result.

A decoupled front-end means that work on the theme can be started even before Drupal is installed, and clients can be shown the design in a real browser much sooner.

So unless you are working on a project that requires a JavaScript-based front-end, I can warmly recommend component-based theming to teams and projects of all sizes.

Decoupling the front-end without APIs and JavaScript

https://www.aleksip.net/decoupling-the-front-end-without-apis-and-javasc...

Oct 20 2019
Oct 20

Supercharge Drupal 8 migration process by externalizing data export and transformation.

Nuvole offers a training at DrupalCon Amsterdam: "Drupal 8 Migration as a process" - register until October 27.

When having to import data onto a Drupal 8 site there is no other choice than relying on core’s Migrate API and its contrib ecosystem. The Migrate API in Drupal 8 implements a rather classic Extract, Transform, Load (ETL) process, with the following "Drupal-lingo" twists:

  • The extract phase is called "source" and it uses a source plugin to read data from external systems, be it a Drupal 7 database, a CSV file, a REST web service, etc.
  • The transform phase is called "process" and it uses process plugins to process and transform data
  • The load phase is called "destination" and it uses destination plugins to import data into specific Drupal 8 entity storages (e.g. nodes, taxonomy terms, etc.)

To recap, Drupal core implements the ETL process as follows:

  • Source plugins extract the data from the source.
  • Process plugins transform the data.
  • Destination plugins save the data as Drupal 8 entities.

Limitations of standard Drupal 8 ETL process

In the process described above the three steps are executed at the same moment in time, sequentially, every time we run a migration import. In this scenario we are to lose one of the most valuable aspects of an ETL process: testing and validating data prior to import.

Also, the process above easily accommodates for multiple data sources to be consolidated into one, coherent, dataset. With Drupal Migrate API this is only possible by using chained source plugin, and it can only run on the destination site. This is quite a limitation in complex enterprise scenarios, where displayed data is often the result of complex and convoluted transformations in the backend.

A middle-format approach

At Nuvole we have adopted a so called "middle-format approach". The process simply moves the Extract and Transform parts outside Drupal so to ease the production of an easy to import dataset, in a well known middle-format (such as JSON API).

This approach has proved very successful in complex scenarios and, while completely leveraging the standard Drupal 8 migration process, it also allows to:

  1. Aggregate data from different sources (not only Drupal 7 databases)
  2. Test the data transformation process
  3. Test imported Drupal 8 data
  4. Easily automate the points above

The process looks like the following:

The approach outlined above brings the following benefits:

  • Exported data can be reviewed by the client and iteratively refined
  • Since Drupal 8 is not a precondition to export and transform data, data export site building can run in parallel, making the whole migration process much more efficient
  • Exported data can be presented to the different stakeholders using a user friendly UI, even before starting any Drupal 8 development
  • Since the data uses a well-known middle-format building the import process (as Drupal core’s Migrate plugins) is straightforward and allows to maximize code reusability

Middle-format migration at work

At Nuvole we have successfully used the middle-format approach to incrementally transform, review and import data over several years, on complex sites such as the World Food Programme main website. In that scenario we had to consolidate data coming from two Drupal 7 sites (plus a number of external data sources) in 13 different languages, over a two years period.

We have recently open-sourced a simplified version of the tool we have used to export and transform data, you can find its boilerplate code here.

We will run an hands-on session on how to use such a tool to plan and execute data exports in our upcoming DrupalCon Amsterdam training.

Oct 18 2019
Oct 18

“For me, forgiveness and compassion are always linked: how do we hold people accountable for wrongdoing and yet at the same time remain in touch with their humanity enough to believe in their capacity to be transformed?”

–bell hooks

One of the questions that we hear regularly at the Drupal Community Working Group (CWG) is how we handle people who have been banned from various spaces in the Drupal community for violations of our community Code of Conduct.

As our conflict resolution policy and process states, one of the potential actions that the CWG can take is to impose permanent or temporary bans from some or all Drupal community spaces, which may be both physical (DrupalCamps and other meetups) and virtual (community Slack channels, Drupal.org, etc.).

While we work to avoid bans whenever possible, sometimes they are unavoidable as an individual's behavior can have impacts that go far beyond just those individuals who may be directly involved. While the CWG’s original charter focused on interpersonal conflicts, the updated version we adopted at the end of last year makes it clear that the group’s primary responsibility is for the overall health of the community, which means that we need to consider the impact of a person’s ongoing participation on others in the community, not just on those who may have raised concerns.

In those cases where an individual is banned, we keep records in case they need to be reviewed in the future or additional action is required. However, we do not maintain a comprehensive “master list” of banned individuals.

If and when the CWG needs to issue an indefinite ban (or when an individual chooses to leave the community on their own, rather than working with us), we always let the individual involved know that they can reach out to us at any time. We generally try to avoid using the term “permanent ban”, as we recognize that people can transform and change over time; however, we are clear that indefinite bans remain in effect until such time as we agree to lift them, and that any attempts to circumvent bans may result in additional action.

On those occasions when a banned individual reaches out to us expressing interest in rejoining the community, we begin an established process where we start by examining the situation very carefully before agreeing to proceed. This involves reviewing the individual’s past history and the interactions they have had with other community members since their ban, as well as reaching out to those who have filed past reports and/or others who we are aware may have been impacted by this person’s past words and actions to get their feedback. If we are aware that the individual has already taken action in both public and private settings to address their past behavior before coming to us, that is a very positive sign.

To be clear, however, what we are looking for is for the individual to not just show remorse or regret for their actions, but also demonstrate a commitment to address and repair the damage their past behavior has caused. They need to be willing to take responsibility for their words and actions and the impact they have on others. In addition to demonstrating the ability to hold themselves accountable, they must also agree to allow others in the community to hold them accountable. If the CWG is not confident that these conditions can be met, we will not proceed further, instead recommending that the individual engage in additional reflection before coming back to us.

If and when we agree that the individual is ready to move forward with reintegration into the community, the next step is to collaboratively develop an action plan with clear goals and milestones. This plan must not only satisfy the questions and concerns that have been raised by others, but also include safeguards to address any potential for relapses in negative behavior, such as regular check-ins with the CWG and/or others and limitations in access to various Drupal community spaces. As the individual continues to demonstrate consistently positive behavior and is able to re-establish trust with more members of the community, they may gain additional access and privileges over time. However, if they engage in behavior that violates the Code of Conduct at any point in the process, they remain subject to immediate reinstatement of previous bans and/or other actions.

This process is difficult and hard, and it’s not for everyone. We understand that, and we don’t blame anyone who chooses to walk away. For those who are willing to be open and vulnerable, face their mistakes head on, and learn from them, we’re there every step of the way. As our values and principles state, “The expectation of leaders is not that they are perfect or have years of experience. The expectation of leaders is that they learn from their mistakes, rise to the challenge, support others ahead of their own needs or ego, and continuously work to improve themselves.”

Oct 18 2019
Oct 18

The Promote Drupal team invites you to take part in a 15 minute 1:1 interview contributing to growing our understanding of your needs during the evaluation process. 
 
We have made great strides with the Promote Drupal initiative to provide product and project information resources that highlight the value of Drupal in helping enterprises and agencies leverage an open source CMS platform for their businesses. We want to learn from you in order to continue to deliver a project that offers significant value and that meets organizations’ needs.  

Calling all members of the Drupal Community

The Promote Drupal team invites you to also take part in a 15 minute 1:1 interview contributing to growing our understanding of your marketing needs. From agencies to developers, we value your insight as we work to advance the Promote Drupal initiative. We have made great strides with this initiative, including:

 
Come with your ideas, thoughts on the initiative and where you think our focus should be for the next 12 months!

Oct 18 2019
Oct 18

This is a beginner’s tutorial that will quickly get you up and running with media entities and a media entity browser in Drupal 8.

One of the best parts of Drupal 8 is the in-core feature of media entities. This allows Drupal to manage resources that otherwise it would not be able to. It accomplishes this by creating a bridge relationship between Drupal’s CMS, media files and external sources. It’s basically an entity referencing all kinds of media files like images, videos, documents or other external sources like Tweets, embed videos, etc.

This tutorial is for the core “media” module set up, not to be confused with the contributed module “media_entity” module. If your Drupal setup already has this module and its sub-modules enabled in your setup, you may want to migrate your setup to the core module “media” following the instructions on the project page at https://www.drupal.org/project/media_entity

First Things First, Enable the Media Module:

Enable the media module (NOT entity_media). The “media” module comes with Drupal core so you don’t need to install it. All you have to do is enable it.

Using the Drush command:

drush en media -y

- Or: In the Drupal’s interface, go to /admin/modules, search for media in the search box, check the Media module and install to enable the module.

Configure or Create Media types:

Once the Media module is enabled, it will create the basic media types. You can find these under the structure menu. Media types are entity types just like nodes allowing you to add custom fields and adjust or make new displays to your needs.

To keep things simple in this tutorial, I will concentrate on the “Image” Media type. But you can apply the same principals to any other type. The difference will be on how the sources are being added and display just like node types.

Display thew “name” field (optional) :

It’s my personal preference to always enable the “Name” field in the forms of media types. This way you will be forced to add a name to your media type that you can later use for searching in the media browser.
(For even more searching options, you can add taxonomy tag field to group resources and so on. But for this example, let’s keep it simple.)

For this example navigate to /admin/structure/media/manage/image/form-display

Now drag into the content area “Name” field and drag to hide or disable all other fields with the exception of the “Image” field, so all you have displayed on the form is the image and name field. This will come in handy when creating the media browser view in the next step.

Installing the Entity Browser Modules and Creating Media Browsers:

The media browser is what you will use to pick and add new images to the content where the media entity reference field is being used. It basically adds a widget for your field. The media entities can also be managed via the content page in the “Media” tab.

Install these Modules: Chaos Tools, Entity Browser:

composer require drupal/ctools
composer require drupal/entity_browser


Then enable Chaos Tools, Entity Browser, and Entity Browser IEF.

drush en ctools
drush en entity_browser
drush en entity_browser_entity_form

- Or: In the Drupal’s interface, go to /admin/modules  Ctools, Entity Browser, and Entity Browser IEF (you may have to enable the entity browser first).

Create a View to Use in the Media Browser.

We create this view first, in order to use it in the media browser we will create later, to list the available images in the media browser.

1. Go to /admin/structure/views/add:

  • Name your new view “Image Media Entity Browser Listing” 
  • View Settings: Show: Media of type: Image sorted by: Newest first
  • Click on Save and Edit

2. Now Configure the view:

  • Top left under “Displays” click on the “+Add” button and select “Entity browser”
  • FORMAT: pick Table
  • Add FIELDS:
    • Name
    • Thumbnail - options:
      • Label: Thumbnail
      • Formatter: Image
      • Image Style: Thumbnail
    • Entity browser bulk select form - options:
      • Label: Select
  • Rearrange the fields in this order: Entity Select, Thumbnail, Name
  • Add FILTER CRITERIA:
    • Name (media) - options:
      • Check the “Expose this filer to visitors”
      • Label: Search by name
      • Operator: Contains
  • Save the view.

Create the Entity Browser for Image media:

Got to /admin/config/content/entity_browser and click on the “+Add Entity Browser” button.

  • General Setting tab:
    • Label: Image Media Entity Browser
  • Widget Settings tab:
    • Add widget plugin:
      • View - options:
        • Label: Image Library
        • Submit button text: Select
        • View, view display: Media Browser: Image Media Entity Browser Listing
      • Entity Form - options:
        • Label: Image Upload
        • Submit button text: Upload
        • Entity type: Media
        • Bundle: Image
        • Form mode: Default

Create a Media Entity Reference Field to Use the Image Media Browser

Congrats! So you already set up the media entities and the media browser. Now all you have to do is start using it on your content builds.

Now, whenever you’re creating content, you will have a field that opens the media browser on a modal window with options to search, select, and upload new images.

That’s it! - Now all you have to do is repeat the process, configure things to your preferences and soon you will be a pro on media entities. Next, I’ll add a few other recommendations if you want to improve upon your setup.

Recommended modules that can add more power to your entity setups:

  • embed
  • video_embed_field
  • entity_embed
  • dropzonejs

Migrating Existing File Fields:

If you are working on an existing Drupal 8 setup and you want to migrate old file fields to a media entity field, follow this tutorial for instructions: Basic Migration Of File Fields To Media Entities.

Happy coding!

Oct 18 2019
Oct 18

The Migrate File to Media module provides an easy way to migrate old file fields like images, files, videos, etc, into the media entities with a few drush commands.

So you can have an understanding of how the migration process works, In this tutorial, we will run through a few quick step-by-step instructions on how to migrate specific image field types to image entity reference fields.

Media Module

The core media module is what creates the “media” entity types. If you haven’t set this up yet, or if you are not too familiar with media entity setup, I highly recommend following this tutorial “Drupal 8 Basic Media And Media Browser Setup For Beginners”, before you continue with this tutorial. 

If you still want to continue with a basic setup of media entities, simply enable/install the core media module that already comes with Drupal 8 core (NOT the media_entity module). Upon installation, it will automatically create a few media entity bundles for you, including the image media bundle we will be using for this tutorial.

Migrate File to Media module

Now for the migration, install the “Migrate File to Media module”

composer require drupal/migrate_file_to_media

Enable the “migrate_file_to_media” module:

drush en migrate_file_to_media

It will warn you that it will enable the following (“migrate”,”migrate_drupal”, “migate_plus” and “migrate_tools”) if they’re not enabled yet.

Once we have all of this in place, we can start using some simple commands to do the work for us. However, first, we need to create some mapping so that the migration module knows from what source fields to what destination fields.

Destination

We can’t migrate a source without a road map and destination. In the example of this tutorial, we will be performing a migration of the field “field_image” (image field type), in the content bundle “article” (node entity type) into a new media entity reference field that we will be creating using drush commands.

When migrating a site with a vast amount of content, I recommend to become familiar with the site’s content structure, the document where all the images are located, and in what content type bundles.

Generate the destination media field in the article node types using drush:

drush migrate:file-media-fields node article image image

Command bisection:

drush migrate:file-media-fields [entity_type] [bundle] [source_field_type] [destination_media_bundle]

  • [entity_type]: (The parent entity type) In the case of our example, it is a node content type. But other bundle types, like paragraphs or taxonomies for example, can be used.
  • [bundle]: (The parent bundle type) In this example, the “article”
  • [source_field_type]: (The source field type) This will be the source field type. Not to be confused with the name of the field, but the type of field. When running the command, this will check for all the fields of type “image” as in this tutorial.
  • [destination_media_bundle]: (The destination field media bundle) This will be the destination field bundle type. This will create a media entity reference field of type “images” for every image field found on the parent node bundle type. It will also give it the same name with the suffix of “_media” as in this tutorial.

Roadmap

Ok, so we created the destination. Now let’s create the roadmap so that the migration knows where and how to migrate data from the old to new by generating some YML files.

Before generating the YML files, we need to generate/create a custom module where the new files will reside: (Just generate the module, don’t enable it yet.)

Basic module generate command, run on web-root:

drupal generate:module
# Note: follow the instructions on the screen and give it the machine name “basic_migration_example”

- Or: Module generate command with all options for this tutorial, run on your web-root:

drupal generate:module --module="Basic Migration Example 101" --machine-name="basic_migration_example" --module-path="modules/custom" --description="Basic Migration Tutorial 101" --core="8.x" --package="Custom" --features-bundle=”no” --test=”yes” --dependencies=”no” --twigtemplate=”no” --composer --module-file

Once the module is generated, clear the cache:

drush cr

Now we are ready to start generating the YML files, run:

drush generate yml-migrate_file_to_media_migration_media

You will get something like this. For this tutorial please follow the instructions as follows:

Welcome to yml-migrate_file_to_media_migration_media generator!

–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––

 Module machine name:
 ➤ basic_migration_example

 Module name:
 ➤ Basic Migration Example 101

 Plugin label [Example]:
 ➤ article_media_basic_migration

 Plugin ID [example]:
 ➤ article_media_basic_migration

 Migration Group [media]:
 ➤ ( Press Enter Button to use suggested "media" )

 Entity Type [node]:
 ➤ ( Press Enter Button to use suggested "node")

 Source Bundle:
 ➤ article

 Source Field Names (comma separated) [field_image]:
 ➤ ( Press Enter Button to use suggested "field_image" )

 Target Media Type [image]:
 ➤ ( Press Enter Button to use suggested "image" )

 Target Field [field_media_image]:
 ➤ ( Press Enter Button to use suggested "field_media_image" )

 Language Code [en]:
 ➤ ( Press Enter Button to use suggested "en" )

 Translation languages (comma separated) [none]:
 ➤ ( Press Enter Button "none" )

The new files will be created in your new module folder /config/install.

There will be two YML files generated per migration ID, these file names will be suffixed with _step1 and _step2. You can open these files and adjust them as needed, but for this tutorial, the configuration we gave it on the YML generation process is just what we need.

If you want to look at YML examples, you will find some under the migrate_file_to_media module folder: modules/contrib/migrate_file_to_media/migrate_file_to_media_example/

Once you install/enable the new module we just created for this migration, all the YML configurations will be loaded to your Drupal 8 database setup.

Editing Migration Configurations after installation:

Once loaded into the system, if you need to make modifications, you need to get familiarized with the configuration management interface and how it all works to make changes. Here is a good read on that: https://www.ostraining.com/blog/drupal/config/

Install a New Module and YML files:

Ok, so now that the YML files are created, let’s enable/install the new module, and the new YML configuration files will be added to the system as well.

Enable new custom module:

drush en basic_migration_example

And now, check the migration status by running: (This will also give you the generated migration ids)

drush migrate:status

You will get a result of something like this:

Group Migration ID Status Total Imported Unprs media article-media-basic-migration_step1 Idle 3 0 3 media article-media-basic-migration_step2 Idle 3 0 3             Default  ***Ignore the “Default (default)” group*** — 0 0 0

Duplicate File Detection (!)

– This is an important step, DO NOT SKIP – In order to run migrations, first you need to run a file duplication check for all migrations.

drush migrate:duplicate-file-detection [migration-id]

For our tutorial, run file duplication checks run “_step1” of the migration. You will have to do this for every first instance of your migrations one by one as I have not been able to figure out another way to make this command just run through all in one command.

For this tutorial, run:

drush migrate:duplicate-file-detection article_media_basic_migration_step1

Migration time:

Now, if all is set up correctly, we can run a migration:

Migrate all migration of media group by group id:

drush migrate:import --group=media 

- Or: Run single migration by ids:

drush migrate:import article_media_basic_migration_step1 
drush migrate:import article_media_basic_migration_step2 

If it all goes well, you should see that the imported will match the total and unprocessed will be 0. Run:

drush migrate:status

Results should look like this:

Group Migration ID Status Total Imported Unprs media article-media-basic-migration_step1 Idle 3 3 0 media article-media-basic-migration_step2 Idle 3 3 0             Default  ***Ignore the “Default (default)” group*** — 0 0 0

Take a look at the content of your article. You will now see that the new fields have been populated with the right image media entity reference. Just adjust your displays to show the new media field and hide or remove them altogether with the old image field when all your migration is complete.

A few more drush migration commands that may come useful:

  • drush migrate –help
  • drush migrate:rollback
  • drush migrate:stop
  • drush migrate:reset-status
  • drush migrate:import  [_OPTIONS_] :
    • –feedback - Frequency of progress messages, in seconds or items processed ( great for debugging)
    • –update - In addition to processing unimported items from the source, update previously-imported items with new data
    • –group - Name of the migration group to run
    • –idlist - A comma-delimited list of ids to import or rollback. If unspecified, migrate imports all pending items or rolls back all items for the content set.
    • –limit - Limit on the length of each migration process, expressed in seconds or number of items
    • –rollback - Rollback specified migration(s) if applicable
    • –stop - Stop specified migration(s) if applicable
    • Less commonly used options:
      • –file_function - Override file function to use when migrating images
      • –force - Force an operation to run, even if all dependencies are not satisfied
      • –needs-update - Reimport up to 10K records where needs_update=1. This option is only needed when your Drupal DB is on a different DB server from your source data. Otherwise, these records get migrated with just migrate-import.
      • –instrument - Capture performance information (timer, memory, or all)

Further information on Drush Migrate Tools commands visit: https://www.drupal.org/node/1561820

Happy coding!

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