JS | Three.js - честное 3D в браузере

Работа с WebGL, и с шейдерами в частности, — это трудоемкий процесс. Необходимо описать каждую точку, линию, грань и так далее. Чтобы все это визуализировать, необходимо прописать объемный кусок кода. Для повышения скорости разработки, была разработана библиотека Three.js.

CSS | Хитрости CSS-переменных

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

Select2 - универсальный плагин, подходит для полного контроля над селектом.
Плюсы:
- встроенный поиск;
- полный программный контроль, методы и события для всех действий;
- динамическая подгрузка списка.
Минусы:
- выпадающий список появляется не в блоке с select, а добавляется в конец body и позиционируется абсолютом, может привести к проблемам при использовании в модальных окнах или в анимациях;

Selectric - младший брат Select2, возможности поскромнее, но его полностью хватает для базовых задач.
Плюсы:
- простой в использовании;
- полный программный контроль, методы и события для всех действий;
- есть несколько готовых тем оформления.
Минусы:
- ограниченный функционал

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

Что спрашивают на собеседованиях у Frontend-разработчиков

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

Так выявляют людей, кто живёт темой кодинга и интересуется трендами.

Для тех, кто ищет работу во фронтенде, создан канал @frontendinterview. Его ведут тимлиды. Там они рассказывают, какие технические моменты JS, HTML и CSS необходимо знать, чтобы получить место с высоким окладом.

@frontendinterview обязателен к подписке, если находитесь в поиске работы или зарплаты побольше

PHP | SplFileInfo

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

Это бывает очень удобно, если ваше приложение как-либо работает с файлами, например генерирует PDF-документы и выводит информацию о них.

Слайдеры и карусели

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

Slick Slider
Плюсы
- не требует особой разметки для слайдов, всё что находится в целевом элементе станет слайдами
- может показывать слайды группой в несколько рядов
Минусы
- Последнее обновление было 2 года назад

Splide
Плюсы
- содержит несколько тем оформления
- есть компоненты для Vue и React
Минусы
- относительно молодой проект, могут проявится неожиданные баги

PHP | HTMPurifier

HTMLPurifier - это PHP-библиотека для очистки HTML.

Позволяет очистить HTML от подозрительного и невалидного кода.

Также позволяет удалять теги на основе белого списка.

Ищешь годный материал по front end разработке?

FrontEndDev - канал для продвинутых веб-разработчиков.

На канале найдешь свежие статьи, фишки JS и TS, туториалы по современным фреймворкам, лучшие практики разработки и многое другое.

Рекомендуем подписаться - @front_end_dev

PHP | parse_url

parse_url - функция разбивающая url на массив c его компонентами, такими как схема, домен, строка запроса и другими.

Если передать вторым параметром конкретный компонент URL, то вернется строка с его значением.

Предпросмотр увеличенных изображений

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

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

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

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

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

Создание интерфейсов на bootstrap

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