JS | Храним данные в браузере, localStorage

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

У браузера существует клон localStorage, который называется sessionStorage. Их разница в том, что последний хранит данные только для одной вкладки (сессии) и очистится как только мы закроем вкладку

Пример использования:
//Добавляем или изменяем значение:
localStorage.setItem('myKey', 'myValue'); //теперь у вас в localStorage хранится ключ "myKey" cо значением "myValue"

//Выводим его в консоль:
var localValue = localStorage.getItem('myKey');
console.log(localValue); //"myValue"

//удаляем:
localStorage.removeItem("myKey");

//очищаем все хранилище
localStorage.clear()

JS | Определяем местоположение пользователя

Geolocation API позволяет пользователю предоставлять свое местоположение web-приложению. При вызове метода navigator.geolocation.getCurrentPosition() браузер запросит разрешение на передачу данных о геолокации, в случае разрешения будет вызван первый колбэк, в случае отказа - второй.

В примере реализовано получение координат пользователя через Geolocation API и если геолокация не доступна - используется сервис определения местоположения по ip-адресу

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», второй — объект, в зависимости от конструктора содержащий набор необходимых настроек.

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

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