Feeds

Author

Upgrade Your Drupal Skills

We trained 1,000+ Drupal Developers over the last decade.

See Advanced Courses NAH, I know Enough
Jan 08 2024
Jan 08

The Visual Layout Suite module is a great improvement of the core editorial experience leveraging Layout Builder and many contrib modules. Basicailly, it enables Layout Builder, depends on several contrib modules that improves Layout Builder and ads its custom magic.

One of the most important features is the use of utility classes allowing the configuration of the look and feel easily from the frontend with an instant preview. Additionally, it allows to restrict the utility classes a user can use, so the user is not overwhelmed by the extra options and also the look and feel of the page can be limited to be compliant with the style guide of the site. New utility classes can be easily added and components can be configured to only use a reduced set of utility classes to un clutter the UI.

VLSuite integrates with any Drupal component that integrates with Layout Builder and more: entity fields, paragraphs, Views, SDC, medias, etc. And there's no dependency on any theme, external service or certain entities. The only soft dependency is a Bootstrap 5 theme to enjoy all the VLSuite features out of the box. However, you can use any theme as long as it provides the utility classes you require. T

All the previous information means you could add VLSuite to an existing site with minimal effort if it is Boostrap based. If your theme is not a Bootstrap theme but provides utility clases (like Tailwind CSS) you will need more work to map the utility classes and the CSS classes, but still you can use it. If your theme doesn't use utility classes at all you will need more effort to implement them in your theme, but still the VLSuite won't alter your site, you don't have to dump your theme but extend it.

But those sentences are empty and hard to visualize just reading a text. That's why we have created a demo video about some of the capabilities of the VLSuite. The idea is make a copy of the current Drupal.org home page just using the VLSuite a Bootstrap 5 theme with no other customization (apart from what is stated in the module's page).

The result is pretty similar, specially taking into account that the theme was no edited at all, not even the colors. It is just Radix subtheme.

Judge by yourself:

On the left, the Drupal.org home (January, 2024). On the right, the copy by the VLSuite module.

As you can see, there are differences. The colors are similar but different, the spacing is not the same, the VLSuite copy is missing the footer (was not included in the copy) and not all components have the same alignment, etc. But remember this has been done without any customization. Imagine the possibilities when you add the standard Drupal theming techniques plus adding your own utility classes.

Video demo of the VLSuite capabilities

See the complete demo:

The video is long, almost 40 minutes, so here is an index:

  1. 00:00 Intro
  2. 00:47 VLSuite and Utility Classes
  3. 02:01 Environment
  4. 02:58 Copying D.org home page: hero component
  5. 04:27 Using Utility classes
  6. 09:33 Copying D.org home page: Drupal 7 EOL banner component
  7. 11:32 Copying D.org home page: Ukraine banner component
  8. 13:13 Copying D.org home page: Drupal for component
  9. 20:31 Copying D.org home page: Drupal Con Sponsorship banner component
  10. 25:17 Copying D.org home page: CTA collection component
  11. 29:32 Copying D.org home page: Drupal in the Real World banner component
  12. 31:40 Copying D.org home page: Carousel component
  13. 35:53 Copying D.org home page: Last components
  14. 36:43 Outro

Comments on the video

Improvements

I could have enabled some utility classes to mimic more closely the copied page. Also, with content types for the CTAs of the "By Industry" and "By Feature" sections their fields (even paragraphs) could have been used. For those sections a View is the best option. However, I wanted to keep the demo as simple as possible.  But remember those options are open with the VLSuite.

Performance

There are some concerns about using Layout Builder because of the performance. VLSuite heavily relies on Layout Builder and the landing page that mimics the Drupal.org home page has a lot of blocks and entities. However, profiling the page with Webprofiler the results are good:

   Memory   Time Empty home page  ~40Mb ~260 ms D.org copied home page   ~50Mb ~900 ms

The empty page is just the site's home page with no content displayed. Both pages were loaded after clearing the caches and loading some other pages so the general cache is warmed but not the contents of the pages being tested. While the VLSuite page required more resources, something expected given that the page had content while the other page was empty, there's no big difference. And the VLSuite features a lot of components.

