разработчик сделал пинг-понг во вкладках браузера

Пользователь Nolen Royalty сделал «Faviconic Pong», где игра происходит между главным окном Chrome и 240 фавиконами. В игре есть ракетки, мяч и табло для подсчета очков.

Код залипалова можно глянуть здесь. А разобраться, как он работает — вот тут.

@your_tech

Pass Strength Shield

Это анимированное поле ввода пароля, созданное с помощью React, GSAP и DrawSVGPlugin3. Картинка над полем меняется в зависимости от того, соответствует пароль требованиям или нет.

Как повторить такой проект, можно узнать на его странице:

https://codepen.io/lerida/pen/MWjPxRW

#codepen

Как задеплоить вебаппку «Телеграма» всего за 20 минут

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

#telegram #webapp #miniapp

Проверьте свои репозитории. Вдруг там и до первой версии рановато

Сможете сделать устойчивую систему на Java?

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

Проверьте свои силы в новом квизе: https://tprg.ru/zEI5

А результатами делитесь в комментариях.

#квиз

ESLint теперь официально поддерживает линтинг CSS

Об этом появилась информация в блоге команды. Для настройки необходимо установить плагин @eslint/css. Он обеспечивает синтаксический анализ с помощью CSSTree и правил CSS.

Чтобы использовать плагин, установите его с помощью npm:

npm install @eslint/css -D

Подробнее можно почитать в их блоге.

#новости #css #eslint

Функции в CSS? Серьёзно?

Да, серьезно. Пока это можно делать только в Chrome Canary с экспериментальным флагом, так что в реальных проектах в ближайшее время мы вряд ли это увидим.

Но вот пощупать функции в тестовой версии нам никто не запретит. Поэтому открываем статью и смотрим, как CSS превращается в язык, прости Господи, программирования.

Все подробности здесь: https://css-tricks.com/functions-in-css/

#css

Как конфигурировать Git

Новички часто сталкиваются со сложностями, когда дело доходит до конфигурации Git. Конечно, можно использовать и настройки по умолчанию, но если хотите настроить инструмент под себя, то стоит покопаться в конфигах.

О том, как это сделать правильно, узнаете в статье: https://habr.com/ru/articles/886538/

#git

Меняем JS-библиотеку анимации на View Transitions

Теперь не нужно подтягивать тяжелые JavaScript библиотеки для анимаций в ваш проект. В Chrome и Safari появилась поддержка View Transitions API. Эта апишка дает нам механизм для простого создания анимированных переходов между различными состояниями веб-сайта без необходимости расписывать сложную логику с помощью JS.

Как это работает вы можете увидеть здесь.

#фронтенд #css #javascript

Что такое рекурсия и как с ней работать

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

В статье рассмотрим базовые понятия рекурсии, её принципы, примеры использования, а также типичные проблемы, с которыми можно столкнуться при написании кода.

А вы используете рекурсию в своих проектах?

Используем tan(atan2()) для работы с вьюпортами в CSS

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

Как это работает и где можно использовать, подробно рассказано здесь.

#css #фронтенд #лайфхак

Как устроен Node.js изнутри

Node.js — интересный инструмент для веб-разработчиков. В этой статье мы узнаем, из чего состоит Node.js, разберёмся, как внутренние компоненты Node.js взаимодействуют друг с другом, и изучим репозиторий проекта Node.js на GitHub.

https://www.smashingmagazine.com/2020/04/nodejs-internals/

#бэкенд #nodejs

Если это не логично, то нужно добавить ещё один =. Логично?

tabs-broadcast — библиотека для синхронизации вкладок

tabs-broadcast — это открытая библиотека JavaScript для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей.

Как она работает, читайте в статье: https://habr.com/ru/articles/887448/

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

Что такое Island Architecture

Island Architecture (или «архитектура островов») — это современный подход к созданию веб-страниц, который сочетает преимущества статического контента и интерактивных элементов. Основная идея заключается в том, чтобы разделить страницу на статическую часть и изолированные «острова» — компоненты, которые могут быть динамическими и интерактивными. Это позволяет улучшить производительность, упростить разработку и сделать сайт более удобным для SEO.

Как это работает?

Представьте веб-страницу как карту, где большая часть территории — это статический контент, а отдельные «острова» — это интерактивные элементы. Например:

Статическая часть: текст статьи, изображения, заголовки — всё то, что загружается быстро и не требует JavaScript для отображения.

Острова: изолированные интерактивные компоненты, такие как форма комментариев, карусель изображений или кнопки социальных сетей. Эти элементы загружаются асинхронно (по мере необходимости) и активируются независимо от остальной страницы.

Такой подход позволяет пользователю сразу видеть основное содержание, пока интерактивные элементы подгружаются в фоновом режиме.

Преимущества Island Architecture

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

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

— Удобство разработки. Каждый «остров» можно разрабатывать и тестировать отдельно, используя разные технологии для разных островов, если это требуется.

Недостатки и ограничения

— Если страница содержит много интерактивных элементов (например, социальные сети или сложные приложения), загрузка множества островов может снизить производительность.

— Так как концепция относительно новая, для её реализации часто нужны специфические фреймворки, такие как Astro или Marko, либо собственные решения.

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

Island Architecture идеально подходит для сайтов, где преобладает статический контент, но требуется несколько интерактивных элементов. Например, блоги, простые интернет-магазины или новостные сайты.

Хотели бы попробовать такой подход или, возможно, уже пробовали? Поделитесь в комментариях, что вы думаете об этом.

#простымисловами

Что такое анимация во фронтенд разработке и как ее использовать? Разбираем движение света от фонаря

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

И первая часть про движение света от фонаря.

#фронтенд

Doom запустили на типах TypeScript

Энтузиасты взяли и запилили полноценный рантайм для WebAssembly, но вся магия — на типах TypeScript. И да, они запустили на этой штуке Doom. Как им это удалось, они рассказали в видео.

Кармак дуреет с этой прикормки!

#typescript #ненормальноепрограммирование

Как повысить вашу продуктивность с помощью кроссбраузерных функций DevTools

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

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

#советы