loader from loading.io

Talking Drupal #415 - Front End Performance

Talking Drupal

Release Date: 09/11/2023

Talking Drupal #447 - Drupal Single Sign On show art Talking Drupal #447 - Drupal Single Sign On

Talking Drupal

Today we are talking about Drupal Single Sign On, The Benefits it brings to the Drupal Community, and A new book called Fog & Fireflies with guest Tim Lehnen. We’ll also cover Username Field as our module of the week. For show notes visit: Topics What is Single Sign On (SSO) Does Drupal already support SSO Why is SSO on important Camps using SSO Other possibilities Gitlab login Cloud IAM Why did the Drupal Association choose Cloud IAM How do you see the collaboration growing Where are we now What are the next steps How far are we from this becoming a reality What does onboarding look...

info_outline
Skills Upgrade #7 show art Skills Upgrade #7

Talking Drupal

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 7. Topics Review Chad's goals for the previous week Test Example Set up phpunit.xml Start with FrontPageLinkTest.php Review Chad's questions In the testing_example module, the file "src/Controller/TestingExampleController.php" has a function for simpletestDescription(). Is this an outdated artifact that should have been removed at some point? The module itself doesn't appear to use Simpletest elsewhere and appears to only rely on PHPUnit. What do you...

info_outline
Talking Drupal #446 - Test Driven Development show art Talking Drupal #446 - Test Driven Development

Talking Drupal

Today we are talking about Test Driven Development, Why it’s important, and How it improves development with guest Alexey Korepov. We’ll also cover Test Helpers as our module of the week. For show notes visit: Topics What does the term Test Driven Development (TDD) mean Does Drupal make use of TDD What makes TDD different from other methods of Development Do you have to change your way of thinking What are some good resources to learn TDD Do you have any pointers for teams looking to get started Are certain kinds of projects better suited to TDD How have dev teams adapted to TDD Any...

info_outline
Skills Upgrade #6 show art Skills Upgrade #6

Talking Drupal

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 6. Topics Review Chad's goals for the previous week Review Chad's questions Array structures accordion.html.twig D7 to D10 migrations Tasks for the upcoming week [testing_example](? Be sure to install drupal/core-dev dependencies using composer require –dev drupal/core-devref_type=heads) from Examples module. Set up phpunit.xml file in project root - using to start Run existing tests using command line from the project root. Something like:...

info_outline
Talking Drupal #445 - Drupal Bounty Program show art Talking Drupal #445 - Drupal Bounty Program

Talking Drupal

Today we are talking about The Drupal Bounty Program, How it supports innovation, and how you can get involved with guest Alex Moreno. We’ll also cover WebProfiler as our module of the week. For show notes visit: Topics What is the Drupal Bounty program How and when did it start What issues and tasks are included Has the bounty program been successful Why was this program extended Do you see any drawbacks Can anyone participate How are issues for the second round being selected What do you see the future of the bounty program looking like Could this become like other bounty programs with...

info_outline
Skills Upgrade #5 show art Skills Upgrade #5

Talking Drupal

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 5. Topics Review Chad's goals for the previous week .gitignore Field Example module Plugin API Drupaal 10 Masterclass book Review Chad's questions Field Example follow up Tasks for the upcoming week Examples module: js_example module js_example.libraries.yml hook_theme() implementation in js_example.module JsExampleController template files Resources The Linux Foundation is offering a discount of 30% off e-learning courses,...

info_outline
Talking Drupal #444 - Design to Development Workflow Optimization show art Talking Drupal #444 - Design to Development Workflow Optimization

Talking Drupal

Today we are talking about design to development hand off, common complications, and ways to optimize your process with guest Crispin Bailey. We’ll also cover Office Hours as our module of the week. For show notes visit: Topics Primary activities of the team Where does handoff start Handoff artifact Tools for collaboration Figma Evaluating new tools Challenges of developers and designers working together How can we optimize handoff What steps can the dev team take to facilitate smooth handoff Framework recommendation Final quality AI Guests Crispin Bailey - Hosts Nic Laflin - John...

info_outline
Skills Upgrade #4 show art Skills Upgrade #4

Talking Drupal

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 4. Topics Review Chad's goals for the previous week Install Drush Setup git repo Examples module Review Chad's questions .gitignore Core file naming Tasks for the upcoming week Reminder of the capstone goal: create MR for new automated test in contrib module. Examples module: field_example. New RGB field type with formatter and widgets. Focus on stuff in field_example/src/Plugin/Field Background info on Plugins: Focus on the following sections: ...

info_outline
Talking Drupal #443 - Violinist.io show art Talking Drupal #443 - Violinist.io

Talking Drupal

Today we are talking about Violinist.io, Managing Composer Dependencies, and automation with guest Eirik Morland. We’ll also cover Composer Patches as our module of the week. For show notes visit: www.talkingDrupal.com/443 Topics What is Violinist.io How does it work How much technical knowledge do you need Is this a security risk How much does it cost Patron question: Peter: Difference between violinist and dependabot What are the major differences in plans Who is the ideal user Can you self host Can this help with Drupal 11 readiness Complementary tools Notable users Why did you start...

info_outline
Skills Upgrade #3 show art Skills Upgrade #3

Talking Drupal

Welcome back to “Skills Upgrade” a Talking Drupal mini-series following the journey of a D7 developer learning D10. This is episode 3. Topics Review Chad's goals for the previous week DDEV performance improvements Install Drupal 10 Install drupal/core-dev Configure and test phpcs Test phpstan settings.local.php Install Devel module Review Chad's questions Rancher Desktop appears to be holding on to port 443 after I installed it. Although I changed the port to something else, do you have any suggestions to update the setup to use ports 443 and 80 instead? How are tools like phpcs...

info_outline
 
More Episodes

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