Drupal Association blog: A Farewell From Von

With a heart full of joy, sadness, pride, and premature nostalgia, I will be departing the Drupal Association on 21 September, 2023 and will no longer serve on the leadership team as your Director, Programs. 

Over the last two years at the Drupal Association, I have had the honor to work with so many incredible change-makers in the non-profit and Open Source world. I’ve grown beyond what I ever imagined in my relationship with the free and open web, and I’m so grateful to this community for trusting me with leading many of the Drupal Association’s most critical programs. I’m also deeply grateful for the entire staff at the Drupal Association for trusting me to help build our workplace into one that is rooted in equity, access, and employee agency. Cultivating a healthy culture at a remote global organization is one of things I’m most proud of leaving behind, and I’m confident that the leadership team will continue to nurture our working environment to be one where everyone can thrive. 

Thank you so much to the Drupal community and the DA staff/board for making the last 2 years some of the most fulfilling, empowering, and productive of my career. It's been my pleasure to work hand-in-hand with you all on DrupalCon, Discover Drupal, contribution enablement, and DEI best practices, and I will take all I've learned into the next chapter of my career. It is my hope that I’ve left you all in a good place, and have had a positive impact on your experience in the Drupal ecosystem. I have the utmost faith in my colleagues to continue to deliver high-impact, equitable programs that make Drupal amazing. 

Feel free to find me on the Drupal Community Slack (vonreyes) in my last two weeks, or at vonreyes.carrd.co if you want to stay in touch in the future.

Image removed.
Left to right: Von with Nikki Flores; Von with Iwantha Lekamge; Von with Angie Sabin 
File attachments:  vonheader.png

Specbee: Simplified PHP Debugging with XDebug in Lando & DDev for Drupal

Fun fact: The world's first computer bug was a real moth! But don't worry, we're not here to debug insects. We all know that debugging is vital in website development. It helps developers identify and resolve issues, leading to a smoother and more reliable end product. To achieve that, you need the right tools. One such technique that can help you troubleshoot your PHP is XDebug.In this article, I’d like to share the steps and requirements involved in setting up PHP debugging with XDebug on Lando and DDEV Drupal setups using the VS Code IDE. Let’s dive in! What is XDebug Xdebug is a standard and powerful debugger in PHP and improves your development experience. It provides us developers with key features that help in finding and fixing the errors in code.  Step Debugging - A way to step through your code in your editor while the script is executing. Improvements to PHP's error reporting - This allows you to get better error messages and obtain more information from PHP's built-in functions. An upgraded var_dump() function, stack traces for Notices, Warnings, Errors, and Exceptions to highlight the code path to the error. Tracing - When an error occurs, Xdebug generates detailed stack traces that show the sequence of function calls leading up to the error, helping developers pinpoint the source of the issue. Xdebug helps in tracking the values of variables during script execution, making it easier to understand how values change as the script progresses. Profiling - With the help of visualization tools, it allows you to analyze the performance of your PHP application and identify bottlenecks.  Code Coverage Analysis - This can generate code coverage reports, to show which parts of your code base are executed when running unit tests with PHPUnit. Support for Various IDEs - Xdebug supports integration with multiple IDEs such as PhpStorm, Visual Studio Code, Eclipse, NetBeans, and more. XDebug with VS Code IDE I chose VS Code here as it's one of the most used and my favorite editor. Install Visual Studio Code (VS Code) if you haven't already.To make Xdebug work on this IDE, the first thing you need is the ‘PHP Debug’ Extension. Find and install it. This is needed for projects running on Lando or even with DDEV. PHP Debug Extension XDebug + VS Code + Lando Enabling Xdebug on Lando Lando by default does not provide you with an Xdebug extension. To enable Xdebug on Lando add the xdebug: true line to your .lando.yml file under the config key: name: TechX recipe: drupal10 config: xdebug: trueOr else, override your php service, by adding xdebug: true under appserver: name: TechX services: appserver: webroot: web xdebug: trueFollow it up by rebuilding your environment: lando rebuild -yThis will enable the extension by default whenever you start the Lando environment and Xdebug is now ready to receive the connections. In terms of performance, an even better option is to toggle between Xdebug on and off with some custom tooling commands.  If you're using Apache, tweak your .lando.yml with the following lines and don’t forget to run lando rebuild -y after. config: # Set Xdebug off by default. We use the tooling below to turn it on as needed. xdebug: false services: appserver: overrides: environment: XDEBUG_MODE: 'debug,develop' tooling: xdebug-on: service: appserver description: Enable Xdebug. user: root cmd: - docker-php-ext-enable xdebug && kill -USR2 $(pgrep -o php-fpm) > /dev/null || /etc/init.d/apache2 reload - tput setaf 2 && echo "Xdebug On" && tput sgr 0 && echo xdebug-off: service: appserver description: Disable Xdebug. user: root cmd: - rm /usr/local/etc/php/conf.d/docker-php-ext-xdebug.ini && kill -USR2 $(pgrep -o php-fpm) > /dev/null || /etc/init.d/apache2 reload - tput setaf 1 && echo "Xdebug Off" && tput sgr 0 && echoNow you can enable and disable Xdebug with custom commands lando xdebug-on and lando xdebug-off. Browser Requirements For your browser, install the suitable Xdebug helper extension. On Chrome browsers, enable the Xdebug helper extension. Xdebug helper - Chrome Extension If you are using Firefox, try the Xdebug Helper add-on.  Xdebug helper - Firefox Add-On Making Xdebug work on VS Code The next step is to create a custom .vscode/launch.json file within your workspace. This will map paths so that XDebug works correctly.Open your project in the VS Code IDE, go to ‘Run and Debug’ and click on ‘create a launch.json file’  Create launch.json file This will create the launch.json file with relevant configurations. Update the ‘Listen for Xdebug’ section with the below details. Note that the Xdebug 3 listens on port 9003. { "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "port": 9003, "pathMappings": { "/app/": "${workspaceFolder}/", } } ] }Start debugging! Add a debug breakpoint to a line in your PHP code wherever you need it by clicking the line number. Set breakpoints Enable Xdebug on Lando using: lando xdebug-onIn the menu, click on Run → Start Debugging. Ensure “Listen for Xdebug” is selected by the green arrowhead at the top left. The bottom pane of VS Code will be changed to orange (live) and should say “Listen for Xdebug”.  Start Debugging Start Debugging In your browser, navigate to your Lando app's URL and find the Xdebug helper extension in the address bar.  It is usually a "beetle" icon. Click on it and choose "Debug" from the menu to tell your browser to send the appropriate parameters to Xdebug so that Xdebug activates when a request is made.  Enable Xdebug helper extension Refresh the page or click on your site link. VS Code should now automatically open the Debug window and produce a debug output if a breakpoint is reached.  Xdebug in action Debugging Process When your code execution reaches a breakpoint, the debugger will stop, and you can inspect variables, step through code, and understand the flow. VS Code will provide a user interface for interacting with the debugging session. XDebug + VS Code + DDEV Unlike Lando, with DDEV, Xdebug already exits out of the box. You don't need any custom service, no rebuild, no browser extensions, no Drama! :)Just update the project’s .vscode/launch.json to add the “Listen for Xdebug” configuration from the below-attached config snippet. { "version": "0.2.0", "configurations": [ { "name": "Listen for XDebug", "type": "php", "request": "launch", "hostname": "0.0.0.0", "port": 9003, "pathMappings": { "/var/www/html": "${workspaceFolder}/", } } ] }Set a breakpoint in your PDP code. Restart it, if the breakpoint you set isn’t solid red. In the menu, choose Run → Start Debugging and ensure “Listen for Xdebug” is selected. Enable Xdebug on DDEV using: ddev xdebug onIn a browser, visit your project, and just like you saw earlier, you will be redirected to your IDE once you hit the breakpoint. Visit the page Will be redirected to the IDE and stop at the first breakpoint Final thoughts XDebug is a powerful tool that significantly simplifies the debugging process for Drupal developers, helping them write more reliable and efficient code. I hope this tutorial has shed light on its benefits and how to set it up in your development environment. If you found this article useful, consider subscribing to our weekly newsletter where we share the latest tips, tricks, and insights in Drupal development. 

