Working as a Drupal contractor can be rewarding and fulfilling, but it also comes with its own set of challenges. In this article, we'll explore 6 tips for boosting productivity and success as an independent contractor. From setting clear goals and priorities to staying organized and keeping your skills up-to-date, these tips can help you be more efficient and effective in your work. We'll also discuss the importance of networking and building relationships, as well as how to negotiate fair and reasonable rates for your services. By following these tips, you can set yourself up for success and enjoy a fulfilling career as an independent Drupal contractor.

How to Use Cypress for Testing Drupal jenna Fri, 01/27/2023 - 11:19 Drupal Automated Testing

If you’re not including tests in your Drupal development, chances are you think that it adds complexity and expense without providing enough benefit. Cypress is easy to learn and implement, will protect against regression as your projects become more complex and can make your development process more efficient.

Cypress is a tool for reliably testing anything that runs in a web browser. It’s open source and web platform agnostic (think: great for testing projects using front-end technologies like React) and highly extensible. It’s an increasingly popular tool and was the “#1 tool to adopt” according to Technology Radar in 2019.

In this blog, I’ll cover three topics to help you start testing in your Drupal project using Cypress:

• Installing Cypress
• Writing and running basic tests using Cypress
• Customizing Cypress for Drupal

Installing Cypress

Let’s assume that you created your Drupal project using composer as recommended on Drupal.org:

$ composer create-project drupal/recommended-project cypress

Your project will have (at least) this basic structure:

vendor/   web/   .editorconfig   .gitattributes   composer.json   composer.lock

The cypress.io site has complete installation instructions for various environments; for our purposes we’ll install Cypress using npm.

Initialize your project using the command npm init. Answer a few questions that node.js asks you and you’ll have a package.json file that looks something like this:

{   "name": "cypress",   "version": "1.0.0",   "description": "Installs Cypress in a test project.",   "main": "index.js",   "scripts": {   "test": "echo \"Error: no test specified\" && exit 1"   },   "author": "",   "license": "ISC"   }

Now you’re ready to install Cypress in your project:

npm install cypress --save-dev

Let’s run Cypress for the first time:

npx cypress open

Since we haven’t added any config or scaffolding files for Cypress, it will observe It looks like this is your first time using Cypress and open the Cypress app to the welcome screen, showing both E2E Testing and Component Testing as “Not Configured”. Let’s configure your project for E2E testing: click the “Not Configured” button for E2E Testing. Cypress will report that it added some files to your project:

cypress/   node_modules/   vendor/   web/   .editorconfig   .gitattributes   composer.json   composer.lock   cypress.config.js   package-lock.json   package.json

Click on “Continue”, then choose your preferred browser for testing and click “Start E2E Testing in [your browser of choice]”.

In a separate window, Chrome will open to the Create your first spec page:

Click on the ‘Scaffold example specs’ button and Cypress will create a couple of folders with example specs to help you understand a bit more about how to use Cypress. Read through them in your code editor and you’ll find that the language (based in js) is intuitive and easy to follow; click on any in the Chrome test browser and you’ll see two panels: a text panel on the left, showing each step in the active spec and a simulated browser window on the right, showing the actual user experience as Cypress steps through the spec.

Open the cypress.config.js file in your project root and change it as follows:

