Frontender Libs - обзор библиотек JS / CSS – Telegram
Frontender Libs - обзор библиотек JS / CSS
8.09K subscribers
2.04K photos
735 videos
4 files
247 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Какое CSS свойство позволяет печатать справа-налево?
Anonymous Quiz
15%
direction: rtl;
9%
writing-mod: vertical-rl;
40%
text-orientation: right;
36%
text-direction: rtl;
HTML | Target

Элемент <a> поддерживает атрибут target

Его основные значения
_self — страница загружается в текущее окно ( по умолчанию );
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
_new — страница загружается в новом окне, и все следующие переходы с этим атрибутом будут открываться в этом же окне ( где бы оно не находилось ).
Что будет выведено в консоль?
Anonymous Quiz
45%
beautiful beautiful @sWebDev @sWebDev
28%
is beautiful is @sWebDev
6%
is @sWebDev is beautiful
Node.js | node-fetch

node-fetch - npm пакет, который позволяет отправлять сетевые запросы на сервер (аналогично window.fetch браузерного API).

Преимущества
- Почти полностью совместим с window.fetch API
- Использует нативные потоки Node как для тела запроса, так и для ответа
- Использует нативные promise и async функции
Что выведет консоль?
Anonymous Quiz
14%
10
11%
11
53%
12
22%
13
PHP | Установка зависимостей без Composer

Менеджер пакетов - это, конечно, хорошо, но что делать, если нет возможности им воспользоваться (например, если хостинг его не поддерживает)?
В такой ситуации на помощь приходит сервис PHP download. С его помощью можно выбрать необходимые пакеты и скачать их в виде обычного zip архива. Сервис всё делает за нас, останется лишь скопировать содержимое архива на сайт и подключить autoload.php.
CSS | Flex-basis

Свойство flex-basis может принимать те же значения, что и свойства width или height. Значение по умолчанию — auto.Размер может относиться к ширине по умолчанию и высоте (в случае flex-direction: column).

.item {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
}

В приведенном выше примере ширина первого элемента составляет 50%. Важно установить для параметра flex-grow значение 0, чтобы размер элемента не превышал 50%.
PHP | Хранение паролей

Хранить пароли пользователей в базе данных в открытом виде - очень плохая идея. Куда правильней будет хранить его хеш - строка, обычно определённой длины, характеризирующая пароль. Сгенерировать хеш можно, например, функциями md5() или sha1(), но ввиду быстроты работы этих алгоритмов шифрования это так же не даст необходимой безопасности. Как же быть?
С пятой версии PHP появились встроенные методы хеширования паролей. Так, получить хеш пароля можно функцией password_hash('ПАРОЛЬ', PASSWORD_DEFAULT), его можно без опаски сохранить в базу данных. А проверить валидность пароля можно функцией password_verify('ПАРОЛЬ_ТРЕБУЮЩИЙ_ПРОВЕРКИ', 'ПОЛУЧЕННЫЙ_РАНЕЕ_ХЕШ').

Пример использования
$pass = '8aZdYaB0';
$hash = password_hash($pass, PASSWORD_DEFAULT);
if (password_verify($pass, $hash)) {
echo ("Пароль верный");
} else {
echo ("Пароль неверный");
}
echo (", ");
if (password_verify('1s8', $hash)) {
echo ("Пароль верный");
} else {
echo ("Пароль неверный");
}
CSS | REM

При использовании EM - каждый div наследует размер шрифта от своего родителя, каждый раз увеличивая
body {
font-size: 14px;}
div {
font-size: 1.2em;}

<div>
16.8px
<div>
20.16px
<div>
24.192px
</div>
</div>
</div>

Если вам нужно задать одинаковый размер подойдет rem. Буква "r" в rem означает root (корень); то есть размер шрифта задается относительно корневого элемента; в большинстве случаев это будет html элемент
html {
font-size: 14px;}
div {
font-size: 1.2rem;}
В каждом из трех вложенных элементов в прошлом примере, шрифт будет равен 16.8px.
JS | Filter()

Метод
filter() - создает новый массив с элементами, которые подпадают под заданные критерии.

arr.filter(callback(element[, index, [array]])[, thisArg])

callback - функция, которая будет вызвана для каждого элемента массива (return true , false)
element - текущий обрабатываемый элемент в массиве.
index- индекс текущего обрабатываемого элемента в массиве.
array - массив, по которому осуществляется проход.
thisArg - значение, используемое в качестве this при вызове функции callback.

Пример, как получить массив первых буквы каждого слова в строке?
var sentence = "Senior Web Dev";
// Запишем каждый символ в массив
var arrSent = sentence.split("")
var subset = arrSent.filter((element, index, array) => {
if (index == 0) {
return true;
} else if (array[index - 1] === " ") {
return true;
}
})
// ["S", "W", "D"]
SQL | Чем отличается WHERE от HAVING?

Кажется, что с помощью WHERE можно решить любую задачу. Однако, предположим, у нас есть таблица результатов экзаменов с именем экзамена, номером ученика и самой оценкой за экзамен. Как выбрать учеников и экзамен с минимальной оценкой 5?
В данной ситуации на помощь приходит как раз таки HAVING - дополнительное условие по уже имеющейся выборке.
Из документации имеем, что основное отличие WHERE от HAVING заключается в том, что WHERE сначала выбирает строки, а затем группирует их и вычисляет агрегатные функции (таким образом, она отбирает строки для вычисления агрегатов), тогда как HAVING отбирает строки групп после группировки и вычисления агрегатных функций.
Следовательно, задачу можно решить одним запросом SELECT StudentId FROM EXAM_RESULT GROUP BY StudentID HAVING MIN(Mark) = 5

Почему иначе - сложнее?
Чтобы понять, что у ученика минимальная оценка 5, нужно сначала сгруппировать значения ученика. Иначе база данных получит минимальную оценку у всех учеников.
Свойство object-fit, которое сохраняет пропорции при заполнении всего содержимого поля элемента ?
Anonymous Quiz
21%
fill
34%
contain
40%
cover
5%
scale-down
HTML | EMMET

EMMET - плагин, который позволяет значительно увеличить скорость верстки за счет комбинации команд и аббревиатур.
Работает во всех популярных IDE

Несколько примеров:
- Комментарий после закрывающего тега с информацией о элементе
div.class|c
<div class="class"></div>
<!-- /.class -->

- Умножение
ul>li*3 
<ul>
<li></li>
<li></li>
<li></li>
</ul>

- Атрибуты
td[rowspan=2 colspan=3 noscript]
<td rowspan="2" colspan="3" noscript=""></td>