HTML | Адаптивные изображения для всех

В современном вебе использовать неадаптивные изображения - моветон. Тег picture, атрибуты sizes и srcset у тега img позволяют гибко решать эту проблему. В статье на примерах наглядно объясняются принципы создания респонсивных изображений.

Если особой гибкости не требуется, то как минимум нужно указывать дополнительное изображение для ретины:

<src="/path/to/img.jpg" srcset="/path/to/img@2x.jpg 2x">

PHP | preg_replace

preg_replace - встроенная в php функция, которая заменяет символы, попадающие под регулярное выражение, на указанную строку.

С помощью нее можно, например, удалять все пробельные символы из строки или очищать номер телефона от форматирования.

JS | Встроенные связанные слайдеры

Слайдер, который можно перелистывать колесиком мыши довольно удобен, пока не возникает необходимость добавить в него еще один слайдер, в примере показа реализация встроенных слайдеров с использованием swiper.

PHP | PHPOffice

PHPOffice - набор пакетов для работы с различными офисными документами.

PHPWord - для текстовых документов в форматах doc, docx, otf, rtf

PhpSpreadsheet - для электронных таблиц xls ,xlsx, ods

PHPPresentation - для презентаций pptx, odp

Данные библиотеки позволяют как читать, так и создавать файлы в указанным форматах.

CSS директивы @supports и CSS.supports (JavaScript) помогут разработчикам определять справится ли браузер пользователя с CSS свойством или нет.

Синтаксис директивы @supports такой же, как и у @media запросов:

@supports(prop:value) {
  /* стили */
}

Простая проверка свойства

@supports (display: flex) {
  div { display: flex; }
}

Ключевое слово not
@supports в паре со словом not осуществляет проверку на отсутствие поддержки какого-либо свойства:

@supports not (display: flex) {
    div { float: left; } /* задан альтернативный стиль */
}

Больше примеров использования и подробности в статье.

PHP | Php Inspections (EA Extended)

Если Вы используете PhpStorm, то наверняка пользуетесь различными инспекциями, которые позволяют держать Ваш код в порядке.

Php Inspections (EA Extended) - плагин для PhpStorm, который добавляет еще инспекций.

JS | Как узнать что блок виден на экране

Intersection Observer API позволяет веб-приложениям асинхронно следить за изменением пересечения элемента с его родителем или областью видимости документа viewport, узнать сколько процентов блока видно на экране (0 не виден, 1.0 - полностью виден), выполнять коллбэк при достижении определенных процентов видимости блока.

CSS | Caniuse.com поможет с новыми технологиями

Caniuse.com не только может показать поддержку свойства в браузерами, но и подсказать вендорные префиксы, ссылки на полифиллы и известные проблемы.

JS | Структуры данных - стек и очередь

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

Очередь также хранит данные в последовательном порядке, но удаляет самые старые элементы.

В статье рассказывается как в js реализовать эти структуры и показаны примеры применения.

CSS | Как контролировать Z-индексы в большом приложении

При разрастании проекта растет сложность интерфейса и контролировать z-индексы становится довольно сложно.

- Люди часто выбирают произвольно большие значения z-индекса;
- Исправления ошибок z-index часто приводят к новым;
- Связь между значениями z-index трудно отследить.

Стивен Фрисон (Stiven Frison) предлагает изящное решение этой проблемы:

const base = 0;
const above = 1;
const below = -1;

export const backdrop = below + dropdown;
export const dropdown = below + button;
export const button = base;

Решение основано на CSS-in-JS, но оно может быль реализовано с помощью препроцессоров или CSS с использованием переменных.

В этой системе каждый z-index имеет ровно такое значение, какое должно быть, и, поскольку оно выбирается динамически, вас не волнует, какое это значение на самом деле.

Uniwidth шрифты

В интерфейсах используется множество состояний - не/выбрано, не/активно, не/доступно. Для стилизации состояний можно использовать font-weight. Однако, при переключении шрифта с обычного на жирный размеры блока могут изменится, что приведёт к смещению разметки, что может сломать pixel-perfect шаблон.

Решение этой проблемы: гарнитуры с «однолинейной» шириной. И нет, это не моноширинные шрифты.

Гарнитуры Uniwidth имеют большой потенциал для использования в интерактивных интерфейсах. Это краткая и удобная подборка некоторых доступных опций.

PHP | get_defined_vars

Чтобы узнать какие переменные доступны в текущей области видимости можно использовать функцию get_defined_vars()

Это бывает полезно, например, если вы используете include, или в шаблонах отображений, работающих на нативном php без применения шаблонизаторов со своим языком.