Web разработка

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

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

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

#css #tip by David Mraz

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

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

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

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

#html

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

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

https://youtu.be/dDeWWQWMM-Y

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

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

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

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

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

#фронтенд

«Неочевидные возможности SVG в современном фронтенде»

Константин Остров, руководитель отдела фронтенд-разработки в студии «Феникс», делится историей о том, как его команда преодолевала сложности с SVG и на какие грабли не стоит наступать вам.

Вы узнаете:

— о позиционировании объектов внутри SVG и о том, как им овладеть;
— о внедрении динамических элементов внутрь SVG;
— о расчете координат объектов вне box модели;
— о возможности влиять на содержимое SVG средствами CSS и JS, ограничениях и способах решения;
— о производительности SVG в вебе и о том, как ее можно улучшить.

📺 Смотреть

⏱ Пошаговый гайд по созданию часов с помощью недавно добавленных тригонометрических функций CSS sin() и cos().

Читать

Бесконечная прокрутка на сайте

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

https://evgeniiray.medium.com/infinite-scrolling-in-web-ultimate-guide-b698124b3172

@htmlcssjavas

​Десять советов по улучшению CSS-переходов и анимации

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

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций :

https://joshcollinsworth.com/blog/great-transitions

#css

​Браузерные игры, которые помогут легко изучить CSS

1. Flexbox Froggy — с помощью подсказок нужно помочь группе лягушек добраться до их кувшинок. На каждом уровне нужно выбрать какое свойство CSS использовать.

2. CSS Diner — в игре даётся таблица блюд, HTML форма и таблица с элементами. Игроку нужно подготовиться к ужину и разместить все предметы. Эта игра отлично подойдёт для изучения CSS селекторов.

3. Flexbox Defense — классическая игра жанра Tower Defense. Вам нужно отбить свою базу от врагов, расставляя защитные башни с помощью знаний в CSS.

#css

Советы, которые помогут увеличить скорость загрузки страницы

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

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

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#html #css

Полезная шпаргалка для веб-тестировщиков за авторством Святослава Куликова.

Jam — простой инструмент для работы с багами

Jam автоматически создаёт отчёты об ошибках со всей необходимой информацией для разработчиков. Способ работы приложения похож на метод создания скриншота, только Jam упрощает процесс создания сообщений об ошибках и делает работу за вас:

https://jam.dev/

#tools

​Шпаргалка по CSS

CSSReference.io — это бесплатное визуальное руководство по CSS. Здесь собраны примеры для каждого свойства и их детальное объяснение в виде диаграмм и иллюстраций:

https://cssreference.io/

#css #веб

Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице

Ещё не успели попробовать Flexbox или хотите освежить в памяти все его возможности? В этой статье мы собрали для вас все свойства и продемонстрировали их работу в гифках:

https://tproger.ru/articles/how-css-flexbox-works/

#css #фронтенд

Скоро на всех лендингах мира: дизайнер сделал идеально блестящую кнопку, на которой можно увидеть своё отражение.

Заценить можно тут.

Stable Diffusion — онлайн инструмент для генерации изображений на основе текста

Для большинства утилита вряд ли станет открытием — многие уже успели «завести» Stable Diffusion на своём железе

Но немногие знают, что им можно воспользоваться онлайн и даже без регистрации. Единственное, придётся подождать небольшую очередь

Далее всё как и везде: пишете текстовое описание изображения, а нейросеть генерирует на его основе несколько вариантов

Стоимость: #бесплатно

#нейросеть #изображения

27 февраля стартовал финал совместного профиля «Искусственный интеллект» Национальной технологической олимпиады и Академии искусственного интеллекта для школьников Благотворительного фонда Сбербанка «Вклад в будущее». В него прошли более 100 школьников из 27 регионов России и Казахстана. Всего участников было более 6000. Финальное испытание было подготовлено Sber AI, по итогам профильного тура победители получат возможность пройти оплачиваемую стажировку в Сбере и компаниях-партнерах. В текущем году призовой фонд профиля превышает 4 млн руб.

Jitter — интуитивный онлайн‑редактор анимаций

Отличительной особенностью инструмента является его дружелюбность к пользователю и наличие большого числа готовых шаблонов

В целом, утилита может быть полезна для тех, кто хочет создать видео о своём продукте и использовать при этом технику motion design

Стоимость: #бесплатно (но есть платная подписка)

#web #видео