JS | Рисуем графики с morris.js

Morris — это легковесный плагин с открытым исходным кодом, который для работы требует jQuery и Raphaël и строит с их помощью графики на простой сетке горизонтальных линий.

Плагин позволяет строить четыре вида графиков:
- ломаная
- диаграмма
- столбчатая диаграмма
- круговая диаграмма

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

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%);