Blog: Latest Entries (15):


Shopware 5: Neuer Shop online

Ein neuer Shop mit einer erweiterten Version des EDC-Plugins von mir ist heute online gegangen. Es ist noch ein Shopware 5 Shop, aber Entwicklungen in Richtung Shopware 6 gehen auch voran.

bbcode-image


https://www.toys4fun.shop

10% Coupon für den 1. Monat FUN4YOU (ab 20EUR, 1.9.-30.9., 1x pro Kunde anwendbar)

Ich habe dabei gelernt, dass schon ein wenig Farbe im Hintergrund sehr viel ausmachen kann. Ein Farbverlauf ist hübsch aber manchmal auch schwierig zu beherrschen, dass es am Ende nicht einfach zu viel ist.

Für den nächsten Shop werde ich mal mit Video-Hintergründen herum experimentieren. Mit einem CSS Blur-Effekt von 6px kann man ohne Probleme ein ein stärker komprimiertes 720p MP4 Video nutzen, ohne dass die schlechte Qualität auffallen würde.

Aber erstmal zurück an die Arbeit und die Frage warum der MS SSMS (SQL Server Manager) nur unter Windows funktioniert und nicht mit Linux oder Wine....


Shopware 6: Entity-Select ohne name-Field

Während ja jede Entity eine id hat, hat nicht jede ein name-Field. Ich musste doch etwas suchen bis ich erstmal die Dokumentation zu der Component gefunden habe und dann mir klar war wie ich ein andere Feld angeben kann. Am Ende natürlich genau so wie man es sich dachte nur der Prop-Name ist irgendwie seltsam, weil Label ja auch anders dort verwendet wird als Begriff.

bbcode-image


https://component-library.shopware.com/components/sw-entity-single-select

Shopware 6: Docker-File

Hier meine aktuelle Docker-Umgebung für Shopware 6 und mit PHP 7.4


FROM php:7.4-apache

RUN apt-get update &&\
apt-get install --no-install-recommends --assume-yes --quiet ca-certificates \
curl \
git \
libxml2-dev \
libxslt-dev \
libfreetype6-dev \
libjpeg62-turbo-dev \
libpng-dev \
libcurl4-gnutls-dev \
zlib1g-dev \
libzip-dev \
&& docker-php-ext-install -j$(nproc) iconv \
&& docker-php-ext-configure gd --with-freetype=/usr/include/ --with-jpeg=/usr/include/ \
&& docker-php-ext-install -j$(nproc) gd

RUN apt-get install -y libc-client-dev libkrb5-dev \
&& docker-php-ext-configure imap --with-kerberos --with-imap-ssl \
&& docker-php-ext-install imap

