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

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

По всем вопросам: @it_dashka
Реклама: https://telega.in/channels/frontend_dev5/card
Download Telegram
Javascript вопрос: К какой метке внутри цикла может "прыгнуть" break?
Anonymous Quiz
33%
Только выше директивы
41%
Только ниже директивы
15%
И выше, и ниже
11%
Посмотреть ответы
👨‍💻4
👀7😁4
Javascript вопрос: Имеется объект, в котором все ключи являются целыми числами. В каком порядке будут перебираться свойства объекта с помощью цикла for..in?
Anonymous Quiz
48%
В порядке создания (чем раньше, тем первее)
11%
В порядке создания (чем позже, тем первее)
34%
По возрастанию ключей
7%
Посмотреть ответы
👍1
CSS. Какой псевдокласс позволяет обратиться к уже посещенным пользователем ссылкам?
Anonymous Poll
14%
:visit
3%
:seen
9%
:watched
70%
:visited
4%
Посмотреть ответы
В новом выпуске подкаста «Времена НаСтали» руководитель отдела frontend-разработки Олег Рогов и руководитель команды дизайна Анна Труфанова рассказали о low-code решениях в веб-дизайне.
Технология использования платформ позволяет создавать приложения без глубоких знаний в области программирования. Такой подход полезен, если к разработке веб-интерфейсов нужно привлечь бизнес-аналитиков или экспертов из другой нетехнической области.
В подкасте ответили на следующие вопросы.
— Как low-code влияет на процесс дизайна?
— В чем главные преимущества использования этих инструментов по сравнению с традиционными методами разработки?
— Нужно ли иметь базовые знания программирования?
— Каковы текущие тенденции и будущее развитие low-code инструментов в контексте дизайна?

Слушать подкаст на Яндекс.Музыке!
This media is not supported in your browser
VIEW IN TELEGRAM
🖥 Material Input Animation

Заголовок поля смещается как только начинают вводить данные.

Примеры применения:
- поиск фамилии в списках;
- поиск контакта для денежного перевода.
Javascript вопрос: Как назначить функцию fn обработчиком нажатия на элемент element?
Anonymous Quiz
28%
element.on("click", fn)
4%
42%
element.onclick = fn
8%
Посмотреть ответы
Разработай прорывное решение для автоматического 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
5%
tpd
5%
kbd
7%
Посмотреть ответы