10 lis 2017

Przygotowanie odpowiedzi na zapytanie w ajax

require_once('config.php');
$data_js = '{"count":'.$cnt.', "data": '.json_encode($data_js).', "request":'.
json_encode($_GET).'}';

header('Content-type: application/json; charset='.$config['encoding']);
echo $data_js;
exit();
10 lis 2017

Przykład uruchomienia smartów

require_once('/app/config.php');
require_once('/app/smarty-3.1.29/libs/Smarty.class.php');

$smarty=new Smarty;
$smarty->template_dir = '/app/templates/';
$smarty->compile_dir = '/app/data/smarty/templates_c/';
$smarty->cache_dir = '/app/data/smarty/cache/';
$smarty->config_dir = '/app/data/smarty/config/';
$smarty->caching= false;
$smarty->force_compile=true;
//$smarty->force_compile=false;
$smarty->configLoad('pl.conf', 'index');
$smarty->left_delimiter = '!{';
$smarty->right_delimiter = '}!';

$data_to_send=$smarty->fetch('index.html');

header("Connection: close");
ignore_user_abort(true);
header('Content-type: text/html; charset='.$config['encoding']);
header("Content-Length: ".mb_strlen($data_to_send, $config['encoding']));

echo $data_to_send;
10 paź 2017

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>
`;
Czytaj dalej
9 paź 2017

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 znajduje się tutaj

Copyright © | kodyWiG Theme