This media is not supported in your browser
VIEW IN TELEGRAM
Look At Pointer
Автор реализовал анимацию движения линий с отслеживанием положения курсора. В проекте используется CSS и JavaScript.
https://codepen.io/JuanFuentes/pen/bPGVZx
Автор реализовал анимацию движения линий с отслеживанием положения курсора. В проекте используется CSS и JavaScript.
https://codepen.io/JuanFuentes/pen/bPGVZx
👍4❤2
This media is not supported in your browser
VIEW IN TELEGRAM
video2ascii разбивает видео на сетку, затем усредняет пиксели в каждой ячейке, чтобы получить уровень яркости и цвет, а затем преобразует полученные данные в цвет и символы ASCII.
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍2
Игра «Охота на утку» на CSS
Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.
Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM
#codepen
Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.
Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM
#codepen
❤4👍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 #петпроект
👍3🔥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
❤4👍1
Заглядываем в консоль: пасхалки и приглашения на работу, которые вы могли пропустить
Разработчики часто прячут пасхалки в коде. Веб — не исключение. Это статья о поиске пасхалок в коде и о том, какие из них автору реально удалось найти: https://habr.com/ru/companies/timeweb/articles/781376/
#кек
Разработчики часто прячут пасхалки в коде. Веб — не исключение. Это статья о поиске пасхалок в коде и о том, какие из них автору реально удалось найти: https://habr.com/ru/companies/timeweb/articles/781376/
#кек
❤6
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.
🔥5👍1
Встречаем старый Новый год с зимним codepen-проектом
Автор создал инсталляцию с зимним пейзажем. У картинки есть параллакс-эффект, который работает по скроллу.
Посмотреть можно по ссылке:
https://codepen.io/ikrprojects/pen/vEGMzBp
#codepen
Автор создал инсталляцию с зимним пейзажем. У картинки есть параллакс-эффект, который работает по скроллу.
Посмотреть можно по ссылке:
https://codepen.io/ikrprojects/pen/vEGMzBp
#codepen
👍3❤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 #фронтенд
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
❤6🔥2