Frontender Libs - обзор библиотек JS / CSS
8.48K subscribers
2.01K photos
728 videos
1 file
235 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

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

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
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%
Ошибка
PHP | Нам точно нужен фреймворк?

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

👉 @sWebDev
JS | 14 уроков с основами JS

Серия коротких, 3-6 минут, роликов с объяснением базовых возможностей JS, подойдет для тех кто совсем ничего не знает о программировании.

👉 @sWebDev
Кастомные полосы прокрутки

Оживить внешний вид сайта или сделать скроллбары не такими заметными можно и с помощью CSS, но для полноценных скроллбаров без JS не обойтись

Nicescroll jQuery Plugin - небольшой jQuery плагин, оборачивает переданный элемент в свою разметку.
Плюсы
- Простота использования
- Легкая кастомизация
Минусы
- Нет методов и событий

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

👉 @sWebDev
PHP | compact и extract

compact - это функция, которая собирает массив из переменных по их именам.

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

Будьте осторожны при использовании данных функций. Так как иногда они могут быть не очевидны.

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Стилизация range slider

Стандартный input type="range" даёт неплохие возможности кастомизации, но для сложной логики работы или нестандартного дизайна лучше воспользоваться js-плагинами.

ion.rangeSlider - jQuery плагин простой в использовании и лёгкий в освоении
Плюсы
- Возможность настройки через дата атрибуты
- Несколько скинов
Минусы
- зависимость от jQuery
- максимум два ползунка

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

👉 @sWebDev
Стоит задача, нарисовать ссылку в виде черного квадрата посередине экрана, какое из свойств в приведенном примере лишнее?
Anonymous Quiz
32%
display
16%
position
8%
width
44%
margin
This media is not supported in your browser
VIEW IN TELEGRAM
Автоматическая респонсивная гексагональная сетка, интересное решение для галереи, списка новостей или контактов.

👉 @sWebDev
Lazy load в том числе и нативный

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

lozad.js - работает без зависимостей, поддерживает <img>, <picture>, iframe, video, audio, background-image и т.д. Отличается простой настройкой, но немного запутанной документацией.

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

👉 @sWebDev
This media is not supported in your browser
VIEW IN TELEGRAM
Интересные эффекты наведения реализованные на чистом css.

👉 @sWebDev
React Material-UI

React Material-UI — это набор компонентов React, которые реализуют концепцию Material Design от Google. Если учесть то, что у библиотеки Material-UI более 30 тысяч звёзд на GitHub, она, вероятно, является самой популярной библиотекой для React.

Стоит отметить качество и объем документации этой библиотеки. Вам нужно разобраться, как все работает, а чем больше функционала, тем больше проблем может возникнуть. Так что наличие обширной и хорошо продуманной документации очень важно.

👉 @sWebDev