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 без применения шаблонизаторов со своим языком.

На рынке дефицит JS программистов

Чем быстрее начнешь - тем лучше, вот пошаговый план чтобы стать Фулстеком и получать от 80тр, прогая только на JS:

👉 Учим верстку и JS до продвинутого уровня

👉 Учим особенности Node.js

👉 Выбираем фреймворк (React / Angular / Vue)

👉 Пробегаемся по общими штукам (Git / Photoshop / Figma / Английский для IT)

💵 Трудоустраиваемся

Курс Fullstack-разработчик на JavaScript всё это включает, и пройти его можно за 12 месяцев со скидкой 50%

JS | Очередная порция однострочников

Генерация случайного числа в заданном диапазоне

const randomNumberInRange = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;

Переключение логического значения

const toggle = (value) => value = !value

Сортировка элементов массива в случайном порядке

const sortRandom = (arr) => arr.sort(() => Math.random() - 0.5)

И еще 12 однострочников с пояснениями в статье.

PHP | PHPIntelephense

PHPIntellephense - расширение для популярного редактора кода Visual Studio Code.

Расширение предоставляет такие IDE-like возможности как:
- Автодополнение кода, как стандартных классов и функций, так и по коду проекта
- Справка по классам и функциям по наведению
- Поиск функций, классов и методов по проекту
- И другие

CSS | Интерактивное руководство по CSS Transitions

Статья начиная с основ transition, переходит к использованию готовых временных функций и созданию своих, подробно рассказывает о производительности анимации и способах её увеличения, а так же рассматривает анимацию в UX.

Все разделы снабжены примерами кода и наглядной демонстрацией

PHP | libphonenumber

libphonenumber for php - это порт на PHP библиотеки libphonenumber от Google.

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

JS | MutationObserver следим за изменением DOM

MutationObserver – это встроенный объект, наблюдающий за DOM-элементом и запускающий колбэк в случае изменений. Может быть полезен для реагирования на изменение разметки сторонним скриптом, который не предоставляет своих коллбэков.

В уроке показано использование MutationObserver на реальной задаче.

JS | Вибрируем телефоном, Navigator.vibrate()

Метод Navigator.vibrate() пульсирует вибрационным оборудованием на устройстве, если такое аппаратное обеспечение существует.

window.navigator.vibrate(200); // Вибрировать 200ms

Апи доступно в последних версиях Edge, Chrome и Firefox, не поддерживается в Опере и Сафари.