Что такое SSR

SSR — (анг. аббревиатура от Server Side Rendering) это технология, которая позволяет, с помощью Node.js, запускать JavaScript код на сервере и готовый результат отправлять пользователю.

SSR нужен в первую очередь, для оптимизации скорости работы сайта и SEO продвижения.

Оптимизация
Когда пользователь заходит на сайт, сделанный с помощью JavaScript, то все расчеты и отрисовка графических элементов возлагается на его браузер. SSR помогает снизить нагрузку на браузер пользователя, это особенно важно, если пользователь использует телефон или слабый компьютер.

SEO
Когда поисковая система заходит на сайт, сделанный с помощью Ajax-технологий или какого-нибудь современного фреймворка, похожего на React или Vue.js, то видит пустой HTML документ без какого-либо контента.
Если на сайте есть SSR, то страница будет выглядеть как обычный веб-документ со всеми нужными текстами и метаданными.

Есть готовые решения, которые помогают разработчику быстро внедрить SSR в проект, например, Next.js для React.

SQL | Синтаксис

В SQL Ключевые слова ( SELECT, FROM, WHERE и т.д.) нечувствительны к регистру. Традиция писать их Caps-ом началась из-за того что раньше в редакторах не было подсветки кода, сейчас таких уже не встретишь, так что этот подход сейчас только отвлекает внимание.

В статье вы найдете еще больше хороших практик для написания SQL кода.

Отправка E-mail в NodeJS

Для отправки E-mail в Node js приложениях используется npm модуль nodemailer.

Установка в проект:
npm install nodemailer --save

В первую очередь необходимо создать transporter, который хранит всю конфигурацию SMTP. Для создания transporter используется метод createTransport(), который принимает объект со следующими полями:

1. host - адрес почтового сервера;
2. port - порт почтового сервера;
3. secure - булевое значение, задается true, если используется SSL, в таком случае значением port должно быть 465;
4. auth - объект со свойствами user и pass, в которых указывается логин и пароль используемого почтового аккаунта соответственно.

Отправка осуществляется вызовом метода sendMail() у объекта transporter. Метод sendMail() принимает объект со структурой:

1. from - email адрес отправителя сообщения
2. to - адрес получателя
3. subject - тема сообщения;
4. text - текст сообщения;
5. html - текст сообщения в формате HTML;
6. attachments - прикрепленные к сообщению файлы.

Повышаем безопасность сайта

Если на клиенте и на сервере не происходит валидация введенных данных пользователем ( например в разделе комментарии, где будет каждый раз создаваться новая HTML разметка) то злоумышленник может внедрить вредоносный JavaScript код на эту страницу. Самые популярные XSS атаки - подмена страницы, либо получения COOKIE пользователей.

Так же, если нет проверки введенных данных, то можно получить доступ к БД через SQL injection
Если стоит простая проверка -
SELECT * FROM users WHERE login='$login' AND password = '$pass';
При вводе в поля логина и пароля '1' or '1' = '1' можно получить доступ к закрытым данным ( или если стоит платная регистрация ), так как это выражение вернет TRUE и пустит в систему.

Тестирование Web UI в NodeJS

Рассмотрим несколько инструментов для тестирования, доступных в NodeJS

Mocha - это Javanoscript-фреймворк для тестирования. Он имеет синтаксис в стиле BDD (Behavior-driven development) и позволяет выполнять тестирование на основе асинхронных вызовов. Он также поддерживает различные assert библиотеки, такие как Chai.

Chai - это библиотека утверждений (assertion library ) для NodeJS и браузера, которая прекрасно сочетается с любой средой тестирования Javanoscript.

CasperJS - это вспомогательная библиотека для построения сценариев навигации. Она часто используется с PhantomJS, но на самом деле он также поддерживает SlimerJS, который является еще одним "headless browser" с механизмом рендеринга Gecko.

PhantomJS - это headless browser с механизмом рендеринга WebKit. Позволяет запускать браузерные тесты в автономной системе

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();
// работа с переменными сессии
?>