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

Публичное собеседование

Разбор технического собеседования на позицию senior front-end developer

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

Тайна меняющейся фавиконки

Вчера на работе разработчик обратился ко мне с проблемой. Разговор шел примерно так:

Дев: Привет, Альваро! У нас проблема.
Я: Что не так?

Дев: Фавиконка на сайте неправильная. Это не наш корпоративный логотип.

Я: Что????

Дев: показывает экран

Я: .....


Rus https://habr.com/ru/post/651877/
Eng https://alvaromontoro.com/blog/67996/the-mystery-of-the-changing-favicon

404 black hole

Страница 404, реализованная на Vue.

https://codepen.io/justjspr/pen/qBZYmjY

​На курсе «Мидл фронтенд-разработчик» студенты становятся уверенными мидлами за пять месяцев, а не за полтора года. 
→ Приходите учиться, если вы разбираетесь в HTML, CSS, JavaScript — мы поможем повысить грейд. 

Выпускники смогут браться за более сложные задачи, чем одностраничные сайты или простые веб-сервисы. На курсе мы поможем глубже разобраться: 
— в алгоритмах и структурах данных; 
— в паттернах проектирования;
— в том, как работают популярные в веб-разработке технологии.
Что будет на учёбе:
⬛️ Код-ревью и обратная связь от старших разработчиков из Яндекса и других IT-компаний.
⬛️ Обучение на реальных рабочих задачах: студенты создадут мессенджер и веб-игру с нуля.
⬛️ Наставники и менторы будут делиться опытом на вебинарах и встречах один на один.
⬛️ Кураторы и дедлайны не дадут прокрастинировать.
⬛️ Карьерные консультации: наши специалисты помогут найти новый проект или сделать так, чтобы на текущей работе вам начали давать более амбициозные задачи.

→ Старт потока — 3 марта. Учёба длится пять месяцев.
→ Познакомьтесь с курсом и оцените свои силы — это бесплатно.

Подборка лучших фреймворков ReactJS💡

Next JS
Next.js дает вам лучший опыт разработчика со всеми функциями, необходимыми для производства: гибридный статический и серверный рендеринг, поддержка TypeScript, интеллектуальное связывание, предварительная выборка маршрута и многое другое. Конфигурация не требуется.

Gatsby JS
Создавайте невероятно быстрые и насыщенные веб-интерфейсы, объединяющие все ваши любимые службы и контент. Создавайте сайты электронной коммерции, целевые страницы, блоги и многое другое за считанные минуты.

Remix JS
Создание продукта - это весело, но возиться с инструментами сборки и загрузкой данных - нет. Remix знакомит вас с последними достижениями в области веб-разработки (а затем и некоторых других), не оставляя позади фундаментальных принципов, которые делают ее отличной.
Remix, созданный для бессерверной эпохи и использующий наш открытый исходный код, который уже используется в миллионах проектов, дает вам прочную основу для создания лучших веб-сайтов. Вам понравятся производительность и продуктивность, которые дает вам наш новый (и традиционный) подход.


Blueprint JS

Blueprint — это набор компонентов пользовательского интерфейса React, которые охватывают большинство общих элементов интерфейса, шаблонов и взаимодействий в Интернете. Использование Blueprint гарантирует, что вы получите элегантный и простой в использовании пользовательский интерфейс, что позволит вам сосредоточиться на создании продукта, а не на элементарных элементах, которые его составляют. Повысьте свою производительность с помощью набора высококачественных базовых компонентов, которые можно использовать «из коробки», а универсальные концепции дизайна и модификаторы применимы ко всем компонентам. Blueprint был разработан с нуля для настольных приложений, поэтому он не был тщательно протестирован в мобильных веб-браузерах (iPad работает нормально).