8 Maj 2019

Prosty hamburger w js

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;
  }
}
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
}
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;
}
14 Kwi 2019

Optymalizacja wordpress – pobranie js i css z hash

W poście poniżej opisałem jak usunąć „?ver” ze statycznych linków – [ tutaj ]
Po tej zmianie pojawił się problem z „cashowaniem” plików. Rozwiązanie jest dość proste.

W związku z tym że do generowania plików użyty został „gulp” oraz biblioteka „gulp-rev” za pomącą której do nazw plików dodany jest hash – style-ecf06381de.css

Problem jaki napotykamy to jak wczytać pliki css i js w wordpressie, które za każdym razem gdy zmieniamy coś we frontendzie mają inną nazwę.
Na potrzeby tego bloga stworzyłem poniższą funkcję.

/**
 * match file name
 */

function kodywig_matchFile($partOfName, $folder)
{
  $handler = get_template_directory() . '/assets/' . $folder;
    $openHandler = opendir($handler);
    while ($file = readdir($openHandler)) {
      if ($file !== '.' && $file !== '..') {
        if (preg_match("/^" . $partOfName . "\w+.(" . $folder . ")/i", $file, $name)) {
      return $name[0];
    }
      }
    }
    closedir($openHandler);
}

Do powyższej funkcji przekazywane są dwa parametry, pierwszy $partOfName czyli cześć nazwy. Drugi parametr $folder czyli gdzie znajduje się nasz plik css|js

Najpierw budujemy ścieżkę do folderu, później w pętli wyciągamy nazwę pliku przez preg_match i zwracamy nazwę z dopasowania.

Na przykładzie tego pliku style-ecf06381de.css chcemy go dodać do weodpressa.
W miejscu w którym dodajemy js czy css do strony modyfikujemy wpis na poniższy.

wp_enqueue_style('kodywig-main', get_template_directory_uri() . '/assets/css/' . kodywig_matchFile('style-', 'css'), null, KODYWIG_THEME_VERSION);

W ten sam sposób dodałem krytyczne css w moim wypadku „bootstrap” do head strony jako inline.

/**
 * adding boostrap style inline
 */

function kodywig_inline_css()
{
  $cssFile = kodywig_matchFile("bootstrap-", "css");
  $critical_css = file_get_contents(get_template_directory_uri() . '/assets/css/' . $cssFile);
  echo '<style>' . $critical_css . '</style>';
}
add_action('wp_head', 'kodywig_inline_css', 0);
14 Kwi 2019

Optymalizacja wordpress – usunięcie „query stirngs” ze statycznych linków

Następny kod do przyspieszenia wordpressa.
Kod umieszczamy w pliku z funkcjami np. w functions.php

Polecam sprawdzić stronę przed oraz po modyfikacji na [ GTmetrix ] oraz [ Google pagespeed ]

function kodywig_remove_css_js_ver($src)
{
  if (strpos($src, '?ver='))
    $src = remove_query_arg('ver', $src);
  return $src;
}
add_filter('style_loader_src', 'kodywig_remove_css_js_ver', 10, 2);
add_filter('script_loader_src', 'kodywig_remove_css_js_ver', 10, 2);