forEach, filter, map, sort, reduce

Trochę operacji na tablicach 🙂

const employments = [
  { name: 'Andrzej', category: 'Finanse', start: 1982, end: 2017 },
  { name: 'Agnieszka', category: 'Sprzedaż', start: 1992, end: 2008 },
  { name: 'Mariola', category: 'Samochody', start: 1991, end: 2007 }
];

const digits = [23, 22, 10, 1, 5, 54, 25, 24, 21];

Chcemy pobrać imię pracownika.
Najpierw w starym stylu.

for (let i = 0; i < employments.length; i++) {
  console.log(employments[i].name); // Andrzej, Agnieszka, Mariola
}

forEach – teraz pobierzemy przez forEach

employments.forEach(function(employment) {
  console.log(employment.name);
});

Możemy to zrobić jeszcze szybciej prze ES6

employments.forEach(employment => {
  console.log(employment.name);
});

filter – użyjemy teraz filter aby pobrać liczbę 21 lub większą

Najpierw w starym stylu.

let digitNumber = [];
for(let i = 0; i < digits.length; i++) {
  if(digits[i] >= 21) {
    digitNumber.push(digits[i]);
  }
}

console.log(digitNumber); // 23, 22, 54, 25, 24, 21

Teraz krócej 🙂

const digitNumber = digits.filter(function(digit) {
  if(digit >= 21) {
    return true;
  }
});

console.log(digitNumber);

I jeszcze krócej.

const digitNumbers = digits.filter(digit => digit >= 21);

console.log(digitNumbers);

A może by tak wyszukać osoby po kategorii np. Technologie

const retailEmployments = employments.filter(function(employment) {
  if(employment.category === 'Samochody') {
    return true;
  }
});

console.log(retailEmployments); // { category: "Samochody", end: 2007, name: "Mariola", start: 1991 }

A może da się jeszcze szybciej

const retailEmployments = employments.filter(employment => employment.category === 'Samochody');

console.log(retailEmployments);
const eightiesEmployments = employments.filter(employment => (employment.start >= 1980 && employment.start < 1990));

console.log(eightiesEmployments); // { category: "Finanse", end: 2017, name: "Andrzej", start: 1982 }

map – użyjmy map
Utworzymy tablice imion.

const employmentsNames = employments.map(function(employment) {
  return employment.name;
});

console.log(employmentsNames); // Andrzej, Agnieszka, Mariola

Możemy połączyć to z template.

const testEmployments = employments.map(function(employment) {
  return `${employment.name} [${employment.start} - ${employment.end}]`;
});

console.log(testEmployments); // ["Andrzej [1982 - 2017]", "Agnieszka [1992 - 2008]", "Mariola [1991 - 2007]"]

Lub nawet krócej.

const testEmployments = employments.map(
  employment => `${employment.name} [${employment.start} - ${employment.end}]`
);

console.log(testEmployments);

Możemy wielokrotnie użyć map.

const testDigits = digits
  .map(digit => Math.sqrt(digit))
  .map(digit => digit * 3);

console.log(testDigits); // [14.387494569938157, 14.071247279470288, 9.486832980505138, 3, 6.708203932499369, 22.045407685048602, 15, 14.696938456699067, 13.74772708486752]

sort – teraz przechodzimy do sort

const sortEmployments = employments.sort(function(ec1, ec2) {
  if(ec1.start > ec2.start) {
    return 1;
  } else {
    return -1;
  }
});

console.log(sortEmployments);
/*
{
  category: "Finanse",
  end: 2017,
  name: "Andrzej",
  start: 1982
}, [object Object] {
  category: "Samochody",
  end: 2007,
  name: "Mariola",
  start: 1991
}, [object Object] {
  category: "Sprzedaż",
  end: 2008,
  name: "Agnieszka",
  start: 1992
}
*/

Wersja skrócona.

const sortEmployments = employments.sort((a, b) => (a.start > b.start ? 1 : -1));

console.log(sortEmployments);

reduce – użyjmy reduce

let digitSum = 0;
for(let i = 0; i < digits.length; i++) {
  digitSum += digits[i];
}

console.log(digitSum); // 185

Inna wersja reduce.

const digitSum = digits.reduce(function(total, digit) {
  return total + digit;
}, 0);

console.log(digitSum); // 185
const digitSum = digits.reduce((total, age) => total + age, 0);

console.log(digitSum); // 185

I na koniec łączenie wszystkich metod.

const combined = digits
 .map(digit => digit * 2)
 .filter(digit => digit >= 40)
 .sort((a, b) => a - b)
 .reduce((a, b) => a + b, 0);

