Frontender Libs - обзор библиотек JS / CSS
Открыть в Telegram
Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Купить рекламу: https://telega.in/c/sWebDev
Больше7 724
Подписчики
-324 часа
-187 дней
-5230 день
Архив постов
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 редакторов.
Какой код должен находится внутри функции, чтобы вывелось 1.22?
Каким цветом выведется фон блока .child?
Направления развития во фронтенде
В статье рассмотрены фреймворки и подходы к работе как набирающие популярность так и необходимые для изучения.
JS | Intl - форматируем числа, даты и сравниваем строки
Объект Intl содержит в себе три свойства:
- Intl.Collator — Конструктор класса позволяющего производить сравнения строк с учётом локали.
- Intl.DateTimeFormat — Конструктор класса позволяющего форматировать дату и время с учетом локали
- Intl.NumberFormat — Конструктор класса содержащего функции форматирования чисел. В соответствии с локалью, разумеется.
Все конструкторы принимают два параметра — locale и options.
Первый аргумент — строка определяющая локаль, например «hi», «ru-RU», «de-DE-u-co-phonebk», второй — объект, в зависимости от конструктора содержащий набор необходимых настроек.
Возврат нескольких значений
Иногда возникает необходимость вернуть из функции сразу несколько значений. В таком случае можно вернуть массив и развернуть его сразу при получении с помощью языковой конструкции list().
Начиная с PHP 7.1 можно использовать сокращенный синтаксис [$var1, $var2, ...], как показано в примере.
Однако, не стоит этим увлекаться, так как, если вашу функцию в будущем будет использовать кто-то другой, то ему придется сначала разобраться, что находится в этом массиве.
Чему в итоге будет рана прозрачность дива?
🔥 Новости от команды Лектрума🔥
17 декабря в 19:30 по Киеву и 20:30 по Москве пройдёт воркшоп на тему «Знакомство с продвинутой вёрсткой».
Подключайтесь к онлайн-воркшопу, на котором вы:
🔸 Узнаете особенности автоматизации проекта.
🔸 Познакомитесь с популярными пре- и постпроцессорами SASS, Less и PostCSS.
🔸 Разберётесь в преимуществах использования препроцессоров для автоматизации и ускорения процесса создания стилей.
Нажимайте на кнопку для регистрации ⬇️⬇️⬇️ и занимайте места.
CSS | Смешиваем фоны в css
В статье разобраны примеры работы с mix-blend-mode и background-blend-mode и разбирается из разница.
Перебор дат
Часто возникает задача перебора дат в заданном промежутке.
В PHP для работы с датами есть встроенные классы DateTime, DateInterval, DatePeriod и другие.
В примере показан перебор дат с первого по седьмое декабря с интервалом в 1 день.
Сделаем из тебя Веб разработчика за 3 месяца - нужно только решиться!
В США буткемпы уже несколько лет помогают людям без опыта стать разработчиками и найти позицию в топовых IT-компаниях мира от Google и Microsoft, до Uber и Amazon.
Мы адаптировали формат под наш рынок и предлагаем:
💪 12 недель супер интенсивной практики на реальных проектах;
🎖 6 реальных проектов в портфолио, которые оценят работодатели;
🤩 Постоянную обратную связь и персональные сессии с нашими учителями - разработчиками с многолетним стажем;
🙋♂️ Тренинги по soft skills, помощь с составлением резюме и тестовые собеседования - все, чтобы подготовить тебя к работе;
🏆 И главное - возможность претендовать на позицию джуниор фронтенд разработчик уже через 3 месяца!
Стек: HTML, CSS, JavaScript, React, NodeJS
Остались вопросы?
Наши контакты, истории выпускников и описание программы здесь: https://s.algoritmika.org/vul7p6
JS | Конвертация цветов с помощью фильтров
Скрипт позволяет из черного цвета сгенерировать css стиль, который преобразует чёрный в заданный цвет, может быть полезен для массового перекрашивания иконок или для анимации переходов цвета от черного до любого другого по желанию. Таким образом можно перекрашивать любые монохромные изображения.
Разбор JSON в PHP
Для разбора JSON в PHP есть встроенная функция json_decode.
В случае ошибки, json_decode возвращает null. Однако, строка "null" - это тоже валидный JSON. Поэтому, если json_decode вернул null, это еще не значит что что-то пошло не так.
Чтобы избежать ошибочных ситуаций можно прибегнуть к нескольким методам:
1) После выполнения json_decode() вызвать json_last_error() или json_last_error_msg(). Эти функции возвращают код и сообщение об ошибке разбора JSON соответственно
2) Если вы используете PHP 7.3 или новее, то можно передать 4ым параметром JSON_THROW_ON_ERROR
3) Использовать json_decode из пакета guzzle
Во втором и третьем вариантах, в случае ошибки, будет выброшено исключение.
Уже доступно! Исследование Telegram 2025 — ключевые инсайты года 
