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 в разделе scripts создать команду 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>') // установит значение

HTML | favicon

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

Раньше было достаточно положить в корень сайта файл favicon.ico размером 16 на 16 пикселей и браузер подхватывал её на лету. Сейчас с обилием устройств, на которых можно просматривать сайты, выросли и требования к фавиконке.

realfavicongenerator.net - ресурс который из одного изображения генерирует набор фавиконок для всех устройств, включая иконки приложений для сайтов закрепленных на экране мобильного телефона или в меню пуск windows 10.

Node.js | Кластеризация

Зачем нужна кластеризация?
В большинстве случаев, конечно, она может и не понадобиться, но когда нагрузка на приложение нарастает, приложению становится сложнее обрабатывать запросы. Напомню, что Node.js сам по себе однопоточный. Улучшить ситуацию может как раз таки кластеризация.
И так, основная цель кластеризации - запуск нескольких экземпляров приложение и распределение между ними запросов.

Мы будем использовать встроенный в Node.js модуль Cluster.
Для начала объявим необходимые зависимости:

var os = require('os')
var cluster = require('cluster')
var express = require('express')

Теперь создадим экземпляр Express приложения и повесим на него обработчик. В обработчике будем выводить ID воркера, который обрабатывает запрос в данный момент.

var app = express()
app.use((req, res, next) => {
  if (cluster.isWorker) {
    console.log('Воркер', cluster.worker.id, 'поймал запрос')
  }
  next()
})
app.get('/', (req, res) => res.send('Кластеризация'))

Наконец напишем саму кластеризацию. Если текущий процесс приложения - основной, то мы пробегаемся циклом по числу доступных потоков процессора и создаём по экземпляру на каждый поток:

if (cluster.isMaster) {
  let cpus = os.cpus().length
    
  for(let i = 0; i < cpus; i++) {
    cluster.fork()
  }

  cluster.on('exit', (worker, code) => {
    console.log('Воркер', worker.id, 'завершен')
    app.listen(3000, '127.0.0.1', () => console.log('Воркер', cluster.worker.id, 'запущен'))
  })
} else {
  app.listen(3000, '127.0.0.1', () => console.log('Воркер', cluster.worker.id, 'запущен'))
}

Готово, теперь можно посетить 127.0.0.1:3000 и увидеть в консоли, какой воркер поймал запрос.

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

Простой способ реализации представлен ниже, с помощью jQuery-метода html перебирается содержимое поисковых подсказок, и найденная подстрока оборачивается в span с классом.

let replace = 'query'; // строка которую ищем
let re = new RegExp((replace),"gi");
$('.search-result__item').html(function(i, v){
return v.replace(re, '<span class="search-results__match">$&</span>');
});

Код не идеальный, предложите свой метод реализации решения этой задачи.

Не тормози на пути в Веб-разработку

Ребята, знакомьтесь с другими нашими каналами, если еще не знакомы

Frontend Interview - здесь мы помогаем готовиться к собеседованиям на фронтенд разработчика

Senior Frontend - здесь мы постим крутые примеры кода, статьи и викторины по фронтенду

Приятного просмотра 😉

CSS | background

CSS3 предоставляет возможность указать несколько фонов для блока одной строкой с помощью короткой записи которая объединяет свойства background-clip, background-color, background-image, background-origin, background-position, background-repeat, background-size, и background-attachment.

 
background
   url(url.jpg) center / 50% no-repeat, 
   url(url.svg) top 100% / contain fixed repeat-x,
   linear-gradient(to bottom, #000 0%, #0000 100%),
   #ccc

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

В примере по ссылке реализован базовый шаблон для модального окна.

Node.js | Взаимодействие с Redis

Redis - резидентная система управления базами данных класса NoSQL с открытым исходным кодом, работающая со структурами данных типа «ключ — значение»

Для взаимодействия с Redis из Node.js существует пакет Node Redis.
Пакет поддерживает все команды оригинального клиента.

К сожалению, Node Redis пока не поддерживает промисы (но это исправят в будущей версии), поэтому для асинхронного взаимодействия придётся писать функции-обёртки, либо воспользоваться util.promisify, как в примере на GitHub.

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

var redis = require('redis')
var client = redis.createClient()

client.on('error', (e) {
  console.error(e)
})

client.set('best', 'sWebDev')
client.get('best', (e, value) => {
  console.log(value, 'is best channel')
})

CSS | box-sizing

CSS свойство box-sizing определяет как вычисляется общая ширина и высота элемента.

Согласно CSS размеры блока складывается из размера контента, внешних отступов, внутренних отступов и границ. Box-sizing позволяет изменить этот алгоритм, чтобы width и height задавали размеры не контента, а блока.

Расчет размеров блока по умолчанию слегка не очевиден и может причинить немало проблем.

Рассмотрим пример:

.parent{
    width: 100px;
}
.child{
    width: 50%;
    padding: 10px;
}

Кажется что ширина блока .child должна быть равна 50px, но по факту ширина будет равна половине ширины родителя + левый padding + правый padding = 70px. Разумеется, можно изначально указать размер блока calc(50% - 20px), но это не всегда удобно.

Для решения этой проблемы часто используется переопределение box-sizing для всех элементов, делается это элементарно:

*{box-sizing: border-box}

Теперь блок будет иметь фиксированный указанный размер, а внутренние отступы и границы будут уменьшать его контентную часть.

Node.js | node-notifier

node-notifier - кроссплатформенный пакет для отправления нативных уведомлений системы.

Поддерживает
- macOs
- linux, если есть notify-osd или libnotify-bin (Ubuntu их содержит)
- Windows 8 и 10

Пример

var notifier = require('node-notifier');

notifier.notify({
  title: 'Привет с sWebDev',
  message: 'Привет, привет!!!'
})

CSS | calc()

Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер. Это позволяет задавать значения основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно игнорируется.

Функция calc() принимает любую комбинацию значений размеров.

.el {
  font-size: calc(3vw + 2px);
  width:     calc(100% - 20em); 
  height:    calc(100vh - 20rem); 
  padding:   calc(1vw + 15%); 
}

Допустимые математические операции
- + — сложение (width: calc(20px + 20px));
- - — вычитание (padding: calc(10% - 10px));
- * — умножение (height: calc(20% * 2))
- / — деление. На ноль делить запрещено (width: calc(100% / 3)).

Знаки плюс и минус должны отбиваться пробелами с двух сторон.