DRUPALDEALS.COM

DrupalEasy: Test driving the new DDEV Manager extension for Visual Studio Code

Introduction

If you use Visual Studio Code and DDEV, there's a new extension that may increase your efficiency. The DDEV Manager extension provides a user interface within Visual Studio Code for just about every conceivable DDEV command. As I am a user of both tools, and I often teach and present on the topic of maximizing one's efficiency related to Drupal development when using DDEV and Visual Studio Code, a thorough review of this new extension was a no-brainer for me.

Installation

Installation of the extension is typical of any other Visual Studio Code extension - from the "Extensions" sidebar, search for "DDEV manager" and then click to install. No restart of Visual Studio Code is necessary. Upon successful installation, the DDEV icon will be present in the sidebar.

Basic functionality

The default view of the DDEV Manager extension is a list of all DDEV projects on the machine. The counter-intuitive thing about it is that if Visual Studio Code is already open to one of the listed projects, its entry on the list isn't highlighted. In fact, from this default view, any DDEV project on the machine can be started. But, there's an icon at the top of the sidebar window that provides the ability to toggle between "All DDEV projects" and "Workspace projects"; I think the latter should be the default. I opened a feature request for this, but it was quickly rejected ☹️. However, there is a "DDEV: Show Projects List" setting in the Visual Studio Code configuration (via the "Code | Settings" menu) that allows the default to be changed.

Each entry in the list has options to start, stop, restart, rename, configure, delete, launch restart, and even a button to open an ssh connection to the DDEV web container. In addition, the contextual menu (see image) provides access to virtually all project-related DDEV commands. Granted, these are all things that basic DDEV commands do, but it is rather nice to have them all represented in the UI. Most of the options work the way you would expect. For example:

Configure opens the .ddev/config.yaml file in Visual Studio Code
XDebug Enable and XDebug Disable provide feedback in the form of a standard Visual Studio Code notification.
Create Snapshot provides you the ability to name the snapshot in the form of a standard Visual Studio Code popup dialog.

One standout, in my opinion, is the Add Services option. It provides a popup dialog listing all of the available DDEV addons. I really like this feature, as discovering these addons is a relatively new feature in DDEV and I think this will really provide a lot of value to the DDEV community. For example, did you know that you could add a Solr or PDFreactor service to DDEV with a single command? Well, now you can do it with a couple of clicks - fantastic!

Clicking the angle bracket to the left of each project name in the interface provides an overview of the current status of the project. A nice surprise was the ability to modify the version of PHP and/or NodeJS used in the DDEV web container via a standard Visual Studio Code popup dialog (see image).

This detailed view of the DDEV project also provides nice touches like buttons to ssh into the project's various service containers, the ability to open the project directory in the OS's native file explorer, and the ability to open the MailHog interface in a browser.

How does this compare with the PhpStorm DDEV plugin?

The DDEV Integration plugin for PhpStorm offers similar functionality, but it is more focused on only the currently opened project. It also includes super-useful CLI integration so that tools like phpcs and PhpStan can be run inside the DDEV web container with their results exposed to the PhpStorm UI. This is not a feature that the DDEV Manager extension provides.

Summary

Who should use this extension? If you use DDEV and Visual Studio Code, this seems like a no-brainer especially if you enjoy your user interfaces. But, there is one caveat: if you connect to the DDEV web container via the Visual Studio Code Dev Containers extension, then the DDEV Manager extension is irrelevant for your use case.

The developer, Biati Digital, acknowledges that this is a new project and bug reports and feature requests are welcome in the issue queue.

Note: there is an older, seemingly no-longer-maintained DDEV-related extension available for Visual Studio Code called "ddev". At the current time, this extension is not recommended for use.

DrupalEasy: Termageddon.com for keeping your site's policies up-to-date

Privacy and terms of use policies seem to be in constant state-of-flux due to various legal jurisdictions often updating requirements for businesses that operate in their area. Keeping up with all the changes is challenging, to say the least.

For the past few years, DrupalEasy has been using Termageddon.com to help keep our various site policies current. To get started, we provided Termageddon with some details about our business and what type(s) of policies we were looking for. The service then provided us with some HTML/Javascript code snippets that we include on our various policy pages that automatically pull up-to-date content from Termageddon.

While we are notified each time one of our policies change, it all happens automatically. This notification gives us the opportunity to review the changes and discuss with our legal representation, if necessary.

Using a service like this is not a replacement for legal representation - consider it a supplement, at best.

If you're unsure if your site requires a service like this, then it is worth your time investigating. If your site captures user data in any manner (contact forms, Webforms, analytic tools), it probably is a good idea to have a sound set of policies. Termageddon can help make the process of setting up your site's policies easier.