console.log(combined); // 338

Template strings w Javascript ES6, ES2015

Ile razy człowiek się męczył aby zwykły formularz ze zmiennymi zapisać w js 😉
Z pokonaniem tego problemu sięgamy po template string. Używamy tego znaku (`) znajduje się on nad tabulatorem z angielskiego backtick, po naszemu odwrócony apostrof a zmienne umieszczamy w takiej formie ${zmienna}
Wszystko razem można zapisać `${zmienna}`

A teraz małe przykłady.

Powiedzmy że mamy sobie obiekt.

var person = {
    name: 'Greg',
    job: 'front-end',
    city: 'Warszawa'
}

A html to:

var html =
'<div class="person">'+
    '<h1>' + person.name + '</h1>' +
    '<h2>' + person.job + ' ' + person.city + '</h2>' +
'</div>';

A nie prościej tak?:

const html = `
    <div class="person">
        <h1>${person.name}</h1>
        <h2>${person.job} ${person.city}</h2>
    </div>
`;

Oczywiście można te zmienne mnożyć, dodawać odejmować itd. 🙂

const x = 1;
const y = 2;
const result = `${ x + y }`;

console.log(result); // 1 + 2 = 3

Taki zapis jak pokazałem niesamowicie skraca nam pracę i mniej błędów popełniamy, ale jest jeden problem i to poważny a zwie się on IE (Internet Explorer) 🙂
Niestety nasz kod musi być jeszcze przez jakiś czas wstecz kompatybilny ze starymi przeglądarkami, dlatego w swojej pracy używam gulp, webpacka a czasami je również łączę.

Małe wytłumaczenie:
1. Gulp to, oparty o platformę Node.js, system do automatyzacji pracy. Głównym jego zadaniem jest więc zautomatyzowanie wielu czynności, jakie musi wykonać programista podczas swojej pracy. Przykład użycia – zerknij tutaj
2. Webpack to narzędzie, które rozwiązuje problem dzielenia kodu na moduły i pozwala łatwo zarządzać zależnościami występującymi między nimi.

Więcej poszukajcie sobie w google bo naprawdę warto znać te technologie.

Wracając do naszego problemu z IE i nie tylko, ja użyłem biblioteki gulp-bable
Najpierw instalacja z linii komend biblioteki gulp-babel

npm install --save-dev gulp-babel babel-core babel-preset-es2015

Teraz dodajemy do gulpfile.js naszą bibliotekę oraz task

const gulp = require('gulp');
const babel = require('gulp-babel');


gulp.task('js', function () {
    return gulp.src('src/**/*.js')
        .pipe(babel({
            "presets": ["es2015"]
        }))
        .pipe(gulp.dest('dist'));
});

Taki kod w pliku template.js który chcemy zmienić na es2015 umieszczamy w folderze src

const person = {
    name: 'Greg',
    job: 'front-end',
    city: 'Warszawa'
}

const html = `
    <div class="person">
        <h1>${person.name}</h1>
        <h2>${person.job} ${person.city}</h2>
    </div>
`;

console.log(html);

const x = 1;
const y = 2;
const result = `${ x + y }`;

console.log(result);

Po uruchomieniu taska js w folderze dist otrzymujemy js zmieniony na es205, wynik poniżej

'use strict';

var person = {
    name: 'Greg',
    job: 'front-end',
    city: 'Warszawa'
};

var html = '\n    <div class="person">\n        <h1>' + person.name + '</h1>\n        <h2>' + person.job + ' ' + person.city + '</h2>\n    </div>\n';

console.log(html);

var x = 1;
var y = 2;
var result = '' + (x + y);

console.log(result);

I ten kod załączamy do naszej strony będzie działać również ze starszymi przeglądarkami.

Oczywiście to tylko pobieżne poruszenie tego tematu, więcej w google 😉

Pasek postępu przewijania strony.

Dobrych praktyk UX nigdy za wiele. Warto czasami do strony dodać coś co nawet w najmniejszym stopniu zwiększy czas przebywania usera na stronie.

Najpierw pobieramy o ile przewinęliśmy stronę od lewego górnego rogu window.pageYOffset,
później pobieramy wysokość okna bez uwzględniania toolbarów i scrollbarów window.innerHeight, następnie pobieramy document.body.clientHeight czyli wysokość całego okna.

const ProgressBar = function () {

    window.addEventListener('scroll', () => {
        let ws = window.pageYOffset,
            wh = window.innerHeight,
            dh = document.body.clientHeight;
        let scrollPercent = (ws / (dh-wh)) * 100;
        const progressBar = document.querySelector('#progress');
        if(ws > 50) {
            progressBar.setAttribute('style','width:'+ scrollPercent + '%');
        } else {
            progressBar.removeAttribute('style');
        }
    });

}();

Jeżeli przewiniemy o więcej niż 50px wtedy do id progress dodajemy style width, jeżeli jest mniejsze to usuwamy atrybut style z id.

Dodajemy też css aby to zadziałało.

.bar {
    position: fixed;
    background: rgb(255, 0, 0);
    height: 10px;
    width: 0;
    top: 0;
}

Działający przykład można znaleźć tutaj – działający przykład

Rozwijane menu

Najpierw budujemy strukturę html. Wszystko jest robione w scss, js w wersji ES6 i gulp
Do ES6 używam gulp-babel aby przekonwertować js do es2015

<div class="container">

    <div id="accorions">
        <div class="accordion">Section 1</div>
        <div class="panel">
            <p>Sauerkraut can be garnished with cored avocado, also try decorateing the cake with hollandaise sauce.
                Asparagus can be marinateed with crushed lettuce, also try flavoring the loaf with salsa verde.
                with lobsters drink cream.</p>
        </div>

        <div class="accordion">Section 2</div>
        <div class="panel">
            <p>Aww, raid me parrot, ye dead landlubber! Swashbuckling, coal-black whales cowardly vandalize a mighty, gutless scabbard.
                Scabbards sing on booty at port degas! Small, dead tobaccos darkly fight a black, lively dagger.
                seashells fall with love.</p>
        </div>

        <div class="accordion">Section 3</div>
        <div class="panel">
            <p>Turbulence at the bridge was the adventure of mineral, lowered to a gravimetric mermaid.
                Moon at the universe was the mystery of coordinates, feeded to a real planet.
                wisely handle a processor.</p>
        </div>
    </div>

</div>

Dodajemy trochę css, na początku importuję normalize

@import "normalize";

.container {
    max-width: 500px;
    margin: 200px auto;

}

.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
    &:after {
        content: '\002B';
        color: #777;
        font-weight: bold;
        float: left;
        margin-right: 5px;
    }
    &:hover {
        background-color: #ddd;
    }
    &.active {
        background-color: #ddd;
        &:after {
            content: "\2212";
        }
    }
}

.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
    li {
        list-style: none;
    }
}

Teraz najważniejsza część, dodajemy js

"use strict";

class Accordion {

    constructor(options) {
        this.options = options;
    }

    creatAccordion() {
        let acc = this.getAccordionName();

        [...acc].forEach((el, i) => {
            el.addEventListener('click', el => {
                if(this.options.type === true && !this.hasClass(el, this.options.activeName)) {                
                    this.removeActiveAndPanelHeight();
                }
                el.target.classList.toggle(this.options.activeName);
                let panel = el.target.nextElementSibling;
                if (panel.style.maxHeight) {
                    panel.style.maxHeight = null;
                } else {
                    panel.style.maxHeight = panel.scrollHeight + 'px';
                }
            })
        })

    }

    getAccordionName() {
        return document.getElementsByClassName(this.options.accordionName);
    }

    hasClass(element, cla) {
        return (' ' + element.className + ' ').indexOf(' ' + cla + ' ') > -1;
    }

    removeActiveAndPanelHeight() {
        const currentActive = document.querySelectorAll("." + this.options.activeName);
        const heightPanel = document.querySelectorAll("." + this.options.panelName);

        [...currentActive].forEach(ca => {
            ca.classList.remove(this.options.activeName);
        });

        [...heightPanel].forEach(hp => {
            hp.removeAttribute("style");
        });
    }
}

const options = {
    'accordionName': 'accordion',
    'activeName': 'active',
    'panelName': 'panel',
    'type': true
};

const accordion = new Accordion(options);
accordion.creatAccordion();

Przykład można zobaczyć pod tym adresem

Ostatni parametr w options czyli ‚type’: true lub false umożliwia sterowaniem zwijania menu, true powoduje że każde kliknięcie na menu zwija inne rozwinięte zaś false pozostawia rozwinięte każde kliknięcie.
Oczywiście options można przenieść do html aby z tego miejsca sterować nie musi być ten obiekt umieszczony w js.

Całość włącznie z gulpem można zobaczyć na github

Duża rozdzielczość ustawienia Visual Studio Code

Niestety duże monitory mają to do siebie że niektóre programy nie wyglądają za dobrze, zbyt małe czcionki itp. problemy.
Używam monitora z matrycą 2560×1440 i tutaj postanowiłem lekko zmodyfikować Visual Studio Code.
Do konfiguracji wchodzę przez ctrl+, otwiera się okno settings.json a tam dwa panele jedna z Defaults settings a z prawej strony z naszymi przyszłymi ustawieniami.
Podstawowa moja konfiguracja wygląda tak:

{
    "window.zoomLevel": 1,
    "editor.renderWhitespace": "all",
    "editor.fontSize": 14,
    "editor.wordWrap": "true",
    "workbench.iconTheme": "material-icon-theme"
}

Ostatni parametr pochodzi z „Material Icon Theme” polecam bardzo ładne ikonki używam także „1337 Theme”
A tak mniej więcej się prezentuje. vsc.

Nowy sposób serwowania ikon SVG

Sposób ten działa nawet w starszych przeglądarkach takich jak IE9.
Jednym z pierwszych możliwości jest budowa zestawu ikon które umieszczam od razu za „body” dla czego tutaj a nie na dole strony przed zamknięciem „/body” otóż gdy strona jest zbyt złożona i renderuje się dość wolno lub otwieramy stronę na telefonie i to w dodatku na słabym internecie np. 2G to ikony nie są widoczne od razu tylko renderują się dopiero po jakimś czasie. Sprawdzone i przetestowane.

<svg xmlns="http://www.w3.org/2000/svg" style="width: 0; height: 0; display: none;">
<symbol id="icon-home" viewBox="0 0 32 32">
<title>home</title>
<path d="M32 18.451l-16-12.42-16 12.42v-5.064l16-12.42 16 12.42zM28 18v12h-8v-8h-8v8h-8v-12l12-9z"></path>
</symbol>
<symbol id="icon-pencil" viewBox="0 0 32 32">
<title>pencil</title>
<path d="M27 0c2.761 0 5 2.239 5 5 0 1.126-0.372 2.164-1 3l-2 2-7-7 2-2c0.836-0.628 1.874-1 3-1zM2 23l-2 9 9-2 18.5-18.5-7-7-18.5 18.5zM22.362 11.362l-14 14-1.724-1.724 14-14 1.724 1.724z"></path>
</symbol>
</svg>

Teraz w miejscu w którym chcemy umieścić ikonę

<svg class="icon icon-home">
   <use xlink:href="#icon-home"></use>
</svg>

Oczywiście nie obejdzie się bez dodania odpowiedniego stylu dla icon 🙂

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

Oczywiście ikony można kolorować dodając fill dla konkretnej ikony

.icon-home {
  fill: red;
}

Innym sposobem jest umieszczenie ikon w osobnym pliku np. symbol.svg
Do ikon dostajemy się w ten sposób symbol.svg#icon-home
Pełny przykład poniżej.

<svg class="icon icon-home">
   <use xlink:href="symbol.svg#icon-home"></use>
</svg>

Ale żeby to wszystko zagrało w IE musimy sięgnąć po js – svgxuse.js
Js ten dodajemy na końcu strony przed zamknięciem „/body”

Polecam do budowania systemu icon a przynajmniej na początku żeby zobaczyć z czym to się „je” stronę icomoon.io system ikon

Tam można wybrać interesujące nas ikony, a na dole na belce jest Generate SVG & More. Po kliknięciu tego napisu zapisuje się nasz wybrany zestaw icon powiedzmy na pulpicie, rozpakowujemy.

Często gdy dodaje własne ikony czy to z ilustratora czy innego programu do wektorów to najpierw optymalizuję ikony bo zawsze jest tak że te ikony które są zapisywane przez te programy mają nadmiar kodu. Dobrym przykładem takiej strony jest SVG optimizer
Czysty kod doklejam później do svg jako następny symbol.

Listowanie folderu w node

Aby wylistować folder z plikami i zapisać listę plików jako json na potrzeby tej strony – blog.grzgorztomicki.pl należy oczywiście mieć najpierw zainstalowane nodejs

Tworzymy plik powiedzmy list_images.js

Najpierw używamy wbudowanej biblioteki fs – fs

const fs = require("fs");
const nameGallery = "chiny";
const name = "test";

const test = [];
const author = "Grzegorz Tomicki";

let now = new Date();
let date = now.getDate() + "." + (now.getMonth()+1) + "." + now.getFullYear();

let datePublished = new Date().toISOString().slice(0,10);
let dateModified = datePublished;

Czytamy folder z plikami jpg za pomocą fs.readdir

fs.readdir(`./sources/images/${nameGallery}/1200/`, function (err, files) {
if (err)
throw err;
for (let index in files) {

Tutaj używamy czegoś nowego z ES6 a mianowicie „template string”. Używamy do tego znaku obok jeden na klawiaturze ` a zmienne podajemy w postaci ${} coś wspaniałego 🙂
Poniżej są dwa przykłady użycia a mianowicie path jak i template – wiele linii jak widać nie trzeba sklejać za pomocą „+” cud malina 🙂

let path = `{"path":"./images/${nameGallery}/","img":"${files[index]}","alt":""}`;
test.push("\r\n\t\t\t\t" + path);
}

