Wagtail Space NL 2024 Recap: Productive and Fun
Wagtail Space NL 2024 is behind us: two days of coding sprints and one conference day. Here’s an overview of the event and summaries of the presentations.
Wagtail Space NL sprint attendees outside of the Four Digits office.
Sprint
We kicked off Wagtail Space NL at the Four Digits office. After some housekeeping and an ice-breaker, we discussed sprint topics and formed groups. In no time, attendees were engaged in discussions, coding, and productive collaboration.
Thirty-seven people joined the sprint, traveling from all over Europe, and even as far as Egypt. Throughout the two days, we had regular standups to update on progress and connect people for assistance. We wrapped up with a show-and-tell. Here are some highlights:
Are we headless yet?
Sævar Öfjörð Magnússon and Alex Fulcher revamped the outdated "Are we headless yet?" website. They integrated the information into the main docs, used emojis for clarity 👍 while maintaining accessibility ✅, and moved promotional content to wagtail.org. The new documentation links to relevant sections and features a hero image and Slack channel invitation for a cohesive user experience.
Django Template LSP
Maikel Martens and Ruben Hesselink added Wagtail support to Django Template LSP, enabling context-aware auto-completion of variable names in page templates. They detailed the setup process, which involves installing django-template-lsp and configuring your editor, with support for NeoVim, Helix, and VS Code. The LSP can auto-detect environments, including Docker containers.
Model translate
Jura Zakarija worked on a translation solution for specific pages without replicating all pages. Inspired by Django model translation, they implemented this with a page mixin and dynamically creation of models attaching to pages as inline panels. The system is being refined for better integration and usability.
ALT text
Dave Manders created a feature to display alt text instead of images by adding a custom preview panel. This works by overwriting the render function to remove image sources using Beautiful Soup.
Translation Side panel
Lars van de Kerkhof tackled multilingual site issues by creating a side panel to display the source text inline during translations. This feature tailors the CMS experience to different user needs and cultural preferences, enhancing usability for translators.
Usage report, jump to
Sage Abdullah improved the usage report feature introduced in Wagtail 4.1, which tracks references within rich text and stream fields. He solved the issue of navigating to specific fields by transforming content path data into CSS selectors, enabling precise linking to referenced content.
Sage presenting the usage report 'jump to' feature.
Background worker ready
Jake Howard worked on Wagtail CMS performance by offloading publishing complexities to background workers. This streamlines tasks such as updating search and reference indexes, image focal points, and cache purging, without requiring additional infrastructure. The approach aims for seamless integration into Django background workers.
Bulk translate via PO files
Paweł Gruszka and Andrzej Kudas worked on a Wagtail product implementing bulk export and import functionalities for PO files. This allows downloading PO files for multiple languages and pages in a zip format, with a streamlined upload process using unique identifiers to populate translations uniformly across pages. They discussed potential packaging for broader use and feedback.
Wagtail Translate
Coen van der Kamp and Arnar Tumi Þorsteinsson worked on Wagtail Translation, a package that allows content to be translated into multiple languages using machine translation services like DeepL. They highlighted the simplicity of setting up custom translation services and allowing for custom logic to match project requirements.
Honorable mentions
A lot of work was done. Check out the issues and pull requests for more details.
First-time contributors opened eight new issues, created six pull requests, and got one pull request merged into Wagtail. Congratulations!
Pub-quiz
We celebrated the sprint with a dinner, pub quiz, and party. A big thank you to Elrieke for organizing and presenting the joyful and challenging pub quiz!
Elrieke presenting the pub quiz.
Conference
About a hundred people gathered at Posttheater for the conference day.
Learning from previous Wagtail Space NL editions, we ensured all speakers checked their display configurations and setups beforehand, making transitions smooth. Additionally, we added some easing text animations to enhance the experience.
State of Wagtail
Tom Dyson, co-founder of Torchbox and a key figure in Wagtail's development, provided an overview of the project's evolution and achievements over the past decade. He highlighted Wagtail's growth in GitHub stars, continuous improvements through semantic versioning, and significant updates like universal listings and a revamped user interface.
Tom also discussed Wagtail's expanding ecosystem, the integration of Wagtail AI, code generation, and enhancing editorial experiences with large language models. He emphasized the importance of community growth, new core team members, and initiatives like Outreachy and Google Summer of Code.
Reflecting on the challenges faced by mature projects, Tom underscored the need to balance feature development with reducing complexity for new developers and improving documentation. He concluded by highlighting the crucial role of open-source CMS in preserving decentralized information.
Headless Wagtail strategies
Rémy Sanchez, co-founder of With Madrid, discussed strategies for headless Wagtail setups. His agency specializes in creating integrated, public-facing websites using Wagtail.
Rémy highlighted the growing demand for headless setups and the challenges in managing frontend complexity and dynamic image handling securely. He outlined two strategies: a server-templated approach using HTML transformed with JavaScript/CSS for frontend rendering, and an API-based method utilizing JSON and fixed image formats. These strategies optimize functionality while leveraging Wagtail's strengths in content management and SEO-friendly rendering. Rémy emphasized the importance of balancing client demands with technical feasibility for scalable and maintainable solutions in web development.
Wagging HubSpot’s tail
Simon Blanchard and Joost Meijerink from Pera shared their experience with Wagtail and HubSpot integration. Pera, a startup focusing on AI-powered candidate screening, faced challenges with WordPress and HubSpot CMS for their website needs. They adopted Wagtail for its Python-Django stack, overcoming previous CMS limitations.
Simon discussed technical aspects like using Caddy and Hypercorn, while Joost highlighted design considerations such as structured content blocks and avoiding WYSIWYG pitfalls.
Wagtail & Caching
Jake Howard has nothing cached yet.
Jake Howard, a senior systems engineer at Torchbox and Wagtail core team member, talked about optimizing Wagtail site performance through caching.
He introduced template fragment caching in Wagtail 5.2, which caches complex HTML blocks like blog post listings to reduce database queries and rendering time. Jake also advocated for front-end caching using CDNs like Cloudflare to serve cached pages globally, significantly improving load times and reducing server load.
Addressing challenges like cache invalidation, he recommended configuring CDNs to skip caching for authenticated requests to ensure real-time updates. Jake emphasized that effective caching strategies enhance user experience, server efficiency, and environmental sustainability by minimizing server workload.
Faster thumbnails for a faster web
Alex Tomkins delivers his first and excellent conference talk.
Alex Tomkins, co-founder and director at The Developer Society, introduced his first conference talk on optimizing image thumbnails for faster web performance. With a background in Django and Wagtail, Alex highlighted challenges faced in optimizing images for nonprofit sites with limited budgets. He discussed image formats like JPEG, WebP, and AVIF, comparing their performance and size optimizations.
Alex shared insights into reducing image file sizes by adjusting quality settings and removing excessive metadata. He explored Wagtail's capabilities and introduced Image Proxy, a solution leveraging libvips for efficient image resizing and delivery via CDN.
Alex concluded by advocating for enhancements in Wagtail to support modern image handling practices and tools, emphasizing practical strategies for improving site performance through optimized image workflows.
The impossible art of making everyone happy
Matthew Westcott, a core developer on Wagtail from the start, discussed handling security issues in Wagtail, focusing on a recent report about editors being able to upload HTML files that could execute JavaScript. Initially dismissed, the issue revealed deeper complexities, such as dealing with other file types like SVGs. This scenario highlighted the tension between the needs of enterprise users requiring strict security and casual users wanting simplicity.
Matthew emphasized Wagtail's principle of hiding complexity until necessary, noting the challenges in maintaining this as the platform grows. He underscored the importance of empathy in feature development, ensuring new features don't complicate the user experience unnecessarily, and advocated for clear, empathetic documentation using frameworks like Diataxis to improve user understanding and experience.
Bringing modern authentication to Wagtail: WebAuthn & Passkeys
Storm Heg, an independent contractor from the Netherlands and member of the Wagtail core and accessibility teams, presented on modern authentication in Wagtail. He focused on the limitations of traditional authentication methods like passwords and multi-factor authentication, introducing passkeys as a superior alternative. Passkeys use public key cryptography, eliminating shared secrets and enhancing security by being unique to each site. Storm demonstrated WagtailMFA, a package he developed to integrate passkeys into Wagtail, offering a passwordless login experience.
Lightning talks
Rémy Sanchez optimized Wagtail's stream field usage to reduce migration file sizes and memory consumption. Minor updates created huge migration files due to nested stream fields. He developed a script to pack migrations by converting large literals into lazy-loaded objects.
Dan Braghis introduced wagtail-ai and wagtail-vector-index. Wagtail.ai integrates LLMs into the admin for text correction and translation, supporting various AI providers. Wagtail Vector Index enables natural language search and content recommendations by converting content into numerical embeddings.
Coen van der Kamp from Four Digits created Wagtail Translate for machine translation. His tool translates content to other locales. He gave a demonstration and encouraged feedback and contributions. Wagtail Translate is available on PyPI.
You've been caching your content website wrong
Rémy Sanchez discussed the e-tag mechanism for browser/proxy/CDN caching, highlighting its benefits over time-based methods. E-tags improve performance by validating cached content, reducing server load, and are easy to implement in Django. He shared practical challenges with proxies and recommended Apache Traffic Server for efficient caching, concluding with code examples and tips for integrating e-tags.
Evolving Wagtail's listing views – and beyond
Sage Abdullah, a core Wagtail team member, discussed the evolution of Wagtail's listing views, starting with Wagtail 2.0 in 2018 to the latest updates in 6.1. Sage explained the redesign of the page editor for accessibility and usability, adding features like collapsible breadcrumbs, a status side panel, and a preview panel. They detailed the challenges and incremental improvements in snippet and page listings, such as custom columns, export functionality, and Ajax filtering. The integration of multiple front-end libraries presented issues, but teamwork and code reusability facilitated solutions. Future plans include making UI customizations more accessible through Python code.
Lightning talks
Jake Howard from Torchbox explained how to recover deleted Wagtail pages. When a major restructuring accidentally deleted an entire section of their intranet, Jake used the Wagtail site history report and Django’s nested object collector to identify and serialize the missing pages. He then restored them with Django fixtures, ensuring no downtime or data loss.
Emmelien Schiet and Judith van Leersum from Fabrique presented a dashboard for managing reusable Wagtail components across multiple sub-sites. The dashboard, an extension of Wagtail’s report view, tracks component availability and usage, showing where each component is used and how often. This tool helps clients efficiently manage content and maintain consistency across many pages.
Multilingual websites
Paul Stevens closed the session by discussing multilingual websites in Wagtail, emphasizing non-technical perspectives. He highlighted the challenges of presenting content in multiple languages effectively, advocating for user-friendly solutions. Paul underscored the importance of understanding visitors' needs and preferences, suggesting strategies like detecting preferred languages via browser settings or offering manual language selectors. He critiqued existing methods like URL prefixing for multilingual content, proposing more intuitive approaches to enhance user experience and avoid confusion.
👋
We ended the conference day with drinks and bittergarnituur (Dutch snacks) at the bar.
Wagtail Space NL was an inspiring and vibrant experience, where it was wonderful to witness so many people connecting over their shared interest in Wagtail. Events like these truly highlight how Wagtail brings people together. If you ever have the opportunity to attend Wagtail Space NL or a similar event, don't hesitate—go for it!
Finally, don't forget to check out the photos.
