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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Очередное напоминание, что наркотики — зло! Занимайтесь айтишкой
😁42🗿41👍1👎1
Представьте, что вам выпала возможность передать себе из прошлого совет

Какой бы один самый главный совет в начале карьеры смог бы изменить вашу жизнь? Что бы вы посоветовали себе сейчас, зная, как все может сложиться? Побольше читать, изучить какой-то фреймворк, не верить в скорую смерть PHP или освоить Python вместо JavaScript? А может, вообще уйти в сварщики и не тратить жизнь на это IT.

Расскажите. Вдруг, кто-то прямо сейчас сделает правильные выводы и возьмет ваш совет на заметку.

#обсуждение
😁2
Лучшие практики для ускорения фронтенда: чек-лист 2025 года

Скорость сайта — ключ к удержанию пользователей и росту конверсии. Этот чек-лист объединяет лучшие практики оптимизации фронтенда, которые помогут сделать ваш веб-проект быстрее и эффективнее. Узнайте, как сократить время загрузки и улучшить пользовательский опыт, независимо от платформы.

#фронтенд
🔥52👍2
Forwarded from Типичный программист
This media is not supported in your browser
VIEW IN TELEGRAM
Почему гиперссылки синие? Всё просто — этот цвет нравился их создателю

Оказывается, ссылки в браузерах выделяются синим просто потому, что этот цвет нравился Марку Андриссену — одному из создателей NCSA Mosaic, первого массового веб-браузера.

В эпоху 256-цветных мониторов он просто выбрал синий из палитры, потому что остальные не понравились. Никаких тестов, аналитики и UX — чисто вкусовщина.

Уровень уверенности 💪
Please open Telegram to view this post
VIEW IN TELEGRAM
👍447
Типичные ошибки новичков в React JS: useState, useEffect, props drilling и useContext

Даже если вы уже какое-то время работаете с React, вы не застрахованы от ошибок и неправильных практик. В этом видео вы разберёте типичные ошибки, которые встречаются в проектах у начинающих React-разработчиков и узнаете:

🔘 как правильно изменять состояние в компоненте используя useState;
🔘 почему стоит быть аккуратным с вызовом useEffect и изменением состояния компонента внутри него;
🔘 что такое props drilling и как от него избавиться с помощью использования createContext и useContext.

#видео #react
Please open Telegram to view this post
VIEW IN TELEGRAM
👍3🔥1
Трюк с радиокнопкой в корзине товаров

Отличный способ реализовать интерактивный и понятный UI, не перегружая страницу лишних JS-кодом, предложила автор этой статьи. Для этого она задействовали радиокнопку и немного CSS-кода.

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

#фронтенд #css
4🔥3👍1
6 архитектурных паттернов 2025 года, которые реально работают

При создании любого мало-мальски серьёзного проекта важно продумать архитектуру, чтобы его можно было удобно развивать и масштабировать. Вариантов архитектур огромное множество.

В статье мы с вами разберём шесть архитектурных паттернов, которые реально работают и помогут вам построить отказоустойчивый проект.

#паттерны
😁85👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Говорят, ЛикПуСси влияет на квартальную премию.
У кого в команде также?
🤣493🫡2
Пробуем использовать cross-fade() в CSS

Функция CSS cross-fade() смешивает фоновое изображение и маску с заданным значением прозрачности. То есть вы можете сделать плавный переход между слоями изображений, расположенных друг над другом. Для каждого слоя можно использовать свой уровень прозрачности и это даёт возможность создавать сложные переходы и даже анимации.

Как этим пользоваться рассказали в статье.

#css #фронтенд
5👍1
This media is not supported in your browser
VIEW IN TELEGRAM
Google представил CodeMender — ИИ, который самостоятельно исправляет уязвимости в коде

Техногигант представил инструмент, способный автоматически обнаруживать и исправлять дефекты безопасности в коде. Под капотом — BigSleep (генерация изображений) и OSS-Fuzz (инструмент для fuzz-тестирования — скармливания большого количества неупорядоченных данных). Ключевой компонент системы — Gemini, применяемая для корневого анализа причин ошибок.

Процесс устроен так: ИИ генерирует патчи, затем они проходят проверку другими ИИ — агентами-критиками, которые оценивают безопасность и качество исправлений. Только после этого результат отправляется на утверждение человеку.

Платформа предлагает также новую программу вознаграждений за найденные баги (до $20 000).

