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

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Forwarded from Типичный программист
Фронтендеры, несу для вас золото проверенное временем

Этот репо под завязку набит тщательно подобранными ресурсами по дизайну и пользовательскому интерфейсу: стоковые фотографии, веб-шаблоны, CSS-фреймворки, библиотеки пользовательского интерфейса, инструменты и многое другое. Всё аккуратно собрано в одном месте и разбито по категориям.

Зибирайте 🤌
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
14🔥2
Российские Cloudflare: что выбрать для ускорения и защиты сайтов?

После ухода иностранных облачных провайдеров защита и ускорение веб-ресурсов стали насущным вопросом для e-commerce, SaaS-сервисов, госорганизаций и финтеха. Мы собрали три ключевых российских аналога Cloudflare — NGENIX, DDoS-Guard и StormWall — и сравнили их по возможностям, тарифам, особенностям и реальным кейсам.

Подробности здесь.

#безопасность
👎16👍4😁4💩3🤣1
Подборка бесплатных библиотек иконок для ваших проектов

Если вы ищете качественные и удобные библиотеки иконок, эти инструменты помогут создать стильный и функциональный дизайн:

Iconoir — коллекция из более чем 1500 иконок, поддерживающая работу с React, Vue и Flutter. Благодаря SVG и JSX легко адаптируется для разных платформ.

Phosphor Icons — библиотека с более чем 9000 иконок в разных стилях и весах. Pixel-perfect дизайн делает её подходящей для профессиональных решений.

Material Icons — классика Material Design с 2100+ иконками в разных форматах и стилях. Подходит для универсальных и лаконичных интерфейсов.

Bootstrap Icons — официальная библиотека Bootstrap с 2000+ иконками. Универсальный выбор благодаря поддержке SVG, PNG и других форматов.

Feather Icons — минималистичная коллекция из 280+ иконок, созданная для современных интерфейсов. Простота и элегантность — её главные черты.

Octicons — иконки от GitHub с простым дизайном, которые подходят для интерфейсов разработчиков. Отличный выбор для веб-платформ.

Heroicons — набор из 450+ иконок в двух стилях: контурном и с заливкой. Чистый и современный внешний вид гарантирует стильный дизайн.

Lineicons — современная библиотека с 500+ иконками в стиле линейного искусства. Простота интеграции и поддержка множества форматов делают её удобным выбором для веб-дизайна.


Какую ещё библиотеку нам стоило включить в подборку?

#иконки #инструменты
🔥8👍32
Фулл — это какой-то фреймворк от PornHub? Какие там подводные камни? А узкие места?

Поделитесь в комментариях
😁33🤔8🤯1
Зачем нужна эта библиотека Python в веб-разработке

Пройдите небольшое тестирование, чтобы узнать, насколько вы знакомы с Python-библиотеками и фреймворками, которые используют в веб-разработке.

Старт тут.

#квиз
🔥1
«Хватит писать try/catch вокруг fetch: история о том, как я устал ловить ошибки»

Этот мем смешной, пока не осознаешь, что в реальных проектах мы именно так и поступаем. Только заворачиваем не весь код сразу, а каждый HTTP-запрос по отдельности.

Пишешь fetch и рефлекторно добавляешь try/catch. Где-то словил TypeError, где-то таймаут, где-то сервер вернул 500. В итоге половина кода превращается в кашу проверок, а другая половина — в обработчики ошибок. Но проблема не в том, что мы ловим ошибки. Проблема в том, что fetch заставляет нас их ловить везде и всегда.

Библиотека safe-fetch решает эту проблема. Её задача проста: убрать try/catch из проектов навсегда. Как это работает и какие плюсы дает — в материале.

#библиотека #javascript
🔥7
SolidJS и Qwik: будущее фронтенда?

Пока два лагеря спорят о том, что лучше — React или Vue, а третий тихонько пользуется Angular, появились две тёмные лошадки, которые по всем показателям обходят старичков.

SolidJS похож на React, но без виртуального DOM. Qwik — проект создателя Angular, который предлагает работу кода без гидратации. Мы решили разобраться в их особенностях и подготовили статью с плюсами и минусами решений, а также со своим мнением и рассуждениями о их будущем.

Подробности по ссылке.

А вы что думаете?

#фронтенд #react #vue #solidjs #qwik
🤔7👍21
Лучший гайд по HTTP для начинающих

HTTP — это ключевой протокол в Интернете. Но начинающим часто бывает сложно разобраться во всех его терминах: что за протокол, что за методы, что за клиенты и серверы?

Я нашёл один из самых понятных и простых гайдов по HTTP, который позволит вам разобраться с ним с полного нуля. Никаких сложных определений и заумных терминов! Только понятные примеры и наглядная графика. Смотрим тут.

#видео #http
💩5🤩3
Что такое всплытие в JavaScript?

Пишите свой вариант в комментах, а потом читайте спойлер.

