Balint Pekker: The Future of Drupal

In the world of Drupal, staying ahead of the curve is essential for building websites that are not just functional but also future-proof. As the digital landscape continues to evolve, it's crucial to explore emerging trends and technologies in Drupal development that are shaping the future. In this blog post, we'll dive into some of these exciting possibilities and discuss how they can lift Drupal websites to new heights.

DrupalEasy: Reintroducing Drupal core's Views "Combine fields filter"

Image removed.

I was recently reminded of a Drupal core feature that I hadn't used in a long time - and was pleasantly surprised at how useful it is.

The Combine fields filter Views filter allows a site-builder to quickly and easily set up an exposed filter that searches multiple fields for a given search term. Think of it as a way to combine multiple exposed search filters into a single search box.

Setting it up is quite easy - just include all the fields that you want to search in the Fields section, marking them with Exclude from display as necessary (Unfortunately, Combine fields filter doesn't work with view modes.)

Then, add and expose a Combine fields filter to the view, and configure it to use all the fields you want searchable in the Choose fields to combine for filtering section of the filter's configuration:

Image removed.

 

I created a simple example of a Movie content type with example fields including Title, Image, Plot summary, Spoilers, Year of release, Short description, Taglines, and Trivia. I added all of these fields to the Fields configuration of the view - with all of them hidden except for Title and Image.

Next, I added a Combine fields filter as described above, selecting all of the fields to be combined for filtering. Finally, I added a few sample Movie nodes.

To test things out, I searched for terms that were added as part of the various Movie content type fields (but purposely not words in the Title fields). The results were exactly what I was expecting!

In the first example, the word biff appears in the Plot summary field for Back to the Future

In the first example, the word biff appears in the Plot summary field for Back to the FutureImage removed.Next, the word saga appears in the Short description field of The Last Jedi.Image removed.The number 1985 appears in the Year of release field of Back to the Future.Image removed.Finally, the words Michael Caine appear in the Trivia field of The Dark KnightImage removed.


There are a few caveats when using Combine fields filter with one of the more impactful being that when utilizing a multivalued field (as the Trivia and Taglines fields are in the previous example), the Multiple field settings configuration cannot utilize the Display all values in the same row option. Fortunately, these fields are usually excluded (hidden) from search views like this. 

Image removed.

Drupal Association blog: Why You Should Attend Open Source Conferences 

Network, Learn, and Collaborate - The three key motivations for individuals and organizations to participate in conferences. Every regular conference has a theme or niche that serves as a focal point for discussions and advancement. These events serve as stages for personal branding and business promotion, with attendees aiming to gain insights and contacts that directly benefit their individual goals and organizational interests. 

Although open-source events rely on these key motivations too, they have a unique flavor of community spirit and collaboration that’s not found in traditional conferences. Open source events like DrupalCons thrive on shared knowledge, transparent innovation, and a sense of collective growth.

What is DrupalCon? 

DrupalCon is an annual open-source conference that brings together open-source enthusiasts, developers, designers, and end users for networking, learning, and collaboration, all under one roof. This is where you can meet the people who made the software, get inspired, and actively contribute to the project. The next upcoming DrupalCon North America event is being held in Portland, Oregon, from 06 May 2024 to 09 May 2024. We’ll give you some reasons why you should attend open-source events like DrupalCon 2024.

Benefits of Attending Open Source Conferences 

An open-source enthusiast knows that events like DrupalCons are celebrations of community-driven innovation. The energy is contagious, the ideas are limitless, and the camaraderie extends beyond the conference halls. 

Spirit of Open-Source

Open source is almost synonymous with collaboration. Collaboration by contributors who are the heartbeat of any open-source project. These events provide a platform for individuals and organizations to come together, contribute to the community, and drive the future of open source. It aligns with the open-source commitment to empowering innovation through the collective efforts of a vibrant and engaged community. In an event like DrupalCon, you get a chance to meet people who are passionate about Drupal and driving it forward. 

Career Boost

If you're launching your career or contemplating a switch to something more fulfilling, few experiences rival the rewards of joining an open-source community. And there’s no better place to kick off this journey than an open-source conference. You’re not just exploring job opportunities but also gaining the knowledge you need from training sessions and meaningful interactions with seasoned experts. You can also upgrade your skills through hands-on workshops and interactive sessions at the event. At DrupalCon, you can always find support if you’re new to the world of Drupal or Open source. A mentor will help guide you through your entire experience by suggesting what sessions you should attend for your professional development. You can even learn to make your first contribution to the project through your mentor.

Spot the Trend

Want to know what’s new in your area of interest? Open-source conferences are the best places to identify emerging trends, innovations, and shifts in the industry - much before they become mainstream! You come out well-equipped with insights into upcoming technologies and initiatives. This will not only help you in your professional development but also enable you to contribute meaningfully to innovative projects. All of this ultimately leads to improved user experiences and future-ready applications. At DrupalCon, immerse yourself in firsthand insights as Dries Buytaert, the founder himself, shares the current state of Drupal in his keynote (DriesNote). Discover upcoming initiatives and innovation on the horizon, and get a sneak peek into the exciting developments set to launch. 

The Power of Open Source Networking

We all know how powerful networking can be for your career or business development. But for an open-source community, networking is an indispensable aspect. It's impossible to have a successfully operating community without networking. Open-source events let you connect with like-minded individuals, developers, agencies, and contributors, fostering potential collaboration. Get mentorship, guidance, and exposure to new opportunities to aid your professional growth. Attend DrupalCon to connect with thousands of open-source enthusiasts and build meaningful connections with professionals just like you. Programs like BoFs (Birds of a Feather) at DrupalCon let you exchange information and share best practices around a common topic of interest. Make DrupalCon your opportunity to grow.

Real-World Learning

Learning from real-world scenarios truly refines your understanding of technology and innovation. Attending industry summits at open-source conferences is a great way to gain practical insights from industry leaders. It’s a chance to understand the real-world challenges faced by them and the practical solutions implemented. Through live demos, case studies, and applications, you can see the ropes in action. Industry summits often highlight the methodologies that are proving successful in the current landscape, providing actionable takeaways. DrupalCon has a full day dedicated to industry summits like the higher educational summit, non-profit summit, government summit and community summit. 

Final Thoughts

Whether it's networking opportunities, hands-on learning, or trend forecasting, open-source conferences offer a holistic approach to staying on top of ever-changing technologies. They contribute to the collective growth of the entire open-source community. It's an investment in continuous learning, professional enrichment, and the boundless possibilities of open collaboration. Did we mention that DrupalCons aren't just about coding and tech talk? There's a ton of fun to be had too! Take a look at the social events from last year

Matt Glaman: Drupal has made contributing to open source a marketing opportunity

Drupal has done something unique with contributing to open source. Our community has made contributing to the open source project a marketing opportunity for organizations using Drupal. Generally, contributing to open source projects reflects at the individual level. There isn't a great way to reflect if the individual did it out of some intrinsic value to improve open source or by sponsored work with their employer or a customer. As far as I know, Drupal is the only open source project providing this kind of attribution.

ADCI Solutions: Speed up your website with React Server Components

The React team proposes a new way to improve page load speed and reduce TTI—the time it takes a page to become fully interactive.

***

One of the ways to improve website performance is to reduce traffic from the server to the user’s (client’s) device. The client-server architecture is essentially the queue of requests and responses between the client and the server, which in turn accesses the database.

Gradually, web development began to take on other tasks, such as where and how to cache the page or mark it up for SEO so that it could later go live and work for the user, or what part of the page rendering could be done by the client or by the server.

Eventually, there were developers who took the React library, built the Next framework around it, proposed the principle of Server-Side Rendering (or SSR) along with the framework.

Image removed.

Specbee: Better Page Layouts with the CSS Grid Layout Module in Drupal

Fed up with the hassle of finicky CSS positioning and floats for organizing your page layout? They don't always play nice with all browsers. It's time for a smoother solution! Let’s talk about the brand new module - CSS Grid or Grid Layout that brings a two-dimensional grid system to CSS. This grid-based layout system is a versatile way of organizing your content, with rows and columns, making it easier to design complex layouts. Check out the rest of the blog for insights on CSS Grid Layout and integrating the CSS Grid Layout Drupal module into your project. CSS Grid Terminology Similar to CSS Flexbox, where we have flex containers and flex items, in CSS Grid, we follow a similar concept with grid containers and grid items. To turn a container into a CSS Grid container, we simply set its display property to “Grid”. Grid Container: The grid container wraps all the grid items within its area. Grid Cell: Each individual item inside the grid container is referred to as a grid cell or grid item.A Grid layout forms a two-dimensional structure, with columns along the Y-axis and rows along the X-axis. Grid Line: The vertical and horizontal lines that divide the grid into columns and rows are called grid lines. They are automatically numbered for columns as well as for the rows starting from 1 all the way to the number of rows or columns plus 1. Grid Gap: The space between Grid cells is called a gutter or Grid Gap. Grid Track: Grid items aligned in a row or column are referred to as a grid track. For horizontal alignment, we use the term "row track," and for vertical alignment, it's called a "column track." Grid Area: The area between two vertical and horizontal lines is called grid area. Demonstration of row and column values and properties HTML <div class="wrapper"> <div class="header">Header</div> <div class="box-1">Box 1</div> <div class="box-2">Box 2</div> <div class="box-3">Box 3</div> <div class="main-content">Main Content</div> <div class="sidebar">Sidebar</div> <div class="footer">Footer</div> </div>CSS .wrapper{ display: grid; grid-template-rows: 100px 200px 400px 100px; grid-template-columns: repeat(3, 1fr) minmax(200px, 1fr); grid-gap: 30px; // Line names grid-template-rows: 100px [box-start] 200px [box-end content-start] 400px [content-end] 100px; // Grid area names grid-template-areas: "head head head ." "box1 box2 box3 side" "main main main side" "foot foot foot foot"; } // Using Line numbers .header{ grid-column: 1 / -1; } .main-content{ grid-row: 3 / 4; grid-column: 1 / 4; } // Using Line Names .sidebar{ grid-row: box-start / content-end; } // Using Grid Area Names .footer{ grid-column: foot; }Grid Properties For making an element a grid container, we use display:grid grid-template-row - Defines the number of rows in a grid layout. grid-template-column - Defines the number of columns in a grid layout. row-gap & column-gap - Defines the gap between grid row and grid column individually. grid-gap - Defines the gap between both rows and columns respectively in a grid layout. The Repeat function -  It is employed to express a recurring segment of the tracklist, enabling the concise notation of a repetitive pattern for a substantial number of columns or rows. The Fr unit - A fractional unit that dynamically calculates layout divisions. With 1fr, you get one share of the available space within the grid. Naming Grid Lines - Give names to specific or all lines in your grid while defining it using the grid-template-rows and grid-template-columns properties. Naming Grid Areas - The grid-template-areas CSS property specifies named grid areas, establishing the cells in the grid and assigning them names. grid-row - The grid item's start and end position within the grid row. grid-columns - The grid item's start and end position within the grid column. min-content - The property specifies the intrinsic minimum width of the content. max-content - The property specifies the intrinsic maximum width or height of the content. minmax - Defines a size range greater than or equal to min and less than or equal to max content. Browser inspector view for grid - align and justify items and content HTML <div class="container"> <div class="item item--1">Modern</div> <div class="item item--2">CSS</div> <div class="item item--3">with</div> <div class="item item--4">Flexbox</div> <div class="item item--5">and</div> <div class="item item--6">Grid</div> <div class="item item--7">is</div> <div class="item item--8">Great</div> </div>CSS .container{ display: grid; grid-template-rows: repeat(2, 150px); grid-template-columns: repeat(2, 300px); grid-auto-flow: row; grid-auto-rows: 150px; grid-gap: 30px; // Aligning content in row direction align-content: center; // Aligning content in column direction Justify-content: center; // Aligning items in row direction align-items: center; // Aligning items in column direction justify-items: center; .item{ &--2{ grid-row: 2 / span 2; // Aligning item in row direction align-self: center; // Aligning item in column direction justify-self: center; } }align-items - Align Grid items inside the grid cell or area in the column/vertical axis. justify-items - Align Grid items inside the grid cell or area in the row/horizontal axis. align-self - Overrides the grid item's align-items value and aligns itself inside the cell/area in the column/vertical axis. justify-self - Overrides the grid item's justify-items value and aligns itself inside the cell/area row/horizontal axis. align-content - Specifies how the grid content is distributed along the column axis / vertically in a grid container. justify-content - Specifies how the grid content is distributed along the row axis / horizontally in a grid container. grid-auto-flow - The property regulates the direction in which auto-placed items are inserted into the grid, either in the row or column direction. The default value is row. grid-auto-rows - This property sets a size for the rows in a grid container. grid-auto-columns - The grid-auto-columns property sets a size for the columns in a grid container. auto-fill - This property fills rows with as many columns as possible, even if the added column is empty, occupying space in the row. Browser inspector view for grid auto-fill property auto-fit - It fills rows with as many columns as possible. It collapses empty cells, setting their width to 0 to prevent excess space. Browser inspector view for grid auto-fit property Implementing the Drupal CSS Grid layout module The Drupal CSS Grid Layout module seamlessly integrates the power of CSS Grid into your Drupal environment, providing a flexible and efficient way to structure and organize content. Installing the module Prerequisites: Layout builder Layout Discovery Install CSS Grid Layout module using - composer require 'drupal/css_grid:^1.0@beta'Next, enable the module here: Administration > extend Add a new layout builder page: Content → add content → Layout builder page → layout → Add section Now you have yourself a newly created layout CSS Grid. Choose CSS Grid, and you'll find options for columns, rows, and gaps, allowing you to create a dynamic grid layout. You can then incorporate column, row, and gap values according to the desired structure.   You can also choose from different CSS and grid layout units. Final Thoughts These are the fundamental aspects of the CSS Grid layout algorithm. Armed with this knowledge, you can construct intricate and interactive layouts, eliminating the reliance on CSS frameworks. For Drupal frontend developers, the integration of the CSS Grid Layout module adds an extra layer of flexibility and enables seamless implementation and customization of grid-based designs within Drupal. If you're ready to implement these cutting-edge design techniques into your Drupal website, explore our Drupal services for seamless integration and customization.

Aten Design Group: Drupal Web Projects Leveled Up with Mercury Editor

Drupal Web Projects Leveled Up with Mercury Editor Image removed.jenna Fri, 03/08/2024 - 13:39 Mercury Editor Process Drupal

Not all choices are created equal. On a web development project, leaders are faced with thousands of decisions, but only a handful of those fundamentally impact the entire project and post-launch success of the website. As a digital project manager, I serve clients by focusing their attention on highly impactful choices and offering informed guidance to achieve their goals. One key choice on every Drupal website redesign project is how editors will build pages on the new website, and my consistent guidance is to go with Mercury Editor.

What is Mercury Editor?

Mercury Editor is a drag-and-drop content editing module that we built for Drupal 9 and 10 websites. It allows Drupal site managers the freedom to implement anything from standardized, form-like content types to blank canvas pages with dozens of component options.

Video file Video demonstration of publishing content on a Drupal website

Why is Mercury Editor the best option for Drupal projects?

What you see is what you get

Have you ever had to work through sheer guesswork? Trying to envision in your mind’s eye how something is going to line up, but never able to see it happening in real time? If you manage content in a Drupal site, the answer is probably yes! Mercury Editor finally gives editors a way to see what they’re building as they’re building it, on both desktop and mobile scales. Honestly, if the list ended here, it would still be enough for Mercury to be my go-to recommendation.

It’s easy to learn

Clients commonly underestimate how much effort is required to get their new site’s content ready for launch – it is truly a second major project running in parallel to the site build itself. Not only does it take time for a team to create, translate, and build dozens, hundreds, or even thousands of pages of content, but it also asks the client team to learn a new page-building tool at the same time.

Mercury Editor relieves this pressure simply by being easy to learn. Once you see how to add any new component, that immediately scales up to any other component on any content type. Using the plus button to add new components or dragging them around the page just makes sense. Choosing an intuitive tool means that instead of struggling to know how to do their important work before launch, they can just focus on doing it.

It creates a sustainable post-launch site

Mercury has little-to-no ongoing maintenance needs, no licensing fees or restrictions, no limits on pages created, and it removes the need for developers to help make new pages or page edits down the road. A single, non-technical user can realistically maintain an entire website’s content after a short primer on how to use Mercury.

Flexible or formulaic – it supports the right level of complexity for you

A robust technical application like Drupal needs a page-building tool that can hang with it. Mercury offers a lot of knobs we can dial up or down to give different teams the level of flexibility that is right for them. Want to avoid decision paralysis or differing layouts across similar types of content? Go simpler. Want to give more creative freedom to editors? Expand the options. Mercury can do both within a single design philosophy.

For large teams that want a consistent look across editors, Mercury Editor allows us to:

  • create predefined layout templates as an instant starting point for editors
  • dial back on multi-column layout options
  • restrict which components can be placed on a content type

For small teams that want more creative freedom, Mercury allows us to:

  • create different components for use in different contexts
  • let editors select rules and filters for dynamic components within the interface without needing a developer
  • offer complex section and multi-column options
  • use components in unexpected ways without breaking the look and feel of the site

Streamline your Drupal project with Aten

I’m a project manager. I know how choices impact the time, budget, and success of a website redesign project. Choosing a page-building tool that the Aten team is intimately familiar with is going to save your project time and money and will result in a design that leans into the tool used to implement it in the end.

Our team speaks Mercury – Aten’s clients benefit from our team’s experience working with this Drupal editor, and they begin to learn the editing experience themselves early in the project. Our design team knows what Mercury can do and how to create the best post-launch editor experience from the very first conversation of the project.

It’s a reflection of Aten’s values

Values matter to our clients, and they matter to us. My colleague Kathryn Sutton spoke about Aten’s organizational values in a recent webinar. Mercury Editor is another manifestation of those values in tangible, product form. It obviously embodies values like creative, productive, and collaborative. A tool that enables creative page editors to build to their vision is a natural, almost inevitable, conclusion to Aten’s core values.

What may be less obvious at first glance is how Mercury is shaped by other values like trustworthy and thoughtful. Mercury Editor is not just a tool but a commitment from Aten to the Drupal community – to support and grow Mercury Editor for years to come, with plans through Drupal 12 and beyond. By adopting this module, you adopt the assurance that we have your back.

We are not mercurial when it comes to Mercury. It matters to us, we stand behind it, and we invest heavily in its accessibility, reliability, and constant improvement.

As for the final Aten value, eager? We made Mercury Editor, and we would love to make it work for you. Get in touch about your next Drupal project, and we’ll make it happen.

Image removed.Jake Douma, PMP

ImageX: Integrate Zoom Meetings Seamlessly into Your Drupal Website via Our Developer’s Module

Authored by: Nadiia Nykolaichuk and Leonid Bogdanovych.

Zoom is a key player in the sphere of online meetings. They have the power to dissolve geographical barriers, uniting individuals and teams across vast distances for communication and collaboration. What can be more convenient than using a robust video conferencing platform? Using it in the comfort of your own Drupal website!