Фронтенд Гайд
7.21K subscribers
623 photos
307 videos
294 links
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов!

Все представлено в виде готового кода, бери и юзай в своем проекте.

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Разработай прорывное решение для автоматического Code Review с помощью ИИ на хакатоне ЕВРАЗа 3.0🔥

🦾 Создай будущее Code Review с ИИ! 

Участвуйте в нашем уникальном хакатоне по созданию ИИ-чатбота, который станет незаменимым помощником для разработчиков ЕВРАЗа! Выберите одно из направлений — Python, TypeScript или C#, и разработайте решение для анализа кода на соответствие нашим стандартам. 

Дата: 29 ноября – 1 декабря 2024.
Формат: гибридный (онлайн и офлайн).
Призовой фонд: 500.000 рублей.

🧑‍💻 Присоединяйся к хакатону, если ты:
– AI-специалист;
– Frontend / Backend-разработчик;
– Студент или выпускник технического вуза.

⚡️ Зачем участвовать?
– Прокачаешь скиллы и получишь обратную связь от ведущих экспертов отрасли.
– Прикоснешься к ИТ в ЕВРАЗе.
– Получишь возможность стать частью масштабной и амбициозной команды ЕВРАЗа.

🔸 Регистрация уже открыта! Подай заявку до 25 ноября 23:59 МСК по ссылке.
👍13😁6
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Если навести мышь на изображение, то можно увидеть, что за ним скрывается текст.
🤔 Почему нельзя отправлять в get запросах чувствительную информацию?

🟠URL видны в истории браузера
GET-запросы отправляют данные через URL, который сохраняется в истории браузера. Это означает, что любой, кто имеет доступ к истории браузера, может увидеть эти данные.

🟠Логи сервера
Многие веб-серверы и прокси-серверы автоматически записывают URL всех запросов в свои логи. Чувствительная информация в URL будет сохранена в этих логах и может быть доступна администраторам серверов или в случае компрометации системы.

🟠Кэширование
Браузеры, прокси-серверы и промежуточные серверы могут кэшировать URL-адреса GET-запросов. Это означает, что чувствительная информация может быть сохранена в кэшах и доступна при последующих обращениях.

🟠Ограничения длины URL
Большинство браузеров и серверов имеют ограничения на длину URL (обычно около 2000 символов). Если данные слишком длинные, они могут быть обрезаны, что приведет к потере информации или ошибкам при обработке запроса.

🟠Видимость в реферере
Когда пользователь переходит по ссылке с одной страницы на другую, URL-адрес исходной страницы часто передается как заголовок Referer в HTTP-запросе. Это означает, что чувствительная информация в URL может быть передана сторонним сайтам.

🟠HTTP-заголовки и GET-запросы
Данные в GET-запросах передаются через URL, в то время как данные в POST-запросах передаются в теле запроса. URL более подвержены утечке, так как они часто видны в различных местах (например, в журналах серверов, истории браузера и т.д.).

🚩Использование POST-запросов в качестве альтернативы

Для отправки чувствительной информации лучше использовать POST-запросы, так как данные передаются в теле запроса и не сохраняются в URL.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Secure Form</title>
</head>
<body>
<form action="/submit" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username">
<label for="password">Password:</label>
<input type="password" id="password" name="password">
<button type="submit">Submit</button>
</form>
</body>
</html>
😁8👍71
HTML. Внутри какого элемента используется тег <legend>?
Anonymous Poll
18%
<form>
8%
<input>
44%
<fieldset>
20%
Внутри любого блочного элемента
11%
Посмотреть ответы
CSS. Как превратить квадратное изображение в круглое?
Anonymous Quiz
11%
transform: round(50%);
4%
transform: round(50);
3%
transform round()
80%
border-radius: 50%;
2%
Посмотреть ответы
This media is not supported in your browser
VIEW IN TELEGRAM
⚡️ Анимация Пикачу в коробке

Анимированный пикачу в коробке отрисован и анимирован с помощью чисто CSS. Отдельные элементы графики сделаны с помощью DIV’ов и затем стилизованы.

Чтобы запустить анимацию нужно нажать на верх коробки и потянуть курсов в сторону. Попробуйте сами. Там же вы найдёте код проекта:
2
HTML. Какой тег указывает на то, что текст внутри элемента описывает пользовательский ввод с клавиатуры, голосовой ввод или ввод с использованием любого другого типа устройств ввода текста?
Anonymous Quiz
68%
input
16%
typed
4%
tpd
5%
kbd
7%
Посмотреть ответы
CSS вопрос: Выберите некорректное значение свойства background-color.
Anonymous Quiz
37%
currentcolor
7%
rgba(255, 0, 0, 0.3)
12%
hsl(120, 100%, 50%)
27%
Все вышеперечисленные корректны
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Интересная идея для прелоадера страницы на чистом CSS

Фигурки тетриса бесконечно складываются в правильном порядке — выглядит довольно оригинально
Может неплохо сказаться на конверсии
CSS. Какое наименьшее возможное значение специфичности селектора?
Anonymous Quiz
43%
0
34%
1
5%
5
4%
10
14%
Посмотреть результаты
CSS вопрос: Какое свойство используется для обтекания изображения текстом?
Anonymous Quiz
17%
wrap
21%
flow
41%
float
7%
align
10%
Такого свойства не существует
4%
Посмотреть ответы