Verslag JUG 's-Hertogenbosch 3 juli 2017

Maandagavond 3 juli, na een lekker speciaal biertje, gaan we van start met de JUG073. Welkom aan de nieuwe Joomla! gebruiker die onze bijeenkomst kwam bezoeken. Na een korte herhaling van het beoogde JUG073 project, waarbij we een website gaan bouwen voor onze host, ging Hans Kuijpers van start. Naast het project komt Dr Joomla ook nog even langs...

Project JUG073 - lokaal ontwikkelen

De ontwikkeling van de website zal met elke nieuwe bijeenkomst van de Joomla! gebruikersgroep 's-Hertogenbosch vorderen. Elke maand zal er een nieuw stapje in het maken van een Joomla! website de revue passeren. Ditmaal gaat het om het opzetten van je lokale ontwikkelomgeving vanuit een aangeboden backup gemaakt met AkeebaBackup.

Op de website kollekebier.nl zal de website gestaag vorm krijgen. Vandaag is een kale Joomla! site geïnstalleerd en na het aanmaken van een tweede super user is Akeeba Backup Pro er op gezet. Het grote voordeel van Akeeba Backup Pro is dat je zonder veel moeite je backup kan uploaden naar DropBox. Gekozen wordt om een .zip bestand te maken in plaats van de standaard .jpa file. De reden hiervan is dat je na het uitpakken van het .zip bestand direct ook Kickstarter bij de hand hebt. Daarnaast is de naamgeving van het bestand site-[HOST], zonder datum noch tijd. De reden hiervan is dat na upload naar DropBox, de oude backup overschreven wordt. Met een betaald DropBox account heb je 30 dagen versiegeschiedenis van bestanden. Dus met één backup heb je een maand later 30 backups, zonder extra veel ruimte van je Dropbox. Als laatste is vanuit de algemene instellingen van AkeebaBackup externe toegang middels een speciale key ingesteld, benodigd voor de volgende stap.

Om de creatie van backups te automatiseren en om de updates van de geïnstalleerde extensies bij te houden is de site gekoppeld aan Watchful.li. Een van de opties is het dagelijks laten maken van een backup. Daarvoor was die speciale key.

Door de DropBox backup file te delen met bepaalde mailadressen kunnen die mensen meehelpen aan het project. Elke dag kan een nieuwe backup binnengehaald en uitgerold worden in de lokale ontwikkelomgeving. 

Met MAMP en XAMP is het mogelijk om een lokale ontwikkelomgeving op te zetten. Creatie van een hostnaam (kollekebier.dev) met verwijzing naar de directory waar de files staan ~/Sites/kollekebier.dev/public_html is voldoende om de site lokaal te hebben draaien. 

Opdrachten voor de ontwikkeling van de site volgen vanuit Trello. Hans Kuijpers zal de site bijwerken naar een private Github repo. Uitleg over Github volgt een andere bijeenkomt. 

De bedoeling is dat we via Trello taken aanmaken en deze een volgende keer gaan presenteren bij de gebruikersgroep. Na akkoord worden deze wijzigingen ook verwerkt in het project. Het eindresultaat zal en mooie site zijn. 

Dr. Joomla...

Custom Fields

Naast het project kwam ook Dr. Joomla aan bod. Net als de vorige bijeenkomst van JUG073 kwam ook dit keer Custum Fields weer voorbij. Voor de website schijndelfim.nl is op de pagina met Film informatie een verbetering doorgevoerd middels JCFields-name-naar-id-mapping. Uitleg hierover in het verslag van de JUG073 bijeenkomst van 6 juni

Gzip-compressie

help help... vanuit Joomla!'s algemene instellingen staat Gzip compressie actief, maar de testing tools wijzen uit dat er geen Gzip compressie actief is. Hoe kan dat? Antw: er mist informatie in de .htaccess.
Tijdens de recente Expert Sessie van Perfect Web Team en Yireo over Site Performance liet Hans Kuijpers in de presentatie over .htaccess zien hoe je er voor zorgt dat Gzip compressie actief is.

Naast Gzip compressie kwam ook browser caching aan bod en het probleem kan zijn dat als je css bestanden voor langere termijn in de browser cache laat opslaan de aangebrachte wijzigingen niet zichtbaar zijn voor de frequente bezoeker. Die krijgt immers een oudere in cache opgeslagen versie in beeld. Dit valt op te lossen door de nieuwe manier waarop Joomla! css en js kan inladen.

// Add Stylesheets
JHtml::_('stylesheet', 'template.css', array('version' => 'auto', 'relative' => true));

Bovenstaande code zal de template.css inladen met daarbij een versienummer. Door wijziging van het bestand zal het versienummer wijzigen en zal de browser altijd de nieuwste versie tonen. Deze code komt uit het Protostar template. 

JW_ALLvideos

Bij de overstap van PHP5 naar PHP7 is het verstandig om tijdelijk de foutmeldingen actief te zetten. Dit doe je vanuit de algemene instellingen van Joomla. Fouten komen zo tijdens het testen van PHP7 naar voren en kunnen opgelost worden, voordat je ook op de liveomgeving de PHP versie ophoogt. (Overstap naar PHP7 is zeker aan te raden vanwege snelheidsverbeteringen). De 3th party Joomla plugin JW Allvideos zal een warning geven. De master branch van de github omgeving van JW_Allvideos bevat een fix. https://github.com/joomlaworks/allvideos

Responsive VIDEO

Leuk... Youtube filmpje op je site... minder leuk is dat het filmpje niet responsive is. In plaats van vet moeilijke javascript tools en wijziging van handmatige code kun je ook met eenvoudige html en css voor een responsive Youtube filmpje zorgen.

HTML code

<div class="video-container"><iframe width="560" height="315" src="https://www.youtube.com/embed/wQ9C6ka7xd0?rel=0" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>

CSS code

.video-container {
  position: relative;
}

.video-container:before {
  padding-top: 56.25%;
}

.video-container:before {
  display: block;
  content: " ";
}

.video-container iframe {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

iframe:first-child {
  margin-top: 0;
}

iframe:last-child {
  margin-bottom: 0;
}

En zo kwamen er nog een paar vragen voor Dr. Joomla! voorbij, maar die ben ik vergeten. Er waren weer verdomd lekkere speciaal biertjes.