Final words

We consider this video a good example of what can be accomplished using the VLSuite. The module is under heavy development and we plan to add more features and improve the current ones. If you think this module is useful please use it and give us any feedback on issues or improvements. 

Sep 25 2023
Sep 25

For this year's Drupal Camp a joint effort has been made to offer three different workshops on testing with Drupal. One of them was a Behat workshop where a theoretical basis was given and different practical exercises with Behat were proposed. 

Through this article we want to make this same Behat workshop available to anyone who is interested so that they access the presentation and the exercises. Unfortunately, the slides are only available in Spanish. However, the exercises are written in English so even if you don't speak Spanish you may benefit of doing the practical part.

The workshop

The workshop uses two repositories, the first is a presentation used as a guide for the workshop, and the second is a pre-configured environment with Behat ready to be run.

The presentation can be viewed online directly from the browser. It consists of three parts:

  1. A very basic introduction to Behat, supported by more information during the practical part.
  2. How to configure the environment to perform the exercises using the second repository. This step is very simple as it is based on Metadrop's Boilerplate, which includes a set of Docker containers already configured to run Drupal and Behat (as well as other tools).
  3. The practical part, where exercises are presented in the form of user stories to be written using Behat.

The interesting thing about the practical part is that all the exercises have a solution that can be consulted to validate the exercise. This allows the doer to have at least one reference solution to each problem.

How to

First go to the workshop's slides. Read the first part with the introduction to Behat. Since it is a presentation, there are not many details but you can learn more in the official Behat documentation or in other references you can find.

For the practical part, check the slide "Montar entorno" (which is duplicated, once at the beginning of the presentation and then at the beginning of the practical part), where you can find the the three simple commands required:

  1. Clone the repo:
    git clone [email protected]:rsanzante/drupalcampspain2023-behat-workshop.git
  2. Install PHP pacakges (run inside the cloned repository):
    composer install              
  3. Run the assistant to configure the environment:
    composer boilerplate:assistant

    The assitant will ask several questions but the default values are fine except the profile to install:  you must select the Umami profile. This is because the workshop makes use of the functionalities and content of this demo profile that comes with the Drupal core. It also asks whether to create a Radix subtheme; although we can leave the default option (yes), it is not required for the workshop and it takes a while to generate it, so it's better not to generate it.

The exercise repository contains a workshop branch and several tags:

Commits and repository tags from the practical part. The dev branch and "Initial commit" commit are generated by the assistant and can be ignored (or select not to initialise the Git repository so that it doesn't add the branch and commit).

Start by jumping to the first tag, initial-setup, and test that Behat works (make shell and then just behat). Then, checkout the tag of the first exercise (us1-exercise) and check the directory tests/functional/behat/features/umami/ to find the exercise. Once done, you can checkout the next tag to see the suggested solution (us1-solution). This cycle is repeated for all exercises.

Each exercise is completed in a file and the solution is in another file, so that both solutions can coexist (the suggested one and the one wrote by the person doing the workshop). In fact, the suggested solutions are not executed because the files do not have the .feature extension. The last commit renames the suggested solutions by adding this extension, so that these solutions can be tested quickly and easily.

URL to clone exercises repository: [email protected]:rsanzante/drupalcampspain2023-behat-workshop.git
Sep 19 2023
Sep 19

Drupal Camp Spain is happening this Friday! This year is in Seville, at the Faculty of Computer Science, University of Seville. From Thursday 21st to Saturday 23rd, including not only a lot of talks but also a Business Day where companies or individual freelancers can meet with other Drupal agents and share experiences and ideas.

Photo by Joan Oger on Unsplash.

Thanks!

A Drupal Camp is an event where a Drupal community can meet and exchange knowledge in real life, as opposed to the digital interactions of the rest of the year. It is the great opportunity better known these people,  these that you talk to in the Drupal chat channels or see in the issue queues, Twitter threads or any other Internet-based channel.

I would like to thanks the organizers, people that are volunteering to make this happens. They have work hard, believe me, they deserve message of thanks, so: thank you for making it possible!

In addition, there are many speakers. They also collaborate with the event without any kind of payment or compensation, you could say just for fun. People invest many hours in preparing their talks, so we should also be grateful to them. Ok, I am one of the speakers, but let me at least ask for recognition of all the other speakers that will be there.

Metadrop will be there

Talking about speakers, Metadrop will be there with four sessions and one workshop. Let me detail what will offer to the people coming to the Drupal Camp.

The Form API Workflow

This talk is the same featured in the past Drupal Con and Drupal Dev Days. Yes, I am touring with this talk. I could not be in a rock band touring the world but I least I am a Drupal developer touring Europe. And I don't have to deal with music critics or record sales so I think is better this way.

Come if you want to deep dive into the Form API internals and what happens when a form is being generated, rebuilt or submitted or how AJAX works. 

Friday, 22nd, 18:30 - Minsait Room

La importancia del QA (Control de calidad): Optimización del proceso y herramientas clave

This walk will be Spanish, hence the title in Spanish. My colleague Aberto Fernández will talk about the QA process, why it is important and will provide some strategies that work for us very well to optimize the developing process. QA allows to identify and fix errors sooner saving efforts and resources. We strongly believe in the QA automated tools, the safe net that allows us to focus on the new features and development instead of with with old known bugs or unexpected errors on production. Embrace QA and save your sleep.

Saturday, 23rd, 11:30 - Minsait Room

Managing Complexity: Best Practices for Software Development Project Managers

Development is not the only factor in the success of a project. Jorge Tutor will talk about many other things that are very important for the successful delivery of a project. I honestly believe that development skills are key to this, a company or freelancer without the technical knowledge will struggle to meet the requirements of complex projects, but lack of management skills will bring down the most skilled developer. This is especially true when it comes to projects with many layers and parties involved. Jorge will share his experience and knows very well what he is talking about: scope, risks, stakeholder expectations, budget, team, communication, change management, team morale and more.

Saturday, 23rd, 11:30 - Hiberus Room

Visual Layout Suite para site builders con gran ambición (ambitious site builders)

Visual Layout Suite is one of our big bets for Drupal. The strongly think this module will vastly help content editors to generate their content. You could label it as low-code approach because with no code you will be able to create landings and components with different shapes and look and feel, including for example carrusel of any content. No need to code or add any CSS, everything is already included and ready to be use by the module. Cristian Aliaga, the main developer, and Alberto Ortega, also involved in the development, will explain how this works under the hood and show different usage examples. The module is under heavy development but already ready to be use in production. And if you want more you can always check the session at Drupal Dev Days Vienna (you can find the video in our post about the event). This talk will be in Spanish.

Saturday, 23rd, 12:30 - Hiberus Room

Boosting quality in Drupal

This year, a joint effort has been made to raise awareness of different Drupal testing techniques, with the aim of helping developers to ensure the quality of Drupal projects. There will be three related workshops on Drupal testing: Behat, Kernel tests and PHPUnit.

I will be the host of the first workshop. Behat is a Behavior Driven Development framework based on Cucumber. In our experience, it helps in several areas: first, it allows to define and run automatic tests on our projects. Because Behat is oriented to behavior we test the final result, so you can think of it as integration tests, with all project parts involved. However, I prefer to say Behat provides acceptance tests. And this is one of the key points: because you can write tests using natural language you can agree with the product owner on the expected behavior. And this is a big advantage because it kills any ambiguity on requirements: writing the tests forces to define all the undefined details that many times take lots of effort during development (messages, conversations, meeting to clarify, implementations that doesn't fit the product owner expectations, changes on requisites after realizing what was requested is not what the product needs, etc). 

If you come to this workshop bring a laptop with Docker, Docker Compose (v1), Git, Make and PHP installed and working. We will use Metadrop Boilerplate because it provides out-of-the-box a Drupal site with Behat preconfigured in a container infrastructure.

In the second workshop Óskar Calvo will explain and allow attendees to deal with kernel tests. Kernel tests are a great way to test module functionalities because the allow to have a working database, allowing a full Drupal Bootstrap.  Docker4Drupal will be used, so Docker, Docker Compose and Git are requirements to attend this whorksop.

Last but not less, Pedro Pelaez will introduce attendees to unit testing on Drupal using PHPUnit. Attendees will learn how to write unit tests to check functions, classes and methods, and how to simulate situations, verify results and automatize the testing process. In this case DDEV will be used, so if you plan to attend please install DDEV in your machine.

The workshops will be in Spanish, although non-Spanish speakers may benefit of attending (we will try to help all attendees).

Behat

Saturday, 23rd, 10:30 to 12:30 (with coffee break), AED Room

Kernel tests

Saturday, 23rd, 12:30 to 16:00 (with lunch break), AED Room

PHPUnit testing

Saturday, 23rd, 16:00 to 17:30, AED Room

Aug 01 2023
Aug 01

Drupal Dev Days 2023 ended 10 days ago and it was great!

Let me explain what happens during a Drupal Dev Days for those who haven't been there. It's like a Drupal Camp, but with more diverse attendees because it is not a local event but an international one.

Usually, there are many sessions talking about many different topics, not only about Drupal, as you can see below. The sessions are selected from all the people that submitted a session proposal prior to the event. Thus, the sessions come from the Drupal Community folks or other people interested in the event. While there are big names between the speakers, those events always feature speakers that are not known and it may be the first they hold a session. Drupal is a very open and welcoming community and we love new people to come and enjoy it.

Official Drupal Developer Days 2023 Vienna Group Picture by Nico Grienauer

Apart from the sessions, there's something very important going on: the contribution rooms. Those rooms are prepared so anyone can join with their computer and work on Drupal patches, ideas or designs. Here, for example, you can find people from the different Drupal Stratregic Initiatives that are working to push them forward. You can join them helping any initiative, whether it is just testing some patches, doing bug report triage or contributing or improving patches to solve open issues. Sure, you can do it from home, but here the human dimension is open: you can discuss face to face with people who are deeply involved, learn from them and help with the future of Drupal.

Contribution room, only the Bug Smash Initiave has claimed a table yet. Picture by MrTinto.

The sessions

There were many and very good talks. While you can watch all checking the YouTube list made public by Drupal Austria I would like to highlight some of them. They are not necessarily the best and most recommended ones, mainly because I don't have feedback from all the talks and I attended only some of them, but these ones I think they are worth knowing.

I have grouped them by different topics.

Artificial intelligences and their demons

Of course we have to talk about IAs. It is the hot topic, it is impossible to escape from this subject nowadays. There were some talks about generating content with the help of IAs. Surprisingly, there was not a talk about generating code using IA (or I am not aware of it). I think there was a BoF about it but I missed it (please tell me how it was if you were there). But I would like to point to another direction, thanks to two the sessions. And this direction is the IAs and the bias, discrimination and other terrible results of their use.

Preston So, in his keynote,  spoke about different topics on machines, humans and IAs, but one of the most interesting is how we introduce our bias, or the bias of the society, into the automatic and heartless systems we are building, and real examples of the consequences. And this is invisible for many people because they are not impacted by those things. Yet, I may say.  

I think it is something to take into account. Carina Zehetmaier talked in more detail about this topic on her session When AI Takes Decisions For Us - From Algorithmic Bias to Discrimination in the World, going further into those possible scenarios in which machines make decisions instead of humans. Of course this can be good for us, but it has some implications that we need to be aware of.

Drupal development

You may have come here for the hardcore stuff, so let's start with it. Of course, there were sessions to deep dive into Drupal, let's check some of them.

Sascha Grossenbacher, better known as Berdir at Drupal.org, gave so many details about entities in his session that this should be a reference talk when dealing with them. It is not a talk to just watch, it's worth taking notes and watching it again every time you need a refresher on entities.

Álvaro Hurtado explained why Module Builder should be in you tool belt if you develop your own modules. Let me make a spoiler: it is smarter than the already impressive Drush generate command. Module Builder is able to generate code tailored to your project because it scans and analyzes your code! Give it a try! By the way, the talk was originally intended to be given by joahcim, the module maintainer, but he could not make it to Dev Days and Álvaro took it upon himself to share the goodness of Module Builder on his behalf.

There was a session about DDEV  by Miro Michalicka that it is a perfect fit for those who haven't used it yet and want to. DDEV makes local development much easier thanks to Docker and all the commands and functionalities that it provides, including recipes for many local setups, not only for Drupal. At this point I must say that even though I think DDEV is an awesome tool I'm choosing another one. In Metadrop we have created a Drupal Boilerplate based on Docker4Drupal that solves the same problem: having a local environment working with just a few commands. And we use it because it provides a more Drupal tailored environment out of the box and with just one composer command, including several tests tools like Behat or BackstopJS, static code analysis or project documentation thanks to MkDocs, and of course a Docker infrastructure. For the future, one idea is to allow using DDEV with it, but at the moment it just a nice to have idea.

xjm featured a session about peer code review based on her long experience as a core committer since 2015 and core patch reviewing since 2011. I consider peer code review as an invaluable development practice and this talk makes clear why: building teams, sharing project's knowledge, boosting junior developers and detecting issues before they hit production in very cost-effective way. She not only shares information about why it is a good practice for your project, but also about when code review is effective and when it is not, how to structure your changes for better code reviews and some automatic tools to help on this.

I'm finishing this section with my own talk. Sorry for the self-promotion but I honestly think this talk can help developers when dealing with complex forms using the Drupal's Form API. In this session I explain the Form API workflow, from a simplified workflow to the complex workflow with the most important details, including AJAX forms or the modification opportunities during a form life cycle.

Drupal present and future

There's always sessions about the current state of Drupal and specially what is the future of Drupal. Let's start with the talk by Gábor Hojtsy about the Drupal initiatives. Here you learn what they are, how are they organized and funded, the genesis of the initiatives and information about the current and future ones.

Hungry for more? Don't worry, there were several sessions focused on some of the initiatives. Check the talk about the future Drupal Dashboard, So I logged in, now what? The Dashboard initiative welcomes you,  or the one about the incoming improvements on the Admin UI (they are doing a really great job!) or the current state of the Automatic Updates.

I would like to stop on the Drupal 10: What’s New and What’s Next session by Lauri Eskola. Deeply involved in the core development, Lauri talked about the current focus, or at least one of the most important focus for Drupal: improving the user experience in general and the content editor experience in particular. Drupal has a powerful content management system, allowing rich and complex content models, either using the GUI or as a framework. However, editors expect an easier and intuitive interface. Several efforts are trying to fix this, and in the recent

Pitch-burgh innovation contest, two of the selected projects were related to improvements on the editorial experience. As Dries Buytaert said, Drupal is for ambitious site builders and the Community is pushing to make this a completely true statement. In his talk, Lauri mentions this around the minute 26, saying "we're doing discovery on a modernized page building experience" based on Layout Builder. And here I want to introduce you to the Visual Layout Suite, a module we developed with this idea in mind for one of our clients. We firmly believe the VLSuite is a good path to improve this content editor issue. The folks of Drupal Dev Days selected the session were my colleague Cristian Aliaga explains the VLSuite in detail, so you can judge by yourself. I'm there as well, but only as a support, all the hard work was done by him. The VLSuite aims to solve or reduce this problem with a solution based on Layout Builder, with no dependencies on themes, distributions or external services and compatible with current core approaches. 

Miscellaneous

Paolo Mainardi featured a talk titled What is the secure software supply chain and the current state of the PHP ecosystem and I absolutely loved it. While this talk was not directly about Drupal it is very interesting from the point of view of security, including how to secure your supply chains. 

As I said, there were many talks and I'm sure I missed some good ones, but these are interesting in some way or another. And let me finish linking the talk of another colleague, Omar Lopesino, about using Drupal as backend for a rich mobile application, in this case for iOS. The project features Apple in app purchases, among other features, and was a good challenge. Check what he wants to share with other developers in case you are in a similar project in his session Build Feature-Rich Apps with a Robust Backend Solution using Drupal.

That's all! Next big event is DrupalCon Lille, a much bigger event with a wider audience. It is, unfortunately, much more expensive than Drupal Dev Days, so the cost to attend is too high for many people and even companies. However, if you are able to attend you will find a very interesting event with many of the good parts I think a Drupal Dev Days can offer.

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