DrupalEasy is an affiliate of Termageddon.com and receives consideration for client referrals.

DrupalEasy: PHP Sniffer & Beautifier extension for Visual Studio Code

If you've been a user of Visual Studio Code for your custom Drupal development, then you're probably (hopefully) familiar with this Drupal.org documentation page that provides an overview of recommended extensions and configuration.

In the past, I've recommended using the phpcs extension for integration with Visual Studio Code. I did this knowing full well that there haven't been any new commits to the extension's code since 2018! It worked fine, and it was also the recommended phpcs-related extension on the doc page mentioned above, so I didn't think about it too much.

Recently, in an effort to use phpcs and phpcbf in a slightly different way (more on that another time), I needed to find a more up-to-date extension - I found (and have been using for several months now) the PHP Sniffer & Beautifier extension. This includes all the necessary functionality to display coding standard issues in Visual Studio Code's Problems tab and has been better maintained the past few years (although the maintainer is looking for others to help).

Here's my configuration when using a separate install of Drupal Coder (although different configurations are possible depending on your project and local development stack).

  /* PHP Sniffer & Beautifier */
 "phpsab.snifferEnable": true,
 "phpsab.executablePathCS": "/Users/michael/sites/drupal_coder/vendor/bin/phpcs",
 "phpsab.fixerEnable": true,
 "phpsab.executablePathCBF": "/Users/michael/sites/drupal_coder/vendor/bin/phpcbf",
 "phpsab.standard": "/Users/michael/sites/drupal_coder/phpcs.xml",
 "phpsab.snifferMode": "onType",
 "phpsab.debug": false,
 "phpsab.fixerArguments": [],

If you're a Visual Studio Code user and you utilize phpcs and phpcbf as part of your everyday workflow, you may want to consider using this module.

DrupalEasy's Professional Module Development course (Full version) includes configuring both Visual Studio Code and PhpStorm to integrate phpcs, phpcbf, and PhpStan in an efficient manner.

The pixel art image used in this blog post was generated by the DALL-E project of OpenAI.

DrupalEasy: DDEV integration plugin for PhpStorm can increase your Drupal development efficiency

If you use DDEV and PhpStorm, then the DDEV Integration plugin should definitely interest you (especially if you're into code quality tools like phpcs and PhpStan). If you don't use DDEV and PhpStorm, then the DDEV Integration plugin might entice you to take a fresh look...

It can be arduous to configure PhpStorm to integrate with phpcs and/or PhpStan to show code quality issues in the PhpStorm Problems area as shown here:

In the past, we've often recommended to students and client that they install Drupal Coder alongside their Drupal projects and then point to its binaries of phpcs and PhpStan (utilizing the host operating system's PHP) in order to (somewhat) easily integrate those tools with PhpStorm.

