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"]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>
)
};
};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>
`;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
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) {