CSS | Hover эффекты, примеры реализации

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

HTTP Basic Authentication

Работаете над сайтом, который надо кому-то показать, но не всему миру? Сделайте доступ по логину и паролю.

Самый просто способ - использовать HTTP Basic Authentication.

Данный способ аутентификации поддерживается всеми современными веб-серверами и не требует установки дополнительного ПО на ваш веб-сервер.

JS | Пример плавающего placeholder

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

phpsandbox

phpsandbox - это онлайн инструмент для тестирования кода на языке PHP. Аналогичен codepen/jsfiddle.

Кроме чистого PHP можно тестировать код написанный с использованием Laravel, ReactPHP или импортировать любой проект с Github.

Также phpsandbox поддерживает установку пакетов из composer прямо в тестовую среду.

CSS | Учим flex играя

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

Php passwords

Большинство веб-сервисов не хранят пароли в открытом виде. Пароли хешируются.

В современных фреймворках есть инструменты для этого, однако, они есть и в самом PHP.

password_hash() - создает хеш пароля

password_verify() - проверяет совпадение пароля и хеша

JS | Знакомство с canvas

Элемент <canvas>, добавленный в HTML5, предназначен для создания графики с помощью JavaScript.

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

SVG | SMIL анимация - тяжело в учении, легко в бою

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

SMIL анимация создаётся средствами самого svg документа, предоставляет больше возможностей и работает всегда.

Подробный разбор всех возможностей в статье.

JS | Огромная коллекция разнообразных плагинов

unheap.com - отсортировал массу плагинов для jquery и нативного js по пяти категориям:
- ui
- формы
- медиа
- навигация
- разное

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

CSS | Игра на знание css-селекторов

Игра с нарастающей сложностью показывает как использовать самые разные селекторы и их комбинации, к каждой задачке идёт описание работы требуемого селектора.

JS | Так ли сильно вам нужен JQuery?

youmightnotneedjquery.com - справочник сравнивающий функционал JQuery и нативного JS, вводите в поиске метод JQuery и смотрите как это реализовать с помощью js.

Валидация

Во время работы с данными, особенно с данными, введенными пользователем, необходимо проверять их на корректность. Этот процесс называется валидацией.

Для валидации данных на PHP существует большое количество библиотек. Как в составе крупных фреймворков, так и отдельных.

Однако, если вы разрабатываете небольшое приложение, можно обойтись и встроенными средствами.

Особенное место занимает функция filter_var, которая позволяет проверять данные большим количеством встроенных фильтров.