Как собрать кубик Рубика в браузере на чистом Canvas
Разбор того, как сделать 3D-кубик без Three.js, используя только Canvas и базовую математику. В материале по шагам показывают, как устроить проекцию, реализовать поворот граней и постепенно довести всё до интерактивной модели, которую можно вращать прямо в браузере.
Хороший пример того, как из простых инструментов собрать наглядную графику и лучше понять основы рендера, трансформаций и работы с 3D в JavaScript.
#Canvas #JavaScript #3D
Разбор того, как сделать 3D-кубик без Three.js, используя только Canvas и базовую математику. В материале по шагам показывают, как устроить проекцию, реализовать поворот граней и постепенно довести всё до интерактивной модели, которую можно вращать прямо в браузере.
Хороший пример того, как из простых инструментов собрать наглядную графику и лучше понять основы рендера, трансформаций и работы с 3D в JavaScript.
#Canvas #JavaScript #3D
ES2025: JSON теперь можно импортировать как модуль
В ES2025 работа с JSON стала проще: такие файлы можно подключать напрямую в JavaScript без лишних обходных решений. Это удобно для конфигов, локальных данных и других статичных структур.
Синтаксис выглядит так:
После этого объектом можно пользоваться сразу в коде:
Фича делает код чище и понятнее, а заодно убирает лишнюю возню с загрузкой и парсингом. Кстати, такие изменения хорошо показывают, куда двигается современный стек — от языка до браузеров, и похожие апдейты часто разбирают в AI_trends_IT_world на фоне более широких трендов в AI и технологиях.
#ES2025 #JavaScript #JSON
В ES2025 работа с JSON стала проще: такие файлы можно подключать напрямую в JavaScript без лишних обходных решений. Это удобно для конфигов, локальных данных и других статичных структур.
Синтаксис выглядит так:
import config from './config.json' with { type: 'json' };После этого объектом можно пользоваться сразу в коде:
console.log(config.apiUrl)console.log(config.timeout)Фича делает код чище и понятнее, а заодно убирает лишнюю возню с загрузкой и парсингом. Кстати, такие изменения хорошо показывают, куда двигается современный стек — от языка до браузеров, и похожие апдейты часто разбирают в AI_trends_IT_world на фоне более широких трендов в AI и технологиях.
#ES2025 #JavaScript #JSON
Интерактивный rail из изображений с «гравитацией» на GSAP
Идея простая, но выглядит очень живо: при движении курсора на экране появляются картинки, затем они «падают» вниз окна, слегка отскакивают и плавно исчезают. Направление движения при этом сохраняется, поэтому анимация ощущается естественно, а не случайно.
В основе — компонент на JavaScript и GSAP-анимация. Логика строится на отслеживании дельты движения мыши: когда курсор проходит заданный порог, создаётся новый элемент. Дальше уже подключаются физически похожее падение, отскок и затухание. Хороший приём для промо-страниц, креативных лендингов и экспериментальных UI.
#GSAP #JavaScript #анимация
Идея простая, но выглядит очень живо: при движении курсора на экране появляются картинки, затем они «падают» вниз окна, слегка отскакивают и плавно исчезают. Направление движения при этом сохраняется, поэтому анимация ощущается естественно, а не случайно.
В основе — компонент на JavaScript и GSAP-анимация. Логика строится на отслеживании дельты движения мыши: когда курсор проходит заданный порог, создаётся новый элемент. Дальше уже подключаются физически похожее падение, отскок и затухание. Хороший приём для промо-страниц, креативных лендингов и экспериментальных UI.
#GSAP #JavaScript #анимация
⌨️ Бесплатная база для входа в IT
freeCodeCamp — это большая подборка материалов по веб-разработке, кибербезопасности, Python и машинному обучению. На платформе собрано более 6000 уроков и практических разборов, с которых удобно начинать или закрывать пробелы в базе.
Можно подтянуть
#freeCodeCamp #Python #JavaScript
freeCodeCamp — это большая подборка материалов по веб-разработке, кибербезопасности, Python и машинному обучению. На платформе собрано более 6000 уроков и практических разборов, с которых удобно начинать или закрывать пробелы в базе.
Можно подтянуть
HTML, CSS, JavaScript, Python, Git, а также разобраться с Node.js и React. Хороший вариант для тех, кто хочет учиться в своём темпе и без лишних затрат — почти как смотреть разборы сюжетов, рейтингов и премьер, только про код и технологии.#freeCodeCamp #Python #JavaScript
👏2