NodeJS модули

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

Модули могут быть устанавливаемые (с использованием npm) и собственные, которые создаются в процессе разработки.

Модули NPM
По умолчанию все npm модули устанавливаются в директорию node-modules, создаваемую в директории, из которой была вызвана команда установки.
npm install express --save

Собственные модули
Собственным модулем является любой JavaScript файл приложения, который экспортирует с помощью объекта exports функции или переменные.

require()
Для подключения модулей используется функция require(). Если подключается npm модуль, то функции необходимо передать только его название.
const express = require('express');
Для подключения собственных модулей необходимо указать путь.
const myModule = require('./my-module');

npm vs yarn

Npm - это менеджер пакетов, входящий в состав Node.js. Он использует базу данных, состоящую из общедоступных и приватных пакетов. Пользователи могут получить доступ к базе через сайт или через консоль.

Yarn берет информацию про модули из базы npm. По сути это новый установщик который по прежнему базируется на структуре заданной npm. В нем доступны все те же пакеты что и в npm, но он имеет ряд преимуществ.

Особенности Yarn:
1. При установке пакета npm выполняет необходимые действия последовательно. Yarn в свою очередь производит несколько установок за один шаг.

2. Yarn быстрее всех версий npm.

3. Так как Yarn устанавливает зависимости только с файлов yarn.lock или package.json он считается более безопасным.

Несмотря на то, что Yarn считается улучшенной версией npm, он все же имеет несколько нерешенных проблем. Например, одновременное использование npm и Yarn создает конфликты. Чтобы избежать подобных проблем, рекомендуется разделять проект на модули.

11 видов кэширования для современного сайта

Учитывая постоянную сетевую нагрузку, без кэширования вы не сможете создать ни один проект.
Скорость работы сайта — один из основных признаков его успешной работы. Чтобы оптимизировать работу сервера и ускорить сайт, стоит использовать кэширование файлов. Выделим 2 категории:

Браузерное кэширование (клиентское ) позволяет кэшировать
- файлы и изображения
- https
- центр сертификации
- Разметку страницы

Серверное кэширование
- страницу целиком
- результаты компиляции php-файлов
- отдельные блоки страницы
- php на основе неразделяемых ресурсов
- php на основе общих ресурсов
- mysql на основе query cache
- mysql результатов работы, агрегирующие таблицы

Настроить серверное кэширование или браузерное можно абсолютно бесплатно самостоятельно. На это требуется не так много времени, как кажется.

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 задает полную непрозрачность цвета.