Как создавать потрясающие 3D-сцены с помощью React Three Fiber

В этой статье показано, как создавать потрясающие 3D-анимации с помощью React Three Fiber (R3F). Вы рассмотрите настройку сцены, создание геометрии, добавление освещения и включение эффектов постобработки. Более того, вы научитесь воссоздавать приведенную выше анимацию с нуля.

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

#фронтенд #библиотека #r3f

​Как использовать пользовательские шрифты в Tailwind CSS

Если вы работаете с Tailwind, то в этой статье вы сможете узнать, как добавить как веб-шрифты (Google Fonts), так и локально установленные шрифты в ваши проекты Tailwind. Это гарантирует, что вы создадите свой проект именно так, как того хотели.

https://blog.logrocket.com/how-to-use-custom-fonts-tailwind-css/

#css #tailwind

​Создание игры с Three.js

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

В этой статье вы сможете изучить способ, как можно создать игру с помощью Three.js:

https://blog.logrocket.com/creating-game-three-js/

#threejs

Императивное и декларативное программирование

Небольшое видео, объясняющее чем отличается императивное и декларативное программирования, а также почему вы предпочитаете одно другому:

https://youtu.be/E7Fbf7R3x6I

#видео

​25 мест, где можно найти бесплатные компоненты Tailwind CSS

Работаете с Tailwind? Тогда вы могли столкнуться с такой проблемой, что нужного компонента не было, а где искать вы не знали. Но мы попробуем решить вашу проблему, предложив статью, где собраны аж 25 источников компонентов на любой вкус. Вот она:

https://techrocks.ru/2022/01/24/25-components-libraries-for-tailwind-css/

#tailwind #css

​​Я: повторяю инструкцию из интернета

Мой код:

​Что такое Web3? Объяснение децентрализованного Интернета будущего

С момента появления интернета он претерпел серьёзные изменения, но одной из вещей, которая не менялась была централизация. Да, сегодня сложно представить работу интернета без ЦОДов, которые хранят множество информации и контролируют взаимодействие пользователей с ней. Но Web3 призван сделать интернет не только децентрализованным, но и более конфиденциальным, чем сейчас. О том, как это возможно — читайте в статье:

https://www.freecodecamp.org/news/what-is-web3/

#web3

hello в стиле Apple

Сложный с точки зрения количества строк, но простой по сути codepen-проект, повторяющий приветственное окно различной яблочной продукции, выполнен с использованием SVG и библиотеки GSAP:

https://codepen.io/tripti1410/details/pordWpZ

#codepen

​intro.js — то, что нужно для создания простых и мощных визуальных руководств пользователя

Если вам необходимо продемонстрировать возможности вашего продукта и показать, как им пользоваться простым пользователям, то JavaScript-библиотека intro.js отлично вам подойдёт. Её уже используют многие крупные компании такие, как Amazon, Nestle и другие, так что на неё можно положиться.

Убедитесь сами:

https://introjs.com/

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

Зачем мне эта математика? Компьютер сам посчитает!

Создание радиального меню для сайта

Интересная реализация меню, выполненная в форме кольца. Автор пошагово продемонстрировал, как можно сделать аналогичное меню.

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

https://www.youtube.com/watch?v=9li7UcMuwKI

#видео

​Как плагин Emmet помогает ускорить работу с программным кодом

Emmet — ранее известный как Zen Coding — набор плагинов для текстовых редакторов, которые помогают ускорить написание кода HTML и CSS. И ускорение здесь действительно заметное. Например, стоит вам ввести знак «!» и нажать клавишу TAB, как тут же появится готовый «скелет» HTML-страницы. Но это только верхушка айсберга! Подробнее о возможностях Emmet вы узнаете в этой статье:

https://tproger.ru/articles/kak-plagin-emmet-pomogaet-uskorit-rabotu-s-programmnym-kodom/

#emmet

​Шахматы на React и TypeScript

Всего за час вы сможете изучить способ создания шахмат с использованием React и TypeScript. Для этого вам понадобятся общие знания ООП и щепотка энтузиазма:

https://youtu.be/mUvYGUYMvKo

#видео #react #typescript

​Как довести фронтендера до инфаркта:

​Рефакторинг компонента React со 165 до 30 строк

React Hook Form — одна из самых популярных библиотек для обработки элементов ввода формы в экосистеме React. Но добиться её правильной интеграции может быть непросто, если использовать какую-либо библиотеку компонентов.

Эта статья научит вас, как интегрировать React Hook Form с различными компонентами Material UI:

https://habr.com/ru/company/otus/blog/653017/

#react

​Создание веб-макетов для двухэкранных и складных устройств

Устройства с двумя экранами существуют на рынке уже почти три года. За это время новые веб-технологии были созданы с учётом отзывов разработчиков, чтобы обеспечить адаптируемость сайтов в Интернете к подобного рода устройствам. Это и новые функции медиа-запросов, и применение JavaScript API, и так далее.

Подробнее обо всём в статье:

https://tprg.ru/tghD

​Навигация с горизонтальной прокруткой

Цель этой статьи — научить вас создавать отзывчивую горизонтальную навигацию с помощью прокрутки переполнения. Весь код уже тут вместе с объяснениями:

https://markdotto.com/2022/03/10/horizontal-scrolling-nav/

#фронтенд

Как Discord реализовал навигацию клавиатурой по всему приложению

Разработчик из Discord поделился опытом создания полноценной навигации по приложению с помощью клавиатуры. Он рассказал с какими проблемами они столкнулись в процессе реализации функционала, а также поделился инсайта.

Перевод статьи можно прочитать здесь:

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

#javascript

Достойные этой награды, отзовитесь