Blog: Latest Entries (15):


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);
}
);


Webcams.. teuer, oft schlecht

Ich hatte lange Zeit eine Microsoft Lifecam HD-3000 als einzige Webcam. Dann kam Corona, Homeoffice und Kontakteinschränkungen. Die Webcam der ThinkPads sind aber wirklich schlecht und der Winkel nie ideal, wenn man mit einem externen Monitor arbeitet. Wo sonst Audio bei Discord reichte, wollte man gerne auch die Personen mal wieder sehen und alle möglichen Leute fragen auch wegen Webcams.
Die Microsoft Webcam ist schon wirklich viele Jahre alt und war teilweise für 20 Euro zu haben. Plötzlich lagen die Preise bei 40-60 Euro. Viel zu viel für die Qualität, die die Webcam liefert, war meine Einschätzung. Logitech Webcams waren noch viel stärker im Preis gestiegen. Es gab noch Webcams für 20-30 Euro, die auch HD liefern sollten. Mit Rabatt dachte ich, könne man da nicht viel falsch machen. Doch die Webcams hatten am Ende doch einige Probleme:

- Defekte Zeilen im Sensor
- Schlechte Farbdarstellung
- Mittelmässige Schärfe
- Zwar kippbar aber nicht drehbar (also schnell eine eigene Halterung dafür gedruckt)
- Zu wenig Weitwinkel beim Objektiv

Was ich noch liegen hatte, war eine ganz brauchbare IP Kamera. Aber da die nur per Ethernet angeschlossen werden können, ja keine alternative zu einer Webcam.. oder?

Doch! Windows kann auch ONVIF IP Kameras nun einbinden und diese als normale Kamera nutzen. In der Kamera-App, in Skype und allgemein.

bbcode-image


Man muss unter den Geräten einfach ein neues hinzufügen und kann dort nach IP Kameras suchen lassen. Wie hier beschrieben.

bbcode-image


Gut geeignet für Meetingräume oder auch wenn man größere fest installierte Dinge präsentieren möchte. Durch S- oder C-Mount sind Objektive auch austauschbar.

Am Ende kommt nun aber eine teurere Microsoft Webcam zum Einsatz. Wenn das Bild der alten und der neuen Webcam nebeneinander sieht, ist der 60 Euro Unterschied wirklich deutlich zu sehen und man hat auch wieder mehr Weitwinkel.

Lib-Lizenzen auflisten

Lizenzen einsammeln die man in seinen Projekten benutzt kann manchmal nötig sein. Gerade wenn man Software für andere
entwickelt, kann sich der Kunde dafür interessieren, weil den es ja einschränken könnte, wie er die Software verwendet.

Das geht mit diesen Libs relativ einfach.

PHP:

composer global require comcast/php-legal-licenses
~/.config/composer/vendor/bin/php-legal-licenses generate


NPM:

sudo npm install -g license-checker
license-checker --development --csv > licenses.csv

Smarte Heizkörpersteuerung

Im Homeoffice bin ich faul. Ich will da entspannt arbeiten und so viel schaffen. Ich hab keine Lust mich da noch groß mit dem ganzen Drumherum zu kümmern. Da würde ich am Liebsten alles zu 100% automatisieren. Der erste Schritt ist nun die Heizung. Ich will nicht morgens hoch und abends runter regeln. Wenn ich lüfte will ich auch nicht ganz runter drehen müssen. Ein Grund dafür ist, dass der Heizkörper unter einer Dachschrägen ist und man immer sehr gebückt dahin gehen muss und er Thermostat in der Ausrichtung auch noch sehr schlecht zu lesen ist.

Ich hab mit für ein Thermostat mit DECT-Anbindung von AVM entschieden. Das Fritz!DECT 301. Einmal weil wir eine Fritzbox und DECT für die Telefone schon nutzen und weil man doch relativ einfach und genau die Zeiten über die Fritzbox steuern kann ohne noch eine extra App nutzen zu müssen. Das Home-Office ist für den Versuch ideal, da die Nutzungszeiten sehr genau definiert sind. Es soll etwas vorher warm werden und etwas nach Feierabend wieder kühler werden (falls dann doch mal eine Überstunde ansteht). Zur Mittagszeit in der Pause kann es auch ruhig kühler werden. Natürlich wird es nicht sofort kalt, also wird wohl zu Mittag nicht mehr geheizt aber die Temperatur nur minimal zu der Zeit sinken.

bbcode-image


Die bis zu 30% Kostenersparnis sehe eher sehr skeptisch. Aber eine geringe Kostenersparnis erhoffe ich mir dann doch.

Older posts:

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