Frontender Libs - обзор библиотек JS / CSS

SVG | SMIL анимация - тяжело в учении, легко в бою Анимировать svg изображения можно и с помощью css, но только в том случае, если svg вставлен в саму страницу, и таким образом невозможно анимировать фоновые изображения или svg вставленные через тег img. SMIL анимация создаётся средствами самого svg документа, предоставляет больше возможностей и работает всегда. Подробный разбор всех возможностей в статье.

JS | Знакомство с canvas Элемент <canvas>, добавленный в HTML5, предназначен для создания графики с помощью JavaScript. Для изучения принципов работы с canvas можно написать скрипт для рисования. Пример такого скрипта представлен по ссылке, три размера кисти, три цвета, очистка и сохранение изображения.

Php passwords Большинство веб-сервисов не хранят пароли в открытом виде. Пароли хешируются. В современных фреймворках есть инструменты для этого, однако, они есть и в самом PHP. password_hash() - создает хеш пароля password_verify() - проверяет совпадение пароля и хеша

Бесплатные мастер-классы от Skillbox Примите участие в мастер-классах по дизайну, программированию, разработке игр. и др. Под руководством экспертов составьте план своего развития и начните 2021 год с новой перспективной профессией! А ещё — участников конференции ждут подарки от Деда Мороза 🙂 MacBook Air, iPhone 12, наушники AirPods. Это полуторачасовые вебинары с теорией от экспертов, практикой и розыгрышем призов: 💻 Введение в профессию веб-разработчика 💻 Как стать Python разработчиком? 💻 Введение в Data Science

CSS | Учим flex играя Представляем вашему вниманию две небольшие игры, которые помогут вам разобраться в выравнивании блоков с помощью css flex. Помогите лягушонку Фрогги прыгнуть на лист лилии и отбейте все вражеские атаки.

phpsandbox phpsandbox - это онлайн инструмент для тестирования кода на языке PHP. Аналогичен codepen/jsfiddle. Кроме чистого PHP можно тестировать код написанный с использованием Laravel, ReactPHP или импортировать любой проект с Github. Также phpsandbox поддерживает установку пакетов из composer прямо в тестовую среду.

JS | Пример плавающего placeholder Пример реализации подписей к инпутам как в Material Design, использовано минимальное количество стилей, можно подогнать под любой дизайн.

Просили крутую работу и ЗП в 2021? Skillbox подготовили для вас новогодний подарок скидки до 60% на все курсы и профессии: 👨‍💻 Frontend-разработчик 👨‍💻 Fullstack-разработчик 👨‍💻 Веб-разработчик Успей записаться 👇

HTTP Basic Authentication Работаете над сайтом, который надо кому-то показать, но не всему миру? Сделайте доступ по логину и паролю. Самый просто способ - использовать HTTP Basic Authentication. Данный способ аутентификации поддерживается всеми современными веб-серверами и не требует установки дополнительного ПО на ваш веб-сервер.

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

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

KITE автодополнение с искусственным интеллектом Разработчики приложения Kite предлагают интерактивный «помощник», который в процессе набора кода в фоновом режиме вытягивает контекстную информацию из общедоступных образцов кода в интернете и показывает на экране в удобном виде. Поддерживает 13 языков программирования и 16 редакторов.