Игра «Охота на утку» на CSS
Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.
Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM
#codepen
Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.
Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM
#codepen
❤7👍4👎1
Пишем игру на JS/TS и развиваем навык работы с кодом
В статье автор рассказывает, как создать игру, которая будет предлагать вам рандомный текст и засекать за сколько по времени вы сможете его напечатать.
Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/
#typescript #javascript #петпроект
В статье автор рассказывает, как создать игру, которая будет предлагать вам рандомный текст и засекать за сколько по времени вы сможете его напечатать.
Сохраните, чтобы не потерять: https://tproger.ru/articles/pet-proekt-pishem-igru-na-js-ts-i-razvivaem-navyk-raboty-s-kodom/
#typescript #javascript #петпроект
👍4🔥1
This media is not supported in your browser
VIEW IN TELEGRAM
Интересный codepen-проект: Balloon Bears
Это небольшая игра, написанная на React с использованием gsap.
Исходники: https://codepen.io/jh3y/pen/NWOLyGd
#codepen
Это небольшая игра, написанная на React с использованием gsap.
Исходники: https://codepen.io/jh3y/pen/NWOLyGd
#codepen
😁2
This media is not supported in your browser
VIEW IN TELEGRAM
Основные фишки cssreference.io:
Please open Telegram to view this post
VIEW IN TELEGRAM
❤6👍1
Заглядываем в консоль: пасхалки и приглашения на работу, которые вы могли пропустить
Разработчики часто прячут пасхалки в коде. Веб — не исключение. Это статья о поиске пасхалок в коде и о том, какие из них автору реально удалось найти: https://habr.com/ru/companies/timeweb/articles/781376/
#кек
Разработчики часто прячут пасхалки в коде. Веб — не исключение. Это статья о поиске пасхалок в коде и о том, какие из них автору реально удалось найти: https://habr.com/ru/companies/timeweb/articles/781376/
#кек
❤8
Chrome DevTools 144: что нового
Сервер DevTools MCP (v0.12.1)
Добавили автоподключение: можно начать отладку вручную, а потом подключить к той же сессии ИИ-агента, и он продолжит с того места, где вы остановились.
Троттлинг запросов
Теперь можно не только блокировать, но и троттлить отдельные запросы на вкладке Network. То есть не просто «протестировать медленный интернет у юзера», а симулировать медленную загрузку отдельных запросов.
Отладка шрифтов и стилей
Правила
@tproger_web
Сервер DevTools MCP (v0.12.1)
Добавили автоподключение: можно начать отладку вручную, а потом подключить к той же сессии ИИ-агента, и он продолжит с того места, где вы остановились.
Троттлинг запросов
Теперь можно не только блокировать, но и троттлить отдельные запросы на вкладке Network. То есть не просто «протестировать медленный интернет у юзера», а симулировать медленную загрузку отдельных запросов.
Отладка шрифтов и стилей
Правила
@font-face и @font-feature-values теперь редактируются в панели Styles. Вычисленные стили можно смотреть прямо на вкладке Elements: проще находить, что именно повлияло на стиль элемента.@tproger_web
Chrome for Developers
What's new in DevTools, Chrome 144 | Blog | Chrome for Developers
Chrome DevTools MCP server, individual request throttling, adopted stylesheets and 2025 highlights.
🔥7👍1
Встречаем старый Новый год с зимним codepen-проектом
Автор создал инсталляцию с зимним пейзажем. У картинки есть параллакс-эффект, который работает по скроллу.
Посмотреть можно по ссылке:
https://codepen.io/ikrprojects/pen/vEGMzBp
#codepen
Автор создал инсталляцию с зимним пейзажем. У картинки есть параллакс-эффект, который работает по скроллу.
Посмотреть можно по ссылке:
https://codepen.io/ikrprojects/pen/vEGMzBp
#codepen
👍4🔥2❤1
CSS counters в подходе Atomic CSS
CSS Counters — отличный инструмент для работы с кастомными счётчиками. Но применение его не ограничивается только рукописным CSS — его легко и эффективно можноиспользовать в рамках Atomic CSS подхода.
Давайте посмотрим, как это делается: https://tproger.ru/articles/css-counters-v-podhode-atomic-css---chast-1
#css #фронтенд
CSS Counters — отличный инструмент для работы с кастомными счётчиками. Но применение его не ограничивается только рукописным CSS — его легко и эффективно можноиспользовать в рамках Atomic CSS подхода.
Давайте посмотрим, как это делается: https://tproger.ru/articles/css-counters-v-podhode-atomic-css---chast-1
#css #фронтенд
🔥1
Forwarded from Нейроканал
Свёрточная нейросеть на чистом JavaScript с визуализацией — без TensorFlow, без библиотек, работает прямо в браузере.
Рисуешь цифру мышкой — сеть её распознаёт. Всё происходит локально в браузере, ничего никуда не отправляется. Автор говорит, что сейчас нигде не работает и написал это просто чтобы попрактиковаться.
Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.
📎 Код на GitHub, рабочая демка на сайте автора, на видео скринкаст для ленивых, чтобы не открывать сайт
@neuro_channel
Рисуешь цифру мышкой — сеть её распознаёт. Всё происходит локально в браузере, ничего никуда не отправляется. Автор говорит, что сейчас нигде не работает и написал это просто чтобы попрактиковаться.
Чтобы понять как CNN работает изнутри — отличная штука. Когда пишешь свёртки, пулинг и backprop руками — понимаешь что там происходит лучше, чем после десяти туториалов по PyTorch. Код в одном файле, можно читать последовательно.
@neuro_channel
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
❤10🔥3👍1
ScrapeGraphAI — умный веб-скраппер на основе ИИ
Это Python-библиотека для веб-скрапинга, которая использует LLM и логику direct graph для создания конвейеров скрапинга для веб-сайтов и локальных документов (XML, HTML, JSON, Markdown и т.д.).
Просто укажите, какую информацию вы хотите извлечь, и библиотека сделает это за вас!
Инструкция по использованию тут: https://github.com/ScrapeGraphAI/Scrapegraph-ai
#инструменты #python
Это Python-библиотека для веб-скрапинга, которая использует LLM и логику direct graph для создания конвейеров скрапинга для веб-сайтов и локальных документов (XML, HTML, JSON, Markdown и т.д.).
Просто укажите, какую информацию вы хотите извлечь, и библиотека сделает это за вас!
Инструкция по использованию тут: https://github.com/ScrapeGraphAI/Scrapegraph-ai
#инструменты #python
❤4😁4
CBLT — безопасный, быстрый и минималистичный веб-сервер на языке программирования Rust
Rust не имеет аналогов Nginx, Lighttpd, Caddy, HAProxy, Apache, Tomcat, Jetty и т.д. Все эти веб-сервера написаны на C, Go, Java и других языках. Как тогда написать свой веб-сервер на Rust без всех этих технологий?
Автор решил сделать свой сервер с нуля, написав свои решения вместо этих инструментов. Что из этого вышло, рассказал в статье.
#rust #бэкенд
Rust не имеет аналогов Nginx, Lighttpd, Caddy, HAProxy, Apache, Tomcat, Jetty и т.д. Все эти веб-сервера написаны на C, Go, Java и других языках. Как тогда написать свой веб-сервер на Rust без всех этих технологий?
Автор решил сделать свой сервер с нуля, написав свои решения вместо этих инструментов. Что из этого вышло, рассказал в статье.
#rust #бэкенд
👍3❤2
This media is not supported in your browser
VIEW IN TELEGRAM
Учим React через интерактивные визуализации
Если вдруг вы столкнулись с трудностями при изучении React, то этот сайт вам сильно упростит жизнь и наглядно покажет, как и что работает.
Заходите и изучайте: https://react.gg/visualized
#react
Если вдруг вы столкнулись с трудностями при изучении React, то этот сайт вам сильно упростит жизнь и наглядно покажет, как и что работает.
Заходите и изучайте: https://react.gg/visualized
#react
👍10❤6
Forwarded from Типичный программист
Понимание аутентификации JWT: подробное руководство с примерами
В мире веб-разработки безопасность имеет первостепенное значение. Одним из наиболее популярных методов защиты веб-приложений является аутентификация с помощью JSON Web Token (JWT).
В этом руководстве рассматривается, что такое аутентификация JWT, как она работает и как вы можете реализовать ее в своих веб-приложениях, с практическими примерами.
#jwt
В мире веб-разработки безопасность имеет первостепенное значение. Одним из наиболее популярных методов защиты веб-приложений является аутентификация с помощью JSON Web Token (JWT).
В этом руководстве рассматривается, что такое аутентификация JWT, как она работает и как вы можете реализовать ее в своих веб-приложениях, с практическими примерами.
#jwt
❤4
Серверные компоненты против островной архитектуры: битва за производительность
Детальное сравнение двух популярных решений, нацеленных на снижение объёма передаваемого JavaScript и повышение производительности интерфейсов. Автор разбирает ключевые различия в принципах работы, оценивает важные метрики, а также даёт чёткие рекомендации.
Подробности:
https://blog.logrocket.com/server-components-vs-islands-architecture/
Детальное сравнение двух популярных решений, нацеленных на снижение объёма передаваемого JavaScript и повышение производительности интерфейсов. Автор разбирает ключевые различия в принципах работы, оценивает важные метрики, а также даёт чёткие рекомендации.
Подробности:
https://blog.logrocket.com/server-components-vs-islands-architecture/
❤2
Google Chrome теперь поддерживает HTML-элемент
Начиная с Chrome 144, вы можете использовать новый HTML-элемент
Подробнее об обновлении в блоге Chrome.
<geolocation>Начиная с Chrome 144, вы можете использовать новый HTML-элемент
<geolocation>. Он представляет собой существенное изменение в том, как сайты запрашивают данные о местоположении пользователя — от запросов на разрешение, запускаемых скриптами, к декларативному, ориентированному на действия пользователя интерфейсу. Это позволяет уменьшить количество шаблонного кода, необходимого для обработки состояний разрешений и ошибок, и обеспечивает более сильный сигнал о намерениях пользователя, что помогает избежать вмешательств браузера (например, блокировок).Подробнее об обновлении в блоге Chrome.
❤10👍3
React наконец-то решил свою самую большую проблему
Помните недавний сбой у CloudFlare? Небольшая ошибка положила пол интернета. А дело было реактовском
Подробнее о нём в статье.
#react
Помните недавний сбой у CloudFlare? Небольшая ошибка положила пол интернета. А дело было реактовском
useEffect. Да, даже опытные разработчики и крупные компании могут облажаться при использовании этого хука. В команде React сделали выводы и добавили новый хук useEffectEvent, который позволяет избежать неправильной работы системы.Подробнее о нём в статье.
#react
🗿18👍5😁3❤1
Скрытые функции Google Chrome для разработчика
Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает.
В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:
https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/
#devtools #инструменты
Chrome Dev Tools — один из самых популярных инструментов среди веб-разработчиков. Однако в неём есть некоторые полезные функции, о которых большинство разработчиков не знает.
В этой статье вы сможете узнать о пяти основных функциях Chrome DevTools, которые могут вам пригодиться:
https://webformyself.com/skrytye-funkcii-google-chrome-dlya-razrabotchika/
#devtools #инструменты
🔥4❤1
Сложный круговой прогрессбар — простая реализация
Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном
В этом видео вы сможете шаг за шагом собрать круговой индикатор прогресса на чистом CSS: с анимацией, реактивной логикой и динамической сменой цветов — без JavaScript и без SVG.
Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном
background-image — если знать, как работают градиенты и современные возможности CSS. В этом видео вы сможете шаг за шагом собрать круговой индикатор прогресса на чистом CSS: с анимацией, реактивной логикой и динамической сменой цветов — без JavaScript и без SVG.
YouTube
Сложный круговой прогрессбар — простая реализация | CSS Боль
Круговые прогрессбары обычно делают на SVG или Canvas. Но оказывается, всё это можно собрать на одном div и одном background-image — если знать, как работают градиенты и современные возможности CSS.
В этом выпуске шаг за шагом собираем круговой индикатор…
В этом выпуске шаг за шагом собираем круговой индикатор…
👍3❤1