Four Kitchens: Getting started with Drupal 10

Image removed.

Randall Quesada Angulo

Backend Engineer

Randall is an engineer at Four Kitchens and a graduate of the University of Costa Rica.

January 1, 1970

Maybe you are interested in getting involved in the Drupal world, but you’re a little intimidated by the technical complexity of the platform. Don’t worry!

Drupal is a fantastic platform to build scalable websites, but keep in mind that sometimes Drupal can be an indomitable horse that we will tame over time, so don’t get too wrapped up in it.

Drupal is an open-source content management system (CMS). You can install a lot of modules (or plugins, if you use another CMS like WordPress) to increase the core functionalities and adapt your site to your needs.

Why Drupal?

Some of the great qualities of Drupal are its stability, commerce distribution, security, SEO friendliness, multilanguage capabilities, responsiveness, and others.

Requirements

Composer

As Drupal’s documentation mentions, “Composer is a tool for dependency management in PHP. It allows you to declare the libraries your project depends on and it will manage (install/update) them for you. Drupal uses Composer to manage the various libraries which it depends on. Modules can also use Composer to include third-party libraries. Drupal site builds can use Composer to manage the various modules that make up the site.”

Here are some links to documents that may be useful:

Drupal Core

You may have seen the term “Drupal Core,” but what is that? Drupal Core is all the components or features that make up Drupal. There are modules that have Drupal Core and Core themes. It’s Drupal in its most basic form, but you can find distributions that are module packages with Drupal Core and contributed modules.

Drupal distributions

A Drupal distribution is a set of preconfigured modules and templates designed to quickly build websites with complex functionality.

There are some distributions such as:

  • Sous: A starter project for Drupal with a generated theme based on the Emulsify Design System. This distribution can be very useful for anyone who wants to create a project with a completely custom theme and using all the advantages of Emulsify.
  • Varbase
  • Panopoly
  • Presto!
  • Thunder
  • 1,400+ distributions

There are many distributions out there to explore.

Contributed modules

Contributed modules are custom modules that contributors to the Drupal community create for us to make our work easier. Since Drupal is an open-source CMS, the community is involved in creating new modules, fixing bugs in those modules, and adding new functionality. So if you find a bug in a module you are using, report it and create a patch, or see if someone has already fixed the problem for you.

Let’s create your first Drupal page in our local environment. Here are the steps:

  1. Go to the Drupal 10 release page.: Note: We are going to create a Drupal 10 page. You can select past versions, but Drupal 10 is the latest version.
  2. Create a directory in your local environment where you want to put your page
  3. Copy the code you find on the release page (step 1). Example:
    composer create-project
    drupal/recommended-project:10.0.0 "[drupal10]"
  4. Enter the created directory: cd drupal10/
  5. Now you have to use Lando to start your Drupal site with Docker:
    1. lando init
      1. Current directory
      2. Drupal10
      3. Web
      4. Drupal 10
    2. Lando start
  6. Select your site URL:
  7. Now your Drupal site is ready

How can you install a new feature (module) on your Drupal site?

You can go to the Module project. There you can find all the modules created by the community — you can filter by version or you can search by keywords.

For example:

1. Go to the Admin toolbar. Note: admin_toolbar is a module that allows us to move more easily through all Drupal features without having to enter a page, since the toolbar gives us direct access to configuration, content, and others.

2. At the root of your project, run the Composer command, but you have to check that the modules are enabled for Drupal 10: Lando Composer require 'drupal/admin_toolbar:^3.3'

Image removed.

3. You have to use drush to enable the module: lando drush en [module_machine_name]. Example: lando drush en admin_toolbar. Note: If you want to see what drush commands exist, check out all the commands.

4. Now your module is enabled. Sometimes you have to clear the cache to see the changes on your site, and you have to use a drush command for that: lando drush cr.

Drupal web hosting

But where should you publish your site? There are some free and paid options to consider. The free options are a bit limited; however, trying and exploring the platforms can be very enriching.

If I must select any of the options mentioned in the link above, they are Acquia and Platform.sh. They are very easy to manage, they are intuitive, and they have interfaces that are easy to explore. Both have a launcher that we will install in the terminal of our computer to execute drush commands to the environment that we want.

Thank you very much for visiting the blog. Be sure to browse our other content, where we discuss other development issues, UX, UI design, product strategy, and more.

If you have any questions, suggestions, or ideas about your Drupal 10 project, you can let us know by sending a message in the contact box below.

The post Getting started with Drupal 10 appeared first on Four Kitchens.

LN Webworks: Why is My Drupal Website Slow?

Image removed.

Drupal enjoys the stature of being the most advanced content management system (CMS) when it comes to website speed optimization. It has in-built modules and themes to ensure page loading at lightning speed. Many organizations already proclaim with exhilaration that Drupal has made their site nimble enough to offer unparalleled customer experience. In stark contrast, some grumble about their slow website despite relying on Drupal. As a Drupal Consulting Solutions USA we understand that, In this fast-paced world, having a slow website is synonymous with sacrificing your reputation, customers, and search engine ranking. Visitors want sites to load within a blink of an eye, and when that doesn’t happen, they abandon them. Being an internet user yourself, you can understand how frustrating it is to wait for a page to load. 

