Добавление видео на фон с максимальной оптимизацией

Видео в качестве бэкграунда используется не так часто и это понятно — сайт с таким фоном получается куда более «тяжёлым», чем с картинками или просто CSS-оформлением. Да и не всегда видео на фоне работает достаточно плавно.

Если вы всё-таки хотите добавить такую особенность своему сайту, то вам пригодится эта статья. Здесь вы узнаете, как правильно оптимизировать видео, сделать отзывчивым и интерактивным без снижения производительности:

https://blog.logrocket.com/optimizing-video-backgrounds-css-javascript/

#фронтенд

​Видеокурс по продвинутому бэкенду на Node.js

В этом видео вы узнаете, как создать масштабируемый бэкенд на Node.js с использованием фреймворка Nest.jsm PostgreSQL в качестве СУБД и Docker. Сохраняйте на будущее в закладках или смотрите прямо сейчас:

https://youtu.be/dDeWWQWMM-Y

#видео #бэкенд #nodejs

​Новый семантический элемент появился в HTML —<search>

Он должен содержать элементы управления формой (например, ввод текста, выпадающие списки или кнопки). По сути, данный элемент представляет собой раздел документа, который используется для поиска или фильтрации. В этой статье рассматривается его реализация в HTML:

https://alvaromontoro.hashnode.dev/new-html-element-search

#html

#css #tip by David Mraz

Пример кастомных курсоров на CSS.

WireMock — гибкий HTTP мок-сервер!

Он облегчает создание и использование HTTP-моков для тестирования и разработки

Отличный вариант для разработчиков, QA-инженеров и автоматизаторов, работающих над веб-приложениями и API

​Создание часов с помощью новых тригонометрических функций CSS sin() и cos()

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

В этой статье вы познакомитесь с тригонометрическими функциями CSS и даже создадите с помощью них первый проект:

https://css-tricks.com/creating-a-clock-with-the-new-css-sin-and-cos-trigonometry-functions/

#css

​Игры для изучения программирования

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

Итак, давайте посмотрим, как именно геймификация помогает лучше учиться и какие игры могут помочь вам стать программистом:

https://devby.io/news/games-it-learn

#обучение

Storage API как альтернатива cookies

До появления HTML5 для хранения данных в браузере у нас были только файлы cookie. Но их использование имеет некоторые ограничения, например, размер cookie не может превышать 4 Кб.

Преимущество Storage API состоит в размере хранилища (от 2 до 10 Мб, в зависимости от браузера), отсутствии необходимости обращаться к серверу и более интуитивной форме хранения данных. Об использовании Storage API читайте в статье:

https://javascript.plainenglish.io/mechanisms-to-store-the-data-in-the-browsers-storage-api-d38eb521d741

#js

@htmlcssjavas

​15 качеств, которые понадобятся разработчику веб-приложений

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

Список скиллов для построения успешной карьеры — в статье:

https://habr.com/ru/companies/skillbox/articles/735772/

#советы

​Lighthouse. Руководство по оптимизации сайтов для начинающих

Быстрые сайты любят и пользователи, и поисковики. Проверить производительность сайта можно с помощью разных инструментов. Один из наиболее известных — Lighthouse от Google. Он не только тестирует сайт и показывает оценку производительности, но и даёт конкретные рекомендации: что можно улучшить, чтобы сделать сайт быстрее.

В этой статье вы изучите базовые возможности Lighthouse, которые пригодятся каждому начинающему веб-разработчику:

https://habr.com/ru/companies/htmlacademy/articles/585866/

#веб

ButterCMS — гибкая headless CMS для разработчиков

ButterCMS предлагает интуитивное и удобное управление контентом для ваших приложений

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

Есть в платформе и встроенные SEO-инструменты и поддержка мультиязычного контента

Стоимость: #бесплатно (но есть платные тарифы)

#CMS #SEO #контент

​​Основные коды состояния HTTP на котиках

Недавно писали про расшифровку большинства самых популярных кодов состояния HTTP. А вот забавный проект, который показывает коды состояния на котиках. Можно использовать в своих проектах — по ссылке с указанием кода сервис отдаёт мем, который наглядно иллюстрирует код ошибки:

https://http.cat/

#инструменты #веб

🔥PHP-разработчики, которые имеют опыт и сильную практику разработки на Битрикс24, по-прежнему востребованы российскими компаниями и останутся таковыми в будущем.