const template = (`
{
  "head": {
    "title": "",
    "description": ""
  },
  "body": {
    "title": "",
    "date": "${date}",
    "text": "",
    "items": [$ {
      test
    }]
  },
  "footer": {
    "js": "../../build/js/boundle.min.js"
  },
  "schema": {
    "datePublished": "${datePublished}",
    "dateModified": "${dateModified}",
    "author": "${author}"
  }
}
`);

Zapisujemy plik za pomocą fs.writeFile

fs.writeFile(`./sources/data/site/${name}.json`, template, function (err) {});
});

Aby oczywiście uruchomić ten plik należy go uruchomić przez komendę w konsoli node list_images.js
Cały proces tworzenia strony można znaleźć pod tym linkiem tutaj

Jak przyspieszyć WordPress

Poniżej kilka trików które pozwoliły mi przyspieszyć bloga z 32/22 w PageSpeed Insigth do 90/100 – oczywiście to zależy od strony, ilości zdjęć, szybkości serwera itp, wszystko ma znaczenie.
I to jest blog ze zdjęciami (blog.grzegorztomicki.pl), jak dla mnie bardzo zacnie 🙂

1. Będziemy potrzebować dostęp do .htaccess
W którym dodajemy (nie będę opisywał co dokładnie jest w nim robione bo wszystko można znaleźć opisane w internecie)

