frontendinterview | Unsorted

Telegram-канал frontendinterview - Frontend Interview - собеседования по Javascript / Html / Css

12730

Канал для подготовки к собеседованиям по фронтенду Админ, сотрудничество, реклама: @seniorFrontPromo, @maria_seniorfront Менеджер по рекламе: @Spiral_Yuri Купить рекламу: https://telega.in/c/frontendinterview Номер заявления в РКН № 4959045795

Subscribe to a channel

Frontend Interview - собеседования по Javascript / Html / Css

04 Sep 2024 13:17

Как сделать ссылку на верх веб-страницы?

Ссылка «наверх» позволяет быстро перейти к верхней части веб-страницы, где обычно располагается логотип, навигация по сайту и другие типовые элементы сайта.

Для создания такой ссылки, в её адресе достаточно указать #top. Все современные браузеры понимают такой адрес и при щелчке по этой ссылке переходят к верхней части текущей веб-страницы.

<a href="#top">Наверх</a>


Вместо ссылки можно использовать кнопку, а переход по ссылке реализовать через JavaScript. Для этого к <button> добавляем событие onclick, внутри которого пишем window.location.href со значением #top
<button onclick="window.location.href='#top'">Наверх</button>


👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

03 Sep 2024 18:02

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

02 Sep 2024 16:00

​Какие главные особенности куки ?

Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности:

Хранение данных на клиенте
Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта.

Ограниченный размер
Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных.

Срок действия (время жизни)
Каждая кука имеет время жизни, которое задается параметром Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером.

Доступность по домену и пути
Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов.

Безопасность (HTTP-only и Secure)
HTTP-only: Куки, установленные с флагом HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак.
Secure: Куки, установленные с флагом Secure, передаются только по защищенному HTTPS соединению.

Передача с запросами
Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

01 Sep 2024 18:02

Count the photos!

Вам дана строка, представляющая собой дорогу. На ней есть камеры, обозначенные символом ".", а также машины, которые двигаются вправо - ">", и машины, которые двигаются влево - "<". Камера делает фотографию, если машины двигается в её сторону. Создайте функцию, которая вернет количество сделанных фото.

Примеры:
 For ">>." -> 2 photos were taken
For ".>>" -> 0 photos were taken
For ">.<." -> 3 photos were taken
For ".><.>>.<<" -> 11 photos were taken

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

31 Aug 2024 18:01

Что такое :root в CSS?

Псевдокласс :root нужен для обращения к самому главному родительскому элементу документа. Его также называют корневым элементом. В случае HTML-документа самым главным родителем всей страницы будет тег <html>. Часто :root используется для того, чтобы задавать кастомные свойства.

Пример
Укажем в документе нужный нам шрифт и создадим несколько кастомных свойств:

:root {
  font-family: 'Oswald', sans-serif;
  --button-size: 40px;
  --main-color: #bada55;
}


🛠 Поскольку :root — это псевдокласс, его специфичность будет выше, чем селекторов по тегу html или svg.

В примере ниже фон документа окрасится в персиковый цвет, а не в томатный.
:root {
  background-color: peachpuff;
}

html {
  background-color: tomato;
}


👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

30 Aug 2024 07:33

Партнёрская программа рекрутинга в Яндекс Еду

Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ:

💰Платим до 25 000 ₽ за успешного кандидата

📞Поддержка на всех этапах

📅Свободное расписание

📊Удобные инструменты для работы

Приводите новых курьеров и получайте в среднем 187 000 ₽ в месяц!


Зарегистрироваться

#реклама
eda.yandex.ru
О рекламодателе

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

29 Aug 2024 08:34

Такси для бизнеса. Яндекс Go

Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go


Узнать больше

#реклама
business.go.yandex
О рекламодателе

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

27 Aug 2024 18:03

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

26 Aug 2024 08:36

Методичка: как сделать онлайн-встречи эффективнее

Надоело ждать коллег, которые постоянно забывают о встречах, а отсутствие повестки и потерянные договоренности мешают нормально работать?

