ThinkShout: ThinkShout’s COVID Commitment: Four Ways to Stabilize Your Digital Platform

The global COVID-19 pandemic has affected each of us in profoundly personal, and yet somehow deeply shared, ways. Facts on the ground have changed so quickly, and so dramatically, that we find ourselves overcome with a huge range of emotions and needs: caring for immediate families, worrying about loved ones, reaching out to neighbors, and obsessing over news from every corner of the globe. And while our personal concerns may remain focused on community-based ways to get through this crisis together, our ability to serve our clients is paramount — if you’re reading this, we’re likely talking about your organization.

The time we are living through has only served to amplify how essential your work is, and we know first hand how much your teams are stepping up in the face of this crisis to move it forward. You deserve partners that can rise to meet the challenge alongside your team.

Our Response

As a B Corp committed to supporting mission driven organizations, ThinkShout has always strived to live the values that you fight for day in and day out, and those values are most essential during times of duress, to ensure that we don’t lose our way when navigating a crisis. Rather than just assuming business as usual, we surveyed our team to understand their needs in this new era, and made necessary adjustments to ensure that we can find our new balance between work and life, and continue to operate at full capacity to serve your needs. We are also adjusting to our new shared virtual reality by creating free webinars, blog posts, and best practices for anyone in our community to learn from, including a new series on Equitable Digital Connections. We want you to know that we are thinking about your evolving needs every day. It is our job to stay ahead of emerging best practices, to learn from the efforts of similar organizations, and ensure that you have the digital tools and support to continue your work.

Tangible Ways to Deepen Digital Engagement

This is a moment where innovation and creativity are required from each of us as we respond to today’s crisis in a way that not only meets the challenge, but also helps shape the future to be more just and equitable for the communities you serve.

Our current situation presents two clear new opportunities:

  • Deepen engagement with audiences by exploring new ways to use current platforms to leverage existing offerings.
  • Expand engagement with audiences by exploring new-to-your-organization platforms and engagement tactics.

This applies to everything from strategic communications and campaigns, to how knowledge products are distributed.

Our immediate recommendation is to lean into exactly what makes your organization unique — your core product offering — and then consider how every digital tool at your disposal can better communicate its relevance and importance. Now is the time to embrace concepting, creating, and implementing equitable and accessible digital platforms and engagement tools. In this hopefully short era where all communication is virtual, it is our responsibility to bridge the digital divide both between organizations that have the capacity to engage with their core audiences and those that don’t, as well as within organizations as they work to best leverage digital systems to support all programs, partnerships, and mission-critical efforts. For organizations focused on social good, this is even more essential.

We are actively engaged with all current ThinkShout clients to discuss how the systems and strategies you’re already using can flex to meet this moment. Partnering with your organization as strategic, creative, and technical experts is our very reason for existence.

Where To Focus: Stabilizing Your Digital Platform

ThinkShout is investing deeply across four critical areas that all of our partners should prioritize at this time. As more services become digital-only (and perhaps in ways that are more permanent than initially thought), we need to be extra vigilant to ensure that content is accessible and designed for all audiences. If you don’t currently have a direct contact at ThinkShout, please reach out to learn more about how we’re expanding core offerings in:

  • Accessibility: Now is a great time to ensure that your digital products are accessible to everyone. Auditing top content, analyzing your options, and building a phased roadmap are steps you can take today.
  • Audiences: How are your products and content informed by human insights? New approaches to developing behavior-based personas can result in better outcomes organizationally and for the individuals you serve.
  • Ecosystems: How do your digital platforms—audience-facing and administrative alike—serve your organization? Where are redundancies and otherwise inefficient systems hindering streamlined experiences for your users or efficient processes for your team? Are you considering new tools and need to evaluate how they fit into the full ecosystem?
  • Full-Stack Content Strategy: When it comes to a platform that’s optimized for search and social, the little things are the big things. If you haven’t already, now is the time to audit and update your platform’s URL structures, metadata, keywords, and page titles for social and search.

