Frontender Libs - обзор библиотек JS / CSS
8.46K subscribers
2.02K photos
735 videos
2 files
239 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Менеджер по рекламе: @Spiral_Yuri

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Что выведется в консоли?
Anonymous Quiz
22%
1 1
53%
1 0
11%
0
14%
1 undefined
PHP | Что будет выведено?
Anonymous Quiz
68%
true
32%
false
Предпросмотр увеличенных изображений

Просмотр увеличенных изображений - обязательный атрибут интернет магазинов и различных галерей

Elevate zoom - многофункциональный плагин позволяет настраивать размеры и положение области просмотра
Плюсы
- Несколько режимов отображения увеличенного изображения
- Ясная документация
Минусы
- Показывает увеличение сразу по ховеру без возможности сделать по клику

image-zoom.js - показывает увеличенное изображение, ничего лишнего
Плюсы
- Прост в использовании
- есть модуль для React
Минусы
- Ограниченный функционал

Panzoom - увеличивает сам элемент, можно использовать для любых типов контента: изображения, видео, текст, canvas и тд.
Плюсы
- Полный программный контроль
- Множество настроек работы
- Отлично подходит для просмотра SVG
- Не требует jQuery

PinchZoom.js - плагин для работы с тач-девайсами.
Плюсы
- Поддерживает жесты
- Не зависит от jQuery
Минусы
- Не работает на десктопе
Создание интерфейсов на bootstrap

Bootstrap - отличный инструмент для быстрого прототипирования интерфейсов, по ссылке пример реализации страницы профиля с использованием только Bootstrap.
PHP | var_dump и print_r

var_dump и print_r - функции, часто используемые для дебага приложений.

Они обе выводят информацию о переданный переменных. Но с некоторыми отличиями.

var_dump может принимать сколько угодно аргументов. А print_r может вместо вывода возвращать результат выполнения, для этого достаточно передать true вторым аргументом.

👉 @sWebDev
Что выведется в консоли?
Anonymous Quiz
55%
0
20%
1
18%
undefined
6%
Error
PHP | vlucas/phpdotenv

vlucas/phpdotenv - PHP-пакет загружающий данные из файлов .env

Файлы .env - простой и удобный способ хранить логины, пароли и другие настройки, которые не должны храниться в системах контроля версий.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Форматирование данных в input

Cleave.js
- идеально подходит для форматирования чисел: дат, номеров банковских карт, номеров телефонов, валют.
Плюсы
- Простота использования
- Умное форматирование номера телефона
- Простой синтаксис
Минусы
- Сложно переопределить поведение по умолчанию

Inputmask - комбайн для форматирования всего как угодно.
Плюсы
- Множество коллбэков
- Богатый инструментарий для задания масок
- Возможность тонкой настройки масок
Минусы
- Настройка маски может занять продолжительное время
- Нет автоматической маски для телефона
This media is not supported in your browser
VIEW IN TELEGRAM
Скользящие табы на чистом css

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

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

Air Datepicker - минималистичный и лёгкий плагин с ненавязчивым дизайном
Плюсы
- Подробная документация на русском языке
- Полный программный контроль, методы и события
- Широкие возможности кастомизации
Минусы
- Последнее обновление было 5 лет назад

jQueryUI Datepicker - плагин из набора jQueryUI
Плюсы
- Легкая стилизация встроенными средствами jQueryUI
Минусы
- Громоздкий дизайн по умолчанию
- Зависимость от jQueryUI

bootstrap-datepicker - хорошо подойдёт если вы собираете интерфейс на Bootstrap
Плюсы
- Стили берутся из стилей Bootstrap, всегда подходит под текущий дизайн
- Удобный генератор нужных опций в документации
Минусы
- Если сильно изменить дефолтные стили Bootstrap - плагин может развалиться
- Полная Зависимость от Bootstrap
PHP | PeachPie 1.0

Недавно состоялся релиз PeachPie 1.0

PeachPie - это компилятор кода на языке PHP для платформы .NET.

Инструмент, предназначенный для миграции приложений с PHP на .NET, кроссплатформенной разработки и прочих экзотических задач.

👉 @sWebDev
Работа с картами

Яндекс.Карты API
- предлагает платный и бесплатный тариф, ограничения бесплатного тарифа: 25 000 запросов в сутки в том числе 1000 запросов к геокодеру
Плюсы
- Отлично детализированная Россия
- Есть расчет времени поездки с учетом пробок
- Есть генератор карт, который не требует навыков программирования
- Подробная документация
Минусы
- Бесплатную версию нельзя использовать в коммерческих проектах
- Строгие лимиты на использование, после превышения карта отключится до конца месяца
- Запутанная документация в которой довольно сложно разобраться
- Запрет на модифицирование карты, нельзя удалять логотип Яндекса и перекрашивать карту

Google Maps API - для использования нужно зарегистрировать платёжный аккаунт Google, каждый месяц даётся $200 на пользование сервисом, $7 за 1000 показов карт и $5 за 1000 запросов в геокодер.
Плюсы
- Детальная информация о местах, достопримечательностях, маршрутах, и прочем
- Простая кастомизация карт
- Хорошая документация
Минусы
- Документация на английском языке
- Не такая детальная информация о России

Leaflet - ведущая библиотека JavaScript с открытым исходным кодом для мобильных интерактивных карт
Плюсы
- Широкие возможности кастомизации
- Множество плагинов, расширяющих функционал
Минусы
- Запутанная документация

👉 @sWebDev
PHP | myclabs/deep-copy

myclabs/deep-copy - PHP-пакет для создания копий объектов.

В PHP уже есть оператор clone, который создает копии объектов. Но clone создает только копию переданного объекта. Если же объект имеет ссылки на другие объекты, то новому объекту будут переданы ссылки на те же самые объекты.

DeepCopy рекурсивно обходит свойства объекта и создает их копии.

👉 @sWebDev
Что выведется в консоли?
Anonymous Quiz
36%
Foo
23%
Bar
40%
Ошибка