Category Archives: JavaScript

JavaS cript

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);
});
Standard

Komentarze

Zostaw komentarz

Data publikacji

08/07/2018

Kategoria

JavaScript

Napisał

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));
});

...
Standard

Komentarze

Zostaw komentarz

Data publikacji

08/06/2018

Kategoria

CSS, JavaScript

Napisał

Stworzenie sitemapy w node.js

Mały przyjemny kod 😉
Na początku pobieramy wszystkie pliki z foldera build za pomocą readdir, następnie pętelka po tych plikach. Robimy split po kropce aby dobrać się do rozszerzenia a interesuje nas oczywiście html
Jeżeli rozszerzeniem okaże się html to wszystko pakujemy do tablicy urlPart.
Na końcu budujemy xml sitemap i zapisujemy to przez writeFile i to tyle.

const fs = require("fs");

const htmlPlace = "build";
const ulrPart = [];

fs.readdir(`${htmlPlace}`, function (err, files) {
    if (err)
        throw err;
    for (let index in files) {
        let rest = files[index].split('.')[1];
        if (rest === 'html') {
            let path = `
                <url>
                    <loc>http://blog.grzegorztomicki.pl/${files[index]}</loc>
                    <changefreq>monthly</changefreq>
                </url>
            `;
            ulrPart.push(path);
        }

    }

    const template = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            ${ulrPart.join('')}</urlset>`;

    fs.writeFile(`./sitemap.xml`, template, function (err) {});
});
Standard

Komentarze

Zostaw komentarz

Data publikacji

08/06/2018

Kategoria

JavaScript, Node

Napisał

Ładowanie CSS i CSS modules w tym samym czasie Webpack

W react możemy importować css jak i css jako moduły.
Ale co jeśli chcemy zrobić do w tym samym czasie powiedzmy dodać globalny styl np. normalize.css?

Importowanie jako moduł:

import React from 'react'
import styles from './moj-komponent.css';

const MyComponent => <div className={styles.jakasKlasa}></div>

No ale jak użyć css powiedzmy jakieś zewnętrznej biblioteki:

import React from 'react'
import './moj-komponent-zewnetrzny.css';

const MyComponent => <div className="jakasKlasa"></div>

Aby tego dokonać należy zmodyfikować webpack. Ja korzystam z create-react-app i modyfikuję zarówno wersję dev jak i prod webpacka.

module: {
    rules: [
        {
            // wcześniej było /\.css$/
            test: /^(?!.*?\.module).*\.css$/,
           
            // dalej zostawiamy jak było czyli
            use: [
              require.resolve('style-loader'),
              {
                loader: require.resolve('css-loader'),
                options: {
                  importLoaders: 1,
                  modules: true,
                  localIdentName: '[name]__[local]__[hash:base64:5]'
                },
                ...
        },
        // dodajemy następną regułę dla zewnętrznych css
        {
            test: /\.module\.css$/,
            use: [
                require.resolve('style-loader'),
                require.resolve('css-loader')
            ],
        },
    ]
}

Teraz możemy użyć w jednym komponencie zarówno css modułów jak i zewnętrznych bibliotek.
Należy pamiętać że zewnętrzny komponent musi mieć w nazwie *.module.css

import React from 'react'
import styles from './moj-komponent.css';
import './jakis-zewnetrzny.module.css'

const MyComponent => <div className={`${styles.jakasKlasa} jakas-klasa-z-zewnatrz`}></div>

W wersji produkcyjnej webpack kopiuję całą regułę css i wstawiam poniżej,
zmieniam test: /\.css$/, na test: /\.module\.css$/,
Ustawiam modules: false i tyle.

Standard

Komentarze

Zostaw komentarz

Data publikacji

19/03/2018

Kategoria

JavaScript, React

Napisał

Importowanie absolutne w Create React App

Jak pozbyć się zagnieżdżonych ścieżek w pejekcie.
Np. taka nieładna ścieżka jak poniżej.

import TopImage from '../../../components/TopImage/TopImage';

Chcemy mieć coś takiego, czy do foldera components czy do containers czy innych folderów w src.

import TopImage from 'components/TopImage/TopImage';

Najprościej jak można to tworzymy plik w folderze src o nazwie .env tak z kropką na początku.
W nim wpisujemy NODE_PATH=src/ robimy save i uruchamiamy project jak zwykle przez npm run start

Od tej chili zamiast podawać całą ścieżkę podajemy components, containers, hoc czy inne foldery jakie mamy w projekcie.

Innym sposobem jest modyfikacja package.json

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

Dodajemy NODE_PATH=src/

"scripts": {
   "start": "NODE_PATH=src/ react-scripts start",
   "build": "NODE_PATH=src/ react-scripts build"
}

Jest jeden problem z użytkownikami windowsa jak zwykle 😉 NODE_PATH=src/ w package.json nie zadziała.
Należy zainstalować moduł cross-env czyli npm install –save-dev cross-env i zmodyfikować package.json, oczywiście to tylko w wypadku windowsa.

"scripts": {
   "start": "cross-env NODE_PATH=src/ react-scripts start",
   "build": "cross-env NODE_PATH=src/ react-scripts build"
}

I to tyle chyba ten pierwszy sposób jest mniej inwazyjny i powinien zadziałać na wszystkich platformach.

Standard

Komentarze

Zostaw komentarz

Data publikacji

11/03/2018

Kategoria

JavaScript, React

Napisał

Wysłanie formularza w React

Proste wysłanie formularza w React do tego axios czyli biblioteka oparta na obiektach HTTP dla przeglądarek i Node.js więcej można przeczytać tutaj – axios

import React, { Component } from 'react';
import axios from 'axios';

class UserForm extends Component {
    state = {
        imie: '',
        nazwisko: '',
        email: '',
    };

    onChange = (event) => {
        const state = this.state
        state[event.target.name] = event.target.value;
        this.setState(state);
    }

    onSubmit = (event) => {
        event.preventDefault();
        const { imie, nazwisko, email } = this.state;

        axios.post('/', { imie, nazwisko, email })
            .then((result) => {
                // a tuj coś robimy z danymi
            });
    }

    render() {
        const { imie, nazwisko, email } = this.state;
        return (
            <form onSubmit={this.onSubmit}>
                <input type="text" name="imie" value={imie} onChange={this.onChange} />
                <input type="text" name="nazwisko" value={nazwisko} onChange={this.onChange} />
                <input type="text" name="email" value={email} onChange={this.onChange} />
                <button type="submit">Wyślij</button>
            </form>
        );
    }
}

export default UserForm;
Standard

Komentarze

Zostaw komentarz

Data publikacji

10/03/2018

Kategoria

JavaScript, React

Napisał

ES6, var vs let

Przykład użycia let oraz var

for (var i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Wynik 5 razy 5 :)
  }, 100);  
}
for (let i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Wynik 0, 1, 2, 3, 4
  }, 100);  
}

Żeby to wykonać bez let można by zrobić tak jak poniżej.

for (var i = 0; i < 5; ++i) {
    (function(n) {
        setTimeout(function(){
            console.log(n); // Wynik 0, 1, 2, 3, 4
        }, 100);
    }(i));
}
Standard

Komentarze

Zostaw komentarz

Data publikacji

09/03/2018

Kategoria

JavaScript

Napisał

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]]
});
Standard

Komentarze

Zostaw komentarz

Data publikacji

09/03/2018

Kategoria

JavaScript

Napisał

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)
}
Standard

Komentarze

Zostaw komentarz

Data publikacji

09/03/2018

Kategoria

JavaScript

Napisał

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>
        )
    };
};
Standard

Komentarze

Zostaw komentarz

Data publikacji

02/03/2018

Kategoria

JavaScript, React

Napisał