@prog_tools
🔥5
Что такое миксины?

Миксины — это способ повторно использовать общий функционал в разных частях приложения без наследования.

Если объяснять простыми словами, это как «набор инструментов», который можно «примешать» к разным компонентам или классам.

В контексте веб-разработки термин чаще всего встречается в двух случаях:

1️⃣ CSS / препроцессоры (Sass, Less):

🔘 Миксин — это блок стилей, который можно вызывать повторно в разных селекторах.
🔘 Он позволяет не дублировать одинаковый CSS.
🔘 В отличие от обычного класса, миксин не привязан к конкретному селектору — он просто вставляет набор правил туда, где его вызвали.

2️⃣ JavaScript (особенно до появления современных паттернов)

🔘 Миксин — объект или функция с методами, которые можно добавить к другим классам или объектам, не меняя их иерархию.
🔘 Это альтернатива множественному наследованию, которого в JS нет.

Пример: если разным компонентам нужна одинаковая логика — например, логирование или валидация — её можно вынести в миксин и «примешать» туда, где нужно.

В современных фреймворках миксины часто заменяют другими подходами — например, хуками в React или композицией во Vue 3. Но идея остаётся та же — разделение общей логики и повторное использование.


#вопросответ
Please open Telegram to view this post
VIEW IN TELEGRAM
🔥10👍51
Media is too big
VIEW IN TELEGRAM
Полезная краткая лекция о прохождении IP-пакетов между сетями

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

Идеально подойдёт сетевым инженерам, системным администраторам и разработчикам, работающим с сетями.

#general #hardware #ru
👍15🔥31
5 шагов для защиты бэкенда: чек-лист от уязвимостей

В мире, где киберугрозы становятся всё более изощрёнными, защита бэкенда от уязвимостей становится ключевым элементом безопасности. Здесь мы вместе с Семёнов Шаплыгиным, Senior Software Developer в Yandex и экспертом Эйч, рассказали пять основных шагов, которые помогут вам минимизировать риски и сделать серверную часть более защищённой.

#бэкенд #безопасность
🔥4
Кажется, ошибка сидит по другую сторону монитора
😁41👍3
Упаковка проекта с большой анимацией в один HTML файл или как кодировка Windows-1251 избавила от лишних 52МБ

Необычный опыт разработки упаковщика проекта с большой анимационной сценой в один независимый HTML-файл, который может воспроизводиться в любом браузере без интернета и веб-сервера.

Смогли бы повторить?

#html
🔥10
Bun 1.3 заказывали? Мы тут вам не фуллстек шутки шутим

Команда Oven выпустила крупнейшее обновление Bun в истории. Теперь это не просто быстрый рантайм, а полноценная платформа для фронтенда и бэкенда — с роутингом, cookies, WebSocket-ами и сборкой в один исполняемый файл.

Bun 1.3 добавил встроенные клиенты для Redis и популярных СУБД, переработал тест-раннер и ускорил криптографию до 400х. SQL API теперь работает единообразно с MySQL, PostgreSQL, SQLite и MariaDB.

По сути, Bun становится заменой сразу для Node.js, Vite и Redis-CLI — и делает это с прицелом на продакшен. Разработчики называют релиз «началом новой эпохи».

Теперь булочка ещё вкуснее..

@your_tech
🔥142👍1
Как устроены массивы в PHP и как код влияет на скорость работы с ними

Массив — один из самых часто используемых типов в PHP. Понимание его внутренностей помогает:

🔘избегать лишних аллокаций и пересчетов хэшей;
🔘проектировать структуры данных;
🔘прогнозировать пиковое потребление памяти;
🔘не наступать на «микро‑грабли» производительности.

В PHP есть ряд важных особенностей, которые отличают массивы в нём от их собратьев в других языках. Подробнее обо всех особенностях можно узнать в материале.

#php
Please open Telegram to view this post
VIEW IN TELEGRAM
5🤔4🫡2👍1
Если быстро вслух перечислять количество DIVов на картинке, то как будто из лазерного оружия стреляешь. div-div-div... Попробуйте
😁22
Кто есть кто: Обратные вызовы, промисы и асинхронные функции

В JavaScript есть темы, которые могут сложно поддаваться пониманию. В этой статье речь как раз пойдёт о таких.

Что это вообще такое? В каких случаях используются? Как работают? Каков их внутренний механизм? В этой статье вы раз и навсегда разберёте суть этих процессов.

#javascript
🔥63