Понимание правил и соотношений цветового контраста в вебе

https://css-tricks.com/understanding-web-accessibility-color-contrast-guidelines-and-ratios/

#js #react #reactnative #mobile

Небольшая презентация про разработку мобильного приложения на ReactNative. Существует также VueNative, основанный на ReactNative. Эти фреймворки позволяют веб-разработчику, знающему React/Vue быстро делать несложные (с точки зрения интерфейса) мобильные приложения без необходимости осваивать нативные средства (Java, Swift etc.)

https://www.youtube.com/watch?v=dat4PnoQvaQ

#css #tip

Воспользуемся CSS-селектором класса ˆ="form-", которые позволит выбрать все элементы, содержащие класс с префиксом form-:

[class^="form-"] {
background: red;
height: 100px;
width: 100px;
margin: 10px 0;
display:block
}
Теперь для всех элементов HTML-документа:

<div class="box-123"></div>
<span class="box-124"></span>
<article class="box-125"></article>
будут установлены одинаковые CSS-свойства.

Эффект частиц пыли на CSS

https://codepen.io/uiswarup/full/oNXYNOB

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

В новом видео наш подписчик рассказывает, как создать эффект перемещения частиц по гексагональной сетке. Без использования библиотек, на чистом 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