This media is not supported in your browser
VIEW IN TELEGRAM
Упрощаем себе создание grid-вёрстки на сайте с помощью CSS Grid Generator
Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.
Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/
#инструменты #css
Как видно на видео, он помогает посмотреть, как будет выглядеть итоговая сетка и после этого получить готовый CSS-код. Всё, что вам нужно: задать количество строк, колонок и расстояния между ними, а потом нарисовать расположение div-блоков.
Инструмент бесплатный, доступен по ссылке: https://cssgrid-generator.netlify.app/
#инструменты #css
🔥10👍7❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Заказчик: Нужно на нашем сайте сделать кнопки зеркальными, чтобы пользователь заходил и видел своё отражение.
Я: Подержите моё пиво.
CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow
#codepen
Я: Подержите моё пиво.
CodePen-проект: https://codepen.io/tyeb_11/pen/dygoJow
#codepen
🤣44🫡6❤4
This media is not supported in your browser
VIEW IN TELEGRAM
Perspective Loader на чистом CSS
Вы, скорее всего, видели этот шуточный ролик, где показывается почему на самом деле лоадер прерывается во время загрузки или установки.
Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.
Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy
#codepen #css
Вы, скорее всего, видели этот шуточный ролик, где показывается почему на самом деле лоадер прерывается во время загрузки или установки.
Пользователь CodePen решил повторить его во фронтенде и сделал анимацию, которая работает исключительно на HTML и CSS.
Посмотреть код можно здесь:
https://codepen.io/jh3y/pen/xxWdOQy
#codepen #css
🔥18👍9❤1
Как сделать условный border-radius в CSS
Хотите узнать технику, которая позволяет автоматически настраивать
Вам потребуется прописать одну хитрую формулу. О ней, а также способе её применения рассказали в этой статье.
#фронтенд #css
Хотите узнать технику, которая позволяет автоматически настраивать
border-radius для карточного компонента в зависимости от размеров экрана?Вам потребуется прописать одну хитрую формулу. О ней, а также способе её применения рассказали в этой статье.
#фронтенд #css
👍3❤2🤣2
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
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🔥1