Evolving Web: Maximizing and Evidencing the ROI of Your UX Design Project

Image removed.

UX (user experience) design is a powerful way to create valuable relationships with site users. You know it, we know it, and you need only glance at big brands to confirm they know it too. But can you prove it?

While gut instinct and anecdotal evidence are valuable, they aren’t enough if you want to be data-driven, scale results and persuade stakeholders. To get the insights you need, it’s important to track and demonstrate return on investment (ROI). ROI measures performance by comparing what you put in with what you get out.

Measuring the ROI of design can be tricky. This is because design’s impact on the bottom line is often indirect and hard to separate from the successes of other business areas, such as sales and marketing. But where there’s a will there’s a way. As design leaders, we’re no stranger to channeling creative energy and strategic thinking into problem solving.

This guide offers practical advice and best practices to help you track the ROI of your design projects. It covers:

Image removed.

Leaders need to track and demonstrate the ROI of UX design to make a strong business case for investing in it. 

Calculating ROI and Choosing the Right KPIs

The conventional way of calculating ROI is using monetary values: 

ROI = net income / cost of investment x 100

This is particularly appropriate in industries where quick conversions and a straightforward sales funnel are the norm, such as the FMCG industry. 

But for many organizations, the user’s journey to conversion is longer and more convoluted. It may happen over weeks, months or even years with a multitude of touchpoints along the way. What’s more—generating profit isn’t always the goal of a project. For example, it could be to raise awareness, influence opinions, provide public services, or give back to the community. 

A better way to demonstrate the ‘returns’ of your design efforts can be to use a Key Performance Indicator (KPI). This is a quantifiable measure used to gauge impact, set goals, and determine success. KPIs can look like anything from newsletter registrations or petition signatures to support calls or customer ratings.

  • Choose KPIs that align with your organization’s strategic objectives—such as increasing conversions, entering new markets, building brand awareness, accelerating time-to-market, or reducing overheads. 
  • Avoid superficial ‘vanity metrics’ that don’t reflect your design efforts or distract you from measuring real business successes. 
  • Consider how KPIs can help you get internal support for your project. Involve important stakeholders in the UX discovery and pick KPIs they care about.
  • Consider assigning a dollar value to your KPIs to help you estimate the ROI in monetary terms. 

KPIs example: Evolving Web collaborated with OCAD University on the redesign of its admissions website. OCAD U’s primary goal was to increase applications by making the admissions process more engaging and easier to follow. Therefore, an important KPIs was the number of applicants. Applicants increased by 15% within a few weeks of the launch, demonstrating the project’s considerable success.

Maximizing the ROI of Your Design Project

Tracking and analyzing KPIs helps you to identify what’s working and what isn’t. This allows you to make adjustments to realize the full potential of your current design project and future ones. You can also draw on industry best practices to inform your design strategy from the get-go.

At Evolving Web, we draw on Design Thinking: an iterative and collaborative process that puts users at the forefront of a project. It consists of five core stages: empathize, define, ideate, prototype, and test the design. According to a model developed by Forrester, Design Thinking brings an impressive median ROI of 229% per project. At an organizational level, the model demonstrated that a mature Design Thinking practice can achieve an ROI of between 71% and 107%.

Another best practice we draw on is design systems: a set of standards, style guides, and components used to unify a brand's experience. A design system enables designers to reuse core elements, meaning they don’t have to reinvent the wheel and can focus on more complex tasks. It reduces unnecessary labour hours and leads to better performing designs—both of which have a positive impact on ROI.

Image removed.

Productivity dips while a new design system is ramped up, but exceeds standard levels once the system is firmly in place. Credit: Callahan (2021.)

10 Statistics That Make a Strong Business Case for UX Design

Need some cold, hard data to back up your ideas? We’ve gathered 10 persuasive facts and figures that’ll help you make a compelling business case for investing in UX design. 

  1. Users’ first impressions of a website are 94% design-related (Adobe.)
  2. 75% of users judge a company's credibility based on its website design (Stanford University.) 
  3. 94% of people said that web design was the major reason they mistrusted or rejected a website (Rareform New Media.)
  4. 59% would rather read beautifully designed content instead of something plain and simple (Adobe.) 
  5. 38% of people would leave a site if its content or layout was unattractive (Adobe.)
  6. 39% of people will stop engaging with a site if images take too long to load (Akamai.)
  7. Consumers use an average of 5 different devices per person—and 8 out of 10 will leave a website if the content doesn’t display well on their device (Adobe.)
  8. Google started giving preferences to responsive websites in its search engine results pages in 2015 (Google.)
  9. Decreasing mobile site load times by one tenth of a second can increase conversion rates by 8-10% (Google.)
  10. Conversions can fall by up to 20% for every extra second a mobile page takes to load (Google.)

