10 mar 2022

#shorts - wykrycie za pomocą css czy ekran ma funkcje dotykowe czy nie

Dość często potrzebujemy aby style były widoczne lub inaczej się zachowaywały/wyglądały gdy użytkownik używa strony na desktopie a inaczej na urządzeniu mobilnym "dotykowym" bez urządzenia sterującego np. myszy.

Do detekcji typu urządzenia możemy użyć "media queries".

Najpierw przyglądnijmy się @media (hover: hover)
W poniższym przykładzie jedynie urządzenia które mają możliwość najechania kursorem na element zmienią jego background. Oczywiście ten przykład jest mało życiowy, ale wyobraź sobie że możemy ukryć/pokazać element w zależności od urządzenia i nie potrzebujemy do tego js.

<a href="#">Link który powinien być podświetlić</a>
@media (hover: hover) {
  a:hover {
    background: red;
  }
}
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.

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",
  ...
},
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.

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.