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

CSS | Генератор анимаций AnimXYZ помогает создавать, настраивать и составлять анимацию для вашего веб-сайта. На основе переменных CSS, позволяющих создавать практически неограниченное количество уникальных анимаций без написания единого ключевого кадра. Сэкономьте время и получите полный контроль над движением ваших элементов. AnimXYZ, созданный для Vue, React, SCSS и CSS, оживит ваш сайт.

Встроенный сервер Начиная с версии 5.4 в составе PHP есть встроенный web-сервер который отлично подходит для разработки PHP-приложений. Запускается он командой php -S localhost:8000 Используя разные порты можно запускать больше одного веб-сервера для одновременной работы над несколькими приложениями.

CSS | Еще раз о flexbox О флексах написано множество статей, в этой весь материал подкреплен наглядной анимацией, которая упрощает понимание теории.

Изменение элементов массива При объявлении цикла в PHP переменная передается по значению. Это значит что изменения переменной будут происходить локально. Если же вы хотите изменить элементы оригинального массива, то их нужно передавать в цикл по ссылке. Для этого добавьте символ & к имени переменной в объявление цикла.

Бесплатный вебинар: Как выбрать профессию в программировании в 2021 году? ✔ Карьера программиста: с какого языка программирования лучше начинать; ✔ Языки программирования, их применимость в разных сферах; ✔ Сравнение разных языков по популярности, сложности и уровню доходов; ✔ Как найти себя, как выбрать сферу и язык программирования. Спикер: Михаил Овчинников - Главный методист технического направления Skillbox

JS | Генератор многоугольников для Яндекс.Карт Рисовать фигуры на картах по координатам нудное и долгое занятие, для облегчения этой задачи - визуальный конструктор фигур, при создании фигуры он генерирует массив координат и код для вывода этой фигуры на карте.

Awesome PHP Awesome PHP - GitHub репозиторий с огромным количеством ссылок на различные пакеты и инструменты для PHP.

Подборка самых интересных и популярных песочниц кода от канала Frontend Песочница 😎 Навигация в виде временной шкалы 🕔 - очень удобное и интересное решение навигации по Вашему сайту без использования сторонних библиотек Кот Загрузчик 🐱 - анимация кота в виде загрузки, сделанная на CSS Гамбургер меню с эффектом морфинга 🍔 - красивая трансформация меню в несколько строчек CSS Анимированная панель вкладок - плавная анимация перехода между вкладками в небольшом CSS и JS Эффекты наведения кнопок с box-shadow - несколько примеров хорошей hover анимации на CSS Переходи и смотри другие UI/UX-идеи для реализации, песочницы или готовые макеты для своего проекта 👇🏼👇🏼👇🏼👇🏼👇🏼👇🏼 @it_sandbox @it_sandbox @it_sandbox

JS | Lightbox2, полноэкранный просмотр изображений в два клика Lightbox2 - это скрипт, используемый для просмотра изображений в модальном окне. Его легко настроить и он работает во всех современных браузерах. Можно использовать как для просмотра отдельных изображений, так и для галереи.

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

:root {
  /* объявляем переменную pad */
  --pad: 10px; 
}
p {
  /* используем переменную, если значение переменной недоступно или невалидно, используется фоллбэк*/
  padding: var(--pad, 10px 15px 20px);
}

Кастомные свойства можно использовать в медиавыражениях для управления отзывчивым дизайном.

:root {
  --gutter: 4px;
}
 
section {
  margin: var(--gutter);
}
 
@media (min-width: 600px) {
  :root {
    --gutter: 16px;
  }
}

Все тонкости и преимущества использования переменных описаны в статье

JS | Подстраивание высоты textarea под высоту содержимого Небольшой (3.5 KB) автономный скрипт для автоматической регулировки высоты текстового поля.

Чат сообщества Frontend-разработчиков Вступайте в чат Frontend Сообщество. Здесь мы: - Общаемся на разные темы - Помогаем в обучении и решении задач по разработке - Делимся опытом - Распространяем полезные ресурсы - Скидываем свои работы для получения оценок и обоснованной критики Будем рады как новичкам, так и опытным разработчикам :)