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.noscript) 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({
  noscript: 'Привет с 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)).

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

Node.js | ExcelJS

ExcelJS - пакет, позволяющий читать и записывать табличные данные в файлы формата XLSX.

Преимущества
- Может работать с буферами
- Может работать со стримами
- Поддержка формул

Пример чтения

var workbook = new Excel.Workbook()
await workbook.xlsx.readFile('./file.xlsx')

Пример записи

var workbook = createAndFillWorkbook()
await workbook.xlsx.writeFile('./file.xlsx')

JS | Arguments

Многие встроенные функции JavaScript поддерживают произвольное количество аргументов.

Все аргументы функции, находятся в псевдомассиве arguments под своими порядковыми номерами. Переменная arguments не доступна в стрелочных функциях.

foo(a, b) {
    console.log(arguments[1]);
}
foo('раз', 'два'); 
// два

Иногда вы можете не быть уверены какие аргументы приняла в себя функция, узнать это можно проверив arguments.

CSS | Специфичность селекторов

Все CSS-селекторы имеют свой вес, который определяет как взаимодействуют одинаковые свойства, заданные в разных местах кода одному и тому же элементу.

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

Специфичность селектора рассчитывается по 4-м позициям:
- инлайновый стиль
- id
- class
- tag

Пример расчета специфичности:
LI
0,0,0,1 — селектор по тегу.
UL LI
0,0,0,2 — селектор c двумя тегами весит больше, чем с одним.
.orange
0,0,1,0 — селектор с классом весит больше, чем селектор с тегом.
.orange A SPAN
0,0,1,2 — селектор перевесит предыдущий, потому что помимо класса содержит два тега.
#page .orange
0,1,1,0 — селектор с ID перевесит всё, кроме inline-стилей.

Node.js | Задание

Не так давно мы писали о ExcelJS.
Предлагаем читателям выполнить задание, для лучшего понимания того, как работает эта библиотека.

Суть
Ниже дан input.txt файл, содержащий информацию о различных, разумеется, вымышленных людях: имя, фамилия, пол, год рождения и город.
Эти данные нужно считать, проанализировать и создать в папке ./output/ файл-таблицу, по одной на город. Имена файлов должны совпадать с наименованиями городов. Сами таблицы должны содержать следующие колонки: фамилия, имя, пол. Данные должны быть осортированы по фамилии (в алфавитном порядке) и по полу (допустим, лица женского пола будут идти первыми).

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