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')
)

CSS | currentColor

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

currentColor можно прописать как значение fill для noscript-иконки, и она всегда будет совпадать с цветом окружающего её текста.

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

HTML | Прилипающая шапка сайта

Прилипающая шапка - это наверное самый распространённый вариант реализации главного меню.

Особое внимание нужно уделить нескольким вещам:
- независимость от ширины экрана
- визуальное изменение при начале прокрутки
- z-index относительно остальной части сайта

Для регулирования разметки внутри меню удобно использовать css grid, не придётся жёстко задавать размеры каждому блоку отдельно, а управление сеткой делается одной строкой в свойстве grid-template-columns.

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

Для перекрытия шапкой содержимого сайта ей можно поставить z-index: 10 и при необходимости увеличить.

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

HTML | Прижатый футер

Подвал сайта всегда должен быть прижат к низу экрана, если дизайн не требует другого, задача не самая сложная, но требующая определенных знаний.

Вот некоторые способы прижать подвал:
- абсолютное позиционирование
- минимальная высота контента
- табличная верстка
- css flex
- css grid

Рассмотрим два последних варианта, как наиболее актуальные. В обоих случаях нам нужно указать высоту html и body 100% и разделить сайт на две части - контент и футер.

css flex
Оборачиваем сайт во flex-контейнер, меняем направление основной оси флекса на вертикальную и указываем margin-top: auto для футера, тогда он отступив на максимально возможное расстояние от контента прижмется к низу.

css grid
Оборачиваем сайт в grid-контейнер, указываем футеру align-self: end и всё, футер прижат.

Node.js | Язык шаблонов EJS

В прошлый раз мы создали Express приложение и указали EJS в качестве движка рендеринга. Пришло время рассказать о нём немного подробнее.

Самые любознательные уже осмотрели структуру сгенерированного приложения и нашли index.ejs в директории views. С помощью особого тега (<%=) на страницу выводится значение переменной noscript. Но существуют и другие теги:
<% - этот тег не выводит информацию, но его можно использовать для условий и циклов;
<%= - этот тег мы уже использовали, с помощью него можно вывести значение переменной, но стоит сделать замечание: значение выводится экранированным;
<%- - этот тег так же выводит значение, но уже без экранирования. Вывод переменной, допустим, со значением '<h1>hi!</h1>' создаст новый элемент h1;
<%# - тег комментария, он не выполняется и не выводится.

Шаблоны EJS поддерживают подргузку других шаблонов:
<%- include(template, params); %>
template - путь шаблона, например, 'user/show'
params - параметры, что попадут в шаблон.

CSS | Способы задания цвета

Базовые цвета

color: aqua

RGB
Самое распространенный вариант, каждое число представляет собой количество красного(Red), зеленого(Green) и голубого(Blue) цвета в смеси.

#f00 - #rgb
#ff0000 - #rrggbb
rgb(255, 0, 0)
rgb(100%, 0%, 0%)

RGBA
То же самое представление цвета, но с добавлением альфа-канала, который отвечает за прозрачность.

белый с прозрачностью 50%
rgba(255, 255, 255, 0.5)
rgba(100%, 100%, 100%, 0.5)
#fff8 - #rgba
#ffffff88 - #rrggbbaa

HSL
Способ указания цвета в зависимости от его тона(Hue) насыщенности (Saturation) и яркости (Lightness ).

hsl(120, 100%, 25%) - тёмно зеленый
hsl(120, 100%, 75%) - светло зеленый

HSLA
То же самое, но с альфа-каналом.

hsla(30, 100%, 50%, 0.1) - очень прозрачный оранжевый

transparent
ключевое слово обозначающее прозрачный цвет, эквивалент rgba(0, 0, 0, 0).

currentColor
ключевое слово обозначающее текущий цвет.

Node.js | Индикатор загрузки для консоли

ora - ещё один интересный npm пакет, позволяющий украсить консольный вывод, а заодно и скрасить ожидание пользователям вашего приложения. С помощью этого пакета можно отобразить индикатор загрузки.