Social distancing does not imply a lack of social connection. To the contrary, it makes the latter more essential than ever. People crave connection. A sense of belonging — and purpose. You can provide that to all of us as we sit, isolated, searching for meaning in the chaos and, most of all, a way to help. Let us know if we can help you make those connections that our society so urgently needs.

Specbee: How to create a Custom Drupal 8 Theme in 9 Simple Steps

How to create a Custom Drupal 8 Theme in 9 Simple Steps
Neslee Canil Pinto
31 Mar, 2020

Drupal 8 gives developers and site owners the flexibility of creating bespoke components that can be put together to build compelling digital experiences. Themes are Drupal’s design blocks that represent the visual appearance of a website. Drupal 8 comes with choices of core themes and third-party themes. However, if none of them cut it for you, you should probably be looking at Drupal 8 custom theme development. With Drupal 8 custom themes, you can tailor-fit your design to the exact requirements.

Drupal 8 provides Bartik as the frontend theme, but if you need a Drupal 8 custom theme then you can create your own Drupal 8 theme development, thus improving your Drupal theming skills. The easiest way to really understand Drupal 8 theme development is to practice and create one from the ground up.

Custom Drupal Theme

Getting Started with Custom Drupal 8 Theme Development

Let’s get started with creating a Drupal 8 custom theme for our Drupal website.
STEP 1 : First, we need to create a custom theme under ‘web/themes/custom’ folder. We will name the folder as custom_theme.  

Create Custom Drupal 8 Theme folder
   
      Create Custom Drupal 8 Theme folder

STEP 2 :Next, we will need to create an info.yml file. We need to specify the basic keys for it. Let us specify it over here.

Create an info.yml file
       Create an info.yml file
CODE:
name: Custom Theme
type: theme
description: 'Custom Theme for My Website.'
package: Other
core: 8.x

STEP 3 : Now,let’s create alibraries.yml file to specify all the libraries we need (CSS AND JS) for our custom Drupal 8 theme.We will also create CSS and JS directory and its files to link it in here. We are going to name the library as global-styling.

Create a libraries.yml file
       Create a libraries.yml file
CODE:
global-styling:
version: 1.x
 js:
js/script.js: {}
 css:
theme:
css/style.css: {}

STEP 4 : After creating the libraries.yml file, we need to link it to our theme.For this, we are going to add it in the info.yml file which will then apply it to the whole theme. 
 

Linking the libraries.yml with the custom Drupal 8 theme
        Linking the libraries.yml with the custom Drupal 8 theme
CODE:
libraries:
- custom_theme/global-styling

So, the key will be libraries and path will be the theme name – ‘custom_theme’ / library name – ‘global-styling’.

STEP 5 : Next, we need to inherit the ‘Base Theme’.In our case, we will inherit ‘classy’ theme which is a Drupal core theme. So, the key will be base theme in info.yml. 

Inheriting the Base theme - classy
        Inheriting the Base theme – classy
CODE:
base theme: classy

STEP 6 : Now, we will define the‘regions’ for our theme. In info.yml, we have to define under the ‘regions’ key.

Defining 'regions'
 
         Defining ‘regions’
CODE:
regions:
branding: Branding
navigation: Main navigation
search: Search
featured: Featured
content: Content
right_sidebar: Right sidebar
footer_first: Footer First
footer_second: Footer Second
footer_third: Footer Third
footer_bottom: Footer Bottom

Under ‘regions’ key you can define your regions for the custom theme. Here,
branding: Is the id of the region which should be lowercase letter.
Branding: Is the name of the region which can be Uppercase letter.

STEP 7 : After we have defined our regions for our custom theme, we need to override page.html.twig to grab our ‘regions’instead ofthe classy theme’s. We will create templates/system directory under which we will create the page.html.twig.

Override the page.html.twig
       Override the page.html.twig
