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

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('Кластеризация'))

HTML | favicon При загрузке сайта, в адресной строке браузера можно иногда увидеть небольшую картинку, которая связана с тематикой сайта. Тот же рисунок отображается рядом со ссылкой при добавлении ее в закладки браузера. Раньше было достаточно положить в корень сайта файл favicon.ico размером 16 на 16 пикселей и браузер подхватывал её на лету. Сейчас с обилием устройств, на которых можно просматривать сайты, выросли и требования к фавиконке. realfavicongenerator.net - ресурс который из одного изображения генерирует набор фавиконок для всех устройств, включая иконки приложений для сайтов закрепленных на экране мобильного телефона или в меню пуск windows 10.

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>') // установит значение

Webchic - отбор качественных материалов(en/rus) по веб разработке с уклоном на фронтенд: -- nodejs -- webpack -- css -- javascript -- собеседования -- CI/CD -- архитектурные решения -- алгоритмы

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 Готово. В консоли появиться ссылка с нашим сайтом-приложением.

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

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

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

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

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 приложение.

JavaScript задачи с собеседований - канал на котором публикуются интересные задачки по JavaScript. Так же react, vue, angular, node.js Тематика канала : — cинтаксис, — условные операторы, переменные и типы данных, — функции и функциональные выражения, — циклы, взаимодействие с пользователем, — строки, массивы. Проверь свои знания языка на @javascriptquiz

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 | Как подружить 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 Всё очень просто. В дополнение стоит сказать, что таким образом можно добавить несколько приложений на разных портах.

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

😎 С какими IT-технологиями будет интереснее работать? 💻 Приглашаем Вас на бесплатный вебинар от Web Academy на котором Вы узнаете про основные обязанности Front-end и Back-end разработчиков, про технологии, с которыми они работают, про возможности и перспективы, а также кто такие Full Stack специалисты. ⏰ Когда: 21.10 в 17:00 по Киеву/МСК(GMT+3) 🧭 Где: online 📣 Спикер: Илья Литвинов — Senior Front-End Dev в Wix.com. ❗️ Не упустите возможность задать вопрос спикеру online 🖊 Регистрация через чат-бот: https://bit.ly/3dxwHQD #Ивенты_WebAcademy #Программирование_WebAcademy

CSS | :empty Псевдокласс :empty находит любой элемент, у которого нет потомков. Учитываются элементы и текст (включая пробелы). Комментарии не повлияют на то, что элемент будет рассматриваться как не пустой. Этот псевдокласс можно применять для скрытия пустых блоков в динамическом или пользовательском контенте, например пустые абзацы или пункты списков, стилизовать реактивные элементы в которых может быть, а может и не быть содержимое. Для того чтобы выбрать все не пустые элементы можно скомбинировать :empty с :not p:not(:empty) { /* все не пустые абзацы */ }