JavaScript - Kody, triki, sztuczki

18 lut 2022

#shorts - utworzenie dodatkowych miejsc w kontrolce sterującej

W leaflet domyślnie mamy dostępne cztery miejsca (cztery rogi mapy) w które możemy wstawić własne elementy lub zmienić pozycję już istniejących elementów np. zoom in/out.
Te miejsca to oczywiście [topleft, topright, bottomleft, bottomright], a co jeżeli chcemy stawić dodatkowy element ale na górze strony i na środku.

Oczywiście możemy to zrobić na wiele sposobów, np. dodając div do strony i przez position abolute i z-index wyśrodkować dany element. Wstrzyknąć element do leaflet-control-container.

Czytaj dalej

10 lut 2022

#shorts - szybki update wersji biblioteki we wszystkich plikach

Mam zawsze problem z tym, że zapominam zmienić wersję biblioteki we wszystkich miejscach w których występuje wzmianka o niej.
Dopiero na koniec gdy wszystko już zakomitowałem na githuba okazuje się że czegoś znowu nie zmieniłem 😉

Postanowiłem temu zapobiec i stworzyłem sobie mały skrypt - version.js

Skrypt na wrzucam do foldera scripts w głównym folderze projektu. I za każdym razem wywołuję przez dodanie do package.json w sekcji script przy budowaniu produkcyjnym.

"scripts": {
  ...
  "prod": "yarn build && yarn sass:prod && yarn lib:version",
  "lib:version": "node ./scripts/version.js",
  ...
},

Czytaj dalej

2 lut 2022

#shorts - tscofig.json różny target

Command Line

W związku z tym że 11 czerwca 2022 roku Internet Explorer przestanie być wspierany należy się jakoś na tą okoliczność przygotować 😉

Więc jak w projekcie typescript generować biblioteki z ustawionymi różnymi targetami - "target": "ES5" oraz "target": "ES6"
Z pomocą przychodzi nam parametr który zwie się extends

Musimy stworzyć trzy pliki tsconfig. Podstawowy tsconfig.json:

{
  "compilerOptions": {
    "module": "ESNext",
    "importHelpers": true,
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": false,
    "forceConsistentCasingInFileNames": true
  },
  "include": [
    "sources/js/**/*"
  ],
  "exclude": [
    "node_modules"
  ]
}

Jak widać w powyższym kodzie brak jest zmiennej target.

Czytaj dalej

15 wrz 2021

#shorts - zmniejsz/zwiększ font w edytorze wp

Wpis ten jest tak naprawdę uzupełnieniem wpisu dodanie niestandardowych przycisków za pomocą quicktag w wordpress

Zmiana fontu w panelu administracyjnym wp

Niestety ale ten edytor quicktag jest bardzo prymitywny i jak dla mnie ma zbyt mały font ;). Nadszedł ten dzień w którym stwierdziłem że nie będę powiększał okna za pomocą ctrl + +/- również powiększamy stronę w podglądzie - "to głupiego robota" ;).
W związku z tym powstał kod, który w skrócie, zmniejsza i powiększa font ale tylko w samym centrum edytora, dodaje dwa przyciski [A+, A-], zapisuje każde kliknięcie w localStorage tak aby pamiętać wielkość fonta po zamknięciu okna a także obok buttona "Dodaj medium" dokleja informację jaka wielkość fontu jest obecnie ustawiona.

Czytaj dalej