Веб-страница
24.1K subscribers
1.74K photos
530 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
Джун: «Эти книги подняли меня на новый уровень программирования!»

Новый уровень программирования:
😁28👎2🤣2
21 рекомендация по HTML

Нашёл материал для тех, кто решил погрузиться в мир фронтенд-разработки. Здесь собраны довольно базовые советы. Тем не менее, они будут крайне полезны тем, кто только начинает свой путь. Вы найдёте рекомендации по семантической вёрстке, правильному использованию базовых тегов и многому другому.

Подробнее в материале.

#html #веб
🔥9👍31
Как понять, ты Boy, Teen или Man в CSS на примере одного бургер-меню?

Попробуйте «тест Кнута для фронтенда» и узнайте, какой у вас уровень в CSS:

Boy: бургер как Unicode-символ — быстро, но без контроля пропорций и анимаций;
Teen: три div ‑а, flex‑контейнер и полный контроль над геометрией и анимацией;
Man: один псевдоэлемент ::after + box-shadow для трёх полосок, плюс скрытая подпись ради доступности.

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

#css #фронтенд
9👍3🤯1
Forwarded from Zen of Python
pyreqwest — новый HTTP-клиент на Rust для Python. GIL-free, HTTP/2 из коробки, sync и async с одинаковым API. Автор — тот же разработчик, который открыл issue #3215 в httpx о 10x просадке производительности при конкурентных запросах.

Зачем переходить с httpx
httpx/httpcore имеют давние проблемы с connection pooling — при 20 конкурентных запросах httpx в 10+ раз медленнее aiohttp. Эти баги висят годами. pyreqwest решает их на уровне архитектуры, потому что connection pool реализован на Rust.

➡️ Если httpx работает — можно не трогать. Но в высоконагруженных системах он станет бутылочным горлышком.

Фичи
🔘HTTP/1.1 и HTTP/2 (у aiohttp нет HTTP/2)
🔘Автодекомпрессия: zstd, gzip, brotli, deflate
🔘TLS через rustls
🔘Connection pooling, стриминг, multipart
🔘Куки, прокси, редиректы, таймауты
🔘Полные type hints, zero Python-зависимостей
🔘Встроенный мок для тестов + подключение к ASGI напрямую

Быстрый старт:
# uv add pyreqwest

from pyreqwest.client import ClientBuilder, SyncClientBuilder

async def example_async():
async with ClientBuilder().error_for_status(True).build() as client:
response = await client.get("https://httpbun.com/get").query({"q": "val"}).build().send()
print(await response.json())

def example_sync():
with SyncClientBuilder().error_for_status(True).build() as client:
print(client.get("https://httpbun.com/get").query({"q": "val"}).build().send().json())


📎 Код на GitHub

@zen_of_python
Please open Telegram to view this post
VIEW IN TELEGRAM
🤩3👎2
Можете не открывать вишлист программиста — мы уже знаем, что там

Cобрали большую и удобную подборку из 65 новогодних подарков для айтишников, разбитую по категориям и бюджету.

Внутри есть идеи для всех: джунов, мидлов, сеньоров и даже тимлидов.

От подставок, мышей и ламп до дронов, консолей, трекеров сна и умного дома.

А ещё — отдельный бонус-раздел с неудачными подарками, чтобы точно не промахнуться и не прослыть тем самым человеком из офиса.
5👍3
Снимайте треники — Новый год вы отмечаете в ОТПадном луке! 

OTP Tech принес вам timeless образ того самого квотербека, который скоро станет королем школы. 

+2026 очков к удаче в грядущем году, если отправите этот скин трём друзьям и с первого раза поймаете его в нашей виртуальной примерочной!

Реклама
3👍1🤩1
Что такое WebRTC — как работает, преимущества и примеры использования

Web Real-Time Communications — относительно новая технология, которая вывела онлайн-коммуникации на принципиально новый уровень. Она имеет открытый исходный код и отвечает за потоковую передачу данных с использованием API JavaScript для связи между браузерами и приложениями в формате peers-to-peers (точка-точка).

WebRTC применяется в таких секторах как образование, управление персоналом и HR, банкинг, страхование, здравоохранение и многих других.

Подробнее о технологии и её особенностях, рассказали в статье.

#webrtc #веб
👍63
Поддерживаю 😏

#кек
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🤣24😁5👍21
В CSS появилась функция if() — наконец-то условная логика прямо в значениях свойств

До этого приходилось использовать Sass, @media, @supports или раскидывать стили по разным селекторам. Теперь можно писать инлайн:

