PHP | экранирование строк

Экранирование нужно для безопасности когда одни ЯП пишут текст для других ЯП, чтобы те могли его "прочитать".Если пользователь явно пытается "внедрить" вам какой-то скрипт, вы можете легко предотвратить его. Вы всегда должны экранировать пользовательские данные прежде, чем поместить их в SQL-запрос (это же касается и HTML).

Функция addlashes() — экранирует строку с помощью слешей т.е возвращает строку с обратным слешем перед символами :
(одинарная кавычка) ‘ ,
(двойные кавычки) " ,
(обратный слэш) \ ,
NUL (байт NULL)
Функция принимает в качестве параметров только строку.

<?php
// PHP program to demonstrate the
// working of addslashes() function

$str = addslashes('twinkle loves "coding"');

echo($str);
?>

Output : twinkle loves \"coding\"

MeteorJS | Node.js Framework

MeteorJS подойдет для всех потребностей, от простых приложений, таких как финансовый отчёт, до управления данными больницы (выходит менее 2 тыс. строк back-end и front-end кода)

С помощью готовых модулей этого фреймворка можно создать рабочее приложение за считанные часы, что требовало бы много затрат времени в стеке MEAN (MongoDB, Express.js, AngularJS and Node.js).

Также хорошо MeteorJS справляется с разными компиляторами, такими как CoffeeScript.
На сайте фреймворка есть интерактивные обучения, в которых можно создать TO-DO app или Whatsapp clone

Инструменты для отладки JavaScript

Для того чтобы разобраться в ошибках в коде существуют инструменты отладки.

№1: инструменты разработчика Chrome — отладчик
Добавьте команду debugger в ту строку вашего кода, в которой вам хотелось бы исследовать значения переменных и перезагрузите страницу.
Исполнение приостановится на команде debugger и вы сможете исследовать программу.

№2: React Developer Tools
Если ваше приложение основано на React и нужно проверить значения свойств или состояний, вам стоит познакомиться с расширением React Developer Tools для Chrome.

№3: отладка серверного кода и Node Inspect
Node Inspect похож на инструменты разработчика Chrome, но предназначен он для серверного кода.

№4: проверка ответа сервера — Postman
Postman — это настольное приложение, его надо скачать и установить. Оно позволяет выбрать вид запроса (среди них — GET, POST, PUT, PATCH, DELETE), добавить нужную вам конечную точку, а если надо — то и данные для аутентификации, и отправить запрос на сервер.

GraphQL Editor

Это визуальный инструмент для составления GrapthQL запросов

Преимущества:

- облегчает понимание GraphQL
- создает запросы без написания кода
- делает графическую модель вашей схемы
- подходит новичкам и опытным пользователям
- поддерживает командную разработку

Визуализация крайне полезна для работы со сложными запросами, это позволит вам составлять их быстрее и снизит вероятность багов

Что такое 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