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

JS | Axios

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

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

CSS | Position sticky

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

Использование sticky требует определенной разметки и стилей блока, если блок не прилипает нужно проверить эти условия:
- блок имеет свойство top или bottom
- высота родителя больше высоты блока
- у родительских блоков, вплоть до html не стоит overflow: hidden
- для сафари прописано position: -webkit-sticky

Пример реализации прилипающего бокового меню по ссылке.

HTML | SEO мета теги

Чаще всего сео-оптимизация это последнее о чем задумывается фронтендер при создании сайта, при этом настроить автоматическую генерацию или вручную указать эти теги проще в начале разработки.

Небольшие рекомендации по заполнению тегов :

- noscript - уникальный для каждой страницы, обычно составляют из двух частей "название страницы | название сайта" (организации, сервиса)
- denoscription - короткий текст, обычно до 160 символов, также составляется из двух частей, описание конкретной страницы + короткая информация о компании, контакты или адрес
- keywords - основные ключевые слова страницы, можно выжимать из denoscription самый сок, три, четыре ключевых слова достаточно

Так же стоит обратить внимание на настройку OpenGraph Meta, формат мета-тегов, созданный в Facebook, служащий для передачи информации о странице при репосте в социальные сети.

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

Резервируем место под картинку

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

PHP | Наследование переменных в анонимных функциях

В PHP можно наследовать переменные из родительской области видимости при использовании анонимных функциях.
Однако стоит помнить о том, что значение будет браться из места определения функции, а не её вызова.
Чтобы этого избежать нужно наследовать переменную по ссылке.

Пример:

$message = 'Hi, ';
$test = function () use (&$message) {
  echo($message);
};
$test();
$message = 'sWebDev!';
$test();

CSS | Правило внутреннего и внешнего

Хороший фронтендер должен разбираться в основах дизайна и типографике.
Существует универсальное правило внутреннего и внешнего:
внутреннее ≤ внешнее
Внутреннее — расстояние между строками, внешнее — между абзацами или поля вокруг текста.
Внутреннее — padding блока, внешнее — margin блока.

Поняв это правило и научившись им пользоваться можно улучшить свою разметку или найти общий язык с дизайнером, а то и поспорить с ним на счёт отступов.