Funkcja typu arrow w JavaScript ma taką postać:

() => {
...
}

Jest to wygodna alternatywa dla tradycyjnej postaci funkcji.

Funkcja typu arrow pozwala także na bezpośrednie zwrócenie wartości bez użycia return:

const sum = () => 1 + 2;
sum(); // 3

Ale jak zwrócić bezpośrednio obiekt z takiej funkcji beż użycia return?

Taki zapis nie zadziała:

const createObject = () => { label: 'test', value: 5 }; // Zwróci błąd

Zwracanie bezpośrednio obiektu

Rozwiązanie tego problemu okazuje się banalne. Wystarczy zwracany obiekt umieścić w nawiasach () jak:

() => ({
  label: 'test',
  value: 5
});

Poniżej podaję jeszcze przykład:

const data = [
	{ title: 'Foo', value: 7 },
	{ title: 'Bar', value: 10 }
].map((current) => 
	(
		{ label: current.title, amount: current.value }
	)
);
console.log(data); // [ { label: 'Foo', amount: 7 }, { label: 'Bar', amount: 10 } ]

Przykład znajdziesz pod tym linkiem.

Poniżej kod:

HTML:

<div class="container">
    <div class="box">A</div>
    <div class="box">B</div>
    <div class="box">C</div>
    <div class="box">D</div>
    <div class="box">E</div>
    <div class="box">F</div>
</div>

CSS:

.container {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-content: space-between;
    height: 200px;
    width: 600px;
    margin: 0 auto;
    border: 1px solid black;
}

.box {
    width: 50px;
    height: 50px;
    margin: 0 auto;
    border: 1px solid black;
    background: blue;
    color: white;
    margin-bottom: 0.5em;
}

Sercem tego efektu są reguły CSS dla klasy container. Szczególnie pierwsze pięć linijek. Ważne jest także ustawienie odpowiedniej wysokości.

W jednym z poprzednich wpisów opisałem podstawy PM2. W tym wpisie skupię się na zapisywaniu i wczytywaniu wcześniej zdefiniowanych skryptów.

Obie funkcjonalności przydają się szczególnie, gdy posiadamy większą liczbę skryptów działających w tle. Przez co nie musimy ich na nowo konfigurować.

Zapisywanie skryptów

Zacznijmy od zapisywania ustawień. Po dodaniu do PM2 swoich skryptów wystarczy odpalić poniższą komendę:

pm2 save

Wczytywanie skryptów

Kiedy serwer zostanie zrestartowany skrypty dodane do PM2 znikną:

pm2 list; // lista będzie pusta!

Jeśli zapisaliśmy wcześniej nasze skrypty za pomocą komendy save, to możemy je szybko wczytać na nowo:

pm2 resurrect 

Żeby wycentrować element w pionie i w poziomie, możemy skorzystać z Flex'a.

Przykład znajdziesz pod tym linkiem.

Centrowanie poziomo i pionowo

HTML:

<div class="box">
Hello World!
</div>

CSS:

.box {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200px;
    height: 200px;
    margin: 0 auto;
    border: 1px solid black;
}

Używając Flexa i reguł justify-content, align-items problem centrowania zostanie rozwiązany.

Załóżmy, że mamy element, którego rozmiary są z góry ustalone. W tym elemencie wyświetlany jest tekst. Problem jest wtedy, gdy do elementu zostanie wprowadzony wystarczającą długi tekst, który nie będzie się mieścić w obrębie tego elementu.

Przykład, który tutaj opisuję działa na zasadzie: "Wyświetl mi N linijek tekstu jeśli cały się nie zmieści". Przykład przycinania tekstu znajdziesz pod tym linkiem.

Przejdźmy do kodu:

HTML:

<div class="box">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod sollicitudin tortor, et convallis sapien porttitor pellentesque. Maecenas non leo sed sapien sollicitudin pharetra sed dignissim magna. Duis sed cursus turpis. Maecenas non faucibus nibh, non accumsan lacus. Maecenas varius eget nisi et accumsan. Praesent augue urna, aliquet eu convallis vel, imperdiet sit amet elit. Cras finibus nisi imperdiet, tempor orci vel, ullamcorper eros.
    </p>
</div>

CSS:

.box {
    width: 200px;
    margin: 0 auto;
    border: 1px solid black;
    padding: 1em;
}

.box p {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

Mamy element o stałej szerokości. Jak widać tak długi tekst, na pewno się nie zmieści. Dlatego za pomocą reguły line-clamp ustalam, że maksymalnie niech zostaną wyświetlone 4 linijki tekstu.