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

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

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

Нужен фидбек

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

HTML | shema.org

Микроразметка — своего рода единый язык, который одинаково понимают и трактуют поисковые роботы Google, Яндекс, Bing, Yahoo. Об этом они «договорились» еще в далеком 2011 году. С помощью микроразметки можно показать роботам, что определенный текст или другие элементы на странице важны и принадлежат к определенному типу данных.

Для добавления микроразметки к блоку на сайте его тегу нужно добавить атрибуты itemscope (указывает что этот блок содержит микторазметку) и itemtype (определяет описываемый тип данных), а его дочерним элементам добавить атрибут itemprop, который укажет что именно содержит этот тег.

Пример разметки:

<div itemscope itemtype="http://schema.org/Movie">
<meta itemprop="name" content="Footloose">
<div itemprop="potentialAction" itemscope itemtype="http://schema.org/WatchAction">
<a itemprop="target" href="http://example.com">Watch</a>
</div>
</div>

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

В прошлый раз у нас был Apache, в этот раз предлагаю подружить Nginx с Express приложением.
Тут всё даже немного проще, открываем конфигурационный файл, выделяем домен и, в раздел location, вставляем следующее содержимое:

proxy_pass http://localhost:3000;
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";

Перезапускаем Nginx. Всё.

Ещё раз напомню, порт выше - порт, который слушает ваше Express приложение.

CSS | Псеводкласс :not

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

все элементы li, кроме первого и последнего
li:not(:last-child):not(:first-child)

все кнопки без атрибута disabled
button:not([disabled])

все элементы с классом link, но без класса is_active
.link:not(.is_active)

Node.js | Запуск приложения на Heroku

Альтернатива разворачиванию приложения на сервере - использование облачных платформ, например, Heroku.
Эта статья - краткое руководство по запуску приложения на этой платформе.

Сначала подготовим приложение, для этого необходимо в package.json в разделе noscripts создать команду start, что будет запускать проект. (Например, так: "node index.js")
Теперь инициализируем Git:
git init
Добавляем все файлы и коммитим:
git add . && git commit -m "first commit"
Установим CLI инструмент Heroku глобально:
npm install -g heroku
Затем необходимо авторизоваться:
heroku login
Теперь создаём Heroku приложение в директории нашего Node.js приложения:
heroku create
Пушим проект в Heroku:
git push heroku master
Готово. В консоли появиться ссылка с нашим сайтом-приложением.

JS | Содержимое элементов страницы

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

На чистом JS для этого можно использовать

el.textContent         // вернет текстовое содержимое 
el.textContent = 'foo' // установит новое значение

el.innerHTML                    // вернет html-разметку
el.innerHTML = '<div>foo</div>' // установит новое значение

В jQuery для этого есть два метода

$('.elem').text() // вернет текстовое содержимое
$('.elem').text('Foo'); // установит значение

$('.elem').html(); // вернет html-разметку
$('.elem').html('<div>Foo<div>') // установит значение