Кроссбраузерное видео с прозрачным фоном

Поскольку веб-сайты становятся все более динамичными в плане дизайна, иногда возникает необходимость включить в них сложные анимированные элементы. Существует множество способов сделать это - от CSS-переходов до 3D-рендеринга на canvas и анимированного SVG. Но часто проще использовать <video>, поскольку они могут быть довольно эффективными и с их помощью можно сделать практически все, что угодно.

Подробнее

Как удалить все каталоги node_modules с компьютера.

За последние несколько лет я запускал npm install больше раз, чем смогу сосчитать. И как результат на компьютере образовалось довольно много каталогов node_modules, о которых я давно уже забыл и не использую.

Подробнее

Fancy Border Radius - генератор сложных фигур.

https://9elements.github.io/fancy-border-radius/#36.43.37.0--216.300

Anime.js - продвинутая JS библиотека для создания анимаций

Особенности / преимущества:
✔️Anime.js работает с атрибутами DOM, свойствами CSS, SVG, преобразованиями CSS и объектами JS.
✔️Работает со всеми основными браузерами
✔️Исходный код легко расшифровать и использовать.
✔️Есть сложные методы анимации, такие как перекрытие и постепенное завершение.
✔️ Мощный и простой API

Оф. сайт: https://animejs.com/
Гит: https://github.com/juliangarnier/anime/
Примеры использования: https://codepen.io/collection/XLebem/

Memory Game

Суть игры в том, чтобы найти пары одинаковых карточек. Логика сделана на JS.

https://codepen.io/jeytii/pen/QoagLr

The Impossible Lightbulb

Лампочка, которую невозможно включить: открывается дверь и злой мишка снова ее выключает. Анимация реализована с помощью GSAP.

https://codepen.io/jh3y/pen/dyXBKog

Модификация ArrayList

Для добавления элементов используется add(). В скобочках указывается элемент, который мы хотим добавить. Чтобы удалить элемент, пишем remove(). В скобочках можно писать как сам элемент, который мы хотим удалить, так и его индекс.

#java

Подписывайтесь на канал 👉@coddy_academy

Ребята из Geecko создали для Сбера файтинговую игру для программистов Sberfight.

Это «разминка для мозгов»: быстро найти неочевидное решение, написать код и… наслаждаться визуализацией, как виртуозно дерётся персонаж. Он даже может сделать «сберталити», ну вы понимаете😉

👉Отборочный этап — до 25 февраля.
👉В плей-офф пройдут 256 участников и все получат призы.
🏆Финальные битвы — 25–27 февраля.

Переходите по ссылке, выбирайте персонажа и погрузитесь в атмосферу файтинга, в котором мощь героя зависят только от силы ваших кодинговых скиллов😎 Да победит умнейший!

P.S. Понравился формат? Приходите на Арену и участвуйте в боях PvP или «стенка на стенку». Приглашайте друзей, коллег или бейтесь со случайными противниками. Лучшие команды получат ценные призы.

Интересует web и все что с ним связано? Тогда тебе сюда - Web Overflow

Тебя тут ждут два дева, которые делятся своим опытом и ништяками, которые они юзают каждый день.

✔️ Разговорный формат
✔️ Только живой и настоящий опыт
✔️ Разбираем вопросы на интервью любой сложности
✔️ Решаем интересные задачи
✔️ Обсуждаем актуальные новинки в сфере ИТ

https://yangx.top/web_overflow
https://yangx.top/web_overflow
https://yangx.top/web_overflow

Создаём расширение для Chrome

Написать расширение для Chrome непросто. Это не то же самое, что разработка веб-приложения: не хочется перегружать браузер оверхедом JS, ведь расширения работают одновременно с сайтами. Более того, у нас нет инструментов упаковки или отладки из привычных фреймворков.

Подробнее

Babel - бесплатный компилятор JS с открытым исходным кодом

Babel - это набор инструментов, который в основном используется для преобразования кода ECMAScript 2015+ в обратно совместимую версию JavaScript в текущих и старых браузерах или средах.

Особенности:
👉 изменение синтаксиса
👉 Преобразование синтаксиса Функции Polyfill, которые отсутствуют в вашей целевой среде (с помощью сторонних полифилов, таких как core-js)
👉 Преобразования исходного кода (codemods)

Ссылка: https://babeljs.io/
Гит: https://github.com/babel/babel

Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

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

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Создание пиксельных эффектов на JavaScript и Canvas

00:00:00 Intro
00:00:55 Project 1 INTRODUCTION to pixel manipulation for beginners
00:02:30 How to bring image into HTML canvas project
00:05:15 How to analyze image for pixel data
00:11:58 How to turn image into grayscale
00:14:55 Project 2 BLACK AND WHITE PIXEL RAIN using image data
00:19:45 Particle system using JavaScript classes
00:25:18 Connect particle movement to pixel data
00:43:50 Project 3 PIXEL FLOW EFFECTS
00:53:12 HTML canvas gradients, filters and other experiments
01:04:48 Project 4 INTERACTIVE PARTICLE TEXT
01:13:50 Creating particles
01:21:33 Particle physics and mouse interactions
01:35:46 How to shape particles as letters
01:49:15 Constellations effect from particles.js with vanilla JavaScript

Я ❤ Фронтенд 2021

01. Максим Сальников — Автоматизируем сервис-воркер с Workbox 6
02. Артем Арутюнян — Архитектура менеджера состояния
03. Роман Дворнов — JSON: push the limits
04. Валерия Курмак — Пользовательский опыт незрячего человека
05. Андрей Печкуров — ES6-коллекции на примере V8: у ней внутре неонка
06. Василика Климова — Расширяем реальность
07. Разбор заданий Capture the flag и награждение победителей
[Воркшоп] 08. Юлия Миоцен — Палка, палка, огуречик. Рисуем персонажную анимацию на CSS
[Воркшоп] 09. Андрей Мелихов — Теория и практика dependency injection
[Воркшоп] 10. Дмитрий Николаев — Создание приложений для голосовых ассистентов
Стелим соломку для фронтенда

https://www.youtube.com/playlist?list=PLKaafC45L_SQvmgHWgtUeX_Y59NiZhmEF

Привет! У нас прекрасные новости 🥰

26 февраля мы в четвёртый раз соберёмся на конференции «Я 🧡 Фронтенд», чтобы признаться в любви к вебу, поделиться друг с другом опытом и провести время в отличной компании.

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

Боитесь пропустить всё самое интересное? Регистрируйтесь и мы заботливо напомним о том, что интересно именно вам: ilovefrontend.ru