Kategorien
Webentwicklung Werkzeuge

Websites bauen mit pimcore

phpstorm

Ich bin ja als PHP-Entwickler nicht gerade erfahren, ich mach dann eher das mit dem Frontend. Neuerdings beschlich mich allerdings der dringende Wunsch, mal ein bisschen Abwechslung zu haben und ich habe mich auch mal auf der Entwicklungsseite mal ein bisschen mit pimcore auseinandergesetzt.

Dazu habe ich eine kleine Website gebaut, die über Energydrinks informieren kann. Die Website ist direkt zweisprachig und von Objekten getrieben. Ich will nur mal einen kleinen Einblick geben, wie das ganze anhand der Drink-Darstellung aussieht.

Der Drinks-Controller

<?php

use Website\Controller\Action;
use Pimcore\Model\Object;


class DrinksController extends Action
{

    public function defaultAction()
    {
        $this->enableLayout();

    }

    public function listDrinksByCaffeineAction()
    {
        $this->enableLayout();

        $drinkList = new Object\Drink\Listing();
        $drinkList->setOrderKey("Koffeingehalt");
        $drinkList->setOrder("DESC");

        $this->view->drinks = $drinkList;


    }

    public function drinkDetailAction(){
        $this->enableLayout();

        $drink = Object\Drink::getById($this->getParam('id'));

        $this->view->drink = $drink;

    }

    public function indexAction()
    {
        $this->enableLayout();
    }
}

Hier werden eigentlich nur zwei Views mit passenden Daten gefüllt, die dann z.B. in list-drinks-by-caffeine.php (man beachte die Benamung der Datei im Vergleich mit der Action) angezeigt werden:

<?php
$this->layout()->setLayout('standard');
$lang_prefix = $this->document->getProperty('mainNavStartNode')->getFullPath();
?>


<?php while ($this->block("contentblock")->loop()) { ?>
    <?= $this->wysiwyg("content"); ?>
<?php } ?>


<table class="table">
    <tr>
        <th><?= $this->translate("Bild"); ?></th>
        <th><?= $this->translate("Koffeingehalt"); ?> / 100ml</th>
        <th><?= $this->translate("Name"); ?></th>
        <th><?= $this->translate("Hersteller"); ?></th>
    </tr>



    <?php
    /** @var  \Pimcore\Model\Object\Drink $drink */
    foreach ($this->drinks as $drink) { ?>

        <tr>
            <td>
                <a href="<?= $this->url(array(
                    "prefix" => $lang_prefix,
                    'id' => $drink->getId()
                ), "drink") ?>">
                    <?php if ($drink->getBild()) { ?>
                        <?= $drink->getBild()->getThumbnail('list')->getHTML() ?>
                    <?php } ?>
                </a>

            </td>

            <td class="col-sm-4">
                <?= $drink->getKoffeingehalt(); ?>

            </td>
            <td class="col-sm-4">


                <a href="<?= $this->url(array(
                    "prefix" => $lang_prefix,
                    'id' => $drink->getId()
                ), "drink") ?>">
                    <?= $drink->getName(); ?>
                </a>
            </td>
            <td class="col-sm-4">

                <a href="<?= $this->url(array(
                    "prefix" => $lang_prefix,
                    'id' => $drink->getHersteller()->getId()
                ), "hersteller") ?>">
                    <?= $drink->getHersteller()->getName(); ?>

                </a>

            </td>
        </tr>

    <?php }; ?>

</table>

Das sieht dann so aus:

Drinks Übersicht
Drinks Übersicht

Für die Abbildung der Detail-Ansicht muss man sich dann ein bisschen mit statischen Routen befassen, die man in pimcore pflegen kann, die sieht dann so aus:

static_routes

Drinks Detail
Drinks Detail

Zusammenfassend kann ich sagen:

Mit dem CMS/PIM-System pimcore und dem Hilfsmittel PHPStorm bekomme ich (PHP nicht so erfahren) recht schnell brauchbare Ergebnisse und kann Seiten, die viele strukturierte Daten darstellen sollen, die untereinander verknüpft sind, schnell und einfach umsetzen.

Das ersetzt sicher keinen PHP-Profi, der 10 Jahre Zend-Erfahrung hat, kann aber ein guter erster Schritt sein, solche Modelle mal anzudenken. Wen das ganze interessiert, kann sich bei pimcore.org weitere Informationen holen, oder mich fragen.

Kategorien
Webentwicklung Werkzeuge

Was sich mit HTTP/2 ändern wird

