Паззлы на чистом 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 года. Вы найдёте здесь множество примеров кода, а также глубокое раскрытие самых важных тем.

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

#книга

Голограммы, пленочные засветки и шейдеры на чистом CSS

Как вы обычно делаете визуальные эффекты для веб-страницы? Наверное, используете какую-нибудь JS-библиотеку, которая может прокачать сцену, добавив освещение, 3D, шейдеры и прочее, например threejs. Верно?

Но на самом деле в некоторых кейсах уже можно смело отказывать от JS в пользу CSS, ведь браузеры наконец поддерживают mix-blend-mode. Например, вы можете добавить эффект засветки при скролле страницы, как на этой картинке выше (как это работает можно увидеть по ссылке). В этой статье вы узнаете, как добавить крутые эффекты для ваших изображений только благодаря CSS и заодно увидите, как они работают в жизни:

https://css-live.ru/tricks/gologrammy-plenochnye-zasvetki-i-shejdery-na-chistom-css.html

#css #фронтенд

​10 навыков начинающего QA-инженера. Как инструменты помогают в ручном тестировании сайтов

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

В этой статье собраны 10 навыков, которые нужны QA-инженеру, а также связанные с ними инструменты:

https://tproger.ru/articles/10-navykov-nachinajushhego-qa-inzhenera-kak-instrumenty-pomogajut-v-ruchnom-testirovanii-sajtov/

#qa

​Как повысить производительность бэкенд-приложений

Бэкенд — такая штука, которая может со временем разрастаться до гигантских масштабов, если это будет необходимо. Неправильная стратегия при проектировании бэкенд-системы может сыграть с вами злую шутку и сделать систему не производительной. Как этого избежать и выжимать из бэкенда максимум, узнаете тут:

https://nuancesprog.ru/p/16485/

#бэкенд

​WebRTC для всех и каждого

Протокол WebRTC — это набор правил, позволяющий двум агентам браузерам вести двунаправленную (bi-directional) безопасную коммуникацию в реальном времени. Если хотите понять, зачем он нужен нам, то вот небольшой список его особенностей и возможностей:

— открытость стандарта;
— наличие шифрования;
— отображение NAT (NAT Traversal);
— перепрофилирование существующих технологий;
— контроль перегрузки (congestion control);
— низкая задержка (на уровне долей секунды, sub-second latency).

Это лишь небольшая часть, больше информации в статьях:

Часть 1 — https://habr.com/ru/company/timeweb/blog/656947/

Часть 2 — https://habr.com/ru/company/timeweb/blog/657885/

#webrtc