Image Hover Effect на чистом CSS

Этот проект предлагает создание необычного эффекта при наведении на изображение — текст получает эффекты негатива, но только на некоторую область.

Как повторить такой эффект у себя в проекте, можно узнать тут:

https://codepen.io/ig_design/pen/WNrWezW

#codepen #css

Skeleton Mammoth

Это библиотека для создания анимированных заглушек (скелетонов) с помощью CSS. Они отображают структуру контента, пока он загружается, чтобы страница не прыгала, а пользователям было понятно, что происходит.

Познакомиться со всеми возможностями можно на странице проекта.

#библиотека #css

10 полезных библиотек для фронтенд-разработки

Некоторые из них вам, возможно, знакомы, но некоторые смогут удивить. Например, тут вы найдете современную альтернативу библиотеке lodash, дополнение к Moment.js, библиотеку для работы с элементами Drag'n'Drop и многое другое.

Переходите по ссылке и выбирайте самые полезные для вас:

https://nuancesprog.ru/p/24406/

#фронтенд #библиотека

Зато 5 минут и работает. А баги и в остальные 4 часа 55 минут поправить можно

Благотворительный проект «Дело в собаке» ищет администратора сайта с функциями вёрстки

До 6 часов в неделю, удалёнка, без зарплаты.

«Дело в собаке» — полностью волонтёрский проект. Он посвящён собакам-помощникам для людей с разными ментальными и физическими заболеваниями, например депрессией, диабетом или астмой.

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

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

Что нужно делать?

— Сверстать сайт по готовому дизайну и перенести на сервер (сайт на Vue.js), настроив почту и разделы сайта по запросу.
— Администрировать сайт.

Сайт: https://delovdogs.ru/

Подробности о вакансии: https://gorodrabot.ru/vacancy/922041017/administrator_sayta_verstka_v_blagotvoritelnyiy_proekt_moskva

Связаться с руководителем проекта: @Nyta_Gins

Оптимизация загрузки ресурсов с помощью Fetch Priority API

Fetch Priority API указывает приоритет ресурсов для браузера. Это позволяет обеспечить оптимальную загрузку данных для того, чтобы пользователь мог максимально быстро начать работу с сайтом.

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

https://web.dev/fetch-priority/

#api

Следим за NPM-пакетами правильно

pkg-size — это инструмент, который поможет вам проанализировать влияние NPM-пакетов на размер локальных node_modules и бандла при сборке проекта.

Как его установить и использовать, узнаете здесь: https://pkg-size.dev

#инструменты #npm

SSL и SSL-сертификаты для новичков

Тема SSL, сертификатов и вот этого всего довольно сложная. Но эта статья должна помочь вам разобраться в теме так, чтобы хоть что-то отложилось в голове.

Переходите по ссылке и читайте: https://habr.com/ru/articles/884898/

#ssl

Немного полезной информации о слотах в Vue.js

Слоты — это такие места в компоненте, куда можно вставлять разметку. Они позволяют создавать универсальные компоненты, которые сохраняют логику, но могут быть кастомизированы, как вам надо.

Подробнее о возможностях и пользе слотов: https://habr.com/ru/companies/otus/articles/850204/

#vue #фронтенд

разработчик сделал пинг-понг во вкладках браузера

Пользователь Nolen Royalty сделал «Faviconic Pong», где игра происходит между главным окном Chrome и 240 фавиконами. В игре есть ракетки, мяч и табло для подсчета очков.

Код залипалова можно глянуть здесь. А разобраться, как он работает — вот тут.

@your_tech

Pass Strength Shield

Это анимированное поле ввода пароля, созданное с помощью React, GSAP и DrawSVGPlugin3. Картинка над полем меняется в зависимости от того, соответствует пароль требованиям или нет.

Как повторить такой проект, можно узнать на его странице:

https://codepen.io/lerida/pen/MWjPxRW

#codepen

Как задеплоить вебаппку «Телеграма» всего за 20 минут

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

#telegram #webapp #miniapp

Проверьте свои репозитории. Вдруг там и до первой версии рановато

Сможете сделать устойчивую систему на Java?

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

Проверьте свои силы в новом квизе: https://tprg.ru/zEI5

А результатами делитесь в комментариях.

#квиз

ESLint теперь официально поддерживает линтинг CSS

Об этом появилась информация в блоге команды. Для настройки необходимо установить плагин @eslint/css. Он обеспечивает синтаксический анализ с помощью CSSTree и правил CSS.

Чтобы использовать плагин, установите его с помощью npm:

npm install @eslint/css -D

Подробнее можно почитать в их блоге.

#новости #css #eslint

Функции в CSS? Серьёзно?

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

Но вот пощупать функции в тестовой версии нам никто не запретит. Поэтому открываем статью и смотрим, как CSS превращается в язык, прости Господи, программирования.

Все подробности здесь: https://css-tricks.com/functions-in-css/

#css

Как конфигурировать Git

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

О том, как это сделать правильно, узнаете в статье: https://habr.com/ru/articles/886538/

#git