Команда МТС Линк собрала на 37 страницах полезные материалы, чек-листы и кейсы, которые помогают компаниям проводить эффективные совещания в онлайне с помощью сервиса Встречи.

Из методички узнаете:
- Как создать постоянную ссылку и подключаться на встречи в 2 клика,
- Как делать заметки и работать с файлами, не переживая за качество связи и безопасность данных.
- Как облегчает жизнь ИИ, который расшифровывает созвоны в текст и автоматически отправляет расшифровку на почту.

Еще в методичке описаны 7 способов оценки текущей эффективности ваших онлайн-встреч.

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

Скачать

#реклама
mts-link.ru
О рекламодателе

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

25 Aug 2024 12:03

React быстро

«React быстро. 2-е издание» предлагает уникальный подход к освоению фреймворка React. Более 80 компактных примеров проведут читателя от изучения основ работы к созданию довольно сложных приложений. В книге подробно описаны многие функциональные компоненты, хуки React и средства доступности веб-приложений, а также представлены интересные проекты для отработки новых навыков.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

24 Aug 2024 18:07

Что такое миксины в CSS препроцессорах?

Миксины Используются в препроцессорах, таких как Sass и Less, для группировки CSS-деклараций, которые можно повторно использовать во всем стилевом файле. Это упрощает поддержку и изменение стилей, позволяя избежать повторения кода.

Пример использования в Sass:

@mixin border-radius($radius) {
     -webkit-border-radius: $radius;
        -moz-border-radius: $radius;
         -ms-border-radius: $radius;
             border-radius: $radius;
}

.button {
     @include border-radius(10px);
}


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

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

22 Aug 2024 18:01

Как подружить веб-компоненты и JS-фреймворки

У крупных технокомпаний, как правило, есть множество ИТ-продуктов. Разрабатывают их, обычно, не одни и те же люди, целые группы команд. При этом фронтенд во всех этих продуктах обычно пишут на одних и тех же технологиях: берут готовый шаблон, что-нибудь обновляют — и готово. А что делать, если все эти продукты написаны на разных фреймворках? Конечно, можно сделать десяток UI-наборов на все случаи жизни, но будет крайне дорого их писать и поддерживать.

Могут ли веб-компоненты помочь разрешить эту проблему? Ответ в статье.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

21 Aug 2024 07:36

ТОП-4 Курса по Программированию

⚡Tutortop — маркетплейс курсов №1 по количеству школ-партнеров, курсов и реальных отзывов студентов.

✅Хотите стать программистом, но не знаете с какого языка начать?
Помогаем разобраться в самых популярных и востребованных языках программирования.
Подарок в конце подборки!

Выбрать

#реклама 16+
tutortop.ru
О рекламодателе

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

19 Aug 2024 16:00

​Как увеличить в размере при наведении элемент, не сдвигая соседние?

Чтобы увеличить элемент в размере при наведении, не сдвигая при этом соседние элементы, можно использовать CSS свойство transform с функцией scale. Это позволяет изменять размер элемента, не влияя на его положение и соседние элементы, так как трансформация происходит в контексте самого элемента и не меняет его фактические размеры в документе.

Пример использования

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Увеличение при наведении</title>
    <style>
        .container {
            display: flex;
            gap: 10px;
        }
        .item {
            width: 100px;
            height: 100px;
            background-color: lightblue;
            text-align: center;
            line-height: 100px;
            transition: transform 0.3s;
        }
        .item:hover {
            transform: scale(1.2); /* Увеличение размера при наведении */
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
    </div>
</body>
</html>


Объяснение
`transition: transform 0.3s;`: Это свойство добавляет плавный переход для любых изменений, связанных с трансформацией элемента. В данном случае, это применимо к изменению масштаба (transform: scale(1.2)), которое происходит при наведении.
`transform: scale(1.2);`: Эта строка кода увеличивает размер элемента на 20% при наведении (hover). Значение 1.2 означает увеличение на 20% по обеим осям (X и Y).
Контейнер с `display: flex;` Используется для демонстрации того, что элементы остаются на своих местах и не сдвигаются при увеличении одного из них. gap добавляет пространство между элементами.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

19 Aug 2024 08:35

Партнёрская программа рекрутинга в Яндекс Еду

Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ:

💰Платим до 25 000 ₽ за успешного кандидата

📞Поддержка на всех этапах

📅Свободное расписание

📊Удобные инструменты для работы

Приводите новых курьеров и получайте до 187 000 ₽ в месяц!


Зарегистрироваться

#реклама
eda.yandex.ru
О рекламодателе

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

04 Sep 2024 11:17

Джентельменский набор трушного фронтендера

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

Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram.

Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д.

JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку.

codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты

Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров!

Развивайся с нами, ведь так проще!

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

03 Sep 2024 14:00

❗️Создайте свое приложение для прогноза погоды всего за 1 час

❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами?

⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем:

- как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды;
- основные принципы работы с API и их интеграции в проекты;
- как расширить функционал приложения и использовать больше браузерных инструментов.

🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM).

Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA2r4D

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjc9FMjY

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

