Joomla news about Digital Peak

In 2018, a web site has to be fast for a good user experience. Even search engines do take speed as a factor for ranking. So we invested a big amount of time into research how we can increase the performance of DPCalendar. The most important steps were to reduce the amount of external dependencies, optimize CSS and reduce the JS footprint.

Every view does now only load the CSS rules which are actually needed. For example the event detail view adds only 8kb of CSS. No additional CSS frameworks are loaded in DPCalendare which do increase your page size. In the background, we are using SASS, which allows us to split the CSS code into blocks, and to reuse them in different views to keep a consistent look and feel. Yes we really started to think in blocks.

While the Javascript files are loaded in defer mode anyway to be none blocking at all. We've also removed all inline javascript code to be CSP compliant and to not block the page rendering process. We've replaced also a lot of jQuery code with vanilla JS and exchanged bloated scripts with zero dependency libraries.

Icons are loaded inline as SVG graphics from font awesome 5. Like that we do again only load what we actually need. As a bonus you can override the icons in your template when you have the need for. The core image override system of Joomla is used for that. Again, Joomla 4 will probably use the same technique.

For example we tested our event detail view with Google lighthouse and the default protostar template. We reach excellent results as you can see in the screenshot.

In DPCalendar 6 we introduced pure PHP views with a lot of logic and content tree rendering. The aim was to disconnect front end framework related code from the view part. This worked for the advanced PHP devs, but for the majority of DPCalendar users it was too much when they wanted to make a template override. So we reverted back to the HTML template rendering. But we did it with a rock solid concept in mind. We use BEM as class naming strategy and split all the different blocks of a view into sub layouts. Like that it is easy for the site integrator to override only parts of the views, while still leaving the rest intact. The view files itself do contain as less logic as possible, means we are using mostly only PHP if blocks or for loops, the rest is pure HTML code.

Additionally we are using CSS grid to layout the views. This allows us to work with a minimal set of CSS rules while still being responsive and detached of any external framework dependency. Like that DPCalendar will render flawless with any template, hell we even tested it with Beez and it looks good.

As part of that refactoring we restyled all the views on the front end and also the dashboard on the back end. In the next releases we will then adapt the rest of the back end views too. What we also did was, removing the social sharing buttons and commenting systems because they have a negative impact on the page loading time. Another side effect is that it is one brick less to be GDPR compliant. You should take caution how you integrate the social buttons anyway and there are good extensions in the JED which do a proper job to be inline with GDPR and social media.

Google is making their maps API usage more and more restrictive and with the GDPR regulations, it can be the case that Google maps integration is not inline with the privacy policy of your company or organization. Se we need an alternative. Luckily OpenStreetMap can jump in and help us out here. It is an open source project which offers all the location data for free under the Open Database License, and the map tiles under CC BY-SA. With OpenStreetMap it is even possible to completely set up your own map server for geolocation lookup and tiles delivery. More information can be found on openstreetmap.org or switch2osm.org.

In the DPCalendar options you have a new setting to choose between Google Maps, Mapbox or OpenStreetMap as location provider for the Javascript maps, Geolocation lookup and location suggestions. All the maps are then rendered by the respective provider without any additional changes. If OpenStreetMap is activated, then you can define a tiles url and a geolocation url. Per default, they point to the OpenStreetMap server, but you can change them to any server which is compatible with the OpenStreetMap protocol.

From what we saw, DPCalendar 7 is the first Joomla event extension which uses OpenStreetMap.

A new timeline view showcases your events in a more enhanced way. The events are arranged beside a timeline and do display all the information you already know from the list or blog view. The markup is simple and the CSS styling very small. So you can adapt it perfectly to your template. The same search functionality is available as for the other two list views. You can search for text, between a certain time range or within a radius of a certain location.

The upcoming module contains now also a timeline layout. You can change it in the advanced module parameters while configuring the module.

Ever wanted to offer additional options to choose from when your visitors are booking a ticket? We added a new field in the booking fieldset when editing an event. There you can define unlimited options for the attendees to book. These options can be a meal preference or room type. Basically everything which doesn't fit into the nature of a ticket.

Beside that we added some more little features like a terms and conditions link and some UX improvements. For example is a form shown to edit the tickets directly after booking an event.