<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
#</IfModule>



<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

<IfModule mod_expires.c>
  ExpiresActive on

# Perhaps better to whitelist expires rules? Perhaps.
  ExpiresDefault                          "access plus 1 month"

# cache.appcache needs re-requests in FF 3.6 (thx Remy ~Introducing HTML5)
  ExpiresByType text/cache-manifest       "access plus 0 seconds"



# Your document html
  ExpiresByType text/html                 "access plus 0 seconds"

# Data
  ExpiresByType text/xml                  "access plus 0 seconds"
  ExpiresByType application/xml           "access plus 0 seconds"
  ExpiresByType application/json          "access plus 0 seconds"

# RSS feed
  ExpiresByType application/rss+xml       "access plus 1 hour"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week"

# Media: images, video, audio
  ExpiresByType image/gif                 "access plus 1 month"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType image/jpg                 "access plus 1 month"
  ExpiresByType image/jpeg                "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType audio/ogg                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType font/truetype             "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
  ExpiresByType text/css                  "access plus 1 year"
  ExpiresByType application/javascript    "access plus 1 year"
  ExpiresByType text/javascript           "access plus 1 year"

  <IfModule mod_headers.c>
    Header append Cache-Control "public"
    Header unset ETag
    FileETag None
  </IfModule>

