CSS | Map Creator

Выполнено с помощью препроцессора SCSS, где автор показал много его возможностей.

JS | Array

Методы, которые не изменяют массив, а возвращают его в новом представлении:
concat() - возвращает новый массив, состоящий из данного массива, соединённого с другим массивом

['a', 'b', 'c'].concat([1, 2, 3])
// result in ['a', 'b', 'c', 1, 2, 3]

join() - объединяет все элементы массива в строку как toString(), можно указать свой разделитель.

['Fire', 'Air', 'Water'].join('-')
// "Fire-Air-Water"

slice() - извлекает диапазон значений и возвращает его в виде нового массива.

['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'].slice(2,4)
// ["Lemon", "Apple"]

toLocaleString() - возвращает локализованное строковое представление

[1, 'a', new Date('21 Dec 1997 14:12:00 UTC')].toLocaleString('en', { timeZone: 'UTC' })
// "1,a,12/21/1997, 2:12:00 PM"

indexOf() - возвращает первый (наименьший) индекс элемента, или -1, если значение не найдено.

['Fire', 'Air', 'Water','Air'].indexOf('Air')
// 1

lastIndexOf() -возвращает последний (наибольший) индекс
['Fire', 'Air', 'Water','Air'].lastIndexOf('Air')
// 3

SQL | Произведение значений столбца

К сожалению, эту задачу нельзя решить стандартныйми функциями SQL практически ни в одной СУБД. Но можно пойти через свойства логарифмов: логарифм произведения равен сумме логаримов. Следовательно, если мы применим exp к сумме логарифмов значений, мы получим нужный результат:
SELECT exp(SUM(log(value))) product FROM (
VALUES (2),(3),(4),(5)
) X(value);
Однако данное решение не будет работать с числами, которые меньше либо равны нулю, так как для них логарифм не определён.
Для учета "недопустимых" значений доработаем наше решение в соответствии со следующим алгоритмом:
- Если среди значений есть нули, то результатом будет 0.
- Если число отрицательных значений нечетное, то домножаем произведение абсолютных значений столбца на -1.
- Если число отрицательных значений четное, то результатом будет произведение абсолютных значений столбца.
В результате получаем возможность считать произведение значений столбца.

HTML | Target

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

Его основные значения
_self — страница загружается в текущее окно ( по умолчанию );
_blank — страница открывается в новом окне браузера;
_parent — страница загружается во фрейм-родитель;
_top — страница загружается в полное окно браузера.
_new — страница загружается в новом окне, и все следующие переходы с этим атрибутом будут открываться в этом же окне ( где бы оно не находилось ).

Node.js | node-fetch

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

Преимущества
- Почти полностью совместим с window.fetch API
- Использует нативные потоки Node как для тела запроса, так и для ответа
- Использует нативные promise и async функции

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.