CODE:
header aria-label="Site header" class="header" id="header" role="banner">
     {{ page.branding }}
     {{ page.navigation }}
     {{ page.search }}
header>
section class="featured" id="featured" role="complementary">
   {{ page.featured }}
section>
section class="main" id="main">
   main aria-label="Site main content" class="content" id="content" role="main">
     {{ page.content }}
   main>
   aside class="right--sidebar" id="sidebar" role="complementary">
     {{ page.right_sidebar }}
   aside>
section>
footer aria-label="Site footer" class="footer" id="footer" role="contentinfo">
   div class="footer--top">
     {{ page.footer_first }}
     {{ page.footer_second }}
     {{ page.footer_third }}
   div>
   div class="footer--bottom">
       {{ page.footer_bottom }}
   div>
footer>

 In page.html.twig, we will create html structure for our regions. As you see in{{ page.branding }} –Here,

page – Is the key to render ‘regions’ in the page

branding- Is the region which we have defined in info.yml file.

So now, we have created our regions and rendered it in the page, now let’s start.

Step 8 : Go to Appearance in your Drupal site.You can see your custom theme present in the Uninstalled themes section.

Uninstalled Themes Section
        Uninstalled Themes Section

You need to click ‘Install and set as default’ option to install your theme in the site.

After it is installed,go to Structure -> Block Layout.Your Custom Theme will appear under the Block Layout.

drupal custom theme
​​​​​​  

You will see a link for ‘Demonstrate block regions (Custom Theme)’.Click on the link.You can see all the regions that you had declared in theinfo.yml and added in page.html.twig
 

Regions added in info.yml and page.html.twig
       Regions added in info.yml and page.html.twig

Step 9 :Now, you need to apply styles in the CSS for each region as per your design.We will use cssin this case;You can even use SCSSif you’d like. Just inspect the branding region – you shouldsee the region class and then add the CSS to that class. 

 

Add CSS in style.css as per your requirement.

.header{
 display: flex;
 justify-content: space-between;
 padding: 10px;
}

.header.region { padding: 5px; }

.header.region-branding { flex: 0 1 20%; }

.header.region-navigation { flex: 0 1 50%; }

.header.region-search { flex: 0 1 30%; }

.region.block-region { padding: 15px; }

.featured{ padding: 40px 20px; background-color: indianred; }

.main{ padding: 50px 0; display: flex; justify-content: space-between; }

.main.content { flex: 0 1 65%; }

.main.right--sidebar { flex: 0 1 30%; }

.footer--top { display: flex; justify-content: space-between; padding: 10px; }

.footer--top .region { padding: 5px; }

.region-footer-first, .region-footer-second, .region-footer-third { flex: 0 1 30%; }

 

The Result:

Your Drupal 8 Custom Theme is ready!

drupal custom theme

 

If you need to write any hooks or create suggestions for your twig file, you could add the .theme file in your custom theme (shown below).

Adding the .theme file
      Adding the .theme file

 

Shefali ShettyApr 05, 2017

 

Kalamuna Blog: Web Design for Disaster – Part 1: Alert Your Users

Web Design for Disaster – Part 1: Alert Your Users

Mike McCaffrey
Mon, 03/30/2020 – 10:26

As the world navigates through a public health crisis, and everyone is forced to respond to unprecedented conditions, it is a good time to evaluate how well your website is working to communicate urgent information to your stakeholders, and how it might be improved going forward. 

The designers and developers at Kalamuna have helped many organizations prepare and respond to emergency situations, and in this series of posts, we are going to share the lessons we have learned and the best practices we are now recommending to our clients.

Web Omelette: Automated testing in Drupal 8

This is an excerpt from my book: Drupal 8 module development – second edition. Do check out the rest of the book/chapter to see how you can write automated tests in Drupal 8.

