Frontender Libs - обзор библиотек JS / CSS – Telegram
Frontender Libs - обзор библиотек JS / CSS
8.09K subscribers
2.04K photos
735 videos
4 files
247 links
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront

Купить рекламу: https://telega.in/c/sWebDev
Download Telegram
Какой отступ будет между двумя блоками <div> и <p>
Anonymous Quiz
10%
20px
45%
30px
8%
10px
37%
50px
JS | Подстраивание высоты textarea под высоту содержимого

Небольшой (3.5 KB) автономный скрипт для автоматической регулировки высоты текстового поля.
This media is not supported in your browser
VIEW IN TELEGRAM
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 | Lightbox2, полноэкранный просмотр изображений в два клика

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

Awesome PHP - GitHub репозиторий с огромным количеством ссылок на различные пакеты и инструменты для PHP.
Каким будет результат выполнения функции?
Anonymous Quiz
20%
"array
9%
"function"
32%
"object"
28%
"undefined"
10%
null
This media is not supported in your browser
VIEW IN TELEGRAM
JS | Генератор многоугольников для Яндекс.Карт

Рисовать фигуры на картах по координатам нудное и долгое занятие, для облегчения этой задачи - визуальный конструктор фигур, при создании фигуры он генерирует массив координат и код для вывода этой фигуры на карте.
Бесплатный вебинар: Как выбрать профессию в программировании в 2021 году?

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

Спикер: Михаил Овчинников - Главный методист технического направления Skillbox
Изменение элементов массива

При объявлении цикла в PHP переменная передается по значению. Это значит что изменения переменной будут происходить локально.

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

О флексах написано множество статей, в этой весь материал подкреплен наглядной анимацией, которая упрощает понимание теории.
Что выведется в консоль?
Anonymous Quiz
20%
1
16%
undefiend
45%
0
12%
Math.random
7%
null
Встроенный сервер

Начиная с версии 5.4 в составе PHP есть встроенный web-сервер который отлично подходит для разработки PHP-приложений.

Запускается он командой php -S localhost:8000

Используя разные порты можно запускать больше одного веб-сервера для одновременной работы над несколькими приложениями.
This media is not supported in your browser
VIEW IN TELEGRAM
CSS | Генератор анимаций

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

Более 90% браузеров способны работать с современным JavaScript, но преобладание устаревшего JavaScript остается одним из основных источников проблем с производительностью в Интернете сегодня. EStimator.dev - это простой веб-инструмент, который вычисляет размер и улучшение производительности сайта, которого можно достичь, используя современный синтаксис JavaScript.
Сколько псевдоэлементов before появится на странице?
Anonymous Quiz
34%
2
24%
3
24%
4
17%
5