Talking Drupal: Talking Drupal #415 - Front End Performance

Today we are talking about Front End Performance, Common Front End Issues, and Ways to test and fix said issues with guest Andy Blum. We’ll also cover Webp Fallback Image as our module of the week.

For show notes visit: www.talkingDrupal.com/415

Topics
  • How do we break down front end performance
  • How do we measure front end performance
  • What are web vitals
    • Standard, objective measurements
    • First/Largest contentful paint
    • Cumulative layout shift
    • Time to Interactive/First Input Delay/Time To Next Paint/Total Blocking Time
  • What are some common client side performance problems
    • “Flickering”
    • “Slow loading”
    • Image size/resolution issues
    • Render-blocking resources
    • Screen jitters
    • Memory leaks
    • Memory Bloat
  • How do tracking scripts affect performance
  • Tools to help identify and resolve
  • Drupal front end performance
Resources Hosts

Nic Laflin - nLighteneddevelopment.com nicxvan John Picozzi - epam.com johnpicozzi Andy Blum - andy-blum.com - andy_blum

MOTW Correspondent

Martin Anderson-Clutz - @mandclu WebP fallback image

  • Brief description:
    • Do you want your Drupal site to generate WebP images in the most optimal way? There are a number of modules for that, today we’re going to talk about…
  • Brief history
    • How old: created in Jun 2022 by pedrop
    • Versions available: 1.0.0 and 1.1.0 versions available, both of which support Drupal 8, 9, and 10
  • Maintainership
    • Actively maintained
  • Number of open issues
    • 3, 2 of which are bugs
  • Has test coverage
  • Usage stats:
    • Almost 252 sites
  • Maintainer(s):
    • Most recent release is by dj1999
  • Module features and usage
    • Anyone using testing tools like Lighthouse will have seen suggestions to use modern image formats like WebP, and with good reason. They allow for much smaller image files at the same quality, which means a better user experience and less bandwidth used by both the server and the visitor. WebP is a natural choice because it enjoys over 95% browser support, but many sites still care about that other 5%
    • Drupal core added its own support for webp in 9.2, but without a fallback image, so browsers that don’t have WebP support have been out of luck
    • Contrib modules have allowed for generating a webp image and a jpeg fallback, to allow for universal support. Typically they have worked by creating the WebP variant from the output of a core image style, so after an image has been saved as something like a jpeg. That means the resulting WebP can’t compress as well, and can show compression artifacts
    • WebP Fallback Image is different because it allows Drupal core to generate the WebP image from the source file, and then creates the jpeg fallback.
    • Also worth noting that this module only creates the jpeg fallback when it’s requested, so it doesn’t add to the storage of your website unless it’s needed
Subscribe to