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

Odczyt atrybut贸w elementu w obs艂udze zdarzena w javascript

<select name="banner_url" onchange="var idx=this.selectedIndex;
var value=this.options[idx].getAttribute('banner_url');
var element = document.getElementById('img_banner_url');
element.setAttribute('src', value); element.style.display='block'">


!{section name=ii loop=$data}!
    !{capture assign=banner_url}!http://kody.wig.pl/!{/capture}!
    <option value="!{$banner_url}!" banner_url="!{$banner_url}!">
    !{$data[ii].name}! ---> !{$banner_url}!</option>
!{/section}!

</select>
<br><br>

<img src="" id="img_banner_url" style="display:none">

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;

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

Ustawianie paddingu czcionki w edytorze w NetBeans

Ustawianie paddingu czcionki w edytorze w NetBeans

W pliku:
C:\Users\Wojtek\AppData\Roaming\NetBeans\8.2\config\
Editors\Preferences\org-netbeans-modules-editor-settings-CustomPreferences.xml

nale偶y doda膰 nast臋puj膮cy kod xml:

<entry javaType="java.lang.Float" name="line-height-correction" xml:space="preserve">
<value><![CDATA[0.9]]></value>
</entry>