</IfModule>

2. Instalujemy „BJ Lazy Load”
Jest to plugin do „wolnego” ładowania się obrazków więcej na https://wordpress.org/plugins/bj-lazy-load/

3. Instalujemy „WP Super Cache”
Włączamy w nim w zakładce „Easy” na Caching on (Recommended) – więcej na https://wordpress.org/plugins/wp-super-cache/, czy działa można sprawdzić na stronie na samym dole powinien pojawić się mniej więcej taki wpis.

<!--HTML compressed, size saved 9.28%. From 64384 bytes, now 58410 bytes-->
<!-- Dynamic page generated in 0.974 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2016-01-01 11:42:46 -->


4. Najtrudniejsza część instalujemy „Above The Fold Optimization”

Nie włączamy go.
Klikamy na zakładkę „Extract Full CSS” pojawia się lista wszystkich css które są na stronie oraz textarea z połączonymi wszystkimi plikami css „Full CSS” – textarea.

Kopiuję Ctrl + C do strony https://jonassebastianohlsson.com/criticalpathcssgenerator/

Na tej stronie w pole:
1. URL podaję adres blog lub specyficznej strony na naszym blogu,
2. W „FULL CSS” wklejam cały nasz wygenerowany css.
3. Klikamy „Create Critical Path CSS”, po dłuższej chwili (w zależności od tego jak duży jest css w moim wypadku wszystkie połączone cssy są wielkości ponad 0,5MB) pojawia się okno textarea „CRITICAL PATH CSS” a w nim dostosowane css które kopiuję do pliku header.php od razu pod ,
oczywiście można to zrobić ładniej ale że jestem lazy to mi się nie chciało 🙂

