N-are cum să fie asta, nu?

Acum aproape trei săptămâni fac un deploy în organizația cu care lucrez. După câteva ore, lucrurile încep să o ia la vale: procesoarele serverelor erau la 100%, memoria și baza de date abia erau atinse.

Interludiu

Înainte să intru în detalii, să spun întâi despre cum funcționează bestia.

Mediul în care rulează toată povestea este AWS, cu resurse decente: în zilele normale sunt 2-6 servere t3.xlarge (4CPU, 16Gb RAM) scalate automat, în funcție de trafic.

Toată infrastructura este administrată prin Terraform, iar pentru orice schimbare se face commit. Orice deployment este făcut prin pipeline și înseamnă un server nou pe care se reinstalează tot.

Pe lângă asta, avem două servere extra, unul pentru dev, altul pentru staging. Din motive de timp, serverele astea două extra sunt reciclate (lucru important, dar aflat abia aseară) și trec prin procesul de reinstalare doar dacă trec de un anumit threshold la resursele folosite.

De când a început nebunia, s-a făcut întâi upgrade la 10 ✕ t3.2xlarge (8CPU, 32Gb RAM), apoi la altele și mai mari, cu 32CPU. Practic, aveam 320 CPU iar site-ul murea la 100 vizitatori. 🤦‍♂️

Pentru că planetele s-au aliniat foarte bine, serverul de dev era enervant de rapid, restul erau lente. Cât de lente? +30s pentru o pagină goală. Pe dev, aceeași pagină se încărca în 3-400ms. Și ca să fie totul și mai frustrant, resursele pe serverul ăsta erau cele mai mici, gen 1CPU, 2Gb RAM.

Serverul local? All good.

Semne bune

Cum set-up-ul este minunat – WordPress multisite, WPML, Elementor, plus alte 30 plugins – primul gând a fost: este buba la un plugin. Fac rapid restore și se rezolvă. Țeapă, am făcut restore la câteva versiuni din trecut. Nimic. Fac restore la baza de date. Nimic.

După ce am luat lucrurile metodic (dezactivat plugin-uri, activat unul câte unul, install fresh etc), am ajuns la concluzia că singurul lucru care ar putea fi de vină este AWS. Sysadmin-ul zice că n-are cum, eu îi zic: hai să mai facem un server, să vedem. Nu mă, n-are cum. Humor me.

Server nou AWS. La fel de lent.

După ce am primit voie de la legal (să mut baza de date), am făcut un droplet pe Digital Ocean. Rapid. Deci problema trebuie să fie în AWS! Pe de altă parte, erau atât de multe diferențe între DO și AWS încât nu eram atât de sigur.😅

Disperare

Am încercat tot ce mi-a trecut prin cap. Am întrebat, am explicat. Profiler. Debugger. Tracing. Toate arătau că problema ar fi de la Elementor. Dar de ce nu pot replica în toate mediile?

Nimeni nu avea o explicație logică. Am fost nevoit să trec la lucruri cu adevărat serioase.

Degeaba.

Casual Talk

La un moment dat, întreb pe Slack-ul Toptal. Îmi răspunde un tip, că și el a observat probleme de performanță și îmi dă un screenshot din New Relic cu timpii de încărcare.

Încep să-l descos pe individ, să văd ce set-up are. Nu avea nimic în comun cu set-up-ul meu, cu excepția a două lucruri:

  • Elementor
  • New Relic

Nimic altceva. Nici servere, nici nu era multi-site, nici nimic.

Și apoi mă lovește: mai este o diferență între serverul de pe DO și cele din AWS: cel de pe DO nu are New Relic. Și nici cel local.

Hmmm, n-are cum să fie asta, nu?

N-are cum să fie New Relic, nu?

Și fac un test în staging: scot extensia New Relic din php.ini. Lucrurile revin instant la normal. Facem rapid un test, facem deploy șiiii….

Apoi încep să apară mai multe semne. Pe Github. Pe forum.

Explicația

Am zis mai sus treaba asta:

Pe lângă asta, avem două servere extra, unul pentru dev, altul pentru staging. Din motive de timp, serverele astea două extra sunt reciclate (lucru important, dar aflat abia aseară) și trec prin procesul de reinstalare doar dacă trec de un anumit threshold la resursele folosite.

Ei bine…

Pentru că serverele nu treceau prin procesul de reinstalare, agentul New Relic nu era modificat.

Concluzii