The DDEV integration plugin makes it easy to point to phpcs and PhpStan in each project (assuming drupal/core-dev dependencies are included in the project) and then (here's the magic) utilize the automatically configured (by the DDEV integration plugin) command-line access inside the DDEV web container - awesome!

This configuration allows you to point to your phpcs.xml configuration file using the file path inside the DDEV web container!

DrupalEasy's Professional Module Development course (Full version) includes configuring both Visual Studio Code and PhpStorm to integrate phpcs, phpcbf, and PhpStan in an efficient manner.

DrupalEasy: Adding fields to the "Authoring information" area on a standard Drupal node add/edit page

Have you been in the situation where you've added a new field to a Drupal content type and you want that field to appear somewhere in the sidebar of the node add/edit page for that content type (instead of in the main column along with all the other fields)?

If so, the following snippet of code, added to a custom module on your site is exactly what you're looking for. In this example, a user reference field with the machine name of field_additional_authors was added to a Blog content type. This code places the field in the Authoring information accordion item in the sidebar:

/**
 * Implements hook_form_alter().
 */
function my_module_form_alter(array &$form, FormStateInterface $form_state, string $form_id): void {
  // Move the "Additional authors" field to the "Authoring information"
  // accordion.
  if (in_array($form_id, ['node_blog_edit_form', 'node_blog_form'])) {
    $form['field_additional_authors']['#group'] = 'author';
  }
}

Note that the add and edit forms have slightly different $form_id values.

The Drop Times: Growing Together in the Drupal Land: The 'Learn Drupal' Initiative

One of the goals we have at TheDropTimes is to get more people to learn Drupal, and to reach this, we have initiated a project called "Learn Drupal."

Learning Drupal doesn't have to be a steep, uphill task. The journey can be manageable and genuinely enjoyable with the correct "map" at hand and knowing where to look for support.

Metadrop: We are going to the Drupal Camp Spain at Seville

Drupal Camp Spain is happening this Friday! This year is in Seville, at the Faculty of Computer Science, University of Seville. From Thursday 21st to Saturday 23rd, including not only a lot of talks but also a Business Day where companies or individual freelancers can meet with other Drupal agents and share experiences and ideas.

Image

Photo by Joan Oger on Unsplash.

Thanks!

A Drupal Camp is an event where a Drupal community can meet and exchange knowledge in real life, as opposed to the digital interactions of the rest of the year. It is the great…

Sooper Drupal Themes: Important License Management & Page Building Updates - DXPR Builder 2.4.0

It's an exciting time here at DXPR! With the release of DXPR Builder 2.4.0, we're underscoring our dedication to refining user experience based on the feedback from our esteemed community.

Easier User License Management

The User License Dashboard in DXPR Builder 2.4.0 has been revamped with two transformative features:

Selective User Exclusion: This newly-introduced feature allows users to exclude specific individuals from DXPR Builder editing. It's particularly valuable when you want to exempt admin accounts from being counted as billable users.
Stale Data Purging: Keeping your dashboard tidy is now a breeze! With the added ability to delete outdated user data from different environments, you can maintain a clutter-free workspace with ease.

Site Builders, We Heard You!

Our site builders will find joy in the updated process of page template creation. Extracting page templates from user templates has never been more streamlined. A more efficient workflow means you spend less time setting up and more time bringing your visions to life.

An Elevated Experience for Content Editors

To our content architects and editors, we’ve boosted the drag-and-drop functionality. Whether you’re placing elements in tight confines or navigating between sections, the experience is smoother than ever. Plus, we've ensured that the dropdown UI for breakpoint selection in Bootstrap 5 utilizes the radio widget, bringing added clarity to your editing process.

And More...

Container reminders have been tweaked to auto-hide after 5 saves, minimizing unnecessary interruptions.
We've rectified various bugs, ranging from profile editing challenges to script behavior inconsistencies, ensuring your experience with DXPR Builder is as seamless as ever.

One Quick Reminder: As you delve into the 2.4.0 update, please ensure to run drush updb or update.php due to a database schema adjustment.

For a comprehensive list of updates and enhancements, please refer to the official release notes on Drupal.org.

Our evolution in enhancing DXPR is driven by our collaboration with users like you. We're proud of the innovations in DXPR Builder 2.4.0 and are keen to learn about your experiences. Together, let's shape the future of DXPR!

Oomph Insights: My Experience as a Drupal Mentor: Empowering the Next Generation of Web Devs

When I first discovered Drupal, it was love at first click. I was fascinated by how easy it was to build powerful websites and digital platforms with its free, open source tools. One of the things that attracted me to the Drupal community from the beginning was its commitment to giving back. Every line of code, module, and feature created with this open source content management system is available for anyone to use – and there’s nothing Drupal enthusiasts love more than turning other devs into Drupal converts. Drupal is a community-driven movement focused on ensuring that everyone can tap…

Specbee: Gulp: Redefining Your Web Development Workflow

Developers spend hours manually optimizing CSS, JavaScript, and other assets to make websites load faster and smoother. Not only is it time-consuming, but it can also be an error-prone process. The need of the hour is a digital savior, a tool that promises to do all the heavy lifting, leaving developers with more time to focus on creativity. Meet Gulp. What is Gulp Gulp is the unsung hero of developers that makes your coding journey smoother and your websites faster. Gulp is a JavaScript-based automation tool that helps you compile and execute tasks like compiling SASS/SCSS/LESS files, minifying and concatenating CSS and JS files, and much more! Why use Gulp Gulp is also popularly known as a task-runner and is very helpful for building any kind of web application. What can you expect from Gulp? Effortless SASS/SCSS/LESS to CSS compilation Easily bundle, minify, concatenate, and optimize CSS and JS files Set your output to the destination folder as per your desired approach, for example, single file compilation or original folder structure compilation Saves effort and time by automating repetitive tasks The Workflow Install Node and Gulp Setup package.json Setup Gulp using gulpfile.js Write Gulp tasks What are Tasks A Gulp task is an asynchronous function that performs a set of actions like compilation of SCSS to CSS files, minifying CSS, JS, and HTML files, etc. Function taskName() { // task to perform } Types of tasks Public A public task is accessible as an individual task. This is an exported task that can be accessed by the gulp command individually. function buildStyles() { return src(‘scss/**/*.scsss’) .pipe(sassGlob()) .pipe(sass()) .pipe(dest(‘build/css/’)); } exports.buildStyles = buildStyles;Private Unlike public tasks, private tasks are not exported or directly accessible as individual tasks. It has to be included within the parallel() or series() APIs. function buildStyles() { return src(‘scss/**/*.scsss’) .pipe(sassGlob()) .pipe(sass()) .pipe(dest(‘build/css/’)); }Gulp APIs Gulp APIs are used to perform a set of actions, like reading/writing the files, creating tasks, watching files, etc. Let’s discuss some key Gulp APIs for better understanding. src() src() is used to read the files from the file system. In other words, it’s used to provide the source path of files where we are making changes. src(globs, [options])dest() dest() is used to provide the destination path of the folder where we want to store the new files. dest(directory, [options])series() Combines the task functions into a single operation where the defined functions are executed one after another, in sequential order. series(...tasks)parallel() Combines the task functions into a single operation where the defined functions are executed simultaneously. parallel(...tasks)watch() Watches the sourced files and executes the tasks defined when real-time changes occur. watch(globs, [options], [task])Getting started with Gulp Now that we have a fair understanding of what Gulp is and can do, let’s move ahead with working with Gulp. Requirements In order to install gulp, we need to install Node first. You can download it from the official website of Node.js or you can download it using homebrew by using the following command: brew install nodeInstall Gulp Use the below command to install Gulp npm install --global gulp-cliThis command will install Gulp globally. Setup Gulp Please follow the below steps to set up your Gulp project: Step 1: Browse to your theme folderStep 2: npm init It will prompt you to enter a few details which would be as follows: Package name Default: current working directory Version Default: 1.0.0 Description Default: null Entry point Default: index.js Change it to gulpfile.js Test command Default: null Git repository Default: null Keywords Default: null AuthorDefault: nullLicenseDefault: ISC $ npm install --global gulp-cli $ cd techx-gulp $ npm init package name: (techx_gulp) version: (1.0.0) description: Gulp.js setup for TechX. entry point: (index.js) gulpfile.js test command: git repository: keywords: author: Shashwat Tiwari license: (ISC)Step 3: Verify the package.json dataStep 4: Install dependencies $ npm install gulp gulp-sass gulp-concat gulp-sass-glob gulp-sourcemaps gulp-uglify --save-devYour package.json would look something like this. { “name”: “techx_gulp”, “version”: “1.0.0”, “description”: “Gulp.js setup for TechX.”, “main”: “gulpfile.js”, “scripts”: { “test”: “echo \”Error: no test specified\” && exit 1” }, “author”: “Shashwat Tiwari”, “license”: “ISC”, “devDependencies”: { “gulp”: “^4.0.2”, “gulp-concat”: “^2.6.1”, “gulp-sass”: “^5.1.0”, “gulp-sass-glob”: “^1.1.0”, “gulp-sourcemaps”: “^3.0.0”, “gulp-uglify”: “^3.0.2”, “sass”: “^1.64.1” } }Setup gulpfile.js You can set up your gulpfile.js as demonstrated below: const { src, dest, watch, series, parallel } = require('gulp'); const sass = require('gulp-sass')(require('sass')); const sassGlob = require('gulp-sass-glob'); const sourcemaps = require('gulp-sourcemaps'); const concat = require('gulp-concat'); const uglify = require('gulp-uglify'); var paths = { sassSrc: 'scss/**/*.scss', sassDest: 'build/css/', jsSrc: 'js/**/*.js', jsDest: 'build/js/', } function buildStyles() { return src(paths.sassSrc) .pipe(sassGlob()) .pipe(sourcemaps.init()) .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError)) .pipe(sourcemaps.write('./')) .pipe(dest(paths.sassDest)); } function buildScripts() { return src(paths.jsSrc) .pipe(sourcemaps.init()) .pipe(uglify()) .pipe(concat('scripts.js')) .pipe(sourcemaps.write('./')) .pipe(dest(paths.jsDest)); } exports.buildStyles = buildStyles; exports.buildScripts = buildScripts; exports.watch = function () { watch(paths.sassSrc, buildStyles); watch(paths.jsSrc, buildScripts); }; exports.default = parallel(buildStyles, buildScripts);Execute Gulp commands Check for available tasks $ gulp --tasks Execute the default task $ gulp Compile SCSS files to CSS $ gulp buildStyles Compile js files $ gulp buildScripts Watch all changes into SCSS and JS files in real time $ gulp watch You can always use the plugins that are best suited for your projects. Explore the list of gulp plugins and their usage Final Thoughts From transforming SASS into CSS with a single command to effortlessly bundling, minifying, and optimizing your code, Gulp simplifies the complex. It empowers you to be more efficient, creative, and productive in the ever-evolving landscape of web development. But remember, like any tool, Gulp's true power lies in your hands.

Subscribe to