​Эффект перемещения частиц по гексагональной сетке

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

В конце получится несколько интересных анимаций. Вот их код:
— https://tprg.ru/tAHi
— https://tprg.ru/0mjW
— https://tprg.ru/4DRk
— https://tprg.ru/mYt8
— https://tprg.ru/QG8L
— https://tprg.ru/vEb3
— https://tprg.ru/kUdz

Другие уроки по анимации:
— анимация волнистых колец;
— эффект притяжения и отталкивания частиц;
— эффект электроразряда.

#фронтенд #javascript

#js #tip

Копирование текста в буфер обмена.


function copyToClipboard() {
const str = document.getElementById('item-to-copy').innerText;
const el = document.createElement('textarea');
el.value = str;
el.setAttribute('readonly', '');
el.style.position = 'absolute';
el.style.left = '-9999px';
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}

#js #tip

5 cекретных функций JSON.stringify ()

https://medium.com/javascript-in-plain-english/5-secret-features-of-json-stringify-c699340f9f27

#js #tips

Очередная статья про await/async в JS. Повторенье - мать ученья ^_^

Сравнительно новыми дополнениями JavaScript являются асинхронные функции и ключевое слово await. Эти возможности в основном являются синтаксическим сахаром над промисами, облегчая написание и чтение асинхронного кода. Данная статья поможет вам разобраться, что к чему.
Читать

#frontend #javascript

#js #tips

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

Как начать думать функционально в JavaScript

https://itnext.io/how-to-start-thinking-functionally-in-javascript-b7805e3b48e

#vue #tips

#svelte #tips

Svelte - довольно свежий, но быстро набирающий популярность клиентский движок, который совсем скоро будет составлять серьёзную конкуренцию Vue, React и Angular.

Есть смысл с ним как минимум ознакомиться.

Управление состоянием в Svelte

https://dev.to/joshnuss/managing-state-in-svelte-29o7

#CSS #lessons CSS-анимация не особо сложная тема. По мне, так flexbox сложнее.

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

Для того что бы научиться делать самые популярные анимации - достаточно 60 мин. Ну, как минимум, вы сможете понимать чужой код анимации и править его под себя 🤣

Для этого предлагаю вам шпаргалку + видео по двум CSS свойствам:

1. TRANSITIONS CSS
👉 Шпаргалка
👉Видео

2. CSS ANIMATION & KEYFRAMES
👉 Шпаргалка
👉Видео

Попробуйте, это просто!

#css

#vuejs #nuxtjs #pwa

Nuxt - фреймворк над Vue, обеспечивающий серверный рендер страниц. Аналог Next для React. Серверный рендер позволяет ускорить первичную загрузку SPA-страницы.

PWA - технология, позволяющая странице вести себя подобно приложению. В частности - даёт возможность работы оффлайн (синхронизация с сервером при восстановлении связи).

Создаем прогрессивный PWA интернет-магазин на Nuxt.js 2 пошаговое руководство Часть 1

https://habr.com/ru/post/490496/

#tips

Инструменты оптимизации сайта:

https://tproger.ru/articles/tproger-performance-monitoring-and-improving-tools/

@vuejs @tips

Несколько интересных трюков для Vue
https://habr.com/ru/post/491130/