JS | Intl - форматируем числа, даты и сравниваем строки

Объект Intl содержит в себе три свойства:
- Intl.Collator — Конструктор класса позволяющего производить сравнения строк с учётом локали.
- Intl.DateTimeFormat — Конструктор класса позволяющего форматировать дату и время с учетом локали
- Intl.NumberFormat — Конструктор класса содержащего функции форматирования чисел. В соответствии с локалью, разумеется.

Все конструкторы принимают два параметра — locale и options.

Первый аргумент — строка определяющая локаль, например «hi», «ru-RU», «de-DE-u-co-phonebk», второй — объект, в зависимости от конструктора содержащий набор необходимых настроек.

Направления развития во фронтенде

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

KITE автодополнение с искусственным интеллектом

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

Поддерживает 13 языков программирования и 16 редакторов.

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

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 документа, предоставляет больше возможностей и работает всегда.

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