CSS | Зачеркиваем блоки, универсальный способ

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

JS | Делаем свой курсор для сайта

В примере подробно разобран принцип реализации кастомных курсоров для сайта, выполнено на чистом js и css.

Разбор JSON в PHP

Для разбора JSON в PHP есть встроенная функция json_decode.

В случае ошибки, json_decode возвращает null. Однако, строка "null" - это тоже валидный JSON. Поэтому, если json_decode вернул null, это еще не значит что что-то пошло не так.

Чтобы избежать ошибочных ситуаций можно прибегнуть к нескольким методам:

1) После выполнения json_decode() вызвать json_last_error() или json_last_error_msg(). Эти функции возвращают код и сообщение об ошибке разбора JSON соответственно
2) Если вы используете PHP 7.3 или новее, то можно передать 4ым параметром JSON_THROW_ON_ERROR
3) Использовать json_decode из пакета guzzle

Во втором и третьем вариантах, в случае ошибки, будет выброшено исключение.

JS | Конвертация цветов с помощью фильтров

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

Перебор дат

Часто возникает задача перебора дат в заданном промежутке.

В PHP для работы с датами есть встроенные классы DateTime, DateInterval, DatePeriod и другие.

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

CSS | Смешиваем фоны в css

В статье разобраны примеры работы с mix-blend-mode и background-blend-mode и разбирается из разница.

Возврат нескольких значений

Иногда возникает необходимость вернуть из функции сразу несколько значений. В таком случае можно вернуть массив и развернуть его сразу при получении с помощью языковой конструкции list().

Начиная с PHP 7.1 можно использовать сокращенный синтаксис [$var1, $var2, ...], как показано в примере.

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

JS | Intl - форматируем числа, даты и сравниваем строки

Объект Intl содержит в себе три свойства:
- Intl.Collator — Конструктор класса позволяющего производить сравнения строк с учётом локали.
- Intl.DateTimeFormat — Конструктор класса позволяющего форматировать дату и время с учетом локали
- Intl.NumberFormat — Конструктор класса содержащего функции форматирования чисел. В соответствии с локалью, разумеется.

Все конструкторы принимают два параметра — locale и options.

Первый аргумент — строка определяющая локаль, например «hi», «ru-RU», «de-DE-u-co-phonebk», второй — объект, в зависимости от конструктора содержащий набор необходимых настроек.

Направления развития во фронтенде

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

KITE автодополнение с искусственным интеллектом

Разработчики приложения Kite предлагают интерактивный «помощник», который в процессе набора кода в фоновом режиме вытягивает контекстную информацию из общедоступных образцов кода в интернете и показывает на экране в удобном виде.

Поддерживает 13 языков программирования и 16 редакторов.

CSS | clip-path, прячем лишнее

Clip-path - способ указать видимую область элемента с помощью описания фигуры, внутри которой будет видно содержимое блока, при этом блок не изменит свои габариты, но взаимодействие с курсором, ховер например, будет работать только в видимой зоне (4 пример).

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

clip-path: inset(100px -50px); 
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

CSS | Hover эффекты, примеры реализации

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

HTTP Basic Authentication

Работаете над сайтом, который надо кому-то показать, но не всему миру? Сделайте доступ по логину и паролю.

Самый просто способ - использовать HTTP Basic Authentication.

Данный способ аутентификации поддерживается всеми современными веб-серверами и не требует установки дополнительного ПО на ваш веб-сервер.