Kategorie: Allgemein

Kategorien
Allgemein Linux

CORS, Preflight Request

Cross-Origin-Resource-Sharing – Anfragen im Browser an unterschiedliche Quellen müssen durch den referenzierten Server erlaubt werden. Der referenzierte Server (Zieladresse) muss uns erlauben (Access-Control-Allow-Origin) auf Ihn zugreifen zu dürfen.

Browser schicken dazu oft erstmal einen Vorabfrage (Preflight request) und dann erst den eigentlichen Request.

Lösung über die VHOST

// myserver.conf - vhost configuration
<Directory /var/www/webspace/app/api>
  Options Indexes FollowSymLinks
  AllowOverride All
  ...
  Heder set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Methods "GET,POST,DELETE,OPTIONS,PUT"
  Header set Access-Controll-Allow-Headers "Origin,authorization"
  
</Directory>

Lösung über die die .htaccess

// .htaccess
Heder always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET,POST,DELETE,OPTIONS,PUT"
Header always set Access-Controll-Allow-Headers "Origin,authorization"
Header always set Access-Control-Max-Age "1000"
Header always set Access-Control-Allow-Headers "x-requested-with, Content-Type,origin,authorization,accept,client-security-token"
Kategorien
Allgemein

Symfony – Doctrine, Relationship

Um eine Beziehung zwischen 2 Entities herzustellen verwenden wir OneToMany, ManyToOne, ManyToMany, OneToOne

Beispielsweise wir haben eine App über die wir Bestellungen für ein Restaurant abwickeln. Kunde können aus mehrere Kategorien wählen. Die Beziehung wäre, einer Kategorie sind viele Gerichte zugordnet und

GetränkeVorspeiseHauptgerichtNachspeise
WasserSpargelsuppeSchnitzel mit PommesVanille Pudding
ColaShrimpssuppeKartoffel mit QuarkSchoko Pudding
BierFrühlingsrollenGemüseauflaufHimbeereis
Eistee

targetEntity und mappedBy oder inversedBy

targetEntity beschreibt die Zielentitätät mit der eine Beziehung hergestellt werden soll

inversedBy wird bei der Entity verwendet, die den Fremdschlüssel in der Tabelle enthält. Die Tabelle Gericht enthält somit einen Fremdschlüssel, der unse alle Kategorie IDs anzeigt, dazu wir verbinden uns mit der Eigenschaft/property „gericht“ in der Tabelle Kategorie (inversedBy=“gericht“). Die Entity Kategorie verwendet mappedBy, denn der Fremdschlüssel befindet sich in der Tabelle Gericht.

// ManyToOne, viele Gerichte sind einer Kategorie zugeordnet
class Gericht
{
...
     /**
     * @ORM\ManyToOne(targetEntity="App\Entity\Kategorie", inversedBy="gericht")
     * @Groups({"read", "write"})
     */
    private $kategorie;

// OneToMany, eine Kategorie kann viele Gerichte enthalten
class Kategorie
{
  ...

      /**
     * @ORM\OneToMany(targetEntity="App\Entity\Gericht", mappedBy="kategorie")
     */
    private $gericht;


# um alle getter und setter Klassen zu erstellen können wir folgenden Befehl aufrufen, es wird nach der Entity gefragt

php bin/console make:entity --regenerate

Kategorien
Allgemein

Javascript

Einfach gehalten: Dies und Das 😁

Kategorien
Allgemein Nodejs React Sandboxes Vue

Sandboxes

Testen, probieren für Vue, JS, Node, Typscript und vieles mehr

https://stackblitz.com/

Kategorien
Allgemein Befehle Linux

Programme laufen lassen im Hintergrund

Hält im Hintergrund das Programm am laufen ohne es zu beenden, wenn man das Terminalfenster schliesst

setsid [programm]

setsid php

Kategorien
Allgemein React

useState und useEffect

Zusammenfassung

  • useEffect initial : useEffect(…, [] )
  • lazy State: setState( () => {} … )
  • Das setState bspw. setData wird synchron einmalig aufgerufen
  • useEffect wird asynchron einmalig aufgerufen
  • im useEffect Fall muss mit nicht vorhandenen Daten umgegangen werden können, da erst nach dem rendenr useEffect aufgerufen wird
    • nach dem rendern wird useEffect aufgerufen, hat Daten verfügbar
    • über Seiteneffekt wird Komponente neu gerendert, wenn useState Änderung bemerkt
const [data, setData] = useState();

useEffect( ()=> {
      setData( {...data})
});

Kategorien
Allgemein React

useEffect

Mit useEffect führen wir Code aus, nachdem die Komponenten gerendert, also im DOM erzeugt wurden.

useEffect( () => doStuff() ); // erwartet eine Funktion
useEffect( () => doStuff(), [] ); //2 Parameter optional übergibt Dependencies

Wird der 2 Parameter übergeben, kann damit gesteuert werden, wann die Funktion ausgeführt wird. Andernfalls wird die Funktion bei jedem rendern ausgeführt!!!

Das ist bei Schnittstellenanfragen natürlich nicht immer gewünscht, jedes mal alle Daten anzufragen.Mit dem 2ten Parameter den Dependencies, kann man das steuern.

useEffect Hook

