18 Maj 2019

new Map jak i do czego używać.

Map jest prostym obiektem mapującym klucze na wartości – definicja.
Obiekt Map ma kilka właściwości:

Map.prototype​.clear()
Map.prototype​.delete()
Map.prototype​.entries()
Map.prototype​.for​Each()
Map.prototype​.get()
Map.prototype​.has()
Map.prototype​.keys()
Map.prototype​.set()
Map.prototype​.values()

Opiszę tylko kilka z tych właściwości.
Powiedzmy że mamy prosty obiekt i chciałbym sprawdzić ile jest elementów w obiekcie.
Poniżej ten obiekt.

const size = {
  desktop: 992,
  tablet: 768,
  phone: 576
}
Czytaj dalej …
15 Maj 2019

IntersectionObserver czyli lazy loading

IntersectionObserver – w prosty sposób można opisać że jest to API za pomocą którego można wywołać zdarzenie, gdy element zniknie lub pojawi się w obrębie naszego ekranu, a jeszcze prościej na przykładzie np. galerii zdjęć. Wczytać tylko tyle zdjęcia które pojawią się w polu widzenia naszego okna.

Czyli nie ładujemy powiedzmy 100 zdjęć tylko doczytujemy pojedyncze zdjęcia przy skrolowaniu. Do tej pory wykorzystywaliśmy pluginy które nam to ułatwiały.

IntersectionObserver można wykorzystać nie tylko do wczytywania zdjęć, ale np. filmów, treści wszystko to dzieje się asynchronicznie.

Np. film włączony na stronie jeżeli zaczniemy przewijać i zniknie nam z „widoku” zostanie zastopowane odtwarzanie. Jeżeli ponownie się pojawi zostaje wznowione jego odtwarzanie.

Niestety jest jeden problem, w związku z tym że jest to nowa technologia nie jest obsługiwana przez starsze przeglądarki. Zerknijcie na [ Caniuse ] Sami sprawdźcie.

Żyjemy w czasach polyfill i na to również jest, działa nawet w IE7 😉 [ github ]

Dobra zaczynamy, najpierw mamy listę zwykłych obrazków a do tego możemy również wykorzystać picture

<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
<img width="400" height="400" data-src="https://place-hold.it/400x400/15252D/fff"/>
...
Czytaj dalej …
8 Maj 2019

Prosty hamburger

Dzisiaj coś prostego, czyli hamburger menu.

Najpierw html:

<button class="hamburger">
  <div class="hamburger-center"></div>
</button>

Następnie style. Tutaj wykorzystam jak zwykle scss bo niech ktoś mi powie czy jest jeszcze jakaś osoba na Świecie nie korzystająca z preprocesorów css 😉

.hamburger {
  position: relative;
  padding: 35px;
  background-color: #00aeff;
  border: 1px solid lighten(#000, 90%);
  cursor: pointer;

  &.is-open {
    .hamburger-center {
      background-color: transparent;
      transition: background-color 0.25s ease-in;
    }

    &::before {
      transform: translateY(0) rotate(45deg);
      transition: transform 0.25s ease-in;
    }

    &::after {
      transform: translateY(0) rotate(-45deg);
      transition: transform 0.25s ease-in;
    }

  }

  .hamburger-center {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    background-color: #fff;
    left: 50%;
    top: 50%;
    transform: translate(-50%);
    transition: background-color 0.5s ease-in;
    z-index: 9999;
  }

  &::before,
  &::after {
    position: absolute;
    content: '';
    width: 40px;
    height: 3px;
    left: 15px;
    top: 50%;
    margin: auto;
    background-color: #fff;
    z-index: 9999;
  }

  &::before {
    transform: translateY(10px) rotate(0);
    transition: transform 0.25s ease-in;
  }

  &::after {
    transform: translateY(-10px) rotate(0);
    transition: transform 0.25s ease-in;
  }
}
Czytaj dalej …
2 Maj 2019

Dodanie shadow podczas scroll – overflow

Podstawowe założenia:
1. Cień z prawej strony, jeżeli scroll jest na pozycji skrajnej lewej.

2. Cień z lewej strony, jeżeli scroll jest na pozycji skrajnej prawej.

3. Cień po lewej jak i prawej stronie równocześnie, gdy skroll się porusza 😉

Najpierw html

Budujemy div w którym dodajemy nasze elementy.

<div id="scrollbox">
  <ul id="myDIV">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
    <li>9</li>
    <li>10</li>
    <li>11</li>
    <li>12</li>
    <li>13</li>
    <li>14</li>
    <li>15</li>
    <li>16</li>
    <li>17</li>
    <li>18</li>
    <li>19</li>
    <li>20</li>
  </ul>
</div>

Cień w za pomocą styli

Teraz nasz styl. Za jego pomocą wszystkie elementy li są w jednej linii.

#scrollbox {
  overflow-x: auto;
  width: 500px;
  max-height: 220px;
  margin: 50px auto;
}

#scrollbox ul {
  display: flex;
  flex-direction: row;
  white-space: nowrap;
  min-width: 100vw;
  height: 130px;
  margin: 0;
  padding: 0;
  list-style: none
}

#scrollbox ul li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-width: 130px;
  border: 1px solid red;
  margin: 0 2px
}
Czytaj dalej …
18 Kwi 2019

Kolumny w css oraz szukanie w html

Powiedzmy że mamy bardzo długą listę linków. Chciałbym aby ta lista łamała się na 2, 3 a może więcej kolumn. W naszym przykładzie lista będzie składać się z 20 elementów.

Taką listę można uzyskać przez emmet aby nie klepać tego samodzielnie wystarczy wpisać ul#ul>li{text $}*20

<ul id="ul">
  <li>text 1</li>
  <li>text 2</li>
  <li>text 3</li>
  <li>text 4</li>
  <li>text 5</li>
  <li>text 6</li>
  <li>text 7</li>
  <li>text 8</li>
  <li>text 9</li>
  <li>text 10</li>
  ...
</ul>

Chciałby aby ta lista została podzielona na dwie kolumny. Do tego użyjemy column-count Które jest wpierane nawet przez IE od wersji 10
Oczywiście też trochę upiększymy wygląd naszej listy.

ul {
  border: 1px solid #cacaca;
  list-style: none;
  max-width: 50%;
  margin: 0;
  padding: 0;
  column-count: 2;
  column-width: 50%;
  padding: 10px;
  margin: auto;
}

ul li {
  padding: 10px;
  margin-bottom: 2px;
}

ul li:nth-child(even) {
  background-color: #f0f0f0;
}
Czytaj dalej …
1 2 3 … 151