18 lip 2018

Axios oraz php wysłanie formularza.

Za pomocą axios wysyłam formularz.
Najpierw zbieram dane z formularzy, ustawiam content-type i wysyłam postem - axios.post

let data = {
    'imie-i-nazwisko': document.getElementById('name').value,
    'data-wydarzenia': document.getElementById('date').value
};

let config = {
    headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
    }
}
axios.post('mail.php', data, config)
    .then(response => {
        console.log(response);
    })
    .catch(error => {
        console.log(error);
    });

Następna rzecz okazała się dość problematyczna, a mianowicie sparsowanie jsona do zmiennej w php.
Całe clou to file_get_contents('php://input')

$_POST = json_decode(file_get_contents('php://input'), true);

if($_POST) {
    $imie_i_nazwisko = trim($_POST['imie-i-nazwisko']);
    ...
}
17 lip 2018

DOMContentLoaded async

Niestety jeżeli używamy async DOMContentLoaded nam nie zadziała.

<script type="text/javascript" src="./index.6da4.js" async>

Trochę mi zajęło zanim odkryłem ten problem. Lokalnie wszystko działało bo w webpaku w wersji developerskiej nie używam pluginu który dodaje async do script. Dopiero wersja produkcyjna posiada tą zmianę.

document.addEventListener("DOMContentLoaded", function() {
   const contact = new FormValidate('form');
   contact.init();
});

Przeszukanie sieci doprowadziło mnie do tego rozwiązania, działa nawet w IE9.

document.addEventListener('readystatechange', () => {
    if (document.readyState == "complete") {
        const contact = new FormValidate('form');
        contact.init();
    }
});
8 lip 2018

addEventListener wiele zdarzeń

Zamiast wywoływać dwa razy tą samą funkcję.

document.addEventListener("click", taSamaFunkcja);
document.addEventListener("touchstart", taSamaFunkcja);

Możemy to zrobić tak jak poniżej

["change", "keyup", "click", "touchstart", "input", "..."].forEach(function(event) {
  document.querySelectorAll('.element').addEventListener(event, function() {
    // i tutaj co potrzeba
  }, false);
});
21 cze 2018

Usunięcie plików i folderów z githuba po ich dodaniu.

Dodaliśmy pliki do githuba ale coś się zmieniło i chcielibyśmy teraz je usunąć.
Dodaliśmy je to .gitignore ale to niestety tak nie zadziała.

Oczywiście należy dodać pliki czy foldery najpierw do .gitignore
Później odpalamy konsolę i wpisujemy poniższe komendy.

git rm -r --cached .
git add .
git commit -m 'Removed all files that are in the .gitignore'
git push origin master

I tym sposobem czyścimy niepotrzebne pliki z repozytorium na githubie.

8 cze 2018

Gulp ES6 z Babel

Do gulp instalujemy:

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

W głównym folderze tworzymy plik:

.babelrc

W nim dodajemy zapis:

{
  "presets": [
    "es2015"
  ]
}

Aby zadziałał nam baabel z gulp należy zmodyfikować nazwę gulpfile.js na gulpfile.babel.js
Ja na wszelki wypadek duplikuję plik i zmieniam nazwę tak na wszelki wypadek i później dokonuję odpowiednich zmian w gulpfile.babel.js

'use strict';

import gulp from 'gulp';
import sass from 'gulp-sass';
import autoprefixer from 'gulp-autoprefixer';
import sourcemaps from 'gulp-sourcemaps';

const dir = {
  src: 'src',
  dest: 'build'
};

const sassPaths = {
  src: `${dir.src}/style.scss`,
  dest: `${dir.dest}/style/`
};

gulp.task('style', () => {
  return gulp.src(sassPaths.src)
    .pipe(sourcemaps.init())
    .pipe(sass.sync().on('error', plugins.sass.logError))
    .pipe(autoprefixer())
    .pipe(gulp.dest(sassPaths.dest));
});

...