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
23 wrz 2021

#shorts - modal

modal
Dzisiaj będzie o tym jak najszybciej i najprościej zrobić warstwę modalną, a dokładnie taką która ma ładną animacje opacity gdy warstwa się pojawia jak i gdy znika.
Pierwsza część, np. kliknięcie na element oraz pojawienie się warstwy modalnej jest proste do wykonania. Mamy div na stronie który jest naszą warstwą ukrywaną przez display: none do niej jest również ustawione transition oraz opacity: 0. Kliknięcie w element powoduje dodanie klasy do body, która to klasa zmienia display na block a także opacity ustawi na 1. No i mamy ładną animację opacity.

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
10 wrz 2021

#shorts - instalowanie i update wordpress w docker-compose

Zaczynamy serię małych, krótkich wpisów. Coś na wzór yotube #shorts tylko że w wersji pisanej 😉

Tak jak tytuł sugeruje, dzisiaj będzie o wp na dokerze. Zazwyczaj gdy pracuję nad jakąś stroną staram się odzwierciedlić środowisko na którym ta strona będzie stała. Chodzi mi o to aby serwer, wersja czy baza oraz wszystkie dodatki były identyczne u mnie jak i na serwerze.

Czytaj dalej
Copyright © | kodyWiG Theme