Uwaga z tego skróconego css usuwamy wszystkie @font-face eot,ttf itd czcionki.

5. Wygląd -> Edytor -> otwieramy Funkcje motywu (functions.php)
Na samym końcu dodaję:

<?php
function remove_head_scripts() {
   remove_action('wp_head', 'wp_print_scripts');
   remove_action('wp_head', 'wp_print_head_scripts', 9);
   remove_action('wp_head', 'wp_enqueue_scripts', 1);

   remove_action( 'wp_head', 'rsd_link');
   remove_action( 'wp_head', 'wlwmanifest_link');
   remove_action( 'wp_head', 'wp_generator');
   remove_action( 'wp_head', 'start_post_rel_link');
   remove_action( 'wp_head', 'index_rel_link');
   remove_action( 'wp_head', 'adjacent_posts_rel_link');
   remove_action( 'wp_head', 'wp_shortlink_wp_head');

   add_action('wp_footer', 'wp_print_scripts', 5);
   add_action('wp_footer', 'wp_enqueue_scripts', 5);
   add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );

?>

Powyższa funkcja przenosi cały script do sekcji footer

Dodaję również jedną przydatną rzecz czyli kompresję html – usuwanie zbędnych spacji, nowych linii itd, również dodajemy w function.php na samym dole

<?php
class WP_HTML_Compression
{
    // Settings
    protected $compress_css = true;
    protected $compress_js = true;
    protected $info_comment = true;
    protected $remove_comments = true;

    // Variables
    protected $html;
    public function __construct($html)
    {
     if (!empty($html))
     {
         $this->parseHTML($html);
     }
    }
    public function __toString()
    {
     return $this->html;
    }
    protected function bottomComment($raw, $compressed)
    {
     $raw = strlen($raw);
     $compressed = strlen($compressed);
     
     $savings = ($raw-$compressed) / $raw * 100;
     
     $savings = round($savings, 2);
     
     return '<!--HTML compressed, size saved '.$savings.'%. From '.$raw.' bytes, now '.$compressed.' bytes-->';
    }
    protected function minifyHTML($html)
    {
     $pattern = '/<(?<script>script).*?<\/script\s*>|<(?<style>style).*?<\/style\s*>|<!(?<comment>--).*?-->|<(?<tag>[\/\w.:-]*)(?:".*?"|\'.*?\'|[^\'">]+)*>|(?<text>((<[^!\/\w.:-])?[^<]*)+)|/si';
     preg_match_all($pattern, $html, $matches, PREG_SET_ORDER);
     $overriding = false;
     $raw_tag = false;
     // Variable reused for output
     $html = '';
     foreach ($matches as $token)
     {
         $tag = (isset($token['tag'])) ? strtolower($token['tag']) : null;
         
         $content = $token[0];
         
         if (is_null($tag))
         {
             if ( !empty($token['script']) )
             {
                 $strip = $this->compress_js;
             }
             else if ( !empty($token['style']) )
             {
                 $strip = $this->compress_css;
             }
             else if ($content == '<!--wp-html-compression no compression-->')
             {
                 $overriding = !$overriding;
                 
                 // Don't print the comment
                 continue;
             }
             else if ($this->remove_comments)
             {
                 if (!$overriding && $raw_tag != 'textarea')
                 {
                     // Remove any HTML comments, except MSIE conditional comments
                     $content = preg_replace('/<!--(?!\s*(?:\[if [^\]]+]|<!|>))(?:(?!-->).)*-->/s', '', $content);
                 }
             }
         }
         else
         {
             if ($tag == 'pre' || $tag == 'textarea')
             {
                 $raw_tag = $tag;
             }
             else if ($tag == '/pre' || $tag == '/textarea')
             {
                 $raw_tag = false;
             }
             else
             {
                 if ($raw_tag || $overriding)
                 {
                     $strip = false;
                 }
                 else
                 {
                     $strip = true;
                     
                     // Remove any empty attributes, except:
                     // action, alt, content, src
                     $content = preg_replace('/(\s+)(\w++(?<!\baction|\balt|\bcontent|\bsrc)="")/', '$1', $content);
                     
                     // Remove any space before the end of self-closing XHTML tags
                     // JavaScript excluded
                     $content = str_replace(' />', '/>', $content);
                 }
             }
         }
         
         if ($strip)
         {
             $content = $this->removeWhiteSpace($content);
         }
         
         $html .= $content;
     }
     
     return $html;
    }
     
