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

Node.js | Цвета в консоли Зачастую проекты на Node.js очень часто и много пишут в консоль. Это, конечно, может быть и хорошо, но иногда становится очень трудно ориентироваться в консоли. Правильным решением будет разделить вывод в консоль с помощью специальных методов объектов console, например, console.warn, console.error. Эти добавят красок. Но можно пойти дальше. С помощью пакета chalk. Поддерживает 16 миллионов цветов (с помощью Truecolor), жирный текст, подчеркивание и многое другое. Пример

var chalk = require('chalk')
console.log(
  chalk.bgYellow('sWebDev'),
  chalk.bgCyan('is'),
  chalk.bgMagenta('beautifull')
)

HTML | Progress Progress tag - Индикатор выполнения задачи любого рода. <label for="file">Downloading progress:</label> <progress id="file" value="32" max="100"> 32% </progress> С помощью JS можно сделать его динамичным как в примере ниже

Node.js | Создание атласа спрайтов Атлас спрайтов - файл с несколькими изображениями. В случае Web разработки используются в связке с CSS для оптимизации сайта. Можно собирать атласы в ручную, а можно воспользоваться пакетом spritesmith. Пример

var fs = require('fs')
var Spritesmith = require('spritesmith')

var sprites = ['fork.png', 'github.png', 'twitter.png']
Spritesmith.run({ src: sprites }, (err, result) => {
  fs.writeFileSync('spritesheets.png', result.image)
  console.log('coordinates:', result.coordinates, '; properties:', result.properties)
})

SQL | BETWEEN В условиях SQL существуют специальные операторы, например, IN и LIKE. BETWEEN - тоже в их числе. Синтаксис: expression BETWEEN start AND end Оператор позволяет выбрать строки, в которых значение expression лежит в диапазоне включительно от start до end. Другими словами, это аналог использования операторов больше или равно и меньше или равно. Оператор можно использовать не только с числовыми значениями, но и со строками, например, если требуется выбрать строки, столбец 'name' которых начинается с 'Б' и заканчивается на 'Д': name BETWEEN 'Б' AND 'Е' Стоит отметить, что нужно указать именно E, поскольку при сравнении строк неравной длины строка 'Д' дополнится пробелами, а следовательно, условный 'Данил' не попадёт в итоговую выборку.

React | Mapbox Mapbox GL JS - отличная библиотека для создания современных веб-карт. Разработан на основе WebGL и полностью открытый исходный код. Бесплатно до тех пор, пока не будет превышен определенный уровень трафика;

Стань Go-разработчиком за 10 месяцев Получить востребованную профессию Go-разработчика, собрать 5 проектов в портфолио и найти работу в IT — реально. В образовательной экосистеме GeekBrains от Mail.Ru Group стартует новый поток на онлайн-курсе «Go-разработчик» для всех, кто хочет изучить Golang! Go-разработчики зарабатывают в месяц от 150 тысяч, все больше компаний переходят на Go, а значит вы повысите свои шансы на трудоустройство и рекрутеры уже через год начнут за вами охотиться. Только для подписчиков канала, скидка по промокоду GO_TELEGRAM_MFFVWEX4XTH9ALYY GO!

Знания основ HTML и CSS нужны всем, кто хочет работать с вебом, независимо от того, планируете ли вы стать разработчиком. Дизайнерам, контент-менеджерам, интернет-маркетологам и руководителям проектов также пригодится умение внести изменения на сайте. Регистрируйтесь на бесплатный курс «Основы HTML и CSS» в Нетологии, где вы научитесь: ✔️ Вносить правки в HTML-код страницы и верстать текстовые блоки; ✔️ Менять оформление и стиль отдельных элементов сайта; ✔️ Основам клиент-серверного взаимодействия. По промокоду BACKTOSCHOOL действует скидка 20% на все онлайн-курсы Нетологии 🎁 Бесплатная регистрация ↓ http://netolo.gy/fTq

CSS | Initial letter Это свойство CSS, которое выбирает первую букву элемента и определяет количество строк, которые будет занимать эта буква. .subhead::first-letter { initial-letter: 2; color: orange; font-weight: bold; margin-right: .75em; }

PHP | Взаимодействие с FTP С помощью PHP можно закачивать и скачивать файлы с FTP сервера. Для начала необходимо подключиться к серверу и авторизоваться:

$conn = ftp_connect('localhost');
$auth_result = ftp_login($conn, 'username', 'password');

Теперь можно скачать с сервера файл с помощью ftp_get() и загрузить на сервер с помощью ftp_put():

ftp_get($conn, 'путь_к_локальному_файлу', 'путь_к_файла_на_сервере', FTP_BINARY);
ftp_put($conn, 'путь_к_файла_на_сервере', 'путь_к_локальному_файлу', FTP_BINARY);

Важно не забыть закрыть соединение: ftp_close($conn);

HTML | fieldset Элемент <fieldset>...</fieldset> предназначен для группировки элементов, связанных друг с другом, разделяя таким образом форму на логические фрагменты. Каждой группе элементов можно присвоить название с помощью элемента <legend>, который идет сразу за тегом <fieldset>. <form> <fieldset> <legend>Контактная информация</legend> <p> <label for="name">Имя <em>*</em> </label> <input type="text" id="name"> </p> <p> <label for="email">E-mail</label> <input type="email" id="email"> </p> </fieldset> <p><input type="submit" value="Отправить"></p> </form>