Make the Most of Your Next Design Project With an Agency Partner

Evolving Web has spent more than 15 years empowering organizations to create deeper connections through valuable digital experiences. Our Design Team harnesses research, strategy, and innovation to unleash the creative potential in every project—no matter its size. Partner with us and you’ll gain the confidence, wisdom, and support to take your digital design to the next level.

//--> //-->

+ more awesome articles by Evolving Web

LN Webworks: 5 ways to Enhance Customer Experience of Drupal Websites

Image removed.

Customer experience is unarguably the center around which modern businesses are revolving today. Every potential strategy they plan to implement gets filtered through the lens of user experience first. As a Drupal web development company, we recognize the significance of an approach focused on customer needs which can result in increased customer loyalty, enhanced reputation, and greater revenue opportunities.

According to the current state of affairs, user experience is largely dependent upon business websites today. After all, your website is the face of your organization and the medium through which a majority of customers interact with you. Phenomenal user experience is characterized by high-speed, user-friendly, and interactive websites. Cutting-edge content management systems (CMSs) such as Drupal infuse your site with all these phenomenal traits.

LN Webworks: Drupal Websites are Not Good in Terms of Design: The Common Myth

Image removed.

According to research, around 2 billion websites run on Drupal globally. Such a massive appeal has made Drupal the leading content management system (CMS) worldwide. It has captivated the hearts of eminent enterprises with its 42,650 modules and 2,900 themes. As a Drupal Web development company, you can leverage Drupal's top-notch security features to provide your clients with unparalleled cybersecurity. Over the years, the crucible of cutting-edge advancements has forged Drupal’s features to make it unmatchable. It doesn’t matter whether it is a basic website or a content-heavy website, Drupal is packed with capabilities to handle them all.

LN Webworks: How AI is Shaping the Future of Content Management and the Web?

Image removed.

Artificial intelligence is a highly potent technology that has revolutionized the world. As AI continues to gain traction, it's only natural that content management systems (CMS) like Drupal will integrate with this technology. CMS like Drupal can leverage AI-powered tools to provide more personalized content. AI is serving as an empowering center for smart data-driven decision-making, automation, enhancing customer experience, minimizing human errors, and analyzing upcoming trends. If we look into the current state of affairs, artificial intelligence is slithering into the world of content management as well. Experts believe that the future of AI is that it will get so deeply embedded into content management that everything will be driven by it.

ComputerMinds.co.uk: Removing invalid query string parameters passed to a view

Image removed.

As a Drupal site administrator, you may notice in the website logs that there might be a large number of repeated log messages along the lines of "An illegal choice has been detected. Please contact the site administrator." We recently had this problem on a Drupal site that was upgraded from Drupal 7 to Drupal 9 which featured a product search that was built using Views.

Due to slight differences in the way in which the view and facets were built in the Drupal 9 site, this resulted in slightly different URLs being used when the user would filter the search results. For a standard site user who would be interacting with the form elements to filter the view, this was not a problem. However, search engines that had indexed these older URLs from the Drupal 7 site were still trying to crawl the search page regularly, with (what are now) invalid query string parameters.

At the times when the search engines were crawling these pages, this would result in hundreds if not thousands of log messages being logged. Although not anything that would directly impact the users of the site, it’s not ideal to have so many log messages polluting the site logs. Having so many log messages makes it harder to track down and find actual more pressing issues that may need to be addressed.

It makes sense to try and eliminate the cause of this issue and stop so many error messages from being logged. This can be easily accomplished by the following snippet of code which uses hook_views_pre_build().

use Drupal\views\ViewExecutable; /** * Implements hook_views_pre_build(). */ function my_module_views_pre_build(ViewExecutable $view) { if ($view->id() === 'my_view_name') { /** @var \Symfony\Component\HttpFoundation\Request $request */ $request = $view->getRequest(); /** @var \Drupal\Core\Http\InputBag $query */ $query = $request->query; if ($sort_by = $query->get('sort_by')) { // Compare to the list of allowed values to see if it's valid. // If it's not, then remove the sort_by from the query completely. $view_sorts = $view->sort; if (!isset($view_sorts[$sort_by])) { $query->remove('sort_by'); } } } }

 

Let's quickly break down the code example above. For a custom module named my_module, we are implementing the hook_views_pre_build hook inside of the my_module.module file. We then check the view ID of our view to see if it’s the one we are trying to target and then get the HTTP request object from the view, checking the query string values of the request.

The query string value we are interested in (which was causing the error messages) is named sort_by. We get the list of allowed sort values from the view and then compare this to the value in the query string. If the value trying to be used isn’t a valid value for our view, we then unset this from the query.

Of course, if you were looking to target a particular display of the view and not all of them then you’d need to add some additional logic to check the current_display of the view. For example, change the line:

if ($view->id() === 'my_view_name') {  

to 

if ($view->id() === 'my_view_name' && $view->current_display === 'page_1') {  

which will restrict the code block to only run for the page_1 display.