Веб-страница
22.2K subscribers
2.17K photos
559 videos
2 files
4.44K links
Всё по фронтенду, бэкенду и девопсу в одном месте

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

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

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

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

Регистрация в перечне РКН: https://tprg.ru/64ai
Download Telegram
Примерно так теперь выглядит рынок труда для джунов с появлением ИИ
🤣60❤6🗿5🤯1
Бросаем кости на рандом с CSS random()

Как вы могли догадаться из заголовка, в CSS появилась функция random(), которая позволяет генерировать случайные значения для ваших стилей — позиции, цвета, размера и так далее.

Попробовать пока что её можно в Safari Technology Preview. А узнать о ней подробнее и посмотреть как же всё-таки кидать с помощью неё кости, можно в статье: https://webkit.org/blog/17285/rolling-the-dice-with-css-random/

#css
🔥7👍3🤩1
📎 Полезное для всех кто работает за компом «Как правильно сидеть за столом, чтобы не сломать спину и зрение»

Если вкратце, то:

🔘Стул и стол подбираются так, чтобы ноги стояли на полу, а колени были под углом 90°;
🔘Монитор должен находиться на уровне глаз на расстоянии вытянутой руки;
🔘Спина с опорой на поясницу слегка отклонялась назад;
🔘Отдых для глаз по правилу 20-20-20.

💊 — если сидишь уже дольше 2 часов не вставая

@prog_point #здровье
Please open Telegram to view this post
VIEW IN TELEGRAM
🫡6👍2
This media is not supported in your browser
VIEW IN TELEGRAM
Как работает балансировка нагрузки

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

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

#бэкенд
👍6❤5
This media is not supported in your browser
VIEW IN TELEGRAM
Мини-игра «Выровни картину»

Отличный пример pet-проекта. Взяв его за основу, вы сможете сделать собственную игру и поместить её в портфолио.

А ещё это хороший способ занять ребёнка на какое-то время, пока вы обдумываете, как пофиксить очередной баг.

Проект выполнен с помощью SVG, SCSS и библиотеки GSAP.js.

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

https://codepen.io/a-trost/pen/jOZXdoP

#codepen
👍8🔥5❤1
Используйте простейшие рабочие решения

Я тут к вам с неожиданным тейком пришёл. Автор статьи, которую я вам предлагаю прочитать, считает, что вот эти все сложные архитектуры, поиск идеального решения для будущего масштабирования — трата времени. Выбирать надо самый простой путь из возможных. Причём аргументация у него вполне адекватная и логичная, прочитать её можно в материале.

А вы согласны с ним?
😁12
This media is not supported in your browser
VIEW IN TELEGRAM
Если вы не представляете свою жизнь без VS Code, то теперь ещё меньше поводов покидать его

Нашёл для вас расширение, в котором вы можете рисовать прям внутри редактора. Может пригодиться, если нужно накидать какой-то набросок или нарисовать схему приложения.

Забираем по ссылке.

#vscode #инструменты
👍17❤7
This media is not supported in your browser
VIEW IN TELEGRAM
Используем @starting-style для ваших CSS-анимаций

Вы слышали о правиле @starting-style? Это новый инструмент, который позволяет использовать CSS-переходы при появлении элемента. Он сильно упрощает вёрстку, освобождая от костылей и делая код чище.

Как это работает рассказал Джош Комо в своей новой статье.

#css #фронтенд
🔥11❤3👍1
В чем отличие Map от обычного объекта?

В JavaScript и объекты, и Map позволяют хранить пары «ключ–значение», но у них разное назначение и поведение.

Объект ({}):

0️⃣ Это базовая структура для описания сущностей.
1️⃣ Ключи у объекта всегда строки или символы. Если использовать число или объект как ключ, он будет преобразован в строку.
2️⃣ У объекта есть прототип, поэтому в нём могут появляться унаследованные свойства, что иногда приводит к коллизиям.
3️⃣ Перебор возможен, но порядок ключей не всегда гарантирован и зависит от движка.
4️⃣ Чаще всего объект применяют как структуру данных для описания сущности с фиксированными полями.

Map:

0️⃣ Это специальная коллекция именно для работы с ассоциативными массивами.
1️⃣ Ключами могут быть любые типы: строки, числа, объекты, функции и даже NaN.
2️⃣ В Map порядок вставки элементов всегда сохраняется, и он учитывается при итерации.
3️⃣ У неё есть встроенные методы (set, get, has, delete, size), что делает работу с коллекцией удобнее.
4️⃣ Map не имеет прототипных ключей, только те, что явно добавлены.
5️⃣ За счёт внутренней оптимизации операции поиска и вставки выполняются быстрее, чем в объекте, особенно при большом количестве записей.

#вопросответ
Please open Telegram to view this post
VIEW IN TELEGRAM
🤔7👍4❤1🔥1🤯1
Balenciaga сделала новый аксессуар для настоящих айтишников. Всего 5к$ и он ваш.
🤣33❤3🫡1
10 ошибок, которые портят ваши проекты на React и Next JS

Иногда мы сами себе усложняем жизнь, выбирая неправильные решения. В этом видео разобраны 10 таких ситуаций — от неправильного размещения логики в компонентах до неэффективной загрузки данных.

Посмотрите и, возможно, узнаете здесь себя.

#react #nextjs
👎4❤1🔥1
Гайд по 2FA и MFA: как правильно внедрить многофакторную аутентификацию

По данным IBM, компрометация учётных данных стала топ-вектором атак со средней ценой ошибки $4,81 млн. Обычной связки «пароль + код из СМС» уже недостаточно для обеспечения безопасности данных.

Сегодня всё востребованнее становится двухфакторная и многофакторная аутентификация, которые предлагают более сложные методы проверок. Так уже работают некоторые банки, криптобиржи и другие сервисы, требующие действительно тщательной проверки.

В статье рассказываем, какие варианты внедрения MFA есть сегодня, что обеспечивает безопасность и как сделать безопасность удобной для пользователей. А ещё дарим чек-лист для успешного внедрения 2FA и MFA.

#безопасность
🔥3❤2👍1
Go Cookbook — кулинарная книга для гошников

На этом сайте собрана обширная коллекция полезных фрагментов кода на Go, примеров и рецептов для создания эффективных, надёжных и масштабируемых приложений.

Заходите, находите решение под вашу задачу и просто копируйте.

#golang
🔥7❤3
Почему Next.js ломает архитектуру и мешает строить масштабируемые системы

Разработчик и архитектор Харшал Патил жестко раскритиковал Next.js, назвав его «инструментом рендеринга, притворяющимся фреймворком». По его словам, система нарушает базовые принципы проектирования и только ухудшает разработку.

Подробнее можно прочитать у нас на сайте.

А вы согласны с ним?

#nextjs
🔥17💩5
Веб-страница
Вам больше не нужен JavaScript И не потому, что вы будете писать на другом языке. Просто сегодня CSS и HTML могут заменить значительную часть JS-кода. Здесь собраны интересные решения CSS, которые сегодня отлично работают и освобождают вас от необходимости…
JavaScript, отдохни! Делаем интерактивные вещи на HTML и CSS

Продолжаем делиться современными возможностями HTML и JS. Здесь собрали ещё пачку кейсов, где вы можете сократить количество JS-кода и облегчить свой сайт.

#javascript #html #css
❤6👍3
Очередное напоминание, что наркотики — зло! Занимайтесь айтишкой
😁42🗿4❤1👍1👎1
Представьте, что вам выпала возможность передать себе из прошлого совет

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

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

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

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

#фронтенд
🔥5❤2👍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
👍44❤8