  • asynchrone Ausführung, d.h. Anwendung wird nicht blockiert
  • Code wird nach rendern der Komponente ausgeführt
  • kein Rückgabewert
  • über Seiteneffekte arbeiten ( Übergabe von geänderten Werten an den State), der dann ein Neurendern der Komponenten auslöst
  • geeignet für
    • langlaufende Berechnungen
    • Schnittstellenkommunikation (bspw. REST)
    • PUB-SUB-PATTERN
  • Dependies (Abhängikeiten), nur bei Änderung der Abhängikeiten wird useEffect ausgelöst
  • intital sind alle Abhängikeiten „neu“, d.h. es werden alle useEffect ausgelöst

3 Möglichkeiten Abhängkeiten zu übergeben

  • ohne Parameter – Ausführung erfolgt bei jedem rendern
    useEffect( () => doStuff());
  • leere Liste (leeres Array) – Ausführung erfolgt nur initial
    useEffect( () => doStuff(), [] );
  • mit 1 oder mehrerer Abhängikeiten – Ausführung nur bei Änderung mindestens 1 Abhängikeit
    useEffect( () => doStuff(), [count] );
Kategorien
Allgemein React

Altes und neues React

Altes React

  • Verwaltung in Klassen
  • nur 1 pro Komponente möglich

Neues React

  • Verwaltung in Funktionen
  • mehrere States pro Komponente möglich
Kategorien
Allgemein Linux

FTP Centos

Installing and configuring the FTP server

Let’s install the vsftpd package.

dnf install vsftpd

Now start the service.

systemctl start vsftpd

And add it to autorun.

systemctl enable vsftpd

Open the /etc/vsftpd/vsftpd.conf file.
Check these parameters to make sure they have the correct values. We currently prohibit anonymous login and allow it for local users. FTP recording is also allowed.

anonymous_enable=NO
local_enable=YES
write_enable=YES

Find and uncomment this line to restrict access to everything except the home directory.

chroot_local_user=YES

And add this line to the end of the file to grant access to change and write files via FTP.

allow_writeable_chroot=YES

Now save and close the file and open /etc/pam.d/vsftpd. Comment this line in it:

#auth required pam_shells.so

If you use firewalld add the FTP service to it.

firewall-cmd --permanent --add-service=ftp
firewall-cmd --reload

Restart the FTP service.

systemctl restart vsftpd

Creating a user for FTP access

Create a new user and set the password for it.

useradd newftpuser
passwd newftpuser

To prevent it from logging in via ssh, change its shell.

usermod --shell /sbin/nologin newftpuser

Kategorien
Allgemein CSS

SVG

The implementation in CSS or with an collection of SVGs in a sprite file

Implementation in CSS

1. We create a ::before Element with background-color

 &__item::before{
        content: "";
        display: inline-block;
        height:1rem;
        width: 1rem;
        fill: var(--color-primary);

        background-color: var(--color-primary);   
    }

2. We mask the SVG, so only the SVG will appear in the background-color

&__item::before{
        content: "";
        display: inline-block;
        height:1rem;
        width: 1rem;
        fill: var(--color-primary);

        background-color: var(--color-primary);  
        
        //Newer Browser
        // -webkit-mask-image: url(../img/chevron-thin-right.svg);
        // -webkit-mask-size: cover;
        // mask-size: cover;

        //Older Browsers
        // background-image: url(../img/chevron-thin-right.svg);
        // background-size: cover;
    }
////////////////////////
// LIST
.list{
    list-style: none;
    margin: 3rem 0;
    padding: 3rem 0;
    border-top: 1px solid var(--color-grey-light-3);
    border-bottom: 1px solid var(--color-grey-light-3);

    display: flex;
    flex-wrap: wrap;

    &__item{
        //divided complete space by 2 = 50%, so every list__item
        //has a fix width
        flex: 0 0 50%;
        margin-bottom: .7rem ;
    }

    &__item::before{
        content: "";
        display: inline-block;
        height:1rem;
        width: 1rem;
        fill: var(--color-primary);

        //Newer Browsers
        background-color: var(--color-primary);
        -webkit-mask-image: url(../img/chevron-thin-right.svg);
        -webkit-mask-size: cover;
        mask-size: cover;

        //Older Browsers
        // background-image: url(../img/chevron-thin-right.svg);
        // background-size: cover;

       
    }

}

Implementation as Sprite file

Create a sprite file with icomoon.io and export it as sprite file.

1. Create svg Element in html document

       <div class="overview__stars">
            <svg class="overview__icon-star">
              <use xlink:href="img/sprite.svg#icon-star"></use>
            </svg>
            <svg class="overview__icon-star">
              <use xlink:href="img/sprite.svg#icon-star"></use>
            </svg>
            <svg class="overview__icon-star">
              <use xlink:href="img/sprite.svg#icon-star"></use>
            </svg>
            <svg class="overview__icon-star">
              <use xlink:href="img/sprite.svg#icon-star"></use>
            </svg>
            <svg class="overview__icon-star">
              <use xlink:href="img/sprite.svg#icon-star"></use>
            </svg>
        </div>

2. Set Element size and fill with color

    &__icon-star{
        width: 1.75rem;
        height: 1.75rem;
        fill: var(--color-primary);
    }

3. All 5 SVG Elements filled with color