Руководство по созданию анимационного сайта на основе React 3D с ThreeJS

Узнайте, как создать 3D-анимацию в React, используя такие технологии, как WebGi (на базе Three.js) и GSAP. Сначала мы научимся находить 3D-модели и отображать их на своем сайте с помощью WebGi. Затем с помощью React и GSAP мы создадим 3D-анимацию этой модели. Далее мы узнаем, как оптимизировать 3D-анимацию в React для мобильных устройств. Наконец, мы создадим сайт для последующей публикации.

⌨️ (0:00:00) Intro
⌨️ (0:01:27) Project setup
⌨️ (0:07:12) Building website navigation
⌨️ (0:15:02) Building jumbotron
⌨️ (0:21:42) Building sound section
⌨️ (0:29:27) Building display section
⌨️ (0:33:27) How to find and load 3D models
⌨️ (0:36:55) Building WebGi viewer component
⌨️ (0:53:17) Animating 3D model with GSAP scroll animation
⌨️ (1:13:42) Implementing 3D model preview mode
⌨️ (1:32:27) Optimizing 3D animation for mobile phones
⌨️ (1:43:31) Building production-ready website and uploading
⌨️ (1:45:07) Outro

источник

👉 @frontend_1

Полное визуальное руководство по пониманию цикла событий Node.js

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

Если вы похожи на меня, то вы провели бесчисленное количество часов, читая документацию и просматривая видео, пытаясь понять цикл событий. Но даже опытному разработчику бывает трудно получить полное представление о том, как все это работает. Именно поэтому я подготовил это наглядное руководство, которое поможет вам полностью понять цикл событий Node.js. Усаживайтесь поудобнее, возьмите чашку кофе, и давайте погрузимся в мир цикла событий Node.js.

https://www.builder.io/blog/visual-guide-to-nodejs-event-loop#asynchronous-programming-in-java-script

👉 @frontend_1

5 лучших практик обработки HTTP-ошибок в JavaScript

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

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

В данной статье рассматриваются некоторые лучшие практики обработки HTTP-ошибок в JavaScript-приложениях.

https://www.syncfusion.com/blogs/post/handling-http-errors-javascript.aspx

👉 @frontend_1

Новое ключевое слово в TypeScript 5.2: 'using'

https://www.totaltypescript.com/typescript-5-2-new-keyword-using

👉 @frontend_1

Создание лучшего и более быстрого представления кода

Новая версия GitHub Code View предоставляет пользователям множество новых возможностей для улучшения качества чтения и изучения кода, и мы преодолели ряд уникальных технических препятствий, чтобы предоставить эти возможности без ущерба для производительности.

https://github.blog/2023-06-21-crafting-a-better-faster-code-view/

✍️ @React_lib

JavaScript Development Hacks: 13 скрытых возможностей, которые необходимо знать

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

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

https://blog.canopas.com/javascript-development-hacks-13-hidden-gems-you-need-to-know-e273cf662266

👉 @frontend_1

Image gallery with flex-grow

Пример галереи изображений на CSS + HTML с эффектом наведения.

https://codepen.io/ahmadghoniem/pen/QWJdMMe

👉 @frontend_1

Однострочники JavaScript, которые можно использовать в каждом проекте

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

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

Давайте рассмотрим 10 важнейших однострочников, которые стоит использовать практически в каждом создаваемом JavaScript-проекте.

https://www.freecodecamp.org/news/javascript-one-liners-to-use-in-every-project/

👉 @frontend_1