02 Sep 2024 14:00

Мы за бесплатное обучение

Подборка каналов для роста и развития в сфере Frontend-разработки

👥 Reactify | Frontend Разработка — активное сообщество для бесплатного обучения веб-разработке.

💼 Frontend | Собеседования — огромная база актуальной теории для Frontend Разработчиков.

Обучайтесь, общайтесь, растите вместе с нами. Станьте частью IT-сообщества!

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

01 Sep 2024 12:03

Настольная книга веб-дизайнера. Практический курс по вебдизайну и проектированию сайтов

Эта книга научит вас тонкостям веб-дизайна и проектированию сайтов. Учебник включает в себя все этапы работы вебдизайнера: начиная с проектирования и заканчивая реализацией сайта.

Книга посвящена описанию этапов разработки сайтов: прототипированию, дизайну веб-страниц, нарезке, дизайну мобильной версии и запуску сайта.
Также вы узнаете: как сделать продающий сайт, как правильно заполнить техзадание и создать базу образцов, как собрать семантическое ядро, купить хостинг и домен, какой конструктор сайтов выбрать. Вы легко создадите первую страницу сайта, состоящую из: хедера, слайдера, преимуществ, модуля «О компании», каталога товаров, схемы работы, отзывов, фотогалереи и футера.

Для начинающих специалистов.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

31 Aug 2024 11:01

Отдел разработки на пути к релизу

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

29 Aug 2024 18:04

Один день из жизни JavaScript разработчика и его техлида

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

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

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

28 Aug 2024 11:02

Как сделать фон полупрозрачным?

Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности.

Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую картинку. В примере на картинке для веб-страницы установлено фиксированное фоновое изображение и добавлен <div> с классом overlay, для которого задан белый фон с уровнем прозрачности 0.8.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

26 Aug 2024 14:06

​Что такое замыкание ?

Это когда функция запоминает своё лексическое окружение даже после того, как она выполняется вне своей области видимости. Другими словами, функция, объявленная в определённой области видимости, сохраняет доступ к переменным этой области, даже когда она вызывается за пределами своего первоначального контекста. Это важно по нескольким причинам:

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

Пример:

function создатьСчетчик() {
    let количество = 0; // переменная количество "замкнута" внутри функции увеличить

    function увеличить() {
        количество += 1;
        return количество;
    }

    return увеличить;
}

const счетчик = создатьСчетчик();
console.log(счетчик()); // 1
console.log(счетчик()); // 2


В этом примере, функция увеличить имеет доступ к переменной количество, даже после того как создатьСчетчик завершила выполнение. Это происходит благодаря механизму замыканий: увеличить "запоминает" переменные, которые были в её области видимости в момент создания.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

25 Aug 2024 18:02

Find the Missing Number

Вам дан неотсортированный массив, состоящий из чисел от 0 до 100. Но одного числа не хватает, найдите это число.

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

25 Aug 2024 08:36

Запустите рекламу в телеграм-каналах с Яндекс Директом

Перфоманс-реклама теперь в телеграм-каналах ⚡

Яндекс Директ знает, как привлечь целевую аудиторию 💰👌

Попробовать