    public function parseHTML($html)
    {
     $this->html = $this->minifyHTML($html);
     
     if ($this->info_comment)
     {
         $this->html .= "\n" . $this->bottomComment($html, $this->html);
     }
    }
   
    protected function removeWhiteSpace($str)
    {
     $str = str_replace("\t", ' ', $str);
     $str = str_replace("\n",  '', $str);
     $str = str_replace("\r",  '', $str);
     
     while (stristr($str, '  '))
     {
         $str = str_replace('  ', ' ', $str);
     }
     
     return $str;
    }
}

function wp_html_compression_finish($html)
{
    return new WP_HTML_Compression($html);
}

function wp_html_compression_start()
{
    ob_start('wp_html_compression_finish');
}
add_action('get_header', 'wp_html_compression_start');
?>

6. Najważniejsza część pracy nad przyspieszeniem strony to oczywiście modyfikacja zdjęć.
Zdjęcia powinny mieć kompresję ustawioną na 70%, usunięcie wszystkich metadanych ze zdjęć, powinny być zapisane jako progressive, wielkość dostosowana do wielkości miejsca w którym się pojawiają zdjęcia.

7. W przyszłości zdjęcie przerobię na nowe rozwiązania dla wersji mobilnych
Więcej na https://scottjehl.github.io/picturefill/examples/demo-01.html oraz https://ericportis.com/posts/2014/srcset-sizes/

Tego rozwiązania używa między innymi theguardian.com a to wygląda mniej więcej tak (to jest jeden plik tylko że w różnych wielkościach):

<picture>
<!--[if IE 9]><video style="display: none;"><![endif]-->
<source media="(min-width: 1300px)" sizes="1300px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=1300&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=10e2200031125f835392892e9f813634 1300w">
<source media="(min-width: 1140px)" sizes="1140px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=1140&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=13d6ffcf420fb95bff93b5ca7a418f8e 1140w">
<source media="(min-width: 980px)" sizes="1125px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=1125&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=63fa2db8b2dccfc0ab408e25551c32e6 1125w">
<source media="(min-width: 740px)" sizes="965px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=965&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=c85b88b5fa49b0854485bd720d689155 965w">
<source media="(min-width: 660px)" sizes="725px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=725&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=048d9b371a22cebba3bb7dcd8e2d619c 725w">
<source media="(min-width: 480px)" sizes="645px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=645&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=97c169eb0122c0552b270a4be96e0410 645w">
<source media="(min-width: 0px)" sizes="465px" srcset="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=465&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=b4476e761590a0a1175cb66c5bfd8a8d 465w">
<!--[if IE 9]></video><![endif]-->
<img class="maxed responsive-img" itemprop="contentUrl" alt="Francesca Chaouqui" src="https://i.guim.co.uk/img/media/2fa72163af4712211cbf9abd929cc377d4af267b/0_0_4928_2957/master/4928.jpg?w=300&amp;q=85&amp;auto=format&amp;sharp=10&amp;s=c69f163a8116e3ac4ad7cc8170a1ad11">
</picture>

A poniżej wynik mojej pracy.

desctop

mobile

W webpagetest też jest bardzo pozytywnie 🙂

webpage

jQuery UI Autocomplete highlight

Mamy sobie prosty formularz. Do podpowiedzi użyjemy pluginu jquery autocomplite. Chcemy również dodać wyboldowanie podpowiedzi.
Dokładnie uzyskać taki efekt „meble, Waszawa” gdzie highlight jest zmianą koloru na czarny i wyboldowaniem.

<form id="search" action="/" method="GET" role="search">
    <fieldset>
        <input id="query" type="text" name="query" value="" maxlength="255" autocomplete="off" placeholder="Produkt, usługa, miasto, ulica">
        <button type="submit" id="button-search"></button>
    </fieldset>
</form>

A teraz trochę js 😉

