Создаем React с нуля

В этом гайде содержится инструкция по созданию аналога React с нуля. Вряд ли вы станете использовать его в реальных проектах, но зато узнаете, как устроены основные функции и возможности библиотеки. Помимо гайда внутри вы найдёте ссылку на GitHub с готовым кодом.

Подробности: https://www.rob.directory/blog/react-from-scratch

#react #туториал

Всем общий сбор!

Программисты из Tproger подготовили для вас (и нас) сюрприз. Это новогоднее бинго в стиле сайтов нулевых. Заканчивайте работу, пора позалипать на этот шедевр и найти все пасхалки.

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

​Новогодняя игра «Помощник Санты»

Игра — лучший способ потренировать HTML, CSS и JavaScript. Тем более, игра новогодняя, а у проекта полностью открытые исходники.

Сохраните, чтобы не потерять. Будет чем заняться на праздниках: https://codepen.io/housamz/pen/KKgmMLm

#codepen #gamedev

Всего несколько часов до Нового года!

Надеемся, что вы смогли закончить все задачи и теперь отдыхаете, предвкушая заслуженные выходные. А чтобы скоротать ожидание, предлагаем небольшую игру: с помощью Т9 в телефоне продолжите фразу «В следующем году я обязательно...» и делитесь результатом в комментариях.

Друзья, поздравляем вас с Новым годом!

Желаем в 2026-м всё-таки доосвоить все оставшиеся фронтенд-фреймворки научиться программировать на CSS и HTML и верстать красивые сайты на Node.js.

Верим, что всё у вас получится. Спасибо, что вы с нами.

Как устроен рендеринг в браузере

Что происходит между вводом URL-адреса в браузере и моментом отображения веб-страницы? Такой вопрос могут задать на собеседовании, да и просто это полезно знать.

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

Генератор праздничного текста крестиком

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

Попробуйте сами и посмотрите код.

#codepen

Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator

Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.

Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/

#инструменты #css

Заказчик: Нужно на нашем сайте сделать кнопки зеркальными, чтобы пользователь заходил и видел своё отражение.

Я: Подержите моё пиво.

CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow

#codepen

Perspective Loader на чистом CSS

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

Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.

Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy

#codepen #css

Как сделать условный border-radius в CSS

Хотите узнать технику, которая позволяет автоматически настраивать border-radius для карточного компонента в зависимости от размеров экрана?

Вам потребуется прописать одну хитрую формулу. О ней, а также способе её применения рассказали в этой статье.

#фронтенд #css

Look At Pointer

Автор реализовал анимацию движения линий с отслеживанием положения курсора. В проекте используется CSS и JavaScript.

https://codepen.io/JuanFuentes/pen/bPGVZx

Игра «Охота на утку» на CSS

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

Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM

#codepen

Пишем игру на JS/TS и развиваем навык работы с кодом

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

Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/

#typescript #javascript #петпроект

Интересный codepen-проект: Balloon Bears

Это небольшая игра, написанная на React с использованием gsap.

Исходники: https://codepen.io/jh3y/pen/NWOLyGd

#codepen

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

Разработчики часто прячут пасхалки в коде. Веб — не исключение. Это статья о поиске пасхалок в коде и о том, какие из них автору реально удалось найти: https://habr.com/ru/companies/timeweb/articles/781376/

#кек

Chrome DevTools 144: что нового

Сервер DevTools MCP (v0.12.1)

Добавили автоподключение: можно начать отладку вручную, а потом подключить к той же сессии ИИ-агента, и он продолжит с того места, где вы остановились.

Троттлинг запросов

Теперь можно не только блокировать, но и троттлить отдельные запросы на вкладке Network. То есть не просто «протестировать медленный интернет у юзера», а симулировать медленную загрузку отдельных запросов.

Отладка шрифтов и стилей

Правила @font-face и @font-feature-values теперь редактируются в панели Styles. Вычисленные стили можно смотреть прямо на вкладке Elements: проще находить, что именно повлияло на стиль элемента.

@tproger_web

Встречаем старый Новый год с зимним codepen-проектом

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

Посмотреть можно по ссылке:

https://codepen.io/ikrprojects/pen/vEGMzBp

#codepen