Веб-страница
24.1K subscribers
1.74K photos
533 videos
1 file
3.94K links
Всё по фронтенду, бэкенду и девопсу в одном месте

Разместить рекламу: @tproger_sales_bot

Правила общения: https://tprg.ru/rules

Другие каналы: @tproger_channels

Сайт: https://tprg.ru/site

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Look At Pointer

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

https://codepen.io/JuanFuentes/pen/bPGVZx
👍42
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Держите красивое: React-компонент для преобразования видео в ASCII-графику

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

➡️ В настоящее время компонент поддерживает только устройства с WebGL 2.0

📎 GitHub: github.com/elijah0528/video2ascii
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥9👍2
Игра «Охота на утку» на CSS

Помните эту легендарную игру на 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 #петпроект
👍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
😁2
This media is not supported in your browser
VIEW IN TELEGRAM
🤨 Восстанавливаем память после январских: визуальная шпаргалка по CSS

Основные фишки cssreference.io:

➡️ Удобная навигация по коллекциям: Flexbox, Grid, Animations, Typography;
➡️ Иллюстрации для каждого свойства;
➡️ Быстрый поиск по свойствам.

📎 Такое можно добавить в закладки
Please open Telegram to view this post
VIEW IN TELEGRAM
4👍1
Заглядываем в консоль: пасхалки и приглашения на работу, которые вы могли пропустить

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

#кек
6
Chrome DevTools 144: что нового

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

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

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

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

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

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

@tproger_web
🔥5👍1
Встречаем старый Новый год с зимним codepen-проектом

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

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

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

#codepen
👍32🔥1
CSS counters в подходе Atomic 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
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
6🔥2