5 способов анимировать приложение React

1. С помощью CSS
Если у вас простая анимация и вы беспокоитесь о размере своего приложения.Когда вы используете этот способ вместо импорта библиотек браузер тратит меньше ресурсов.

2. ReactTransitionGroup
Этот дополнительный компонент был разработан парнями из сообщества ReactJs. ReactTransitionGroup легко реализует базовые CSS-анимации и переходы.
Разработчики описывают эту библиотеку как:
«Набор компонентов для управления состояниями компонентов с учетом анимации»

3. React-animations
Библиотека построена на основе анимаций animate.css.

4. React-reveal
Это фреймворк, который позволяет управлять всеми анимациями с помощью props. Также он имеет рендеринг на стороне сервера

5. TweenOne and animation in Ant Design
Это библиотека React UI, которая представляет собой множество простых в использовании компонентов. Ant Design создан китайским конгломератом Alibaba

JS | Округление чисел

JavaScript, как и все ЯП, вычисляет с погрешностью ( 2 квинтилионные ). Это может отразиться на результате при работе с числами, которые представляют значения валют, процентов или размер файла. Поэтому нужно сделать JavaScript округление до целого или до определенного знака после запятой.

Самые популярные способы:

Math.floor -- Округление в меньшую сторону: 3.1 становится 3, а -1.1 — -2.
Math.ceil -- Округление в большую сторону: 3.1 становится 4, а -1.1 — -1.
Math.round -- Округление до ближайшего целого: 3.1 становится 3, 3.6 — 4, а -1.1 — -1.
Math.trunc -- Производит удаление дробной части без округления: 3.1 становится 3, а -1.1 — -1.

Чтобы «обрезать» десятичное число, используются методы

toFixed() -- Производит округление числа до указанного знака в дробной части. 1.1119.toFixed(3) — 1.112
toPrecision() -- Производит форматирование числа до указанной длинны. 15.24563.toPrecision(2) — 15

Nodejs | V8 release v8.5

21 июля вышло обновление движка V8 ( виртуальная машина JavaScript, написанная Google для браузера Chrome на C++ )

Основные обновления:

Promise.any() - как только один Promise выполнится успешно метод возвратит единственный объект Promise со значением выполненного "обещания". Если ни одно из "обещаний" не завершится успешно, тогда возвращенный объект promise будет отклонен(rejected).

String.prototype.replaceAll - простой способ заменить все вхождения подстроки без создания глобального RegExp.
queryString.replace(/\+/g, ' '); ==> queryString.replaceAll('+', ' ');

Операторы логического присваивания - упрощен синтаксис
x &&= y; ==> x && (x = y); Аналогично для || ??

PHP | коллективный доступ к файлу

Когда одновременно предпринимается попытка записи в файл более чем одним пользователем, файл может быть поврежден или же пользователь может получить весьма странные результаты.

flock() - функция ставит в очередь все другие запросы на доступ к файлу до тех пор, пока ваша программа не снимет блокировку. Блокируются только те процессы, которые вызывают эту функцию. Если есть код, который действует напрямую и изменяет файлы, не блокируя их с помощью flock, он всегда сможет обойти блокировку и внести хаос в ваши файлы.
Блокировку следует ставить непосредственно перед внесением изменений в файл и снимать ее сразу же после их внесения.

<?php
$fh = fopen("testfile.txt", 'r+') or die("Сбой открытия файла");
$text = fgets($fh);
if (flock($fh, LOCK_EX))
{
fseek($fh, 0, SEEK_END);
fwrite($fh, "$text") or die("Сбой записи в файл");
flock($fh, LOCK_UN);
}
fclose($fh);
echo "Файл 'testfile.txt' успешно обновлен";
?>

SQL | Вы можете это делать в SQL

1. Математические операции
Простые математические операции могут выполнятся прям в SQL. Например для суммирования чисел в 2 переменные при условии IF обычно используют цикл, но можно сделать это проще
SELECT fk_item, SUM(amount) AS total_paid, IF(is_cash = 1, 'cash', 'credit') as type
FROM payment WHERE fk_item = 2001 GROUP BY fk_item, is_cash;