Automated testing is a process by which we rely on special software to continuously run pre-defined tests that verify the integrity of our application. To this end, automated tests are a collection of steps that cover the functionality of an application and compare triggered outcomes to expected ones.

Manual testing is a great way to ensure that a piece of written functionality works as expected. The main problem encountered by most adopters of this strategy, especially those who use it exclusively, is regression. Once a piece of functionality is tested, the only way they can guarantee regressions (or bugs) were not introduced by another piece of functionality is by retesting it. And as the application grows, this becomes impossible to handle. This is where automated tests come in.

Automated testing uses special software that has an API that allows us to automate the steps involved in testing the functionality. This means that we can rely on machines to run these tests as many times as we want, and the only thing stopping us from having a fully-working application is the lack of proper test coverage with well-defined tests.

There’s a lot of different software available for performing such tests and it’s usually geared toward specific types of testing. For example, Behat is a powerful PHP-based open source behavior testing framework that allows the scripting of tests that mirror quite closely what a manual tester would do—interact with the application through the browser and test its behavior. There are other testing frameworks that go much lower in the level of their testing target. For example, the PHP industry standard tool, PHPUnit, is widely used for performing unit tests. This type of testing focuses on the actual code at the lowest possible level; it tests that class methods work properly by verifying their output after providing them with different input. A strong argument in favor of this kind of testing is that it encourages better code architecture, which can be (partly) measured by the ease with which unit testing can be written for it.

We also have functional or integration tests which fall somewhere in between the two examples. These go higher than code level and enlist application subsystems in order to test more comprehensive sets of functionality, without necessarily considering browser behavior and user interaction.

It is not difficult to agree that a well-tested application features a combination of the different testing methodologies. For example, testing the individual architectural units of an application does not guarantee that the entire subsystem works, just as testing only the subsystem does not guarantee that its individual components will work properly under all circumstances. Also, the same is true for certain subsystems that depend on user interaction—these require test coverage as well.

Automated testing in Drupal 8

Testing methodologies in Drupal 8

Like many other development aspects, automated testing has been greatly improved in Drupal 8. In the previous version, the testing framework was a custom one built specifically for testing Drupal applications—Simpletest. Its main testing capability focused on functional testing with a strong emphasis on user interaction with a pseudo-browser. However, it was quite strong and allowed a wide range of functionality to be tested.

Drupal 8 development started with Simpletest as well. However, with the adoption of PHPUnit, Drupal is moving away from it and is in the process of deprecating it. To replace it, there is a host of different types of tests—all run by PHPUnit—that can cover more testing methodologies. So let’s see what these are.

Drupal 8 comes with the following types of testing:

  • Simpletest: exists for legacy reasons but no longer used to create new tests. This will be removed in Drupal 9.
  • Unit: low-level class testing with minimal dependencies (usually mocked).
  • Kernel: functional testing with the kernel bootstrapped, access to the database and only a few loaded modules.
  • Functional: functional testing with a bootstrapped Drupal instance, a few installed modules and using a Mink-based browser emulator (Goutte driver).
  • FunctionalJavaScript: functional testing like the previous, using the Selenium driver for Mink that allows for testing JavaScript powered functionality.

Apart from Simpletest, all of these test suites are built on top of PHPUnit and are, consequently, run by it. Based on the namespace the test classes reside in, as well as the directory placement, Drupal can discover these tests and know what type they are.

PHPUnit

Drupal 8 uses PHPUnit as the testing framework for all types of tests. In this section, we will see how we can work with it to run tests.

On your development environment (or wherever you want to run the tests), make sure you have the composer dependencies installed with the –dev flag. This will include PHPUnit. Keep in mind not to ever do this on your production environment as you can compromise the security of your application.

Although Drupal has a UI for running tests, PHPUnit is not well integrated with this. So, it’s recommended that we run them using the command line instead. Actually, it’s very easy to do so. To run the entire test suite (of a certain type), we have to navigate to the Drupal core folder:

cd core

And run the following command:

../vendor/bin/phpunit --testsuite=unit

This command goes back a folder through the vendor directory and uses the installed phpunit executable (make sure the command finds its way to the vendor folder in your installation). As an option, in the previous example, we specified that we only want to run unit tests. Omitting that would run all types of tests. However, for most of the others, there will be some configuration needed, as we will see in the respective sections.

If we want to run a specific test, we can pass it as an argument to the phpunit command (the path to the file):

../vendor/bin/phpunit tests/Drupal/Tests/Core/Routing/UrlGeneratorTest.php

In this example, we run a Drupal core test that tests the UrlGenerator class.

Alternatively, we can run multiple tests that belong to the same group (we will see how tests are added to a group soon):

../vendor/bin/phpunit --group=Routing

This runs all the tests from the Routing group which actually contains the UrlGeneratorTest we saw earlier. We can run tests from multiple groups if we separate them by a comma.

Also, to check what the available groups are, we can run the following command:

../vendor/bin/phpunit --list-groups

This will list all the groups that have been registered with PHPUnit.

Finally, we can also run a specific method found inside a test by using the --filter argument:

../vendor/bin/phpunit --filter=testAliasGenerationUsingInterfaceConstants

This is one of the test methods from the same UrlGeneratorTest we saw before and is the only one that would run.

Registering tests

There are certain commonalities between the various test suite types regarding what we need to do in order for Drupal (and PHPUnit) to be able to discover and run them.

First, we have the directory placement where the test classes should go in. The pattern is this: tests/src/suite_type, where suite_type is a name of the test suite type this test should be. And it can be one of the following:

  • Unit
  • Kernel
  • Functional
  • FunctionalJavascript

So, for example, unit tests would go inside the tests/src/Unit folder of our module. Second, the test classes need to respect a namespace structure as well:

namespace DrupalTests[module_name][suite_type]

This is also pretty straightforward to understand.

Third, there is a certain metadata that we need to have in the test class PHPDoc. Every class must have a summary line describing what the test class is for. Only classes that use the @coversDefaultClass attribute can omit the summary line. Moreover, all test classes must have the @group PHPDoc annotation indicating the group they are part of. This is how PHPUnit can run tests that belong to certain groups only.

So now that we know how to register and run tests, let’s order the book and start by looking at unit tests first.

Droptica: How to find and hire the best Drupal agency

Main Blog Picture - Drupal Agency

There are almost a million websites built on Drupal. The websites built on Drupal are growing ever bigger. In fact, Drupal is the main CMS contender if you want to build a big website and don’t want to use expensive proprietary platforms. Website generators, headless CMSes and Digital Experience Platforms architected by massive corporations, all are built on Drupal. Drupal, however, is a complex framework.

DrupalEasy: DrupalEasy Podcast 227 – Pivoting to Virtual Midcamp with Avi Schwab

Direct .mp3 file download.

Mike speaks with Avi Schwab, one of the organizers of MidCamp, on how the organizing team quickly shifted from an in-person camp to a virtual camp. In addition, Chris Weber also has three new change records for us.

URLs mentioned

DrupalEasy News

Sponsors

Subscribe

Subscribe to our podcast on iTunes, Google Play or Miro. Listen to our podcast on Stitcher.

If you’d like to leave us a voicemail, call 321-396-2340. Please keep in mind that we might play your voicemail during one of our future podcasts. Feel free to call in with suggestions, rants, questions, or corrections. If you’d rather just send us an email, please use our contact page.

Droptica: Drupal Agency Working Remotely

Main picture blog post

More and more software development companies (and not only those) start to move to a remote work setup. On one hand, it is the mark of current times, on the other – a result of recent global changes. The Covid19 pandemic is just a catalyst of the changes. It is also a test of how well the companies are prepared for the new situation. Remote work setup is something completely different to companies for which it was always part of the culture and something else for those who suddenly have to redefine all their working habits.