​Управление состоянием в React с помощью Easy Peasy

В React многое завязано на управлении состоянием компонентов. Поэтому от того насколько эффективно этот процесс происходит зависит производительность всего проекта.

В этой статье вы узнаете, как использовать Easy Peasy для управления состоянием в React, разберёте основные концепции инструмента, а также преимущества перед другими решениями

https://blog.openreplay.com/easy-peasy-state-management-using-react-easy-peasy/

#фронтенд #react

Bongo Cat Codes

Вы наверняка видели этот забавный мем в виде gif’ок или видео. Автор этого проекта решил реализовать его с помощью HTML и CSS, а вернее препроцессоров Pug и SCSS. Рисунок, разумеется, сделан с помощью SVG, а анимация реализована силами CSS.

Посмотреть код можно тут:

https://codepen.io/carolineartz/pen/VwYwZaP

#codepen #pug #scss

​Лёгкий способ создания и анимирования векторной графики

Библиотека Snap.svg упрощает работу с SVG, позволяя применять новейшие функции SVG, такие как шаблоны, полные градиенты, группы и многое другое. При этом инструмент позволяет не только создавать собственные SVG-изображения, но и редактировать и анимировать файлы, созданные в других инструментах, например, в Adobe Illustrator, Inkscape или Sketch.

Подробнее о Snap.svg можно узнать тут:

http://snapsvg.io/

#javascript #svg #библиотека

И всё по новой

​Как работают глаза и что надо учитывать, создавая тёмную тему приложения

Сегодня тёмная тема на сайте многими воспринимается уже не как приятная фишка, а скорее обязательный атрибут. Но сделать цвета просто тёмными недостаточно, ведь из-за особенностей человеческого глаза далеко не все сочетания цветов воспринимаются комфортно.

Как сделать всё грамотно, узнаете тут:

https://habr.com/ru/company/ispmanager/blog/694412/

#фронтенд

​Создаём собственную версию Twitter с React и TypeScript

В этом руководстве вы сможете познакомиться с различными технологиями, например MongoDB и PostgreSQL, TypeScript, Jest и другими.

К концу этого руководства у вас появится ещё одно приложение для портфолио, а также понимание, как работает веб-сайт со всех сторон:

https://dev.to/andrewbaisden/the-complete-modern-react-developer-2022-3257

#бэкенд #фронтенд

​Как думаете, ваш сайт достаточно быстрый, чтоб пользователь дождался его загрузки?

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

В этой статье вы узнаете о 10 советах, которые помогут вам повысить производительность страницы за счёт HTML и CSS:

https://levelup.gitconnected.com/html-css-features-tips-for-a-10x-fast-page-loading-speed-5fb6c2d88df8

#seo #css #html

Пианино на JavaScript для Chrome

Понятное и подробное руководство по созданию веб-версии пианино уже здесь. С ним справится даже начинающий разработчик, а понятные комментарии помогут разобраться, как всё работает.

Сделать своё пианино можно тут:

https://thecode.media/piano-js/

#javascript

​Пишем игру на JS/TS и развиваем навык работы с кодом

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

Подробнее:

https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #петпроект

​Адаптивный layout — как переверстать весь проект, не перевёрстывая его

Когда вёрстки в вашем проекте становится очень много, поменять что-то — особенно везде и сразу — становится непросто. К счастью, есть способ, который позволит настроить адаптивность и внешний вид сайта по вашему, а точнее по вкусу пользователя, и даже сделать это «на лету».

Об этом способе можно подробнее узнать здесь на примере почты Mail.ru:

https://habr.com/ru/company/vk/blog/579798/

#фронтенд

​Разработка пользовательских хуков для React

С хуками разработка на React стала проще, но при этом разобраться непосредственно в работе этих хуков может быть достаточно тяжело. Эта статья поможет вам разобраться в достаточной важной и актуальной теме максимально доступным и понятным языком:

https://tproger.ru/articles/razrabotka-polzovatelskih-hukov-dlja-react/

#react #фронтенд

Паззлы на чистом CSS

Обычно, для какого-то специфического взаимодействия с элементами без JavaScript применяются чекбоксы, которые с помощью некоторых допиливаний помогают наладить логику. Но в этой статье автор предлагает пойти дальше и создать игру без использования чекбоксов.

Посмотрите, что у него в итоге получилось и каким образом:

https://css-tricks.com/how-i-made-a-pure-css-puzzle-game/

#css #gamedev

​Приложение на чистом JS с API для начинающих

В этом видео вы узнаете, как с нуля создать приложение на чистом JS с бесплатным API. Вы также узнаете про некоторые фишки из ES5 и ES6, например, про деструктуризацию в JS. Ещё посмотрим, как можно хранить данные в браузере с помощью localStorage.

Подробнее:

https://youtu.be/kugdKyHykAA

#видео #фронтенд #javascript

И кто виноват?

Создаём крутые 3D-сцены с помощью React Three Fiber

React Three Fiber упрощает создание 3D-сцен. В этой статье вы узнаете, как создавать захватывающие 3D-анимации с помощью React Three Fiber (R3F).

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

https://varun.ca/modular-webgl/

#фронтенд #react #r3f

Эффект искажения пикселей с Three.js

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

В этой статье рассказали о том, как это сделать:

https://tympanus.net/codrops/2022/01/12/pixel-distortion-effect-with-three-js/

#фронтенд #threejs

Beat Burger — самая странная барабанная установка

Эта барабанная установка, «сделанная из бургера», реализована с помощью React и библиотеки gsap. При этом на ней можно поиграть, управляя мышкой или клавиатурой.

Попробуйте сами и убедитесь:

https://codepen.io/ste-vg/pen/MWpxKYR?editors=1010

#codepen #react #gsap

​Kubernetes для фронтенд-разработчиков

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

В этой статье вы узнаете всё, что нужно знать фронтендеру о Kubernetes:

https://www.smashingmagazine.com/2022/05/kubernetes-front-end-developers/

#kubernetes

​Одностраничные приложения: полное руководство

Одностраничники уже плотно вошли в нашу жизнь и значительно её облегчили как с точки зрения разработчиков, так и пользователей. Если вы ещё не работали с SPA, то самое время познакомиться поближе с этой технологией и начать внедрять её в свои проекты:

https://www.keycdn.com/blog/single-page-application

#spa

​Remotion — программное создание видео с React

Для создания видео вам больше не нужны сложные видеоредакторы. Достаточно использовать remotion в связке с React. Он позволяет создавать видеоролики в формате MP4. А чтобы посмотреть результат разработки видео, можно воспользоваться браузером — там доступен предварительный просмотр.

Подробнее о библиотеке тут:

https://www.remotion.dev/

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