Tools

Gerrit van Aaken beschrieb neulich den Toolchain-Wahn, der die Aufrüstung im Frontend-Development befallen hat. Einige dieser Toolchains nutze ich auch, zum Beispiel das Precompiling von Frontend-Templates in eine Datei, das kompilieren von mehreren LESS- und CSS-Files in eine einzige Datei. Alles, weil HTTP/1.1 teilweise nur einen Request parallalel verarbeitet. Aktuell ist das sinnvoll und notwendig, um überflüssige Header (Overhead) zu verringern und den Übertragungs-Payload möglich hoch zu halten.

Nachdem die Seitenperfomance immer größeren Stellenwert bei Google Rankings bekommt und Amazon mal durchgerechnet hat, wie dramatisch 100 Millisekunden zwischen Bounce und Conversion unterscheiden können, gehört es nicht nur zum guten Ton, sondern zur Pflicht, solche Dinge in seinen Workflow zu integrieren, wenn eine Internetseite für den Unternehmenserfolg ausschlaggeben sein sollte.

Aber was würde Sich ändern wenn unter anderem:

  1. Header komprimiert würden?
  2. Mehrere Requests parallel laufen könnten?
  3. Was, wenn die Site dem Browser Daten ungefragt rüberschiebt?

Dann wäre vieles (nicht alles) dieser Dinge überflüssig. Am Ende muss man die Rechnung Header vs. Payload neu auslegen, wenn Header komprimiert sind und die Dateien parallel geladen werden können. Zusammenfügen der Stylesheets und Javascript-Dateien wäre weniger wichtig als heute. Teilweise könnte das sogar kontraproduktiv sein.

Damit wird die Übergangszeit von HTTP/1.1 auf HTTP/2 für die Frontend-Developer noch eine sehr spannende Zeit werden. (Wer sich den englischen Wikipedia-Artikel über HTTP/2 durchliest, der wird deutlich besser informiert, wo HTTP/2 herkommt (SPDY von Google) und was es so im einzelnen für Änderungen gibt. Der deutsche Artikel ist da eher kurz angebunden.

Wer heute schon testen will, wie sich HTTP/2 in etwa auswirken könnte, der kann sich mal auf einem Apachen mod_spdy installieren und eine Perfomance-Messung vorher-nachher machen. Firefox und Chrome können in den aktuellen Stable-Versionen SPDY von Hause aus, Opera vermutlich auch und der IE wird mit Version 11 nachziehen.

Seid ihr auf die Zukunft vorbereitet? Habt ihr eure Grunt- / Gulp- / $BUILDTOOL-Chains schon vorbereitet? Macht ihr euch noch Gedanken um die aktuelle Optimierungs-Praktik oder lebt ihr schon mit vielen kleinen Dateien in der Zukunft der Webentwicklung? Werdet ihr verschiedene Versionen für HTTP/1.1 und HTTP/2 erstellen müssen?

Kategorien
Webentwicklung Werkzeuge

Creating a Professional WordPress Development Workflow With Vagrant

Creating a Professional WordPress Development Workflow With Vagrant

Kategorien
Webentwicklung

Listen mit eigenen Aufzählungszeichen (ohne Bilder, mit Unicode!)

Wenn man mal in die Verlegenheit kommen sollte, eine Liste mit eigenen Aufzählungszeichen machen zu müssen, wie zum Beipiel in „Auflistung von Vorteilen“, der kann das mit der Content-Eigenschaft gut machen. Allerdings sind die Dinger dann meist inline, so dass Zeilenumbrüche unter dem Listen-Symbol weitergehen, und eher fies zu positionieren.

Mit einem kleinen Trick geht’s aber auch einfacher:

// LESS code

  ul {
    margin: 0;
    padding: 0;
    li {
      list-style-type: none;
      display: table-row;
      &:before {
        content:'\002B'; // "+"
        font-size: 20px;
        line-height: 1.5;
        display: table-cell;
        padding-right: 5px; // Achtung: Margins und Borders greifen hier nicht mehr.
      }
    }
  }

Links

  1. CSS Value Converter
Kategorien
Webentwicklung

CSS-Content-Eigenschaften

Man lernt ja nie aus: „open-quote“ und „close-quote“ sind valide Werte für die CSS-Eigenschaft „content“ und zeigen an dieser Stelle dann typografisch korrekte Anführungszeichen. Wunderbare Eigenschaft zum Stylen von quotes und blockquotes, finde ich.

CSS content • Inhalte mit CSS generieren