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

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

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

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

<button onclick="window.location.href='#top'">Наверх</button>

👉 @frontendInterview

Джентельменский набор трушного фронтендера Опытные Frontend-разработчики собрали самые востребованные и бесплатные каналы, без которых не обойдется ни один настоящий фронтендер. Макеты для верстки — самый крупный канал с макетами для верстки. Первоисточник всех макетов в Telegram. Полезная вËрстка — канал с готовыми решениями повседневных задач: слайдеры, анимация, навигация и т.д. JavaScript заметки — образовательный канал с ежедневными практическими заметками по языку. codepen.js — готовые коды: реализованные на css и js анимации, скрипты и интерфейсы. Оживи статичные макеты Figma Start — каждый день выпускаем крутые макеты для верстки. Выбери самый интересный и удиви рекрутеров! Развивайся с нами, ведь так проще!

👉 @frontendInterview

❗️Создайте свое приложение для прогноза погоды всего за 1 час ❓Хотите научиться создавать полезные приложения и работать со сторонними веб-сервисами? ⏰ Ждем вас на открытом вебинаре 4 сентября в 20:00 мск, где мы разберем: - как работать с API сторонних веб-сервисов на примере создания приложения для прогноза погоды; - основные принципы работы с API и их интеграции в проекты; - как расширить функционал приложения и использовать больше браузерных инструментов. 🔥 Урок идеально подходит для тех, кто знает основы JavaScript (циклы, условия, функции, базовая работа с DOM). Встречаемся в преддверии старта курса «JavaScript Developer. Basic». Все участники вебинара получат специальную цену на обучение! 👉Регистрируйтесь прямо сейчас, чтобы не пропустить мероприятие: https://vk.cc/cA2r4D Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru erid 2SDnjc9FMjY

​Какие главные особенности куки ? Cookies (куки) — это небольшие кусочки данных, хранящиеся в браузере и используемые для сохранения информации о пользователе. Вот основные особенности: Хранение данных на клиенте Хранятся на стороне клиента (в браузере) и используются для сохранения информации, которая может быть полезна при последующих посещениях веб-сайта. Ограниченный размер Размер каждого куки ограничен (обычно до 4KB). Поэтому куки не подходят для хранения больших объемов данных. Срок действия (время жизни) Каждая кука имеет время жизни, которое задается параметром Expires или Max-Age. По истечении этого времени кука автоматически удаляется браузером. Доступность по домену и пути Доступны только для указанного домена и пути. Это позволяет ограничивать доступ к кукам для других страниц и поддоменов. Безопасность (HTTP-only и Secure) HTTP-only: Куки, установленные с флагом HttpOnly, недоступны через JavaScript, что помогает защитить данные от XSS-атак. Secure: Куки, установленные с флагом Secure, передаются только по защищенному HTTPS соединению. Передача с запросами Автоматически отправляются серверу с каждым HTTP-запросом к соответствующему домену, что позволяет серверу узнавать пользователя и сохранять его сессию. 👉 @frontendInterview

Мы за бесплатное обучение Подборка каналов для роста и развития в сфере Frontend-разработки 👥 Reactify | Frontend Разработка — активное сообщество для бесплатного обучения веб-разработке. 💼 Frontend | Собеседования — огромная база актуальной теории для Frontend Разработчиков. Обучайтесь, общайтесь, растите вместе с нами. Станьте частью IT-сообщества!

Count the photos! Вам дана строка, представляющая собой дорогу. На ней есть камеры, обозначенные символом ".", а также машины, которые двигаются вправо - ">", и машины, которые двигаются влево - "<". Камера делает фотографию, если машины двигается в её сторону. Создайте функцию, которая вернет количество сделанных фото. Примеры: For ">>." -> 2 photos were taken For ".>>" -> 0 photos were taken For ">.<." -> 3 photos were taken For ".><.>>.<<" -> 11 photos were taken 👉 @frontendInterview

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

Что такое :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

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

Партнёрская программа рекрутинга в Яндекс Еду Станьте партнёром Яндекс Еды по привлечению курьеров и получите кучу преимуществ: 💰Платим до 25 000 ₽ за успешного кандидата 📞Поддержка на всех этапах 📅Свободное расписание 📊Удобные инструменты для работы Приводите новых курьеров и получайте в среднем 187 000 ₽ в месяц! Зарегистрироваться #реклама eda.yandex.ru О рекламодателе

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

Такси для бизнеса. Яндекс Go Оптимизируйте свои расходы и повысьте эффективность бизнеса с Яндекс Go Узнать больше #реклама business.go.yandex О рекламодателе

Как сделать фон полупрозрачным? Для создания цветного фона разной степени прозрачности применяется свойство background или background-color, в качестве значения указывается функция rgba(), в которой цвет задаётся четырьмя параметрами: красная, зелёная, синяя составляющая цвета и уровень прозрачности. Значение 0 соответствует полной прозрачности, 1 — непрозрачности, а промежуточное значение вроде 0.5 — полупрозрачности. Чтобы полупрозрачность элемента была заметна, под него следует подложить фоновую картинку. В примере на картинке для веб-страницы установлено фиксированное фоновое изображение и добавлен <div> с классом overlay, для которого задан белый фон с уровнем прозрачности 0.8. 👉 @frontendInterview

👉 @frontendInterview

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

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

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

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

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

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