Senior WebDev - js, css, php, node.js, sql
4.47K members
168 photos
14 videos
19 links
Задачки, полезные материалы - все для изучения web стека, js / css / php / node.js / sql

контакты, реклама - @seniorFrontPromo, @maria_seniorfront
Условия рекламы - https://clck.ru/QSjUg
IT Alliance - https://clck.ru/QSab8
Download Telegram
to view and join the conversation
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)
Как получить значение дата атрибута "data-FOO" с помощью javascript?
Anonymous Quiz
43%
elem.dataset('FOO')
40%
elem.data('FOO')
10%
elem.dataset('foo')
7%
elem.data('foo')
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 таблицы по горизонтали?
Anonymous Quiz
44%
rowspan
49%
colspan
2%
hjoin
5%
merge
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')
})
Какие методы служат для добавления элементов в массив?
Anonymous Quiz
14%
map, pop
74%
unshift, push
10%
join, includes
2%
reduce, sort
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)).

Знаки плюс и минус должны отбиваться пробелами с двух сторон.
Ищешь годный материал по front end разработке?

FrontEndDev - канал для продвинутых веб-разработчиков.

На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое.

Рекомендуем подписаться - @front_end_dev