2.Использование GROUP_CONCAT
Например, вы хотите получить все категории продукта.Чтобы получить это, без каких-либо циклов в коде:

SELECT fk_item, GROUP_CONCAT(DISTINCT fk_refund) refund_ids 
FROM payment WHERE fk_item = ш2001;

3.Обработка строк
Подстрока, конкатенация, регистр, сравнение строк есть в SQL. Например нужно получить first_name и last_name с пробелом между ними.

SELECT CONCAT_WS(" ", firt_name, last_name) AS full_name
FROM table;

4.Сортировка
Можно использовать IF в SQL запросе для сортировки, вместо написания цикла.

Ниже прикреплена статья с примерами, где можно потренироваться.

PHP | Session & Cookies

Поток авторизации с помощью сессий и файлов куки:
1. Пользователь открывает страницу авторизации на сайте.
2. Проверка введенных учетных данных сервером.
3. Создание идентификатора сессии (уникальное случайное число).
4. Пользователю передается идентификатор сессии (отправляется в куки ), а также любой запрошенный ресурс.
5. Браузер получает ответ от сервера. Если куки разрешены браузером, он сохранит запишет их к идентификатору сессии.
6,Для последующих запросов инициализируются куки с этим идентификатором сессии, создавая переменную суперглобального массива $_SESSION с данными, хранящимися в файле сессии.

Функцию session_start должна вызываться в начале скрипта, прежде чем какой-либо вывод будет отправлен в браузер. В противном случае вы столкнетесь с печально известными заголовками Headers are already sent.

<?php
// начало сессии
session_start();
// работа с переменными сессии
?>

X-ray me (SVG)

Небольшой скрипт на JS с использованием 'touchmove', 'mousemove' сделает эффект рентгена с помощью SVG

CSS | HSL

Как работает функция HSL:

color:hsla(60, 100%, 50%, 0.3);

- желтый цвет с полной насыщенностью, стандартной яркостью и 30%-ной непрозрачностью

Разберем параметры:
1.Выберите значение от 0 до 359 из цветого круга, где 0 - красный, зеленый - 120, синий - 240. Так же 0 = 360 = 720, как и остальные значения.
2.Выберите насыщенность ( рамытость и яркость) от 0 до 100%, где 0 - абсолютно черный, а 100% - белый.
3.Выберите яркость от 0 до 100%, где 0 - сделает черным, а 100% белым.
4. Необязательный параметр, значение которого задается числом с плавающей точкой в диапазоне от 0 до 1. Значение 0 определяет, что цвет полностью прозрачный, а число 1 задает полную непрозрачность цвета.

PHP | Наследование класса

Как только класс будет создан, из него можно будет получить подкласс. Это достигается за счет использования инструкции extends.
Например, у нас есть класс User, который создается при регистрации

class User
{
  public $name, $password;
  function save_user()
  {
   echo "Сохраняем данные";
  }
}

Если пользователь захочет добавить данные
class UpdateInfo extends User
{
public $phone, $email;
function display()
{
echo "Name: " . $this->name . "<br>";
echo "Pass: " . $this->password . "<br>";
echo "Phone: " . $this->phone . "<br>";
echo "Email: " . $this->email;
}
}
Таким образом мы расширили класс User

🔥 Frontend skills matter?

Всех неравнодушных к фронтенду приглашаю на наш второй канал Senior Frontend

Там можно качать скиллы по HTML, CSS, JS, проходить викторины, общаться в обсуждениях

Node.js | Однократное событие

Используйте метод класса EventEmitter once(eventName, listener) для реакции на событие только один раз.
Например вам нужно изменить эхо-сервер так, чтобы воспроизводил только первый фрагмент отправленных ему данных.

const net = require('net');
const server = net.createServer(socket => {
  socket.once('data', data => { 
    socket.write(data);
  });
});
server.listen(8888);

Событие data будет обработано всего один раз.