# TYPO3camp Munich 2019 Bitte tragt hier eure Notizen zu den Vorträgen oder alles sonstige wissenswerte ein! So... Sessions sind drin, jetzt liegts an Euch... :) # Samstag ## Wishlist: BE-Improvements - Zap the Gremlins (Michael) ~olly: tagged Forge issue with "gremlin", see https://forger.typo3.com/search?query=gremlin or https://forge.typo3.org/projects/typo3cms-core/issues?utf8=%E2%9C%93&set_filter=1&f%5B%5D=cf_3&op%5Bcf_3%5D=~&v%5Bcf_3%5D%5B%5D=gremlin * save&close button is missed * Contrast of currently selected module * see https://forge.typo3.org/issues/88269 - fixed during T3INIT19 on 2019-10-26 - will be in the next Typo3 releases of 10, 9.5 and 8.7 * Extbase translation does not behave as expected (old ticket exists) * Filter in pagetree does not select the current page (already fixed in master and backported to 9.5 https://review.typo3.org/c/Packages/TYPO3.CMS/+/61581, https://review.typo3.org/c/Packages/TYPO3.CMS/+/61595) * ~olly: the references issue is different, this report is about searching in filter, click on page, clear filter - clicked page is not expanded/shown/highlighted → see https://forge.typo3.org/issues/89308 * Filtering pagetree and create buttons are not always in the correct place * Speed up of clear of page cache for pages with lots of content (patch available but not merged) https://forge.typo3.org/issues/86952 * ckedit bug (at least in 8.7) when Link is set and a linkstyle is applied only the link is saved not the linkstyle * ckeditor if a styled link is edited (new link destination) the style is lost. : J. Velletti :, cannot reproduce these two ckedit error * ~olly: can be reproduced in TYPO3 v9.5.9 → see https://forge.typo3.org/issues/89404 * when editing and tabbing through a date field the field is filled with the current date * editing a slug field on a small screen cannot be finalized without changing the viewport * 9.5: just changing the slug is lost when using the close button (change is not realized) - Fixed with https://review.typo3.org/c/Packages/TYPO3.CMS/+/61514 ? * [pagetree not accessible](https://forge.typo3.org/issues/86818) Fixed * the help text for the hidden field is not correct * ~olly: needs feedback - which hidden field, which scenario? * soutif you filter and remove the filter text the whole pagetree is opened again (same as 3. ?)sout * ~olly: yepp, see above 4th + 5th item * typoscript object browser, if you open something the page scrolls to the point, but it is hidden behind the top bar - Fixed with https://forge.typo3.org/issues/89217} * configuration menu has the same issue * object browser: the application context is not automatically selected in the conditions checkbox * object browser: the language (L Parameter) settings are not selected in the conditions checkbox * poll: who deselects crop lines when opening the object browser (should be removed?) * ~olly: → see https://forge.typo3.org/issues/89405 * tca flex form elements added twice are rendered twice, but do not work. There should be a warning * when writing acceptance tests the page cannot be selected in the pagetree (should be addressed with https://forge.typo3.org/issues/86818) * there is a specific class (TYPO3\CMS\Core\Tests\Acceptance\Support\Helper\PageTree) for selecting pages in pagetree * introduce keyboard shortcuts in TYPO3 backend (e.g. ctrl-s for saving) * ~olly: → see https://forge.typo3.org/issues/66343 * extbase the lazy loading is not working as expected (ticket available, solved in fluid) * fluid should add access to the methods, not just getters, has* and is* * ~olly: → addressed in https://github.com/TYPO3/Fluid/pull/467 -- for core integration see https://review.typo3.org/q/I2b766ccc9bf3eaae77b1dfc1a73e9acc2a88d8a9 * when developing a website (in developer context) exeption should be explained (not just Oops an error occured) * toggles intended to be automatically saved, to toggles in typo3 backend are not * ~olly: needs feedback - in case the whole form is only persisted on clicking "save", persisting visual toggle elements in that very same view would be inconsistent (but: maybe something different * file manager popup when opening more infos. This should be replaced with a modal * ~olly: unsure about current state, but there is https://github.com/TYPO3-Initiatives/digital-asset-management as potential successor of the filelist module (no guarantees, no promises) * For sites in different languages the pagetree is always in the main page language. expecially a problem when having lots of translators that do not know the main site language * ~olly: → see https://forge.typo3.org/issues/73665 * Cache ViewHelper or settings for partials to cache parts of the site like the menu globaly (like the TypoScript cache function https://docs.typo3.org/m/typo3/reference-typoscript/9.5/en-us/Functions/Cache.html) ## Photografie - Tipps und Tricks (Johannes) https://www.johannesmairhofer.de https://www.johannesmairhofer.de/bessere-urlaubsfotos/ https://www.johannesmairhofer.de/bessere-urlaubsfotos-reloaded/ ## Shops in TYPO3 (Norbert) https://aimeos.com/ ## Quality Assurance (Christina) ## Extension-Management mit Composer (Frank & Thomas) Idee entstanden in der usergroup Stuttgart Warum Composer? Idee: Initiative den Extensionmanager zu ersetzen mit composer aware tool siehe https://www.getcomposercat.com/ composer-gui wird hochgeladen auf den Webserver (ftp/whatever) man kann alles installieren (fokus TYPO3, anderes auch) underlineErstmal klassischer Extensionmanager mit composer-fähigkeit ausstattenunderline Keine TYPO3 internistisches tool? Eher eigenständig Für wen? An sich für alle die kein Developmentteam dahinter steht Mehrwert? * - extensions * - Aktualität * Wirklich an die Hand legen? * - 'Einfache' Oberfläche Composercat anfragen? dort contributen? Was passiert mit dem Extensionmanager? * - wenn ohne composer, dann klassischer Extensionmanager * * SSH & Git auf dem Server benötigt Outsourcen der composer.install Berechnung bei Contabo? Wer ist die Zielgruppe? * Für nicht Agenturen * Für Endkunden * Einfacher Einstieg in TYPO3 * Extensions überall verteilt.. extensions.typo3.org mit packagist features? Problem : Resourcen intensiv Anschluss / Incentive bei den Hostern? Auf Slack: #cig-composer-gui Google Docs https://docs.google.com/document/d/1JEdJnWoRU9Pvp3psy49FA_pKIzySWPESzwKpgRoJjJQ/edit# Initiative Page https://decisions.typo3.org/t/initiative-composer-gui/527 ## Deployment mit TYPO3 Surf (Jan) Doku für die v2 ist jetzt zu finden unter: https://docs.typo3.org/other/typo3/surf/2.0/en-us/ Code zu finden unter: https://github.com/TYPO3/Surf Deployment mit TYPO3 Surf // Jan Kiesewetter @t3easy_de Man will nicht manuell hochladen, checken updaten etc Ziel: Automatismen Surf ist für deployment auf Shared Hosting / ssh etc Surf bringt rollback mit Allerdings z.B. bei DB changes ein Problem Andere Tools Capistrano / Deployer Surf ist zum großen Teil eine Symfony Applikation mit Ziel CLI Surf Needs: git repo for each app: $repoUrl = 'file://'.dirname(__DIR__); for single app. php, composer git rsync (target), some bins TYPO3 Surf NICHT mit in das Projekt installieren. Am besten in ein eigenständiges Verzeichnis installieren da Surf zum Teil noch sehr alte Abhängigkeiten hat (Abwärtskompabilität) Slides: https://www.icloud.com/keynote/0j5BHpdwmVc7dp3VvaReX_qoQ#TYPO3_Surf ## PhpStorm Debug - Tipps und Tricks (Olli @vertexvaar) - PHPStorm Debug Cookie Bookmarklets: https://www.jetbrains.com/phpstorm/marklets/ - Alternative possibility to DDEV routing: https://github.com/codekitchen/dinghy-http-proxy ## Outsourcing (Jens) ## Barrierefreie Websites (Claude) Präsentation (PDF) ist unter https://www.concept-realisation.de/fileadmin/user_upload/TYPO3/Barrierefreie_Websites_erstellen.pdf ## Content-Publisher (Olli @vertexvaar) Doku: https://github.com/in2code-de/in2publish_core/tree/master/Documentation TER: https://extensions.typo3.org/extension/in2publish_core/ Github: https://github.com/in2code-de/in2publish_core Warum Content-Publisher? Workspaces sind müssen aktiv von Extensions unterstützt werden und es gibt keine Alternative. Ziel: Redakteure sollen in einem besonders abgesichertem Redaktionssystem Änderungen machen und diese dann anschließend per "One-Click" ins Live übernommen werden. Es gibt eine Community und eine kostenpflichtige Enterprise-Edition. (EE wegen Entwicklungskosten > 500h allein im ersten Jahr) Es werden nicht nur Datensätze aus der DB gesynced, sondern auch Dateien und verknüpfte Daten. Kann man auch etwas excludieren? * Ja, z.B. Powermail Daten - diese werden sonst ggf gelöscht, wenn der Redakteur leere Ordner synced. * Konfiguration via YAML Files in der Ext. Dort wird die Tabelle, welche ignoriert werden soll eingetragen. * (Vgl.: https://github.com/in2code-de/in2publish_core/blob/master/Documentation/Installation/3_Configuration.md#removing-default-values) Synchronisierungsstrategie: Stage gewinnt immer. Globale und persönliche Config ist möglich. Eine Inspektion der gefundenen TCA Felder ist möglich, dort kann auch recherchiert werden, wenn eigene Felder nicht zur sync angeboten werden. Wie geht man mit FE-Uploads und anderem User generated Content um? => https://github.com/in2code-de/in2publish_core/blob/master/Documentation/FAQ.md#how-do-i-handle-user-generated-content Es gibt einen Test, ob alles so konfiguriert ist, wie es sein soll. (NICHT STAGE AUF STAGE SYNCEN! ¯\_(ツ)_/¯ ) Systemanforderungen: Was Core und Extensions angeht sind stage und live identisch. Ansonsten siehe: https://github.com/in2code-de/in2publish_core/blob/master/Documentation/RequirementsAndLimitations.md Multisite-Installationen sind, da auch nur Content, möglich. Ggf kann übers PageTS auch ein anderes Ziel gesetzt werden - ist aber nicht von Tests abgedeckt und nicht empfohlen. Ein Freigabeworkflow mit Chefredakteur etc ist in der EE möglich. Weitere Infos und Kontakt wegs EE: https://www.in2code.de/produkte/content-publisher/ ## Best practice SASS (Nikolai) ## Acceptance Testing (Daniel) Slides: https://tmp.daniel-siepmann.de/events/t3cm19/acceptance-testing-codeception-gitlab/#slide=1 Example: https://gitlab.com/DanielSiepmann/workshop-gitlab-acceptance https://twitter.com/daniel_siepmann/status/1172884951206957056?s=09 ## Junior Integration (Christina) ## Extbase Daten auslesen (Jan / @janmaennig) Zugriffe auf Daten bisweilen langsam. Alternative Zugriffsmöglichkeiten: * MySQL Views * https://speakerdeck.com/moveelevator/extbase-alternativen-zu-findall?slide=13 * Doctrine * https://speakerdeck.com/moveelevator/extbase-alternativen-zu-findall?slide=21 * Ggf Nachteile: * Keine direkte Enable Fields Funktion - sollte aber gehen (Muss geprüft werden) * Keine Objektstruktur * Eigenes Model für Filter und Listen * Nur wichtige Daten als property * Dann mapping auf bestehende Tabelle * Weiteres: * Caching Framework * https://speakerdeck.com/moveelevator/extbase-alternativen-zu-findall?slide=33 * Lazy Loading * ... ## Apache Solr (Olivier & Timo) ## Pagespeed Optimierung (Oliver) * - LazyLoading für Media - Prefetch / Preload - HTTP/2 - Bilder möglichst mit srcsets für viewports bereitstellen - font-display: fallback - font imports in einzelne CSS schreiben und früh laden - Erhöhung der Cache Lifetime - GIFs durch MP4 / WebM ersetzen - 3rd party javascript verringern / vermeiden - Komprimierung von CSS / JS - Inline rendern von CSS / JS - BASE64 encoding für Icons - Rendern von SVGs als XML und nicht über image source - Verwendung von webp (TYPO3 extension) - Extension "image_optimization" - SVG Sprites - CSS / JS nur rendern wenn benötigt - CDN - ext:staticfilecache - ext:sourceopt // voku/html-min - Komprimierung mit brotli - caches in Files (auf SSDs) statt Datenbank - Blackfire.io - Monitoring von PageSpeed mit Zabbix - Barrierefreiheit (z.B. Kontraste) ## Gitlab CI (Thomas) ## DDEV - Entwicklungsumgebung (Peter) @cybersmog // Peter Kraume Slides: https://speakerdeck.com/peterkraume/local-development-environment-for-typo3-with-ddev-typo3camp-munich-2019 Zum Thema Docker / Win10 / Performance: Letztere soll sich mit WSL2 bessern: * https://blog.docker.com/2019/07/docker-wsl2-tech-preview/ * https://engineering.docker.com/2019/06/docker-hearts-wsl-2/ # SONNTAG ## Quality Assurrance II (Christina) ## Einstieg in TYPO3 (Daniel) ## Warum immer Extbase? (Thomas // @spooner_web) Zwei Alterntiven / Extensions als Beispiel: ###EXT:just_news (https://extensions.typo3.org/extension/just_news/) Core Seiten als Grundlage da diese schon alles mitbringen was man braucht Erstellung rein aus Standards. Da die Extension öffentlich ist, sollte man hier in den Code schauen. ###EXT:just_openimmo (https://git.spooner.io/spooner/just_openimmo) Beispiel: www.dh-immobilien.net Grund: realty Extension hat nicht gepasst. Felder in deutsch, zu viele Felder, etc... Datenbasis: Eine XML mit vielen Immobilien und dazu Bilder und PDFs Diese werden in einzelne XMLs zerlegt und deren Properties über magic method geholt => spart getter / keine Probleme, wenn Properties hinzu kommen. " Macht euch Gedanken, ob es wirklich sein muss ?! " Frage: Was ist eine RAM-Disk? z.B.: http://go2linux.garron.me/linux/2010/10/create-ram-disk-improve-performance-webserver-791/ ## Composer Best Practices / Einstieg (Daniel & Thomas) Ist ein Paketmanager für PHP Gibt es unter www.getcomposer.org Composer auf Win10 installieren: https://www.jeffgeerling.com/blog/2018/installing-php-7-and-composer-on-windows-10 https://getcomposer.org/doc/00-intro.md#installation-windows *composer require typo3/minimal ^9 Erstellt folgende Dateien composer.json * Beschreibung etc des Projektscomposer.lock * Definiert exakt die Version / Commit des Pakets was installiert werden soll * Sollte ab "golive" versioniert werden. * Bei Extensions ggf nicht versionieren, damit immer die neuesten Abhängigkeiten genutzt werden. public dir * Enthält index.php und typo3/vendor dir * Dort sind die Pakete nach Vendor geordnet drin * Also Vendorname sollte etwas einzigartiges genommen werden. Extension hinzufügen (in Projektroot) *composer require georgringer/news In der composer.json * type => damit die Extension auch in typo3conf und nicht im Vendor landet * Schreibweise mit Dach z.B. ^9 * Semantic Versioning * https://semver.org/ * An dieses sollte man sich dringend halten! * Given a version number MAJOR.MINOR.PATCH, increment the: * MAJOR version when you make incompatible API changes, (z.B: eine alte TYPO3 Version wird nicht mehr unterstützt / Breaking Changes) * MINOR version when you add functionality in a backwards compatible manner, and * PATCH version when you make backwards compatible bug fixes. * Additional labels for pre-release and build metadata are available as extensions to the MAJOR.MINOR.PATCH format. * * ^8.7.13 => 8.7.13 - 8.7.99 * ^8.7 => 8.7 - 8.99 * ^8 => Alles bis 9 * * Breaking Changes nucompcompor in der Major Version - vgl TYPO3 v10.0 * * Tool zum visualisieren von Semver: * https://semver.mwl.be/#!?package=typo3%2Fcms-core&version=%5E9.5 Private Composer Packages - siehe Doku: https://getcomposer.org/doc/05-repositories.md#hosting-your-own Bei Nutzung von DDEV auf Win: IMMER vom host aus "ddev install composer" sonst funktionieren ggf symlinks nicht. Beispielprojekt: https://git-t3o.typo3.org/t3o/my (my.typo3.org) Empfehlung: helhum/typo3-secure-web ( https://github.com/helhum/typo3-secure-web ) Damit wirklich NUR das sichtbar ist was der Webserver braucht (Symlinks) Verhindert das Informationen über die Installation gesammelt werden oder PHP Dateien vonextern ausgeführt werden können Helmut Hummel => Externe Libs nutzen => https://insight.helhum.io/post/148112375750/how-to-use-php-libraries-in-legacy-extensions Tipp: Tuurlijk/typo3scan ( https://github.com/Tuurlijk/typo3scan ) ## TYPO3 Caching Framework (Frank) Link to the Slides https://speakerdeck.com/foppelfb/typo3-workshop-at-t3dd19-make-the-cache-work-for-you Link to the Repository https://github.com/foppelfb/workshop/ Check out the branches here, you can just checkout each branch to do it step by step along the presentation: https://github.com/foppelfb/workshop/branches Have fun with caching your extensions ## Anbindung TYPO3 - DAM-Systeme (Olli @vertexvaar) ## PHPStorm - Tipps und Tricks Teil 2 (Olli @vertexvaar) Nutzt Shortcuts! (Gibt es eine Extension für: Key Promoter X ... ) Alt 1 => Dateibaum anzeigen / fokussieren / ausblenden (Generell kann man die Seitentabs mit Alt + <Nummer> nutzen) Alt + Shift + Maus = Multiline Edit Alt + Shift + Pfeiltasten = Wörter markieren Shift Shift => Datei suchen Strg + Shift + V => Zwischenablagenmanager * => Auswahl mit Zahl * Gerade mit der Shift Shift Suche kann man ALLES suchen (z.B: auch Konstantenimport, Aktionen die PHPStorm machen kann, etc) Beispiel der Aktionen: CSV öffnen Shift Shift => Edit as table (suchen) Daten als Tabelle bearbeiten Das CSV-Plugin welches angeboten wird ist nicht zu empfehlen. Verbraucht zu viel RAM und geht nicht richtig. Strg + P: Zeige Argumente der Methode Strg + klick auf Methode: Springe zur Definition, Dort zeigt es dann an, wo die Methode verwendet wird. Strg + E => recent files anzeigen Strg + B: jump to definition Alt + Einfügen: Methoden, DocBlocks, etc generieren lassen Alt + Enter: context actions Unter Settings => Keymap, kann man Shortcuts finden indem man sie eingibt. z.B: External Tools => Terminmal im $FileDir$ öffnen Die Shortcuts der Keymap können auch doppelt belegt werden, wenn man z.B. die Settings zwischen zwei Betriebssystemen synct. Git Repos immer vom PHPStorm tracken lassen, dann kann man auch die Änderungen anzeigen, reverten, etc... Wenn Verzeichnis in der Version control Wenn dann merge conflict, Rechtsklick im Seitenbaum auf die Konfliktdatei, dann unter GIT auf resolve conflicts In dieser Ansicht sind dann alle Zeilen rot, welche einen Konflikt enthalten. Accept left / right übernimmt dann die jeweilige Seite Oben im Menü gibt es einen Zauberstab für einfache Konflikte. Wenn man selektiv Blöcke übernimmt, dann bewirken horizontale Pfeile eine übernahme und diagonale Pfeile ein "unten einfügen" In nahzu jedem Feld in dem etwas aufgelistet wird, kann man einfach anfangen zu tippen um zu suchen. Plugintipps: * DynamicReturnType => mit der dynamicReturnTypeMeta.json (aus TYPO3 GIT-Root ins Projektroot) autocompletion für von makeInstance() zurück gegebene Objekte. * https://plugins.jetbrains.com/plugin/7251-dynamicreturntypeplugin/ * .​env files support (Adel Fayzrakhmanov) * https://plugins.jetbrains.com/plugin/9525--env-files-support/ * .​ignore (hsz) * https://plugins.jetbrains.com/plugin/7495--ignore/ * Markdown Navigator (Vladimir Schneider) * https://plugins.jetbrains.com/plugin/7896-markdown-navigator/ * PHP Annotations (Daniel Espendiller) * https://plugins.jetbrains.com/plugin/7320-php-annotations/ * PHP composer.​json support (psliwa) * https://plugins.jetbrains.com/plugin/7631-php-composer-json-support/ Wenn man Verzeichnisse excluded, aber als libs einbindet, kann man mit Shift Shift auch in diesen suchen (include non project... anhaken!) ohne das für diese RAM etc verbraucht wird. Scopes: Wenn es bei einer Suche zB zu viele Ergebnisse gibt: Weil es zB auch Verwendungen im Core oder so gibt... Dann kann man auswählen, das man in einem Scope suchen will. Diesen kann man über die drei Punkte anlegen (local) und so dann die Suche auf die definierten Strukturen limitieren. Gilt auch für TODOs XLIFF Dateien bearbeiten: * Beide Dateien markieren, Strg+D, und dann in dieser Diff Ansicht die Bearbeitungen machen. ## Responsive E-Mails (Norbert) ## TYPO3 Showcases (Johannes) ## Agentur-Alltag :: Ängste, Sorgen ... (Olivier) ## Einstieg in das Unit-Testing (Daniel Siepmann) Cammands etc - see Github: You are testing already! ... ... ... by hand! /** * @test **/ indicates that it is a test Name tests the way that they tell what they are testing. In some Outputs the UpperCamelCase is converted in space separated sentences! https://github.com/DanielSiepmann/testing-talk Auch als Video vom #t3cs19 => https://www.youtube.com/watch?v=Xj1MOXHlU_k (Letzter Talk) ## Über die Structured-Content-Initiative (Annett) ## Aufbau und Betrieb eines TYPO3-Clusters (Kai-Ole) ## TYPO3 Documentation (Daniel) Wer gehört zum Documentation-Team? https://typo3.org/community/teams/documentation/ Hilfe / Contribution wird gerne genommen, da es viel zu tun gibt. https://intercept.typo3.com Hier kann man sehen und einreichen was gerendert werden soll. Eigene Extension dokumentieren? Siehe: https://docs.typo3.org/m/typo3/docs-how-to-document/master/en-us/WritingDocForExtension/Index.html Hier ist bereits eine gute Beschreibung. Bei Fragen etc. am bestern via TYPO3 Slack Channel #typo3-documentation ( https://typo3.slack.com/messages/C028JEPJL ) Ob eine eigene Vorlage oder die des Extension Builders verwendet werden soll liegt daran wie gut man damit klar kommt. Am besten selber testen und dann das nehmen, was am besten funktioniert. Wenn man bereits eine Doku hat diese aber nur legacy gerendert wird => https://docs.typo3.org/m/typo3/docs-how-to-document/master/en-us/WritingDocForExtension/Migrate.html Wenn in der Doku irgendwo ein Bug ist: * Oben rechts auf "Edit me on GitHub" * Dann auf GitHub einen Fork machen * Jetzt im Editor die Änderungen machen * Unten dann ggf kurz notieren was geändert wurde. * In der "Comparing changes" Ansicht dann die Änderungen kurz prüfen. * Dann auf Create Pull request * Diesen dann einreichen * Dann geht eine Mail an Mail an das Doku Team und diese mergen und rendern neu, wenn alles passt. Das Rendering der rst Dateien erfolgt via Sphinx Cheatsheet zum RST: https://docs.typo3.org/m/typo3/docs-how-to-document/master/en-us/WritingReST/CheatSheet.html#rest-cheat-sheet Die Sphinx Doku ist zu finden unter: http://www.sphinx-doc.org/en/master/ Weitere Tipps: https://www.grund-wissen.de/linux/sphinx/index.html Doku selber (lokal) rendern: https://docs.typo3.org/m/typo3/docs-how-to-document/master/en-us/RenderingDocs/Index.html ## State-of-the-Art Javascript (Christina) ## Spaß mit Nginx (Frank) Slides can be found here: https://speakerdeck.com/foppelfb/tuning-the-nginx-or-how-to-make-your-website-faster Git with the config here: https://github.com/foppelfb/nginx-talk
{}