Frontender Libs - обзор библиотек JS / CSS – Telegram
Frontender Libs - обзор библиотек JS / CSS
8.09K subscribers
2.04K photos
735 videos
4 files
247 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Какое CSS свойство нужно прописать, что бы скрыть border в пустой ячейке ( <td></td> ). Табл №1
Anonymous Quiz
38%
empty-cells: hide
4%
empty-cells: show
43%
border-collapse : none
15%
outline-color: hide
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();
// работа с переменными сессии
?>
This media is not supported in your browser
VIEW IN TELEGRAM
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 задает полную непрозрачность цвета.
Как записать полностью насыщенный синий цвет со стандартной яркостью и с 82% непрозрачностью?
Anonymous Quiz
3%
hsla( 600, 0%, 50%, 82 )
61%
hsla( 240, 100%, 50%, 0.82 )
10%
hsla( 120, 50%, 100%, 82 )
26%
hsla( 240, 50%, 100%, 0.82 )
Как вывести строки, в которых присутствует 'Red' без использования OR?
Anonymous Quiz
48%
WHERE 'Red' IN ( C1, C2, C3 )
10%
WHERE 'Red' BETWEEN ( C1, C2, C3 )
29%
WHERE 'Red' CONCAT ( C1, C2, C3 ) LIKE '%Red%'
13%
Нет способа
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 будет обработано всего один раз.
Семь основных методологий разработки

В современной практике модели разработки программного обеспечения многовариантны. Нет единственно верной для всех проектов, стартовых условий и моделей оплаты.

Самые используемые методологии:
1. «Waterfall Model» (каскадная модель или «водопад»)
2. «V-Model»
3. «Incremental Model» (инкрементная модель)
4. «RAD Model» (rapid application development model или быстрая разработка приложений)
5. «Agile Model» (гибкая методология разработки)
6. «Iterative Model» (итеративная или итерационная модель)
7. «Spiral Model» (спиральная модель)

В статье вы найдете детальнее про каждую методологию и рекомендации когда их применять
This media is not supported in your browser
VIEW IN TELEGRAM
HTML | Datalist

Тег datalist позволяет добавить к полю выпадающие подсказки без сторонних библиотек

  <input 
type="text"
list="country-value"
autocomplete="off"
>
<datalist id="country-value">
<option value="HTML">HTML</option>
<option value="JS">Javanoscript</option>
<option value="PHP">PHP</option>
</datalist>


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

Если autocomplete включен (по умолчанию включен), то к значениям, которые вы задали в теге datalist, будут добавляться значения, которые пользователь вводил в это поле ранее