Am învățat/aflat/mi-am reamintit câteva lucruri în toată povestea asta:

  • nu sunt eu de vină pentru toate relele care se întâmplă 😅😅
  • că nu există „nu se poate să fie de aici”. Când ceva nu are explicație, ia în considerare orice posibilitate;
  • nu trebuie să ai încredere în sysadmin 😂 Nu pentru că ar fi rău intenționat, ci pentru că este posibil să-i scape anumite aspecte;
  • cu răbdarea treci marea.

Conflicte în composer autoload

TL;DR: folosește __DIR__ când incluzi un fișier.

Recent am avut o situație tare interesantă în WordPress: folosesc composer autoload în mai multe locuri (câteva plugin-uri, temă) și la un proiect am început să primesc erori. Autoloader-ul nu mai găsea o clasă în temă.

Rulez composer dump în temă, nu mai găsește altă clasă în pluginul 1. Rulez composer dump în plugin, nu mai găsește o clasă în pluginul 2. Rulez și acolo composer dump, nu mai găsește clasa în temă. Și tot așa.

Niște chestii interesante în treaba asta:

  1. problema apărea doar dacă rulam în WP-CLI
  2. problema NU exista în producție.
  3. problema nu există la alte proiecte.

Până când am observat o chestie: la proiectele la care nu aveam problema asta, modul în care includeam autoload.php era ușor diferit:

require_once __DIR__ . '/vendor/autoload.php';

Față de cum aveam în proiectul curent:

require_once 'vendor/autoload.php';

O explicație a problemei găsești aici.

Tips & Tricks PowerShell

Mi se pare că PowerShell are parte de mult mai puțină atenție decât merită. Pentru ce fac eu, mi se pare mult mai intuitiv/expresiv/user-friendly/readable decât Bash. Fac comparația asta pentru că (inițial) Microsoft a vrut ceva în genul Bash pe Windows. Și au mers foarte mult pe inspirație: pipes, alias-uri pentru comenzi (astfel încât, până la un punct, poți folosi comenzi Linux care funcționează aproximativ la fel).

Și în ultima vreme am făcut mici utilitare care mă ajută cu una-alta și de care am tot scris pe forum. Am zis să le centralizez aici, poate ajută și pe alții.

Pasul 0: instalarea

Dacă ești pe Windows, nu trebuie să faci nimic, PS este inclus încă de la … Win 7 (sau vista?). Dacă eșți pe altceva, poți instala fără prea mari bătăi de cap.

Pasul 1: un fel de .bashrc

Evident, nu avem așa ceva, avem $profile. Ca să-l edităm: notepad $profile. (sau subl $profile sau ce editor îți place). Aici este fișierul cu chestii, unde punem cod ce va fi accesibil din consolă.

Spre deosebire de Linux, unde avem un fișier ~/.bashrc, în PowerShell avem ~/Documents/PowerShell/Microsoft.PowerShell_profile.ps1. (calea asta este ținută în acel $profile de care am zis mai sus).

⚠️Orice modificare a acestui fișier necestă reîncărcarea acestuia: ori cu un reset al consolei ori cu execuția . $profile

Pasul 2: utilitare făcute de alții

Atât pe Linux cât și pe Mac, există … utilitare (nici nu știu cum să le spun, teme? modificări?) care adaugă tot felul de informații în shell: calea curentă, branch-ul git, ora etc.

Cele mai cunoscute (eu le folosesc doar pe primele două):

Pasul 3: utilitare proprii

Înainte de toate, punem două comenzi la începutul lui $profile:

  1. Set-PSReadlineKeyHandler -Key Tab -Function MenuComplete pentru a avea autocomplete mai deștept la TAB (util în anumite situații)
  2. Start-SshAgent -Quiet dacă folosești ssh

Organizarea fișierelor

La fel cum în .bashrc poți include fișiere externe (source my-file), la fel poți face și în PowerShell folosind Import-Module -Name my-file.ps1. La fel de frumos poți să trântești totul în $profile – nu e nici o supărare – dar spargerea în fișiere permite să dezactivezi rapid module/funcții sau distribuirea acestora.

Funcțiile de mai jos pot fi puse și în $profile și în module separate.

Autocomplete pentru SSH

Codul este luat de aici și îți pune la dispoziție autocomplete pentru host-urile definite în ssh config. Foarte util dacă te ai multe host-uri configurate. Tot în gist-ul ăsta vei găsi și utilitar care-ți oferă autocomplete în baza known_hosts.

