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

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

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-стилей.

@reddit_code — пылесосит REDDIT, чтобы айтишники получали MEMES-годноту, не покидая Telegram @reddit_code

JS | Arguments Многие встроенные функции JavaScript поддерживают произвольное количество аргументов. Все аргументы функции, находятся в псевдомассиве arguments под своими порядковыми номерами. Переменная arguments не доступна в стрелочных функциях.

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

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

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')

Ищешь годный материал по front end разработке? FrontEndDev - канал для продвинутых веб-разработчиков. На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое. Рекомендуем подписаться - @front_end_dev

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 | 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 | 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 | Взаимодействие с 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')
})

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

Хотите быть в курсе всех последних событий в сфере IT? https://t.me/T_e_c_h_4 📝На этом канале вы получите краткую и ёмкую информацию о технологиях, новостях, инсайдах. Всегда удобно следить за короткими статьями и постами. Именно поэтому данный канал подходит для тебя! 👇 https://t.me/T_e_c_h_4 📈Крутой канал с интересным контентом 🗂Качественные статьи, удобная подача 📘Создан для интересующихся технологиями людей ✅Заходи, будет интересно

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 мощный инструмент, который можно применять различными способами: сокращать разметку в насыщенных декоративными деталями сайтах, рисовать бесшовные текстуры и создавать яркие визуальные эффекты.

Не тормози на пути в Веб-разработку Ребята, знакомьтесь с другими нашими каналами, если еще не знакомы Frontend Interview - здесь мы помогаем готовиться к собеседованиям на фронтенд разработчика Senior Frontend - здесь мы постим крутые примеры кода, статьи и викторины по фронтенду Приятного просмотра 😉

Периодически возникает задача найти и обработать все вхождения подстроки в набор строк, например при разборе поисковых результатов для выделения совпадений с поисковой строкой. Простой способ реализации представлен ниже, с помощью 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>'); }); Код не идеальный, предложите свой метод реализации решения этой задачи.

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

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 и увидеть в консоли, какой воркер поймал запрос.