mandclu
Fri, 04/14/2023 - 06:24
Towards the end of 2021 I had an idea: what if Drupal could expose content in a grid, similar to what users might be used to in database GUIs like Sequel Pro or Sequel Ace? I was able to put together a simple proof of concept, and the Autogrid module was born.I had originally wanted this to be available as a tab on relevant bundles (content types, taxonomy vocabularies, etc) but at the time I wasn't sure how to implement this, so I created a custom menu item where a user could manually choose a content entity type, then a bundle, and then see the grid. After all, as Seth Godin famously said in his book Linchpin, "Real artists ship."I kept wanting to come back to my original vision, however, so I recently decided to invest some time into making it work. It took some investigation, and IMoreTheming is hard. It’s usually the most time-consuming part in our work. Writing a DB query or baking logic into a Drupal hook is the easy part. The main challenge is making an element look like the design and appear correctly on different devices and browsers.
Our main goals remain the same as from this post:
All the code examples in this post are inside our Drupal-starter. You can install it locally, and see all the elements under the Style guide page - https://drupal-starter.ddev.site:4443/style-guide. The Drupal-starter code base is used as the starting point of our projects, so you’ll find it very mature!
An example News node on a fresh Drupal starter
A quick reminder is that for theming, we’re using the Pluggable entity view builder module, known as PEVB.
Back to our problem - we don’t want to theme the same things over and over again. This sounds trivial, but I’m sure many are doing that. We have! Here’s an example of two different twig files:
<div class="flex flex-col gap-y-3 md:gap-y-5">
{{ title }}
{{ body }}
</div>
<div class="flex flex-col gap-y-3 md:gap-y-5">
{{ author }}
{{ teaser }}
{{ date }}
</div>
The cards’ contents differ but the wrapper classes are the same. Also, the chances of changing the gap on one twig file and forgetting the other are high. At least for us, on bigger projects, updating the gap on only some files was a common thing.
Let’s think of the designer for a moment. Should the gap between items be 20px or 24px? The answer, for us, is “whatever works best as long as it’s consistent™.” If one card is 20px, then all cards should be the same. To deal with that, we have a limited set of trait methods:
wrapContainerVerticalSpacing (20px)wrapContainerVerticalSpacingTiny (2px)wrapContainerVerticalSpacingBig (40px)wrapContainerVerticalSpacingHuge (60px)The world of software development is constantly evolving, and with the recent advancements in AI technologies, developers now have powerful tools at their disposal to help with everyday tasks. In this blog post, we will discuss how AI tools like ChatGPT and GitHub CoPilot have made a significant impact on our workflow, increasing productivity and improving the quality of our work.
I have been using GitHub CoPilot since August 2022, and it has proven to be an invaluable asset. It has provided the following benefits:
GitHub CoPilot has significantly sped up smaller tasks such as creating demo content in CSV files, updating hooks, and managing dependency injections. This has allowed our developers to focus more on complex tasks and problem-solving.
Dependency Injection is a fundamental part of Drupal development, and it’s a chore that we need to do over and over again. Here’s how CoPilot speeds it up for an existing class:
Your browser does not support the video tag. Injecting renderer service into an existing classDemo content is essential for our way of developing and it also makes testing much easier. But the creation of such content was, well, boring. Here’s how CoPilot speeds it up:
Your browser does not support the video tag. Generating meaningful demo content in CSV files