Autor: Grzesiek

8 gru 2018

Mapowanie kolorów scss

Zaczynamy od deklaracji kolorów które będą nam potrzebne w projekcie.

$colors: (
  grey: (
    base: #4d4e55,
    light: #c8c8ce
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);

Oczywiście nic nie stoi na przeszkodzie aby modyfikować naszą deklarację dodając następne nazwy kolorów light, lighter, lightest, dark, darker, darkest
Mniej więcej wyglądało by tak.

$colors: (
  grey: (
    base: #4d4e55,
    light: xxxx,
    lighter: xxxx,
    lightest: xxxx,
    dark: xxxx
    darker: xxxx
    darkest: xxxx
  ),
  yellow: (
    base: #ffae00
  ),
  green: (
    base: #00ff15
  )
);
Czytaj dalej
8 gru 2018

create-react-app i scss

Aby umożliwić korzystanie z scss w create-react-app robię podstawowe rzeczy. Najpierw zerknij w package.json na razie jest minimalistycznie teraz z konsoli uruchamiam npm run eject

Potrzebnych nam są jeszcze trzy biblioteki node-sass, sass-loader oraz resolve-url-loader.
Ja używam yarna czyli uruchamiam

yarn add -D sass-loader node-sass resolve-url-loader

lub dla tych co używają NPM

npm i -D sass-loader node-sass resolve-url-loader
Czytaj dalej
20 wrz 2018

Mini sass grid

// nowy sass use math
@use 'sass:math';

.row {
    display: flex;
    flex-wrap: wrap;
}

$columns: 12;

@for $i from 1 through $columns {
    .col-#{$i} {
        // flex: 0 0 100% / $columns * $i;
        // nowy sass
        flex: 0 0 math.div(100%, $columns) * $i;
    }
    .col-offset-#{$i} {
        // margin-left: 100% / $columns * $i;
        // nowy sass
        margin-left: math.div(100%, $columns) * $i;
    }
}

// Responsive Breakpoints
[class^='col-'] {
    // Tablets
    @media (max-width: 768px) {
        flex-basis: 50%;
    }
    // Mobiles
    @media (max-width: 480px) {
        flex-basis: 100%;
    }
}
26 sie 2018

Docker + wordpress + phpmyadmin wersja Windows

docker + wordpress + windows
Nie opiszę tutaj wszystkiego związanego z dockerem bo jestem świerzynka w tym temacie oraz jest tego tyle że po prostu nie da się tego opisać bez przepisywania dokumentacji 😉
Będzie to tylko mały wycinek tego co jest mi potrzebne do frontentu z przykładem użycia WordPress, MySQL oraz phpMyAdmin na Windowsie.

Do czego można by użyć Dockera?

Powiedźmy że chcemy stworzyć aplikację składającą się właśnie z WordPress + MySQL + phpMyAdmin aby przygotować nowy theme czy plugin.
Wszystko to musimy zainstalować osobno na komputerze do tego PHP + apache2 lub użyć Xampp'a, ale co jeśli musielibyśmy użyć kilku wersji PHP 5.5 czy 5.6 i do tego MySQL również w kilku wersjach.

Normalnie czekało by nas bardzo długie konfigurowanie każdej instancji, odinstalowanie elementów i instalacja nowych oraz ich konfiguracja czyli jednym słowem koszmar.

Czytaj dalej
10 sie 2018

Gulp workflow: minimalizacja zdjęć i konwersja na webp

Kiedyś w zamierzchłych czasach używałem perla + lib ImageMagick do konwersji zdjęć, ale mamy XXI wiek i Node 😉
Od jakiegoś czasu zmienił się mój workflow dotyczący obróbki zdjęć na potrzeby stron internetowych.
Do tej pory używałem gulp-image, gulp-imagemin i wiele innych, ale zawsze coś było nie tak, zawsze czegoś brakowało.
Ostatnio używam takiego zapisu jak poniżej

<picture>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.webp" type="image/webp"/>
    <source class="img-responsive" srcset="./images/thumbnail/IMG_5600.jpg" type="image/jpeg"/>
    <img decoding="async" class="img-responsive" src="./images/thumbnail/IMG_5600.jpg" alt=""/>
</picture>

i potrzebowałem również webp, no i co następna biblioteka gulp-webp jest potrzebna 🙁
Mały research i okazało się że jest biblioteka sharp, która bardzo dobrze zastępuje ImageMagick więcej na tej stronie. Biblioteka ta jest w stanie zastąpić wszystko co do tej poru używałem.

Czytaj dalej
Copyright © | kodyWiG Theme