❗️На курсе “Разработчик Битрикс24” в ОТУС вы научитесь программировать свободно, без учета доктрины платформы и получите ценные навыки, которые сформируют качественно новое представление о продукте и помогут вывести Битрикс24 на более высокий уровень в любой компании.

Приходите на практическое занятие «Компонент списка таблицы БД» в ОТУС 8 июня в 20:00, где мы с экспертом рассмотрим, как создавать свои таблицы в БД Битрикс24, а также создадим комплексный компонент списка, включая такие элементы, как фильтр, пагинация, кнопки действий.

После урока вы научитесь:

- Cоздавать свои компоненты для Битрикс24
- Добавлять выгрузку данных списка в Excel
- Добавлять свои данные и действия в шаблон

👉Для участия зарегистрируйтесь https://otus.pw/tBao/


Бесплатный вебинар подойдет начинающим и опытным разработчикам PHP, которые хотят получить навык разработки в Битрикс 24. Полный курс можно приобрести удобным для вас способом, в том числе и в рассрочку. Нативная интеграция информация о продукте www.otus.ru

​Что такое ECMAScript и что туда входит?

Наверняка, многие из вас знакомы с языком программирования JavaScript? Так вот ECMAScript — это стандарт JavaScript (и некоторых других языков), который устанавливает правила, синтаксис и другие критерии создания кода. Его ежегодно дополняет сообщество разработчиков.

Самые последние обновления ECMAScript включают в себя новые функции и методы, которые помогают разработчикам писать более гибкий и мощный код. И вот, какие функции были добавлены в ECMAScript в 2023 году: https://tproger.ru/articles/chto-bylo-dobavleno-v-ecmascript-v-2023-godu/

#js #веб

7 CSS проектов для начинающих веб-разработчиков, которые ускорят работу над проектом

В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.

1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.

2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.

3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии. Он использует ИИ для удаления фона, искусственно делает вашу фотографию красивее и автоматически генерирует десятки вариантов изображения.

4. Carbon поможет создавать красивые изображения вашего кода.

5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.

6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.

7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.

#инструменты #веб

@htmlcssjavas

❗️ Хотите начать писать автотесты на JS?

⚠️ Приходите 8 июня в 20:00 на открытый урок в преддверии старта онлайн-курса «JavaScript QA Engineer» в OTUS.

📌 На занятии мы познакомимся с основами популярного фреймворков для написания тестов на JavaScript — mocha и библиотеки утверждений — chai.

Для этого мы:
— Рассмотрим основные принципы написания тестов
— Узнаем, как использовать chai для создания автоматизированных тестов на JavaScript
— Напишем пару unit и API тестов.

```Урок пройдет в рамках онлайн-курса OTUS “JavaScript QA Engineer”. После занятия полный курс можно приобрести удобным для вас способом.

```👉 Готовьте вопросы и записывайтесь на вебинар!
РЕГИСТРАЦИЯ — https://otus.pw/jDHT/

Нативная интеграция. Информация о продукте www.otus.ru

​7 инструментов для начинающих веб-разработчиков, которые ускорят работу над проектом

В подборке вы найдёте CSS-генераторы, ИИ-инструменты для подбора шрифтов, удаления фона с картинок и другие полезные сервисы. Сохраните себе, чтобы не потерять.

1. Lorem Picsum — это генератор заполнителей для изображений с множеством параметров настройки. Укажите параметры для ваших картинок непосредственно в URL-адресах.

2. FontJoy находит интересные сочетания шрифтов с помощью ИИ.

3. PFPmaker создает профессиональные фотографии профиля на основе любой фотографии. Он использует ИИ для удаления фона, искусственно делает вашу фотографию красивее и автоматически генерирует десятки вариантов изображения.

4. Carbon поможет создавать красивые изображения вашего кода.

5. CSSGradient упрощает создание новых веб-градиентов. Включает набор инструментов, которые помогут вам повысить уровень работы с градиентом.

6. Neumorphism.io — неоморфные формы не так просто создавать, но генератор Neumorphism упрощает этот процесс.

7. Remove.bg — позволяет удалять фон на любой фотографии автоматически.

#инструменты #веб

​Руководство по наложению изображений в CSS

Обычно мы создаём наложения в CSS, чтобы получить изображения за текстом, значками или другими изображениями. Это руководство покажет вам, как красиво наносить слои как на фоновые изображения, так и на обычные <img> элементы в CSS. 

Подробнее:

https://blog.logrocket.com/guide-image-overlays-css/

#css #фронтенд