Всплытие событий в JavaScript — это фаза обработки, когда событие, возникшее на элементе, автоматически поднимается вверх по дереву DOM к его родителям вплоть до document и window.

Например, если кликнуть на кнопку внутри div, сначала событие сработает на кнопке, затем на div, потом на body и так далее. Это позволяет использовать делегирование событий: вместо того чтобы вешать обработчик на каждую кнопку, можно повесить один на контейнер и обрабатывать клики через
event.target.

Если нужно остановить всплытие, используется метод event.stopPropagation().


#вопросответ
👍8🔥41
Разве JS не лучший язык программирования? За что его ненавидеть?
😁33💩6👍4🤣43👎3
Делегирование событий в JavaScript: когда обычного всплытия недостаточно

По мере роста фронтенд-приложений управление пользовательскими взаимодействиями становится все более важным. Добавление обработчика событий на каждый интерактивный элемент — плохая практика: это усложняет код, увеличивает расход памяти и снижает производительность. Здесь на помощь приходит делегирование событий (event delegation).

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

#javascript
👍4🤔31
20 приемов TypeScript, которые должен знать каждый разработчик

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

Исправляем это упущение и делимся подборкой из 20 советов.

Если знаете что-то ещё крутое, делитесь в комментариях.

#typescript
👍3👎1🔥1
Как устроен Node.js изнутри

Node.js — интересный инструмент для веб-разработчиков. В этой статье мы узнаем, из чего состоит Node.js, разберёмся, как внутренние компоненты Node.js взаимодействуют друг с другом, и изучим репозиторий проекта Node.js на GitHub.

https://www.smashingmagazine.com/2020/04/nodejs-internals/

#бэкенд #nodejs
🔥2
Деструктуризация в JavaScript

Деструктуризация — это удобный инструмент получения данныхв JS. Он позволяет «распаковывать» сразу много значений из массивов или объектов во множество переменных. Это, например, активно используется в React-хуках.

Простейший пример:

const timers = [10, 20, 30];
const [first, second, third] = timers;


Здесь мы одной строкой задаем значения из массива сразу трём переменным — first, second, third.

Подробнее о возможностях и фишках деструктуризации можно прочитать в этой статье.

#javascript #основы
5👍5👎1
Нет, ну я знал, что программирование это то ещё извращение, но чтоб настолько...
🤣29😁5
Old but gold: Десять советов по улучшению CSS-переходов и анимации

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

Как избежать негативных отзывов при создании собственных виджетов? В этой статье автор собрал советы и рекомендаций для CSS анимаций:

https://joshcollinsworth.com/blog/great-transitions

#css
🔥1
Forwarded from Типичный программист
Лимитка для комьюнити выходит в прод! Успей залететь в розыгрыш

Уже скоро День программиста, и к этому моменту наш безалкогольный IPA будет разлит!

Вы выбрали название и концепт упаковки, а наши коллеги по коллабу из Paradox уже отдали этикетки в печать.

И пока мы с вами ожидаем релиза, запускаем специальный розыгрыш.

Победитель получит коробку «ТОКСИЧНЫЙ ПРОГРАММИСТ» с шестью банками. Подробнее с правилами вы можете ознакомиться здесь.

Для участия достаточно:
— быть подписанным на @tproger и @paradox_beer;
— оставить реакцию и любой комментарий под этим постом;
— нажать кнопку «Участвую».

Итоги подведём 15 сентября. Победителя выберем с помощью бота. Всем удачи!

Участников: 1082
Призовых мест: 1
Дата розыгрыша: 18:00, 15.09.2025 MSK (5 часов)
🔥31
Вышел Golang 1.25. Что нового?

В первую очередь релиз Golang 1.25 направлен на производительность и улучшение инструментов. Добавили новый сборщик мусора, автонастройку GOMAXPROCS для контейнеров, пакеты testing/synctest, json/v2.

В статье мы собрали самые заметные изменения Go 1.25 и рассказали про сценарии их применения.

#golang #бэкенд
🔥31
20 частых антипаттернов в React и как их исправить: кратко, понятно, без мифов

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

Тут собраны типовые антипаттерны, которые можно встретить чаще всего. Но самое главное — советы по их устранению и предотвращению. Рекомендую изучить как начинающим, так и опытным react-разработчикам.

#react #фронтенд
🤔2👍1
Что такое ARIA и для чего используется во фронтенде?

Простой вопрос. Сможете ответить?

ARIA (Accessible Rich Internet Applications) — это набор дополнительных атрибутов, которые расширяют возможности HTML, SVG и других языков для создания более доступных интерфейсов.

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


#вопросответ
👍7🤔1
С каждым днём мы всё дальше от бога.

Накидайте в комментариях, что ещё стоит научить делать ИИ в проекте. Чем хуже вариант, тем лучше
😁356🤔1🤯1