Пианино на 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

​Разбираемся в сортах реактивности

Дмитрий Карловский большой любитель реактивности, виртуализации, распределённых систем и логики. В своём докладе он решил сравнить различные подходы к реактивному программированию и вытащить на поверхность их подводные камни.

Если хотите узнать, как реактивность решает или наоборот усугубляет проблемы, то обязательно посмотрите этот доклад с Secon Weekend:

https://youtu.be/__iGudoQUN8

#видео #доклад

​​Когда пытаешься доказать, что это фича, а не баг:

​Создание блога с помощью React и RestDB

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

В этой статье вы узнаете, как работает RestDB, создав приложение для блога с помощью React и используя RestDB для хранения статей:

https://blog.openreplay.com/building-a-blog-with-react-and-restdb/

#react #restdb

​Заметка о полезных возможностях современного CSS

Здесь собраны полезные возможности, которые уже предоставляются современным CSS и часто используются автором, а также фичи, которые должны появиться в ближайшие 2 года. Подробнее:

https://habr.com/ru/company/timeweb/blog/681422/

#css

​Настройка Webpack 5

Пошаговое руководство по настройке сборщика Webpack 5 для совместной работы с такими инструментами как Pug, Sass, JavaScript, React и Markdown:

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

#webpack

​Почему фуллстек будет в тренде в 2023 году

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

Тем не менее, фуллстек-разработчики нужны и будут оставаться востребованным ещё очень долго. И вот почему:

https://tproger.ru/articles/pochemu-full-stack-budet-v-trende-v-2023-godu/

Что почитать. JavaScript. Полное руководство [7-ое издание]

Это отличная книга для тех, кто предпочитает изучать новое таким способом. Книга выходит уже много лет, постоянно актуализируясь. Это издание полностью обновлено для изучения JavaScript образца 2020 года. Вы найдёте здесь множество примеров кода, а также глубокое раскрытие самых важных тем.

Как обычно, поиск книги в печатном или электронном виде доверяем вам!

#книга