Frontender Libs - обзор библиотек JS / CSS

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

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

PHP | Session & Cookies Поток авторизации с помощью сессий и файлов куки: 1. Пользователь открывает страницу авторизации на сайте. 2. Проверка введенных учетных данных сервером. 3. Создание идентификатора сессии (уникальное случайное число). 4. Пользователю передается идентификатор сессии (отправляется в куки ), а также любой запрошенный ресурс. 5. Браузер получает ответ от сервера. Если куки разрешены браузером, он сохранит запишет их к идентификатору сессии. 6,Для последующих запросов инициализируются куки с этим идентификатором сессии, создавая переменную суперглобального массива $_SESSION с данными, хранящимися в файле сессии. Функцию session_start должна вызываться в начале скрипта, прежде чем какой-либо вывод будет отправлен в браузер. В противном случае вы столкнетесь с печально известными заголовками Headers are already sent.

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

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 | коллективный доступ к файлу Когда одновременно предпринимается попытка записи в файл более чем одним пользователем, файл может быть поврежден или же пользователь может получить весьма странные результаты. 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' успешно обновлен"; ?>

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); Аналогично для || ??

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

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

11 видов кэширования для современного сайта Учитывая постоянную сетевую нагрузку, без кэширования вы не сможете создать ни один проект. Скорость работы сайта — один из основных признаков его успешной работы. Чтобы оптимизировать работу сервера и ускорить сайт, стоит использовать кэширование файлов. Выделим 2 категории: Браузерное кэширование (клиентское ) позволяет кэшировать - файлы и изображения - https - центр сертификации - Разметку страницы Серверное кэширование - страницу целиком - результаты компиляции php-файлов - отдельные блоки страницы - php на основе неразделяемых ресурсов - php на основе общих ресурсов - mysql на основе query cache - mysql результатов работы, агрегирующие таблицы Настроить серверное кэширование или браузерное можно абсолютно бесплатно самостоятельно. На это требуется не так много времени, как кажется.

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 создает конфликты. Чтобы избежать подобных проблем, рекомендуется разделять проект на модули.