$("#query").autocomplete({
        'minLength': 2,
        'delay': 0,
        create: function () {
            $(this).data('ui-autocomplete')._renderItem = function (ul, item) {
                var re = new RegExp("^" + this.term, "i") ;
                var t = item.label.replace(re,"<span class='highlight'>" + this.term + "</span>");

                return $( "<li></li>" )
                    .data( "item.autocomplete", item )
                    .append(t)
                    .appendTo( ul );
            };
        },
        source: function (request, response) {
            //escapeRegex - /[\-\[\]{}()*+?.,\\\^$|#\s]/g, "\\$&"
            var re = $.ui.autocomplete.escapeRegex(request.term);
            var matcher = new RegExp("^" + re, "i");

            $.getJSON("/autocomplete/?what=" + encodeURIComponent(request.term), function (searchWord) {
                var match = $.grep(searchWord, function (item, index) {
                    return matcher.test(item);
                });
                response(match);
            });
        },
        open: function (e, ui) {
            //autocomplete przesuwamy o 1px to góry, aby pozbyć się ramki
            $(".ui-autocomplete:visible").css({top: "-=1"});
        }
    });

A tak wygląda wynik naszej pracy.

autosuggest

Gulp.js – menadżer zadań

Gulp.js jest menadżerem zadań opartym na node, w skrócie mamy kilka czynności do zrobienia w projekcie. I żeby nie robić tego ręcznie gulp wykonuje za nas te operacje.
Oprę się na małym projekcie, chcę less zamienić na css, skopiować do foldera css, zminimalizować i zmienić jego nazwę na style.min.css

1. Instalacja

Do tego oczywiście potrzebny najpierw jest zainstalowany node, jak już jest zainstalowany to instalujemy gulp.

// najpierw instalujemy globalnie – zainstaluje się w folderze C:\Users\Uzytkownik\AppData\Roaming\npm\node_modules\gulp

npm install -g gulp

// następnie instalujemy lokalnie w moim wypadku wchodzimy do D:\xampp\htdocs\test-gulp i tam instalujemy gulp jak i pluginy

npm install gulp --save-dev

Teraz aby móc z gulp skorzystać należy utworzyć plik konfiguracyjny gulpfile.js – musi być on umieszczony w katalogu głównym naszego projektu.

W naszym projekcie będziemy korzystać z gulp-less, gulp-minify-css oraz gulp-rename możemy je zainstalować pojedynczo jak i za jednym razem jak kto woli.

// wszystko instalujemy lokalnie

npm install gulp-less gulp-minify-css gulp-rename install --save-dev

Struktura naszego projektu:
mamy folder „test-gulp” w nim foldery css oraz less, w less jest plik style.less 🙂
W test-gulp znajduje się plik gulpfile.js (nasze taski) oraz package.json (plik generujemy automatycznie lub ręcznie 😉 – zawiera on dependencies itd.)

test-gulp/
|  css/
|  less/
|  |  style.less
gulpfile.js -- ad3
package.json -- ad2

2. Tworzymy package.json

Aby utworzyć package.json należy w konsoli lokalnie uruchomić npm init

Pojawi się nam coś takiego:

———————–
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sane defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install –save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (test-gulp)
———————–

Naciskamy enter do pojawienia się „Is this ok? (yes)
wpisujemy y + enter

i mamy w naszym projekcie package.json

3. Konfiguracja gulpfile.js

/**
 * umieszczamy nasze pakiety które nam są potrzebne do projektu
 */

var gulp        = require('gulp'),
    less        = require('gulp-less'),  // less -> css
    minifyCSS   = require('gulp-minify-css'),  // css -> minify css
    rename      = require('gulp-rename');  // zmiana style.css na style.min.css


/**
 * tworzymy task (zadanie) wszystkie pliki less
 * zamieniamy na css
 * z css usuwamy br, nowe linie itd. czyli poczciwe minify
 * style.css zmieniamy nazwę na style.min.css
 */

gulp.task('less', function() {
    return gulp.src('less/*.less')
        .pipe(less())
        .pipe(minifyCSS())
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('css')); // miejsce docelowe pliku css
});

/**
 * Watch Files For Changes - czyli obserwator zmian? (dziwnie to brzmi po polsku :))
 */

gulp.task('watch', function() {
    gulp.watch('less/*.less', ['less']);
});

/**
 * Default Task - domyślne zadania?
 */

gulp.task('default', ['less', 'watch']);

5. Uruchamianie

Aby zmiany w plikach były na bieżąco kompilowane należy uruchomić będąc w naszym folderze (test-gulp) w konsoli wpisując gulp.
Od tego momentu każda zmian na less będzie skutkowała wygenerowanie pliku style.min.css w folderze css.

Oczywiście każdy task może być uruchamiany osobno, wystarczy w konsoli także lokalnie wpisać gulp less

6. Podsumowanie

Gulp może robić z naszych plików zip, kopiować na serwer itd. 🙂
Więcej na stronie gulp plugins

W następnym artykule pokaże jak można to samo skonfigurować w Intelij IDEA.