TYPO3 Demo and QA Best Practices Join Forces

Categories: Development, Community, TYPO3 CMS Created by Daniel Siepmann, David Steeb, and Desi Lochner
Original photo: Andreas Palmer / Unsplash
The TYPO3 Demo is a publicly available site that demonstrates TYPO3 features. The QA Best Practices initiative working on providing quality assurance best practices to the TYPO3 community. These two teams have joined their efforts to maintain the demo installation to implement best practices.

Demo Project

The TYPO3 demo site is available at demo.typo3.org. The goal of the project is to provide an instance where anyone is able to log in and get an overview of how TYPO3 works. Visitors are able to log into the backend and play with content editing. The installation is maintained in a repostitory at git.typo3.org by the TYPO3 Demo Project team.

QA Best Practices Initiative 

The QA Best Practices initiative is a group working to model best practices in TYPO3 implementation and extension development. Previously, the initiative worked on providing best practices for extension development. Now the team is focussing on best practices for projects. Have a look at their Tea extension for unit testing and best practices:

Best Practices From demo.typo3.org

The following are some of the best practices implemented within the demo installation. This is by no means an exhaustive list. Feel free to have a look yourself.

Custom Content Elements

Most TYPO3 installations use custom content elements to suit customer needs. The demo installation has several custom content elements like Ingredients and Main Teaser. They are available via the TYPO3 native content element wizard.

Using the Content Defender extension, we make sure only those elements suitable for a given page type or content area (colPos) are available for editors to choose from. And each content element also has its own preview within the TYPO3 Page module. There are plans to migrate to b13’s extension, backendpreviews, in the future.

All in all, the demo installation demonstrates how to properly design content within TYPO3 and make it available to editors in a clean consistent way.

100% VCS TypoScript + TSconfig

Many projects have already moved their TypoScript and TSConfig out of the database into a version control system (VCS) like Git. This is also true for the example project. The setup uses the bolt extension to track changes to configuration, and for deployment of configuration alongside other changes within the installation.

Responsive Images

To render images in different sizes and resolutions we use the third-party extension picture. This enables us to use a replacement ViewHelper to render images in multiple resolutions. It also adds modern image formats to the mix (for example, rendering a <picture> tag).

Split Up CSS

An important part of a website is keeping asset sizes low to ensure a fast page load. Using TYPO3’s out-of-the-box capabilities, the demo project showcases how to include certain assets only when needed. An example would be loading the CSS directives used for our contact form only on pages that have a contact form (see the Form template). 

Inline SVG Assets

We use the third-party extension Asset Collector to dynamically include SVG files in the pages where needed. 

Connect Custom Doktypes And Backend Layouts

This is a burden for many projects. Custom doktypes have been a core feature for a long time and often need a specific backend layout. The demo installation demonstrates that the backend layout can be derived from the actual doktype via a hook. This reduces maintenance overhead, removes possible bugs from the installation and reduces the list of fields an editor sees in the page properties. There are plans to migrate this setup to b13’s extension, doktypemapper, which eases integration even further.

Gather Insights and Improve Your Own Project

Feel free to check out the sources of the demo project, as well as the QA extension. Everyone is welcome to provide feedback via our TYPO3 Slack channel #cig-typo3-demo and #qa-best-practices. Also feel free to create issues and Pull Requests / Merge Requests on the projects.

Additional contributors for this article
  • Copy Editor : Felicity Brand
  • Content Publisher : Mathias Bolt Lesniak