RUN docker-php-ext-install pdo_mysql \
&& docker-php-ext-install json \
&& docker-php-ext-install dom \
&& docker-php-ext-install curl \
&& docker-php-ext-install zip \
&& docker-php-ext-install intl \
&& docker-php-ext-install xml \
&& docker-php-ext-install xsl \
&& docker-php-ext-install fileinfo
RUN rm -rf /var/lib/apt/lists/*

RUN echo 'memory_limit = 512M' >> /usr/local/etc/php/php.ini

RUN a2enmod rewrite

# copy conf-file to /etc/apache2/sites-enabled/000-default.conf
RUN mkdir /files;
COPY ./setup.sh /files/setup.sh
ENTRYPOINT ["sh", "/files/setup.sh"]


Config und setup.sh kann nach eigenen Bedarf ersteltl werden. ich nutze localhost:

conf

<VirtualHost *:80>
ServerName localhost
ServerAlias www.localhost

DocumentRoot "/var/www/html/public"

RewriteEngine On
RewriteMap lc int:tolower

<Directory "/var/www/html/public">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php
</Directory>
</VirtualHost>


setup.sh

/usr/sbin/apache2ctl -D FOREGROUND


Hier könnten aber auch noch composer install und so eingebaut werden.

RSA-Keys und Zugriffsrechte

Nachdem ich wieder einmal Keys von Windows auf ein Linux-System umgezogen haben und wieder erstmal herausfinden musste wie die Rechte gesetzt sein müssen.. hier einmal ein kurzes Script dazu:


cd ~/.ssh
sudo chmod -R 0700 .
sudo chmod 0644 id_rsa.pub
sudo chmod 0600 id_rsa

CSS: Ränder die kürzer als die Box sind

Design-technisch sieht sowas ja immer echt hübsch aus. Das aber umzusetzen ist erstmal nicht ganz so einfach, da es keine fertige Lösung gibt. Hier muss mal wieder ein eigenes Element mit :before und einer absoluten Position helfen.

Absolute Postionen sind nicht wirklich toll, weil damit das Element aus dem Fluss der Elemente entfernt wird. Wenn man z.B. zwei Divs übereinander legen möchte ist es auch besser da CSS-Grid zu verwenden und beide mit der selben Startposition im Grid abzulegen.

Aber zurück zu den Rändern. Hier erstmal mit "absolute":

Links (80% Länge):

div.left:before {
content : "";
position: absolute;
left : 0;
top : 0;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}


Links (80% Länge und unten + oben Abstand):

div.left:before {
content : "";
position: absolute;
left : 0;
top : 10%;
height : 80%;
width : 50%;
border-left:5px solid #726E97;
}

CSS: Flexbox + Ellispis

Manchmal sind ganz einfache Dinge sehr komplex. CSS-Ellipsis ist an sich einfach. Aber mit Flexbox kann es plötzlich dazu kommen, dass es einfach nicht funktioniert. Alles funktioniert nur die "..." sind nicht zusehen, weil es einfach alles zur Seite rausragt und die Breite hält.


<div class=""flex-container">
<div class="flex-child">
<header>LONG TEXT</header>
</div>
</div>



.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}


Die Lösung hier ist [url=]https://css-tricks.com/flexbox-truncated-text/min-width: 0;[/url].

Also:

.flex-child {
min-width: 0;
}

.flex-child header{
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}


Super schnelle Lösung.. aber wie sollte man da alleine drauf kommen, wenn man nur mal schnell Ellipsis einbauen will?

HP Omen G15 Gaming-Notebook... 0.38GHz

Es sieht gut aus. Bang und Olufsen Design. Keyboard leuchtet schön und es ist für ein Gaming Notebook schön leicht und handlich. Ok man muss erstmal etwas Software runterwerfen, aber dann steht einem und dem Spaß an Spielen nichts mehr im Weg. Genshin Impact installieren starten und die Power geht los.. mit 0,38GHz .. und nicht mehr. Alles ist langsam. Daten laden langsam und alles ruckelt vor sich hin. Ein Ryzen 4800h sollte an sich mehr liefern.
Zum Glück kennt Google 0.38Ghz direkt als Suchbegriff und kann einen direkt in viele Foren leiten, wo genau das Problem besprochen wird.

Also erstmal ein BIOS-Update. Wenn man ein neues Notebook kauft sollte ja klar sein, dass ein BIOS-Update zu den ersten Dingen gehört, die man damit tun würde. Gerade der normale Kunde... normale Noobs lieben BIOS-Updates.

Am Ende läuft wieder alles, die Katze hat sich beruhigt und fühlt sich nicht mehr durch die lauten Lüfter provoziert. Alles läuft nun mit .... 0.38Ghz.

Wichtig! Netzteil abmachen. Dann tacktet die CPU plötzlich auf 1.9GHz hoch.. dann auf 2.9Ghz im Spiel. Netzteil wieder anschließen und es geht auf über 4GHz hoch. Warum? Keine Ahnung liegt wohl irgendwie mit dem Ladevorgang zusammen.

Nun läuft es... aber viel zu viel Spannung für einen ruhigen Abend auf der Couch.. wobei.. was macht so einen Abend gemütlicher als ein BIOS-Update?

(Auch wenn BIOS-Updates heute echt einfach und sicher sind.. der alte Nervenkitzel auf alten Pentium und K6 Zeiten bleibt irgendwie)

Code Reviews

Code Reviews kosten Zeit. Nicht nur ein bisschen sondern wirklich viel Zeit. Ich guck mir alles an und versuche erstmal zu verstehen, was es tut. Wenn ich glaube es verstanden zu haben, am Besten noch mal kurz nachfragen oder in den Task gucken. Code-Style sollten automatisch geregelt sein, wenn dort was nicht stimmt hat ein Tool nicht richtig gearbeitet. Bei der Code Quality muss man sehr genau gucken und zwischen persönlichen Vorlieben und wirklich Sinnhaftigkeit unterscheiden.
Wenn die Verbesserungen reinkommen, gucke ich mir diese Änderungen wieder unter den selben Blickpunkten an. Fällt mir etwas in einem Code-Teil auf der nicht geändert wurde, kann nett fragen, ob der Entwickler das noch mal verbessern könnte. Was ganz sicher machen wird. Kommen die Änderungen wieder und mir fällt wieder etwas auf in einem Teil der von keiner der beiden Änderungen betroffen war, dann... dann ist das mein Problem und ich hab was falsch gemacht oder es ist so unbedeutend, dass es nicht geändert werden muss, ich mir aber für den nächsten Review vornehme darauf zu achten.

Natürlich gibt sehr komplexe Logiken, wo Probleme erst beim 10x rauf gucken auffallen, aber in so einem Fall ist es dann einfach Glück und der genutzten Logik geschuldet... 99% solcher Probleme fallen sonst erst in der Prod-Umgebung auf.

Docker mit der PowerShell

Das meiste findet man immer nur für die Bash. Aber wenn man Docker für Windows verwendet braucht man vieles für die PS. Ich habe hier mal ein paar kleine Dinge zusammen getragen.

Alle Container stoppen:
docker ps -aq | foreach {docker stop $_}


Alle (gestoppten) Container entfernen:
docker ps -aq | foreach {docker rm $_}


Alle (ungenutzen) Images entfernen:
docker images -qa | foreach {docker rmi -f $_}


Alle (ungenutzen) Volumes entfernen:
docker volume ls -qf dangling="true" | foreach {docker volume rm $_}


Alle (custom) Netzwerke entfernen:
docker network ls -q --filter type=custom | foreach {docker network rm $_}

Shopware 6: Docker Dev-Environment

Mein momentanes Dev-Setup für Web-Installer Installation von Shopware 6.

Verzeichnisse und Dateien:

containerData/
apache/
Dockerfile
my_vhost.conf
setup.sh
db_vol/
sw/
...
docker-compose.yml


Web-Installer Dateien kommen in das sw-Verzeichnis.

Dockerfile

FROM php:7.2-apache

RUN apt-get update &&\
apt-get install --no-install-recommends --assume-yes --quiet ca-certificates \
curl \
git \
libxml2-dev \
libxslt-dev \
libfreetype6-dev \
libjpeg62-turbo-dev \
libpng-dev \
libcurl4-gnutls-dev \
zlib1g-dev \
&& docker-php-ext-install -j$(nproc) iconv \
&& docker-php-ext-configure gd --with-freetype-dir=/usr/include/ --with-jpeg-dir=/usr/include/ \
&& docker-php-ext-install -j$(nproc) gd

RUN apt-get install -y libc-client-dev libkrb5-dev \
&& docker-php-ext-configure imap --with-kerberos --with-imap-ssl \
&& docker-php-ext-install imap

RUN docker-php-ext-install pdo_mysql \
&& docker-php-ext-install json \
&& docker-php-ext-install dom \
&& docker-php-ext-install curl \
&& docker-php-ext-install zip \
&& docker-php-ext-install intl \
&& docker-php-ext-install xml \
&& docker-php-ext-install xsl
RUN rm -rf /var/lib/apt/lists/*

#RUN pecl install xdebug-2.8.0 && docker-php-ext-enable xdebug
#RUN echo 'zend_extension="/usr/local/lib/php/extensions/no-debug-non-zts-20151012/xdebug.so"' >> /usr/local/etc/php/php.ini
#RUN echo 'xdebug.remote_port=9000' >> /usr/local/etc/php/php.ini
#RUN echo 'xdebug.remote_enable=1' >> /usr/local/etc/php/php.ini
#RUN echo 'xdebug.remote_host=host.docker.internal' >> /usr/local/etc/php/php.ini

RUN echo 'memory_limit = 512M' >> /usr/local/etc/php/php.ini

RUN a2enmod rewrite

# copy conf-file to /etc/apache2/sites-enabled/000-default.conf
RUN mkdir /files;
COPY ./setup.sh /files/setup.sh
ENTRYPOINT ["sh", "/files/setup.sh"]


my_vhost.conf

<VirtualHost *:80>
ServerName localhost
ServerAlias www.localhost

DocumentRoot "/var/www/html/public"

RewriteEngine On
RewriteMap lc int:tolower

<Directory "/var/www/html/public">
Options Indexes FollowSymLinks
AllowOverride All
Require all granted
DirectoryIndex index.php
</Directory>
</VirtualHost>


setup.sh

/usr/sbin/apache2ctl -D FOREGROUND


docker-compose.yml

version: '3.3'

services:
sw_mysql:
image: bitnami/mysql:5.7
environment:
MYSQL_ROOT_PASSWORD: root
MYSQL_DATABASE: sw
MYSQL_USER: sw
MYSQL_PASSWORD: sw
volumes:
- ./db_vol/:/bitnami/mysql/data

sw_http:
build: ./containerData/apache
volumes:
- ./containerData/apache/my_vhost.conf:/etc/apache2/sites-enabled/000-default.conf:rw
- ./sw:/var/www/html:rw,delegated
ports:
- 80:80
- 443:443

mail:
image: mailhog/mailhog
ports:
- 8025:8025

adminer:
image: adminer
ports:
- 8082:8080
depends_on:
- sw_mysql


Ich musste mir eine sw2-Datenbank anlegen über root/root, aber an sich sollte es wie in meinem SW5-Environment auf mit der sw-Datenbank und sw/sw gehen.

Docker: PHP IMAP installieren

Wenn man Probleme hat die PHP IMAP-Erweiterung unter Docker zu installieren, kann dieses helfen:


RUN apt-get install -y libc-client-dev libkrb5-dev \
&& docker-php-ext-configure imap --with-kerberos --with-imap-ssl \
&& docker-php-ext-install imap


Bei mir und meiner Shopware 6 Dev-Umgebung hat es jedenfalls gut geholfen.

Es gab beim Bauen des Images vorher diesen Fehler:

utf8_mime2text() has new signature, but U8T_CANONICAL is missing. This should not happen. Check config.log for additional information.

JavaScript: Prettier Formatierung in PHPStorm

Es gibt viele Code-Styling Presets die man einfach in PHPStorm einstellen kann, wie PSR-2 für PHP. Für JavaScript gibt es da wenige und z.B. Prettier wird auch erstmal via NPM installiert.

Dann kann das Problem kommen, dass man Node nicht unter Windows laufen lässt sondern in WSL. Aber da hat PHPStorm zum Glück eine eine fertige Framework-Integration für.

bbcode-image


Damit kann Prettier auch für die normale Reformatierung von PHPStorm mit JS-Dateien ausgewählt werden.

JavaScript Syntax für PHP-Devs

array_merge:

let a = [23, 42, 69];
let b = [112, 256 ...a];


isset() oder ??:

let data = {a: 2, b: 3};
let result = a?.c ?? 0;


Object-Felder als Arguments verwenden:

let data = [
{
id: 0,
name: 'test'
}
];

data.forEach(
({id, name}, idx) => {
console.log(id + ' is named as ' + name + ' and has the index ' + idx);
}
);

Older posts:

Möchtest Du AdSense-Werbung erlauben und mir damit helfen die laufenden Kosten des Blogs tragen zu können?