#реклама
yandex.ru
О рекламодателе

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

24 Aug 2024 11:03

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

21 Aug 2024 11:02

​Как сделать перенос слов?

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

HTML переносит слова на другую строку целиком, без учёта правил расстановки переносов. Из-за этого правый край абзаца выглядит неровным и напоминает «лесенку»
Выравнивание текста по ширине убирает неровность правого края, но между некоторыми словами появляются слишком широкие промежутки.

Расстановка переносов слов позволяет оптимизировать пробелы между словами и повысить эстетическую привлекательность блока текста. Есть несколько вариантов как этого добиться: с помощью элемента <wbr>, используя спецсимвол &shy; и через свойство hyphens.

Использование элемента <wbr>
Элемент <wbr> ставится в тех местах, где предполагается возможный перенос. Браузер уже сам, в зависимости от расположения текста решает, делать перенос в этом месте или нет
У <wbr> есть определённые недостатки, в частности, при переносе не добавляется дефис, обозначающий перенос.

Использование спецсимвола &shy;
Спецсимвол &shy; начинается со знака амперсанда (&) и завершается точкой с запятой. Работает этот спецсимвол схожим с <wbr> образом — там, где в тексте встречается &shy;, браузер при необходимости добавляет перенос слова. Обратите внимание, что &shy; при переносе слов добавляет символ дефиса.

Использование свойства hyphens
Перечисленные выше методы имеют один минус — это ручная расстановка переносов в тексте. Свойство hyphens же задействует встроенный в браузер словарь, в котором, в том числе, указаны правила переноса множества слов.

Чтобы браузер понимал, с каким языком и словарём он должен работать, к тексту следует добавить атрибут lang с кодом языка. К примеру, кодом русского языка будет ru

Если на сайте предполагается один язык (к примеру, весь сайт только на русском), то атрибут lang пишется в элементе <html>. В случае использования нескольких языков, lang добавляется к абзацу <p> или другому подходящему текстовому элементу.

Для автоматической работы свойство hyphens задаём со значением auto и добавляем это свойство к абзацу

👉 @frontendInterview

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

20 Aug 2024 13:30

Хочешь прокачать навыки программирования за 3 дня? Присоединяйся к праздничному интенсиву от METHED!

Ты создашь веб-приложение для отображения расписания автобусов в реальном времени, используя Node.js и JavaScript.

На интенсиве ты:
- Научишься создавать сервер на Node.js
- Разработаешь интерактивный интерфейс с помощью JavaScript
- Интегрируешь WebSocket для работы в реальном времени
- Научишься развертывать свои проекты на хостинге.

Количество мест ограничено!

Регистрируйся сейчас и прокачай свои навыки: https://tglink.io/37357a541bc9

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

19 Aug 2024 12:00

🚀 Вебинар для frontend и JavaScript разработчиков! 🚀
👉 Узнайте, какими задачами проверяют ваше знание JavaScript на интервью.

Мы разберем типы задач, которые могут дать прямо во время собеседования, и обсудим, как к ним подготовиться.

Этот вебинар поможет вам лучше понять тонкости разработки, анализировать задачи и эффективно готовиться к интервью. Примеры задач, их анализ и способы подготовки – все это и многое другое!

📅 Дата: 22.08.2024 в 20:00
🔗 Присоединяйтесь и улучшите свои навыки JavaScript!
Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение!

👉 Для участия и получения записи зарегистрируйтесь: https://vk.cc/czri2g

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…

Frontend Interview - собеседования по Javascript / Html / Css

18 Aug 2024 18:05

CSV representation of array

Создайте функцию, которая принимает двумерный массив и вернет его в формате CSV.

Пример:
input:

   [[ 0, 1, 2, 3, 4 ],
    [ 10,11,12,13,14 ],
    [ 20,21,22,23,24 ],
    [ 30,31,32,33,34 ]]


output:
     '0,1,2,3,4n'
    +'10,11,12,13,14n'
    +'20,21,22,23,24n'
    +'30,31,32,33,34'


👉 @frontendInterview

Читать полностью…
Subscribe to a channel