Особенности
- Поддержка промисов
- Поддержка эмодзи
- Возможность кастомизации индикатора

JS | querySelector

Метод querySelector находит первый элемент, подходящий условию и возвращает его, а querySelectorAll находит все элементы и возвращает их список.

Эти методы максимально упрощают взаимодействие разработчика с элементами страницы, теперь не нужен jQuery чтоб получить набор элементов по сложному селектору, достаточно написать:
вернет несколько элементов

вернет первый элемент из списка

Данные возвращаются в формате NodeList, для обработки этого списка в цикле можно использовать разные способы:

 divs = document.querySelectorAll('div');
// spread operator ES6
[...divs].map(el => el.innerText); 

// обычный цикл for
for (var i = 0; i < divs.length; i++) {
    console.log('elem: ', divs[i]); 
}

CSS | Всплывающие подсказки

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

Посмотреть принцип работы и поиграть со шрифтами можно на codepen

Node.js | Express и несколько доменов

Express приложение мы уже создали, с помощью EJS его шаблонизировали, что дальше?
Дальше нужно решить вопрос с доменами.

Конечно, есть случаи, когда достаточно повесить приложение на ip адрес, но это, на самом деле, не такая уж и хорошая практика. Конечно нужен домен. А если доменов несколько? И на каждый домен нужно своё приложение? На помощь приходит пакет vhost.

Пользоваться им крайне просто.
Создаётся главное Express приложение:
var mainApp = express()
Затем через метод use к нему подключаются нужные нам обработчики других приложений (либо, допустим, обработчики одного и того же приложения):
mainApp.use(vhost('first.example.com', firstApp))
mainApp.use(vhost('second.example.com', secondApp))
Остаётся только поставить слушателя на нужный порт:
mainApp.listen(80)

JS | window.location

window.location Получает/устанавливает URL страницы и его компоненты

Свойства объекта Location:
hash - часть URL, которая идет после символа '#', включая этот символ
host - адрес сайта и порт
href - весь URL страницы
hostname - адрес сайта
pathname - строка пути относительно корня
port - номер порта
protocol - протокол
search - get-параметры, включая символ "?"

Примеры использования

//Проверить хеш страницы и выполнить код
if(window.location.hash == '#someHash'){
    doSomething();
}
//Перейти по другому адресу
window.location = "http://javanoscript.ru"
//перезагрузить страницу
window.location.reload()

CSS | :empty

Псевдокласс :empty находит любой элемент, у которого нет потомков. Учитываются элементы и текст (включая пробелы). Комментарии не повлияют на то, что элемент будет рассматриваться как не пустой.

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

Для того чтобы выбрать все не пустые элементы можно скомбинировать :empty с :not

p:not(:empty) {
/* все не пустые абзацы */
}

JS | arcticModal

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

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

Node.js | Как подружить Apache с Express приложением?

Иногда возникают ситуации, когда нам необходим именно Apache в качестве веб-сервера.
Например, у заказчика есть уже настроенный блог на WordPress весит на домене blog.site.ru. Нам необходимо повесить на app.site.ru Express приложение, которое, допустим, слушает 3000 порт. Как быть?

Cоздаём новый файл в директории виртуальных хостов Apache. У меня это /etc/apache2/sites-available/. Назовём его, допустим, app.site.ru.conf, чтобы было понятно к какому поддомену относится этот файл.
Далее в файл нужно добавить следующее содержимое:

<VirtualHost *:80>
  ServerName app.site.ru
  ServerAlias app.site.ru
  <Proxy *>
    Order deny,allow
    Allow from all
  </Proxy>
  ProxyPass / http://localhost:3000/
  ProxyPassReverse / http://localhost:3000/
</VirtualHost>

Остаётся только включить сайт:
sudo a2ensite app.site.ru

Всё очень просто.

В дополнение стоит сказать, что таким образом можно добавить несколько приложений на разных портах.