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

SQL | Дубликаты строк Одним из частых вопросов на собеседовании являтся вопрос вида "Как найти дубликаты записей". Для поиска дубликатов с одним полем можно воспользоваться следующим трюком: SELECT COUNT(field) FROM table GROUP BY field HAVING COUNT(field) > 1 Если же необходимо выбрать дубликаты записей с несколькими полями: SELECT field1, field2, COUNT(id) FROM table GROUP BY field1, field2 HAVING COUNT(id) > 1

HTML | SEO мета теги Чаще всего сео-оптимизация это последнее о чем задумывается фронтендер при создании сайта, при этом настроить автоматическую генерацию или вручную указать эти теги проще в начале разработки. Небольшие рекомендации по заполнению тегов : - title - уникальный для каждой страницы, обычно составляют из двух частей "название страницы | название сайта" (организации, сервиса) - description - короткий текст, обычно до 160 символов, также составляется из двух частей, описание конкретной страницы + короткая информация о компании, контакты или адрес - keywords - основные ключевые слова страницы, можно выжимать из description самый сок, три, четыре ключевых слова достаточно Так же стоит обратить внимание на настройку OpenGraph Meta, формат мета-тегов, созданный в Facebook, служащий для передачи информации о странице при репосте в социальные сети.

Учишь программирование, но не знаешь где практиковаться? @programmingtests — первый канал в телеграме, в котором публикуются тесты и задачи по разным языкам(JavaScript, Python, C++, C#, Java, Php, Git, Sql). Подписывайся и закрепляй свои знания!

CSS | Position sticky Липкое или приклеенное позиционирование используется для фиксации элемента в заданном месте при прокрутке страницы, отличается от fixed тем что положение фиксируется относительно родительского элемента. Использование sticky требует определенной разметки и стилей блока, если блок не прилипает нужно проверить эти условия: - блок имеет свойство top или bottom - высота родителя больше высоты блока - у родительских блоков, вплоть до html не стоит overflow: hidden - для сафари прописано position: -webkit-sticky Пример реализации прилипающего бокового меню по ссылке.

JS | Axios Типичная задача во фронтенде — получение JSON данных с сервера, к примеру, пользователь изменяет фильтр в каталоге и товары обновляются без перезагрузки страницы. В основе подобного взаимодействия систем лежит технология AJAX, в рамках применения которой используется экземпляр объекта XMLHttpRequest. Axios — это широко известная JavaScript-библиотека. Она создана того чтобы облегчить программистам работу с AJAX и XMLHttpRequest и предоставляет разработчикам удобный интерфейс, избавляя их от необходимости пользоваться низкоуровневыми механизмами.

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