Фронтенд Гайд
Открыть в Telegram
Канал для фронтендеров, много полезных лайфхаков, фичей, макетов, тестов! Все представлено в виде готового кода, бери и юзай в своем проекте. 6ad1a2aabe82d4fbb0d6
Больше7 646
Подписчики
-824 часа
-87 дней
-3330 дней
Архив постов
\n \n \n\n2️⃣ Атрибут defer:\n\n Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.\n\n \n \n \n \n\n3️⃣ Атрибут async:\n\n Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.\n \n \n ","datePublished":"2024-11-17T09:00:00Z","dateModified":"2024-11-17T09:00:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1231},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":8}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2999","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2999","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2999","headline":"⚡️Всероссийский Хакатон ФИЦ 2024 🚀Попробуйте себя в одном из предложенных кейсов: - Информационная система уп…","articleBody":"⚡️Всероссийский Хакатон ФИЦ 2024\n\n🚀Попробуйте себя в одном из предложенных кейсов:\n- Информационная система управления проектами в строительстве\n- Выявление трендов в сфере бухгалтерского учета\n- Разработка модуля классификации опор ЛЭП\n- Погонщик нейронок\n- Оценка уровня экспертности по резюме\n- Контекстный перевод названий научных работ\n- Прогнозирование бизнес драйверов\n- Формирование фото и видео контента с использованием нейросетей на основе биографии и фото персоны\n- Разработка алгоритма трекинга людей в видеопотоке с нескольких камер\n- Цифровая карта подземных коммуникаций с использованием Cesium\n- Симуляция записи в расписание\n- Цифровой сервис для ведения реестра зеленых насаждений города Москвы\n- Предсказание необходимого количества средств досмотра\n- Система контроля и управления доступом\n- Семантический делитель текстов\n- Разработка сервиса печати этикеток для производителей одежды\nИ др. кейсы смотрите на сайте: https://фиц2024.рф/hackathon \n\nХакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.\n\n🏆Призовой фонд: 6 000 000 руб.\n🔥Дедлайн регистрации: 26 ноября, 23:59\n📅Даты отборочного этапа: 29 ноября - 2 декабря\n🦾Даты финала: 3 - 4 декабря\n\nЗарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon\n\nРеклама. ООО «Акселератор Возможностей», ИНН: 9704005146, erid: 2Vtzqvam3wk","datePublished":"2024-11-17T07:00:10Z","dateModified":"2024-11-28T13:33:54Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":985},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2998","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2998","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2998","headline":"Фронтенд Гайд","datePublished":"2024-11-16T09:00:02Z","dateModified":"2024-11-16T09:00:02Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1042},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":17},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":6},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2997","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2997","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2997","headline":"Фронтенд Гайд","datePublished":"2024-11-15T17:00:07Z","dateModified":"2024-11-15T17:00:07Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":3,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1068},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":3}]}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2996","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2996","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2996","headline":"💻 ГОТОВЫЕ СТИЛИ ДЛЯ ВЕБ-РАЗРАБОТКИ НА КАНАЛЕ WEB BEKS ✅ Готовые шаблоны для вашего сайта ✅ Решения по HTML, C…","articleBody":"💻 ГОТОВЫЕ СТИЛИ ДЛЯ ВЕБ-РАЗРАБОТКИ НА КАНАЛЕ WEB BEKS\n\n✅ Готовые шаблоны для вашего сайта\n\n✅ Решения по HTML, CSS, и JavaScript, которые можно сразу использовать\n\n✅ Оптимизированный код для современных веб-проектов\n\n✅ Инструкции и примеры для новичков и профессионалов \n\nПодписывайся и экономь время на разработку!","datePublished":"2024-11-15T16:00:02Z","dateModified":"2024-11-15T16:00:02Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1203},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":3}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2995","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2995","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2995","headline":"Фронтенд Гайд","datePublished":"2024-11-15T15:00:35Z","dateModified":"2024-11-15T15:00:35Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1105},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":5}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2994","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2994","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2994","headline":"ZUMA Легендарная игра, реализованная на HTML, SCSS и TypeScript.","articleBody":"ZUMA\n\nЛегендарная игра, реализованная на HTML, SCSS и TypeScript.","datePublished":"2024-11-14T15:05:00Z","dateModified":"2024-11-14T15:05:00Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1305},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":19}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2993","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2993","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2993","headline":"В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻 Что такое лега…","articleBody":"В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻\n\nЧто такое легаси код и откуда он берется? Как обнаружить легаси в проекте? Какую ошибку постоянно совершают лиды? Как предупредить проблему в будущем? Когда стоит отказаться от рефакторинга?\n\nОбо всем этом расскажет лид frontend-разработки Мерка, Никита Шальнев, на онлайн-митапе «Как лиду работать с легаси?»\n\nВстречаемся с вами в 19:00 МСК в канале @merkteam ⬅️\n\n👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.","datePublished":"2024-11-14T09:29:57Z","dateModified":"2024-11-14T09:29:57Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":1,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1246},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":3},{"@type":"InteractionCounter","interactionType":"https://schema.org/CommentAction","userInteractionCount":1}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2992","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2992","mainEntityOfPage":"https://telemetr.io/ru/channels/1681900587-frontend_dev5/posts/2992","headline":"Фронтенд Гайд","datePublished":"2024-11-13T15:00:02Z","dateModified":"2024-11-13T15:00:02Z","author":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"publisher":{"@type":"Organization","name":"Фронтенд Гайд","url":"https://telemetr.io/ru/channels/1681900587-frontend_dev5","image":"https://img.telemetr.io/c/1PP5aP/5339498914732170172?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":1185},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":8}]}}]}
Anonymous voting
Anonymous votingAnonymous voting
Anonymous voting
7 646
Javascript вопрос: Как назначить функцию fn обработчиком нажатия на элемент element?
7 646
🖥 Material Input Animation
Заголовок поля смещается как только начинают вводить данные.
Примеры применения:
- поиск фамилии в списках;
- поиск контакта для денежного перевода.
7 646
В новом выпуске подкаста «Времена НаСтали» руководитель отдела frontend-разработки Олег Рогов и руководитель команды дизайна Анна Труфанова рассказали о low-code решениях в веб-дизайне.
Технология использования платформ позволяет создавать приложения без глубоких знаний в области программирования. Такой подход полезен, если к разработке веб-интерфейсов нужно привлечь бизнес-аналитиков или экспертов из другой нетехнической области.
В подкасте ответили на следующие вопросы.
— Как low-code влияет на процесс дизайна?
— В чем главные преимущества использования этих инструментов по сравнению с традиционными методами разработки?
— Нужно ли иметь базовые знания программирования?
— Каковы текущие тенденции и будущее развитие low-code инструментов в контексте дизайна?
Слушать подкаст на Яндекс.Музыке!
7 646
CSS. Какой псевдокласс позволяет обратиться к уже посещенным пользователем ссылкам?
7 646
Javascript вопрос: Имеется объект, в котором все ключи являются целыми числами. В каком порядке будут перебираться свойства объекта с помощью цикла for..in?
7 646
Как получить реальный опыт во фронтенд-разработке за 7 дней?
А именно:
- Сверстать веб-сайт на HTML + CSS;
- Реализовать функционал на JavaScript;
- Пощупать фронтенд-фреймворк Angular;
- Подключить Backend и загрузить сайт на хостинг.
В итоге своими руками разработаешь качественный сайт, который не стыдно добавить в портфолио или продать.
Такой опыт можно получить на бесплатном практикуме от Айтилогии с поддержкой от опытных разработчиков на каждом этапе.
👉 Приходи на бесплатное обучение и зови с собой друзей
Бонусом получишь гайд для поиска работы и заказов на фронтенд-разработку.
7 646
Javascript вопрос: К какой метке внутри цикла может "прыгнуть" break?
7 646
📌 Как задать последовательность выполнения скриптов?
Последовательность выполнения скриптов можно контролировать несколькими способами:
1️⃣ Порядок размещения в HTML:
Скрипты выполняются в порядке их появления в документе.
<script src="script1.js"></script>
<script src="script2.js"></script>
defer:
Скрипты с атрибутом defer выполняются в порядке их появления после загрузки и парсинга HTML.
<script src="script1.js" defer></script>
<script src="script2.js" defer></script>
async:
Скрипты с атрибутом async выполняются по мере их загрузки, независимо от порядка в HTML.
<script src="script1.js" async></script>
<script src="script2.js" async></script>7 646
⚡️Всероссийский Хакатон ФИЦ 2024
🚀Попробуйте себя в одном из предложенных кейсов:
- Информационная система управления проектами в строительстве
- Выявление трендов в сфере бухгалтерского учета
- Разработка модуля классификации опор ЛЭП
- Погонщик нейронок
- Оценка уровня экспертности по резюме
- Контекстный перевод названий научных работ
- Прогнозирование бизнес драйверов
- Формирование фото и видео контента с использованием нейросетей на основе биографии и фото персоны
- Разработка алгоритма трекинга людей в видеопотоке с нескольких камер
- Цифровая карта подземных коммуникаций с использованием Cesium
- Симуляция записи в расписание
- Цифровой сервис для ведения реестра зеленых насаждений города Москвы
- Предсказание необходимого количества средств досмотра
- Система контроля и управления доступом
- Семантический делитель текстов
- Разработка сервиса печати этикеток для производителей одежды
И др. кейсы смотрите на сайте: https://фиц2024.рф/hackathon
Хакатон пройдет в 2 этапа: Отборочный этап в Онлайн, Финал в Офлайн.
🏆Призовой фонд: 6 000 000 руб.
🔥Дедлайн регистрации: 26 ноября, 23:59
📅Даты отборочного этапа: 29 ноября - 2 декабря
🦾Даты финала: 3 - 4 декабря
Зарегистрируйтесь для участия в хакатоне: https://фиц2024.рф/hackathon
Реклама. ООО «Акселератор Возможностей», ИНН: 9704005146, erid: 2Vtzqvam3wk
7 646
💻 ГОТОВЫЕ СТИЛИ ДЛЯ ВЕБ-РАЗРАБОТКИ НА КАНАЛЕ WEB BEKS
✅ Готовые шаблоны для вашего сайта
✅ Решения по HTML, CSS, и JavaScript, которые можно сразу использовать
✅ Оптимизированный код для современных веб-проектов
✅ Инструкции и примеры для новичков и профессионалов
Подписывайся и экономь время на разработку!
7 646
В жизни каждого разработчика однажды наступает момент, когда перед ним возникает оно… ЛЕГАСИ 👻
Что такое легаси код и откуда он берется? Как обнаружить легаси в проекте? Какую ошибку постоянно совершают лиды? Как предупредить проблему в будущем? Когда стоит отказаться от рефакторинга?
Обо всем этом расскажет лид frontend-разработки Мерка, Никита Шальнев, на онлайн-митапе «Как лиду работать с легаси?»
Встречаемся с вами в 19:00 МСК в канале @merkteam ⬅️
👉 Подписывайтесь, чтобы не пропустить митап, а заодно быть в курсе других мероприятий, открытых вакансий в Мерке и полезных айти-новостей от меркурианских разработчиков.