color: if(style(--theme: dark): white; else: black);


Как это работает, где поддерживается и когда использовать — в статье.

#css #фронтенд
🔥19💩6🤔2👍1🤯1
Let's Encrypt теперь выдаёт SSL-сертификаты на голые IP-адреса — домен не нужен

Фича официально запущена и открыта для всех. Раньше для HTTPS на IP приходилось либо платить (от $40/год), либо мириться с self-signed и предупреждениями браузера.​

Нюансы и ограничения
🔘Сертификат живёт только ~6 дней — политика безопасности, IP могут менять владельцев​
🔘Нужен ACME-клиент с поддержкой shortlived profile (Certbot, acme.sh, Caddy — уже умеют)​
🔘DNS-challenge не работает — только HTTP-01 или TLS-ALPN-01​
🔘Автопродление обязательно — иначе протухнет за неделю

Кому пригодится
Хоумлабы, NAS, IoT-девайсы, камеры — всё, что торчит наружу по IP без домена. Тестовые и staging-окружения, эфемерные облачные сервисы. Для продакшена с нормальным доменом смысла мало — 90-дневные сертификаты удобнее.​

➡️ Также важно, что Let's Encrypt переходит на новую иерархию корневых сертификатов «Generation Y» и начнёт сокращать срок действия всех сертификатов: 64 дня в 2027-м, 45 дней в 2028-м.​

@prog_tools
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥7
Самые просматриваемые доклады по React, Next.js, Vue, Nuxt и Vite в 2025 году

Когда вы пересмотрите все новогодние фильмы, советуем обратить внимание на доклады по фронтенду и фулстеку, которые стали самыми просматриваемыми в 2025 году. Вы найдёте их по ссылке.

Версия короткого must-watch списка для ленивых:

🔘 Modern React Patterns: Concurrent Rendering, Actions & What’s Next
🔘React Query Exposed by Its Maintainer
🔘TanStack is Your New Favorite Framework
🔘 Hands On: How To Migrate To Next.js 16 and “Use Cache”
🔘 Vite Beyond a Build Tool
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Полезная библиотека для понимания работы JS

js2flowchart — библиотека визуализации для преобразования любого кода JavaScript в красивую блок-схему SVG. Вы можете изучать чужой код, делать рефакторинг или писать документацию, не путаясь в функциональности. А начинающим — неплохая шпаргалка по foo, while, if:

https://github.com/Bogdan-Lyashenko/js-code-to-svg-flowchart

@tproger_web #javascript #инструменты
🤔5👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Новогодний генератор снежинок на JS

Ключевой его особенностью является то, что все снежинки генерируются рандомно благодаря особому алгоритму. Это может оказаться удобно, если вам нужно добавить на сайт, например, эффект падающих снежинок.

Посмотреть принцип работы кода можно на странице проекта.

#codepen #javascript
👍5🔥2
Ваша MIDI-клавиатура и вибромоторчик телефона уже могут управлять веб-сайтом. Вы знали?

LogRocket сделали шпаргалку про 5 API браузера, которые, возможно, вам никогда не пригодятся, но они существуют:

🔘 Vibration API;
🔘 WebHID;
🔘 WebMIDI;
🔘 Web Speech;
🔘 Battery Status.

Подробнее: https://blog.logrocket.com/5-weird-web-apis/

#api
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1
Эти ребята над дизайном не шибко думают 😄

#кек
😁35🔥62
The-One-File — сетевые диаграммы в одном HTML-файле. Открывается в любом браузере, работает полностью офлайн. Подходит для air-gapped окружений, документации, мониторинга статуса — от корпоративных сетей до домашних лабов.

Фичи
🔘Ортогональная маршрутизация линий
🔘Анимация потоков данных
🔘Камерные конусы (для визуализации видеонаблюдения)
🔘Кастомные иконки
🔘Live status monitoring
🔘Стены, темы, настройки отображения
🔘Экспорт диаграммы — сохраняется прямо в тот же HTML

Зачем
Для документации сетей, которую можно открыть где угодно без интернета и зависимостей. Один файл — вся диаграмма внутри. Удобно для передачи коллегам, хранения в git, работы в изолированных средах.

📎 Проект на GitHub, 33 релиза, последний буквально на днях, так что проект живой. На видео демо

@prog_tools
This media is not supported in your browser
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥2
Создаем React с нуля

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

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

#react #туториал
🔥4😁2
Всем общий сбор!

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

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

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

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

#codepen #gamedev
🔥41