9 Mar 2018

Object.keys, values, entries

Poniżej kilka przykładów jak dobrać się do obiektów 🙂

var codes = {
  reset: [0, 0],
  bold: [1, 22]
};

Object.keys(codes).forEach(function (key) {
  console.log(key); // "reset", "bold"
});

Object.values(codes).forEach(function (key) {
  console.log(key); // [0,0] [1,22]
});

Object.entries(codes).forEach(function (key) {
  console.log(key); // ["reset", [0, 0]] ["bold", [1, 22]]
});
9 Mar 2018

Użycie operator spread syntax czyli […]

W ES6 pojawiła się nowa funkcjonalność nazywana „Spread syntax” operacje na tablicach czy obiektach. Poniżej kilka przykładów użycia. W ES5 jest to concat.

W ES6

const boys = ["Jaś", "Grześ", "Adaś"];
const girls = ["Małgosia", "Ania", "Czesia"];

let people = [...boys, ...girls];

console.log(people); // ["Jaś", "Grześ", "Adaś", "Małgosia", "Ania", "Czesia"]

W ES5

const boys = ["Jaś", "Grześ", "Adaś"];
const girls = ["Małgosia", "Ania", "Czesia"];

let people = boys.concat(girls);

console.log(people); // ["Jaś", "Grześ", "Adaś", "Małgosia", "Ania", "Czesia"]

Inny przykład:

const divs = document.querySelector('div');

// użycie call
[].foreach.call(divs, function(div) {
   console.log(div);
});

// użycie spread
[...divs].foreach(div => {
    console.log(div)
}
2 Mar 2018

show/hide scroll React

Ukrywanie buttona scroll-top jeżeli wysokość przekroczy 200 oraz dodanie obsługi zdarzenia na onClick i wywołanie funkcji scrollToTop i metody scrollIntoView.

export default BackToTop extends Component {
    state = {
        scrolling: false,
        scrollPosHeight: 200
    }

    componentDidMount() {
        console.log('componentDidMount()');
        window.addEventListener('scroll', this.hideShowButtonTop);
    };

    componentWillUnmount() {
        console.log('componentWillUnmount()');
        window.removeEventListener('scroll', this.hideShowButtonTop);
    };

    hideShowButtonTop = () => {
        const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
        const myDiv = document.querySelector('.back-to-top');
        (scrollPos > this.state.scrollPosHeight && scrollPos !== 0) ? myDiv.style.display = 'block' : myDiv.style.display = 'none';
    }

    scrollToTop() {
        const logoView = document.getElementById('logo');
        logoView.scrollIntoView({
            behavior: 'smooth'
        })
    }

    render() {
        return (
            <div onClick={this.scrollToTop} className="back-to-top"></div>
        )
    };
};
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>
`;
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 można znaleźć tutaj – działający przykład