Ż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.

W maju opublikowałem 8 wpisów:

JavaScript:

1. Jak wylosować liczbę z podanego zakresu?
2. Jak pobrać najmniejszą lub największą liczbę z tablicy?
3. Jak zmienić liczbę zmiennoprzecinkową w liczbę całkowitą?

Canvas:

1. Manipulowanie pikselami podstawy
2. Jak sprawdzić ile czasu upłynęło od momentu startu animacji?
3. Efekt przejścia - manipulowanie kanałem alpha

Dodałem nowy dział do bloga: demo. Będę tam publikować działające przykłady kodu głównie opisywane we wpisach.

Narysowałem także jeden komiks:

1. CRUD Dev - It ain't much but it's honest work

Przeczytałem pięć książek:

1. Na wschód od Edenu - John Steinbeck
2. How to make a video game all by yourself - Matt Hackett
3. 48 praw władzy - Robert Greene
4. Detroit - Charlie LeDuff
5. Birmańskie dni - George Orwell

Przesłuchałem sześć audiobooków:

1. Projekt Hail Mary - Andy Weir
2. The Psychology of Money - Morgan Housel
3. Wyborny trup - Agustina Bazterrica
4. Dorośli - Marie Aubert
5. The first 20 hours - Josh Kaufman
6. How to talk to anyone - Leil Lowndes

W JavaScript jest na to kilka sposobów:

const number = 12.75;

Funkcja parseInt

parseInt(number); // 12

W przypadku gdy konwersja się nie powiedzie zwróci NaN:

parseInt('test'); // NaN
parseInt(undefined); // NaN
parseInt(null); // NaN

Funkcja floor

Math.floor(number); // 12

W przypadku gdy konwersja się nie powiedzie zwróci NaN:

Math.floor('test'); // NaN
Math.floor(undefined); // NaN
Math.floor(null); // NaN

W przypadku null zwróci 0:

Math.floor(null);

Operator |

number | 0; // 12

Jeśli konwersja się nie uda, zwróci 0:

'test' | 0; // 0
undefined | 0; // 0
null | 0; // 0