function Get-SSHHost($sshConfigPath) {
  Get-Content -Path $sshConfigPath `
  | Select-String -Pattern '^Host ' `
  | ForEach-Object { $_ -replace 'Host ', '' } `
  | ForEach-Object { $_ -split ' ' } `
  | Sort-Object -Unique `
  | Select-String -Pattern '^.*[*!?].*$' -NotMatch
}

Register-ArgumentCompleter -CommandName 'ssh', 'scp', 'sftp' -Native -ScriptBlock {
  param($wordToComplete, $commandAst, $cursorPosition)

  $sshPath = "$env:USERPROFILE\.ssh"

  $hosts = Get-Content -Path "$sshPath\config" `
  | Select-String -Pattern '^Include ' `
  | ForEach-Object { $_ -replace 'Include ', '' }  `
  | ForEach-Object { Get-SSHHost "$sshPath/$_" }

  $hosts += Get-SSHHost "$sshPath\config"
  $hosts = $hosts | Sort-Object -Unique

  $hosts | Where-Object { $_ -like "$wordToComplete*" } `
  | ForEach-Object { $_ }
}

SSH .pub keys

Pentru că am multe chei ssh, se întâmplă uneori să fie nevoie să copiez rapid cheia publică. sshkeys urmat de tab îți va arăta cheile disponibile.

function sshkeys() {
    param($sshKeyName = 'id_rsa')

    if ( [string]::IsNullOrEmpty($sshKeyName) ) { 
      echo 'Empty Key'
      return
    }

    $sshFile = "$env:USERPROFILE\.ssh\$sshKeyName"

    if (-not(Test-Path -Path $sshFile -PathType Leaf)) {
      echo 'Invalid file'
      return
    }

    $keyValue = ssh-keygen -y -f $sshFile

    Set-Clipboard -Value "$keyValue"

    echo "Show public key for: $sshKeyName"
    echo "--------------------------------------------------"
    echo $keyValue
    echo "--------------------------------------------------"
}


Register-ArgumentCompleter  -CommandName sshkeys -Native  -ScriptBlock {
    param($commandName, $parameterName, $wordToComplete, $commandAst, $fakeBoundParameters)

    $excluded = 'config', 'known_hosts', 'altă-cheie-privată'

    $sshPath = "$env:USERPROFILE\.ssh"

    $keys = Get-ChildItem -Path $sshPath -File -Name
    $keys = $keys | Sort-Object -Unique

    $keys | Where-Object { 
      -not($excluded -contains $_)
    } |  Where-Object {
      $_ -notlike '*.pub'
    } |  ForEach-Object {
      $_
    }   
}

WP CLI autocomplete

Register-ArgumentCompleter  -CommandName wp, wpms -Native  -ScriptBlock {
    param($commandName, $parameterName, $wordToComplete, $commandAst, $fakeBoundParameters)

    Invoke-Expression "wp cli completions --line='$parameterName' --point=100" | ForEach-Object {
       $_
    }
}

Sudo

În lumea Windows există conceptul de a rula ceva elevat, dar nu există și un mod ușor de a face asta. Și pentru că Windows nu permite elevarea unui proces existent, este nevoie să se deschidă o nouă instanță:

function sudo() {
  $curDir = (Get-Location).path
  powershell -command "Start-Process cmd -ArgumentList '/c cd /d $curDir && $args & pause' -Verb runas"
}

În rest se execută la fel ca pe Linux: sudo notepad $profile.

Cum migrezi un WordPress multisite?

Una din problemele cu care mă confrunt frecvent este aceea de a migra o instanță de WordPress de pe un domeniu pe altul (e.g. din live în development). La site-uri simple este o operațiune rapidă, wp search-replace url.vechi url.nou, dar lucrurile se complică atunci când este un multisite și/sau are o bază de date imensă.

WP are o mulțime de string-uri serializate în baza de date, deci nu e o soluție atât de simplă să faci un search/replace în dump-ul sql. Prin urmare, vom folosi wp-cli. Pentru că sunt pe Windows, vom folosi PowerShell.

Cum ne interesează ca, în primul rând, să avem o copie funcțională pe local, nu vrem neapărat să înlocuim toate string-urile. Prin urmare, putem sări anumite tabele mai puțin importante. Treaba asta nu reprezintă o problemă foarte mare la o bază de date mică, dar la o DB măricică operațiile de search-replace pot dura ore. (am un multi-site cu aproape 20 de sub-site-uri, DB bate spre 20Gb, am încercat să înlocuiesc toate string-urile și după 30h încă nu terminase…)

Salvezi codul de mai jos într-un fișier, să-i zicem migrate.ps1, și ajustezi primele linii:

  • $wpPath este directorul în care este instanța de WP. Dacă este în directorul din care rulezi scriptul de mai jos, un . este suficient.
  • $network_sites este un array de forma "site vechi" => "site nou". Este important să avem // la început pentru a evita înlocuirile în subdomenii, de exemplu. Dacă site-urile au www în față, adaugi și aia.
  • $primarySiteURL este site-ul principal
  • $tables_to_skip sunt tabelele în care nu vrei să se facă înlocuirile. De cele mai multe ori este safe să sari peste astea (și peste altele, dar astea sunt cele mai mari).
$wpPath = '.'

$network_sites = @{
    "//live-site.url" = "//local-site.url";
    "//subdomain.live-site.url" = "//subdomain.local-site.url";
}

$primarySiteURL = $network_sites["live-site.url"]

$tables_to_skip = "$($dbPrefix)posts,$($dbPrefix)postmeta,'$($dbPrefix)*_posts','$($dbPrefix)*_postmeta','$($dbPrefix)nf3_*','$($dbPrefix)*_nf3_*'"

Să reflecte necesitățile (e.g. poate ai totuși nevoie să înlocuiești datele în postmeta`

Adițional, ajustezi comenzile specifice plugin-urilor tale: elementor, wpml, ce mai ai tu. La sfârșit rulezi scriptul din terminal: ./migrate.ps1.

$wpPath = '.'

$network_sites = @{
    "//live-site.url" = "//local-site.url";
    "//subdomain.live-site.url" = "//subdomain.local-site.url";
}

$primarySiteURL = $network_sites["live-site.url"]

$dbPrefix=$(wp config get table_prefix --path=$wpPath)
$tables_to_skip = "$($dbPrefix)posts,$($dbPrefix)postmeta,'$($dbPrefix)*_posts','$($dbPrefix)*_postmeta','$($dbPrefix)nf3_*','$($dbPrefix)*_nf3_*'"

$network_sites.GetEnumerator() | ForEach-Object {
    $old_site_url = $_.Key
    $new_site_url = $_.Value

    Invoke-Expression  "wp db query ""UPDATE $($dbPrefix)blogs SET domain = '$new_site_url' WHERE domain = '$old_site_url';""  --path=""$wpPath"""

    $old_site_url = "https://$old_site_url"
    $new_site_url = "https://$new_site_url"

    $wp_cmd = "wp search-replace $old_site_url $new_site_url --path=""$wpPath"" --skip-tables=$tables_to_skip"

    echo "Replacing strings in $old_site_url site"
    Invoke-Expression "$wp_cmd --url=$new_site_url"

    echo "Replacing strings across network"
    Invoke-Expression "$wp_cmd --network"

#   echo "Replacing Elementor URLs $old_site_url -> $new_site_url"
#    wp elementor replace_urls $old_site_url $new_site_url --path="$wpPath"

#    echo "Clear WPML cache"
#    wp wpml clear-cache --url=$new_site_url --path="$wpPath"

    echo "Delete transients & WP Cache"
#    wp rocket clean --confirm --url=$new_site_url --path="$wpPath"
    wp transient delete --all --url=$new_site_url --path="$wpPath"
    wp cache flush --url=$new_site_url --path="$wpPath"
}

# echo "Flush Elementor Cache & CSS"
# wp elementor library sync --network --allow-root  --path="$wpPath"
# wp elementor flush_css --network --allow-root  --path="$wpPath"

# echo "Clear WPML cache"
# wp wpml clear-cache --network --allow-root  --path="$wpPath"

echo "Delete transients & WP Cache"

wp transient delete --all --network --allow-root  --path="$wpPath"
wp cache flush --network --allow-root  --path="$wpPath"

wp network meta set 1 siteurl "https://{$primarySiteURL}/"

Bonus: execută o comandă pe toate sub-site-urile

Uneori este nevoie să execuți o comandă în wp-cli pe toate site-urile. Faci un fișiere wpms.ps1, îl plasezi în PATH și pui în el:

 $allArgs = $PsBoundParameters.Values + $args

wp site list --field=url | ForEach-Object {
    echo "running wp $allArgs --url=$_"
    Invoke-Expression "wp $allArgs --url=$_"
}

Actualizarea plugin-urilor WordPress și versionarea acestora

Deși sunt adeptul ideii de a nu ține în Git fișierele care nu-mi aparțin: plugin-uri, fișierele din core etc, sunt unele situații în care este nevoie și de asta.

Prin urmare, nu am acordat prea multă atenție acestui mod de lucru: când e vorba de actualizări disponibile, facem actualizare la tot, trântim un commit cu ce plugin-uri s-au actualizat și aia e.

Doar că abordarea asta nu e cea mai potrivită, după cum am aflat recent: succes în a face un git bisect

Și mi-am dat seama că am la dispoziție o nouă jucărie: PowerShell!

function Wp-Plugins-Update() {
     $plugins = $(wp plugin list --update=available --field=name)

     foreach ($plugin in $plugins) {
        wp plugin update $plugin 
        & git add -Af "wp-content/plugins/$plugin"  --quiet
        & git commit -m "update plugin: $plugin"  --quiet
     }
}

Definești o funcție în %USERPROFILE%\Documents\PowerShell\profile.ps1 și… cam atât.

Execuți Wp-Plugins-Update (din PowerShell) în directorul în care ai instalat WP și îți va actualiza frumușel fiecare plugin. Apoi, pentru fiecare plugin va face un commit.

Cu puțină îndemânare, codul poate fi rescris pentru Bash.

WordPress menus are lost on server migration!

I had this issue for a very long time: a live server with a bunch of menus was allright. Trying to migrate the DB locally (for syncing), usually ended up in a mess, because menus were gone. No matter what tools I was usings, be it mysqldump, migrate db or anything else, menus were GONE! 

Worst part? This only happened only on some sites. On the bright side, I didn’t needed to make this sync too often so wasn’t that bad to do it manually, so I didn’t worry too much. 

Because I didn’t find any patterns, I assumed that is somehow related to a path conversion (given that I’m using a Windows machine).

I was wrong. Partially. Not really. But ignorance is bliss, right?

So fast forward few years. Today. I have this client with a huge site. HUGE. There are a bunch of menus. A lot of specific page menus. There are about 30 to 40 menus. Syncing those manually? Totally not an option! 

I started to dig into WP table structure. Dumping databases in various stages, then diff the whole db see what changes (as a side note, this approach looks pretty intriguing!).

So I managed to pinpoint the place where the menu locations are kept:

INSERT INTO `wp_options` VALUES (143,'theme_mods_MY_THEME_NAME','a:7:{i:0;b:0;s:18:\"nav_menu_locations\";a:4:{s|...

My very first though was: „wait a minute, I’m sure that serialization is messed up!”. Checking then double checking the serialized string and, sure enough, the serialization was correct. 

But then few lines above in the sql dump, I’ve noticed this:

INSERT INTO `wp_options` VALUES (110,'theme_mods_twentyseventeen','a:2

Yes! You see, the menus are stored as theme_mods and the theme is identified by… folder name!

And while on the remote server the theme folder was named MY_THEME_NAME, locally was… MY_THEME_NAME.org

Sure enough, If I ever used other theme modifications (custom styling, custom logo, widgets and so on), the pattern would had been more obvious.

TL;DR: use the same theme folder name on all servers.

Autoformatarea codului

Relativ recent am descoperit că pot face auto-formatarea codului la… commit. Da, știu, mind blowing 😀

Eu am nevoie de formatarea SCSS, JS, JSON și PHP. Folosesc întotdeauna composer câteva pachete node, deci am packages.json și composer.json mereu în proiect.  Prin urmare, folosim câteva pachete Node pentru a face treaba:

$ npm i --save-dev cross-env husky lint-staged prettier prettier-stylelint stylelint-scss

Husky instalează hooks de git necesare, lint-staged execută hooks pentru fișierele staged, cross-env permite setarea de variabile. Apoi, adăugăm în package.json:

{
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },

  "lint-staged": {
    "*.{js,jsx}": [ "prettier --write", "git add" ],
    "*.{json}": [ "prettier --write --parser=json", "git add" ],
    "*.{scss,sass}": [ "prettier-stylelint --quiet --write", "git add" ],
    "*.{php,php_cs}": [ "php -l", "cross-env PHP_CS_FIXER_FUTURE_MODE=1 php-cs-fixer fix --config=.php_cs", "git add" ]
  }
}

Apoi avem fișierele de config:

// .prettierrc
{
	"useTabs": true,
	"semi": true,
	"singleQuote": true,
	"trailingComma": "all",
	"bracketSpacing": true,
	"jsxBracketSameLine": true,
	"arrowParens": "always"
}

// .stylelintrc
{
    "plugins": [
        "stylelint-scss",
    ],
    "rules": {
        "indentation": 2,
        "string-quotes": "single",
        "color-no-invalid-hex": true,
        "function-parentheses-space-inside": "always",
        "media-feature-parentheses-space-inside": "always",
        "selector-pseudo-class-parentheses-space-inside": "always",
        "max-empty-lines": 2,
        "scss/at-function-parentheses-space-before": "always"
    }
}

Pentru formatarea codului PHP avem nevoie să instalăm un pachet global:

$ composer global require friendsofphp/php-cs-fixer
<?php 

//.php_cs

return PhpCsFixer\Config::create()
  ->setRiskyAllowed(true)
  ->setRules(
	[
		'@Symfony' => true,
		'@Symfony:risky' => true,
		'@PHP71Migration' => true,
		'braces' => true,
		'array_indentation' => true,
		'array_syntax' => ['syntax' => 'short'],
		'dir_constant' => true,
		'heredoc_to_nowdoc' => true,
		'linebreak_after_opening_tag' => true,
		'modernize_types_casting' => true,
		'multiline_whitespace_before_semicolons' => true,
		'no_unreachable_default_argument_value' => true,
		'no_useless_else' => true,
		'no_useless_return' => true,
		'ordered_class_elements' => true,
		'ordered_imports' => true,
		'phpdoc_add_missing_param_annotation' => ['only_untyped' => false],
		'phpdoc_order' => true,
		'doctrine_annotation_braces' => true,
		'doctrine_annotation_indentation' => true,
		'doctrine_annotation_spaces' => true,
		'psr4' => true,
		'no_php4_constructor' => true,
		'no_short_echo_tag' => true,
		'semicolon_after_instruction' => true,
		'align_multiline_comment' => true,
		'doctrine_annotation_array_assignment' => true,
		'general_phpdoc_annotation_remove' => ['annotations' => ['author', 'package']],
		'list_syntax' => ['syntax' => 'short'],
		'phpdoc_types_order' => ['null_adjustment' => 'always_last'],
		'single_line_comment_style' => true,
	]
  )
  ->setCacheFile(__DIR__.'/.php_cs.cache')
  ->setIndent("\t")
  ->setFinder(
	PhpCsFixer\Finder::create()
	  ->in(__DIR__)
  );

Și cam asta e. De fiecare dată când se face commit, autoformatarea se aplică pe fișierul modificat. Asta înseamnă și un timp mai mare de commit, dar până acum nu am observat un delay mai mare de 5-10 secunde.

Evident, regulile sunt ajustabile, fiecare formatter având propriile opțiuni.

Learning React: Atributul key={}

Mă tot gândeam: cum ar fi să scriu câte un articol despre lucrurile de care m-am lovit învățând React? Prin urmare, ăsta este primul post. Dacă or mai veni altele sau nu… vedem.

Atunci când randezi un element într-un loop (map, forEach), este recomandat să îi adaugi acelui element un atribut numit key. Acesta nu va fi trimis în props copiilor și este folosit exclusiv de React pentru diverse chestii (gen update).

Greșeala nr. 1: index key

Prima greșeală făcută de mine a fost să folosesc index-ul din loop pentru key. Ceva de genul:

lista.map((el, index) => <div key={index} />)

Rezultatul? Când actualizam props… unele elemente randate rămâneau neschimbate. Câteva ore mai târziu m-am prins și de ce: cheile ar trebui să fie unice! Prin urmare, am purces să fac….

Greșeala nr. 2: random key

A doua greșeală a fost să presupun că un key random este în regulă:

lista.map((el, index) => <div key={index + Date.now()} />)

Chiar dacă merge, vor fi probleme de performanță. De ce? Pentru că schimbarea unui singur element din listă va duce la re-randarea tuturor elementelor. Ouch!

Sigur, la 10-20 elemente nu ar trebui să fie probleme, dar la 1-200?

Greșeala nr. 3: prefix

La un moment dat am făcut ceva greșit și am rămas cu impresia că aceste key trebuie să fie unice în aplicație. Lucru cât se poate de fals, ele ar trebui să fie unice în părinte.

Dar până să mă prind de chestia asta, am pus mereu un prefix. Aveam aplicația plină de key={`users-${user.id}`}. Nu neapărat rău, dar inutil de verbose.

Cum ar trebui sa fie de fapt?

Dacă citeam cu atenție documentația, aflam că, în cazul ideal, te folosești de id-ul fiecărui element. Pentru că ghici ce? Cel mai probabil elementele alea vin din DB unde … au un ID! Abia în cazul în care nu au un ID te folosești de index!

Bonus: map, forEach, reduce, filter

Indiferent dacă ai sau nu de gând să folosești React, îți recomand două lucruri:

  1. Migrează pe ES6. Sunt o grămadă de lucruri care îți fac viața mai ușoară: spread operator, destructuring, arrow functions, let/const, module etc. Chiar dacă adaugă un pas de compilare, merită efortul.
  2. Chiar dacă te încăpățânezi să nu o faci, încearcă să înțelegi cum se folosesc toate funcțiile de manipulare arrays. Spre deosebire de PHP, folosirea funcțiilor native îți va aduce un plus de performanță. În plus, arată și mai bine 🙂 Iată două exemple:
const invoiceNumbers = invoices.map(invoice => invoice.number)

// sau

var invoiceNumbers = [];
for (var i = 0; i < invoices.length; i++) {
  invoiceNumbers.push(invoices[i].number)
}
const invoicesGreaterThan = invoices.filter(invoice => invoice.value > 1000)

// sau

var invoicesGreaterThan = [];

for (var i = 0; i < invoices.length; i++) {
  if (invoices[i].value > 1000) {
    invoicesGreaterThan.push(invoices[i])
  }
}

Un mod simplu de a implementa „Open-Closed principle” în WordPress

OCP este unul dintre principiile SOLID despre care am mai scris și aici. Vreau să-ți arăt o modalitate simplă prin care poți implementa asta chiar dacă nu ești fan OOP: folosind filtre! Sigur, nu este foarte încapsulată toată povestea, dar cred că este un compromis care merită făcut în majoritatea cazurilor.

La proiectul la care lucrez zilele astea am o chestie care m-a făcut să mă gândesc la treaba asta. Am o listă de vreo 30-40 meta-fields, iar la câteva vreau să aplic câteva transformări, în funcție de tipul lor (e.g. dată, formatare text, galerie etc).

Prima soluție la care te gândești este, probabil, un switch/case:

switch( $key ) {
  case 'description':
    $value = wpautop($value);
    break;
  case 'date':
    $value = \DateTime::createFromFormat(/*...*/);
    break;
  case 'gallery':
    $value = formatMyGalleryField($content);
    break;
  // .....
}

Vezi deja unde ne îndreptăm: pentru fiecare caz în parte avem de adăugat o condiție. Lucrurile încep să se complice și mai mult când vrem să aplicăm două sau mai multe transformări sau când vrem o ordine diferită a transformărilor în funcție de $key.

Filtre!

Toată condiția de mai sus s-ar putea rescrie mai simplu

$value = apply_filters("ntz/transformations/key={$key}", $value, $key ... )

Unul din lucrurile care cred că sunt prea puțin folosite în lumea WP este posibilitatea de a folosi orice caractere în numele filtrelor, motiv pentru care vedem filtre ceva mai greu de citit (decât ar putea fi). De ce ai folosi underscore în loc de slash?

Simplu, nu?

Următorul pas este să adaugi toate filtrele de care ai nevoie:

add_filter('ntz/transformation/key=description', 'wpautop');
add_filter('ntz/transformation/key=date', 'myDateFormatter');
// ....

Vrei să adaugi mai multe transformări pentru același filtru? Nici o problemă!

add_filter('ntz/transformation/key=description', 'myDateFormatter');
add_filter('ntz/transformation/key=description', 'wpautop');
// ....

Ordinea nici măcar nu e foarte importantă, având în vedere că al treila parametru poate fi un integer ce reprezintă ordinea (sau prioritatea) de execuție.

img src

Using TGMPA with GitLab’s CI artifacts

TLDR: set some headers, see below.

TGMPA

TGMPA is a WordPress plugin that helps you to manage your theme dependencies. Just imagine your users experience: instead of ask them to check a README doc that recommends installing various plugins (and no way of enforcing them to do so), this panel will show up everywhere they go:

A basic config would look like this:


add_action('tgmpa_register', function () {
  // if the plugin is not hosted on WP, add * at the begining of the URL
  $plugins = [
    "simple-taxonomy-ordering" => "https://downloads.wordpress.org/plugin/simple-taxonomy-ordering.1.2.4.zip",
  ];

  $required_plugins = [];

  $config = [
    'is_automatic' => true,
    'dismissable' => false,
  ];

  foreach ($plugins as $plugin_name => $plugin_url) {
    $required_plugins[$plugin_name] = [
      'name' => $plugin_name,
      'slug' => $plugin_name,
      'required' => true,
      'force_activation' => true,
    ];

    if (substr($plugin_url, 0, 1) == '*') { // just a trickery to allow specifying a ZIP url
      $required_plugins[$plugin_name]['source'] = substr($plugin_url, 1);
    } else {
      $required_plugins[$plugin_name]['external_url'] = $plugin_url;
    }
  }

  tgmpa($required_plugins, $config);
});

GitLab CI

On almost evey project, I’m using composer for various PHP deps, nodejs for various JS deps and a few Grunt or Gulp tasks. Obviously enough, I don’t want to keep in my repo a huuuge vendor or node_modules folder, so I gitignore these suckers. But… this means that my code is NOT ready to use.

One of the thing I really, really like on GitLab is that I can have a build process run everytime I push some code. Why this is helpful? Well, GitLab CI deals with all these issues and I have the package ready to download from this address (this is called an artifact and is the result of the CI build process):

https://gitlab.com/iamntz/my-plugin-name/-/jobs/artifacts/master/download?job=my_plugin_name

Do you notice the job param? Is the same as the YAML key below!

However, what is the problem? You can’t download this package dirrectly; you must do this either from their UI or via an arcane curl command, that sets a http header:

curl -L --header "PRIVATE-TOKEN: XXYYZZ" "https://gitlab.com/iamntz/my-plugin-name/-/jobs/artifacts/master/download?job=my_plugin_name" -o "my-plugin-name.zip"

You can create a private token on this page. Just create one that only have read_registry scope enabled and set to not expire. Since this token can represent a security issue, please consider creating a dumb user to whom you provide only a read access and add that user to your project (instead of using your token).

.gitlab-ci.yml

image: tetraweb/php:7.1

before_script:
  - docker-php-ext-enable zip
  - php -r "copy('https://getcomposer.org/installer', 'composer-setup.php');"
  - php composer-setup.php
  - php -r "unlink('composer-setup.php');"
  - php composer.phar install --no-dev -o --prefer-dist # <<< add more tasks below
  - mkdir -p my-plugin-name
  - rsync -av --exclude-from='deploy-exclude-files.txt' . my-plugin-name # <<< this is where you'll have all the files you need to be deployed

my_plugin_name: # <<< this key is important and can be anything
  retry: 2
  cache: # <<< this block is optional, but it will improve build time 
  untracked: true 
  key: ${CI_BUILD_REF_NAME} 
  paths: 
    - node_modules/ 
    - vendor/ 
  artifacts: 
    name: "${CI_BUILD_NAME}_${CI_BUILD_REF_NAME}" 
    untracked: false 
    paths: - my-plugin-name/ 
  script: - echo 'Deploying!' 

In case you wonder, deploy-exclude-files.txt is a file that contains all files and folder you want to be excluded from your final ZIP file. It has one file/folder name per line and that’s all

Once the build process is done, as long as you are authentificated to gitlab, you will be able to access it on `https://gitlab.com/iamntz/my-plugin-name/-/jobs/artifacts/master/download?job=my_plugin_name` url.


Best of both worlds

But a problem arise: how can you specify that build artifact URL in your tgmpa config? Well, that’s easier than you’d expect: just set a header! If you’re digging into TGMPA code, you’ll notice that it uses WP_Http class to download external fiels. This means that… you can set some options!

add_filter('http_request_args', function ($r, $url) { 
  if (preg_match('/gitlab.com\/iamntz/', $url)) { 
    $r['headers']['PRIVATE-TOKEN'] = 'XXYYZZ'; 
  } 
  return $r; 
}, 10, 2); 

After that, you modify your tgmpa config to look like this (notice the * before the URL!):

$plugins = [ 
  "simple-taxonomy-ordering" => "https://downloads.wordpress.org/plugin/simple-taxonomy-ordering.1.2.4.zip",
  "my_plugin_name" => "*https://gitlab.com/iamntz/my-plugin-name/-/jobs/artifacts/master/download?job=my_plugin_name"
];

Yup, is that simple!

However, you may want to pay some attention to the preg_match('/gitlab.com\/iamntz/', $url) pattern and be as specific as you can (e.g. it may conflicts with GitLab’s releases feature). Just play around a little. 😉

windows apple dropbox facebook twitter