const { defineConfig } = require("cypress");     module.exports = defineConfig({   component: {   fixturesFolder: "cypress/fixtures",   integrationFolder: "cypress/integration",   pluginsFile: "cypress/plugins/index.js",   screenshotsFolder: "cypress/screenshots",   supportFile: "cypress/support/e2e.js",   videosFolder: "cypress/videos",   viewportWidth: 1440,   viewportHeight: 900,   },   e2e: {   setupNodeEvents(on, config) {   // implement node event listeners here   },   baseUrl: "https://[your-local-dev-url]",   specPattern: "cypress/**/*.{js,jsx,ts,tsx}",   supportFile: "cypress/support/e2e.js",   fixturesFolder: "cypress/fixtures"   },   });

Change the baseUrl to your project’s url in your local dev environment.

These changes tell Cypress where to find its resources and how to find all of the specs in your project.

Writing and running basic tests using Cypress

Create a new directory called integration in your /cypress directory, and within the integration directory create a file called test.cy.js.

cypress/   ├─ e2e/   ├─ fixtures/   ├─ integration/   │ ├─ test.cy.js   ├─ support/   node_modules/   vendor/   web/   .editorconfig   .gitattributes   composer.json   composer.lock   cypress.config.js   package-lock.json   package.json

Add the following contents to your test.cy.js file:

describe('Loads the front page', () => {   it('Loads the front page', () => {   cy.visit('/')   cy.get('h1.page-title')   .should('exist')   });   });     describe('Tests logging in using an incorrect password', () => {   it('Fails authentication using incorrect login credentials', () => {   cy.visit('/user/login')   cy.get('#edit-name')   .type('Sir Lancelot of Camelot')   cy.get('#edit-pass')   .type('tacos')   cy.get('input#edit-submit')   .contains('Log in')   .click()   cy.contains('Unrecognized username or password.')   });   });

In the Cypress application when you click on test.cy.js you’ll watch each of the test descriptions on the left while Cypress performs the steps in each describe() section.

This spec demonstrates how to tell Cypress to navigate your website, access html elements by id, enter content into input elements and submit the form. (I discovered that I needed to add the assertion that the element contains the text ‘Log in’ before the input was clickable. Apparently the flex styling of the submit input was impeding Cypress’ ability to “see” the input, so it couldn’t click on it.)

Customizing Cypress for Drupal

You can write your own custom Cypress commands, too. Remember the supportFile entry in our cypress.config.js file? It points to a file that Cypress added for us which in turn imports the './commands' file(s). (Incidentally, Cypress is so clever that when importing logic or data fixtures you don’t need to specify the file extension: import './commands', not './commands.js'. Cypress looks for any of a dozen or so popular file extensions and understands how to recognize and parse each of them.)

But I digress.

Define your custom commands in this commands.js file, such as:

/**   * Logs out the user.   */   Cypress.Commands.add('drupalLogout', () => {   cy.visit('/user/logout');   })     /**   * Basic user login command. Requires valid username and password.   *   * @param {string} username   * The username with which to log in.   * @param {string} password   * The password for the user's account.   */   Cypress.Commands.add('loginAs', (username, password) => {   cy.drupalLogout();     cy.visit('/user/login');   cy.get('#edit-name')   .type(username);   cy.get('#edit-pass').type(password, {   log: false,   });   cy.get('#edit-submit').contains('Log in').click();   });

Here we’re defining a custom Cypress command called drupalLogout(), which we can use in any subsequent logic – even other custom commands. To log a user out, call cy.drupalLogout(). This is the first thing we’re doing in our custom command loginAs, in which the first thing we do is ensure that Cypress is logged out before attempting to log in as the user specified by the username and password parameters.

Using environment variables you can even define a Cypress command called drush() – using some helper functions – with which you can execute drush commands in your test writing or custom commands. How simple is this for defining a custom Cypress command that logs a user in using their uid?

/**   * Logs a user in by their uid via drush uli.   */   Cypress.Commands.add('loginUserByUid', (uid) => {   cy.drush('user-login', [], { uid, uri: Cypress.env('baseUrl') })   .its('stdout')   .then(function (url) {   cy.visit(url);   });   });

This uses the drush user-login command (drush uli for short) and takes the authenticated user to the site’s base url.

Consider the security benefit of never having to read or store user passwords in your testing. Personally I find it amazing that a front-end technology like Cypress can execute drush commands, which I have always thought of as being very much on the back end.

You’ll want to familiarize yourself with Cypress fixtures as well (fixtures are files that hold test data) - but that’s a little outside the scope of this post. Please see Aten’s webinar Cypress Testing for Drupal Websites, particularly the section on fixtures that begins at 18:33. That webinar goes into greater detail about some interesting use cases – including an ajax-enabled form - and includes a scene from Monty Python and the Holy Grail which I hope you enjoy.

Because our VP of Development, Joel Steidl, helped me define drush() as a custom Cypress command, I’d like to share that with you as well. Please feel free to use or fork Aten’s public repository on Cypress Testing for Drupal.

Happy testing!

Jordan Graham

Best Lawn Care Website on the Internet (built with Drupal) mherchel Fri, 01/27/2023 - 11:00

Top 4 Reasons Why You Should Migrate from Drupal 7 to Drupal 10 Esha Banerjee Fri, 01/27/2023 - 10:24

Drupal 10 released in December 2022 and ever since, the community has been pushing its users to migrate to the latest version. 

As many as 54% of all Drupal sites are running on Drupal 7. 

Using an outdated version has downsides. Businesses miss out on technological advancements and new features that can speed up and safeguard their digital properties.

With the release of Drupal 10 and the fact that Drupal 7 will reach end of life in November 2023, it is crucial to migrate to Drupal 10 soon. Here’s why enterprises should plan their Drupal 10 migration now, and not wait until the last moment. 

Why should you migrate from Drupal 7 to Drupal 10? 

Drupal 10 brings automated updates, improved user experience, along with several other feature additions. These components will be more secure, user-friendly, and powerful. Let’s dive deep into why enterprises must plan their Drupal 7 to 10 migration. 

1. Community support: As an open source CMS, community support is what keeps Drupal's continuous innovation ongoing. With Drupal community prioritizing and actively focusing on security of newer versions, as and when Drupal 7 reaches end of life, the community support will seize. This primarily jeopardizes the security of your Drupal 7 website. This also means that contributed modules and themes that are currently used in your Drupal 7 website, will also lose support for maintenance. This would bring challenges in website maintenance.
    
2. New features and upgrades: Another consequence of not upgrading to latest version is that certain functionalities may cease to perform as intended. Or there may be better alternatives available. Not only can this cause extra annoyance among website maintainers, but resolving these issues may incur additional expenditures for your company owing to the time and resources required to do so. In Drupal 7, while developers had to manually upgrade/updates or search for modules from drupal.org , Drupal 10 has simplified this with Automated updates and Project browser, respectively. A lot of Drupal 7 features are either incorporated out-of-the-box in Drupal 10 or simply removed to maintain ease-of-use. 

• Automatic updates: Drupal sites require manual upgrading, which may be challenging, time-consuming, and expensive. Delays in applying security upgrades can lead to hacked sites. The Automated Updates Initiative seeks to give Drupal sites safe, secure automatic updates. In order to minimize the total cost of ownership of maintaining a Drupal site, increase the security of Drupal sites in the wild, and lower the entry barrier for utilizing Drupal, a safe mechanism for automatically deploying updates in Drupal is to be implemented.
   
• Project browser: Module installation and locating involve too many steps. Some steps call for you to navigate away from your Drupal site and visit Drupal.org. Other procedures, like utilizing Composer from the command line, need technical knowledge. For users who are new to Drupal and site builders, project browser aims to make it simpler to identify and install modules. This eliminates the need to visit Drupal.org or other sites. It is one of the primary Drupal strategic projects that determines the platform's development goals.
   
• New themes: Olivero & Claro - The Drupal 7 "Seven" theme from 2009 gave off an out-of-date system impression. Seven was replaced by the new "Claro" theme, which was created in accordance with the most recent requirements. The front-end theme, "Olivero," was created to fit with features that are well-liked by users, such as the Layout Builder. The Olivero theme will be WCAG AA compliant.

The simple finding and installation of modules should empower Drupal newcomers as well as "ambitious site builders" – Dries Buytaert.

Technical Dependencies

Drupal work on current supported PHP versions. Recommended PHP versions are the best choice for building a Drupal site because they will remain supported longer. Drupal 10 is built on PHP version 8.0 while 7 isbuilt on PHP 7 which is also reaching end of life. This creates technical dependencies in supporting the platform better.

1. jQuery, jQuery UI, jQuery Forms- Drupal 7 includes old and unsupported versions of these libraries. jQuery's current version is 3.6.x. Drupal 7 includes 1.4.2. Other libraries have comparable challenges. You may minimize this little with the jQuery Update module, although the most recent version is 2.1.x. Drupal 8 and later (as well as many other content management systems) make it simple to provide API access to your content. In the age of "publish everywhere," this is a critical feature. Drupal 7 has some basic API support, but if you want a full-fledged API with write support, you'll have to create it yourself, which adds technical debt and possible vulnerabilities.
    
2. CKEditor 5 update from CKEditor 4 - With a thorough rebuild and an exciting new feature set, CKEditor 5 gives Drupal 10 a modern, collaborative editor experience. Users of programs like Microsoft Word or Google Docs will be used to the new CKEditor's interface. It also offers common tools for collaboration like comments, change suggestions, version histories, and other accepted editing practices. Additionally, it has outputs to.docx and.pdf files for straightforward conversion to print formats. Although the integration is still being worked on, Drupal core 9.3 already has an experimental version if you want to try it out.
    
3. Composer 2 and PHP 8 support - Although backporting of composer 2 to Drupal 8 was successful, PHP 8 compatibility was not. PHP 8 will be required for Drupal 10 because PHP 7 will be discontinued in November 2022.

Modules that have gone out of support:

The Drupal 10 core will be updated to eliminate a few modules that are redundant or are not frequently used. For uniformity, these modules will be transferred to the Contributed Module area.

• Gathers and presents syndicated material from outside sources (RSS, RDF, and Atom feeds).
• QuickEdit: In-place content editing.
• HAL - Serializes entities using the Hypertext Application Language.
• Users may keep track of recent content with the activity tracker feature.
• RDF – Enhances websites with metadata so that other systems may comprehend their characteristics.

You will have to leave Drupal 7 behind. Eventually, the opportunity cost of continuing to use software that is more than 10 years old is substantial, and once it is considered End of Life (EOL), the risk and expense of an uncovered vulnerability increases rapidly.

There are several possibilities available to you, and you have an additional year to choose and make plans for one of them. The ideal option will rely on the expertise level of your team, the amount of business logic you have included into Drupal 7, and your projected budget.

Conclusion 

Drupal 7 will reach end of life in November 2023, Drupal experts recommend that organizations begin migrating to Drupal 10 soon and not wait till November 2023.

If you want to migrate your website to Drupal 9 and prepare for Drupal 10, you may rely on our Drupal migration skills and expertise.

OpenSense Labs, as a Drupal partner, is committed to providing active support. Contact us at hello@opensenselabs.com for a long-term and fruitful collaboration.

Articles Off

We’re hearing it these days from many of our support clients. Another upgrade?  Drupal did not always move so fast. The two and a half years between the release of Drupal 10 in December of 2022, and the release of Drupal 9 in June of 2020 is in sharp contrast to the four and a half years between the release of Drupal 8 and 9, and the nearly five years between the release of Drupal 7 and 8.

At Evolving Web, we believe in hiring creative thinkers, and fast, practical learners. While skills like building Drupal modules and accessibility best practices can be learned in online classes, we believe there’s no substitute for grit, creativity, curiosity and self-drive. UX/UI designer Elena Rodriguez is a textbook example of an Evolving Web hire.

Elena at the Evolving Web office in Montreal.

A Chance Encounter

A native of Barcelona, Spain, now based in Montreal, Elena is a musician – a talented pianist and choral singer – with a degree in musicology and another in philosophy. Her passion for music was what ultimately led to her emigrating to Canada.

“I first met my husband, who is Quebecois, when I was singing in a choir,” she explains. “We met in Iceland during a performance tour. We then maintained a distance relationship for three years before I eventually decided to move to Canada.”

Following her graduation, she worked in music management, mostly in archives, but felt stuck in her career, craving something that offered more in the way of continuous learning opportunities. It was through meeting people while traveling that she was introduced to web development.

Elena playing the piano.

After taking several online courses and a bootcamp in full stack development in Barcelona, she realized that she was most interested in the visual and design aspects.

“I started to learn design basics on my own,” says Elena. “I started learning the fundamentals of design, with tools like Figma and Adobe XD. Then I learned how to actually bring these sites alive using Webflow, building small landing pages. And before long, I was doing freelance work.”

Learning by Doing

Elena didn’t consider herself a full-fledged designer when she applied for a job at Evolving Web. She was pleasantly surprised when we responded to her application.

 “I can’t remember how I discovered Evolving Web, but I saw a call for “spontaneous applications”. I really wasn’t expecting anybody to contact me, as my background was very broad and I knew nothing about Drupal. But I was told they were most interested in somebody who could learn quickly, and to my delight, they had a position that fit my profile.”

Elena’s first task at Evolving Web was a content entry in WordPress for a project with York University. From there, she moved onto internal design assignments in partnership with the marketing team. This has included redesign work for Evolving Web’s homepage. 

Elena says that while she had previous knowledge of UI, she needed to gain a UX background before Evolving Web, but was able to gain that knowledge and experience on the job. “The company gave me an opportunity to do a training course,” she explains. “I’ve also learned a lot from my colleagues when it comes to UX. I feel like my profile is now more UX than anything else, as most of my work is geared towards that. 

Elena and the Evolving Web Design Team.

Embracing Company Culture

“The most challenging aspect of the job has been understanding the different roles and where everyone fits and works as a team,” she shares.

Prior to this, all of Elena’s work was as a freelancer. “I didn’t even know what a project manager did before joining Evolving Web. Understanding all the internal processes, roles and tools were challenging,” she admits. But I’ve loved the company culture from the beginning. Everyone has been wonderfully supportive and I’ve come to feel like I really fit.”

Elena at a library in Barcelona.​​​

Evolving Elena

Elena lives in Montreal – her home for the last two years – with her husband and two cats. She says she first came to Canada as a tourist and then returned later with a work permit, spurred by a desire to live abroad.

“I really like the quality of life in Canada,” she asserts. “I feel like there are a lot more opportunities here.”

When not at work, Elena keeps herself busy practising piano and improving her French – her fourth language after Spanish, Catalan and English. She also takes Latin dance classes and is hoping to find a choir to join in her adopted hometown. Obsessed with books, she hopes to learn editorial design at some point in the future.

Elena’s choir.

“I am obsessed with “to-learn” lists,” she says. “I want to do and learn so many new things that I need to write them down. Unfortunately, I don’t have time for all of them,” she adds reluctantly. “Professionally, I’m focusing on building expertise in the UX field and developing my visual design skills. I’m looking forward to collaborating with the great designers we have on our team. There’s so much learning and inspiration coming from them.”

Elena loves to take on projects in her spare time, including music and creative arts.

Join Our Team

In addition to UX/UI designer Elena Rodriguez, we’ve built an eclectic team of designers, developers and marketers. Our team not only spans the globe, it also represents a wide range of academic, professional and artistic backgrounds. 

Sound like a good fit? Check out our careers page

//--> //--> //-->

 

+ more awesome articles by Evolving Web

In this article we are going to see how we can set up a multisite environment with ddev on the local machine. Assuming people are aware of configuring the drupal multiple site from the drupal side of configurations. As we all know ddev is an open source tool for running local PHP development environments in minutes, which makes developer life easier during the local environment setup process, her

Get your session in now...

Call for Speakers

We’ve had 30+ sessions submitted already and we’d love to add your words to that number. We’re looking for talks geared toward beginner through advanced Drupal users, as well as end users and business owners. Please see our session tracks page for full descriptions of the kinds of talks we are looking for. Listen to the recording of our Speaker Workshop for some ideas.

Submit a session now!

Important Dates:

• Proposal Deadline: January 25 (Wednesday), 2023 at midnight CST

• Tickets on sale: very soon! Keep an eye out.

• Early-bird deadline and speakers announced: early February (all speakers are eligible for a free ticket, and anyone who submits a session that is not accepted will be eligible for early-bird pricing even after it closes)

Sponsors Get Early, Privileged Access

Get early and privileged access to new talent and customers by sponsoring MidCamp. We have a variety of sponsorship packages available.

Starting at $600, sponsoring organizations can target their jobs to a select group of experienced Drupal talent, maximize exposure by sharing space with dozens of jobs instead of millions, and have three days of being face-to-face with applicants.

Because sponsors make MidCamp possible, we want to return the favor by helping your organization grow within the community and save you time.

Find the right sponsorship for you!

Stay In The Loop

Join the MidCamp Slack and come hang out with the community online. We will be making announcements there from time to time. We’re also on Twitter and Mastodon.

Keep an eye on this space, we will be releasing more blog posts with venue details, hotel and travel options, fun social events, speaker announcements and more! Our preliminary schedule is up now.

We can’t wait to see you soon! Don’t forget, cancel all those other plans and make MidCamp the only thing happening on your calendar from April 26-28, 2023. 😀

There are many ways to contribute to an open source project like Drupal, and not all of them require a deep understanding of programming or web development. Some examples of ways to contribute include:

How to Contribute to Drupal - Ways for Everyone to Get Involved

1. Testing and reporting bugs: This can be done by looking through the issue queue on Easy Breadcrumb and look for issues that are marked “Needs Review”.

2. Documentation: Writing and improving documentation is a valuable way to help others learn and use Drupal.

3. Translation: Helping to translate the interface and documentation of Drupal into diffrent languages.

4. Support: Answering questions on forums and providing assistance to others in the community.

5. Design and User Experience: Helping to improve the look and feel of Drupal, and making it more user-friendly.

6. Marketing and outreach: Helping to promote Drupal and increase its visibility.

7. Code contributions: If you do have the skills, contributing code is a graet way to help improve Drupal and add new features. Swap the “Needs Review” filter to “Needs Work” and pick a task!

Drupal Contributor Resources

So, anyone can contribute to Drupal community, regardless of their technical skills. To get started with contributing to Drupal, there are a few resources that can be helpful: - Drupal Best Practices is a series of best practice posts that will help you get better at site building. - The Drupal community is a great place to connect with other developers and contributors. You can find information on upcoming events, join groups, and participate in discussions. - The Drupal issue queue is where you can find bugs and feature requests that need to be addressed. You can start by looking for issues that are labeled “novice” or “mentored” to find tasks that are well-suited for new contributors. - The Drupal documentation is a good resource for learning about the platform and its various components. - The Drupal handbook is a great resource for understanding the process of contributing to Drupal, including information on coding standards and best practices. - The Drupal Maintainers Slack channel is a great place to ask for help and connect with other developers, especially #maintainer channel which is for project maintainers and developers to discuss on how to maintain modules.

In this post we'll describe how you can create a grid-like section of simple items, by creating a new Drupal Media type.