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

Node.js | Как создать приложение Express Express - гибкий веб-фреймворк для приложений Node.js. Можно написать приложение вручную, а можно воспользоваться специальным генератором. Создаём новый каталог, переходим в него, открываем терминал или powershell. Установим генератор приложений: npm install express-generator -g Теперь сгенерируем приложение в текущей папке: express --view=ejs Тут стоит сделать замечание, опция --view отвечает за движок рендеринга, в данном случае устанавливается ejs. Ещё можно настроить движок стилей, например, less или sass, с помощью опции --css. Осталось установить зависимости: npm install Теперь запускаем приложение: npm start Всё, можно открывать http://localhost:3000

Как стартануть в React в 2020? Выучить React - непростая задача, технология очень объемная и имеет кучу неочевидных ньюансов, которые непросто найти в документации. Тем не менее React разработчики - самые востребованные на рынке фронтендеров, а React стал стандартом для многих IT гигантов - Facebook, Instagram, Netflix ФРОНТЕНД РАЗРАБОТКА НА REACT - русскоязычный курс от Ивана Клешина - практикующего инженера ПО с 15-летним стажем, вероятно известного вам по видео-урокам на YouTube Курс помогает просто и бюджетно войти в React-разработку и включает в себя 📹 12 часов видео-материала 🧩 9 задач + 9 проектов 💰 Стоимость - €30

HTML | Прилипающая шапка сайта Прилипающая шапка - это наверное самый распространённый вариант реализации главного меню. Особое внимание нужно уделить нескольким вещам: - независимость от ширины экрана - визуальное изменение при начале прокрутки - z-index относительно остальной части сайта Для регулирования разметки внутри меню удобно использовать css grid, не придётся жёстко задавать размеры каждому блоку отдельно, а управление сеткой делается одной строкой в свойстве grid-template-columns. Изменение стилей при прокрутке делается через небольшой скрипт который отслеживает событие прокрутки страницы и добавляет/удаляет класс к блоку шапки, а в стилях этого класса уже можно реализовать все необходимые изменения. Для перекрытия шапкой содержимого сайта ей можно поставить z-index: 10 и при необходимости увеличить.

CSS | currentColor currentColor равен значению color текущего элемента, или его родителя, если у элемента не указан цвет. Таким образном можно быстро задать текущий цвет для всех свойств которые могут принимать цветовое значение: border, outline, background, box-shadow и т.д. currentColor можно прописать как значение fill для svg-иконки, и она всегда будет совпадать с цветом окружающего её текста. Крайне удобно использовать currentColor в интерактивных блоках, когда нужно изменить цвет сразу нескольких свойств, например в кнопках при ховере.

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; }